/* ============================================================
   Demaura Home — front-end styles
   All component rules are scoped under .demaura-home so they
   keep a consistent specificity and resist host-theme bleed.
   Colour/opacity variables are injected inline (also scoped to
   .demaura-home); fallbacks below keep the design intact if the
   inline block is ever missing.
   ============================================================ */

.demaura-home {
	--dm-bg: #F6F0E6;
	--dm-text: #1F2D27;
	--dm-accent: #B8865B;
	--dm-green: #233F35;
	--dm-button: #233F35;
	--dm-beige: #EFE3D1;
	--dm-sage: #DDE3D3;
	--dm-muted: #586A60;
	--dm-video-opacity: 0.80;
	--dm-overlay-opacity: 0.58;

	--dm-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--dm-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	background: var(--dm-bg);
	color: var(--dm-text);
	font-family: var(--dm-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.demaura-home * { box-sizing: border-box; }

/* ---- shared button ---- */
.demaura-home .demaura-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	border: 1px solid rgba(35, 63, 53, .18);
	cursor: pointer;
	transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.demaura-home .demaura-btn-primary {
	background: var(--dm-button);
	color: #fff;
	border-color: transparent;
}
.demaura-home .demaura-btn-secondary {
	background: rgba(246, 240, 230, .42);
	color: var(--dm-text);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.demaura-home .demaura-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(35, 63, 53, .14); }
.demaura-home a:focus-visible,
.demaura-home button:focus-visible {
	outline: 2px solid var(--dm-accent);
	outline-offset: 3px;
}

/* ============================================================
   HERO
   ============================================================ */
.demaura-home .demaura-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 80px 24px;
	isolation: isolate;
	background: var(--dm-bg);
	overflow: hidden;
}
.demaura-home .demaura-hero-video,
.demaura-home .demaura-hero-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	margin: 0;
}
.demaura-home .demaura-hero-fallback { background-size: cover; background-position: center; }
.demaura-home .demaura-hero-video {
	object-fit: cover;
	opacity: var(--dm-video-opacity);
	filter: saturate(.92) contrast(.96) brightness(1.03);
}
.demaura-home .demaura-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 38%,
			rgba(246, 240, 230, calc(var(--dm-overlay-opacity) * .55)) 0%,
			rgba(246, 240, 230, var(--dm-overlay-opacity)) 55%,
			rgba(246, 240, 230, .96) 100%);
}
.demaura-home .demaura-hero-grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: .16;
	pointer-events: none;
	background-image: radial-gradient(rgba(35, 63, 53, .10) .5px, transparent .5px);
	background-size: 16px 16px;
	mix-blend-mode: multiply;
}

/* aura rings */
.demaura-home .demaura-rings {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.demaura-home .demaura-rings span {
	position: absolute;
	border: 1px solid rgba(35, 63, 53, .10);
	border-radius: 999px;
	animation: demauraPulse 12s ease-in-out infinite;
}
.demaura-home .demaura-rings span:nth-child(1) { width: min(58vw, 720px); height: min(58vw, 720px); }
.demaura-home .demaura-rings span:nth-child(2) { width: min(42vw, 520px); height: min(42vw, 520px); animation-delay: 1.6s; }
.demaura-home .demaura-rings span:nth-child(3) { width: min(78vw, 940px); height: min(78vw, 940px); animation-delay: 3.2s; opacity: .6; }
@keyframes demauraPulse {
	0%, 100% { transform: scale(1); opacity: .55; }
	50% { transform: scale(1.03); opacity: .26; }
}

.demaura-home .demaura-hero-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: min(94vw, 1200px);
	width: 100%;
	margin: auto;
}

