/*
 * Про школу — page skin.
 *
 * Isolation contract: this file is the ONLY thing that changes on this
 * page. Markup stays exactly what page.php + the Gutenberg content in the
 * DB render (.g22-page-shell > .g22-page-content > sections/columns/cards/
 * form); nothing here depends on edits to header.php/footer.php/page.php/
 * functions.php/JS.
 *
 * Visual language target: front-page.php + assets/css/home-studio.css,
 * skin .g22-henna--clean (approved homepage system). That skin's root class
 * never reaches this template, so instead of relying on it we re-express
 * the same tokens/patterns (purple var(--g22-purple), yellow var(--g22-yellow),
 * Manrope 700 headings, IBM Plex Mono eyebrows, var(--g22-r-lg)-radius
 * var(--g22-paper) cards, pill CTAs, fade-up reveal with a visibility
 * guarantee) against the actual selectors
 *
 * Senior polish pass (ui-cleanup, 2026-07-28): every --ps-* local alias
 * below now resolves strictly to a canon --g22-* token from tokens.css
 * (color/radius/shadow/type) instead of hardcoded/off-brand hex — see
 * tokens.css's header for why it is the single source of truth. The
 * --ps-* names are kept (huge surface area of call sites throughout this
 * file) but they are now pure aliases, the same pattern tokens.css itself
 * uses for its own legacy aliases.
 * this template renders: .g22-page-kicker/.g22-page-title/.g22-page-summary,
 * .g22-page-section, .g22-surface-panel, .g22-content-grid, .g22-who-grid,
 * .g22-cards/.g22-card, .g22-cta, .g22-form. Cascade: loads after
 * inner-henna.css (its dependency) — every rule below is free to win
 * without !important.
 *
 * Structure audit (2026-07): "Хто ми" facts moved from a bespoke
 * .g22-checklist ledger into the shared .g22-cards/.g22-card box grid used
 * by "Наш підхід"; a community photo was added next to the "Хто ми" copy;
 * the one-off purple highlight on the "Тьюторський супровід 360°" card was
 * removed so all six cards read the same; "Команда" lost its
 * .g22-surface-panel wrapper (background alternation — see below); a
 * generation22/cta block was inserted mid-page. generation22/teachers was
 * NOT inserted — no real teacher photos/bios exist yet, see report.
 */

/* -------------------------------------------------- */
/* Local tokens — scoped to this page's shell only     */
/* -------------------------------------------------- */

.g22-page-shell {
	--g22-t-fast: 100ms;
	--g22-t-med: 200ms;
	/* --g22-ease-out is NOT redefined here (senior polish pass): it is a
	   canon primitive owned by tokens.css (:root). This page previously
	   shadowed it with a different curve — every var(--g22-ease-out, …)
	   call below now correctly resolves to the sitewide canon curve. */
	--g22-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	/* Color/radius/surface aliases — resolve strictly to tokens.css canon,
	   never a hardcoded/off-brand hex (senior polish pass, ui-cleanup). */
	--ps-purple: var(--g22-purple);
	--ps-purple-hover: var(--g22-purple-hot);
	--ps-yellow: var(--g22-yellow);
	--ps-card-bg: var(--g22-paper);
	--ps-radius: var(--g22-r-lg);
	--ps-ink: var(--g22-ink);
	/* WCAG AA: 0.7 alpha ~3.7:1 on the #e5e5e5 page bg — bumped to 0.8 (~5:1).
	   Deliberate one-off alpha (not a canon step) built from the exact
	   canon ink RGB triple — see tokens.css --g22-ink. */
	--ps-ink-70: rgba(26, 26, 26, 0.8);
	--ps-ink-55: rgba(26, 26, 26, 0.55);
	--ps-rise: 16px;

	/* Type scale: every step now aliases a canon --g22-fs-* step from
	   tokens.css (senior polish pass) instead of a bespoke one-off clamp,
	   so this page's type ladder is identical to the home page's. */
	--ps-text-xs: var(--g22-fs-label); /* mono kickers/eyebrows, micro captions */
	--ps-text-sm: var(--g22-fs-small); /* secondary/meta text, small links & buttons */
	--ps-text-base: var(--g22-fs-body); /* body paragraphs */
	--ps-text-md: var(--g22-fs-lede); /* lede/summary paragraphs, pull-quotes */
	--ps-text-lg: var(--g22-fs-h3); /* card/quote titles, small h3s */
	--ps-text-xl: var(--g22-fs-h2); /* mid-weight sub-headings */
	--ps-text-2xl: var(--g22-fs-h1); /* standard section H2 */
	--ps-text-3xl: var(--g22-fs-display); /* enlarged H2 variants, large display numerals */
	--ps-text-hero: var(--g22-fs-display); /* hero H1 */

	/* Elevation: the single ink-based --g22-shadow-sm/md/lg ladder from
	   tokens.css (no purple tint, no 4th "xl" tier — nothing else). */
	--ps-shadow-sm: var(--g22-shadow-sm); /* press/active states */
	--ps-shadow-md: var(--g22-shadow-md); /* button/link hover-lift, resting surface panels */
	--ps-shadow-lg: var(--g22-shadow-lg); /* hover-lifted cards, prominent resting panels */
	--ps-shadow-xl: var(--g22-shadow-lg); /* peak elevation collapses onto the same ceiling — canon has no 4th step */
}

/* -------------------------------------------------- */
/* Eyebrow labels — IBM Plex Mono, uppercase, yellow   */
/* dash (matches .g22-clean__eyebrow on the homepage)  */
/* -------------------------------------------------- */

.g22-page-kicker,
.g22-cards__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ps-ink-55);
}

.g22-page-kicker::before,
.g22-cards__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	flex: 0 0 18px;
	background: var(--ps-yellow);
	border-radius: 2px;
}

/* -------------------------------------------------- */
/* H1 / lede                                            */
/* -------------------------------------------------- */

/* Item 1 (redesign pass): inner-henna.css's shared .g22-page-title/
   .g22-page-summary rules centre both the box (margin: 0 auto) and,
   for the summary, the text itself — while .g22-page-kicker stays
   flush left. That put kicker, title and summary on three different
   axes. Re-anchor all three to the left edge and cap the summary's
   width so it reads as one column under the title, not a separate
   centred block. */
.g22-page-title {
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-hero);
	line-height: 1.04;
	max-width: 18ch;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

.g22-page-summary {
	max-width: 60ch;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	font-size: var(--ps-text-md);
	line-height: 1.65;
	color: var(--ps-ink-70);
}

/* Shared offset under sticky taste-nav → first yellow kicker (Ira 2026-07-29). */
.g22-page-content {
	padding-top: var(--g22-below-nav, clamp(72px, 9vw, 96px));
}

/* -------------------------------------------------- */
/* H2 — one shared clamp for every section title       */
/* (matches .g22-clean__h2 on the homepage exactly)    */
/* -------------------------------------------------- */

.g22-page-content h2,
.g22-page-content .g22-cards h2 {
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-2xl);
	line-height: 1.15;
	max-width: 20ch;
}

.g22-page-content .g22-cards__intro {
	font-size: var(--ps-text-base);
	line-height: 1.65;
	color: var(--ps-ink-70);
}

/* -------------------------------------------------- */
/* Surface panels ("Хто ми" / values / mission / team)  */
/* light-gray canvas, #f4f4f2 card, r20, soft shadow    */
/* -------------------------------------------------- */

.g22-surface-panel {
	background: var(--ps-card-bg);
	border: 0;
	border-radius: var(--ps-radius);
	box-shadow: var(--ps-shadow-md);
	padding: clamp(28px, 4vw, 44px);
}

.g22-page-content p {
	font-size: var(--ps-text-base);
}

.g22-page-content > section.g22-surface-panel:nth-of-type(2) p {
	max-width: 62ch;
	line-height: 1.7;
}

/* -------------------------------------------------- */
/* "Навчання без тиску" / "Результат…" — a two-statement */
/* manifesto spread, not two equal timid columns. Unequal */
/* widths, a hairline divider instead of two card boxes,  */
/* H2s enlarged past the shared clamp so they're the loud  */
/* moment of the page, set in purple to read as claims.    */
/* -------------------------------------------------- */

.g22-content-grid {
	gap: 0;
	margin-top: clamp(32px, 4vw, 56px);
	align-items: stretch;
}

.g22-content-grid .g22-surface-panel {
	height: 100%;
	box-sizing: border-box;
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0 0 0 clamp(20px, 3vw, 40px);
}

@media (min-width: 782px) {
	.g22-content-grid > .wp-block-column:first-child {
		flex: 1.2 1 0;
	}

	.g22-content-grid > .wp-block-column:nth-child(2) {
		flex: 0.8 1 0;
	}

	.g22-content-grid > .wp-block-column:first-child .g22-surface-panel {
		padding-left: 0;
	}

	.g22-content-grid > .wp-block-column:nth-child(2) .g22-surface-panel {
		border-left: 1px solid rgba(26, 26, 26, 0.14);
	}
}

.g22-content-grid h2 {
	font-size: var(--ps-text-3xl);
	line-height: 1.06;
	max-width: 13ch;
	/* Colour rule (redesign pass): purple is reserved for accents
	   (stat numbers, links) — section h2s stay the same dark ink as
	   every other heading on the page, not just this one pair. */
	color: var(--ps-ink);
	margin-bottom: clamp(18px, 2.4vw, 28px);
}

.g22-content-grid p {
	max-width: 52ch;
}

.g22-content-grid p:first-of-type {
	font-size: var(--ps-text-md);
	font-weight: 600;
	color: var(--ps-ink);
	line-height: 1.55;
}

/* -------------------------------------------------- */
/* "Хто ми" — text + community photo, two columns on     */
/* desktop, photo stacks under the text on mobile (core   */
/* wp:columns default breakpoint, 782px).                  */
/* -------------------------------------------------- */

.g22-who-grid {
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-top: clamp(24px, 3vw, 40px);
}

.g22-who-grid__photo {
	flex: 1 1 0;
}

.g22-who-grid__image {
	margin: 0;
}

.g22-who-grid__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--ps-radius);
}

@media (max-width: 640px) {
	.g22-who-grid__image img {
		max-height: 320px;
	}
}

/* -------------------------------------------------- */
/* "Команда" — item 4 (redesign pass): fixed the grammar   */
/* ("довіряють дітей" -> "довіряють діти") and gave the      */
/* section a real photo (a mentor with kids, the closest      */
/* honest match available — no staff portraits exist yet).     */
/* Same two-column pattern as "Хто ми" so it doesn't invent      */
/* a third layout language on the page.                          */
/* -------------------------------------------------- */

.g22-team-grid {
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.g22-team-grid__photo {
	flex: 1 1 0;
}

.g22-team-grid__image {
	margin: 0;
}

.g22-team-grid__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--ps-radius);
}

@media (max-width: 640px) {
	.g22-team-grid__image img {
		max-height: 320px;
	}
}

/* -------------------------------------------------- */
/* "Хто ми" facts — moved from an editorial ledger list  */
/* (.g22-checklist) into the shared .g22-cards/.g22-card  */
/* box grid (see below) so it reads as one card system    */
/* with "Наш підхід" instead of two different components. */
/* -------------------------------------------------- */

/* Content audit (redesign pass): facts are now real stat
   cards — a short number/word claim + one-line caption —
   instead of a card carrying only a long sentence in the
   title slot and an empty <p>. Overrides the generic
   .g22-card index-number/uppercase-label treatment (see
   generation22-card-style-inline-css) for this grid only,
   so every card lands the same height with no dead space. */
.g22-who-facts .g22-card {
	min-height: 0;
	padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px);
}

.g22-who-facts .g22-card::before {
	content: none;
}

.g22-who-facts .g22-card h3 {
	margin: 0 0 10px;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-size: var(--ps-text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-transform: none;
	color: var(--ps-purple);
}

.g22-who-facts .g22-card p {
	margin: 0;
	font-size: var(--ps-text-sm);
	line-height: 1.5;
	color: var(--ps-ink-70);
}

/* -------------------------------------------------- */
/* Cards grids on this page ("Хто ми" facts + "Наш      */
/* підхід") — both now render as the shared inner-henna  */
/* box grid (white card, r-md, hover lift) instead of a   */
/* one-off editorial ledger, so every .g22-cards instance  */
/* on the page reads as one consistent system. Audit fix:  */
/* the ledger's single deliberate accent row read as an     */
/* unintended inconsistency next to the rest of the flow.   */
/* -------------------------------------------------- */

.g22-page-content .g22-cards {
	padding-block: clamp(32px, 5vw, 56px);
}

.g22-page-content .g22-cards__head {
	max-width: 62ch;
	text-align: left;
	margin: 0 0 clamp(24px, 3.6vw, 40px);
}

/* "Хто ми" facts grid carries no head copy (bullet text only,
   copy verbatim from the old checklist) — collapse the empty
   eyebrow/h2/intro instead of leaving empty-tag whitespace. */
.g22-who-facts .g22-cards__head {
	display: none;
}

.g22-who-facts {
	padding-top: clamp(24px, 3.4vw, 40px);
}

/* -------------------------------------------------- */
/* "Що далі" + form — item 5 (redesign pass): the form was */
/* a single dark panel adrift in a grey void with nothing   */
/* to explain the process. Now a two-column row: left is a  */
/* short "what happens next" outline (3 numbered steps) +   */
/* phone/address, right is the existing form, unchanged.    */
/* -------------------------------------------------- */

.g22-excursion-grid {
	gap: clamp(32px, 5vw, 64px);
	margin-top: clamp(48px, 6vw, 80px);
	align-items: stretch;
}

.g22-excursion-grid__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(8px, 1.4vw, 16px);
}

.g22-excursion-grid__info h3 {
	margin: 0 0 clamp(18px, 2.4vw, 26px);
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: var(--ps-text-xl);
	color: var(--ps-ink);
}

.g22-excursion-steps {
	counter-reset: g22-ps-step;
	list-style: none;
	margin: 0 0 clamp(24px, 3.2vw, 36px);
	padding: 0;
	display: grid;
	gap: clamp(14px, 2vw, 20px);
}

.g22-excursion-steps li {
	position: relative;
	padding-left: 46px;
	font-size: var(--ps-text-base);
	line-height: 1.5;
	color: var(--ps-ink);
}

.g22-excursion-steps li::before {
	counter-increment: g22-ps-step;
	content: counter(g22-ps-step);
	position: absolute;
	left: 0;
	top: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--ps-purple);
	color: #fff;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	font-size: var(--ps-text-sm);
}

.g22-excursion-contact {
	margin: 0;
	padding-top: clamp(20px, 2.8vw, 28px);
	border-top: 1px solid rgba(26, 26, 26, 0.14);
	font-size: var(--ps-text-md);
	line-height: 1.6;
	color: var(--ps-ink-70);
}

.g22-excursion-contact a {
	display: inline-block;
	margin-bottom: 4px;
	font-weight: 700;
	font-size: var(--ps-text-lg);
	color: var(--ps-purple);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.g22-excursion-contact a:hover {
		text-decoration: underline;
	}
}

