/* 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; position: relative; }
/* Language switcher (Nikita, 28.08.2026: "дизайн уебищный", "открытие РАСШИРЯЕТ ХЭДЕР").
   Real GTranslate markup restyled, not rebuilt - .gt_switcher already has position:relative and
   its own JS toggles .gt_option's inline display:none/block; the only thing that made the
   header grow was .gt_option sitting in normal flow. Pinning it to position:absolute is the
   whole fix - the toggle, the click handlers and the actual translation stay GTranslate's own. */
/* GTranslate injects its own <style scoped to a per-load .gt_container--XXXX class> AFTER this
   stylesheet has already loaded (script runs on defer) - same selector specificity (2 classes),
   later in source order, so it wins every tie. Every property below that also appears in their
   sheet carries !important for that reason. display/height on .gt_option are the one exception -
   those are GTranslate's own open/close animation (inline styles set by its click handler) and
   must stay untouched, or the panel would show open the moment the page loads. */
.site-header__lang-slot .gt_switcher { position: relative; width: auto !important; overflow: visible !important; }
.site-header__lang-slot .gt_selected { cursor: pointer; background: none !important; }
.site-header__lang-slot .gt_selected a {
	display: flex !important; align-items: center; gap: 6px; min-height: 44px;
	width: auto !important; border: none !important; padding: 0 16px 0 0 !important;
	font-family: var(--font-body); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--c-white) !important; text-decoration: none;
}
.site-header__lang-slot .gt_selected a img { display: none !important; }
/* GTranslate already draws its own chevron via this same ::after - only its geometry/colour is
   overridden (content/background-image cleared, redrawn as a plain rotating corner) so there is
   one arrow, not two, and it matches the brand's chevrons elsewhere on the site. */
.site-header__lang-slot .gt_selected a:hover,
.mobile-nav__lang .gt_selected a:hover { background: none !important; }
.site-header__lang-slot .gt_selected a::after {
	content: "" !important; background: none !important; position: static !important;
	width: 6px !important; height: 6px !important; flex-shrink: 0;
	border: 0 solid currentColor !important;
	/* 29.08.2026: was 1.5px - a fractional border-width rounds to a different whole pixel on
	   each side depending on the element's subpixel x-position, drawing an asymmetric/"kривая"
	   corner on non-retina screens. 2px is a whole pixel on any DPR - always symmetric. */
	border-right-width: 2px !important; border-bottom-width: 2px !important;
	transform: translateY(-3px) rotate(45deg) !important; transition: transform 0.2s ease;
}
/* 30.08.2026: the corner is drawn from the box's RIGHT+BOTTOM borders, so after rotate(45deg)
   all of its ink sits BELOW the box centre (tip at +4.2px, arms at 0) - align-items:center
   centres the empty 6x6 box, not the glyph, and the arrow read as hanging under the word.
   Round 4 fixed the wrong half of Nikita's "стрелочка кривая" (border-width 1.5->2px, i.e.
   blur) and left this. translateY compensates the ink offset; the open state points up, so
   its ink is already centred and needs none. */
.site-header__lang-slot .gt_selected a.open::after { transform: translateY(0) rotate(-135deg) !important; }
.site-header.is-stuck .site-header__lang-slot .gt_selected a { color: var(--c-primary) !important; }
.site-header__lang-slot .gt_option {
	position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important;
	width: 170px !important; border: 1px solid var(--c-gray) !important; border-left: 1px solid var(--c-gray) !important;
	background: var(--c-white) !important; box-shadow: 0 10px 26px rgba(3, 10, 9, 0.22); z-index: 950 !important;
	/* GTranslate's own open animation sets an inline height in px, computed from ITS OWN row
	   metrics (~24px/row) - our touch-sized rows (34px) overflowed that estimate and clipped
	   Portuguese into a scrollbar. !important in an external sheet beats an inline style, so this
	   drops their height entirely: opens instantly at full content height, no clipping possible. */
	height: auto !important; max-height: none !important;
}
.site-header__lang-slot .gt_option a { padding: 9px 16px !important; font-size: 14px; color: var(--c-primary) !important; }
.site-header__lang-slot .gt_option a img { width: 16px !important; height: 16px !important; opacity: 0.85; }

/* Mobile nav's own switcher instance (separate GTranslate init, same rules apply) - same chip,
   panel absolute so it never pushes the rest of the mobile menu down either. */
