/**
 * Footer widget — Style 1, "Aurora".
 *
 * A full site footer: an optional CTA band across the top, a brand column with
 * contact rows, any number of link columns, a newsletter block, a giant
 * wordmark, and a bottom bar carrying the copyright, legal links and payment
 * marks. A back-to-top button rides along with a scroll-progress ring.
 *
 * Dark by default, because most footers are, but every colour resolves through
 * a token on `.goxom-ft` — `.goxom-ft--light` swaps the whole palette without
 * touching a single rule below it.
 *
 * The column grid is built in PHP and handed over as `--ft-cols`, because the
 * track list depends on how many link columns the editor added and on whether
 * the brand and newsletter blocks are showing at all. The breakpoints below
 * override `grid-template-columns` outright, which beats the inline custom
 * property because they set the property rather than the variable.
 */

.goxom-ft {
	/* Brand */
	--ft-primary: var(--color-primary, #1273C4);
	--ft-primary-dark: var(--color-primary-dark, #0B5596);

	/* Palette — dark scheme */
	--ft-bg: #071320;
	--ft-title: #ffffff;
	--ft-body: rgba(255, 255, 255, .68);
	--ft-line: rgba(255, 255, 255, .13);
	--ft-surface: rgba(255, 255, 255, .05);
	--ft-wordmark: rgba(255, 255, 255, .17);

	/* The glass panels — a translucent fill and the hairline that rides on it. */
	--ft-glass: rgba(255, 255, 255, .05);
	--ft-glass-line: rgba(255, 255, 255, .16);

	/* Type */
	--ft-font-title: var(--font-title, inherit);
	--ft-font-body: var(--font-body, inherit);

	--ft-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	/* Never `hidden`: the CTA band can be pulled up over the section above, and
	   clipping here would cut it off. The wordmark does its own clipping. */
	overflow: visible;
	padding: 96px 20px 0;
	background-color: var(--ft-bg);
	color: var(--ft-body);
	font-family: var(--ft-font-body);
}

/* A lit ridge along the join, brightest where the brand colour sits. It is the
   difference between a footer that starts and one that the page simply stops
   into. */
.goxom-ft::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		var(--ft-line) 18%,
		color-mix(in srgb, var(--ft-primary) 85%, transparent) 50%,
		var(--ft-line) 82%,
		transparent 100%
	);
}

.goxom-ft--light {
	--ft-bg: #F2F6FB;
	--ft-glass: rgba(12, 35, 56, .035);
	--ft-glass-line: rgba(12, 35, 56, .12);
	--ft-title: var(--color-black, #0C2338);
	--ft-body: var(--color-body, #5A7387);
	--ft-line: rgba(12, 35, 56, .14);
	--ft-surface: rgba(12, 35, 56, .04);
	--ft-wordmark: rgba(12, 35, 56, .14);
}

.goxom-ft__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin-inline: auto;
}

/* Shipped rather than leaning on the theme's `.screen-reader-text`, which is
   not guaranteed to be on the page. Labels the newsletter field and names each
   social link for anyone who cannot see the icon. */
.goxom-ft__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Three slow blooms behind everything, so a flat dark panel gets some depth
   without a second background colour. Ellipses rather than circles: a footer is
   a wide, shallow box, and a circular glow in one reads as a spotlight. */
.goxom-ft__aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background-image:
		radial-gradient(960px 380px at 50% -6%, color-mix(in srgb, var(--ft-primary) 20%, transparent), transparent 68%),
		radial-gradient(640px 320px at 6% 34%, color-mix(in srgb, var(--ft-primary-dark) 16%, transparent), transparent 70%),
		radial-gradient(760px 340px at 96% 82%, color-mix(in srgb, var(--ft-primary) 13%, transparent), transparent 72%);
}

/* ================================================================== CTA band */

.goxom-ft__cta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin-bottom: 64px;
	padding: 44px 52px;
	border-radius: 30px;
	border: 1px solid var(--ft-line);
	/* Clips the orb below; `isolate` keeps it behind the text without the
	   negative z-index escaping to the footer's own background. */
	overflow: hidden;
	isolation: isolate;
}

/* A single soft orb behind the button end, which is what stops a wide band from
   reading as an empty slab with a word at each end. */
.goxom-ft__cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -60px;
	top: -130px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	pointer-events: none;
	background-image: radial-gradient(
		circle,
		color-mix(in srgb, var(--ft-primary) 34%, transparent) 0%,
		transparent 64%
	);
}