.g22-excursion-grid__form form.g22-form {
	max-width: min(560px, 100%);
	margin: 0;
	padding: clamp(28px, 4vw, 44px);
	background: var(--ps-purple);
	border-radius: 24px;
	box-shadow: var(--ps-shadow-lg);
}

@media (max-width: 782px) {
	.g22-excursion-grid__form form.g22-form {
		margin-top: clamp(32px, 6vw, 48px);
	}
}

.g22-excursion-grid__form form.g22-form label {
	color: rgba(255, 255, 255, 0.85);
}

.g22-excursion-grid__form form.g22-form input,
.g22-excursion-grid__form form.g22-form textarea {
	background: #fff;
	border-color: transparent;
}

.g22-excursion-grid__form form.g22-form input:focus-visible,
.g22-excursion-grid__form form.g22-form textarea:focus-visible {
	outline: 3px solid var(--ps-yellow);
	outline-offset: 2px;
	border-color: transparent;
}

.g22-excursion-grid__form form.g22-form button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* -------------------------------------------------- */
/* generation22/cta — mid-page conversion layout only. */
/* Button chrome comes from g22-buttons.css (one system). */
/* -------------------------------------------------- */

.g22-cta {
	margin-top: clamp(48px, 6vw, 80px);
}

.g22-cta__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

.g22-cta__panel {
	padding: clamp(24px, 3.2vw, 36px);
	border-radius: var(--ps-radius);
	background: var(--ps-card-bg);
}

.g22-cta__panel--trial {
	background: var(--ps-purple);
}

.g22-cta__title {
	margin: 0 0 10px;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	font-size: var(--ps-text-lg);
	letter-spacing: -0.02em;
	color: var(--ps-ink);
}

.g22-cta__panel--trial .g22-cta__title {
	color: #fff;
}

.g22-cta__text {
	margin: 0 0 20px;
	line-height: 1.6;
	color: var(--ps-ink-70);
}

