@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");

@layer reset, tokens, base, layout, ui, sections, responsive;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

@layer tokens {
	:root {
		--bg: #090807;
		--fg: #fff5e8;
		--muted: #9d8873;
		--accent: #f0bb4f;
		--section-muted: rgba(255, 245, 232, 0.62);
		--section-ghost: rgba(255, 245, 232, 0.05);
		--accent-soft: rgba(240, 187, 79, 0.14);
		--accent-line: rgba(240, 187, 79, 0.72);
		--muted-line: rgba(157, 136, 115, 0.5);
		--hairline: 0.0625rem;
		--ui-inset: 1.75rem;
		--font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
		--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
		--z-ui: 10;
	}

	@supports (color: color-mix(in srgb, white 50%, transparent)) {
		:root {
			--section-muted: color-mix(in srgb, var(--fg) 55%, transparent);
			--section-ghost: color-mix(in srgb, var(--fg) 4%, transparent);
			--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
			--accent-line: color-mix(in srgb, var(--accent) 65%, transparent);
			--muted-line: color-mix(in srgb, var(--muted) 45%, transparent);
		}
	}
}

@layer base {
	html {
		overscroll-behavior: auto;
		scroll-behavior: smooth;
		scroll-snap-type: y mandatory;
		scroll-padding-block-start: env(safe-area-inset-top, 0px);
	}

	body {
		background: var(--bg);
		color: var(--fg);
		font-family: var(--font-mono);
		overflow-x: hidden;
		overscroll-behavior: none;
		touch-action: pan-y;
		-webkit-overflow-scrolling: touch;
	}
}

@layer layout {
	.scene {
		position: fixed;
		inset: 0;
		min-block-size: 100vh;
		min-block-size: 100dvh;
		overflow: hidden;
		background: linear-gradient(
			to top,
			#9d572a 0%,
			#77571f 14%,
			#28663e 29%,
			#0f536c 43%,
			#142f78 58%,
			#2a1d67 72%,
			#2c123a 87%,
			#030303 100%
		);
		background: linear-gradient(
			to top,
			oklch(35% 0.14 55) 0%,
			oklch(33% 0.13 58) 3.4%,
			oklch(30% 0.12 68) 8.6%,
			oklch(27% 0.11 86) 15.6%,
			oklch(25% 0.11 138) 24.2%,
			oklch(22% 0.1 204) 34.4%,
			oklch(19% 0.09 232) 45.9%,
			oklch(16% 0.08 254) 57.8%,
			oklch(14% 0.08 270) 69.6%,
			oklch(12% 0.07 284) 80.2%,
			oklch(10% 0.05 302) 89.2%,
			oklch(7% 0.03 322) 95.9%,
			oklch(3% 0.01 0) 100%
		);
		background-size: 100% 500%;
		background-position-y: 100%;
	}

	.service-section-track {
		display: block;
		inline-size: 100%;
		position: relative;
		will-change: transform;
	}
}

