/* Balder Luxury Lodge - hand-written rebuild. Colors/type snapped from live Elementor kit-5. */

@font-face {
	font-family: "HelveticaNeueCyr";
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/HelveticaNeueCyr-Light.ttf") format("truetype");
}
@font-face {
	font-family: "HelveticaNeueCyr";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/HelveticaNeueCyr-Roman.ttf") format("truetype");
}
@font-face {
	font-family: "HelveticaNeueCyr";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/HelveticaNeueCyr-Medium.ttf") format("truetype");
}
@font-face {
	font-family: "HelveticaNeueCyr";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/HelveticaNeueCyr-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Finlandica";
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/Finlandica-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
	--c-primary: #030A09;   /* near-black, dark sections */
	--c-secondary: #134C54; /* deep teal, hero/footer */
	--c-accent: #CBBB9F;    /* tan/gold - FILLS ONLY, 1.88:1 as text on white */
	--c-accent-ink: #6B5C41; /* tan for TEXT on light backgrounds, 6.5:1 */
	--c-ink-2: #3E4746;     /* body text on light, 9.57:1 */
	--c-ink-3: #4A5455;     /* muted text on light, 7.81:1 */
	--c-white: #FFFFFF;
	--c-gray: #C0CACC;
	--font-body: "HelveticaNeueCyr", Arial, sans-serif;
	--font-display: "Finlandica", Georgia, serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--content-width: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--c-primary);
	color: var(--c-white);
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.5;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
h1 { font-size: 75px; }
h2, h3 { font-size: 55px; }
h6 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
p { margin: 0 0 1em; }
.eyebrow, .intro__eyebrow {
	/* tan is a FILL colour; on light sections it drops to 1.88:1 - use the ink tone */
	display: inline-block;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 0.4em;
}

/* Buttons are one system: same height, same tracking, same case. Tan carries near-black text
   (10.6:1); white on tan was 1.88:1 and failed on every CTA on the site - 17.08.2026. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	/* caps-only labels have no descenders - geometric centering reads high; 3px top padding
	   drops the line ~1.5px to the optical middle (Nikita 28.08.2026: "надо ниже") */
	padding: 3px 30px 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--accent { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.btn--accent:hover { background: #B8A582; border-color: #B8A582; }
.btn--outline { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.btn--outline:hover { background: var(--c-accent); color: var(--c-primary); }

/* ---------- Header ---------- */
.site-header {
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	position: sticky;
	top: 0;
	z-index: 500;
	background: transparent;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.21);
}
/* Transparent over the hero (white marks on video), LIGHT once scrolled past it. The page below
   the hero is white/teal, so the old translucent-black stuck state read as a dark bar sitting on
   white content - Nikita, 17.08.2026: "Почему header Стал темным?". Logo PNG is white-only, so it
   is inverted with a filter for the light state. */
.site-header.is-stuck {
	background: var(--c-white);
	border-bottom-color: rgba(3, 10, 9, 0.10);
	box-shadow: 0 2px 20px rgba(3, 10, 9, 0.07);
}
.site-header.is-stuck .main-nav__list a,
.site-header.is-stuck .site-header__agents { color: var(--c-primary); }
.site-header.is-stuck .site-header__logo img { filter: brightness(0); }
.site-header.is-stuck .burger span { background: var(--c-primary); }

/* Sticky header is ~86px tall at every width (measured) - any section landed on via #anchor
   (footer links like /packages/#activities, /accommodation/#suites, same-page #packages)
   needs this clearance or its heading lands under the header. */
main section[id] { scroll-margin-top: 100px; }
/* 3 equal-weight columns, NOT space-between: the nav block (579px) and the actions block (384px)
   are different widths, so space-between pushed the logo 97px right of the viewport centre -
   Nikita, 17.08.2026: "почему в хэдере лого не слева, и не по центру, а криво". 1fr auto 1fr puts
   the logo on the true centre regardless of what the side blocks weigh. */
.site-header__inner {
	max-width: 1500px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	padding: 1.1em 2.5em;
	gap: 2.5em;
}
.main-nav { justify-self: start; grid-column: 1; }
.site-header__logo { justify-self: center; grid-column: 2; }
.site-header__right { justify-self: end; grid-column: 3; }
.main-nav__list { display: flex; gap: 26px; white-space: nowrap; }
.main-nav__list a {
	font-size: 16px;
	font-weight: 300;
	color: var(--c-white);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.main-nav__list a:hover,
.main-nav__list a.is-active { color: var(--c-accent); border-color: var(--c-accent); }
.site-header__logo img { width: 120px; height: auto; transform: translateY(-4px); }
.site-header__right { display: flex; align-items: center; gap: 20px; }
.site-header__lang-slot { display: inline-flex; align-items: center; }
.site-header__agents { font-size: 14px; font-weight: 300; text-transform: uppercase; color: var(--c-white); }
@media (max-width: 1024px) { .site-header__lang-slot { display: none; } }
.site-header__book { min-height: 38px; padding: 0 18px; font-size: 12px; }
.burger { display: none; width: 26px; height: 19px; position: relative; background: none; border: none; cursor: pointer; padding: 0; margin-left: 4px; }
.burger span {
	position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-white);
	transition: 0.25s ease-in-out;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 8px; }
.burger span:nth-child(3) { top: 16px; }
.burger.is-open span:nth-child(1) { transform: rotate(45deg); top: -1px; }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); top: 17px; }

.mobile-nav {
	display: none;
	background: var(--c-primary);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-nav.is-open { display: block; }
.mobile-nav__list { padding: 1em 2em; display: flex; flex-direction: column; gap: 1em; }
.mobile-nav__list a { font-size: 18px; }
.mobile-nav__list a.is-active { color: var(--c-accent); }

@media (max-width: 1024px) {
	.main-nav, .site-header__agents { display: none; }
	.burger { display: block; }
}

/* ---------- Floating buttons (WhatsApp / Call) ---------- */
.float-btn {
	position: fixed;
	bottom: 20px;
	z-index: 900;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.float-btn--whatsapp { right: 20px; background: #25d366; }
.float-btn--call { left: 20px; background: var(--c-primary); border: 1px solid var(--c-accent); color: var(--c-accent); }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 900px;
	margin-top: -6em;
	padding-top: 6em;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--c-secondary);
}
.hero__media { position: absolute; inset: 0; }
.hero__poster { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
	position: absolute; inset: 0;
	/* Radial patch behind the centred text zone guards against the video's own end frame (a
	   Balder logo watermark sits there) without touching the source video - Nikita, 27.08.2026. */
	background:
		radial-gradient(46% 42% at 50% 46%, rgba(3, 10, 9, 0.55) 0%, rgba(3, 10, 9, 0) 72%),
		linear-gradient(180deg, rgba(3, 10, 9, 0.55) 0%, rgba(3, 10, 9, 0.34) 34%, rgba(3, 10, 9, 0.48) 100%);
}
.hero__content { position: relative; text-align: center; padding: 0 1em; max-width: 780px; margin: 0 auto; }
.hero__title { font-size: 75px; font-weight: 400; color: var(--c-white); }
.hero__subtitle { font-family: var(--font-body); font-size: 18px; color: var(--c-white); margin: 0.8em 0 0; }
.hero__actions { display: flex; align-items: center; justify-content: center; gap: 1.5em; margin-top: 1.6em; flex-wrap: wrap; }
.hero__link { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

/* Sits directly on top of the light .intro block below it (live: same white band) - matches live colors. */
.trust-line {
	/* Was capped by the global `p { max-width: 68ch }` rule with no margin:auto, so the white
	   background only painted the left ~45% of the row and the dark body colour showed through
	   on the right - Nikita, 27.08.2026: "это че за хуйня". */
	max-width: none;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
	color: var(--c-primary);
	background: var(--c-white);
	padding: 1.4em 1em 0.5em;
	letter-spacing: 0.02em;
}
.trust-line__stars { color: var(--c-accent); letter-spacing: 0.15em; margin-right: 0.4em; }

@media (max-width: 767px) {
	.hero { min-height: 855px; margin-top: -4em; }
	.hero__title { font-size: 38px; }
	.hero__subtitle { font-size: 15px; }
}

/* ---------- Intro (eyebrow + quote) ---------- */
/* White on live (checked against live_1440_after.png + mirror/index.html: this block carries no
   dark override, so it renders on the page's plain white background with dark body text). */
.intro {
	padding: 3em 2em;
	text-align: center;
	background: var(--c-white);
	color: var(--c-primary);
}
.intro__eyebrow {
	display: inline-block;
	line-height: 12px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--c-accent);
	margin-bottom: 1em;
	color: var(--c-primary);
}
.intro__quote {
	font-family: var(--font-body);
	font-size: 24px;
	font-style: oblique;
	max-width: min(85%, var(--content-width));
	margin: 0 auto;
}

/* ---------- Split (Accommodation teaser) ---------- */
/* White on live, dark text, photo right, solid accent button (checked live_split_crop2.png) -
   only the base .eyebrow (tan) is unaffected, it already reads fine on white. */
.split {
	display: flex;
	flex-wrap: wrap;
	background: var(--c-white);
	color: var(--c-primary);
}
.split__text, .split__media { flex: 1 1 50%; min-width: 320px; }
.split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4em 8%;
}
.split__text h2 { margin-bottom: 0.4em; }
.split__text p { max-width: 45em; }
.split__text .btn { align-self: flex-start; margin-top: 0.5em; }
.split__media img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; }

