/*
 * Generation 22 — senior home system (rhythm + motion)
 * Fonts & colors stay on the existing brand stack:
 * Manrope + IBM Plex Mono · #e5e5e5 / #1a1a1a / #3F2780 / #FFD141
 */

/* --------------------------------------------------------------------------
   0. Tokens — rhythm / motion only (no font/color reinvention)
   -------------------------------------------------------------------------- */

.g22-henna--clean {
	--g22-section-y: clamp(72px, 10vw, 128px);
	--g22-rise: 22px;
}

body:has(.g22-henna--clean) {
	--g22-dur-hero: 900ms;
	--g22-stagger: 64ms;
}

/* Type discipline — wrapping only */
.g22-henna--clean h1,
.g22-henna--clean h2,
.g22-henna--clean .g22-hero__title,
.g22-henna--clean .g22-about__title,
.g22-henna--clean .g22-learn__display,
.g22-henna--clean .g22-why__head .g22-clean__heading,
.g22-henna--clean .g22-news__title,
.g22-henna--clean .g22-cta__display {
	text-wrap: balance;
}

.g22-henna--clean p,
.g22-henna--clean .g22-hero__lede,
.g22-henna--clean .g22-about__lead,
.g22-henna--clean .g22-learn__lede,
.g22-henna--clean .g22-why__note,
.g22-henna--clean .g22-news__excerpt,
.g22-henna--clean .g22-cta__lede,
.g22-henna--clean .g22-cta__slice-text {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   1. HERO — hierarchy + one quiet note (fonts/colors from home-studio)
   -------------------------------------------------------------------------- */

.g22-henna--clean .g22-clean__hero.g22-hero {
	min-height: min(100svh, 960px);
	/* Tighter under the floating pill — no empty paper “sticking out” above copy. */
	padding-block: clamp(88px, 10vh, 112px) clamp(48px, 7vh, 88px);
}

@media (max-width: 760px) {
	/* Full-bleed composition lives in home-studio — don't fight padding/stack. */
	.g22-henna--clean .g22-clean__hero.g22-hero {
		min-height: 100svh;
		min-height: 100dvh;
		padding-block: 0;
	}

	.g22-henna--clean .g22-hero__shot img,
	.g22-henna--clean .g22-hero__shot picture {
		animation: none !important;
		transform: none !important;
	}

	/*
	 * Sticky capsule leaves a 56px paper band above the hero on mobile.
	 * Fixed removes it from flow so the photo can run edge-to-edge under the nav.
	 * (nav-taste loads before this file — must live here to win the cascade.)
	 */
	body.home:has(.g22-henna--clean) .g22-header.g22-header--taste,
	body.home:has(.g22-henna--clean) .g22-header.g22-header--taste.g22-header--condensed {
		position: fixed;
		left: 0;
		right: 0;
		margin-inline: auto;
	}
}

/* More paper left; soft-fade photo plate from home-studio.
   Desktop-only: on ≤760px home-studio stacks the photo full-bleed under copy.
   An unscoped width/inset here was leaving a ~40% white void on mobile. */
.g22-henna--clean .g22-hero__frame {
	z-index: 0;
}

@media (min-width: 761px) {
	.g22-henna--clean .g22-hero__frame {
		width: clamp(56%, 60vw, 66%);
		inset: 0 0 0 auto;
	}

	.g22-henna--clean .g22-hero__copy {
		max-width: min(28rem, 34vw);
	}
}

.g22-henna--clean .g22-hero__copy {
	gap: clamp(16px, 2.2vh, 24px);
}

.g22-henna--clean .g22-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: 4px;
}

@media (max-width: 760px) {
	/* Keep flex — mobile hero is a docked column, not a contents reorder. */
	.g22-henna--clean .g22-hero__actions {
		display: flex;
	}
}

/* Note lives in .g22-hero__foot — sentence case, not mono caps. */
.g22-henna--clean .g22-hero__note {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	color: rgba(26, 26, 26, 0.62);
}

