/* ============================================================
   Domus — footer  [domus_footer]
   Figma: home 122:280 (desktop) — veil state Group 202 (contact row + wordmark over a blurred photo),
   photo state Group 111 + Group 119 (photo with the copyright bar). Mobile 737:1538.

   Reveal (default, .dm-footer--reveal): the footer is two "stages" tall. The photo is sticky for one stage;
   the blurred veil with the contact row scrolls away over it, the wordmark pins to the top and the
   copyright bar to the bottom of the viewport until the page ends. Prototype: Figma sticky nodes 347:906.
   Static (no class): one stage, everything in place, no scroll effect.
   ============================================================ */

.dm-footer {
	--dm-footer-stage: 100vh;
	--dm-footer-pad: 50px;     /* space above the wordmark in the pinned band */
	--dm-footer-logo-h: 85px;  /* wordmark height (238 wide) */
	--dm-footer-gap: 30px;     /* wordmark → copyright bar (first screen) */
	--dm-footer-bar-h: 16px;   /* copyright bar height (one line) */
	--dm-footer-foot: 33px;    /* copyright bar → foot (Figma) */
	/* pinned band = pad + wordmark + the space the bar needs under it (the two scroll together) */
	--dm-footer-band: calc(var(--dm-footer-pad) + var(--dm-footer-logo-h) + var(--dm-footer-gap) + var(--dm-footer-bar-h) + var(--dm-footer-foot));

	position: relative;
	min-height: var(--dm-footer-stage);
	margin: 0;
	padding: 0;
	background: #000;
	color: #fff;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	overflow: clip;
}
/* Large viewport: the screen with the browser bars collapsed. Sizing by the small one leaves a strip of veil
   at the top and a gap under the photo once Safari hides its bars. (100vh on iOS already means the large one.) */
@supports (height: 100lvh) { .dm-footer { --dm-footer-stage: 100lvh; } }
.dm-footer--reveal { min-height: calc(var(--dm-footer-stage) * 2); }

/* ---------- Element resets (theme / Elementor kit proof, same policy as the header) ---------- */
.dm-footer *,
.dm-footer *::before,
.dm-footer *::after { box-sizing: border-box; }
.dm-footer a {
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	outline: none;
	transition: none;
}
.dm-footer button {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit !important;
	text-transform: inherit;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto;
	cursor: pointer;
	outline: none;
	transition: none;
}
.dm-footer a:hover,
.dm-footer a:focus,
.dm-footer a:active,
.dm-footer a:visited,
.dm-footer button:hover,
.dm-footer button:focus,
.dm-footer button:active {
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none;
}
.dm-footer a:focus-visible,
.dm-footer button:focus-visible { outline: 1px solid currentColor !important; outline-offset: 2px; }
.dm-footer p { margin: 0 !important; padding: 0 !important; }
.dm-footer svg { display: block; flex: none; }
.dm-footer img { border: 0; }

.dm-footer__inner {
	width: 100%;
	max-width: calc(var(--dm-max) + var(--dm-side) * 2); /* like an Elementor boxed container: --dm-max of content + the gutters outside it */
	margin: 0 auto;
	padding: 0 var(--dm-side);
}

/* ---------- Photo stage (sticky in reveal mode) ---------- */
.dm-footer__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.dm-footer--reveal .dm-footer__media {
	position: sticky;
	top: 0;
	height: var(--dm-footer-stage);
}
.dm-footer .dm-footer__photo { /* outranks ".elementor img { height:auto; max-width:100% }" */
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center;
}
/* Figma Rectangle 403: black 50% at 79% */
.dm-footer__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: .79; }

/* ---------- Blurred veil with the contact row (Figma 138:276: 45,45,45 at 40% + 25px blur) ----------
   Reveal mode: the veil scrolls away until only its last --dm-footer-band pixels remain, then sticks at the
   top of the viewport as the band behind the wordmark (equal space above and below the wordmark). */
.dm-footer__veil {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	height: var(--dm-footer-stage);
	background: rgba(45, 45, 45, .4);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
}
.dm-footer--reveal .dm-footer__veil {
	position: sticky;
	top: calc(var(--dm-footer-band) - var(--dm-footer-stage));
	margin-top: calc(-1 * var(--dm-footer-stage)); /* back over the sticky photo stage */
}

