/* ============================================================
   Domus — properties archive  [domus_properties]
   Figma: "Available Properties" 481:854 (desktop 1440) and 773:4247 (mobile 375).

   Head: title 32/28 caps (−0.02em) with the count [13] 15/28 raised beside it · intro 18/22 on the right (489 wide,
   12 lower) · filters 16 caps (−0.02em), 22 apart, others at 30%, the current one underlined (1px, 4 under).
   Stage (full width, full screen height — 100dvh on mobile): photo + rgba(0,0,0,.48) · name / location 20 caps (+0.02em) at 32 / 39 ·
   description 14/20 centred (331) · numbers 40 (−0.02em) at 86 with 14px labels at 124 · "Explore property" 14/20
   centred at 119 with the 18×13 arrow. Bar 32 in, 18 up, 120 tall, rgba(146,146,146,.2) blur 10: counter "7 / 13",
   thumbnails 115×67 with 14px names 9 under (others at 50%), 50 apart, each property once, the current one glided to
   the start; arrows column 64 wide.
   Mobile: everything left-aligned and stacked from 40 down; full-screen stage; white bar 10 in, 11 up, 142 tall,
   counter + arrows on top, thumbnails centred.

   Change of property: the new photo is revealed from the bottom (from the top going back) over the old one, the
   texts leave upwards and the new ones come up 22px into place (the design's hidden second layer).
   ============================================================ */

.dm-pa {
	position: relative;
	width: 100%;
	color: #000;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
.dm-pa *, .dm-pa *::before, .dm-pa *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-pa),
.elementor-widget:has(> .elementor-shortcode > .dm-pa) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-pa p, .dm-pa h1 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-pa svg { display: block; flex: none; }
.dm-pa button,
.dm-pa button:hover,
.dm-pa button:focus,
.dm-pa button:active {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	min-height: 0 !important;
	min-width: 0 !important;
	cursor: pointer;
	outline: none;
}
.dm-pa button:focus-visible, .dm-pa a:focus-visible { outline: 1px solid currentColor !important; outline-offset: 3px; }
.dm-pa a, .dm-pa a:hover, .dm-pa a:visited { color: inherit; text-decoration: none; }

/* ---------- Head ---------- */
.dm-pa__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.dm-pa .dm-pa__title { font-size: 32px; line-height: 28px; letter-spacing: -.02em; text-transform: uppercase; }
.dm-pa__title-word { display: block; }
.dm-pa__title-last { white-space: nowrap; }
.dm-pa__total-all { position: relative; top: -5px; margin-left: 6px; font-size: 15px; line-height: 28px; letter-spacing: -.02em; vertical-align: top; }
.dm-pa .dm-pa__intro { width: 489px; max-width: 50%; margin-top: 12px; font-size: 18px; line-height: 22px; }

.dm-pa__filters { display: flex; gap: 22px; margin-top: 38px; }
.dm-pa .dm-pa__filter { position: relative; flex: none; line-height: 20px; white-space: nowrap; opacity: .3; transition: opacity .3s ease; }
/* every state, or the button reset's :hover / :focus (more specific) takes the caps and the size away */
.dm-pa button.dm-pa__filter,
.dm-pa button.dm-pa__filter:hover,
.dm-pa button.dm-pa__filter:focus,
.dm-pa button.dm-pa__filter:active { font-size: 16px !important; line-height: 20px !important; letter-spacing: -.02em !important; text-transform: uppercase !important; }
.dm-pa .dm-pa__filter::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.dm-pa .dm-pa__filter.is-active { opacity: 1; }
.dm-pa .dm-pa__filter.is-active::after { transform: none; }
@media (hover: hover) { .dm-pa .dm-pa__filter:hover { opacity: 1; } }

/* ---------- Stage (full width, out of the container) ---------- */
.dm-pa__stage {
	position: relative;
	width: calc(100vw - var(--dm-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2);
	height: 100vh;
	min-height: 560px;
	margin-top: 38px;
	overflow: hidden;
	background: #111;
	color: #fff;
	isolation: isolate;
}
.dm-pa__slides, .dm-pa__infos { position: absolute; inset: 0; }
.dm-pa__slides { z-index: 0; touch-action: pan-y; }
.dm-pa__infos { z-index: 1; pointer-events: none; }

.dm-pa__slide { position: absolute; inset: 0; visibility: hidden; z-index: 0; overflow: hidden; clip-path: inset(0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); }
.dm-pa__slide.is-current { visibility: visible; z-index: 2; }
.dm-pa__slide.is-leaving { visibility: visible; z-index: 1; }
.dm-pa__slide.is-enter { clip-path: inset(100% 0 0 0); transition: none; }
.dm-pa__slide.is-enter.is-back { clip-path: inset(0 0 100% 0); }
.dm-pa__slide img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	transform: scale(1);
	transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
	-webkit-user-drag: none;
	user-select: none;
}
.dm-pa__slide.is-enter img { transform: scale(1.08); transition: none; }
.dm-pa__slide::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .48); pointer-events: none; }

