/* Collage Shrink Hero 1.10.15

   .pwf-collage             root; height = scroll span (inline)
   .pwf-collage__sticky     pinned viewport
   .pwf-collage__stage      layer host
   .pwf-collage__backdrop   revealed layer (child 1)
   .pwf-collage__satellites styled items drifting in around the frame
   .pwf-collage__endproxy   invisible, control-sized target the runtime
                            measures for the frame's end geometry
   .pwf-collage__frame      the shrinking layer (child 0)

   Variables written by controls (all live):
   --pwf-clg-ew / --pwf-clg-eh   end width / height
   --pwf-clg-ox / --pwf-clg-oy   end position offset from center
   --pwf-clg-fr                  frame corner radius (full at end)
   --pwf-clg-p                   journey progress, written by the runtime
   --pwf-clg-sx / --pwf-clg-sy   per-satellite offsets from center
*/

.elementor-widget-pwf-collage-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.pwf-collage {
	position: relative;
	width: 100%;
}

.pwf-collage__sticky {
	position: sticky;
	top: 0;
	height: calc( 100vh - var(--pwf-clg-in-t, 0px) - var(--pwf-clg-in-b, 0px) );
	height: calc( 100dvh - var(--pwf-clg-in-t, 0px) - var(--pwf-clg-in-b, 0px) );
	overflow: hidden;
}

.pwf-collage__stage {
	position: absolute;
	inset: 0;
}

.pwf-collage__plane {
	position: absolute;
	inset: 0;
	transform-origin: 50% 50%;
	will-change: transform;
}

.pwf-collage__backdrop {
	position: absolute;
	inset: 0;
}

.pwf-collage__backdrop > .e-con {
	width: 100%;
	height: 100%;
	max-width: 100%;
	position: relative;
	z-index: 1;
}

/* The Backdrop's content: outside the zooming plane, so the pull-back
   moves the picture and the satellites but never the words. */
