/* =====================================================================
   Camppass Home — premium dark + #ffa826 accent
   Prefix: cph-
   ===================================================================== */

:root {
	--cph-bg:         #0a0a0a;
	--cph-surface:    #141414;
	--cph-surface-2:  #1c1c1c;
	--cph-accent:     #ffa826;
	--cph-accent-2:   #ffbb55;
	--cph-accent-soft: rgba(255, 168, 38, 0.12);
	--cph-text:       #ffffff;
	--cph-text-muted: #9a9a9a;
	--cph-text-dim:   #6c6c6c;
	--cph-border:     rgba(255, 255, 255, 0.08);
	--cph-border-strong: rgba(255, 255, 255, 0.18);

	--cph-font-display: "Bebas Neue", "Inter Tight", "Inter", system-ui, sans-serif;
	--cph-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--cph-container: 1280px;
	--cph-gutter:    clamp(16px, 4vw, 40px);
	--cph-radius:    14px;
	--cph-radius-sm: 8px;

	--cph-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset & base scoped to cph ---------- */
.cph-main {
	background: var(--cph-bg);
	color: var(--cph-text);
	font-family: var(--cph-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
.cph-main *,
.cph-main *::before,
.cph-main *::after {
	box-sizing: border-box;
}
.cph-main img,
.cph-main video {
	max-width: 100%;
	display: block;
}
.cph-main a {
	color: var(--cph-text) !important;
	text-decoration: none;
}
.cph-main a:hover,
.cph-main a:active {
	color: var(--cph-text) !important;
}
.cph-main a.cph-hero__scroll:hover {
	color: var(--cph-accent) !important;
}
.cph-main h1, .cph-main h2, .cph-main h3 {
	font-family: var(--cph-font-display);
	color: var(--cph-text);
	margin: 0;
	letter-spacing: 0.01em;
	line-height: 1.05;
}
.cph-main p { margin: 0; }
.cph-main ul, .cph-main ol { list-style: none; margin: 0; padding: 0; }

/* ---------- Layout primitives ---------- */
.cph-section {
	position: relative;
	padding: clamp(64px, 9vw, 140px) 0;
}
.cph-container {
	max-width: var(--cph-container);
	margin: 0 auto;
	padding: 0 var(--cph-gutter);
}

.cph-section__head {
	max-width: 760px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.cph-section__head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.cph-section__title {
	font-size: clamp(36px, 5.5vw, 76px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.cph-section__title em {
	font-style: normal;
	color: var(--cph-accent);
}
.cph-section__lead {
	margin-top: 18px;
	font-size: clamp(15px, 1.2vw, 17px);
	color: var(--cph-text-muted);
	max-width: 60ch;
}
.cph-section__head--center .cph-section__lead { margin-left: auto; margin-right: auto; }
.cph-section__foot {
	margin-top: clamp(32px, 4vw, 56px);
	display: flex;
	justify-content: flex-end;
}
.cph-section__foot--center { justify-content: center; }

/* ---------- Kicker ---------- */
.cph-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cph-font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--cph-accent);
	margin-bottom: 18px;
}
.cph-kicker__dot {
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--cph-accent);
}

/* ---------- Buttons ---------- */
.cph-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--cph-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .35s var(--cph-ease), background-color .25s ease, color .25s ease, border-color .25s ease;
	will-change: transform;
}
.cph-btn--sm {
	padding: 12px 20px;
	font-size: 12px;
}
.cph-btn--primary {
	background: var(--cph-accent);
	color: #111 !important;
	border-color: var(--cph-accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(255, 168, 38, 0.25);
}
.cph-main a.cph-btn--primary {
	color: #111 !important;
}
.cph-btn--primary:hover {
	background: var(--cph-accent);
	border-color: var(--cph-accent);
	transform: translateY(-5px);
	box-shadow: 0 8px 28px rgba(255, 168, 38, 0.45);
	color: #111 !important;
}
.cph-btn--ghost {
	background: transparent;
	color: var(--cph-text);
	border-color: var(--cph-border-strong);
}
.cph-btn--ghost:hover {
	border-color: var(--cph-accent);
	color: var(--cph-accent);
	transform: translateY(-2px);
}
.cph-btn__arrow {
	display: inline-block;
	transition: transform .3s var(--cph-ease);
}
.cph-btn:hover .cph-btn__arrow { transform: translateX(4px); }
.cph-btn:hover .cph-btn__arrow--down { transform: translateY(4px); }

.cph-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--cph-accent) !important;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: border-color .25s ease, gap .25s var(--cph-ease);
}
.cph-link-arrow:hover {
	border-bottom-color: var(--cph-accent) !important;
	color: var(--cph-accent) !important;
	gap: 14px;
}

/* ---------- Reveal animation ---------- */
.cph-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s var(--cph-ease), transform .9s var(--cph-ease);
}
.cph-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.cph-hero {
	position: relative;
	min-height: 92vh;
	min-height: 92dvh;
	padding: 0;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}