/* ------------------------------------------------------------ glass variant */

.goxom-ft__cta--glass {
	border-color: var(--ft-glass-line);
	background-color: var(--ft-glass);
	background-image: linear-gradient(
		142deg,
		rgba(255, 255, 255, .10) 0%,
		rgba(255, 255, 255, .02) 44%,
		transparent 72%
	);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:
		0 40px 80px -50px rgba(0, 0, 0, .9),
		inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* A gradient hairline instead of a flat border: brand colour where the light
   would land, fading to nothing around the far corner.

   Behind `@supports` because the ring is a padding box masked out of its own
   fill — without `mask-composite` the gradient would paint over the whole card
   rather than its edge, and the flat border above is the honest fallback. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
	.goxom-ft__cta--glass {
		border-color: transparent;
	}

	.goxom-ft__cta--glass::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		padding: 1px;
		border-radius: inherit;
		pointer-events: none;
		background-image: linear-gradient(
			142deg,
			color-mix(in srgb, var(--ft-primary) 85%, transparent) 0%,
			rgba(255, 255, 255, .22) 34%,
			transparent 68%
		);
		-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		-webkit-mask-clip: content-box, border-box;
		mask-clip: content-box, border-box;
		-webkit-mask-composite: xor;
		mask-composite: exclude;
	}
}

/* ----------------------------------------------------------- accent variant */

.goxom-ft__cta--accent {
	border-color: transparent;
	background-image: linear-gradient(
		125deg,
		color-mix(in srgb, var(--ft-primary) 96%, #fff 4%) 0%,
		var(--ft-primary) 34%,
		var(--ft-primary-dark) 78%,
		color-mix(in srgb, var(--ft-primary-dark) 82%, #000 18%) 100%
	);
	box-shadow:
		0 44px 80px -46px color-mix(in srgb, var(--ft-primary-dark) 95%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, .24);
}

.goxom-ft__cta--accent::after {
	background-image: radial-gradient(circle, rgba(255, 255, 255, .2) 0%, transparent 62%);
}

/* Allowed to shrink and to wrap onto its own row before the button does: the
   button is a fixed object, the sentence is not. */
.goxom-ft__cta-text {
	flex: 1 1 300px;
	min-width: 0;
}

/* A lit dot before the eyebrow, so the line starts at something rather than
   floating in from the left margin. */
.goxom-ft__cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	font-family: var(--ft-font-title);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.goxom-ft__cta-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}

.goxom-ft__cta--glass .goxom-ft__cta-eyebrow {
	color: var(--ft-primary);
}

.goxom-ft__cta-title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--ft-font-title);
	font-size: clamp(25px, 2.9vw, 38px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: #fff;
}

/* ------------------------------------------------------------- CTA button */

/* Sized by its own height with the label never wrapping: the previous pill was
   padding around text, so a two-word label broke it in half. */
.goxom-ft__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	height: 62px;
	padding: 0 9px 0 30px;
	border-radius: 999px;
	background-color: #fff;
	color: var(--ft-primary-dark);
	font-family: var(--ft-font-title);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .35s var(--ft-ease), box-shadow .35s var(--ft-ease),
		background-color .35s var(--ft-ease), color .35s var(--ft-ease);
}

.goxom-ft__cta--glass .goxom-ft__cta-btn {
	background-image: linear-gradient(120deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--ft-primary-dark) 95%, transparent);
}

.goxom-ft__cta-btn:hover,
.goxom-ft__cta-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .6);
}

/* The arrow rides in its own disc, which is what gives the button a second
   shape to animate — the whole pill lifting is not much of a response. */
.goxom-ft__cta-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-image: linear-gradient(120deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%);
	color: #fff;
	transition: transform .45s var(--ft-ease);
}

.goxom-ft__cta--glass .goxom-ft__cta-ico {
	background-image: none;
	background-color: #fff;
	color: var(--ft-primary-dark);
}

/* Up and to the right — the direction the link is actually going. */
.goxom-ft__cta-btn:hover .goxom-ft__cta-ico,
.goxom-ft__cta-btn:focus-visible .goxom-ft__cta-ico {
	transform: rotate(-45deg);
}

.goxom-ft__cta-ico svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* ==================================================================== main */