/* catalog carousel (top of hero, in place of the logo) */
.demaura-home .demaura-catalog {
	position: relative;
	width: 100%;
	max-width: min(94vw, 1200px);
	margin: 0 auto clamp(28px, 4vh, 52px);
}
.demaura-home .demaura-catalog-viewport {
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(31, 45, 39, .16);
	background: var(--dm-journey-bg, #E6DCCC);
}
.demaura-home .demaura-catalog-track {
	display: flex;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.demaura-home .demaura-cat-slide {
	position: relative;
	flex: 0 0 100%;
	display: block;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.demaura-home .demaura-cat-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.demaura-home .demaura-cat-caption {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 52px);
	color: #F6F0E6;
}
.demaura-home .demaura-cat-caption > * { max-width: min(90%, 620px); }
/* vertical placement + readability gradient */
.demaura-home .demaura-cat-bl,
.demaura-home .demaura-cat-bc,
.demaura-home .demaura-cat-br {
	bottom: 0;
	padding-bottom: clamp(42px, 5vw, 58px);
	background: linear-gradient(to top, rgba(20, 32, 27, .84), rgba(20, 32, 27, .32) 52%, rgba(20, 32, 27, 0) 88%);
}
.demaura-home .demaura-cat-tl,
.demaura-home .demaura-cat-tc,
.demaura-home .demaura-cat-tr {
	top: 0;
	background: linear-gradient(to bottom, rgba(20, 32, 27, .84), rgba(20, 32, 27, .32) 52%, rgba(20, 32, 27, 0) 88%);
}
.demaura-home .demaura-cat-cc {
	top: 0;
	bottom: 0;
	justify-content: center;
	background: linear-gradient(to top, rgba(20, 32, 27, .55), rgba(20, 32, 27, .32) 50%, rgba(20, 32, 27, .55));
}
/* horizontal alignment */
.demaura-home .demaura-cat-bl,
.demaura-home .demaura-cat-tl { align-items: flex-start; text-align: left; }
.demaura-home .demaura-cat-br,
.demaura-home .demaura-cat-tr { align-items: flex-end; text-align: right; }
.demaura-home .demaura-cat-bc,
.demaura-home .demaura-cat-tc,
.demaura-home .demaura-cat-cc { align-items: center; text-align: center; }
.demaura-home .demaura-cat-overline {
	font-family: var(--dm-accent-font, var(--dm-sans));
	font-size: clamp(10px, 1vw, 12px);
	letter-spacing: .28em;
	text-transform: uppercase;
	font-weight: 700;
	color: #E9D9C4;
}
.demaura-home .demaura-cat-title {
	font-family: var(--dm-serif);
	font-size: clamp(22px, 3vw, 40px);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -.01em;
}
.demaura-home .demaura-cat-text {
	font-size: clamp(13px, 1.3vw, 16px);
	line-height: 1.5;
	color: rgba(246, 240, 230, .9);
	max-width: 62ch;
}
/* arrows */
.demaura-home .demaura-cat-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(36px, 4vw, 44px);
	height: clamp(36px, 4vw, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #F6F0E6;
	cursor: pointer;
	z-index: 3;
	transition: transform .2s ease;
}
.demaura-home .demaura-cat-arrow svg {
	width: 58%;
	height: 58%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 4px rgba(20, 32, 27, .55));
}
.demaura-home .demaura-cat-arrow:hover { background: transparent; transform: translateY(-50%) scale(1.12); }
.demaura-home .demaura-cat-prev { left: clamp(10px, 1.5vw, 18px); }
.demaura-home .demaura-cat-next { right: clamp(10px, 1.5vw, 18px); }
/* dots */
.demaura-home .demaura-cat-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	gap: 8px;
	justify-content: center;
	z-index: 3;
}
.demaura-home .demaura-cat-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(246, 240, 230, .5);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.demaura-home .demaura-cat-dot.is-on { background: #F6F0E6; transform: scale(1.28); }
.demaura-home .demaura-logo {
	font-family: var(--dm-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1;
	color: var(--dm-green);
	letter-spacing: -.02em;
	margin: 0 auto clamp(20px, 3vh, 34px);
	text-align: center;
}
.demaura-home .demaura-logo img {
	display: block;
	margin: 0 auto;
	width: var(--dm-logo-size, 160px);
	max-width: 80%;
	height: auto;
}
.demaura-home .demaura-overline {
	font-family: var(--dm-accent-font, var(--dm-sans));
	font-size: 11px;
	letter-spacing: .4em;
	color: var(--dm-muted);
	font-weight: 600;
	margin: 0 0 clamp(14px, 2vh, 22px);
}
.demaura-home .demaura-title {
	font-family: var(--dm-serif);
	font-weight: 500;
	font-size: clamp(42px, 5.4vw, 76px);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--dm-green);
	margin: 0 0 clamp(16px, 2.2vh, 24px);
}
.demaura-home .demaura-description {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.75;
	max-width: 620px;
	margin: 0 auto clamp(26px, 3.6vh, 38px);
	color: var(--dm-muted);
}
.demaura-home .demaura-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.demaura-home .demaura-scroll-cue {
	position: relative;
	margin: clamp(34px, 6vh, 72px) auto 0;
	z-index: 6;
	color: var(--dm-muted);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.demaura-home .demaura-scroll-line {
	position: relative;
	width: 1px;
	height: 46px;
	background: var(--dm-muted);
	animation: demauraCue 1.9s ease-in-out infinite;
}
.demaura-home .demaura-scroll-line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--dm-muted);
	border-bottom: 1px solid var(--dm-muted);
	transform: translate(-50%, 50%) rotate(45deg);
}
@keyframes demauraCue {
	0%, 100% { transform: translateY(0); opacity: .55; }
	50% { transform: translateY(7px); opacity: 1; }
}