.mobile-nav__lang .gt_switcher { position: relative; width: auto !important; overflow: visible !important; }
.mobile-nav__lang .gt_selected { cursor: pointer; background: none !important; }
.mobile-nav__lang .gt_selected a {
	display: flex !important; align-items: center; gap: 6px; min-height: 40px;
	width: auto !important; border: none !important; padding: 0 16px 0 0 !important;
	font-family: var(--font-body); font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--c-white) !important; text-decoration: none;
}
.mobile-nav__lang .gt_selected a img { display: none !important; }
.mobile-nav__lang .gt_selected a::after {
	content: "" !important; background: none !important; position: static !important;
	width: 6px !important; height: 6px !important; flex-shrink: 0;
	border: 0 solid currentColor !important;
	border-right-width: 2px !important; border-bottom-width: 2px !important;
	transform: translateY(-3px) rotate(45deg) !important; transition: transform 0.2s ease;
}
.mobile-nav__lang .gt_selected a.open::after { transform: translateY(0) rotate(-135deg) !important; }
.mobile-nav__lang .gt_option {
	position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: auto !important;
	width: 170px !important; border: 1px solid var(--c-gray) !important;
	background: var(--c-white) !important; box-shadow: 0 10px 26px rgba(3, 10, 9, 0.3); z-index: 950 !important;
	height: auto !important; max-height: none !important;
}
.mobile-nav__lang .gt_option a { padding: 9px 16px !important; font-size: 14px; color: var(--c-primary) !important; }
.mobile-nav__lang .gt_option a img { width: 16px !important; height: 16px !important; opacity: 0.85; }
.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; }
/* Both bars need to rotate around the SAME centre (8px) for a symmetric cross - they were 18px
   apart, so the lines met at a corner and read as ">" instead of "x" (design-pass-28-08, NOTABLE). */
.burger.is-open span:nth-child(1) { transform: rotate(45deg); top: 8px; }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); top: 8px; }

.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; display: block; padding: 10px 0; margin: -10px 0; }
.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.78), rgba(3, 10, 9, 0.78)), 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; }

/* Variant A (Nikita approved 28.08.2026: "Слайдер а, чистовик ок"). Track is full viewport
   width, not capped to .packages__inner's 1240px - .packages__slider sits as a direct sibling
   of .packages__inner in the markup so its 100% resolves against the section, not the wrap. */
.packages__slider { position: relative; width: 100%; overflow: hidden;
	/* 30.08.2026, Nikita: "левый край затемнения слишком явный и слишком далеко в карточку",
	   "при докрутке до конца пропадает слишком резко". Two separate causes:
	   (a) a straight transparent->#000 ramp has a kink where it hits full opacity - that kink
	       is the visible "edge", and a 160px linear ramp whitens 36% of a 360px card. The stops
	       below are a quadratic (alpha ~ t^2 from the outer edge): the ink stays near-opaque
	       deep into the card and all the whitening bunches up at the very edge, so there is no
	       knee to see and the card stays readable. Band also cut 160px -> 110px.
	   (b) the width used to be a class toggle (0 <-> 160px), so it blinked out the instant
	       is-at-end landed. main.js now writes --fade-l/--fade-r straight from scroll distance,
	       so the fade grows and shrinks with the scroll instead of switching. */
	--fade-max: clamp(48px, 6vw, 110px);
	--fade-l: 0px; --fade-r: var(--fade-max);
	--fade-mask: linear-gradient(90deg,
		transparent 0,
		rgba(0,0,0,.06) calc(var(--fade-l) * .25),
		rgba(0,0,0,.25) calc(var(--fade-l) * .5),
		rgba(0,0,0,.49) calc(var(--fade-l) * .7),
		rgba(0,0,0,.72) calc(var(--fade-l) * .85),
		#000 var(--fade-l),
		#000 calc(100% - var(--fade-r)),
		rgba(0,0,0,.72) calc(100% - var(--fade-r) * .85),
		rgba(0,0,0,.49) calc(100% - var(--fade-r) * .7),
		rgba(0,0,0,.25) calc(100% - var(--fade-r) * .5),
		rgba(0,0,0,.06) calc(100% - var(--fade-r) * .25),
		transparent 100%);
	-webkit-mask-image: var(--fade-mask);
	mask-image: var(--fade-mask);
}
.packages__track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 100px 1em;
	scroll-padding-inline: 100px;
	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. Softened 140px/0.55 per Nikita
   28.08.2026: "затемнение мягче". */

.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; }

