/* Sketch Global Footer — light editorial footer: brand, a headline/contact
   lead column beside six link groups, addresses, a reviews bar, and a thin
   legal strip. Every rule is prefixed with the block class
   because BeTheme's be.css loads after this file. */

:root {
	--skgf-bg: #ffffff;
	--skgf-ink: #1a1636;
	--skgf-accent: #6552ff;
	--skgf-muted: #6f6b85;
	--skgf-label: #9b98ac;
	--skgf-line: #e7e6ee;
	--skgf-font: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--skgf-pad-x: clamp(24px, 5vw, 88px);
	/* Overwritten inline with the Bottom Fade module's real height (0px when
	   that module is off) — see Plugin::enqueue(). */
	--skgf-fade: 0px;
}

/* Hide the BeTheme footer this one replaces */
body.skgf-hide-theme-footer #Footer,
body.skgf-hide-theme-footer #Subfooter,
body.skgf-hide-theme-footer .mfn-footer {
	display: none !important;
}

.skgf {
	font-family: var(--skgf-font);
	background: var(--skgf-bg);
	color: var(--skgf-ink);
	padding: 0;
	box-sizing: border-box;
}
.skgf *,
.skgf *::before,
.skgf *::after {
	box-sizing: border-box;
}

.skgf .skgf__inner {
	max-width: 1600px;
	margin: 0 auto;
	/* The frosted band at the foot of the viewport is fixed and blurs whatever
	   is beneath it, so the legal strip has to clear its full height plus a
	   little air — otherwise the copyright reads through a smear. */
	padding:
		clamp(40px, 5vw, 72px)
		var(--skgf-pad-x)
		calc(var(--skgf-fade) + clamp(24px, 3vw, 40px));
}

/* The one shared eyebrow: column headings, ADDRESS, and the contact kickers. */
.skgf .skgf__label {
	display: block;
	margin: 0 0 clamp(18px, 2vw, 26px);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--skgf-label);
}

/* ---------------------------------------------------------------------------
   Brand row — logo and tagline
--------------------------------------------------------------------------- */
.skgf .skgf__brand-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	flex-wrap: wrap;
	padding-bottom: clamp(28px, 3.5vw, 48px);
	border-bottom: 1px solid var(--skgf-line);
}
.skgf .skgf__brand-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
.skgf .skgf__brand-logo {
	display: block;
	width: auto;
	height: clamp(30px, 3vw, 40px);
}
.skgf .skgf__brand-text {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--skgf-ink);
}
.skgf .skgf__tagline {
	margin: 14px 0 0;
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--skgf-ink);
}
/* ---------------------------------------------------------------------------
   Main — lead column beside the directory
--------------------------------------------------------------------------- */
.skgf .skgf__main {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
	gap: clamp(32px, 5vw, 88px);
	padding: clamp(36px, 4.5vw, 64px) 0 clamp(28px, 3vw, 44px);
}

/* Lead column: headline at the top, Ask-AI pushed to the floor so it lines up
   with the reviews bar opposite. */
.skgf .skgf__lead {
	display: flex;
	flex-direction: column;
}
.skgf .skgf__headline {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--skgf-ink);
	max-width: 15ch;
}
.skgf .skgf__contact {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 64px);
	margin-top: clamp(30px, 3.5vw, 52px);
	padding-bottom: clamp(28px, 3.5vw, 44px);
	border-bottom: 1px solid var(--skgf-line);
}
.skgf .skgf__contact-item .skgf__label {
	margin-bottom: 12px;
}
.skgf .skgf__contact-link {
	font-size: clamp(16px, 1.25vw, 20px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--skgf-ink);
	text-decoration: none;
	/* Underline drawn as a border so it sits a little below the baseline, as
	   in the reference, and can change colour on hover. */
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: color 0.2s ease;
}
.skgf .skgf__contact-link:hover,
.skgf .skgf__contact-link:focus-visible {
	color: var(--skgf-accent);
}

/* Ask AI */
.skgf .skgf__ask {
	margin-top: auto;
	padding-top: clamp(40px, 5vw, 72px);
}
.skgf .skgf__ask-heading {
	margin: 0 0 clamp(16px, 1.6vw, 22px);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--skgf-ink);
}
.skgf .skgf__ask-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.skgf .skgf__ask-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: #f4f3f8;
	color: var(--skgf-ink);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.skgf .skgf__ask-tile:hover,
