/* ============ Viiksur Salon — frontend ============ */

/* Aleo @font-face declarations removed in v0.9.9 — the site now uses only
   Archivo Black + Inter Tight, both loaded from Google Fonts in
   viiksur-salon.php. The local Aleo OTFs in assets/fonts/ are vestigial. */

/* ===== reset / base ===== */
.vk-page-pad *, .vk-page-pad *::before, .vk-page-pad *::after,
.vk-hero *, .vk-hero *::before, .vk-hero *::after,
.vk-nav *, .vk-marquee *, .vk-stats *, .vk-svc *, .vk-team *,
.vk-booking *, .vk-footer *, .vk-contact *,
.vk-booking *::before, .vk-booking *::after,
.vk-footer *::before, .vk-footer *::after { box-sizing: border-box; }

:root {
	/* spacing */
	--pad-x:    clamp(20px, 4vw, 64px);
	--container: 1440px;
	--space-xs: 12px;
	--space-sm: clamp(16px, 2vw, 24px);
	--space-md: clamp(32px, 4vw, 56px);
	--space-lg: clamp(56px, 7vw, 96px);
	--space-xl: clamp(80px, 10vw, 140px);

	/* Five-font system from the Claude Design handoff — each face owns one role.
	 *   display — big poster headlines + logo + marquee
	 *   heavy   — buttons + CTAs (distinct silhouette from display)
	 *   italic  — italic accents (the ".ee", italic emphasis in titles), hot tint
	 *   mono    — eyebrows, nav links, tags, small caps utility text
	 *   body    — paragraphs, descriptions, form text
	 */
	--font-display: 'Big Shoulders Display', 'Anton', 'Impact', sans-serif;
	--font-heavy:   'Archivo Black', 'Arial Black', Impact, sans-serif;
	--font-italic:  'Instrument Serif', Georgia, 'Times New Roman', serif;
	--font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
}

body {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--hot); color: var(--bg); }

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

/* ===== nav ===== */
.vk-nav {
	background: var(--bg);
	border-bottom: 1.5px solid var(--ink);
	padding: 14px var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: sticky;
	top: 0;
	z-index: 50;
}
.vk-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.01em;
	line-height: 0.95;
	color: var(--ink);
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.vk-logo .accent {
	color: var(--hot);
	font-style: italic;
	font-weight: 400;
}
/* SVG logo variant — drops the text styling so the image carries the brand.
   Scoped strongly so a saved Elementor typography preset on .vk-logo can't
   collapse the image or override its dimensions. */
.vk-nav .vk-logo-img,
.vk-logo.vk-logo-img {
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
	min-width: 0;
	font-size: 0;        /* zero out inherited line-box space so the img sits flush */
	line-height: 1;
}
.vk-nav .vk-logo-img img,
.vk-logo.vk-logo-img img {
	display: block;
	height: clamp(40px, 4.5vw, 58px) !important;
	width: auto !important;
	max-width: none;     /* prevent flex parent from pinching width to 0 */
	flex-shrink: 0;
}
.vk-nav-links {
	display: flex;
	gap: 2px;
	align-items: center;
}
.vk-nav-link {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 10px 14px;
	color: var(--ink);
	text-decoration: none;
	position: relative;
	background: transparent;
	border: none;
	cursor: pointer;
}
.vk-nav-link:hover { color: var(--hot); }
.vk-nav-link.active::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px;
	background: var(--hot);
}
.vk-nav-right { display: flex; align-items: center; gap: 18px; }
.vk-nav-phone {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hot);
	padding-bottom: 2px;
}
.vk-lang {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.vk-lang-link {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.vk-lang-link:hover { color: var(--ink); }
.vk-lang-link.active { color: var(--hot); }
.vk-lang-sep { color: var(--line); }
.vk-nav-cta {
	font-family: var(--font-heavy);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--ink);
	color: var(--bg);
	padding: 12px 18px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: inline-block;
}
.vk-nav-cta:hover {
	background: var(--hot);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--ink);
}

/* Hamburger toggle — hidden on desktop, shown ≤768px.
   Scoped to .vk-nav to outrank the global button reset (specificity tie). */
.vk-nav .vk-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--ink);
	cursor: pointer;
	flex-shrink: 0;
}
.vk-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.vk-nav.open .vk-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vk-nav.open .vk-nav-toggle-bar:nth-child(2) { opacity: 0; }
.vk-nav.open .vk-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.vk-nav-link-phone { display: none; }

/* ===== layout container ===== */
.vk-page-pad {
	padding: var(--space-lg) var(--pad-x);
	max-width: var(--container);
	margin: 0 auto;
}

/* ===== tags ===== */
.vk-tag {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.vk-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--hot);
	border-radius: 50%;
	flex-shrink: 0;
}
.vk-tag-plain {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ===== titles ===== */
/* Aleo Bold reads heavier than Big Shoulders Display, so reduce the upper bound
   ~25% and ease letter-spacing from condensed (-0.03em) to comfortable serif (-0.01em). */
/* Spec from Claude Design index.html — Big Shoulders 900, more aggressive
   negative tracking, tighter line-height. Poster-scale headline. */
.vk-section-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(56px, 9vw, 140px);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 0.88;
	margin: 0;
	color: var(--ink);
}
.vk-section-title .italic,
.vk-section-title em {
	font-family: var(--font-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--hot);
	letter-spacing: 0;
	font-style: italic;
}
.vk-section-head { margin-bottom: var(--space-md); }
.vk-section-head .vk-tag { margin-bottom: 12px; display: inline-flex; }

/* ===== buttons ===== */
.vk-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-heavy);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 16px 26px;
	background: var(--ink);
	color: var(--bg);
	border: 1.5px solid var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	border-radius: 0;
	line-height: 1;
}
.vk-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--hot);
	color: var(--bg);
	text-decoration: none;
}
.vk-btn-big {
	font-size: 16px;
	padding: 22px 34px;
}
.vk-btn-ghost {
	background: transparent;
	color: var(--ink);
}
.vk-btn-ghost:hover {
	box-shadow: 4px 4px 0 var(--ink);
	color: var(--ink);
}
.vk-btn-hot {
	background: var(--hot);
	border-color: var(--hot);
	color: var(--bg);
}
.vk-btn-hot:hover { box-shadow: 4px 4px 0 var(--ink); }
.vk-btn-inverse {
	background: var(--bg);
	border-color: var(--bg);
	color: var(--ink);
}
.vk-btn-inverse:hover { box-shadow: 4px 4px 0 var(--hot); color: var(--ink); }
.vk-btn[disabled],
.vk-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Facebook button — Viiksur palette (ink + bg), hot accent on hover.
   The f-mark stays so it reads as Facebook at a glance, but the colour
   matches everything else on the page instead of brand-blue. */