@layer ui {
	#hud {
		position: fixed;
		inset-block-start: var(--ui-inset);
		inset-inline-end: var(--ui-inset);
		z-index: var(--z-ui);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.4rem;
		pointer-events: none;
	}

	.hud-title {
		font-family: var(--font-display);
		font-size: 0.85rem;
		letter-spacing: 0.12em;
		color: var(--accent);
		line-height: 1.1;
		text-align: right;
		opacity: 0.6;
	}

	.progress-bar {
		inline-size: 5rem;
		block-size: var(--hairline);
		background: rgba(138, 123, 110, 0.3);
		background: color-mix(in srgb, var(--muted) 30%, transparent);
		position: relative;
		overflow: hidden;
	}

	.progress-fill {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 0%;
		background: var(--accent);
		transition: none;
	}

	.hud-label {
		font-size: 0.5rem;
		letter-spacing: 0.28em;
		text-transform: uppercase;
		color: var(--accent);
	}

	#section_nav {
		position: fixed;
		inset-inline-start: var(--ui-inset);
		inset-block-start: 50%;
		translate: 0 -50%;
		z-index: var(--z-ui);
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.section-nav-button {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2rem;
		block-size: 2rem;
		border: 1px solid transparent;
		border-radius: 50%;
		background: rgba(14, 12, 10, 0.08);
		color: var(--muted);
		cursor: pointer;
		padding: 0;
		opacity: 0.52;
		transition: scale 0.3s ease, opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	}

	.section-nav-icon {
		display: block;
		inline-size: 1.05rem;
		block-size: 1.05rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: drop-shadow(0 0 0 transparent);
		transition: filter 0.3s ease, stroke-width 0.3s ease;
	}

	.section-nav-button:hover,
	.section-nav-button:focus-visible {
		color: var(--accent);
		opacity: 0.88;
		outline: none;
	}

	.section-nav-button.is-active {
		scale: 1.18;
		color: var(--accent);
		background: var(--accent-soft);
		border-color: var(--accent-line);
		box-shadow: 0 0 1rem rgba(212, 168, 75, 0.24);
		opacity: 1;
	}

	.section-nav-button.is-active .section-nav-icon {
		stroke-width: 2.15;
		filter: drop-shadow(0 0 0.35rem rgba(212, 168, 75, 0.65));
	}

	body[data-active-section="quality"] .hud-title,
	body[data-active-section="quality"] .hud-label {
		color: #ff1010;
		opacity: 0.88;
	}

	body[data-active-section="quality"] .progress-bar {
		background: rgba(255, 16, 16, 0.18);
	}

	body[data-active-section="quality"] .progress-fill {
		background: #ff1010;
	}

	body[data-active-section="quality"] .section-nav-button {
		color: rgba(255, 16, 16, 0.48);
	}

	body[data-active-section="quality"] .section-nav-button.is-active {
		color: #ff1010;
		background: rgba(255, 16, 16, 0.08);
		border-color: rgba(255, 16, 16, 0.55);
		box-shadow: 0 0 1rem rgba(255, 16, 16, 0.16);
	}

	body[data-active-section="quality"] .section-nav-button.is-active .section-nav-icon {
		filter: drop-shadow(0 0 0.35rem rgba(255, 16, 16, 0.48));
	}

	body[data-active-section="mission"] .hud-title,
	body[data-active-section="mission"] .hud-label {
		color: #ffffff;
		opacity: 0.9;
	}

	body[data-active-section="mission"] .progress-bar {
		background: rgba(255, 255, 255, 0.18);
	}

	body[data-active-section="mission"] .progress-fill {
		background: #ffffff;
	}

	body[data-active-section="mission"] .section-nav-button {
		color: rgba(255, 255, 255, 0.5);
	}

	body[data-active-section="mission"] .section-nav-button.is-active {
		color: #ffffff;
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.62);
		box-shadow: 0 0 1rem rgba(255, 255, 255, 0.16);
	}

	body[data-active-section="mission"] .section-nav-button.is-active .section-nav-icon {
		filter: drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.5));
	}
}