.skgf .skgf__ask-tile:focus-visible {
	background: var(--skgf-ink);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Directory — two rows of three link groups, then addresses and reviews
--------------------------------------------------------------------------- */
.skgf .skgf__dir {
	display: flex;
	flex-direction: column;
}
.skgf .skgf__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 56px);
	padding-bottom: clamp(30px, 3.5vw, 48px);
	border-bottom: 1px solid var(--skgf-line);
}
.skgf .skgf__cols + .skgf__cols {
	padding-top: clamp(30px, 3.5vw, 48px);
}
.skgf .skgf__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.skgf .skgf__links li {
	margin: 0 0 16px;
}
.skgf .skgf__links li:last-child {
	margin-bottom: 0;
}
.skgf .skgf__link {
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--skgf-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.skgf .skgf__link:hover,
.skgf .skgf__link:focus-visible {
	color: var(--skgf-accent);
}

/* Addresses */
.skgf .skgf__address {
	padding: clamp(30px, 3.5vw, 48px) 0;
}
.skgf .skgf__address-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 56px);
}
.skgf .skgf__address-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.skgf .skgf__flag-wrap {
	display: block;
	margin-bottom: 12px;
	line-height: 0;
}
.skgf .skgf__flag {
	display: block;
	width: 26px;
	height: auto;
	border-radius: 2px;
}
.skgf .skgf__flag--img {
	width: 26px;
	height: auto;
}
.skgf .skgf__address-name {
	display: block;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--skgf-ink);
}
.skgf .skgf__address-lines {
	display: block;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--skgf-muted);
}

/* Reviews bar */
.skgf .skgf__reviews {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: auto;
	padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 32px);
	border: 1px solid var(--skgf-line);
	border-radius: 16px;
}
/* The badge is a sibling module's component — neutralise the pill chrome it
   carries for dark headers and let it sit flat in this box. */
.skgf .skgf__reviews-badge {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-decoration: none;
}
.skgf .skgf__reviews-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(16px, 1.3vw, 20px);
	font-weight: 500;
	color: var(--skgf-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.skgf .skgf__reviews-link:hover,
.skgf .skgf__reviews-link:focus-visible {
	color: var(--skgf-accent);
}
.skgf .skgf__arrow {
	transition: transform 0.2s ease;
}
.skgf .skgf__reviews-link:hover .skgf__arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   Legal strip
--------------------------------------------------------------------------- */
.skgf .skgf__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px clamp(20px, 3vw, 48px);
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid var(--skgf-line);
}
.skgf .skgf__copyright {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--skgf-label);
}
.skgf .skgf__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 2.4vw, 44px);
}
.skgf .skgf__social {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--skgf-label);
	text-decoration: none;
	transition: color 0.2s ease;
}
.skgf .skgf__social:hover,
.skgf .skgf__social:focus-visible {
	color: var(--skgf-ink);
}

/* Entrance animation is Sketch Reveal (modules/reveal), applied in the
   template via data-sk-reveal — nothing to style here. It handles
   prefers-reduced-motion itself; the hovers below are ours to quieten. */
@media (prefers-reduced-motion: reduce) {
	.skgf .skgf__ask-tile:hover,
	.skgf .skgf__reviews-link:hover .skgf__arrow {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
/* Tablet: the lead column stops competing with six link groups for width. */
@media (max-width: 1080px) {
	.skgf .skgf__main {
		grid-template-columns: 1fr;
		gap: clamp(36px, 5vw, 56px);
	}
	.skgf .skgf__headline {
		max-width: 22ch;
	}
	/* With the columns below it, the Ask row has no floor to sit on. */
	.skgf .skgf__ask {
		margin-top: clamp(32px, 4vw, 48px);
		padding-top: 0;
	}
}

@media (max-width: 720px) {
	.skgf .skgf__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
	.skgf .skgf__address-list {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.skgf .skgf__reviews {
		justify-content: flex-start;
	}
	.skgf .skgf__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 420px) {
	.skgf .skgf__cols {
		grid-template-columns: 1fr;
	}
	.skgf .skgf__socials {
		gap: 14px 22px;
	}
}