.vk-btn-fb {
	background: var(--ink);
	color: var(--bg);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
	cursor: pointer;
	position: relative;
	z-index: 1;
	text-decoration: none;
}
.vk-btn-fb:hover {
	background: var(--hot);
	border-color: var(--hot);
	color: var(--bg);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--ink);
}
.vk-btn-fb svg { flex-shrink: 0; }

.vk-arrow {
	width: 18px;
	height: 10px;
	display: inline-block;
	position: relative;
	flex-shrink: 0;
}
.vk-arrow::before, .vk-arrow::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.vk-arrow::before { left: 0; top: 4px; width: 100%; height: 2px; }
.vk-arrow::after  {
	right: 0; top: 0;
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	background: transparent;
}

/* ===== portrait — only renders the photo, otherwise neutral block ===== */
.vk-portrait {
	background: var(--paper);
	border: 1.5px solid var(--ink);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	color: var(--ink);
}
.vk-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vk-portrait .label {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	z-index: 2;
}
/* When a photo is present, fade the label background so it's readable. */
.vk-portrait:has(img) .label {
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.45);
	padding: 4px 8px;
}

/* ===== hero ===== */
.vk-hero {
	border-bottom: 1.5px solid var(--ink);
}
.vk-hero-inner {
	padding: clamp(40px, 5vw, 72px) var(--pad-x) clamp(28px, 3.5vw, 48px);
	max-width: var(--container);
	margin: 0 auto;
}
.vk-hero-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 28px;
	gap: 16px;
	flex-wrap: wrap;
}
.vk-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: stretch;
	margin-top: clamp(28px, 3vw, 44px);
}
.vk-hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-sm);
}
.vk-hero-media {
	min-height: clamp(320px, 42vw, 520px);
}
.vk-hero-media img,
.vk-hero-media .vk-hero-mosaic { height: 100%; min-height: clamp(320px, 42vw, 520px); }
/* If there's no media column rendered, let text span full width. */
.vk-hero-grid:not(:has(.vk-hero-media)) {
	grid-template-columns: 1fr;
}
.vk-hero-sub {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.4;
	max-width: 44ch;
	margin: 0 0 var(--space-sm);
	color: var(--ink);
}
.vk-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.vk-hero-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	height: clamp(280px, 38vw, 420px);
}
.vk-hero-mosaic-col {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
}

/* ===== marquee ===== */
.vk-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-top: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
	padding: 18px 0;
	background: var(--bg);
}
.vk-marquee-track {
	display: inline-flex;
	gap: 48px;
	animation: vk-marquee 40s linear infinite;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(48px, 8vw, 120px);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--ink);
	padding-left: 48px;
}
.vk-marquee-track .star {
	font-family: var(--font-italic);
	font-weight: 400;
	font-style: italic;
	color: var(--hot);
}
.vk-marquee.reverse {
	background: var(--paper);
}
.vk-marquee.reverse .vk-marquee-track {
	animation-direction: reverse;
	animation-duration: 55s;
	font-size: clamp(28px, 4.4vw, 60px);
	color: var(--brown);
}
@keyframes vk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===== stats ===== */
.vk-stats {
	border-bottom: 1.5px solid var(--ink);
	border-top: 1.5px solid var(--ink);
	background: var(--bg);
}
.vk-stats-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.vk-stat {
	padding: 40px 24px;
	border-right: 1.5px solid var(--ink);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vk-stat:last-child { border-right: none; }
.vk-stat-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(56px, 7vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.vk-stat-hot .vk-stat-value { color: var(--hot); }
.vk-stat-label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: pre-line;
	color: var(--muted);
}

/* ===== services peek (3-col grid) ===== */
.vk-svc-peek-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1.5px solid var(--ink);
}
.vk-svc-peek-cell {
	padding: 32px;
	border-right: 1.5px solid var(--ink);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 340px;
	cursor: pointer;
	background: transparent;
	transition: background 0.15s ease;
	text-decoration: none;
	color: inherit;
}
.vk-svc-peek-cell:last-child { border-right: none; }
.vk-svc-peek-cell:hover { background: var(--paper); }
.vk-svc-peek-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.vk-svc-peek-code {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--muted);
}
.vk-svc-peek-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 3.4vw, 52px);
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: auto 0 0;
}
.vk-svc-peek-blurb {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	margin: 0;
	color: var(--muted);
}
.vk-svc-peek-cta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--ink);
	text-transform: uppercase;
}

/* ===== services full (tabs + items) ===== */
.vk-svc-tabs {
	border-bottom: 1.5px solid var(--ink);
	border-top: 1.5px solid var(--ink);
	background: var(--paper);
}
.vk-svc-tabs-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
}
.vk-svc-tab {
	padding: 26px 24px;
	background: transparent;
	color: var(--ink);
	border: none;
	border-right: 1.5px solid var(--ink);
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.15s ease, color 0.15s ease;
	border-radius: 0;
	line-height: 1.2;
}
.vk-svc-tab:last-child { border-right: none; }
.vk-svc-tab .num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	opacity: 0.6;
}
.vk-svc-tab .name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}
.vk-svc-tab.active {
	background: var(--ink);
	color: var(--bg);
}
.vk-svc-tab:hover:not(.active) { background: rgba(0,0,0,0.04); }

.vk-svc-body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(32px, 4vw, 64px);
}
.vk-svc-side {
	position: sticky;
	top: 100px;
	align-self: start;
}
.vk-svc-side-quote {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: clamp(22px, 2vw, 26px);
	line-height: 1.35;
	margin: 0 0 20px;
}
.vk-svc-side-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 24px;
}
.vk-svc-list { display: flex; flex-direction: column; }
/* Pricelist group headings — Archivo Black (var(--font-heavy)) 16px uppercase,
   identical to flat + grouped service rows. The only visual differentiation
   between heading and row is the 1.5px ink underline. */
.vk-svc-group-head {
	font-family: var(--font-heavy);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 28px 0 4px;
	padding-bottom: 6px;
	border-bottom: 1.5px solid var(--ink);
}
.vk-svc-group-head:first-child { margin-top: 0; }
.vk-svc-row {
	display: grid;
	/* min-width 0 on text columns prevents any single long token from forcing
	   horizontal overflow on the row. Price column allowed to grow up to 160px. */
	grid-template-columns: minmax(0, 1fr) auto minmax(80px, 160px);
	gap: 20px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}