/* Variant A (Nikita approved 28.08.2026: "Слайдер а, чистовик ок"): horizontal card, photo
   left ~40%, panel right, fixed 640x440. Price moved off the photo into the panel as plain
   text (no more overlay badge) - matches the approved mockup, still var(--c-accent-ink) so
   contrast holds on the white panel. */
.packages__track .package-card {
	width: 640px;
	flex: 0 0 640px;
	min-height: 440px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-top: 0;
	background: var(--c-white);
	border: none;
	box-shadow: 0 14px 34px rgba(3, 10, 9, 0.2);
}
.packages__track .package-card::before { content: none; }
.packages__track .package-card__photo { flex: 0 0 40%; background-size: cover; background-position: center; position: static; }
.packages__track .package-card__price {
	position: static; z-index: auto; background: none; box-shadow: none;
	color: var(--c-accent-ink); font-family: var(--font-serif); font-size: 22px; padding: 0; margin: 0 0 6px;
}
.packages__track .package-card__panel { padding: 32px 30px; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.packages__track .package-card__title { font-size: 24px; margin: 0 0 10px; text-transform: none; font-family: var(--font-serif); font-weight: 400; color: var(--c-primary); }
.packages__track .package-card__meta { margin: 0 0 12px; gap: 1.4em; }
.packages__track .package-card__hook { margin: 0 0 14px; }
.packages__track .package-card__list { margin: 0 0 20px 18px; font-size: 16px; }
/* Book Now + Learn More sit side by side, pinned to the card bottom regardless of copy length. */
.packages__track .package-card__actions { display: flex; gap: 12px; margin-top: auto; }
.packages__track .package-card__book { margin: 0; align-self: auto; }

/* Card panel is light on white (design fix 17.08.2026, still true here): title 19.98:1,
   list 9.57:1, meta 7.81:1, hook 6.5:1. */
.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) {
	/* Mobile: photo on top, content below - not the 40%-left split, no room for it under 480px. */
	.packages__track .package-card { flex-direction: column; flex: 0 0 min(360px, 84vw); width: min(360px, 84vw); min-height: 0; }
	.packages__track .package-card__photo { flex: 0 0 auto; height: 180px; width: 100%; }
	.packages__track .package-card__panel { padding: 22px 20px 20px; }
	.packages__track .package-card__actions { flex-wrap: wrap; }
}

.packages__nav { display: flex; justify-content: center; gap: 0.6em; margin-top: 1.5em; }
/* 29.08.2026: display:block killed .btn's flex text-centering (regressed after the 27.08 fix -
   see landing-design-fixes.md). display:flex stays block-level (margin:auto still centers the
   button inside .packages__inner) while keeping .btn's own align-items/justify-content:center. */
.packages__all { display: flex; 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 h2 { margin-bottom: 0.4em; line-height: 1.15; font-size: 44px; }
@media (max-width: 767px) { .teaser__text h2 { font-size: 30px; } }
.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; }
	/* Dark panel filled 338.8/390 x 698/810 - short copy left it looking like a plate, not a photo
	   section (design-pass-28-08, NOTABLE). */
	.teaser--story .teaser__text { padding: 1.5em 1.2em; }
	.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); border-top: 1px solid rgba(3, 10, 9, 0.1); }
.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-family: var(--font-display); font-size: 44px; margin-bottom: 0.5em; }
@media (max-width: 767px) { .faqB__title { font-size: 30px; } }
.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-family: var(--font-serif); font-weight: 400; font-size: 26px; 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-primary); }
.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; background: var(--c-white); }
.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); }
/* Unified with .story-cta (white + btn--accent) instead of a one-off dark-filled button
   (design-pass-28-08, NOTABLE). */
/* 30.08.2026, Nikita: "слишком большое расстояние от текста до кнопки". The CTA is the tail of
   the "03 - Contact" block, but it lived in its own band - .buyout's 120px bottom padding and
   .buyout-cta's 80px top padding stacked into a 234px white void. The button now hangs off the
   contact table; the section's own bottom rhythm moved under the button. */
