/**
 * Homepage Problem section — the outer cards fan onto the arc as the section
 * scrolls in, echoing the curve divider below.
 *
 * Angles come from `Homepage (Elementor build)` 5635:13895, where the outer cards
 * are +15 / -15. Figma rotation is COUNTER-clockwise-positive and CSS `rotate` is
 * CLOCKWISE-positive, so the signs invert on the way across: left is negative here.
 *
 * The finished tilt is the DEFAULT state and the animation only runs where
 * scroll-driven animations exist. Safari and Firefox therefore render the artboard
 * layout with no motion — there is no fallback script that can fail.
 *
 * Timing: `cover 50%` is the moment the card row is vertically CENTRED in the
 * viewport -- cover spans viewportHeight + elementHeight, so at half of that the
 * element's top sits at (viewportH - elementH) / 2. The tilt therefore starts with
 * the cards centred and completes at `cover 95%`, as they leave the top.
 *
 * Desktop only. At 1024 the grid drops to two columns, so :first-child/:last-child
 * stop meaning left/right and a tilt would read as a mistake.
 *
 * The class is DOUBLED because this sheet loads around index 7 while Elementor's
 * global classes land at 25-34: a single class ties on specificity and loses on
 * source order.
 */

.elementor .problem-cards.problem-cards {
	--tilt: 11.5deg;
	--tilt-drop: 11.5%;
	--tilt-spread: 8%;
	--tilt-ease: cubic-bezier( .22, .61, .36, 1 );
}

/* Finished state — what ships when the animation below cannot run. */
@media ( min-width: 1025px ) {
	.elementor .problem-cards.problem-cards > *:first-child {
		rotate: calc( var( --tilt ) * -1 );
		translate: calc( var( --tilt-spread ) * -1 ) var( --tilt-drop );
	}

	.elementor .problem-cards.problem-cards > *:last-child {
		rotate: var( --tilt );
		translate: var( --tilt-spread ) var( --tilt-drop );
	}
}

@keyframes facteus-card-tilt-left {
	from { rotate: 0deg; translate: 0 0; }
	to   { rotate: calc( var( --tilt ) * -1 );
	       translate: calc( var( --tilt-spread ) * -1 ) var( --tilt-drop ); }
}

@keyframes facteus-card-tilt-right {
	from { rotate: 0deg; translate: 0 0; }
	to   { rotate: var( --tilt );
	       translate: var( --tilt-spread ) var( --tilt-drop ); }
}

@supports ( animation-timeline: view() ) {
	@media ( min-width: 1025px ) and ( prefers-reduced-motion: no-preference ) {
		.elementor .problem-cards.problem-cards > *:first-child {
			animation: facteus-card-tilt-left var( --tilt-ease ) both;
			animation-timeline: --problem-cards;
			animation-range: cover 50% cover 95%;
		}

		.elementor .problem-cards.problem-cards > *:last-child {
			animation: facteus-card-tilt-right var( --tilt-ease ) both;
			animation-timeline: --problem-cards;
			animation-range: cover 50% cover 95%;
		}
	}
}

/* ---------------------------------------------------------------------------
 * The Figma concept's card treatment (24 Oct 2026), artboard 5635:13895.
 *
 * Each card carries an accent twice: a large blurred ellipse clipped at the
 * bottom-left, and the icon tile's border plus its glyph. Both come from the
 * element (`color`) and the `card-glow` / `problem-icon-tile` classes; only the
 * two things a global class cannot express are here.
 * ------------------------------------------------------------------------- */

/*
 * The glow is absolutely positioned at z-index 0. In the painting order a
 * positioned element comes AFTER its non-positioned siblings, so without this
 * the bloom washes over the heading and body rather than sitting behind them.
 */
.elementor .problem-cards.problem-cards > * > *:not( .card-glow ) {
	position: relative;
	z-index: 1;
}

