/* ==========================================================================
   Site footer
   ==========================================================================
   The one footer every page ends on: a conversation card at the top, the
   brand column beside three link columns, and a proof row at the bottom with
   the badges, the Clutch rating, the legal links and the social profiles.

   Plain CSS, loaded globally from includes/scripts-and-styles.php after the
   shell sheet, so it lays out against the same 1280px measure as the rest of
   the site (see site-shell.css) and never needs a build.

   The ground stays the zinc the footer has always had. Everything else takes
   its colour from the header's tokens, so the two ends of the page agree.
   ========================================================================== */

.tcw-footer {
	--ft-ground: #18181b;
	--ft-card: #1f2027;
	--ft-line: rgba(255, 255, 255, 0.08);
	--ft-line-strong: rgba(255, 255, 255, 0.14);
	--ft-ink: #f4f4f5;
	--ft-ink-soft: #a1a1aa;
	--ft-ink-mute: #71717a;
	--ft-blue: #46659b;
	--ft-blue-hover: #38517d;
	--ft-blue-soft: #9db2d8;
	--ft-star: #ef4444;
	--ft-t: 220ms;
	--ft-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* How far the conversation card stands above the dark ground. The footer's top strip is
	   transparent for that height, so the page's own ground shows behind the card's upper part and
	   the card reads as sitting across the edge. Done with a gradient rather than a negative margin
	   so the footer stays in flow and never covers the section above it. */
	--ft-overlap: 44px;

	position: relative;
	background: linear-gradient(to bottom, transparent var(--ft-overlap), var(--ft-ground) var(--ft-overlap));
	color: var(--ft-ink-soft);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* Zero specificity on purpose: any class below, the button included, must win over this. */
.tcw-footer :where(a) {
	color: inherit;
	text-decoration: none;
	transition: color var(--ft-t) var(--ft-ease);
}

.tcw-footer :where(a:hover) {
	color: #fff;
}

.tcw-footer__shell {
	width: 100%;
	max-width: var(--tcw-shell, 1328px);
	margin-inline: auto;
	padding-inline: var(--tcw-gutter, 24px);
}

/* Eyebrows: the small tracked labels above the heading and each column. */
.tcw-footer__eyebrow {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ft-blue-soft);
}

/* The conversation card --------------------------------------------------- */

.tcw-footer__cta {
	padding-top: 0;
}

@media (min-width: 1024px) {
	.tcw-footer {
		--ft-overlap: 60px;
	}
}

.tcw-footer__card {
	position: relative;
	display: grid;
	gap: 28px;
	padding: 36px 32px;
	border: 1px solid var(--ft-line-strong);
	border-radius: 12px;
	box-shadow: 0 24px 48px -24px rgba(7, 27, 56, 0.55);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
		var(--ft-card);
	overflow: hidden;
}

.tcw-footer__card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 120% at 100% 0%, rgba(70, 101, 155, 0.22), transparent 70%);
}

.tcw-footer__card > * {
	position: relative;
	z-index: 1;
}

.tcw-footer__title {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: #fff;
}

.tcw-footer__lede {
	margin: 10px 0 0;
	font-size: 15.5px;
	color: var(--ft-blue-soft);
}

.tcw-footer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.tcw-footer__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--ft-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--ft-t) var(--ft-ease), transform var(--ft-t) var(--ft-ease), box-shadow var(--ft-t) var(--ft-ease);
}

.tcw-footer__button:hover {
	background: var(--ft-blue-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -12px rgba(70, 101, 155, 0.9);
}

.tcw-footer__button svg,
.tcw-footer__textlink svg {
	flex: none;
	transition: transform var(--ft-t) var(--ft-ease);
}

.tcw-footer__button:hover svg,
.tcw-footer__textlink:hover svg {
	transform: translateX(3px);
}

.tcw-footer__textlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ft-blue-soft);
	white-space: nowrap;
}

.tcw-footer__actions-rule {
	display: none;
	width: 1px;
	height: 40px;
	background: var(--ft-line-strong);
}

