/**
 * GC Feature Banner — styles.
 * Alternating image/content rows. Scoped to .gc-fb; appearance driven by
 * --gc-fb-* custom properties (with fallbacks) so an un-styled instance
 * matches the source snippet. Elementor controls override the vars via
 * {{WRAPPER}} .gc-fb.
 */

.gc-fb {
	--gc-fb-accent: #5BA7DB;
	--gc-fb-accent-2: #3D82B3;
	--gc-fb-badge-bg: #5BA7DB;
	--gc-fb-badge-text: #FFFFFF;
	--gc-fb-heading-color: #14212B;
	--gc-fb-muted-color: #5A6B75;
	--gc-fb-tick-color: #3D82B3;
	--gc-fb-btn-bg: #5BA7DB;
	--gc-fb-btn-bg-hover: #3D82B3;
	--gc-fb-btn-text: #FFFFFF;
	--gc-fb-media-start: #EAF3FA;
	--gc-fb-media-end: #F4F8FB;
	--gc-fb-heading-font: "Manrope", system-ui, sans-serif;
	--gc-fb-body-font: "Inter", system-ui, sans-serif;
	--gc-fb-radius: 16px;
	--gc-fb-radius-pill: 999px;
	--gc-fb-img-ratio: 1.8;
	--gc-fb-shot-fade: 700ms;
	--gc-fb-emissive: 48%;
	--gc-fb-emissive-blur: 34px;
	--gc-fb-col-gap: 56px;
	--gc-fb-row-gap: 72px;
	--gc-fb-max: 1312px;
	--gc-fb-pad: 48px;
	--gc-fb-shadow-button: 0 6px 16px -2px rgba(91, 167, 219, 0.3);
	--gc-fb-rev-dist: 32px;
	--gc-fb-rev-time: 700ms;
	--gc-fb-step: 60ms;
	--gc-fb-light-size: 240px;
	--gc-fb-light-op: 0.5;

	font-family: var(--gc-fb-body-font);
	color: var(--gc-fb-heading-color);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	padding: 88px 0;
}
.gc-fb, .gc-fb *, .gc-fb *::before, .gc-fb *::after { box-sizing: border-box; }
/* max-width and the right margin both matter: an Elementor container caps its
   children at max-width:100%, which clips a 100vw child back to the column. */
.gc-fb--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.gc-fb-inner { width: 100%; max-width: var(--gc-fb-max); margin-inline: auto; padding-inline: var(--gc-fb-pad); }
.gc-fb-header { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.gc-fb-header h2 { font-family: var(--gc-fb-heading-font); font-weight: 700; line-height: 1.12; letter-spacing: -.024em; margin: 0 0 .35em; text-wrap: balance; font-size: clamp(1.85rem, 1.45rem + 1.5vw, 2.75rem); color: var(--gc-fb-heading-color); }
.gc-fb-header p { color: var(--gc-fb-muted-color); margin: 0; font-size: 17px; font-weight: 500; }

.gc-fb-row { display: grid; grid-template-columns: var(--gc-fb-media-col, .9fr) var(--gc-fb-text-col, 1.1fr); gap: var(--gc-fb-col-gap); align-items: center; }
.gc-fb-row--rev { grid-template-columns: var(--gc-fb-text-col, 1.1fr) var(--gc-fb-media-col, .9fr); }
.gc-fb-row + .gc-fb-row { margin-top: var(--gc-fb-row-gap); }
.gc-fb-row--rev .gc-fb-media { order: 2; }

.gc-fb-media { position: relative; aspect-ratio: var(--gc-fb-img-ratio); border-radius: var(--gc-fb-radius); background: linear-gradient(-128deg, var(--gc-fb-media-start) 15%, var(--gc-fb-media-end) 85%); display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Emissive frame: a hairline in the row's own accent plus a bloom of the same
   colour, so each image reads as lit by its section rather than outlined. */
.gc-fb--emissive .gc-fb-media {
	--gc-fb-emissive-hue: var(--gc-fb-accent-row, var(--gc-fb-accent));
	border: 1px solid color-mix(in srgb, var(--gc-fb-emissive-hue) 70%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--gc-fb-emissive-hue) 22%, transparent),
		0 0 var(--gc-fb-emissive-blur) color-mix(in srgb, var(--gc-fb-emissive-hue) var(--gc-fb-emissive), transparent),
		0 0 calc(var(--gc-fb-emissive-blur) * 2.4) color-mix(in srgb, var(--gc-fb-emissive-hue) calc(var(--gc-fb-emissive) / 2.5), transparent);
	transition: box-shadow .4s ease, border-color .4s ease;
}
.gc-fb--emissive .gc-fb-row:hover .gc-fb-media {
	border-color: color-mix(in srgb, var(--gc-fb-emissive-hue) 90%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--gc-fb-emissive-hue) 34%, transparent),
		0 0 calc(var(--gc-fb-emissive-blur) * 1.35) color-mix(in srgb, var(--gc-fb-emissive-hue) var(--gc-fb-emissive), transparent),
		0 0 calc(var(--gc-fb-emissive-blur) * 3) color-mix(in srgb, var(--gc-fb-emissive-hue) calc(var(--gc-fb-emissive) / 2), transparent);
}
.gc-fb-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gc-fb-row:hover .gc-fb-media img { transform: scale(1.06); }