/*
 * e-self-hosted-video renders a bare <video> and ships `aspect-ratio: 16/9`
 * plus `max-width: 100vw` as widget defaults. The media frame owns the shape
 * here, so the video fills it and crops. Doubling the class wins on
 * SPECIFICITY — this sheet loads around index 7 against Elementor's 25-34, so
 * it could never win on source order.
 *
 * The name is now narrower than what it covers: the three Problem cards hold a
 * <video> and the three Who Runs cards hold an <img> (e-image renders a bare
 * one, same as the video widget), and every declaration below reads identically
 * on either. Renaming the global class would touch both sections for no gain.
 */
.elementor .problem-video.problem-video {
	aspect-ratio: auto;
	max-width: none;
	object-fit: cover;
	object-position: center;

	/*
	 * The media OVERSHOOTS its frame, so its own hard edge is outside the clip
	 * entirely. The frame owns the single rounded edge (overflow: hidden +
	 * border-radius 36 36 0 0) and never lands on a whole pixel — it measured
	 * 425.328 x 182.281 at 1440 — so with the two edges coincident the clip
	 * row rasterised at partial alpha and the card's surface-purple showed
	 * through as a pale rim down the left and across the bottom of every clip.
	 *
	 * Same mechanism as the clipped hero section and the masked divider
	 * plates: an element clipped at a fractional edge bleeds whatever is
	 * behind it, and the only fix is for the inner layer to end outside the
	 * clip. 3px rather than the 1px the rounded-media note uses, because at
	 * the card's radius the rim was visible well past a single pixel.
	 */
	display: block;
	width: calc( 100% + 6px );
	height: calc( 100% + 6px );
	margin: -3px;
}

/*
 * Nothing is hidden and nothing waits on script: the poster frame is the
 * resting state, so a blocked or failed problem-card-video.js leaves the card
 * exactly as it looks now. Touch devices keep the poster and never fetch the
 * file, because the video is preload="none" and only the hover handler calls
 * play().
 */

/* ---------------------------------------------------------------------------
 * Card and video geometry, from card 2 of 5635:13895 (24 Oct 2026):
 * card 540 x 532, video 512 x 288 inset 14, hanging 82px below the card so
 * 71.5% of it shows, and 134px between the body and the video.
 * ------------------------------------------------------------------------- */

@media ( min-width: 1025px ) {
	/*
	 * Three 540 cards on the 16px gap need 1652 — wider than the 1200 measure
	 * the section's inner container uses. The ROW breaks out rather than the
	 * container widening, so the intro copy above keeps its own measure. The
	 * margin resolves against the 1196 parent, which is what re-centres it in
	 * the section's content box.
	 *
	 * 1652 is reached at a 1728 viewport (the artboard width); below that the
	 * row is viewport-bound and the cards scale down with it. Three 540px
	 * cards plus gaps cannot fit a 1440 screen — that is arithmetic, not a
	 * choice.
	 */
	.elementor .problem-cards.problem-cards {
		--row: min( 1652px, calc( 100vw - 48px ) );

		width: var( --row );
		margin-inline: calc( ( 100% - var( --row ) ) / 2 );
		align-items: start;
	}
}

/*
 * The card's own ratio is what opens the gap between the body and the video,
 * because the media is bottom-aligned (margin-block-start: auto): 532 - 30
 * padding - 64 head - 14 gap - 206 video leaves 133px against the artboard's
 * 134. `height: auto` clears the element's own `height: 100%`, which would
 * otherwise take the stretched row height instead.
 *
 * Scoped to 1400 and up because the ratio makes the height DEFINITE and the
 * cards carry `overflow: hidden`, which zeroes the automatic minimum size — so
 * a card narrower than its content does not grow, it clips. At 1025 the cards
 * are 310 wide, the ratio asked for 305, the content needed 386, and the body
 * text ran through the video. A content floor cannot fix that (`min-height:
 * fit-content` is equally ignored behind `overflow: hidden`), so the ratio only
 * applies where it is demonstrably the larger of the two: at 1400 the cards are
 * 435 wide and the ratio asks for 428 against ~370 of content.
 *
 * Below 1400 the cards stay content-height, which is exactly how they behaved
 * before — the generous gap is the enhancement, not the baseline.
 */