/* ============================================================
   JOURNEY — sticky frame sequence
   Outer section is tall (height set inline in VH); the inner
   element sticks for the whole scroll. Left 1/3 text, right 2/3 visual.
   ============================================================ */
.demaura-home .demaura-journey {
	position: relative;
	background: var(--dm-journey-bg, #E6DCCC);
}
.demaura-home .demaura-journey-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* full-bleed cinematic background (slightly taller for the rise-in / parallax) */
.demaura-home .demaura-journey-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -9vh;
	height: 118vh;
	z-index: 0;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.demaura-home .demaura-journey-fallback,
.demaura-home .demaura-journey-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	display: block;
}
.demaura-home .demaura-journey-canvas { opacity: 0; transition: opacity .5s ease; }
.demaura-home .demaura-journey.is-ready .demaura-journey-canvas { opacity: 1; }
.demaura-home .demaura-journey.is-ready .demaura-journey-fallback { opacity: 0; transition: opacity .5s ease; }

/* legibility scrim — cream veil concentrated where the centred text sits */
.demaura-home .demaura-journey-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(64% 52% at 50% 50%,
			rgba(246, 240, 230, var(--dm-journey-scrim, .5)) 0%,
			rgba(246, 240, 230, calc(var(--dm-journey-scrim, .5) * .58)) 42%,
			rgba(246, 240, 230, 0) 76%);
}

.demaura-home .demaura-journey-inner {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* timeline rail — pinned far left, vertically centred */
.demaura-home .demaura-journey-rail {
	position: absolute;
	left: max(20px, 5vw);
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: clamp(240px, 48vh, 440px);
}
.demaura-home .demaura-rail-track,
.demaura-home .demaura-rail-fill {
	position: absolute;
	left: 7px;
	top: 0;
	width: 2px;
	border-radius: 2px;
}
.demaura-home .demaura-rail-track { bottom: 0; background: rgba(184, 134, 91, .26); }
.demaura-home .demaura-rail-fill { height: 0; background: var(--dm-accent); }
.demaura-home .demaura-rail-dot {
	position: absolute;
	left: 1px;
	top: 0;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--dm-accent);
	box-shadow: 0 0 0 5px rgba(184, 134, 91, .16);
}
.demaura-home .demaura-rail-node {
	position: absolute;
	left: 4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--dm-journey-bg, #E6DCCC);
	border: 1.5px solid var(--dm-accent);
}
.demaura-home .demaura-rail-node.is-on { background: var(--dm-accent); }
.demaura-home .demaura-rail-num {
	position: absolute;
	left: 22px;
	margin-top: -7px;
	font-size: 10px;
	letter-spacing: .14em;
	font-weight: 700;
	color: var(--dm-accent);
	opacity: .45;
	white-space: nowrap;
}
.demaura-home .demaura-rail-num.is-on { opacity: 1; }

/* flowing text — centred on screen (desktop + mobile) */
.demaura-home .demaura-journey-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(90vw, 660px);
	text-align: center;
}
.demaura-home .demaura-journey-steps { display: grid; }
.demaura-home .demaura-step {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
/* no-JS / first-paint fallback: show the first step */
.demaura-home .demaura-step.is-active { opacity: 1; }
.demaura-home .demaura-step-label {
	font-family: var(--dm-step-font, inherit);
	font-size: calc(12px * var(--dm-step-scale, 1));
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--dm-accent);
	font-weight: 700;
	margin-bottom: 16px;
}
.demaura-home .demaura-step-heading {
	font-family: var(--dm-step-font, var(--dm-serif));
	font-weight: var(--dm-step-hw, 500);
	font-size: calc(clamp(42px, 3.6vw, 60px) * var(--dm-step-scale, 1));
	line-height: 1.04;
	letter-spacing: -.01em;
	color: var(--dm-green);
	margin: 0 0 18px;
}
.demaura-home .demaura-step-text {
	font-family: var(--dm-step-font, inherit);
	font-weight: var(--dm-step-bw, 400);
	font-size: calc(clamp(15px, 1.2vw, 18px) * var(--dm-step-scale, 1));
	line-height: 1.8;
	color: var(--dm-muted);
	margin: 0 auto;
	max-width: 540px;
}

