/* ==========================================================================
   Lady Vi Aesthetic — design-system/estetico-lady-v/MASTER.md implementation
   ========================================================================== */

:root {
	/* Colors — flat brand purple sampled directly from the logo background (#601A66) */
	--color-ink: #601A66;
	--color-primary: #601A66;
	--color-primary-light: #883289;
	--color-primary-dark: #45134C;
	--color-on-primary: #FFFFFF;
	--color-background: #FCF7FA;
	--color-card: #FFFFFF;
	/* Body/heading text and secondary/meta text — two shades of purple
	   instead of near-black (client asked for purple text, not black,
	   2026-07-29, then asked to lighten it further since the first pass
	   at #2E1848 still read as near-black). ~11.4:1 and ~7.3:1 contrast
	   against white/lavender backgrounds respectively — preserved by the
	   2026-09-22 hue rotation below, not recomputed from scratch. */
	--color-foreground: #601A66;
	--color-muted: #F6EAF2;
	--color-muted-foreground: #883289;
	--color-border: #EDD7E7;
	--color-border-dark: rgba(255, 255, 255, 0.12);
	--color-destructive: #DC2626;
	--color-ring: #883289;

	/* Named palette aliases used by section backgrounds below */
	--color-purple-primary: #601A66;
	--color-purple-dark: #45134C;
	--color-lavender-light: #F4E2EF;
	--color-graphite: #2B1729;

	/* Alternating section background rhythm (white / lavender / white / purple) */
	--color-section-white: #FFFFFF;
	--color-lavender-bg: #FAF3F9;

	/* Typography — 2026-07-29: client asked for Nunito across the entire
	   site, dropping the Great Vibes script accents. Nunito is a bold
	   rounded sans matching the client's business-card procedure list,
	   verified to render real Cyrillic glyphs (unlike Baloo 2/Fredoka/
	   Quicksand/Varela Round, which all silently fell back to a system
	   serif on Cyrillic text in a browser render test).
	   2026-09-17: the "LV aesthetics / By Viktoriia Lebid" logo wordmark
	   (.site-logo__word / .site-logo__script and their .lead-popup__logo-
	   equivalents) was tried in Great Vibes script but the client found it
	   unreadable — reverted to a plain sans stacked as two lines, then
	   2026-09-18: client asked for something "more interesting" than plain
	   sans, so the wordmark moved to Playfair Display (bold upright for the
	   name, italic for the byline) — a legible serif with more character,
	   hardcoded on those selectors like Great Vibes was rather than routed
	   through --font-script-latin, since that variable also feeds
	   .certificate-mock__seal, which should stay on Nunito, then
	   2026-09-22: client sent a finished circular logo graphic (Lady Vi
	   Aesthetic by Victoria Lebid) replacing the text wordmark in the
	   header — .site-logo__word/__script are gone there, cropped to a
	   circle via border-radius so the badge's own purple background blends
	   into .site-header's gradient. The .lead-popup__logo-word/__script
	   text pair (still Playfair Display) is untouched since the client's
	   ask was scoped to the header mark, then same day: client said the
	   badge looked out of place, so as a first pass the disc fill was
	   recolored to match --color-primary #48267D (the site's purple) via
	   a color-distance mask — then the client asked to go the other way
	   instead: keep the logo file exactly as delivered, and retune the
	   *site's* purple to match the logo's own background color, since the
	   logo is now the brand source of truth, not the other way around.
	   The recolor was reverted (original file restored) and every purple
	   token below — plus the header/sticky-cta gradient, the .section--dark
	   gradient stop, the heading-gradient/callout-border accent, and the
	   handful of hardcoded shadow rgba()s that used to spell out
	   rgba(72, 38, 125, …) — was rotated by the same +27.27° in OKLCH hue
	   (L and C held fixed per token, so the ~11.4:1/~7.3:1 text-contrast
	   ratios noted above survive the shift; a naive HSL hue-rotate does
	   not preserve those, it was tried first and dropped ~2 points of
	   contrast). --color-ink/--color-primary (#601A66) is now the logo's
	   own sampled disc color, same as the original #48267D was sampled
	   from the previous logo. Same day: client also asked the header
	   logo go back to being the text wordmark (.site-logo__word/__script,
	   restored here verbatim). First guess at "put the circular graphic
	   here, on the right" read that as the header actions row (a 44px
	   .site-header__badge next to the nav) — wrong guess, client meant
	   the empty right-hand side of the hero, next to the headline. That
	   badge class is gone; see .hero__logo below instead.
	   2026-09-23: client sent a reference image of "Lady Vi Aesthetic /
	   by Victoria Lebid" set in a connected script with a glow, on a flat
	   purple card, asking the header text to look like it — this is the
	   same script style as the circular logo's lettering, not a new
	   direction. Rather than guess a Google Font (Great Vibes was already
	   tried at this exact spot on 2026-09-17 and rejected as unreadable —
	   no reason a different guess fares better), extracted the reference
	   image's white/glow text onto a transparent background via a
	   luminance-threshold alpha matte (text is bright against a uniformly
	   dark card, so a soft ramp from lum 95→190 cleanly separates them,
	   no ML cutout tool needed) and cropped tight. .site-logo__word/
	   __script are gone from the header; .site-logo now holds a single
	   .site-logo__wordmark <img> (site-wordmark.png). Scoped to the
	   header only, per the ask — footer (.site-footer__brand-word/
	   -script) and the popup (.lead-popup__logo-word/-script) still run
	   live Playfair Display text and were left alone. */
	--font-sans: 'Nunito', sans-serif;
	--font-heading: 'Nunito', sans-serif;
	--font-script-latin: 'Nunito', sans-serif;
	--font-script-uk: 'Nunito', sans-serif;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	--text-5xl: 4rem;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	/* Shadows — layered (tight ambient + soft diffuse) for a smoother, more
	   natural falloff than a single hard-edged box-shadow. */
	--shadow-sm: 0 1px 2px rgba(96, 26, 102, 0.04), 0 1px 1px rgba(20, 9, 20, 0.05);
	--shadow-md: 0 2px 5px rgba(96, 26, 102, 0.05), 0 8px 20px rgba(20, 9, 20, 0.09);
	--shadow-lg: 0 4px 10px rgba(96, 26, 102, 0.06), 0 16px 32px rgba(20, 9, 20, 0.13);
	--shadow-xl: 0 8px 16px rgba(96, 26, 102, 0.07), 0 26px 48px rgba(20, 9, 20, 0.16);
	--glow-brand: 0 0 32px rgba(96, 26, 102, 0.4);

	/* Softer, brand-tinted border for use in place of harsh neutral/black borders */
	--color-border-soft: rgba(96, 26, 102, 0.10);

	/* Shared hover-motion timing for buttons/cards/accordions */
	--ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { min-height: 100dvh; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-foreground);
	background: var(--color-background);
	/* reserve space so the fixed mobile sticky CTA never covers content */
	padding-bottom: calc(64px + env(safe-area-inset-bottom));
	position: relative;
}