.g22-cta__panel--trial .g22-cta__text {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
	.g22-cta__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------- */
/* Form motion only — colors come from g22-buttons.css */
/* -------------------------------------------------- */

.g22-page-content .g22-form:not(:first-child) button,
.g22-page-content a.g22-clean__btn {
	transition:
		background-color var(--g22-t-fast) var(--g22-ease-out),
		transform var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.g22-page-content .g22-form button:not(:disabled):hover {
		transform: translateY(-1px);
	}
}

.g22-page-content .g22-form button:not(:disabled):active {
	transform: translateY(0) scale(0.98);
}

.g22-page-content .g22-form button:focus-visible {
	outline: 3px solid var(--ps-purple);
	outline-offset: 2px;
}

/* -------------------------------------------------- */
/* Reveal fade-up + CSS visibility guarantee            */
/* (progressive enhancement via animation-timeline:     */
/* view(); reduces to a plain load-in fade wherever      */
/* scroll-driven animations aren't supported, and the    */
/* fallback keyframe below forces opacity:1 either way — */
/* same insurance pattern as g22-reveal-fallback-in in   */
/* home-studio.css, copied locally for this page only.) */
/* -------------------------------------------------- */

@keyframes g22-ps-fade-up {
	from {
		opacity: 0;
		transform: translateY(var(--ps-rise));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes g22-ps-reveal-fallback-in {
	to {
		opacity: 1;
	}
}

.g22-page-content > section.g22-page-section:not(:first-child),
.g22-page-content > .wp-block-columns,
.g22-page-content > .wp-block-generation22-cards,
.g22-page-content > .wp-block-generation22-cta,
.g22-excursion-grid__form form.g22-form {
	animation:
		g22-ps-fade-up 640ms var(--g22-ease-out) both,
		g22-ps-reveal-fallback-in 1ms linear 2s forwards;
	animation-timeline: scroll(), auto;
	animation-range: entry 0% cover 30%, normal;
}

.g22-content-grid > .wp-block-column:nth-child(2) {
	animation-delay: 90ms, 2s;
}

.g22-cards__grid .g22-card {
	animation: g22-ps-fade-up 560ms var(--g22-ease-out) both, g22-ps-reveal-fallback-in 1ms linear 2.2s forwards;
}

.g22-cards__grid .g22-card:nth-child(2) { animation-delay: 70ms, 2.2s; }
.g22-cards__grid .g22-card:nth-child(3) { animation-delay: 140ms, 2.2s; }
.g22-cards__grid .g22-card:nth-child(4) { animation-delay: 210ms, 2.2s; }
.g22-cards__grid .g22-card:nth-child(5) { animation-delay: 280ms, 2.2s; }
.g22-cards__grid .g22-card:nth-child(6) { animation-delay: 350ms, 2.2s; }

@media (prefers-reduced-motion: reduce) {
	.g22-page-content > section.g22-page-section:not(:first-child),
	.g22-page-content > .wp-block-columns,
	.g22-page-content > .wp-block-generation22-cards,
	.g22-page-content > .wp-block-generation22-cta,
	.g22-excursion-grid__form form.g22-form,
	.g22-cards__grid .g22-card {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.g22-page-content .g22-card:hover,
	.g22-card:hover,
	.g22-excursion-grid__form form.g22-form button:hover,
	.g22-page-content .g22-form button:not(:disabled):hover {
		transform: none;
	}
}

/* -------------------------------------------------- */
/* Henna-жест 1 — arc-underline під H2 "Хто ми"          */
/* Секція 2 серед <section> у .g22-page-content: hero(1),  */
/* "Хто ми"(2), "Команда"(3). Техніка — mask на ::after,   */
/* та сама, що arrow-curve/star-spark у vartist.css.       */
/* -------------------------------------------------- */

.g22-page-content > section.g22-surface-panel:nth-of-type(2) h2.wp-block-heading {
	position: relative;
	display: inline-block;
}

.g22-page-content > section.g22-surface-panel:nth-of-type(2) h2.wp-block-heading::after {
	content: "";
	position: absolute;
	left: -2%;
	bottom: -0.32em;
	width: 104%;
	height: 0.22em;
	background-color: var(--ps-ink);
	opacity: 0.16;
	-webkit-mask: url("../../images/brand/doodles/arc-underline.svg") left bottom / 100% 100% no-repeat;
	mask: url("../../images/brand/doodles/arc-underline.svg") left bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* -------------------------------------------------- */
/* Section background alternation (audit fix): seven      */
/* identical gray .g22-surface-panel bands read as one flat */
/* wall. "Наш підхід" (.g22-cards, no panel wrapper) and     */
/* now "Команда" sit on the plain canvas instead — panels    */
/* only where they add contrast (Хто ми, the two manifesto    */
/* columns), not on every section back-to-back.               */
/* -------------------------------------------------- */

.g22-page-content > section.g22-page-section:not(.g22-surface-panel):not(:first-child) {
	padding-block: clamp(40px, 6vw, 64px);
}

/* "Команда" — now carries a photo (see .g22-team-grid above), */
/* still no .g22-surface-panel wrapper — the two-column row     */
/* already gives it enough visual weight without another grey   */
/* card behind it.                                                */
.g22-page-content > section.g22-page-section:nth-of-type(3) h2 {
	font-size: var(--ps-text-3xl);
	max-width: 15ch;
	margin-bottom: clamp(20px, 2.8vw, 32px);
}

.g22-page-content > section.g22-page-section:nth-of-type(3) p {
	max-width: 44ch;
	font-size: var(--ps-text-md);
	line-height: 1.7;
	color: var(--ps-ink-70);
}

/* -------------------------------------------------- */
/* Mobile — 390px pass                                  */
/* -------------------------------------------------- */

@media (max-width: 640px) {
	.g22-page-title {
		max-width: none;
	}

	.g22-surface-panel {
		padding: 24px 20px;
	}

	.g22-excursion-grid__form form.g22-form {
		margin-top: 40px;
		border-radius: 20px;
		padding: 24px 20px;
	}

	.g22-content-grid > .wp-block-column {
		flex: none !important;
	}

	.g22-content-grid > .wp-block-column:nth-child(2) .g22-surface-panel {
		border-left: 0;
		padding-left: 0;
		margin-top: clamp(24px, 6vw, 40px);
	}

	.g22-cards__grid .g22-card:nth-child(2) {
		margin-inline: 0;
		padding-inline: clamp(16px, 4vw, 20px);
	}
}

/* -------------------------------------------------- */
/* The atom — one grown-up brand mark, intro section.   */
/* A real inline SVG (injected by henna-gestures.js —    */
/* see g22HennaPage === 'pro-shkolu' branch), not a       */
/* pseudo-element trick, so it actually reads as the      */
/* Generation 22 logo: two crossed rings, a solid          */
/* nucleus, three electrons. Containment: the anchor        */
/* section gets position:relative + overflow:clip, so       */
/* however the responsive atom size lands, the mark can      */
/* only ever be clipped, never add scrollWidth.               */
/* -------------------------------------------------- */

.g22-page-content > section.g22-page-section:first-child {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.g22-atom {
	position: absolute;
	top: clamp(-16px, -1vw, 12px);
	right: clamp(-8px, 1vw, 40px);
	width: clamp(220px, 24vw, 360px);
	height: clamp(220px, 24vw, 360px);
	pointer-events: none;
	z-index: -1;
}

.g22-atom__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.g22-atom__ring {
	transform-box: fill-box;
	transform-origin: center;
}

.g22-atom__ring--1 {
	transform: rotate(34deg);
}

.g22-atom__ring--2 {
	transform: rotate(-34deg);
}

/* Scroll reaction — the whole point. Rings turn opposite
   ways as the page scrolls, bounded (~130°), slow and
   hypnotic rather than spinny. Gated behind @supports so
   browsers without scroll-driven animations simply keep the
   static resting angles above (no fallback spin risk), and
   behind prefers-reduced-motion so reduced-motion users only
   ever see the still atom. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll(root)) {
		.g22-atom__ring--1 {
			animation: g22-atom-ring1 1ms linear both;
			animation-timeline: scroll(root);
			animation-range: 0% 100%;
		}

		.g22-atom__ring--2 {
			animation: g22-atom-ring2 1ms linear both;
			animation-timeline: scroll(root);
			animation-range: 0% 100%;
		}
	}
}

@keyframes g22-atom-ring1 {
	from {
		transform: rotate(34deg);
	}
	to {
		transform: rotate(164deg);
	}
}

@keyframes g22-atom-ring2 {
	from {
		transform: rotate(-34deg);
	}
	to {
		transform: rotate(-164deg);
	}
}

/* Below this the intro stacks tight around the H1 — the
   atom would crowd the type, so it steps aside entirely. */
@media (max-width: 620px) {
	.g22-atom {
		display: none;
	}
}

/* -------------------------------------------------- */
/* Subtle page life on scroll — restrained, view()-driven */
/* reveals for the facts ledger, the manifesto/approach     */
/* rows, the manifesto H2s and the eyebrow dashes. Same      */
/* insurance idiom as the section-level reveal above          */
/* (g22-ps-fade-up + a 1ms forced-visible animation on the     */
/* document timeline as a fallback), so nothing can get stuck  */
/* invisible where scroll-driven animation isn't supported.     */
/* -------------------------------------------------- */

@keyframes g22-ps-draw-x {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes g22-ps-draw-fallback-in {
	to {
		transform: scaleX(1);
	}
}

/* Manifesto/approach + facts cards — arrive on scroll (view()) */
/* rather than on load, index/heading leading the body text.    */
.g22-cards__grid .g22-card {
	animation-timeline: view(), auto;
	animation-range: entry 0% cover 30%, normal;
}

.g22-page-content .g22-card h3,
.g22-card h3 {
	animation: g22-ps-fade-up 480ms var(--g22-ease-out) both, g22-ps-reveal-fallback-in 1ms linear 2.32s forwards;
	animation-timeline: view(), auto;
	animation-range: entry 0% cover 28%, normal;
	animation-delay: 40ms, 2.32s;
}

.g22-page-content .g22-card p,
.g22-card p {
	animation: g22-ps-fade-up 480ms var(--g22-ease-out) both, g22-ps-reveal-fallback-in 1ms linear 2.36s forwards;
	animation-timeline: view(), auto;
	animation-range: entry 0% cover 28%, normal;
	animation-delay: 110ms, 2.36s;
}

/* Manifesto H2s — one soft rise/fade on enter, no curtain. */
.g22-content-grid h2 {
	animation: g22-ps-fade-up 620ms var(--g22-ease-out) both, g22-ps-reveal-fallback-in 1ms linear 2.4s forwards;
	animation-timeline: view(), auto;
	animation-range: entry 0% cover 30%, normal;
}

/* Eyebrow dashes — draw in left→right on first view. */
.g22-page-kicker::before,
.g22-cards__eyebrow::before {
	transform-origin: left center;
	transform: scaleX(0);
	animation: g22-ps-draw-x 420ms var(--g22-ease-out) both, g22-ps-draw-fallback-in 1ms linear 2.1s forwards;
	animation-timeline: view(), auto;
	animation-range: entry 0% cover 20%, normal;
}

@media (prefers-reduced-motion: reduce) {
	.g22-cards__grid .g22-card,
	.g22-page-content .g22-card h3,
	.g22-card h3,
	.g22-page-content .g22-card p,
	.g22-card p,
	.g22-content-grid h2,
	.g22-page-kicker::before,
	.g22-cards__eyebrow::before {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ============ RESTYLE 2026-07: editorial sections (agents A/B/C) ============ */
/*
 * Про школу — секции «Hero» (.g22-about-hero), «Хто ми» (.g22-about-who)
 * и полоса фактів (.g22-about-facts).
 *
 * Isolation contract: written as a partial meant to be concatenated after
 * pro-shkolu.css (loads on top of it, same as pro-shkolu-c.css). Selectors
 * below are scoped strictly under .g22-about-hero / .g22-about-who /
 * .g22-about-facts — this file cannot leak onto any other section of the
 * page and does not redeclare .g22-page-section / .g22-surface-panel /
 * .g22-who-grid / .g22-who-facts / .g22-cards / .g22-card (this markup no
 * longer uses those classes at all, see report).
 *
 * Tokens: reuses --ps-* custom properties declared on .g22-page-shell by
 * pro-shkolu.css (which itself falls back to the sitewide --g22h-* tokens
 * from home-henna.css :root). Local --a-* aliases below add the same
 * fallback chain again, scoped to this file's three root selectors, so the
 * partial still renders correctly if ever loaded standalone.
 *
 * Patterns borrowed from the homepage system (assets/css/home-studio.css,
 * front-page.php):
 *  - kicker: IBM Plex Mono, mono-caps, dot-separated ("Ліцензована школа ·
 *    1–11 клас · Київ" — .g22-hero__eyebrow) -> .g22-about-hero__kicker /
 *    .g22-about-who__kicker.
 *  - two-colour display heading, one accented clause (.g22-hero__line) ->
 *    .g22-about-hero__accent.
 *  - editorial numbered list with hairline dividers, ghost purple numbers,
 *    yellow left rail on the active item (.g22-about__pillar /
 *    .g22-about__pillar-num / .g22-about__pillar-rail, .g22-why__num) ->
 *    reimplemented statically (no JS/hover state machine, this page has no
 *    scroll-linked reveal script) as .g22-about-facts__item /
 *    .g22-about-facts__num / .g22-about-facts__item--active.
 *  - hairline rule (.g22-about__rule) -> .g22-about-hero__inner bottom
 *    border.
 *
 * The atom brand-mark SVG that henna-gestures.js injects into
 * `.g22-page-content > section.g22-page-section:first-child` (see
 * pro-shkolu.css "The atom" comment) targets that exact selector chain.
 * The hero section below intentionally does NOT carry the g22-page-section
 * class, so the JS selector no longer matches and the atom is not
 * injected — the illustration is removed as a side effect of the class
 * rename, without touching henna-gestures.js or pro-shkolu.css.
 */

.g22-about-hero,
.g22-about-who,
.g22-about-facts {
	--a-purple: var(--ps-purple, var(--g22h-purple, #3f2780));
	--a-yellow: var(--ps-yellow, var(--g22h-yellow, #ffd141));
	--a-ink: var(--ps-ink, var(--g22h-ink, #1a1a1a));
	--a-ink-70: var(--ps-ink-70, var(--g22h-ink-70, rgba(26, 26, 26, 0.7)));
	--a-ink-55: var(--ps-ink-55, var(--g22h-ink-55, rgba(26, 26, 26, 0.55)));
	/* WCAG AA fix: --g22h-ink-45 (rgba(26,26,26,.45), defined site-wide at
	   :root in home-henna.css) measures ~2.75:1 on this page's light
	   background — fails 4.5:1. Overriding with a literal value here (not
	   the shared --g22h-ink-45 token, which other pages/components reuse)
	   keeps the bump scoped to .g22-about-hero/-who/-facts on pro-shkolu
	   only. ~5.4:1 verified against the ~rgb(229,229,229) surface. */
	--a-ink-45: rgba(26, 26, 26, 0.68);
	--a-ink-10: var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
	--a-mono: "IBM Plex Mono", ui-monospace, monospace;
	--a-sans: var(--g22h-font, "Manrope", -apple-system, BlinkMacSystemFont, sans-serif);
	--a-shell: 1200px;
}

/* -------------------------------------------------- */
/* Hero — purely typographic, no illustration           */
/* -------------------------------------------------- */

.g22-about-hero {
	padding: clamp(48px, 7vw, 88px) 24px 0;
}

.g22-about-hero__inner {
	max-width: var(--a-shell);
	margin: 0 auto;
	padding-bottom: clamp(40px, 5vw, 64px);
	border-bottom: 1px solid var(--a-ink-10);
}

.g22-about-hero__kicker {
	margin: 0 0 20px;
	font-family: var(--a-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--a-ink-55);
}

.g22-about-hero__title {
	margin: 0;
	max-width: 19ch;
	font-family: var(--a-sans);
	font-weight: 800;
	font-size: var(--ps-text-hero);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--a-ink);
	text-wrap: balance;
}

.g22-about-hero__accent {
	color: var(--a-purple);
}

.g22-about-hero__lead {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
	margin-top: clamp(28px, 4vw, 48px);
}

/* Bugfix (2026-07 restyle QA): .g22-about-hero__lead is itself a
   wp-block-group, and WP's group-with-layout-support markup always
   wraps its actual content in an extra .wp-block-group__inner-container
   div. That inner-container — not the <p> — is the real (and only)
   grid item here, so a grid-column set on .g22-about-hero__summary was
   silently doing nothing: the item auto-placed into track 1 (~1/12 of
   the row) and the paragraph text wrapped to that width. Target the
   actual grid item instead. */
.g22-about-hero__lead > .wp-block-group__inner-container {
	grid-column: 7 / 13;
}

.g22-about-hero__summary {
	margin: 0;
	max-width: 60ch;
	font-size: var(--ps-text-md);
	line-height: 1.65;
	color: var(--a-ink-70);
}

@media (max-width: 768px) {
	.g22-about-hero {
		padding-top: clamp(36px, 8vw, 56px);
	}

	.g22-about-hero__title {
		max-width: none;
		font-size: clamp(2rem, 8vw, 2.6rem);
	}

	.g22-about-hero__lead {
		grid-template-columns: 1fr;
	}

	.g22-about-hero__lead > .wp-block-group__inner-container {
		grid-column: auto;
	}

	.g22-about-hero__summary {
		max-width: 60ch;
	}
}

/* -------------------------------------------------- */
/* «Хто ми» — on page background, no surface panel      */
/* -------------------------------------------------- */

.g22-about-who {
	padding: clamp(64px, 8vw, 112px) 24px;
}

.g22-about-who__grid.wp-block-columns {
	max-width: var(--a-shell);
	margin: 0 auto;
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

.g22-about-who__text {
	flex: 1 1 0;
	max-width: none;
}

.g22-about-who__kicker {
	margin: 0 0 24px;
	font-family: var(--a-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--a-ink-55);
}

.g22-about-who__text p {
	max-width: 46ch;
	margin: 0 0 18px;
	font-size: var(--ps-text-base);
	line-height: 1.7;
	color: var(--a-ink-70);
}

.g22-about-who__text p:last-child {
	margin-bottom: 0;
}

.g22-about-who__media {
	flex: 1 1 0;
	margin-top: -48px;
}

.g22-about-who__image {
	margin: 0;
}

.g22-about-who__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
}

.g22-about-who__caption {
	position: relative;
	margin: 16px 0 0;
	padding-left: 22px;
	font-family: var(--a-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a-ink-45);
}

.g22-about-who__caption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 2px;
	background: var(--a-yellow);
}

@media (max-width: 768px) {
	.g22-about-who__media {
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	.g22-about-who__text p {
		max-width: none;
	}
}

/* -------------------------------------------------- */
/* Полоса фактів — editorial band, no cards             */
/* -------------------------------------------------- */

.g22-about-facts {
	padding: clamp(48px, 6vw, 80px) 24px clamp(64px, 8vw, 112px);
}

.g22-about-facts__grid {
	max-width: var(--a-shell);
	margin: 0 auto;
}

/* Bugfix (2026-07 restyle QA): same wp-block-group__inner-container
   wrapping issue as .g22-about-hero__lead above — .g22-about-facts__grid
   has exactly one direct child (the inner-container div holding all six
   .g22-about-facts__item boxes), so `display: grid` on the outer class
   never produced a 3x2 grid; it just made a single-column box hold a
   normal-flow stack. Move the grid declaration onto the actual
   container of the six items. */
.g22-about-facts__grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
}

.g22-about-facts__item {
	position: relative;
	padding: 28px 28px 28px 24px;
	border-top: 1px solid var(--a-ink-10);
}

.g22-about-facts__item--active::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: 0;
	width: 3px;
	background: var(--a-yellow);
}

.g22-about-facts__num {
	margin: 0 0 20px;
	font-family: var(--a-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--a-ink-45);
}

.g22-about-facts__value {
	margin: 0 0 10px;
	font-family: var(--a-sans);
	font-weight: 800;
	font-size: var(--ps-text-xl);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--a-ink);
}

.g22-about-facts__value--accent {
	font-size: var(--ps-text-2xl);
	line-height: 1;
	color: var(--a-purple);
}

.g22-about-facts__desc {
	margin: 0;
	max-width: 26ch;
	font-size: var(--ps-text-sm);
	line-height: 1.5;
	color: var(--a-ink-55);
}

@media (max-width: 768px) {
	.g22-about-facts__grid > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
	}
}

@media (max-width: 480px) {
	.g22-about-facts__grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.g22-about-facts__item {
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-about-hero__inner,
	.g22-about-facts__item {
		transition: none;
	}
}

/*
 * Про школу — Agent B skin.
 *
 * Scope: exactly three sections handed to this agent —
 *   .g22-about-philosophy   ("Навчання без тиску" / "Результат" pair)
 *   .g22-about-cta          (scoping wrapper around the untouched
 *                            generation22/cta block markup)
 *   .g22-about-approach     ("Наш підхід" sticky brief + numbered list)
 *
 * Nothing here touches a bare .g22-cta/.g22-cards/.g22-card selector —
 * every CTA rule is scoped through the .g22-about-cta ancestor so this
 * file is safe to concatenate with any other page-B css. This is meant
 * to be loaded after inner-henna.css (its only hard dependency: the
 * --g22h-* tokens declared on :root there / in home-henna.css, and the
 * already-shared .g22-page-kicker / .g22-page-section rules which are
 * reused as-is, not redefined).
 *
 * Source patterns reproduced from the homepage (front-page.php +
 * assets/css/home-studio.css), since that stylesheet's .g22-henna--clean
 * scoped tokens/classes never reach this template:
 *   - .g22-about__pillars  → editorial number/hairline pair (philosophy)
 *   - .g22-why__*          → sticky brief + ghost-number numbered list
 *                             (Наш підхід)
 *   - .g22-cta__slice(-name/-label--rail) → wide colour panel + narrow
 *     panel with a vertical rotated title (CTA)
 */

/* -------------------------------------------------- */
/* Local tokens                                        */
/* -------------------------------------------------- */

.g22-about-philosophy,
.g22-about-cta,
.g22-about-approach {
	--g22ab-purple: var(--g22h-purple, #3f2780);
	--g22ab-purple-ghost: rgba(63, 39, 128, 0.16);
	--g22ab-yellow: var(--g22h-yellow, #ffd141);
	--g22ab-ink: var(--g22h-ink, #1a1a1a);
	--g22ab-ink-70: var(--g22h-ink-70, rgba(26, 26, 26, 0.7));
	--g22ab-ink-55: var(--g22h-ink-55, rgba(26, 26, 26, 0.55));
	--g22ab-line: var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
	--g22ab-font: var(--g22h-font, "Manrope", sans-serif);
	--g22ab-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* -------------------------------------------------- */
/* 1. «Навчання без тиску» / «Результат» — editorial   */
/* pair, central hairline, no panels/shadows.           */
/* -------------------------------------------------- */

.g22-about-philosophy {
	margin-top: clamp(8px, 1vw, 16px);
}

.g22-about-philosophy .g22-page-kicker {
	margin-bottom: clamp(20px, 2.6vw, 32px);
}

.g22-about-philosophy__row {
	gap: 0;
	align-items: stretch;
	border-top: 1px solid var(--g22ab-line);
}

.g22-about-philosophy__col {
	padding-top: clamp(28px, 3.6vw, 44px);
}

.g22-about-philosophy__num {
	margin: 0 0 16px;
	font-family: var(--g22ab-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--g22ab-ink-55);
}

.g22-about-philosophy__title {
	margin: 0 0 18px;
	max-width: 15ch;
	font-family: var(--g22ab-font);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-xl);
	line-height: 1.12;
	color: var(--g22ab-ink);
}

.g22-about-philosophy__col p {
	margin: 0 0 14px;
	max-width: 42ch;
	line-height: 1.65;
	color: var(--g22ab-ink-70);
}

.g22-about-philosophy__col p:last-child {
	margin-bottom: 0;
}

.g22-about-philosophy__lead {
	max-width: 40ch;
	font-size: var(--ps-text-md);
	font-weight: 600;
	line-height: 1.55;
	color: var(--g22ab-ink) !important;
}

@media (min-width: 783px) {
	.g22-about-philosophy__row > .wp-block-column:first-child {
		flex: 1.1 1 0;
	}

	.g22-about-philosophy__row > .wp-block-column:nth-child(2) {
		flex: 0.9 1 0;
	}

	.g22-about-philosophy__row > .wp-block-column:first-child .g22-about-philosophy__col {
		padding-right: clamp(28px, 4vw, 56px);
	}

	.g22-about-philosophy__row > .wp-block-column:nth-child(2) .g22-about-philosophy__col {
		padding-left: clamp(28px, 4vw, 56px);
		border-left: 1px solid var(--g22ab-line);
	}
}

@media (max-width: 782px) {
	.g22-about-philosophy__row > .wp-block-column:nth-child(2) .g22-about-philosophy__col {
		margin-top: clamp(24px, 6vw, 36px);
		padding-top: clamp(24px, 6vw, 36px);
		border-top: 1px solid var(--g22ab-line);
	}
}

/* -------------------------------------------------- */
/* 2. CTA — wide purple "Два пробні дні" panel +        */
/* narrow white "Екскурсія" panel with a vertical        */
/* rotated title, reproducing the homepage's              */
/* .g22-cta__slice composition. Block markup (save.js)     */
/* is fixed — only the .g22-about-cta ancestor scope and    */
/* the panel/grid CSS below are new.                         */
/* -------------------------------------------------- */

.g22-about-cta {
	padding-block: clamp(40px, 6vw, 72px);
}

.g22-about-cta .g22-cta {
	margin-top: 0;
}

.g22-about-cta .g22-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.85fr);
	gap: clamp(16px, 2vw, 24px);
	align-items: stretch;
}

.g22-about-cta .g22-cta__panel {
	position: relative;
	border-radius: 20px;
	margin: 0;
}

/* Trial — wide, filled, normal reading order. */
.g22-about-cta .g22-cta__panel--trial {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: clamp(32px, 4vw, 52px);
	background: var(--g22ab-purple);
	color: #fff;
}

.g22-about-cta .g22-cta__panel--trial .g22-cta__title {
	margin: 0;
	max-width: 14ch;
	font-family: var(--g22ab-font);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-xl);
	line-height: 1.1;
	color: #fff;
}

.g22-about-cta .g22-cta__panel--trial .g22-cta__text {
	margin: 0;
	max-width: 38ch;
	font-size: var(--ps-text-base);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* Tour — narrow, white, title rotated as a left-hand rail
   (grid so the always-fixed markup order — title, text, btn —
   can still read as a rail + body split, no DOM change needed). */
.g22-about-cta .g22-cta__panel--tour {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	row-gap: 14px;
	align-items: start;
	padding: clamp(24px, 3vw, 32px);
	background: #fff;
	border: 1px solid var(--g22ab-line);
}

.g22-about-cta .g22-cta__panel--tour .g22-cta__title {
	grid-column: 1;
	grid-row: 1;
	display: block;
	align-self: start;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal;
	font-family: var(--g22ab-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: var(--ps-text-lg);
	color: var(--g22ab-ink);
}

.g22-about-cta .g22-cta__panel--tour .g22-cta__text {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-size: var(--ps-text-sm);
	line-height: 1.6;
	color: var(--g22ab-ink-70);
}

.g22-about-cta .g22-cta__panel--tour .g22-cta__btn {
	grid-column: 1;
	grid-row: 3;
	justify-self: start;
	margin-top: 16px;
}

/* Button look/feel: g22-buttons.css only. Keep layout hooks here. */
.g22-about-cta .g22-cta__panel--trial .g22-cta__btn {
	align-self: flex-start;
	margin-top: 4px;
}

@media (max-width: 760px) {
	.g22-about-cta .g22-cta__grid {
		grid-template-columns: 1fr;
	}

	.g22-about-cta .g22-cta__panel--tour {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.g22-about-cta .g22-cta__panel--tour .g22-cta__title {
		grid-column: 1;
		grid-row: 1;
		writing-mode: horizontal-tb;
		transform: none;
		justify-content: flex-start;
		width: 100%;
		padding-right: 0;
		padding-bottom: 14px;
		border-right: 0;
		border-bottom: 1px solid var(--g22ab-line);
	}

	.g22-about-cta .g22-cta__panel--tour .g22-cta__text {
		grid-column: 1;
		grid-row: 2;
	}

	.g22-about-cta .g22-cta__panel--tour .g22-cta__btn {
		grid-column: 1;
		grid-row: 3;
	}
}

/* -------------------------------------------------- */
/* 3. «Наш підхід» — sticky brief + numbered 01–06 list, */
/* no cards/shadows. Reproduces the homepage's g22-why    */
/* split pattern with plain core blocks (the generation22/ */
/* cards block's fixed head+grid markup can't carry this). */
/* -------------------------------------------------- */

.g22-about-approach {
	gap: clamp(40px, 6vw, 80px);
	margin-top: clamp(48px, 6vw, 80px);
	align-items: start;
}

.g22-about-approach__head {
	max-width: 26rem;
}

.g22-about-approach__head .g22-page-kicker {
	margin-bottom: 18px;
}

.g22-about-approach__title {
	margin: 0 0 16px;
	max-width: 13ch;
	font-family: var(--g22ab-font);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-2xl);
	line-height: 1.1;
	color: var(--g22ab-ink);
}

.g22-about-approach__intro {
	margin: 0;
	max-width: 32ch;
	font-size: var(--ps-text-base);
	line-height: 1.6;
	color: var(--g22ab-ink-70);
}

.g22-about-approach__list {
	display: flex;
	flex-direction: column;
}

.g22-about-approach__item {
	padding: clamp(24px, 3vw, 30px) 0;
	border-bottom: 1px solid var(--g22ab-line);
}

.g22-about-approach__item:last-child {
	border-bottom: 0;
}

/* Bugfix (2026-07 restyle QA): .g22-about-approach__item is a
   wp-block-group, so — same root cause as the hero lead and facts grid
   above — its number/title/text paragraphs are grandchildren, nested one
   level down inside .wp-block-group__inner-container, not direct
   children of the grid. `display: grid` + the two-column template on
   .g22-about-approach__item itself only ever had one auto-placed item
   (the inner-container), which collapsed to the first (~72px) track;
   every item's title/body text then wrapped letter-by-letter inside
   that sliver, inflating each item to 650–1000px tall and the whole
   six-item list to ~5000px (the big blank gap before "Команда"). Move
   the grid onto the actual container of num/title/text. */
.g22-about-approach__item > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: clamp(2.6rem, 6vw, 4.5rem) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: clamp(16px, 2.4vw, 28px);
	align-items: start;
}

.g22-about-approach__num {
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0;
	padding-top: 0.1em;
	font-family: var(--g22ab-mono);
	font-weight: 500;
	font-size: var(--ps-text-3xl);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--g22ab-purple-ghost);
	user-select: none;
}

.g22-about-approach__item-title {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	margin: 0.15em 0 8px;
	padding-left: 18px;
	font-family: var(--g22ab-font);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: var(--ps-text-lg);
	line-height: 1.25;
	color: var(--g22ab-ink);
}

.g22-about-approach__item-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--g22ab-yellow);
}

.g22-about-approach__item-text {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	max-width: 46ch;
	font-size: var(--ps-text-sm);
	line-height: 1.65;
	color: var(--g22ab-ink-70);
}

@media (min-width: 769px) {
	.g22-about-approach > .wp-block-column:first-child {
		flex: 0.86 1 0;
	}

	.g22-about-approach > .wp-block-column:nth-child(2) {
		flex: 1.14 1 0;
	}

	.g22-about-approach__head {
		position: sticky;
		top: 120px;
	}
}

@media (max-width: 768px) {
	.g22-about-approach__head {
		position: static;
		max-width: none;
	}

	.g22-about-approach__item > .wp-block-group__inner-container {
		grid-template-columns: clamp(2rem, 8vw, 2.6rem) minmax(0, 1fr);
	}

	.g22-about-approach__num {
		font-size: clamp(1.9rem, 8vw, 2.4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-about-philosophy *,
	.g22-about-cta *,
	.g22-about-approach * {
		animation: none !important;
	}
}

/*
 * Про школу — секции «Команда, якій довіряють діти» (.g22-about-team)
 * и «Що далі» + форма запису (.g22-about-signup).
 *
 * Isolation contract: written as a partial meant to be concatenated
 * after pro-shkolu.css (loads on top of it, same as that file loads on
 * top of inner-henna.css). Selectors below are scoped strictly under
 * .g22-about-team / .g22-about-signup so this file cannot leak onto any
 * other section of the page. Where it overrides an existing
 * .g22-team-grid* / .g22-excursion-* rule from pro-shkolu.css, the extra
 * ancestor class is what wins the cascade — no !important needed.
 *
 * Tokens: reuses --ps-* custom properties declared on .g22-page-shell by
 * pro-shkolu.css, with the same hex fallbacks that file uses, in case
 * this partial is ever loaded standalone.
 *
 * Patterns borrowed from the homepage system (assets/css/home-studio.css):
 *  - kicker: mono-caps + short yellow dash (.g22-clean__eyebrow /
 *    .g22-page-kicker family) -> reimplemented here as .g22-about-kicker.
 *  - underlined text link (.g22-clean__text-link) -> .g22-about-team__link.
 *  - editorial ghost step numbers with hairline dividers
 *    (.g22-why__step / .g22-why__num) -> reimplemented on
 *    .g22-about-signup .g22-excursion-steps, replacing the circle-badge
 *    numbering pro-shkolu.css puts on that list by default.
 *  - subtle full-bleed gradient canvas (.g22-cta background) ->
 *    .g22-about-signup section background.
 */

/* -------------------------------------------------- */
/* Shared kicker — mono-caps label + short yellow dash */
/* Used by both sections (КОМАНДА / ЗАПИС).            */
/* -------------------------------------------------- */

.g22-about-team .g22-about-kicker,
.g22-about-signup .g22-about-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ps-ink-55, rgba(26, 26, 26, 0.55));
}

.g22-about-team .g22-about-kicker::before,
.g22-about-signup .g22-about-kicker::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	flex: 0 0 18px;
	background: var(--ps-yellow, #ffd141);
	border-radius: 2px;
}

/* -------------------------------------------------- */
/* «Команда» — left column                              */
/* -------------------------------------------------- */

.g22-about-team .g22-team-grid {
	align-items: flex-start;
}

.g22-about-team__link,
.g22-about-team__reviews-link {
	margin: 12px 0 0;
}

/* Stack like homepage CTA group under about/learn. */
.g22-about-team__copy .g22-about-team__link,
.g22-about-team__copy .g22-about-team__reviews-link {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.g22-about-team__copy .g22-about-team__link {
	margin-top: clamp(20px, 2.5vw, 28px);
}

.g22-about-team__copy .g22-about-team__reviews-link {
	margin-top: 12px;
}

/* Button chrome: g22-buttons.css SECONDARY (same as .g22-learn__btn). */

/* -------------------------------------------------- */
/* «Команда» — photo column: diagonal rhythm with       */
/* "Хто ми" (that photo sits shifted up; this one sits   */
/* shifted down against its own heading) + tighter        */
/* corner radius than the rest of the page's r20 cards.    */
/* -------------------------------------------------- */

.g22-about-team .g22-team-grid__image img {
	border-radius: 8px;
}

@media (min-width: 782px) {
	.g22-about-team .g22-team-grid__photo {
		margin-top: clamp(40px, 5vw, 64px);
	}
}

.g22-about-team__photo-caption {
	margin: 16px 0 0;
	padding-top: 12px;
	position: relative;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ps-ink-55, rgba(26, 26, 26, 0.55));
}

.g22-about-team__photo-caption::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 3px;
	background: var(--ps-yellow, #ffd141);
	border-radius: 2px;
}

/* -------------------------------------------------- */
/* «Що далі» + форма — full-width editorial canvas       */
/* (breaks out of the constrained .g22-page-content     */
/* column; the yellow/purple wash mirrors the homepage    */
/* CTA background, just far quieter).                     */
/* -------------------------------------------------- */

.g22-about-signup {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	padding-block: clamp(56px, 7vw, 96px);
	margin-top: clamp(48px, 6vw, 80px);
	background:
		radial-gradient(60% 65% at 88% 15%, rgba(63, 39, 128, 0.07), transparent 62%),
		linear-gradient(180deg, rgba(255, 209, 65, 0.05), rgba(63, 39, 128, 0.05));
	overflow: clip;
	/* Wrapping the excursion columns in this section (needed for the
	   full-bleed background) takes them out of the
	   ".g22-page-content > .wp-block-columns" direct-child selector in
	   pro-shkolu.css that drives every other section's scroll-linked
	   fade-up — reapply the same keyframes here so this section still
	   reveals in step with the rest of the page. */
	animation:
		g22-ps-fade-up 640ms var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both,
		g22-ps-reveal-fallback-in 1ms linear 2s forwards;
	animation-timeline: scroll(), auto;
	animation-range: entry 0% cover 30%, normal;
}

@media (prefers-reduced-motion: reduce) {
	.g22-about-signup {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.g22-about-signup__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

@media (max-width: 768px) {
	.g22-about-signup__inner {
		padding-inline: 20px;
	}
}

.g22-about-signup .g22-excursion-grid {
	margin-top: 0;
}

/* h3 "Що далі" — promoted to a display-weight heading,   */
/* overrides pro-shkolu.css's smaller .g22-excursion-grid__info h3. */
/* (selector kept two classes deep on purpose: it must out-  */
/* specificity ".g22-excursion-grid__info h3" from pro-shkolu.css.) */
.g22-about-signup .g22-about-signup__title {
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-2xl);
	line-height: 1.08;
	color: var(--ps-ink, #1a1a1a);
}

/* -------------------------------------------------- */
/* Steps — editorial ghost numbers, not circle badges.   */
/* Overrides the .g22-excursion-steps li::before badge    */
/* from pro-shkolu.css: no background, no absolute-circle, */
/* a light-purple mono "01/02/03" + hairline between rows. */
/* -------------------------------------------------- */

.g22-about-signup .g22-excursion-steps {
	gap: 0;
	margin: 0 0 clamp(28px, 3.6vw, 40px);
}

.g22-about-signup .g22-excursion-steps li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: baseline;
	gap: clamp(12px, 2vw, 20px);
	padding: 18px 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
	font-size: var(--ps-text-base);
	line-height: 1.5;
	color: var(--ps-ink, #1a1a1a);
}

.g22-about-signup .g22-excursion-steps li:first-child {
	padding-top: 0;
}

.g22-about-signup .g22-excursion-steps li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.g22-about-signup .g22-excursion-steps li::before {
	position: static;
	top: auto;
	left: auto;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	content: counter(g22-ps-step, decimal-leading-zero);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 500;
	font-size: var(--ps-text-lg);
	letter-spacing: -0.03em;
	line-height: 1;
	color: rgba(63, 39, 128, 0.22);
}

/* -------------------------------------------------- */
/* Form card — soften the large 24px radius to stay      */
/* editorial (contacts hairline above phone/address        */
/* already comes from pro-shkolu.css's .g22-excursion-contact, */
/* untouched here).                                          */
/* -------------------------------------------------- */

.g22-about-signup .g22-excursion-grid__form form.g22-form {
	border-radius: 14px;
}

@media (max-width: 640px) {
	.g22-about-signup {
		padding-block: clamp(40px, 10vw, 56px);
	}
}

/* orchestrator: team h2 display size (old :nth-of-type(3) rule no longer matches new DOM) */
.g22-about-team h2.wp-block-heading {
	font-size: var(--ps-text-3xl);
	max-width: 15ch;
	margin-bottom: clamp(20px, 2.8vw, 32px);
}
.g22-about-team .g22-team-grid > .wp-block-column:first-child p {
	max-width: 44ch;
	font-size: var(--ps-text-md);
	line-height: 1.7;
	color: var(--ps-ink-70, rgba(26,26,46,.7));
}

/* ========================================================================== */
/* Phase 1 — content architecture and conversion hierarchy (2026-07-16)      */
/* ========================================================================== */

/* Hero now completes the first-screen decision: promise, context and one
   primary action. The secondary action remains visibly subordinate. */
.g22-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(22px, 3vw, 32px);
}

.g22-about-hero .g22-about-hero__actions .wp-block-button__link {
	/* Layout only — chrome from g22-buttons.css (.wp-element-button). */
	display: inline-flex;
}

.g22-about-hero .g22-about-hero__actions .wp-block-button__link:focus-visible {
	outline: 3px solid var(--a-yellow);
	outline-offset: 3px;
}

/* The story has a real H2 and a single founder principle instead of four
   similarly weighted paragraphs. */
.g22-about-who__text .g22-about-who__kicker {
	margin: 0 0 18px;
	font-family: var(--a-mono);
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--a-ink-55);
}

.g22-about-who__title {
	max-width: 13ch;
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-family: var(--a-sans);
	font-size: var(--ps-text-2xl);
	font-weight: 750;
	line-height: 1.06;
	letter-spacing: -0.035em;
	color: var(--a-ink);
}

.g22-about-who__quote {
	margin: clamp(28px, 4vw, 40px) 0 0;
	padding: clamp(20px, 2.8vw, 28px) 0 0 clamp(18px, 2.4vw, 26px);
	border: 0;
	border-top: 1px solid var(--a-ink-10);
	border-left: 3px solid var(--a-yellow);
}

.g22-about-who__text .g22-about-who__quote p {
	margin: 0;
	max-width: 38ch;
	font-family: var(--a-sans);
	font-size: var(--ps-text-md);
	font-weight: 650;
	line-height: 1.55;
	color: var(--a-ink);
}

/* Four verifiable facts now share one neutral state. */
.g22-about-facts__grid > .wp-block-group__inner-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: auto;
}

.g22-about-facts__item {
	min-height: 220px;
}

/* Give the philosophy a semantic H2 before its two H3 principles. */
.g22-about-philosophy__heading {
	max-width: 17ch;
	margin: 0 0 clamp(36px, 5vw, 60px);
	font-family: var(--g22ab-font);
	font-size: var(--ps-text-3xl);
	font-weight: 750;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--g22ab-ink);
}

/* A short proof preview sits before the form; the complete verified Google
   review mosaic remains at #reviews below the page content. */
.g22-about-proof {
	padding: clamp(64px, 8vw, 104px) 24px;
	background: #fff;
}

.g22-about-proof > .wp-block-group__inner-container {
	width: min(100%, 1200px);
	margin-inline: auto;
}

.g22-about-proof .g22-about-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ps-ink-55);
}

.g22-about-proof .g22-about-kicker::before {
	content: "";
	width: 18px;
	height: 3px;
	background: var(--ps-yellow);
	border-radius: 2px;
}

.g22-about-proof__title {
	max-width: 15ch;
	margin: 0;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-size: var(--ps-text-3xl);
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--ps-ink);
}

.g22-about-proof__intro {
	max-width: 52ch;
	margin: 22px 0 0;
	font-size: var(--ps-text-base);
	line-height: 1.65;
	color: var(--ps-ink-70);
}

.g22-about-proof__grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 3vw, 32px);
	margin-top: clamp(36px, 5vw, 56px);
}

.g22-about-proof__quote {
	display: flex;
	min-height: 230px;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: clamp(24px, 3.2vw, 36px);
	border: 1px solid var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
	border-radius: var(--ps-radius);
	background: var(--ps-card-bg);
}

.g22-about-proof__quote p {
	margin: 0;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-size: var(--ps-text-lg);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--ps-ink);
}

.g22-about-proof__quote cite {
	margin-top: 28px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ps-ink-55);
}