@layer sections {
	.service-section {
		min-block-size: 100vh;
		min-block-size: 100dvh;
		block-size: auto;
		inline-size: 100%;
		position: relative;
		display: block;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.service-section__inner {
		min-block-size: 100vh;
		min-block-size: 100dvh;
		block-size: auto;
		display: flex;
		align-items: flex-end;
		padding: 4vw 5vw;
		position: relative;
		overflow: hidden;
	}

	.service-section__inner::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background:
			radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.038) 0 1px, transparent 1.5px),
			radial-gradient(circle at 72% 58%, rgba(0, 0, 0, 0.075) 0 0.8px, transparent 1.4px),
			radial-gradient(circle at 42% 84%, rgba(255, 255, 255, 0.028) 0 1px, transparent 1.6px);
		background-size: 0.78rem 0.78rem, 1.15rem 1.15rem, 1.55rem 1.55rem;
		opacity: 0.58;
	}

	#section_quality .service-section__inner::before {
		background:
			radial-gradient(circle at 12% 18%, rgba(255, 0, 0, 0.055) 0 1px, transparent 1.4px),
			radial-gradient(circle at 82% 72%, rgba(255, 0, 0, 0.04) 0 1px, transparent 1.6px),
			radial-gradient(circle at 48% 38%, rgba(8, 8, 8, 0.045) 0 0.8px, transparent 1.3px),
			linear-gradient(135deg, #ffffff 0%, #f8f8f4 48%, #ffffff 100%);
		background-size: 0.85rem 0.85rem, 1.25rem 1.25rem, 0.55rem 0.55rem, 100% 100%;
		opacity: 1;
	}

	#section_wear_tear .service-section__inner::before {
		background:
			radial-gradient(circle at 18% 22%, rgba(240, 187, 79, 0.055) 0 1px, transparent 1.6px),
			linear-gradient(180deg, rgba(9, 8, 7, 0.96), rgba(3, 3, 3, 0.92));
		background-size: 1rem 1rem, 100% 100%;
		opacity: 1;
	}

	.service-section__inner.is-right {
		justify-content: flex-end;
	}

	.service-section__inner.is-center {
		justify-content: center;
	}

	.service-section__inner--footer {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		padding-bottom: 2rem;
	}

	.section-keyword {
		position: absolute;
		inset-block-end: -0.15em;
		inset-inline-start: -0.02em;
		z-index: 1;
		font-family: var(--font-display);
		font-size: clamp(16rem, 28vw, 30rem);
		line-height: 1.1;
		letter-spacing: -0.04em;
		color: var(--section-ghost);
		pointer-events: none;
		user-select: none;
		white-space: nowrap;
	}

	.section-keyword.is-typing::after {
		content: "_";
		display: inline-block;
		margin-inline-start: 0.035em;
		color: currentColor;
		animation: terminal-cursor 0.75s steps(1, end) infinite;
	}

	.service-section__inner.is-right .section-keyword {
		inset-inline-start: auto;
		inset-inline-end: -0.02em;
	}

	.service-section__inner.is-center .section-keyword {
		inset-inline-start: 50%;
		translate: -50% 0;
	}

	.service-section__copy {
		position: relative;
		z-index: 2;
		max-inline-size: 36rem;
	}

	.service-section__copy--wide {
		max-inline-size: min(68rem, 100%);
	}

	.align-right {
		text-align: right;
	}

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

	.section-meta {
		font-size: 0.55rem;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		color: var(--accent);
		opacity: 0.7;
		margin-block-end: 1.2rem;
	}

	h2 {
		font-family: var(--font-display);
		font-size: clamp(3rem, 8vw, 7rem);
		font-weight: 400;
		letter-spacing: 0.03em;
		line-height: 0.9;
		color: var(--fg);
		margin-block-end: 1.5rem;
		cursor: pointer;
		transition: color 0.25s ease, text-shadow 0.25s ease;
	}

	h2:hover,
	h2:focus-visible {
		color: var(--accent);
		outline: none;
		text-shadow: 0 0 1.3rem rgba(240, 187, 79, 0.22);
	}

	h2:not([data-article-key]) {
		cursor: default;
	}

	h2:not([data-article-key]):hover,
	h2:not([data-article-key]):focus-visible {
		text-shadow: none;
	}

	.section-summary {
		font-size: clamp(0.65rem, 1.2vw, 0.8rem);
		line-height: 1.9;
		color: var(--section-muted);
		letter-spacing: 0.05em;
	}

	.process-steps,
	.plan-grid,
	.trust-list,
	.faq-list {
		margin-top: 1.25rem;
	}

	.process-steps {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
		list-style: none;
		text-align: left;
	}

	.process-steps li,
	.plan-card,
	.faq-item {
		border: 1px solid var(--muted-line);
		background: rgba(255, 255, 255, 0.035);
		padding: 1rem;
	}

	.step-number {
		display: inline-grid;
		place-items: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		margin-bottom: 0.85rem;
		border: 1px solid var(--accent-line);
		color: var(--accent);
		font-size: 0.72rem;
	}

	.process-steps h3,
	.plan-card h3,
	.faq-item h3 {
		font-family: var(--font-display);
		font-size: clamp(1.35rem, 2.8vw, 2rem);
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 1;
		color: var(--fg);
		margin-bottom: 0.65rem;
	}

	.process-steps p,
	.faq-item p {
		color: var(--section-muted);
		font-size: 0.72rem;
		line-height: 1.65;
	}

	.plan-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.9rem;
		text-align: left;
	}

	.plan-card ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 1rem;
		padding-left: 1rem;
		color: var(--section-muted);
		font-size: 0.76rem;
		line-height: 1.55;
	}

	.trust-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 0.75rem;
		list-style: none;
		text-align: left;
	}

	.trust-list li {
		border: 1px solid var(--muted-line);
		background: rgba(255, 255, 255, 0.035);
		padding: 0.85rem 0.9rem;
		color: var(--fg);
		font-size: 0.72rem;
		line-height: 1.5;
	}

	.trust-list li::before {
		content: "";
		display: inline-block;
		inline-size: 0.42rem;
		block-size: 0.42rem;
		margin-right: 0.55rem;
		border: 1px solid var(--accent);
		vertical-align: 0.08em;
	}

	.faq-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.site-footer {
		position: relative;
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.65rem 1rem;
		max-inline-size: min(64rem, 92vw);
		padding-top: 1rem;
		border-top: 1px solid rgba(237, 232, 223, 0.18);
		border-color: color-mix(in srgb, var(--fg) 18%, transparent);
	}

	.footer-link {
		border: 0;
		background: transparent;
		color: rgba(237, 232, 223, 0.68);
		color: color-mix(in srgb, var(--fg) 68%, transparent);
		font-family: var(--font-mono);
		font-size: 0.62rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
	}

	.footer-link:hover,
	.footer-link:focus-visible {
		color: var(--accent);
		outline: none;
	}

	.scroll-hint {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		margin-block-start: 2.5rem;
		color: var(--accent);
		animation: hint-pulse 2.5s ease-in-out infinite;
	}

	.scroll-hint-text {
		font-size: 0.52rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}

	#section_booking h2 {
		color: var(--accent);
		cursor: default;
		text-shadow: none;
	}

	#section_booking .section-keyword {
		color: rgba(212, 168, 75, 0.06);
		color: color-mix(in srgb, var(--accent) 6%, transparent);
	}

	#section_quality,
	#section_quality .service-section__copy,
	#section_quality h2,
	#section_quality .section-meta,
	#section_quality .section-summary,
	#section_quality .scroll-hint {
		color: #ff1010;
	}

	#section_quality .section-keyword {
		color: rgba(255, 16, 16, 0.12);
		color: color-mix(in srgb, #ff1010 12%, transparent);
	}

	#section_quality h2:hover,
	#section_quality h2:focus-visible {
		color: #ff1010;
		text-shadow: 0 0 1.3rem rgba(255, 16, 16, 0.24);
	}

	#section_quality .section-cta {
		color: #ff1010;
		border-color: rgba(255, 16, 16, 0.55);
		background: rgba(255, 16, 16, 0.045);
	}

	#section_quality .section-cta:hover {
		background: rgba(255, 16, 16, 0.09);
		border-color: #ff1010;
	}

	#section_quality .scroll-hint {
		display: flex;
		width: max-content;
	}

	#section_wear_tear,
	#section_wear_tear .service-section__copy,
	#section_wear_tear h2,
	#section_wear_tear .section-summary {
		color: var(--fg);
	}

	#section_wear_tear .section-meta,
	#section_wear_tear .policy-cta {
		color: var(--accent);
	}

	#section_wear_tear .section-keyword {
		color: var(--section-ghost);
	}

	#section_mission h2 {
		color: var(--section-muted);
	}

	#section_mission .section-keyword {
		color: rgba(237, 232, 223, 0.045);
		color: color-mix(in srgb, var(--fg) 4.5%, transparent);
	}

	#section_mission .section-meta {
		color: var(--accent);
		opacity: 0.5;
	}

	#section_mission .section-summary {
		color: rgba(237, 232, 223, 0.45);
		color: color-mix(in srgb, var(--fg) 45%, transparent);
	}

	@keyframes hint-pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.2;
		}
	}

	@keyframes terminal-cursor {
		0%,
		49% {
			opacity: 1;
		}
		50%,
		100% {
			opacity: 0;
		}
	}
}