/* Whole-page grain — barely-there texture so large flat fills (hero, dark
   sections, footer) read as printed/textured rather than a flat digital
   fill. Kept just above imperceptible: 2.5% opacity. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.025;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCglMjNuKScvPjwvc3ZnPgo=");
	background-repeat: repeat;
}

@media (min-width: 1024px) {
	body { padding-bottom: 0; }
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--space-md);
}

p { margin: 0 0 var(--space-md); }

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

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font-family: inherit; }

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-on-primary);
	color: var(--color-primary);
	padding: var(--space-sm) var(--space-md);
	z-index: 1000;
}
.skip-link:focus {
	left: var(--space-md);
	top: var(--space-md);
}

:focus-visible {
	outline: 3px solid var(--color-ring);
	outline-offset: 2px;
}

.script-uk {
	font-family: var(--font-script-uk);
	font-size: 1.4em;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(180deg, rgba(113, 37, 120, 0.94) 0%, rgba(88, 24, 94, 0.92) 100%);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 35px rgba(22, 6, 24, 0.12);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin-right: auto;
}
.site-logo__wordmark {
	display: block;
	height: 56px;
	width: auto;
}

.site-nav__list {
	list-style: none;
	display: none;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	color: var(--color-on-primary);
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: var(--text-sm);
	padding: var(--space-sm) 0;
	position: relative;
	cursor: pointer;
	transition: color 200ms ease;
}
.site-nav__list a:hover { color: var(--color-primary-light); }
.site-nav__list a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--color-primary-light);
	transform: scaleX(0);
	transition: transform 200ms ease;
}
.site-nav__list a:hover::after { transform: scaleX(1); }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--color-border-dark);
	border-radius: 8px;
	color: var(--color-on-primary);
	cursor: pointer;
	transition: background 200ms ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }

.btn-primary.btn-primary--nav { display: none; padding: 10px 20px; font-size: var(--text-sm); min-height: 36px; }

/* Mobile nav drawer — fixed + an explicit vh-based height (not bottom: 0)
   because .site-header's backdrop-filter/sticky positioning makes it the
   containing block for this fixed element, so percentage/bottom offsets
   would resolve against the 64px header box instead of the viewport. Using
   height: calc(100vh - 64px) sidesteps that and still reaches the bottom of
   the screen, giving a fully opaque panel instead of a content-height box
   that leaves the rest of the page visible underneath it. */
.site-nav.is-open .site-nav__list {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 64px;
	left: 0; right: 0;
	height: calc(100vh - 64px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-purple-dark) 100%);
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border-dark);
	gap: var(--space-md);
	z-index: 10;
}

@media (min-width: 768px) {
	.site-nav__list { display: flex; }
	.site-nav.is-open .site-nav__list { position: static; height: auto; overflow: visible; padding: 0; border: 0; flex-direction: row; }
	.btn-primary.btn-primary--nav { display: inline-flex; }
	.nav-toggle { display: none; }
	body.nav-open { overflow: visible; }
}

body.nav-open { overflow: hidden; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
	color: var(--color-on-primary);
	padding: 14px 28px;
	border: none;
	border-radius: 10px;
	font-weight: 700;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	min-height: 44px;
	transition: transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium), background 250ms var(--ease-premium);
	cursor: pointer;
}
.btn-primary:hover {
	background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	transform: translateY(-2px) scale(1.02);
	box-shadow: var(--shadow-xl), var(--glow-brand);
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Same purple as the background it sits on (hero, header, dark sections) —
   invert to white so the button doesn't disappear into the section. */
.hero .btn-primary,
.site-header .btn-primary,
.section--dark .btn-primary {
	background: linear-gradient(180deg, #FFFFFF 0%, #FDF8FC 100%);
	color: var(--color-primary);
}
.hero .btn-primary:hover,
.site-header .btn-primary:hover,
.section--dark .btn-primary:hover {
	background: var(--color-primary-light);
	color: var(--color-on-primary);
	box-shadow: 0 12px 28px rgba(96, 26, 102, 0.32), 0 4px 10px rgba(96, 26, 102, 0.2);
	transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 12px 26px;
	border-radius: 10px;
	font-weight: 600;
	min-height: 44px;
	transition: background 250ms var(--ease-premium), color 250ms var(--ease-premium), transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium);
	cursor: pointer;
}
.btn-secondary:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
	transform: translateY(-2px) scale(1.02);
	box-shadow: var(--shadow-lg);
}