.g22-henna--clean .g22-hero__scroll-rail {
	width: 48px;
	height: 1px;
	background: linear-gradient(90deg, var(--g22-ink), transparent);
	animation: g22-senior-rail 1.8s var(--g22-ease-enter) infinite;
}

@keyframes g22-senior-rail {
	0%, 100% { transform: scaleX(0.55); opacity: 0.35; transform-origin: left; }
	50% { transform: scaleX(1); opacity: 0.9; transform-origin: left; }
}

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
	@media (prefers-reduced-motion: no-preference) {
		.g22-henna--clean .g22-hero__shot img {
			animation: g22-hero-parallax linear both;
			animation-timeline: scroll(block root);
			animation-range: 0px 70vh;
			will-change: transform;
		}

		@keyframes g22-hero-parallax {
			to { transform: scale(1.04) translate3d(0, 2%, 0); }
		}
	}
}

@media (max-width: 900px) {
	.g22-henna--clean .g22-hero__copy {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM — layout contrast, brand colors unchanged
   -------------------------------------------------------------------------- */

.g22-henna--clean .g22-clean__section {
	padding-block: var(--g22-section-y);
}

.g22-henna--clean .g22-about {
	background: var(--g22-paper);
}

.g22-henna--clean .g22-about__media,
.g22-henna--clean .g22-about__media-main,
.g22-henna--clean .g22-about__media-side {
	border-radius: var(--g22-r-lg);
}

.g22-henna--clean .g22-learn__media {
	border-radius: var(--g22-r-lg);
	box-shadow: var(--g22-shadow-lg);
	transform: translateZ(0);
}

.g22-henna--clean .g22-learn.is-in .g22-learn__media {
	animation: none;
}

/* Constellation enter */
.g22-henna--clean .g22-learn__focus-map,
.g22-henna--clean .g22-learn__focus-core,
.g22-henna--clean .g22-learn__focus-card {
	opacity: 0;
	transition:
		opacity 560ms var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
		transform 640ms var(--g22-ease-enter, cubic-bezier(0.16, 1, 0.3, 1));
}

.g22-henna--clean .g22-learn__focus-map {
	transform: scale(0.96);
	transition-delay: 60ms;
}

.g22-henna--clean .g22-learn__focus-core {
	transform: translate(-50%, -50%) scale(0.92);
	transition-delay: 140ms;
}

.g22-henna--clean .g22-learn__focus-card {
	transform: translateY(16px);
}

.g22-henna--clean .g22-learn__focus-card--program { transition-delay: 200ms; }
.g22-henna--clean .g22-learn__focus-card--progress { transition-delay: 260ms; }
.g22-henna--clean .g22-learn__focus-card--support { transition-delay: 320ms; }
.g22-henna--clean .g22-learn__focus-card--skills { transition-delay: 380ms; }

.g22-henna--clean .g22-learn.is-in .g22-learn__focus-map,
.g22-henna--clean .g22-learn.is-in .g22-learn__focus-card {
	opacity: 1;
	transform: none;
}

.g22-henna--clean .g22-learn.is-in .g22-learn__focus-core {
	opacity: 1;
	transform: translate(-50%, -50%);
}

@media (max-width: 900px) {
	.g22-henna--clean .g22-learn__focus-core,
	.g22-henna--clean .g22-learn.is-in .g22-learn__focus-core {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-henna--clean .g22-learn__focus-map,
	.g22-henna--clean .g22-learn__focus-core,
	.g22-henna--clean .g22-learn__focus-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Desktop constellation only — stacked mobile must stay transform:none. */
	@media (min-width: 901px) {
		.g22-henna--clean .g22-learn__focus-core {
			transform: translate(-50%, -50%) !important;
		}
	}
}

@keyframes g22-senior-float {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, -10px, 0); }
}

/* --------------------------------------------------------------------------
   3. NEWS — lead + two secondary
   -------------------------------------------------------------------------- */

.g22-henna--clean .g22-news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 18px;
	align-items: stretch;
}

