/* Dobrograd's first scene follows the Osmo image-layer choreography. */
body {
	overflow-x: clip;
}

/* The theme body carries a light paper texture (main.css). On the immersive
 * route every gap between pinned scenes — the first scroll before lazy
 * assets decode, overscroll on phones — must show the story's own dark
 * ground, never a white flash at the edges. */
body:has(> .dobrograd-immersive),
body:has(.dobrograd-immersive) {
	background: #000;
}

.dobrograd-immersive {
	--dobro-light: #f2f0ea;
	--dobro-warm: #d5a467;
	--dobro-paper: #ece8dc;
	--dobro-ink: #17211d;
	--dobro-transition-surface: #f4f1e8;
	--dobro-forest: #17352f;
	--dobro-deep: #0d1815;
	--dobro-sand: #f1ece0;
	--dobro-cream: #f7f4ec;
	--dobro-moss: #8fa37b;
	--dobro-amber: #d8a761;
	--dobro-copper: #9b6a43;
	--dobro-display: raleway-c, Arial, sans-serif;
	--dobro-ui: outfit-c, Arial, sans-serif;
	--dobro-gutter: clamp(1.25rem, 6vw, 7rem);
	--dobro-body-size: clamp(.95rem, 1.2vw, 1.12rem);
	min-height: 100svh;
	background: #000;
	color: var(--dobro-light);
}

.dobrograd-immersive .parallax {
	position: relative;
	width: 100%;
	overflow: clip;
	background: #000;
}

.dobrograd-immersive .parallax__header {
	position: relative;
	z-index: 2;
	min-height: 100svh;
	padding: 0;
}

.dobrograd-immersive .parallax__visuals {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	overflow: hidden;
	background: #000;
	isolation: isolate;
}

.dobrograd-immersive .parallax__layers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.dobrograd-immersive .parallax__layer-img {
	position: absolute;
	top: -17.5%;
	left: 0;
	width: 100%;
	max-width: none;
	height: 117.5%;
	object-fit: cover;
	pointer-events: none;
	will-change: transform;
	backface-visibility: hidden;
}

.dobrograd-immersive .parallax__layer-img[data-parallax-layer="1"] {
	z-index: 1;
}

.dobrograd-immersive .parallax__layer-img[data-parallax-layer="2"] {
	z-index: 2;
}

.dobrograd-immersive .parallax__layer-img[data-parallax-layer="4"] {
	z-index: 4;
}

.dobrograd-immersive .parallax__layer-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	z-index: 3;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-glass-label {
	--glass-label-left: 6vw;
	--glass-label-top: 2.8svh;
	--glass-label-width: min(38vw, 34rem);
	--glass-label-shift-x: 0%;
	isolation: isolate;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-glass-label[data-glass-placement="crown"] {
	--glass-label-left: 28vw;
	--glass-label-top: 1.5svh;
	--glass-label-width: min(44vw, 39rem);
}

.dobrograd-immersive .dobrograd-glass-label[data-glass-placement="horizon"] {
	--glass-label-left: 50%;
	--glass-label-top: 4svh;
	--glass-label-width: min(68vw, 64rem);
	--glass-label-shift-x: -50%;
}

.dobrograd-immersive .dobrograd-glass-label__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .45s ease;
}

.dobrograd-immersive .dobrograd-glass-label__fallback {
	position: absolute;
	top: var(--glass-label-top);
	left: var(--glass-label-left);
	width: var(--glass-label-width);
	height: auto;
	translate: var(--glass-label-shift-x) 0;
	filter: grayscale(1) brightness(.74) contrast(.88) drop-shadow(0 8px 20px rgba(0, 0, 0, .2));
	mix-blend-mode: soft-light;
	opacity: .12;
	transition: opacity .24s ease;
}

.dobrograd-immersive .dobrograd-glass-label.is-glass-ready .dobrograd-glass-label__canvas {
	opacity: 1;
}

.dobrograd-immersive .dobrograd-glass-label.is-glass-ready .dobrograd-glass-label__fallback {
	opacity: 0;
}

.dobrograd-immersive .dobrograd-glass-label.is-glass-fallback .dobrograd-glass-label__fallback {
	opacity: .26;
}

.dobrograd-immersive .parallax__title {
	position: relative;
	margin: 0 0 .1em;
	color: rgba(226, 238, 239, .3);
	font-family: outfit-c, sans-serif;
	font-size: clamp(4.5rem, 11vw, 11rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.075em;
	text-align: center;
	text-transform: uppercase;
	isolation: isolate;
	-webkit-text-stroke: clamp(.8px, .07vw, 1.3px) rgba(255, 255, 255, .82);
	text-shadow:
		0 -1px 0 rgba(255, 255, 255, .94),
		0 2px 1px rgba(1, 9, 7, .76),
		0 11px 28px rgba(0, 0, 0, .44);
}

.dobrograd-immersive .parallax__title::before,
.dobrograd-immersive .parallax__title::after {
	position: absolute;
	inset: 0;
	content: attr(data-text);
	pointer-events: none;
}

.dobrograd-immersive .parallax__title::before {
	z-index: 1;
	color: transparent;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .94) 0%,
			rgba(230, 243, 244, .5) 13%,
			rgba(97, 124, 117, .12) 46%,
			rgba(4, 15, 12, .58) 100%
		),
		url('../img/dobrograd/parallax-forest.webp') center 28% / 188% auto no-repeat;
	background-blend-mode: screen, normal;
	background-image:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .94) 0%,
			rgba(230, 243, 244, .5) 13%,
			rgba(97, 124, 117, .12) 46%,
			rgba(4, 15, 12, .58) 100%
		),
		image-set(url('../img/dobrograd/parallax-forest.webp') type('image/webp'), url('../img/dobrograd/parallax-forest.webp') type('image/png'));
	-webkit-background-clip: text;
	background-clip: text;
	opacity: .9;
	-webkit-text-stroke: .45px rgba(255, 255, 255, .42);
}

.dobrograd-immersive .parallax__title::after {
	z-index: 2;
	color: transparent;
	-webkit-text-stroke: clamp(1.1px, .11vw, 1.9px) rgba(255, 255, 255, .86);
	text-shadow:
		0 -2px 1px rgba(255, 255, 255, .72),
		0 2px 1px rgba(0, 8, 6, .8),
		0 13px 30px rgba(0, 0, 0, .4);
	opacity: .94;
}

.dobrograd-immersive .parallax__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 30;
	width: 100%;
	max-width: none;
	height: 20%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, .738) 19%,
		rgba(0, 0, 0, .541) 34%,
		rgba(0, 0, 0, .382) 47%,
		rgba(0, 0, 0, .278) 56.5%,
		rgba(0, 0, 0, .194) 65%,
		rgba(0, 0, 0, .126) 73%,
		rgba(0, 0, 0, .075) 80.2%,
		rgba(0, 0, 0, .042) 86.1%,
		rgba(0, 0, 0, .021) 91%,
		rgba(0, 0, 0, .008) 95.2%,
		rgba(0, 0, 0, .002) 98.2%,
	transparent 100%
	);
	pointer-events: none;
}

.dobrograd-immersive .parallax__black-line-overflow {
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 2px;
	background: #000;
	pointer-events: none;
}

.dobrograd-immersive .dg-map {
	position: relative;
	height: 460svh;
	background: #000;
	isolation: isolate;
}

.dobrograd-immersive .dg-map__sticky {
	position: sticky;
	top: 0;
	display: grid;
	width: 100%;
	height: 100svh;
	place-items: center;
	overflow: hidden;
	background: #000;
	contain: paint;
}

.dobrograd-immersive .dg-map__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* The reference is the map stage, not an image inside a framed window.
	 * Let its black field occupy the whole sticky viewport; the shader owns
	 * cropping and edge integration at every breakpoint. */
	padding: 0;
	will-change: opacity;
}

.dobrograd-immersive .dg-map__visual {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

.dobrograd-immersive .dg-map__reference-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
}

.dobrograd-immersive .dg-map__frame--reference .dg-map__svg {
	visibility: hidden;
}

.dobrograd-immersive .dg-map__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.dobrograd-immersive .dg-map__block-edges,
.dobrograd-immersive .dg-map__lots,
.dobrograd-immersive .dg-map__connectors,
.dobrograd-immersive .dg-map__terrain,
.dobrograd-immersive .dg-map__urban-fabric {
	mix-blend-mode: screen;
}

.dobrograd-immersive .dg-map__detail-lights {
	filter: drop-shadow(0 0 2.5px rgba(239, 179, 95, .5));
}

.dobrograd-immersive .dg-map__copy {
	position: absolute;
	top: clamp(5.5rem, 10svh, 8rem);
	left: 6vw;
	z-index: 6;
	width: min(30rem, 38vw);
	color: #f4efe5;
	text-wrap: balance;
	will-change: transform, opacity;
}

.dobrograd-immersive .dg-map__copy h2 {
	max-width: 8ch;
	font-size: clamp(4rem, 7.4vw, 7rem);
	line-height: .82;
	letter-spacing: -.04em;
	text-shadow: 0 12px 34px rgba(0, 0, 0, .48);
}

.dobrograd-immersive .dg-map__copy h2 em {
	font-style: normal;
	color: var(--dobro-moss);
}

.dobrograd-immersive .dg-map__copy p {
	max-width: 32rem;
	margin: 1.6rem 0 0;
	color: rgba(244, 239, 229, .72);
	font-size: clamp(.95rem, 1.25vw, 1.15rem);
	line-height: 1.5;
	text-shadow: 0 4px 20px rgba(0, 0, 0, .62);
}

.dobrograd-immersive .dg-map__night,
.dobrograd-immersive .dg-map__dawn {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: opacity;
}

.dobrograd-immersive .dg-map__night {
	z-index: 4;
	background: #000;
}

.dobrograd-immersive .dg-map__dawn {
	z-index: 5;
	background: var(--dobro-transition-surface);
	opacity: 0;
}

.dobrograd-immersive .dg-map__star {
	transform-box: fill-box;
	transform-origin: center;
	animation: dg-map-star-breathe 2.8s ease-in-out infinite alternate;
	animation-delay: var(--dg-star-delay, 0s);
	animation-play-state: paused;
}

.dobrograd-immersive .dg-map.is-active .dg-map__star {
	animation-play-state: running;
}

@keyframes dg-map-star-breathe {
	50% {
		transform: scale(1.16);
	}
}

.dobrograd-immersive .parallax__content {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 9rem 7vw 7rem;
	background: var(--dobro-paper);
	color: var(--dobro-ink);
}

.dobrograd-immersive .dobrograd-story__description-inner {
	width: min(1180px, 86vw);
	margin: 0 auto;
}

.dobrograd-immersive .dobrograd-story__chapter {
	margin: 0 0 1.25rem;
	color: #8b5b2f;
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-story__description-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
	gap: 7vw;
	align-items: end;
}

.dobrograd-immersive h2 {
	max-width: 9ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(4rem, 8vw, 8.5rem);
	font-weight: 400;
	line-height: .8;
	letter-spacing: -.045em;
}

.dobrograd-immersive h2 em {
	color: #8b5b2f;
	font-style: normal;
}

.dobrograd-immersive .dobrograd-story__lead {
	max-width: 29rem;
	margin: 2rem 0 0;
	color: rgba(23, 33, 29, .72);
	font-size: clamp(1rem, 1.4vw, 1.3rem);
	line-height: 1.48;
}

.dobrograd-immersive .dobrograd-story__roles {
	display: grid;
	border-top: 1px solid rgba(23, 33, 29, .3);
}