.btn-secondary--on-dark {
	color: var(--color-on-primary);
	border-color: var(--color-border-dark);
}
.btn-secondary--on-dark:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-on-primary);
	box-shadow: none;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: var(--space-2xl) 0; }
.section--light { background: var(--color-section-white); }
.section--lavender { background: var(--color-lavender-bg); }

/* Alternating white / lavender rhythm down the page — each section is a
   flat, solid fill (no gradients, no soft blending between neighbors) so
   the color change reads as a sharp block-to-block transition. Class order
   in each template-parts/*.php file is what sets the rhythm; see
   front-page.php for the section sequence. */

/* Faint blurred purple blobs behind a handful of sections — pure depth, not
   a pattern. Barely perceptible: 5–8% opacity behind a 150–300px blur.
   Positioned above their section background but below the section's own
   .container content (see the z-index:1 rule below), one per section so
   they never stack into a visible cluster. */
#advantages,
#before-after,
#pricing,
#reviews,
#certificates {
	position: relative;
	overflow: hidden;
}
#advantages > .container,
#before-after > .container,
#pricing > .container,
#reviews > .container,
#certificates > .container {
	position: relative;
	z-index: 1;
}
#advantages::before,
#before-after::before,
#pricing::before,
#reviews::before,
#certificates::before,
.section--dark::after {
	content: '';
	position: absolute;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: var(--color-primary);
	pointer-events: none;
	z-index: 0;
}
#advantages::before { top: -180px; right: -140px; opacity: 0.06; filter: blur(200px); }
#before-after::before { top: -160px; left: -140px; opacity: 0.05; filter: blur(210px); }
#pricing::before { bottom: -220px; left: -160px; opacity: 0.05; filter: blur(220px); }
#reviews::before { top: -160px; left: -180px; opacity: 0.06; filter: blur(210px); background: var(--color-primary-light); }
#certificates::before { bottom: -200px; right: -150px; opacity: 0.07; filter: blur(190px); }
.section--dark::after { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.08; filter: blur(260px); background: var(--color-primary-light); }

.section--dark {
	background: linear-gradient(165deg, #651D6E 0%, var(--color-ink) 45%, var(--color-purple-dark) 100%);
	color: var(--color-on-primary);
	position: relative;
	overflow: hidden;
}
.section--dark .container { position: relative; z-index: 1; }

.section__title {
	font-size: var(--text-2xl);
	text-align: center;
	margin-bottom: var(--space-xl);
}
.section__title--on-dark { color: var(--color-on-primary); }

.section__subtitle {
	font-size: 1rem;
	text-align: center;
	color: var(--color-primary);
	opacity: 0.75;
	margin: 0 0 36px;
}
.section__title:has(+ .section__subtitle) { margin-bottom: 8px; }

@media (min-width: 1024px) {
	.section { padding: var(--space-3xl) 0; }
	.section__title { font-size: var(--text-3xl); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	/* Single-hue purple glow (client approved 2026-07-17 as an exception to
	   the flat-purple/no-gradient rule) — soft light rising from the upper
	   right, fading to a deeper purple at the edges. Still strictly one hue
	   family, no purple→pink→orange. */
	background: radial-gradient(130% 110% at 80% 15%, var(--color-primary-light) 0%, var(--color-purple-primary) 45%, var(--color-purple-dark) 75%, var(--color-graphite) 100%);
	color: var(--color-on-primary);
	position: relative;
	overflow: hidden;
	padding: var(--space-2xl) 0;
	scroll-margin-top: 64px;
}
.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-xl);
	text-align: center;
}

/* Layered silk-wave shapes along the bottom edge — three translucent bands
   in the same purple family (no new hues) rolling at slightly different
   heights to echo the "abstract waves + glow" reference (client decision
   2026-07-17, reverting the botanical line-art which read as busy wallpaper). */
.hero__waves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 42%;
	min-height: 130px;
	z-index: 0;
	pointer-events: none;
}
.hero__waves svg { display: block; width: 100%; height: 100%; }
.hero__wave--back { fill: var(--color-graphite); opacity: 0.5; }
.hero__wave--mid { fill: var(--color-purple-dark); opacity: 0.55; }
.hero__wave--front { fill: var(--color-primary-light); opacity: 0.3; }
/* Badge sits in the hero's own radial glow (upper-right, see .hero above),
   which already brightens exactly where the logo lands. Hidden below 1024px
   — the "no photo in the hero" call from 2026-07-17 was about a hero photo
   specifically, but the mobile hero is already tight (eyebrow, title,
   subtitle, two buttons, trust bar), so a 2nd column badge stays desktop-only
   rather than reopening that call for small screens too. */
.hero__logo { display: none; }
.hero__logo img {
	display: block;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--glow-brand), 0 20px 48px rgba(0, 0, 0, 0.25);
}
.hero__eyebrow { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-sm); }
.hero__title { font-size: var(--text-4xl); margin-bottom: var(--space-md); }
.hero__subtitle { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.8); max-width: 60ch; margin-left: auto; margin-right: auto; }
.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
}

@media (min-width: 768px) {
	.hero__actions { flex-direction: row; justify-content: center; }
}

/* Trust bar — real synced Google rating/count (see template-parts/hero.php)
   plus the years-of-experience stat already used in the advantages section.
   A quiet thin top rule separates it from the CTAs rather than another card. */