.buyout-wrap .buyout { padding-bottom: 0; }
.buyout-cta { text-align: center; padding: var(--sp-s) 1em var(--sp-m); background: var(--c-white); }
@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-family: var(--font-serif); font-weight: 400; font-size: 44px; 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: 1 / 1; }
	.eat-gallery img:last-child:nth-child(odd) { grid-column: span 2; }
	.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-primary);
	background-size: cover;
	background-position: center;
	position: relative;
	isolation: isolate;
}
/* 29.08.2026 (Nikita: "мужик справа от санты обрезан") - santa.jpg's man/hand sits near the very
   top of the source frame; the hero's wide 1440x420 crop centers vertically by default and cuts
   the raised hand clean off. Same file's .room-gallery__slide on this page is already fine (near
   full-image aspect, no crop) - only this wide-banner instance needed the position pinned to top. */
.page-hero--santa { background-position: center top; }
.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,
.p2c2 .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,
.packages__track .package-card__learn,
.p2c2 .btn--outline,
.hub2-acts .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,
.packages__track .package-card__learn:hover,
.p2c2 .btn--outline:hover,
.hub2-acts .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; }
/* 30.08.2026, Nikita: "цифры не по центру кружков... а выше". A <button> centres the LINE BOX,
   and a line box reserves descender room that digits and caps never use - so the ink of "3"
   ends up ~1.6px above the circle's centre. Flex + a 3px top pad puts the ink itself in the
   middle. Same class of bug as the lang chevron above: centring the box, not the glyph. */
.night-tabs__btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 0 0; }

/* /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 h2, .activity-related__inner h2,
.hub2-hero h2, .p2c2-close h2, .p2c2-close__price, .eat-intro--lead h2, .p2c2-hero__title, .story-banner h2,
.content__inner h2, .content__inner h3, .activity-hub__title, .p2c2-fact h2 { max-width: none; }
/* These three are centred text blocks whose PARENT is not a flex/text-align box that centres the
   child's own box (only inline content, not the block) - without margin:auto the shortened box
   sits flush left instead of on the section's centre axis (design-pass-28-08, CRITICAL #2). */
.hub2-hero h2, .p2c2-close h2, .p2c2-close__price { margin-inline: auto; }
/* 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:not(.eyebrow), .intro p:not(.intro__eyebrow) { 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); }
/* season -> teaser--eat is a white->white stitch with two large paddings stacked (200px total) -
   same-surface stitches elsewhere hold to <=sp-l (design-pass-28-08, NOTABLE). */
.season + .teaser--eat { padding-top: 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: auto minmax(0, 1fr); padding: 0.8em 1.1em; gap: 1em; }
	.site-header__logo { justify-self: start; grid-column: 1; }
	.site-header__logo img { width: 104px; }
	.site-header__right { grid-column: 2; justify-self: end; gap: 12px; }
	.site-header__book { padding: 0 14px; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 480px) {
	/* Booking already lives in .mobile-book-bar and the burger menu at this width - the header's
	   own BOOK NOW is the piece that no longer fits (audit design-pass-28-08, CRITICAL #1). */
	.site-header__book { display: none; }
}
@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: auto minmax(0, 1fr); padding: 0.8em 1.1em; gap: 1em; }
	.site-header__logo { justify-self: start; grid-column: 1; }
	.site-header__logo img { width: 104px; }
	.site-header__right { grid-column: 2; justify-self: end; 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-primary); 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; }
/* 30.08.2026: was a fixed min-height:160px in a row that can be as wide as var(--wrap) when
   only 1-2 related cards render - at that width the frame turned into a >3:1 landscape strip and
   cover-cropped most of the photo away (measured 0.35 avg across ~20 related-card photos, see
   knowledge/qa-checklists/landing-site.md item 24). aspect-ratio ties height to width, matching
   the frame to the mostly-4:3/3:2 source photos at any column count - fixes every occurrence at
   once, no per-photo crop needed. */
.activity-related__item {
	position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 2; 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); }
/* Category filter (Nikita 30.08.2026: "обязательно нужен фильтр с категориями"). The cards
   already carried data-category from the build - the filter is a chip row over the same
   attribute, no markup duplication and no second source of truth for the counts. */
