/* ============================================================
   Domus — home: experience in numbers  [domus_home_numbers]
   Figma: Homepage 122:280 (desktop, y 4752) / 737:1538 (mobile, y 5526). Black, full width.

   Label 13 caps at 348/1376 · 39 · text 26/28 white, 662 wide · 160 · three cards 333×468, 15 apart (mobile:
   343×238 one under the other, 17 apart): the number 64 (mobile 56) top left, the label 26/34 (mobile 22) bottom left,
   black. The three share ONE gradient: liquid silk — soft ribbons of grey light sweeping laid over the whole row, each card
   a window onto its own part (.dm-hn__bg is the row-sized layer, offset per card), so it reads as one background cut
   into three. Desktop: a card's corner is cut (chamfer 90×80) only on hover — the 1st and 3rd top right, the 2nd
   bottom right. Mobile: as the design, the 1st cut top right, the 2nd bottom right, the 3rd none.
   ============================================================ */

.dm-hn {
	--u: calc(min(100vw - var(--dm-sbw, 0px) - var(--dm-side, 32px) * 2, var(--dm-max, 1440px)) / 1376);
	--w: calc(var(--u) * 333); --h: calc(var(--u) * 468); --gap: calc(var(--u) * 15);
	position: relative;
	isolation: isolate;
	width: 100%;
	padding: calc(var(--u) * 120) 0 calc(var(--u) * 152);
	color: #fff;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
.dm-hn *, .dm-hn *::before, .dm-hn *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-hn),
.elementor-widget:has(> .elementor-shortcode > .dm-hn) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-hn p, .dm-hn h2 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-hn::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2); width: calc(100vw - var(--dm-sbw, 0px)); background: #000; z-index: -1; }

.dm-hn__head { margin-left: calc(var(--u) * 348); }
.dm-hn .dm-hn__label { display: flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1; text-transform: uppercase; }
.dm-hn__label svg { display: block; flex: none; width: 9px; height: 9px; }
.dm-hn__label span { text-box: trim-both cap alphabetic; }
.dm-hn .dm-hn__text { max-width: calc(var(--u) * 662); margin-top: calc(var(--u) * 30); font-size: 26px; line-height: 28px; letter-spacing: -.02em; }

/* the three cards */
.dm-hn__cards { position: relative; display: flex; gap: var(--gap); margin-top: calc(var(--u) * 104); }
.dm-hn__card {
	--x: 0px; --y: 0px; /* this card's place in the row (for its part of the shared gradient) */
	position: relative;
	flex: none;
	width: var(--w);
	height: var(--h);
	overflow: hidden;
	color: #000;
	background: #9a9898;
	transition: clip-path .55s cubic-bezier(.65, 0, .25, 1);
}
.dm-hn__card:nth-child(2) { --x: calc(var(--w) + var(--gap)); }
.dm-hn__card:nth-child(3) { --x: calc((var(--w) + var(--gap)) * 2); }
/* corner cuts: polygons with the cut at 0 so they can grow on hover */
.dm-hn__card:nth-child(odd) { --cx: calc(var(--u) * 90); --cy: calc(var(--u) * 80); clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 0 100%); }
.dm-hn__card:nth-child(2) { --cx: calc(var(--u) * 78); --cy: calc(var(--u) * 70); clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%); }
@media (hover: hover) and (min-width: 768px) {
	.dm-hn__card:nth-child(odd):hover { clip-path: polygon(0 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% var(--cy), 100% 100%, 0 100%); }
	.dm-hn__card:nth-child(2):hover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cy)), calc(100% - var(--cx)) 100%, calc(100% - var(--cx)) 100%, 0 100%); }
}

/* the shared gradient: one row-sized layer, seen through each card — "liquid silk" in the design's greys.
   A soft diagonal base, then four ribbons (<i>): long soft-edged bands of light and shadow, each swinging round
   its own far-away pivot on its own cycle (8–13 s), so folds of light sweep across the three cards like brushed
   metal or silk. Transforms only (no repainting, no blur filter). */