.hero-trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-md) var(--space-lg);
	margin: var(--space-xl) 0 0;
	padding: var(--space-lg) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-trust__item {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	padding-right: var(--space-lg);
}
.hero-trust__item:last-child { padding-right: 0; }

@media (min-width: 640px) {
	.hero-trust__item:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 22px;
		background: rgba(255, 255, 255, 0.18);
	}
}

.hero-trust__icon { width: 20px; height: 20px; flex-shrink: 0; color: rgba(255, 255, 255, 0.85); }
.hero-trust__value { font-family: var(--font-sans); font-weight: 800; font-size: var(--text-lg); color: var(--color-on-primary); }
.hero-trust__label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); white-space: nowrap; }

@media (min-width: 1024px) {
	.hero-trust { justify-content: flex-start; }
}

@media (min-width: 1024px) {
	.hero { padding: var(--space-4xl) 0; scroll-margin-top: 72px; }
	.hero__inner { grid-template-columns: minmax(0, 620px) 1fr; align-items: center; text-align: left; }
	.hero__content { max-width: 620px; }
	.hero__subtitle { margin-left: 0; }
	.hero__actions { justify-content: flex-start; }
	.hero__logo { display: flex; justify-content: center; }
}

/* ==========================================================================
   Cards / grids
   ========================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: var(--space-lg);
	box-shadow: var(--shadow-md);
	transition: box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }

.card__photo { aspect-ratio: 4 / 3; margin-bottom: var(--space-md); }

.card__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.card__body { color: var(--color-foreground); }
.card__price { font-weight: 700; color: var(--color-primary); font-size: var(--text-lg); margin: var(--space-sm) 0 0; }

.card--service-link { display: block; cursor: pointer; }
.card__link-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--text-sm);
	margin-top: var(--space-sm);
}

.clinic-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	max-width: 760px;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.clinic-intro { grid-template-columns: minmax(200px, 280px) 1fr; align-items: start; gap: var(--space-xl); max-width: 1100px; }
	.clinic-intro--no-photo { grid-template-columns: 1fr; max-width: 560px; text-align: center; }
}

.clinic-intro__photo { aspect-ratio: 3 / 4; border-radius: 16px; box-shadow: var(--shadow-md); }
.clinic-intro__caption {
	margin: var(--space-sm) 0 0;
	text-align: center;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
}

.clinic-intro__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
}
.clinic-intro--no-photo .clinic-intro__content { align-items: center; }

.clinic-intro__text {
	margin: 0;
	font-size: var(--text-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}
.clinic-intro__text p:last-child { margin-bottom: 0; }
.clinic-intro__text strong { color: #fff; font-weight: 700; }

.clinic-intro__stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.clinic-intro__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	min-width: 140px;
}
.clinic-intro__stat-value { font-size: var(--text-xl); font-weight: 700; color: var(--color-on-primary); }
.clinic-intro__stat-icon { color: var(--color-on-primary); }
.clinic-intro__stat-label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }

.clinic-intro__cta { margin-top: var(--space-xs); }

.clinic-intro__gallery-wrap { max-width: 760px; margin: var(--space-2xl) auto 0; }
.clinic-intro__gallery-title { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.65); margin: 0 0 var(--space-md); }
.clinic-intro__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
@media (min-width: 640px) {
	.clinic-intro__gallery { grid-template-columns: repeat(3, 1fr); }
}
.clinic-intro__gallery-item { aspect-ratio: 4 / 3; border-radius: 14px; }

.card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--color-muted);
	color: var(--color-primary);
	margin-bottom: var(--space-md);
}

.advantages-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}
@media (min-width: 1024px) {
	.advantages-showcase {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-2xl);
		align-items: stretch;
	}
}

/* 2x2 grid of photo placeholders — stand-ins for real specialist/studio
   shots not yet taken. Each tile pairs a soft icon container with a label
   so the section still reads clearly before real photography drops in. */
.advantages-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	align-content: start;
}

.advantages-photo-tile {
	aspect-ratio: 1 / 1;
	border-radius: 22px;
	background: var(--color-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.advantages-photo-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.advantages-photo-tile__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: var(--color-card);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.advantages-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-2xl);
}
.advantages-cta .btn-primary { gap: var(--space-sm); }

.advantages-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	justify-content: center;
}

.advantages-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	background: var(--color-card);
	border-radius: 22px;
	padding: 26px;
	box-shadow: var(--shadow-md);
	transition: box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.advantages-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.advantages-card__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-lavender-light);
	color: var(--color-primary);
}

.advantages-card__title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-foreground);
}
.advantages-card__subtitle {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	/* Darker than the usual --color-muted-foreground (#6B6178, ~4.7:1 here) —
	   this text sits on the lavender section background, and 4.7:1 is too
	   close to the WCAG AA floor of 4.5:1. #5F4A5B gives ~6.5:1. */
	color: #5F4A5B;
}

.card--on-dark {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}
.card--on-dark .card__title { color: var(--color-on-primary); }
.card--on-dark .card__body,
.card--on-dark .card__specialty { color: rgba(255, 255, 255, 0.75); }
.card--on-dark .card__icon { background: rgba(255, 255, 255, 0.1); color: var(--color-on-primary); }

/* ==========================================================================
   Services coverflow carousel
   ========================================================================== */

.services-carousel { position: relative; }

.services-carousel__viewport {
	position: relative;
	overflow: hidden;
	height: 490px;
}

.services-carousel__track { position: relative; height: 100%; }

.services-carousel__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(270px, 76vw);
	height: 100%;
	transform: translateX(-50%);
	opacity: 0;
	transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 450ms ease, filter 450ms ease;
	will-change: transform, opacity, filter;
}