.vk-svc-row > * { min-width: 0; }
/* Grouped sub-items take the exact same .vk-svc-row-name typography as flat
   rows — no override at all. Only the row chrome (indent + dotted divider +
   tighter padding) marks them as children. Earlier overrides used CSS
   `inherit`, which resolves against the DOM parent (.vk-svc-row → body 15px),
   not the .vk-svc-row-name base rule — that's why grouped rows previously
   rendered LARGER than flat ones on mobile. */
.vk-svc-row.grouped { padding-left: 24px; padding-top: 14px; padding-bottom: 14px; border-bottom-style: dotted; }
.vk-svc-row-num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.05em;
}
/* Pricelist rows — Archivo Black (var(--font-heavy)) 16px uppercase across
   every row, parent or child. The Archivo Black face is already a 900-weight
   design so the font-weight property is left at the cascade default. Grouped
   sub-rows inherit everything (see .vk-svc-row.grouped .vk-svc-row-name above);
   only indent + dotted divider distinguish parent from child. */
.vk-svc-row-name {
	font-family: var(--font-heavy);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}
.vk-svc-row-time {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.08em;
	white-space: nowrap;
}
/* Price column: short by default (16€, 25€). Wraps for descriptive prices
   like "alates 50€" so the column never overflows the row width. */
.vk-svc-row-price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
	color: var(--hot);
	text-align: right;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 120px;
	line-height: 1.25;
}

/* ===== team — strip (dark band) ===== */
.vk-team[data-layout="strip"] {
	background: var(--ink);
	color: var(--bg);
	padding: clamp(56px, 7vw, 96px) 0;
	border: none;
	overflow: hidden;
}
.vk-team[data-layout="strip"] .vk-section-head {
	padding: 0 var(--pad-x);
	max-width: var(--container);
	margin: 0 auto var(--space-md);
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	flex-wrap: wrap;
}
.vk-team[data-layout="strip"] .vk-section-title { color: var(--bg); }
.vk-team[data-layout="strip"] .vk-section-title .italic { color: var(--accent); }
.vk-team[data-layout="strip"] .vk-tag { color: var(--accent); }
.vk-team-strip {
	padding: 0 var(--pad-x);
	max-width: var(--container);
	margin: 0 auto;
}
.vk-team-strip-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}
.vk-team-strip-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	cursor: pointer;
}
.vk-team-strip-photo {
	aspect-ratio: 0.78;
}
.vk-team-strip-photo .vk-portrait,
.vk-team-strip-photo img { width: 100%; height: 100%; }
.vk-team-strip-name {
	font-family: var(--font-heavy);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bg);
}
.vk-team-strip-role {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}

/* ===== team — list (numbered rows) ===== */
.vk-team[data-layout="list"] { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.vk-team[data-layout="list"] .vk-section-head { padding: var(--space-md) var(--pad-x); border-bottom: 1.5px solid var(--ink); max-width: 100%; margin: 0; background: var(--bg); }
.vk-team[data-layout="list"] .vk-section-head-inner { max-width: var(--container); margin: 0 auto; }
.vk-team-list {
	max-width: var(--container);
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.vk-team-row-item {
	display: grid;
	grid-template-columns: 280px 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 32px var(--pad-x);
	border-top: 1.5px solid var(--ink);
	cursor: pointer;
	background: transparent;
	transition: background 0.2s ease;
}
.vk-team-row-item.no-photo {
	grid-template-columns: 1fr auto;
}
.vk-team-row-contact {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ink);
	margin-bottom: 8px;
}
.vk-team-row-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hot); padding-bottom: 1px; }
.vk-team-row-contact .sep { color: var(--muted); padding: 0 6px; }
.vk-team-contact {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink);
	margin-top: 2px;
}
.vk-team-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hot); padding-bottom: 1px; }
.vk-team-strip-item.no-photo .vk-team-strip-photo { display: none; }
.vk-team-card.no-photo .vk-team-photo { display: none; }
.vk-team-row-item:first-child { border-top: none; }
.vk-team-row-item:hover { background: var(--paper); }
.vk-team-row-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(64px, 5.5vw, 88px);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--hot);
}
.vk-team-row-photo { height: 220px; aspect-ratio: 0.85; }
.vk-team-row-photo .vk-portrait,
.vk-team-row-photo img { width: 100%; height: 100%; }
.vk-team-row-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}
.vk-team-row-role {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hot);
	margin-bottom: 14px;
}
.vk-team-row-bio {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	margin: 0 0 16px;
	max-width: 56ch;
}
.vk-team-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}
.vk-team-tags li {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid var(--ink);
}

/* ===== team — grid (cards) ===== */
.vk-team[data-layout="grid"] { padding: var(--space-lg) var(--pad-x); max-width: var(--container); margin: 0 auto; }
.vk-team-grid {
	display: grid;
	gap: 32px;
}
.vk-team-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.vk-team-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.vk-team-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.vk-team-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	border: 1.5px solid var(--ink);
	padding: 0;
	background: var(--bg);
	transition: transform 0.2s ease;
}
.vk-team-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.vk-team-photo { aspect-ratio: 0.85; overflow: hidden; }
.vk-team-photo .vk-portrait,
.vk-team-photo img { width: 100%; height: 100%; }
.vk-team-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.vk-team-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vk-team-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
}
.vk-team-years {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	color: var(--muted);
	text-transform: uppercase;
}
.vk-team-role {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hot);
}
.vk-team-bio {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: 15px;
	line-height: 1.4;
	margin: 4px 0 8px;
}
.vk-team-card .vk-btn { align-self: flex-start; margin-top: 8px; }

/* ===== booking — layout ===== */
.vk-booking-header {
	padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(24px, 3vw, 36px);
	border-bottom: 1.5px solid var(--ink);
}
.vk-booking-header-inner {
	max-width: var(--container);
	margin: 0 auto;
}
.vk-booking-header-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 18px;
	gap: 12px;
	flex-wrap: wrap;
}

/* stepper — full-width on ink */
.vk-stepper {
	background: var(--ink);
	color: var(--bg);
}
.vk-stepper-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.vk-step {
	padding: 20px 24px;
	border-right: 1px solid rgba(255,255,255,0.15);
	background: transparent;
	color: var(--bg);
	opacity: 0.4;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	border: none;
	border-right: 1px solid rgba(255,255,255,0.15);
	cursor: default;
	text-align: left;
	transition: background 0.2s ease;
	border-radius: 0;
	font: inherit;
	line-height: 1.1;
}
.vk-step:last-child { border-right: none; }
.vk-step .num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	opacity: 0.7;
}
.vk-step .label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 30px);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -0.005em;
}
.vk-step.active { opacity: 1; background: var(--hot); }
.vk-step.done   { opacity: 1; cursor: pointer; }
.vk-step.done:hover { background: rgba(255,255,255,0.06); }
.vk-step.active:hover { background: var(--hot); }