.cph-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0a0a0a;
	z-index: -2;
}
.cph-hero__video,
.cph-hero__poster {
	position: absolute;
	inset: -2px;
	display: block;
	width: calc(100% + 4px);
	max-width: none;
	height: calc(100% + 4px);
	max-height: none;
	object-fit: cover;
	transform-origin: 50% 50%;
	transform: scale(1.25);
	filter: saturate(1.08) contrast(1.06) brightness(0.94);
	will-change: transform, filter;
	animation: cph-hero-zoom 36s var(--cph-ease) infinite alternate;
}
@keyframes cph-hero-zoom {
	to { transform: scale(1.28); }
}
.cph-hero__overlay {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.85) 88%, var(--cph-bg) 100%),
		linear-gradient(90deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0) 60%);
}
.cph-hero__overlay::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 22%, rgba(255, 175, 80, 0.26) 0%, rgba(255, 175, 80, 0) 36%),
		radial-gradient(circle at 82% 34%, rgba(255, 232, 185, 0.16) 0%, rgba(255, 232, 185, 0) 34%),
		radial-gradient(circle at 68% 78%, rgba(255, 128, 46, 0.12) 0%, rgba(255, 128, 46, 0) 44%);
	mix-blend-mode: screen;
	opacity: .66;
	animation: cph-light-leak-drift 14s ease-in-out infinite alternate;
}
.cph-hero__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(130% 90% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.22) 100%),
		repeating-linear-gradient(
			117deg,
			rgba(255,255,255,0.014) 0,
			rgba(255,255,255,0.014) 1px,
			transparent 1px,
			transparent 22px
		),
		repeating-linear-gradient(
			63deg,
			rgba(0,0,0,0.012) 0,
			rgba(0,0,0,0.012) 1px,
			transparent 1px,
			transparent 26px
		);
	opacity: .82;
}
@keyframes cph-light-leak-drift {
	0%   { transform: translate3d(-1.5%, 0, 0) scale(1.02); opacity: .55; }
	50%  { transform: translate3d(1.2%, -1.2%, 0) scale(1.05); opacity: .72; }
	100% { transform: translate3d(0.5%, 1%, 0) scale(1.03); opacity: .62; }
}
.cph-hero__grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(rgba(255,255,255,0.055) 0.75px, transparent 0.75px),
		radial-gradient(rgba(0,0,0,0.075) 0.95px, transparent 0.95px),
		radial-gradient(rgba(255,200,120,0.05) 0.85px, transparent 0.85px);
	background-size: 3px 3px, 4px 4px, 6px 6px;
	background-position: 0 0, 1px 1px, 2px 2px;
	mix-blend-mode: soft-light;
	opacity: .46;
	animation: cph-film-grain 0.55s steps(2) infinite;
}
.cph-hero__grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(255,255,255,0.015) 0,
			rgba(255,255,255,0.015) 1px,
			transparent 1px,
			transparent 6px
		),
		repeating-linear-gradient(
			90deg,
			rgba(0,0,0,0.012) 0,
			rgba(0,0,0,0.012) 1px,
			transparent 1px,
			transparent 7px
		);
	mix-blend-mode: multiply;
	opacity: .28;
}
.cph-hero__grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255,255,255,0.016) 0,
			rgba(255,255,255,0.016) 1px,
			transparent 1px,
			transparent 3px
		);
	opacity: .2;
}
@keyframes cph-film-grain {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-1.5%, 1%); }
	40%  { transform: translate(1%, -1.2%); }
	60%  { transform: translate(-1%, 0.6%); }
	80%  { transform: translate(0.8%, -0.8%); }
	100% { transform: translate(0, 0); }
}