.service-slide {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: box-shadow 250ms var(--ease-premium), border-color 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.service-slide:hover,
.service-slide:focus-visible {
	border-color: var(--color-primary-light);
	box-shadow: 0 20px 40px rgba(96, 26, 102, 0.2), 0 6px 14px rgba(96, 26, 102, 0.12);
	transform: translateY(-4px);
}

.service-slide__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 var(--space-md);
	border-radius: 12px;
	background: var(--color-muted);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.service-slide__media--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-slide__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1.25;
	margin-bottom: var(--space-sm);
	color: var(--color-foreground);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	flex-shrink: 0;
}
.service-slide__desc {
	color: var(--color-muted-foreground);
	font-size: var(--text-sm);
	line-height: 1.45;
	margin-bottom: var(--space-md);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.service-slide__link {
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--text-sm);
	margin-top: auto;
	flex-shrink: 0;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 200ms ease, color 200ms ease;
}
.service-slide:hover .service-slide__link,
.service-slide:focus-visible .service-slide__link {
	color: var(--color-primary-dark);
	text-decoration-color: currentColor;
}

.services-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

/* Below 1024px the dot row can outgrow the available width (one dot per
   service category), pushing the next-arrow out toward the container edge —
   right where the fixed Instagram/Telegram/Viber buttons sit (.social-fab,
   right: var(--space-lg)). Letting the dots scroll instead of forcing the
   whole row wider keeps the arrow clear of that reserved zone. */
@media (max-width: 1023px) {
	.services-carousel__controls { padding-right: 64px; }
}

.services-carousel__arrow {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-card);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.services-carousel__arrow:hover,
.services-carousel__arrow:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	transform: scale(1.08);
}
.services-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.services-carousel__arrow:disabled:hover { background: var(--color-card); border-color: var(--color-border); color: var(--color-primary); transform: none; }

.services-carousel__dots {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.services-carousel__dots::-webkit-scrollbar { display: none; }
.services-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 150ms ease, transform 150ms ease;
}
.services-carousel__dot.is-active { background: var(--color-primary); transform: scale(1.4); }

@media (min-width: 1024px) {
	.services-carousel__viewport { height: 470px; }
	.services-carousel__slide { width: 300px; }
}

/* ==========================================================================
   Photo treatment
   ========================================================================== */

.photo-frame {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}
.photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.photo-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(96, 26, 102, 0.1);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ==========================================================================
   До / Після comparison slider
   ========================================================================== */

.ba-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin: 0 0 var(--space-xl);
}

.ba-filter {
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-card);
	color: var(--color-muted-foreground);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background 220ms var(--ease-premium), color 220ms var(--ease-premium), border-color 220ms var(--ease-premium);
}
.ba-filter:hover {
	border-color: var(--color-primary-light);
	color: var(--color-primary);
}
.ba-filter.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.ba-slider__img.is-hidden,
.ba-slider__placeholder.is-hidden,
.ba-badge.is-hidden,
.ba-main__caption.is-hidden {
	display: none;
}

.ba-main {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
}

.ba-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--color-muted);
	touch-action: pan-y;
}
.ba-slider__img,
.ba-slider__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ba-slider__before-wrap {
	position: absolute;
	inset: 0;
}
.ba-slider__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-on-primary);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
}
.ba-slider__placeholder--before {
	background: linear-gradient(135deg, var(--color-muted-foreground), var(--color-graphite));
}
.ba-slider__placeholder--after {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
}
.ba-slider__label {
	position: absolute;
	top: var(--space-md);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: rgba(36, 17, 32, 0.55);
	color: #fff;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	pointer-events: none;
	z-index: 2;
}
.ba-slider__label--before { left: var(--space-md); }
.ba-slider__label--after { right: var(--space-md); }
.ba-slider__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #fff;
	transform: translateX(-50%);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.ba-slider__handle svg {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary);
	box-shadow: var(--shadow-md);
}
.ba-slider__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	z-index: 3;
}
.ba-slider:focus-within .ba-slider__handle {
	outline: 3px solid var(--color-ring);
	outline-offset: 4px;
	border-radius: 50%;
}

.ba-main__info {
	text-align: center;
	margin-top: var(--space-lg);
}
.ba-main__title {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	color: var(--color-foreground);
	margin: 0 0 var(--space-xs);
}
.ba-main__caption {
	color: var(--color-muted-foreground);
	margin: 0 0 var(--space-sm);
}
.ba-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--color-lavender-light);
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 600;
}

.ba-cta {
	text-align: center;
}

@media (min-width: 768px) {
	.ba-slider { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Price list — table on desktop, stacked cards on mobile
   ========================================================================== */

.price-search {
	position: relative;
	max-width: 480px;
	margin: 0 auto var(--space-xl);
}
.price-search__icon {
	position: absolute;
	left: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-muted-foreground);
	pointer-events: none;
}
input.price-search__input { padding-left: 44px; }
.price-search__input::-webkit-search-cancel-button { cursor: pointer; }

.price-results-count {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
	margin: var(--space-sm) 0 var(--space-md);
}

.price-empty-state {
	text-align: center;
	color: var(--color-muted-foreground);
	margin-bottom: var(--space-lg);
}

.price-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.price-category.is-filtered-hidden { display: none; }
.price-row.is-hidden,
.price-subgroup.is-hidden,
.price-zone.is-hidden { display: none; }

.price-category {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 250ms var(--ease-premium);
}
.price-category[open] { box-shadow: var(--shadow-md); }

.price-category__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-lg);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-lg);
	cursor: pointer;
	list-style: none;
	transition: background 250ms var(--ease-premium);
}
.price-category__summary::-webkit-details-marker { display: none; }
.price-category__summary:hover { background: var(--color-muted); }

