/* ============================================================
   Domus — home: expertise  [domus_home_expertise]
   Figma: Homepage 122:280 (desktop, y 2766) / 737:1538 (mobile, y 3000).

   Desktop (1376): label 13 caps · 33 · three columns at 0 / 448 / 918, each a 333×436 picture, 27 below it
   "[01]" 15, then the title 32/34, then the text 16/20 (298 wide). In the design they step down 0 / 109 / 205; as the
   section scrolls up they rise and land on one line (home-expertise.js sets --dm-he-k 1 → 0). Hover: a corner of
   the picture is cut (the 1st and 3rd top right, the 2nd top left). "VIEW OUR EXPERTISE ↳" bottom right.
   Mobile (375): one under the other, pictures 236×309 with a cut corner as in the design (1st top right, 2nd top
   left, 3rd bottom right), [01] 15 · title 28 · text 16/20; "VIEW OUR EXPERTISE" at the end.
   ============================================================ */

.dm-he {
	--u: calc(min(100vw - var(--dm-sbw, 0px) - var(--dm-side, 32px) * 2, var(--dm-max, 1440px)) / 1376);
	--dm-he-k: 1;
	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-he *, .dm-he *::before, .dm-he *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-he),
.elementor-widget:has(> .elementor-shortcode > .dm-he) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-he p, .dm-he h3 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-he a, .dm-he a:hover, .dm-he a:visited, .dm-he a:focus { color: #000 !important; text-decoration: none !important; }

.dm-he .dm-he__label { display: flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1; text-transform: uppercase; }
.dm-he__label svg { display: block; flex: none; width: 9px; height: 9px; }
.dm-he__label span { text-box: trim-both cap alphabetic; }

.dm-he__cols { position: relative; display: flex; align-items: flex-start; margin-top: calc(var(--u) * 43); }
.dm-he__col { flex: none; width: calc(var(--u) * 333); }
.dm-he__col:nth-child(2) { margin-left: calc(var(--u) * 115); transform: translate3d(0, calc(var(--u) * 109 * var(--dm-he-k)), 0); }
.dm-he__col:nth-child(3) { margin-left: calc(var(--u) * 137); transform: translate3d(0, calc(var(--u) * 205 * var(--dm-he-k)), 0); }
.dm-he.is-moving .dm-he__col { will-change: transform; }
/* desktop: the section holds still (sticky .dm-he__pin, centred by home-expertise.js) while the next
   --dm-he-run of scrolling raises the columns; laid out landed, .dm-he__run is the room it holds in */
@media (min-width: 768px) {
	.dm-he { --dm-he-run: 420px; }
	.dm-he__pin { position: -webkit-sticky; position: sticky; top: var(--dm-he-top, 80px); }
	.dm-he__cols { padding-bottom: calc(var(--u) * 205 * var(--dm-he-k)); }
	.dm-he__run { height: var(--dm-he-run); }
}

.dm-he__pic { position: relative; display: block; height: calc(var(--u) * 436); overflow: hidden; background: #eee; transition: clip-path .55s cubic-bezier(.65, 0, .25, 1); }
.dm-he__pic img, .dm-he__pic video { position: absolute; inset: 0; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
/* corner cuts (polygons with the cut at 0 so they can grow) */
.dm-he__col:nth-child(odd) .dm-he__pic { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%); }
.dm-he__col:nth-child(2) .dm-he__pic { clip-path: polygon(0 0, 0 0, 100% 0, 100% 100%, 0 100%); }
@media (hover: hover) and (min-width: 768px) {
	.dm-he__col:nth-child(odd):hover .dm-he__pic { clip-path: polygon(0 0, calc(100% - var(--u) * 78) 0, 100% calc(var(--u) * 84), 100% 100%, 0 100%); }
	.dm-he__col:nth-child(2):hover .dm-he__pic { clip-path: polygon(0 calc(var(--u) * 84), calc(var(--u) * 78) 0, 100% 0, 100% 100%, 0 100%); }
	.dm-he__col:hover .dm-he__pic img { transform: scale(1.04); }
}

.dm-he .dm-he__num { margin-top: calc(var(--u) * 27); font-size: 15px; line-height: 1; letter-spacing: -.02em; }
.dm-he .dm-he__title { margin-top: 14px; font-size: 32px; line-height: 34px; letter-spacing: -.02em; }
.dm-he .dm-he__text { max-width: calc(var(--u) * 298); margin-top: 10px; font-size: 16px; line-height: 20px; letter-spacing: -.02em; }

.dm-he .dm-he__all { display: flex; align-items: center; gap: 9px; width: max-content; margin: calc(var(--u) * 60) 0 0 auto; font-size: 13px; line-height: 16px; text-transform: uppercase; }
.dm-he__all svg { display: block; width: 18px; height: 13px; transition: transform .35s ease; }
@media (hover: hover) { .dm-he .dm-he__all:hover svg { transform: translateX(3px); } }

@media (max-width: 767px) {
	.dm-he { --u: calc((100vw - var(--dm-sbw, 0px)) / 375); }
	.dm-he__cols { display: block; margin-top: 32px; padding-bottom: 0; }
	.dm-he__col, .dm-he__col:nth-child(2), .dm-he__col:nth-child(3) { width: auto; margin: 0; transform: none; }
	.dm-he__col + .dm-he__col { margin-top: 70px; }
	.dm-he__pic { width: calc(var(--u) * 236); height: calc(var(--u) * 309); }
	.dm-he__col:nth-child(1) .dm-he__pic { clip-path: polygon(0 0, calc(100% - var(--u) * 74) 0, 100% calc(var(--u) * 80), 100% 100%, 0 100%); }
	.dm-he__col:nth-child(2) .dm-he__pic { clip-path: polygon(calc(var(--u) * 74) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--u) * 80)); }
	.dm-he__col:nth-child(3) .dm-he__pic { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--u) * 80), calc(100% - var(--u) * 74) 100%, 0 100%); }
	.dm-he .dm-he__num { margin-top: 20px; }
	.dm-he .dm-he__title { margin-top: 12px; font-size: 28px; }
	.dm-he .dm-he__text { max-width: 298px; margin-top: 8px; }
	.dm-he .dm-he__all { margin: 46px 0 0; }
	.dm-he__run { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dm-he { --dm-he-k: 0 !important; } .dm-he__pic { transition: none; } }