@media (max-width: 767px) {
	.split__text { padding: 3em 1.6em; }
	.split__media img { min-height: 300px; }
}

/* ---------- Packages ---------- */
.packages {
	min-height: 1000px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: linear-gradient(rgba(3, 10, 9, 0.6), rgba(3, 10, 9, 0.6)), url("/assets/img/our-story-3.jpg");
	background-size: cover;
	background-position: bottom center;
	padding: 6em 1em;
}
/* /packages/ page's own grid is white on live, plain package pills, no photo bg - a different
   history from the home page's dark .packages (untouched, that one really is dark on live too).
   Individual .package-card keeps its own embedded dark photo/gradient either way, unaffected. */
.packages--grid {
	min-height: 1317px;
	background-image: none;
	background-color: var(--c-white);
	color: var(--c-primary);
}
.packages__inner { width: 100%; max-width: 1240px; margin: 0 auto; }
.packages__head { text-align: center; margin-bottom: 2.5em; }
.packages__head h2, .packages__head h3 { line-height: 1.15; }
.packages__subtitle { max-width: 34em; margin: 0.8em auto 0; color: var(--c-gray); font-size: 16px; }

.packages__slider { position: relative; max-width: 100%; overflow: hidden; }
.packages__track {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1em;
	scrollbar-width: none;
}
.packages__track::-webkit-scrollbar { display: none; }
/* Edge fades are state-aware (main.js toggles is-at-start/is-at-end on scroll) - a static fade
   on the right implied more cards even at the end of the track, and there was no left fade at
   all so cards just clipped abruptly - Nikita, 27.08.2026. */
.packages__slider::before, .packages__slider::after {
	content: ""; position: absolute; top: 0; bottom: 1em; width: 64px; z-index: 2;
	pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.packages__slider::before { left: 0; background: linear-gradient(90deg, var(--c-primary) 0%, transparent 100%); }
.packages__slider::after { right: 0; background: linear-gradient(270deg, var(--c-primary) 0%, transparent 100%); }
.packages__slider:not(.is-at-start)::before { opacity: 0.9; }
.packages__slider:not(.is-at-end)::after { opacity: 0.9; }

.package-card {
	scroll-snap-align: start;
	flex: 0 0 min(360px, 88vw);
	position: relative;
	min-height: 350px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-size: cover;
	background-position: center center;
	/* QA 27.08.2026: grid cards on /packages/ relied on the photo alone - lint (and a failed
	   image load) resolved white title/list/summary against the white section. Dark base
	   painted explicitly per the sections-paint-their-own-background rule. */
	background-color: var(--c-primary);
	border: 1px solid rgba(255, 255, 255, 0.12);
	isolation: isolate;
}
.package-card::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(3, 10, 9, 0.43) 0%, var(--c-primary) 100%);
}
.package-card__price {
	position: absolute; top: 0; left: 0; z-index: 1;
	background: var(--c-accent); color: var(--c-primary); /* was c-white: 1.9:1 contrast, fails WCAG - 17.08.2026 */
	font-family: var(--font-body); font-size: 15px;
	padding: 14px 20px 6px;
}
.package-card__title {
	position: relative; z-index: 1;
	font-size: 26px; text-transform: capitalize;
	color: var(--c-white); margin: 0 1.4em 0.5em;
}
.package-card__meta { position: relative; z-index: 1; display: flex; gap: 1.5em; margin: 0 1.4em 1.4em; font-size: 14px; color: var(--c-white); }
.package-card__meta li { display: flex; align-items: center; gap: 0.5em; }
.ico { flex-shrink: 0; color: var(--c-accent); }
.package-card__hook { position: relative; z-index: 1; margin: 0 1.4em 0.8em; font-size: 14px; font-style: italic; color: var(--c-accent); }
.package-card__list { position: relative; z-index: 1; margin: 0 1.4em 1.2em 2.6em; list-style: disc; font-size: 16px; color: var(--c-gray); }
@media (max-width: 767px) { .package-card__list { font-size: 14px; } }
.package-card__list li { margin-bottom: 0.3em; }

/* Home slider cards carry hook+list, content is taller and varies per card - anchor from the
   top below the price badge instead of flex-end, so a shorter card's title never rides up
   into the badge. Scoped to .packages__track so /packages/ page cards (still flex-end,
   short content) are untouched. */
.packages__track .package-card { justify-content: flex-start; padding-top: 3.4em; }
/* Home card titles are typed in their correct case already ("of the", "in the") - the shared
   .package-card__title capitalize (needed by /packages/, whose titles are plain sentence case)
   would break "of"/"in"/"the" into "Of"/"In"/"The". Scoped so /packages/ is untouched. */
.packages__track .package-card__title { text-transform: none; }
.packages__track .package-card__book { margin-top: auto; }
/* Thin chevron on the right, replaces the default browser triangle marker that sat on the
   left of the label - Nikita, 27.08.2026: "значок открытия с сайта 2001 года". */
.package-card__book { position: relative; z-index: 1; margin: 1em 1.4em 1.4em; align-self: flex-start; }

/* Home slider card = split panel (design fix 17.08.2026): photo on top, solid text panel
   below - fixes white-text-on-raw-photo contrast (was 1.0-5.9:1 depending on card, now solid
   var(--c-primary) panel = guaranteed contrast) and the 17px-vs-102px dead space (fixed 3-bullet
   different markup) are untouched. */
/* min-height, NOT height: a fixed height clipped the Book Now button out of the card on 7 of 8
   cards (measured 17.08.2026: overflow 6-63px, CTA fully invisible on 4). The track is a flex row
   with default align-items:stretch, so min-height + auto growth makes every card match the tallest
   one and keeps the button inside, still bottom-aligned via margin-top:auto. */