.goxom-ft__main {
	display: grid;
	grid-template-columns: var(--ft-cols, repeat(4, minmax(0, 1fr)));
	gap: 48px 40px;
	padding-bottom: 56px;
}

/* A short accent rule under each column title. It costs one pseudo-element and
   it is what turns four stacked lists into four labelled columns. */
.goxom-ft__col-title {
	position: relative;
	margin: 0 0 26px;
	padding-bottom: 15px;
	font-family: var(--ft-font-title);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ft-title);
}

.goxom-ft__col-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background-image: linear-gradient(90deg, var(--ft-primary), transparent);
}

/* ------------------------------------------------------------------ brand */

.goxom-ft__logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: 22px;
	text-decoration: none;
}

.goxom-ft__logo .goxom-ft__logo-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

.goxom-ft__logo-text {
	font-family: var(--ft-font-title);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--ft-title);
}

.goxom-ft__about {
	margin: 0 0 26px;
	max-width: 42ch;
	font-size: 15.5px;
	line-height: 1.8;
}

.goxom-ft__contacts {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goxom-ft__contact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

.goxom-ft__contact-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	border: 1px solid var(--ft-line);
	background-color: var(--ft-surface);
	color: var(--ft-primary);
	font-size: 17px;
	line-height: 1;
	transition: background-color .35s var(--ft-ease), color .35s var(--ft-ease);
}

/* `:not([fill="none"])` keeps the shipped line icons line icons: they carry
   `fill="none"` and draw with a stroke, and a blanket `fill: currentColor` here
   would override the attribute and fill them in solid. Elementor's own uploaded
   SVGs, which do want the colour, are untouched. */
.goxom-ft__contact-ico svg {
	display: block;
	width: 18px;
	height: 18px;
}

.goxom-ft__contact-ico svg:not([fill="none"]) {
	fill: currentColor;
}

.goxom-ft__contact:hover .goxom-ft__contact-ico {
	background-color: var(--ft-primary);
	color: #fff;
}

/* A row whose icon was left empty still has to sit in the second track without
   pushing a long address out of the column. */
.goxom-ft__contact-body {
	min-width: 0;
	grid-column: -2;
}

.goxom-ft__contact-label {
	display: block;
	margin-bottom: 2px;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
}

.goxom-ft__contact-value {
	display: block;
	font-family: var(--ft-font-title);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ft-title);
	text-decoration: none;
	transition: color .3s var(--ft-ease);
}

a.goxom-ft__contact-value:hover {
	color: var(--ft-primary);
}

/* ------------------------------------------------------------------ links */

.goxom-ft__links,
.goxom-ft__links ul {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `wp_nav_menu` output is styled through the same block: the widget cannot
   control what a WordPress menu emits, so the rules reach `li > a` generally
   rather than a class the menu will never carry. */
.goxom-ft__links li {
	margin: 0;
	list-style: none;
}

.goxom-ft__links a {
	position: relative;
	display: inline-block;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ft-body);
	text-decoration: none;
	transition: color .3s var(--ft-ease), transform .3s var(--ft-ease);
}

/* A rule that wipes in from the left rather than an underline that blinks on:
   the direction is what makes the hover feel like a response. */
.goxom-ft__links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--ft-ease);
}

.goxom-ft__links a:hover,
.goxom-ft__links a:focus-visible {
	color: var(--ft-primary);
	transform: translateX(3px);
}

.goxom-ft__links a:hover::after,
.goxom-ft__links a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* A menu deep enough to have children keeps them, indented rather than
   dropped — a footer column is a sitemap, not a dropdown. */
.goxom-ft__links .sub-menu {
	margin-top: 13px;
	padding-left: 14px;
	border-left: 1px solid var(--ft-line);
}

/* -------------------------------------------------------------- newsletter */

.goxom-ft__news-text {
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.75;
}

.goxom-ft__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 20px;
	border-radius: 999px;
	border: 1px solid var(--ft-glass-line);
	background-color: var(--ft-glass);
	transition: border-color .35s var(--ft-ease), box-shadow .35s var(--ft-ease),
		background-color .35s var(--ft-ease);
}

.goxom-ft__form:hover {
	background-color: color-mix(in srgb, var(--ft-glass) 60%, rgba(255, 255, 255, .06));
}

.goxom-ft__form:focus-within {
	border-color: var(--ft-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ft-primary) 18%, transparent);
}

/* The input is reset hard: a theme's form styling is the one thing guaranteed
   to be on the page and the one thing this pill cannot survive. */