.gc-fb-glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	transition: opacity .35s ease;
	background: radial-gradient(var(--gc-fb-light-size) circle at var(--mx, 50%) var(--my, 50%),
		color-mix(in srgb, var(--gc-fb-accent-row, var(--gc-fb-accent)) 70%, transparent) 0%,
		transparent 70%);
}

.gc-fb-content h3 { font-family: var(--gc-fb-heading-font); font-weight: 700; line-height: 1.14; letter-spacing: -.024em; font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.25rem); margin: 0 0 .45em; text-wrap: balance; color: var(--gc-fb-heading-color); }
.gc-fb-content p { color: var(--gc-fb-muted-color); margin: 0 0 26px; font-size: 16.5px; font-weight: 500; line-height: 1.65; }

.gc-fb-badge { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-fb-badge-bg); margin-bottom: 14px; }
.gc-fb-badge::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }

.gc-fb-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gc-fb-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; color: var(--gc-fb-heading-color); }
.gc-fb-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gc-fb-tick-color); margin-top: 1px; }

.gc-fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: var(--gc-fb-radius-pill); font-family: var(--gc-fb-body-font); font-size: 14px; font-weight: 600; line-height: normal; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--gc-fb-btn-bg); color: var(--gc-fb-btn-text); box-shadow: var(--gc-fb-shadow-button); transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.gc-fb-btn:hover { background: var(--gc-fb-btn-bg-hover); color: var(--gc-fb-btn-text); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--gc-fb-accent-row, var(--gc-fb-accent)) 80%, transparent); }
.gc-fb-btn:active { transform: translateY(1px); }
.gc-fb-btn-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.gc-fb-btn-icon svg { width: 1em; height: 1em; fill: currentColor; display: block; }

.gc-fb-list svg { transition: color .3s ease; }

@media (hover: hover) {
	.gc-fb--light .gc-fb-media:hover .gc-fb-glow { opacity: var(--gc-fb-light-op); }

	.gc-fb--par .gc-fb-media img { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
	.gc-fb--par .gc-fb-row:hover .gc-fb-media img { transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0); }

	.gc-fb-row:hover .gc-fb-list svg { color: var(--gc-fb-accent-row, var(--gc-fb-tick-color)); }
}