.cph-hero__youtube {
	position: absolute;
	inset: -2px;
	z-index: 0;
	background: #000;
	overflow: hidden;
}
.cph-hero__youtube::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	background: #0a0a0a;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.cph-hero__youtube.is-loading::after {
	opacity: 1;
	transition: none;
}
.cph-hero__youtube-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	/* 16:9 full-coverage: her iki yönde de taşıp kırpılır */
	width: 177.78vh;   /* 100vh × 16/9 */
	height: 100vh;
	min-width: 100%;
	min-height: 56.25vw; /* 100vw × 9/16 */
	max-width: none;
	max-height: none;
	border: 0;
	display: block;
	transform: translate(-50%, -50%) scale(1.12);
	transform-origin: center;
}

.cph-hero__mode-toggle {
	position: absolute;
	top: clamp(16px, 2.4vw, 28px);
	right: clamp(16px, 2.4vw, 28px);
	display: inline-grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 8px 16px 8px 8px;
	min-width: clamp(238px, 25vw, 274px);
	border: 1px solid rgba(255,255,255,0.14) !important;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(18,18,18,0.78), rgba(10,10,10,0.62));
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	color: rgba(255,255,255,0.92);
	font-family: inherit;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	z-index: 8;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
	transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.elementor-kit-897 .cph-hero .cph-hero__mode-toggle,