.price-category__chevron { color: var(--color-primary); transition: transform 300ms var(--ease-premium); flex-shrink: 0; }
.price-category[open] > .price-category__summary .price-category__chevron { transform: rotate(180deg); }

.price-category__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 180ms ease;
}
.price-category[open] > .price-category__panel {
	grid-template-rows: 1fr;
	transition: grid-template-rows 350ms ease;
}

.price-category__body {
	min-height: 0;
	overflow: hidden;
	padding: 0 var(--space-lg) var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.price-subgroup {
	font-weight: 700;
	color: var(--color-primary);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: var(--space-md) 0 0;
}

.price-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-xs) var(--space-md);
	border-bottom: 1px solid var(--color-border-soft);
	padding: 10px 0;
}
.price-row:last-child { border-bottom: none; }
/* "Послуга"/"Ціна" labels are decorative only (name-then-price order is
   already self-explanatory) — hidden on every breakpoint, not just desktop,
   so the mobile list stays as compact as the desktop one. */
.price-row__label { display: none; }
.price-row__name { font-weight: 600; }
.price-row__price { font-weight: 700; color: var(--color-primary); text-align: right; }

/* Nested body-zone accordion (e.g. Обличчя, Руки, Ноги) inside a category */
.price-zone {
	margin-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
}
.price-zone:first-child {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

.price-zone__summary {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	margin: 0 calc(var(--space-sm) * -1);
	border-radius: 10px;
	cursor: pointer;
	list-style: none;
	transition: background 250ms var(--ease-premium);
}
.price-zone__summary::-webkit-details-marker { display: none; }
.price-zone__summary:hover { background: var(--color-lavender-light); }

.price-zone__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--color-purple-primary);
}
.price-zone__icon svg { display: block; }

.price-zone__name { font-weight: 600; }

.price-zone__chevron { margin-left: auto; color: var(--color-primary); transition: transform 300ms var(--ease-premium); flex-shrink: 0; }
.price-zone[open] > .price-zone__summary .price-zone__chevron { transform: rotate(180deg); }

.price-zone__body {
	padding: var(--space-xs) var(--space-sm) 0;
}

.price-note { text-align: center; color: var(--color-muted-foreground); font-size: var(--text-sm); margin-top: var(--space-lg); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 760px;
	margin: 0 auto;
}

.faq-item {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 250ms var(--ease-premium);
}
.faq-item[open] { box-shadow: var(--shadow-md); }

.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-lg);
	font-family: var(--font-sans);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: background 250ms var(--ease-premium);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { background: var(--color-muted); }

.faq-item__chevron { color: var(--color-primary); transition: transform 300ms var(--ease-premium); flex-shrink: 0; }
.faq-item[open] > .faq-item__summary .faq-item__chevron { transform: rotate(180deg); }

.faq-item__body {
	padding: 0 var(--space-lg) var(--space-lg);
	color: var(--color-foreground);
}
.faq-item__body p { margin: 0; }

/* ==========================================================================
   Booking form
   ========================================================================== */

.booking { max-width: 640px; text-align: center; }
.booking__note { color: rgba(255, 255, 255, 0.75); margin-bottom: var(--space-sm); }
.booking__required-legend {
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-sm);
	margin-bottom: var(--space-xl);
}

.required-mark { color: #FCA5A5; }

.booking-form { text-align: left; }
.booking-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}
@media (min-width: 768px) {
	.booking-form__row { grid-template-columns: 1fr 1fr; }
}

.input-group { margin-bottom: var(--space-md); }
.input-group label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 500;
	font-size: var(--text-sm);
	color: var(--color-on-primary);
}

.input {
	width: 100%;
	padding: 12px 16px;
	min-height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	font-size: 16px;
	background: var(--color-on-primary);
	color: var(--color-foreground);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input:focus {
	border-color: var(--color-primary-light);
	outline: none;
	box-shadow: 0 0 0 3px rgba(136, 50, 137, 0.25);
}
.input.input-error { border-color: var(--color-destructive); }

/* Native date/time inputs — the OS picker popup can't be restyled, but the
   field itself gets brand colours plus a custom icon in place of the
   browser's default gray one. The real (invisible) calendar/clock
   indicator is stretched over the whole field so the custom icon stays
   purely decorative but the click-to-open target doesn't shrink. */
.input-icon-wrap { position: relative; }
.input-icon-wrap .input {
	padding-right: 44px;
	color-scheme: light;
	accent-color: var(--color-primary);
}
.input-icon-wrap__icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--color-primary);
	pointer-events: none;
}
.input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.input-icon-wrap input[type="time"]::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#booking-category option,
#booking-service option {
	min-height: 44px;
	padding: 12px 16px;
}

.booking-form__subservice {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	transform: translateY(-6px);
	transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease, margin-bottom 260ms ease;
}
.booking-form__subservice.is-visible {
	max-height: 260px;
	opacity: 1;
	margin-bottom: var(--space-md);
	transform: translateY(0);
}