.goxom-ft__form .goxom-ft__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ft-title);
}

.goxom-ft__form .goxom-ft__input:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

.goxom-ft__form .goxom-ft__input::placeholder {
	color: var(--ft-body);
	opacity: .8;
}

.goxom-ft__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 46px;
	min-height: 46px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient(120deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%);
	color: #fff;
	font-family: var(--ft-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .3s var(--ft-ease), transform .3s var(--ft-ease);
}

/* The fill is a gradient, so the hover brightens it rather than swapping a
   colour underneath it that nothing would ever see. */
.goxom-ft__submit:hover {
	filter: brightness(1.12);
	transform: translateX(2px);
}

.goxom-ft__submit svg {
	display: block;
	width: 17px;
	height: 17px;
}

/* Whatever the shortcode emits is somebody else's markup; all this does is
   keep it in the column's rhythm. */
.goxom-ft__news-shortcode {
	margin-top: 4px;
}

.goxom-ft__news-shortcode p:last-child {
	margin-bottom: 0;
}

.goxom-ft__consent {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	opacity: .75;
}

.goxom-ft__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.goxom-ft__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ft-line);
	background-color: var(--ft-surface);
	color: var(--ft-title);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .35s var(--ft-ease), color .35s var(--ft-ease),
		border-color .35s var(--ft-ease), transform .35s var(--ft-ease);
}

/* Same `fill="none"` guard as the contact icons: a stroked SVG dropped in here
   would otherwise be filled in solid and come out as a blob. */
.goxom-ft__social svg {
	display: block;
	width: 16px;
	height: 16px;
}

.goxom-ft__social svg:not([fill="none"]) {
	fill: currentColor;
}

.goxom-ft__social:hover,
.goxom-ft__social:focus-visible {
	background-color: var(--ft-primary);
	border-color: var(--ft-primary);
	color: #fff;
	transform: translateY(-3px);
}

/* ================================================================ wordmark */

/* The name at the size it deserves once, on the way out. Decoration only, so
   it is `aria-hidden` in the markup and unselectable here. */
/* `overflow: hidden` is for the horizontal axis only — at 15vw the word is
   wider than a phone, and letting it out would put a scrollbar on the page. The
   vertical fade is a mask, so nothing is ever cut off mid-letter the way a
   clipped line box cuts it. */
.goxom-ft__wordmark {
	overflow: hidden;
	/* Negative, because the mask has already eaten the top third of the line
	   box: the measured gap above the letters is bigger than it looks. */
	margin: -14px 0 0;
	padding: 0;
	font-family: var(--ft-font-title);
	font-size: clamp(52px, 15vw, 232px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.04em;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	color: transparent;
	/* A hairline at 230px reads as a smudge; 1.5px is the weight at which the
	   outline is actually a letter. */
	-webkit-text-stroke: 1.5px var(--ft-wordmark);
	-webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 34%, transparent 96%);
}

/* Filled instead of outlined — the same mark, a heavier exit. Both variants
   share the mask above, so both dissolve into the floor. */
.goxom-ft__wordmark--fade {
	-webkit-text-stroke: 0;
	color: var(--ft-wordmark);
}

/* ================================================================== bottom */

.goxom-ft__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 30px;
	padding: 26px 0 30px;
	border-top: 1px solid var(--ft-line);
}

.goxom-ft__copy {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.goxom-ft__copy a {
	color: var(--ft-title);
	text-decoration: none;
}

.goxom-ft__copy a:hover {
	color: var(--ft-primary);
}

.goxom-ft__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goxom-ft__legal a {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ft-body);
	text-decoration: none;
	transition: color .3s var(--ft-ease);
}

.goxom-ft__legal a:hover,
.goxom-ft__legal a:focus-visible {
	color: var(--ft-primary);
}