.packages__track .package-card {
	width: 360px;
	flex: 0 0 360px;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 0;
	background: var(--c-primary);
	border: none;
}
.packages__track .package-card::before { content: none; }
.package-card__photo { height: 210px; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
.packages__track .package-card__price { top: auto; left: 24px; bottom: -18px; z-index: 2; box-shadow: 0 4px 14px rgba(3, 10, 9, 0.35); }
.package-card__panel { padding: 34px 28px 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.packages__track .package-card__title { font-size: 24px; margin: 0 0 14px; }
.packages__track .package-card__meta { margin: 0 0 14px; color: var(--c-gray); }
.packages__track .package-card__hook { margin: 0 0 14px; }
.packages__track .package-card__list { margin: 0 0 28px 20px; }
/* margin-top:auto pins the expander to the same line on every card (flush above Book Now,
   which carries its own margin-top:auto) regardless of how much hook/list text precedes it -
   Nikita, 27.08.2026: "+ 1 more на разной высоте". The opened panel is absolutely positioned
   as an overlay (below) so opening it never changes the card's own height. */
.packages__track .package-card__book { margin: 0; margin-top: auto; align-self: flex-start; }

/* Card panel goes LIGHT. The page below the hero is white; a near-black panel made every card
   read as a heavy slab on it - Nikita, 17.08.2026: "почему карточки туров - темные".
   Text colours below are measured on white: title 19.98:1, list 9.57:1, meta 7.81:1, hook 6.5:1. */
.packages__track .package-card { background: var(--c-white); box-shadow: 0 14px 34px rgba(3, 10, 9, 0.12); }
.packages__track .package-card__panel { background: var(--c-white); }
.packages__track .package-card__title { color: var(--c-primary); }
.packages__track .package-card__meta { color: #4A5455; }
.packages__track .package-card__meta .ico { color: #8C7C5C; }
.packages__track .package-card__hook { color: #6B5C41; }
.packages__track .package-card__list { color: #3E4746; }

@media (max-width: 767px) {
	.packages__track .package-card { height: auto; }
	.packages__track .package-card__photo { height: 160px; }
	.packages__track .package-card__panel { padding: 24px 20px 20px; }
}

.packages__nav { display: flex; justify-content: center; gap: 0.6em; margin-top: 1.5em; }
.packages__all { width: max-content; margin: 2.5em auto 0; }

/* ---------- Teasers (Eat & Drink / Our Story) ---------- */
.teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 2em; padding: 5em 8%; }
.teaser__text { flex: 1 1 40%; min-width: 300px; }
.teaser__text h3 { margin-bottom: 0.4em; line-height: 1.15; }
.teaser__text p { max-width: 40em; }
.teaser__gallery { flex: 1 1 55%; display: flex; gap: 1em; min-width: 300px; }
.teaser__gallery img { flex: 1 1 0; min-width: 0; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

/* Eat & Drink: plain white section, dark text (matches live - checked against live_orig_eat.png,
   the live site has no background image here at all, the earlier "watermark" was invented).
   Live stacks text centered on top, then a full-width photo row below - not side-by-side. */
.teaser--eat {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	background-color: var(--c-white);
	padding: 5em 8% 4em;
	color: var(--c-primary);
}
/* flex-basis (40%/55% from the row layout above) is a HEIGHT share in this column context -
   reset to natural content height, else .teaser__text gets a forced box taller than its
   content and the extra shows as a blank gap before the gallery. */
.teaser--eat .teaser__text, .teaser--eat .teaser__gallery { flex: none; }
.teaser--eat .teaser__text { max-width: 845px; margin: 0 auto; text-align: center; }
.teaser--eat .teaser__text p { margin-left: auto; margin-right: auto; }
.teaser--eat .eyebrow { color: var(--c-accent); }
.teaser--eat h3, .teaser--eat p { color: var(--c-primary); }
.teaser--eat .teaser__gallery { width: 100%; margin-top: 2em; }

/* Our Story: live keeps this one dark-text-on-photo like ours, but the overlay there only
   dims to ~0.4 alpha flat (checked live_ourstory_crop.png) - the bright blue-sky photo reads
   through clearly, not the near-solid-black wash the 0.73->1.0 gradient gave it before. */
.teaser--story {
	min-height: 900px;
	background-image: linear-gradient(rgba(3, 10, 9, 0.4), rgba(3, 10, 9, 0.4)), url("/assets/img/Talvinen-lappi.jpeg");
	background-size: cover;
	background-position: bottom center;
}
/* White text over the bright sky/snow lost readability once the wash was lightened for the
   fix above - measured 3.09:1 (1440) / 4.14:1 (390) at the brightest photo point behind the
   paragraph, both under the 4.5:1 body-text minimum. Soft backdrop under the text column only
   (not the whole section, keeps the bright photo bright everywhere else) - blended against the
   worst-case brightest sample this clears >9:1. */
.teaser--story .teaser__text {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
	background: rgba(3, 10, 9, 0.5);
	padding: 2em 2.5em;
	border-radius: 4px;
}
/* QA 27.08.2026: the p inside was still capped at 62ch (551px, 5 lines) - Nikita asked for
   3-4 lines. Let the container set the measure. Same cap on the eat teaser (Nikita 27.08:
   "почему все еще 5 строчек" on Flavours Of The North). */
.teaser--story .teaser__text p { max-width: none; }
.teaser--eat .teaser__text { max-width: 1000px; margin-left: auto; margin-right: auto; }
.teaser--eat .teaser__text p { max-width: none; }
.teaser--story .btn { display: inline-flex; }

@media (max-width: 767px) {
	.package-card__title { font-size: 22px; }
	.packages { min-height: 720px; }
	.packages--grid { min-height: 1757px; }
}

@media (max-width: 767px) {
	.teaser { padding: 3.5em 1.6em; flex-direction: column; }
	.teaser--story { min-height: 810px; }
	.teaser--eat { padding-bottom: 1.5em; }
	.teaser--eat .teaser__gallery { margin-top: 1em; }
	.hide-mobile { display: none; }
}

/* ---------- FAQ (variant b, Nikita 28.08.2026: two-column with contact block) ---------- */
.faqB { padding: var(--sp-l) 25px var(--sp-m); background: var(--c-white); color: var(--c-primary); }
.faqB__inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 4em; }
.faqB__intro { flex: 1 1 320px; max-width: 380px; }
.faqB__intro .eyebrow { color: var(--c-accent-ink); }
.faqB__title { font-size: 40px; margin-bottom: 0.5em; }
.faqB__lede { color: var(--c-ink-2); font-size: 15px; max-width: none; }
.faqB__contact { margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--c-gray); display: flex; flex-direction: column; gap: 0.5em; font-size: 15px; }
.faqB__contact a { color: var(--c-primary); }
.faqB__contact a:hover { color: var(--c-accent-ink); }
.faqB__phone { color: var(--c-accent-ink); font-weight: 400; }
.faqB__contact p { margin: 0; color: var(--c-ink-3); }
.faqB__list { flex: 1 1 520px; min-width: 0; }

/* Base accordion component: thin dividers, no boxes, thin plus/minus toggle. Reused by faqB. */
.accordion__item { border: 0; border-top: 1px solid var(--c-gray); margin: 0; padding: 0; }
.accordion__item:last-child { border-bottom: 1px solid var(--c-gray); }
.accordion__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 1.3em 0;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__icon { width: 16px; height: 16px; position: relative; flex-shrink: 0; }
.accordion__icon::before, .accordion__icon::after {
	content: ""; position: absolute; background: var(--c-accent-ink);
}
.accordion__icon::before { width: 100%; height: 1.5px; top: 7px; left: 0; }
.accordion__icon::after { width: 1.5px; height: 100%; top: 0; left: 7px; transition: transform 0.2s; }
.accordion__item[open] .accordion__icon::after { transform: scaleY(0); }
.accordion__body { padding-bottom: 1.4em; color: var(--c-ink-2); font-size: 15px; }
@media (max-width: 767px) {
	.faqB__inner { gap: 2em; }
	.faqB__intro { max-width: none; }
}

/* ---------- Content pages (careers, terms) ---------- */
.content { padding: 5em 1em; background: var(--c-white); color: var(--c-primary); }
.content__inner { max-width: 800px; margin: 0 auto; }
.content__inner h2 { font-size: 32px; margin: 1.4em 0 0.5em; }
.content__inner h2:first-child { margin-top: 0; }
.content__inner h3 { font-size: 22px; margin: 1.2em 0 0.5em; color: var(--c-secondary); }
.content__inner p { margin: 0 0 1em; }
.content__inner ul { list-style: disc; margin: 0 0 1em 1.4em; }
.content__inner ul li { margin-bottom: 0.4em; }
.content__inner a { text-decoration: underline; }
@media (max-width: 767px) {
	.content { padding: 3em 1.2em; }
	.content__inner h2 { font-size: 26px; }
}

/* ---------- Footer (variant b, Nikita 28.08.2026: giant wordmark + one-line nav) ---------- */
.ftB { background: var(--c-primary); padding: var(--sp-l) 1em 0; color: rgba(255, 255, 255, 0.86); }
.ftB__inner { max-width: 1240px; margin: 0 auto; }
.ftB__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2em; padding-bottom: 2.4em; }
.ftB__word { display: block; }
.ftB__word img { width: clamp(200px, 26vw, 360px); height: auto; }
.ftB__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em; text-align: right; font-size: 15px; }
.ftB__contact a { color: var(--c-white); }
.ftB__contact a:hover { color: var(--c-accent); }
.ftB__phone { color: var(--c-accent); }
.ftB__contact p { margin: 0.4em 0 0; color: rgba(255, 255, 255, 0.7); }
.ftB__rating { display: flex; gap: 0.5em; justify-content: flex-end; }
.ftB__stars { color: var(--c-accent); letter-spacing: 0.05em; }
.ftB__nav {
	display: flex; flex-wrap: wrap; gap: 0.6em 0; align-items: center;
	padding: 1.6em 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ftB__nav a { color: rgba(255, 255, 255, 0.86); padding: 0 1.1em; }
.ftB__nav a:first-child { padding-left: 0; }
.ftB__nav a:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.24); }
.ftB__nav a:hover { color: var(--c-accent); }
.ftB__bottom {
	display: flex; flex-wrap: wrap; gap: 1.2em 2em; justify-content: space-between; align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.6em 0 2.4em;
	font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.ftB__brand { display: flex; align-items: center; gap: 1.6em; }
.ftB__logo { width: 110px; }
.ftB__partner { width: 96px; }
.ftB__copy { margin: 0; }
.ftB__legal { display: flex; gap: 1.6em; margin: 0; }
.ftB__legal a { font-size: 13px; }
@media (max-width: 767px) {
	.ftB__top { flex-direction: column; align-items: flex-start; }
	.ftB__contact { text-align: left; align-items: flex-start; }
	.ftB__rating { justify-content: flex-start; }
	.ftB__nav { flex-direction: column; align-items: flex-start; gap: 0.6em; }
	.ftB__nav a { padding: 0; border-right: 0 !important; }
	.ftB__bottom { flex-direction: column; align-items: flex-start; }
}

/* Booking: Mews.Distributor (footer.html + per-page scripts) renders its own fullscreen
   iframe on .distributor-open-N buttons - no custom popup markup/CSS needed. */

/* ---------- Our Story (variant A, 28.08.2026, zero teal - Nikita: "я вообще не уважаю этот
   зеленый цвет") ---------- */
.story-hero { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-white); background-size: cover; background-position: center; isolation: isolate; }
.story-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(3,10,9,.3),rgba(3,10,9,.6)); }
.story-hero h1 { font-size: 52px; margin: 0; }
.story-lede { background: var(--c-white); text-align: center; padding: var(--sp-m) 1em; }
.story-lede p { max-width: 760px; margin: 0 auto; font-size: 20px; line-height: 1.65; color: var(--c-ink-2); }
.story-banner { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; isolation: isolate; }
.story-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(3,10,9,.4); }
.story-banner h2 { position: relative; font-family: var(--font-display); font-size: 30px; text-transform: uppercase; color: var(--c-white); text-align: center; line-height: 1.3; padding: 0 1em; }
.story-split { display: flex; flex-wrap: wrap; background: var(--c-white); }
.story-split__text { flex: 1 1 50%; min-width: 320px; padding: var(--sp-m) 6%; display: flex; flex-direction: column; justify-content: center; }
.story-split__text p { font-size: 16px; line-height: 1.65; color: var(--c-ink-2); margin: 0 0 1.1em; }
.story-split__media { flex: 1 1 50%; min-width: 320px; }
.story-split__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.story-split--rev { flex-direction: row-reverse; }
.story-stats { background: var(--c-primary); color: var(--c-white); padding: var(--sp-s) 1em; }
.story-stats__inner { max-width: 1140px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.6em; text-align: center; }
.story-stats b { display: block; font-family: var(--font-serif); font-size: 26px; color: var(--c-accent); margin-bottom: .3em; }
.story-stats span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gray); }
.story-cta { text-align: center; padding: var(--sp-m) 1em; background: var(--c-white); }
@media (max-width: 767px) {
	.story-hero, .story-banner { min-height: 320px; }
	.story-hero h1 { font-size: 34px; }
	.story-banner h2 { font-size: 22px; }
	.story-lede { padding: var(--sp-s) 1.6em; }
	.story-split__text { padding: var(--sp-s) 1.6em; }
	.story-split__media img { min-height: 260px; }
}