.dm-hn__bg {
	--rw: calc(var(--w) * 3 + var(--gap) * 2); --rh: var(--h);
	--s: calc(max(var(--rw), var(--rh)) * 1.5);
	position: absolute;
	left: calc(var(--rw) / 2 - var(--s) / 2 - var(--x));
	top: calc(var(--rh) / 2 - var(--s) / 2 - var(--y));
	width: var(--s);
	height: var(--s);
	overflow: hidden;
	background: linear-gradient(135deg, #d4d1d1 12%, #a3a0a0 32%, #625d5d 52%, #9a9595 70%, #ddd7d7 88%);
	pointer-events: none;
}
.dm-hn__bg i {
	position: absolute;
	left: -20%;
	width: 140%;
	border-radius: 50%;
	will-change: transform;
	animation: dm-hn-swing var(--t) ease-in-out infinite alternate;
	animation-delay: var(--d, 0s);
}
/* light ribbons */
.dm-hn__bg i:nth-child(1) { --t: 9s;  --a: -38deg; --b: -14deg; top: 30%; height: 16%; transform-origin: 50% 320%; background: radial-gradient(closest-side, rgba(236, 231, 231, .95), rgba(224, 218, 218, .5) 55%, rgba(224, 218, 218, 0)); }
.dm-hn__bg i:nth-child(3) { --t: 12s; --a: 30deg;  --b: 8deg;   top: 56%; height: 11%; transform-origin: 50% -260%; background: radial-gradient(closest-side, rgba(245, 241, 241, .8), rgba(224, 218, 218, .35) 60%, rgba(224, 218, 218, 0)); --d: -4s; }
/* shadow ribbons */
.dm-hn__bg i:nth-child(2) { --t: 11s; --a: 22deg;  --b: -6deg;  top: 42%; height: 22%; transform-origin: 50% 300%; background: radial-gradient(closest-side, rgba(30, 27, 27, .62), rgba(46, 42, 42, .32) 55%, rgba(46, 42, 42, 0)); --d: -2s; }
.dm-hn__bg i:nth-child(4) { --t: 13s; --a: -24deg; --b: 12deg;  top: 20%; height: 13%; transform-origin: 50% -200%; background: radial-gradient(closest-side, rgba(40, 36, 36, .5), rgba(46, 42, 42, .2) 60%, rgba(46, 42, 42, 0)); --d: -7s; }
@keyframes dm-hn-swing {
	from { transform: rotate(var(--a)) scaleY(.8); }
	to   { transform: rotate(var(--b)) scaleY(1.35); }
}

.dm-hn .dm-hn__num { position: absolute; z-index: 1; left: calc(var(--u) * 20); top: calc(var(--u) * 10); font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: normal; font-feature-settings: normal; } /* the design: 64 / 100%, −2% (the font has one weight: 380 renders as its Regular) */
.dm-hn .dm-hn__what { position: absolute; z-index: 1; left: calc(var(--u) * 20); bottom: calc(var(--u) * 15); right: calc(var(--u) * 20); font-size: 26px; line-height: 34px; letter-spacing: -.02em; }

@media (max-width: 767px) {
	.dm-hn { --u: calc((100vw - var(--dm-sbw, 0px)) / 375); --w: calc(var(--u) * 343); --h: calc(var(--u) * 238); --gap: calc(var(--u) * 17); padding: 64px 0 70px; }
	.dm-hn__head { margin-left: 0; }
	.dm-hn .dm-hn__text { max-width: 331px; margin-top: 23px; }
	.dm-hn__cards { flex-direction: column; margin-top: 36px; }
	.dm-hn__card:nth-child(2) { --x: 0px; --y: calc(var(--h) + var(--gap)); }
	.dm-hn__card:nth-child(3) { --x: 0px; --y: calc((var(--h) + var(--gap)) * 2); }
	.dm-hn__bg { --rw: var(--w); --rh: calc(var(--h) * 3 + var(--gap) * 2); }
	/* as the design (96 × 86 on the 343 card), always: the 1st top right, the 2nd bottom right, the 3rd none */
	.dm-hn__card:nth-child(1) { clip-path: polygon(0 0, calc(100% - var(--u) * 96) 0, 100% calc(var(--u) * 86), 100% 100%, 0 100%); }
	.dm-hn__card:nth-child(2) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--u) * 86), calc(100% - var(--u) * 96) 100%, 0 100%); }
	.dm-hn__card:nth-child(3) { clip-path: none; }
	.dm-hn .dm-hn__num { left: 18px; top: 9px; font-size: 56px; }
	.dm-hn .dm-hn__what { left: 18px; bottom: 6px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dm-hn__bg i { animation: none; } .dm-hn__card { transition: none; } }

/* the aurora (home-numbers.js): one WebGL picture for the whole row, copied into a canvas in each card at that card's
   place, so the three read as one background. Without WebGL the silk ribbons above stay. */
.dm-hn__bg canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
.dm-hn.is-gl .dm-hn__bg { left: 0; top: 0; width: 100%; height: 100%; background: #2e2a2a; }
.dm-hn.is-gl .dm-hn__bg i { display: none; }
.dm-hn.is-gl .dm-hn__bg canvas { display: block; }