@media (min-width: 1024px) {
	.tcw-footer__card {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 40px;
		padding: 40px 44px;
	}

	.tcw-footer__title {
		font-size: 30px;
	}

	.tcw-footer__lede {
		font-size: 17px;
	}

	.tcw-footer__actions {
		flex-wrap: nowrap;
		gap: 22px;
		padding-left: 96px;
	}

	/* The line that runs from the question to the answer, ending in a dot at the button. */
	.tcw-footer__actions::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 72px;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--ft-blue-soft));
	}

	.tcw-footer__actions::after {
		content: "";
		position: absolute;
		left: 68px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border-radius: 50%;
		background: var(--ft-blue-soft);
		box-shadow: 0 0 0 4px rgba(157, 178, 216, 0.18);
	}

	.tcw-footer__actions {
		position: relative;
	}

	.tcw-footer__actions-rule {
		display: block;
	}
}

/* Brand and link columns -------------------------------------------------- */

.tcw-footer__columns {
	display: grid;
	gap: 36px 32px;
	padding: 56px 0 48px;
}

.tcw-footer__brand-logo {
	display: block;
	width: 148px;
	height: auto;
}

.tcw-footer__brand .tcw-footer__eyebrow {
	margin-top: 26px;
}

.tcw-footer__tagline {
	margin: 0;
	max-width: 30ch;
	font-size: 17px;
	line-height: 1.4;
	color: var(--ft-ink);
}

.tcw-footer__facts {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.tcw-footer__fact {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--ft-ink);
}

.tcw-footer__fact svg {
	flex: none;
	color: var(--ft-blue-soft);
}

.tcw-footer__fact-sep {
	color: var(--ft-ink-mute);
}

.tcw-footer__rule {
	display: none;
	width: 1px;
	background: var(--ft-line);
}

.tcw-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.tcw-footer__list a {
	font-size: 15px;
	color: var(--ft-ink);
}

.tcw-footer__list a:hover {
	color: var(--ft-blue-soft);
}

@media (min-width: 640px) {
	.tcw-footer__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tcw-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.tcw-footer__columns {
		grid-template-columns: minmax(0, 1.35fr) 1px repeat(3, minmax(0, 1fr));
		gap: 48px;
		padding: 64px 0 56px;
	}

	.tcw-footer__brand {
		grid-column: auto;
		padding-right: 24px;
	}

	.tcw-footer__rule {
		display: block;
	}
}

/* Proof row ---------------------------------------------------------------- */

.tcw-footer__bottom {
	border-top: 1px solid var(--ft-line);
	padding: 24px 0 28px;
}

.tcw-footer__bottom-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
}

.tcw-footer__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.tcw-footer__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--ft-ink-soft);
	font-size: 10px;
	line-height: 1;
}

.tcw-footer__badge img {
	display: block;
	height: 56px;
	width: auto;
}

.tcw-footer__badge--iso img {
	height: 44px;
}

.tcw-footer__proof-rule {
	width: 1px;
	height: 44px;
	background: var(--ft-line-strong);
}

.tcw-footer__clutch {
	height: 50px;
	margin: 0;
}

.tcw-footer__copy {
	font-size: 13px;
	color: var(--ft-ink-soft);
	text-align: center;
}

.tcw-footer__copy p {
	margin: 0;
}

.tcw-footer__address {
	margin-top: 4px !important;
	font-size: 12px;
	color: var(--ft-ink-mute);
	text-wrap: balance;
}

/* Three fixed lanes on desktop: the badges, the copyright and address, the legal links. The middle
   lane may run to two lines without pushing the other two around. */
@media (min-width: 1024px) {
	.tcw-footer__bottom-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 32px;
	}
}

.tcw-footer__legal {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
}

.tcw-footer__legal-rule {
	width: 1px;
	height: 18px;
	background: var(--ft-line-strong);
}

.tcw-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--ft-ink);
}

.tcw-footer__social:hover {
	color: var(--ft-blue-soft);
}

.tcw-footer__mark {
	display: block;
	height: 30px;
	width: auto;
	opacity: 0.9;
}

@media (max-width: 1023px) {
	/* The chat bubble sits fixed at the bottom right; leave it room below the last row. */
	.tcw-footer__bottom {
		padding-bottom: 96px;
	}

	.tcw-footer__bottom-row {
		justify-content: center;
		text-align: center;
	}

	.tcw-footer__proof {
		justify-content: center;
		width: 100%;
	}
}

/* Reduced motion: the hover lifts and the arrow nudge go still. */
@media (prefers-reduced-motion: reduce) {
	.tcw-footer *,
	.tcw-footer *::before,
	.tcw-footer *::after {
		transition: none !important;
		transform: none !important;
	}
}