.gc-fb--anim .gc-fb-media,
.gc-fb--anim .gc-fb-content > *,
.gc-fb--anim .gc-fb-list li {
	transition: opacity var(--gc-fb-rev-time) ease, transform var(--gc-fb-rev-time) cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * var(--gc-fb-step));
}
.gc-fb--anim.is-armed .gc-fb-media { opacity: 0; transform: translate3d(calc(var(--gc-fb-rev-dist) * -1), 0, 0); }
.gc-fb--anim.is-armed .gc-fb-row--rev .gc-fb-media { transform: translate3d(var(--gc-fb-rev-dist), 0, 0); }
.gc-fb--anim.is-armed .gc-fb-content > * { opacity: 0; transform: translate3d(0, 16px, 0); }
.gc-fb--anim.is-armed .gc-fb-list li { opacity: 0; transform: translate3d(-10px, 0, 0); }
.gc-fb--anim.is-armed .gc-fb-row.is-in .gc-fb-media,
.gc-fb--anim.is-armed .gc-fb-row.is-in .gc-fb-content > *,
.gc-fb--anim.is-armed .gc-fb-row.is-in .gc-fb-list li { opacity: 1; transform: none; }

@media (max-width: 960px) {
	.gc-fb-row { grid-template-columns: 1fr; gap: 28px; }
	.gc-fb-row--rev .gc-fb-media { order: 0; }
}
@media (max-width: 640px) {
	.gc-fb {
		padding: 48px 0;
		--gc-fb-col-gap: 18px;
		--gc-fb-row-gap: 36px;
		--gc-fb-pad: 20px;
		--gc-fb-img-ratio: 1.7778;
		--gc-fb-radius: 12px;
	}
	.gc-fb-inner { padding-inline: 20px; }
	.gc-fb-header { margin: 0 auto 28px; }
	.gc-fb-header h2 { font-size: 1.55rem; }
	.gc-fb-header p { font-size: 15px; line-height: 1.5; }
	.gc-fb-row { gap: 18px; }
	.gc-fb-glow { display: none; }
	.gc-fb-badge { font-size: 10.5px; gap: 10px; margin-bottom: 12px; }
	.gc-fb-content h3 { font-size: 1.1rem; margin: 0 0 .4em; }
	.gc-fb-content p { font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }
	.gc-fb-list { margin: 0 0 20px; gap: 8px; }
	.gc-fb-list li { font-size: 14px; gap: 8px; }
	.gc-fb-list svg { width: 16px; height: 16px; }
	.gc-fb-btn { white-space: normal; text-align: center; width: 100%; min-height: 44px; }
	.gc-fb-content p, .gc-fb-list li { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
	.gc-fb { padding: 40px 0; --gc-fb-pad: 16px; --gc-fb-row-gap: 30px; }
	.gc-fb-inner { padding-inline: 16px; }
	.gc-fb-header { margin: 0 auto 24px; }
	.gc-fb-header h2 { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) { .gc-fb * { transition: none !important; } }

/* ---- Image slider ----
   Rows holding more than one image crossfade between them. The images stack in the
   frame rather than sitting in a track, so the frame keeps its ratio and the
   emissive border stays put while the pictures change. */
.gc-fb-media--slider .gc-fb-shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--gc-fb-shot-fade) ease;
}
.gc-fb-media--slider .gc-fb-shot.is-active { opacity: 1; }

.gc-fb-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid color-mix(in srgb, var(--gc-fb-accent-row, var(--gc-fb-accent)) 45%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, #FFFFFF 82%, transparent);
	color: var(--gc-fb-accent-row, var(--gc-fb-accent));
	cursor: pointer;
	opacity: 0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity .3s ease, background .2s ease, transform .2s ease;
}
.gc-fb-arrow--prev { left: 12px; }
.gc-fb-arrow--next { right: 12px; }
.gc-fb-arrow svg { width: 20px; height: 20px; }
.gc-fb-media--slider:hover .gc-fb-arrow,
.gc-fb-arrow:focus-visible { opacity: 1; }
.gc-fb-arrow:hover { background: #FFFFFF; transform: translateY(-50%) scale(1.08); }
.gc-fb-arrow:focus-visible { outline: 2px solid var(--gc-fb-accent-row, var(--gc-fb-accent)); outline-offset: 3px; }

/* Touch has no hover, so the arrows would never appear. */
@media (hover: none) {
	.gc-fb-arrow { opacity: 1; }
}

.gc-fb-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.gc-fb-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: color-mix(in srgb, var(--gc-fb-accent-row, var(--gc-fb-accent)) 35%, transparent);
	transition: background .3s ease, transform .3s ease;
}
.gc-fb-dot { position: relative; }
.gc-fb-dot::after { content: ""; position: absolute; inset: -7px; }
.gc-fb-dot.is-active {
	background: var(--gc-fb-accent-row, var(--gc-fb-accent));
	transform: scale(1.35);
}
.gc-fb-dot:focus-visible { outline: 2px solid var(--gc-fb-accent-row, var(--gc-fb-accent)); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.gc-fb-media--slider .gc-fb-shot { transition: none; }
	.gc-fb-dot,
	.gc-fb-arrow { transition: none; }
}