.activity-filter { max-width: var(--wrap); margin-inline: auto; padding: var(--sp-s) 1em 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.activity-filter__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 10px; border-radius: 22px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--c-white); font-family: var(--font-body); font-size: 14px; letter-spacing: .02em; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.activity-filter__btn:hover { border-color: var(--c-accent); }
.activity-filter__btn i { font-style: normal; font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.activity-filter__btn.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.activity-filter__btn.is-active i { color: rgba(3,10,9,.5); }
/* .activity-hub__card is display:block, which out-specifies the UA sheet's [hidden] rule. */
.activity-hub__card[hidden] { display: none; }
@media (max-width: 700px) { .activity-filter { padding: 34px 1em 22px; gap: 8px; } .activity-filter__btn { font-size: 13px; padding: 7px 14px 8px; } }
.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-family: var(--font-serif); font-weight: 400; 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-serif); font-weight: 400; margin: 1.4em 0 0.5em;
}
.room--activity .room__inner { align-items: center; }
.activity-links__inner h2, .activity-related__inner h2 { font-size: 26px; line-height: 1.2; }
.activity-links__inner h2 { max-width: none; }
/* Standalone CTA at the foot of the /activities/ hub - text on a flat dark section with no
   photo either side reads as a hole, unlike the per-page "related activities" strip which always
   carries photo cards (design-pass-28-08, NOTABLE). */
.activity-hub ~ .activity-related { background: var(--c-white); color: var(--c-primary); }
.activity-hub ~ .activity-related .activity-related__inner h2 {
	font-family: var(--font-serif); font-weight: 400; font-size: 44px; max-width: none;
}
.activity-hub ~ .activity-related .btn--accent { color: var(--c-primary); }


/* ---------- 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; font-family: var(--font-body); font-size: 15px; font-weight: 400;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent-ink);
}
.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; }
/* `<i>NN</i>` sits as a sibling of `<a>`, not inside it - the flex layout has to live on the
   `<li>`, not the anchor (design-pass-28-08, NOTABLE). */
.bl-policy__toc li { display: flex; gap: 10px; align-items: baseline; }
.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; }
}

/* ============ Package page - concept C2 (Nikita approved 28.08.2026, package2-c2.png final) ============ */
.p2c2 { background: var(--c-white); color: var(--c-primary); }
.p2c2-hero { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-m) 1.4em 0; }
.p2c2-collage { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); grid-template-rows: 250px 140px; gap: 12px; margin-bottom: var(--sp-m); }
.p2c2-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2c2-collage a:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
.p2c2-collage a:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.p2c2-collage a:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 3; }
.p2c2-collage a:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; }
.p2c2-hero__title { font-family: var(--font-display); font-size: 58px; margin: 0 0 22px; }
.p2c2-meta { display: flex; gap: 0; margin-bottom: 24px; flex-wrap: wrap; row-gap: 14px; }
.p2c2-meta__item { padding: 0 2.2em; border-left: 1px solid var(--c-gray); }
.p2c2-meta__item:first-child { padding-left: 0; border-left: none; }
.p2c2-meta__item b { display: block; font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: var(--c-accent-ink); line-height: 1.1; }
.p2c2-meta__item span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); margin-top: 4px; }
.p2c2-hero__cta { display: flex; gap: 1em; margin-bottom: var(--sp-l); flex-wrap: wrap; }
.p2c2-facts { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4em var(--sp-m); }
.p2c2-facts__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 26px; }
.p2c2-fact { grid-column: span 3; border-top: 3px solid var(--c-accent); padding-top: 16px; scroll-margin-top: 110px; }
.p2c2-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.p2c2-fact__num { display: block; font-family: var(--font-serif); font-size: 46px; color: var(--c-accent-ink); line-height: 1; margin-bottom: 8px; }
.p2c2-fact h2 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin: 0 0 8px; }
.p2c2-fact p { font-size: 15px; line-height: 1.6; color: var(--c-ink-2); margin: 0; }
/* 30.08.2026, Nikita: «что с расстоянием между текстом и нижней плашкой на странице туров».
   The bar closes the numbered plan, but it had no top margin at all - it butted straight onto
   the last item's paragraph - while BELOW it 80px of its own margin stacked with 80px of
   .p2c2-facts padding into a 160px void. Same stacked-variable bug as .buyout-cta. */