.g22-henna--clean .g22-news__item {
	max-width: none;
}

/* Client audit 2026-07-29 (task 2): the lead card used a 16:11 photo box
   while cards 2-3 use 4:3, so meta/title rows never lined up across the
   row. Unify on the same 4:3 box used everywhere else. */
.g22-henna--clean .g22-news__item--lead .g22-news__media {
	aspect-ratio: 4 / 3;
}

.g22-henna--clean .g22-news__item--lead .g22-news__card-title {
	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
	letter-spacing: -0.025em;
}

.g22-henna--clean .g22-news__item:not(.g22-news__item--lead) .g22-news__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 900px) {
	.g22-henna--clean .g22-news__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   4. CTA mark draw (uses existing purple/yellow tokens)
   -------------------------------------------------------------------------- */

.g22-henna--clean .g22-cta__em {
	position: relative;
}

.g22-henna--clean .g22-cta__em::after {
	content: none;
	display: none;
}

@keyframes g22-mark-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(0.92); }
}

/* --------------------------------------------------------------------------
   5. Motion choreography
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.g22-henna--clean .g22-news__item {
		transition:
			opacity 560ms var(--g22-ease-enter),
			transform 560ms var(--g22-ease-enter);
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-henna--clean .g22-hero__scroll-rail,
	.g22-henna--clean .g22-learn.is-in .g22-learn__media,
	.g22-henna--clean .g22-cta.is-in .g22-cta__em::after {
		animation: none !important;
	}

	.g22-henna--clean .g22-hero__shot img {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   6. Strict SVG marks — same language as eksternat orbit, elevated
   Hairline purple geometry + yellow satellites. Decorative only
   (aria-hidden in partials). Motion = transform/opacity only, spring-like
   ease, gated on prefers-reduced-motion. No Motion/React packages.
   -------------------------------------------------------------------------- */

.g22-henna--clean .g22-hero,
.g22-henna--clean .g22-about,
.g22-henna--clean .g22-learn,
.g22-henna--clean .g22-why,
.g22-henna--clean .g22-news,
.g22-henna--clean .g22-cta {
	position: relative;
	isolation: isolate;
	/* Let marks breathe past section edges; page root still clips x. */
	overflow: visible;
}

.g22-henna--clean .g22-clean__shell,
.g22-henna--clean .g22-hero__shell,
.g22-henna--clean .g22-hero__copy {
	position: relative;
	z-index: 1;
}

/* Photo plate behind copy; manual .g22-hero__orbit sits in headroom. */
.g22-henna--clean .g22-hero__frame {
	z-index: 0;
}

/* Belt-and-suspenders: CSS learn ring must stay dead once SVG orbit lands. */
.g22-henna--clean .g22-learn::before {
	content: none !important;
	display: none !important;
}

.g22-henna--clean .g22-orbit {
	position: absolute;
	z-index: 0;
	width: clamp(280px, 34vw, 520px);
	aspect-ratio: 1;
	pointer-events: none;
	color: var(--g22-purple);
	opacity: 0.78;
	transform-origin: center;
}

.g22-henna--clean .g22-orbit svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: center;
}

.g22-henna--clean .g22-orbit__halo,
.g22-henna--clean .g22-orbit__ring {
	fill: none;
	stroke: currentColor;
	vector-effect: non-scaling-stroke;
}

/* Stroke hierarchy: dashed halo thinnest → rings hairline → solid ticks. */
.g22-henna--clean .g22-orbit__halo {
	stroke-width: 0.55;
	stroke-dasharray: 1.25 9;
	opacity: 0.16;
	transform-origin: 120px 120px;
	transform-box: view-box;
}

