/*
 * Generation 22 — головна сторінка, візуальна мова "Henna" (затверджений
 * референс: reference/henna-dom.html + reference/henna.css), секційна
 * структура — за клієнтським ТЗ (успадкована від попередньої версії теми).
 * Усі класи скопійовані під префікс .g22-henna, аби не конфліктувати
 * з рештою тем (home.css лишається на диску, але не підключається тут).
 */

/*
 * Brand audit (Generation 22 brandbook) — Prompt SemiBold. Файл не має
 * кирилиці, тому він зарезервований для окремих латинських бренд-маркерів
 * і цифр. Основний UI використовує Manrope цілісно, без per-glyph змішування
 * двох гарнітур у межах одного українського рядка.
 * font-weight задекларовано широким діапазоном (400 800), аби браузер не
 * робив синтетичний bold/thin поверх єдиного доступного накреслення файлу
 * (SemiBold) — інакше заголовки (font-weight:800 у .g22-henna__heading)
 * ставали б "фейково" жирнішими, ніж сам шрифт.
 */
@font-face {
	font-family: 'Prompt';
	src: url('../fonts/Prompt-SemiBold.ttf') format('truetype');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/*
 * Токени Henna винесені на :root, аби бути доступними на ВСІХ сторінках
 * сайту, а не лише всередині .g22-henna (той div живе тільки в межах
 * front-page.php; хедер/футер і внутрішні сторінки — поза ним). Значення
 * в .g22-henna нижче лишені як є (той самий набір) — не заважають, той
 * самий каскад.
 */
:root {
	/* Purple/yellow here used to be hardcoded near-duplicates of the canon
	   brand hex (#4c319c, #FFD141…) that drifted from tokens.css over time.
	   Point them at the canon tokens so this skin can never fork again. */
	--g22h-purple-hover: var(--g22-purple-hot);
	--g22h-purple-soft: var(--g22-purple-08);
	--g22h-purple-border: var(--g22-purple-14);
	--g22h-yellow: var(--g22-yellow);
	--g22h-bg: var(--g22-canvas);
	--g22h-ink: #1a1a1a;
	--g22h-ink-75: rgba(26, 26, 26, 0.75);
	--g22h-ink-70: rgba(26, 26, 26, 0.7);
	--g22h-ink-60: rgba(26, 26, 26, 0.6);
	--g22h-ink-55: rgba(26, 26, 26, 0.55);
	--g22h-ink-45: rgba(26, 26, 26, 0.45);
	--g22h-ink-30: rgba(26, 26, 26, 0.3);
	--g22h-ink-10: rgba(26, 26, 26, 0.1);
	--g22h-ink-08: rgba(26, 26, 26, 0.08);
	--g22h-white-60: rgba(255, 255, 255, 0.6);
	--g22h-soft-gray: #f5f5f5;
	--g22h-radius-xl: 36px;
	--g22h-radius-sm: 20px;
	--g22h-shell: 1200px;
	--g22h-font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	/* Brand easing (motion polish 4b) — gentle overshoot-free deceleration,
	   used in place of the default `ease` keyword on hover/press/card
	   transitions across this file. */
	--g22h-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.g22-henna {
	--g22h-purple: var(--g22-purple);
	--g22h-purple-hover: var(--g22-purple-hot);
	--g22h-purple-soft: var(--g22-purple-08);
	--g22h-purple-border: var(--g22-purple-14);
	--g22h-yellow: var(--g22-yellow);
	--g22h-bg: var(--g22-canvas);
	--g22h-ink: var(--g22-ink);
	--g22h-ink-75: rgba(26, 26, 26, 0.75);
	--g22h-ink-70: rgba(26, 26, 26, 0.7);
	--g22h-ink-60: rgba(26, 26, 26, 0.6);
	--g22h-ink-55: rgba(26, 26, 26, 0.55);
	--g22h-ink-45: rgba(26, 26, 26, 0.45);
	--g22h-ink-30: rgba(26, 26, 26, 0.3);
	--g22h-ink-10: rgba(26, 26, 26, 0.1);
	--g22h-ink-08: rgba(26, 26, 26, 0.08);
	--g22h-white-60: rgba(255, 255, 255, 0.6);
	--g22h-soft-gray: #f5f5f5;
	--g22h-radius-lg: 28px;
	--g22h-radius-xl: 36px;
	--g22h-radius-md: 24px;
	--g22h-radius-sm: 20px;
	--g22h-shell: 1200px;
	--g22h-font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	--g22h-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	background: var(--g22h-bg);
	color: var(--g22h-ink);
	font-family: var(--g22h-font);
	overflow-x: hidden;
	position: relative;
}

.g22-henna * {
	box-sizing: border-box;
}

.g22-henna a {
	text-decoration: none;
	color: inherit;
}

.g22-henna img {
	max-width: 100%;
	display: block;
}

/* Body canvas уніфіковано з тлом Henna сайт-вайд (раніше body мав
   --g22-color-canvas (#f6f7f3) з базового style.css, а .g22-henna/.g22-page-
   -shell — #e5e5e5, що після переходу на full-bleed layout давало видимий
   колірний шов між тілом сторінки й секціями). */
body {
	background: var(--g22h-bg);
}

/* Гармонізація глобального хедера з тлом Henna — тепер сайт-вайд (хедер
   спільний для головної й внутрішніх сторінок, той самий бренд скрізь). */
body .g22-header:not(.g22-header--taste) {
	border-bottom-color: transparent;
}

/* ===========================================================================
   Navbar-01 port — sticky morph, pill nav, CTA arrow-slide, mobile card
   ---------------------------------------------------------------------------
   Дизайн запозичено з референсу shadcn-space navbar-01, реалізовано на
   наших токенах --g22h-* без React/Tailwind. Скролл-клас .g22-header--
   condensed виставляє assets/js/site-events.js (rAF-throttled, дзеркалить
   патерн прогрес-бару з reveal.js).

   Анти-CLS: висота хедера (.g22-header:not(.g22-header--taste)) ЗАФІКСОВАНА (height, не padding-
   block) і однакова в обох станах — «капсула» стискається лише по
   горизонталі (padding-inline/width/margin-inline) та за рахунок box-
   shadow-«бордера» замість справжнього border (border додав би 1-2px до
   box-моделі й змістив контент нижче хедера). Порядок пунктів меню (6 шт.)
   не змінюється — лише візуал контейнера/посилань.
   =========================================================================== */
body .g22-header:not(.g22-header--taste){
	/* width:100% + padding-inline без border-box = 66px горизонтального
	   скролу сторінки (хедер поза .g22-henna, глобальний border-box на
	   нього не поширюється). */
	box-sizing: border-box;
	position: sticky;
	/* Always floating pill — top offset via sticky (no margin → no CLS). */
	top: 12px;
	/* z-index навмисно НЕ перевизначаємо тут: inner-henna.css підіймає його
	   до 100 на внутрішніх сторінках (фікс "h2 над хедером при скролі"),
	   а базовий z-index:50 (style.css) лишається на головній. Якби ми
	   задали значення тут з body-специфічністю, воно б забило той фікс. */
	height: 72px;
	width: min(calc(100% - 32px), calc(var(--g22h-shell) - 24px));
	max-width: none;
	margin: 0 auto;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(245, 245, 245, 0.78);
	/* Hairline via inset shadow, not border (anti-CLS). */
	box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.07), 0 14px 40px rgba(67, 41, 128, 0.07);
	-webkit-backdrop-filter: blur(18px) saturate(1.05);
	backdrop-filter: blur(18px) saturate(1.05);
	transition: top 0.3s var(--g22h-ease), width 0.3s var(--g22h-ease), margin 0.3s var(--g22h-ease), padding 0.3s var(--g22h-ease), border-radius 0.3s var(--g22h-ease), background-color 0.3s var(--g22h-ease), box-shadow 0.3s var(--g22h-ease);
}

/* Стан після scrollY >= 50 — трохи вужча / щільніша капсула. */
body .g22-header--condensed:not(.g22-header--taste) {
	top: 10px;
	width: min(calc(100% - 48px), calc(var(--g22h-shell) - 64px));
	margin: 0 auto;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(245, 245, 245, 0.88);
	box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.09), 0 18px 48px rgba(67, 41, 128, 0.1);
	-webkit-backdrop-filter: blur(20px) saturate(1.08);
	backdrop-filter: blur(20px) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
	/* Стан все одно перемикається (функціонально), лише без анімації. */
	body .g22-header:not(.g22-header--taste),
	body .g22-header--condensed:not(.g22-header--taste){
		transition-duration: 0s;
	}
}

.g22-menu-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 49;
	background: rgba(26, 26, 26, 0.38);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.g22-header:not(.g22-header--taste) .g22-header__toggle-icon--close {
	display: none;
}

.g22-header:not(.g22-header--taste).is-menu-open .g22-header__toggle-icon--menu {
	display: none;
}

.g22-header:not(.g22-header--taste).is-menu-open .g22-header__toggle-icon--close {
	display: block;
}

/* -------------------------------------------------- */
/* Nav — muted rounded-full container + pill hover      */
/* (десктоп; на мобільному контейнер стає карткою нижче) */
/* -------------------------------------------------- */
@media (min-width: 821px) {
	body .g22-header:not(.g22-header--taste) .g22-header__nav ul {
		gap: 3px;
		padding: 5px;
		border-radius: 999px;
		background: rgba(26, 26, 26, 0.05);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a {
		border-radius: 999px;
		padding: 0 18px;
		border: 0;
		border-bottom: 0;
		min-height: 40px;
		font-weight: 600;
		letter-spacing: 0.01em;
		transition: background-color 0.22s var(--g22h-ease), box-shadow 0.22s var(--g22h-ease), color 0.22s var(--g22h-ease), transform 0.22s var(--g22h-ease);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible{
		background: #fff;
		outline: 0;
		box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
		color: var(--g22h-ink);
	}

	/* Активний пункт: біла пігулка + жовтий акцент. */
	body .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a {
		background: #fff;
		border-bottom: 0;
		outline: 0;
		box-shadow: 0 0 0 1.5px var(--g22-yellow), 0 2px 10px var(--g22-purple-08);
		color: var(--g22h-ink);
	}
}

/* -------------------------------------------------- */
/* CTA — фірмова мікровзаємодія: жовте коло зі стрілкою */
/* «переїжджає» з правого краю на лівий і повертається   */
/* на 45deg; ::after лишається псевдоелементом (без змін */
/* розмітки), просто отримує position:absolute для слайду*/
/* -------------------------------------------------- */
body .g22-header:not(.g22-header--taste) .g22-header__cta {
	position: relative;
	overflow: hidden;
	background: var(--g22-purple);
	border-color: var(--g22-purple);
	border-radius: 999px;
	/* Fix 2 (design audit): pill was 176x72px with 11.84px text (huge
	   container, microscopic label). Rebalanced to a 48-52px tall pill
	   with a legible 14px label. */
	box-sizing: border-box;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 26px;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color 0.22s var(--g22h-ease), border-color 0.22s var(--g22h-ease), transform 0.22s var(--g22h-ease), padding 0.5s var(--g22h-ease);
}

body .g22-header:not(.g22-header--taste) .g22-header__cta::after {
	display: grid;
	place-items: center;
	position: absolute;
	top: 50%;
	right: 11px;
	width: 24px;
	height: 24px;
	font-size: 0.85rem;
	background: var(--g22-yellow);
	color: var(--g22-purple);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: right 0.5s var(--g22h-ease), transform 0.5s var(--g22h-ease);
}

body .g22-header:not(.g22-header--taste) .g22-header__cta:hover {
	background: var(--g22-purple-hot);
	border-color: var(--g22-purple-hot);
}

body .g22-header:not(.g22-header--taste) .g22-header__cta:hover::after {
	right: calc(100% - 11px - 24px);
	transform: translateY(-50%) rotate(45deg);
}

/* Press feedback (motion polish 4c) — composes with the base skin's
   hover lift (translateY(-1px), style.css) rather than replacing it. */
body .g22-header:not(.g22-header--taste) .g22-header__cta:active {
	transform: translateY(-1px) scale(0.97);
	transition: transform 0.1s var(--g22h-ease);
}

@media (prefers-reduced-motion: reduce) {
	/* Без слайду — коло лишається на місці навіть у hover. */
	body .g22-header:not(.g22-header--taste) .g22-header__cta,
	body .g22-header:not(.g22-header--taste) .g22-header__cta::after{
		transition: none;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta:hover::after {
		right: 11px;
		transform: translateY(-50%);
	}
}

@media (max-width: 767px) {
	body .g22-header:not(.g22-header--taste) .g22-header__cta {
		box-sizing: border-box;
		height: 44px;
		padding: 0 20px;
		font-size: 0.75rem;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta::after {
		right: 10px;
		width: 24px;
		height: 24px;
		max-width: 28px;
		max-height: 28px;
		font-size: 13px;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta:hover::after {
		right: calc(100% - 10px - 24px);
	}
}

/* -------------------------------------------------- */
/* Mobile <=820px — кругла бордерна кнопка-бургер +      */
/* спадне меню як біла картка rounded-2xl               */
/* -------------------------------------------------- */
@media (max-width: 820px) {
	body .g22-header:not(.g22-header--taste) {
		height: 60px;
		top: 8px;
		width: calc(100% - 20px);
		margin: 0 auto;
		padding: 0 10px;
		gap: 8px;
		border-radius: 999px;
		background: rgba(245, 245, 245, 0.9);
		box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.08), 0 12px 32px rgba(67, 41, 128, 0.08);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
	}

	body .g22-header--condensed:not(.g22-header--taste) {
		top: 8px;
		width: calc(100% - 24px);
		margin: 0 auto;
		padding: 0 8px;
		border-radius: 999px;
	}

	body .g22-header:not(.g22-header--taste).is-menu-open,
	body .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		top: 8px;
		width: calc(100% - 20px);
		margin: 0 auto;
		padding: 0 10px;
		border-radius: 28px;
		background: rgba(250, 250, 250, 0.98);
		box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.08), 0 16px 40px rgba(26, 26, 26, 0.1);
		z-index: 60;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__logo {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__logo-image {
		width: min(116px, 100%);
		max-height: 34px;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__toggle {
		order: 3;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		border: 1px solid var(--g22h-ink-10);
		background: #fff;
		color: var(--g22h-ink);
		font-family: inherit;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav {
		position: fixed;
		top: 78px;
		left: 12px;
		right: 12px;
		z-index: 61;
		max-height: calc(100dvh - 96px);
		overflow-y: auto;
		border: 1px solid rgba(26, 26, 26, 0.08);
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.97);
		box-shadow: 0 24px 50px rgba(26, 26, 26, 0.14);
		padding: 14px;
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	body .g22-header:not(.g22-header--taste).is-menu-open .g22-header__nav {
		animation: g22MobileMenuIn 0.2s ease-out both;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav ul {
		display: grid;
		gap: 4px;
		border: 0;
		background: transparent;
		padding: 0;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a {
		border-radius: 999px;
		padding-inline: 18px;
		border-bottom: 0;
		font-family: var(--g22h-font);
		font-weight: 600;
		transition: background-color 0.2s var(--g22h-ease), box-shadow 0.2s var(--g22h-ease);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta {
		order: 2;
		box-sizing: border-box;
		height: 44px;
		min-height: 44px;
		padding: 9px 40px 9px 14px;
		font-size: 0.7rem;
		letter-spacing: 0.06em;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta::after {
		right: 9px;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta:hover {
		padding: 9px 40px 9px 14px;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__cta:hover::after {
		right: 9px;
		transform: translateY(-50%);
	}

	body.g22-menu-open .g22-menu-backdrop {
		display: block;
	}

	body.admin-bar .g22-header:not(.g22-header--taste).is-menu-open,
	body.admin-bar .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		top: 46px;
	}

	body.admin-bar .g22-header:not(.g22-header--taste) .g22-header__nav {
		top: 122px;
		max-height: calc(100dvh - 134px);
	}

	@keyframes g22MobileMenuIn {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a{
		background: #fff;
		outline: 1px solid var(--g22h-ink-10);
		box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06);
		color: var(--g22h-ink);
	}
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
	body .g22-header:not(.g22-header--taste).is-menu-open .g22-header__nav {
		animation: none;
	}
}

/* -------------------------------------------------- */
/* Shell / generic section helpers                     */
/* -------------------------------------------------- */

.g22-henna__shell {
	max-width: var(--g22h-shell);
	margin-inline: auto;
	padding-inline: 24px;
	position: relative;
}

.g22-henna__shell > :last-child,
.g22-henna__cards > :last-child,
.g22-henna__review-grid > :last-child,
.g22-henna__news-grid > :last-child,
.g22-henna__inline-list > :last-child,
.g22-henna__form-list > :last-child {
	margin-bottom: 0;
}

.g22-henna__section {
	padding-block: clamp(64px, 8vw, 104px);
	position: relative;
}

/* Fix 3: two full sections in a row each contribute their own top+bottom
   padding-block, stacking into a ~200px+ dead gap at wide viewports (e.g.
   "Про школу" → "Навчальний процес"). A section that directly follows
   another .g22-henna__section trims its own top padding instead — one
   adjacency rule instead of hand-tuning every section pair. */
.g22-henna__section + .g22-henna__section {
	padding-block-start: clamp(40px, 5vw, 64px);
}

/* -------------------------------------------------- */
/* One shared section-header template (moves 2)        */
/* meta label (dot + text) → H2 → optional lead         */
/* -------------------------------------------------- */

.g22-henna__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--g22h-ink-55);
	margin-bottom: 16px;
}

.g22-henna__label-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--g22h-yellow);
	flex-shrink: 0;
}

.g22-henna__section-head {
	margin-bottom: 40px;
}

.g22-henna__heading {
	font-weight: 800;
	font-size: clamp(2.1rem, 3.6vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--g22h-ink);
	max-width: 20ch;
	margin: 0 0 20px;
	overflow-wrap: normal;
	word-break: normal;
}

.g22-henna__heading em {
	font-style: normal;
	color: var(--g22h-purple);
}

.g22-henna__heading .g22-henna__marker-svg {
	left: -1%;
	right: -1%;
	width: 102%;
	bottom: -0.02em;
}

.g22-henna__lead {
	margin: 0;
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.55;
	color: var(--g22h-ink-75);
	max-width: 60ch;
}

.g22-henna__body {
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.7;
	color: var(--g22h-ink-75);
	margin: 0 0 24px;
	max-width: 60ch;
}

.g22-henna__intro {
	max-width: 640px;
}

.g22-henna__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--g22h-purple);
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s var(--g22h-ease);
}

.g22-henna__link:hover,
.g22-henna__link:focus-visible {
	border-bottom-color: var(--g22h-yellow);
}

/* -------------------------------------------------- */
/* Marker underline (hand-drawn yellow) — reusable      */
/* .g22-henna__marker span; used 3× on the page:        */
/* hero "довіряють", про школу "підтримують", CTA       */
/* "Почнімо"                                            */
/* -------------------------------------------------- */

.g22-henna__marker {
	position: relative;
	display: inline-block;
	z-index: 0;
}

.g22-henna__marker-svg {
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: -0.06em;
	width: 104%;
	height: 0.34em;
	z-index: -1;
	overflow: visible;
	fill: none;
	stroke: var(--g22h-yellow);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* -------------------------------------------------- */
/* 1. Hero v3 — curtain-reveal (250vh scroll scene)     */
/* -------------------------------------------------- */

/*
 * Local token for the panel/plate white, per the Framer reference (kept
 * distinct from --g22h-soft-gray/#f5f5f5 — deliberately #fcfcfc, a hair
 * brighter, to read as "paper white" against the photo).
 */
:root,
.g22-henna {
	--g22h-hero-panel: #fcfcfc;
}

.g22-henna__hero {
	position: relative;
	/* Static-first: the selected snapshot ships a complete hero even if its
	   optional curtain controller is absent. A scroll scene can opt in through
	   html.g22-curtain-ready, never through hidden/default state. */
	height: max(760px, calc(100svh - 80px));
	overflow: clip;
	/* Scroll-jack bugfix: the desktop signature scene (below, html.g22-
	   signature-scroll) pins this section for ~190svh while reveal.js writes
	   transform/clip-path every scroll frame. If a late-loading web font or
	   image swap changes any box size above the fold while that's happening,
	   Chrome/Safari's scroll anchoring can "correct" scrollY against a moving
	   target inside a sticky ancestor and yank the page. This section is the
	   single largest, most volatile scroll anchor candidate on the page, so
	   it's explicitly excluded from anchoring — never a legitimate anchor
	   node, never a jump source. */
	overflow-anchor: none;
}

.g22-henna__hero-stage {
	position: relative;
	height: 100%;
	overflow: hidden;
	overflow-anchor: none;
}

.g22-henna__hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: linear-gradient(135deg, var(--g22h-purple-soft), #d7d1e9);
}

.g22-henna__hero-media picture,
.g22-henna__hero-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.g22-henna__hero-media--fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(67, 41, 128, 0.08);
}

/* Left content panel — white, 50% of the stage, full height. Transform
   (translateX) is written every frame by reveal.js off the scroll
   progress — not via a CSS class, so it stays reversible/interruptible. */
.g22-henna__hero-panel {
	position: absolute;
	inset: 0 50% 0 0;
	width: 50%;
	height: 100%;
	background: var(--g22h-hero-panel);
	z-index: 2;
	will-change: auto;
}

.g22-henna__hero-panel-inner {
	position: absolute;
	left: 90px;
	right: 40px;
	top: 59%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 440px;
	will-change: auto;
}

.g22-henna__hero-brand {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--g22h-ink);
}

.g22-henna__hero-title {
	margin: 0;
	max-width: 440px;
	font-weight: 500;
	font-size: clamp(1.8rem, 2.6vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--g22h-ink);
}

.g22-henna__hero-panel .g22-henna__hero-subtitle {
	margin: 0;
	max-width: 440px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--g22h-ink-70);
}

.g22-henna__hero-panel .g22-henna__hero-cta {
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.g22-henna__stat-strip--hero {
	margin-top: 0;
	gap: 0;
}

.g22-henna__stat-strip--hero .g22-henna__stat {
	flex: 0 1 auto;
	padding: 0 20px;
}

.g22-henna__stat-strip--hero .g22-henna__stat:first-child {
	padding-left: 0;
}

.g22-henna__stat-strip--hero .g22-henna__stat b {
	font-size: 1.7rem;
}

.g22-henna__stat-strip--hero .g22-henna__stat span {
	font-size: 0.75rem;
}

/* Avatar stack + trust label under the CTA/stats. */
.g22-henna__hero-avatars {
	display: flex;
	align-items: center;
	gap: 14px;
}

.g22-henna__hero-avatar-stack {
	display: flex;
}

.g22-henna__hero-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--g22h-purple);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	border: 2px solid var(--g22h-hero-panel);
	margin-left: -16px;
}

.g22-henna__hero-avatar-stack .g22-henna__hero-avatar:first-child {
	margin-left: 0;
}

.g22-henna__hero-avatar-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--g22h-ink);
	white-space: nowrap;
	transition: color 0.2s var(--g22h-ease);
}