/* ---------- Contact (variant A, 28.08.2026, zero teal) ---------- */
.contact-hero { display: flex; flex-wrap: wrap; min-height: 560px; background: var(--c-primary); }
.contact-hero__panel { flex: 1 1 50%; min-width: 320px; color: var(--c-white); padding: var(--sp-m) 6%; display: flex; flex-direction: column; justify-content: center; }
.contact-hero__panel .eyebrow { color: var(--c-accent); }
.contact-hero__panel h1 { font-size: 40px; margin: 0 0 .3em; }
.contact-hero__panel p.lede { color: var(--c-gray); margin: 0 0 1.6em; }
.contact-hero__panel a { color: var(--c-accent); }
.contact-form { display: flex; flex-direction: column; gap: 1.1em; max-width: 460px; }
.contact-form__row { display: flex; gap: 1em; flex-wrap: wrap; }
.contact-form__row label { flex: 1 1 160px; }
.contact-form label { display: flex; flex-direction: column; gap: .4em; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-gray); }
.contact-form input { padding: 12px 14px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.04); color: var(--c-white); font-size: 15px; font-family: var(--font-body); }
.contact-form input::placeholder { color: rgba(255,255,255,.4); }
.contact-form .btn { align-self: flex-start; }
.contact-hero__media { flex: 1 1 50%; min-width: 320px; }
.contact-hero__media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.contact-facts { background: var(--c-white); padding: var(--sp-m) 1em; }
.contact-facts__inner { max-width: 1140px; margin: 0 auto; display: flex; gap: 3em; flex-wrap: wrap; justify-content: space-between; }
.contact-facts__item h2 { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--c-primary); margin: 0 0 .4em; }
.contact-facts__item p { color: var(--c-ink-2); font-size: 15px; margin: 0; }
.contact-map { line-height: 0; }
.contact-map iframe { width: 100%; height: 380px; border: 0; filter: grayscale(0.3); }
@media (max-width: 767px) {
	.contact-hero { min-height: 0; }
	.contact-hero__panel { padding: var(--sp-s) 1.6em; }
	.contact-hero__media img { min-height: 260px; }
	.contact-facts { padding: var(--sp-s) 1.6em; }
}