.elementor-kit-897 .cph-hero__mode-toggle {
	background-color: transparent !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: rgba(255,255,255,0.92) !important;
	border-radius: 999px !important;
	padding: 8px 16px 8px 8px !important;
	min-height: 50px;
	text-align: left !important;
	white-space: normal !important;
	text-transform: none !important;
}
.elementor-kit-897 .cph-hero .cph-hero__mode-toggle * {
	line-height: inherit;
	font-family: inherit;
}
.cph-hero__mode-toggle:hover {
	border-color: rgba(255,168,38,0.55) !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 36px -12px rgba(255,168,38,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.elementor-kit-897 .cph-hero .cph-hero__mode-toggle:hover,
.elementor-kit-897 .cph-hero__mode-toggle:hover {
	background-color: transparent !important;
	color: rgba(255,255,255,0.98) !important;
}
.cph-hero__mode-toggle:focus-visible {
	outline: 2px solid var(--cph-accent);
	outline-offset: 3px;
}

.cph-hero__mode-toggle-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	line-height: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cph-accent), #ff7a18);
	color: #0a0a0a;
	flex-shrink: 0;
	box-shadow: 0 6px 18px -6px rgba(255,168,38,0.7);
	transition: transform .25s ease;
}
.cph-hero__mode-toggle:hover .cph-hero__mode-toggle-icon {
	transform: scale(1.04);
}
.cph-hero__mode-toggle-svg {
	display: block;
	width: 14px;
	height: 14px;
	line-height: 0;
	transition: opacity .2s ease, transform .2s ease;
}
.cph-hero__mode-toggle-svg--play {
	margin-left: 1px;
}
.cph-hero__mode-toggle-svg--pause {
	position: absolute;
	opacity: 0;
	transform: scale(0.7);
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-svg--play {
	opacity: 0;
	transform: scale(0.7);
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-svg--pause {
	opacity: 1;
	transform: scale(1);
}

.cph-hero__mode-toggle-text {
	display: inline-grid;
	grid-auto-rows: min-content;
	align-content: center;
	justify-items: start;
	row-gap: 2px;
	align-self: center;
	line-height: 1;
	text-align: left;
	flex: 1 1 auto;
	min-width: 0;
}
.cph-hero__mode-toggle-label {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}
.cph-hero__mode-toggle-meta {
	display: block;
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	transition: color .2s ease;
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-meta {
	color: var(--cph-accent);
}
.cph-hero__mode-toggle[aria-pressed="true"] {
	border-color: rgba(255,168,38,0.55) !important;
}
.elementor-kit-897 .cph-hero .cph-hero__mode-toggle[aria-pressed="true"],
.elementor-kit-897 .cph-hero__mode-toggle[aria-pressed="true"] {
	background-color: transparent !important;
	border-color: rgba(255,168,38,0.55) !important;
}

.cph-hero__mode-toggle-eq {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 2px;
	width: 14px;
	height: 14px;
	margin-left: 2px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .25s ease, transform .25s ease;
}
.cph-hero__mode-toggle-eq i {
	display: block;
	width: 2px;
	height: 4px;
	border-radius: 1px;
	background: var(--cph-accent);
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-eq {
	opacity: 1;
	transform: translateX(0);
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-eq i {
	animation: cph-eq 1s ease-in-out infinite;
}
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-eq i:nth-child(2) { animation-delay: .15s; }
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-eq i:nth-child(3) { animation-delay: .3s; }
.cph-hero__mode-toggle[aria-pressed="true"] .cph-hero__mode-toggle-eq i:nth-child(4) { animation-delay: .45s; }

@keyframes cph-eq {
	0%, 100% { height: 4px; }
	50% { height: 12px; }
}

@media (max-width: 640px) {
	.cph-hero__mode-toggle-meta { display: none; }
	.cph-hero__mode-toggle { padding: 6px 14px 6px 6px; gap: 10px; min-width: auto; }
	.cph-hero__mode-toggle-icon { width: 30px; height: 30px; }
}

.cph-hero__compass {
	position: absolute;
	top: clamp(80px, 10vh, 140px);
	right: clamp(-40px, -3vw, -20px);
	width: clamp(220px, 28vw, 420px);
	height: clamp(220px, 28vw, 420px);
	opacity: .6;
	pointer-events: none;
	z-index: -1;
}
.cph-hero__compass-rotor {
	transform-origin: 100px 100px;
	animation: cph-compass-spin 60s linear infinite;
}
@keyframes cph-compass-spin {
	to { transform: rotate(360deg); }
}

.cph-hero__content {
	width: 100%;
	padding-top: clamp(120px, 22vh, 220px);
	padding-bottom: clamp(80px, 14vh, 140px);
	position: relative;
}
.cph-hero__title {
	font-size: clamp(54px, 9vw, 132px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	max-width: 14ch;
	margin-bottom: 24px;
}
.cph-hero__title-em { color: var(--cph-accent); }
.cph-hero__title-thin {
	display: inline-block;
	color: var(--cph-text-muted);
	font-weight: 300;
	letter-spacing: 0.04em;
}
.cph-hero__sub {
	max-width: 52ch;
	font-size: clamp(15px, 1.25vw, 18px);
	color: rgba(255,255,255,0.78);
	margin-bottom: 36px;
}
.cph-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.cph-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--cph-text-muted) !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	transition: color .3s ease;
}
.cph-hero__scroll:hover {
	color: var(--cph-accent) !important;
}
.cph-hero__scroll-line {
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, var(--cph-accent));
	animation: cph-scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes cph-scroll-pulse {
	0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: .4; }
	50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* =====================================================================
   2. STATS BAR
   ===================================================================== */
.cph-stats {
	padding: clamp(40px, 5vw, 64px) 0;
	background: linear-gradient(180deg, var(--cph-bg) 0%, var(--cph-surface) 100%);
	border-top: 1px solid var(--cph-border);
	border-bottom: 1px solid var(--cph-border);
}
.cph-stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 56px);
}
.cph-stats__item {
	text-align: center;
	position: relative;
}
.cph-stats__item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: calc(var(--cph-gutter) * -0.4);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--cph-border);
}
.cph-stats__value {
	display: block;
	font-family: var(--cph-font-body);
	font-size: clamp(13px, 1.2vw, 15px);
	font-weight: 700;
	color: var(--cph-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.cph-stats__label {
	display: block;
	font-size: clamp(11px, 1vw, 12px);
	font-weight: 400;
	color: var(--cph-text-muted);
	text-transform: none;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* =====================================================================
   3. CARAVANS
   ===================================================================== */
.cph-caravans {
	background: var(--cph-bg);
	padding-top: clamp(24px, 2.5vw, 48px);
}
.cph-caravans__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 36px);
}

.cph-caravan-card {
	position: relative;
	background: var(--cph-surface);
	border: 1px solid var(--cph-border);
	border-radius: var(--cph-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .5s var(--cph-ease), border-color .3s ease, box-shadow .3s ease;
}
.cph-caravan-card:hover {
	transform: translateY(-6px);
	border-color: var(--cph-accent);
	box-shadow: 0 30px 60px -30px rgba(255,168,38,0.35);
}
.cph-caravan-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cph-surface-2);
}
.cph-caravan-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--cph-ease);
}
.cph-caravan-card:hover .cph-caravan-card__media img {
	transform: scale(1.06);
}
.cph-caravan-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55));
	pointer-events: none;
}

