/* GC Pre Footer Type 1 — compact signup / CTA banner.
   Eyebrow + short headline (with accent) + subline, and a single button.
   Row layout (text left, button right) or stacked & centred.

   One card, several self-contained surfaces (dark / light / glass / band / none).
   Each surface carries its own background, border and text colours, so the banner
   reads cleanly on any page instead of dissolving into whatever sits behind it.
   All appearance flows through the --gc-pf-* variable contract. */

.gc-pf {
	--gc-pf-max: 1080px;
	--gc-pf-gap: 32px;
	--gc-pf-radius: 18px;
	--gc-pf-pad: 30px 36px;
	--gc-pf-btn-radius: 10px;
	--gc-pf-overlay: transparent;

	/* Text + accent — surfaces set sensible defaults; colour controls override. */
	--gc-pf-eyebrow: #6EC1E4;
	--gc-pf-heading: #FFFFFF;
	--gc-pf-accent: #6EC1E4;
	--gc-pf-subline: #AFC0CC;

	/* Button */
	--gc-pf-btn-bg: #5BA7DB;
	--gc-pf-btn-bg2: #6EC1E4;
	--gc-pf-btn-text: #FFFFFF;
	--gc-pf-btn-bg-hover: #3D82B3;

	/* Surface (painted on the card) */
	--gc-pf-surface: transparent;
	--gc-pf-border: transparent;
	--gc-pf-shadow: none;
	--gc-pf-glass-blur: 0px;
	--gc-pf-glow: transparent;

	padding: 48px 20px;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
}
.gc-pf, .gc-pf *, .gc-pf *::before, .gc-pf *::after { box-sizing: border-box; }
.gc-pf--full { width: 100vw; margin-left: calc(50% - 50vw); }

.gc-pf__inner { max-width: var(--gc-pf-max); margin: 0 auto; }

/* Card — the visible surface. Self-contained: background + border + shadow all
   defined, no edge masking, so the corners stay crisp on any background. */
.gc-pf__card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gc-pf-gap);
	padding: var(--gc-pf-pad);
	border-radius: var(--gc-pf-radius);
	background: var(--gc-pf-surface);
	border: 1px solid var(--gc-pf-border);
	box-shadow: var(--gc-pf-shadow);
	-webkit-backdrop-filter: blur(var(--gc-pf-glass-blur)) saturate(125%);
	backdrop-filter: blur(var(--gc-pf-glass-blur)) saturate(125%);
}

/* ---- Surfaces ---- */
.gc-pf--surface-dark {
	--gc-pf-surface: linear-gradient(150deg, #1C2E3C 0%, #14212B 55%, #0E2A3B 100%);
	--gc-pf-border: rgba(255,255,255,0.09);
	--gc-pf-shadow: 0 22px 50px -30px rgba(0,0,0,0.55);
	--gc-pf-heading: #FFFFFF;
	--gc-pf-eyebrow: #6EC1E4;
	--gc-pf-subline: #AFC0CC;
	--gc-pf-accent: #6EC1E4;
	--gc-pf-glow: rgba(91,167,219,0.20);
}
.gc-pf--surface-light {
	--gc-pf-surface: linear-gradient(150deg, #FFFFFF 0%, #EAF3FA 100%);
	--gc-pf-border: rgba(91,167,219,0.28);
	--gc-pf-shadow: 0 18px 44px -30px rgba(20,33,43,0.30);
	--gc-pf-heading: #14212B;
	--gc-pf-eyebrow: #3D82B3;
	--gc-pf-subline: #5A6B75;
	--gc-pf-accent: #3D82B3;
	--gc-pf-glow: rgba(91,167,219,0.16);
}
.gc-pf--surface-glass {
	--gc-pf-surface: rgba(16,23,32,0.55);
	--gc-pf-border: rgba(255,255,255,0.14);
	--gc-pf-shadow: 0 22px 55px -30px rgba(0,0,0,0.50);
	--gc-pf-glass-blur: 18px;
	--gc-pf-heading: #FFFFFF;
	--gc-pf-eyebrow: #6EC1E4;
	--gc-pf-subline: #C4D0DA;
	--gc-pf-accent: #6EC1E4;
	--gc-pf-glow: rgba(91,167,219,0.24);
}

/* Full-bleed gradient band — no card, gradient painted on the section itself. */
.gc-pf--surface-band {
	background: linear-gradient(135deg, #5BA7DB 0%, #3D82B3 100%);
	--gc-pf-heading: #FFFFFF;
	--gc-pf-eyebrow: rgba(255,255,255,0.85);
	--gc-pf-subline: rgba(255,255,255,0.92);
	--gc-pf-accent: #FFFFFF;
	--gc-pf-glow: rgba(255,255,255,0.14);
	--gc-pf-btn-bg: #FFFFFF;
	--gc-pf-btn-bg2: #FFFFFF;
	--gc-pf-btn-text: #14212B;
	--gc-pf-btn-bg-hover: #EAF3FA;
}
.gc-pf--surface-band .gc-pf__card {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding-left: 0;
	padding-right: 0;
}

.gc-pf--surface-none .gc-pf__card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Accent glow — soft coloured light clipped inside the card. */
.gc-pf--glow .gc-pf__card::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -8%;
	width: 55%;
	height: 180%;
	z-index: 0;
	background: radial-gradient(closest-side, var(--gc-pf-glow), transparent);
	pointer-events: none;
}

.gc-pf__text, .gc-pf__actions { position: relative; z-index: 1; }
.gc-pf__text { min-width: 0; }

.gc-pf__eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-pf-eyebrow); margin-bottom: 10px; }
.gc-pf__eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }
.gc-pf__heading { margin: 0; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.024em; text-wrap: balance; color: var(--gc-pf-heading); }
.gc-pf__hl { color: var(--gc-pf-accent); }
.gc-pf__subline { margin: 8px 0 0; max-width: 46em; font-size: 14.5px; line-height: 1.45; color: var(--gc-pf-subline); }