/* ---------- Full Buyout (variant B, 28.08.2026, numbered bl-policy pattern, zero teal) ---------- */
.buyout-hero { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-white); background-size: cover; background-position: center; isolation: isolate; }
.buyout-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(3,10,9,.35),rgba(3,10,9,.7)); }
.buyout-hero h1 { font-size: 46px; margin: 0; }
.buyout-wrap { background: var(--c-white); color: var(--c-ink-2); }
.buyout { max-width: 900px; margin: 0 auto; padding: var(--sp-l) 2em; }
.buyout-num { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--c-accent-ink); }
.buyout-sec { display: flex; gap: 40px; padding: 34px 0; border-top: 1px solid rgba(3,10,9,.1); align-items: flex-start; }
.buyout-sec:first-of-type { border-top: none; padding-top: 0; }
.buyout-sec__text { flex: 1 1 55%; }
.buyout-sec__text h2 { margin: 0 0 14px; font-size: 24px; color: var(--c-primary); font-family: var(--font-serif); font-weight: 400; }
.buyout-sec__text p { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.buyout-sec__img { flex: 1 1 40%; }
.buyout-sec__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; display: block; }
.buyout-contacts { width: 100%; border-collapse: collapse; margin-top: 14px; border: 1px solid rgba(3,10,9,.12); border-radius: 10px; overflow: hidden; }
.buyout-contacts th, .buyout-contacts td { padding: 14px 18px; text-align: left; font-weight: 400; font-size: 15.5px; border-top: 1px solid rgba(3,10,9,.1); }
.buyout-contacts tr:first-child th, .buyout-contacts tr:first-child td { border-top: none; }
.buyout-contacts th { width: 160px; color: var(--c-ink-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.buyout-contacts a { color: var(--c-primary); }
.buyout-cta { text-align: center; padding: var(--sp-m) 1em; background: var(--c-accent); }
.buyout-cta .btn--accent { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
@media (max-width: 767px) {
	.buyout-hero { min-height: 260px; }
	.buyout-hero h1 { font-size: 30px; }
	.buyout { padding: var(--sp-s) 1.6em; }
	.buyout-sec { flex-direction: column; gap: 18px; padding: 24px 0; }
	.buyout-sec__img img { aspect-ratio: 16/10; }
}

/* ---------- Eat & Drink ---------- */
/* White on live (checked live_eat-and-drink.png): intro text, photo grid and closing text
   all sit on one continuous white block, dark text. */
/* max-width constrains CONTENT only - background/color must stay on the full-width section,
   else the white only shows behind the centered text and leaves black bars on either side
   (same bug just fixed on .intro). */
.eat-intro { display: flex; align-items: center; justify-content: center; min-height: 341px; padding: 3em 2em; text-align: center; background: var(--c-white); color: var(--c-primary); }
.eat-intro__inner { max-width: 900px; margin: 0 auto; }
.eat-intro--lead { min-height: 504px; }
.eat-intro h2 { font-size: 36px; margin-bottom: 0.6em; }
.eat-intro p { font-size: 16px; }
.eat-gallery {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
	/* pads content to content-width without capping the section's own box, so the white
	   background this section carries stays full-bleed */
	padding: 0 max(2em, calc((100% - var(--content-width)) / 2)) 3em;
	background: var(--c-white);
}
.eat-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.eat-gallery img.span-tall { grid-row: span 1; }
@media (max-width: 767px) {
	.eat-gallery { grid-template-columns: repeat(2, 1fr); padding: 0 1.6em 2em; }
	.eat-gallery img { aspect-ratio: auto; height: 73px; }
	.eat-intro { min-height: 421px; }
	.eat-intro--lead { min-height: 460px; }
}

/* ---------- Accommodation: floor plan intro + room sections ---------- */
.floorplan .split__media img { object-fit: contain; padding: 2em; min-height: auto; }
.floorplan .split__media { display: flex; align-items: center; background: var(--c-primary); }

/* Floor plan (variant a, Nikita 28.08.2026): light panel, dark plan lines, legend row. */
.floorplanA .split__media {
	background: #F4F1EB; flex-direction: column; justify-content: center; align-items: stretch;
	padding: 0;
}
.floorplanA__img { filter: brightness(0); padding: 2.5em 2.5em 1em; min-height: auto; }
.floorplanA__legend {
	display: flex; flex-wrap: wrap; gap: 1.6em 2.4em; padding: 1em 2.5em 1.8em;
	border-top: 1px solid rgba(3, 10, 9, 0.12); font-size: 13px; color: var(--c-ink-3);
}
.floorplanA__legend span { display: inline-flex; align-items: center; gap: 0.6em; }
.floorplanA__legend i { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--c-ink-3); flex-shrink: 0; }
@media (max-width: 767px) {
	.floorplanA__img { padding: 1.6em 1.6em 0.8em; }
	.floorplanA__legend { padding: 0.8em 1.6em 1.6em; }
}

/* ---------- Room cards (variant a, Nikita 28.08.2026): overlapping photo + spec panel,
   alternating sides, numbered. Own classes (.roomA) - `.room`/`.room__body` stay untouched
   because the activity-page template reuses them (decisions.md, 18.08.2026). */
.roomA { padding: var(--sp-m) 1em; background: var(--c-white); border-top: 1px solid var(--c-gray); }
.roomA__inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; }
.roomA__media { flex: 1 1 62%; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.roomA__media .room-gallery, .roomA__media .room-gallery__track, .roomA__media .room-gallery__slide { height: 100%; }
.roomA__media .room-gallery__slide { aspect-ratio: auto; }
.roomA__panel {
	flex: 0 0 470px; min-width: 0; margin-left: -90px; z-index: 1;
	background: var(--c-white); box-shadow: 0 26px 60px rgba(3, 10, 9, 0.16);
	padding: 2.4em 2.2em;
}
.roomA--rev .roomA__inner { flex-direction: row-reverse; }
@media (max-width: 1100px) {
	.roomA__panel { flex-basis: 380px; }
	.roomA__stat b { font-size: 19px; }
	.roomA__stats { gap: 1em 1.4em; flex-wrap: wrap; }
}
.roomA--rev .roomA__panel { margin-left: 0; margin-right: -90px; }
.roomA__num { margin: 0 0 0.6em; font-size: 13px; letter-spacing: 0.1em; color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }
.roomA__panel h2 { font-size: 30px; text-transform: none; color: var(--c-primary); font-family: var(--font-serif); font-weight: 400; }
.roomA__rule { display: block; width: 40px; height: 2px; background: var(--c-accent-ink); margin: 0.8em 0 1.2em; }
.roomA__facts p { margin: 0 0 0.6em; font-size: 15px; color: var(--c-ink-2); }
.roomA__amenities { margin: 1em 0 1.4em; font-size: 13px; letter-spacing: 0.02em; color: var(--c-ink-3); }
/* Variant C (Nikita, 28.08.2026): 3 stats + short paragraph, replaces the 6-paragraph list above */
.roomA__stats { display: flex; gap: 2.2em; margin: 0 0 1.3em; }
.roomA__stat b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin-bottom: 3px; color: var(--c-primary); white-space: nowrap; }
.roomA__stat span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; }
.roomA__body { font-size: 15.5px; line-height: 1.65; color: var(--c-ink-2); margin: 0 0 0.6em; }
@media (max-width: 480px) {
	.roomA__stats { gap: 1.1em; flex-wrap: wrap; }
	.roomA__stat { flex: 1 1 28%; }
	.roomA__stat b { font-size: 19px; }
}
@media (max-width: 1023px) {
	.roomA__panel { flex-basis: 320px; margin-left: -60px; padding: 2em 1.8em; }
	.roomA--rev .roomA__panel { margin-right: -60px; }
}
@media (max-width: 767px) {
	.roomA { padding: 2.5em 1.2em; }
	.roomA__inner, .roomA--rev .roomA__inner { flex-direction: column; align-items: stretch; }
	.roomA__media { aspect-ratio: 4 / 3; flex-basis: auto; }
	.roomA__panel, .roomA--rev .roomA__panel {
		flex-basis: auto; margin: -32px 1.2em 0; box-shadow: 0 16px 32px rgba(3, 10, 9, 0.14);
	}
}

/* White on live, dark heading (checked live /accommodation/: "Suites" h2 renders #030A09 on
   #FFFFFF, not the accent tan the class name would suggest). */
.room { border-top: 1px solid var(--c-gray); padding: 4em 1em; background: var(--c-white); color: var(--c-primary); }
.room__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 3em; align-items: flex-start; }
.room-gallery { flex: 1 1 480px; min-width: 300px; overflow: hidden; }
.room-gallery__track {
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.room-gallery__track::-webkit-scrollbar { display: none; }
.room-gallery__slide {
	flex: 0 0 100%; scroll-snap-align: start;
	aspect-ratio: 4 / 3; background-size: cover; background-position: center;
}
.room__body { flex: 1 1 380px; min-width: 280px; }
.room__body h2 { font-size: 32px; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.6em; font-family: var(--font-display); }
.room__amenities { display: flex; flex-wrap: wrap; gap: 1.5em 2em; margin-bottom: 1.2em; }
.room__amenities li { display: flex; align-items: center; gap: 0.5em; font-size: 14px; }
.room__amenities svg { color: var(--c-accent); flex-shrink: 0; }
.room__desc p { margin: 0 0 0.6em; font-size: 15px; }
.room__book { margin-top: 1em; }

@media (max-width: 767px) {
	.room { padding: 2.5em 1.6em; }
	.room__inner { gap: 1.5em; }
}

/* ---------- Inner-page hero ---------- */
.page-hero {
	min-height: var(--hero-min, 450px);
	padding: 7em 2em 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--c-secondary);
	background-size: cover;
	background-position: center;
	position: relative;
	isolation: isolate;
}
.page-hero[style*="background-image"]::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(3, 10, 9, 0.45);
}
.page-hero h1 { font-size: 55px; }
@media (max-width: 767px) {
	.page-hero { min-height: var(--hero-min-m, 360px); padding: 5em 1.6em 1.5em; }
	.page-hero h1 { font-size: 34px; }
}

