/**
 * Site Footer widget and the mobile call bar.
 */

.msd-ftr {
	--msd-ftr-accent: var(--msd-pink, #ff9b9b);

	padding: clamp(56px, 8vw, 88px) 0 40px;
	background-color: var(--msd-ink, #1e2a30);
	color: var(--msd-footer-text, #dfe5e8);
}

/* Top row: logo + text, contact */

.msd-ftr__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: clamp(40px, 5vw, 56px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.msd-ftr__brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 380px;
}

.msd-ftr__home {
	display: flex;
	align-self: flex-start;
	color: var(--msd-white, #fff);
	font-family: var(--msd-font-heading, "Bricolage Grotesque", system-ui, sans-serif);
	font-weight: 800;
	text-decoration: none;
}

.msd-ftr .msd-ftr__logo {
	display: block;
	width: auto;
	max-width: none;
	height: 56px;
}

.msd-ftr .msd-ftr__logo--white {
	filter: brightness(0) invert(1);
}

.msd-ftr .msd-ftr__tagline {
	margin: 0;
	color: var(--msd-footer-muted, #aab5bb);
	font-size: 15px;
	line-height: 1.6;
}

.msd-ftr__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.msd-ftr__status {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--msd-footer-muted, #aab5bb);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.msd-ftr__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--msd-green-bright, #22c55e);
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.msd-ftr .msd-ftr__phone {
	color: var(--msd-white, #fff);
	font-family: var(--msd-font-heading, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color 0.15s;
}

.msd-ftr .msd-ftr__phone:hover {
	color: var(--msd-ftr-accent);
}

.msd-ftr__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.msd-ftr .msd-ftr__chip {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: var(--msd-white, #fff);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
	overflow-wrap: anywhere;
}

.msd-ftr .msd-ftr__chip--wa:hover {
	border-color: var(--msd-green-bright, #22c55e);
	background-color: rgba(34, 197, 94, 0.1);
	color: var(--msd-white, #fff);
}

.msd-ftr .msd-ftr__chip--mail:hover {
	border-color: var(--msd-ftr-accent);
	background-color: rgba(255, 155, 155, 0.08);
	color: var(--msd-white, #fff);
}

.msd-ftr__chip--wa .msd-icon {
	color: var(--msd-green-bright, #22c55e);
	font-size: 15px;
}

.msd-ftr__chip--mail .msd-icon {
	color: var(--msd-ftr-accent);
	font-size: 18px;
}

/* Link columns */

.msd-ftr__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px clamp(24px, 4vw, 64px);
	padding: clamp(40px, 5vw, 56px) 0;
}

.msd-ftr__col {
	display: flex;
	flex: 1 1 180px;
	flex-direction: column;
	min-width: 0;
}

.msd-ftr__col--col2 {
	flex-basis: 200px;
}

.msd-ftr__col--col3 {
	flex: 2 1 320px;
}

.msd-ftr .msd-ftr__heading {
	margin: 0 0 30px;
	color: var(--msd-footer-faint, #8d9aa1);
	font-family: var(--msd-font-body, "Instrument Sans", system-ui, sans-serif);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.msd-ftr__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msd-ftr__col--col3 .msd-ftr__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px 24px;
}

.msd-ftr .msd-ftr__links a {
	color: var(--msd-footer-text, #dfe5e8);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s;
}

.msd-ftr .msd-ftr__links a:hover {
	color: var(--msd-ftr-accent);
}

.msd-ftr .msd-ftr__more {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: 18px;
	color: var(--msd-ftr-accent);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.msd-ftr .msd-ftr__more:hover {
	color: var(--msd-white, #fff);
}

.msd-ftr__more .msd-icon {
	font-size: 18px;
}

/* Bottom line */

.msd-ftr__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--msd-footer-faint, #8d9aa1);
	font-size: 14px;
	line-height: 1.5;
}

.msd-ftr .msd-ftr__credit {
	color: var(--msd-footer-text, #dfe5e8);
	font-weight: 600;
	text-decoration: none;
}

.msd-ftr .msd-ftr__credit:hover {
	color: var(--msd-ftr-accent);
}

.msd-ftr__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.msd-ftr .msd-ftr__legal a {
	color: var(--msd-footer-faint, #8d9aa1);
	text-decoration: none;
}

.msd-ftr .msd-ftr__legal a:hover {
	color: var(--msd-white, #fff);
}

/* Call bar: fixed to the bottom of the screen below 980px */

.msd-callbar {
	display: grid;
	position: fixed;
	z-index: 60;
	right: 12px;
	bottom: 12px;
	left: 12px;
	grid-template-columns: 1.4fr 1fr;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--msd-line, #e6e0d5);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 16px 40px -12px rgba(30, 42, 48, 0.35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.msd-callbar .msd-callbar__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	border-radius: 999px;
	color: var(--msd-white, #fff);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.msd-callbar .msd-callbar__button--call {
	background-color: var(--msd-espresso, #281616);
}

.msd-callbar .msd-callbar__button--wa {
	background-color: var(--msd-green, #15803d);
}

.msd-callbar__button .msd-icon {
	font-size: 22px;
}

.msd-callbar__button--wa .msd-icon {
	font-size: 19px;
}

/* Keep the last footer line clear of the bar. */
.msd-ftr--has-bar {
	padding-bottom: 112px;
}

/* The open mobile menu has its own call buttons. */
.msd-menu-open .msd-callbar {
	display: none;
}

/* Floating contact buttons: bottom right, from 980px only */

.msd-fab {
	display: none;
	position: fixed;
	z-index: 70;
	right: 24px;
	bottom: 24px;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.msd-fab .msd-fab__button {
	display: grid;
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 10px 26px -10px rgba(30, 42, 48, 0.45);
	color: var(--msd-white, #fff);
	font-size: 24px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	place-items: center;
}

.msd-fab .msd-fab__button:hover {
	transform: translateY(-2px);
}

.msd-fab .msd-fab__button--mail {
	border: 1px solid var(--msd-line, #e6e0d5);
	background-color: var(--msd-white, #fff);
	color: var(--msd-red, #9d2020);
	font-size: 22px;
}

.msd-fab .msd-fab__button--wa {
	background-color: var(--msd-green, #15803d);
}

.msd-fab .msd-fab__button--call {
	width: 64px;
	height: 64px;
	background-color: var(--msd-red, #9d2020);
	box-shadow: 0 14px 32px -10px rgba(157, 32, 32, 0.6);
	font-size: 28px;
}

/* Soft ring pulsing out from the phone button. */
.msd-fab__button--call::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: 50%;
	background-color: var(--msd-red, #9d2020);
	content: "";
	animation: msd-fab-pulse 2.4s ease-out infinite;
}

/* The receiver shakes briefly every few seconds. */
.msd-fab__button--call .msd-icon {
	transform-origin: 50% 50%;
	animation: msd-fab-ring 3s ease-in-out infinite;
}

/* Text that slides out to the left on hover or keyboard focus. */
.msd-fab__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	padding: 8px 14px;
	transform: translate(8px, -50%);
	border-radius: 999px;
	background-color: var(--msd-ink, #1e2a30);
	color: var(--msd-white, #fff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.msd-fab__button:hover .msd-fab__label,
.msd-fab__button:focus-visible .msd-fab__label {
	transform: translate(0, -50%);
	opacity: 1;
}

@keyframes msd-fab-ring {

	0%,
	62%,
	100% {
		transform: scale(1) rotate(0);
	}

	66% {
		transform: scale(1.18) rotate(-14deg);
	}

	70% {
		transform: scale(1.18) rotate(14deg);
	}

	74% {
		transform: scale(1.18) rotate(-12deg);
	}

	78% {
		transform: scale(1.18) rotate(10deg);
	}

	82% {
		transform: scale(1.12) rotate(-6deg);
	}

	86% {
		transform: scale(1) rotate(0);
	}
}

@keyframes msd-fab-pulse {

	0% {
		transform: scale(1);
		opacity: 0.55;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.msd-fab__button--call::before,
	.msd-fab__button--call .msd-icon {
		animation: none;
	}

	.msd-fab .msd-fab__button,
	.msd-fab__label {
		transition: none;
	}
}

@media (min-width: 980px) {

	.msd-fab {
		display: flex;
	}

	.msd-callbar {
		display: none;
	}

	.msd-ftr--has-bar {
		padding-bottom: 40px;
	}
}