.pwf-collage__backdrop-content {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.pwf-collage__backdrop-content > .e-con {
	width: 100%;
	height: 100%;
	max-width: 100%;
	position: relative;
}

.pwf-collage__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Written with enough weight to beat Elementor's own rule for every
   image in its content (.elementor img { height: auto }), which would
   otherwise let the image keep its natural shape instead of filling
   and cropping. */
.pwf-collage .pwf-collage__media img,
.pwf-collage .pwf-collage__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pwf-collage__satellites {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.pwf-collage__sat {
	position: absolute;
	left: calc( 50% + var(--pwf-clg-sx, 0%) );
	top: calc( 50% + var(--pwf-clg-sy, 0%) );
	transform: translate(-50%, -50%);
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.pwf-collage__sat > .pwf-collage__sat-media {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Invisible measurement proxy: the frame's destination box. The runtime
   measures it; editor sliders reshape it live. Never give it paint. */
.pwf-collage__endproxy {
	position: absolute;
	left: calc( 50% + var(--pwf-clg-ox, 0px) );
	top: calc( 50% + var(--pwf-clg-oy, 0px) );
	transform: translate(-50%, -50%);
	width: var(--pwf-clg-ew, 42vw);
	height: var(--pwf-clg-eh, 46vh);
	visibility: hidden;
	pointer-events: none;
}

/* At full bleed the frame covers the whole stage, so nothing behind it
   is meant to be seen. Until the shrink starts the backdrop, its words
   and the satellites stay hidden: if the frame is ever see-through at
   the top of the page (a video still loading, a phone refusing to
   autoplay) the visitor sees the section's background, not a second
   headline. The runtime lifts this the moment the frame starts to move.
   Stacked layouts and the editor never hide them. */
.pwf-collage--mb-pinned:not(.pwf-collage--editor):not(.pwf-collage--mb-stack):not(.is-shrinking) .pwf-collage__plane,
.pwf-collage--mb-pinned:not(.pwf-collage--editor):not(.pwf-collage--mb-stack):not(.is-shrinking) .pwf-collage__backdrop-content {
	visibility: hidden;
}

.pwf-collage__frame {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 5;
	border-radius: calc( var(--pwf-clg-or, 0px) + ( var(--pwf-clg-fr, 20px) - var(--pwf-clg-or, 0px) ) * var(--pwf-clg-p, 0) );
	-webkit-clip-path: inset( 0 round calc( var(--pwf-clg-or, 0px) + ( var(--pwf-clg-fr, 20px) - var(--pwf-clg-or, 0px) ) * var(--pwf-clg-p, 0) ) );
	clip-path: inset( 0 round calc( var(--pwf-clg-or, 0px) + ( var(--pwf-clg-fr, 20px) - var(--pwf-clg-or, 0px) ) * var(--pwf-clg-p, 0) ) );
	isolation: isolate;
}

.pwf-collage__viewportlock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}

/* Picture in the Frame, Shrinks: the picture is the frame's own
   background and follows the frame's box as it shrinks. */
.pwf-collage__frame > .pwf-collage__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pwf-collage__viewportlock .pwf-collage__media {
	position: absolute;
	inset: 0;
}

/* The picture fades in once it has really arrived. The first paint
   shows Frame Fill; the poster or picture then eases in over half a
   second instead of popping, and the video takes over from the poster
   invisibly as before. The runtime marks the layer ready when its
   poster or picture has loaded; with no runtime at all the layer
   simply shows itself after a few seconds. The editor never fades. */
@keyframes pwf-collage-media-in {
	to { opacity: 1; }
}

/* Same fade under a second name: a running animation keeps its clock
   when only its delay changes, so the ready state starts a fresh one. */
@keyframes pwf-collage-media-in-now {
	to { opacity: 1; }
}

.pwf-collage--mb-pinned:not(.pwf-collage--editor) .pwf-collage__frame .pwf-collage__media,
.pwf-collage--mb-pinned:not(.pwf-collage--editor) .pwf-collage__frame .pwf-collage__viewportlock {
	opacity: 0;
	animation: pwf-collage-media-in 600ms ease 4s forwards;
}

.pwf-collage--mb-pinned:not(.pwf-collage--editor) .pwf-collage__frame.is-ready .pwf-collage__media,
.pwf-collage--mb-pinned:not(.pwf-collage--editor) .pwf-collage__frame.is-ready .pwf-collage__viewportlock {
	animation: pwf-collage-media-in-now 600ms ease 0s forwards;
}

.pwf-collage__frame > .pwf-collage__viewportlock > .e-con,
.pwf-collage__frame > .e-con {
	width: 100%;
	height: 100%;
	max-width: 100%;
	position: relative;
	z-index: 1;
	opacity: clamp( 0, 1 - var(--pwf-clg-p, 0) * 2.5, 1 );
}

/* The frame button: centered on the visible window, above the locked
   composition, immune to the content fade, riding out with the card. */
.pwf-collage__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

/* The button belongs on the landed card. Until the runtime starts
   fading it in with the shrink, it stays hidden, so the first paint of
   a pinned collage never shows it over the full-bleed frame. Stacked
   layouts and the editor show it as before. */
.pwf-collage--mb-pinned:not(.pwf-collage--editor):not(.pwf-collage--mb-stack) .pwf-collage__btn {
	opacity: 0;
	pointer-events: none;
}

.pwf-collage__btn i,
.pwf-collage__btn svg {
	transition: color 250ms ease, fill 250ms ease;
}

.pwf-collage__btn svg {
	fill: currentColor;
}

.pwf-collage__btn--icon-before {
	flex-direction: row-reverse;
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band--feature {
	pointer-events: none;
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band--feature .pwf-collage__btn {
	z-index: 6;
}

/* Satellite rest state: parked until the runtime drives them in. With
   no JS (or reduced motion) they simply sit at their places. */
.pwf-collage__sat {
	opacity: 1;
}

.pwf-collage--armed .pwf-collage__sat {
	opacity: 0;
}

/* ---- Reduce Motion: the two frames, one after the other. ----
   A visitor who asks for less motion gets the Feature Frame full
   screen, exactly as designed, and the Backdrop full screen right
   below it, its words and satellites in place. No pin, no travel, no
   card and no Frame Button: two screens, and the page scrolls straight
   through them. The same at every screen size. */
.pwf-collage--rm {
	height: auto !important;
}
.pwf-collage--rm .pwf-collage__sticky {
	position: relative;
	height: 200vh;
	overflow: hidden;
}
.pwf-collage--rm .pwf-collage__frame {
	position: absolute;
	left: 0;
	top: 0;
	transform: none;
	width: 100%;
	height: 50%;
	border-radius: var(--pwf-clg-or, 0px);
	-webkit-clip-path: none;
	clip-path: none;
}
.pwf-collage--rm .pwf-collage__frame .pwf-collage__media,
.pwf-collage--rm .pwf-collage__frame .pwf-collage__viewportlock {
	opacity: 1;
	animation: none;
}
.pwf-collage--rm .pwf-collage__viewportlock {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	will-change: auto;
}
.pwf-collage--rm .pwf-collage__plane,
.pwf-collage--rm .pwf-collage__backdrop-content {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: auto;
	height: 50%;
	visibility: visible;
	transform: none !important;
	will-change: auto;
}
.pwf-collage--rm .pwf-collage__sat {
	opacity: 1 !important;
	transform: translate(-50%, -50%) !important;
}
.pwf-collage--rm .pwf-collage__endproxy,
.pwf-collage--rm .pwf-collage__btn {
	display: none;
}

/* ---- Mobile stack: pin off, honest vertical flow. ---- */

@media ( max-width: 1024px ) {
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet {
		height: auto !important;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__stage {
		position: static;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__frame {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		height: auto;
		border-radius: 0;
		-webkit-clip-path: none;
		clip-path: none;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__backdrop {
		position: relative;
		inset: auto;
		min-height: 100vh;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__satellites {
		position: absolute;
		z-index: 1;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__backdrop,
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__satellites {
		pointer-events: none;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__backdrop {
		pointer-events: auto;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__endproxy {
		display: none;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__backdrop-content {
		position: relative;
		inset: auto;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__backdrop {
		min-height: 0;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__plane {
		position: relative;
		inset: auto;
		transform: none !important;
		will-change: auto;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__viewportlock {
		position: static;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__viewportlock .pwf-collage__media {
		position: absolute;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__frame {
		position: relative;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-tablet .pwf-collage__frame .pwf-collage__media {
		opacity: 1;
		animation: none;
	}
}

/* Reduce Motion: the same honest stack at every screen size, so a
   desktop asking for less motion gets the tidy vertical layout too,
   never a frozen half of the choreography. */
.pwf-collage--mb-stack.pwf-collage--sbp-all {
	height: auto !important;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__sticky {
	position: static;
	height: auto;
	overflow: visible;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__stage {
	position: static;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__frame {
	position: static;
	left: auto;
	top: auto;
	transform: none;
	width: 100%;
	height: auto;
	border-radius: 0;
	-webkit-clip-path: none;
	clip-path: none;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__backdrop {
	position: relative;
	inset: auto;
	min-height: 100vh;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__satellites {
	position: absolute;
	z-index: 1;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__backdrop,
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__satellites {
	pointer-events: none;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__backdrop {
	pointer-events: auto;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__endproxy {
	display: none;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__backdrop-content {
	position: relative;
	inset: auto;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__backdrop {
	min-height: 0;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__plane {
	position: relative;
	inset: auto;
	transform: none !important;
	will-change: auto;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__viewportlock {
	position: static;
	width: 100% !important;
	height: auto !important;
	transform: none !important;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__viewportlock .pwf-collage__media {
	position: absolute;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__frame {
	position: relative;
}
.pwf-collage--mb-stack.pwf-collage--sbp-all .pwf-collage__frame .pwf-collage__media {
	opacity: 1;
	animation: none;
}

@media ( max-width: 767px ) {
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile {
		height: auto !important;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__stage {
		position: static;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__frame {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		height: auto;
		border-radius: 0;
		-webkit-clip-path: none;
		clip-path: none;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__backdrop {
		position: relative;
		inset: auto;
		min-height: 100vh;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__endproxy {
		display: none;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__backdrop-content {
		position: relative;
		inset: auto;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__backdrop {
		min-height: 0;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__plane {
		position: relative;
		inset: auto;
		transform: none !important;
		will-change: auto;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__viewportlock {
		position: static;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__viewportlock .pwf-collage__media {
		position: absolute;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__frame {
		position: relative;
	}
	.pwf-collage--mb-stack.pwf-collage--sbp-mobile .pwf-collage__frame .pwf-collage__media {
		opacity: 1;
		animation: none;
	}
}

/* ---- Editor, narrative order: band one is the Feature Frame at full
   screen with its media painted behind, exactly as it opens live; band
   two is the end state — backdrop media, satellites at their positions,
   and a dashed ghost marking where the frame lands. Children append
   into the stage and are placed onto the bands: first child (Feature
   Frame) overlays band one, last child (Backdrop) fills band two. ---- */

.elementor-editor-active .pwf-collage--editor {
	position: relative;
	height: auto;
	min-height: 200vh;
}

.elementor-editor-active .pwf-collage--editor::before {
	content: 'FEATURE FRAME · OPENS FULL SCREEN';
	position: absolute;
	top: -20px;
	left: 0;
	font: 700 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: 0.12em;
	color: #d5d8dc;
	background: #232629;
	padding: 5px 8px 4px;
	border-radius: 3px;
	z-index: 10;
	pointer-events: none;
}

.elementor-editor-active .pwf-collage--editor::after {
	content: 'END STATE · BACKDROP + SATELLITES · DASHED = FRAME LANDING';
	position: absolute;
	top: calc( 100vh + 6px );
	left: 0;
	font: 700 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: 0.12em;
	color: #d5d8dc;
	background: #232629;
	padding: 5px 8px 4px;
	border-radius: 3px;
	z-index: 10;
	pointer-events: none;
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band {
	position: absolute;
	left: var(--pwf-clg-in-l, 0px);
	right: var(--pwf-clg-in-r, 0px);
	height: calc( 100vh - var(--pwf-clg-in-t, 0px) - var(--pwf-clg-in-b, 0px) );
	overflow: hidden;
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band--feature {
	top: var(--pwf-clg-in-t, 0px);
	/* The canvas shows the opening state, so it wears the Opening
	   Radius the render carries at full open. The end band below keeps
	   the landed radius from --pwf-clg-fr. */
	border-radius: var(--pwf-clg-or, 0px);
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band--end {
	border-radius: var(--pwf-clg-fr, 20px);
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__band--end {
	top: calc( var(--pwf-clg-in-t, 0px) + 100vh - var(--pwf-clg-in-t, 0px) - var(--pwf-clg-in-b, 0px) );
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__stage {
	position: absolute;
	inset: 0;
	min-height: 0;
}

/* Feature Frame child: editable overlay on band one, above its media. */
.elementor-editor-active .pwf-collage--editor .pwf-collage__stage > :nth-child(1 of .e-con) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	max-width: 100%;
	z-index: 5;
}

/* Backdrop child: fills band two, above its media, below satellites. */
.elementor-editor-active .pwf-collage--editor .pwf-collage__stage > :nth-last-child(1 of .e-con) {
	position: absolute;
	top: 100vh;
	left: 0;
	right: 0;
	height: 100vh;
	max-width: 100%;
	z-index: 2;
}

.elementor-editor-active .pwf-collage--editor .pwf-collage__satellites--editor {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* The frame's landing box, drawn from the same live control variables. */
.elementor-editor-active .pwf-collage--editor .pwf-collage__endghost {
	position: absolute;
	left: calc( 50% + var(--pwf-clg-ox, 0px) );
	top: calc( 50% + var(--pwf-clg-oy, 0px) );
	transform: translate(-50%, -50%);
	width: var(--pwf-clg-ew, 42vw);
	height: var(--pwf-clg-eh, 46vh);
	border: 2px dashed rgba(0, 0, 0, 0.35);
	border-radius: var(--pwf-clg-fr, 20px);
	z-index: 6;
	pointer-events: none;
}

/* Chrome's scroll anchoring silently adjusts the scroll position when
   content near its anchor node moves — and a scroll-driven engine
   moves content every frame, so anchoring fires exactly when the
   choreography starts and reads as a sudden jog. Standard equipment
   for scroll-linked work: disable it while this widget is on the
   page. */
html:has(.pwf-collage) {
	overflow-anchor: none;
}