/*
 * Home page (page 69), built by scratchpad/build-home-v2.php.
 * Figma "Home Page – 1.png" at 1440. Content sits in the 1200px container
 * (x 120..1320 at a 1440 window); full-bleed parts are positioned here.
 */

/* Paragraph spacing comes from the widget margins, not the <p>. */
.fdi-nomargin p:last-child {
	margin-bottom: 0;
}

/* ===================================================================== Hero
 * Background is media 375 (1440x726, dark left fade baked in) at natural size
 * from the top-left corner, cover for wider windows (Elementor settings). */
.fdi-home-hero__title .elementor-heading-title {
	letter-spacing: -0.2px !important; /* Figma "Welcome" is 287px wide; the display style's -1.5 gives 279 */
}

/* Figma shows rows 2..725 of the 1440x726 photo (it sits at y=-2). 100% resolves
   to (hero height - image height): -2px at 1440, 0 when cover is height-bound
   (narrower windows, so no gap opens at the bottom), and much less than -2 on
   wide windows, where max() keeps it at -2 so the heads are not cropped. */
@media (min-width: 768px) {
	.fdi-home-hero {
		background-position: 0 max(-2px, 100%) !important;
	}
}

/* Figma's hero line breaks (desktop only). */
@media (max-width: 1024px) {
	br.fdi-br-d {
		display: none;
	}
}

@media (max-width: 767px) {
	.fdi-home-hero {
		background-image:
			linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.45) 100%),
			url("../../../../uploads/2026/10/fdi-home-hero.jpg") !important;
		background-position: 0 0, 62% top !important;
		background-size: auto, cover !important;
	}
}

/* ================================================================= About us
 * Left column 539 (its right rule at x=658), right column 54 + 607 photo.
 * The stats top rule runs on to the window's left edge. */
.fdi-stats {
	position: relative;
}

.elementor .fdi-stats::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 100%;
	width: 100vw;
	border-top: 1px solid var(--fdi-rule-strong);
	pointer-events: none;
}

.fdi-home-aboutus__para {
	max-width: 100%;
}

.fdi-home-aboutus__para p {
	letter-spacing: 0.4px; /* measured on Figma's lines */
}

/* Stat numbers: Figma's digits sit a little looser than the stat style's -1px. */
.fdi-stat__num .elementor-heading-title {
	letter-spacing: 0.75px !important;
}

/* Photo: Figma scales it to 666x719 and top-aligns it in the 607x714 frame.
   Figma's teal overlay (#00B1A8, overlay blend, 55%) is baked into media 376. */
@media (min-width: 1264px) {
	.fdi-home-aboutus__photo {
		height: 714px;
		overflow: hidden;
	}

	.fdi-home-aboutus__photo img {
		height: 719px !important;
		object-position: 50% 0 !important;
	}
}

/* Small laptops: the 1200 box shrinks, keep the photo's 607:714 frame. */
@media (min-width: 1025px) and (max-width: 1263px) {
	.fdi-home-aboutus__photo,
	.fdi-home-aboutus__photo img {
		width: 100% !important;
	}

	.fdi-home-aboutus__photo img {
		height: auto !important;
		aspect-ratio: 607 / 714;
	}
}