.g22-henna--clean .g22-orbit__spin {
	transform-origin: 120px 120px;
	transform-box: view-box;
}

.g22-henna--clean .g22-orbit__ring {
	stroke-width: 0.95;
	opacity: 0.22;
}

.g22-henna--clean .g22-orbit__sat {
	transform-box: fill-box;
	transform-origin: center;
}

.g22-henna--clean .g22-orbit__satellite,
.g22-henna--clean .g22-orbit__core {
	fill: var(--g22-yellow);
}

.g22-henna--clean .g22-orbit__satellite {
	opacity: 0.88;
}

.g22-henna--clean .g22-orbit__heart {
	transform-origin: 120px 120px;
	transform-box: view-box;
}

.g22-henna--clean .g22-orbit__nucleus {
	fill: var(--g22-purple);
	opacity: 0.11;
}

.g22-henna--clean .g22-orbit__core {
	opacity: 0.78;
}

/* Photo already carries the orbit graphic — hide the SVG twin. */
.g22-henna--clean .g22-orbit--hero {
	display: none !important;
}

/* Decor cull: the orbit atom + corner frame-mark were repeated on every
   section (about/learn/cta/why/news/footer). Senior pass keeps the orbit on
   the hero only and drops the frame-mark everywhere — markup stays (safer
   than touching template-parts across every call site) but nothing paints. */
.g22-henna--clean .g22-orbit--about,
.g22-henna--clean .g22-orbit--learn,
.g22-henna--clean .g22-orbit--cta,
.g22-henna--clean .g22-frame-mark {
	display: none !important;
}

.g22-henna--clean .g22-frame-mark svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.g22-henna--clean .g22-frame-mark__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: square;
	vector-effect: non-scaling-stroke;
	opacity: 0.32;
}

.g22-henna--clean .g22-frame-mark__dot {
	fill: var(--g22-yellow);
	opacity: 0.9;
}

.g22-henna--clean .g22-frame-mark--why {
	top: clamp(20px, 2.8vw, 36px);
	right: clamp(16px, 2.8vw, 40px);
}

.g22-henna--clean .g22-frame-mark--news {
	top: clamp(18px, 2.4vw, 32px);
	left: clamp(16px, 2.8vw, 40px);
}

/*
 * Section-enter: scale + fade on the SVG (keeps wrapper free for float).
 * Only when motion engine is alive ([data-g22-motion]) so no-JS stays visible.
 * Hero latches on .is-live; about/learn/cta on .is-in.
 */