/* body: main + summary sidebar */
.vk-booking-body {
	padding: clamp(40px, 4vw, 56px) var(--pad-x) clamp(64px, 7vw, 88px);
	max-width: var(--container);
	margin: 0 auto;
}
.vk-booking-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}
.vk-booking-main { min-width: 0; }
.vk-booking-step-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.vk-booking-step-title .italic {
	font-family: var(--font-italic);
	font-weight: 400;
	font-style: italic;
	color: var(--hot);
}
.vk-booking-step-lead {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	color: var(--muted);
	margin: 0 0 28px;
}

/* summary sidebar */
.vk-summary {
	position: sticky;
	top: 100px;
	border: 1.5px solid var(--ink);
	background: var(--paper);
	padding: 24px;
}
.vk-summary-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 18px;
}
.vk-summary-row { margin-bottom: 14px; }
.vk-summary-row dt {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 2px;
}
.vk-summary-row dd {
	font-family: var(--font-heavy);
	font-size: 16px;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
}
.vk-summary-row.empty dd { color: var(--muted); font-weight: 400; font-family: var(--font-body); font-style: italic; }
.vk-summary-divider {
	border: 0;
	border-top: 1.5px solid var(--ink);
	margin: 18px 0;
}
.vk-summary-price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.vk-summary-price-label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.vk-summary-price-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 30px;
	color: var(--hot);
	letter-spacing: -0.01em;
}
/* booking — choices (category + staff) */
.vk-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}
.vk-choice {
	padding: 22px;
	border: 1.5px solid var(--ink);
	background: var(--bg);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: background 0.15s ease, color 0.15s ease;
	border-radius: 0;
	font: inherit;
	line-height: 1.2;
}
.vk-choice .code {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	opacity: 0.6;
}
.vk-choice-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.vk-choice-sub {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.vk-choice-meta {
	display: flex;
	gap: 16px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--muted);
}
.vk-choice p {
	font-family: var(--font-italic);
	font-style: italic;
	font-size: 15px;
	line-height: 1.4;
	margin: 6px 0 0;
	color: var(--muted);
}
.vk-choice.selected {
	background: var(--ink);
	color: var(--bg);
}
.vk-choice.selected .vk-choice-sub,
.vk-choice.selected p,
.vk-choice.selected .vk-choice-meta { color: rgba(255,255,255,0.7); }

/* booking — service row list */
.vk-svc-pick-list {
	border: 1.5px solid var(--ink);
	display: flex;
	flex-direction: column;
}
/* ===== legal pages (privacy, terms) on Elementor canvas template =====
   The page uses elementor_canvas so hello-elementor's chrome is gone.
   Viiksur_Header auto-renders the nav, Viiksur_Footer renders the footer.
   The page body just dumps the_content() — styled here to read like a
   Viiksur section: ink section-title + hot italic accent, vk-page-pad
   container, Inter Tight body.

   Selectors are loose (`body.privacy-policy *, body.page-template-elementor_canvas *`)
   so they catch both the registered privacy page and any other plain
   content page we hang on canvas later. */
body.privacy-policy,
body.page-template-elementor_canvas {
	background: var(--bg);
	color: var(--ink);
}
.vk-legal-page {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) var(--pad-x) clamp(64px, 9vw, 128px);
}
.vk-legal-page .vk-tag {
	margin-bottom: clamp(20px, 2.5vw, 28px);
}
.vk-legal-page h1 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(40px, 8vw, 96px);
	letter-spacing: -0.03em;
	line-height: 0.92;
	text-transform: uppercase;
	margin: 0 0 clamp(32px, 4vw, 56px);
	color: var(--ink);
}
.vk-legal-page h1 .italic {
	font-family: var(--font-italic);
	font-style: italic;
	font-weight: 400;
	color: var(--hot);
	text-transform: none;
	letter-spacing: -0.01em;
}
.vk-legal-page__body {
	max-width: 760px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}
.vk-legal-page__body h2 {
	font-family: var(--font-heavy);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 44px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--ink);
}
.vk-legal-page__body h2:first-of-type { margin-top: 0; }
.vk-legal-page__body p { margin: 0 0 14px; }
.vk-legal-page__body strong { font-weight: 600; }
.vk-legal-page__body em {
	font-family: var(--font-italic);
	font-style: italic;
	color: var(--muted);
}
.vk-legal-page__body ul {
	margin: 0 0 18px;
	padding-left: 22px;
}
.vk-legal-page__body ul ul { margin: 6px 0 6px; }
.vk-legal-page__body li { margin-bottom: 6px; }
.vk-legal-page__body a {
	color: var(--hot);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vk-legal-page__body a:hover { color: var(--ink); }

.vk-empty-state {
	border: 1.5px solid var(--ink);
	padding: clamp(28px, 4vw, 44px);
	background: var(--paper);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
.vk-empty-state-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	color: var(--ink);
}
.vk-empty-state-body {
	font-size: 15px;
	color: var(--muted);
	max-width: 50ch;
}
/* Booking step 1 group heading — same Archivo Black 16px uppercase as the
   service rows; only the paper background + bottom border distinguish it. */
.vk-svc-pick-group {
	font-family: var(--font-heavy);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 14px 22px 12px;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}
.vk-svc-pick-group:not(:first-child) { border-top: 1.5px solid var(--ink); }
.vk-svc-pick {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--line);
	text-align: left;
	cursor: pointer;
	color: var(--ink);
	font: inherit;
	border-radius: 0;
	transition: background 0.12s ease;
}
/* Grouped picker rows take the exact same .vk-svc-pick .name typography
   as flat rows — no override at all. Only the indent distinguishes them.
   (Earlier overrides used CSS `inherit`, which resolves against the DOM
   parent's font, not the .vk-svc-pick .name rule — produced serif body
   text for grouped items.) */