.g22-henna__hero-avatar-label:hover,
.g22-henna__hero-avatar-label:focus-visible {
	color: var(--g22h-purple);
}

/* Bottom-right white plate over the open photo zone. */
.g22-henna__hero-plate {
	position: absolute;
	right: 0;
	bottom: 30px;
	max-width: 420px;
	background: var(--g22h-hero-panel);
	border-radius: 40px 0 0 0;
	padding: 20px 20px 0 0;
	z-index: 3;
	will-change: auto;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	/* Optional progressive enhancement. The current lightweight controller
	   intentionally does not add this class; a future curtain controller must
	   prove readiness before it can lengthen the page or fix the image. */
	html.g22-curtain-ready .g22-henna__hero {
		height: 250vh;
	}

	html.g22-curtain-ready .g22-henna__hero-stage {
		position: sticky;
		top: 0;
		height: 100vh;
	}

	html.g22-curtain-ready .g22-henna__hero-media {
		position: fixed;
		height: 100vh;
	}

	html.g22-curtain-ready .g22-henna__hero-panel,
	html.g22-curtain-ready .g22-henna__hero-panel-inner,
	html.g22-curtain-ready .g22-henna__hero-plate {
		will-change: transform;
	}
}

.g22-henna__hero-plate-heading {
	margin: 0;
	width: 380px;
	max-width: 60vw;
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 42px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--g22h-ink);
}

/* Inverted-corner smoothing pieces (Framer geometry: 40x40 concave notch,
   fill #fcfcfc) at the seams between the white panels and the open photo
   zone. Approximated orientation — cosmetic only, easy to nudge later. */
.g22-henna__hero-corner {
	position: absolute;
	width: 40px;
	height: 40px;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.2s linear;
}

.g22-henna__hero-corner--panel {
	right: -40px;
	bottom: 0;
	transform: scaleX(-1);
}

.g22-henna__hero-corner--plate-left {
	left: -40px;
	top: 0;
	transform: rotate(90deg);
}

.g22-henna__hero-corner--plate-top {
	top: -40px;
	left: 0;
	transform: rotate(180deg);
}

/* Bottom anchor strip — full-width, pins the stage's bottom edge. */
.g22-henna__hero-strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: var(--g22h-hero-panel);
	z-index: 2;
}

/* -------------------------------------------------- */
/* Journal caption (yellow dot + meta) — every          */
/* standalone photo (move 3)                            */
/* -------------------------------------------------- */

.g22-henna__caption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--g22h-ink-60);
}

.g22-henna__caption-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--g22h-yellow);
	flex-shrink: 0;
}

/* -------------------------------------------------- */
/* Stat strip — replaces old float cards (move 1)       */
/* -------------------------------------------------- */

.g22-henna__stat-strip {
	display: flex;
	flex-wrap: wrap;
	margin-top: 32px;
}

.g22-henna__stat {
	position: relative;
	flex: 1 1 33%;
	padding: 0 24px;
	text-align: left;
}

.g22-henna__stat:first-child {
	padding-left: 0;
}

.g22-henna__stat + .g22-henna__stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--g22h-ink-10);
}

.g22-henna__stat b {
	display: block;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--g22h-purple);
}

.g22-henna__stat span {
	display: block;
	margin-top: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--g22h-ink-60);
}

/* .g22-google-reviews--mosaic is a sibling of .g22-henna (lives in
   footer.php, shared by every page) but reuses the exact same pill
   component — extending the selector here keeps one source of truth
   instead of duplicating the rule. */
.g22-henna .g22-henna__pill,
.g22-google-reviews--mosaic .g22-henna__pill {
	display: inline-block;
	/* Fix 2 (design audit): standardised pill height (~48-52px) across
	   every CTA pill sharing this component (trial-days/excursion cards,
	   fallback reviews link). */
	padding: 15px 26px;
	border-radius: 999px;
	border: 2px solid var(--g22h-purple);
	color: var(--g22h-purple);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	background: transparent;
	transition: background-color 0.3s var(--g22h-ease), color 0.3s var(--g22h-ease), transform 0.1s var(--g22h-ease);
	cursor: pointer;
}

.g22-henna .g22-henna__pill:hover,
.g22-henna .g22-henna__pill:focus-visible,
.g22-google-reviews--mosaic .g22-henna__pill:hover,
.g22-google-reviews--mosaic .g22-henna__pill:focus-visible {
	background: var(--g22h-purple);
	color: #fff;
}

/* Press feedback (motion polish 4c). The magnetic variant already carries
   a pointer-driven translate3d(--g22-mx, --g22-my) transform (reveal.js) —
   its own rule composes the press scale on top instead of clobbering it. */
.g22-henna .g22-henna__pill:active,
.g22-google-reviews--mosaic .g22-henna__pill:active {
	transform: scale(0.97);
}

.g22-henna .g22-henna__pill--magnetic:active,
.g22-google-reviews--mosaic .g22-henna__pill--magnetic:active {
	transform: translate3d(var(--g22-mx, 0), var(--g22-my, 0), 0) scale(0.97);
}

.g22-henna .g22-henna__pill--solid,
.g22-google-reviews--mosaic .g22-henna__pill--solid {
	background: var(--g22h-purple);
	color: #fff;
	border-color: var(--g22h-purple);
}

.g22-henna .g22-henna__pill--solid:hover,
.g22-henna .g22-henna__pill--solid:focus-visible,
.g22-google-reviews--mosaic .g22-henna__pill--solid:hover,
.g22-google-reviews--mosaic .g22-henna__pill--solid:focus-visible {
	background: var(--g22h-purple-hover);
	border-color: var(--g22h-purple-hover);
}

/* -------------------------------------------------- */
/* Unified photo system (move 3) — applied to every     */
/* image container on the page: hero band, про школу,  */
/* навчальний процес, news thumbnails.                  */
/* -------------------------------------------------- */

.g22-henna__photo {
	position: relative;
	margin: 0;
	border-radius: var(--g22h-radius-md);
	overflow: hidden;
	/* Section photo parallax (assets/reveal.js sets --g22-photo-parallax on
	   .g22-henna__about-photo / .g22-henna__learning-photo only — every
	   other .g22-henna__photo, e.g. news thumbnails, keeps the 0px default
	   and this rule stays inert for them). Amplitude is capped in JS at
	   ~6% of the photo's own height. */
	transform: translate3d(0, var(--g22-photo-parallax, 0px), 0);
}

.g22-henna__photo img {
	filter: saturate(1.06) contrast(1.02) brightness(1.03);
}

@media (prefers-reduced-motion: no-preference) {
	.g22-henna__about-photo,
	.g22-henna__learning-photo {
		will-change: transform;
	}

	/* Photo reveal: gentle scale(1.06 → 1) the first time the section
	   enters the viewport (requirement #4). Runs on the <img> so it never
	   collides with the parallax transform living on the .g22-henna__photo
	   wrapper above, or with the existing slide-in on .g22-henna__about-
	   visual/.g22-henna__learning-visual (assets/reveal.js, play-once).
	   Scoped to html.g22-be-js throughout (static-first pattern used
	   everywhere else in this file): without JS there is no observer to
	   ever flip --in, so no-JS/no-script visitors must see the resting
	   scale(1) state, never a permanently zoomed-in crop. */
	html.g22-be-js .g22-henna__about-visual .g22-henna__about-photo img,
	html.g22-be-js .g22-henna__learning-visual .g22-henna__learning-photo img {
		transform: scale(1.06);
		transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-js .g22-henna__about-visual.g22-be-reveal--in .g22-henna__about-photo img,
	html.g22-be-js .g22-henna__learning-visual.g22-be-reveal--in .g22-henna__learning-photo img {
		transform: scale(1);
	}
}

.g22-henna__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 209, 65, 0.05), rgba(67, 41, 128, 0.07));
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* -------------------------------------------------- */
/* 2 & 3. Про школу / Навчальний процес (two-col)      */
/* -------------------------------------------------- */

.g22-henna__two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

.g22-henna__about-visual,
.g22-henna__learning-visual {
	display: flex;
	flex-direction: column;
	/* Батьківський grid центрує ячейки — без stretch фото не заповнює колонку. */
	align-self: stretch;
}

@media (max-width: 767px) {
	.g22-henna__about-visual figure,
	.g22-henna__learning-visual figure {
		min-height: 260px;
	}
}

.g22-henna__about-visual figure,
.g22-henna__learning-visual figure {
	flex: 1;
	margin: 0;
	max-height: 640px;
}

.g22-henna__about-visual picture,
.g22-henna__learning-visual picture {
	height: 100%;
	display: block;
}

.g22-henna__about-photo img,
.g22-henna__learning-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g22-henna__inline-list {
	list-style: none;
	margin: 32px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.g22-henna__inline-list li {
	border-radius: var(--g22h-radius-sm);
	background: #fff;
	padding: 18px 20px;
}

.g22-henna__inline-list b {
	display: block;
	font-weight: 700;
	color: var(--g22h-purple);
	margin-bottom: 4px;
}

.g22-henna__inline-list span {
	font-size: 0.9375rem;
	color: var(--g22h-ink-60);
	line-height: 1.4;
}

/* -------------------------------------------------- */
/* 4. Чому обирають Generation 22 (cards)              */
/* -------------------------------------------------- */

.g22-henna__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.g22-henna__card {
	position: relative;
	border-radius: var(--g22h-radius-lg);
	transition: transform 0.2s var(--g22h-ease), box-shadow 0.2s var(--g22h-ease);
}

.g22-henna__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
}

/* Flip wrapper — fills the (grid-stretched) height of .g22-henna__card.
   Structural/base rules here keep the card fully readable with no motion
   at all (no JS, prefers-reduced-motion, older browsers): the back
   "shirt" face stays display:none and the front content face sits in
   normal flow with the card's full visual treatment. The 3D flip/deck
   mechanics are layered on top under the no-preference media query below. */
.g22-henna__card-flip {
	position: relative;
	height: 100%;
}

.g22-henna__card-back {
	display: none;
}

.g22-henna__card-front {
	position: relative;
	height: 100%;
	border-radius: var(--g22h-radius-lg);
	border: 1px solid var(--g22h-ink-08);
	background: var(--g22h-white-60);
	padding: 28px;
	backdrop-filter: blur(1px);
	box-sizing: border-box;
}

.g22-henna__card-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--g22h-purple);
	background: var(--g22h-purple-soft);
	border-radius: 50%;
	padding: 0;
	margin-bottom: 16px;
}

.g22-henna__card h3 {
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--g22h-ink);
}

.g22-henna__card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--g22h-ink-70);
}

/* -------------------------------------------------- */
/* 5. Відгуки (video / quote cards)                    */
/* -------------------------------------------------- */

.g22-henna__video-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.g22-henna__video-card {
	flex: 0 0 82%;
	scroll-snap-align: start;
	border-radius: var(--g22h-radius-md);
	background: #fff;
	overflow: hidden;
	padding-bottom: 16px;
}

.g22-henna__video-card video {
	width: 100%;
	display: block;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: var(--g22h-ink);
}

/* iframe embed (YouTube/Vimeo) — same 9:16 slot as the native <video>. */
.g22-henna__video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: var(--g22h-ink);
}

.g22-henna__video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.g22-henna__video-card p {
	margin: 12px 20px 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

/* Editor-only reminder when no videos are configured yet (home_video_1..5_url
   empty) — visible solely to current_user_can('edit_pages'); regular
   visitors never see the section at all (PHP-gated in front-page.php). */
.g22-henna__video-editor-note {
	border-radius: var(--g22h-radius-md);
	border: 1.5px dashed rgba(26, 26, 26, 0.25);
	padding: 24px;
}

.g22-henna__video-editor-note p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--g22h-ink-60);
}

.g22-henna__review-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.g22-henna__review-card {
	margin: 0;
	border-radius: var(--g22h-radius-lg);
	background: #fff;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 2px 24px rgba(26, 26, 26, 0.04);
	transition: box-shadow 0.2s var(--g22h-ease);
}

.g22-henna__review-card:hover {
	box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
}

.g22-henna__review-stars {
	color: var(--g22h-yellow);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}

.g22-henna__review-card p {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--g22h-ink-75);
	flex-grow: 1;
}

.g22-henna__review-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--g22h-ink-08);
	padding-top: 16px;
	margin: 0;
}

.g22-henna__review-footer b {
	font-weight: 600;
	font-size: 0.9375rem;
}

.g22-henna__review-footer span {
	font-size: 0.8125rem;
	color: var(--g22h-ink-45);
}

/* -------------------------------------------------- */
/* 6. Новини                                           */
/* -------------------------------------------------- */

.g22-henna__news-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

.g22-henna__news-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.g22-henna__news-card {
	border-radius: var(--g22h-radius-lg);
	background: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 24px rgba(26, 26, 26, 0.04);
	transition: box-shadow 0.2s var(--g22h-ease);
}

.g22-henna__news-card:hover {
	box-shadow: 0 8px 32px rgba(26, 26, 26, 0.08);
}

.g22-henna__news-image {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--g22h-soft-gray);
	overflow: hidden;
}

.g22-henna__news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g22-henna__news-body {
	padding: 24px;
}

.g22-henna__news-meta {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--g22h-ink-55);
}

.g22-henna__news-body h3 {
	margin: 0 0 8px;
	font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.g22-henna__news-body span {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--g22h-ink-60);
}

/* -------------------------------------------------- */
/* 7. CTA: Пробні дні + Екскурсія                      */
/* -------------------------------------------------- */

.g22-henna__cta-section {
	background: var(--g22h-purple);
	color: #fff;
	/* Preceding section already contributes its own bottom padding-block
	   (clamp(64px, 8vw, 104px)); keeping the same top value here doubled
	   the visual gap to ~230px at 1440px because the colour change makes
	   the empty purple band obvious. Top is trimmed so the label sits at
	   roughly the same distance from the section edge as elsewhere. */
	padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 104px);
}

.g22-henna__cta-section .g22-henna__label {
	color: rgba(255, 255, 255, 0.65);
}

.g22-henna__cta-section .g22-henna__heading {
	color: #fff;
}

/* Form submit button leaked the legacy base skin (IBM Plex Mono, dark green
   #1d3230 from style.css .g22-form button) because home-henna.css never
   scoped its own override here — homepage doesn't load inner-henna.css.
   Match the brand pill used everywhere else in Henna. */
.g22-henna__cta-section .g22-form button {
	background: var(--g22h-purple);
	color: #fff;
	font-family: var(--g22h-font);
	font-weight: 600;
	border-radius: 999px;
	padding: 14px 28px;
	transition: background-color 0.2s var(--g22h-ease), transform 0.1s var(--g22h-ease);
}

/* Press feedback (motion polish 4c). */
.g22-henna__cta-section .g22-form button:active {
	transform: scale(0.97);
}

.g22-henna__cta-section .g22-form button:hover {
	background: var(--g22h-purple-hover);
}

.g22-henna__cta-section .g22-form button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Дві рівноправні картки "Два пробні дні" / "Екскурсія" (ТЗ §7) — заголовок
   і опис завжди видимі, форма ховається під кнопкою й розкривається
   миттєво (нативний <details>, без transition-затримки). Стек на мобільних,
   side-by-side від 900px. */
.g22-henna__cta-cards {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.g22-henna__cta-card {
	border-radius: var(--g22h-radius-lg);
	background: #fff;
	color: var(--g22h-ink);
	padding: 32px;
	display: flex;
	flex-direction: column;
}

.g22-henna__cta-card h3 {
	margin: 0 0 12px;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--g22h-purple);
}

.g22-henna__cta-card > p {
	margin: 0 0 24px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--g22h-ink-70);
}

.g22-henna__cta-reveal {
	margin-top: auto;
}

.g22-henna__cta-reveal > summary {
	list-style: none;
	cursor: pointer;
}

.g22-henna__cta-reveal > summary::-webkit-details-marker {
	display: none;
}

/* Instant reveal open — no slow animation, per TZ. */
.g22-henna__cta-reveal-body {
	padding-top: 24px;
}

@media (min-width: 900px) {
	.g22-henna__cta-cards {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

/* Form success/error notices (inc/forms.php: .g22-form__notice--success / --error). */
body .g22-henna__cta-section .g22-form__notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 24px;
	padding: 16px 20px;
	margin: 0 0 18px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--g22h-ink);
}

body .g22-henna__cta-section .g22-form__notice--success::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--g22h-yellow);
	flex-shrink: 0;
}

body .g22-henna__cta-section .g22-form__notice--error {
	color: var(--g22-error);
}

/* -------------------------------------------------- */
/* Google-відгуки над футером (ТЗ 4.2) — 1:1 клієнтський */
/* референс (Lavv Digital testimonials), у нашій henna    */
/* мові: центрований CSS iPhone (dark frame + Dynamic      */
/* Island, орбіта аватарів) з віялом карток-відгуків       */
/* поверх нижньої половини, стрічка-марквee зверху          */
/* (той самий .g22-henna__marquee компонент, без вигаданих  */
/* нових шрифтів/розмірів). Секційний заголовок — СТАНДАРТ  */
/* .g22-henna__label/__heading/__lead, центровано, як у     */
/* #why. Заходить на всі сторінки (footer.php спільний).    */
/* -------------------------------------------------- */