/* Actions */
.gc-pf__actions { flex: 0 0 auto; }
.gc-pf__btn { display: inline-block; padding: 13px 28px; text-align: center; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; border-radius: var(--gc-pf-btn-radius); background: linear-gradient(135deg, var(--gc-pf-btn-bg), var(--gc-pf-btn-bg2)); color: var(--gc-pf-btn-text); font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 14.5px; letter-spacing: .01em; box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.gc-pf__btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); background: linear-gradient(135deg, var(--gc-pf-btn-bg-hover), var(--gc-pf-btn-bg)); }

/* Trail — footprints that walk across the gap and land on the button. */
.gc-pf__trail {
	--gc-pf-step-cycle: 5.2s;
	--gc-pf-step-lag: .28s;
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 90px;
	height: 44px;
	padding-inline: 10px;
}
.gc-pf__trail > i {
	position: relative;
	width: 11px;
	height: 15px;
	flex: 0 0 auto;
	border-radius: 54% 54% 42% 42% / 62% 62% 38% 38%;
	background: var(--gc-pf-accent);
	opacity: 0;
	animation: gc-pf-step var(--gc-pf-step-cycle) ease-out infinite;
	animation-delay: calc(var(--n) * var(--gc-pf-step-lag));
}
.gc-pf__trail > i::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 8px;
	height: 6px;
	margin-left: -4px;
	border-radius: 50%;
	background: inherit;
}
.gc-pf__trail > i:nth-child(odd) { transform: translateY(-9px) rotate(66deg); }
.gc-pf__trail > i:nth-child(even) { transform: translateY(9px) rotate(114deg); }
@keyframes gc-pf-step {
	0% { opacity: 0; }
	7% { opacity: .95; }
	38% { opacity: .55; }
	58%, 100% { opacity: 0; }
}

.gc-pf--trail .gc-pf__btn { position: relative; }
.gc-pf--trail .gc-pf__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	animation: gc-pf-arrive 5.2s cubic-bezier(.3,0,.2,1) infinite;
	animation-delay: 2s;
}
@keyframes gc-pf-arrive {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc-pf-accent) 55%, transparent); }
	8% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gc-pf-accent) 20%, transparent); }
	22%, 100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--gc-pf-accent) 0%, transparent); }
}

/* Stacked & centred */
.gc-pf--stacked .gc-pf__card { flex-direction: column; text-align: center; }
.gc-pf--stacked .gc-pf__subline { margin-left: auto; margin-right: auto; }
.gc-pf--stacked .gc-pf__eyebrow::before { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }

