/* Ported from the Frame site's custom footer — rem values converted to px
   because this mirror sets a vw-based root font size.
   Custom footer redesign — Frame Creative Group
   Keeps brand blue (#001eff), white text, Stolzl font, white "Scroll up" pill. */

footer.fcg-custom-footer {
	display: block;
	/* the page itself is black down here; the footer carries the page cream so
	   the margin around the blue panel reads light rather than as a black band */
	background: var(--c-white, #fbfbf4);
	color: #fff;
	font-family: stolzl, sans-serif;
	font-weight: 300;
	padding: 0;
	margin: 0;
	width: 100%;
}

.fcg-custom-footer .fcg-panel {
	background: #001eff; /* brand blue (rgb 0,30,255) */
	/* the panel is inset on both sides and lifted off whatever section
	   ends above it, so it reads as its own block */
	margin: clamp(24px, 3vw, 56px) clamp(12px, 1.6vw, 28px) 0;
	/* the legal row sits tight to the bottom edge, the same small gap the
	   registry line keeps on the other side of it */
	padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px) 20px;
	/* the same corner the images above it use, so the panel reads as part of
	   the same set (--r-media is defined in ui-tweaks.css) */
	border-radius: var(--r-media, 12px);
	box-sizing: border-box;
}

/* --- Top: two office blocks --- */
.fcg-custom-footer .fcg-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: clamp(24px, 5vw, 64px);
	flex-wrap: wrap;
}

.fcg-custom-footer .fcg-office {
	display: flex;
	flex-direction: column;
	max-width: 480px;
}

.fcg-custom-footer .fcg-office.fcg-right {
	text-align: right;
	align-items: flex-end;
}

.fcg-custom-footer .fcg-label {
	text-transform: uppercase;
	font-size: clamp(10px, 0.72vw, 12px);
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: clamp(16px, 1.8vw, 26px);
}

.fcg-custom-footer .fcg-line {
	color: #fff;
	text-decoration: none;
	font-size: clamp(15px, 1.55vw, 23px);
	line-height: 1.28;
	font-weight: 300;
	margin-bottom: 0.15em;
	transition: opacity 0.25s ease;
}

/* --- Scroll up pill --- */
.fcg-custom-footer .fcg-scrollup-wrap {
	display: flex;
	justify-content: center;
	margin: clamp(36px, 5.5vw, 72px) 0 clamp(24px, 3.5vw, 48px);
}

/* The velaki Lottie includes the white pill background itself, so the
   anchor is a transparent hit-area sized to the pill graphic. */
.fcg-custom-footer .fcg-scrollup {
	display: inline-flex;
	align-items: center;
	background: transparent;
	text-decoration: none;
	font-size: clamp(17px, 1.85vw, 25px);
	padding: 0;
	border-radius: 999px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.fcg-custom-footer .fcg-scrollup:hover {
	transform: translateY(-3px);
}
.fcg-custom-footer .fcg-scrollup svg {
	width: 0.9em;
	height: 0.9em;
}

/* The velaki Lottie is the whole button; the box matches the pill
   graphic's aspect so the hover hit-area equals the visible pill. */
.fcg-custom-footer .fcg-velaki {
	display: block;
	height: 2.8em;
	aspect-ratio: 449.5 / 129;
}
.fcg-custom-footer .fcg-velaki svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* --- Socials row --- */
.fcg-custom-footer .fcg-socials {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 32px);
}
.fcg-custom-footer .fcg-socials > div {
	display: flex;
	gap: clamp(28px, 4vw, 64px);
}
.fcg-custom-footer .fcg-socials a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: clamp(16px, 2vw, 27px);
	font-weight: 300;
	letter-spacing: 0.01em;
	transition: opacity 0.25s ease;
}

/* --- Legal links (centered) --- */
.fcg-custom-footer .fcg-legal {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(16px, 2.5vw, 32px);
	margin-top: clamp(20px, 2.5vw, 28px);
	/* no leading under the line, so the 20px below it is the gap you see —
	   otherwise it reads larger than the registry line's on the other side */
	line-height: 1;
}
.fcg-custom-footer .fcg-legal a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	text-transform: uppercase;
	font-size: clamp(10px, 0.76vw, 12px);
	letter-spacing: 0.05em;
	line-height: 1;
	transition: opacity 0.25s ease;
}