.cph-caravan-card__badges {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 32px);
	z-index: 2;
}
.cph-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 8px;
	background: rgba(10, 10, 10, 0.78);
	backdrop-filter: blur(10px);
	border: 1px solid var(--cph-border-strong);
	border-left: 2px solid var(--cph-accent);
	border-radius: var(--cph-radius-sm);
	font-size: 11px;
	font-weight: 600;
	color: var(--cph-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cph-badge__icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--cph-accent);
}

.cph-caravan-card__body {
	padding: 28px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}
.cph-caravan-card__title {
	font-size: clamp(24px, 2vw, 32px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cph-caravan-card__desc {
	font-size: 14.5px;
	color: var(--cph-text-muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cph-caravan-card__meta {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--cph-border);
}
.cph-caravan-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.cph-caravan-card__price-from {
	font-size: 12px;
	color: var(--cph-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.22em;
}
.cph-caravan-card__price-value {
	font-family: var(--cph-font-display);
	font-size: clamp(28px, 2.6vw, 36px);
	color: var(--cph-accent);
	letter-spacing: 0.02em;
}
.cph-caravan-card__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cph-caravan-card__actions .cph-btn { width: 100%; justify-content: center; }

/* =====================================================================
   4. CONFIGURATOR TEASER
   ===================================================================== */
.cph-configurator-teaser {
	background: linear-gradient(180deg, var(--cph-bg), var(--cph-surface) 60%, var(--cph-bg));
	overflow: hidden;
	padding-bottom: clamp(48px, 6vw, 100px);
}
/* Grain texture — configurator teaser */
.cph-configurator-teaser::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 3px 3px;
	mix-blend-mode: overlay;
	opacity: .45;
	z-index: 0;
}
.cph-configurator-teaser__route {
	position: absolute;
	inset: auto 0 28% 0;
	height: 200px;
	pointer-events: none;
	opacity: .8;
}
.cph-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2vw, 32px);
	position: relative;
}
.cph-step {
	background: var(--cph-surface-2);
	border: 1px solid var(--cph-border);
	border-radius: var(--cph-radius);
	padding: 32px 26px 30px;
	position: relative;
	transition: border-color .3s ease, transform .3s var(--cph-ease);
}
.cph-step:hover {
	border-color: var(--cph-accent);
	transform: translateY(-4px);
}
.cph-step__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--cph-accent);
	color: #111;
	font-family: var(--cph-font-display);
	font-size: 18px;
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}
.cph-step__title {
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}
.cph-step__desc {
	font-size: 14.5px;
	color: var(--cph-text-muted);
	line-height: 1.6;
}

/* =====================================================================
   5. CTA BANNER
   ===================================================================== */