@media (prefers-reduced-motion: no-preference) {
	.g22-henna--clean[data-g22-motion] .g22-orbit svg {
		opacity: 0;
		transform: scale(0.92);
		transition:
			opacity 1.05s cubic-bezier(0.22, 1.15, 0.36, 1),
			transform 1.15s cubic-bezier(0.22, 1.35, 0.36, 1);
	}

	.g22-henna--clean[data-g22-motion] .g22-hero.is-live .g22-orbit--hero svg,
	.g22-henna--clean[data-g22-motion] .g22-about.is-in .g22-orbit--about svg,
	.g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-orbit--learn svg,
	.g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-orbit--cta svg {
		opacity: 1;
		transform: scale(1);
	}

	/* Stagger inner layers on enter (opacity only — spin owns transform). */
	.g22-henna--clean[data-g22-motion] .g22-orbit__halo,
	.g22-henna--clean[data-g22-motion] .g22-orbit__spin,
	.g22-henna--clean[data-g22-motion] .g22-orbit__heart {
		opacity: 0;
		transition: opacity 0.9s cubic-bezier(0.22, 1.15, 0.36, 1);
	}

	.g22-henna--clean[data-g22-motion] .g22-hero.is-live .g22-orbit__halo,
	.g22-henna--clean[data-g22-motion] .g22-about.is-in .g22-orbit__halo,
	.g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-orbit__halo,
	.g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-orbit__halo {
		opacity: 0.16;
		transition-delay: 40ms;
	}

	.g22-henna--clean[data-g22-motion] .g22-hero.is-live .g22-orbit__spin,
	.g22-henna--clean[data-g22-motion] .g22-about.is-in .g22-orbit__spin,
	.g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-orbit__spin,
	.g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-orbit__spin {
		opacity: 1;
		transition-delay: 120ms;
	}

	.g22-henna--clean[data-g22-motion] .g22-hero.is-live .g22-orbit__heart,
	.g22-henna--clean[data-g22-motion] .g22-about.is-in .g22-orbit__heart,
	.g22-henna--clean[data-g22-motion] .g22-learn.is-in .g22-orbit__heart,
	.g22-henna--clean[data-g22-motion] .g22-cta.is-in .g22-orbit__heart {
		opacity: 1;
		transition-delay: 220ms;
	}

	/* Ambient: spring-like float (soft overshoot keyframes, not linear bob). */
	.g22-henna--clean .g22-orbit--hero,
	.g22-henna--clean .g22-orbit--about,
	.g22-henna--clean .g22-orbit--cta {
		animation: g22OrbitFloat 7.6s cubic-bezier(0.37, 0.02, 0.2, 1) infinite alternate;
	}

	.g22-henna--clean .g22-orbit--learn {
		animation: g22OrbitFloatLearn 8.4s cubic-bezier(0.37, 0.02, 0.2, 1) infinite alternate;
	}

	/* Quiet variants: smaller float amplitude via slower + shorter travel. */
	.g22-henna--clean .g22-orbit--about {
		animation-duration: 9.2s;
		animation-name: g22OrbitFloatSoft;
	}

	.g22-henna--clean .g22-orbit--cta {
		animation-duration: 10s;
		animation-name: g22OrbitFloatSoft;
	}

	/* Layered spin: ellipses forward, halo reverse-slower. */
	.g22-henna--clean .g22-orbit__spin {
		animation: g22OrbitSpin 36s linear infinite;
		will-change: transform;
	}

	.g22-henna--clean .g22-orbit--about .g22-orbit__spin,
	.g22-henna--clean .g22-orbit--cta .g22-orbit__spin {
		animation-duration: 52s;
	}

	.g22-henna--clean .g22-orbit__halo {
		animation: g22OrbitSpinReverse 64s linear infinite;
		will-change: transform;
	}

	.g22-henna--clean .g22-orbit--about .g22-orbit__halo,
	.g22-henna--clean .g22-orbit--cta .g22-orbit__halo {
		animation-duration: 78s;
	}

	/* Satellite scale pulse — staggered phase offsets. */
	.g22-henna--clean .g22-orbit__sat {
		animation: g22OrbitSatPulse 3.4s cubic-bezier(0.34, 1.2, 0.46, 1) infinite;
		will-change: transform;
	}

	.g22-henna--clean .g22-orbit__sat--b {
		animation-delay: -1.15s;
	}

	.g22-henna--clean .g22-orbit__sat--c {
		animation-delay: -2.25s;
	}

	.g22-henna--clean .g22-orbit--about .g22-orbit__sat,
	.g22-henna--clean .g22-orbit--cta .g22-orbit__sat {
		animation-name: g22OrbitSatPulseSoft;
		animation-duration: 4.6s;
	}

	/* Core opacity breathe — barely there, architectural not playful. */
	.g22-henna--clean .g22-orbit__core {
		animation: g22OrbitCoreBreathe 5.2s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
	}

	.g22-henna--clean .g22-orbit--about .g22-orbit__core,
	.g22-henna--clean .g22-orbit--cta .g22-orbit__core {
		animation-duration: 7s;
	}

	@keyframes g22OrbitFloat {
		0% { transform: translate3d(0, 0, 0); }
		35% { transform: translate3d(0, -13px, 0); }
		55% { transform: translate3d(0, -8px, 0); }
		100% { transform: translate3d(0, -11px, 0); }
	}

	@keyframes g22OrbitFloatSoft {
		0% { transform: translate3d(0, 0, 0); }
		40% { transform: translate3d(0, -7px, 0); }
		65% { transform: translate3d(0, -4px, 0); }
		100% { transform: translate3d(0, -6px, 0); }
	}

	@keyframes g22OrbitFloatLearn {
		0% { transform: translate3d(0, -52%, 0); }
		35% { transform: translate3d(0, calc(-52% - 13px), 0); }
		55% { transform: translate3d(0, calc(-52% - 8px), 0); }
		100% { transform: translate3d(0, calc(-52% - 11px), 0); }
	}

	@keyframes g22OrbitSpin {
		to { transform: rotate(360deg); }
	}

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

	@keyframes g22OrbitSatPulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.38); }
	}

	@keyframes g22OrbitSatPulseSoft {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.14); }
	}

	@keyframes g22OrbitCoreBreathe {
		0%, 100% { opacity: 0.68; }
		50% { opacity: 0.92; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-henna--clean .g22-orbit--hero,
	.g22-henna--clean .g22-orbit--about,
	.g22-henna--clean .g22-orbit--learn,
	.g22-henna--clean .g22-orbit--cta,
	.g22-henna--clean .g22-orbit__spin,
	.g22-henna--clean .g22-orbit__halo,
	.g22-henna--clean .g22-orbit__sat,
	.g22-henna--clean .g22-orbit__core {
		animation: none !important;
		will-change: auto !important;
	}

	.g22-henna--clean[data-g22-motion] .g22-orbit svg,
	.g22-henna--clean[data-g22-motion] .g22-orbit__spin,
	.g22-henna--clean[data-g22-motion] .g22-orbit__heart {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.g22-henna--clean[data-g22-motion] .g22-orbit__halo {
		opacity: 0.16;
		transform: none;
		transition: none;
	}
}

@media (max-width: 860px) {
	.g22-henna--clean .g22-orbit--hero {
		top: clamp(180px, 36vw, 320px);
		left: auto;
		right: clamp(-120px, -18vw, -48px);
		width: clamp(280px, 64vw, 440px);
		opacity: 0.42;
	}

	.g22-henna--clean .g22-orbit--about,
	.g22-henna--clean .g22-orbit--cta {
		opacity: 0.28;
	}

	.g22-henna--clean .g22-orbit--learn {
		width: min(72vw, 340px);
		right: -24vw;
		opacity: 0.38;
	}

	.g22-henna--clean .g22-frame-mark--why,
	.g22-henna--clean .g22-frame-mark--news {
		opacity: 0.4;
		width: 60px;
	}
}

/* Match eksternat: hide heavy orbits on very small screens; keep tiny frames soft. */
@media (max-width: 560px) {
	.g22-henna--clean .g22-orbit--hero,
	.g22-henna--clean .g22-orbit--about,
	.g22-henna--clean .g22-orbit--learn,
	.g22-henna--clean .g22-orbit--cta {
		display: none;
	}

	.g22-henna--clean .g22-frame-mark--why,
	.g22-henna--clean .g22-frame-mark--news {
		opacity: 0.28;
		width: 48px;
	}
}

/* --------------------------------------------------------------------------
   Client audit 2026-07-29 (task 1) -- "learn" focus panel (orbit SVG) read as
   an empty lavender block: inline stroke-opacity 0.18 on hairline purple
   rings is too faint against the pale gradient background, and the yellow/
   purple corner dots (fill-opacity .35) barely register. Bump both via CSS
   (beats the SVG's own presentation attributes, which carry the lowest
   possible specificity) without touching markup.
   -------------------------------------------------------------------------- */
.g22-henna--clean .g22-learn__focus-map > g:first-of-type {
	stroke: var(--g22-purple);
	stroke-opacity: 0.22;
}

.g22-henna--clean .g22-learn__focus-map circle[r="5"] {
	fill: var(--g22-yellow);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(1.3);
}

.g22-henna--clean .g22-learn__focus-map circle[r="3.5"] {
	fill: var(--g22-purple);
	fill-opacity: 0.55;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   Client audit 2026-07-29 (task 4) -- H2 scale unification. Two tiers only:
   48px for section H2s, 60px for the closing CTA statement. Scoped to the
   exact headings the audit named (not the shared --g22-fs-h2/--g22-fs-display
   tokens, which other sections still use at their existing sizes).
   -------------------------------------------------------------------------- */
body.home .g22-henna--clean .g22-why__head .g22-clean__h2 {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
}

body.home .g22-henna--clean .g22-news__title {
	font-size: clamp(1.85rem, 3.4vw, 3rem);
}

body.home .g22-henna--clean .g22-cta__display {
	font-size: clamp(2.5rem, 4.6vw, 3.75rem);
}

/* --------------------------------------------------------------------------
   Client audit 2026-07-29 (task 5) -- CTA plate ("Два пробнi днi"): the
   slices row carried a 340-420px min-height floor that was much taller than
   the trial slice's title-only left cell needed, leaving ~200px of empty
   space under the heading even though the cell itself is vertically
   centered. Let the row size to its own content (the tour slice's text +
   button now decide the height) and reinforce the centering so the title
   uses whatever height remains.
   -------------------------------------------------------------------------- */
body.home .g22-henna--clean .g22-cta__slices {
	min-height: 0;
}

/* Ira 2026-07-29: do NOT vertically center the expanded hit — that recreates
   the empty oval between title and CTA. Pack from the top; let the row
   size to content. */
@media (min-width: 901px) {
	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-hit {
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
	}
}

/* --------------------------------------------------------------------------
   Client audit 2026-07-29 (task 6) -- Google reviews "fan" cards: a short
   review left ~60% of the card empty because .g22-google-reviews__fan-quote
   carries flex:1 (grows to fill the card) while the card itself had a hard
   278px min-height. Let the fan row size each card to its own content.
   -------------------------------------------------------------------------- */
body .g22-google-reviews--mosaic .g22-google-reviews__fan {
	align-items: flex-start;
}

body.home .g22-google-reviews--mosaic .g22-google-reviews__fan-card {
	min-height: 0;
}

/* --------------------------------------------------------------------------
   Ira 2026-07-29 — final CTA overrides (this file loads last on home).
   Kill empty oval under expanded title; keep rail label horizontal.
   -------------------------------------------------------------------------- */
body.home .g22-henna--clean .g22-cta__details {
	margin-top: 0;
}

body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-panel {
	justify-content: flex-start;
	gap: clamp(14px, 1.8vw, 22px);
}

body.home .g22-henna--clean .g22-cta__slices {
	align-items: start;
	min-height: 0;
}

/* Expanded name grid: the invisible vertical-rl rail label still sized the
   cell (~260px tall) → empty band under the visible title. Pull it out. */
body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--rail {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	writing-mode: horizontal-tb !important;
	transform: none !important;
	pointer-events: none;
}

body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-name {
	align-self: start;
	max-width: none;
	overflow: visible;
}

@media (min-width: 901px) {
	/* Expanded card = one column (title → copy → CTA). The old two-column
	   hit|body left a 200px+ empty band under the title in the left cell —
	   exactly Ira's red circle. */
	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto auto;
		min-height: 0;
		align-self: start;
		height: auto;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-hit {
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto !important;
		min-height: 0;
		padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) 8px;
		border-right: 0 !important;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-body {
		grid-column: 1 !important;
		grid-row: 2 !important;
		height: auto;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-name,
	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide {
		width: 100%;
		/* 16ch orphaned "та" under "Екскурсія" — keep "та знайомство" on one line. */
		max-width: 18ch;
	}

	body.home .g22-henna--clean .g22-cta__slice--tour:not(.is-collapsed) .g22-cta__slice-label--wide {
		max-width: 12em;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-label--wide {
		font-size: clamp(2rem, 3.2vw, 2.85rem);
		line-height: 1.05;
	}

	/* Collapsed sibling: readable horizontal title, not sideways glyphs. */
	body.home .g22-henna--clean .g22-cta__slices {
		grid-template-columns: minmax(0, 1fr) clamp(168px, 14vw, 200px);
	}

	body.home .g22-henna--clean .g22-cta__slices[data-active="tour"] {
		grid-template-columns: clamp(168px, 14vw, 200px) minmax(0, 1fr);
	}

	body.home .g22-henna--clean .g22-cta__slice.is-collapsed {
		align-self: stretch;
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-hit {
		justify-content: center;
		align-items: center;
		padding: 24px 16px 56px;
		height: 100%;
	}

	body.home .g22-henna--clean .g22-cta__slice.is-collapsed .g22-cta__slice-label--rail {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		white-space: normal;
		text-align: center;
		max-width: 11ch;
		line-height: 1.2;
		font-size: clamp(1rem, 1.15vw, 1.2rem);
	}
}

@media (max-width: 900px) {
	body.home .g22-henna--clean .g22-cta__slices,
	body.home .g22-henna--clean .g22-cta__slices[data-active="tour"] {
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) {
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slice:not(.is-collapsed) .g22-cta__slice-panel {
		justify-content: flex-start;
		gap: 14px;
		padding: 8px 20px 18px;
	}
}

/* --------------------------------------------------------------------------
   Dual equal cards (≥901): both visit options stay open. The accordion rail
   read as empty / hard to scan; equal cards restore hierarchy + two solid CTAs.
   JS adds .is-dual on the slices wrap (home-why-scroll.js).
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	body.home .g22-henna--clean .g22-cta__slices.is-dual,
	body.home .g22-henna--clean .g22-cta__slices.is-dual[data-active="tour"],
	body.home .g22-henna--clean .g22-cta__slices.is-dual[data-active="trial"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: clamp(12px, 1.4vw, 18px);
		align-items: stretch;
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto 1fr;
		align-self: stretch;
		height: auto;
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-hit {
		cursor: default;
		pointer-events: none;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-hit::after {
		display: none !important;
		content: none !important;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-label--rail {
		position: absolute !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		pointer-events: none;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-label--wide {
		display: block;
		width: 100%;
		max-width: 18ch;
		font-size: clamp(1.85rem, 2.8vw, 2.55rem);
		line-height: 1.08;
		text-wrap: pretty;
	}

	/* Tour title: "та знайомство" must stay one line (not та / знайомство). */
	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice--tour .g22-cta__slice-label--wide {
		max-width: 12em;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-body {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		min-height: 0;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-panel {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: clamp(16px, 1.8vw, 22px);
		height: 100%;
		padding: 0 clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px);
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__slice-text {
		max-width: 36ch;
		flex: 0 0 auto;
	}

	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__details {
		margin-top: auto;
	}

	/* Tour CTA: solid purple like trial — outline looked weak beside yellow sibling.
	   g22-buttons.css locks ink color with !important — match that weight. */
	body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__submit--ink {
		background: var(--g22-purple) !important;
		background-image: none !important;
		border-color: var(--g22-purple) !important;
		color: #fff !important;
		box-shadow: var(--g22-shadow-sm);
	}

	@media (hover: hover) and (pointer: fine) {
		body.home .g22-henna--clean .g22-cta__slices.is-dual .g22-cta__submit--ink:hover {
			background: var(--g22-purple-hot) !important;
			border-color: var(--g22-purple-hot) !important;
			color: #fff !important;
			box-shadow: var(--g22-shadow-md);
			transform: translateY(-1px);
		}
	}
}