.booking-form__change-category {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 var(--space-xs);
	color: var(--color-primary-light);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.booking-form__change-category:hover,
.booking-form__change-category:focus-visible {
	color: var(--color-on-primary);
}

.input-error-text {
	color: #FCA5A5;
	font-size: var(--text-sm);
	margin: var(--space-xs) 0 0;
	min-height: 1.2em;
}

.booking-form__submit { width: 100%; margin-top: var(--space-sm); }
@media (min-width: 768px) {
	.booking-form__submit { width: auto; }
}

.booking-form__status {
	margin-top: var(--space-md);
	font-weight: 500;
	min-height: 1.4em;
}
.booking-form__status[data-state="success"] { color: #86EFAC; }
.booking-form__status[data-state="error"] { color: #FCA5A5; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: linear-gradient(180deg, #321B2F 0%, var(--color-graphite) 100%);
	color: var(--color-on-primary);
	padding: var(--space-2xl) 0 var(--space-lg);
}
.site-footer__inner {
	display: grid;
	align-items: start;
	gap: var(--space-xl);
}
.site-footer__brand-word {
	display: block;
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: 0.01em;
	line-height: 1.15;
}
.site-footer__brand-script {
	display: block;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-style: italic;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	line-height: 1.15;
	opacity: 0.85;
}
.site-footer__tagline { color: rgba(255, 255, 255, 0.7); margin-top: var(--space-sm); }
.site-footer__links h3,
.site-footer__contacts h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.site-footer__links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer__links a,
.site-footer__contacts a { color: rgba(255, 255, 255, 0.85); }
.site-footer__links a:hover,
.site-footer__contacts a:hover { color: var(--color-primary-light); }
.site-footer__map {
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	display: block;
	cursor: pointer;
}
.site-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The card is a link to the real Google Maps listing — the embedded iframe
   itself must stay non-interactive, or a tap drags/zooms Google's map (or
   opens whatever place its own internal link resolves to) instead of
   forwarding to the salon's listing. */
a.site-footer__map iframe { pointer-events: none; }

.site-footer__bottom {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-dark);
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--text-sm);
}

@media (min-width: 1024px) {
	.site-footer__inner { grid-template-columns: 1.1fr 0.8fr 1fr 1fr; }
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	padding: var(--space-sm) var(--space-lg);
	padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(113, 37, 120, 0.94) 0%, rgba(88, 24, 94, 0.92) 100%);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--color-border-dark);
}
.sticky-cta .btn-primary { width: 100%; }

.btn-primary--sticky {
	background: var(--color-on-primary);
	color: var(--color-primary);
	padding: 10px 20px;
	font-size: var(--text-sm);
	min-height: 38px;
}
.btn-primary--sticky:hover {
	background: var(--color-primary-light);
	color: var(--color-on-primary);
	box-shadow: 0 6px 20px rgba(96, 26, 102, 0.35);
}

@media (min-width: 1024px) {
	.sticky-cta { display: none; }
}

/* ==========================================================================
   Instagram floating button
   ========================================================================== */

.social-fab {
	position: fixed;
	right: var(--space-lg);
	bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-md));
	z-index: 95;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
	color: var(--color-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	transition: transform 250ms var(--ease-premium), background 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium);
}
.social-fab:hover { background: var(--color-primary-dark); transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-xl); }

/* Stacks above the Instagram FAB when both are present. */
.social-fab--viber {
	bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-md) + 64px);
	background: #7360F2;
}
.social-fab--viber:hover { background: #5C4BD1; }

/* Stacks above Viber, the top-most button in the group. */
.social-fab--telegram {
	bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-md) + 128px);
	background: #29A9EA;
}
.social-fab--telegram:hover { background: #1E96D1; }

@media (min-width: 1024px) {
	.social-fab { bottom: var(--space-lg); }
	.social-fab--viber { bottom: calc(var(--space-lg) + 64px); }
	.social-fab--telegram { bottom: calc(var(--space-lg) + 128px); }
}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
	}
	.reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Lead popup (auto-appears after a delay)
   ========================================================================== */

.has-lead-popup-open { overflow: hidden; }

.lead-popup {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	opacity: 0;
	transition: opacity 200ms ease;
}
.lead-popup[hidden] { display: none; }
.lead-popup.is-open { opacity: 1; }

.lead-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(36, 17, 32, 0.6);
	backdrop-filter: blur(4px);
}

.lead-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--color-card);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	padding: var(--space-2xl) var(--space-xl) var(--space-xl);
	text-align: center;
	transform: translateY(12px) scale(0.98);
	transition: transform 200ms ease;
}
.lead-popup.is-open .lead-popup__dialog { transform: translateY(0) scale(1); }

.lead-popup__close {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--color-muted-foreground);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.lead-popup__close:hover { background: var(--color-muted); color: var(--color-primary); }

.lead-popup__logo-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto var(--space-md);
	color: var(--color-primary);
}
.lead-popup__logo-word {
	display: block;
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: var(--text-xl);
	letter-spacing: 0.01em;
	line-height: 1.15;
}
.lead-popup__logo-script {
	display: block;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-style: italic;
	font-size: var(--text-sm);
	letter-spacing: 0.01em;
	line-height: 1.15;
	opacity: 0.85;
}

.lead-popup__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--color-ink);
	margin-bottom: var(--space-sm);
}
.lead-popup__text {
	color: var(--color-muted-foreground);
	margin-bottom: var(--space-lg);
}