/* ---- Careers / About treatment. Scoped to the page class carried in
   the Elementor data, so it travels with an export and leaves Home alone. ---- */

.gc-about :is(.gc-about,
.gc-about ) .gc-fb-badge {
	gap: var(--gcab-eyebrow-gap);
	margin-bottom: var(--gcab-eyebrow-mb);
	font-size: var(--gcab-eyebrow-size);
	font-weight: 600;
	letter-spacing: .16em;
}

.gc-about :is(.gc-about,
.gc-about ) .gc-fb { padding: var(--gcab-pad-y) 0;
}

.gc-about :is(.gc-about,
.gc-about ) .gc-fb-media {
	aspect-ratio: auto;
	height: var(--gcab-media-h);
}

.gc-about :is(.gc-about,
.gc-about ) .gc-fb-media { border-radius: var(--gcab-radius);
}

.gc-about :is(.gc-about,
.gc-about ) .gc-fb-list {
	gap: 0;
	margin: 0 0 28px;
	border-top: 1px solid var(--gcab-line);
}

.gc-about :is(.gc-about,
.gc-about ) .gc-fb-list li {
	align-items: flex-start;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--gcab-line);
	font-size: 14.5px;
	font-weight: 500;
}

@media (max-width: 640px) {
	.gc-about :is(.gc-about,
	.gc-about ) .gc-fb-list li { padding: 10px 2px; font-size: 14px;
	}
}


/* Self-contained design tokens. Everything this widget needs is declared on
   its own root, so it styles itself wherever it is dropped: no page class, no
   body class, no shared stylesheet. The accent follows the widget's own
   Elementor colour control. */
.gc-fb {
	--gcab-accent: var(--gc-fb-accent, #5BA7DB);
	--gcab-glow: var(--gc-fb-accent, #5BA7DB);
	--gcab-line: var(--gc-line, #E1E9EE);
	--gcab-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
	--gcab-radius: var(--gc-radius-md, 16px);
	--gcab-pad-y: 64px;
	--gcab-gutter: 48px;
	--gcab-eyebrow-size: 11.5px;
	--gcab-eyebrow-gap: 14px;
	--gcab-eyebrow-mb: 14px;
	--gcab-h1: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	--gcab-h2: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--gcab-lead: 16px;
	--gcab-media-h: 420px;
	--gcab-tile-h: 236px;
	--gcab-staff-h: 230px;
	--gcab-glow-edge: 1px solid color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--gc-fb-accent, #5BA7DB) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-fb {
		--gcab-pad-y: 42px;
		--gcab-gutter: 20px;
		--gcab-eyebrow-size: 10.5px;
		--gcab-eyebrow-gap: 10px;
		--gcab-eyebrow-mb: 12px;
		--gcab-h1: clamp(1.75rem, 7vw, 2.1rem);
		--gcab-h2: 1.6rem;
		--gcab-lead: 15px;
		--gcab-radius: 14px;
		--gcab-media-h: 240px;
		--gcab-tile-h: 200px;
		--gcab-staff-h: 190px;
	}
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-fb-badge {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-fb-badge::before,
.gc-fb-badge::after { display: none; }

@media (max-width: 640px) {
	.gc-fb-badge { font-size: 10.5px; margin-bottom: 12px; }
}