.p2c2-facts { padding-bottom: 0; }
.p2c2-included { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: var(--c-primary); color: #fff; padding: 24px 32px; margin: var(--sp-s) 0 var(--sp-m); }
.p2c2-included__label { font-family: var(--font-serif); font-size: 16px; color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.p2c2-included__list { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--c-gray); flex: 1; }
.p2c2-included .btn { flex-shrink: 0; }
.p2c2-close { background: var(--c-primary); color: #fff; text-align: center; padding: var(--sp-m) 1.4em; }
.p2c2-close .eyebrow { color: var(--c-accent); }
.p2c2-close h2 { font-family: var(--font-display); font-size: 38px; margin: 8px 0 4px; }
.p2c2-close__price { font-family: var(--font-serif); font-size: 20px; color: var(--c-gray); margin: 0 0 24px; }
@media (max-width: 900px) {
	.p2c2-hero__title { font-size: 40px; }
	/* 31.08.2026: ряды по 150px давали на 900px кадр 850x150 (5.7:1) - от 4:3 фотки
	   в него влезала четверть по высоте (замер 0.23-0.26 на восьми страницах пакетов).
	   Пропорция вместо фиксированного ряда. */
	.p2c2-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
	.p2c2-collage a { aspect-ratio: 2.2 / 1; }
	.p2c2-collage a:nth-child(1) { grid-column: 1/3; grid-row: 1/2; }
	.p2c2-collage a:nth-child(2) { grid-column: 1/2; grid-row: 2/3; }
	.p2c2-collage a:nth-child(3) { grid-column: 2/3; grid-row: 2/3; }
	.p2c2-collage a:nth-child(4) { grid-column: 1/3; grid-row: 3/4; }
	.p2c2-fact { grid-column: span 6; }
	.p2c2-included { flex-direction: column; align-items: flex-start; }
}

/* ============ /packages/ hub - concept B2 (Nikita approved 28.08.2026, packages-hub-b2.png final) ============ */
.hub2 { background: var(--c-primary); color: #fff; padding: var(--sp-l) 0; }
.hub2-hero { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4em var(--sp-m); text-align: center; }
.hub2-hero .eyebrow { color: var(--c-accent); }
.hub2-hero h1, .hub2-hero h2 { font-family: var(--font-display); font-size: 52px; margin: 0 0 14px; }
.hub2-hero p { color: var(--c-gray); max-width: 620px; margin: 0 auto; }
/* Night tabs on a dark hero (base rules are light-page defaults, near-black text) - "All" also
   needs a non-circular pill since it's wider than a single digit. */
.hub2-hero .night-tabs { margin: 30px 0 0; }
.hub2-hero .night-tabs__btn { color: var(--c-white); border-color: rgba(255,255,255,.35); }
.hub2-hero .night-tabs__btn.is-active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
.hub2-hero .night-tabs__btn[data-nights="all"] { width: auto; border-radius: 24px; padding: 3px 20px 0; }
.hub2-grid { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4em; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 190px; gap: 12px; }
.hub2-tile { position: relative; grid-column: span 2; background-color: var(--c-primary); background-size: cover; background-position: center; display: flex; align-items: flex-end; overflow: hidden; }
.hub2-tile--big { grid-column: span 4; grid-row: span 2; }
/* Only this instance of reindeer-ride.jpeg - the slider uses the same file at a portrait crop
   where the default centre position already clears the antlers (photo-audit-28-08, CRITICAL 1.1). */
.hub2-tile--reindeer { background-position: center 8%; }
/* 29.08.2026 (Nikita: "лица оленей обрезаны") - the same file's SLIDER-card instance (narrow
   40%-column) crops horizontally, not vertically; the antlered deer sits left-of-centre in the
   source, default center cropped its head off. White Snow's own hub2-tile (wide/short, unlike
   its slider card which is already fine) cropped the skier's feet by the bottom edge AND left
   most of the visible body under the tile's text-scrim - shift the window up so the figure sits
   in the tile's less-scrimmed upper half, same treatment as the reindeer tile above. */
/* 30.08.2026 (Nikita, third report: "это не только про лышника это про многие фотки в
   активити") - measured: this frame is 256x440 (flex:0 0 40% of the fixed 640x440 card), a
   PORTRAIT box fed by landscape 4:3-16:9 source photos. cover keeps full height and crops most
   of the width away - vis 0.29-0.39 across all 8 slider photos, below the 0.40 floor where a
   position can still help (knowledge/qa-checklists/landing-site.md item 24). Position-only fixes
   (the two rules below this comment were exactly that, on 2 of the 8) only choose which slice of
   width survives, so the subject re-crops the moment the source or card size changes - the wrong
   instrument, per that same rule's "Don't repeat". Fix: swap to a portrait "-tile" crop (already
   cut around the subject at ~0.58 ratio, same asset family as .hub2-cat__photo) ONLY at desktop
   widths where the frame is portrait; below 768px `.packages__track .package-card__photo` goes
   full-width/180px-tall (landscape again, style.css:560) where the original landscape files
   already measure fine (0.73-1.0) and swapping them out would make mobile worse, not better -
   so mobile keeps the original files, this block is desktop-only. Position stays `center` on all
   eight; the crop itself already carries the subject-offset (reindeer-ride 20%, fatbike-1 75%,
   cross-country 22%, aurora-van 25%, same fractions the old position rules used - see the crop
   script that made them). */
/* !important обязателен: URL картинки лежит в инлайновом style карточки, а инлайн
   специфичнее любого селектора - без него весь блок ниже не применялся ни разу
   (замер 31.08.2026 на 1440/1920 показывал старые имена файлов). */
@media (min-width: 768px) {
	.packages__track .package-card__photo[style*="reindeer-ride"] { background-image: url('/assets/img/reindeer-ride-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="fatbike-1"] { background-image: url('/assets/img/fatbike-1-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="cross-country"] { background-image: url('/assets/img/cross-country-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="aurora-van"] { background-image: url('/assets/img/aurora-van-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="revontulet"] { background-image: url('/assets/img/revontulet-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="snowmobile-ride"] { background-image: url('/assets/img/snowmobile-ride-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="Lahti_winter_Husky"] { background-image: url('/assets/img/lahti-husky-tile.jpg') !important; }
	.packages__track .package-card__photo[style*="kids-reindeer-feeding"] { background-image: url('/assets/img/kids-reindeer-feeding-tile.jpg') !important; }
}
.hub2-tile[style*="cross-country"] { background-position: center 20%; }
.hub2-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,9,0) 15%, rgba(3,10,9,.5) 48%, rgba(3,10,9,.96) 100%); }
.hub2-tile__body { position: relative; z-index: 1; padding: 20px; width: 100%; }
.hub2-tile__price { display: block; font-family: var(--font-serif); font-size: 26px; color: var(--c-accent); text-shadow: 0 2px 10px rgba(3,10,9,.9); }
/* 29.08.2026 (Nikita: "значок евро сильно выше чем цифры") - Georgia (var(--font-serif)) draws
   the euro glyph with a taller cap-height than lining figures; shrink + drop it toward the digits'
   baseline instead of relying on the font's own metrics. Same fix for both serif price spots. */
.cur { font-size: 0.78em; vertical-align: 0.05em; }
.hub2-tile--big .hub2-tile__price { font-size: 40px; }
.hub2-tile__title { font-family: var(--font-serif); font-size: 18px; margin: 4px 0 2px; text-shadow: 0 2px 10px rgba(3,10,9,.9); }
.hub2-tile--big .hub2-tile__title { font-size: 26px; }
@media (max-width: 900px) {
	/* All tiles become 190px cards below 900px - the --big price/title stayed 40/26 against 26/18
	   on the other seven, a random accent on two of eight packages (design-pass-28-08, NOTABLE). */
	.hub2-tile--big .hub2-tile__price { font-size: 26px; }
	.hub2-tile--big .hub2-tile__title { font-size: 18px; }
}
.hub2-tile__meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gray); text-shadow: 0 1px 6px rgba(3,10,9,.9); }
.hub2-tile__cta { display: flex; gap: 14px; margin-top: 10px; }
.hub2-tile__cta a, .hub2-tile__cta button {
	font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--c-accent); border: none; border-bottom: 1px solid var(--c-accent);
	text-decoration: none; background: none; padding: 0; cursor: pointer;
}
.hub2-tile[hidden] { display: none; }
.hub2-acts { background: var(--c-white); color: var(--c-primary); padding: var(--sp-l) 1.4em; }
.hub2-acts__inner { max-width: var(--wrap); margin: 0 auto; }
.hub2-acts__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.hub2-acts__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; margin: 0; }
.hub2-acts__head p { font-size: 14px; color: var(--c-ink-3); margin: 4px 0 0; }
.hub2-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.hub2-cat { display: flex; border: 1px solid var(--c-gray); min-height: 208px; }
/* Dark base painted explicitly, not just the photo - same pattern as .package-card (17/27.08.2026):
   a failed image load or a WCAG checker reading only computed background-color would otherwise
   resolve white label text against white section background. */