@media ( min-width: 1400px ) {
	.elementor .problem-cards.problem-cards > * {
		height: auto;
		aspect-ratio: 540 / 532;
	}
}

/*
 * The video sits 14px from the card edge where the copy sits 30, so it breaks
 * out of the card's own padding: 540 - 2*14 = 512, and 480 content + 32 = 512.
 *
 * Targeted as the last child because that is what it is — the card's children
 * are glow, head, body, media, and the glow is prepended at the front.
 */
.elementor .problem-cards.problem-cards > * > *:last-child {
	width: calc( 100% + 32px );
	margin-inline: -16px;

	/*
	 * 21:9 — the delivery spec for these clips, confirmed 24 Oct 2026. It was
	 * 512 / 206 (2.486), the artboard's frame with 82px of a 288-tall video
	 * hanging below it, so the frame cropped the clip and its bottom 28.5%
	 * never showed.
	 *
	 * The frame is the spec, not whatever a given export happens to measure:
	 * the first clip came in at 992x432 (2.2963), so `cover` trims ~1.6% of
	 * its height, centred — about 3px of 189 at desktop. Re-exported at a true
	 * 21:9 it lands with nothing cropped at all.
	 */
	aspect-ratio: 21 / 9;

	/*
	 * The card is a column flex container, so a tight card shrinks the media
	 * below its ratio rather than overflowing — at 1025 that collapsed it to
	 * 64px tall on one card and 119 on another, from the same rule. Opting out
	 * of shrink keeps every video the same shape at every width.
	 */
	flex: 0 0 auto;
}

/*
 * `object-position` stays centred (set above). A clip cut to the 21:9 spec has
 * nothing to crop; one that drifts is trimmed evenly rather than anchored to
 * the top, which is what this used to do.
 */

/* ---------------------------------------------------------------------------
 * Hover: the card lifts 2%.
 *
 * `scale` is written as the individual property rather than inside a
 * `transform`, because the outer two cards already animate `rotate` and
 * `translate` from the scroll timeline above. The three compose independently,
 * so the tilt keeps running and the lift rides on top of it; folding any of
 * them into a `transform` shorthand would have one clobber the others.
 *
 * Uniform scale is rotation-invariant, so the tilted cards lift along their own
 * axes and need no separate treatment.
 *
 * Gated on a real pointer: `:hover` on a touch device sticks after a tap, which
 * would leave a card enlarged with no way to dismiss it. Same guard the hover
 * video uses, so the lift and the clip start and stop together.
 * ------------------------------------------------------------------------- */

@media ( hover: hover ) and ( pointer: fine ) {
	.elementor .problem-cards.problem-cards > * {
		/*
		 * All three carry a stacking context at rest, so a hovered card rises
		 * above its neighbours without the paint order flipping mid-gesture —
		 * setting z-index only on :hover creates the context at the moment the
		 * cursor lands, which shows as a flicker.
		 */
		z-index: 1;
		transition: scale .35s cubic-bezier( .22, .61, .36, 1 );
	}

	.elementor .problem-cards.problem-cards > *:hover {
		scale: 1.02;
		z-index: 2;
	}

	@media ( prefers-reduced-motion: reduce ) {
		.elementor .problem-cards.problem-cards > * {
			transition: none;
		}

		.elementor .problem-cards.problem-cards > *:hover {
			scale: 1;
		}
	}
}

/* ===========================================================================
 * Who Runs on Facteus — the same card, on the same wide row.
 *
 * These cards were built from the Problem card's structure but sat on the
 * section's 1200 measure, so they came out 383 wide against the artboard's 539
 * and every heading wrapped a line further than it should. The row breaks out
 * exactly as the Problem row does; the cards are not given the Problem card's
 * `aspect-ratio: 540 / 532` because they carry an eyebrow and a button the
 * Problem cards do not, and a definite height behind `overflow: hidden` would
 * clip rather than grow. They stay content-height.
 *
 * The tilt, the hover lift and the scroll keyframes stay on `.problem-cards`
 * alone — this section is explicitly not meant to rotate.
 *
 * Class doubled for the same reason as everything above: this sheet loads
 * around index 7 against Elementor's 25-34.
 * ------------------------------------------------------------------------- */