/* ---------- Night tabs (packages page) ---------- */
.packages__head p { max-width: 30em; margin: 0 auto 1em; }
.night-tabs { display: flex; justify-content: center; gap: 1em; margin-bottom: 3em; }
.night-tabs__btn {
	width: 48px; height: 48px; border-radius: 50%;
	background: transparent; border: 1px solid var(--c-accent); color: var(--c-primary);
	font-family: var(--font-body); font-size: 16px; cursor: pointer;
}
.night-tabs__btn.is-active { background: var(--c-accent); color: var(--c-white); }
.night-panel { display: none; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.night-panel.is-active { display: grid; }
.night-panel .package-card { width: 100%; }
.package-card__book { margin-top: 1em; }

/* ---------- Activities filter + grid ---------- */
.activities { padding: 5em 1em; max-width: 1240px; margin: 0 auto; }
.activities__inner h3 { text-align: center; margin-bottom: 0.5em; }
.activities__inner > p { max-width: 50em; margin: 0 auto 2em; text-align: center; }
.activity-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8em; margin-bottom: 2.5em; }
.activity-filter__btn {
	padding: 8px 18px; border-radius: 20px; border: 1px solid var(--c-accent);
	background: transparent; color: var(--c-white); font-family: var(--font-body); font-size: 14px; cursor: pointer;
}
.activity-filter__btn.is-active { background: var(--c-accent); color: var(--c-white); }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.activity-card {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
	display: flex; flex-direction: column;
}
.activity-card[hidden] { display: none; }
.activity-card__media {
	min-height: 400px; background-size: cover; background-position: bottom center;
	position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2em;
}
.activity-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(3, 10, 9, 0.43) 0%, var(--c-primary) 100%);
}
.activity-card__top, .activity-card__bottom { position: relative; z-index: 1; }
.activity-card__top { display: flex; justify-content: space-between; align-items: center; }
.activity-card__duration { font-size: 14px; color: var(--c-accent); }
.activity-card__tag { background: var(--c-accent); color: var(--c-white); font-size: 13px; padding: 4px 12px; border-radius: 20px; }
.activity-card__title { font-size: 24px; color: var(--c-accent); margin-bottom: 0.4em; }
.activity-card__teaser { font-size: 14px; margin: 0; }
.activity-card__more { padding: 1em 2em; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.activity-card__more summary { cursor: pointer; color: var(--c-accent); text-transform: uppercase; font-size: 13px; }
.activity-card__more div { margin-top: 1em; font-size: 14px; color: var(--c-gray); }

@media (max-width: 767px) {
	.activity-grid { grid-template-columns: 1fr; }
	.activity-card__media { min-height: 300px; padding: 1em; }
}

/* ---------- Layout ceiling ---------- */
@media (min-width: 1921px) {
	.site-header__inner, .packages__inner, .contacts__inner { max-width: 1320px; }
}

/* ---------- Season ("The Lapland Year") ----------
   Our own component, not a genre pattern: every activity in the client's catalogue has a printed
   season, and no competitor of the eleven reviewed shows one. Bars are drawn from the real dates in
   specs/activities-catalogue.md; the reader drags the year and sees what is actually running.
   Built 17.08.2026 after Nikita: "ты не нашел никаких уникальных решений". */
.season { background: var(--c-white); color: var(--c-primary); padding: 6em 25px 5em; }
/* Eyebrow/title/lede/readout centred; rows stay left-aligned (they're a data table, not prose).
   Nikita, 27.08.2026: "WHEN TO COME" sat flush left while the title+description were centred -
   the eyebrow is a <p>, so it inherited the sitewide `p { max-width: 68ch }` cap with no
   margin:auto, same root cause as the trust-line bug (item 3). */
.season__inner { max-width: var(--content-width); margin: 0 auto; text-align: center; }
.season__chart, .season__row { text-align: left; }
.season .eyebrow { text-align: center; }
.season__title { font-size: 55px; text-align: center; line-height: 1.1; margin-bottom: 0.3em; }
.season__lede { max-width: 46em; margin: 0 auto 3em; text-align: center; font-size: 17px; color: #3E4746; }

.season__chart { position: relative; }
.season__scale { position: relative; height: 26px; margin-left: 220px; border-bottom: 1px solid rgba(3,10,9,.12); }
.season__tick {
	position: absolute; top: 0; transform: translateX(-2px);
	font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em;
	text-transform: uppercase; color: #6B5C41;
}
.season__tick::after { content: ""; position: absolute; left: -6px; top: 20px; width: 1px; height: 8px; background: rgba(3,10,9,.18); }

.season__rows { margin-top: 14px; }
.season__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 0; padding: 9px 0; }
.season__label b { display: block; font-weight: 400; font-size: 16px; }
.season__label i { display: block; font-style: normal; font-size: 13px; color: #6E7878; margin-top: 2px; }
.season__track { position: relative; height: 14px; background: linear-gradient(to right, rgba(3,10,9,.05), rgba(3,10,9,.05)); }
.season__bar {
	position: absolute; top: 0; height: 14px;
	background: var(--c-accent);
	transition: opacity .18s ease, background .18s ease;
}
.season__row.is-off .season__bar { opacity: .18; }
.season__row.is-on .season__bar { background: #13343A; }

.season__cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: #13343A; pointer-events: none; }
.season__readout {
	margin: 2.4em auto 0; max-width: 52em; text-align: center;
	font-size: 18px; line-height: 1.5; color: var(--c-primary); min-height: 3em;
}
.season__readout b { font-weight: 400; color: #6B5C41; }

@media (max-width: 900px) {
	.season { padding: 4em 20px 3.5em; }
	.season__title { font-size: 34px; }
	.season__scale { margin-left: 0; height: 22px; }
	.season__tick { font-size: 11px; letter-spacing: 0.08em; }
	.season__row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
	.season__label i { display: none; }
	.season__readout { font-size: 16px; }
}


/* ---------- Light-surface overrides (audit A7-A9, E64-E67) ----------
   #CBBB9F is 1.88:1 on white. Every place it carried TEXT on a light surface moves to
   --c-accent-ink (6.5:1). Fills keep the original tan. Measured 17.08.2026. */
.season .eyebrow,
.teaser--eat .eyebrow,
.split .eyebrow,
.packages--grid .eyebrow,
.intro .intro__eyebrow { color: var(--c-accent-ink); }
.trust-line__stars { color: var(--c-accent-ink); }
.teaser--eat .btn--outline,
.season .btn--outline,
.split .btn--outline,
.buyout-sec__text .btn--outline,
.eat-intro .btn--outline { color: var(--c-accent-ink); border-color: var(--c-accent-ink); }
.teaser--eat .btn--outline:hover,
.season .btn--outline:hover,
.split .btn--outline:hover,
.buyout-sec__text .btn--outline:hover,
.eat-intro .btn--outline:hover { background: var(--c-accent-ink); color: var(--c-white); }
.packages__track .package-card__meta .ico { color: var(--c-accent-ink); }

/* Night tabs: active state was white-on-tan (1.88:1) - audit A3. */
.night-tabs__btn.is-active { background: var(--c-accent); color: var(--c-primary); }
.night-tabs__btn { color: var(--c-ink-2); border-color: var(--c-accent-ink); min-width: 48px; }

/* /packages/ grid: the section had min-height 1317px with centred content, which opened a
   half-screen white void above the heading - audit item found 17.08.2026 by eye, not by lint. */
.packages--grid { min-height: 0; padding: 5em 1em 6em; }
.packages--grid .package-card__title { text-transform: none; }


/* ---------- Header / nav pass (audit B15-B31) ---------- */
/* B16-B17: nav links were 20px tall - the clickable area was the text line itself. */
.main-nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 2px; }
.main-nav__list { align-items: center; }
/* B15: header CTA was 38px, below the 44px minimum. */
.site-header__book { min-height: 44px; padding: 0 20px; font-size: 12px; }
/* B18: "For Agents" was 14px caps against 16px sentence-case nav - one row, two languages. */
.site-header__agents { font-size: 13px; letter-spacing: 0.1em; display: inline-flex; align-items: center; min-height: 44px; }
/* B19, L172: keyboard focus was invisible everywhere on the site. */
:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; border-radius: 2px; }
.site-header.is-stuck :focus-visible { outline-color: var(--c-primary); }
.hero :focus-visible, .packages :focus-visible, .teaser--story :focus-visible { outline-color: var(--c-accent); }
/* B20, L173: skip link for screen readers and keyboard users. */
.skip-link {
	position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
	z-index: 1000; background: var(--c-white); color: var(--c-primary);
	padding: 12px 20px; font-size: 14px; transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
/* B23: active state used an underline, hover used colour - same meaning, two mechanisms. */
.main-nav__list a { border-bottom: 2px solid transparent; }
.main-nav__list a:hover { color: var(--c-accent); border-color: transparent; }
.main-nav__list a.is-active { color: var(--c-accent); border-color: var(--c-accent); }
.site-header.is-stuck .main-nav__list a:hover,
.site-header.is-stuck .main-nav__list a.is-active { color: var(--c-accent-ink); border-color: var(--c-accent-ink); }
/* B26: header changed height between states, shoving the page down on scroll. */
.site-header__inner { min-height: 72px; }
/* B29: the mobile menu had no booking action - the one thing it exists for. */
.mobile-nav__book { margin: 0.6em 2em 1.4em; display: flex; }
.mobile-nav__book .btn { flex: 1; }
/* B30 (closed 28.08.2026): GTranslate dwf.js wired into the slot, see partials/header.html. */
.site-header__lang-slot .gtranslate_wrapper { line-height: 0; }
.mobile-nav__lang { margin: 0.4em 2em 0; }
/* L180: honour reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Footer pass (audit B31, K160, L) ----------
   Footer links rendered 11-14px tall: the tap area was the glyph box itself. */
.site-footer a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer__col li { line-height: 1.2; }
.site-footer__legal a { min-height: 32px; }
.site-footer .contacts__phone,
.site-footer a[href^="tel:"], .site-footer a[href^="mailto:"] { min-height: 40px; font-size: 15px; }

/* ---------- Type scale + hero pass (audit C32-C45, D46-D63) ----------
   The page carried 12 different sizes and no scale. Six steps now: 13 / 15 / 17 / 26 / 44 / 72.
   h2 and h3 were both 55px, so heading levels had no visual difference at all. */
h1 { font-size: 72px; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 44px; line-height: 1.1; text-wrap: balance; }
h3 { font-size: 26px; line-height: 1.2; text-wrap: balance; }
h1, h2, h3 { max-width: 20ch; }
.hero__title, .season__title, .packages__head h2, .faq__title, .teaser__text h3, .activity-related__inner h2 { max-width: none; }
/* D48: a serif system font was leaking into the page through unstyled controls. */
body, input, button, select, textarea, optgroup { font-family: var(--font-body); }
/* D52: line length was limited in px and em, never in characters. */
p { max-width: 68ch; }
.hero__subtitle, .season__lede, .packages__head p, .teaser__text p { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* D53-D54: the eyebrow was 24px, larger than body text, and had no tracking. */
.eyebrow, .intro__eyebrow { font-size: 15px; letter-spacing: 0.18em; margin-bottom: 1em; }
/* D61: prices and dates need lining figures so columns line up. */
.package-card__price, .season__tick, .night-tabs__btn { font-variant-numeric: tabular-nums; }

/* C33-C35: hero rhythm - 4x jump from title to subtitle, and the quiet link sat on the button. */
.hero__subtitle { font-size: 17px; margin-top: 1.2em; }
.hero__actions { margin-top: 2.2em; gap: 2.2em; }
.hero__link { font-size: 14px; letter-spacing: 0.06em; }
/* C36: a hard 900px hero clipped its own content on 1280x800 laptops. */
.hero { min-height: min(900px, 100svh); }
/* C39: nothing told the visitor there was a page below the video. */
.hero__scroll {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 1px; height: 46px; background: linear-gradient(var(--c-white), rgba(255,255,255,0));
	opacity: .7; pointer-events: none;
}
/* C43-C44: floating buttons sat on both bottom corners of every screen. */
.float-btn { width: 48px; height: 48px; bottom: 18px; }
.float-btn--call { left: 16px; } .float-btn--whatsapp { right: 16px; }

/* K: mobile tap targets in the footer. */
@media (max-width: 767px) {
	.site-footer a { min-height: 44px; }
	h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 22px; }
	.hero__title { font-size: 40px; }
	.eyebrow, .intro__eyebrow { font-size: 13px; }
}

/* ---------- Scale enforcement (audit D46-D47) ----------
   Component rules were still overriding the scale with 75 / 55 / 20 / 18 / 16 / 12px.
   Everything now lands on 13 / 15 / 17 / 26 / 44 / 72. */
.hero__title { font-size: 72px; }
.season__title, .faq__title { font-size: 44px; }
h6 { font-size: 15px; letter-spacing: 0.16em; }
.main-nav__list a { font-size: 15px; }
.mobile-nav__list a { font-size: 17px; }
.site-header__book { font-size: 13px; }
.package-card__title { font-size: 26px; }
.packages__track .package-card__title { font-size: 24px; }
.trust-line { font-size: 17px; }
.season__label b { font-size: 15px; }
.season__lede, .split__text p, .intro p { font-size: 17px; }
/* `.intro p` (0,1,1) was out-cascading the intended `.intro__quote` size (0,1,0) - the signature
   quote rendered at plain body-copy size. Nikita, 27.08.2026: "текст мелковат... побольше".
   `.intro .intro__quote` (0,2,0) wins, and the tighter max-width forces ~2 lines at 1440. */
.intro .intro__quote { font-size: 28px; max-width: 46ch; }
@media (max-width: 767px) {
	.hero__title { font-size: 40px; }
	.season__title, .faq__title { font-size: 30px; }
}

/* ---------- Spacing scale + card states (audit I126-I131, G100-G113) ----------
   Section padding was 96/48/0/96/80/64/80 with no system. Three steps now: 48 / 80 / 120. */
:root { --sp-s: 48px; --sp-m: 80px; --sp-l: 120px; --wrap: 1240px; }
.intro { padding-top: var(--sp-m); padding-bottom: var(--sp-m); }
.split__text { padding: var(--sp-m) 8%; }
.packages { padding: var(--sp-l) 1em; }
.season { padding: var(--sp-l) 25px var(--sp-m); }
.teaser--eat { padding: var(--sp-l) 8% var(--sp-m); }
.faq { padding: var(--sp-l) 25px var(--sp-m); }
/* I129-I130: three different content widths on one page (1140 / 1240 / 1500). */
.packages__inner, .season__inner, .faq__inner { max-width: var(--wrap); margin-inline: auto; }

/* G100-G101, G113: the card was a flat tile - no hover, no lift, only the button was clickable. */
.packages__track .package-card { transition: transform .22s ease, box-shadow .22s ease; }
.packages__track .package-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(3, 10, 9, 0.18); }
.packages__track .package-card:focus-within { transform: translateY(-4px); }
.packages__track .package-card__photo { overflow: hidden; }
.packages__track .package-card:hover .package-card__photo { filter: brightness(1.04); }

/* Ghost square buttons with thin arrow strokes, replacing the dated filled white circles -
   Nikita, 27.08.2026: "выглядит абсолютно уебищно и устаревше". Disabled state is JS-driven
   (main.js) tied to the same scroll-position state as the edge fades above. */
.packages__prev, .packages__next {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 0;
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--c-white);
	cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.packages__prev svg, .packages__next svg { width: 18px; height: 18px; display: block; }
.packages__prev:hover, .packages__next:hover { border-color: var(--c-accent); background: rgba(255, 255, 255, 0.06); }
.packages__prev:disabled, .packages__next:disabled { opacity: 0.32; cursor: default; border-color: rgba(255, 255, 255, 0.14); background: none; }

/* K161: the booking action scrolled away on mobile. */
.mobile-book-bar { display: none; }
@media (max-width: 767px) {
	.mobile-book-bar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
		border-top: 1px solid rgba(3, 10, 9, 0.10);
	}
	.mobile-book-bar .btn { flex: 1; min-height: 48px; }
	.float-btn { bottom: 84px; }
	body { padding-bottom: 72px; }
	.intro, .split__text { padding-top: var(--sp-s); padding-bottom: var(--sp-s); }
	.packages, .season, .teaser--eat, .faq { padding-top: var(--sp-m); padding-bottom: var(--sp-s); }
}

/* ---------- Mobile header repair (regression from the B-block pass, 17.08.2026) ----------
   Two faults introduced by my own edits: the later `.site-header__agents` rule out-cascaded the
   1024px hide, and the grid columns collapsed to 0 / 230 / 0 so the centred logo had no width. */
@media (max-width: 1024px) {
	.site-header__agents { display: none; }
	.site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0.8em 1.1em; gap: 1em; }
	.site-header__logo { justify-self: start; }
	.site-header__logo img { width: 104px; }
	.site-header__right { gap: 12px; }
	.site-header__book { padding: 0 14px; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 767px) {
	/* the two floating bubbles plus the sticky bar stacked into one crowded corner strip */
	.float-btn--call { display: none; }
	.float-btn--whatsapp { bottom: 92px; width: 44px; height: 44px; }
}

/* ---------- Header centring, second pass (18.08.2026) ----------
   `1fr auto 1fr` centres the logo only while both side blocks fit inside their share: a grid
   `1fr` track still grows to its content's min-width, and the six-item nav asked for 531.8px
   against a 500px share at 1280 - so the logo sat 32px right of centre and the items crowded.
   Fixes the demand, not the symptom: the logo already links home, so `Home` leaves the desktop
   row (it stays in the mobile menu), gaps tighten, and the burger takes over at 1150 instead of
   1024, below which no six-item row can be centred at all. */
.main-nav__list { gap: 22px; }
.main-nav__list li:first-child { display: none; }
@media (max-width: 1366px) {
	.site-header__inner { padding: 1.1em 2em; gap: 2em; }
}
@media (max-width: 1150px) {
	.main-nav, .site-header__agents { display: none; }
	.burger { display: block; }
	.site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0.8em 1.1em; gap: 1em; }
	.site-header__logo { justify-self: start; }
	.site-header__logo img { width: 104px; }
	.site-header__right { gap: 12px; }
	.site-header__book { padding: 0 14px; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
}

/* ---------- Activity detail pages + hub (22 activities, added 18.08.2026) ----------
   Single template for /activities/<slug>/, reuses the existing .room split layout
   (image left, body right) already used on /accommodation/ - no new grid system. */
.activity-meta { display: flex; flex-wrap: wrap; gap: 0.4em 2em; list-style: none; padding: 0; margin: 0 0 1.2em; font-size: 15px; color: var(--c-ink-2); }
.activity-meta strong { color: var(--c-primary); }
.activity-includes { margin: 0 0 1.2em 1.2em; list-style: disc; font-size: 15px; color: var(--c-ink-2); }
.activity-includes li { margin-bottom: 0.35em; }
.activity-mode { font-size: 15px; font-style: italic; color: var(--c-accent-ink); margin: 0 0 1.2em; }

.activity-links { background: var(--c-secondary); color: var(--c-white); padding: var(--sp-s) 1em; }
.activity-links__inner { max-width: var(--wrap); margin-inline: auto; }
.activity-links__inner h3 { margin-bottom: 0.6em; }
.activity-links__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; }
.activity-links__list a { color: var(--c-white); text-decoration: underline; }