.cph-cta {
	position: relative;
	padding: clamp(80px, 14vw, 180px) 0;
	background-image: var(--cph-cta-image, none);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	overflow: hidden;
	isolation: isolate;
}
/* Grain texture — CTA banner */
.cph-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 3px 3px;
	mix-blend-mode: overlay;
	opacity: .4;
	z-index: 1;
}
.cph-cta__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at left center, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.85) 100%),
		linear-gradient(180deg, var(--cph-bg) 0%, transparent 18%, transparent 82%, var(--cph-bg) 100%);
	z-index: -1;
}
.cph-cta__inner { max-width: 720px; }
.cph-cta__title {
	font-size: clamp(48px, 7.5vw, 110px);
	text-transform: uppercase;
	margin-bottom: 24px;
	line-height: 0.98;
}
.cph-cta__title em {
	font-style: normal;
	color: var(--cph-accent);
}
.cph-cta__sub {
	font-size: clamp(15px, 1.2vw, 18px);
	color: rgba(255,255,255,0.85);
	max-width: 56ch;
	margin-bottom: 24px;
}
.cph-cta__actions {
	margin-top: 40px;
}

/* =====================================================================
   6. BLOG
   ===================================================================== */
.cph-blog {
	background: var(--cph-bg);
}
.cph-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 36px);
}
.cph-post-card {
	display: flex;
	flex-direction: column;
	background: var(--cph-surface);
	border: 1px solid var(--cph-border);
	border-radius: var(--cph-radius);
	overflow: hidden;
	transition: transform .5s var(--cph-ease), border-color .3s ease;
}
.cph-post-card:hover {
	transform: translateY(-4px);
	border-color: var(--cph-accent);
}
.cph-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.cph-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--cph-ease);
}
.cph-post-card:hover .cph-post-card__media img { transform: scale(1.05); }
.cph-post-card__body {
	padding: 24px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}
.cph-post-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.cph-chip {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cph-accent);
	background: var(--cph-accent-soft);
	border-radius: 999px;
}
.cph-post-card__date {
	font-size: 12px;
	color: var(--cph-text-dim);
	letter-spacing: 0.08em;
}
.cph-post-card__title {
	font-family: var(--cph-font-body) !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.cph-post-card__title a { color: var(--cph-text) !important; transition: color .25s ease; }
.cph-post-card__title a:hover { color: var(--cph-accent) !important; }
.cph-post-card__excerpt {
	font-size: 14.5px;
	color: var(--cph-text-muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cph-post-card .cph-link-arrow { margin-top: auto; }

/* =====================================================================
   7. PARTNERS
   ===================================================================== */
.cph-partners {
	background: var(--cph-surface);
	border-top: 1px solid var(--cph-border);
}
.cph-partners__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(8px, 1.5vw, 24px);
	align-items: center;
}
.cph-partners__item {
	border: 1px solid var(--cph-border);
	border-radius: var(--cph-radius-sm);
	padding: 10px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	background: var(--cph-bg);
	transition: border-color .3s ease, background-color .3s ease;
}
.cph-partners__item:hover {
	border-color: var(--cph-accent);
	background: var(--cph-surface-2);
}
.cph-partners__link img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
	transition: filter .35s ease, transform .35s var(--cph-ease);
	border-radius: 10px;
}
.cph-partners__item:hover .cph-partners__link img {
	filter: brightness(120%) contrast(110%) saturate(100%) blur(0px) hue-rotate(0deg);
	transform: scale(1.05);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.cph-caravans__grid,
	.cph-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cph-steps {
		grid-template-columns: repeat(2, 1fr);
	}
	.cph-partners__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.cph-stats__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.cph-stats__item:nth-child(2)::after { display: none; }
}

@media (max-width: 720px) {
	.cph-hero { min-height: 88vh; min-height: 88dvh; }
	.cph-hero__content {
		padding-top: clamp(100px, 18vh, 160px);
		padding-bottom: clamp(72px, 12vh, 120px);
	}
	.cph-hero__compass {
		width: 200px;
		height: 200px;
		top: 100px;
		right: -60px;
		opacity: .35;
	}
	.cph-hero__actions { width: 100%; }
	.cph-hero__actions .cph-btn { flex: 1; justify-content: center; }
	.cph-hero__scroll { display: none; }

	.cph-stats__list { grid-template-columns: repeat(2, 1fr); }
	.cph-stats__item::after { display: none !important; }

	.cph-caravans__grid,
	.cph-blog__grid {
		grid-template-columns: 1fr;
	}
	.cph-steps { grid-template-columns: 1fr; }

	.cph-partners__grid { grid-template-columns: repeat(3, 1fr); }

	.cph-section__foot { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cph-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.cph-hero__video,
	.cph-hero__poster,
	.cph-hero__compass-rotor,
	.cph-hero__scroll-line,
	.cph-hero__grain,
	.cph-hero__grain::after,
	.cph-hero__overlay::before { animation: none !important; }
	.cph-main * { transition: none !important; }
	.cph-marquee-strip__track { animation: none !important; }
}

/* ─── Marquee Strip ──────────────────────────────────────────────────── */
.cph-marquee-strip {
	overflow: hidden;
	background: #0f0f0f;
	border-top: 1px solid rgba(255, 168, 38, 0.12);
	border-bottom: 1px solid rgba(255, 168, 38, 0.12);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	user-select: none;
	pointer-events: none;
}

.cph-marquee-strip__inner {
	display: flex;
	overflow: hidden;
	padding: 14px 0;
}

.cph-marquee-strip__inner--left .cph-marquee-strip__track {
	animation: cph-marquee-left 28s linear infinite;
}
.cph-marquee-strip__inner--right .cph-marquee-strip__track {
	animation: cph-marquee-right 22s linear infinite;
}

.cph-marquee-strip__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
}

.cph-marquee-strip__word {
	font-family: var(--cph-font-display);
	font-size: clamp(11px, 1.1vw, 14px);
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.16);
	padding: 0 8px;
	text-transform: uppercase;
}
.cph-marquee-strip__word--accent {
	color: rgba(255, 168, 38, 0.5);
}