/* Texts: one layer per property above all photos */
.dm-pa__info { position: absolute; inset: 0; visibility: hidden; }
.dm-pa__info.is-current, .dm-pa__info.is-leaving { visibility: visible; }
.dm-pa__info > * { position: absolute; opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .5s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.dm-pa__info.is-current > * { opacity: 1; transform: none; transition-delay: .35s; }
.dm-pa__info.is-current > :nth-child(2) { transition-delay: .4s; }
.dm-pa__info.is-current > :nth-child(3) { transition-delay: .45s; }
.dm-pa__info.is-current > :nth-child(4), .dm-pa__info.is-current > :nth-child(5) { transition-delay: .5s; }
.dm-pa__info.is-current > :nth-child(6) { transition-delay: .55s; }
.dm-pa__info.is-leaving > * { opacity: 0; transform: translate3d(0, -22px, 0); transition: opacity .35s ease, transform .5s ease; transition-delay: 0s; }
.dm-pa__info.is-instant > * { transition: none !important; }

.dm-pa .dm-pa__name,
.dm-pa .dm-pa__loc { top: 39px; font-size: 20px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-box: trim-both cap alphabetic; }
.dm-pa .dm-pa__name { left: var(--dm-side, 32px); }
.dm-pa .dm-pa__loc { right: var(--dm-side, 32px); text-align: right; }
.dm-pa .dm-pa__desc { top: 38px; left: 50%; width: 331px; margin-left: -165.5px; font-size: 14px; line-height: 20px; letter-spacing: -.02em; text-align: center; }
.dm-pa__stat { top: 86px; display: flex; flex-direction: column; gap: 10px; }
.dm-pa__stat--res { left: var(--dm-side, 32px); }
.dm-pa__stat--avail { right: var(--dm-side, 32px); align-items: flex-end; }
.dm-pa__num { font-size: 40px; line-height: 1; letter-spacing: -.02em; text-box: trim-both cap alphabetic; }
.dm-pa__label { font-size: 14px; line-height: 1; text-box: trim-both cap alphabetic; }
.dm-pa .dm-pa__explore { top: 119px; left: 50%; display: flex; align-items: center; gap: 6px; height: 20px; font-size: 14px; line-height: 20px; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; pointer-events: auto; transform: translate3d(-50%, 22px, 0); }
.dm-pa__info.is-current > .dm-pa__explore { transform: translate3d(-50%, 0, 0); }
.dm-pa__info.is-leaving > .dm-pa__explore { transform: translate3d(-50%, -22px, 0); }
.dm-pa__info:not(.is-current) .dm-pa__explore { pointer-events: none; }
.dm-pa__explore svg { width: 18px; height: 13px; margin-top: -2px; transition: transform .35s ease; }
@media (hover: hover) { .dm-pa .dm-pa__explore:hover svg { transform: translateX(3px); } }

/* ---------- Bar: counter · thumbnails · arrows ---------- */
.dm-pa__bar {
	position: absolute;
	z-index: 2;
	left: var(--dm-side, 32px);
	right: var(--dm-side, 32px);
	bottom: 18px;
	height: 120px;
	color: #000;
	background: rgba(146, 146, 146, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.dm-pa .dm-pa__counter { position: absolute; left: 18px; top: 20px; color: #fff; display: flex; align-items: baseline; gap: 4px; letter-spacing: -.02em; }
.dm-pa__cur { font-size: 14px; line-height: 1; } /* same size as the total */
.dm-pa__sep, .dm-pa__total { font-size: 14px; line-height: 1; }
.dm-pa__viewport { position: absolute; left: 103px; right: 64px; top: 0; bottom: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.dm-pa__viewport::-webkit-scrollbar { display: none; }
.dm-pa__viewport.is-dragging { cursor: grabbing; }
.dm-pa__viewport.is-dragging .dm-pa__thumb { pointer-events: none; }
.dm-pa__track { display: flex; gap: 50px; width: max-content; padding-top: 17px; }
.dm-pa .dm-pa__thumb { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; flex: none; min-width: 115px; opacity: .5; text-align: left; transition: opacity .3s ease; }
.dm-pa .dm-pa__thumb.is-active { opacity: 1; }
@media (hover: hover) { .dm-pa .dm-pa__thumb:hover { opacity: 1; } }
.dm-pa__thumb-img { position: relative; display: block; width: 115px; height: 67px; overflow: hidden; background: rgba(0, 0, 0, .15); }
.dm-pa__thumb-img img { position: absolute; inset: 0; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; -webkit-user-drag: none; }
.dm-pa__thumb-name { display: block; color: #fff; font-size: 14px; line-height: 1; letter-spacing: .02em; white-space: nowrap; text-box: trim-both cap alphabetic; padding-top: 1px; }

.dm-pa__arrows { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; display: flex; flex-direction: column; color: #fff; border-left: 1px solid currentColor; }
.dm-pa .dm-pa__arrows button { display: flex !important; align-items: center; justify-content: center; flex: 1 1 50%; width: 100%; color: #fff !important; }
.dm-pa .dm-pa__arrows .dm-pa__next { border-bottom: 1px solid currentColor !important; }
.dm-pa__arrows svg { width: 13px; height: 13px; transition: transform .3s ease; }
.dm-pa__arrows .dm-pa__prev svg { transform: scaleX(-1); }
@media (hover: hover) {
	.dm-pa .dm-pa__arrows .dm-pa__next:hover svg { transform: translateX(3px); }
	.dm-pa .dm-pa__arrows .dm-pa__prev:hover svg { transform: scaleX(-1) translateX(3px); }
}

/* one property in the area: one thumbnail, no arrows */
.dm-pa__bar.is-single .dm-pa__arrows { visibility: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.dm-pa__head { display: block; }
	.dm-pa__title-word { display: block; }
	.dm-pa .dm-pa__intro { width: auto; max-width: none; margin-top: 11px; font-size: 16px; line-height: 19px; }
	.dm-pa__filters {
		gap: 38px;
		margin-top: 35px;
		margin-right: calc(var(--dm-side, 15px) * -1);
		padding-right: var(--dm-side, 15px);
		padding-bottom: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.dm-pa__filters::-webkit-scrollbar { display: none; }
	.dm-pa button.dm-pa__filter,
	.dm-pa button.dm-pa__filter:hover,
	.dm-pa button.dm-pa__filter:focus,
	.dm-pa button.dm-pa__filter:active { font-size: 14px !important; line-height: 18px !important; }
	.dm-pa__stage { height: 100vh; height: 100dvh; min-height: 560px; margin-top: 19px; }

	/* one column in the flow, so a longer description pushes the rest down instead of running into it */
	.dm-pa__info { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 40px 16px 0; }
	.dm-pa__info > * { position: relative !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 0 100%; text-align: left !important; }
	.dm-pa .dm-pa__loc { margin-top: 8px; white-space: normal; }
	.dm-pa .dm-pa__name { white-space: normal; }
	.dm-pa .dm-pa__desc { width: auto; max-width: 307px; margin: 12px 0 0; line-height: 16px; }
	.dm-pa .dm-pa__stat { flex: 0 0 auto; margin-top: 27px; align-items: flex-start !important; }
	.dm-pa .dm-pa__stat--res { width: 130px; }
	.dm-pa .dm-pa__explore { flex: 0 0 100%; margin-top: 39px; transform: translate3d(0, 22px, 0); } /* its own row, under the numbers */
	.dm-pa__info.is-current > .dm-pa__explore { transform: none; }
	.dm-pa__info.is-leaving > .dm-pa__explore { transform: translate3d(0, -22px, 0); }

	.dm-pa__bar { left: 10px; right: 10px; bottom: 11px; height: 142px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.dm-pa .dm-pa__counter { left: 12px; top: 14px; color: #000; }
	.dm-pa__thumb-name { color: #000; } /* on the white mobile bar */
	.dm-pa__viewport { left: 0; right: 0; cursor: auto; }
	.dm-pa__track { gap: 28px; padding: 40px 12px 0; }
	.dm-pa__arrows { top: 13px; right: 12px; bottom: auto; width: auto; height: 14px; flex-direction: row-reverse; gap: 0; color: #000; border: 0; z-index: 1; }
	.dm-pa .dm-pa__arrows button { width: 24px; height: 24px; margin: -5px 0 !important; color: #000 !important; flex: none; }
	.dm-pa .dm-pa__arrows .dm-pa__next { border: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-pa__slide, .dm-pa__slide img, .dm-pa__info > * { transition-duration: .01s !important; transition-delay: 0s !important; }
}