/* Tall category tiles are fed PORTRAIT crops, not the landscape originals (30.08.2026).
   The frame is 242x544 (ratio .44): cover shows only 25-33% of a 16:9 source, so the subject
   falls out of frame and the exact result swings with viewport width - background-position
   cannot fix that, it just moves which third you lose. `*-tile.jpg` are pre-cropped around the
   subject at ~1:2, so `center` is correct at any frame ratio. Nikita reported these crops
   FOUR times; the first three rounds all answered with another percentage. */
.hub2-cat__photo { position: relative; width: 40%; flex-shrink: 0; background-color: var(--c-primary); background-size: cover; background-position: center; }
.hub2-cat__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,10,9,.8) 0%, rgba(3,10,9,.05) 65%); }
.hub2-cat__label { position: absolute; left: 18px; bottom: 16px; z-index: 1; }
.hub2-cat__label b { display: block; font-family: var(--font-serif); font-size: 21px; color: #fff; text-shadow: 0 2px 8px rgba(3,10,9,.9); }
.hub2-cat__label span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.hub2-cat__list { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow-y: auto; }
.hub2-cat__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #E7E2D9; padding-bottom: 10px; }
.hub2-cat__row:last-child { border-bottom: none; padding-bottom: 0; }
.hub2-cat__row b { font-family: var(--font-serif); font-weight: 400; font-size: 15px; }
.hub2-cat__row span { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; }
@media (max-width: 900px) {
	.hub2-hero h1, .hub2-hero h2 { font-size: 36px; }
	.hub2-grid { grid-template-columns: repeat(2, 1fr); }
	/* 31.08.2026: на 768-900px плитка занимает всю ширину сетки (~700px), а высота ряда
	   оставалась 190px - кадр 3.7:1, и от 4:3 фотки в него влезала треть по высоте
	   (замер 0.30-0.35). Пропорция вместо фиксированного ряда держит кадр на всей
	   мобильной полосе одинаковым. */
	.hub2-tile, .hub2-tile--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 2.2 / 1; }
	.hub2-grid { grid-auto-rows: auto; }
	.hub2-cats { grid-template-columns: 1fr; }
	.hub2-cat { flex-direction: column; }
	/* 31.08.2026: фиксированные 140px давали на 768-900px рамку 700x140, то есть 5:1 -
	   от любой 4:3 фотки в неё влезала четверть по высоте. Пропорция вместо высоты
	   держит кадр одинаковым на всей мобильной полосе. */
	.hub2-cat__photo { width: 100%; height: auto; aspect-ratio: 2.2 / 1; }
}