.g22-about-proof__link {
	margin: 28px 0 0;
}

.g22-about-proof__link a,
.g22-about-signup__note {
	font-size: var(--ps-text-sm);
	line-height: 1.6;
}

.g22-about-proof__link a {
	font-weight: 650;
	color: var(--ps-purple);
	text-underline-offset: 5px;
}

.g22-about-signup__note {
	max-width: 38ch;
	margin: 26px 0 0;
	color: var(--ps-ink-70);
}

/* Compact mode keeps the same backend fields but asks only for name and
   phone before the optional disclosure. */
.g22-about-signup .g22-form--compact .g22-form__optional {
	margin: 4px 0 2px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.g22-about-signup .g22-form--compact .g22-form__optional summary {
	position: relative;
	min-height: 48px;
	display: flex;
	align-items: center;
	padding-right: 28px;
	cursor: pointer;
	list-style: none;
	font-size: var(--ps-text-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.g22-about-signup .g22-form--compact .g22-form__optional summary::-webkit-details-marker {
	display: none;
}

.g22-about-signup .g22-form--compact .g22-form__optional summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	font-size: 1.25rem;
	font-weight: 400;
	transition: transform var(--g22-t-fast) var(--g22-ease-out);
}

.g22-about-signup .g22-form--compact .g22-form__optional[open] summary::after {
	transform: rotate(45deg);
}

.g22-about-signup .g22-form--compact .g22-form__optional-fields {
	display: grid;
	padding: 6px 0 20px;
}

.g22-about-signup .g22-form--compact .g22-form__microcopy {
	margin: 6px 0 0;
	font-size: var(--ps-text-xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 768px) {
	.g22-about-who__grid {
		display: flex;
		flex-direction: column;
	}

	.g22-about-who__media {
		order: -1;
		margin-top: 0;
	}

	.g22-about-facts__grid > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.g22-about-hero__actions .wp-block-button,
	.g22-about-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.g22-about-who {
		padding-top: 48px;
	}

	.g22-about-who__title {
		max-width: 15ch;
	}

	.g22-about-proof {
		padding-inline: 20px;
	}

	.g22-about-proof__grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	.g22-about-proof__quote {
		min-height: 0;
	}
}

@media (max-width: 480px) {
	.g22-about-facts__grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	.g22-about-facts__item {
		min-height: 0;
	}
}

/* ========================================================================== */
/* Навчальний процес — visual reference alignment (2026-07-16)               */
/* ========================================================================== */

body.page-pro-shkolu {
	--ps-surface: var(--g22h-soft-gray, #f5f5f5);
	--ps-surface-strong: #f4f4f2;
	--ps-white: #fff;
	--ps-radius-lg: 28px;

	/* Re-declared on body (not just .g22-page-shell above): some selectors
	   further down this file target body.page-id-19 .g22-google-reviews...
	   directly, which sits outside .g22-page-shell in the DOM, so the type
	   tokens need to reach the whole document, not just the shell. */
	--ps-text-xs: 0.75rem;
	--ps-text-sm: 0.9375rem;
	--ps-text-base: 1rem;
	--ps-text-md: clamp(1.05rem, 1.3vw, 1.2rem);
	--ps-text-lg: clamp(1.25rem, 2vw, 1.6rem);
	--ps-text-xl: clamp(1.6rem, 2.8vw, 2.35rem);
	--ps-text-2xl: clamp(1.9rem, 3.2vw, 2.75rem);
	--ps-text-3xl: clamp(2.2rem, 4.2vw, 3.8rem);
	--ps-text-hero: var(--g22-fs-display, clamp(2.75rem, 5.4vw, 3.75rem));
	--ps-shadow-sm: 0 6px 16px rgba(63, 39, 128, 0.2);
	--ps-shadow-md: 0 10px 24px rgba(63, 39, 128, 0.22);
	--ps-shadow-lg: 0 22px 46px -22px rgba(63, 39, 128, 0.36);
	--ps-shadow-xl: 0 1px 2px rgba(63, 39, 128, 0.08), 0 34px 72px -20px rgba(63, 39, 128, 0.52);
}

body.page-pro-shkolu .g22-page-content {
	max-width: 1120px;
}

/* Rhythm audit (2026-07-22): bottom padding 64px→52px (top kept at 88px
   — the hero's opening breathing room stays untouched; this only trims
   the transition into "Хто ми", which already gets its own 64px top
   padding right after). */
/* Legacy centered hero shell — phase1 layout owns the page; keep spacing only. */
body.page-pro-shkolu .g22-about-hero {
	padding: var(--g22-below-nav, clamp(72px, 9vw, 96px)) 24px clamp(32px, 4vw, 52px);
}

body.page-pro-shkolu .g22-about-hero__inner {
	max-width: 1040px;
	padding-bottom: 0;
	border-bottom: 0;
	text-align: left;
}

body.page-pro-shkolu .g22-about-hero__title {
	max-width: 20ch;
	margin-inline: auto;
	font-size: var(--ps-text-hero);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

body.page-pro-shkolu .g22-about-hero__accent {
	display: block;
	color: var(--ps-purple, #432980);
	background: none;
	font-weight: 800;
}

body.page-pro-shkolu .g22-about-hero__lead {
	display: block;
	margin-top: 20px;
}

body.page-pro-shkolu .g22-about-hero__lead > .wp-block-group__inner-container {
	max-width: 54ch;
	margin-inline: auto;
}

body.page-pro-shkolu .g22-about-hero__summary {
	max-width: none;
	font-size: var(--ps-text-md);
	line-height: 1.65;
}

body.page-pro-shkolu .g22-about-hero__actions {
	justify-content: center;
	margin-top: 28px;
}

/* Narrative sections use the reference page's soft surface panels. */
body.page-pro-shkolu .g22-about-who__grid,
body.page-pro-shkolu .g22-about-philosophy,
body.page-pro-shkolu .g22-about-mission,
body.page-pro-shkolu .g22-about-team .g22-team-grid,
body.page-pro-shkolu .g22-about-proof > .wp-block-group__inner-container {
	background: var(--ps-surface-strong);
	border-radius: var(--ps-radius-lg);
	box-shadow: none;
}

body.page-pro-shkolu .g22-about-who {
	padding-block: clamp(28px, 4vw, 48px);
}

body.page-pro-shkolu .g22-about-who__grid {
	padding: clamp(28px, 4.5vw, 48px);
	align-items: center;
}

body.page-pro-shkolu .g22-about-who__media {
	margin-top: 0;
}

body.page-pro-shkolu .g22-about-who__image img,
body.page-pro-shkolu .g22-about-team .g22-team-grid__image img {
	border-radius: var(--ps-radius);
}

body.page-pro-shkolu .g22-about-facts {
	padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 72px);
}

body.page-pro-shkolu .g22-about-facts__grid > .wp-block-group__inner-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.page-pro-shkolu .g22-about-facts__item {
	min-height: 0;
	padding: 28px;
	border: 0;
	border-radius: var(--ps-radius);
	background: var(--ps-surface-strong);
	transition:
		transform var(--g22-t-med) var(--g22-ease-out),
		background-color var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-med) var(--g22-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	body.page-pro-shkolu .g22-about-facts__item:hover {
		transform: translateY(-4px);
		background: var(--ps-white);
		box-shadow: var(--ps-shadow-lg);
	}
}

body.page-pro-shkolu .g22-about-philosophy,
body.page-pro-shkolu .g22-about-mission {
	margin-block: clamp(28px, 4vw, 48px);
	padding: clamp(28px, 4.5vw, 48px);
}

body.page-pro-shkolu .g22-about-philosophy__row {
	border-top-color: rgba(26, 26, 26, 0.08);
}

body.page-pro-shkolu .g22-about-mission__title {
	max-width: 18ch;
	margin: 0 0 28px;
}

body.page-pro-shkolu .g22-about-mission__grid {
	gap: clamp(24px, 4vw, 48px);
}

body.page-pro-shkolu .g22-about-mission__grid p {
	margin-top: 0;
	line-height: 1.7;
}

/* The approach becomes the same calm 2-column card system as the reference. */
body.page-pro-shkolu .g22-about-approach {
	display: block;
	margin-block: clamp(48px, 6vw, 72px);
}

body.page-pro-shkolu .g22-about-approach__head {
	position: static;
	max-width: 640px;
	margin: 0 0 32px;
}

body.page-pro-shkolu .g22-about-approach__title {
	max-width: 17ch;
	font-size: var(--ps-text-2xl);
	line-height: 1.15;
}

body.page-pro-shkolu .g22-about-approach__intro {
	max-width: 52ch;
}

body.page-pro-shkolu .g22-about-approach__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Earlier approach "card" chrome — flattened by Phase 1 denumber rules below. */
body.page-pro-shkolu .g22-about-approach__item {
	padding: 28px;
	border: 0;
	border-radius: var(--ps-radius);
	background: var(--ps-surface-strong);
	transition: none;
}

body.page-pro-shkolu .g22-about-approach__item > .wp-block-group__inner-container {
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: 16px;
}

body.page-pro-shkolu .g22-about-approach__num {
	font-size: var(--ps-text-base);
	color: var(--ps-purple);
}

body.page-pro-shkolu .g22-about-approach__item-title {
	padding-left: 0;
	font-size: var(--ps-text-lg);
	font-weight: 700;
}

body.page-pro-shkolu .g22-about-approach__item-title::before {
	content: none;
}

body.page-pro-shkolu .g22-about-team {
	padding-block: clamp(32px, 5vw, 56px);
}

body.page-pro-shkolu .g22-about-team .g22-team-grid {
	padding: clamp(28px, 4.5vw, 48px);
	align-items: center;
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__photo {
	margin-top: 0;
}

body.page-pro-shkolu .g22-about-proof {
	padding-block: clamp(32px, 5vw, 56px);
	background: transparent;
}

body.page-pro-shkolu .g22-about-proof > .wp-block-group__inner-container {
	padding: clamp(28px, 4.5vw, 48px);
}

body.page-pro-shkolu .g22-about-proof__quote {
	border: 0;
	background: var(--ps-white);
}

/* Rhythm audit (2026-07-22): bottom padding 88px→72px (margin-top is
   overridden to 0 further down by the "Final CTA copy" rule, so only
   the bottom value here reaches the page). */
/* Two conversion paths — both visible for scanning (forms guide: ≤5 options). */
body.page-pro-shkolu .g22-about-signup {
	position: static;
	width: auto;
	max-width: none;
	margin: clamp(28px, 4vw, 48px) 0 0;
	padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 6vw, 72px);
	background: transparent;
	overflow: visible;
	animation: none;
}

body.page-pro-shkolu .g22-about-signup__inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding-inline: 0;
}

body.page-pro-shkolu .g22-about-signup__inner > .wp-block-group__inner-container {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-pro-shkolu .g22-about-signup__title {
	max-width: 24ch;
	margin: 0;
	font-size: var(--ps-text-2xl);
	line-height: 1.12;
}

body.page-pro-shkolu .g22-about-signup__lead {
	max-width: 42ch;
	margin: 12px 0 0;
	color: var(--ps-ink-70);
	line-height: 1.55;
}

body.page-pro-shkolu .g22-about-signup__choices {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 0;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba(26, 26, 26, 0.12);
	overflow: visible;
}

body.page-pro-shkolu .g22-about-signup__form-toggle > summary {
	/* Ira 2026-07-29: room for purple CTA drop-shadow ("тенюшки"). */
	margin-bottom: 10px;
}

body.page-pro-shkolu .g22-about-signup__choices > .wp-block-column {
	box-sizing: border-box;
	flex-basis: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto;
	min-height: 0;
}

/* Clear split — no cream cards, no lift on hover. */
body.page-pro-shkolu .g22-about-signup__choice {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	min-height: 100%;
	padding: 0 40px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}

body.page-pro-shkolu .g22-about-signup__choice + .g22-about-signup__choice {
	padding: 0 0 0 40px;
	border-left: 1px solid rgba(26, 26, 26, 0.12);
}

body.page-pro-shkolu .g22-about-signup__choice h3 {
	margin: 0 0 12px;
	font-size: var(--ps-text-xl);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

body.page-pro-shkolu .g22-about-signup__choice > ul,
body.page-pro-shkolu .g22-about-signup__choice > p {
	max-width: 38ch;
	margin: 0;
	color: var(--ps-ink-70);
	line-height: 1.65;
}

body.page-pro-shkolu .g22-about-signup__choice .g22-form {
	margin-top: 0;
	padding-top: 20px;
	width: min(100%, 28rem);
}

body.page-pro-shkolu .g22-about-signup__form-toggle {
	margin-top: auto;
	padding-top: 24px;
	width: auto;
}

/* Light surface: keep primary purple when open (not footer white treatment). */
body.page-pro-shkolu .g22-about-signup__form-toggle[open] > summary,
body.page-pro-shkolu .g22-about-signup__form-toggle[open] > summary:hover {
	border-color: var(--g22-btn-purple, #432980);
	background: var(--g22-btn-purple, #432980);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(67, 41, 128, 0.2);
}

body.page-pro-shkolu .g22-about-signup__choice .g22-form label,
body.page-pro-shkolu .g22-about-signup__choice .g22-form__optional summary {
	color: var(--ps-ink);
}

body.page-pro-shkolu .g22-about-signup__choice .g22-form input,
body.page-pro-shkolu .g22-about-signup__choice .g22-form textarea {
	background: var(--ps-white);
}

body.page-pro-shkolu .g22-about-signup .g22-form--compact .g22-form__optional {
	border-color: rgba(26, 26, 26, 0.12);
}

body.page-pro-shkolu .g22-about-signup .g22-form--compact .g22-form__microcopy {
	color: var(--ps-ink-55);
}

body.page-pro-shkolu .g22-about-signup__note {
	max-width: 52ch;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(26, 26, 26, 0.08);
	color: var(--ps-ink-55);
	font-size: var(--ps-text-sm);
}

@media (max-width: 782px) {
	body.page-pro-shkolu .g22-about-mission__grid {
		flex-direction: column;
	}

	body.page-pro-shkolu .g22-about-signup__choices {
		grid-template-columns: 1fr;
		gap: 8px;
		padding-top: 0;
		border-top: 0;
	}

	body.page-pro-shkolu .g22-about-signup__choice,
	body.page-pro-shkolu .g22-about-signup__choice + .g22-about-signup__choice {
		padding: 28px 0 28px;
		border-left: 0;
		border-top: 1px solid rgba(26, 26, 26, 0.12);
		/* Ira 2026-07-29: overflow clipped CTA button shadows on mobile. */
		overflow: visible;
	}

	body.page-pro-shkolu .g22-about-signup__form-toggle {
		margin-top: 20px;
		padding-top: 0;
	}

	body.page-pro-shkolu .g22-about-approach__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	body.page-pro-shkolu .g22-about-hero {
		padding-inline: 0;
	}

	body.page-pro-shkolu .g22-about-who__grid,
	body.page-pro-shkolu .g22-about-philosophy,
	body.page-pro-shkolu .g22-about-mission,
	body.page-pro-shkolu .g22-about-team .g22-team-grid,
	body.page-pro-shkolu .g22-about-proof > .wp-block-group__inner-container {
		padding: 24px 20px;
	}

	body.page-pro-shkolu .g22-about-facts__grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	body.page-pro-shkolu .g22-about-signup__form-toggle > summary {
		width: 100%;
		box-sizing: border-box;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-pro-shkolu .g22-about-facts__item,
	body.page-pro-shkolu .g22-about-approach__item {
		transition: none;
	}

	body.page-pro-shkolu .g22-about-facts__item:hover,
	body.page-pro-shkolu .g22-about-approach__item:hover {
		transform: none;
	}
}

/* ========================================================================== */
/* Про школу — Phase 1 reading journey (2026-07-16)                           */
/* ========================================================================== */

/* Hero: one promise, one primary action and real school media in the fold. */
body.page-pro-shkolu .g22-about-hero--phase1 {
	padding: 0 0 clamp(40px, 5vw, 72px);
	overflow: visible;
}

body.page-pro-shkolu .g22-about-hero__layout {
	max-width: none;
	width: min(100% - 48px, 1220px);
	margin: 0 auto;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

body.page-pro-shkolu .g22-about-hero__copy {
	flex: 1 1 44rem;
	max-width: 46rem;
	text-align: left;
}

body.page-pro-shkolu .g22-about-hero__media {
	position: relative;
	flex: 0 1 44%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0;
	margin-right: 0;
	width: auto;
	max-width: none;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Client deck: balanced facts and calmer, more credible school media. */
body.page-pro-shkolu .g22-about-story__fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 122px;
	text-align: center;
}

body.page-pro-shkolu .g22-about-story__fact-label {
	max-width: 18ch;
}

/* max-width tightened 900px -> 760px (client fix, 2026-07-27): "the panel really
   is too big here" — the panel still read as the single largest element on
   the page even after the earlier 1160px -> 900px cascade lock. Paired with
   the .g22-film-stage centring fix above. */
body.page-pro-shkolu .g22-about-film {
	box-sizing: border-box;
	max-width: 760px;
}

body.page-pro-shkolu .g22-life-showcase__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	content: url("../../images/photos/g22-shoot-candid.webp?v3");
}

body.page-pro-shkolu .g22-about-hero__image--main img {
	content: url("../../images/photos/g22-about-hero-read.webp?v5");
}

body.page-pro-shkolu .g22-about-hero__image--inset img {
	content: url("../../images/photos/g22-pro-inset.webp?v3");
}

body.page-pro-shkolu .g22-about-story__image img {
	content: url("../../images/photos/g22-about-story-dots.webp?v4");
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image img {
	content: url("../../images/photos/g22-shoot-hero.webp?v3");
	object-position: center 44%;
}

body.page-pro-shkolu .g22-about-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	margin: 0 0 12px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--g22-hero-kicker-size, 0.72rem);
	font-weight: 500;
	letter-spacing: var(--g22-hero-kicker-tracking, 0.16em);
	text-transform: uppercase;
	color: var(--ps-ink-55, var(--a-ink-55, rgba(26, 26, 26, 0.55)));
}

body.page-pro-shkolu .g22-about-hero__kicker::before {
	content: "";
	display: inline-block;
	width: var(--g22-hero-kicker-dash-w, 18px);
	height: var(--g22-hero-kicker-dash-h, 3px);
	flex: 0 0 var(--g22-hero-kicker-dash-w, 18px);
	border-radius: 1px;
	background: var(--ps-yellow, var(--g22h-yellow, #fcc708));
}

/* Brand line — secondary to H1, not a competing display. */
body.page-pro-shkolu .g22-about-hero__brand {
	display: none;
	margin: 0 0 8px;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ps-purple, #432980);
	white-space: nowrap;
}

body.page-pro-shkolu .g22-about-hero__title {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(2.6rem, 4.6vw, 4rem);
	font-weight: 700;
	line-height: var(--g22-hero-title-lh, 1.04);
	letter-spacing: var(--g22-hero-title-ls, -0.035em);
	text-align: left;
	text-wrap: balance;
	color: var(--ps-ink, #1a1a1a);
}

body.page-pro-shkolu .g22-about-hero__accent {
	display: block;
	color: var(--ps-purple, #432980);
	background: none;
	font-weight: 800;
}

body.page-pro-shkolu .g22-about-hero__summary {
	max-width: var(--g22-hero-summary-max, 54ch);
	margin: 20px 0 0;
	font-size: var(--g22-hero-summary-size, clamp(1rem, 1.4vw, 1.2rem));
	line-height: var(--g22-hero-summary-lh, 1.65);
	color: var(--ps-ink-70);
}

body.page-pro-shkolu .g22-about-hero__actions {
	justify-content: flex-start;
	margin-top: 22px;
}

body.page-pro-shkolu .g22-about-hero__text-link {
	margin: 12px 0 0;
}

/* Text-link chrome: g22-buttons.css LINK variant (single hover underline). */

body.page-pro-shkolu .g22-about-hero__image {
	margin: 0;
}

body.page-pro-shkolu .g22-about-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-pro-shkolu .g22-about-hero__image--main {
	width: 100%;
	margin: 0;
	aspect-ratio: var(--g22-hero-media-ratio, 4 / 3);
	min-height: 0;
	overflow: hidden;
	border-radius: var(--g22-hero-media-radius, 20px);
	background: transparent;
	box-shadow: var(--g22-hero-media-shadow, 0 24px 60px rgba(26, 26, 26, 0.14));
}

body.page-pro-shkolu .g22-about-hero__image--main img {
	object-fit: cover;
	/* Costume pair from behind — crowns / wings fill the upper frame. */
	object-position: 50% 28%;
}

/* Inset polaroid + floating badge removed (no hero overlays). */
body.page-pro-shkolu .g22-about-hero__image--inset,
body.page-pro-shkolu .g22-about-hero__media-note {
	display: none !important;
}

body.page-pro-shkolu .g22-about-hero__image--inset img {
	object-position: center;
}

/* Story: one editorial chapter with proof points, rather than two sections. */
/* Rhythm audit (2026-07-22): bottom value trimmed from 96px→72px — this
   padding stacked directly against .g22-about-film's own margin-top,
   compounding into ~144px of blank space between "Хто ми" and the video
   panel. Trimming here (not the film side) keeps the panel's own
   entrance breathing room untouched. */
body.page-pro-shkolu .g22-about-story {
	padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 56px);
}

body.page-pro-shkolu .g22-about-story__grid {
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

body.page-pro-shkolu .g22-about-story__media {
	flex: 1.12 1 0;
	min-width: 0;
}

body.page-pro-shkolu .g22-about-story__copy {
	flex: 0.88 1 0;
}

body.page-pro-shkolu .g22-about-story__image {
	margin: 0;
	/* Portrait plate — matches the dots-wall story photo. */
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--ps-radius-lg);
	background: var(--ps-surface-strong);
}

body.page-pro-shkolu .g22-about-story__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 42%;
}

body.page-pro-shkolu .g22-about-story__caption {
	position: relative;
	margin: 14px 0 0;
	padding-left: 22px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ps-ink-55);
}

body.page-pro-shkolu .g22-about-story__caption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 2px;
	background: var(--ps-yellow);
}

body.page-pro-shkolu .g22-about-story__copy .g22-page-kicker {
	margin-bottom: 18px;
}

body.page-pro-shkolu .g22-about-story__title {
	max-width: 13ch;
	margin: 0 0 24px;
	font-size: var(--ps-text-2xl);
	line-height: 1.08;
}

body.page-pro-shkolu .g22-about-story__copy p:not(.g22-page-kicker) {
	max-width: 48ch;
	margin: 0 0 16px;
	line-height: 1.7;
	color: var(--ps-ink-70);
}

body.page-pro-shkolu .g22-about-story__facts {
	margin-top: clamp(32px, 4vw, 48px);
	border-block: 1px solid rgba(26, 26, 26, 0.1);
}

body.page-pro-shkolu .g22-about-story__facts,
body.page-pro-shkolu .g22-about-story__facts > .wp-block-group__inner-container {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-pro-shkolu .g22-about-story__facts > .wp-block-group__inner-container {
	display: grid;
}

body.page-pro-shkolu .g22-about-story__fact {
	padding: 24px clamp(18px, 2.5vw, 32px);
	border-right: 1px solid rgba(26, 26, 26, 0.1);
}

body.page-pro-shkolu .g22-about-story__fact:last-child {
	border-right: 0;
}

body.page-pro-shkolu .g22-about-story__fact-value {
	margin: 0 0 8px;
	font-size: var(--ps-text-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ps-purple);
}

body.page-pro-shkolu .g22-about-story__fact-label {
	margin: 0;
	font-size: var(--ps-text-sm);
	line-height: 1.5;
	color: var(--ps-ink-55);
}

/* Rhythm audit (2026-07-22): margin-top 48px→36px, margin-bottom
   112px→88px — same double-padding pattern as .g22-about-film above
   (this panel's own margin stacked against the video panel's margin
   on one side and .g22-about-approach's margin on the other). */
/* Values + mission: full-bleed purple statement (breaks out of .g22-page-content). */
body.page-pro-shkolu .g22-about-belief {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-block: clamp(16px, 2.5vw, 28px) clamp(40px, 5vw, 64px);
	border-radius: 0;
	background: var(--ps-purple);
	color: var(--ps-white);
	overflow: hidden;
}

body.page-pro-shkolu .g22-about-belief__inner {
	box-sizing: border-box;
	width: min(100% - 48px, 1120px);
	margin-inline: auto;
	padding: clamp(36px, 5vw, 64px) 0;
}

body.page-pro-shkolu .g22-about-belief__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--ps-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

body.page-pro-shkolu .g22-about-belief__kicker::before {
	content: "";
	width: 18px;
	height: 3px;
	background: var(--ps-yellow);
}

body.page-pro-shkolu .g22-about-belief__title {
	max-width: 15ch;
	margin: 0;
	font-size: var(--ps-text-3xl);
	line-height: 1.04;
	color: var(--ps-white);
}

body.page-pro-shkolu .g22-about-belief__copy {
	gap: clamp(28px, 5vw, 72px);
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: clamp(28px, 4vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

body.page-pro-shkolu .g22-about-belief__copy p {
	max-width: 46ch;
	margin: 0;
	font-size: var(--ps-text-md);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

/* Rhythm audit (2026-07-22): bottom margin 112px→88px, in line with the
   trims above. */
/* Four principles and an early conversion point. */
body.page-pro-shkolu .g22-about-approach {
	margin-block: 0 clamp(40px, 5vw, 64px);
}

body.page-pro-shkolu .g22-about-approach__head {
	max-width: 680px;
	margin-bottom: 32px;
}

body.page-pro-shkolu .g22-about-approach__title {
	max-width: 16ch;
}

body.page-pro-shkolu .g22-about-approach__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.page-pro-shkolu .g22-about-approach__list > .wp-block-group__inner-container {
	display: contents;
}

body.page-pro-shkolu .g22-about-approach__item {
	min-height: 0;
	box-sizing: border-box;
	padding: 24px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
	border-radius: 0;
	box-shadow: none;
	transform: none;
	transition: none;
}

body.page-pro-shkolu .g22-about-approach__item > .wp-block-group__inner-container {
	display: block;
	grid-template-columns: none;
	column-gap: 0;
}

/* Audit P1: denumber — 01–04 were decorative, not a sequence. */
body.page-pro-shkolu .g22-about-approach__num {
	display: none !important;
}

body.page-pro-shkolu .g22-about-approach__item-title {
	grid-column: auto;
	padding-left: 0;
	margin: 0 0 8px;
}

body.page-pro-shkolu .g22-about-approach__item-title::before {
	content: none;
}

body.page-pro-shkolu .g22-about-approach__item-text {
	grid-column: auto;
	max-width: 42ch;
}

/* Audit P1: kill yellow mid-CTA strip — signup owns conversion. */
body.page-pro-shkolu .g22-about-mid-cta {
	display: none !important;
}

/* Rhythm audit (2026-07-22): bottom padding 80px→64px. */
/* Team: open editorial split, not another large card. */
body.page-pro-shkolu .g22-about-team {
	padding-block: 0 clamp(44px, 5.5vw, 64px);
}

body.page-pro-shkolu .g22-about-team .g22-team-grid {
	gap: clamp(36px, 6vw, 80px);
	padding: 0;
	background: transparent;
	border-radius: 0;
}

body.page-pro-shkolu .g22-about-team__copy {
	flex: 0.88 1 0;
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__photo {
	flex: 1.12 1 0;
	margin-top: 0;
}

body.page-pro-shkolu .g22-about-team h2.wp-block-heading {
	max-width: 14ch;
	font-size: var(--ps-text-2xl);
	line-height: 1.08;
}

body.page-pro-shkolu .g22-about-team__copy > p:not(.g22-about-kicker):not(.g22-about-team__link):not(.g22-about-team__reviews-link) {
	max-width: 48ch;
	line-height: 1.7;
	color: var(--ps-ink-70);
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ps-radius-lg);
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center 42%;
}

body.page-pro-shkolu .g22-about-team__link,
body.page-pro-shkolu .g22-about-team__reviews-link {
	margin: 0;
}

body.page-pro-shkolu .g22-about-team__copy .g22-about-team__link {
	margin-top: clamp(20px, 2.5vw, 28px);
}

body.page-pro-shkolu .g22-about-team__copy .g22-about-team__reviews-link {
	margin-top: 12px;
}

/* Final CTA: progressive disclosure, no forced card height. */
body.page-pro-shkolu .g22-about-signup {
	margin-top: 0;
}

/* Stretch columns so margin-top:auto on the CTA can pin both buttons. */
body.page-pro-shkolu .g22-about-signup__choice {
	min-height: 100%;
}

body.page-pro-shkolu .g22-about-signup__choice > p {
	max-width: 38ch;
}

@media (max-width: 782px) {
	body.page-pro-shkolu .g22-about-hero--phase1 {
		padding-inline: 0;
		overflow: visible;
		/* Break out of .g22-page-content side padding for full-bleed photo. */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	body.page-pro-shkolu .g22-about-hero__layout {
		flex-direction: column;
		gap: 36px;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	body.page-pro-shkolu .g22-about-hero__copy,
	body.page-pro-shkolu .g22-about-hero__media {
		width: 100%;
		flex: none;
	}

	body.page-pro-shkolu .g22-about-hero__media {
		max-width: none;
		margin: 0;
		width: 100%;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	body.page-pro-shkolu .g22-about-hero__copy {
		box-sizing: border-box;
		padding-inline: 24px;
		max-width: none;
	}

	body.page-pro-shkolu .g22-about-hero__brand {
		white-space: normal;
		font-size: clamp(2.1rem, 11vw, 3.2rem);
	}

	body.page-pro-shkolu .g22-about-hero__image--main {
		width: 100%;
		aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
		min-height: 0;
		border-radius: var(--g22-hero-media-radius, 20px);
	}

	body.page-pro-shkolu .g22-about-hero__image--main img {
		object-position: 68% 40%;
	}

	/* .g22-about-hero__image--inset stays display: none (set above);
	   no width override needed while hidden. */

	body.page-pro-shkolu .g22-about-story__grid,
	body.page-pro-shkolu .g22-about-belief__copy,
	body.page-pro-shkolu .g22-about-team .g22-team-grid {
		flex-direction: column;
	}

	body.page-pro-shkolu .g22-about-approach__list {
		grid-template-columns: 1fr;
	}

	body.page-pro-shkolu .g22-about-mid-cta > .wp-block-group__inner-container {
		align-items: flex-start;
		flex-direction: column;
	}

	body.page-pro-shkolu .g22-about-signup__choice {
		min-height: 0;
	}
}

@media (max-width: 640px) {
	body.page-pro-shkolu .g22-about-hero--phase1 {
		padding-top: 0;
		padding-bottom: 56px;
	}

	body.page-pro-shkolu .g22-about-hero__title {
		max-width: none;
		font-size: clamp(2.4rem, 10vw, 3.25rem);
	}

	body.page-pro-shkolu .g22-about-hero__summary {
		margin-top: 20px;
	}

	body.page-pro-shkolu .g22-about-hero__actions .wp-block-button,
	body.page-pro-shkolu .g22-about-hero__actions .wp-block-button__link {
		width: auto;
	}

	body.page-pro-shkolu .g22-about-hero__media {
		padding: 0;
	}

	body.page-pro-shkolu .g22-about-hero__image--main {
		width: 100%;
		aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
	}

	/* .g22-about-hero__image--inset stays display: none (set above);
	   no width/border overrides needed while hidden. */

	body.page-pro-shkolu .g22-about-hero__media-note {
		top: 12px;
		right: 0;
		font-size: 0.6rem;
	}

	body.page-pro-shkolu .g22-about-story {
		padding-top: 24px;
		padding-bottom: 52px;
	}

	body.page-pro-shkolu .g22-about-story__image {
		aspect-ratio: 3 / 4;
		border-radius: 20px;
	}

	body.page-pro-shkolu .g22-about-story__facts,
	body.page-pro-shkolu .g22-about-story__facts > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	body.page-pro-shkolu .g22-about-story__fact {
		padding: 18px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(26, 26, 26, 0.1);
	}

	body.page-pro-shkolu .g22-about-story__fact:last-child {
		border-bottom: 0;
	}

	body.page-pro-shkolu .g22-about-belief {
		margin-bottom: 56px;
		border-radius: 0;
	}

	body.page-pro-shkolu .g22-about-belief__inner {
		width: min(100% - 40px, 1120px);
		padding: clamp(28px, 6vw, 40px) 0;
	}

	body.page-pro-shkolu .g22-about-belief__title {
		font-size: clamp(2rem, 10vw, 2.7rem);
	}

	body.page-pro-shkolu .g22-about-approach__item {
		min-height: 0;
		padding: 20px 0;
	}

	body.page-pro-shkolu .g22-about-approach {
		margin-bottom: 40px;
	}

	body.page-pro-shkolu .g22-about-team .g22-team-grid__image {
		aspect-ratio: 4 / 3;
		border-radius: 20px;
	}

	body.page-pro-shkolu .g22-about-team {
		padding-bottom: 52px;
	}

	body.page-pro-shkolu .g22-about-signup__title {
		max-width: 15ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-pro-shkolu .g22-about-hero__image--inset,
	body.page-pro-shkolu .g22-about-mid-cta__button .wp-block-button__link {
		transition: none;
	}
}

/* ========================================================================== */
/* Motion layer — Framer Motion semantics without a React runtime             */
/* viewport once + variants + stagger + whileHover/whileTap (2026-07-16)      */
/* ========================================================================== */

body.page-pro-shkolu {
	--g22-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--g22-motion-quick: 140ms;
	--g22-motion-standard: 280ms;
	--g22-motion-slow: 340ms;
}

/* The old section-level scroll timeline targeted this wrapper directly.
   Once the page controller is present, it becomes the sole motion owner. */
body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup {
	animation: none;
	opacity: 1;
	transform: none;
}

/* Static first: no element is hidden before its group reaches the viewport.
   JS applies this class and removes it again after the one-time entrance. */
body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared {
	opacity: 0.001;
	transform: translate3d(0, 22px, 0) scale(0.99);
	transition-property: opacity, transform;
	transition-duration: var(--g22-motion-standard), var(--g22-motion-slow);
	transition-timing-function: var(--g22-motion-ease-soft), var(--g22-motion-ease);
	transition-delay: var(--g22-motion-delay, 0ms);
	will-change: opacity, transform;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared[data-g22-motion="from-left"] {
	transform: translate3d(-26px, 0, 0) scale(0.992);
}

body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared[data-g22-motion="from-right"] {
	transform: translate3d(26px, 0, 0) scale(0.992);
}

body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared[data-g22-motion="scale"] {
	transform: translate3d(0, 14px, 0) scale(0.976);
	transition-timing-function: var(--g22-motion-ease-soft), var(--g22-spring);
}

body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared.g22-motion-in {
	opacity: 1;
	transform: none;
}

/* Nested media owns the tiny scroll-linked transform, leaving figure
   entrances and layout untouched. The 4.5% overscan prevents edge flashes. */
body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__image--main img,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-story__image img,
body.page-pro-shkolu.g22-about-motion-ready .g22-team-grid__image img {
	backface-visibility: hidden;
	transform-origin: center;
}

/* Premium whileHover / whileTap: leave button transforms to g22-buttons.css
   so «Про школу» matches the homepage pill system. */
body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__primary .wp-block-button__link,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-mid-cta__button .wp-block-button__link,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > summary,
body.page-pro-shkolu.g22-about-motion-ready .g22-form button {
	transition-duration: 160ms;
	transition-timing-function: var(--g22-btn-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Editorial links — color/underline owned by g22-buttons LINK variant. */

/* Non-clickable pillars stay flat — no card lift / yellow bar on hover. */
body.page-pro-shkolu.g22-about-motion-ready .g22-about-approach__item {
	position: relative;
	overflow: visible;
	transition: none;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-approach__item::after {
	content: none;
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-approach__item:hover {
		transform: none;
		background: transparent;
		box-shadow: none;
	}

	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__choice {
		transition: none;
	}

	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__choice:hover {
		transform: none;
		background: transparent;
		box-shadow: none;
	}
}

/* Native details stay keyboard-accessible; the form receives a short,
   origin-aware reveal after the disclosure state changes.
   CRITICAL: author `display: grid` on .g22-form overrides the UA rule that
   hides closed <details> content, so the invisible form still paints/layout
   and the summary overlaps the next mobile card. Force display:none when
   closed; animate only the open state. */
body.page-pro-shkolu .g22-about-signup__form-toggle:not([open]) > .g22-form,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle:not([open]) > .g22-form {
	display: none !important;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > summary::after {
	content: none;
	display: none;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle[open] > summary::after {
	transform: none;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle[open] > .g22-form {
	display: grid;
	transform-origin: top center;
	animation: g22-about-form-in 220ms var(--g22-motion-ease) both;
}

@keyframes g22-about-form-in {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0) scale(0.992);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup .g22-form input,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup .g22-form textarea {
	transition:
		border-color 140ms linear,
		box-shadow 180ms var(--g22-motion-ease),
		background-color 140ms linear;
}

body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup .g22-form input:focus,
body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup .g22-form textarea:focus {
	border-color: rgba(63, 39, 128, 0.58);
	box-shadow: 0 0 0 4px rgba(63, 39, 128, 0.1);
	outline: none;
}

@media (max-width: 782px) {
	body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared[data-g22-motion="from-left"],
	body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared[data-g22-motion="from-right"] {
		transform: translate3d(0, 18px, 0) scale(0.99);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared,
	body.page-pro-shkolu.g22-about-motion-ready .g22-motion-prepared.g22-motion-in {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > .g22-form,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle[open] > .g22-form {
		animation: none;
		opacity: 1;
		transform: none;
	}

	body.page-pro-shkolu.g22-about-motion-ready .g22-about-approach__item::after,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > summary::after,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__text-link a,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-team__link a,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-team__reviews-link a,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__choice,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__primary .wp-block-button__link,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-mid-cta__button .wp-block-button__link,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > summary,
	body.page-pro-shkolu.g22-about-motion-ready .g22-form button {
		transition: none;
	}

	body.page-pro-shkolu.g22-about-motion-ready .g22-about-approach__item:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__choice:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__primary .wp-block-button__link:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-mid-cta__button .wp-block-button__link:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-signup__form-toggle > summary:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-form button:not(:disabled):hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-hero__text-link a:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-team__link a:hover,
	body.page-pro-shkolu.g22-about-motion-ready .g22-about-team__reviews-link a:hover {
		transform: none;
	}
}

/* === About film / cinema card === */
/* Screening-room redesign (18.07): retires the Dior full-bleed campaign
   treatment (client feedback: "alien to the page") in favour of the page's
   own rounded purple panel language — same shape as .g22-about-belief
   above (radius, background, eyebrow, generous padding), just carrying a
   video instead of the mission copy. Section is normal document flow now;
   the 240vh scroll-pin from about-theatre.js is disabled for this section
   only (see that file). */

/* Rhythm audit (2026-07-22): margin-top 48px→36px and margin-bottom
   112px→88px, internal padding 64px→52px. This was the single biggest
   blank-space + oversized-card offender on the page — the two margins
   plus .g22-about-belief's own margin-top compounded into ~160px of
   empty canvas after the video panel alone. Kept both sides
   asymmetrical (top < bottom) as before, just scaled down ~20%. */
body.page-pro-shkolu .g22-about-film {
	margin-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 88px);
	padding: clamp(28px, 4vw, 52px);
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--ps-radius-lg, 28px);
	background: var(--ps-purple);
	color: var(--ps-white, #fff);
	text-align: left;
	overflow: hidden;
}

.g22-about-film__head {
	max-width: 640px;
	margin: 0;
}

/* Eyebrow: .g22-page-kicker is shared/global (grey-on-light by default —
   see the base rule near the top of this file); this panel is purple, so
   only the color needs a local override. The yellow dash (::before) is
   inherited unchanged, matching .g22-about-belief__kicker's pattern. */
.g22-about-film .g22-page-kicker {
	color: rgba(255, 255, 255, 0.68);
}

.g22-about-film__title {
	margin: 12px 0 0;
	font-family: var(--g22h-font, "Manrope", sans-serif);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: var(--ps-text-2xl);
	line-height: 1.15;
	color: var(--ps-white, #fff);
}

/* Единая секционная ступень H2 на этой странице (48px): перебиваем
   .g22-page-content h2 (inner-henna) и body:has(.g22-henna--clean)… (home-studio) */
.g22-page-content .g22-about-film__title {
	font-size: var(--ps-text-2xl);
}

/* Keep the title legible on the film's dark surface. The homepage's broad
   heading rule otherwise wins this cascade and paints it in page ink. */
body.page-pro-shkolu .g22-page-content .g22-about-film__title {
	color: var(--ps-white, #fff);
}

body.page-id-19:has(.g22-henna--clean) .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan .g22-google-reviews__head .g22-henna__heading,
body.page-id-19 .g22-google-reviews__head .g22-henna__heading {
	font-size: var(--ps-text-2xl);
}

/* Duo-clip pass (19.07): the single 16:9 promo reel (baked captions,
   client-rejected) is retired in favour of two short, silent, caption-free
   vertical clips shown side by side — ambient loops, not a "watch this"
   video with a play button. about-film.js builds the two-card row below;
   this stays contained inside the same purple panel/eyebrow/H2 shell. */
.g22-film-stage {
	position: relative;
	width: 100%;
	max-width: none;
	margin: clamp(28px, 4vw, 40px) 0 0;
}

/* Yellow offset accent peeking from behind the row's top-right corner —
   same motif as the yellow dot on the ЗАПИСАТИСЯ button. Sits behind the
   cards in paint order, subtle: small and mostly hidden. */
.g22-film-stage::before {
	content: "";
	position: absolute;
	top: -24px;
	right: -24px;
	width: 88px;
	height: 88px;
	border-radius: 20px;
	background: var(--ps-yellow);
}

/* Two-up row of vertical clip cards, built by about-film.js inside
   .g22-film-stage__frame (kept as the row wrapper so the DB markup's
   existing container doesn't need touching — only its children change).
   justify-content: center (client fix, 2026-07-27): about-film.js swaps in
   two flex:1 cards that already fill the row, but until that JS runs — or
   on the rare pageview where it doesn't — this flex row holds only the one
   raw, fixed-width .g22-film-stage__video (see the rule immediately below),
   which defaulted to flex-start and sat pinned to the panel's left edge
   instead of centred in it ("не поцентровано" client feedback). Centering
   here is a no-op once the JS duo-card row (each flex: 1 1 320px) is in
   place, since two growing cards already fill the full row width. */
.g22-film-stage__frame {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: clamp(16px, 2.4vw, 28px);
}

/* Pre-hydration / no-JS safety net (client fix, 2026-07-27): about-film.js
   replaces this raw <video> with the styled two-card duo on load, but until
   it runs (or in the rare case it never does) this exact class had zero
   CSS anywhere in this file — no aspect-ratio, no width cap, nothing — so
   the video rendered at its native pixel size, ballooning this block far
   larger than every other section on the page ("він правда завеликий"
   client feedback). Give it the same rounded, contained, 9:16 treatment as
   the post-hydration .g22-film-stage__card-frame/__card-video below so the
   block is never oversized in any state. */
.g22-film-stage__frame:has(> .g22-film-stage__video) {
	max-width: 320px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 20px;
	background: #17102b;
	box-shadow: var(--ps-shadow-lg);
}

.g22-film-stage__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g22-film-stage__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 320px;
	min-width: 0;
}

.g22-film-stage__card-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	background: #17102b;
	box-shadow: var(--ps-shadow-lg);
	transition: box-shadow var(--g22-t-med, 200ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-med, 200ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.g22-film-stage__card:focus-within .g22-film-stage__card-frame {
	box-shadow: var(--ps-shadow-xl);
	transform: scale(1.015);
}

@media (hover: hover) and (pointer: fine) {
	.g22-film-stage__card:hover .g22-film-stage__card-frame {
		box-shadow: var(--ps-shadow-xl);
		transform: scale(1.015);
	}
}

.g22-film-stage__card-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Light vignette for edge legibility — same treatment the old single frame
   used, kept per card. */
.g22-film-stage__card-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at center, rgba(20, 16, 44, 0.18) 0%, rgba(20, 16, 44, 0) 55%);
	pointer-events: none;
}

/* Per-card mono caption ("01 · ЕКСКУРСІЇ" / "02 · АРТТЕРАПІЯ"), injected by
   about-film.js — same pill/mono idiom the old three-chip meta row used. */
/* The inner-page prose rule has higher specificity than a bare component
   selector. Keep captions deliberately bright on the violet panel. */
body.page-pro-shkolu .g22-page-content p.g22-film-stage__card-caption {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

/* School-life showcase (22.07): a bigger, landscape promo film cut from
   real excursion/art-therapy/younger-school photos, sitting right below the
   ambient duo inside the same purple .g22-about-film card — an ADDITION
   to the duo-clip pass above, not a replacement (client-approved graded
   clips stay untouched). Kept in the same panel rather than its own
   full-width purple block so the section reads as one "video" moment
   instead of two competing panels back to back. */
.g22-life-showcase {
	position: relative;
	margin-top: clamp(16px, 2.4vw, 28px);
}

.g22-life-showcase__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	background: #17102b;
	box-shadow: var(--ps-shadow-lg);
	transition: box-shadow var(--g22-t-med, 200ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--g22-t-med, 200ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.g22-life-showcase:focus-within .g22-life-showcase__frame {
	box-shadow: var(--ps-shadow-xl);
	transform: scale(1.008);
}

@media (hover: hover) and (pointer: fine) {
	.g22-life-showcase:hover .g22-life-showcase__frame {
		box-shadow: var(--ps-shadow-xl);
		transform: scale(1.008);
	}
}

.g22-life-showcase__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g22-life-showcase__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at center, rgba(20, 16, 44, 0.16) 0%, rgba(20, 16, 44, 0) 55%);
	pointer-events: none;
}

body.page-pro-shkolu .g22-page-content p.g22-life-showcase__caption {
	margin: 12px 0 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1023px) {
	body.page-pro-shkolu .g22-about-film {
		padding: 24px;
		border-radius: 20px;
	}

	.g22-film-stage::before {
		width: 64px;
		height: 64px;
		top: -16px;
		right: -16px;
	}
}

@media (max-width: 767px) {
	.g22-life-showcase__frame {
		border-radius: 14px;
	}

	.g22-life-showcase__caption {
		font-size: 10px;
	}
}

@media (max-width: 767px) {
	.g22-film-stage__frame {
		gap: 12px;
	}

	.g22-film-stage__card {
		flex-basis: 44vw;
		max-width: none;
	}

	.g22-film-stage__card-frame {
		border-radius: 14px;
	}

	.g22-film-stage__card-caption {
		padding: 5px 10px;
		font-size: 10px;
	}
}

/* === Micro-interactions pass 17.07 === */
/*
 * Audit (curl of the live page + this stylesheet, 2026-07-17): the page
 * already carries a large "Motion layer" (see body.page-pro-shkolu
 * .g22-about-motion-ready rules above) covering the hero primary CTA, the
 * "Наш підхід" cards, the signup-choice panels and the form-toggle summary
 * — all fine as-is, not touched here.
 *
 * Gaps found and fixed below, each scoped to the exact selector that was
 * missing coverage (nothing above this marker edited):
 *  1. .g22-about-mid-cta__button link ("Запланувати знайомство") had a
 *     hover only inside the JS-gated .g22-about-motion-ready block and NO
 *     focus-visible at all — keyboard users got no feedback. Added a
 *     lift/scale hover (gated behind (hover: hover) and (pointer: fine),
 *     audit pass 2026-07-18) + an ungated focus-visible so it works with
 *     or without about-motion.js.
 *  2. .g22-about-hero__text-link ("Подивитися, як ми навчаємо →") and
 *     .g22-about-team__reviews-link ("Що говорять батьки та учні →") had
 *     the same problem: hover only behind the JS gate, no focus-visible.
 *     Added a gated ink-underline + 4px arrow-shift hover (pointer:fine
 *     only) plus an ungated focus-visible with the same treatment.
 *  3. .g22-about-story__fact (the 2016 / 1–11 / … stat strip) had zero
 *     interaction — added a hover-lift with the big value number
 *     "catching up" 40ms behind the card, same overlapping-action idiom
 *     home-studio.css uses for news-card ghost marks.
 *  4. (retired 18.07) .g22-film-stage__frame's hover box-shadow now lives
 *     directly on the "About film / cinema card" rule above, next to the
 *     rest of the screening-room panel's styling — no longer split across
 *     two file sections.
 *  5. A page-wide focus-visible safety net for any in-copy links this
 *     pass doesn't name explicitly (e.g. .g22-about-proof__link,
 *     .g22-excursion-contact a) so nothing on the page is keyboard-silent.
 * All of it sits under @media (prefers-reduced-motion: reduce) at the end.
 */

/* -------------------------------------------------- */
/* 1. Mid-page CTA — motion only; colors from g22-buttons */
/* -------------------------------------------------- */

.g22-about-mid-cta__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--ps-purple, #3f2780);
	outline-offset: 3px;
}

/* -------------------------------------------------- */
/* 2. Editorial text-links — chrome in g22-buttons.css  */
/* (LINK variant). Keep focus ring only.                */
/* -------------------------------------------------- */

.g22-about-hero__text-link a:focus-visible {
	outline: 3px solid var(--ps-yellow, #ffd141);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------- */
/* 3. "Хто ми" fact strip — hover-lift, value catches   */
/* up 40ms behind the card (overlapping-action idiom     */
/* from home-studio.css's news-card ghost mark).          */
/* -------------------------------------------------- */

.g22-about-story__fact {
	transition:
		transform var(--g22-t-med, 200ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		background-color var(--g22-t-fast, 100ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.g22-about-story__fact-value {
	display: inline-block;
	transition: transform var(--g22-t-fast, 100ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 40ms;
}

@media (hover: hover) and (pointer: fine) {
	.g22-about-story__fact:hover {
		transform: translateY(-4px);
		background-color: rgba(63, 39, 128, 0.04);
	}

	.g22-about-story__fact:hover .g22-about-story__fact-value {
		transform: translateY(-2px);
	}
}

/* -------------------------------------------------- */
/* 5. Page-wide focus-visible safety net — anything in    */
/* the flow not already covered by a component rule        */
/* above (in-copy links, e.g. .g22-about-proof__link,        */
/* .g22-excursion-contact a). Lower specificity than every    */
/* rule already declared, so it only fills real gaps.          */
/* -------------------------------------------------- */

.g22-page-shell a:focus-visible,
.g22-page-shell button:focus-visible,
.g22-page-shell summary:focus-visible,
.g22-page-shell [tabindex]:focus-visible {
	outline: 3px solid var(--ps-purple, #3f2780);
	outline-offset: 3px;
	transition: outline-offset var(--g22-t-fast, 100ms) var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.g22-about-belief a:focus-visible,
.g22-about-belief button:focus-visible,
.g22-about-signup a:focus-visible,
.g22-about-signup button:focus-visible,
.g22-about-signup summary:focus-visible {
	outline-color: var(--ps-yellow, #ffd141);
}

@media (prefers-reduced-motion: reduce) {
	.g22-about-mid-cta__button .wp-block-button__link,
	.g22-about-hero__text-link a,
	.g22-about-team__reviews-link a,
	.g22-about-story__fact,
	.g22-about-story__fact-value,
	.g22-film-stage__card-frame,
	.g22-page-shell a:focus-visible,
	.g22-page-shell button:focus-visible,
	.g22-page-shell summary:focus-visible,
	.g22-page-shell [tabindex]:focus-visible {
		transition: none;
	}

	.g22-about-mid-cta__button .wp-block-button__link:hover,
	.g22-about-hero__text-link a:hover,
	.g22-about-team__reviews-link a:hover,
	.g22-about-story__fact:hover,
	.g22-about-story__fact:hover .g22-about-story__fact-value {
		transform: none;
	}
}

/* === Alive pass 17.07 === */
/* Companion to assets/js/about-alive.js. Everything below is additive on
   top of the motion layer above (not edited). Five features:
   1) --g22-scroll-drift on .g22-about-hero, read only by the inset photo
      (the main hero/story/team photos already get their own scroll
      transform from about-motion.js — this does not duplicate that).
   2) count-up target styling is functional only (no extra CSS needed —
      the JS writes plain textContent into the existing fact-value node).
   3) pointer tilt on the team photo, with a matching shadow lift.
   4) word-mask reveal spans (.g22-alive-w/.g22-alive-w__in) injected by
      JS into the five section H2s.
   5) --g22-card-catch continuous scroll lift on the belief/mid-cta card
      shells. See about-alive.js's file header for why this stands in for
      the background-blend approach: the page's other sections share one
      flat body background with no seam to cross-fade, so there is
      nothing for a --g22-bg-blend layer to blend between. These two
      cards are the only real opaque-vs-flat edges on the page. */

body.page-pro-shkolu .g22-about-hero__image--inset img {
	transform: translate3d(0, calc(var(--g22-scroll-drift, 0) * 18px), 0) scale(1.06);
	transform-origin: center;
	backface-visibility: hidden;
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image {
	transition: box-shadow 420ms var(--g22-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	will-change: transform;
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image.g22-tilt-active {
	box-shadow: var(--ps-shadow-lg);
}

/* Word-mask typographic reveal. The outer span is the overflow-hidden
   mask; the inner span carries the transform so nothing ever clips the
   surrounding line-height. Delay is set per-word by JS via inline
   transition-delay (stagger), so only the transform/transition live here. */
body.page-pro-shkolu .g22-alive-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

body.page-pro-shkolu .g22-alive-w__in {
	display: inline-block;
	transform: translateY(110%) rotate(3deg);
	transform-origin: left bottom;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

body.page-pro-shkolu .g22-alive-w__in.g22-alive-in {
	transform: translateY(0) rotate(0deg);
}

/* Card catch-up lift: continuous, scroll-linked, transform-only. Applies
   to the shell only — about-motion.js already owns the kicker/title/copy
   children inside these two cards, so this never touches the same node. */
body.page-pro-shkolu .g22-about-belief,
body.page-pro-shkolu .g22-about-mid-cta {
	transform: translate3d(0, calc((1 - var(--g22-card-catch, 1)) * 24px), 0);
	transition: transform 60ms linear;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	body.page-pro-shkolu .g22-about-hero__image--inset img {
		transform: none;
	}

	body.page-pro-shkolu .g22-about-team .g22-team-grid__image {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-pro-shkolu .g22-alive-w__in {
		transition: none;
		transform: none;
	}

	body.page-pro-shkolu .g22-about-belief,
	body.page-pro-shkolu .g22-about-mid-cta {
		transform: none;
		transition: none;
	}
}

/* === Theatre pass 17.07 === */
/* Companion to assets/js/about-theatre.js.
   Set-piece 1 (the 240vh pinned cinema theatre: .g22-theatre /
   .g22-theatre-panel / .g22-theatre-overlay / the cursor badge) was
   retired on 18.07 as part of the screening-room redesign — client
   feedback called the pin + Dior campaign treatment "alien to the page".
   about-theatre.js's initTheatre() now no-ops, so those wrapper classes
   are never created; the CSS that targeted them has been removed rather
   than left stacked as dead overrides. .g22-about-film now lives in
   .g22-film-stage's own section above ("About film / cinema card"),
   styled as a static rounded purple panel like .g22-about-belief.

   Remaining set-pieces, unaffected by the above:
    2. One-time yellow circle-wipe intro (.g22-intro-overlay/__circle).
    3. Magnetic CTAs need no CSS (transform is set inline by the JS).
    4. Hero depth parallax — pure CSS, reads the existing --g22-scroll-drift
       variable about-alive.js already writes on .g22-about-hero. No new JS
       owner, just two more consumers at different rates. */

/* -------------------------------------------------- */
/* 2. One-time yellow circle-wipe intro                */
/* -------------------------------------------------- */

.g22-intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #3f2780;
}

.g22-intro-overlay--fade {
	transition: opacity 300ms ease;
	opacity: 0;
}

.g22-intro-circle {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffd141;
	transform: scale(1);
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.g22-intro-circle--pulse {
	animation: g22-intro-pulse 300ms ease-out;
}

.g22-intro-circle--expand {
	transform: scale(var(--g22-intro-scale, 200));
}

@keyframes g22-intro-pulse {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.7);
	}

	100% {
		transform: scale(1);
	}
}

/* Set-piece 3 (.g22-theatre-cursor, a pointer-following "▶" badge over the
   cinema card) was only ever started from initTheatre() — retired along
   with set-piece 1 above (18.07), see that block's comment. */

/* -------------------------------------------------- */
/* 4. Hero depth parallax — reads the existing           */
/* --g22-scroll-drift variable about-alive.js writes on   */
/* .g22-about-hero. Main/inset photos keep their own rate  */
/* untouched; these are two additional, slower/faster       */
/* layers for depth.                                          */
/* -------------------------------------------------- */

body.page-pro-shkolu .g22-about-hero__media-note {
	transform: translate3d(0, calc(var(--g22-scroll-drift, 0) * 28.8px), 0);
	will-change: transform;
}

body.page-pro-shkolu .g22-about-hero__media {
	transform: translate3d(0, calc(var(--g22-scroll-drift, 0) * 7.2px), 0);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	body.page-pro-shkolu .g22-about-hero__media-note,
	body.page-pro-shkolu .g22-about-hero__media {
		transform: none;
	}
}

/* Client deck cascade lock. */
/* max-width tightened 900px -> 760px (client fix, 2026-07-27): "the panel really
   is too big here" — the panel still read as the single largest element on
   the page even after the earlier 1160px -> 900px cascade lock. Paired with
   the .g22-film-stage centring fix above. */
body.page-pro-shkolu .g22-about-film {
	box-sizing: border-box;
	max-width: 760px;
}

body.page-pro-shkolu .g22-life-showcase__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	content: url("../../images/photos/g22-shoot-candid.webp?v3");
}

body.page-pro-shkolu .g22-about-hero__image--main img {
	content: url("../../images/photos/g22-about-hero-read.webp?v5");
}

body.page-pro-shkolu .g22-about-hero__image--inset img {
	content: url("../../images/photos/g22-pro-inset.webp?v3");
}

body.page-pro-shkolu .g22-about-story__image img {
	content: url("../../images/photos/g22-about-story-dots.webp?v4");
}

body.page-pro-shkolu .g22-about-team .g22-team-grid__image img {
	content: url("../../images/photos/g22-shoot-hero.webp?v3");
	object-position: center 44%;
}

/* ---- ui-ux-pro-max checklist pass (interaction affordance + premium image hover) ---- */
body.page-pro-shkolu a,
body.page-pro-shkolu button,
body.page-pro-shkolu summary,
body.page-pro-shkolu [role="button"] {
	cursor: pointer;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body.page-pro-shkolu .g22-about-hero__image--main img,
	body.page-pro-shkolu .g22-about-story__image img,
	body.page-pro-shkolu .g22-team-grid__image img {
		transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	body.page-pro-shkolu .g22-about-hero__image--main:hover img,
	body.page-pro-shkolu .g22-about-story__image:hover img,
	body.page-pro-shkolu .g22-team-grid__image:hover img {
		transform: scale(1.045);
	}
}