.goxom-ft__pays {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goxom-ft__pays .goxom-ft__pay-img {
	display: block;
	width: auto;
	height: 26px;
	border-radius: 5px;
	opacity: .82;
	transition: opacity .3s var(--ft-ease), transform .3s var(--ft-ease);
}

.goxom-ft__pays .goxom-ft__pay-img:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* =========================================================== back to top */

.goxom-ft__top {
	position: fixed;
	z-index: 60;
	right: 26px;
	bottom: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--ft-primary);
	color: #fff;
	cursor: pointer;
	/* Parked out of reach until the JS says otherwise, so it cannot sit over
	   the page for anyone scrolled to the top. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px);
	transition: opacity .4s var(--ft-ease), transform .4s var(--ft-ease), visibility .4s var(--ft-ease),
		background-color .3s var(--ft-ease);
	box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ft-primary-dark) 92%, transparent);
}

.goxom-ft__top--on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.goxom-ft__top:hover {
	background-color: var(--ft-primary-dark);
}

.goxom-ft__top svg.goxom-ft__arrow {
	position: relative;
	z-index: 1;
	display: block;
	width: 17px;
	height: 17px;
}

/* The ring is the scroll position, not a decoration: `--ft-progress` is the
   dash offset the JS writes on every frame it is given. */
.goxom-ft__ring {
	position: absolute;
	/* Four offsets, no width or height: the button is the containing block, so
	   the ring sits 5px outside it on every side whatever size the button is. */
	inset: -5px;
	/* Dash offsets start at three o'clock; the quarter turn puts zero at the
	   top, where a progress ring is read from. */
	transform: rotate(-90deg);
	pointer-events: none;
}

/* The geometry stays in the markup — `cx`/`cy`/`r` as CSS properties are a
   later addition than the rest of this file assumes. */
.goxom-ft__ring circle {
	fill: none;
	stroke-width: 2;
}

.goxom-ft__ring-track {
	stroke: color-mix(in srgb, var(--ft-primary) 30%, transparent);
}

.goxom-ft__ring-bar {
	stroke: var(--ft-primary);
	stroke-linecap: round;
	/* 2Ï€r for the r=18 circle in the markup's 40-unit box. */
	stroke-dasharray: 113.1;
	stroke-dashoffset: var(--ft-progress, 113.1);
}

/* ================================================================== reveals */

/* Only hide things once JS has confirmed it will animate them. */
.goxom-ft--js .goxom-ft__cta,
.goxom-ft--js .goxom-ft__col,
.goxom-ft--js .goxom-ft__bottom {
	opacity: 0;
}

/* =============================================================== breakpoints */

@media (max-width: 1200px) {
	/* The PHP track list is written as a custom property, so overriding the
	   property itself here wins without an `!important`. */
	.goxom-ft__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.goxom-ft__col--brand,
	.goxom-ft__col--news {
		grid-column: span 3;
	}
}

@media (max-width: 991px) {
	.goxom-ft {
		padding-top: 72px;
	}

	.goxom-ft__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 30px;
	}

	.goxom-ft__col--brand,
	.goxom-ft__col--news {
		grid-column: span 2;
	}

	.goxom-ft__cta {
		padding: 34px 32px;
	}
}

@media (max-width: 767px) {
	.goxom-ft {
		padding: 60px 16px 0;
	}

	.goxom-ft__main {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 44px;
	}

	.goxom-ft__col--brand,
	.goxom-ft__col--news {
		grid-column: span 1;
	}

	.goxom-ft__cta {
		margin-bottom: 52px;
		padding: 28px 24px;
	}

	.goxom-ft__cta-btn {
		width: 100%;
		justify-content: center;
	}

	.goxom-ft__bottom {
		justify-content: flex-start;
	}

	.goxom-ft__top {
		right: 16px;
		bottom: 16px;
	}
}

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   without these the aurora, the focus ring and the shadows render transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.goxom-ft__aurora {
		background-image: none;
	}

	.goxom-ft__cta {
		background-image: linear-gradient(112deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%);
		box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .7);
	}

	.goxom-ft__form:focus-within {
		box-shadow: 0 0 0 4px rgba(18, 115, 196, .22);
	}

	.goxom-ft__ring-track {
		stroke: rgba(255, 255, 255, .3);
	}

	.goxom-ft__top {
		box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxom-ft__cta-btn,
	.goxom-ft__cta-btn svg,
	.goxom-ft__links a,
	.goxom-ft__links a::after,
	.goxom-ft__contact-ico,
	.goxom-ft__social,
	.goxom-ft__submit,
	.goxom-ft__pays .goxom-ft__pay-img,
	.goxom-ft__top {
		transition: none !important;
	}

	.goxom-ft--js .goxom-ft__cta,
	.goxom-ft--js .goxom-ft__col,
	.goxom-ft--js .goxom-ft__bottom {
		opacity: 1 !important;
		transform: none !important;
	}
}