/* Top row: four columns 288 / 351 / 167 / 534 with ~12px gaps, rules at y=27, text at y=37 */
.dm-footer__top {
	display: grid;
	grid-template-columns: 288fr 351fr 167fr 534fr;
	gap: 12px;
	padding-top: 27px;
}
.dm-footer__col { border-top: 1px solid #fff; padding-top: 10px; }
.dm-footer__statement { max-width: 393px; }
.dm-footer__social a { display: flex; align-items: center; }
.dm-footer__social a > span { flex: none; width: 67px; } /* arrows share one x */
.dm-footer__social svg { width: 7.6px; height: 7.4px; }

/* ---------- Wordmark: 238×85 inside the band (pad above / below); pins --dm-footer-pad below the viewport top ---------- */
.dm-footer__logo {
	position: absolute;
	top: calc(var(--dm-footer-stage) - var(--dm-footer-foot) - var(--dm-footer-bar-h) - var(--dm-footer-gap) - var(--dm-footer-logo-h));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}
.dm-footer__logo .dm-footer__inner { height: 100%; }
.dm-footer__logo a {
	display: block;
	width: 238px;
	pointer-events: auto;
}
.dm-footer--reveal .dm-footer__logo a { position: sticky; top: var(--dm-footer-pad); }
.dm-footer__logo svg,
.dm-footer__logo img { display: block; width: 100%; height: auto; }

/* ---------- Copyright bar: --dm-footer-foot above the foot of the veil. Reveal mode: it rides in with the veil
   (always on the blurred surface) and pins once it reaches the bottom of the viewport — a sticky *top* at
   viewport-height minus its offset, so it is never pulled up early over the un-blurred photo ---------- */
.dm-footer__bottom {
	position: absolute;
	top: calc(var(--dm-footer-stage) - var(--dm-footer-foot) - var(--dm-footer-bar-h));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	pointer-events: none;
}
.dm-footer__bottom-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 13px;
	line-height: var(--dm-footer-bar-h);
	pointer-events: auto;
}
.dm-footer--reveal .dm-footer__bottom-inner {
	position: sticky;
	top: calc(100vh - var(--dm-footer-foot) - var(--dm-footer-bar-h));
}
@supports (height: 100dvh) {
	/* follows the browser bars as they collapse, so the bar stays --dm-footer-foot above the visible bottom */
	.dm-footer--reveal .dm-footer__bottom-inner { top: calc(100dvh - var(--dm-footer-foot) - var(--dm-footer-bar-h)); }
}
.dm-footer__copy,
.dm-footer__to-top { text-transform: uppercase; }
.dm-footer__credits { position: absolute; left: 50%; transform: translateX(-50%); }
.dm-footer .dm-footer__to-top { display: flex; align-items: center; gap: 8px; }
.dm-footer__to-top svg { width: 8.7px; height: 8.7px; }

/* ---------- Mobile (Figma 737:1538): one column on a 66px pitch, wordmark 157px, two-line bar 21px from the foot ---------- */
@media (max-width: 767px) {
	.dm-footer__shade { opacity: 1; mix-blend-mode: multiply; }
	.dm-footer__top { grid-template-columns: 1fr; gap: 25px; padding-top: 41px; } /* 25 + 1 + 6 + 34 = 66 */
	.dm-footer__col { padding-top: 6px; }
	.dm-footer__statement { max-width: 293px; }
	.dm-footer { --dm-footer-pad: 30px; --dm-footer-logo-h: 56px; --dm-footer-gap: 20px; }
	.dm-footer__logo a { width: 157px; }
	.dm-footer { --dm-footer-foot: 21px; --dm-footer-bar-h: 32px; } /* two lines */
	.dm-footer__bottom-inner { flex-wrap: wrap; gap: 0; line-height: 16px; }
	.dm-footer__copy { width: 100%; }
	.dm-footer__credits { position: static; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-footer--reveal { min-height: var(--dm-footer-stage); }
	.dm-footer--reveal .dm-footer__media { position: absolute; inset: 0; height: auto; }
	.dm-footer--reveal .dm-footer__veil { position: absolute; top: 0; margin-top: 0; }
	.dm-footer--reveal .dm-footer__logo a,
	.dm-footer--reveal .dm-footer__bottom-inner { position: static; }
}