@layer responsive {
	@media (max-width: 56.25em) {
		:root {
			--ui-inset: 1.25rem;
		}

		body {
			block-size: auto !important;
			min-block-size: 100%;
			overscroll-behavior-y: auto;
		}

		.scene {
			position: relative;
			min-block-size: 100vh;
			min-block-size: 100svh;
			min-block-size: 100dvh;
			overflow: visible;
			background-size: 100% 100%;
			background-position: center;
		}

		.service-section-track {
			display: flex;
			flex-direction: column-reverse;
			transform: none !important;
			will-change: auto;
		}

		#hud {
			inset-block-start: 0.9rem;
			inset-inline-end: 0.9rem;
			gap: 0.3rem;
		}

		.hud-title {
			font-size: 0.72rem;
		}

		#section_nav {
			display: none;
		}

		.service-section {
			min-block-size: 100vh;
			min-block-size: 100svh;
			min-block-size: 100dvh;
		}

		.service-section__inner {
			min-block-size: 100vh;
			min-block-size: 100svh;
			min-block-size: 100dvh;
			padding: 18vh 7vw 9vh;
			padding: 18dvh 7vw 9dvh;
			align-items: flex-end;
		}

		.section-keyword {
			inset-block-end: 0.05em;
			font-size: clamp(6rem, 31vw, 12rem);
			opacity: 0.75;
		}

		h2 {
			font-size: clamp(2.7rem, 14vw, 5rem);
			line-height: 0.92;
		}

		.section-summary {
			max-inline-size: 26rem;
			font-size: 0.76rem;
			line-height: 1.75;
		}

		.service-section__copy--wide {
			max-inline-size: min(100%, 42rem);
		}

		.process-steps,
		.faq-list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.plan-grid {
			grid-template-columns: 1fr;
		}

		.service-section__inner--footer {
			padding-bottom: 7vh;
			padding-bottom: 7dvh;
		}
	}

	@media (max-width: 30em) {
		:root {
			--ui-inset: 0.9rem;
		}

		.service-section__inner,
		.service-section__inner.is-right,
		.service-section__inner.is-center {
			justify-content: flex-start;
			padding-inline: 1.15rem;
		}

		.service-section__copy,
		.align-right,
		.align-center {
			max-inline-size: min(100%, 24rem);
			text-align: left;
		}

		.section-meta {
			margin-block-end: 0.9rem;
			font-size: 0.5rem;
			letter-spacing: 0.2em;
		}

		.section-keyword,
		.service-section__inner.is-right .section-keyword,
		.service-section__inner.is-center .section-keyword {
			inset-inline-start: 0.7rem;
			inset-inline-end: auto;
			translate: 0 0;
			white-space: normal;
			word-break: break-word;
		}

		.section-cta {
			max-inline-size: 100%;
			white-space: normal;
			line-height: 1.35;
		}

		.process-steps,
		.plan-grid,
		.faq-list {
			grid-template-columns: 1fr;
		}

		.plan-card ul {
			grid-template-columns: 1fr;
		}

		.process-steps li,
		.plan-card,
		.faq-item {
			padding: 0.9rem;
		}

		.site-footer {
			justify-content: flex-start;
			max-inline-size: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}

		.section-keyword.is-typing::after {
			content: none;
		}
	}
}