@media (max-width: 1024px) {
	.fdi-home-aboutus__left {
		border-right: 0 !important;
	}

	.fdi-home-aboutus__media {
		justify-content: center !important;
	}

	.fdi-home-aboutus__photo img {
		width: 100% !important;
		max-width: 607px;
		height: auto !important;
		aspect-ratio: 607 / 714;
	}

	.fdi-stat {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Stacked: the stats get rules across the whole window above and below
	   (the section clips them), and the photo starts 50px below the stats. */
	.elementor .fdi-stats::after {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.fdi-home-aboutus__media {
		position: relative;
		padding-top: 50px !important;
	}

	.fdi-home-aboutus__media::after {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		border-top: 1px solid var(--fdi-rule-strong);
		pointer-events: none;
	}
}

/* =================================================================== Vision
 * Teal box 607x546, right edge 2px inside the container (Figma 1354), 77px
 * below the photo top. The photo (700 tall, from the window's left edge) is
 * laid out from the box, as in Figma: it runs 133px under the box (844 wide
 * at 1440, Figma 881 with the box at 748), and the picture keeps Figma's
 * placement against its right edge (cover image 1053 wide, 86px of it past the
 * frame's right edge), so the box meets the second woman's face where Figma
 * has it. Only the leftmost 37px of Figma's crop is lost at 1440. */
.fdi-home-vision {
	position: relative;
}

@media (min-width: 1025px) {
	.fdi-home-vision__photo img {
		width: min(calc(100% - 508px), calc(50% + 124px)) !important;
		max-width: none;
		display: block;
		object-position: right -86px top 50% !important;
	}

	.fdi-home-vision__photo {
		width: 100%;
	}

	.fdi-home-vision__box {
		position: absolute !important;
		top: 134px;
		right: max(34px, calc(50% - 598px));
		width: 607px !important;
		min-height: 546px;
		z-index: 2;
	}
}

/* From a 1686 window the frame is 967+ wide, so the cover image no longer
   reaches 86px past it: pin it to the left so no gap opens. */
@media (min-width: 1686px) {
	.fdi-home-vision__photo img {
		object-position: left 50% !important;
	}
}

.fdi-home-vision__text {
	max-width: 100%;
}

.fdi-home-vision__text p {
	letter-spacing: 0.25px; /* measured on Figma's lines */
}

/* ==================================================================== About
 * Logo construction drawing (media 378, 840x821) hugs the window's top-right
 * corner, as in Figma; on small laptops it narrows so it clears the text. */
.fdi-home-about {
	position: relative;
}

.fdi-home-about > .e-con-inner {
	position: static;
}

.fdi-home-about__text {
	position: relative;
	z-index: 1;
}

.fdi-home-about__art img {
	display: block;
}

@media (min-width: 1025px) {
	.fdi-home-about__art {
		position: absolute !important;
		top: 1px;
		right: 0;
		width: min(840px, max(420px, calc(100% - 600px))) !important;
		z-index: 0;
		pointer-events: none;
	}

	.fdi-home-about__art img {
		width: 100% !important;
		max-width: none;
		height: auto;
	}
}

@media (max-width: 1024px) {
	/* Full row width, so the lazy-loaded drawing keeps its space before it loads. */
	.fdi-home-about__art {
		align-self: stretch !important;
		width: 100% !important;
	}

	.fdi-home-about__art img {
		width: 100% !important;
		height: auto !important;
		max-width: 560px;
		margin-left: auto;
	}
}

/* ================================================================ Services
 * Equal-height navy cards; title slot of 4 lines (31/34) bottom-aligned,
 * one blank line between paragraphs, button pinned 57px above the bottom. */
.fdi-service-card > .e-con-inner,
.fdi-service-card {
	height: 100%;
}

.fdi-service-card__photo img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.fdi-service-card__title {
	min-height: 136px;
	display: flex;
	align-items: flex-end;
}

.fdi-service-card__title .elementor-heading-title {
	width: 100%;
}

.fdi-service-card__text p {
	margin-bottom: 35px;
	letter-spacing: 0.4px; /* measured on Figma's lines (the card style has 0.25) */
}

.fdi-service-card__text p:last-child {
	margin-bottom: 0;
}

.fdi-service-card .fdi-btn-on-navy {
	margin-top: auto !important;
}

@media (min-width: 1025px) {
	.fdi-service-card {
		min-height: 1072px;
	}
}

@media (max-width: 1024px) {
	.fdi-service-card__title {
		min-height: 0;
	}
}

/* ============================================================ Pill details
 * Figma places the arrow differently on some Home pills (measured ink):
 * Contact 33|text|23|arrow|28 (165 wide), Go To Services 32|text|15|arrow|34
 * (227), filled card Read More 33|text|37|arrow|21 (200). */
.elementor-widget-button.fdi-btn-light.fdi-home-hero__btn .elementor-button {
	padding-right: 25px;
}

.elementor-widget-button.fdi-home-hero__btn .elementor-button .elementor-button-content-wrapper {
	gap: 20px;
}

.elementor-widget-button.fdi-btn-outline.fdi-services-head__btn .elementor-button {
	padding-left: 29px;
}

.elementor-widget-button.fdi-services-head__btn .elementor-button .elementor-button-content-wrapper {
	gap: 14px;
}

.elementor-widget-button.fdi-btn-on-navy .elementor-button {
	padding-left: 32px;
	padding-right: 20px;
}

.elementor-widget-button.fdi-btn-on-navy .elementor-button .elementor-button-content-wrapper {
	gap: 34px;
}

/* Outline Read More (About Us, About): Figma's arrow ink starts 156px into the
   200px pill, so a 20px gap; the pill is exactly 200 wide. */
.fdi-home-aboutus .elementor-widget-button.fdi-btn-outline .elementor-button .elementor-button-content-wrapper,
.fdi-home-about .elementor-widget-button.fdi-btn-outline .elementor-button .elementor-button-content-wrapper {
	gap: 20px;
}

.fdi-home-aboutus .elementor-widget-button.fdi-btn-outline .elementor-button,
.fdi-home-about .elementor-widget-button.fdi-btn-outline .elementor-button,
.elementor-69 .elementor-widget-button.fdi-btn-on-navy .elementor-button {
	box-sizing: border-box;
	width: 200px;
}

/* Every Home pill: Figma's label cap line and arrow sit 1px higher in the 43px
   pill than the shared 7.5/7.5 (outline) and 9.5/9.5 (filled) padding gives. */
.elementor-69 .elementor-widget-button.fdi-btn-outline .elementor-button,
.elementor-69 .elementor-widget-button.fdi-btn-light .elementor-button {
	padding-top: 6.5px;
	padding-bottom: 8.5px;
}

.elementor-69 .elementor-widget-button.fdi-btn-on-navy .elementor-button {
	padding-top: 8.5px;
	padding-bottom: 10.5px;
}