/* Explicit dark background (was relying on the inherited body default) - QA 18.08.2026:
   near-black text on the unpainted dark default rendered at ~1:1 contrast, 22 hub cards
   with no visible name. Every section paints its own background, this one included. */
.activity-related { padding: var(--sp-m) 1em; text-align: center; background: var(--c-primary); color: var(--c-white); }
.activity-related__inner { max-width: var(--wrap); margin-inline: auto; }
.activity-related__inner h3 { margin-bottom: 1em; }
.activity-related__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1em; margin-bottom: 1.6em; }
.activity-related__item {
	position: relative; display: flex; align-items: flex-end; min-height: 160px; border-radius: 8px;
	background-size: cover; background-position: center; overflow: hidden; text-align: left;
}
.activity-related__item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 10, 9, 0.75), rgba(3, 10, 9, 0)); }
.activity-related__item span { position: relative; z-index: 1; color: var(--c-white); font-size: 17px; padding: 1em; }

.activity-hub { background: var(--c-primary); }
.activity-hub__inner { max-width: var(--wrap); margin-inline: auto; padding: 0 1em var(--sp-l); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6em; }
.activity-hub__card { display: block; color: var(--c-white); }
.activity-hub__media { position: relative; min-height: 220px; border-radius: 8px; background-size: cover; background-position: center; margin-bottom: 0.6em; transition: transform .22s ease; }
.activity-hub__card:hover .activity-hub__media { transform: translateY(-4px); }
.activity-hub__tag { position: absolute; top: 12px; left: 12px; background: var(--c-accent); color: var(--c-primary); font-size: 13px; padding: 4px 10px; border-radius: 20px; }
.activity-hub__dur { position: absolute; top: 12px; right: 12px; background: rgba(3, 10, 9, 0.6); color: var(--c-white); font-size: 13px; padding: 4px 10px; border-radius: 20px; }
.activity-hub__title { font-size: 17px; margin: 0; }
/* "What's included" sat flush against the paragraph above it (all headings are margin:0
   globally) - give it the section's own rhythm, scoped so it doesn't touch other .room__body
   pages (accommodation.html has no h3 in .room__desc's sibling position). */