.vk-svc-pick.grouped { padding-left: 38px; }
.vk-svc-pick:last-child { border-bottom: none; }
.vk-svc-pick:hover { background: var(--paper); }
.vk-svc-pick.selected { background: var(--ink); color: var(--bg); }
.vk-svc-pick .num {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--muted);
}
.vk-svc-pick.selected .num { color: rgba(255,255,255,0.6); }
.vk-svc-pick .name {
	font-family: var(--font-heavy);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
	/* Long uppercase Archivo Black names ("Kulmude modelleerimine + kulmude
	   ja ripsmete värvimine") need to wrap onto a second line at any viewport,
	   not just mobile. white-space:normal kills any inherited <button> nowrap. */
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}
.vk-svc-pick .time {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.vk-svc-pick.selected .time { color: rgba(255,255,255,0.65); }
.vk-svc-pick .price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--hot);
	letter-spacing: -0.01em;
	min-width: 80px;
	text-align: right;
}

/* booking — calendar */
.vk-cal-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	gap: 12px;
}
.vk-cal-month {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 2vw, 28px);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1;
}
.vk-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	border: 1.5px solid var(--ink);
	padding: 10px;
	background: var(--bg);
}
.vk-cal-head {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-align: center;
	padding: 8px 0;
	color: var(--muted);
	text-transform: uppercase;
}
.vk-cal-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	transition: background 0.12s ease;
	border-radius: 0;
}
.vk-cal-cell:hover:not(:disabled) { background: var(--paper); }
.vk-cal-cell:disabled {
	color: var(--muted);
	cursor: not-allowed;
	opacity: 0.35;
}
.vk-cal-cell.selected {
	background: var(--hot);
	color: var(--bg);
	border-color: var(--hot);
}
.vk-cal-cell.selected:hover { background: var(--hot); border-color: var(--hot); }

/* booking — slots */
.vk-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.vk-slot {
	padding: 12px;
	border: 1.5px solid var(--ink);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.12s ease;
	border-radius: 0;
	text-align: center;
}
.vk-slot:hover:not(:disabled) { background: var(--paper); }
.vk-slot:disabled { opacity: 0.3; cursor: not-allowed; }
.vk-slot.selected {
	background: var(--hot);
	color: var(--bg);
	border-color: var(--hot);
}
.vk-slot.selected:hover { background: var(--hot); border-color: var(--hot); }

/* booking — form */
.vk-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.vk-field { display: flex; flex-direction: column; gap: 6px; }
.vk-field.full { grid-column: 1 / -1; }
.vk-field label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}
.vk-field input,
.vk-field textarea {
	padding: 14px 16px;
	border: 1.5px solid var(--ink);
	background: transparent;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	outline: none;
	resize: vertical;
	border-radius: 0;
}
.vk-field textarea { min-height: 100px; }
.vk-field input:focus,
.vk-field textarea:focus { border-color: var(--hot); }

.vk-error {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--hot);
	padding: 12px 0;
}

/* booking — step nav.
   Sticks to the bottom of the viewport so the "Edasi" CTA stays in reach no
   matter how long the service list or category panel runs. Background carries
   a 1.5px ink top-border so it reads as a tab-bar over scrolling content.
   Mobile bumps it slightly tighter and keeps the column-reverse layout. */
.vk-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
	position: sticky;
	bottom: 0;
	background: var(--bg);
	padding: 14px 0;
	border-top: 1.5px solid var(--ink);
	z-index: 30;
}
/* Add room under the last service row so it isn't hidden by the sticky nav. */
.vk-booking-main { padding-bottom: 24px; }

/* booking — confirm */
.vk-confirm-block {
	border: 1.5px solid var(--ink);
	padding: clamp(28px, 3.5vw, 48px);
	background: var(--paper);
}
.vk-confirm-ref {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hot);
	margin-bottom: 14px;
}
.vk-confirm-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 28px;
}
.vk-confirm-rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 24px;
	padding: 0;
}
.vk-confirm-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.vk-confirm-row dt {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.vk-confirm-row dd {
	font-family: var(--font-heavy);
	font-size: 15px;
	margin: 0;
}

/* ===== footer ===== */
.vk-footer {
	background: var(--ink);
	color: var(--bg);
	padding: clamp(48px, 5vw, 80px) var(--pad-x) 32px;
	margin-top: clamp(48px, 6vw, 80px);
}
.vk-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
}
/* Top row: brand block on the left (wordmark + italic quote), columns on the
   right (Leht, Salong, Lahtiolekuajad). One divider between top and bottom
   strip — only the bottom row's border-top draws it, top has none. */
.vk-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(48px, 6vw, 96px);
	padding-bottom: 56px;
}
.vk-footer-brand { max-width: 28ch; }
/* Single font for the whole wordmark — accent tail keeps the same family,
   weight and size, only the color differs (--bg vs --hot). Sized down to
   match the original "viiksur.ee" footer signature in the reference design. */
.vk-footer-logo {
	font-family: var(--font-display, "Big Shoulders Display", Impact, sans-serif);
	font-weight: 800;
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-transform: lowercase;
}
.vk-footer-logo-head { color: var(--bg); }
.vk-footer-logo-tail { color: var(--hot); }
.vk-footer-quote {
	font-family: var(--font-italic, "Instrument Serif", Georgia, serif);
	font-style: italic;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.45;
	color: rgba(255,255,255,0.65);
	margin: 28px 0 0;
}
.vk-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 56px);
}
.vk-footer h4 {
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 28px;
	color: var(--hot);
}
.vk-footer ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 16px;
}
.vk-footer li,
.vk-footer a {
	font-family: var(--font-body, "Inter Tight", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bg);
	text-decoration: none;
}
.vk-footer a:hover { color: var(--hot); }

/* Bottom strip — © + company + reg on the left, social on the right.
   Mono 10px hairline above; matches the reference design. */
.vk-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 28px;
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	border-top: 1px solid rgba(255,255,255,0.08);
}
.vk-footer .vk-footer-social a {
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
}
.vk-footer .vk-footer-social a:hover { color: var(--hot); }
.vk-footer-social-sep { margin: 0 8px; color: rgba(255,255,255,0.25); }