/* --- Black copyright bar --- */
.fcg-custom-footer .fcg-copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 40px);
	background: transparent;
	color: #000;
	text-transform: uppercase;
	font-size: clamp(9.5px, 0.7vw, 11px);
	letter-spacing: 0.04em;
	/* the same 20px the legal row keeps inside the panel */
	line-height: 1;
	padding: 20px 16px;
	text-align: center;
}

/* --- Mobile --- */
@media (max-width: 640px) {
	.fcg-custom-footer .fcg-office,
	.fcg-custom-footer .fcg-office.fcg-right {
		text-align: left;
		align-items: flex-start;
		max-width: 100%;
	}
	.fcg-custom-footer .fcg-socials {
		justify-content: center;
	}
	.fcg-custom-footer .fcg-socials > div {
		justify-content: center;
	}
}

/* the site-wide blue hover would vanish against this panel, so footer links
   simply stay white — no dimming on hover */
.fcg-custom-footer a:hover,
.fcg-custom-footer a:hover span {
	color: #fff !important;
	opacity: 1 !important;
}

/* the footer runs in the same Stolzl 300 as the rest of the site */
.fcg-custom-footer,
.fcg-custom-footer * {
	font-family: stolzl, sans-serif !important;
	font-weight: 300 !important;
}

/* --- Links underline on hover, and keep their brightness --- */
/* The site-wide rule paints every hovered link in the brand blue, and it is
   the more specific one — on this blue panel that made the text vanish. The
   class is repeated to out-weigh it rather than to shout: `a:not(.n-logo)
   :not(.btn):not(.btn-block-link):hover` counts four classes. */
.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer a:hover,
.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer a:hover span,
.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer a:hover p {
	color: #fff !important;
	opacity: 1 !important;
}
/* the legal row sits a shade down, and keeps that on hover */
.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer.fcg-custom-footer .fcg-legal a:hover {
	color: rgba(255, 255, 255, 0.85) !important;
}
/* the Scroll up pill is a graphic, not a text link — no underline on it */
.fcg-custom-footer .fcg-socials a,
.fcg-custom-footer .fcg-legal a,
.fcg-custom-footer a.fcg-line {
	position: relative;
	display: inline-block;
}
.fcg-custom-footer .fcg-scrollup:after {
	content: none !important;
}
.fcg-custom-footer .fcg-socials a:after,
.fcg-custom-footer .fcg-legal a:after,
.fcg-custom-footer a.fcg-line:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.fcg-custom-footer .fcg-socials a:hover:after,
.fcg-custom-footer .fcg-legal a:hover:after,
.fcg-custom-footer a.fcg-line:hover:after {
	transform: scaleX(1);
}


/* --- links on the blue --- */

/* The footer stands on the brand blue, and the site's global rule paints any
   hovered link that same blue — so pointing at one made it vanish. Two things
   had to be right for the fix to land:
   
   The selector. footer.js does `footer.className = 'fcg-custom-footer'`, which
   replaces the class list outright, so the `.footer` class this first targeted
   is not on the element at all and the rules never applied.
   
   The weight. The rule being beaten is `a:not(...)x5:hover span` at (0,6,2),
   and both carry !important, so specificity decides — the exclusions are
   repeated here to reach (0,7,2).
   
   The colour then stays put and a line draws itself under the wording instead,
   which is the one move available on a ground that is already the accent. */
.fcg-custom-footer a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):hover,
.fcg-custom-footer a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):hover span,
.fcg-custom-footer a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):hover p,
.footer a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):hover,
.footer a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):hover span {
	color: #fff !important;
	opacity: 1 !important;
}

/* the line under the wording, drawn from the left */
.fcg-custom-footer a:not(.btn):not(.btn-block-link):not(.n-logo) {
	position: relative;
	text-decoration: none;
}
.fcg-custom-footer a:not(.btn):not(.btn-block-link):not(.n-logo):after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.3rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.42s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-custom-footer a:not(.btn):not(.btn-block-link):not(.n-logo):hover:after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.fcg-custom-footer a:after { transition: none; }
}