/* .eyebrow's shared color (--c-accent, 1.88:1 on white - documented FILLS ONLY at its
   definition) is fine on the dark hero it was built for, but my room__body category label
   sits on the white .room background - same known bug, new white spot. Scoped override so
   accommodation.html's own (pre-existing, out of scope) .split__text usage is untouched. */
.room__body .eyebrow { color: var(--c-accent-ink); }
@media (max-width: 767px) {
	.activity-links__list { flex-direction: column; gap: 0.5em; }
}

/* ---------- Activity pages: heading levels (QA, 18.08.2026) ----------
   The template went h1 -> h3 with no h2 on the page at all: a screen reader announces a level
   that has nothing above it, and the outline of every activity page came out broken. The three
   section headings are now h2, which is what they are - so they only need the size the design
   already gave them (26px), not h2's page-title 44px. */
/* `.room__body h2` is the accommodation page's room NAME: 32px, uppercase, display face. The
   activity template reuses the same `.room` block, so its section headings need their own
   scope - otherwise "What's included" shouts in caps next to two sentence-case neighbours. */
.room--activity .room__body h2 {
	font-size: 26px; line-height: 1.2; text-transform: none;
	font-family: var(--font-body); margin: 1.4em 0 0.5em;
}
.activity-links__inner h2, .activity-related__inner h2 { font-size: 26px; line-height: 1.2; }
.activity-links__inner h2 { max-width: none; }


/* ---------- Accent-on-accent leftovers (page-lint [контраст], 18.08.2026) ----------
   Three spots on /packages/ still carried the 1.88:1 pair the audit closed elsewhere: white
   text on the tan accent, and accent text on white. Tan is a FILL colour - text on it is the
   dark ink (10.6:1), text on white is the darker tan (--c-accent-ink, 6.5:1). */
.activity-filter__btn.is-active { color: var(--c-primary); }
.activity-card__tag { color: var(--c-primary); }
/* 18.08 set this to accent-ink assuming a white ancestor; the activities section now sits on
   the dark surface - accent-ink measures 3.07:1 there (QA 27.08.2026). On dark, tan is the
   text colour (10.6:1). */
.activity-card__more summary { color: var(--c-accent); }

/* ---------- Terms & Conditions (bl-policy), restructured (Nikita, 27.08.2026: "давай сделаем
   его как мы делали для Креатека") ---------- Structure copied from Kreatek's kt-policy
   component (hero+eyebrow+meta, collapsible TOC, numbered sections, contacts table), recoloured
   for Balder's light luxury language: white bg / dark ink text, tan as a fill/rule only (never
   text on white - project contrast rule), --c-accent-ink for accent text. Legal wording is
   unchanged, only regrouped under numbered sections. */
.bl-policy-wrap { background: var(--c-white); color: var(--c-ink-2); }
.bl-policy { max-width: 1180px; margin: 0 auto; padding: var(--sp-l) 2em var(--sp-l); }
.bl-policy__hero { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(240px, 320px); gap: 44px; align-items: end; padding-bottom: 36px; }
.bl-policy__eyebrow { margin: 0 0 14px; }
.bl-policy__heading { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 400; color: var(--c-primary); }
.bl-policy__hero-rule { align-self: stretch; background: rgba(3, 10, 9, 0.12); margin-bottom: -36px; }
.bl-policy__meta { display: flex; flex-direction: column; gap: 6px; }
.bl-policy__edition { margin: 0; font-size: 14px; color: var(--c-ink-3); }
.bl-policy__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink-2); }
.bl-policy__divider { height: 1px; background: rgba(3, 10, 9, 0.12); margin: 0 0 40px; }
.bl-policy__toc { margin: 0 0 40px; padding: 0; max-width: 420px; border: 1px solid rgba(3, 10, 9, 0.14); border-radius: 12px; overflow: hidden; }
.bl-policy__toc-label {
	margin: 0; padding: 14px 18px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--c-ink-3); cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bl-policy__toc-label::-webkit-details-marker { display: none; }
.bl-policy__toc-label::after {
	content: ""; width: 7px; height: 7px; flex: none;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform 0.2s ease;
}
.bl-policy__toc[open] .bl-policy__toc-label { color: var(--c-primary); border-bottom: 1px solid rgba(3, 10, 9, 0.12); }
.bl-policy__toc[open] .bl-policy__toc-label::after { transform: rotate(-135deg); }
.bl-policy__toc ul { list-style: none; margin: 0; padding: 14px 18px 16px; display: grid; gap: 11px; }
.bl-policy__toc a { display: flex; gap: 10px; color: var(--c-ink-2); text-decoration: none; font-size: 14px; line-height: 1.4; }
.bl-policy__toc a:hover { color: var(--c-accent-ink); }
.bl-policy__toc i { font-style: normal; color: var(--c-accent-ink); font-weight: 700; flex: none; width: 20px; }
.bl-policy__content { max-width: 860px; }
.bl-policy__section { position: relative; padding: 34px 0; border-top: 1px solid rgba(3, 10, 9, 0.10); }
.bl-policy__section:first-of-type { border-top: none; padding-top: 0; }
.bl-policy__num { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-accent-ink); }
.bl-policy__section h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.3; color: var(--c-primary); }
.bl-policy__section h3 { margin: 1.2em 0 0.5em; font-size: 16px; color: var(--c-primary); }
.bl-policy__section p { margin: 0 0 14px; max-width: none; font-size: 15.5px; line-height: 1.65; color: var(--c-ink-2); }
.bl-policy__section p:last-child { margin-bottom: 0; }
.bl-policy__section ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.bl-policy__section li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-2); }
.bl-policy__section li:last-child { margin-bottom: 0; }
.bl-policy__section a { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-policy__section a:hover { text-decoration: none; }
.bl-policy__contacts { width: 100%; border-collapse: collapse; margin-top: 14px; border: 1px solid rgba(3, 10, 9, 0.12); border-radius: 10px; overflow: hidden; }
.bl-policy__contacts th, .bl-policy__contacts td { padding: 14px 18px; text-align: left; font-weight: 400; font-size: 15.5px; border-top: 1px solid rgba(3, 10, 9, 0.10); }
.bl-policy__contacts tr:first-child th, .bl-policy__contacts tr:first-child td { border-top: none; }
.bl-policy__contacts th { width: 200px; color: var(--c-ink-3); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.bl-policy__contacts td, .bl-policy__contacts a { color: var(--c-primary); }
@media (max-width: 1023px) {
	.bl-policy__hero { grid-template-columns: 1fr; gap: 20px; }
	.bl-policy__hero-rule { display: none; }
	.bl-policy__heading { font-size: clamp(24px, 6vw, 34px); }
	.bl-policy__contacts th { width: 140px; }
}