/* ============================================================
   PRODUCT INTRO
   ============================================================ */
.demaura-home .demaura-products {
	background: var(--dm-bg);
	padding: clamp(90px, 12vw, 150px) 24px;
}
.demaura-home .demaura-products-inner {
	max-width: min(94vw, 1200px);
	margin: 0 auto;
	text-align: center;
}
.demaura-home .demaura-products-title {
	font-family: var(--dm-serif);
	font-weight: 500;
	font-size: clamp(42px, 5.4vw, 76px);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--dm-green);
	margin: 0 0 clamp(16px, 2.2vh, 24px);
}
.demaura-home .demaura-products-text {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.75;
	color: var(--dm-muted);
	margin: 0 auto clamp(26px, 3.6vh, 38px);
	max-width: 620px;
}
.demaura-home .demaura-products-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 36px;
}
.demaura-home .demaura-products-tags span {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--dm-green);
	padding: 9px 18px;
	border: 1px solid rgba(35, 63, 53, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .35);
}

/* ============================================================
   CLOSING BRAND STORY
   ============================================================ */
.demaura-home .demaura-closing {
	background: var(--dm-closing-bg, var(--dm-green));
	color: var(--dm-closing-text, var(--dm-bg));
	text-align: center;
	padding: var(--dm-closing-pad, 110px) 24px;
}
.demaura-home .demaura-closing-mark {
	font-family: var(--dm-serif);
	font-style: italic;
	font-size: clamp(46px, 7vw, 92px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--dm-closing-text, var(--dm-bg));
}
.demaura-home .demaura-closing-line {
	margin: 22px 0 0;
	font-size: 13px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--dm-closing-text, var(--dm-bg));
	opacity: .72;
}

/* ============================================================
   RESPONSIVE — mobile stacks vertically, visual above text
   ============================================================ */
@media (max-width: 860px) {
	.demaura-home .demaura-cat-slide { aspect-ratio: auto; height: clamp(300px, 52vh, 520px); }
	.demaura-home .demaura-hero-video { opacity: calc(var(--dm-video-opacity) * .6); }

	/* frames: fill exactly (no extra parallax height) so they are as un-zoomed
	   as a full-bleed cover allows on a portrait screen */
	.demaura-home .demaura-journey-bg { top: 0; height: 100vh; height: 100svh; }

	.demaura-home .demaura-journey-rail { display: none; }
	.demaura-home .demaura-journey-text { width: min(92vw, 560px); }
	/* heading now matches the hero title (both floor at 42px on phones);
	   label matches the hero overline (11px) and body matches the hero
	   description (16px) on phones */
	.demaura-home .demaura-step-label { font-size: calc(11px * var(--dm-step-scale, 1)); letter-spacing: .4em; }
	.demaura-home .demaura-step-text { font-size: calc(clamp(15px, 4.2vw, 16px) * var(--dm-step-scale, 1)); line-height: 1.7; }
	/* centred radial veil on small screens — behind the text, clear at edges */
	.demaura-home .demaura-journey-scrim {
		background: radial-gradient(150% 44% at 50% 50%,
			rgba(246, 240, 230, calc(var(--dm-journey-scrim, .5) + .06)) 0%,
			rgba(246, 240, 230, calc(var(--dm-journey-scrim, .5) * .5)) 50%,
			rgba(246, 240, 230, 0) 84%);
	}
}

/* ============================================================
   ACCESSIBILITY — respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.demaura-home .demaura-rings span,
	.demaura-home .demaura-scroll-line { animation: none; }
	.demaura-home .demaura-catalog-track,
	.demaura-home .demaura-btn,
	.demaura-home .demaura-journey-canvas { transition: none; }
}