@layer ui {
	.section-cta {
		margin-top: 1.5rem;
		padding: 0.9rem 1.2rem;
		border: 1px solid var(--accent-line);
		background: var(--accent-soft);
		color: var(--fg);
		font-family: var(--font-mono);
		font-size: 0.72rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		cursor: pointer;
		transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
	}

	.section-cta:hover {
		transform: translateY(-2px);
		background: color-mix(in srgb, var(--accent) 20%, transparent);
		border-color: var(--accent);
	}

	.policy-cta {
		margin-top: 1rem;
		padding: 0.65rem 0.8rem;
		font-size: 0.58rem;
		letter-spacing: 0.16em;
	}

	.section-cta--submit {
		width: 100%;
	}

	.site-modal {
		position: fixed;
		inset: 0;
		z-index: 50;
		display: none;
	}

	.site-modal.is-open {
		display: block;
	}

	.site-modal__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.72);
		backdrop-filter: blur(6px);
	}

	.site-modal__dialog {
		position: relative;
		width: min(92vw, 42rem);
		max-height: 88vh;
		overflow: auto;
		margin: 6vh auto;
		padding: 1.5rem;
		border: 1px solid rgba(212, 168, 75, 0.24);
		border-color: color-mix(in srgb, var(--accent) 24%, transparent);
		background: linear-gradient(180deg, rgba(19,16,12,0.98), rgba(10,8,6,0.98));
		box-shadow: 0 24px 80px rgba(0,0,0,0.45);
	}

	.article-modal__backdrop {
		background: rgba(0, 0, 0, 0.52);
		backdrop-filter: blur(16px) saturate(1.2);
	}

	.article-modal__dialog {
		width: min(92vw, 48rem);
		border-color: color-mix(in srgb, var(--accent) 32%, transparent);
		background: linear-gradient(180deg, rgba(18, 15, 11, 0.42), rgba(5, 5, 5, 0.26));
		box-shadow: 0 28px 90px rgba(0,0,0,0.52);
		backdrop-filter: blur(18px) saturate(1.15);
	}

	.article-modal__content {
		display: grid;
		gap: 0.9rem;
		margin-top: 1rem;
		color: color-mix(in srgb, var(--fg) 78%, transparent);
	}

	.article-modal__image {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 7;
		object-fit: cover;
		border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
		margin-bottom: 0.35rem;
	}

	.article-modal__content h4 {
		margin-top: 0.45rem;
		font-family: var(--font-display);
		font-size: clamp(1.55rem, 4vw, 2.4rem);
		font-weight: 400;
		letter-spacing: 0.04em;
		color: var(--accent);
	}

	.article-modal__content p {
		font-size: 0.82rem;
		line-height: 1.85;
	}

	.article-modal__lead {
		color: var(--fg);
	}

	.site-modal__close {
		position: absolute;
		top: 0.65rem;
		right: 0.8rem;
		border: none;
		background: transparent;
		color: var(--fg);
		font-size: 2rem;
		cursor: pointer;
	}

	.site-modal__eyebrow {
		font-size: 0.62rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--accent);
		margin-bottom: 0.75rem;
	}

	.site-modal h3 {
		font-family: var(--font-display);
		font-size: clamp(2rem, 6vw, 3.5rem);
		line-height: 0.95;
		letter-spacing: 0.03em;
		margin-bottom: 0.75rem;
	}

	.site-modal__copy,
	.booking-form__message {
		font-size: 0.78rem;
		line-height: 1.8;
		color: rgba(237, 232, 223, 0.72);
		color: color-mix(in srgb, var(--fg) 72%, transparent);
	}

	.booking-modal__intro {
		display: grid;
		gap: 0.65rem;
	}

	.site-modal__copy a {
		color: var(--accent);
		text-decoration: none;
	}

	.policy-modal__dialog {
		width: min(92vw, 56rem);
	}

	.legal-modal__dialog {
		width: min(92vw, 44rem);
	}

	.legal-modal__content {
		display: grid;
		gap: 0.75rem;
		margin-top: 1rem;
	}

	.legal-modal__content p {
		font-size: 0.78rem;
		line-height: 1.8;
	}

	.policy-modal__subtitle {
		margin-bottom: 0.75rem;
		font-size: 0.72rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--accent) 78%, transparent);
	}

	.policy-modal__agreement {
		display: grid;
		gap: 0.25rem;
	}

	.policy-content {
		display: grid;
		gap: 1.15rem;
		margin-top: 1.15rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(212, 168, 75, 0.2);
		border-color: color-mix(in srgb, var(--accent) 20%, transparent);
		color: rgba(237, 232, 223, 0.76);
		color: color-mix(in srgb, var(--fg) 76%, transparent);
	}

	.policy-content section {
		display: grid;
		gap: 0.55rem;
	}

	.policy-content h4 {
		font-family: var(--font-display);
		font-size: clamp(1.45rem, 4vw, 2.1rem);
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 0.95;
		color: var(--accent);
	}

	.policy-content p,
	.policy-content li {
		font-size: 0.76rem;
		line-height: 1.75;
	}

	.policy-content ul,
	.policy-content ol {
		display: grid;
		gap: 0.35rem;
		padding-left: 1.15rem;
	}

	.policy-content strong {
		color: var(--fg);
		font-weight: 400;
	}

	.booking-form {
		display: grid;
		gap: 0.95rem;
		margin-top: 1rem;
	}

	.booking-form__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.95rem;
	}

	.booking-form label {
		display: grid;
		gap: 0.45rem;
	}

	.booking-form span {
		font-size: 0.62rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent);
	}

	.booking-form input,
	.booking-form select,
	.booking-form textarea {
		width: 100%;
		padding: 0.85rem 0.9rem;
		border: 1px solid var(--muted-line);
		background: rgba(255,255,255,0.03);
		color: var(--fg);
		font-family: var(--font-mono);
		font-size: 0.85rem;
	}

	.booking-form input:focus,
	.booking-form select:focus,
	.booking-form textarea:focus {
		outline: 1px solid var(--accent);
		border-color: var(--accent);
	}

	.booking-form__privacy-note {
		margin: 0;
		padding: 0.85rem 0.9rem;
		border: 1px solid var(--muted-line);
		background: rgba(255,255,255,0.03);
		color: var(--fg);
		font-family: var(--font-mono);
		font-size: 0.78rem;
		line-height: 1.55;
	}

	.booking-form__consent-group {
		display: grid;
		gap: 0.65rem;
	}

	.booking-form__checkbox {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: 0.7rem;
		padding: 0.8rem 0.9rem;
		border: 1px solid var(--muted-line);
		background: rgba(255,255,255,0.03);
	}

	.booking-form__checkbox input[type="checkbox"] {
		inline-size: 1rem;
		block-size: 1rem;
		margin-top: 0.15rem;
		padding: 0;
		border-color: var(--accent-line);
		accent-color: var(--accent);
	}

	.booking-form__checkbox span {
		color: rgba(237, 232, 223, 0.78);
		color: color-mix(in srgb, var(--fg) 78%, transparent);
		font-size: 0.7rem;
		letter-spacing: 0;
		line-height: 1.55;
		text-transform: none;
	}

	.booking-form__message.is-error {
		color: #ff9f9f;
	}

	.booking-form__message.is-success {
		color: #b7f1b2;
	}

	@media (max-width: 40em) {
		.site-modal__dialog {
			padding: 1.2rem;
		}

		.booking-form__grid {
			grid-template-columns: 1fr;
		}
	}
}