/* ==========================================================================
   Digital ROI — Card fan carousel ([droi_fan])
   ========================================================================== */

.droi-fan {
	--f-accent: #ed3d0e;
	--f-ink: #14110f;
	position: relative;
	z-index: 1;
	padding: clamp(48px, 6vw, 90px) 16px;
	background:
		radial-gradient(60% 60% at 50% 0%, rgba(245, 166, 35, 0.06), transparent 70%),
		#f8f7f5;
	overflow: hidden;
	text-align: center;
}

.droi-fan__head {
	position: relative;
	max-width: 760px;
	margin: 0 auto clamp(20px, 3vw, 36px);
}
.droi-fan__titlewrap {
	position: relative;
	display: inline-flex;
	flex-direction: column-reverse; /* eyebrow is after the title in HTML; this stacks it visually above */
	align-items: center;
	gap: 14px;
}
.droi-fan__eyebrow {
	/* was absolutely positioned at a fixed 39% to sit "over Built to" — that
	   only worked for one exact line-wrap of the heading. Any other wrap
	   (which happens at almost every viewport width) landed the badge over
	   different words, sometimes across two lines, unreadable. Stacked above
	   the heading instead, like every other eyebrow badge on the site
	   (About page, FAQ section) — the tilt stays for character, it just no
	   longer overlaps text it can't predict. */
	position: static;
	transform: rotate(-4deg);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 18px;
	background: var(--f-accent);
	color: #fff;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 10px 22px -8px rgba(237, 61, 14, 0.55);
}
.droi-fan__eyebrow-num {
	font-weight: 700;
	opacity: 0.8;
}
.droi-fan .droi-fan__title {
	margin: 0 !important;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 40px) !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--f-ink) !important;
	text-transform: none !important;
}
.droi-fan__lead {
	margin: 14px auto 0;
	max-width: 60ch;
	color: rgba(0, 0, 0, 0.55);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.65;
}

/* Keep the demo's tilted "(03) Our Services" pill — just stop it wrapping. */
.elementor-element-73db1ed4 {
	width: auto !important;
	white-space: nowrap;
}
.elementor-element-73db1ed4 .elementor-heading-title {
	white-space: nowrap !important;
}

/* ---- stage + layout ---- */
.droi-fan__stage {
	display: flex;
	justify-content: center;
}
.droi-fan__layout {
	position: relative;
	width: 100%;
	max-width: 80rem;
	height: 38rem;
	margin: 0 auto;
}

/* base card (centred; GSAP transforms fan them out) */
.droi-fan__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19rem;
	height: 27rem;
	margin: -13.5rem 0 0 -9.5rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.35);
	opacity: 0;
	will-change: transform;
}
.droi-fan__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* clickable card + service-name caption */
a.droi-fan__card {
	display: block;
	text-decoration: none;
	cursor: pointer;
}
.droi-fan__card-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	padding: 30px 14px 16px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* responsive card + stage sizes (match the JS height breakpoints) */
@media (max-width: 1024px) {
	.droi-fan__layout { height: 34rem; }
	.droi-fan__card { width: 16rem; height: 23rem; margin: -11.5rem 0 0 -8rem; }
}
@media (max-width: 768px) {
	.droi-fan__layout { height: 28rem; }
	.droi-fan__card { width: 14rem; height: 20rem; margin: -10rem 0 0 -7rem; }
}
@media (max-width: 640px) {
	/* 5-card fan on mobile — give it room without horizontal scroll */
	.droi-fan {
		overflow-x: clip;
		overflow-y: visible;
		padding-bottom: clamp(32px, 5vw, 56px);
	}
	.droi-fan__stage {
		overflow: visible;
	}
	.droi-fan__layout { height: 26rem; overflow: visible; }
	.droi-fan__card { width: 11rem; height: 16rem; margin: -8rem 0 0 -5.5rem; }
}
@media (max-width: 480px) {
	.droi-fan__layout { height: 22rem; }
	.droi-fan__card { width: 9.5rem; height: 14rem; margin: -7rem 0 0 -4.75rem; }
}

/* ---- nav: arrows + dots ---- */
.droi-fan__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: clamp(16px, 3vw, 28px);
}
.droi-fan .droi-fan__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
	background: rgba(0, 0, 0, 0.04) !important;   /* beat theme's orange button bg */
	color: rgba(0, 0, 0, 0.55) !important;
	box-shadow: none !important;
	cursor: pointer;
	overflow: visible;
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.droi-fan .droi-fan__btn::before,
.droi-fan .droi-fan__btn::after {
	display: none !important;                      /* theme decorative pseudo */
}
.droi-fan .droi-fan__btn svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;
}
.droi-fan .droi-fan__btn:hover {
	color: #fff !important;
	background: var(--f-accent) !important;
	border-color: var(--f-accent) !important;
}
.droi-fan__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}
.droi-fan__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, background 0.3s ease;
}
.droi-fan__dot.is-active {
	background: var(--f-accent);
	transform: scale(1.35);
}