body .g22-google-reviews--mosaic {
	font-family: var(--g22h-font, "Manrope", sans-serif);
	background: var(--g22h-bg, #e5e5e5) !important;
	padding-block: clamp(64px, 8vw, 104px) !important;
	padding-inline: 0;
	position: relative;
	/* Safety net for the ribbon's intentional edge bleed below — guarantees
	   it can never create real page-level horizontal scroll. */
	overflow-x: hidden;
}

body .g22-google-reviews--mosaic .g22-google-reviews__mosaic-shell {
	position: relative;
	width: min(100% - 48px, 1160px);
	margin: 0 auto;
}

/* -- Ribbon: true snake SVG (footer.php), winding from the top-left down
   the right edge — sits behind the head/phone (z-index 0). Anchored to the
   section's TOP (never negative) so it can't bleed above the section;
   bleeds sideways past the shell toward the section's own edge, contained
   by the section's overflow-x: hidden above. -- */

body .g22-google-reviews--mosaic .g22-google-reviews__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

body .g22-google-reviews--mosaic .g22-google-reviews__ribbon-svg {
	display: block;
	width: 100%;
	height: auto;
}

body .g22-google-reviews--mosaic .g22-google-reviews__ribbon-svg--mobile {
	display: none;
}

body .g22-google-reviews--mosaic .g22-google-reviews__ribbon-path {
	stroke: var(--g22h-purple);
	stroke-width: 52;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body .g22-google-reviews--mosaic .g22-google-reviews__ribbon-text {
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	fill: #fff;
}

/* -- Section head, centered like #why -- */

body .g22-google-reviews--mosaic .g22-google-reviews__head {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

body .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__label {
	justify-content: center;
}

body .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading {
	max-width: none;
	margin-inline: auto;
}

body .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__lead {
	margin-inline: auto;
}

/* -- Stage: phone + fan -- */

body .g22-google-reviews--mosaic .g22-google-reviews__stage {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding-bottom: clamp(48px, 8vw, 96px);
}

/* Phone (restored CSS device mockup — dark frame, Dynamic Island). */
body .g22-google-reviews--mosaic .g22-google-reviews__phone {
	position: relative;
	z-index: 1;
}

body .g22-google-reviews--mosaic .g22-google-reviews__device {
	position: relative;
	width: clamp(280px, 24vw, 360px);
	aspect-ratio: 9 / 19;
	padding: 14px;
	border-radius: 44px;
	background: var(--g22h-ink, #1a1a1a);
	box-shadow:
		0 2px 6px rgba(26, 26, 26, 0.18),
		0 24px 48px -20px rgba(26, 26, 26, 0.4),
		0 60px 90px -40px rgba(26, 26, 26, 0.35);
}

body .g22-google-reviews--mosaic .g22-google-reviews__notch {
	position: absolute;
	top: 22px;
	left: 50%;
	width: 96px;
	height: 26px;
	background: var(--g22h-ink, #1a1a1a);
	border-radius: 999px;
	transform: translateX(-50%);
	z-index: 2;
}

/* Bug fix (homepage polish, fix 1): this was `display:flex; justify-
   content:space-between` with .screen-bar carrying `margin-top:auto` to
   sit flush at the bottom — but an auto margin on a flex item consumes ALL
   available free space before `justify-content` gets to distribute any,
   so the free space collapsed entirely into the gap above .screen-bar and
   the orbit (middle item) stayed pinned right under .screen-time, leaving
   ~65% of the screen empty below it. Grid with an explicit 1fr middle row
   fixes this: .orbit now vertically centers in the space actually left
   over between the status text and the progress bar. */
body .g22-google-reviews--mosaic .g22-google-reviews__screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 32px;
	background: var(--g22h-soft-gray, #f5f5f5);
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
}

/* Motion audit fix 3: 18px cleared the padding but landed inside the
   Dynamic Island's own vertical span (island: top 22px, height 26px, i.e.
   22-48px from the device's top edge; screen starts at the device's 14px
   padding, so 14+18=32px sat right under the island). Pushed below the
   island's bottom edge (48px) with a small gap. */
body .g22-google-reviews--mosaic .g22-google-reviews__screen-time {
	margin-top: 42px;
	font-family: var(--g22h-font);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--g22h-ink-60, rgba(26, 26, 26, 0.6));
}

body .g22-google-reviews--mosaic .g22-google-reviews__screen-bar {
	width: 108px;
	height: 4px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: var(--g22h-purple);
}

/* Orbit: two hairline rings, avatars carried around by .orbit-spin
   (continuous rotate), each avatar's own inner element counter-rotates at
   the same rate so it stays upright — classic satellite technique. Center
   trust line never rotates (sibling of the spin layer). Sits in the
   screen's middle 1fr grid row and is centered within it (self-align,
   since the row itself grows to fill the leftover vertical space). Ring
   diameter ≈ 84% of the screen's width (was a fixed 220px cap that read as
   tiny inside the much taller 9:19 screen). */
body .g22-google-reviews--mosaic .g22-google-reviews__orbit {
	position: relative;
	width: min(84%, 300px);
	aspect-ratio: 1;
	align-self: center;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 1px solid var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
	transform: translate(-50%, -50%);
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-ring--outer {
	width: 100%;
	height: 100%;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-ring--inner {
	width: 62%;
	height: 62%;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-spin {
	position: absolute;
	inset: 0;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	/* translateY here is a FIXED px radius (percentages in transform:
	   translate() resolve against the element's OWN box, not the orbit
	   container, so a % would only move it by a fraction of its own
	   48px size) — ~125px sits close to the outer ring's radius of the
	   desktop min(84%,300px) orbit; see the mobile override below for the
	   smaller 260px-device ring. */
	transform: rotate(var(--orbit-a, 0deg)) translateY(-125px) rotate(calc(-1 * var(--orbit-a, 0deg)));
}

/* Wrapper that carries ONLY the ambient counter-rotation (below) — kept
   separate from .orbit-avatar-inner so reveal.js can animate that inner
   element's scale via anime.js without the two transforms (one CSS
   animation-driven, one JS-driven) fighting over the same inline
   `transform` property on a single element. */
body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar-spin {
	display: block;
	width: 100%;
	height: 100%;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar-inner {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-family: var(--g22h-font);
	font-weight: 700;
	font-size: 0.78rem;
	background: var(--g22h-purple);
	color: #fff;
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar[style*="--orbit-c: 1"] .g22-google-reviews__orbit-avatar-inner {
	background: var(--g22h-yellow);
	color: var(--g22h-ink, #1a1a1a);
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar[style*="--orbit-c: 2"] .g22-google-reviews__orbit-avatar-inner {
	background: var(--g22h-soft-gray, #f5f5f5);
	color: var(--g22h-purple);
	box-shadow: inset 0 0 0 1px var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
}

body .g22-google-reviews--mosaic .g22-google-reviews__orbit-center {
	position: relative;
	z-index: 1;
	max-width: 9ch;
	margin: 0;
	font-family: var(--g22h-font);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.28;
	text-align: center;
	color: var(--g22h-ink, #1a1a1a);
}

@media (prefers-reduced-motion: no-preference) {
	body .g22-google-reviews--mosaic .g22-google-reviews__orbit-spin {
		animation: g22-orbit-spin 60s linear infinite;
	}

	body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar-spin {
		animation: g22-orbit-spin-reverse 60s linear infinite;
	}

	/* Motion audit fix 4: the ambient orbit spin used to run from load, so
	   it was already turning before the avatars had even popped in. When
	   the JS entrance composition runs (html.g22-greviews-phone-anim),
	   pause the spin until reveal.js adds `--live` to .orbit (fired from
	   the last avatar's pop onComplete). No-JS / anime-unavailable
	   visitors never get the phone-anim gate class at all, so the base
	   rule above keeps spinning for them unaffected — same for reduced
	   motion, which never enters this block. */
	html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit-spin,
	html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar-spin {
		animation-play-state: paused;
	}

	html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit--live .g22-google-reviews__orbit-spin,
	html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit--live .g22-google-reviews__orbit-avatar-spin {
		animation-play-state: running;
	}
}

@keyframes g22-orbit-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes g22-orbit-spin-reverse {
	to {
		transform: rotate(-360deg);
	}
}

/* -- Cards fan, overlapping the phone's lower half -- */

body .g22-google-reviews--mosaic .g22-google-reviews__fan {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	gap: clamp(-32px, -2vw, -16px);
	z-index: 2;
	width: min(100%, 1080px);
	justify-content: center;
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
	flex: 0 0 clamp(190px, 20vw, 240px);
	background: #fff;
	border-radius: var(--g22h-radius-md, 24px);
	box-shadow: 0 24px 48px -28px rgba(26, 26, 26, 0.28);
	padding: 20px;
	transform: translate(var(--card-x, 0), var(--card-y, 0)) rotate(var(--card-rotate, 0deg));
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s var(--g22h-ease);
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-card:hover {
	transform: translate(var(--card-x, 0), calc(var(--card-y, 0px) - 6px)) rotate(var(--card-rotate, 0deg));
	box-shadow: 0 30px 56px -26px rgba(26, 26, 26, 0.34);
	z-index: 3;
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-tag {
	margin: 0 0 10px;
	font-family: var(--g22h-font);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--g22h-purple);
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-quote {
	margin: 0 0 16px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--g22h-ink-75, rgba(26, 26, 26, 0.75));
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer {
	display: flex;
	align-items: center;
	gap: 10px;
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer .g22-google-reviews__mark {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--g22h-purple);
	color: #fff;
	font-family: var(--g22h-font);
	font-weight: 700;
	font-size: 0.68rem;
}

body .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer b {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--g22h-ink, #1a1a1a);
}

/* -- Foot: CTA + rating, centered below the fan -- */

body .g22-google-reviews--mosaic .g22-google-reviews__foot {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	/* Clears the fan cards' positive --card-y transform offset (they're
	   absolutely positioned inside .stage and can visually extend past its
	   own box without affecting layout/collision detection). */
	margin-top: clamp(32px, 5vw, 56px);
}

body .g22-google-reviews--mosaic .g22-google-reviews__summary {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 4px;
}

body .g22-google-reviews--mosaic .g22-google-reviews__summary strong {
	font-family: var(--g22h-font);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--g22h-purple);
}

body .g22-google-reviews--mosaic .g22-google-reviews__stars {
	color: var(--g22h-yellow);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
}

body .g22-google-reviews--mosaic .g22-google-reviews__summary small {
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--g22h-ink-55, rgba(26, 26, 26, 0.55));
}

/* Entrance choreography (anime.js timeline, reveal.js): phone rises first
   (spring), cards deal out from the phone's center to their fan slots
   (spring, staggered), orbit avatars pop in last. Gated behind the
   html.g22-greviews-phone-anim class reveal.js adds synchronously
   (in_footer, before first paint) only when JS ran AND prefers-reduced-
   motion did not short-circuit it — so without JS, or under reduced
   motion, everything is simply visible at its resting CSS position (the
   --card-x/--card-y/--card-rotate custom props ARE that resting
   position), never stuck hidden. */
html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__phone {
	opacity: 0;
}

html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__phone--in {
	opacity: 1;
}

/* Motion audit fix 1: previously a `.fan--in` class flipped ALL 4 cards'
   opacity 0->1 at once (no transition) the instant the entrance triggered
   — they flashed in as a stacked pile and sat dead until the spring glide
   caught up ~700ms later. The `--in` class/rule is gone; each card stays
   at opacity: 0 (FOUC-hidden default below) until reveal.js's own
   per-card timeline segment animates it to 1 exactly when that card
   starts flying to its slot. */
html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
	opacity: 0;
}

html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar {
	opacity: 0;
}

html.g22-greviews-phone-anim .g22-google-reviews--mosaic .g22-google-reviews__orbit--in .g22-google-reviews__orbit-avatar {
	opacity: 1;
}

@media (max-width: 900px) {
	/* DEVIATION FLAGGED FOR REVIEW (not silently shipped): spec asked for a
	   shallower single-curve mobile variant to stay visible down to 600px.
	   Tuned repeatedly (viewBox 400x130 -> 400x90, y-range narrowed twice)
	   but at this section's tighter <900px head measure it still visually
	   collides with "Нам довіряють найцінніше" — worse than the reference.
	   Falling back to hiding the whole ribbon below 900px (both markups
	   stay in the DOM; footer.php's mobile <svg> is currently unused CSS-
	   wise) rather than ship a colliding result — narrower than the
	   600px cutoff the spec described. Flagged in the delivery report. */
	body .g22-google-reviews--mosaic .g22-google-reviews__ribbon {
		display: none;
	}

	body .g22-google-reviews--mosaic .g22-google-reviews__device {
		width: 260px;
	}

	/* Ring shrinks with the 260px mobile device (min(84%,300px) resolves to
	   ~195px here) — avatar size/orbit radius scaled down to match so they
	   still sit ON the ring instead of overshooting it. */
	body .g22-google-reviews--mosaic .g22-google-reviews__orbit-avatar {
		width: 40px;
		height: 40px;
		margin: -20px 0 0 -20px;
		transform: rotate(var(--orbit-a, 0deg)) translateY(-82px) rotate(calc(-1 * var(--orbit-a, 0deg)));
	}

	body .g22-google-reviews--mosaic .g22-google-reviews__stage {
		padding-bottom: 0;
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	/* Mobile: no fan, no phone overlap — horizontal scroll-snap row of
	   upright cards below the phone. */
	body .g22-google-reviews--mosaic .g22-google-reviews__fan {
		position: static;
		transform: none;
		width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 14px;
		padding: 4px 24px 12px;
		margin: 0 -24px;
		-webkit-overflow-scrolling: touch;
	}

	body .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
		flex: 0 0 78%;
		scroll-snap-align: center;
		transform: none !important;
	}

	body .g22-google-reviews--mosaic .g22-google-reviews__fan-card:hover {
		transform: none !important;
	}
}

@media (max-width: 600px) {
	/* Ribbon fights the section head at this width — hidden per spec. */
	body .g22-google-reviews--mosaic .g22-google-reviews__ribbon {
		display: none;
	}
}

/* -------------------------------------------------- */
/* Responsive                                          */
/* -------------------------------------------------- */

@media (min-width: 768px) {
	.g22-henna__shell {
		padding-inline: 40px;
	}

	.g22-henna__cards--why {
		grid-template-columns: repeat(2, 1fr);
	}

	.g22-henna__inline-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.g22-henna__review-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.g22-henna__news-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.g22-henna__video-card {
		flex-basis: 42%;
	}
}

/* Video-відгуки: горизонтальний scroll-snap лише <900px (ТЗ, блок 5).
   Від 900px — статична сітка 4–5 карток, без скролу. */
@media (min-width: 900px) {
	.g22-henna__video-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		overflow-x: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}

	.g22-henna__video-card {
		flex-basis: auto;
	}
}

/* Why-cards go 4-across at 900px — matches the JS deck breakpoint
   (assets/reveal.js `deckMq`) so the desktop deck-gather choreography
   always finds the four cards in a single row. */
@media (min-width: 900px) {
	.g22-henna__cards--why {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.g22-henna__two-col {
		grid-template-columns: 1fr 1fr;
		gap: 72px;
	}

	.g22-henna__video-card {
		flex-basis: 24%;
	}
}

/* News grid, desktop ≥900px — lead card occupies the left 2 columns across
   both rows (tall), the two secondary cards stack one-per-row in column 3.
   Implicit grid placement (no grid-template-areas needed): after the lead
   is explicitly placed at col 1/3, row 1/3, the auto-placement cursor lands
   the next two DOM items in col 3 row 1, then col 3 row 2 — no empty cell. */
@media (min-width: 900px) {
	.g22-henna__news-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.g22-henna__news-card--lead {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		flex-direction: column;
	}

	/* Photo top, text below, both stretched to fill the tall cell — no dead
	   space in the bottom-right corner (previous layout was photo-left /
	   text-right with a fixed-height photo, leaving empty room below the
	   text column). */
	.g22-henna__news-card--lead .g22-henna__news-image {
		flex: 1 1 55%;
		aspect-ratio: auto;
		min-height: 0;
	}

	.g22-henna__news-card--lead .g22-henna__news-body {
		flex: 1 1 45%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.g22-henna__news-card:not(.g22-henna__news-card--lead) {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.g22-henna__news-card:not(.g22-henna__news-card--lead) .g22-henna__news-image {
		flex: 1 1 auto;
		aspect-ratio: auto;
		min-height: 0;
	}

	.g22-henna__news-card:not(.g22-henna__news-card--lead) .g22-henna__news-body {
		flex: 0 0 auto;
	}
}

@media (max-width: 640px) {
	.g22-henna__stat-strip {
		flex-direction: column;
	}

	.g22-henna__stat {
		flex-basis: auto;
		padding: 16px 0;
	}

	.g22-henna__stat:first-child {
		padding-top: 0;
	}

	.g22-henna__stat + .g22-henna__stat::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* -------------------------------------------------- */
/* 1b. Hero v3 — mobile <900px: single column, no       */
/* curtain scene. Static stacked layout: white panel    */
/* full-width on top (auto height), photo below as a    */
/* normal block (~60vh). Plate/corners/strip hidden      */
/* (desktop-only decoration). reveal.js also skips the   */
/* whole scroll-progress engine at this breakpoint via   */
/* matchMedia, so no empty 250vh scroll ever ships to    */
/* phones even before this CSS paints.                   */
/* -------------------------------------------------- */
@media (max-width: 899px) {
	.g22-henna__hero {
		height: auto;
		overflow: visible;
	}

	.g22-henna__hero-stage {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		display: flex;
		flex-direction: column;
	}

	.g22-henna__hero-panel {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		order: 1;
		padding: 24px 0;
	}

	.g22-henna__hero-panel-inner {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		max-width: none;
		padding-inline: 24px;
	}

	.g22-henna__hero-media {
		position: relative;
		inset: auto;
		order: 2;
		height: 60vh;
		min-height: 320px;
		z-index: auto;
	}

	.g22-henna__hero-plate,
	.g22-henna__hero-corner,
	.g22-henna__hero-strip {
		display: none;
	}
}

/* -------------------------------------------------- */
/* Footer — giant ghost wordmark (Henna brand moment). */
/* Reuses the existing .g22-footer__wordmark node      */
/* (already in footer.php, aria-hidden, first child of */
/* <footer>) instead of duplicating text via ::after.   */
/* .g22-footer already has position:relative +          */
/* overflow:hidden site-wide (style.css), so the        */
/* absolutely-positioned mark is clipped to the footer  */
/* and sits behind .g22-footer__inner (z-index:1),      */
/* which keeps nav/contacts/copyright fully readable.   */
/* -------------------------------------------------- */

/* Бренд-фіолетовий футер: старий фіолет жив у home.css, після переходу
   на home-henna.css проступив зелений базовий шар зі style.css. */
body .g22-footer {
	background: var(--g22h-purple);
	background-image: none;
}

body .g22-footer__wordmark {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 0;
	transform: translateY(30%);
	margin: 0;
	padding: 0 24px;
	width: auto;
	max-width: none;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 800;
	font-size: clamp(3rem, 11vw, 10rem);
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: rgba(255, 255, 255, 0.07);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

/* -------------------------------------------------- */
/* Hero v2 — giant wordmark, living atom, marquee,      */
/* magnetic CTA, scroll progress                        */
/* -------------------------------------------------- */

/* Giant "Generation 22" wordmark — vw-driven clamp keeps it proportional to
   the shell at any viewport ≥360px and, combined with white-space:nowrap +
   the mandatory &nbsp; between the two words, guarantees it never breaks
   onto a second line (hard brand constraint). */
.g22-henna__wordmark {
	max-width: none;
	margin: 0 auto;
	font-size: clamp(2.6rem, 12.5vw, 9.5rem);
	line-height: 0.94;
	letter-spacing: -0.035em;
	white-space: nowrap;
}

.g22-henna__hero-subtitle-line {
	margin: 20px auto 0;
	max-width: 46ch;
	text-align: center;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--g22h-ink);
}

/* Living atom — 2 orbiting ellipses (opposite directions), a dashed ring and
   a purple nucleus, plus a slow whole-atom float. Placed beside the wordmark;
   collapses out of flow on narrow screens where there's no room for it
   without crowding the (non-negotiable, single-line) wordmark. */
.g22-henna__atom-wrap {
	position: absolute;
	top: -18px;
	right: -8px;
	width: clamp(120px, 16vw, 220px);
	height: clamp(120px, 16vw, 220px);
	pointer-events: none;
	z-index: 1;
}

.g22-henna__atom {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.g22-henna__atom-orbit {
	transform-origin: 120px 120px;
}

.g22-henna__atom-nucleus {
	filter: drop-shadow(0 0 6px rgba(67, 41, 128, 0.35));
}

@media (min-width: 900px) {
	.g22-henna__atom-wrap {
		top: 4px;
		right: -14%;
	}
}

@media (max-width: 640px) {
	.g22-henna__atom-wrap {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.g22-henna__atom-wrap {
		animation: g22AtomFloat 6s ease-in-out infinite alternate;
	}

	.g22-henna__atom-orbit--a {
		animation: g22AtomSpin 20s linear infinite;
	}

	.g22-henna__atom-orbit--b {
		animation: g22AtomSpinReverse 28s linear infinite;
	}

	@keyframes g22AtomFloat {
		from { transform: translateY(0); }
		to { transform: translateY(-10px); }
	}

	@keyframes g22AtomSpin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	@keyframes g22AtomSpinReverse {
		from { transform: rotate(0deg); }
		to { transform: rotate(-360deg); }
	}
}

/* Cursor parallax target (hero-star, hero-arc, atom svg) — JS in reveal.js
   sets --g22-px/--g22-py (±12px), disabled on touch + reduced-motion. Kept
   on the inner .g22-henna__atom svg (not .g22-henna__atom-wrap) so it
   doesn't fight the wrap's own translateY float animation, which would
   otherwise win the cascade every frame and cancel the parallax offset. */
.g22-henna__parallax {
	transform: translate3d(var(--g22-px, 0), var(--g22-py, 0), 0);
	will-change: transform;
}

/* Marquee strip */
.g22-henna__marquee {
	position: relative;
	overflow: hidden;
	background: var(--g22h-purple);
	padding-block: 14px;
}

.g22-henna__marquee-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
}

.g22-henna__marquee-item {
	display: inline-block;
	padding-inline-end: 0;
	font-family: var(--g22h-font);
	font-weight: 600;
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
	letter-spacing: 0.02em;
	color: #fff;
}

/* Loop pause/play toggle (motion polish 4d) — touch devices have no
   :hover to lean on, and users who haven't set OS-level reduced-motion
   may still want to stop a continuously scrolling strip. JS (site-events.js)
   toggles .g22-henna__marquee--paused + swaps the aria-label/aria-pressed
   text between "Призупинити…"/"Відновити…". */
.g22-henna__marquee-toggle {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.2s var(--g22h-ease), border-color 0.2s var(--g22h-ease);
}

.g22-henna__marquee-toggle:hover,
.g22-henna__marquee-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.7);
}

.g22-henna__marquee-toggle-icon {
	display: block;
	width: 8px;
	height: 8px;
}

/* Pause glyph (two bars) by default; play glyph (triangle) once paused. */
.g22-henna__marquee-toggle-icon {
	background:
		linear-gradient(currentColor, currentColor) left / 2.5px 100% no-repeat,
		linear-gradient(currentColor, currentColor) right / 2.5px 100% no-repeat;
}

.g22-henna__marquee--paused .g22-henna__marquee-toggle-icon {
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.g22-henna__marquee-track {
		animation: g22MarqueeScroll 30s linear infinite;
	}

	.g22-henna__marquee:hover .g22-henna__marquee-track,
	.g22-henna__marquee--paused .g22-henna__marquee-track {
		animation-play-state: paused;
	}

	@keyframes g22MarqueeScroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
}

/* Magnetic CTA — JS (reveal.js) sets --g22-mx/--g22-my within ~40px on
   pointermove (desktop pointer:fine only), springs back via transition on
   pointerleave. */
.g22-henna__pill--magnetic {
	transform: translate3d(var(--g22-mx, 0), var(--g22-my, 0), 0);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s var(--g22h-ease), color 0.3s var(--g22h-ease);
}

.g22-henna .g22-henna__pill--magnetic:active,
.g22-google-reviews--mosaic .g22-henna__pill--magnetic:active {
	transition: transform 0.1s var(--g22h-ease), background-color 0.3s var(--g22h-ease), color 0.3s var(--g22h-ease);
}

/* Scroll progress bar — fixed 3px top strip, above the sticky header. */
.g22-henna__progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}

.g22-henna__progress-bar {
	height: 100%;
	width: 0%;
	background: var(--g22h-purple);
}

@media (prefers-reduced-motion: no-preference) {
	.g22-henna__progress-bar {
		transition: width 0.1s linear;
	}
}

/* Word-by-word heading reveal — reveal.js wraps text-node words of
   .g22-henna__heading in spans (.g22-henna__word) on init. Without JS the
   spans never exist, so headings render as plain text, fully visible. */
.g22-henna__word {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.g22-henna__word {
		opacity: 0;
		transform: translateY(0.4em);
		filter: blur(4px);
		transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
		transition-delay: calc(var(--g22-wi, 0) * 40ms);
	}

	.g22-henna__heading--words-in .g22-henna__word {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

/* -------------------------------------------------- */
/* Craft floor (move 5): focus states, reduced motion   */
/* -------------------------------------------------- */

.g22-henna a:focus-visible,
.g22-henna button:focus-visible,
.g22-henna summary:focus-visible,
.g22-henna [tabindex]:focus-visible {
	outline: 2px solid var(--g22h-purple);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.g22-henna * {
		transition: none !important;
		animation: none !important;
	}
}

/* Reduced motion uses the same static-first desktop composition. The
   min-width guard is important: it lets the earlier mobile stacked layout
   keep height:auto instead of being overwritten by a late 100vh rule. */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
	.g22-henna__hero {
		height: max(760px, calc(100svh - 80px));
	}
}

/* -------------------------------------------------- */
/* Hero v3 entrance — left-panel content fade-up on     */
/* load, staggered ~100ms (same pattern as the old       */
/* wordmark hero). Hidden state exists only under        */
/* html.g22-henna-hero-anim (added by reveal.js once it   */
/* finds .g22-henna__hero-panel): no JS = fully visible,  */
/* no layout shift (only opacity/transform animate).      */
/* Runs independently of the scroll-curtain transform      */
/* (that one lives on .g22-henna__hero-panel itself and    */
/* .g22-henna__hero-panel-inner — reveal.js composes both   */
/* by writing the curtain transform on the SAME elements    */
/* this animation targets; the animation finishes in       */
/* ~1.1s, well before any meaningful scroll on load).       */
/* -------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html.g22-henna-hero-anim .g22-henna__hero-brand,
	html.g22-henna-hero-anim .g22-henna__hero-title,
	html.g22-henna-hero-anim .g22-henna__hero-panel .g22-henna__hero-subtitle,
	html.g22-henna-hero-anim .g22-henna__hero-panel .g22-henna__hero-cta,
	html.g22-henna-hero-anim .g22-henna__stat-strip--hero,
	html.g22-henna-hero-anim .g22-henna__hero-avatars {
		opacity: 0;
		animation: g22HennaHeroFadeUp 0.7s ease-out forwards;
	}

	/* Delay order mirrors the panel's top-to-bottom reading order. */
	html.g22-henna-hero-anim .g22-henna__hero-brand { animation-delay: 0ms; }
	html.g22-henna-hero-anim .g22-henna__hero-title { animation-delay: 100ms; }
	html.g22-henna-hero-anim .g22-henna__hero-panel .g22-henna__hero-subtitle { animation-delay: 200ms; }
	html.g22-henna-hero-anim .g22-henna__hero-panel .g22-henna__hero-cta { animation-delay: 300ms; }
	html.g22-henna-hero-anim .g22-henna__stat-strip--hero { animation-delay: 400ms; }
	html.g22-henna-hero-anim .g22-henna__hero-avatars { animation-delay: 500ms; }

	@keyframes g22HennaHeroFadeUp {
		from {
			opacity: 0;
			transform: translateY(16px);
			filter: blur(4px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}
}

/* -------------------------------------------------- */
/* 4b. «Чому обирають» — card-deck flip. Section head  */
/* is now the plain dot-label + H2 + lead (no doodles, */
/* no meta-strip, no notebook texture). Stiles below    */
/* concern ONLY the #why card-flip / deck mechanics.    */
/* -------------------------------------------------- */

/* Neutralise the generic .g22-reveal fade/stagger (style.css) for the
   why-cards: the deck/flip choreography below owns their entrance
   animation entirely, so the outer .g22-henna__card must stay put
   (opacity 1, no transform, no transition) while its inner
   .g22-henna__card-flip does the gliding/flipping. Selector specificity
   matches the style.css rules on purpose (3 classes) so this wins on
   source order without needing !important.
   (NB: verified .g22-henna__section-head/.g22-henna__intro do NOT
   currently match any generic .g22-reveal selector in style.css — no
   equivalent neutralisation needed for the head text below.) */
.g22-henna__cards--why.g22-reveal .g22-henna__card,
.g22-henna__cards--why.g22-reveal.g22-reveal--in .g22-henna__card {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Centered composition — section head text + card content, desktop AND
   mobile. Scoped strictly to #why; every other section keeps the shared
   .g22-henna__section-head/.g22-henna__card-front left-aligned template. */
.g22-henna__why .g22-henna__section-head {
	text-align: center;
	margin-inline: auto;
}

.g22-henna__why .g22-henna__label {
	justify-content: center;
	margin-inline: auto;
}

.g22-henna__why .g22-henna__heading,
.g22-henna__why .g22-henna__lead {
	margin-inline: auto;
}

/* Badge (inline-flex) + h3/p all centered via the front face's text-align
   — inline-level boxes (incl. inline-flex) are aligned by an ancestor's
   text-align, so one declaration covers the badge, the heading and the
   paragraph without touching .g22-henna__card-number's own box model. */
.g22-henna__cards--why .g22-henna__card-front {
	text-align: center;
}

/* Desktop deck stage: perspective for the flip rotation, single row so
   the deck-gather math (JS) has one shared "row" to glide across. */
@media (min-width: 900px) {
	.g22-henna__cards--why {
		perspective: 1400px;
	}
}

/* Card-back "shirt" — centered purple wordmark, visible face #1. */
.g22-henna__card-shirt-logo {
	width: 40%;
	height: auto;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	/* The front face above is the permanent fallback. These 3D states only
	   exist after reveal.js adds both readiness classes, so a JS failure can
	   never leave the heading or card copy hidden. */
	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready {
		perspective: 1400px;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card-flip {
		transform-style: preserve-3d;
		transform: translateY(18px) rotateY(0deg);
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card:nth-child(2) .g22-henna__card-flip {
		transition-delay: 70ms;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card:nth-child(3) .g22-henna__card-flip {
		transition-delay: 140ms;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card:nth-child(4) .g22-henna__card-flip {
		transition-delay: 210ms;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card-back,
	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card-front {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card-back {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset: 0;
		border-radius: var(--g22h-radius-lg);
		border: 1px solid var(--g22h-ink-08);
		background: #fff;
		box-sizing: border-box;
	}

	/* The front stays in normal flow and therefore keeps every grid row sized. */
	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready .g22-henna__card-front {
		position: relative;
		transform: rotateY(180deg);
	}

	html.g22-motion-ready .g22-henna__cards--why.g22-henna__cards--deck-ready.g22-henna__cards--deck-in .g22-henna__card-flip {
		transform: translateY(0) rotateY(180deg);
		will-change: auto;
	}
}

/* ========================================================================== */
/* Phase 2 — visible editorial redesign                                       */
/* ========================================================================== */

/* A warmer canvas, stronger section contrast and a compact 72px rhythm make
   the page read as one intentional editorial system instead of a succession
   of equally weighted grey bands. */
.g22-henna {
	--g22h-bg: #ededed;
	background: var(--g22h-bg);
}

.g22-henna__section {
	padding-block: clamp(56px, 6vw, 80px);
}

.g22-henna__section + .g22-henna__section {
	padding-block-start: clamp(40px, 4vw, 56px);
}

/* Hero: framed editorial split. The image now reads as the dominant story,
   while the paper panel carries a much stronger headline hierarchy. */
.g22-henna__hero {
	height: max(720px, calc(100svh - 80px));
	padding: 20px 24px 28px;
	background: var(--g22h-bg);
}

.g22-henna__hero-stage {
	border-radius: 36px;
	background: var(--g22-purple-deep);
	box-shadow: 0 30px 80px -52px rgba(36, 22, 77, 0.6);
}

.g22-henna__hero-media {
	inset: 0 0 0 44%;
	width: auto;
	border-radius: 0 36px 36px 0;
	overflow: hidden;
}

.g22-henna__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 12, 45, 0.02) 45%, rgba(20, 12, 45, 0.38) 100%);
	pointer-events: none;
}

.g22-henna__hero-media img {
	object-position: 56% center;
}

.g22-henna__hero-panel {
	inset: 0 56% 0 0;
	width: 44%;
	border-radius: 36px 0 0 36px;
	background: #fbfaf7;
}

.g22-henna__hero-panel-inner {
	left: clamp(36px, 5vw, 72px);
	right: 32px;
	top: 50%;
	gap: 22px;
	max-width: 480px;
}

.g22-henna__hero-brand {
	align-self: flex-start;
	padding: 8px 12px;
	border: 1px solid rgba(67, 41, 128, 0.16);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--g22h-purple);
	background: rgba(67, 41, 128, 0.04);
}

.g22-henna__hero-title {
	max-width: 12ch;
	font-size: clamp(2.55rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.g22-henna__hero-title .g22-henna__marker-svg {
	bottom: -0.08em;
	height: 0.28em;
}

.g22-henna__hero-panel .g22-henna__hero-subtitle {
	max-width: 39ch;
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	line-height: 1.58;
}

.g22-henna__hero-panel .g22-henna__pill--solid {
	box-shadow: 0 14px 28px -18px rgba(67, 41, 128, 0.75);
}

.g22-henna__stat-strip--hero {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-top: 18px;
	border-top: 1px solid var(--g22h-ink-10);
}

.g22-henna__stat-strip--hero .g22-henna__stat {
	padding: 0 12px;
}

.g22-henna__stat-strip--hero .g22-henna__stat:first-child {
	padding-left: 0;
}

.g22-henna__stat-strip--hero .g22-henna__stat b {
	font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.g22-henna__stat-strip--hero .g22-henna__stat span {
	font-size: 0.67rem;
	line-height: 1.35;
}

.g22-henna__hero-avatars {
	gap: 12px;
}

.g22-henna__hero-avatar {
	width: 34px;
	height: 34px;
	margin-left: -12px;
}

.g22-henna__hero-plate {
	right: 24px;
	bottom: 24px;
	max-width: 320px;
	padding: 18px 20px;
	border-radius: 22px;
	background: var(--g22h-yellow);
	box-shadow: 0 18px 38px -22px rgba(20, 12, 45, 0.65);
}

.g22-henna__hero-plate-heading {
	width: auto;
	max-width: 12ch;
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 1;
}

.g22-henna__hero-corner,
.g22-henna__hero-strip {
	display: none;
}

/* Give the first content block a paper surface so the transition from the
   framed hero is immediately visible without introducing another colour. */
.g22-henna__about {
	margin: 0 24px;
	border-radius: 40px;
	background: #fbfaf7;
}

.g22-henna__two-col {
	gap: clamp(44px, 6vw, 72px);
}

.g22-henna__about-photo,
.g22-henna__learning-photo {
	box-shadow: 0 24px 56px -40px rgba(36, 22, 77, 0.45);
}

/* The value proposition becomes the page's deliberate high-contrast moment.
   Copy is visible immediately; the old logo-first card flip is removed. */
.g22-henna__why {
	background: var(--g22-purple-deep);
	color: #fff;
	border-radius: 48px 48px 0 0;
}

.g22-henna__why .g22-henna__label,
.g22-henna__why .g22-henna__lead {
	color: rgba(255, 255, 255, 0.7);
}

.g22-henna__why .g22-henna__heading {
	max-width: 17ch;
	color: #fff;
}

.g22-henna__cards--why {
	gap: 14px;
	perspective: none !important;
}

.g22-henna__cards--why .g22-henna__card {
	box-shadow: none;
}

.g22-henna__cards--why .g22-henna__card-flip {
	transform: none !important;
	transform-style: flat !important;
	opacity: 1 !important;
	transition: none !important;
	will-change: auto !important;
}

.g22-henna__cards--why .g22-henna__card-back {
	display: none !important;
}

.g22-henna__cards--why .g22-henna__card-front {
	transform: none !important;
	backface-visibility: visible !important;
	position: relative !important;
	padding: 28px 24px;
	text-align: left;
	border: 0;
	background: #fbfaf7;
}

.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-front {
	background: var(--g22h-yellow);
}

.g22-henna__cards--why .g22-henna__card-number {
	width: 36px;
	height: 36px;
	background: var(--g22h-purple);
	color: #fff;
}

.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
	background: rgba(26, 26, 26, 0.12);
	color: var(--g22h-ink);
}

/* Reviews: four real voices in a compact editorial grid. The decorative
   phone/ribbon composition is intentionally removed; it was visually loud,
   tall and delayed access to the proof parents actually need. */
body.home .g22-google-reviews--mosaic {
	background: #fbfaf7 !important;
	padding-block: clamp(56px, 6vw, 80px) !important;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__mosaic-shell {
	width: min(100% - 48px, 1200px);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__ribbon,
body.home .g22-google-reviews--mosaic .g22-google-reviews__phone {
	display: none !important;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head {
	max-width: none;
	margin: 0 0 36px;
	text-align: left;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__label {
	justify-content: flex-start;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading,
body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__lead {
	margin-inline: 0;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading {
	max-width: 14ch;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__stage {
	display: block;
	padding: 0;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	overflow: visible;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
	min-width: 0;
	min-height: 278px;
	padding: 24px;
	border: 1px solid var(--g22h-ink-08);
	border-radius: 24px;
	box-shadow: none;
	transform: none !important;
	opacity: 1 !important;
	display: flex;
	flex-direction: column;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child {
	background: var(--g22h-purple);
	border-color: var(--g22h-purple);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) {
	background: var(--g22h-yellow);
	border-color: var(--g22h-yellow);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-tag,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-quote,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child footer b {
	color: #fff;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-quote {
	-webkit-line-clamp: 7;
	font-size: 0.9rem;
	line-height: 1.62;
	flex: 1;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer {
	margin-top: auto;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__foot {
	margin-top: 32px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__summary {
	justify-content: flex-end;
}

/* Slightly denser news and CTA endings keep the new hierarchy moving. */
.g22-henna__news-card {
	box-shadow: 0 18px 42px -36px rgba(36, 22, 77, 0.48);
}

.g22-henna__cta-section {
	background: var(--g22-purple-deep);
	padding-block: clamp(48px, 5vw, 72px);
}

.g22-henna__cta-section .g22-henna__heading {
	font-size: clamp(3rem, 6vw, 5.6rem);
}

@media (max-width: 1099px) and (min-width: 900px) {
	.g22-henna__hero-panel-inner {
		left: 36px;
		right: 24px;
		gap: 17px;
	}

	.g22-henna__hero-title {
		font-size: clamp(2.25rem, 4vw, 3rem);
	}

	.g22-henna__hero-avatars {
		display: none;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.g22-henna__hero {
		padding: 12px 12px 20px;
	}

	.g22-henna__hero-stage {
		border-radius: 28px;
	}

	.g22-henna__hero-panel {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		padding: 34px 0 30px;
		border-radius: 28px 28px 0 0;
	}

	.g22-henna__hero-panel-inner {
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		max-width: none;
		gap: 18px;
		padding-inline: 24px;
	}

	.g22-henna__hero-panel .g22-henna__hero-cta,
	.g22-henna__hero-panel .g22-henna__pill--solid {
		width: 100%;
		max-width: 100%;
	}

	.g22-henna__hero-panel .g22-henna__pill--solid {
		padding-inline: 18px;
		text-align: center;
	}

	.g22-henna__hero-title {
		max-width: 12ch;
		font-size: clamp(2.45rem, 11vw, 3.7rem);
	}

	.g22-henna__hero-media {
		inset: auto;
		width: 100%;
		height: min(58svh, 520px);
		border-radius: 0 0 28px 28px;
	}

	.g22-henna__hero-plate {
		display: block;
		right: 16px;
		bottom: 16px;
		max-width: 220px;
		padding: 14px 16px;
		border-radius: 18px;
	}

	.g22-henna__hero-plate-heading {
		font-size: 1.15rem;
	}

	.g22-henna__about {
		margin: 0 12px;
		border-radius: 28px;
	}

	.g22-henna__why {
		border-radius: 32px 32px 0 0;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 4px 24px 14px;
		margin: 0 -24px;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
		flex: 0 0 min(82%, 340px);
		min-height: 260px;
		scroll-snap-align: center;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__foot {
		align-items: flex-start;
		flex-direction: column;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__summary {
		justify-content: flex-start;
	}
}

@media (max-width: 520px) {
	.g22-henna__stat-strip--hero {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.g22-henna__stat-strip--hero .g22-henna__stat {
		padding-inline: 8px;
	}

	.g22-henna__stat-strip--hero .g22-henna__stat b {
		font-size: 1.18rem;
	}

	.g22-henna__hero-avatars {
		flex-wrap: wrap;
	}
}

/* ========================================================================== */
/* Phase 3 — BrightEdge composition × official Generation 22 brand guideline  */
/* Palette is intentionally limited to Violet #3F2780, Yellow #FFD141, White. */
/* ========================================================================== */

body.home {
	--g22-be-violet: var(--g22-purple);
	--g22-be-yellow: var(--g22-yellow);
	--g22-be-white: var(--g22-card);
	--g22-be-violet-04: rgba(67, 41, 128, 0.04);
	--g22-be-violet-08: rgba(67, 41, 128, 0.08);
	--g22-be-violet-14: rgba(67, 41, 128, 0.14);
	--g22-be-violet-24: rgba(67, 41, 128, 0.24);
	--g22-be-violet-64: rgba(67, 41, 128, 0.64);
	background: var(--g22-be-violet);
}

body.home .g22-header:not(.g22-header--taste) {
	position: sticky;
	top: 0;
	height: 76px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 clamp(22px, 4vw, 64px);
	border: 0;
	border-bottom: 1px solid var(--g22-be-violet-14);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: none;
	color: var(--g22-be-violet);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: background-color 240ms ease, box-shadow 240ms ease;
}

body.home .g22-header--condensed:not(.g22-header--taste) {
	top: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 clamp(22px, 4vw, 64px);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 14px 34px rgba(67, 41, 128, 0.08);
}

body.home .g22-header:not(.g22-header--taste) .g22-header__logo-image {
	width: clamp(136px, 12vw, 168px);
	max-height: 42px;
	filter: none;
}

@media (min-width: 821px) {
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav ul {
		gap: clamp(2px, 0.5vw, 10px);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a {
		position: relative;
		min-height: 44px;
		padding: 0 10px;
		border: 0;
		border-radius: 0;
		outline: 0;
		box-shadow: none;
		background: transparent;
		color: var(--g22-be-violet);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.045em;
		text-transform: uppercase;
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 7px;
		height: 3px;
		background: var(--g22-be-yellow);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a{
		border: 0;
		outline: 0;
		box-shadow: none;
		background: transparent;
		color: var(--g22-be-violet);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:hover::after,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible::after,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a::after{
		transform: scaleX(1);
		transform-origin: left;
	}
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	/* Fix 2 (design audit): measured 176x72px @ 11.84px text on the live
	   homepage header — this rule was the actual winner. Rebalanced to
	   match the shared 48-52px/14px pill spec used everywhere else.
	   46px inline padding reserves room for the 24px ::after arrow,
	   which sits at right:11px and slides to the left edge on hover. */
	padding: 0 46px;
	border: 1px solid var(--g22-be-violet);
	border-radius: 999px;
	background: var(--g22-be-violet);
	color: var(--g22-be-white) !important;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
	box-shadow: none;
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta::after {
	right: 11px;
	width: 24px;
	height: 24px;
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta:hover {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta:hover::after {
	right: calc(100% - 11px - 24px);
}

.g22-henna {
	--g22h-bg: var(--g22-be-white);
	--g22h-ink: var(--g22-be-violet);
	--g22h-ink-75: rgba(67, 41, 128, 0.75);
	--g22h-ink-70: rgba(67, 41, 128, 0.7);
	--g22h-ink-60: rgba(67, 41, 128, 0.6);
	--g22h-ink-55: rgba(67, 41, 128, 0.55);
	--g22h-ink-45: rgba(67, 41, 128, 0.45);
	--g22h-ink-30: rgba(67, 41, 128, 0.3);
	--g22h-ink-10: rgba(67, 41, 128, 0.1);
	--g22h-ink-08: rgba(67, 41, 128, 0.08);
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
}

.g22-henna__shell {
	width: min(calc(100% - clamp(40px, 7vw, 104px)), 1320px);
}

.g22-henna__section {
	padding-block: clamp(64px, 6vw, 88px);
}

/* Fix 4 (design audit): the two rules below used to share the same clamp,
   so every pair of adjacent sections stacked bottom+top padding into a
   200px+ dead band of pattern/canvas background. The second section now
   contributes a smaller top offset, keeping the total visible gap within
   one consistent ~120-160px desktop token (per audit spec) instead of
   doubling up. */
.g22-henna__section + .g22-henna__section {
	padding-block-start: clamp(48px, 5vw, 64px);
}

.g22-henna__heading {
	max-width: 15ch;
	font-size: clamp(2.75rem, 4.5vw, 4rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.045em;
	color: var(--g22-be-violet);
	overflow-wrap: normal;
	word-break: normal;
}

.g22-henna__label {
	gap: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--g22-be-violet-64);
}

.g22-henna__label::before {
	content: "{";
}

.g22-henna__label::after {
	content: "}";
}

.g22-henna__label-dot,
.g22-henna__marker-svg {
	display: none;
}

.g22-henna__body,
.g22-henna__lead {
	color: var(--g22-be-violet-64);
}

.g22-henna__link {
	color: var(--g22-be-violet);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--g22-be-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 7px;
}

/* Hero — hard three-column composition: brand rail, editorial copy, image. */
.g22-henna__hero {
	height: auto;
	min-height: calc(100svh - 76px);
	padding: 0 clamp(18px, 3.2vw, 52px) clamp(18px, 3.2vw, 52px);
	background: var(--g22-be-violet);
	overflow: visible;
}

.g22-henna__hero-stage {
	--g22-be-x: 0px;
	--g22-be-y: 0px;
	position: relative;
	display: grid;
	grid-template-columns: clamp(82px, 7vw, 108px) minmax(410px, 0.9fr) minmax(480px, 1.1fr);
	grid-template-areas: "rail panel media";
	height: calc(100svh - 76px - clamp(18px, 3.2vw, 52px));
	min-height: 690px;
	max-height: 940px;
	max-width: 1480px;
	margin: 0 auto;
	border: 0;
	border-radius: 0;
	background: var(--g22-be-white);
	box-shadow: none;
	overflow: hidden;
}

.g22-be-rail {
	grid-area: rail;
	position: relative;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	padding: 24px 0 22px;
	background: var(--g22-be-violet);
	color: var(--g22-be-yellow);
}

.g22-be-rail__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
	font-size: 1.2rem;
}

.g22-be-rail__word {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.g22-be-rail__index {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	transform: rotate(-90deg);
	white-space: nowrap;
}

.g22-henna__hero-panel {
	grid-area: panel;
	position: relative;
	inset: auto;
	z-index: 3;
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	padding: clamp(44px, 5vw, 78px) clamp(34px, 4.4vw, 70px);
	border: 0;
	border-radius: 0;
	background: var(--g22-be-white);
}

.g22-henna__hero-panel-inner {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	width: 100%;
	max-width: 550px;
	transform: none;
	gap: clamp(18px, 2.2vh, 28px);
}

.g22-henna__hero-brand {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--g22-be-violet);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: none;
}

.g22-henna__hero-brand::before {
	content: "✳";
	color: var(--g22-be-yellow);
	font-size: 1.2em;
}

.g22-henna__hero-title {
	max-width: 11.5ch;
	font-size: clamp(3rem, 4.45vw, 4.8rem);
	font-weight: 500;
	line-height: 0.99;
	letter-spacing: -0.06em;
	color: var(--g22-be-violet);
}

.g22-henna__hero-panel .g22-henna__hero-subtitle {
	max-width: 46ch;
	font-size: clamp(0.92rem, 1.05vw, 1.05rem);
	line-height: 1.55;
	color: var(--g22-be-violet-64);
}

.g22-henna__hero-panel .g22-henna__hero-cta {
	/* Fix 2 (design audit): 370x62px measured — capped to ~300px so the
	   pill no longer dominates the hero panel at 1440px. */
	max-width: max-content;
}

@media (min-width: 769px) {
	.g22-henna__hero-panel .g22-henna__hero-cta .g22-henna__pill--solid {
		white-space: nowrap;
	}
}

.g22-henna__hero-panel .g22-henna__pill--solid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	/* Height is set by the 34px icon + 8px vertical padding (=50px total
	   incl. border), not by the text line — icon is the tallest child. */
	padding: 8px 10px 8px 22px;
	border: 1px solid var(--g22-be-violet);
	border-radius: 999px;
	background: var(--g22-be-violet);
	box-shadow: none;
	color: var(--g22-be-white);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
}

.g22-henna__hero-panel .g22-henna__pill--solid::after {
	content: "↗";
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: 12px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
	font-size: 0.95rem;
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__hero-panel .g22-henna__pill--solid:hover,
.g22-henna__hero-panel .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
}

.g22-henna__hero-panel .g22-henna__pill--solid:hover::after,
.g22-henna__hero-panel .g22-henna__pill--solid:focus-visible::after {
	transform: rotate(45deg);
}

.g22-henna__stat-strip--hero {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--g22-be-violet-14);
	border-bottom: 1px solid var(--g22-be-violet-14);
}

.g22-henna__stat-strip--hero .g22-henna__stat {
	padding: 0 12px;
}

.g22-henna__stat-strip--hero .g22-henna__stat:first-child {
	padding-left: 0;
}

.g22-henna__stat-strip--hero .g22-henna__stat b {
	font-size: clamp(1.18rem, 1.8vw, 1.55rem);
	font-weight: 600;
	color: var(--g22-be-violet);
}

.g22-henna__stat-strip--hero .g22-henna__stat span {
	margin-top: 4px;
	font-size: 0.62rem;
	line-height: 1.3;
	color: var(--g22-be-violet-64);
}

.g22-henna__hero-avatar {
	width: 34px;
	height: 34px;
	margin-left: -10px;
	border: 2px solid var(--g22-be-white);
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

.g22-henna__hero-avatar:nth-child(even) {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

.g22-henna__hero-avatar-label {
	color: var(--g22-be-violet);
	font-size: 0.78rem;
}

.g22-henna__hero-media {
	grid-area: media;
	position: relative;
	inset: auto;
	z-index: 1;
	width: auto;
	height: auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: var(--g22-be-violet);
	overflow: hidden;
}

.g22-henna__hero-media picture,
.g22-henna__hero-media img {
	width: 100%;
	height: 100%;
}

.g22-henna__hero-media img {
	object-position: 56% center;
	transform: scale(1.035) translate3d(var(--g22-be-x), var(--g22-be-y), 0);
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__hero-media::before {
	content: "";
	position: absolute;
	left: -1px;
	bottom: -1px;
	z-index: 3;
	width: clamp(72px, 7vw, 112px);
	height: clamp(72px, 7vw, 112px);
	border-radius: 0 100% 0 0;
	background: var(--g22-be-white);
	pointer-events: none;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan:focus-visible {
	outline: 2px solid var(--g22-be-yellow);
	outline-offset: 5px;
}

.g22-henna__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	background: var(--g22-be-violet);
	transform: scaleX(0);
	transform-origin: right;
	pointer-events: none;
}

.g22-be-scroll {
	position: absolute;
	left: 49.2%;
	top: 55%;
	z-index: 10;
	display: grid;
	place-items: center;
	/* Fix 8 (design audit): reduced from 112px and made monochrome —
	   the CTA arrow + logo asterisk stay the only yellow accents in the
	   hero, this badge is now an outline/paper circle with violet text. */
	width: 72px;
	height: 72px;
	border: 2px solid var(--g22-be-violet);
	border-radius: 50%;
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
	transform: translate(-50%, -50%);
	box-shadow: none;
}

.g22-be-scroll svg {
	position: absolute;
	inset: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
}

.g22-be-scroll text {
	fill: currentColor;
	font-family: var(--g22h-font);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.8px;
}

.g22-be-scroll > span {
	font-size: 1.25rem;
	font-weight: 700;
	transition: transform 260ms ease;
}

.g22-be-scroll:hover > span,
.g22-be-scroll:focus-visible > span {
	transform: translateY(4px);
}

.g22-henna__hero-plate {
	position: absolute;
	right: 24px;
	bottom: 22px;
	z-index: 7;
	max-width: none;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 0;
	background: var(--g22-be-violet);
	box-shadow: none;
}

.g22-henna__hero-plate-heading {
	width: auto;
	max-width: none;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--g22-be-white);
}

.g22-henna__hero-corner,
.g22-henna__hero-strip {
	display: none;
}

.g22-henna__marquee {
	padding-block: 13px;
	border-top: 1px solid var(--g22-be-violet);
	border-bottom: 1px solid var(--g22-be-violet);
	background: var(--g22-be-yellow);
}

.g22-henna__marquee-item {
	color: var(--g22-be-violet);
	font-size: clamp(0.78rem, 1.1vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.g22-henna__marquee-toggle {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

/* About — white editorial spread with a single oversized image. */
.g22-henna__about {
	position: relative;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--g22-be-white);
}

.g22-henna__about .g22-henna__two-col {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(54px, 8vw, 122px);
	align-items: center;
}

.g22-henna__about-copy {
	max-width: 600px;
}

.g22-henna__about-photo,
.g22-henna__learning-photo,
.g22-henna__photo,
.g22-henna__video-card,
.g22-henna__video-embed {
	border-radius: 0;
	box-shadow: none;
}

.g22-henna__about-photo {
	aspect-ratio: 4 / 5;
	max-height: 760px;
}

.g22-henna__caption {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g22-be-violet-64);
}

.g22-henna__caption-dot {
	width: 9px;
	height: 9px;
	border-radius: 0;
	background: var(--g22-be-yellow);
	transform: rotate(45deg);
}

/* Learning — the brand-violet anchor, using the approved G22 pattern softly. */
.g22-henna__learning {
	position: relative;
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
	overflow: hidden;
}

.g22-henna__learning::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/g22-pattern-purple.png") center / 760px auto repeat;
	opacity: 0.055;
	pointer-events: none;
}

.g22-henna__learning .g22-henna__two-col {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	gap: clamp(56px, 8vw, 120px);
	align-items: center;
}

.g22-henna__learning-copy {
	order: 2;
}

.g22-henna__learning-visual {
	order: 1;
}

.g22-henna__learning .g22-henna__heading,
.g22-henna__learning .g22-henna__label,
.g22-henna__learning .g22-henna__link,
.g22-henna__learning .g22-henna__inline-list b {
	color: var(--g22-be-white);
}

.g22-henna__learning .g22-henna__label::before,
.g22-henna__learning .g22-henna__label::after,
.g22-henna__learning .g22-henna__link {
	text-decoration-color: var(--g22-be-yellow);
	color: var(--g22-be-yellow);
}

.g22-henna__learning .g22-henna__body,
.g22-henna__learning .g22-henna__inline-list span,
.g22-henna__learning .g22-henna__caption {
	color: rgba(255, 255, 255, 0.7);
}

.g22-henna__learning-photo {
	aspect-ratio: 4 / 5;
	max-height: 740px;
}

.g22-henna__inline-list {
	counter-reset: g22-learning;
	gap: 0;
	margin: 38px 0;
}

.g22-henna__inline-list li {
	counter-increment: g22-learning;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 14px;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	background: transparent;
}

.g22-henna__inline-list li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.g22-henna__inline-list li::before {
	content: "0" counter(g22-learning);
	grid-row: 1 / 3;
	color: var(--g22-be-yellow);
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.72rem;
	font-weight: 500;
}

.g22-henna__inline-list b,
.g22-henna__inline-list span {
	grid-column: 2;
}

.g22-henna__inline-list b {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Why — numbered rows, no card deck, no rounded coloured tiles. */
.g22-henna__why {
	border: 0;
	border-radius: 0;
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
}

.g22-henna__why > .g22-henna__shell {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(54px, 8vw, 128px);
	align-items: start;
}

.g22-henna__why .g22-henna__section-head {
	position: sticky;
	top: 116px;
	max-width: 560px;
	margin: 0;
	text-align: left;
}

.g22-henna__why .g22-henna__label {
	justify-content: flex-start;
	margin-inline: 0;
	color: var(--g22-be-violet-64);
}

.g22-henna__why .g22-henna__heading,
.g22-henna__why .g22-henna__lead {
	margin-inline: 0;
	color: var(--g22-be-violet);
}

.g22-henna__why .g22-henna__lead {
	color: var(--g22-be-violet-64);
}

.g22-henna__cards--why {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	perspective: none !important;
}

.g22-henna__cards--why .g22-henna__card {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.g22-henna__cards--why .g22-henna__card:hover {
	box-shadow: none;
	transform: none;
}

.g22-henna__cards--why .g22-henna__card-flip {
	height: auto;
	transform: none !important;
	transform-style: flat !important;
	opacity: 1 !important;
	transition: none !important;
	will-change: auto !important;
}

.g22-henna__cards--why .g22-henna__card-back {
	display: none !important;
}

.g22-henna__cards--why .g22-henna__card-front,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-front {
	position: relative !important;
	display: grid;
	grid-template-columns: clamp(62px, 7vw, 98px) 1fr;
	column-gap: clamp(20px, 3vw, 42px);
	height: auto;
	padding: clamp(28px, 4vw, 54px) 0;
	border: 0;
	border-top: 1px solid var(--g22-be-violet-24);
	border-radius: 0;
	background: var(--g22-be-white);
	backface-visibility: visible !important;
	transform: none !important;
	text-align: left;
	transition: padding-left 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__cards--why .g22-henna__card:last-child .g22-henna__card-front {
	border-bottom: 1px solid var(--g22-be-violet-24);
}

.g22-henna__cards--why .g22-henna__card-front:hover {
	padding-left: 12px;
}

.g22-henna__cards--why .g22-henna__card-number,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
	grid-row: 1 / 3;
	align-self: start;
	justify-content: flex-start;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: transparent;
	color: var(--g22-be-yellow);
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: 500;
	line-height: 0.9;
}

.g22-henna__cards--why .g22-henna__card h3,
.g22-henna__cards--why .g22-henna__card p {
	grid-column: 2;
}

.g22-henna__cards--why .g22-henna__card h3 {
	margin: 0 0 12px;
	color: var(--g22-be-violet);
	/* Fix 6 (design audit): numbered-list H3 measured 34.4px — brought
	   down to the 26-28px target range. */
	font-size: clamp(1.375rem, 1.6vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.g22-henna__cards--why .g22-henna__card p {
	max-width: 58ch;
	color: var(--g22-be-violet-64);
}

/* News — large sticky project panels echoing the reference's stacked work. */
.g22-henna__news {
	background: var(--g22-be-violet-04);
}

.g22-henna__news-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 32px;
	margin-bottom: clamp(48px, 7vw, 92px);
}

.g22-henna__news-grid {
	display: block;
}

.g22-henna__news-card,
.g22-henna__news-card--lead,
.g22-henna__news-card:not(.g22-henna__news-card--lead) {
	position: sticky;
	top: 106px;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
	grid-column: auto;
	min-height: min(68vh, 680px);
	margin: 0 0 26px;
	border: 1px solid var(--g22-be-violet);
	border-radius: 0;
	background: var(--g22-be-white);
	box-shadow: 0 28px 70px rgba(67, 41, 128, 0.12);
	overflow: hidden;
	transform: none;
}

.g22-henna__news-card:nth-child(2) {
	top: 122px;
}

.g22-henna__news-card:nth-child(3) {
	top: 138px;
}

.g22-henna__news-card:hover {
	box-shadow: 0 32px 76px rgba(67, 41, 128, 0.16);
}

.g22-henna__news-card--lead .g22-henna__news-image,
.g22-henna__news-card:not(.g22-henna__news-card--lead) .g22-henna__news-image,
.g22-henna__news-image {
	width: 100%;
	height: 100%;
	min-height: 460px;
	border-radius: 0;
	aspect-ratio: auto;
}

.g22-henna__news-image img {
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__news-card:hover .g22-henna__news-image img {
	transform: scale(1.035);
}

.g22-henna__news-card--lead .g22-henna__news-body,
.g22-henna__news-card:not(.g22-henna__news-card--lead) .g22-henna__news-body,
.g22-henna__news-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(38px, 5vw, 76px);
}

.g22-henna__news-card:nth-child(1) .g22-henna__news-body {
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

.g22-henna__news-card:nth-child(2) .g22-henna__news-body {
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
}

.g22-henna__news-card:nth-child(3) .g22-henna__news-body {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

.g22-henna__news-card:nth-child(1) .g22-henna__news-meta,
.g22-henna__news-card:nth-child(1) .g22-henna__news-body span {
	color: rgba(255, 255, 255, 0.72);
}

.g22-henna__news-body h3 {
	/* Fix 6 (design audit): news H3 measured 56.4px, competing with the
	   section H2 (was even taller than the hero H1). Target scale:
	   clamp(24px, 2vw, 30px), well below both H1 and H2. */
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.g22-henna__news-body span {
	max-width: 48ch;
	font-size: 0.93rem;
	color: var(--g22-be-violet-64);
}

.g22-henna__news-card:not(:has(.g22-henna__news-image)) {
	grid-template-columns: 1fr;
}

/* Conversion — one strong brand field, two architectural choices. */
.g22-henna__cta-section {
	position: relative;
	padding-block: clamp(88px, 10vw, 148px);
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
	overflow: hidden;
}

.g22-henna__cta-section::before {
	content: "";
	position: absolute;
	right: -12vw;
	top: -30%;
	width: min(56vw, 760px);
	aspect-ratio: 1;
	border: clamp(56px, 8vw, 112px) solid rgba(255, 209, 65, 0.12);
	border-radius: 50%;
	pointer-events: none;
}

.g22-henna__cta-section .g22-henna__shell {
	position: relative;
	z-index: 1;
}

.g22-henna__cta-section .g22-henna__label,
.g22-henna__cta-section .g22-henna__heading {
	color: var(--g22-be-white);
}

.g22-henna__cta-section .g22-henna__label::before,
.g22-henna__cta-section .g22-henna__label::after {
	color: var(--g22-be-yellow);
}

.g22-henna__cta-section .g22-henna__heading {
	max-width: 10ch;
	font-size: clamp(4rem, 10vw, 9.5rem);
	font-weight: 500;
	line-height: 0.82;
	letter-spacing: -0.075em;
}

.g22-henna__cta-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(54px, 8vw, 104px);
	border: 1px solid rgba(255, 255, 255, 0.44);
}

.g22-henna__cta-card {
	min-height: 380px;
	padding: clamp(32px, 5vw, 64px);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--g22-be-white);
}

.g22-henna__cta-card + .g22-henna__cta-card {
	border-left: 1px solid rgba(255, 255, 255, 0.44);
}

.g22-henna__cta-card:first-child {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

.g22-henna__cta-card h3 {
	max-width: 15ch;
	color: inherit;
	font-size: clamp(1.8rem, 3vw, 3.2rem);
	font-weight: 500;
	line-height: 1;
}

.g22-henna__cta-card > p {
	max-width: 52ch;
	color: inherit;
	opacity: 0.75;
}

.g22-henna__cta-card .g22-henna__pill--solid {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
}

.g22-henna__cta-card:first-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:first-child .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

.g22-henna__cta-card:last-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:last-child .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-yellow);
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

/* Reviews — proof first, device mockup removed, brand-grid retained. */
body.home .g22-google-reviews--mosaic {
	padding-block: clamp(88px, 10vw, 148px) !important;
	background: var(--g22-be-white) !important;
	color: var(--g22-be-violet);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__mosaic-shell {
	width: min(calc(100% - clamp(40px, 7vw, 104px)), 1320px);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__ribbon,
body.home .g22-google-reviews--mosaic .g22-google-reviews__phone {
	display: none !important;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head {
	max-width: 900px;
	margin: 0 0 clamp(48px, 7vw, 88px);
	text-align: left;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__label {
	justify-content: flex-start;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading,
body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__lead {
	margin-inline: 0;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading {
	max-width: 13ch;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__stage {
	display: block;
	padding: 0;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--g22-be-violet);
	border-left: 1px solid var(--g22-be-violet);
	overflow: visible;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 310px;
	padding: clamp(30px, 4vw, 54px);
	border: 0;
	border-right: 1px solid var(--g22-be-violet);
	border-bottom: 1px solid var(--g22-be-violet);
	border-radius: 0;
	background: var(--g22-be-white);
	box-shadow: none;
	color: var(--g22-be-violet);
	transform: none !important;
	opacity: 1 !important;
	transition: background-color 300ms ease, color 300ms ease;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child {
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:hover {
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
	box-shadow: none;
	transform: none !important;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-tag,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-quote,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer b,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-tag,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-quote,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child footer b {
	color: inherit;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-quote {
	display: block;
	-webkit-line-clamp: unset;
	font-size: clamp(1rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	flex: 1;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer {
	margin-top: auto;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer .g22-google-reviews__mark {
	border-radius: 0;
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) footer .g22-google-reviews__mark {
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__foot {
	margin-top: 36px;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	text-align: left;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__summary strong,
body.home .g22-google-reviews--mosaic .g22-google-reviews__stars {
	color: var(--g22-be-violet);
}

/* Motion: image wipe, staggered hero, rotating badge and scroll reveals. */
.g22-henna__progress-bar {
	width: 100%;
	background: var(--g22-be-yellow);
	transform: scaleX(0);
	transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
	.g22-be-scroll svg {
		animation: g22-be-rotate 14s linear infinite;
	}

	@keyframes g22-be-rotate {
		to { transform: rotate(360deg); }
	}

	html.g22-be-js .g22-henna__hero-media::after {
		transform: scaleX(1);
	}

	html.g22-be-loaded .g22-henna__hero-media::after {
		transform: scaleX(0);
		transition: transform 1.15s 120ms cubic-bezier(0.76, 0, 0.24, 1);
	}

	html.g22-be-js .g22-henna__hero-media img {
		transform: scale(1.12) translate3d(var(--g22-be-x), var(--g22-be-y), 0);
	}

	html.g22-be-loaded .g22-henna__hero-media img {
		transform: scale(1.035) translate3d(var(--g22-be-x), var(--g22-be-y), 0);
		transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-js .g22-be-rail {
		opacity: 0;
		transform: translateY(-100%);
	}

	html.g22-be-loaded .g22-be-rail {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 650ms ease, transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
	}

	html.g22-be-js .g22-henna__hero-brand,
	html.g22-be-js .g22-henna__hero-title,
	html.g22-be-js .g22-henna__hero-panel .g22-henna__hero-subtitle,
	html.g22-be-js .g22-henna__hero-panel .g22-henna__hero-cta,
	html.g22-be-js .g22-henna__stat-strip--hero,
	html.g22-be-js .g22-henna__hero-avatars,
	html.g22-be-js .g22-be-scroll,
	html.g22-be-js .g22-henna__hero-plate {
		opacity: 0;
		transform: translateY(28px);
	}

	html.g22-be-js .g22-be-scroll {
		transform: translate(-50%, calc(-50% + 28px)) scale(0.88);
	}

	html.g22-be-loaded .g22-henna__hero-brand,
	html.g22-be-loaded .g22-henna__hero-title,
	html.g22-be-loaded .g22-henna__hero-panel .g22-henna__hero-subtitle,
	html.g22-be-loaded .g22-henna__hero-panel .g22-henna__hero-cta,
	html.g22-be-loaded .g22-henna__stat-strip--hero,
	html.g22-be-loaded .g22-henna__hero-avatars,
	html.g22-be-loaded .g22-henna__hero-plate {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 720ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-loaded .g22-be-scroll {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		transition: opacity 600ms 980ms ease, transform 780ms 980ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-loaded .g22-henna__hero-brand { transition-delay: 250ms; }
	html.g22-be-loaded .g22-henna__hero-title { transition-delay: 340ms; }
	html.g22-be-loaded .g22-henna__hero-panel .g22-henna__hero-subtitle { transition-delay: 430ms; }
	html.g22-be-loaded .g22-henna__hero-panel .g22-henna__hero-cta { transition-delay: 520ms; }
	html.g22-be-loaded .g22-henna__stat-strip--hero { transition-delay: 610ms; }
	html.g22-be-loaded .g22-henna__hero-avatars { transition-delay: 700ms; }
	html.g22-be-loaded .g22-henna__hero-plate { transition-delay: 1050ms; }

	/* Fix 5 (design audit): fully-hidden (opacity:0) sections meant fast
	   scrolling or a full-page screenshot showed large blank gaps before
	   the IntersectionObserver fired. Baseline is now readable
	   (opacity: 0.35) with a small translate, never a blank section. Kept as
	   the safety floor even after the motion-token unification below — the
	   studio system's #reviews equivalent starts at opacity:0 but leans on a
	   different guard (a 2.4s forced-visible fallback keyframe in
	   home-studio.css); this file's own blank-flash guard stays as-is.
	   Duration/easing/stagger/rise now match the studio system's tokens
	   (home-studio.css `body:has(.g22-henna--clean)`, always in scope —
	   g22-home-studio is enqueued on every page) so an entrance reads the
	   same weight/speed everywhere on the site, not just on pages that also
	   load home-why-scroll.js. */
	html.g22-be-js .g22-be-reveal {
		opacity: 0.35;
		clip-path: none;
		transform: translateY(var(--g22-rise, 18px));
		filter: none;
	}

	html.g22-be-js .g22-be-reveal.g22-be-reveal--in {
		opacity: 1;
		clip-path: none;
		transform: translateY(0);
		filter: none;
		transition:
			opacity var(--g22-dur-slow, 620ms) var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)) calc(var(--g22-be-i, 0) * var(--g22-stagger, 70ms)),
			transform var(--g22-dur-slow, 620ms) var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)) calc(var(--g22-be-i, 0) * var(--g22-stagger, 70ms));
	}
}

@media (max-width: 1180px) and (min-width: 900px) {
	.g22-henna__hero-stage {
		grid-template-columns: 82px minmax(370px, 0.95fr) minmax(420px, 1.05fr);
	}

	.g22-henna__hero-panel {
		padding-inline: 34px;
	}

	.g22-henna__hero-title {
		font-size: clamp(2.75rem, 4.3vw, 3.8rem);
	}

	.g22-henna__hero-avatars {
		display: none;
	}

	.g22-be-scroll {
		left: 49.5%;
		width: 68px;
		height: 68px;
	}
}

@media (max-width: 899px) {
	body.home .g22-header:not(.g22-header--taste),
	body.home .g22-header--condensed:not(.g22-header--taste),
	body.home .g22-header:not(.g22-header--taste).is-menu-open,
	body.home .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		height: 66px;
		top: 0;
		width: 100%;
		margin: 0;
		padding: 0 16px;
		border-radius: 0;
		background: rgba(255, 255, 255, 0.97);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle {
		border-color: var(--g22-be-violet);
		color: var(--g22-be-violet);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav {
		border: 1px solid var(--g22-be-violet);
		border-radius: 0;
		background: var(--g22-be-white);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a {
		border-radius: 0;
		color: var(--g22-be-violet);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__cta {
		display: none;
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.g22-henna__section {
		padding-block: clamp(48px, 10vw, 72px);
	}

	.g22-henna__section + .g22-henna__section {
		padding-block-start: clamp(32px, 7vw, 48px);
	}

	.g22-henna__heading {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.g22-henna__hero {
		min-height: auto;
		padding: 0 10px 10px;
	}

	.g22-henna__hero-stage {
		display: grid;
		grid-template-columns: 54px minmax(0, 1fr);
		grid-template-areas:
			"rail panel"
			"rail media";
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.g22-be-rail {
		grid-row: 1 / 3;
		padding-block: 16px;
	}

	.g22-be-rail__mark {
		width: 34px;
		height: 34px;
		font-size: 0.9rem;
	}

	.g22-be-rail__word {
		font-size: 0.58rem;
	}

	.g22-be-rail__index {
		display: none;
	}

	.g22-henna__hero-panel {
		grid-area: panel;
		padding: clamp(34px, 8vw, 54px) clamp(22px, 6vw, 42px) clamp(30px, 7vw, 46px);
	}

	.g22-henna__hero-panel-inner {
		gap: 17px;
	}

	.g22-henna__hero-title {
		max-width: 11ch;
		font-size: clamp(2.55rem, 10.4vw, 4.4rem);
	}

	.g22-henna__hero-media {
		grid-area: media;
		width: auto;
		height: min(64svh, 590px);
		min-height: 390px;
	}

	.g22-henna__hero-plate {
		right: 14px;
		bottom: 14px;
	}

	.g22-be-scroll {
		left: auto;
		right: 20px;
		top: calc(54% - 56px);
		width: 64px;
		height: 64px;
		border-width: 2px;
		transform: none;
	}

	html.g22-be-js .g22-be-scroll {
		transform: translateY(22px) scale(0.9);
	}

	html.g22-be-loaded .g22-be-scroll {
		transform: translateY(0) scale(1);
	}

	/* Mobile must never wait behind the desktop wipe choreography. */
	html.g22-be-js .g22-be-rail,
	html.g22-be-js .g22-henna__hero-brand,
	html.g22-be-js .g22-henna__hero-title,
	html.g22-be-js .g22-henna__hero-panel .g22-henna__hero-subtitle,
	html.g22-be-js .g22-henna__hero-panel .g22-henna__hero-cta,
	html.g22-be-js .g22-henna__stat-strip--hero,
	html.g22-be-js .g22-henna__hero-avatars,
	html.g22-be-js .g22-be-scroll,
	html.g22-be-js .g22-henna__hero-plate {
		opacity: 1;
		transform: none;
	}

	html.g22-be-js .g22-henna__hero-media::after {
		display: none;
	}

	html.g22-be-js .g22-henna__hero-media img,
	html.g22-be-loaded .g22-henna__hero-media img {
		transform: scale(1.035);
	}

	@media (prefers-reduced-motion: no-preference) {
		.g22-henna__hero-panel-inner,
		.g22-henna__hero-media {
			animation: g22-calm-mobile-in 650ms ease-out both;
		}

		.g22-henna__hero-media {
			animation-delay: 120ms;
		}

		@keyframes g22-calm-mobile-in {
			from { opacity: 0; transform: translateY(16px); }
			to { opacity: 1; transform: translateY(0); }
		}
	}

	.g22-henna__about .g22-henna__two-col,
	.g22-henna__learning .g22-henna__two-col,
	.g22-henna__why > .g22-henna__shell {
		grid-template-columns: 1fr;
		gap: clamp(42px, 11vw, 72px);
	}

	.g22-henna__about-photo,
	.g22-henna__learning-photo {
		aspect-ratio: 4 / 4.8;
	}

	.g22-henna__learning-copy,
	.g22-henna__learning-visual {
		order: initial;
	}

	.g22-henna__why .g22-henna__section-head {
		position: static;
	}

	.g22-henna__news-head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.g22-henna__news-card,
	.g22-henna__news-card--lead,
	.g22-henna__news-card:not(.g22-henna__news-card--lead) {
		position: relative;
		top: auto;
		grid-template-columns: 1fr;
		min-height: 0;
		margin-bottom: 22px;
	}

	.g22-henna__news-card--lead .g22-henna__news-image,
	.g22-henna__news-card:not(.g22-henna__news-card--lead) .g22-henna__news-image,
	.g22-henna__news-image {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.g22-henna__news-body h3 {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}

	.g22-henna__cta-section .g22-henna__heading {
		font-size: clamp(4rem, 20vw, 7.4rem);
	}

	.g22-henna__cta-cards {
		grid-template-columns: 1fr;
	}

	.g22-henna__cta-card {
		min-height: 330px;
	}

	.g22-henna__cta-card + .g22-henna__cta-card {
		border-top: 1px solid rgba(255, 255, 255, 0.44);
		border-left: 0;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
		grid-template-columns: 1fr;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card,
	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child,
	body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) {
		min-height: 280px;
	}

	body.home .g22-google-reviews--mosaic .g22-google-reviews__foot {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ========================================================================== */
/* Phase 5 — signature editorial motion                                       */
/* One cinematic hero gesture, then restrained production motion everywhere.  */
/* ========================================================================== */

.g22-be-signature {
	display: none;
}

/* Tactile feedback stays fast because these controls are used repeatedly. */
.g22-henna__pill,
.g22-header:not(.g22-header--taste) .g22-header__cta,
.g22-header:not(.g22-header--taste) .g22-header__toggle,
.g22-henna__marquee-toggle{
	transition:
		background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		color 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__pill:active,
.g22-header:not(.g22-header--taste) .g22-header__cta:active,
.g22-header:not(.g22-header--taste) .g22-header__toggle:active,
.g22-henna__marquee-toggle:active{
	transform: scale(0.98);
}

.g22-henna__link span {
	display: inline-block;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.g22-henna__link:hover span,
.g22-henna__link:focus-visible span {
	transform: translateX(5px);
}

/* A small focus materialisation differentiates content types without making
   every section use the same generic rise-and-fade. */
@media (prefers-reduced-motion: no-preference) {
	html.g22-be-js .g22-henna__section-head.g22-be-reveal,
	html.g22-be-js .g22-google-reviews__head.g22-be-reveal {
		clip-path: none;
		transform: translateY(18px);
		filter: none;
	}

	html.g22-be-js .g22-henna__section-head.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-google-reviews__head.g22-be-reveal.g22-be-reveal--in {
		clip-path: none;
		transform: translateY(0);
		filter: none;
		transition:
			opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-js .g22-henna__about-visual.g22-be-reveal,
	html.g22-be-js .g22-henna__learning-visual.g22-be-reveal {
		clip-path: none;
		transform: translateX(22px);
		filter: none;
	}

	html.g22-be-js .g22-henna__about-visual.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-henna__learning-visual.g22-be-reveal.g22-be-reveal--in {
		clip-path: none;
		transform: translateX(0);
		transition:
			opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.g22-be-js .g22-henna__inline-list > li.g22-be-reveal,
	html.g22-be-js .g22-henna__cards--why .g22-henna__card.g22-be-reveal {
		clip-path: none;
		transform: translateX(-16px);
		filter: none;
	}

	html.g22-be-js .g22-henna__inline-list > li.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-henna__cards--why .g22-henna__card.g22-be-reveal.g22-be-reveal--in {
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
		transition:
			opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--g22-be-i, 0) * 46ms),
			clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--g22-be-i, 0) * 46ms),
			transform 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--g22-be-i, 0) * 46ms);
	}
}

/* The page's signature move: the calm editorial panel makes way for the
   school photograph and the brand promise appears inside the image. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.g22-signature-scroll .g22-henna {
		/* `hidden` creates a non-scrolling overflow container and prevents the
		   nested hero stage from sticking in Safari/Chromium. `clip` keeps the
		   horizontal guard without changing the sticky containing block. */
		overflow-x: clip;
	}

	html.g22-signature-scroll .g22-henna__hero {
		height: 190svh;
		min-height: 1320px;
		padding-bottom: clamp(18px, 3.2vw, 52px);
		overflow: visible;
	}

	html.g22-signature-scroll .g22-henna__hero-stage {
		--g22-be-rail-width: clamp(82px, 7vw, 108px);
		position: sticky;
		top: 76px;
		display: block;
		height: calc(100svh - 76px - clamp(18px, 3.2vw, 52px));
		min-height: 650px;
		max-height: none;
		isolation: isolate;
		background: var(--g22-calm-paper);
		overflow: clip;
	}

	html.g22-signature-scroll .g22-be-rail {
		position: absolute;
		inset: 0 auto 0 0;
		display: flex;
		width: var(--g22-be-rail-width);
		will-change: transform, opacity;
	}

	html.g22-signature-scroll .g22-henna__hero-panel {
		position: absolute;
		inset: 0 auto 0 var(--g22-be-rail-width);
		display: flex;
		width: calc(52% - var(--g22-be-rail-width));
		height: auto;
		padding: clamp(42px, 4.8vw, 76px) clamp(32px, 4.2vw, 66px);
		will-change: transform, opacity;
	}

	html.g22-signature-scroll .g22-henna__hero-panel-inner {
		max-width: 560px;
	}

	html.g22-signature-scroll .g22-henna__hero-title {
		font-size: clamp(2.8rem, 4.2vw, 4.65rem);
	}

	html.g22-signature-scroll .g22-henna__hero-media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0 0 0 52%);
		will-change: clip-path;
	}

	html.g22-signature-scroll .g22-henna__hero-media picture,
	html.g22-signature-scroll .g22-henna__hero-media img {
		display: block;
		width: 100%;
		height: 100%;
	}

	html.g22-signature-scroll .g22-henna__hero-media img,
	html.g22-signature-scroll.g22-be-js .g22-henna__hero-media img,
	html.g22-signature-scroll.g22-be-loaded .g22-henna__hero-media img {
		object-position: 53% center;
		filter: saturate(0.84) contrast(0.98) brightness(0.9);
		transition: none;
		will-change: transform;
	}

	html.g22-signature-scroll .g22-henna__hero-media::before {
		inset: 0;
		z-index: 2;
		width: auto;
		height: auto;
		border-radius: 0;
		background:
			linear-gradient(90deg, rgba(10, 9, 14, 0.6) 0%, rgba(10, 9, 14, 0.26) 38%, rgba(10, 9, 14, 0.04) 72%),
			linear-gradient(0deg, rgba(10, 9, 14, 0.34) 0%, transparent 42%);
	}

	html.g22-signature-scroll .g22-henna__hero-media::after {
		background: var(--g22-calm-canvas);
	}

	html.g22-signature-scroll .g22-be-signature {
		position: absolute;
		left: clamp(52px, 6vw, 96px);
		top: clamp(58px, 8vh, 96px);
		z-index: 4;
		display: block;
		max-width: min(78%, 1000px);
		color: #fff;
		opacity: 0;
		pointer-events: none;
		will-change: transform, opacity;
		text-shadow: 0 2px 28px rgba(10, 9, 14, 0.28);
	}

	.g22-be-signature__meta,
	.g22-be-signature__note {
		margin: 0;
		font-family: "IBM Plex Mono", monospace;
		font-size: clamp(0.62rem, 0.8vw, 0.78rem);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.72);
	}

	.g22-be-signature__title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: clamp(34px, 5vh, 60px) 0 clamp(30px, 4vh, 48px);
		font-size: clamp(5rem, 9.5vw, 9.5rem);
		font-weight: 500;
		line-height: 0.78;
		letter-spacing: -0.085em;
		text-wrap: balance;
	}

	.g22-be-signature__title span,
	.g22-be-signature__title strong {
		display: block;
		font: inherit;
	}

	.g22-be-signature__title strong {
		position: relative;
		z-index: 0;
		margin-left: clamp(22px, 4vw, 70px);
	}

	.g22-be-signature__title strong::after {
		content: "";
		position: absolute;
		left: 0.04em;
		right: -0.08em;
		bottom: -0.08em;
		z-index: -1;
		height: 0.08em;
		background: var(--g22-be-yellow);
		transform: rotate(-1.2deg);
		transform-origin: left center;
	}

	html.g22-signature-scroll .g22-be-scroll {
		left: 52%;
		top: 61%;
		width: 104px;
		height: 104px;
		transform: none;
		transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform, opacity;
	}

	html.g22-signature-scroll .g22-henna__hero-plate {
		z-index: 6;
		border-color: rgba(255, 255, 255, 0.44);
		background: rgba(245, 245, 243, 0.88);
		opacity: 0;
		will-change: transform, opacity;
	}
}

/* More authored card motion: the content moves while the architectural frame
   stays still, avoiding the floating-card feel of generic templates. */
@media (hover: hover) and (pointer: fine) {
	.g22-henna__cards--why .g22-henna__card-front {
		transition:
			background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.g22-henna__cards--why .g22-henna__card h3,
	.g22-henna__cards--why .g22-henna__card p,
	.g22-henna__cards--why .g22-henna__card-number {
		transition:
			color 220ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.g22-henna__cards--why .g22-henna__card:hover h3,
	.g22-henna__cards--why .g22-henna__card:hover p {
		transform: translateX(8px);
	}

	.g22-henna__cards--why .g22-henna__card:hover .g22-henna__card-number {
		color: var(--g22-be-violet);
		transform: translateY(-4px);
	}
}

/* Loading is a state, not a frozen button. */
.g22-form button[aria-busy="true"] {
	position: relative;
	padding-right: 44px;
	cursor: wait;
	opacity: 0.78;
}

.g22-form button[aria-busy="true"]::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 13px;
	height: 13px;
	margin-top: -7px;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.g22-form button[aria-busy="true"]::after {
		animation: g22-submit-spin 720ms linear infinite;
	}

	@keyframes g22-submit-spin {
		to { transform: rotate(360deg); }
	}
}

/* Mobile menu keeps both icon and panel in the DOM so closing has a real exit
   state instead of disappearing on the same frame as aria-expanded changes. */
@media (max-width: 820px) {
	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle {
		display: grid;
		place-items: center;
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle-icon {
		grid-area: 1 / 1;
		display: block;
		transition:
			opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 160ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle-icon--menu {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		filter: blur(0);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle-icon--close {
		opacity: 0;
		transform: scale(0.9) rotate(-20deg);
		filter: blur(2px);
	}

	body.home .g22-header:not(.g22-header--taste).is-menu-open .g22-header__toggle-icon--menu {
		display: block;
		opacity: 0;
		transform: scale(0.9) rotate(20deg);
		filter: blur(2px);
	}

	body.home .g22-header:not(.g22-header--taste).is-menu-open .g22-header__toggle-icon--close {
		display: block;
		opacity: 1;
		transform: scale(1) rotate(0deg);
		filter: blur(0);
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav,
	body.home .g22-header:not(.g22-header--taste).is-menu-open .g22-header__nav{
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px) scale(0.985);
		transform-origin: top center;
		pointer-events: none;
		transition:
			visibility 0s linear 180ms,
			opacity 160ms cubic-bezier(0.4, 0, 1, 1),
			transform 180ms cubic-bezier(0.4, 0, 1, 1);
		animation: none;
	}

	body.home .g22-header:not(.g22-header--taste).is-menu-open .g22-header__nav {
		visibility: visible;
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
		transition:
			visibility 0s,
			opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.home .g22-menu-backdrop,
	body.home.g22-menu-open .g22-menu-backdrop {
		display: block;
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1);
	}

	body.home.g22-menu-open .g22-menu-backdrop {
		opacity: 1;
		pointer-events: auto;
		transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-be-signature {
		display: none !important;
	}

	.g22-henna__marquee-toggle {
		display: none;
	}

	.g22-henna__pill,
	.g22-header:not(.g22-header--taste) .g22-header__cta,
	.g22-header:not(.g22-header--taste) .g22-header__toggle,
	.g22-henna__marquee-toggle,
	.g22-header:not(.g22-header--taste) .g22-header__toggle-icon,
	.g22-header:not(.g22-header--taste) .g22-header__nav,
	.g22-menu-backdrop{
		transition: none !important;
	}
}

@media (max-width: 560px) {
	.g22-henna__shell,
	body.home .g22-google-reviews--mosaic .g22-google-reviews__mosaic-shell {
		width: calc(100% - 32px);
	}

	.g22-henna__hero-panel .g22-henna__hero-cta,
	.g22-henna__hero-panel .g22-henna__pill--solid {
		width: 100%;
	}

	.g22-henna__hero-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"panel"
			"media";
	}

	.g22-be-rail {
		display: none;
	}

	.g22-henna__hero-panel {
		width: 100%;
		min-width: 0;
		padding: 34px 20px 30px;
		overflow: hidden;
	}

	.g22-henna__hero-panel-inner {
		width: 100%;
		min-width: 0;
		max-width: none;
		padding: 0 !important;
	}

	.g22-henna__hero-title {
		width: 100%;
		max-width: 10.5ch;
		font-size: clamp(2.55rem, 11.7vw, 3.45rem);
		text-wrap: balance;
	}

	.g22-henna__hero-panel .g22-henna__hero-subtitle,
	.g22-henna__hero-panel .g22-henna__hero-cta,
	.g22-henna__hero-panel .g22-henna__pill--solid {
		min-width: 0;
		max-width: 100%;
	}

	.g22-henna__hero-panel .g22-henna__pill--solid {
		padding: 9px 9px 9px 16px;
		font-size: 0.68rem;
		letter-spacing: 0.055em;
	}

	.g22-henna__hero-panel .g22-henna__pill--solid::after {
		width: 34px;
		height: 34px;
		margin-left: 10px;
	}

	.g22-henna__stat-strip--hero {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.g22-henna__stat-strip--hero .g22-henna__stat,
	.g22-henna__stat-strip--hero .g22-henna__stat:first-child {
		padding: 10px 0;
	}

	.g22-henna__stat-strip--hero .g22-henna__stat + .g22-henna__stat::before {
		display: none;
	}

	.g22-henna__hero-avatars {
		display: none;
	}

	.g22-be-scroll {
		right: 10px;
		top: calc(58% - 48px);
		width: 60px;
		height: 60px;
	}

	.g22-henna__cards--why .g22-henna__card-front,
	.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-front {
		grid-template-columns: 54px 1fr;
	}

	.g22-henna__cards--why .g22-henna__card-number,
	.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
		font-size: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-be-scroll svg,
	.g22-henna__marquee-track {
		animation: none !important;
	}

	.g22-henna__hero-media::after {
		display: none;
	}

	.g22-henna__news-card {
		position: relative;
		top: auto;
	}
}

/* ========================================================================== */
/* Phase 4 — calm reference calibration                                       */
/* Maibutni + Henna: neutral canvas first, brand colour as punctuation only.  */
/* ========================================================================== */

body.home {
	--g22-calm-canvas: var(--g22-canvas);
	--g22-calm-paper: var(--g22-paper);
	--g22-calm-white: var(--g22-card);
	--g22-calm-ink: var(--g22-ink);
	--g22-calm-muted: var(--g22-ink-mute);
	--g22-calm-line: var(--g22-line-soft);
	background: var(--g22-calm-canvas);
}

body.home .g22-header:not(.g22-header--taste),
body.home .g22-header--condensed:not(.g22-header--taste){
	border-bottom-color: var(--g22-calm-line);
	background: rgba(245, 245, 243, 0.94);
	box-shadow: none;
}

@media (min-width: 821px) {
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a{
		color: var(--g22-calm-ink);
	}
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta {
	border-color: var(--g22-be-violet);
	background: transparent;
	color: var(--g22-be-violet) !important;
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta:hover {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	color: var(--g22-calm-white) !important;
}

.g22-henna {
	--g22h-bg: var(--g22-calm-canvas);
	--g22h-ink: var(--g22-calm-ink);
	--g22h-ink-75: rgba(32, 32, 34, 0.75);
	--g22h-ink-70: rgba(32, 32, 34, 0.7);
	--g22h-ink-60: rgba(32, 32, 34, 0.6);
	--g22h-ink-55: rgba(32, 32, 34, 0.55);
	--g22h-ink-45: rgba(32, 32, 34, 0.45);
	--g22h-ink-30: rgba(32, 32, 34, 0.3);
	--g22h-ink-10: rgba(32, 32, 34, 0.1);
	--g22h-ink-08: rgba(32, 32, 34, 0.08);
	background: var(--g22-calm-canvas);
	color: var(--g22-calm-ink);
}

.g22-henna__heading,
.g22-henna__body,
.g22-henna__lead {
	color: var(--g22-calm-ink);
}

.g22-henna__body,
.g22-henna__lead {
	color: var(--g22-calm-muted);
}

.g22-henna__label {
	color: rgba(67, 41, 128, 0.7);
}

.g22-henna__hero {
	padding: 0 clamp(18px, 3.2vw, 52px) clamp(18px, 3.2vw, 52px);
	background: var(--g22-calm-canvas);
}

.g22-henna__hero-stage,
.g22-henna__hero-panel {
	background: var(--g22-calm-paper);
}

.g22-be-rail {
	border-right: 1px solid var(--g22-calm-line);
	background: var(--g22-calm-paper);
	color: var(--g22-be-violet);
}

.g22-be-rail__mark {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

.g22-henna__hero-brand,
.g22-henna__hero-title,
.g22-henna__hero-panel .g22-henna__hero-subtitle,
.g22-henna__stat-strip--hero .g22-henna__stat b,
.g22-henna__hero-avatar-label {
	color: var(--g22-calm-ink);
}

.g22-henna__hero-panel .g22-henna__hero-subtitle,
.g22-henna__stat-strip--hero .g22-henna__stat span {
	color: var(--g22-calm-muted);
}

.g22-henna__hero-brand::before {
	color: var(--g22-be-yellow);
}

.g22-henna__hero-panel .g22-henna__pill--solid {
	border-color: var(--g22-be-violet);
	background: transparent;
	color: var(--g22-be-violet);
}

.g22-henna__hero-panel .g22-henna__pill--solid:hover,
.g22-henna__hero-panel .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	color: var(--g22-calm-white);
}

.g22-henna__hero-media img {
	filter: saturate(0.82) contrast(0.94) brightness(0.98);
}

.g22-henna__hero-media::before {
	background: var(--g22-calm-paper);
}

.g22-henna__hero-media::after {
	background: var(--g22-calm-canvas);
}

.g22-be-scroll {
	width: 72px;
	height: 72px;
	border-width: 2px;
	border-color: var(--g22-be-violet);
	background: var(--g22-calm-paper);
}

.g22-henna__hero-plate {
	border-color: rgba(255, 255, 255, 0.62);
	background: rgba(245, 245, 243, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.g22-henna__hero-plate-heading {
	color: var(--g22-calm-ink);
}

.g22-henna__marquee {
	border-color: var(--g22-calm-line);
	background: var(--g22-calm-paper);
}

.g22-henna__marquee-item {
	color: rgba(67, 41, 128, 0.72);
}

.g22-henna__marquee-toggle {
	border-color: rgba(67, 41, 128, 0.28);
	background: var(--g22-calm-paper);
	color: var(--g22-be-violet);
}

.g22-henna__about,
.g22-henna__why,
.g22-henna__news {
	background: var(--g22-calm-canvas);
}

.g22-henna__learning {
	background: var(--g22-calm-paper);
	color: var(--g22-calm-ink);
}

.g22-henna__learning::before {
	opacity: 0.012;
}

.g22-henna__learning .g22-henna__heading,
.g22-henna__learning .g22-henna__label,
.g22-henna__learning .g22-henna__inline-list b {
	color: var(--g22-calm-ink);
}

.g22-henna__learning .g22-henna__label::before,
.g22-henna__learning .g22-henna__label::after,
.g22-henna__learning .g22-henna__link {
	color: var(--g22-be-violet);
}

.g22-henna__learning .g22-henna__body,
.g22-henna__learning .g22-henna__inline-list span,
.g22-henna__learning .g22-henna__caption {
	color: var(--g22-calm-muted);
}

.g22-henna__inline-list li,
.g22-henna__inline-list li:last-child {
	border-color: var(--g22-calm-line);
}

.g22-henna__inline-list li::before {
	color: var(--g22-be-violet);
}

.g22-henna__why .g22-henna__heading,
.g22-henna__why .g22-henna__lead,
.g22-henna__cards--why .g22-henna__card h3 {
	color: var(--g22-calm-ink);
}

.g22-henna__why .g22-henna__lead,
.g22-henna__cards--why .g22-henna__card p {
	color: var(--g22-calm-muted);
}

.g22-henna__cards--why .g22-henna__card-front,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-front {
	border-color: var(--g22-calm-line);
	background: transparent;
}

.g22-henna__cards--why .g22-henna__card-number,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
	color: rgba(67, 41, 128, 0.46);
}

.g22-henna__news-card,
.g22-henna__news-card--lead,
.g22-henna__news-card:not(.g22-henna__news-card--lead) {
	border-color: var(--g22-calm-line);
	background: var(--g22-calm-paper);
	box-shadow: 0 24px 64px rgba(67, 41, 128, 0.07);
}

.g22-henna__news-card:hover {
	box-shadow: 0 30px 70px rgba(67, 41, 128, 0.1);
}

.g22-henna__news-card:nth-child(1) .g22-henna__news-body,
.g22-henna__news-card:nth-child(2) .g22-henna__news-body,
.g22-henna__news-card:nth-child(3) .g22-henna__news-body {
	background: var(--g22-calm-paper);
	color: var(--g22-calm-ink);
}

.g22-henna__news-card:nth-child(1) .g22-henna__news-meta,
.g22-henna__news-card:nth-child(1) .g22-henna__news-body span,
.g22-henna__news-meta,
.g22-henna__news-body span {
	color: var(--g22-calm-muted);
}

.g22-henna__news-meta {
	color: var(--g22-be-violet);
}

.g22-henna__news-body h3 {
	color: var(--g22-calm-ink);
}

.g22-henna__cta-section {
	background: var(--g22-calm-paper);
	color: var(--g22-calm-ink);
}

.g22-henna__cta-section::before {
	border-color: rgba(67, 41, 128, 0.055);
}

.g22-henna__cta-section .g22-henna__label,
.g22-henna__cta-section .g22-henna__heading {
	color: var(--g22-calm-ink);
}

.g22-henna__cta-section .g22-henna__label::before,
.g22-henna__cta-section .g22-henna__label::after {
	color: var(--g22-be-violet);
}

.g22-henna__cta-section .g22-henna__heading {
	font-size: clamp(3.7rem, 8vw, 7.6rem);
	line-height: 0.88;
}

.g22-henna__cta-cards {
	border-color: var(--g22-calm-line);
}

.g22-henna__cta-card,
.g22-henna__cta-card:first-child {
	position: relative;
	background: var(--g22-calm-white);
	color: var(--g22-calm-ink);
}

.g22-henna__cta-card::before {
	content: "";
	position: absolute;
	top: clamp(28px, 4vw, 52px);
	right: clamp(28px, 4vw, 52px);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--g22-be-yellow);
}

.g22-henna__cta-card + .g22-henna__cta-card {
	border-color: var(--g22-calm-line);
}

.g22-henna__cta-card h3 {
	color: var(--g22-calm-ink);
}

.g22-henna__cta-card > p {
	color: var(--g22-calm-muted);
	opacity: 1;
}

.g22-henna__cta-card .g22-henna__pill--solid,
.g22-henna__cta-card:first-child .g22-henna__pill--solid {
	border-color: var(--g22-be-violet);
	background: transparent;
	color: var(--g22-be-violet);
}

.g22-henna__cta-card .g22-henna__pill--solid:hover,
.g22-henna__cta-card .g22-henna__pill--solid:focus-visible,
.g22-henna__cta-card:first-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:first-child .g22-henna__pill--solid:focus-visible,
.g22-henna__cta-card:last-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:last-child .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	color: var(--g22-calm-white);
}

body.home .g22-google-reviews--mosaic {
	background: var(--g22-calm-canvas) !important;
	color: var(--g22-calm-ink);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__heading {
	color: var(--g22-calm-ink);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__head .g22-henna__lead {
	color: var(--g22-calm-muted);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan {
	border-color: var(--g22-calm-line);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:first-child,
body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) {
	border-color: var(--g22-calm-line);
	background: var(--g22-calm-paper);
	color: var(--g22-calm-ink);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:hover {
	background: var(--g22-calm-white);
	color: var(--g22-calm-ink);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card footer .g22-google-reviews__mark {
	background: var(--g22-be-violet);
	color: var(--g22-calm-white);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card:nth-child(2) footer .g22-google-reviews__mark {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__summary strong {
	color: var(--g22-calm-ink);
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__stars {
	color: var(--g22-be-yellow);
}

.g22-henna__progress-bar {
	background: var(--g22-be-violet);
}

/* .g22-be-reveal / .g22-be-reveal--in base state (opacity, rise, filter,
   transition) is defined once, above (~line 4733), inside its own
   `@media (prefers-reduced-motion: no-preference)` block — this used to be a
   second, fully redundant rule pair for the exact same selectors under the
   exact same media condition (only the hardcoded 24px rise disagreed with
   the token-driven value above). One rule pair, one place to reason about. */

@media (max-width: 899px) {
	body.home .g22-header:not(.g22-header--taste),
	body.home .g22-header--condensed:not(.g22-header--taste),
	body.home .g22-header:not(.g22-header--taste).is-menu-open,
	body.home .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		background: rgba(245, 245, 243, 0.97);
	}

	.g22-be-rail {
		border-right-color: var(--g22-calm-line);
	}

	.g22-be-scroll {
		width: 60px;
		height: 60px;
	}
}

/* Hero portrait: keep the complete community composition readable on wide
   screens and protect the central group when the viewport crops horizontally. */
.g22-henna__hero-media img,
html.g22-signature-scroll .g22-henna__hero-media img,
html.g22-signature-scroll.g22-be-js .g22-henna__hero-media img,
html.g22-signature-scroll.g22-be-loaded .g22-henna__hero-media img {
	object-position: 50% 58%;
}

@media (max-width: 899px) {
	.g22-henna__hero-media img {
		object-position: 50% 54%;
	}
}

/* Reviews 2026-07-13 — portrait-led fan, derived from the approved references.
   This final layer intentionally supersedes the earlier grid/phone experiments. */
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan {
	--g22-be-violet: var(--g22-purple);
	--g22-be-yellow: var(--g22-yellow);
	--g22-calm-canvas: var(--g22-paper);
	--g22-calm-paper: var(--g22-card);
	--g22-calm-white: var(--g22-card);
	--g22-calm-ink: var(--g22-ink);
	--g22-calm-muted: var(--g22-ink-mute);
	position: relative;
	overflow: hidden;
	padding: clamp(88px, 9vw, 140px) 0 clamp(72px, 8vw, 116px) !important;
	background: var(--g22-calm-canvas) !important;
	color: var(--g22-calm-ink);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__mosaic-shell {
	width: min(calc(100% - clamp(40px, 7vw, 104px)), 1320px);
	margin-inline: auto;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(48px, 8vw, 136px);
	align-items: end;
	max-width: none;
	margin: 0 0 clamp(26px, 3.2vw, 48px);
	text-align: left;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-copy,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-aside {
	min-width: 0;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label {
	justify-content: flex-start;
	margin-bottom: 22px;
	color: var(--g22-be-violet);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label::before,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label::after {
	content: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__label-dot,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__marker-svg {
	display: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading {
	max-width: 11.5ch;
	margin: 0;
	color: var(--g22-be-violet);
	font-size: clamp(2.75rem, 4.5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
	overflow-wrap: normal;
	word-break: normal;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__lead {
	max-width: 42ch;
	margin: 18px 0 0;
	color: var(--g22-calm-ink);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.55;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-aside {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding-bottom: 4px;
}

/* Google-branded review badge (progresivo-style): white pill with the
   multicolor "G", rating and gold stars — no review-count text. */
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__summary {
	display: inline-flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, .08);
	background: #fff;
	box-shadow: 0 6px 18px rgba(17, 17, 17, .06);
	text-align: left;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__glogo {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__glogo svg {
	display: block;
	width: 100%;
	height: 100%;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__summary strong {
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__stars {
	color: #fbbc05;
	font-size: 0.95rem;
	letter-spacing: 1px;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__gsource {
	flex-basis: auto;
	color: #5f6368;
	font-size: 0.8rem;
	font-weight: 500;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__stage {
	/* Fix 3 (design audit): the stage used to reserve just enough height
	   for the absolutely-positioned fan cards to overlap the photo by
	   design — any review longer than the min-height overflowed and
	   collided with neighbouring cards/the photo above. The stage now
	   only reserves room for the portrait photo itself; the review cards
	   flow normally below it (see .g22-google-reviews__fan below). */
	position: relative;
	display: block;
	height: auto;
	padding: 0;
	isolation: isolate;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop {
	position: absolute;
	z-index: 0;
	top: clamp(145px, 12vw, 178px);
	left: 50%;
	width: min(94vw, 1160px);
	height: clamp(210px, 21vw, 290px);
	transform: translateX(-50%);
	pointer-events: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop::before,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop::after {
	content: "";
	position: absolute;
	inset: 12% 1%;
	border: 1.5px solid rgba(67, 41, 128, 0.42);
	border-radius: 50%;
	transform: rotate(10deg);
	transform-origin: center;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop::after {
	inset: 16% 5%;
	border-width: 1px;
	border-color: rgba(67, 41, 128, 0.22);
	opacity: 1;
	transform: rotate(-10deg);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait {
	/* Fix 3: the photo now sits in normal flow (was absolute, requiring
	   the stage to reserve a hand-tuned height that the fan cards below
	   could outgrow and collide with). */
	position: relative;
	z-index: 1;
	width: clamp(520px, 58vw, 760px);
	height: clamp(420px, 36vw, 500px);
	margin: 28px auto 0;
	overflow: hidden;
	border: 1px solid rgba(67, 41, 128, 0.72);
	border-radius: 42% 42% 16px 16px / 28% 28% 16px 16px;
	background: var(--g22-calm-paper);
	box-shadow: 0 18px 46px rgba(38, 30, 54, 0.07);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait picture,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait img {
	display: block;
	width: 100%;
	height: 100%;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait img {
	object-fit: cover;
	object-position: 50% 58%;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan {
	/* Fix 3 (design audit): replaced the absolute-positioned "fan spread"
	   (fixed top/left/right percentages + a shared min-height) with a
	   normal-flow 2x2 grid. Cards used to overlap each other and the
	   photo above whenever a review's text ran longer than the tuned
	   min-height — a grid with content-driven row heights can never
	   collide, regardless of quote length. */
	position: relative;
	z-index: 3;
	inset: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 40px;
	border: 0;
	overflow: visible;
	pointer-events: auto;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2) {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 0;
	/* No fixed/min pixel height — the grid row stretches every card in
	   the same row to the tallest card's content, and the author line
	   below pins itself to the bottom of that row via margin-top: auto
	   on the footer (see .fan-card footer). */
	min-height: 0;
	padding: clamp(22px, 2.1vw, 28px);
	border: 1px solid rgba(67, 41, 128, 0.22);
	border-radius: 15px;
	background: rgba(252, 251, 248, 0.985);
	box-shadow: 0 12px 32px rgba(28, 23, 40, 0.07);
	color: var(--g22-calm-ink);
	pointer-events: auto;
	transform: none !important;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover {
	border-color: rgba(67, 41, 128, 0.42);
	background: var(--g22-calm-white);
	box-shadow: 0 16px 38px rgba(28, 23, 40, 0.1);
	transform: translateY(-4px) !important;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__quote-mark {
	display: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-tag {
	display: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-author {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 10px;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card .g22-google-reviews__mark,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2) .g22-google-reviews__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--g22-be-violet);
	color: var(--g22-calm-white);
	font: 700 0.72rem/1 var(--g22h-mono);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(even) .g22-google-reviews__mark {
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-who {
	display: grid;
	gap: 2px;
	min-width: 0;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-who b {
	color: var(--g22-calm-ink);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-date {
	color: rgba(28, 23, 40, 0.5);
	font-size: 0.76rem;
	line-height: 1.3;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-stars {
	margin: 0 0 10px;
	color: #fbbc05;
	font-size: 0.82rem;
	letter-spacing: 1px;
	line-height: 1;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-quote,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child .g22-google-reviews__fan-quote {
	display: block;
	flex: 1;
	margin: 0;
	color: var(--g22-calm-ink);
	font-size: clamp(0.9rem, 1.02vw, 0.98rem);
	line-height: 1.5;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card footer {
	display: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
	text-align: right;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--g22-be-violet);
	font-weight: 700;
	text-decoration: none;
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link span {
	margin-left: 10px;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link:hover span,
body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__all-link:focus-visible span {
	transform: translateX(5px);
}

/* "Усі відгуки в Google" reveal fix (inner pages only) — home-studio.css's
   `body:has(.g22-henna--clean) #reviews .g22-google-reviews__all-link` rule
   sets opacity:0 unconditionally, then only lifts it via `#reviews.is-in`,
   a class that home-why-scroll.js (home page only) writes. footer.php's
   sitewide `.g22-henna--clean` marker turns that rule on for EVERY page —
   including this one — but nothing ever adds `.is-in` here, so the link sat
   invisible until two blind, page-load-timed fallbacks caught up (the
   1200ms `.g22-motion-off` failsafe in header.php, then a 2.4s forced
   animation in home-studio.css) — both timed from load, not from when the
   visitor actually scrolls the link into view, so on a slow first load it
   read as a stuck/disabled link for several seconds even after scrolling.
   reveal.js already runs a real, scroll-linked IntersectionObserver on
   inner pages (added `.g22-google-reviews__all-link` to its selector list) —
   drive the reveal from that instead. An animation (not a plain property)
   is required to win over home-studio.css's static opacity:0, the same
   trick that file's own 2.4s fallback already relies on. */
@keyframes g22-reviews-all-link-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

html.g22-be-js #reviews .g22-google-reviews__all-link.g22-be-reveal.g22-be-reveal--in {
	/* #reviews raises specificity above home-studio.css's
	   `body:has(.g22-henna--clean) #reviews .g22-google-reviews__all-link`
	   (which also carries an `animation` declaration, the 2.4s fallback) —
	   two rules assigning the same `animation` property don't merge, the
	   higher-specificity one wins outright, so this needs to out-rank it
	   rather than just come later in the cascade. */
	animation: g22-reviews-all-link-in var(--g22-dur-slow, 620ms) var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@media (prefers-reduced-motion: reduce) {
	html.g22-be-js #reviews .g22-google-reviews__all-link.g22-be-reveal {
		animation: none;
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop {
		animation: g22-reviews-loop-drift 11s ease-in-out infinite alternate;
	}

	@keyframes g22-reviews-loop-drift {
		from { transform: translateX(-50%) rotate(-1.5deg); }
		to { transform: translateX(-50%) rotate(1.5deg); }
	}
}

@media (max-width: 899px) {
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan {
		padding: 76px 0 72px !important;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__mosaic-shell {
		width: min(calc(100% - 32px), 720px);
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head {
		display: block;
		margin-bottom: 26px;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading {
		max-width: 9ch;
		font-size: clamp(2.25rem, 9vw, 3rem);
		line-height: 1.05;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head-aside {
		justify-content: flex-start;
		margin-top: 20px;
		padding: 0;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__lead {
		max-width: 54ch;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__stage {
		height: auto;
		min-height: 0;
		padding-top: 8px;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop {
		top: 72px;
		width: 150%;
		height: 230px;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait {
		position: relative;
		top: auto;
		left: auto;
		width: min(100%, 450px);
		height: clamp(320px, 72vw, 440px);
		margin: 0 auto;
		border-radius: 46% 46% 20px 20px / 35% 35% 20px 20px;
		transform: none;
	}

	/* Fix 3 (design audit): the negative top margin here used to pull the
	   card row up under the photo (by design), but combined with the
	   fixed card min-height below it caused the row to visibly overlap
	   the photo on 390px screens. Positive margin + no forced min-height
	   removes both the overlap and the ~200px dead space under short
	   quotes. */
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan {
		position: relative;
		inset: auto;
		display: flex;
		gap: 14px;
		width: calc(100% + 16px);
		margin: 28px -8px 0;
		padding: 12px 8px 24px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan::-webkit-scrollbar {
		display: none;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card,
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child,
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2),
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(3),
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(4) {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		flex: 0 0 min(82vw, 340px);
		width: auto;
		min-height: 0;
		padding: 24px;
		scroll-snap-align: center;
		transform: none !important;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:hover {
		transform: translateY(-5px) !important;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__foot {
		justify-content: flex-start;
		margin-top: 56px;
		text-align: left;
	}
}

@media (max-width: 520px) {
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading {
		font-size: clamp(2rem, 11vw, 2.6rem);
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__portrait {
		height: 330px;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__loop {
		top: 96px;
		height: 190px;
	}

	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card,
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:first-child,
	body .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__fan-card:nth-child(2) {
		flex-basis: calc(100vw - 64px);
	}
}

/* ========================================================================== */
/* Brand audit (Generation 22 brandbook) — dosed brand graphics.              */
/* Не в hero (там реальне фото — критична вимога ТЗ), а точково: 3 лейбли на  */
/* головній (--star modifier, opt-in, база .g22-henna__label-dot лишається   */
/* круглою скрізь, де клас не додано) + одна тонка підложка-паттерн у        */
/* CTA-блоці "Почнімо" (§7), нижче ::before-кільця, що там уже було.         */
/* ========================================================================== */

.g22-henna__label-dot--star {
	width: 12px;
	height: 12px;
	border-radius: 0;
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.g22-henna__cta-section {
	position: relative;
	isolation: isolate;
}

.g22-henna__cta-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/brand/pattern-yellow.png") center / cover no-repeat;
	opacity: 0.05;
	mix-blend-mode: soft-light;
	pointer-events: none;
	z-index: 0;
}

.g22-henna__cta-section > .g22-henna__shell {
	position: relative;
	z-index: 1;
}

/* ========================================================================== */
/* AUDIT UPGRADE 2026-07 — typography scale, section rhythm, card system,     */
/* CTA full-bleed violet treatment, new teaser blocks (Розклад дня, Вартість, */
/* FAQ), Friday alt-modules panel, micro-graphics.                            */
/*                                                                            */
/* Appended last on purpose: this file's cascade is "last rule of equal      */
/* specificity wins" (see the historical Fix N / Phase N comments above),    */
/* so everything below intentionally overrides earlier layers without        */
/* reaching for !important except where the rule being replaced is itself    */
/* !important (noted inline).                                                */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Typography                                                              */
/* -------------------------------------------------------------------------- */

/* Hero H1 — the audit's primary fix is the weight jump 500 -> 700. Desktop
   size is scaled up but capped below the brief's literal 150px ceiling: the
   hero keeps its 3-column rail/panel/media composition (signature scroll
   scene driven by assets/reveal.js) and the panel column is only
   ~420-620px wide on common desktop sizes — a literal 150px line would
   overflow that column well before 1600px. Scaled proportionally instead
   (see delivery report for the full trade-off note). */
.g22-henna__hero-title {
	max-width: 12.5ch;
	font-size: clamp(3.25rem, 5.6vw, 6.25rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

@media (max-width: 1180px) and (min-width: 900px) {
	.g22-henna__hero-title {
		font-size: clamp(2.6rem, 4.6vw, 3.6rem);
	}
}

@media (max-width: 899px) {
	.g22-henna__hero-title {
		max-width: 12ch;
		font-size: clamp(2.65rem, 9.5vw, 4.2rem);
	}
}

@media (max-width: 560px) {
	.g22-henna__hero-title {
		max-width: 11ch;
		font-size: clamp(2.9rem, 13vw, 4.75rem);
	}
}

/* The clamp above never actually reached the screen on a normal desktop
   visit: hero-scroll.js adds `g22-signature-scroll` to <html> for the
   scroll-pinned rail/panel/media hero (min-width: 900px, motion allowed —
   i.e. what real visitors see), and an earlier pass left a
   `html.g22-signature-scroll .g22-henna__hero-title` rule with its own
   font-size: clamp(2.8rem, 4.2vw, 4.65rem). Two classes + the html type
   beats a single class, so that 4.65rem/74.4px cap silently won over the
   6.25rem cap above at any width, which is exactly the 69.6px computed
   value reported. Mirrored here at the audit's scale so both states agree;
   checked against the panel's real column (hero-panel-inner max-width:
   560px in this same layout) with the longest word "довіряють" set at
   100px (~490px) — fits with room to spare, so the full 6.25rem/100px cap
   is safe and "Generation 22" / "22" (a separate, small 24px kicker line
   above the H1, untouched by this change) still never wraps. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.g22-signature-scroll .g22-henna__hero-title {
		font-size: clamp(3.25rem, 5.6vw, 6.25rem);
	}
}

/* Section H2 — one consistent scale everywhere .g22-henna__heading is used
   (about / learning / timeline / why / pricing / faq / news / reviews). */
.g22-henna__heading {
	font-weight: 700;
	font-size: clamp(2.75rem, 4.5vw, 4.25rem);
	letter-spacing: -0.03em;
}

/* CTA "Почнімо." keeps its own bespoke oversized display scale (separate,
   higher-specificity rule) — only its weight moves to the site-wide 700. */
.g22-henna__cta-section .g22-henna__heading {
	font-weight: 700;
}

/* Body copy — 17-18px Manrope only (Prompt has no Cyrillic and was already
   falling back per-glyph; body copy now opts out of Prompt entirely, even
   for Latin/numerals, per audit). Slightly darker + tighter line-height
   than the ambient ink-75 token so paragraphs read as intentional copy. */
.g22-henna__body {
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: clamp(1.0625rem, 1.05vw, 1.125rem);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.72);
}

/* -------------------------------------------------------------------------- */
/* 2. Section rhythm — bigger vertical paddings + alternating backgrounds    */
/* -------------------------------------------------------------------------- */

.g22-henna__section {
	padding-block: clamp(104px, 9vw, 128px);
}

.g22-henna__section + .g22-henna__section {
	padding-block-start: clamp(72px, 7vw, 96px);
}

@media (max-width: 899px) {
	.g22-henna__section {
		padding-block: clamp(64px, 11vw, 88px);
	}

	.g22-henna__section + .g22-henna__section {
		padding-block-start: clamp(40px, 8vw, 56px);
	}
}

/* Alternating backgrounds so no two adjacent sections share a near-identical
   tone (audit §2). Learning stays the brand-violet anchor block (a
   pre-existing, deliberate choice) — everything else alternates cream /
   white / warm-grey / violet-tint around it so the violet reads as a strong
   accent rather than getting lost among more violet blocks. */
.g22-henna__about {
	background: #fbfaf7;
}

.g22-henna__timeline {
	background: var(--g22-be-white);
}

.g22-henna__why {
	background: #efefef;
}

.g22-henna__pricing {
	background: var(--g22-be-white);
}

.g22-henna__faq {
	background: var(--g22-be-violet-04);
}

.g22-henna__news {
	background: var(--g22-be-white);
}

/* Reviews (footer.php, renders directly after the CTA on the homepage) —
   matches the cream used for About so violet CTA is bracketed by cream on
   both the news->CTA and CTA->reviews edges. Original rule is !important,
   same selector + !important needed to win the tie in our favour. */
body.home .g22-google-reviews--mosaic {
	background: #fbfaf7 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. CTA — full-bleed violet, white cards, brand pattern + spark stars      */
/* -------------------------------------------------------------------------- */

/* Root cause of the "light lavender + loud yellow atom wallpaper" bug: the
   "Phase 4 — calm reference calibration" pass (above, body.home block)
   quietly reset .g22-henna__cta-section's *base* background/text colour
   back to the neutral calm-paper/calm-ink pair meant for editorial
   sections, and nothing after it ever restored the section's own violet
   fill — only the ::after pattern (below) and the cards/stars got
   re-authored, so the base layer kept losing. Once the section sits on
   calm-paper (near-white) instead of solid violet, the ::after pattern
   image — violet ground with YELLOW atom icons — reads as a scattering of
   bright yellow marks on a pale field even at 8% opacity, which is the
   "screaming yellow wallpaper" that was reported; restoring the intended
   solid violet fill here makes that same pattern sit dark-on-dark and
   nearly disappear, exactly as designed, with no change needed below. */
.g22-henna__cta-section {
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

.g22-henna__cta-section::before {
	border-color: rgba(255, 209, 65, 0.12);
}

.g22-henna__cta-section .g22-henna__label,
.g22-henna__cta-section .g22-henna__heading {
	color: var(--g22-be-white);
}

.g22-henna__cta-section .g22-henna__label::before,
.g22-henna__cta-section .g22-henna__label::after {
	color: var(--g22-be-yellow);
}

.g22-henna__cta-section::after {
	background: url("../images/brand/pattern-violet.png") center / cover no-repeat;
	opacity: 0.08;
	mix-blend-mode: normal;
}

.g22-henna__cta-cards {
	border-color: transparent;
	gap: clamp(20px, 3vw, 32px);
}

.g22-henna__cta-card,
.g22-henna__cta-card:first-child {
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
	border: 0;
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
	transition: transform 0.3s var(--g22h-ease), box-shadow 0.3s var(--g22h-ease);
}

.g22-henna__cta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

.g22-henna__cta-card + .g22-henna__cta-card {
	border-left: 0;
}

.g22-henna__cta-card .g22-henna__pill--solid {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-yellow);
	color: var(--g22-be-violet);
}

.g22-henna__cta-card:first-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:first-child .g22-henna__pill--solid:focus-visible,
.g22-henna__cta-card:last-child .g22-henna__pill--solid:hover,
.g22-henna__cta-card:last-child .g22-henna__pill--solid:focus-visible {
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
}

.g22-henna__cta-star {
	position: absolute;
	color: var(--g22-be-yellow);
	line-height: 1;
	pointer-events: none;
	z-index: 1;
	opacity: 0.9;
}

.g22-henna__cta-star--1 {
	top: 10%;
	left: 6%;
	font-size: 30px;
}

.g22-henna__cta-star--2 {
	top: 20%;
	right: 9%;
	font-size: 18px;
}

.g22-henna__cta-star--3 {
	bottom: 12%;
	left: 44%;
	font-size: 15px;
}

@media (max-width: 640px) {
	.g22-henna__cta-star {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* 4. "Чому обирають" — back to real white cards (radius/shadow/hover/number */
/* circle), replacing the flat editorial-list treatment from earlier fixes.  */
/* -------------------------------------------------------------------------- */

.g22-henna__cards--why {
	gap: clamp(20px, 2.4vw, 28px);
}

.g22-henna__cards--why .g22-henna__card-front,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-front {
	grid-template-columns: 44px 1fr;
	column-gap: 20px;
	padding: 32px;
	border: 0;
	border-radius: 20px;
	background: var(--g22-be-white);
	box-shadow: 0 8px 24px var(--g22-be-violet-08);
	transition: transform 0.3s var(--g22h-ease), box-shadow 0.3s var(--g22h-ease), padding 0.3s var(--g22h-ease);
}

.g22-henna__cards--why .g22-henna__card:last-child .g22-henna__card-front {
	border-bottom: 0;
}

.g22-henna__cards--why .g22-henna__card:hover .g22-henna__card-front,
.g22-henna__cards--why .g22-henna__card-front:hover {
	padding: 32px;
	transform: translateY(-4px);
	box-shadow: 0 16px 36px var(--g22-be-violet-14);
}

.g22-henna__cards--why .g22-henna__card-number,
.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--g22-be-violet);
	color: var(--g22-be-white);
	font-family: "Prompt", "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.g22-henna__cards--why .g22-henna__card h3 {
	margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.g22-henna__cards--why .g22-henna__card:hover h3,
	.g22-henna__cards--why .g22-henna__card:hover p {
		transform: none;
	}

	.g22-henna__cards--why .g22-henna__card:hover .g22-henna__card-number {
		color: var(--g22-be-white);
		transform: none;
	}
}

@media (max-width: 560px) {
	.g22-henna__cards--why .g22-henna__card-number,
	.g22-henna__cards--why .g22-henna__card:first-child .g22-henna__card-number {
		width: 40px;
		height: 40px;
		font-size: 0.9rem;
	}
}

/* -------------------------------------------------------------------------- */
/* 5. Friday alt-modules panel (learning section addendum)                  */
/* -------------------------------------------------------------------------- */

.g22-henna__friday {
	margin-top: clamp(48px, 6vw, 72px);
	padding: 32px clamp(24px, 4vw, 48px);
	border-radius: 20px;
	background: #FFF3CF;
}

.g22-henna__friday-title {
	margin: 0 0 16px;
	font-family: "Prompt", "Manrope", sans-serif;
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--g22-be-violet);
}

.g22-henna__friday-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g22-henna__friday-tags li {
	padding: 8px 16px;
	border: 1px solid var(--g22-be-violet);
	border-radius: 999px;
	background: var(--g22-be-white);
	color: var(--g22-be-violet);
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------- */
/* 6. Розклад дня — timeline (5 points)                                      */
/* -------------------------------------------------------------------------- */

.g22-henna__timeline-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: clamp(40px, 5vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.g22-henna__timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	column-gap: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.g22-henna__timeline-item:last-child {
	padding-bottom: 0;
}

.g22-henna__timeline-marker {
	position: relative;
	display: flex;
	justify-content: center;
}

.g22-henna__timeline-marker::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: -4px;
	left: 50%;
	width: 2px;
	background: var(--g22-be-violet-24);
	transform: translateX(-50%);
}

.g22-henna__timeline-item:last-child .g22-henna__timeline-marker::before {
	display: none;
}

.g22-henna__timeline-dot {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--g22-be-yellow);
	box-shadow: 0 0 0 4px var(--g22-be-white), 0 0 0 5px var(--g22-be-violet-24);
}

.g22-henna__timeline-body {
	padding-bottom: 4px;
}

.g22-henna__timeline-time {
	margin: 0 0 6px;
	font-family: "Prompt", "IBM Plex Mono", monospace;
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 700;
	color: var(--g22-be-violet);
}

.g22-henna__timeline-body h3 {
	margin: 0 0 8px;
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	font-weight: 600;
	color: var(--g22-be-violet);
	line-height: 1.2;
}

.g22-henna__timeline-body p {
	margin: 0;
	max-width: 58ch;
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--g22-be-violet-64);
}

@media (max-width: 640px) {
	.g22-henna__timeline-item {
		grid-template-columns: 20px 1fr;
		column-gap: 16px;
	}

	.g22-henna__timeline-dot {
		width: 11px;
		height: 11px;
	}
}

/* -------------------------------------------------------------------------- */
/* 7. Вартість — pricing teaser                                              */
/* -------------------------------------------------------------------------- */

.g22-henna__pricing-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 28px);
	margin: clamp(40px, 5vw, 56px) 0 clamp(28px, 3vw, 36px);
}

.g22-henna__pricing-card {
	padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 36px);
	border-radius: 20px;
	background: var(--g22-be-white);
	box-shadow: 0 8px 24px var(--g22-be-violet-08);
	transition: transform 0.3s var(--g22h-ease), box-shadow 0.3s var(--g22h-ease);
}

.g22-henna__pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px var(--g22-be-violet-14);
}

.g22-henna__pricing-label {
	margin: 0 0 12px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g22-be-violet-64);
}

.g22-henna__pricing-value {
	margin: 0;
	font-family: "Prompt", "Manrope", sans-serif;
	font-size: clamp(2.5rem, 4.2vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--g22-be-violet);
}

.g22-henna__pricing-value span {
	margin-left: 6px;
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--g22-be-violet-64);
}

.g22-henna__pricing-note {
	margin: 0 0 28px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.8125rem;
	color: var(--g22-be-violet-64);
}

@media (max-width: 640px) {
	.g22-henna__pricing-cards {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------- */
/* 8. FAQ — CSS-grid accordion (no jQuery slideToggle)                       */
/* -------------------------------------------------------------------------- */

.g22-henna__faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: clamp(40px, 5vw, 56px) 0 32px;
}

.g22-henna__faq-item {
	border-radius: 16px;
	background: var(--g22-be-white);
	box-shadow: 0 4px 16px var(--g22-be-violet-08);
}

.g22-henna__faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	background: transparent;
	color: var(--g22-be-violet);
	font-family: "Manrope", sans-serif;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	font-weight: 600;
	text-align: left;
	line-height: 1.4;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.g22-henna__faq-icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.g22-henna__faq-icon::before,
.g22-henna__faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--g22-be-violet);
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--g22h-ease), opacity 0.3s var(--g22h-ease);
}

.g22-henna__faq-icon::before {
	width: 14px;
	height: 2px;
}

.g22-henna__faq-icon::after {
	width: 2px;
	height: 14px;
}

.g22-henna__faq-trigger[aria-expanded="true"] .g22-henna__faq-icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Pure-CSS accordion: grid-template-rows 0fr -> 1fr transition, no JS-driven
   height measurement (no jQuery slideToggle). reveal.js only flips
   aria-expanded / the --open class; the animation itself lives here. */
.g22-henna__faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s var(--g22h-ease);
}

.g22-henna__faq-item--open .g22-henna__faq-panel {
	grid-template-rows: 1fr;
}

.g22-henna__faq-panel-inner {
	overflow: hidden;
}

.g22-henna__faq-panel-inner p {
	margin: 0;
	padding: 0 24px 20px;
	max-width: 62ch;
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--g22-be-violet-64);
}

@media (prefers-reduced-motion: reduce) {
	.g22-henna__faq-panel {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* 9. Micro-graphics — one violet arc, dosed yellow spark stars              */
/* -------------------------------------------------------------------------- */

.g22-henna__heading-arc {
	display: block;
	width: clamp(48px, 5vw, 72px);
	height: auto;
	margin-bottom: 8px;
	overflow: visible;
	fill: none;
	stroke: var(--g22-be-violet);
	stroke-width: 7;
	stroke-linecap: round;
}

/* -------------------------------------------------------------------------- */
/* 10. Reveal-on-scroll for the new blocks (assets/reveal.js adds            */
/* .g22-be-reveal via its revealSelector list + observes intersection; the   */
/* actual motion is pure CSS here, matching the existing pattern used for    */
/* .g22-henna__cta-card / .g22-henna__news-card above).                     */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html.g22-be-js .g22-henna__friday.g22-be-reveal,
	html.g22-be-js .g22-henna__timeline-item.g22-be-reveal,
	html.g22-be-js .g22-henna__pricing-card.g22-be-reveal,
	html.g22-be-js .g22-henna__faq-item.g22-be-reveal {
		opacity: 0;
		transform: translateY(18px);
	}

	html.g22-be-js .g22-henna__friday.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-henna__timeline-item.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-henna__pricing-card.g22-be-reveal.g22-be-reveal--in,
	html.g22-be-js .g22-henna__faq-item.g22-be-reveal.g22-be-reveal--in {
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--g22-be-i, 0) * 60ms),
			transform 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--g22-be-i, 0) * 60ms);
	}
}

/* -------------------------------------------------------------------------- */
/* 11. Hover standardisation — buttons/links/cards share one timing curve    */
/* -------------------------------------------------------------------------- */

.g22-henna .g22-henna__pill,
.g22-henna .g22-henna__pill--solid,
.g22-henna__pricing-card,
.g22-henna__cta-card,
.g22-henna__cards--why .g22-henna__card-front {
	transition-duration: 0.3s;
	transition-timing-function: var(--g22h-ease);
}

/* -------------------------------------------------------------------------- */
/* 12. Mobile safety pass, 390-430px (design audit "проверь на 390px")       */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.g22-henna__friday {
		padding: 24px 20px;
	}

	.g22-henna__friday-tags li {
		font-size: 0.7rem;
		padding: 7px 14px;
	}

	.g22-henna__timeline-body h3 {
		font-size: 1.0625rem;
	}

	.g22-henna__pricing-value {
		font-size: 2.4rem;
	}

	.g22-henna__faq-trigger {
		padding: 16px 18px;
		font-size: 0.9375rem;
	}

	.g22-henna__faq-panel-inner p {
		padding: 0 18px 16px;
		font-size: 0.9375rem;
	}
}

/* -------------------------------------------------------------------------- */
/* 13. Younger-school photo story — user-provided Google Photos album         */
/* -------------------------------------------------------------------------- */

.g22-henna__hero-media img {
	object-position: 62% 50%;
}

.g22-henna__about-visual,
.g22-henna__learning-visual {
	position: relative;
}

.g22-henna__photo-pair {
	position: relative;
	isolation: isolate;
}

.g22-henna__photo-pair--about {
	padding: 0 0 54px 54px;
}

.g22-henna__photo-pair--learning {
	padding: 0 54px 54px 0;
}

.g22-henna__photo-pair > .g22-henna__about-photo {
	aspect-ratio: 5 / 4;
	max-height: none;
}

.g22-henna__photo-pair > .g22-henna__learning-photo {
	aspect-ratio: 4 / 5;
	max-height: 720px;
}

.g22-henna__photo-pair .g22-henna__photo-accent {
	position: absolute;
	z-index: 2;
	bottom: 0;
	width: clamp(150px, 34%, 230px);
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 8px solid var(--g22-be-white);
	background: var(--g22-be-white);
	box-shadow: 0 24px 58px rgba(67, 41, 128, 0.2);
}

.g22-henna__photo-pair--about .g22-henna__photo-accent {
	left: 0;
}

.g22-henna__photo-pair--learning .g22-henna__photo-accent {
	right: 0;
	border-color: var(--g22-be-violet);
	background: var(--g22-be-violet);
	box-shadow: 0 24px 58px rgba(24, 12, 58, 0.34);
}

.g22-henna__photo-pair picture,
.g22-henna__photo-pair img {
	display: block;
	width: 100%;
	height: 100%;
}

.g22-henna__photo-pair img {
	object-fit: cover;
}

.g22-henna__photo-pair--about > .g22-henna__about-photo img {
	object-position: 52% 46%;
}

.g22-henna__photo-pair--learning > .g22-henna__learning-photo img {
	object-position: 50% 38%;
}

@media (min-width: 900px) {
	.g22-henna__hero-title {
		max-width: 12ch;
		font-size: clamp(2.5rem, 3.2vw, 3.25rem);
		line-height: 1.02;
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.g22-signature-scroll .g22-henna__hero {
		height: 170svh;
	}

	html.g22-signature-scroll .g22-henna__hero-title {
		max-width: 12ch;
		font-size: clamp(2.5rem, 3.2vw, 3.25rem);
		line-height: 1.02;
	}

	html.g22-signature-scroll .g22-henna__hero-panel-inner {
		gap: clamp(16px, 1.5vw, 22px);
	}

	html.g22-signature-scroll .g22-henna__hero-media img,
	html.g22-signature-scroll.g22-be-js .g22-henna__hero-media img,
	html.g22-signature-scroll.g22-be-loaded .g22-henna__hero-media img {
		object-position: 68% 50%;
	}
}

@media (max-width: 899px) {
	.g22-henna__hero-panel {
		padding-block: clamp(26px, 6vw, 40px);
	}

	.g22-henna__hero-panel-inner {
		gap: 14px;
	}

	.g22-henna__hero-title {
		max-width: 13ch;
		font-size: clamp(2.15rem, 8.8vw, 3.4rem);
		line-height: 0.98;
	}

	.g22-henna__hero-media {
		height: min(50svh, 500px);
		min-height: 310px;
	}

	.g22-henna__hero-media img {
		object-position: 70% 50%;
	}

	.g22-henna__photo-pair--about {
		padding: 0 0 42px 28px;
	}

	.g22-henna__photo-pair--learning {
		padding: 0 28px 42px 0;
	}

	.g22-henna__photo-pair .g22-henna__photo-accent {
		width: clamp(124px, 32%, 190px);
		border-width: 5px;
	}
}

@media (max-width: 480px) {
	.g22-henna__hero-title {
		font-size: clamp(2rem, 9.2vw, 2.65rem);
	}

	.g22-henna__hero-brand,
	.g22-henna__hero-avatars {
		margin-block: 0;
	}

	.g22-henna__photo-pair > .g22-henna__about-photo {
		aspect-ratio: 4 / 3;
	}
}

/* ===========================================================================
   Floating rounded nav — cascade final (sitewide)
   ---------------------------------------------------------------------------
   Later body.home skins flatten the masthead. This block restores the always-
   on pill chrome for home + inner pages and kills underline-link leftovers.
   =========================================================================== */
body .g22-header:not(.g22-header--taste),
body.home .g22-header:not(.g22-header--taste),
body.home .g22-header--condensed:not(.g22-header--taste),
body.home .g22-header:not(.g22-header--taste).g22-header--condensed{
	box-sizing: border-box;
	position: sticky;
	top: 12px;
	height: 72px;
	width: min(calc(100% - 32px), calc(var(--g22h-shell, 1200px) - 24px));
	max-width: none;
	margin: 0 auto;
	padding: 0 12px;
	border: 0;
	border-bottom: 0;
	border-radius: 999px;
	background: rgba(245, 245, 245, 0.82);
	box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.07), 0 14px 40px rgba(67, 41, 128, 0.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.05);
	backdrop-filter: blur(18px) saturate(1.05);
	color: var(--g22h-ink, #1a1a1a);
	transition: top 0.3s var(--g22h-ease, cubic-bezier(0.4, 0, 0.2, 1)), width 0.3s var(--g22h-ease, cubic-bezier(0.4, 0, 0.2, 1)), padding 0.3s var(--g22h-ease, cubic-bezier(0.4, 0, 0.2, 1)), background-color 0.3s var(--g22h-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.3s var(--g22h-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

body .g22-header--condensed:not(.g22-header--taste),
body.home .g22-header--condensed:not(.g22-header--taste),
body.home .g22-header:not(.g22-header--taste).g22-header--condensed{
	top: 10px;
	width: min(calc(100% - 48px), calc(var(--g22h-shell, 1200px) - 64px));
	padding: 0 10px;
	background: rgba(250, 250, 250, 0.9);
	box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.09), 0 18px 48px rgba(67, 41, 128, 0.11);
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta,
body .g22-header:not(.g22-header--taste) .g22-header__cta{
	border-radius: 999px;
	border-color: #432980;
	background: #432980;
	color: #fff !important;
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta:hover,
body .g22-header:not(.g22-header--taste) .g22-header__cta:hover{
	border-color: var(--g22-purple-hot);
	background: var(--g22-purple-hot);
	color: #fff !important;
}

body.home .g22-header:not(.g22-header--taste) .g22-header__cta::after,
body .g22-header:not(.g22-header--taste) .g22-header__cta::after{
	border-radius: 50%;
	background: var(--g22-yellow);
	color: #432980;
}

@media (min-width: 821px) {
	body .g22-header:not(.g22-header--taste) .g22-header__nav ul,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav ul{
		gap: 3px;
		padding: 5px;
		border: 0;
		border-radius: 999px;
		background: rgba(26, 26, 26, 0.05);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a{
		position: relative;
		min-height: 40px;
		padding: 0 18px;
		border: 0;
		border-radius: 999px;
		outline: 0;
		box-shadow: none;
		background: transparent;
		color: var(--g22h-ink, #1a1a1a);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
	}

	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a::after {
		content: none;
		display: none;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible{
		background: #fff;
		outline: 0;
		box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
		color: var(--g22h-ink, #1a1a1a);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a{
		background: #fff;
		outline: 0;
		box-shadow: 0 0 0 1.5px var(--g22-yellow), 0 2px 10px var(--g22-purple-08);
		color: var(--g22h-ink, #1a1a1a);
	}
}

@media (max-width: 820px) {
	body .g22-header:not(.g22-header--taste),
	body.home .g22-header:not(.g22-header--taste),
	body.home .g22-header--condensed:not(.g22-header--taste),
	body.home .g22-header:not(.g22-header--taste).is-menu-open,
	body.home .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		height: 60px;
		top: 8px;
		width: calc(100% - 20px);
		margin: 0 auto;
		padding: 0 10px;
		border-radius: 999px;
		border-bottom: 0;
		background: rgba(250, 250, 250, 0.92);
		box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.08), 0 12px 32px rgba(67, 41, 128, 0.09);
	}

	body .g22-header:not(.g22-header--taste).is-menu-open,
	body.home .g22-header:not(.g22-header--taste).is-menu-open,
	body.home .g22-header:not(.g22-header--taste).g22-header--condensed.is-menu-open{
		border-radius: 28px;
		background: rgba(255, 255, 255, 0.98);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav{
		top: 78px;
		left: 12px;
		right: 12px;
		border: 1px solid rgba(26, 26, 26, 0.08);
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.97);
		box-shadow: 0 24px 50px rgba(26, 26, 26, 0.14);
		padding: 14px;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a{
		border-radius: 999px;
		font-weight: 600;
	}

	body .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:hover,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav a:focus-visible,
	body.home .g22-header:not(.g22-header--taste) .g22-header__nav .current-menu-item > a{
		background: rgba(255, 209, 65, 0.28);
		outline: 0;
		box-shadow: none;
		color: var(--g22h-ink, #1a1a1a);
	}

	body .g22-header:not(.g22-header--taste) .g22-header__toggle,
	body.home .g22-header:not(.g22-header--taste) .g22-header__toggle{
		border-radius: 50%;
		border: 1px solid rgba(26, 26, 26, 0.1);
		background: #fff;
	}
}

body.admin-bar .g22-header:not(.g22-header--taste),
body.admin-bar.home .g22-header:not(.g22-header--taste){
	top: calc(12px + 32px);
}

@media screen and (min-width: 783px) {
	body.admin-bar .g22-header:not(.g22-header--taste),
	body.admin-bar.home .g22-header:not(.g22-header--taste){
		top: calc(12px + 32px);
	}
}

@media (max-width: 782px) {
	body.admin-bar .g22-header:not(.g22-header--taste),
	body.admin-bar.home .g22-header:not(.g22-header--taste){
		top: calc(8px + 46px);
	}
}