.lead-popup-form { text-align: left; }
.lead-popup-form .input-group label { color: var(--color-foreground); }
.lead-popup-form__submit { width: 100%; }
.lead-popup-form__status {
	margin-top: var(--space-md);
	font-weight: 500;
	text-align: center;
	min-height: 1.4em;
}
.lead-popup-form__status[data-state="success"] { color: #15803D; }
.lead-popup-form__status[data-state="error"] { color: var(--color-destructive); }

@media (max-width: 480px) {
	.lead-popup__dialog { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
}

/* ==========================================================================
   Google reviews carousel
   ========================================================================== */

.reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: var(--space-lg);
	margin-bottom: var(--space-xl);
	box-shadow: var(--shadow-md);
}

.reviews-summary__brand {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.reviews-summary__logo { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; }
.reviews-summary__logo svg { width: 100%; height: 100%; }
.reviews-summary__word { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); color: var(--color-foreground); }
.reviews-summary__label { color: var(--color-foreground); font-weight: 600; }
.reviews-summary__stars { display: inline-flex; gap: 2px; }
.reviews-summary__stars svg { width: 16px; height: 16px; }
.reviews-summary__rating { font-weight: 700; color: var(--color-foreground); }
.reviews-summary__count { color: var(--color-muted-foreground); font-size: var(--text-sm); }

.reviews-summary__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.reviews-carousel { position: relative; }

.reviews-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.reviews-carousel__viewport::-webkit-scrollbar { display: none; }

.reviews-carousel__track {
	display: flex;
	gap: var(--space-lg);
	padding: var(--space-xs) var(--space-xs) var(--space-lg);
}

.review-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: min(300px, 82vw);
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: var(--space-lg);
	box-shadow: var(--shadow-md);
	transition: box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.review-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-3px); }

.review-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.review-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.review-card__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-on-primary);
	font-weight: 700;
	font-family: var(--font-sans);
}

.review-card__who { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.review-card__name { font-weight: 600; color: var(--color-foreground); }
.review-card__date { font-size: var(--text-xs); color: var(--color-muted-foreground); }

.review-card__badge { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.review-card__badge svg { width: 100%; height: 100%; }
a.review-card__badge { cursor: pointer; transition: opacity 150ms ease; }
a.review-card__badge:hover { opacity: 0.7; }

.review-card__rating { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.review-card__star { width: 14px; height: 14px; color: var(--color-border); }
.review-card__star.is-filled { color: #FBBC05; }
.review-card__verified { width: 14px; height: 14px; margin-left: 2px; }

.review-card__text {
	color: var(--color-foreground);
	font-size: var(--text-sm);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.review-card__text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }

.review-card__toggle {
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin-top: var(--space-xs);
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
}
.review-card__toggle:hover { text-decoration: underline; }

.reviews-carousel__controls {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin-top: var(--space-sm);
}
.reviews-carousel__arrow {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-card);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 150ms ease;
}
.reviews-carousel__arrow:hover { background: var(--color-muted); }
.reviews-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.reviews-carousel__arrow:disabled:hover { background: var(--color-card); }

@media (min-width: 768px) {
	.review-card { width: 320px; }
}

/* ==========================================================================
   Gift certificate
   ========================================================================== */

.certificate {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
	max-width: 960px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.certificate { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}

.certificate__text {
	margin: 0;
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--color-foreground);
	text-align: center;
}
@media (min-width: 1024px) {
	.certificate__text { text-align: left; }
}

.certificate__photo { aspect-ratio: 8 / 5; box-shadow: var(--shadow-lg); }
.certificate__photo img { object-position: center bottom; }

.certificate-mock {
	position: relative;
	aspect-ratio: 8 / 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-sm);
	background: var(--color-card);
	border: 2px solid var(--color-primary);
	border-radius: 20px;
	padding: var(--space-xl) var(--space-2xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.certificate-mock::before {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	pointer-events: none;
}

.certificate-mock__seal {
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
	color: var(--color-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-script-latin);
	font-size: 1.5rem;
	box-shadow: var(--shadow-sm);
}

.certificate-mock__eyebrow {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.certificate-mock__title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: var(--text-xl);
	color: var(--color-foreground);
	margin-bottom: var(--space-sm);
}

.certificate-mock__row {
	display: flex;
	align-items: baseline;
	gap: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.certificate-mock__label {
	flex-shrink: 0;
	font-size: var(--text-sm);
	color: var(--color-muted-foreground);
}

.certificate-mock__blank {
	flex-grow: 1;
	height: 1px;
	border-bottom: 1px dashed var(--color-border);
}
.certificate-mock__blank--short { flex-grow: 0; width: 5rem; }

@media (max-width: 480px) {
	.certificate-mock { padding: var(--space-lg); }
}

/* =========================================================
   Редизайн секції "Познайомтесь з нашою засновницею" (#team)
   ========================================================= */

#team .clinic-intro {
	background: linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	box-shadow:
		0 8px 16px rgba(96,26,102,0.07),
		0 26px 48px rgba(20,9,20,0.16),
		inset 0 1px 0 rgba(255,255,255,0.08);
}

#team .clinic-intro__photo {
	border: 3px solid rgba(255,255,255,0.28);
	box-shadow:
		0 0 32px rgba(96,26,102,0.4),
		0 8px 16px rgba(96,26,102,0.07),
		0 26px 48px rgba(20,9,20,0.16);
}

#team .clinic-intro__caption {
	letter-spacing: .02em;
	font-weight: 600;
	color: rgba(255,255,255,0.82);
}

#team .clinic-intro__text p:first-child strong:first-child {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.4rem;
	background: linear-gradient(90deg, #ffffff, #F7D5F2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

#team .clinic-intro__text p:first-child {
	padding-bottom: var(--space-md);
	border-bottom: 1px solid rgba(255,255,255,0.14);
	margin-bottom: var(--space-md);
	font-size: var(--text-base);
	color: rgba(255,255,255,0.72);
}

#team .clinic-intro__text p:last-child {
	position: relative;
	margin-top: var(--space-sm);
	padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
	border-left: 3px solid #F7D5F2;
	background: rgba(255,255,255,0.07);
	border-radius: 0 14px 14px 0;
}