@media ( min-width: 1025px ) {
	.elementor .wr-cards.wr-cards {
		--row: min( 1652px, calc( 100vw - 48px ) );

		width: var( --row );
		margin-inline: calc( ( 100% - var( --row ) ) / 2 );
		align-items: start;
	}
}

/*
 * The media is the card's last child. It breaks out of the card's 16px side
 * padding and past its bottom padding so the clip bleeds off the card the way
 * the artboard draws it — 79px of a 279-tall video hanging below the card edge,
 * clipped by the card's own `overflow: hidden`.
 */
.elementor .wr-cards.wr-cards > * > *:last-child {
	width: calc( 100% + 32px );
	margin-inline: -16px;
	margin-block-start: 0;
	margin-block-end: -36px;
	aspect-ratio: 21 / 9;
}

/*
 * Buttons line up across the three cards. The slack has to collect ABOVE the
 * button, not above the media — with `margin-block-start: auto` on the media
 * the button floated with however long each card's body copy ran, which is why
 * the three sat at 7861 / 7888 / 7871 instead of level.
 */
/*
 * The artboard stacks the text on a 12px rhythm and then opens up around the
 * button: 40px above it and 40 below, the extra coming from 28px of top
 * padding inside its Button wrap on top of the 12px stack gap. The card is a
 * flex column with `gap: 12`, so each margin here is the difference.
 */
.elementor .wr-cards.wr-cards > * > .e-paragraph-base {
	margin-block-end: 28px;
}

.elementor .wr-cards.wr-cards > * > a {
	margin-block-start: auto;
	margin-block-end: 28px;

	/*
	 * The button class ships `white-space: nowrap`, and at 1025 the cards are
	 * 310 wide against a 311px "Explore Facteus for Enterprise" — so the label
	 * ran past the card and the card's own `overflow: hidden` cut it off.
	 * Wrapping degrades to two lines inside the pill instead.
	 */
	max-width: 100%;
	white-space: normal;
}

/* ===========================================================================
 * Industries We Serve — same row as every other card section on the page.
 *
 * This grid sits inside `audience-measure`, which caps at 1300px and pads 24,
 * so the row was 1252 against the 1392 the Problem, Who Runs and Testimonials
 * rows reach. It breaks out the same way they do, and the margin resolves
 * against that 1252 parent to re-centre it.
 *
 * Scoped to the homepage: `audience-related-grid` and `audience-related-card`
 * are global classes shared with the product and industry pages, and this was
 * asked for on the homepage first.
 * ------------------------------------------------------------------------- */

@media ( min-width: 1025px ) {
	.elementor-11 .audience-related-grid.audience-related-grid {
		--row: min( 1652px, calc( 100vw - 48px ) );

		width: var( --row );
		margin-inline: calc( ( 100% - var( --row ) ) / 2 );
	}
}

/*
 * The basis subtracted a flat 1rem per card, which was right when the gap was
 * 24 and leaves the row 16px short now that it is 16: three cards need to give
 * back two gaps between them, so each gives back 32/3. Stated per breakpoint
 * because the column count changes: 3 up, 2 at tablet, 1 at mobile.
 */
.elementor-11 .audience-related-card.audience-related-card {
	flex: 0 1 calc( 33.3333% - 32px / 3 );
}

@media ( max-width: 1024px ) {
	.elementor-11 .audience-related-card.audience-related-card {
		flex: 0 1 calc( 50% - 8px );
	}
}

@media ( max-width: 767px ) {
	.elementor-11 .audience-related-card.audience-related-card {
		flex: 0 1 100%;
	}
}