.cph-marquee-strip__sep {
	color: rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
}
.cph-marquee-strip__sep--accent {
	color: rgba(255, 168, 38, 0.35);
}

@keyframes cph-marquee-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes cph-marquee-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* ─── Manifesto Strip ───────────────────────────────────────────────── */
.cph-manifesto {
	position: relative;
	min-height: 65vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: var(--cph-manifesto-bg, none);
	background-size: cover;
	background-position: center 40%;
	background-attachment: fixed;
	overflow: visible;
}
/* Soft gradient fade: configurator-teaser → manifesto */
.cph-manifesto::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(180deg, var(--cph-bg) 0%, rgba(10,10,10,0.6) 50%, transparent 100%);
	z-index: 3;
	pointer-events: none;
}
/* Soft gradient fade: manifesto → blog */
.cph-manifesto::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.6) 50%, var(--cph-bg) 100%);
	z-index: 3;
	pointer-events: none;
}
.cph-manifesto__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.38) 45%, rgba(10,10,10,0.78) 100%);
	z-index: 1;
}
.cph-manifesto__grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 3px 3px;
	mix-blend-mode: overlay;
	opacity: .45;
	z-index: 2;
}
.cph-manifesto__inner {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(80px, 12vw, 160px) var(--cph-gutter);
}
.cph-manifesto__icon {
	margin-bottom: 28px;
	opacity: 0.7;
}
.cph-manifesto__quote {
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cph-manifesto__line {
	display: block;
	font-family: var(--cph-font-display);
	font-size: clamp(42px, 6.5vw, 96px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.04;
	color: var(--cph-text);
	text-shadow: 0 2px 32px rgba(0,0,0,0.6);
}
.cph-manifesto__line em {
	font-style: normal;
	color: var(--cph-accent);
}
.cph-manifesto__rule {
	margin-top: 32px;
	width: 72px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cph-accent), transparent);
	opacity: 0.8;
}
.cph-manifesto__sub {
	margin-top: 20px;
	font-size: clamp(13px, 1.2vw, 16px);
	color: rgba(255,255,255,0.45);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	max-width: 560px;
	text-align: center;
	line-height: 1.7;
}
.cph-manifesto__actions {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}