/* Рамка меняет ориентацию между мобильным и десктопом, значит и кроп нужен разный.
   Инлайн в разметке держит МОБИЛЬНЫЙ вариант, этот блок подменяет его на десктопе.
   Брейкпоинты разные и взяты из самих правил раскладки, а не «на глаз»: плитки категорий
   становятся вертикальными с 901px (max-width:900 переводит их в колонку), герои - с 768px.
   !important обязателен: URL лежит в инлайновом style, а инлайн специфичнее селектора. */
@media (min-width: 901px) {
	.hub2-cat__photo[style*="aurora-van-2"] { background-image: url('/assets/img/aurora-van-tile.jpg') !important; }
	.hub2-cat__photo[style*="cross-country"] { background-image: url('/assets/img/cross-country-tile.jpg') !important; }
}
@media (max-width: 900px) {
	/* sienet вертикальный (875x1050), в широкую мобильную плитку идёт его горизонтальная обрезка */
	.hub2-cat__photo[style*="sienet"] { background-image: url('/assets/img/sienet-hero.jpg') !important; }
}
@media (min-width: 768px) {
	.page-hero[style*="pihvi"] { background-image: url('/assets/img/pihvi-hero.jpg') !important; }
	.page-hero[style*="sienet"] { background-image: url('/assets/img/sienet-hero.jpg') !important; }
	.buyout-hero[style*="31-scaled"] { background-image: url('/assets/img/31-scaled-buyout-hero.jpg') !important; }
}

/* Баннерная полоса Our-story только с 768px: на 390 герой становится высоким и узким,
   и широкая обрезка там показывает 24% (замер 31.08.2026). Инлайн держит мобильный кадр. */
@media (min-width: 768px) {
	.page-hero[style*="Our-story"] { background-image: url('/assets/img/Our-story-banner.jpg') !important; }
}

/* 31.08.2026: в полосе 768-1023px сплит ещё не стакается, и колонка фото получает рамку
   384x582 - ВЕРТИКАЛЬНУЮ под горизонтальный снимок 1900x1080, cover срезает бока
   (замер 0.37). Пропорция вместо растяжки по высоте соседней колонки. */
@media (min-width: 768px) and (max-width: 1023px) {
	.story-split__media, .contact-hero__media { align-self: center; }
	.story-split__media img, .contact-hero__media img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}