@media (max-width: 900px) {
	.gc-pf__trail { display: none; }
}
@media (max-width: 720px) {
	.gc-pf__card { flex-direction: column; text-align: center; align-items: center; }
	.gc-pf__subline { margin-left: auto; margin-right: auto; }
	.gc-pf__actions { width: 100%; }
	.gc-pf__btn { display: block; width: 100%; white-space: normal; }
}
@media (max-width: 640px) {
	.gc-pf { padding: 40px 16px; }
	.gc-pf .gc-pf__card { padding: 22px 20px; gap: 18px; border-radius: 14px; }
	.gc-pf--surface-band .gc-pf__card { padding-left: 0; padding-right: 0; }
	.gc-pf--glow .gc-pf__card::after { display: none; }
	.gc-pf--surface-glass .gc-pf__card { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.gc-pf__eyebrow { font-size: 11px; margin-bottom: 5px; }
	.gc-pf__heading { font-size: clamp(20px, 5.6vw, 24px); }
	.gc-pf__subline { margin-top: 7px; font-size: 14.5px; line-height: 1.5; }
	.gc-pf__btn { padding: 13px 22px; font-size: 14.5px; min-height: 44px; }
}
@media (max-width: 480px) {
	.gc-pf { padding: 36px 14px; }
	.gc-pf .gc-pf__card { padding: 20px 16px; gap: 16px; }
	.gc-pf__heading { font-size: clamp(19px, 5.8vw, 21px); }
}
@media (prefers-reduced-motion: reduce) {
	.gc-pf__btn { transition: none; }
	.gc-pf__btn:hover { transform: none; }
	.gc-pf__trail > i,
	.gc-pf--trail .gc-pf__btn::after { animation: none; }
	.gc-pf__trail > i { opacity: .45; }
}


/* ---- 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-pf__eyebrow {
	gap: var(--gcab-eyebrow-gap);
	margin-bottom: var(--gcab-eyebrow-mb);
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: var(--gcab-eyebrow-size);
	font-weight: 600;
	letter-spacing: .16em;
}

.gc-about :is(.gc-about,
.gc-about ) .gc-pf__card { border-radius: var(--gcab-radius);
}


/* 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-pf {
	--gcab-accent: var(--gc-pf-accent, #6EC1E4);
	--gcab-glow: var(--gc-pf-accent, #6EC1E4);
	--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-pf-accent, #6EC1E4) 70%, transparent);
	--gcab-glow-ring:
		0 0 0 1px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 22%, transparent),
		0 0 34px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 48%, transparent),
		0 0 82px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 19%, transparent);
	--gcab-glow-ring-hover:
		0 0 0 1px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 34%, transparent),
		0 0 46px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 48%, transparent),
		0 0 102px color-mix(in srgb, var(--gc-pf-accent, #6EC1E4) 24%, transparent);
}

@media (max-width: 640px) {
	.gc-pf {
		--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-pf__eyebrow {
	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-pf__eyebrow::before,
.gc-pf__eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-pf__eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}

.gc-pf__trail--van,
.gc-pf__trail--key { display: block; overflow: hidden; }

.gc-pf__road {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 2px dashed color-mix(in srgb, var(--gc-pf-accent) 34%, transparent);
}
.gc-pf__trail--van .gc-pf__road { top: 70%; }
.gc-pf__trail--key .gc-pf__road { top: 50%; border-top-style: dotted; }

.gc-pf__drive {
	position: absolute;
	inset: 0;
	animation: gc-pf-drive var(--gc-pf-step-cycle) cubic-bezier(.42, 0, .5, 1) infinite;
}

.gc-pf__vehicle {
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	width: 34px;
	color: var(--gc-pf-accent);
	transform: translateY(-50%);
}
.gc-pf__vehicle svg { display: block; width: 100%; height: auto; }

@keyframes gc-pf-drive {
	0% { transform: translateX(-100%); opacity: 0; }
	8% { opacity: 1; }
	34% { transform: translateX(0); opacity: 1; }
	46% { transform: translateX(0); opacity: 0; }
	100% { transform: translateX(0); opacity: 0; }
}

@media (max-width: 900px) {
	.gc-pf__trail--van,
	.gc-pf__trail--key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-pf__drive { animation: none; transform: translateX(0); opacity: .5; }
}