.dobrograd-immersive .dobrograd-story__roles a {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: .15rem 1rem;
	padding: 1.15rem 0 1.2rem;
	border-bottom: 1px solid rgba(23, 33, 29, .2);
	color: inherit;
	text-decoration: none;
	transition: color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-story__roles a:hover,
.dobrograd-immersive .dobrograd-story__roles a:focus-visible {
	transform: translateX(.8rem);
	color: #8b5b2f;
}

.dobrograd-immersive .dobrograd-story__roles span {
	grid-row: span 2;
	color: rgba(23, 33, 29, .48);
	font-size: .68rem;
	letter-spacing: .12em;
}

.dobrograd-immersive .dobrograd-story__roles strong {
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(1.8rem, 3vw, 3rem);
	font-weight: 400;
	line-height: .88;
}

.dobrograd-immersive .dobrograd-story__roles small {
	color: rgba(23, 33, 29, .58);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-story__transition-note {
	margin: 6rem 0 0;
	color: rgba(23, 33, 29, .52);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.dobrograd-immersive .parallax__layer-title {
		height: 100svh;
	}

	.dobrograd-immersive .dobrograd-glass-label,
	.dobrograd-immersive .dobrograd-glass-label[data-glass-placement="crown"] {
		--glass-label-left: 11vw;
		--glass-label-top: 1.2svh;
		--glass-label-width: 78vw;
	}

	.dobrograd-immersive .dobrograd-glass-label[data-glass-placement="horizon"] {
		--glass-label-left: 50%;
		--glass-label-top: 2.5svh;
		--glass-label-width: 94vw;
		--glass-label-shift-x: -50%;
	}

	.dobrograd-immersive .dg-map {
		height: 480svh;
	}

	.dobrograd-immersive .dg-map__frame {
		padding: 24svh 0 max(5svh, env(safe-area-inset-bottom));
	}

	.dobrograd-immersive .dg-map__copy {
		top: max(4.75rem, calc(env(safe-area-inset-top) + 3.25rem));
		left: max(6vw, env(safe-area-inset-left));
		right: max(6vw, env(safe-area-inset-right));
		width: auto;
		max-width: 38rem;
		margin-inline: auto;
		text-align: center;
	}

	.dobrograd-immersive .dg-map__copy h2 {
		max-width: 9ch;
		margin-inline: auto;
		font-size: clamp(3.15rem, 14vw, 5rem);
		line-height: .86;
	}

	.dobrograd-immersive .dg-map__copy p {
		max-width: 29rem;
		margin: .9rem auto 0;
		font-size: .9rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .parallax__content {
		min-height: 100svh;
		padding: 7rem 7vw 5rem;
	}

	.dobrograd-immersive .dobrograd-story__description-inner {
		width: 86vw;
	}

	.dobrograd-immersive .dobrograd-story__description-grid {
		display: block;
	}

	.dobrograd-immersive h2 {
		font-size: clamp(3.8rem, 17vw, 7rem);
	}

	.dobrograd-immersive .dobrograd-story__lead {
		margin-top: 1.5rem;
	}

	.dobrograd-immersive .dobrograd-story__roles {
		margin-top: 4rem;
	}

	.dobrograd-immersive .dobrograd-story__roles strong {
		font-size: 2rem;
	}

	.dobrograd-immersive .dobrograd-story__transition-note {
		margin-top: 3rem;
		line-height: 1.45;
	}
}

.dobrograd-immersive .dg-map__gommage-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	display: block;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
}

.dobrograd-immersive .dg-map__expansion-target {
	display: inline-block;
	color: transparent !important;
	background-image: linear-gradient(rgba(247, 241, 228, .58), rgba(247, 241, 228, .58)), var(--map-expansion-image);
	background-blend-mode: screen, normal;
	background-position: center;
	background-size: calc(115% + var(--map-expansion-progress, 0) * 280%) auto;
	-webkit-background-clip: text;
	background-clip: text;
	filter: brightness(1.68) contrast(1.16) saturate(.9);
	text-shadow: 0 0 .28em rgba(244, 239, 236, .28);
	transform: translateX(calc(var(--map-expansion-progress, 0) * 1.4vw));
	will-change: background-size, transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dg-map__gommage-canvas {
		display: none;
	}

	.dobrograd-immersive .dg-map__expansion-target {
		color: #efae62 !important;
		background: none;
		transform: none;
		transition: none;
	}
}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
	.dobrograd-immersive .dg-map {
		height: 430svh;
	}

	.dobrograd-immersive .dg-map__frame {
		padding: 8svh 2vw 5svh 43vw;
	}

	.dobrograd-immersive .dg-map__copy {
		top: max(3.5rem, calc(env(safe-area-inset-top) + 1.25rem));
		left: max(4vw, env(safe-area-inset-left));
		width: 38vw;
		translate: 0 0;
		text-align: left;
	}

	.dobrograd-immersive .dg-map__copy h2 {
		margin-inline: 0;
		font-size: clamp(2.6rem, 8vw, 4.3rem);
	}

	.dobrograd-immersive .dg-map__copy p {
		margin-inline: 0;
		font-size: .82rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-glass-label__canvas,
	.dobrograd-immersive .dobrograd-glass-label__fallback {
		transition: none;
	}

	.dobrograd-immersive .dg-map {
		height: auto;
	}

	.dobrograd-immersive .dg-map__sticky {
		position: relative;
	}

	.dobrograd-immersive .dg-map__star {
		animation: none;
	}
}

/* Unified rest chapter: invitation and choices share one pinned stage. */
.dobrograd-immersive .dobrograd-rest {
	--rest-deck-opacity: 0;
	z-index: 2;
	margin-top: -100svh;
	background: var(--dobro-transition-surface);
}

.dobrograd-immersive .dobrograd-rest-welcome {
	position: absolute;
	inset: 0;
	z-index: 20;
	width: 100%;
	height: auto;
	margin: 0;
	background: var(--dobro-transition-surface);
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-rest-welcome__frame {
	inset: var(--rest-welcome-clip, 0%);
	border-radius: calc(var(--rest-welcome-clip, 0%) * .24);
	/* box-shadow removed: the frame is clip-path'ed to its own box, so an
	 * outer shadow was never visible but was repainted on every scroll frame. */
	clip-path: inset(0 round calc(var(--rest-welcome-clip, 0%) * .24));
	will-change: inset, opacity, clip-path;
}

.dobrograd-immersive .dobrograd-rest__intro,
.dobrograd-immersive .dobrograd-rest__viewport,
.dobrograd-immersive .dobrograd-rest__meter,
.dobrograd-immersive .dobrograd-rest__hint {
	opacity: var(--rest-deck-opacity);
}

.dobrograd-immersive .dobrograd-rest__viewport,
.dobrograd-immersive .dobrograd-rest__meter,
.dobrograd-immersive .dobrograd-rest__hint {
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-rest__intro {
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) {
	--rest-deck-opacity: 1;
	margin-top: 0;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest__sticky {
	display: block;
	height: auto;
	overflow: visible;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest-welcome {
	position: relative;
	height: 100svh;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest__intro {
	position: relative;
	top: auto;
	left: auto;
	width: min(72rem, 88vw);
	margin-inline: auto;
	padding-top: 6rem;
}

/* Business chapter: panels assemble like parts of a master plan. */
.dobrograd-immersive .dobrograd-business {
	--business-ink: #f2ede1;
	--business-brass: #d8ad65;
	position: relative;
	min-height: 100svh;
	overflow: clip;
	background: #151816;
	color: var(--business-ink);
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven {
	--business-finale-hold-distance: 100svh;
	min-height: calc(100svh + var(--business-entry-distance, 0px) + var(--business-scroll-distance, 4428px) + var(--business-finale-hold-distance));
	overflow: visible;
}

.dobrograd-immersive .dobrograd-business__sticky {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	background: #151816;
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
}

.dobrograd-immersive .dobrograd-business__backdrop {
	--business-background-scale: 1;
	--business-background-brightness: .86;
	--business-selection-shade: .18;
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: #151816;
}

.dobrograd-immersive .dobrograd-business__backdrop img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: saturate(.82) contrast(1.02) brightness(var(--business-background-brightness));
	transform: scale(var(--business-background-scale));
	transform-origin: 58% 54%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-business__backdrop span {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 15, 13, .86), rgba(12, 15, 13, .52) 48%, rgba(12, 15, 13, .72)),
		linear-gradient(180deg, rgba(12, 15, 13, .16), rgba(12, 15, 13, .76));
	opacity: var(--business-selection-shade);
}

.dobrograd-immersive .dobrograd-business__intro {
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	bottom: clamp(6.5rem, 13vh, 10rem);
	z-index: 3;
	width: min(58rem, 82vw);
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-business__chapter {
	margin: 0 0 1.35rem;
	color: rgba(242, 237, 225, .66);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-business__intro h2 {
	max-width: 12ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(4.6rem, 8.5vw, 8.5rem);
	font-weight: 400;
	line-height: .77;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-business__intro h2 em {
	color: var(--business-brass);
	font-style: normal;
}

.dobrograd-immersive .dobrograd-business__intro > p:last-child {
	max-width: 60ch;
	margin: 2rem 0 0;
	color: rgba(242, 237, 225, .76);
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.92rem, 1.08vw, 1.08rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-business__deck {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 1.25rem;
	width: min(72rem, 90vw);
	margin-inline: auto;
	padding: 8rem 0;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__deck {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	perspective: 1400px;
	perspective-origin: 50% 50%;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-business__card {
	position: relative;
	width: 100%;
	min-height: 12rem;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card {
	--business-card-height: clamp(13.5rem, 28svh, 18rem);
	--business-card-x: 0vw;
	--business-card-y: 28vh;
	--business-card-rotation: 0deg;
	--business-card-rotate-x: -14deg;
	--business-card-scale: .78;
	--business-card-opacity: 0;
	--business-card-brightness: .7;
	--business-card-blur: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(62rem, 82vw);
	height: var(--business-card-height);
	min-height: 0;
	opacity: var(--business-card-opacity);
	filter: brightness(var(--business-card-brightness)) blur(var(--business-card-blur));
	transform: translate3d(calc(-50% + var(--business-card-x)), calc(-50% + var(--business-card-y)), 0) rotateX(var(--business-card-rotate-x)) rotateZ(var(--business-card-rotation)) scale(var(--business-card-scale));
	transform-origin: 50% 52%;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card--showcase {
	--business-card-height: clamp(14.5rem, 32svh, 18rem);
	width: min(74rem, 90vw);
}

.dobrograd-immersive .dobrograd-business__card:nth-child(1) { --business-card-order: 1; }
.dobrograd-immersive .dobrograd-business__card:nth-child(2) { --business-card-order: 2; }
.dobrograd-immersive .dobrograd-business__card:nth-child(3) { --business-card-order: 3; }
.dobrograd-immersive .dobrograd-business__card:nth-child(4) { --business-card-order: 4; }
.dobrograd-immersive .dobrograd-business__card:nth-child(5) { --business-card-order: 5; }
.dobrograd-immersive .dobrograd-business__card:nth-child(6) { --business-card-order: 6; }

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card[data-business-active] {
	pointer-events: auto;
}

.dobrograd-immersive .dobrograd-business__card-surface {
	position: relative;
	display: grid;
	grid-template-columns: minmax(11rem, 29%) minmax(0, 71%);
	gap: clamp(.48rem, .7vw, .72rem);
	width: 100%;
	height: 100%;
	padding: clamp(.48rem, .7vw, .72rem);
	overflow: visible;
	border: 1px solid rgba(255, 250, 238, .72);
	border-radius: clamp(1.7rem, 3vw, 2.7rem);
	background: linear-gradient(180deg, #f0eadc 0%, #c9bea7 55%, #988d76 100%);
	box-shadow:
		0 2.2rem 4.5rem -1.8rem rgba(0, 0, 0, .7),
		0 .8rem 1.6rem -.7rem rgba(0, 0, 0, .38),
		inset 0 2px 0 rgba(255, 255, 255, .92),
		inset 0 -3px 6px rgba(65, 52, 30, .24);
	transform-style: preserve-3d;
}

.dobrograd-immersive .dobrograd-business__card--2 .dobrograd-business__card-surface,
.dobrograd-immersive .dobrograd-business__card--4 .dobrograd-business__card-surface {
	background: linear-gradient(180deg, #e5e1d5 0%, #b8baa8 54%, #858977 100%);
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-surface {
	grid-template-columns: minmax(15rem, 38%) minmax(0, 62%);
	border-color: rgba(255, 226, 170, .82);
	background: linear-gradient(180deg, #ead7ad 0%, #c99d58 56%, #8a6634 100%);
	box-shadow: 0 2.8rem 6rem -2rem rgba(0, 0, 0, .78), 0 1rem 4rem rgba(187, 129, 55, .2), inset 0 2px 0 rgba(255,255,255,.85);
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__object {
	overflow: visible;
	clip-path: inset(-45% 0 -45% -45%);
}

.dobrograd-immersive .dobrograd-business__object {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: visible;
	border-radius: clamp(1.25rem, 2.2vw, 2rem);
	background:
		radial-gradient(circle at 55% 35%, rgba(255, 239, 207, .38), transparent 46%),
		linear-gradient(145deg, #545e52, #25312a 72%);
	box-shadow: inset 0 2px 5px rgba(255, 255, 255, .12), inset 0 -4px 8px rgba(0, 0, 0, .34);
	transform: translateZ(16px);
}

.dobrograd-immersive .dobrograd-business__object span {
	position: absolute;
	right: 5%;
	bottom: 7%;
	left: 5%;
	height: 24%;
	border-radius: 50%;
	background: rgba(215, 170, 99, .18);
	filter: blur(1.7rem);
	transform: scaleX(.86);
}

.dobrograd-immersive .dobrograd-business__object img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 142%;
	height: 162%;
	max-width: none;
	object-fit: contain;
	filter: drop-shadow(0 1.7rem 1.4rem rgba(0, 0, 0, .34));
	transform: translate(-53%, -51%) scale(.94);
	transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-business__card--3 .dobrograd-business__object img,
.dobrograd-immersive .dobrograd-business__card--4 .dobrograd-business__object img {
	width: 132%;
	height: 150%;
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__object img {
	width: 120%;
	height: 170%;
	transform: translate(-53%, -52%) scale(.98);
}

.dobrograd-immersive .dobrograd-business__card[data-business-active] .dobrograd-business__object img {
	transform: translate(-53%, -55%) scale(1.02);
}

.dobrograd-immersive .dobrograd-business__card--showcase[data-business-active] .dobrograd-business__object img {
	transform: translate(-53%, -56%) scale(1.04);
}

.dobrograd-immersive .dobrograd-business__card-copy {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(13rem, .86fr) minmax(15rem, 1.14fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	column-gap: clamp(1.2rem, 2.4vw, 2.6rem);
	min-width: 0;
	padding: clamp(1.25rem, 2vw, 2rem) clamp(1.4rem, 2.4vw, 2.5rem);
	overflow: hidden;
	border-radius: clamp(1.25rem, 2.2vw, 2rem);
	background: linear-gradient(145deg, rgba(28, 34, 29, .99), rgba(12, 16, 14, .99));
	box-shadow: inset 0 3px 8px rgba(0, 0, 0, .58), inset 0 -2px 4px rgba(255,255,255,.05);
	transform: translateZ(24px);
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-copy {
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	column-gap: clamp(1rem, 1.8vw, 2rem);
}

.dobrograd-immersive .dobrograd-business__card-copy h3 {
	grid-column: 1;
	grid-row: 2 / 4;
	align-self: center;
	max-width: 14ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(1.95rem, 2.75vw, 2.85rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-business__card-note {
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 .55rem;
	color: var(--business-brass);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .68rem;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note) {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	max-width: 52ch;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	color: rgba(242, 237, 225, .7);
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.82rem, .94vw, .96rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-business__description-mobile,
.dobrograd-immersive .dobrograd-live__description-mobile {
	display: none;
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note) {
	min-width: 0;
	overflow-wrap: break-word;
}

.dobrograd-immersive .dobrograd-business__actions {
	grid-column: 2;
	grid-row: 3;
	display: grid;
	gap: .45rem;
	min-width: 0;
	margin-top: .45rem;
}

.dobrograd-immersive .dobrograd-business__actions a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .62rem 0 .5rem;
	border-top: 1px solid rgba(216, 173, 101, .3);
	color: var(--business-ink);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .66rem;
	letter-spacing: .09em;
	text-decoration: none;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-business__actions a:last-child {
	border-bottom: 1px solid rgba(216, 173, 101, .3);
}

.dobrograd-immersive .dobrograd-business__actions i {
	font-size: 1.1rem;
	font-style: normal;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-business__actions a:hover i,
.dobrograd-immersive .dobrograd-business__actions a:focus-visible i {
	transform: translate(.22rem, -.22rem);
}

.dobrograd-immersive .dobrograd-business__actions a:focus-visible {
	outline: 2px solid var(--business-brass);
	outline-offset: .35rem;
}

.dobrograd-immersive .dobrograd-business__progress {
	position: absolute;
	right: 5vw;
	bottom: max(2.4rem, calc(env(safe-area-inset-bottom) + 1.5rem));
	left: 5vw;
	z-index: 30;
	height: 1px;
	background: rgba(242, 237, 225, .22);
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-business__progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--business-brass);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-business__counter {
	position: absolute;
	right: 5vw;
	bottom: max(3.55rem, calc(env(safe-area-inset-bottom) + 2.7rem));
	z-index: 31;
	display: flex;
	gap: 1.25rem;
	color: rgba(242, 237, 225, .68);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-business__counter strong {
	color: var(--business-ink);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-rest-welcome {
		height: auto;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__frame {
		inset: var(--rest-welcome-clip, 0%);
	}

	.dobrograd-immersive .dobrograd-business__backdrop img {
		object-position: 62% 50%;
	}

	.dobrograd-immersive .dobrograd-business__intro {
		left: 7vw;
		bottom: max(6.5rem, calc(env(safe-area-inset-bottom) + 5.5rem));
		width: 86vw;
	}

	.dobrograd-immersive .dobrograd-business__intro h2 {
		font-size: clamp(3.8rem, 16vw, 5.4rem);
	}

	.dobrograd-immersive .dobrograd-business__intro > p:last-child {
		font-size: .86rem;
	}

	.dobrograd-immersive .dobrograd-business__deck {
		width: 92vw;
	}

	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card {
		--business-card-height: min(72svh, 40rem);
		width: 92vw;
		height: var(--business-card-height);
	}

	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card--showcase {
		--business-card-height: min(84svh, 42rem);
	}

	.dobrograd-immersive .dobrograd-business__card-surface,
	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-surface {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(10rem, 40%) minmax(0, 60%);
		gap: .42rem;
		padding: .42rem;
		border-radius: 1.75rem;
	}

	.dobrograd-immersive .dobrograd-business__object {
		border-radius: 1.35rem;
	}

	.dobrograd-immersive .dobrograd-business__object img,
	.dobrograd-immersive .dobrograd-business__card--3 .dobrograd-business__object img,
	.dobrograd-immersive .dobrograd-business__card--4 .dobrograd-business__object img,
	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__object img {
		width: 112%;
		height: 134%;
		transform: translate(-50%, -52%) scale(.96);
	}

	.dobrograd-immersive .dobrograd-business__card[data-business-active] .dobrograd-business__object img {
		transform: translate(-50%, -56%) scale(1.02);
	}

	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__object img,
	.dobrograd-immersive .dobrograd-business__card--showcase[data-business-active] .dobrograd-business__object img {
		width: 100%;
		height: 130%;
		transform: translate(-50%, -54%) scale(1);
	}

	.dobrograd-immersive .dobrograd-business__card-copy {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		align-content: stretch;
		padding: 1rem 1.2rem 1.1rem;
		border-radius: 1.35rem;
	}

	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-copy {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		column-gap: 0;
	}

	.dobrograd-immersive .dobrograd-business__card-copy h3 {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		max-width: 11ch;
		font-size: clamp(1.95rem, 8.2vw, 2.7rem);
	}

	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-copy h3 {
		max-width: 12ch;
		font-size: clamp(1.75rem, 7.6vw, 2.45rem);
	}

	.dobrograd-immersive .dobrograd-business__card-note {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: .45rem;
		font-size: .57rem;
	}

	.dobrograd-immersive .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note) {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		display: block;
		margin-top: .55rem;
		overflow: visible;
		font-size: .75rem;
		line-height: 1.4;
	}

	.dobrograd-immersive .dobrograd-business__actions {
		grid-column: 1;
		grid-row: 4;
		display: grid;
		margin-top: .45rem;
	}

	.dobrograd-immersive .dobrograd-business__actions a {
		padding: .62rem 0 .52rem;
		font-size: .56rem;
	}

	.dobrograd-immersive .dobrograd-business__counter > span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-business__sticky {
		height: auto;
		overflow: visible;
	}

	.dobrograd-immersive .dobrograd-business__intro {
		position: relative;
		bottom: auto;
		left: auto;
		width: min(72rem, 88vw);
		margin-inline: auto;
		padding: 8rem 0 3rem;
		opacity: 1 !important;
		transform: none !important;
	}

	.dobrograd-immersive .dobrograd-business__deck {
		position: relative;
		display: grid;
		gap: 2rem;
		padding: 2rem 0 8rem;
	}

	.dobrograd-immersive .dobrograd-business__card,
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		min-height: 38rem;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto;
	}

	.dobrograd-immersive .dobrograd-business__progress,
	.dobrograd-immersive .dobrograd-business__counter {
		display: none;
	}
}

/* Living chapter: five everyday-life stories rise into a vertical deck. */
.dobrograd-immersive .dobrograd-live {
	--live-cream: #f2eee4;
	--live-ink: #19211c;
	--live-sage: #a8b59f;
	--live-amber: #c69352;
	position: relative;
	min-height: 100svh;
	background: #1d251f;
	color: var(--live-cream);
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven {
	min-height: calc(100svh + var(--live-entry-distance, 0px) + var(--live-scroll-distance, 5760px) + var(--live-exit-distance, 0px));
}

.dobrograd-immersive .dobrograd-live__sticky {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	background: #1d251f;
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
}

.dobrograd-immersive .dobrograd-live__backdrop {
	--live-background-scale: 1;
	--live-background-x: 0vw;
	--live-background-y: 0vh;
	--live-shade-opacity: .58;
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: #1d251f;
}

.dobrograd-immersive .dobrograd-live__backdrop > img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 54%;
	filter: saturate(.9) contrast(1.02) brightness(.84);
	transform: translate3d(var(--live-background-x), var(--live-background-y), 0) scale(var(--live-background-scale));
	transform-origin: 50% 62%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-live__forest-scene {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: max(108vw, 192svh);
	aspect-ratio: 16 / 9;
	transform: translate3d(calc(-50% + var(--live-background-x)), calc(-50% + var(--live-background-y)), 0) scale(var(--live-background-scale));
	transform-origin: 50% 50%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-live__forest-layer {
	--live-layer-x: 0px;
	--live-layer-y: 0px;
	position: absolute;
	inset: 0;
	display: block;
	transform: translate3d(var(--live-layer-x), var(--live-layer-y), 0);
	will-change: transform;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__forest-layer img,
.dobrograd-immersive .dobrograd-live__forest-layer canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	user-select: none;
}

.dobrograd-immersive .dobrograd-live__forest-layer--background { z-index: 0; }
.dobrograd-immersive .dobrograd-live__forest-layer--tint { z-index: 1; mix-blend-mode: multiply; }
.dobrograd-immersive .dobrograd-live__forest-layer--clouds { z-index: 2; }
.dobrograd-immersive .dobrograd-live__forest-layer--cloud-light { z-index: 3; mix-blend-mode: soft-light; }
.dobrograd-immersive .dobrograd-live__forest-layer--sun { z-index: 4; }
.dobrograd-immersive .dobrograd-live__forest-layer--distant { z-index: 5; }
.dobrograd-immersive .dobrograd-live__forest-layer--midground { z-index: 6; }
.dobrograd-immersive .dobrograd-live__forest-layer--foreground { z-index: 7; }
.dobrograd-immersive .dobrograd-live__forest-layer--warm { z-index: 8; mix-blend-mode: soft-light; }

.dobrograd-immersive .dobrograd-live__day-cycle {
	--live-dawn-opacity: 0;
	--live-day-opacity: 1;
	--live-dusk-opacity: 0;
	--live-night-opacity: 0;
	--live-stars-opacity: 0;
	--live-cloud-opacity: .24;
	--live-cloud-warmth: 0;
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__day-tone {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: translateZ(0);
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-live__day-tone--dawn {
	opacity: var(--live-dawn-opacity);
	background:
		radial-gradient(ellipse 34% 48% at 4% 55%, rgba(255, 191, 111, .34), transparent 66%),
		linear-gradient(180deg, rgba(53, 60, 96, .46) 0%, rgba(184, 111, 84, .2) 43%, rgba(235, 162, 94, .1) 63%, rgba(31, 36, 29, .12) 100%);
	mix-blend-mode: soft-light;
}

.dobrograd-immersive .dobrograd-live__day-tone--day {
	opacity: var(--live-day-opacity);
	background:
		radial-gradient(ellipse at 48% 12%, rgba(252, 255, 244, .72), transparent 59%),
		linear-gradient(180deg, rgba(126, 188, 216, .4) 0%, rgba(231, 224, 176, .25) 51%, rgba(119, 159, 99, .18) 100%);
	mix-blend-mode: screen;
}

.dobrograd-immersive .dobrograd-live__day-tone--dusk {
	opacity: var(--live-dusk-opacity);
	background:
		radial-gradient(ellipse 33% 47% at 96% 56%, rgba(255, 159, 74, .36), transparent 67%),
		linear-gradient(180deg, rgba(53, 43, 82, .5) 0%, rgba(171, 76, 64, .22) 43%, rgba(236, 130, 67, .12) 64%, rgba(28, 30, 25, .15) 100%);
	mix-blend-mode: soft-light;
}

.dobrograd-immersive .dobrograd-live__day-tone--dawn::after,
.dobrograd-immersive .dobrograd-live__day-tone--dusk::after {
	position: absolute;
	inset: 0;
	content: '';
	mix-blend-mode: screen;
}

.dobrograd-immersive .dobrograd-live__day-tone--dawn::after {
	background: radial-gradient(ellipse 46% 13% at 2% 56%, rgba(255, 211, 148, .36), rgba(255, 172, 91, .1) 48%, transparent 74%);
}

.dobrograd-immersive .dobrograd-live__day-tone--dusk::after {
	background: radial-gradient(ellipse 45% 13% at 98% 56%, rgba(255, 206, 138, .34), rgba(255, 139, 61, .1) 48%, transparent 74%);
}

.dobrograd-immersive .dobrograd-live__clouds {
	--live-cloud-x: 0vw;
	--live-cloud-y: 0vh;
	position: absolute;
	inset: -12% -18% 18%;
	z-index: 1;
	opacity: var(--live-cloud-opacity);
	background:
		radial-gradient(ellipse 22% 13% at 12% 23%, rgba(235, 239, 235, .62) 0 42%, rgba(215, 222, 219, .25) 59%, transparent 72%),
		radial-gradient(ellipse 29% 15% at 38% 14%, rgba(242, 245, 239, .55) 0 39%, rgba(213, 219, 218, .22) 58%, transparent 73%),
		radial-gradient(ellipse 25% 12% at 67% 26%, rgba(237, 241, 236, .58) 0 41%, rgba(209, 216, 215, .2) 60%, transparent 74%),
		radial-gradient(ellipse 31% 16% at 91% 12%, rgba(241, 243, 236, .52) 0 40%, rgba(213, 218, 212, .2) 58%, transparent 73%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .95) 58%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .95) 58%, transparent 100%);
	transform: translate3d(var(--live-cloud-x), var(--live-cloud-y), 0);
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-live__clouds::after {
	position: absolute;
	inset: 0;
	opacity: var(--live-cloud-warmth);
	background:
		radial-gradient(ellipse 23% 5% at 13% 34%, rgba(255, 203, 140, .68), rgba(255, 160, 79, .2) 48%, transparent 74%),
		radial-gradient(ellipse 31% 5% at 39% 26%, rgba(255, 214, 158, .58), rgba(255, 170, 96, .18) 49%, transparent 75%),
		radial-gradient(ellipse 27% 5% at 68% 37%, rgba(255, 195, 123, .64), rgba(255, 147, 68, .2) 48%, transparent 74%),
		radial-gradient(ellipse 33% 5% at 91% 24%, rgba(255, 208, 145, .56), rgba(255, 163, 86, .16) 49%, transparent 75%);
	content: '';
	mix-blend-mode: screen;
}

.dobrograd-immersive .dobrograd-live__clouds--far {
	opacity: calc(var(--live-cloud-opacity) * .82);
}

.dobrograd-immersive .dobrograd-live__clouds--near {
	inset: -6% -24% 5%;
	opacity: calc(var(--live-cloud-opacity) * .72);
	background:
		radial-gradient(ellipse 28% 14% at 24% 34%, rgba(238, 240, 235, .54) 0 43%, rgba(208, 214, 212, .2) 61%, transparent 75%),
		radial-gradient(ellipse 34% 16% at 74% 20%, rgba(239, 241, 234, .48) 0 42%, rgba(206, 213, 210, .18) 60%, transparent 74%);
}

.dobrograd-immersive .dobrograd-live__clouds--near::after {
	background:
		radial-gradient(ellipse 29% 5% at 25% 47%, rgba(255, 191, 117, .62), rgba(255, 143, 66, .18) 49%, transparent 74%),
		radial-gradient(ellipse 35% 5% at 75% 34%, rgba(255, 202, 134, .6), rgba(255, 154, 75, .17) 49%, transparent 75%);
}

.dobrograd-immersive .dobrograd-live__day-tone--night {
	opacity: var(--live-night-opacity);
	background:
		radial-gradient(circle at 7% 12%, rgba(226, 235, 255, calc(var(--live-stars-opacity) * .42)) 0 1px, transparent 1.6px),
		radial-gradient(circle at 23% 27%, rgba(226, 235, 255, calc(var(--live-stars-opacity) * .28)) 0 1px, transparent 1.5px),
		radial-gradient(circle at 41% 9%, rgba(226, 235, 255, calc(var(--live-stars-opacity) * .34)) 0 1px, transparent 1.6px),
		radial-gradient(circle at 68% 22%, rgba(226, 235, 255, calc(var(--live-stars-opacity) * .3)) 0 1px, transparent 1.5px),
		radial-gradient(circle at 89% 13%, rgba(226, 235, 255, calc(var(--live-stars-opacity) * .38)) 0 1px, transparent 1.6px),
		linear-gradient(180deg, rgba(7, 14, 29, .68) 0%, rgba(10, 21, 31, .56) 50%, rgba(4, 10, 14, .46) 100%);
}

.dobrograd-immersive .dobrograd-live__sun {
	--live-sun-x: 50vw;
	--live-sun-y: 18svh;
	--live-sun-opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: clamp(12rem, 22vw, 24rem);
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: var(--live-sun-opacity);
	background: radial-gradient(circle, rgba(255, 255, 241, 1) 0 2.2%, rgba(255, 244, 202, .94) 2.8% 3.8%, rgba(255, 214, 143, .42) 5.5%, rgba(255, 180, 90, .14) 17%, rgba(255, 152, 67, .055) 34%, transparent 61%);
	transform: translate3d(calc(var(--live-sun-x) - 50%), calc(var(--live-sun-y) - 50%), 0);
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-live__sun::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 27%, rgba(255, 222, 164, .06) 40%, rgba(255, 249, 220, .5) 49.6%, rgba(255, 249, 220, .5) 50.4%, rgba(255, 222, 164, .06) 60%, transparent 73%),
		linear-gradient(180deg, transparent 34%, rgba(255, 225, 169, .04) 43%, rgba(255, 250, 222, .42) 49.7%, rgba(255, 250, 222, .42) 50.3%, rgba(255, 225, 169, .04) 57%, transparent 66%);
	-webkit-mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .72) 18%, transparent 46%);
	mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, .72) 18%, transparent 46%);
	content: '';
}

.dobrograd-immersive .dobrograd-live__sun-rays {
	--live-sun-x: 50vw;
	--live-sun-y: 18svh;
	--live-ray-opacity: 0;
	--live-ray-rotation: 0deg;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: min(112vmax, 94rem);
	aspect-ratio: 1;
	opacity: var(--live-ray-opacity);
	background:
		conic-gradient(from 193deg,
			transparent 0deg 7deg,
			rgba(255, 210, 140, .04) 10deg,
			rgba(255, 229, 173, .3) 18deg,
			rgba(255, 191, 105, .08) 29deg,
			transparent 38deg 62deg,
			rgba(255, 220, 156, .04) 66deg,
			rgba(255, 238, 197, .24) 75deg,
			rgba(255, 194, 112, .06) 87deg,
			transparent 97deg 125deg,
			rgba(255, 203, 132, .04) 130deg,
			rgba(255, 225, 165, .27) 139deg,
			rgba(255, 182, 92, .07) 151deg,
			transparent 162deg 218deg,
			rgba(255, 220, 157, .04) 222deg,
			rgba(255, 236, 190, .25) 231deg,
			rgba(255, 190, 104, .07) 243deg,
			transparent 254deg 283deg,
			rgba(255, 204, 132, .03) 287deg,
			rgba(255, 225, 164, .22) 296deg,
			rgba(255, 184, 97, .05) 307deg,
			transparent 318deg 360deg);
	-webkit-mask-image: radial-gradient(circle, transparent 0 3%, #000 7%, rgba(0, 0, 0, .9) 34%, rgba(0, 0, 0, .36) 54%, transparent 74%);
	mask-image: radial-gradient(circle, transparent 0 3%, #000 7%, rgba(0, 0, 0, .9) 34%, rgba(0, 0, 0, .36) 54%, transparent 74%);
	transform: translate3d(calc(var(--live-sun-x) - 50%), calc(var(--live-sun-y) - 50%), 0) rotate(var(--live-ray-rotation));
	transform-origin: 50% 50%;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-live__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: var(--live-shade-opacity);
	background:
		linear-gradient(90deg, rgba(14, 20, 16, .82) 0%, rgba(14, 20, 16, .6) 37%, rgba(14, 20, 16, .14) 68%, rgba(14, 20, 16, .38) 100%),
		linear-gradient(180deg, rgba(14, 20, 16, .14), rgba(14, 20, 16, .18) 58%, rgba(14, 20, 16, .64));
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-live__intro {
	position: absolute;
	left: clamp(2rem, 6vw, 7rem);
	bottom: clamp(6.5rem, 13vh, 10rem);
	z-index: 3;
	width: min(48rem, 78vw);
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-live__chapter {
	margin: 0 0 1.35rem;
	color: rgba(242, 238, 228, .68);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-live__intro h2 {
	max-width: 11ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(4.7rem, 8.6vw, 8.6rem);
	font-weight: 400;
	line-height: .76;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-live__intro h2 em {
	color: #d9b476;
	font-style: normal;
}

.dobrograd-immersive .dobrograd-live__intro > p:last-child {
	max-width: 58ch;
	margin: 2.2rem 0 0;
	color: rgba(242, 238, 228, .78);
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.92rem, 1.08vw, 1.08rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-live__deck {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 3rem;
	width: min(72rem, 90vw);
	margin-inline: auto;
	padding: 8rem 0;
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__deck {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__card {
	position: relative;
	width: 100%;
	min-height: 38rem;
	color: var(--live-ink);
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card {
	--live-card-x: 0vw;
	--live-card-y: 68vh;
	--live-card-rotation: 0deg;
	--live-card-scale: .88;
	--live-card-opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: calc(10 + var(--live-card-order, 0));
	width: min(69rem, 86vw);
	height: min(72svh, 47rem);
	min-height: 0;
	opacity: var(--live-card-opacity);
	transform:
		translate3d(calc(-50% + var(--live-card-x)), calc(-50% + var(--live-card-y)), 0)
		rotate(var(--live-card-rotation))
		scale(var(--live-card-scale));
	transform-origin: 50% 18%;
	will-change: transform, opacity;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__card:nth-child(1) { --live-card-order: 1; }
.dobrograd-immersive .dobrograd-live__card:nth-child(2) { --live-card-order: 2; }
.dobrograd-immersive .dobrograd-live__card:nth-child(3) { --live-card-order: 3; }
.dobrograd-immersive .dobrograd-live__card:nth-child(4) { --live-card-order: 4; }
.dobrograd-immersive .dobrograd-live__card:nth-child(5) { --live-card-order: 5; }
.dobrograd-immersive .dobrograd-live__card:nth-child(6) { --live-card-order: 6; }

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card[data-live-active] {
	pointer-events: auto;
}

.dobrograd-immersive .dobrograd-live__card-surface {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
	width: 100%;
	height: 100%;
	border-radius: 16px;
	background: rgba(239, 235, 222, .96);
	box-shadow: 0 2.2rem 5rem rgba(7, 12, 9, .34);
}

.dobrograd-immersive .dobrograd-live__card--2 .dobrograd-live__card-surface {
	background: rgba(225, 218, 198, .97);
}

.dobrograd-immersive .dobrograd-live__card--3 .dobrograd-live__card-surface {
	background: rgba(221, 228, 216, .97);
}

.dobrograd-immersive .dobrograd-live__card--4 .dobrograd-live__card-surface {
	background: rgba(226, 207, 174, .97);
}

.dobrograd-immersive .dobrograd-live__card--5 .dobrograd-live__card-surface {
	background: rgba(201, 211, 193, .97);
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-surface {
	grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr);
	overflow: visible;
	border: 1px solid rgba(229, 190, 113, .34);
	background:
		radial-gradient(circle at 18% 76%, rgba(191, 132, 58, .2), transparent 34%),
		linear-gradient(135deg, #101713 0%, #18221c 58%, #22281f 100%);
	color: #f5efe1;
	box-shadow: 0 2.4rem 6rem rgba(2, 7, 5, .52), 0 0 4rem rgba(185, 126, 50, .12);
}

.dobrograd-immersive .dobrograd-live__object {
	position: relative;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	overflow: visible;
}

.dobrograd-immersive .dobrograd-live__object span {
	position: absolute;
	right: 8%;
	bottom: 9%;
	left: 8%;
	height: 18%;
	border-radius: 50%;
	background: rgba(45, 53, 43, .23);
	filter: blur(1.6rem);
	transform: scaleX(.86);
}

.dobrograd-immersive .dobrograd-live__object img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 112%;
	height: 112%;
	max-width: none;
	object-fit: contain;
	filter: drop-shadow(0 1.5rem 1.2rem rgba(35, 42, 34, .2));
	transform: translate(-50%, -52%);
	transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-live__card--1 .dobrograd-live__object img {
	width: 118%;
	height: 118%;
	transform: translate(-48%, -54%);
}

.dobrograd-immersive .dobrograd-live__card--2 .dobrograd-live__object img {
	width: 108%;
	height: 108%;
	transform: translate(-48%, -52%);
}

.dobrograd-immersive .dobrograd-live__card--3 .dobrograd-live__object img {
	width: 116%;
	height: 116%;
	transform: translate(-47%, -52%);
}

.dobrograd-immersive .dobrograd-live__card--4 .dobrograd-live__object img {
	width: 116%;
	height: 116%;
	transform: translate(-47%, -52%);
}

.dobrograd-immersive .dobrograd-live__card--5 .dobrograd-live__object img {
	width: 116%;
	height: 116%;
	transform: translate(-47%, -53%);
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__object {
	z-index: 3;
	background: radial-gradient(circle at 48% 60%, rgba(201, 145, 69, .12), transparent 58%);
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__object span {
	background: rgba(213, 154, 74, .3);
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__object img {
	width: 128%;
	height: 138%;
	filter: drop-shadow(0 1.8rem 1.5rem rgba(0, 0, 0, .38));
	transform: translate(-55%, -61%);
}

.dobrograd-immersive .dobrograd-live__card[data-live-active] .dobrograd-live__object img {
	transform: translate(-49%, -55%) scale(1.025);
}

.dobrograd-immersive .dobrograd-live__card--try-buy[data-live-active] .dobrograd-live__object img {
	transform: translate(-55%, -66%) scale(1.025);
}

.dobrograd-immersive .dobrograd-live__card-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: clamp(2.1rem, 4vw, 4.5rem);
}

.dobrograd-immersive .dobrograd-live__card-copy h3 {
	max-width: 9.5ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(3.1rem, 5.4vw, 5rem);
	font-weight: 400;
	line-height: .86;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-live__card-note {
	order: 2;
	margin: 1.45rem 0 0;
	color: rgba(25, 33, 28, .62);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note) {
	order: 3;
	max-width: 52ch;
	margin: 1.2rem 0 0;
	color: rgba(25, 33, 28, .72);
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.82rem, .94vw, .96rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-live__card-copy a {
	order: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1rem 0 .8rem;
	border-top: 1px solid rgba(25, 33, 28, .28);
	border-bottom: 1px solid rgba(25, 33, 28, .28);
	color: var(--live-ink);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .68rem;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-live__card-copy a i {
	font-size: 1.15rem;
	font-style: normal;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-live__card-copy a:hover i,
.dobrograd-immersive .dobrograd-live__card-copy a:focus-visible i {
	transform: translate(.22rem, -.22rem);
}

.dobrograd-immersive .dobrograd-live__card-copy a:focus-visible {
	outline: 2px solid #765c36;
	outline-offset: .35rem;
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy {
	padding-right: clamp(2.2rem, 4.4vw, 5rem);
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy h3 {
	order: 1;
	max-width: 10ch;
	font-size: clamp(3rem, 4.8vw, 4.65rem);
	line-height: .9;
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-note {
	order: 0;
	margin: 0 0 1.15rem;
	color: #deb469;
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note) {
	order: 2;
	color: rgba(245, 239, 225, .7);
}

.dobrograd-immersive .dobrograd-live__facts {
	order: 3;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .45rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.dobrograd-immersive .dobrograd-live__facts li {
	display: grid;
	min-height: 3rem;
	place-items: center;
	padding: .55rem .45rem;
	border: 1px solid rgba(222, 180, 105, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .035);
	color: rgba(245, 239, 225, .84);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .62rem;
	letter-spacing: .04em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy a {
	order: 4;
	border-color: rgba(222, 180, 105, .34);
	color: #f5efe1;
}

.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy a:focus-visible {
	outline-color: #deb469;
}

.dobrograd-immersive .dobrograd-live__progress {
	position: absolute;
	right: 5vw;
	bottom: max(2.4rem, calc(env(safe-area-inset-bottom) + 1.5rem));
	left: 5vw;
	z-index: 30;
	height: 1px;
	background: rgba(242, 238, 228, .24);
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: #d9b476;
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-live__counter {
	position: absolute;
	right: 5vw;
	bottom: max(3.55rem, calc(env(safe-area-inset-bottom) + 2.7rem));
	z-index: 31;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	color: rgba(242, 238, 228, .74);
	font-family: outfit-c, Arial, sans-serif;
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-live__counter strong {
	color: var(--live-cream);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
	.dobrograd-immersive .dobrograd-live__intro {
		width: min(44rem, 86vw);
	}

	.dobrograd-immersive .dobrograd-live__card-copy {
		padding: 2.5rem;
	}

	.dobrograd-immersive .dobrograd-live__card-copy h3 {
		font-size: clamp(2.8rem, 6vw, 4rem);
	}
}

@media (min-width: 768px) and (max-width: 1100px) {
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card {
		width: 92vw;
	}

	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card--showcase {
		width: 94vw;
	}

	.dobrograd-immersive .dobrograd-business__card-surface {
		grid-template-columns: minmax(10rem, 26%) minmax(0, 74%);
	}

	.dobrograd-immersive .dobrograd-business__card-copy,
	.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__card-copy {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		column-gap: clamp(.9rem, 2vw, 1.3rem);
		padding: clamp(1.15rem, 2.2vw, 1.55rem);
	}

	.dobrograd-immersive .dobrograd-live__card-copy {
		padding: clamp(1.7rem, 3vw, 2.5rem);
	}

	.dobrograd-immersive .dobrograd-business__card-copy h3 {
		font-size: clamp(1.8rem, 4.3vw, 2.45rem);
	}

	.dobrograd-immersive .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note),
	.dobrograd-immersive .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note) {
		max-width: 36ch;
		font-size: clamp(.78rem, 1.15vw, .88rem);
		line-height: 1.46;
	}

	.dobrograd-immersive .dobrograd-business__description-full {
		display: none;
	}

	.dobrograd-immersive .dobrograd-business__description-mobile {
		display: block;
	}
}

@media (min-width: 768px) and (max-height: 780px) {
	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy {
		justify-content: center;
		padding: clamp(1.25rem, 2.5svh, 1.7rem) clamp(1.6rem, 3vw, 2.6rem);
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy h3 {
		font-size: clamp(2.8rem, 7.4svh, 3.6rem);
		line-height: .86;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-note {
		margin-bottom: .45rem;
		font-size: .62rem;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note) {
		margin-top: .65rem;
		font-size: .76rem;
		line-height: 1.4;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__facts {
		margin-top: .7rem;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__facts li {
		min-height: 2.35rem;
		padding: .38rem .35rem;
		font-size: .52rem;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy a {
		margin-top: .8rem;
		padding: .65rem 0 .55rem;
		font-size: .6rem;
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-live__forest-scene {
		width: max(110vw, 195.56svh);
	}

	.dobrograd-immersive .dobrograd-live__shade {
		background:
			linear-gradient(180deg, rgba(14, 20, 16, .42), rgba(14, 20, 16, .2) 45%, rgba(14, 20, 16, .76)),
			linear-gradient(90deg, rgba(14, 20, 16, .54), rgba(14, 20, 16, .12));
	}

	.dobrograd-immersive .dobrograd-live__intro {
		top: auto;
		left: 7vw;
		bottom: max(6.5rem, calc(env(safe-area-inset-bottom) + 5.5rem));
		width: 86vw;
	}

	.dobrograd-immersive .dobrograd-live__chapter {
		margin-bottom: .9rem;
	}

	.dobrograd-immersive .dobrograd-live__intro h2 {
		font-size: clamp(4rem, 17vw, 5.6rem);
		line-height: .78;
	}

	.dobrograd-immersive .dobrograd-live__intro > p:last-child {
		margin-top: 1.4rem;
		font-size: .88rem;
		line-height: 1.46;
	}

	.dobrograd-immersive .dobrograd-live__deck {
		width: 88vw;
		padding: 5rem 0;
	}

	.dobrograd-immersive .dobrograd-live__card {
		min-height: 41rem;
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card {
		width: 88vw;
		height: min(80svh, 43rem);
	}

	.dobrograd-immersive .dobrograd-live__card-surface {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(12rem, 42%) minmax(0, 58%);
	}

	.dobrograd-immersive .dobrograd-live__object {
		grid-row: 1;
	}

	.dobrograd-immersive .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--1 .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--2 .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--3 .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--4 .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--5 .dobrograd-live__object img,
	.dobrograd-immersive .dobrograd-live__card--6 .dobrograd-live__object img {
		width: 122%;
		height: 122%;
		transform: translate(-50%, -51%);
	}

	.dobrograd-immersive .dobrograd-live__card[data-live-active] .dobrograd-live__object img {
		transform: translate(-50%, -55%) scale(1.02);
	}

	.dobrograd-immersive .dobrograd-live__card-copy {
		justify-content: flex-start;
		padding: 1.4rem 1.55rem 1.5rem;
	}

	.dobrograd-immersive .dobrograd-live__card-copy h3 {
		max-width: 10.5ch;
		font-size: clamp(2.35rem, 10.7vw, 3.45rem);
		line-height: .86;
	}

	.dobrograd-immersive .dobrograd-live__card-note {
		margin-top: .8rem;
		font-size: .58rem;
	}

	.dobrograd-immersive .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note) {
		display: block;
		margin-top: .65rem;
		overflow: visible;
		font-size: .76rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .dobrograd-live__description-full,
	.dobrograd-immersive .dobrograd-business__description-full {
		display: none;
	}

	.dobrograd-immersive .dobrograd-live__description-mobile,
	.dobrograd-immersive .dobrograd-business__description-mobile {
		display: block;
	}

	.dobrograd-immersive .dobrograd-live__card-copy a {
		margin-top: auto;
		padding: .7rem 0 .55rem;
		font-size: .58rem;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-surface {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(11rem, 38%) minmax(0, 62%);
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__object img {
		width: 128%;
		height: 128%;
		transform: translate(-50%, -55%);
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy[data-live-active] .dobrograd-live__object img {
		transform: translate(-50%, -60%) scale(1.02);
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy {
		padding: 1.2rem 1.45rem 1.35rem;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-copy h3 {
		max-width: 12ch;
		font-size: clamp(2.1rem, 9.4vw, 3rem);
		line-height: .9;
	}

	.dobrograd-immersive .dobrograd-live__card--try-buy .dobrograd-live__card-note {
		margin-bottom: .55rem;
	}

	.dobrograd-immersive .dobrograd-live__facts {
		gap: .3rem;
		margin-top: .65rem;
	}

	.dobrograd-immersive .dobrograd-live__facts li {
		min-height: 2.25rem;
		padding: .4rem .3rem;
		font-size: .48rem;
	}

	.dobrograd-immersive .dobrograd-live__counter {
		right: 6vw;
		bottom: max(3rem, calc(env(safe-area-inset-bottom) + 2.4rem));
	}

	.dobrograd-immersive .dobrograd-live__progress {
		right: 6vw;
		bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.4rem));
		left: 6vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-live__backdrop {
		--live-shade-opacity: .58;
	}

	.dobrograd-immersive .dobrograd-live__day-cycle {
		--live-dawn-opacity: 0;
		--live-day-opacity: 1;
		--live-dusk-opacity: 0;
		--live-night-opacity: 0;
		--live-stars-opacity: 0;
		--live-cloud-opacity: .2;
		--live-cloud-warmth: 0;
	}

	.dobrograd-immersive .dobrograd-live__backdrop > img,
	.dobrograd-immersive .dobrograd-live__clouds {
		transform: none;
		will-change: auto;
	}

	.dobrograd-immersive .dobrograd-live__forest-scene {
		transform: translate3d(-50%, -50%, 0) scale(1.025);
		will-change: auto;
	}

	.dobrograd-immersive .dobrograd-live__forest-layer {
		transform: none;
		will-change: auto;
	}

	.dobrograd-immersive .dobrograd-live__sun,
	.dobrograd-immersive .dobrograd-live__sun-rays {
		display: none;
	}

	.dobrograd-immersive .dobrograd-live,
	.dobrograd-immersive .dobrograd-live.is-scroll-driven {
		min-height: 100svh;
	}

	.dobrograd-immersive .dobrograd-live__sticky {
		height: auto;
		overflow: visible;
	}

	.dobrograd-immersive .dobrograd-live__backdrop {
		position: absolute;
	}

	.dobrograd-immersive .dobrograd-live__intro {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		width: min(72rem, 88vw);
		margin-inline: auto;
		padding: 9rem 0 3rem;
		opacity: 1 !important;
		transform: none !important;
	}

	.dobrograd-immersive .dobrograd-live__deck {
		position: relative;
		display: grid;
		gap: 2rem;
		padding: 2rem 0 8rem;
	}

	.dobrograd-immersive .dobrograd-live__card,
	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		min-height: 38rem;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto;
	}

	.dobrograd-immersive .dobrograd-live__progress,
	.dobrograd-immersive .dobrograd-live__counter {
		display: none;
	}
}
/* Rest welcome: vertical image travel adapted from the approved endless-scroll reference. */
.dobrograd-immersive .dobrograd-rest-welcome {
	position: relative;
	z-index: 2;
	height: 250svh;
	margin-top: -100svh;
	background: var(--dobro-transition-surface);
	color: #f8f2e7;
}

.dobrograd-immersive .dobrograd-rest-welcome__sticky {
	position: sticky;
	top: 0;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background: var(--dobro-transition-surface);
}

.dobrograd-immersive .dobrograd-rest-welcome__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-rest-welcome__media,
.dobrograd-immersive .dobrograd-rest-welcome__media img,
.dobrograd-immersive .dobrograd-rest-welcome__veil {
	position: absolute;
	inset: 0;
}

.dobrograd-immersive .dobrograd-rest-welcome__media {
	z-index: 0;
	inset: -30% 0;
	overflow: hidden;
}

.dobrograd-immersive .dobrograd-rest-welcome__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transform: scale(1);
	transform-origin: 66% 50%;
}

.dobrograd-immersive .dobrograd-rest-welcome__veil {
	z-index: 1;
	background:
		radial-gradient(circle at 50% 48%, rgba(7, 11, 9, .08) 0%, rgba(7, 11, 9, .22) 46%, rgba(5, 8, 7, .68) 100%),
		linear-gradient(180deg, rgba(6, 10, 8, .24) 0%, transparent 34%, rgba(5, 8, 7, .46) 100%);
}

.dobrograd-immersive .dobrograd-rest-welcome__sticky::after {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: #e1d2bc;
	content: "";
	opacity: var(--rest-welcome-wash, 0);
	pointer-events: none;
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy-inner {
	width: min(88vw, 72rem);
	max-width: none;
	text-align: center;
	transform-origin: 50% 54%;
}

.dobrograd-immersive .dobrograd-rest-welcome[data-rest-welcome-motion="ready"] .dobrograd-rest-welcome__media img,
.dobrograd-immersive .dobrograd-rest-welcome[data-rest-welcome-motion="ready"] .dobrograd-rest-welcome__copy-inner,
.dobrograd-immersive .dobrograd-rest-welcome[data-rest-welcome-motion="ready"] .dobrograd-rest-welcome__next {
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy h2 {
	width: 100%;
	max-width: none;
	margin: 0;
	color: #f8f2e7;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(5rem, 9.6vw, 9rem);
	font-weight: 500;
	line-height: .72;
	letter-spacing: -.04em;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy h2 em {
	color: #dfb06f;
	font-style: normal;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy p {
	max-width: 54ch;
	margin: clamp(1.75rem, 4vh, 3rem) auto 0;
	color: rgba(248, 242, 231, .82);
	font-size: clamp(.95rem, 1.2vw, 1.12rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-rest-welcome__next {
	position: absolute;
	right: 6vw;
	bottom: 3rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .9rem;
	color: #f8f2e7;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest-welcome__next i {
	position: relative;
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid rgba(248, 242, 231, .52);
	border-radius: 50%;
}

.dobrograd-immersive .dobrograd-rest-welcome__next i::before,
.dobrograd-immersive .dobrograd-rest-welcome__next i::after {
	position: absolute;
	left: 50%;
	content: "";
	transform: translateX(-50%);
}

.dobrograd-immersive .dobrograd-rest-welcome__next i::before {
	top: .52rem;
	width: 1px;
	height: .65rem;
	background: currentColor;
}

.dobrograd-immersive .dobrograd-rest-welcome__next i::after {
	top: .88rem;
	width: .38rem;
	height: .38rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateX(-50%) rotate(45deg);
}

.dobrograd-immersive .dobrograd-rest-welcome__next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: .5rem;
}

/* Rest chapter: Tim Guignard-style progress cards driven by page scroll. */
.dobrograd-immersive .dobrograd-rest {
	--rest-card-width: clamp(18rem, 23vw, 23rem);
	position: relative;
	min-height: 100svh;
	overflow: clip;
	background: #d7c7ac;
	color: #18201c;
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-rest.is-scroll-driven {
	min-height: calc(100svh + var(--rest-scroll-distance, 410svh) + var(--rest-exit-distance, 0px));
	overflow: visible;
}

.dobrograd-immersive .dobrograd-rest__atmospheres,
.dobrograd-immersive .dobrograd-rest__atmosphere {
	position: absolute;
	inset: 0;
}

.dobrograd-immersive .dobrograd-rest__atmospheres {
	z-index: -2;
	overflow: hidden;
	background: linear-gradient(145deg, #d9cbb6, #a28b6d);
}

.dobrograd-immersive .dobrograd-rest__atmosphere {
	--rest-bg-opacity: 0;
	opacity: var(--rest-bg-opacity);
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-rest__atmosphere:first-child {
	--rest-bg-opacity: 1;
}

.dobrograd-immersive .dobrograd-rest__atmosphere::after {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 72% 34%, rgba(255, 248, 225, .5), transparent 25%),
		linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 45%, rgba(20, 27, 23, .12));
	content: "";
}

.dobrograd-immersive .dobrograd-rest__atmosphere--1 {
	background: linear-gradient(145deg, #e1d2bc 0%, #b99b73 58%, #806448 100%);
}

.dobrograd-immersive .dobrograd-rest__atmosphere--2 {
	background: linear-gradient(145deg, #d7ddcf 0%, #9ca991 58%, #667361 100%);
}

.dobrograd-immersive .dobrograd-rest__atmosphere--3 {
	background: linear-gradient(145deg, #d3dccb 0%, #91a78f 54%, #57705f 100%);
}

.dobrograd-immersive .dobrograd-rest__atmosphere--4 {
	background: linear-gradient(145deg, #ead6b4 0%, #d3a16d 56%, #a75d40 100%);
}

.dobrograd-immersive .dobrograd-rest__atmosphere--5 {
	background: linear-gradient(145deg, #d5dfdb 0%, #8daeb0 54%, #486e73 100%);
}

.dobrograd-immersive .dobrograd-rest__sticky {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
}

.dobrograd-immersive .dobrograd-rest.is-scroll-driven .dobrograd-rest__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
}

.dobrograd-immersive .dobrograd-rest__intro {
	position: absolute;
	top: clamp(3.5rem, 6.5vh, 6rem);
	left: 6vw;
	z-index: 5;
	display: grid;
	grid-template-columns: auto minmax(14rem, 30rem);
	gap: .7rem 2.25rem;
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-rest__chapter {
	grid-row: span 2;
	margin: .55rem 0 0;
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest__intro h2 {
	max-width: none;
	margin: 0;
	font-size: clamp(3.8rem, 6.2vw, 7.2rem);
	line-height: .78;
}

.dobrograd-immersive .dobrograd-rest__intro h2 em {
	color: currentColor;
}

.dobrograd-immersive .dobrograd-rest__intro > p:last-child {
	max-width: 28rem;
	margin: .55rem 0 0;
	color: rgba(24, 32, 28, .68);
	font-size: clamp(.82rem, 1.1vw, 1rem);
	line-height: 1.45;
}

.dobrograd-immersive .dobrograd-rest__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
}

.dobrograd-immersive .dobrograd-rest__viewport::-webkit-scrollbar {
	display: none;
}

.dobrograd-immersive .dobrograd-rest.is-scroll-driven .dobrograd-rest__viewport {
	overflow: hidden;
}

.dobrograd-immersive .dobrograd-rest__track {
	display: flex;
	align-items: center;
	gap: clamp(3.5rem, 8vw, 9rem);
	width: max-content;
	min-width: 100%;
	padding: clamp(6rem, 11vh, 8rem) calc((100vw - var(--rest-card-width)) / 2) clamp(4.5rem, 7vh, 6rem);
	will-change: transform;
}

.dobrograd-immersive .dobrograd-rest__card {
	--rest-card-scale: 1;
	--rest-card-opacity: 1;
	position: relative;
	z-index: 1;
	flex: 0 0 var(--rest-card-width);
	width: var(--rest-card-width);
	height: min(52svh, 35rem);
	min-height: 30rem;
	opacity: var(--rest-card-opacity);
	transform: scale(var(--rest-card-scale));
	transform-origin: center;
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"] {
	z-index: 4;
}

.dobrograd-immersive .dobrograd-rest__card::before {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 2rem;
	background: var(--rest-card-bg);
	box-shadow: 0 2.6rem 5rem rgba(25, 29, 24, .2), inset 0 1px rgba(255, 255, 255, .52);
	content: "";
}

.dobrograd-immersive .dobrograd-rest__card--1 {
	--rest-card-bg: linear-gradient(160deg, #f0e7d9, #c6a77b 70%, #a27b52);
}

.dobrograd-immersive .dobrograd-rest__card--2 {
	--rest-card-bg: linear-gradient(160deg, #eef0e8, #bdc9b4 67%, #8d9e83);
}

.dobrograd-immersive .dobrograd-rest__card--3 {
	--rest-card-bg: linear-gradient(160deg, #e7ede2, #afc0a9 65%, #7d967c);
}

.dobrograd-immersive .dobrograd-rest__card--4 {
	--rest-card-bg: linear-gradient(160deg, #f5e9d1, #e0bd83 64%, #c8784f);
}

.dobrograd-immersive .dobrograd-rest__card--5 {
	--rest-card-bg: linear-gradient(160deg, #e6efed, #abc8c7 64%, #70989c);
}

.dobrograd-immersive .dobrograd-rest__card-surface {
	position: relative;
	height: 100%;
}

.dobrograd-immersive .dobrograd-rest__card-index {
	position: absolute;
	top: 1.25rem;
	right: 1.4rem;
	z-index: 3;
	color: rgba(24, 32, 28, .46);
	font-size: .66rem;
	letter-spacing: .16em;
}

.dobrograd-immersive .dobrograd-rest__object {
	position: absolute;
	top: -11%;
	left: 50%;
	z-index: 2;
	width: 142%;
	height: 58%;
	transform: translate3d(calc(-50% + var(--rest-object-x, 0px)), var(--rest-object-y, 0px), 0) rotate(var(--rest-object-rotate, -8deg)) scale(var(--rest-object-scale, 1.08));
	transform-origin: 52% 66%;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-rest__card--2 .dobrograd-rest__object {
	top: -13%;
	width: 150%;
	height: 64%;
}

.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__object {
	/* The bike render fills its box to the bottom edge (the plank shelf), so
	 * this object sits higher than the others: its shelf must clear the
	 * eyebrow line of the copy instead of lying across it. */
	top: -15%;
	width: 148%;
	height: 58%;
}

.dobrograd-immersive .dobrograd-rest__card--4 .dobrograd-rest__object {
	top: -12%;
	width: 150%;
	height: 56%;
}

.dobrograd-immersive .dobrograd-rest__card--5 .dobrograd-rest__object {
	top: -14%;
	width: 150%;
	height: 60%;
}

.dobrograd-immersive .dobrograd-rest__object img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 1.4rem 1.25rem rgba(24, 25, 21, .24));
	user-select: none;
}

.dobrograd-immersive .dobrograd-rest__object-shadow {
	position: absolute;
	left: 50%;
	bottom: 5%;
	z-index: 1;
	width: 42%;
	height: 8%;
	border-radius: 50%;
	background: rgba(17, 19, 16, .5);
	filter: blur(1.15rem);
	transform: translate3d(calc(-50% + var(--rest-shadow-x, 0px)), 0, 0);
	will-change: transform;
}

.dobrograd-immersive .dobrograd-rest__card-copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: grid;
	padding: 1.6rem;
}

.dobrograd-immersive [data-rest-text] {
	overflow: hidden;
}

.dobrograd-immersive [data-rest-text] > span {
	display: block;
	transform: translate3d(0, var(--rest-text-y, 0px), 0);
	will-change: transform;
}

.dobrograd-immersive .dobrograd-rest__card-eyebrow {
	margin: 0 0 .65rem;
	color: rgba(24, 32, 28, .55);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest__card h3 {
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(2.25rem, 3.6vw, 3.6rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.045em;
}

.dobrograd-immersive .dobrograd-rest__card-note {
	margin: .8rem 0 1.25rem;
	color: rgba(24, 32, 28, .64);
	font-size: .78rem;
	line-height: 1.35;
}

.dobrograd-immersive .dobrograd-rest__open {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: .85rem 0 0;
	border: 0;
	border-top: 1px solid rgba(24, 32, 28, .26);
	background: none;
	color: inherit;
	font: inherit;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.dobrograd-immersive .dobrograd-rest__open i {
	font-size: 1.1rem;
	font-style: normal;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-rest__open:hover i,
.dobrograd-immersive .dobrograd-rest__open:focus-visible i {
	transform: translate(.22rem, -.22rem);
}

.dobrograd-immersive .dobrograd-rest__open:focus-visible,
.dobrograd-immersive .dobrograd-rest__dialog-close:focus-visible,
.dobrograd-immersive .dobrograd-rest__dialog a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: .4rem;
}

.dobrograd-immersive .dobrograd-rest__meter {
	position: absolute;
	left: 6vw;
	right: 6vw;
	bottom: 2.7rem;
	height: 1px;
	overflow: hidden;
	background: rgba(24, 32, 28, .22);
}

.dobrograd-immersive .dobrograd-rest__meter span {
	display: block;
	width: 100%;
	height: 100%;
	background: #18201c;
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

.dobrograd-immersive .dobrograd-rest__hint {
	position: absolute;
	right: 6vw;
	bottom: 3.2rem;
	display: flex;
	gap: 1.25rem;
	margin: 0 0 .5rem;
	font-size: .6rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest__hint strong {
	font-weight: 500;
}

.dobrograd-immersive .dobrograd-rest__dialog {
	position: fixed;
	inset: 0;
	width: min(72rem, calc(100vw - 2rem));
	max-width: none;
	max-height: min(48rem, calc(100svh - 2rem));
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 2rem;
	background: #18201c;
	color: #f5f0e6;
	box-shadow: 0 3rem 9rem rgba(10, 13, 11, .55);
}

.dobrograd-immersive .dobrograd-rest__dialog::backdrop {
	background: linear-gradient(180deg, rgba(10, 13, 11, .38), rgba(8, 10, 9, .84));
	backdrop-filter: none;
}

.dobrograd-immersive .dobrograd-rest__dialog-shell {
	position: relative;
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	min-height: min(44rem, calc(100svh - 2rem));
}

.dobrograd-immersive .dobrograd-rest__dialog-close {
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	z-index: 4;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(24, 32, 28, .28);
	color: white;
	cursor: pointer;
}

.dobrograd-immersive .dobrograd-rest__dialog-close::before,
.dobrograd-immersive .dobrograd-rest__dialog-close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.15rem;
	height: 1px;
	background: currentColor;
	content: "";
}

.dobrograd-immersive .dobrograd-rest__dialog-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.dobrograd-immersive .dobrograd-rest__dialog-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.dobrograd-immersive .dobrograd-rest__dialog-visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100%;
	overflow: hidden;
	background: radial-gradient(circle at 65% 30%, rgba(231, 183, 106, .34), transparent 35%), linear-gradient(145deg, #303d35, #101512);
}

.dobrograd-immersive .dobrograd-rest__dialog-visual img {
	width: 118%;
	height: 88%;
	object-fit: contain;
	filter: drop-shadow(0 2rem 2.5rem rgba(0, 0, 0, .28));
}

.dobrograd-immersive .dobrograd-rest__dialog-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 6rem);
}

.dobrograd-immersive .dobrograd-rest__dialog-copy > p:first-child {
	margin: 0 0 1.2rem;
	color: #e7b76a;
	font-size: .67rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest__dialog-copy h2 {
	max-width: 8ch;
	margin: 0;
	font-size: clamp(3.6rem, 6.5vw, 6.5rem);
	line-height: .8;
}

.dobrograd-immersive .dobrograd-rest__dialog-description {
	margin: 2rem 0 0;
	color: rgba(245, 240, 230, .7);
	font-size: 1rem;
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-rest__dialog-copy ul {
	display: grid;
	gap: .75rem;
	margin: 2rem 0 2.5rem;
	padding: 0;
	list-style: none;
}

.dobrograd-immersive .dobrograd-rest__dialog-copy li {
	padding-top: .75rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-rest__dialog-copy a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	color: inherit;
	font-size: .72rem;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}

html.rest-dialog-open {
	overflow: hidden;
}

@media (max-width: 1100px) {
	.dobrograd-immersive .dobrograd-rest__dialog {
		width: min(46rem, calc(100vw - 1rem));
		max-height: calc(100svh - 1rem);
	}

	.dobrograd-immersive .dobrograd-rest__dialog-shell {
		grid-template-columns: 1fr;
		grid-template-rows: clamp(18rem, 40svh, 30rem) auto;
		min-height: 0;
		max-height: calc(100svh - 1rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-visual {
		min-height: 0;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-visual::after {
		position: absolute;
		inset: auto 0 0;
		height: 4rem;
		background: linear-gradient(180deg, transparent, #18201c);
		content: "";
	}

	.dobrograd-immersive .dobrograd-rest__dialog-visual img {
		width: min(112%, 48rem);
		height: 100%;
		object-position: center bottom;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-copy {
		position: relative;
		z-index: 2;
		justify-content: flex-start;
		padding: clamp(2.3rem, 6vw, 4rem);
		background: #18201c;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-copy h2 {
		max-width: 9ch;
		font-size: clamp(3.5rem, 10vw, 6rem);
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-rest-welcome {
		height: 230svh;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__media {
		inset: -24% 0;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__media img {
		object-position: 65% center;
		transform-origin: 68% 50%;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__veil {
		background:
			radial-gradient(circle at 50% 44%, rgba(8, 13, 10, .08) 0%, rgba(8, 13, 10, .26) 50%, rgba(8, 13, 10, .76) 100%),
			linear-gradient(180deg, rgba(8, 13, 10, .2) 0%, transparent 35%, rgba(8, 13, 10, .62) 100%);
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy-inner {
		width: 86vw;
		max-width: none;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy h2 {
		font-size: clamp(4.15rem, 18vw, 6rem);
		line-height: .75;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy p {
		max-width: 34ch;
		margin: 1.5rem auto 0;
		font-size: .92rem;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__next {
		left: 7vw;
		right: auto;
		bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
	}

	.dobrograd-immersive .dobrograd-rest {
		--rest-card-width: min(78vw, 22rem);
	}

	.dobrograd-immersive .dobrograd-rest__intro {
		top: max(4.25rem, calc(env(safe-area-inset-top) + 3.25rem));
		left: 7vw;
		right: 7vw;
		display: block;
	}

	.dobrograd-immersive .dobrograd-rest__chapter {
		margin: 0 0 .8rem;
	}

	.dobrograd-immersive .dobrograd-rest__intro h2 {
		font-size: clamp(3.6rem, 15vw, 5.8rem);
	}

	.dobrograd-immersive .dobrograd-rest__intro > p:last-child {
		display: none;
	}

	.dobrograd-immersive .dobrograd-rest__track {
		gap: 18vw;
		padding-top: clamp(5.75rem, 11vh, 7rem);
		padding-bottom: 4.5rem;
	}

	.dobrograd-immersive .dobrograd-rest__card {
		height: min(54svh, 32rem);
		min-height: 27rem;
	}

	.dobrograd-immersive .dobrograd-rest__card h3 {
		font-size: 2.7rem;
	}

	.dobrograd-immersive .dobrograd-rest__meter {
		left: 7vw;
		right: 7vw;
		bottom: max(1.6rem, env(safe-area-inset-bottom));
	}

	.dobrograd-immersive .dobrograd-rest__hint {
		right: 7vw;
		bottom: max(2.1rem, calc(env(safe-area-inset-bottom) + .5rem));
	}

	.dobrograd-immersive .dobrograd-rest__hint > span {
		display: none;
	}

	.dobrograd-immersive .dobrograd-rest__dialog {
		width: calc(100vw - 1rem);
		max-height: calc(100svh - 1rem);
		border-radius: 1.5rem;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-shell {
		grid-template-rows: minmax(16rem, 42svh) auto;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-copy {
		padding: 2.3rem 1.5rem 2rem;
	}

	.dobrograd-immersive .dobrograd-rest__dialog-copy h2 {
		font-size: clamp(3.5rem, 15vw, 5.4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-rest-welcome {
		height: 100svh;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__frame {
		clip-path: inset(0 round 0) !important;
		filter: none;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__media img,
	.dobrograd-immersive .dobrograd-rest-welcome__copy-inner {
		transform: none !important;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy,
	.dobrograd-immersive .dobrograd-rest-welcome__next {
		opacity: 1 !important;
	}

	.dobrograd-immersive .dobrograd-rest__sticky {
		min-height: 100svh;
	}

	.dobrograd-immersive .dobrograd-rest__track,
	.dobrograd-immersive .dobrograd-rest__card,
	.dobrograd-immersive .dobrograd-rest__object,
	.dobrograd-immersive [data-rest-text] > span {
		transform: none !important;
	}

	.dobrograd-immersive .dobrograd-rest__card {
		opacity: 1 !important;
	}
}

/* Final cascade overrides for the unified rest stage. */
.dobrograd-immersive .dobrograd-rest {
	--rest-deck-opacity: 0;
	z-index: 2;
	margin-top: -100svh;
	background: var(--dobro-transition-surface);
}

.dobrograd-immersive .dobrograd-rest-welcome {
	position: absolute;
	inset: 0;
	z-index: 20;
	width: 100%;
	height: auto;
	margin: 0;
	background: var(--dobro-transition-surface);
	pointer-events: none;
	transition: visibility 0s linear .08s;
	will-change: opacity;
}

.dobrograd-immersive .dobrograd-rest-welcome__frame {
	inset: var(--rest-welcome-clip, 0%);
	border-radius: calc(var(--rest-welcome-wash, 0) * 16px);
	clip-path: inset(0 round calc(var(--rest-welcome-wash, 0) * 16px));
	/* box-shadow removed: the frame is clip-path'ed to its own box, so an
	 * outer shadow was never visible but was repainted on every scroll frame. */
	will-change: inset, opacity, clip-path;
}

.dobrograd-immersive .dobrograd-rest__intro,
.dobrograd-immersive .dobrograd-rest__viewport,
.dobrograd-immersive .dobrograd-rest__meter,
.dobrograd-immersive .dobrograd-rest__hint {
	opacity: var(--rest-deck-opacity);
}

.dobrograd-immersive .dobrograd-rest__intro {
	will-change: transform, opacity;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) {
	--rest-deck-opacity: 1;
	margin-top: 0;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest__sticky {
	display: block;
	height: auto;
	overflow: visible;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest-welcome {
	position: relative;
	height: 100svh;
}

.dobrograd-immersive .dobrograd-rest:not(.is-scroll-driven) .dobrograd-rest__intro {
	position: relative;
	top: auto;
	left: auto;
	width: min(72rem, 88vw);
	margin-inline: auto;
	padding-top: 6rem;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-rest-welcome {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-rest {
		--rest-deck-opacity: 1;
		margin-top: 0;
	}

	.dobrograd-immersive .dobrograd-rest-welcome {
		position: relative;
		height: 100svh;
	}
}

/* Scroll-driven cards: the parent owns the interpolation.  Do not let the
 * image's discrete active-state transition fight the continuous scroll state. */
.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__object img,
.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__object img,
.dobrograd-immersive .dobrograd-rest.is-scroll-driven .dobrograd-rest__object img {
	transition: none;
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card[data-business-active] .dobrograd-business__object img {
	transform: translate(-53%, -51%) scale(.94);
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card--showcase[data-business-active] .dobrograd-business__object img {
	transform: translate(-53%, -52%) scale(.98);
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card[data-live-active] .dobrograd-live__object img {
	transform: translate(-50%, -52%);
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card--try-buy[data-live-active] .dobrograd-live__object img {
	transform: translate(-55%, -61%);
}

/* The object is allowed to float beyond its cell; copy stays above it so
 * headings and CTAs remain readable when the image crosses the grid seam. */
.dobrograd-immersive .dobrograd-business__object,
.dobrograd-immersive .dobrograd-live__object {
	z-index: 3;
}

.dobrograd-immersive .dobrograd-business__card-copy,
.dobrograd-immersive .dobrograd-live__card-copy {
	z-index: 4;
}

.dobrograd-immersive .dobrograd-business__card--showcase .dobrograd-business__object {
	clip-path: none;
}

.dobrograd-immersive .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note) {
	min-width: 0;
	overflow: visible;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card[data-business-active] .dobrograd-business__object img {
		transform: translate(-50%, -52%) scale(.96);
	}

	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card--showcase[data-business-active] .dobrograd-business__object img {
		transform: translate(-50%, -54%) scale(1);
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card[data-live-active] .dobrograd-live__object img {
		transform: translate(-50%, -51%);
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card--try-buy[data-live-active] .dobrograd-live__object img {
		transform: translate(-50%, -55%);
	}
}

/* Chapter arrivals.  The next chapter is a separate visual panel, not merely
 * the next background in document flow.  Its scene rises from the lower edge
 * while the preceding chapter remains visible behind it. */
.dobrograd-immersive .dobrograd-live.is-scroll-driven,
.dobrograd-immersive .dobrograd-business.is-scroll-driven {
  position: relative;
  z-index: 4;
  /* The scene enters during 58vh of scrolling, but it is placed one whole
   * viewport above in document flow. This leaves the outgoing final card
   * genuinely pinned behind the panel for the entire cover transition. */
  margin-top: -100svh;
  background: transparent;
}

/* Entry and exit passages are part of each chapter's own scroll geometry:
 * the underlying final card stays fixed until the rising panel covers it. */
.dobrograd-immersive .dobrograd-live.is-scroll-driven {
	min-height: calc(100svh + var(--live-entry-distance, 0px) + var(--live-scroll-distance, 5760px) + var(--live-exit-distance, 0px));
}

.dobrograd-immersive .dobrograd-business.is-scroll-driven {
	--business-finale-hold-distance: 100svh;
	min-height: calc(100svh + var(--business-entry-distance, 0px) + var(--business-scroll-distance, 4428px) + var(--business-finale-hold-distance));
}

.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__sticky,
.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__sticky {
	background: transparent;
	overflow: visible;
}

.dobrograd-immersive .dobrograd-live__arrival,
.dobrograd-immersive .dobrograd-business__arrival {
	position: absolute;
	inset: 0;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.dobrograd-immersive .dobrograd-live__arrival {
	background: #1d251f;
}

.dobrograd-immersive .dobrograd-business__arrival {
	background: #151816;
}

.dobrograd-immersive .dobrograd-live.has-chapter-arrival .dobrograd-live__arrival,
.dobrograd-immersive .dobrograd-business.has-chapter-arrival .dobrograd-business__arrival {
	border-radius: 0;
	box-shadow: 0 -1.65rem 4rem rgba(6, 11, 8, .34), 0 -1px 0 rgba(242, 237, 225, .2);
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-live.has-chapter-arrival .dobrograd-live__arrival,
	.dobrograd-immersive .dobrograd-business.has-chapter-arrival .dobrograd-business__arrival {
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-live.is-scroll-driven,
	.dobrograd-immersive .dobrograd-business.is-scroll-driven {
		margin-top: 0;
	}

	.dobrograd-immersive .dobrograd-live__arrival,
	.dobrograd-immersive .dobrograd-business__arrival {
		position: relative;
		inset: auto;
		min-height: 100svh;
		overflow: visible;
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__arrival,
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__arrival {
		border-radius: 0;
		box-shadow: none;
	}
}

/* The final sheet enters during the business chapter's dedicated 100svh hold.
 * The last business card therefore stays pinned while this sibling covers it.
 * No wheel interception or snap is used: the motion remains direct and fully
 * reversible in both directions. */
.dobrograd-immersive .dobrograd-finale {
	position: relative;
	z-index: 30;
	margin-top: -100svh;
	padding-top: 0;
	overflow: hidden;
	color: #17231b;
	background: transparent;
}

.dobrograd-immersive .dobrograd-finale__curtain {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 100svh;
	padding: clamp(4.5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 9rem) clamp(4.5rem, 8vw, 7rem);
	overflow: hidden;
	border-radius: 0;
	box-shadow: 0 -1.5rem 4.5rem rgba(6, 15, 9, .28);
	background:
		linear-gradient(90deg, rgba(41, 58, 43, .08) 1px, transparent 1px) 0 0 / clamp(5rem, 12vw, 13rem) 100%,
		linear-gradient(180deg, #fbfaf6 0%, #eeede5 100%);
}

.dobrograd-immersive .dobrograd-finale__curtain::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: '';
	opacity: .5;
	background:
		linear-gradient(135deg, transparent 0 46%, rgba(29, 47, 33, .11) 46.1% 46.28%, transparent 46.38%),
		repeating-linear-gradient(0deg, transparent 0 4.4rem, rgba(29, 47, 33, .045) 4.45rem 4.52rem);
}

.dobrograd-immersive .dobrograd-finale__curtain::after {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	content: '';
	background: rgba(21, 35, 27, .45);
}

.dobrograd-immersive .dobrograd-finale__glow {
	position: absolute;
	z-index: -1;
	right: clamp(-16rem, -7vw, -5rem);
	top: clamp(-12rem, -5vw, -4rem);
	width: clamp(23rem, 46vw, 52rem);
	aspect-ratio: 1;
	border: 1px solid rgba(81, 108, 80, .24);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.35rem rgba(137, 160, 118, .09), 0 1.25rem 4rem rgba(104, 121, 87, .13);
	background: rgba(179, 194, 151, .18);
}

.dobrograd-immersive .dobrograd-finale__content {
	position: relative;
	z-index: 1;
	max-width: 68rem;
}

.dobrograd-immersive .dobrograd-finale__eyebrow {
	margin: 0 0 1.25rem;
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.72rem, 1.05vw, .95rem);
	font-weight: 600;
	letter-spacing: .17em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #5c7057;
}

.dobrograd-immersive .dobrograd-finale h2 {
	max-width: 12ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(3.25rem, 8vw, 8.5rem);
	font-weight: 500;
	letter-spacing: -.055em;
	line-height: .84;
	color: #17231b;
}

.dobrograd-immersive .dobrograd-finale h2 em {
	font-style: normal;
	color: #71845d;
}

.dobrograd-immersive .dobrograd-finale__lead {
	max-width: 38rem;
	margin: clamp(1.7rem, 3vw, 3rem) 0 0;
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(1rem, 1.35vw, 1.35rem);
	line-height: 1.43;
	color: #48564a;
}

.dobrograd-immersive .dobrograd-finale__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 78rem;
	margin-top: clamp(2.5rem, 5.5vw, 5.5rem);
	border-top: 1px solid #b7c0b2;
}

.dobrograd-immersive .dobrograd-finale__actions a {
	display: flex;
	align-items: center;
	gap: .85rem;
	min-height: 4.5rem;
	padding: 1rem 1.25rem 1rem 0;
	border-bottom: 1px solid #c5cdc1;
	color: #17231b;
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.82rem, 1.08vw, 1rem);
	font-weight: 600;
	letter-spacing: .035em;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .22s ease, transform .22s ease, background-color .22s ease;
}

.dobrograd-immersive .dobrograd-finale__actions a + a {
	padding-left: 1.5rem;
	border-left: 1px solid #c5cdc1;
}

.dobrograd-immersive .dobrograd-finale__actions a span {
	color: #71845d;
	font-size: .73em;
	letter-spacing: .14em;
}

.dobrograd-immersive .dobrograd-finale__actions a i,
.dobrograd-immersive .dobrograd-finale__footer i {
	margin-left: auto;
	font-style: normal;
	font-size: 1.3em;
	font-weight: 400;
}

.dobrograd-immersive .dobrograd-finale__actions a:hover,
.dobrograd-immersive .dobrograd-finale__actions a:focus-visible {
	transform: translateX(.45rem);
	color: #4d6346;
	background: rgba(113, 132, 93, .08);
}

.dobrograd-immersive .dobrograd-finale__footer {
	display: grid;
	grid-template-columns: minmax(13rem, 1.15fr) minmax(12rem, 1fr) minmax(13rem, 1fr);
	gap: clamp(1.5rem, 4vw, 5rem);
	align-items: end;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 7vw, 9rem);
	background: #fcfbf7;
	border-top: 1px solid #c5cdc1;
}

.dobrograd-immersive .dobrograd-finale__brand {
	display: grid;
	gap: .3rem;
	width: max-content;
	color: #17231b;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(2.1rem, 3.5vw, 3.75rem);
	font-weight: 500;
	letter-spacing: -.05em;
	line-height: .8;
	text-decoration: none;
}

.dobrograd-immersive .dobrograd-finale__brand span {
	font-family: outfit-c, Arial, sans-serif;
	font-size: .27em;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1;
	text-transform: uppercase;
	color: #71845d;
}

.dobrograd-immersive .dobrograd-finale__footer > p {
	max-width: 18rem;
	margin: 0;
	font-family: outfit-c, Arial, sans-serif;
	font-size: .9rem;
	line-height: 1.35;
	color: #59645a;
}

.dobrograd-immersive .dobrograd-finale__footer nav {
	display: grid;
	gap: .8rem;
}

.dobrograd-immersive .dobrograd-finale__footer nav a {
	display: flex;
	align-items: center;
	padding-bottom: .7rem;
	border-bottom: 1px solid #c5cdc1;
	color: #17231b;
	font-family: outfit-c, Arial, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .11em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

@media (max-width: 800px) {
	.dobrograd-immersive .dobrograd-finale {
		margin-top: -100svh;
		padding-top: 0;
	}

	.dobrograd-immersive .dobrograd-finale__curtain {
		min-height: 100svh;
		padding-top: 7rem;
	}

	.dobrograd-immersive .dobrograd-finale__glow {
		top: -6rem;
		right: -11rem;
		width: 29rem;
	}

	.dobrograd-immersive .dobrograd-finale__actions,
	.dobrograd-immersive .dobrograd-finale__footer {
		grid-template-columns: 1fr;
	}

	.dobrograd-immersive .dobrograd-finale__actions a + a {
		padding-left: 0;
		border-left: 0;
	}

	.dobrograd-immersive .dobrograd-finale__footer {
		gap: 2.25rem;
	}
}

/* Narrative layer: the existing chapters stay intact, while these surfaces make their relationship legible. */
.dobrograd-immersive [data-dobrograd-story-intro],
.dobrograd-immersive [data-dobrograd-live-intro],
.dobrograd-immersive [data-dobrograd-business-intro] {
	position: relative;
	z-index: 8;
}

.dobrograd-immersive .dobrograd-story-hero {
	position: absolute;
	left: var(--dobro-gutter);
	bottom: clamp(4rem, 10svh, 7.5rem);
	width: min(39rem, 76vw);
	color: var(--dobro-cream);
	pointer-events: auto;
	padding-left: clamp(1rem, 2.2vw, 2.2rem);
	filter: drop-shadow(0 1rem 2.5rem rgba(5, 16, 14, .18));
}

.dobrograd-immersive .dobrograd-story-hero::before {
	position: absolute;
	top: .15rem;
	bottom: .15rem;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, var(--dobro-amber), rgba(216, 167, 97, .08));
	content: '';
}

.dobrograd-immersive .dobrograd-story-hero__eyebrow,
.dobrograd-immersive .dg-map__eyebrow,
.dobrograd-immersive .dobrograd-rest-welcome__chapter,
.dobrograd-immersive .dobrograd-story-bridge__chapter {
	margin: 0;
	font-family: var(--dobro-ui);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-story-hero__eyebrow,
.dobrograd-immersive .dg-map__eyebrow,
.dobrograd-immersive .dobrograd-rest-welcome__chapter {
	color: var(--dobro-amber);
}

.dobrograd-immersive .dobrograd-story-hero h2 {
	margin: 1rem 0 0;
	font-family: raleway-c, Arial, sans-serif;
	font-size: clamp(3.2rem, 7.1vw, 7.4rem);
	font-weight: 500;
	letter-spacing: -.065em;
	line-height: .86;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-story-hero h2 em {
	font-style: normal;
	color: var(--dobro-moss);
}

.dobrograd-immersive .dobrograd-story-hero__lead {
	max-width: 31rem;
	margin: 1.55rem 0 0;
	font-family: var(--dobro-ui);
	font-size: var(--dobro-body-size);
	font-weight: 450;
	line-height: 1.5;
	text-wrap: balance;
}

.dobrograd-immersive .dobrograd-story-hero__action,
.dobrograd-immersive .dg-map__action,
.dobrograd-immersive .dobrograd-finale__proof {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	margin-top: 1.6rem;
	padding: .78rem 1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--dobro-ui);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.dobrograd-immersive .dobrograd-story-hero__action {
	color: var(--dobro-cream);
	background: rgba(13, 24, 21, .32);
	backdrop-filter: blur(12px);
}

.dobrograd-immersive .dobrograd-story-hero__action:hover,
.dobrograd-immersive .dobrograd-story-hero__action:focus-visible {
	color: var(--dobro-deep);
	background: var(--dobro-cream);
	transform: translateY(-2px);
}

.dobrograd-immersive .dobrograd-story-hero__action i,
.dobrograd-immersive .dg-map__action i,
.dobrograd-immersive .dobrograd-finale__proof i {
	font-size: 1rem;
	font-style: normal;
}

.dobrograd-immersive .dobrograd-story-hero__scroll {
	position: absolute;
	right: var(--dobro-gutter);
	bottom: 2.2rem;
	z-index: 8;
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 0;
	color: rgba(247, 244, 236, .72);
	font-family: var(--dobro-ui);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	transform: rotate(-90deg) translateX(100%);
	transform-origin: right bottom;
}

.dobrograd-immersive .dobrograd-story-hero__scroll i {
	display: block;
	width: 3rem;
	height: 1px;
	background: var(--dobro-amber);
}

.dobrograd-immersive .dg-map__eyebrow {
	margin-bottom: 1rem;
}

.dobrograd-immersive .dg-map__quote {
	max-width: 25rem;
	margin: 1.4rem 0 0;
	padding-left: 0;
	border-left: 0;
	color: rgba(244, 239, 229, .9);
	font-family: raleway-c, Arial, sans-serif;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
}

/* The copy is the user's handrail through the dark map animation. */
.dobrograd-immersive .dg-map__copy {
	z-index: 6;
}

.dobrograd-immersive .dg-map__action {
	color: var(--dobro-cream);
}

.dobrograd-immersive .dg-map__action:hover,
.dobrograd-immersive .dg-map__action:focus-visible,
.dobrograd-immersive .dobrograd-finale__proof:hover,
.dobrograd-immersive .dobrograd-finale__proof:focus-visible {
	color: var(--dobro-deep);
	background: var(--dobro-cream);
	transform: translateY(-2px);
}

.dobrograd-immersive .dobrograd-rest-welcome__chapter {
	margin-bottom: 1rem;
}

.dobrograd-immersive .dobrograd-finale__proof {
	margin-top: 1.2rem;
	color: var(--dobro-amber);
}

/* The card is one editorial object: one message, one action, one visual exit. */
.dobrograd-immersive .dobrograd-rest__card-copy {
	padding: clamp(1.35rem, 3vw, 2.35rem);
}

.dobrograd-immersive .dobrograd-rest__card-eyebrow {
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.62rem, .85vw, .76rem);
	letter-spacing: .16em;
}

.dobrograd-immersive .dobrograd-rest__card h3 {
	max-width: 10ch;
	font-family: raleway-c, Arial, sans-serif;
	font-size: clamp(2.45rem, 4.15vw, 4.2rem);
	font-weight: 500;
	letter-spacing: -.065em;
	line-height: .88;
}

.dobrograd-immersive .dobrograd-rest__card-note {
	max-width: 22rem;
	margin: 1rem 0 1.35rem;
	font-family: outfit-c, Arial, sans-serif;
	font-size: clamp(.82rem, 1vw, .98rem);
	line-height: 1.35;
}

.dobrograd-immersive .dobrograd-rest__open {
	min-height: 2.6rem;
	margin-top: .15rem;
	text-decoration: none;
}

.dobrograd-immersive .dobrograd-rest__open:focus-visible {
	outline-offset: .3rem;
}

.dobrograd-immersive .dobrograd-finale__proof:hover,
.dobrograd-immersive .dobrograd-finale__proof:focus-visible {
	color: var(--dobro-deep);
	background: var(--dobro-amber);
}

@media (max-width: 767px) {
	/* On a phone the map is an orientation beat. Keep the copy compact and
	 * left-weighted so the city drawing remains visible beside and below it. */
	.dobrograd-immersive .dg-map__copy {
		top: max(9.5rem, calc(env(safe-area-inset-top) + 8rem));
		left: 7vw;
		right: auto;
		width: min(20rem, 54vw);
		max-width: none;
		margin: 0;
		text-align: left;
	}

	.dobrograd-immersive .dg-map__copy h2 {
		max-width: 7ch;
		margin-inline: 0;
		font-size: clamp(3rem, 11.5vw, 4.7rem);
		line-height: .84;
	}

	.dobrograd-immersive .dg-map__copy p {
		max-width: 19rem;
		margin: .9rem 0 0;
		font-size: .82rem;
		line-height: 1.38;
	}

	.dobrograd-immersive .dobrograd-live__intro {
		top: max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem));
		bottom: auto;
		width: 86vw;
	}

	.dobrograd-immersive .dobrograd-live__intro h2 {
		max-width: 10ch;
		font-size: clamp(3rem, 12vw, 4.7rem);
		line-height: .84;
	}

	.dobrograd-immersive .dobrograd-live__sedov {
		max-width: 30ch;
		margin: .9rem 0 0;
		font-family: raleway-c, Arial, sans-serif;
		font-size: .93rem;
		line-height: 1.25;
	}

	.dobrograd-immersive .dobrograd-live__intro > p:last-child {
		max-width: 34ch;
		margin-top: .8rem;
		font-size: .82rem;
		line-height: 1.4;
	}

	.dobrograd-immersive .dobrograd-story-hero {
		left: 7vw;
		right: 7vw;
		bottom: 8svh;
		width: auto;
		padding-left: 1rem;
	}

	.dobrograd-immersive .dobrograd-story-hero h2 {
		font-size: clamp(2.9rem, 13.5vw, 4.9rem);
	}

	.dobrograd-immersive .dobrograd-story-hero__lead {
		max-width: 26rem;
		font-size: .94rem;
	}

	.dobrograd-immersive .dg-map__quote {
		font-size: 1.04rem;
	}

	.dobrograd-immersive .dobrograd-rest__card h3 {
		max-width: 8ch;
		font-size: clamp(2.1rem, 8.2vw, 3.45rem);
		line-height: .9;
	}

	.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__object {
		top: -8%;
		width: 134%;
		height: 52%;
	}

	.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__card-copy {
		background: linear-gradient(180deg, rgba(231, 237, 226, 0) 0%, rgba(231, 237, 226, .74) 25%, rgba(231, 237, 226, .96) 43%, rgba(231, 237, 226, .98) 100%);
		border-radius: 0 0 2rem 2rem;
	}

	.dobrograd-immersive .dobrograd-story-hero__scroll {
		right: 7vw;
		bottom: 1.5rem;
		font-size: .56rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dg-map__action,
	.dobrograd-immersive .dobrograd-finale__proof {
		transition: none;
	}

	.dobrograd-immersive .dobrograd-story-hero__scroll i {
		animation: none;
	}
}

/* Copy/QA pass: keep the narrative inside the viewport at every breakpoint.
 * The immersive image may overlap its own frame, but text never overlaps a
 * neighbouring chapter or leaves the readable area. */
.dobrograd-immersive {
	--dobro-display: cormorant-c, Georgia, serif;
	--dobro-ui: outfit-c, Arial, sans-serif;
	--dobro-ink: #17211d;
	--dobro-cream: #f7f4ec;
	--dobro-amber: #d5a467;
	--dobro-moss: #8fa37b;
}

.dobrograd-immersive .dobrograd-story-hero__lead--invitation {
	max-width: 34rem;
	margin-top: 1rem;
	color: rgba(247, 244, 236, .9);
}

.dobrograd-immersive .dg-map__copy {
	width: min(34rem, 42vw);
}

.dobrograd-immersive .dg-map__copy h2 {
	max-width: 10ch;
	font-family: var(--dobro-display);
	font-size: clamp(3.8rem, 6.4vw, 6.8rem);
	font-weight: 400;
	line-height: .84;
}

.dobrograd-immersive .dg-map__copy-bridge {
	margin-top: 1.35rem;
	color: rgba(244, 239, 229, .9);
}

.dobrograd-immersive .dg-map__copy-bridge strong {
	display: inline-block;
	margin-top: .85rem;
	color: var(--dobro-amber);
	font-weight: 500;
}

.dobrograd-immersive .dg-map__svg {
	filter: brightness(1.65) saturate(1.18);
}

.dobrograd-immersive .dobrograd-rest-welcome__copy-inner {
	width: min(88vw, 60rem);
}

.dobrograd-immersive .dobrograd-rest-welcome__copy h2,
.dobrograd-immersive .dobrograd-live__intro h2,
.dobrograd-immersive .dobrograd-business__intro h2 {
	font-family: var(--dobro-display);
	font-weight: 400;
}

.dobrograd-immersive .dobrograd-rest-welcome__copy p {
	max-width: 48ch;
}

.dobrograd-immersive .dobrograd-rest-welcome__invitation {
	color: #f0c27c !important;
}

.dobrograd-immersive .dobrograd-rest__card-copy {
	min-height: 44%;
	background: linear-gradient(180deg, rgba(247, 243, 231, 0) 0%, rgba(247, 243, 231, .74) 20%, rgba(247, 243, 231, .98) 45%, rgba(247, 243, 231, 1) 100%);
}

.dobrograd-immersive .dobrograd-rest__card h3 {
	max-width: 12ch;
	font-size: clamp(2.15rem, 3.35vw, 3.45rem);
	line-height: .92;
}

.dobrograd-immersive .dobrograd-rest__card h3[data-rest-text] {
	overflow: visible;
}

.dobrograd-immersive .dobrograd-live__intro,
.dobrograd-immersive .dobrograd-business__intro {
	width: min(44rem, 58vw);
}

.dobrograd-immersive .dobrograd-live__intro h2,
.dobrograd-immersive .dobrograd-business__intro h2 {
	font-size: clamp(4rem, 6.8vw, 7.2rem);
	line-height: .82;
}

.dobrograd-immersive .dobrograd-live__sedov {
	max-width: 34ch;
	margin: 1.25rem 0 0;
	color: rgba(242, 238, 228, .92);
	font-family: var(--dobro-display);
	font-size: clamp(1.25rem, 1.8vw, 1.65rem);
	line-height: 1.06;
}

.dobrograd-immersive .dobrograd-business__intro > p:last-child,
.dobrograd-immersive .dobrograd-live__intro > p:last-child {
	max-width: 42ch;
	margin-top: 1.45rem;
	color: rgba(242, 237, 225, .86);
}

@media (min-width: 768px) and (max-width: 1100px) {
	.dobrograd-immersive .dobrograd-story-hero {
		bottom: max(5rem, 8svh);
		width: min(42rem, 74vw);
	}

	.dobrograd-immersive .dobrograd-story-hero h2 {
		font-size: clamp(3.7rem, 7.8vw, 6rem);
	}

	.dobrograd-immersive .dg-map__copy {
		top: max(4.5rem, 8svh);
		left: 6vw;
		width: min(23rem, 42vw);
	}

	.dobrograd-immersive .dg-map__copy h2 {
		font-size: clamp(3.5rem, 6.9vw, 5.8rem);
	}

	.dobrograd-immersive .dg-map__copy p {
		font-size: .94rem;
	}

	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		left: 6vw;
		bottom: max(6rem, 11svh);
		width: min(39rem, 70vw);
	}

	.dobrograd-immersive .dobrograd-live__intro h2,
	.dobrograd-immersive .dobrograd-business__intro h2 {
		font-size: clamp(3.7rem, 7vw, 6.3rem);
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-story-hero {
		left: 7vw;
		right: 7vw;
		bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 4.2rem));
		width: auto;
		padding-left: .9rem;
	}

	.dobrograd-immersive .dobrograd-story-hero h2 {
		max-width: 10ch;
		font-size: clamp(2.65rem, 12.5vw, 4.6rem);
		line-height: .87;
	}

	.dobrograd-immersive .dobrograd-story-hero__lead,
	.dobrograd-immersive .dobrograd-story-hero__lead--invitation {
		max-width: 34ch;
		margin-top: 1rem;
		font-size: .9rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .dobrograd-story-hero__scroll {
		right: 7vw;
		bottom: max(1.25rem, env(safe-area-inset-bottom));
		max-width: 70vw;
		font-size: .56rem;
		line-height: 1.25;
		text-align: right;
		transform: none;
	}

	.dobrograd-immersive .dg-map__frame {
		padding: 39svh 3vw max(6svh, env(safe-area-inset-bottom));
	}

	.dobrograd-immersive .dg-map__copy {
		top: max(4.9rem, calc(env(safe-area-inset-top) + 3.5rem));
		left: 7vw;
		right: 7vw;
		width: auto;
		max-width: none;
		text-align: left;
	}

	.dobrograd-immersive .dg-map__copy h2 {
		max-width: 9ch;
		font-size: clamp(3rem, 13vw, 4.8rem);
		line-height: .86;
	}

	.dobrograd-immersive .dg-map__copy p {
		max-width: 34ch;
		margin-top: .85rem;
		font-size: .84rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .dg-map__copy-bridge {
		max-width: 30ch !important;
		margin-top: .8rem !important;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy-inner {
		width: 84vw;
		text-align: left;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy h2 {
		font-size: clamp(3.55rem, 17vw, 5.25rem);
		line-height: .78;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__copy p {
		max-width: 34ch;
		margin: 1.05rem 0 0;
		font-size: .88rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .dobrograd-rest-welcome__next {
		left: 7vw;
		right: 7vw;
		bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + .8rem));
		justify-content: space-between;
		font-size: .58rem;
		letter-spacing: .09em;
	}

	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		top: auto;
		left: 7vw;
		right: 7vw;
		bottom: max(5.4rem, calc(env(safe-area-inset-bottom) + 4.7rem));
		width: auto;
		max-width: none;
	}

	.dobrograd-immersive .dobrograd-live__intro h2,
	.dobrograd-immersive .dobrograd-business__intro h2 {
		max-width: 10ch;
		font-size: clamp(3.2rem, 13.5vw, 5rem);
		line-height: .84;
	}

	.dobrograd-immersive .dobrograd-live__sedov {
		max-width: 31ch;
		margin-top: .9rem;
		font-size: 1.12rem;
		line-height: 1.08;
	}

	.dobrograd-immersive .dobrograd-live__intro > p:last-child,
	.dobrograd-immersive .dobrograd-business__intro > p:last-child {
		max-width: 34ch;
		margin-top: .85rem;
		font-size: .82rem;
		line-height: 1.42;
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__card,
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__card {
		width: 92vw;
	}

	.dobrograd-immersive .dobrograd-live__card-copy h3 {
		max-width: 9ch;
		font-size: clamp(2.35rem, 10.5vw, 3.35rem);
	}

	.dobrograd-immersive .dobrograd-business__card-copy h3 {
		max-width: 10ch;
		font-size: clamp(1.95rem, 8vw, 2.65rem);
		line-height: .9;
	}

	.dobrograd-immersive .dobrograd-business__card-copy > p:not(.dobrograd-business__card-note),
	.dobrograd-immersive .dobrograd-live__card-copy > p:not(.dobrograd-live__card-note) {
		font-size: .78rem;
		line-height: 1.42;
	}
}

/* Mobile/tablet chapter QA: intro copy must enter from inside the safe area.
 * The chapter animation moves the text upward while it exits; bottom-anchoring
 * a multi-line intro makes the first line disappear above the viewport. */
@media (max-width: 1100px) {
	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		top: max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem));
		bottom: auto;
		max-height: calc(100svh - max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem)) - max(5rem, calc(env(safe-area-inset-bottom) + 4rem)));
		overflow: visible;
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		top: max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem));
		left: 7vw;
		right: 7vw;
		bottom: auto;
		width: auto;
		max-height: calc(100svh - max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem)) - max(5rem, calc(env(safe-area-inset-bottom) + 4rem)));
	}

	.dobrograd-immersive .dobrograd-live__intro h2,
	.dobrograd-immersive .dobrograd-business__intro h2 {
		font-size: clamp(3rem, 12.5vw, 4.7rem);
		line-height: .84;
	}
}

/* Every viewport: chapter copy exits upward, so anchor the intro from the
 * top. This keeps the first line inside the frame during the entire fade. */
.dobrograd-immersive .dobrograd-live__intro,
.dobrograd-immersive .dobrograd-business__intro {
	top: clamp(5rem, 11vh, 8rem);
	bottom: auto;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		top: max(4.5rem, calc(env(safe-area-inset-top) + 3.25rem));
	}
}

/* Rest-card depth pass: the object, atmosphere and copy need separate visual
 * planes so the scroll choreography reads in a still frame as well as in
 * motion. */
.dobrograd-immersive .dobrograd-rest__card-surface {
	z-index: 2;
	isolation: isolate;
}

.dobrograd-immersive .dobrograd-rest__card::before {
	z-index: 0;
	background:
		radial-gradient(circle at 50% 4%, rgba(255, 255, 255, .62), transparent 30%),
		var(--rest-card-bg);
	box-shadow:
		0 2.6rem 5rem rgba(25, 29, 24, .24),
		0 .8rem 1.5rem rgba(25, 29, 24, .12),
		inset 0 1px rgba(255, 255, 255, .7),
		inset 0 -1.2rem 2.5rem rgba(34, 40, 31, .08);
}

.dobrograd-immersive .dobrograd-rest__card::after {
	position: absolute;
	inset: 3% 5% 43%;
	z-index: 1;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 245, 218, .48), transparent 68%);
	filter: blur(1rem);
	opacity: .72;
	content: "";
	pointer-events: none;
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"]::before {
	border-color: rgba(255, 255, 255, .7);
	box-shadow:
		0 3.2rem 6rem rgba(25, 29, 24, .28),
		0 .9rem 2rem rgba(25, 29, 24, .16),
		inset 0 1px rgba(255, 255, 255, .82),
		inset 0 -1.2rem 2.5rem rgba(34, 40, 31, .1);
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"]::after {
	opacity: .95;
}

.dobrograd-immersive .dobrograd-rest__card-copy {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .42), transparent 38%),
		linear-gradient(180deg, rgba(247, 243, 231, 0) 0%, rgba(247, 243, 231, .18) 16%, rgba(247, 243, 231, .5) 47%, rgba(247, 243, 231, .84) 100%);
	box-shadow: inset 0 1px rgba(255, 255, 255, .56), 0 -.8rem 2rem rgba(255, 247, 227, .18);
}

/* The card tint must remain visible behind the copy; a solid cream sheet was
 * flattening every category into the same white rectangle. */
.dobrograd-immersive .dobrograd-rest__card--1 { --rest-card-accent: #8a5d36; }
.dobrograd-immersive .dobrograd-rest__card--2 { --rest-card-accent: #4e6d59; }
.dobrograd-immersive .dobrograd-rest__card--3 { --rest-card-accent: #47705a; }
.dobrograd-immersive .dobrograd-rest__card--4 { --rest-card-accent: #a05b38; }
.dobrograd-immersive .dobrograd-rest__card--5 { --rest-card-accent: #3f7378; }

.dobrograd-immersive .dobrograd-rest__card::before {
	border-color: rgba(255, 255, 255, .72);
}

.dobrograd-immersive .dobrograd-rest__card-copy::before {
	position: absolute;
	top: .85rem;
	left: clamp(1.35rem, 3vw, 2.35rem);
	width: 3.2rem;
	height: 2px;
	background: var(--rest-card-accent);
	content: "";
	opacity: .9;
}

.dobrograd-immersive .dobrograd-rest__card-eyebrow {
	color: var(--rest-card-accent);
}

.dobrograd-immersive .dobrograd-rest__card h3 {
	max-width: 9ch;
	font-family: var(--dobro-display);
	font-weight: 400;
	font-size: clamp(2.35rem, 3.8vw, 3.8rem);
	letter-spacing: -.045em;
	line-height: .84;
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"] .dobrograd-rest__card-surface {
	transform: translateY(-.35rem);
	transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
	filter: saturate(1.06);
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-rest__card-copy::before {
		top: .7rem;
		left: 1.2rem;
	}

	.dobrograd-immersive .dobrograd-rest__card h3 {
		max-width: 9ch;
		font-size: clamp(2.35rem, 10.2vw, 3.55rem);
		line-height: .84;
	}
}

/* Rest cards: restore the original colour treatment and text plane. */
.dobrograd-immersive .dobrograd-rest__card-copy {
	border-radius: 0 0 2rem 2rem;
	backdrop-filter: blur(8px) saturate(1.08);
	-webkit-backdrop-filter: blur(8px) saturate(1.08);
}

.dobrograd-immersive .dobrograd-rest__card--1 .dobrograd-rest__card-copy {
	background: linear-gradient(180deg, rgba(240, 231, 217, 0) 0%, rgba(240, 231, 217, .12) 15%, rgba(213, 182, 145, .58) 52%, rgba(184, 143, 101, .88) 100%);
}

.dobrograd-immersive .dobrograd-rest__card--2 .dobrograd-rest__card-copy {
	background: linear-gradient(180deg, rgba(238, 240, 232, 0) 0%, rgba(220, 229, 213, .14) 15%, rgba(189, 201, 180, .58) 52%, rgba(141, 158, 131, .86) 100%);
}

.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__card-copy {
	/* Slightly earlier scrim than the sibling cards: the moss under the bike is
	 * the same green as the eyebrow, so the copy needs its own ground. */
	background: linear-gradient(180deg, rgba(231, 237, 226, 0) 0%, rgba(214, 226, 207, .42) 12%, rgba(175, 192, 169, .66) 46%, rgba(125, 150, 124, .86) 100%);
}

.dobrograd-immersive .dobrograd-rest__card--4 .dobrograd-rest__card-copy {
	background: linear-gradient(180deg, rgba(245, 233, 209, 0) 0%, rgba(245, 233, 209, .12) 15%, rgba(224, 189, 131, .58) 52%, rgba(200, 120, 79, .86) 100%);
}

.dobrograd-immersive .dobrograd-rest__card--5 .dobrograd-rest__card-copy {
	background: linear-gradient(180deg, rgba(230, 239, 237, 0) 0%, rgba(211, 230, 227, .14) 15%, rgba(171, 200, 199, .58) 52%, rgba(112, 152, 156, .86) 100%);
}

.dobrograd-immersive .dobrograd-rest__card h3 {
	text-shadow: 0 1px rgba(255, 255, 255, .18);
}

.dobrograd-immersive .dobrograd-rest__card-index {
	color: rgba(24, 32, 28, .58);
}

/* Approved finale: the forest and contact UI are separate planes.  The
 * footer itself remains square so it arrives as a clean sheet over the last
 * business frame; only the internal contact panel gets a glass edge. */
/* WebP delivery wraps some images in <picture>; the wrapper contributes no
 * box, so flex/grid/absolute placement of the <img> is unchanged. */
.dobrograd-immersive picture.dg-webp {
	display: contents;
}

.dobrograd-immersive .dobrograd-finale.contact-footer {
	--footer-paper: #f6f1e7;
	--footer-ink: #f6f1e7;
	--footer-muted: rgba(246, 241, 231, .67);
	--footer-line: rgba(246, 241, 231, .2);
	--footer-brass: #d6ad66;
	--footer-edge: clamp(22px, 4.2vw, 76px);
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	margin-top: -100svh;
	padding-top: 0;
	overflow: hidden;
	border-radius: 0;
	color: var(--footer-ink);
	background: #06130e;
	box-shadow: 0 -1.5rem 4.5rem rgba(0, 0, 0, .3);
}

.dobrograd-immersive .contact-footer .forest-layer {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	background: url('../img/dobrograd/footer-forest-dense.webp') center / cover no-repeat;
	background-image: image-set(url('../img/dobrograd/footer-forest-dense.webp') type('image/webp'), url('../img/dobrograd/footer-forest-dense.webp') type('image/jpeg'));
	opacity: 1;
}

/* A quiet second forest pass restores branch and crown contrast above the
 * light volume. Dark foliage therefore interrupts the beam instead of the
 * spotlight being painted uniformly over every tree. */
.dobrograd-immersive .contact-footer::before {
	position: absolute;
	z-index: 4;
	inset: 0;
	content: '';
	pointer-events: none;
	opacity: .22;
	background: url('../img/dobrograd/footer-forest-dense.webp') center / cover no-repeat;
	background-image: image-set(url('../img/dobrograd/footer-forest-dense.webp') type('image/webp'), url('../img/dobrograd/footer-forest-dense.webp') type('image/jpeg'));
	mix-blend-mode: multiply;
}

.dobrograd-immersive .contact-footer::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: '';
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(2, 16, 10, .28), rgba(2, 16, 10, .08) 44%, rgba(2, 16, 10, .18)),
		linear-gradient(180deg, rgba(2, 12, 8, .08), transparent 28%, transparent 72%, rgba(2, 12, 8, .24));
}

.dobrograd-immersive .contact-footer .fog-field {
	position: absolute;
	z-index: 2;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background: transparent;
}

.dobrograd-immersive .contact-footer .fog-field::before {
	position: absolute;
	z-index: 1;
	inset: 37% -58% -8%;
	content: '';
	pointer-events: none;
	background: url('../img/dobrograd/fog-alpha.webp') 20% 100% / auto 78% repeat-x;
	background-image: image-set(url('../img/dobrograd/fog-alpha.webp') type('image/webp'), url('../img/dobrograd/fog-alpha.webp') type('image/png'));
	mix-blend-mode: screen;
	opacity: .14;
	animation: dobrograd-footer-fog-drift-a 34s linear infinite alternate;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
}

.dobrograd-immersive .contact-footer .fog-field::after {
	position: absolute;
	z-index: 2;
	inset: 49% -72% -13%;
	content: '';
	pointer-events: none;
	background: url('../img/dobrograd/fog-alpha.webp') 76% 100% / auto 92% repeat-x;
	background-image: image-set(url('../img/dobrograd/fog-alpha.webp') type('image/webp'), url('../img/dobrograd/fog-alpha.webp') type('image/png'));
	mix-blend-mode: screen;
	opacity: .1;
	animation: dobrograd-footer-fog-drift-b 46s linear infinite alternate;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 86%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 19%, #000 86%, transparent 100%);
}

@keyframes dobrograd-footer-fog-drift-a {
	from { transform: translate3d(-2.5%, 0, 0) scale(1.02); }
	to { transform: translate3d(3.5%, -1.2%, 0) scale(1.045); }
}

@keyframes dobrograd-footer-fog-drift-b {
	from { transform: translate3d(3%, .8%, 0) scale(1.04); }
	to { transform: translate3d(-3%, -.6%, 0) scale(1.015); }
}

@media (max-width: 767px) {
	.dobrograd-immersive .contact-footer .fog-field::before {
		inset: 43% -120% 3%;
		background-size: auto 68%;
		opacity: .12;
	}

	.dobrograd-immersive .contact-footer .fog-field::after {
		inset: 59% -145% -5%;
		background-size: auto 82%;
		opacity: .09;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .contact-footer .fog-field::before,
	.dobrograd-immersive .contact-footer .fog-field::after {
		animation: none;
	}
}

/* Live mist: a low-resolution canvas (WebGL noise field, 2D banks as a
 * fallback) covering the whole footer. It sits above the static fog pass and
 * below the multiply forest pass, so dark foliage still interrupts the fog
 * and the contact shell stays untouched. The browser upscales the small
 * canvas, which is what keeps the veils soft. */
.dobrograd-immersive .contact-footer .finale-mist {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: .96;
}

.dobrograd-immersive .contact-footer .shell {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	min-height: 100svh;
	padding: clamp(26px, 3.2vw, 56px) var(--footer-edge) clamp(20px, 2.4vw, 38px);
	text-shadow: 0 1px 18px rgba(0, 0, 0, .24);
}

.dobrograd-immersive .contact-footer .topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: clamp(17px, 1.8vw, 26px);
	border-bottom: 1px solid var(--footer-line);
	font-family: var(--dobro-ui);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dobrograd-immersive .contact-footer .topbar__route { color: var(--footer-muted); }

.dobrograd-immersive .contact-footer .main {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
	gap: clamp(40px, 6vw, 108px);
	align-items: center;
	min-height: 0;
	padding-block: clamp(36px, 5vw, 82px);
}

.dobrograd-immersive .contact-footer .intro { max-width: 780px; }

.dobrograd-immersive .contact-footer .eyebrow {
	margin: 0 0 22px;
	color: var(--footer-brass);
	font-family: var(--dobro-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.dobrograd-immersive .contact-footer .intro h2 {
	max-width: 8.7ch;
	margin: 0;
	color: var(--footer-ink);
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(60px, 6.7vw, 128px);
	font-weight: 400;
	letter-spacing: -.055em;
	line-height: .86;
	text-wrap: balance;
}

.dobrograd-immersive .contact-footer .intro h2 em {
	color: var(--footer-brass);
	font-style: normal;
}

.dobrograd-immersive .contact-footer .concierge {
	display: grid;
	gap: 8px;
	margin-top: clamp(34px, 4vw, 58px);
}

.dobrograd-immersive .contact-footer .concierge span {
	color: var(--footer-muted);
	font-family: var(--dobro-ui);
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.dobrograd-immersive .contact-footer .concierge a {
	width: fit-content;
	color: var(--footer-ink);
	font-family: var(--dobro-ui);
	font-size: clamp(28px, 2.55vw, 48px);
	font-weight: 650;
	letter-spacing: -.035em;
}

.dobrograd-immersive .contact-footer .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.dobrograd-immersive .contact-footer .action {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-width: 210px;
	padding: 15px 18px;
	border: 1px solid rgba(246, 241, 231, .62);
	border-radius: 999px;
	color: var(--footer-ink);
	font-family: var(--dobro-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	background: rgba(5, 21, 14, .18);
	backdrop-filter: blur(10px);
	transition: background .25s ease, color .25s ease;
}

.dobrograd-immersive .contact-footer .action:hover,
.dobrograd-immersive .contact-footer .action:focus-visible {
	color: #07150f;
	background: var(--footer-paper);
}

.dobrograd-immersive .contact-footer .contact-aside {
	min-height: min(57vh, 590px);
	display: grid;
	align-content: center;
	gap: clamp(26px, 4vw, 54px);
	padding: clamp(30px, 4vw, 64px);
	border: 1px solid rgba(246, 241, 231, .24);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(236, 242, 236, .12), rgba(4, 18, 12, .24));
	box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 30px 80px rgba(0, 0, 0, .18);
	backdrop-filter: blur(13px) saturate(1.08);
}

.dobrograd-immersive .contact-footer .contact-aside__brand {
	display: grid;
	place-items: center;
	min-height: 170px;
}

.dobrograd-immersive .contact-footer .contact-aside__brand img {
	width: min(82%, 430px);
	height: auto;
	filter: grayscale(1) brightness(2.8) contrast(.9) drop-shadow(0 8px 28px rgba(0, 0, 0, .3));
	opacity: .88;
}

.dobrograd-immersive .contact-footer .contact-aside__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: end;
	padding-top: 24px;
	border-top: 1px solid var(--footer-line);
}

.dobrograd-immersive .contact-footer .contact-aside__details strong {
	max-width: 34ch;
	font-family: var(--dobro-ui);
	font-size: clamp(16px, 1.25vw, 22px);
	line-height: 1.35;
}

.dobrograd-immersive .contact-footer .contact-aside__details span {
	color: var(--footer-muted);
	font-family: var(--dobro-ui);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .09em;
	text-align: right;
	text-transform: uppercase;
}

.dobrograd-immersive .contact-footer .channels {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--footer-line);
	border-bottom: 1px solid var(--footer-line);
}

.dobrograd-immersive .contact-footer .channel {
	position: relative;
	display: grid;
	gap: 14px;
	min-height: 112px;
	padding: 22px clamp(15px, 2vw, 30px) 20px 0;
	color: var(--footer-ink);
	transition: background-color .25s ease;
}

.dobrograd-immersive .contact-footer .channel + .channel {
	border-left: 1px solid var(--footer-line);
	padding-left: clamp(18px, 2.4vw, 38px);
}

.dobrograd-immersive .contact-footer .channel:hover,
.dobrograd-immersive .contact-footer .channel:focus-visible { background: rgba(246, 241, 231, .055); }

.dobrograd-immersive .contact-footer .channel__index {
	color: var(--footer-brass);
	font-family: var(--dobro-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
}

.dobrograd-immersive .contact-footer .channel strong {
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(24px, 2vw, 37px);
	font-weight: 400;
	line-height: .95;
}

.dobrograd-immersive .contact-footer .channel > span:last-child {
	color: var(--footer-muted);
	font-family: var(--dobro-ui);
	font-size: 12px;
}

.dobrograd-immersive .contact-footer .legal {
	position: relative;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 18px;
	color: var(--footer-muted);
	font-family: var(--dobro-ui);
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
}

@media (max-width: 980px) {
	.dobrograd-immersive .contact-footer .shell { min-height: auto; }
	.dobrograd-immersive .contact-footer .main { grid-template-columns: 1fr; gap: 48px; }
	.dobrograd-immersive .contact-footer .intro { padding-top: 22px; }
	.dobrograd-immersive .contact-footer .contact-aside { min-height: 460px; }
	.dobrograd-immersive .contact-footer .channels { grid-template-columns: 1fr; }
	.dobrograd-immersive .contact-footer .channel + .channel { border-left: 0; border-top: 1px solid var(--footer-line); padding-left: 0; }
	.dobrograd-immersive .contact-footer .channel { min-height: 96px; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; }
	.dobrograd-immersive .contact-footer .channel strong { font-size: clamp(25px, 5vw, 38px); }
}

@media (max-width: 640px) {
	.dobrograd-immersive .contact-footer .forest-layer { background-position: center; }
	.dobrograd-immersive .contact-footer .topbar { align-items: flex-start; }
	.dobrograd-immersive .contact-footer .topbar__route { max-width: 18ch; text-align: right; line-height: 1.45; }
	.dobrograd-immersive .contact-footer .main { padding-block: 42px 54px; }
	.dobrograd-immersive .contact-footer .intro h2 { font-size: clamp(54px, 18vw, 78px); }
	.dobrograd-immersive .contact-footer .action { width: 100%; }
	.dobrograd-immersive .contact-footer .contact-aside { min-height: 390px; padding: 28px 22px; border-radius: 14px; }
	.dobrograd-immersive .contact-footer .contact-aside__brand { min-height: 130px; }
	.dobrograd-immersive .contact-footer .contact-aside__brand img { width: min(92%, 360px); }
	.dobrograd-immersive .contact-footer .contact-aside__details { grid-template-columns: 1fr; gap: 12px; }
	.dobrograd-immersive .contact-footer .contact-aside__details span { text-align: left; }
	.dobrograd-immersive .contact-footer .channel { grid-template-columns: 36px 1fr; }
	.dobrograd-immersive .contact-footer .channel > span:last-child { grid-column: 2; }
	.dobrograd-immersive .contact-footer .legal { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .contact-footer .action,
	.dobrograd-immersive .contact-footer .channel { transition: none; }
}

/* Map story: opening-sequence typography, split into three scroll-scrubbed acts.
 * The map remains visible throughout; copy enters, resolves, and leaves it. */
.dobrograd-immersive .dg-map__copy {
	perspective: 1000px;
	top: clamp(5.4rem, 14svh, 9rem);
	width: min(42rem, 48vw);
	color: #f4efec;
}

.dobrograd-immersive .dg-map__eyebrow {
	margin: 0;
	color: rgba(244, 239, 236, .62);
	font-family: var(--dobro-ui);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
}

.dobrograd-immersive .dg-map__acts {
	position: relative;
	min-height: clamp(20rem, 48svh, 31rem);
	margin-top: 1.45rem;
}

.dobrograd-immersive .dg-map__act {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	margin: 0;
	padding: clamp(1.7rem, 3vw, 2.9rem) clamp(1.5rem, 3.2vw, 3.2rem);
	background: radial-gradient(ellipse at 44% 48%, rgba(39, 76, 51, .86) 0%, rgba(26, 53, 37, .62) 48%, rgba(10, 22, 16, 0) 82%);
	color: #f4efec;
	will-change: opacity, transform, filter;
}

.dobrograd-immersive .dg-map__act + .dg-map__act {
	margin-top: 3rem;
}

.dobrograd-js .dobrograd-immersive .dg-map__act {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	margin-top: 0;
	transform: none;
	filter: none;
}

.dobrograd-immersive .dg-map__act h2,
.dobrograd-immersive .dg-map__quote,
.dobrograd-immersive .dg-map__copy p.dg-map__final-lead {
	margin: 0;
	font-family: var(--dobro-ui);
	font-weight: 500;
	letter-spacing: .065em;
	line-height: .92;
	text-transform: uppercase;
	text-shadow: 0 0 26px rgba(244, 239, 236, .32);
	text-wrap: balance;
}

.dobrograd-immersive .dg-map__act h2 {
	max-width: 14ch;
	font-size: clamp(2.3rem, 4.3vw, 5rem);
}

.dobrograd-immersive .dg-map__act h2 em,
.dobrograd-immersive .dg-map__quote em {
	color: currentColor;
	font-style: normal;
}

.dobrograd-immersive .dg-map__quote {
	max-width: 12ch;
	color: #efae62;
	font-size: clamp(2.7rem, 5.3vw, 5.9rem);
}

.dobrograd-immersive .dg-map__act--finale,
.dobrograd-immersive .dg-map__story {
	max-width: 32rem;
}

.dobrograd-immersive .dg-map__copy p.dg-map__final-lead {
	max-width: 25ch;
	color: #efae62;
	font-size: clamp(1.05rem, 1.8vw, 1.8rem);
	line-height: 1.06;
}

.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
	max-width: 43ch;
	margin: 1.15rem 0 0;
	color: rgba(244, 239, 236, .84);
	font-family: var(--dobro-ui);
	font-size: clamp(.86rem, 1.1vw, 1.08rem);
	letter-spacing: 0;
	line-height: 1.52;
	text-shadow: none;
}

@media (max-width: 1100px) and (min-width: 768px) {
	.dobrograd-immersive .dg-map__copy {
		width: min(36rem, 47vw);
	}

	.dobrograd-immersive .dg-map__act h2 {
		font-size: clamp(2.2rem, 4.8vw, 4.3rem);
	}

	.dobrograd-immersive .dg-map__quote {
		font-size: clamp(2.55rem, 5.8vw, 4.8rem);
	}

	.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
		font-size: .88rem;
	}
}

/* Desktop map finish: keep the authored linework crisp on a pure black field. */
.dobrograd-immersive .dg-map__svg {
	shape-rendering: geometricPrecision;
}

@media (min-width: 768px) {
	.dobrograd-immersive .dg-map__masterplan-routes,
	.dobrograd-immersive .dg-map__masterplan-districts,
	.dobrograd-immersive .dg-map__masterplan-buildings,
	.dobrograd-immersive .dg-map__masterplan-lights,
	.dobrograd-immersive .dg-map__masterplan-hub {
		mix-blend-mode: screen;
	}

	.dobrograd-immersive .dg-map__masterplan-lights {
		filter: drop-shadow(0 0 3px rgba(255, 225, 162, .6));
	}

	.dobrograd-immersive .dg-map__masterplan-routes {
		filter: drop-shadow(0 0 2px rgba(239, 211, 151, .42));
	}

	.dobrograd-immersive .dg-map__act--finale::before {
		display: none;
	}

	.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
		color: rgba(248, 245, 238, .94);
		text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
	}
}

@media (max-width: 767px) {
	/* Keep the CodePen-style per-letter transform pass, without allocating a
	 * filter layer for every glyph and every card during touch scrolling. */
	.dobrograd-immersive .dg-map__svg {
		overflow: hidden;
	}

	.dobrograd-immersive .dg-map__frame {
		overflow: hidden;
	}

	.dobrograd-immersive .dg-map__char {
		will-change: transform, opacity;
	}

	.dobrograd-immersive .dg-map__detail-lights {
		filter: none;
	}

	.dobrograd-immersive .dobrograd-business__card {
		filter: brightness(var(--business-card-brightness));
	}

}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	/* The reduced-motion chapters return to normal flow. Clear the animated
	 * mobile left/right offsets so relative intro blocks cannot widen the page. */
	.dobrograd-immersive .dobrograd-live__intro,
	.dobrograd-immersive .dobrograd-business__intro {
		left: auto;
		right: auto;
		width: min(72rem, 88vw);
		margin-inline: auto;
	}

	.dobrograd-immersive .dobrograd-rest__viewport {
		overflow: hidden;
	}

	.dobrograd-immersive .dobrograd-rest__track {
		display: grid;
		width: 100%;
		min-width: 0;
		gap: 2rem;
		padding-right: 7vw;
		padding-left: 7vw;
	}

	.dobrograd-immersive .dobrograd-rest__card {
		width: 100%;
		min-width: 0;
		flex: none;
	}

	.dobrograd-immersive .dobrograd-live__sticky,
	.dobrograd-immersive .dobrograd-business__sticky {
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dg-map {
		height: 468svh;
	}

	.dobrograd-immersive .dg-map__frame {
		padding: 0;
	}

	.dobrograd-immersive .dg-map__copy {
		top: max(4.9rem, calc(env(safe-area-inset-top) + 3.5rem));
		left: 7vw;
		right: 7vw;
		width: auto;
		max-width: none;
	}

	.dobrograd-immersive .dg-map__act {
		padding: 1.35rem 1.1rem 1.45rem;
	}

	.dobrograd-immersive .dg-map__acts {
		min-height: 19rem;
		margin-top: 1.25rem;
	}

	.dobrograd-immersive .dg-map__act h2 {
		max-width: 14ch;
		font-size: clamp(2rem, 9vw, 3.45rem);
	}

	.dobrograd-immersive .dg-map__quote {
		font-size: clamp(2.45rem, 11vw, 4.25rem);
	}

	.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
		max-width: 32ch;
		margin-top: .95rem;
		font-size: .78rem;
		line-height: 1.45;
	}
}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
	/* Short touch landscapes use the same borderless stage as portrait
	 * phones; the earlier legacy split-layout padding exposed a map window. */
	.dobrograd-immersive .dg-map__frame {
		padding: 0;
	}
}

/* Story bridge: the first screen stays visual, then the image becomes a
 * readable threshold between the entrance and the first city scenario. */
.dobrograd-immersive .dobrograd-story-bridge {
	position: relative;
	min-height: 150svh;
	background: #ded9ce;
	color: #18231c;
	isolation: isolate;
}

.dobrograd-immersive .parallax {
	overflow: visible;
}

.dobrograd-immersive .dobrograd-story-bridge + .dobrograd-rest {
	margin-top: 0;
}

.dobrograd-immersive .dobrograd-story-bridge__sticky {
	position: sticky;
	top: 0;
	display: grid;
	height: 100svh;
	min-height: 100svh;
	overflow: hidden;
	place-items: center;
}

.dobrograd-immersive .dobrograd-story-bridge__media {
	position: absolute;
	inset: 0 0 0 43%;
	z-index: -1;
	overflow: hidden;
	background: #87917f;
}

.dobrograd-immersive .dobrograd-story-bridge__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #ded9ce 0%, rgba(222, 217, 206, .92) 10%, rgba(222, 217, 206, .12) 54%, rgba(8, 22, 15, .18) 100%), linear-gradient(0deg, rgba(8, 22, 15, .34), transparent 48%);
}

.dobrograd-immersive .dobrograd-story-bridge__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(.82) contrast(1.04);
	transform: scale(1.035);
}

.dobrograd-immersive .dobrograd-story-bridge__media span {
	position: absolute;
	inset: -12% -8%;
	z-index: 1;
	background: radial-gradient(ellipse at 48% 48%, rgba(237, 239, 221, .26), transparent 19%), linear-gradient(112deg, transparent 26%, rgba(230, 235, 214, .17) 48%, transparent 68%);
	mix-blend-mode: screen;
	filter: blur(22px);
	transform: translate3d(calc(var(--story-bridge-progress, 0) * 2%), calc(var(--story-bridge-progress, 0) * -1%), 0);
}

.dobrograd-immersive .dobrograd-story-bridge__copy {
	display: flex;
	width: min(86vw, 1180px);
	height: 100svh;
	min-height: 100svh;
	box-sizing: border-box;
	padding: clamp(7rem, 14vh, 10rem) 0 clamp(5rem, 10vh, 8rem);
	flex-direction: column;
	justify-content: center;
}

.dobrograd-immersive .dobrograd-story-bridge__chapter {
	margin: 0 0 clamp(2.5rem, 7vh, 5rem);
	color: #5f6a60;
	font-family: var(--dobro-ui);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-story-bridge h2 {
	max-width: 11ch;
	margin: 0;
	font-family: cormorant-c, Georgia, serif;
	font-size: clamp(4.2rem, 8vw, 8rem);
	font-weight: 400;
	line-height: .76;
	letter-spacing: -.065em;
}

.dobrograd-immersive .dobrograd-story-bridge h2 > span {
	display: block;
}

.dobrograd-immersive .dobrograd-story-bridge h2 > span + span {
	margin-top: .28em;
	font-size: .78em;
}

.dobrograd-immersive .dobrograd-story-bridge h2 em {
	color: #536c56;
	font-style: italic;
}

.dobrograd-immersive .dobrograd-story-bridge h2 strong {
	display: inline-block;
	color: transparent;
	background-image: var(--story-bridge-image);
	background-position: center;
	background-size: calc(120% + var(--story-bridge-progress, 0) * 260%) auto;
	-webkit-background-clip: text;
	background-clip: text;
	filter: saturate(calc(.82 + var(--story-bridge-progress, 0) * .32));
	text-shadow: 0 0 .02em rgba(24, 35, 28, .18);
	transform: translateX(calc(var(--story-bridge-progress, 0) * 1.4vw));
}

.dobrograd-immersive .dobrograd-story-bridge__body {
	display: grid;
	max-width: 34rem;
	margin: clamp(2.4rem, 6vh, 4.5rem) 0 0 27%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 3rem);
	color: #4d594f;
	font-family: var(--dobro-ui);
	font-size: clamp(.88rem, 1.05vw, 1rem);
	line-height: 1.55;
}

.dobrograd-immersive .dobrograd-story-bridge__body p {
	margin: 0;
}

.dobrograd-immersive .dobrograd-story-bridge__next {
	display: inline-flex;
	width: fit-content;
	margin: clamp(2.5rem, 7vh, 5rem) 0 0 27%;
	align-items: center;
	gap: 1.2rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid rgba(24, 35, 28, .5);
	color: #18231c;
	font-family: var(--dobro-ui);
	font-size: .72rem;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.dobrograd-immersive .dobrograd-story-bridge__next i {
	font-size: 1.2rem;
	font-style: normal;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.dobrograd-immersive .dobrograd-story-bridge__next:hover i,
.dobrograd-immersive .dobrograd-story-bridge__next:focus-visible i {
	transform: translateY(.28rem);
}

.dobrograd-immersive .dobrograd-story-bridge__next:focus-visible {
	outline: 2px solid #536c56;
	outline-offset: .45rem;
}

.dobrograd-immersive .dobrograd-story-bridge__note {
	position: absolute;
	right: 5vw;
	bottom: max(2rem, env(safe-area-inset-bottom));
	margin: 0;
	color: rgba(24, 35, 28, .48);
	font-family: var(--dobro-ui);
	font-size: .64rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-story-bridge { min-height: 132svh; }
	.dobrograd-immersive .dobrograd-story-bridge__sticky { min-height: 100svh; align-items: end; }
	.dobrograd-immersive .dobrograd-story-bridge__media { inset: 0; }
	.dobrograd-immersive .dobrograd-story-bridge__media::after { background: linear-gradient(0deg, #ded9ce 3%, rgba(222, 217, 206, .8) 42%, rgba(222, 217, 206, .06) 76%), linear-gradient(90deg, rgba(222, 217, 206, .5), transparent 70%); }
	.dobrograd-immersive .dobrograd-story-bridge__copy { width: 86vw; min-height: 0; padding: 7rem 0 calc(5rem + env(safe-area-inset-bottom)); justify-content: end; }
	.dobrograd-immersive .dobrograd-story-bridge__chapter { margin-bottom: 2.2rem; }
	.dobrograd-immersive .dobrograd-story-bridge h2 { max-width: 7.5ch; font-size: clamp(4.2rem, 18vw, 7rem); }
	.dobrograd-immersive .dobrograd-story-bridge h2 > span + span { margin-top: .2em; font-size: .82em; }
	.dobrograd-immersive .dobrograd-story-bridge__body { max-width: none; margin: 2rem 0 0; grid-template-columns: 1fr; gap: .8rem; font-size: .84rem; }
	.dobrograd-immersive .dobrograd-story-bridge__next { margin: 2.2rem 0 0; font-size: .65rem; }
	.dobrograd-immersive .dobrograd-story-bridge__note { right: 7vw; bottom: 1.6rem; font-size: .56rem; }
}

@media (min-width: 768px) {
	.dobrograd-immersive .dobrograd-story-bridge__body p:nth-child(2) {
		color: #f5f0e8;
		text-shadow: 0 1px 18px rgba(0, 0, 0, .8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dobrograd-story-bridge__media span,
	.dobrograd-immersive .dobrograd-story-bridge h2 strong,
	.dobrograd-immersive .dobrograd-story-bridge__next i { transition: none; transform: none; }
}

/* Final map composition: no copy plate, with a deliberate vertical rhythm
 * between the three story beats. */
.dobrograd-immersive .dg-map__act {
	display: flex;
	height: 100%;
	padding: 0;
	flex-direction: column;
	background: none !important;
	background-image: none !important;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
}

.dobrograd-immersive .dg-map__act--setup {
	justify-content: flex-start;
}

.dobrograd-immersive .dg-map__act--climax {
	justify-content: center;
}

.dobrograd-immersive .dg-map__act--finale {
	justify-content: flex-end;
	padding-bottom: clamp(.5rem, 2.5vh, 1.7rem);
}

.dobrograd-immersive .dg-map__gommage-canvas {
	z-index: 8;
}

@media (max-width: 767px) {
	.dobrograd-immersive .dg-map__acts {
		min-height: clamp(24rem, 62svh, 30rem);
	}

	.dobrograd-immersive .dg-map__act--finale {
		justify-content: flex-end;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* The map arrives from depth: a soft, enlarged silhouette resolves into the
 * precise city drawing before any copy is allowed to surface. */
.dobrograd-js .dobrograd-immersive .dg-map__frame {
	will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-js .dobrograd-immersive .dg-map__frame {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

/* Map copy pass: Onest gives the story a single, compact voice. Weight is
 * assigned by role: headline, climax, lead, then supporting copy. */
.dobrograd-immersive .dg-map__copy {
	--dg-map-font: onest-c, outfit-c, Arial, sans-serif;
}

/* Character spans keep the wind/depth pass locked to the actual letterforms. */
.dobrograd-immersive .dg-map__char {
	position: absolute;
	display: block;
	white-space: pre;
	will-change: transform, opacity, filter;
}

/* The placeholder keeps the real line breaks and height; only the overlay
 * moves. This is the part that makes the CodePen wind treatment assemble back
 * into the exact original typography instead of reflowing while it flies. */
.dobrograd-immersive .dg-map__text-placeholder {
	display: block;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

.dobrograd-immersive .dg-map .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dobrograd-immersive .dg-map__char-overlay {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.dobrograd-immersive .dg-map__eyebrow,
.dobrograd-immersive .dg-map__act h2,
.dobrograd-immersive .dg-map__quote,
.dobrograd-immersive .dg-map__copy p.dg-map__final-lead,
.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
	font-family: var(--dg-map-font);
}

.dobrograd-immersive .dg-map__act h2 {
	font-weight: 650;
}

.dobrograd-immersive .dg-map__quote {
	font-weight: 700;
}

.dobrograd-immersive .dg-map__copy p.dg-map__final-lead {
	font-weight: 700;
}

.dobrograd-immersive .dg-map__act--finale p:not(.dg-map__final-lead) {
	font-weight: 500;
}

/* The finale copy stays directly on the black SVG stage. There is no veil,
 * backdrop or raster plate between the story and the authored linework. */
.dobrograd-immersive .dg-map__act--finale {
	isolation: isolate;
}

.dobrograd-immersive .dg-map__act--finale::before {
	display: none;
}

.dobrograd-immersive .dg-map__act--finale > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	/* On a phone the upper dark field is the readable stage; the map can stay
	 * visible below it instead of carrying the copy into the dense linework. */
	.dobrograd-immersive .dg-map__act--finale {
		justify-content: flex-start;
		padding-top: clamp(1.2rem, 4vh, 2.25rem);
	}

	.dobrograd-immersive .dg-map__act--finale::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dobrograd-immersive .dg-map__act--finale::before {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* CodePen card treatment: colour, shadow and image overlap carry the object;
 * there is no glass stroke or horizontal seam around the copy. */
.dobrograd-immersive .dobrograd-rest__card::before {
	border: 0;
	border-radius: 1.25rem;
	box-shadow:
		0 2.6rem 5rem rgba(25, 29, 24, .24),
		0 .8rem 1.5rem rgba(25, 29, 24, .12);
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"]::before {
	border-color: transparent;
	box-shadow:
		0 3.2rem 6rem rgba(25, 29, 24, .28),
		0 .9rem 2rem rgba(25, 29, 24, .16);
}

.dobrograd-immersive .dobrograd-rest__card-copy {
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.dobrograd-immersive .dobrograd-rest__card-copy::before {
	display: none;
}

/* Final QA pass: keep the map clean and let the letters carry the story.
 * The earlier finale veil was a rectangular plate, which created the exact
 * extra edge visible behind the copy. */
.dobrograd-immersive .dg-map__act--finale::before {
	display: none;
}

.dobrograd-immersive .dg-map__copy {
	left: clamp(4.5rem, 8vw, 9.5rem);
	top: clamp(6.5rem, 15vh, 10rem);
	width: min(44rem, 50vw);
}

.dobrograd-immersive .dg-map__acts {
	min-height: clamp(22rem, 50svh, 34rem);
}

.dobrograd-immersive .dg-map__act h2 {
	max-width: 15ch;
	font-size: clamp(3rem, 4.65vw, 5.8rem);
	line-height: .88;
}

.dobrograd-immersive .dg-map__quote {
	font-size: clamp(2.8rem, 4.9vw, 5.35rem);
	line-height: .88;
}

.dobrograd-immersive .dg-map__char {
	transform-style: preserve-3d;
}

@media (max-width: 1100px) and (min-width: 768px) {
	.dobrograd-immersive .dg-map__copy {
		left: 7vw;
		top: clamp(5.5rem, 13vh, 8rem);
		width: min(38rem, 52vw);
	}

	.dobrograd-immersive .dg-map__act h2 {
		font-size: clamp(2.65rem, 4.6vw, 4.6rem);
	}

	.dobrograd-immersive .dg-map__quote {
		font-size: clamp(2.55rem, 5.2vw, 4.7rem);
	}
}

@media (max-width: 767px) {
	.dobrograd-immersive .dg-map__copy {
		top: max(3.35rem, calc(env(safe-area-inset-top) + 2.35rem));
		left: 7vw;
		right: 7vw;
		width: auto;
	}

	.dobrograd-immersive .dg-map__acts {
		min-height: clamp(24rem, 62svh, 30rem);
	}

	.dobrograd-immersive .dg-map__act h2 {
		max-width: 14ch;
		font-size: clamp(2rem, 9vw, 3.45rem);
	}

	.dobrograd-immersive .dg-map__quote {
		font-size: clamp(2.45rem, 11vw, 4.25rem);
	}
}

/* Rest deck: adjacent chapters remain present, but close enough to read as
 * one sequence. The card itself stays open above so the object can overlap;
 * only the lower copy plane clips to the shared radius. */
.dobrograd-immersive .dobrograd-rest__track {
	gap: clamp(1.5rem, 3vw, 3.5rem);
}

.dobrograd-immersive .dobrograd-rest__card {
	--rest-card-radius: clamp(1.25rem, 2vw, 2rem);
}

.dobrograd-immersive .dobrograd-rest__card::before {
	border-radius: var(--rest-card-radius);
	/* A box shadow on this transformed rectangle was composited as a visible
	 * dark slab on narrow screens. Depth is drawn by the elliptical floor
	 * shadow below, whose own edges are already transparent. */
	box-shadow: none;
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"]::before {
	box-shadow: none;
}

.dobrograd-immersive .dobrograd-rest__card::after {
	top: auto;
	left: -18%;
	right: -18%;
	bottom: -5.25rem;
	z-index: -1;
	height: 9.5rem;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 8%, rgba(29, 25, 20, .27) 0%, rgba(29, 25, 20, .14) 34%, rgba(29, 25, 20, 0) 72%);
	filter: none;
	opacity: 1;
}

.dobrograd-immersive .dobrograd-rest__card[data-rest-active="true"]::after {
	background: radial-gradient(ellipse at 50% 8%, rgba(29, 25, 20, .32) 0%, rgba(29, 25, 20, .16) 36%, rgba(29, 25, 20, 0) 74%);
	opacity: 1;
}

.dobrograd-immersive .dobrograd-rest__card-copy {
	border-radius: 0 0 var(--rest-card-radius) var(--rest-card-radius);
	overflow: hidden;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
	/* A phone turned sideways has less vertical room than a tablet. Keep the
	 * authored overlap, but fit the complete active card between the viewport
	 * edges and the chapter progress instead of clipping a 30rem minimum. */
	.dobrograd-immersive .dobrograd-rest {
		--rest-card-width: min(31vw, 15.5rem);
	}

	.dobrograd-immersive .dobrograd-rest__track {
		gap: clamp(1.25rem, 4vw, 2.5rem);
		padding-top: 1.25rem;
		padding-bottom: 3.2rem;
	}

	.dobrograd-immersive .dobrograd-rest__card {
		height: min(72svh, 18rem);
		min-height: 0;
	}

	.dobrograd-immersive .dobrograd-rest__card--1 .dobrograd-rest__object,
	.dobrograd-immersive .dobrograd-rest__card--2 .dobrograd-rest__object,
	.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__object,
	.dobrograd-immersive .dobrograd-rest__card--4 .dobrograd-rest__object,
	.dobrograd-immersive .dobrograd-rest__card--5 .dobrograd-rest__object {
		top: -8%;
		width: 130%;
		height: 57%;
	}

	.dobrograd-immersive .dobrograd-rest__card-copy {
		padding: .75rem 1rem .9rem;
	}

	.dobrograd-immersive .dobrograd-rest__card-eyebrow {
		margin-bottom: .35rem;
		font-size: .5rem;
	}

	.dobrograd-immersive .dobrograd-rest__card h3 {
		font-size: clamp(1.55rem, 4.2vw, 2rem);
		line-height: .9;
	}

	.dobrograd-immersive .dobrograd-rest__card-note {
		margin: .45rem 0 .55rem;
		font-size: .62rem;
	}

	.dobrograd-immersive .dobrograd-rest__open {
		min-height: 1.9rem;
		padding-top: .45rem;
		font-size: .5rem;
	}

	.dobrograd-immersive .dobrograd-rest__meter {
		bottom: .85rem;
	}

	.dobrograd-immersive .dobrograd-rest__hint {
		bottom: 1.1rem;
		margin-bottom: .35rem;
	}
}

/* Footer hierarchy: one invitation, one route, three concise contact paths.
 * Utility contacts use the same Onest voice as the map so the footer stops
 * feeling like a second brand system. */
.dobrograd-immersive .contact-footer .intro h2 {
	max-width: 9.5ch;
	font-size: clamp(3.8rem, 5.25vw, 6.6rem);
	line-height: .9;
}

.dobrograd-immersive .contact-footer .concierge {
	gap: 6px;
	margin-top: clamp(28px, 3.2vw, 44px);
}

.dobrograd-immersive .contact-footer .concierge span {
	font-size: 10px;
	letter-spacing: .1em;
}

.dobrograd-immersive .contact-footer .concierge a {
	font-size: clamp(1.65rem, 2.15vw, 2.65rem);
	font-weight: 650;
}

.dobrograd-immersive .contact-footer .contact-aside {
	min-height: min(50vh, 510px);
	gap: clamp(20px, 3vw, 36px);
	padding: clamp(24px, 3.2vw, 46px);
	border-radius: 1.25rem;
}

.dobrograd-immersive .contact-footer .contact-aside__brand {
	min-height: 128px;
}

.dobrograd-immersive .contact-footer .contact-aside__brand img {
	width: min(68%, 330px);
}

.dobrograd-immersive .contact-footer .contact-aside__details {
	gap: 20px;
	padding-top: 20px;
}

.dobrograd-immersive .contact-footer .contact-aside__details strong {
	font-size: clamp(.92rem, 1.05vw, 1.18rem);
}

.dobrograd-immersive .contact-footer .channel {
	gap: 9px;
	min-height: 100px;
	padding-top: 18px;
	padding-bottom: 16px;
}

.dobrograd-immersive .contact-footer .channel strong {
	font-family: var(--dobro-ui);
	font-size: clamp(1.05rem, 1.55vw, 1.8rem);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1;
}

.dobrograd-immersive .contact-footer .channel > span:last-child {
	font-size: 10px;
	letter-spacing: .04em;
}

.dobrograd-immersive .contact-footer .legal a {
	color: var(--footer-muted);
	text-decoration: none;
	text-underline-offset: .2em;
	transition: color .25s ease;
}

.dobrograd-immersive .contact-footer .legal a:hover,
.dobrograd-immersive .contact-footer .legal a:focus-visible {
	color: var(--footer-ink);
}

.dobrograd-immersive .contact-footer a {
	text-decoration: none;
}

@media (max-width: 640px) {
	.dobrograd-immersive .dobrograd-rest__card--3 .dobrograd-rest__card-copy {
		border-radius: 0 0 var(--rest-card-radius) var(--rest-card-radius);
	}

	.dobrograd-immersive .contact-footer .intro h2 {
		font-size: clamp(3.25rem, 16vw, 5.25rem);
	}

	.dobrograd-immersive .contact-footer .contact-aside__brand img {
		width: min(76%, 290px);
	}

	.dobrograd-immersive .contact-footer .legal a {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}


/* Phone GPU budget. On a 390×844 phone at 3x the "Жить" scene was nine
 * full-scene layers (five forest plates + four light canvases) of 4.7 viewports
 * each, all composited — roughly half a gigabyte of layer memory — and the
 * "Приехать" backdrops were five section-tall gradients promoted by
 * will-change. Nothing visible changes: the scene is cropped to the same
 * central slice by object-fit instead of by overflow, so every layer is
 * rasterised at viewport size; the backdrops simply stop being composited. */
@media (max-width: 767px) {
	.dobrograd-immersive .dobrograd-live__forest-scene {
		width: 112vw;
		height: 112svh;
		aspect-ratio: auto;
	}

	.dobrograd-immersive .dobrograd-live__forest-layer img,
	.dobrograd-immersive .dobrograd-live__forest-layer canvas {
		object-fit: cover;
		object-position: 50% 50%;
	}

	.dobrograd-immersive .dobrograd-rest__atmosphere {
		will-change: auto;
	}
}


/* Touch devices: sticky stages take the largest viewport (bar hidden) so the
 * scene never ends above the bottom edge while the browser bar is away — the
 * beige band under the welcome scene was exactly that gap. Distances are
 * measured against the same height in JS (getDobrogradStageHeight). */
@media (max-width: 767px) and (pointer: coarse) {
	.dobrograd-immersive .parallax__header,
	.dobrograd-immersive .dg-map__sticky,
	.dobrograd-immersive .dobrograd-rest-welcome__sticky,
	.dobrograd-immersive .dobrograd-rest.is-scroll-driven .dobrograd-rest__sticky,
	.dobrograd-immersive .dobrograd-live.is-scroll-driven .dobrograd-live__sticky,
	.dobrograd-immersive .dobrograd-business.is-scroll-driven .dobrograd-business__sticky {
		min-height: 100lvh;
		height: 100lvh;
	}

	.dobrograd-immersive .parallax__layer-title {
		height: 100lvh;
	}

	.dobrograd-immersive .dobrograd-rest,
	.dobrograd-immersive .dobrograd-rest-welcome,
	.dobrograd-immersive .dobrograd-live,
	.dobrograd-immersive .dobrograd-business,
	.dobrograd-immersive .dobrograd-finale {
		margin-top: -100lvh;
	}

	.dobrograd-immersive .dobrograd-rest-welcome {
		height: 250lvh;
	}

	.dobrograd-immersive .dobrograd-rest.is-scroll-driven {
		min-height: calc(100lvh + var(--rest-scroll-distance, 410lvh) + var(--rest-exit-distance, 0px));
	}

	.dobrograd-immersive .dobrograd-live.is-scroll-driven {
		min-height: calc(100lvh + var(--live-entry-distance, 0px) + var(--live-scroll-distance, 5760px) + var(--live-exit-distance, 0px));
	}

	.dobrograd-immersive .dobrograd-business.is-scroll-driven {
		--business-finale-hold-distance: 100lvh;
		min-height: calc(100lvh + var(--business-entry-distance, 0px) + var(--business-scroll-distance, 4428px) + var(--business-finale-hold-distance));
	}
}