@media (max-width: 900px) {
	.vk-footer-top { grid-template-columns: 1fr; gap: 48px; }
	.vk-footer-cols { grid-template-columns: 1fr 1fr; }
	.vk-footer-logo { font-size: clamp(24px, 5.5vw, 40px); }
}
@media (max-width: 560px) {
	.vk-footer-cols { grid-template-columns: 1fr; gap: 32px; }
	.vk-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ===== contact ===== */
.vk-contact-head {
	padding: clamp(40px, 5vw, 64px) var(--pad-x);
	border-bottom: 1.5px solid var(--ink);
}
.vk-contact-head-inner { max-width: var(--container); margin: 0 auto; }
.vk-contact-body {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) var(--pad-x);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 64px);
}
.vk-contact-info { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.vk-contact-block .lbl {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.vk-contact-address {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}
.vk-contact-address .city { color: var(--hot); display: block; }
.vk-contact-line {
	font-family: var(--font-heavy);
	font-size: clamp(20px, 2vw, 26px);
	letter-spacing: 0.02em;
}
.vk-contact-hours {
	width: 100%;
	max-width: 360px;
	border-collapse: collapse;
}
.vk-contact-hours tr { border-bottom: 1px solid var(--line); }
.vk-contact-hours td:first-child {
	font-family: var(--font-heavy);
	font-size: 15px;
	text-transform: uppercase;
	padding: 12px 0;
}
.vk-contact-hours td:last-child {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-align: right;
	padding: 12px 0;
}
.vk-contact-hours .closed td:last-child { color: var(--hot); }
.vk-contact-social { display: flex; gap: 12px; flex-wrap: wrap; }
.vk-contact-map {
	height: 280px;
	border: 1.5px solid var(--ink);
	margin-bottom: 28px;
	background: var(--paper);
	overflow: hidden;
}
.vk-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.vk-contact-form { display: flex; flex-direction: column; gap: 16px; }
.vk-contact-form-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ===== Elementor Kit overrides (specificity floor) =====
   body button.vk-xxx = (0,1,2) beats .elementor-kit-90 button = (0,1,1) */
body a.vk-nav-cta       { color: var(--bg); text-decoration: none; }
body a.vk-nav-cta:hover { color: var(--bg); background-color: var(--hot); text-decoration: none; }
body a.vk-btn           { color: var(--bg); text-decoration: none; }
body a.vk-btn-ghost     { color: var(--ink); }
body a.vk-btn-hot       { color: var(--bg); }
body a.vk-btn:hover     { color: var(--bg); text-decoration: none; }
body a.vk-btn-ghost:hover { color: var(--ink); }

/* Footer is dark — links and list items stay cream regardless of Elementor Kit */
body .vk-footer,
body .vk-footer a,
body .vk-footer li,
body .vk-footer span { color: var(--bg); }
body .vk-footer a:hover { color: var(--hot); }
body .vk-footer h4 { color: var(--hot); }
body .vk-footer-bottom,
body .vk-footer-bottom span { color: rgba(255,255,255,0.5); }

/* Team strip is dark — same treatment */
body .vk-team[data-layout="strip"],
body .vk-team[data-layout="strip"] .vk-team-strip-name { color: var(--bg); }
body .vk-team[data-layout="strip"] .vk-section-title { color: var(--bg); }
body .vk-team[data-layout="strip"] .vk-section-title .italic,
body .vk-team[data-layout="strip"] .vk-tag,
body .vk-team[data-layout="strip"] .vk-team-strip-role { color: var(--accent); }

body button.vk-btn        { border-radius: 0; background-color: var(--ink); color: var(--bg); border-color: var(--ink); }
body button.vk-btn-ghost  { background-color: transparent; color: var(--ink); }
body button.vk-btn-hot    { background-color: var(--hot);  color: var(--bg); border-color: var(--hot); }
body button.vk-svc-tab        { border-radius: 0; background-color: transparent; color: var(--ink); border-color: transparent; }
body button.vk-svc-tab.active { background-color: var(--ink); color: var(--bg); }
body button.vk-choice          { border-radius: 0; background-color: var(--bg); color: var(--ink); border-color: var(--ink); }
body button.vk-choice.selected { background-color: var(--ink); color: var(--bg); }
body button.vk-choice:hover                        { background-color: var(--ink); color: var(--bg); border-color: var(--ink); }
body button.vk-choice:hover .vk-choice-sub,
body button.vk-choice:hover .vk-choice-meta,
body button.vk-choice:hover p,
body button.vk-choice:hover .code                   { color: rgba(255,255,255,0.7); }
body button.vk-svc-pick          { border-radius: 0; background-color: transparent; color: var(--ink); border-color: transparent; }
body button.vk-svc-pick.selected { background-color: var(--ink); color: var(--bg); }
body button.vk-svc-pick:hover                       { background-color: var(--ink); color: var(--bg); }
body button.vk-svc-pick:hover .num,
body button.vk-svc-pick:hover .time                 { color: rgba(255,255,255,0.65); }
body button.vk-svc-pick:hover .price                { color: var(--hot); }
body button.vk-cal-cell          { border-radius: 0; background-color: transparent; color: var(--ink); }
body button.vk-cal-cell.selected { background-color: var(--hot); color: var(--bg); border-color: var(--hot); }
body button.vk-slot          { border-radius: 0; background-color: var(--bg); color: var(--ink); border-color: var(--ink); }
body button.vk-slot.selected { background-color: var(--hot); color: var(--bg); border-color: var(--hot); }
body button.vk-step           { border-radius: 0; border-color: transparent; color: inherit; background-color: transparent; }
body button.vk-step.active    { background-color: var(--hot); }

body button.vk-btn:hover              { background-color: var(--ink); color: var(--bg); }
body button.vk-btn.vk-btn-ghost:hover { background-color: transparent; color: var(--ink); }
body button.vk-btn.vk-btn-hot:hover   { background-color: var(--hot); color: var(--bg); }
body button.vk-svc-tab:hover        { background-color: rgba(0,0,0,0.04); color: var(--ink); }
body button.vk-svc-tab.active:hover { background-color: var(--ink);   color: var(--bg); }
body button.vk-choice.selected:hover { background-color: var(--ink); color: var(--bg); }
body button.vk-svc-pick.selected:hover { background-color: var(--ink); color: var(--bg); }
body button.vk-cal-cell:hover                  { background-color: transparent; color: var(--ink); }
body button.vk-cal-cell:not(:disabled):hover   { background-color: var(--paper); }
body button.vk-cal-cell.selected:hover         { background-color: var(--hot); color: var(--bg); border-color: var(--hot); }
body button.vk-slot:hover          { background-color: var(--paper); color: var(--ink); }
body button.vk-slot.selected:hover { background-color: var(--hot); color: var(--bg); border-color: var(--hot); }
body button.vk-step:hover        { background-color: transparent; color: inherit; }
body button.vk-step.done:hover   { background-color: rgba(255,255,255,0.06); }
body button.vk-step.active:hover { background-color: var(--hot); }

/* ===== overflow guards ===== */
/* Grid tracks default to min-width:auto, letting wide content (stepper labels,
   calendar) push the layout past the viewport. Force shrinkable tracks and
   clip any residual horizontal scroll. */
html, body { overflow-x: hidden; max-width: 100%; }
.vk-booking, .vk-booking-body, .vk-cal, .vk-stepper-grid, .vk-slots { max-width: 100%; }
.vk-booking-grid { min-width: 0; }
.vk-booking-grid > *, .vk-booking-main, .vk-summary { min-width: 0; }
.vk-stepper-grid > .vk-step { min-width: 0; }
.vk-step .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== responsive ===== */
@media (max-width: 1024px) {
	.vk-hero-grid { grid-template-columns: 1fr; }
	.vk-hero-mosaic { height: clamp(240px, 50vw, 360px); }
	.vk-booking-grid { grid-template-columns: 1fr; }
	.vk-summary { position: static; }
	.vk-svc-body { grid-template-columns: 1fr; }
	.vk-svc-side { position: static; }
	.vk-team-row-item { grid-template-columns: 160px 1fr; gap: 20px; }
	.vk-team-row-item.no-photo { grid-template-columns: 1fr; }
	.vk-team-row-item > .vk-btn { display: none; }
	.vk-contact-body { grid-template-columns: 1fr; }
	.vk-team-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
	.vk-team-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	:root { --pad-x: 18px; }
	.vk-nav { padding: 12px var(--pad-x); gap: 12px; }

	/* Mobile nav: hide inline links, reveal hamburger that opens a dropdown panel */
	.vk-nav .vk-nav-toggle { display: flex; }
	.vk-nav-phone { display: none; }
	.vk-nav-cta { font-size: 11px; padding: 10px 14px; }
	.vk-nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bg);
		border-bottom: 1.5px solid var(--ink);
		padding: 8px var(--pad-x) 16px;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	}
	.vk-nav.open .vk-nav-links { display: flex; }
	.vk-nav-link {
		font-size: 13px;
		padding: 16px 4px;
		border-bottom: 1px solid var(--line);
	}
	.vk-nav-link.active::after { display: none; }
	.vk-nav-link:last-child { border-bottom: none; }
	.vk-nav-link-phone { display: block; color: var(--hot); }

	/* Stats: 2 cols, smaller numbers */
	.vk-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.vk-stat { padding: 28px 18px; }
	.vk-stat:nth-child(odd)  { border-right: 1.5px solid var(--ink); }
	.vk-stat:nth-child(even) { border-right: none; }
	.vk-stat:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
	.vk-stat-value { font-size: clamp(40px, 11vw, 64px); }

	/* Services */
	.vk-svc-peek-grid { grid-template-columns: 1fr; }
	.vk-svc-peek-cell { border-right: none; border-bottom: 1.5px solid var(--ink); min-height: 200px; padding: 24px; }
	.vk-svc-peek-cell:last-child { border-bottom: none; }
	.vk-svc-tabs-grid { grid-template-columns: 1fr; }
	.vk-svc-tab { border-right: none; border-bottom: 1.5px solid var(--ink); padding: 20px 18px; }
	/* Pricelist rows — match the booking picker's 2-row layout. Name takes the
	   full left column and wraps onto multiple lines if the title is long;
	   price sits top-right; duration tucks below it as a quiet caption. */
	/* Mobile pricelist — !important needed to win over Elementor's typography
	   preset (specificity 0,2,0 from its WRAPPER-prefixed selector). The
	   .vk-services parent gets max-width:100% so no overflowing child can
	   push the page horizontally regardless of break behaviour. */
	.vk-services, .vk-svc-list, .vk-svc-body, .vk-svc-panel { max-width: 100%; min-width: 0; overflow-x: hidden; }
	.vk-svc-row * { max-width: 100% !important; min-width: 0 !important; word-wrap: break-word; }
	.vk-svc-row {
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas: "name price" "name time" !important;
		gap: 4px 12px !important;
		padding: 14px 0 !important;
		align-items: baseline !important;
	}
	.vk-svc-row > * { min-width: 0 !important; max-width: 100% !important; }
	.vk-svc-row-name {
		grid-area: name !important;
		font-size: 13px !important;
		letter-spacing: 0.01em !important;
		line-height: 1.25 !important;
		text-transform: uppercase !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		hyphens: auto;
	}
	.vk-svc-row-price { grid-area: price !important; font-size: 16px !important; min-width: 0 !important; }
	.vk-svc-row-time  { grid-area: time  !important; font-size: 10px !important; justify-self: end; display: block !important; }
	.vk-svc-row.grouped { padding-left: 16px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
	.vk-svc-group-head { font-size: 11px !important; margin: 20px 0 4px !important; padding-bottom: 4px !important; }

	/* Team */
	.vk-team-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.vk-team[data-layout="strip"] .vk-section-head { flex-direction: column; align-items: flex-start; }
	.vk-team-row-item { grid-template-columns: 1fr; gap: 12px; padding: 24px var(--pad-x); }
	.vk-team-row-item.no-photo { grid-template-columns: 1fr; }
	.vk-team-row-num { font-size: 56px; }
	.vk-team-row-photo { height: auto; width: 100%; aspect-ratio: 1.2; max-height: 240px; }
	.vk-team-row-name { font-size: clamp(28px, 8vw, 40px); }
	.vk-team-grid[data-cols="2"],
	.vk-team-grid[data-cols="3"],
	.vk-team-grid[data-cols="4"] { grid-template-columns: 1fr; gap: 18px; }

	/* Hero */
	.vk-hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
	.vk-hero-mosaic { height: clamp(220px, 60vw, 320px); }
	.vk-hero-ctas .vk-btn { width: 100%; justify-content: center; }
	.vk-hero-ctas { flex-direction: column; align-items: stretch; }

	/* Booking stepper — keep all five visible but compact. Number prominent,
	   label readable (was 9px which was illegible on most devices). */
	.vk-stepper-grid { grid-template-columns: repeat(5, 1fr); }
	.vk-step { padding: 10px 4px; gap: 4px; align-items: center; text-align: center; }
	.vk-step .num   { font-size: 14px; letter-spacing: 0; }
	.vk-step .label { font-size: 10px; letter-spacing: 0.03em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

	/* Titles: dial down the large desktop floors so headings fit the viewport.
	   !important needed to beat per-widget Elementor typography presets that
	   inject `.elementor-element-X .vk-section-title { font-size: 96px }` etc. */
	.vk-section-title { font-size: clamp(30px, 8vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; }
	.vk-marquee-track { font-size: clamp(28px, 8vw, 52px) !important; gap: 24px !important; padding-left: 24px !important; }
	.vk-marquee.reverse .vk-marquee-track { font-size: clamp(20px, 5.5vw, 34px) !important; }

	/* Booking step content */
	.vk-booking-step-title { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.1 !important; }
	.vk-booking-step-lead { font-size: 14px; line-height: 1.4; }
	.vk-choice-grid { grid-template-columns: 1fr !important; }
	.vk-form-grid { grid-template-columns: 1fr; }
	/* Mobile: pin the step-nav to the bottom of the viewport as a true fixed
	   action bar. sticky was unreliable when vk-booking-main wasn't tall
	   enough to enter the sticky zone, or when an ancestor's transform/overflow
	   broke the sticky reference; fixed always works.  Add padding-bottom to
	   vk-booking-body so the last service row isn't covered by the bar. */
	.vk-step-nav {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		flex-direction: row;
		align-items: stretch;
		gap: 8px;
		padding: 10px var(--pad-x);
		margin: 0;
		background: var(--bg);
		border-top: 1.5px solid var(--ink);
		z-index: 100;
		box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
	}
	.vk-step-nav .vk-btn { flex: 1; justify-content: center; }
	.vk-step-nav .vk-btn-hot { flex: 1.4; }
	.vk-booking-body { padding-bottom: 92px; }

	/* Service picker rows — stack name above meta (time + price) so long
	   service titles like "Naiste juukselõikus pesu ja föönitamisega" wrap
	   cleanly instead of colliding with the right-hand columns.
	   !important required to beat Elementor's typography preset (specificity
	   0,2,0 from its WRAPPER-prefixed selector). */
	.vk-booking, .vk-booking-main, .vk-svc-pick-list, .vk-booking-body, .vk-booking-grid { max-width: 100%; min-width: 0; overflow-x: hidden; }
	/* Belt-and-braces: every direct text node inside a picker row clipped to
	   container width. Wins over any inline Elementor sizing. */
	.vk-svc-pick * { max-width: 100% !important; min-width: 0 !important; word-wrap: break-word; }
	.vk-svc-pick {
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas: "name price" "name time" !important;
		gap: 4px 12px !important;
		padding: 14px 16px !important;
		align-items: baseline !important;
	}
	.vk-svc-pick > * { min-width: 0 !important; max-width: 100% !important; }
	.vk-svc-pick .name  {
		grid-area: name !important;
		font-size: 13px !important;
		letter-spacing: 0.01em !important;
		line-height: 1.25 !important;
		text-transform: uppercase !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		hyphens: auto;
	}
	.vk-svc-pick .time  { grid-area: time !important;  font-size: 11px !important; justify-self: end; }
	.vk-svc-pick .price { grid-area: price !important; font-size: 16px !important; }
	.vk-svc-pick.grouped { padding-left: 28px !important; }
	.vk-svc-pick-group { font-size: 11px !important; padding: 12px 16px 8px !important; }

	/* Choice cards (categories, stylist picker) trimmed for narrow viewports */
	.vk-choice-name { font-size: 18px; line-height: 1.1; }
	.vk-choice .code { font-size: 9px; }

	/* Calendar — fits any phone viewport. !important on grid-template-columns
	   to beat any Elementor typography preset that might override. */
	.vk-cal {
		padding: 4px !important;
		gap: 2px !important;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.vk-cal > * { min-width: 0; }
	.vk-cal-cell { font-size: 13px !important; padding: 0 !important; }
	.vk-cal-head { font-size: 9px !important; padding: 3px 0 !important; letter-spacing: 0.08em !important; }
	.vk-cal-controls { gap: 6px; }
	.vk-cal-month { font-size: clamp(14px, 4.5vw, 18px); }
	.vk-slots { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-width: 100%; }
	.vk-slot { padding: 9px 4px; font-size: 12px; }

	/* Summary sidebar — stacks above main on mobile, but compact */
	.vk-summary { padding: 18px; }

	/* Footer mobile tweaks handled in the dedicated rules at line ~1670 */

	/* Marquee */
	.vk-marquee { padding: 14px 0; }
	.vk-marquee-track { font-size: clamp(32px, 9vw, 56px); gap: 32px; padding-left: 32px; }
	.vk-marquee.reverse .vk-marquee-track { font-size: clamp(22px, 6vw, 36px); }

	/* Confirm */
	.vk-confirm-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
	.vk-confirm-row dt { font-size: 10px; }
}

@media (max-width: 480px) {
	.vk-stats-grid { grid-template-columns: 1fr; }
	.vk-stat:nth-child(n) { border-right: none; border-bottom: 1.5px solid var(--ink); }
	.vk-stat:last-child { border-bottom: none; }
	.vk-team-strip-grid { grid-template-columns: repeat(2, 1fr); }
	/* Stepper: hide labels entirely below 480 — the numbers are the entire
	   step indicator, the active row title underneath says what step it is. */
	.vk-stepper-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vk-step { padding: 10px 2px; gap: 0; }
	.vk-step .num   { font-size: 15px; letter-spacing: 0; }
	.vk-step .label { display: none; }
	.vk-section-title { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.05 !important; }
	.vk-booking-step-title { font-size: clamp(18px, 5.5vw, 24px) !important; line-height: 1.1 !important; }
	/* Tighter service picker rows + thinner letter-spacing for the heavy Archivo */
	.vk-svc-pick { padding: 12px 14px; }
	.vk-svc-pick .name  { font-size: 12px; letter-spacing: 0; }
	.vk-svc-pick .price { font-size: 14px; }
	.vk-svc-pick.grouped { padding-left: 22px; }
	.vk-svc-pick-group { font-size: 10px; padding: 10px 14px 6px; }
	/* Pricelist rows — same tightening at phone width */
	.vk-svc-row { padding: 12px 0; }
	.vk-svc-row-name { font-size: 12px; letter-spacing: 0; }
	.vk-svc-row-price { font-size: 14px; }
	.vk-svc-row-time  { font-size: 9.5px; }
	.vk-svc-row.grouped { padding-left: 12px; }
	.vk-svc-group-head { font-size: 10px; margin: 18px 0 4px; }
	.vk-footer-logo { font-size: clamp(22px, 6vw, 32px); }
	.vk-contact-address { font-size: clamp(24px, 8vw, 34px); }
	/* Phone — calendar tighter still */
	.vk-cal { padding: 3px !important; gap: 1px !important; }
	.vk-cal-cell { font-size: 12px !important; }
	.vk-cal-head { font-size: 8px !important; padding: 2px 0 !important; }
	.vk-cal-month { font-size: 13px; }
	.vk-cal-controls { gap: 4px; }
	.vk-slots { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
	.vk-slot { padding: 8px 3px; font-size: 11px; }
}