/* Sketch Suite — Home Hero
   Full-bleed hero with awards eyebrow, inline-image headline, subtitle,
   platform-logo strip, and footer captions. */

.skhh {
	--skhh-margin: 10px;
	--skhh-radius: 24px;
	--skhh-blur: 18px;
	--skhh-overlay: 0.35;
	--skhh-overlap: 90px;
	--skhh-fg: #ffffff;
	--skhh-fg-muted: rgba(255, 255, 255, 0.78);

	position: relative;
	height: var(--skhh-height, calc(100vh - (var(--skhh-margin) * 2)));
	height: var(--skhh-height, calc(100dvh - (var(--skhh-margin) * 2)));
	min-height: var(--skhh-min-height, 720px);
	border-radius: var(--skhh-radius);
	overflow: hidden;
	isolation: isolate;
	color: var(--skhh-fg);
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	background: #1a1a1a;
	box-sizing: border-box;

	/* Full-bleed breakout — anchored to viewport centre, with proper width math
	   so both left AND right margins land at --skhh-margin from the viewport edge. */
	width: calc(100vw - var(--skhh-margin) * 2);
	max-width: none;
	left: 50%;
	margin-left: calc(-50vw + var(--skhh-margin)) !important;
	margin-right: 0 !important;
	margin-top: var(--skhh-margin) !important;
	margin-bottom: var(--skhh-margin) !important;
}

/* Wipe common parent-container paddings/margins so the hero can reach the very top of
   the viewport. Many builders (WPBakery, Betheme content area, etc.) wrap the
   shortcode in containers with their own top padding which would otherwise sit above
   the hero as a white gap. */
body.skhh-on-page .vc_row,
body.skhh-on-page .vc_column-inner,
body.skhh-on-page .wpb_text_column,
body.skhh-on-page .wpb_wrapper,
body.skhh-on-page .entry-content,
body.skhh-on-page .post-content,
body.skhh-on-page .mfn-page-wrapper,
body.skhh-on-page #Content,
body.skhh-on-page main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.skhh-on-page .vc_row { margin-left: 0 !important; margin-right: 0 !important; }

/* Make the global header sit OVER the hero — DESKTOP ONLY. On mobile we leave the
   header in its normal sticky/in-flow state so the burger menu stays visible. */
@media (min-width: 769px) {
	body.skhh-on-page .skgh {
		position: fixed !important;
		top: var(--skgh-sticky-offset, 10px) !important;
		left: var(--skgh-side-gap, 10px) !important;
		right: var(--skgh-side-gap, 10px) !important;
		margin: 0 !important;
	}
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__pill {
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
	body.skhh-on-page .skgh:not(.skgh--scrolled),
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__nav-link,
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__logo,
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__logo-text,
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__nav-plus,
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__toggle-bars span {
		color: #ffffff !important;
		background: transparent;
	}
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__toggle-bars span {
		background: #ffffff !important;
	}
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary {
		color: #ffffff !important;
	}
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary:hover {
		background: #ffffff !important;
		color: var(--skgh-text, #111) !important;
	}

	/* Alt (white) logo swap — only when an alt logo was uploaded AND the header is
	   sitting transparently over the hero. Reverts the moment the header scrolls.
	   The default-hide of .skgh__logo-img--alt lives in the global header CSS so
	   it stays hidden site-wide. */
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__logo--has-alt .skgh__logo-img--default { display: none; }
	body.skhh-on-page .skgh:not(.skgh--scrolled) .skgh__logo--has-alt .skgh__logo-img--alt { display: block; }
}

@media (max-width: 768px) {
	.skhh {
		height: 500px !important;
		min-height: 0 !important;
		/* On mobile, header sits normally above the hero — no negative pull-up */
		margin-top: var(--skhh-margin) !important;
		/* Tighter side gutter so the hero feels intentional rather than full-bleed-with-margin */
		--skhh-margin: 8px;
	}
}

/* Desktop-only font-size overrides — only apply when the admin has set a custom value
   (the inline --skhh-headline-size / --skhh-sub-size vars). Mobile keeps responsive clamps. */
@media (min-width: 769px) {
	.skhh[style*="--skhh-headline-size"] .skhh-headline {
		font-size: var(--skhh-headline-size);
	}
	.skhh[style*="--skhh-sub-size"] .skhh-subtitle,
	.skhh[style*="--skhh-sub-size"] .skhh-typer-line {
		font-size: var(--skhh-sub-size);
	}
}

/* ─────────────────────────────────────────────────────
   BACKGROUND CAROUSEL
   ───────────────────────────────────────────────────── */

.skhh-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.skhh-bg__image,
.skhh-bg__placeholder {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	display: block !important;
	transform: scale(1.06);
	filter: blur(var(--skhh-blur));
	opacity: 0;
	transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity;
}

.skhh-bg__placeholder {
	background: linear-gradient(135deg, #2b2563, #6552ff, #ff33b9);
	transform: none;
	filter: blur(0);
	opacity: 1;
}

.skhh-bg__image.is-active {
	opacity: 1;
	animation: skhh-bg-zoom 18s ease-out forwards;
}

@keyframes skhh-bg-zoom {
	from { transform: scale(1.06); }
	to   { transform: scale(1.14); }
}

/* ── Background video (Vimeo) ─────────────────
   Sits over the image carousel, which stays underneath as the poster while the
   player loads and as the fallback wherever the video is suppressed. Fades in
   once the iframe has loaded (hero.js adds .is-ready) so there's no black flash. */
.skhh-bg__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;          /* never steal clicks from the hero content */
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	filter: blur(var(--skhh-blur));
	transform: scale(1.06);        /* matches the images' slight overscale */
}

.skhh-bg__video.is-ready {
	opacity: 1;
}

/* An iframe can't object-fit, so the box itself has to be 16:9 AND big enough to
   cover the hero — anything else and the player letterboxes inside it. hero.js
   sets exact pixel dimensions against the hero box (the only way to get this
   right for every height setting); this is the no-JS fallback, which covers
   whenever the hero is wider than 16:9 — i.e. the normal desktop case. */
.skhh-bg__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

/* Mobile: images by default — the video is a heavy download on mobile data and
   iOS routinely refuses to autoplay an embedded background video anyway. */
@media (max-width: 768px) {
	.skhh-bg__video:not(.skhh-bg__video--mobile) {
		display: none;
	}
}

/* Motion is the whole point of the video, so honour the preference and drop it. */
@media (prefers-reduced-motion: reduce) {
	.skhh-bg__video { display: none; }
}

.skhh-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--skhh-overlay));
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────
   FLOATING PILLS
   Decorative flag-tagged tags that drift around the hero's
   empty edges. Positioned via inline top/left; the drift is a
   transform applied per-frame by hero.js (so the two never fight).
   ───────────────────────────────────────────────────── */

.skhh-pills {
	position: absolute;
	inset: 0;
	z-index: 3;               /* above the shade + centred content's whitespace */
	pointer-events: none;     /* purely decorative — never intercept clicks */
	overflow: hidden;
}

.skhh-pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px 7px 11px;
	border-radius: 9999px;
	background: var(--skhh-pill-color, #e5ff4e);
	color: #10131a;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.28),
		0 1px 2px rgba(0, 0, 0, 0.2);
	/* Translate the anchor so the drift transform pivots around the pill's centre. */
	transform: translate(-50%, -50%);
	will-change: transform;
	/* Entrance: gentle pop-in. Continuous drift is handled by JS via transform,
	   so we only animate opacity here to avoid clobbering that transform. */
	opacity: 0;
	animation: skhh-pill-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger the entrance so they don't all appear at once. */
.skhh-pill:nth-of-type(1) { animation-delay: 0.25s; }
.skhh-pill:nth-of-type(2) { animation-delay: 0.40s; }
.skhh-pill:nth-of-type(3) { animation-delay: 0.55s; }
.skhh-pill:nth-of-type(4) { animation-delay: 0.70s; }
.skhh-pill:nth-of-type(5) { animation-delay: 0.85s; }
.skhh-pill:nth-of-type(6) { animation-delay: 1.00s; }
.skhh-pill:nth-of-type(7) { animation-delay: 1.15s; }
.skhh-pill:nth-of-type(8) { animation-delay: 1.30s; }

@keyframes skhh-pill-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Glow variant — a gradient ring that pulses, for pills that should catch the
   eye ahead of the others (the AI team). The ring is a gradient-filled
   pseudo-element masked down to just its border, which is the only way to get a
   gradient outline on a pill radius; the glow itself is a coloured drop shadow
   pulsing underneath. */
.skhh-pill--glow {
	position: absolute;       /* already absolute, restated for the ::before anchor */
	isolation: isolate;
	animation:
		skhh-pill-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		skhh-pill-glow 2.6s ease-in-out 1s infinite;
}

.skhh-pill--glow::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from 210deg,
		#b9a6ff,
		#6647ff,
		#3fd0ff,
		#ff8ad4,
		#ffd36e,
		#b9a6ff
	);
	/* Punch out the middle so only the 2px ring is painted. */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

@keyframes skhh-pill-glow {
	0%, 100% {
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.28),
			0 0 14px 0 rgba(185, 166, 255, 0.45);
	}
	50% {
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.28),
			0 0 26px 4px rgba(185, 166, 255, 0.8);
	}
}

/* The pulse is decorative; the drift already conveys life. */
@media (prefers-reduced-motion: reduce) {
	.skhh-pill--glow {
		animation: none;
		opacity: 1;
		box-shadow:
			0 8px 22px rgba(0, 0, 0, 0.28),
			0 0 18px 2px rgba(185, 166, 255, 0.6);
	}
}

.skhh-pill__icon {
	flex: none;
	display: block;
	color: #10131a;
	opacity: 0.9;
}

.skhh-pill__label {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.skhh-pill {
		opacity: 1;
		animation: none;
	}
}

@media (max-width: 768px) {
	/* Hero is only 500px tall on mobile — pills would crowd the headline. */
	.skhh-pills { display: none; }
}

/* ─────────────────────────────────────────────────────
   CONTENT
   ───────────────────────────────────────────────────── */

.skhh-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding:
		calc(var(--skhh-overlap) + 24px)
		clamp(20px, 4vw, 64px)
		clamp(110px, 12vh, 180px);
	gap: clamp(18px, 2.4vh, 32px);
}

.skhh--overlap .skhh-content {
	padding-top: calc(var(--skhh-overlap) + 32px);
}

/* ── Eyebrow ──────────────────────────────── */
.skhh-eyebrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
}

.skhh-eyebrow__text {
	margin: 0;
	font-size: clamp(11px, 0.85vw, 13px);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--skhh-fg);
	line-height: 1.4;
}

/* Google reviews badge sitting in the eyebrow slot (styles live in the
   google-reviews module's badge.css — this only handles hero placement). */
.skhh-eyebrow__badge {
	flex-shrink: 0;
}

.skhh-eyebrow__awards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.6vw, 36px);
}

.skhh-eyebrow__award {
	display: inline-flex;
	align-items: center;
	height: clamp(32px, 4vh, 46px);
}

.skhh-eyebrow__award-img {
	height: 100%;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);  /* render mono-white over the dark hero; remove if your badges are full-colour */
	opacity: 0.92;
}

/* ── Headline ─────────────────────────────── */
.skhh-headline {
	margin: 0;
	font-size: clamp(40px, 7.2vw, 124px);
	line-height: 0.96;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--skhh-fg);
	max-width: 18ch;
	text-wrap: balance;
}

/* ── Headline entrance ────────────────────────
   Sketch Reveal supplies the trigger, the delays (via data-sk-reveal-stagger on
   the h1) and the opacity/transform transition. We only add what it doesn't do:
   a per-word inline-block so transforms apply, softer tuning for display type,
   and a blur that resolves as each word rises — which is what stops a big
   headline reading as a blunt slide.

   Selectors are one level more specific than Sketch Reveal's own so this wins
   regardless of stylesheet order. */
.skhh-headline__word {
	display: inline-block;
	/* Travel in em so the distance scales with the clamped headline size. */
	--sk-distance: 0.28em;
	--sk-duration: 1s;
	--sk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.sk-reveal .skhh-headline .skhh-headline__word {
	filter: blur(12px);
	transition:
		opacity var(--sk-duration) var(--sk-ease),
		transform var(--sk-duration) var(--sk-ease),
		filter var(--sk-duration) var(--sk-ease);
	transition-delay: var(--sk-delay, 0ms);
	will-change: opacity, transform, filter;
}

html.sk-reveal .skhh-headline .skhh-headline__word.sk-in {
	filter: blur(0);
}

/* Reveal's reduced-motion rule only resets opacity/transform/transition, so the
   blur would otherwise stick and leave the headline permanently out of focus. */
@media (prefers-reduced-motion: reduce) {
	html.sk-reveal .skhh-headline .skhh-headline__word {
		filter: none !important;
		will-change: auto;
	}
}

/* Wrappers exist purely to carry a reveal without overwriting the hover
   transforms on the badge and CTA inside them. */
.skhh-eyebrow__badge-wrap,
.skhh-cta-wrap {
	display: inline-flex;
}

.skhh-headline__img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.12em;
	border-radius: 0.22em;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	transform: translateY(-0.04em);
}

.skhh-headline__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Subtitle ─────────────────────────────── */
.skhh-subtitle {
	margin: 0;
	font-size: clamp(15px, 1.2vw, 20px);
	font-weight: 400;
	color: var(--skhh-fg-muted);
	letter-spacing: -0.005em;
}

/* A full sentence here (not the old one-line typer) needs a measure and leading of
   its own, or it runs the full hero width on two cramped lines. Root-prefixed so
   Betheme's later stylesheet can't reset it. */
.skhh .skhh-subtitle {
	max-width: 36ch;
	margin-inline: auto;
	line-height: 1.3;
	text-wrap: balance;
}

/* ── Typewriter line ──────────────────────── */
.skhh-typer-line {
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-size: clamp(15px, 1.2vw, 20px);
	font-weight: 400;
	color: var(--skhh-fg-muted);
	letter-spacing: -0.005em;
}

.skhh-typer {
	display: inline-flex;
	align-items: baseline;
	color: var(--skhh-fg);
	font-weight: 600;
	min-height: 1em;
}

.skhh-typer__text {
	white-space: nowrap;
}

.skhh-typer__caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: var(--skhh-fg);
	margin-left: 4px;
	transform: translateY(0.12em);
	animation: skhh-caret 1.05s step-end infinite;
}

@keyframes skhh-caret {
	0%, 50%   { opacity: 1; }
	50.1%, 100% { opacity: 0; }
}

/* ── CTA ──────────────────────────────────── */
.skhh-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(6px, 1vh, 14px);
}

.skhh-cta {
	/* Hover fill, swiped in from the left. Primary goes to the brand purple —
	   the same value the global header's CTA uses. */
	--skhh-cta-hover-bg: #6647ff;
	--skhh-cta-hover-fg: #ffffff;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 9999px;
	background: #ffffff;
	color: #111111;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.2s ease,
		background 0.18s ease,
		/* Held back until the fill has swept under the label, then snapped — flip
		   the text any earlier and it briefly sits white-on-white (or dark-on-dark)
		   over the part of the button the fill hasn't reached yet. Keep the delay
		   at ~80% of the fill duration if you retime the swipe. */
		color 0.06s ease 0.21s;
	white-space: nowrap;
}

/* The swipe itself. Clipped to the pill by the button's overflow: hidden. */
.skhh-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--skhh-cta-hover-bg);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.26s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}

/* Lift the label and arrow above the fill. */
.skhh-cta__label,
.skhh-cta__arrow {
	position: relative;
}

.skhh-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Guarded so a tap on a touch device can't latch the filled state. */
@media (hover: hover) {
	.skhh-cta:hover,
	.skhh-cta:focus-visible {
		color: var(--skhh-cta-hover-fg);
	}
	.skhh-cta:hover::before,
	.skhh-cta:focus-visible::before {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.skhh-cta::before { transition: none; }
}

/* Secondary — outlined glass, so it reads as the quieter of the pair. The
   outline is an inset shadow rather than a border so both buttons stay exactly
   the same height. */
.skhh-cta--secondary {
	/* Swipes to solid white with dark text — the inverse of the primary. */
	--skhh-cta-hover-bg: #ffffff;
	--skhh-cta-hover-fg: #111111;

	background: rgba(255, 255, 255, 0.12);
	color: var(--skhh-fg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

.skhh-cta--secondary:hover {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.65),
		0 10px 28px rgba(0, 0, 0, 0.22);
}

.skhh-cta__arrow {
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skhh-cta:hover .skhh-cta__arrow {
	transform: translate(2px, -2px);
}

/* ── Logo strip ───────────────────────────── */
.skhh-logos {
	list-style: none;
	margin: clamp(8px, 1.6vh, 24px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 3.4vw, 56px);
	max-width: 1200px;
	width: 100%;
}

.skhh-logos__item {
	display: inline-flex;
	align-items: center;
	height: clamp(20px, 2.6vh, 28px);
}

.skhh-logos__img {
	height: 100%;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 200ms ease;
}

.skhh-logos__item:hover .skhh-logos__img {
	opacity: 1;
}

/* ── Footer captions ──────────────────────── */
.skhh-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(20px, 3vh, 40px) clamp(20px, 4vw, 64px);
	color: var(--skhh-fg-muted);
	font-size: clamp(12px, 0.9vw, 14px);
	line-height: 1.45;
	pointer-events: none;
}

.skhh-foot__left,
.skhh-foot__right {
	max-width: 30ch;
	pointer-events: auto;
}

.skhh-foot__right {
	text-align: right;
}

@media (max-width: 768px) {
	.skhh-content {
		padding: 70px 20px 90px;
		gap: 14px;
	}
	.skhh-headline { font-size: clamp(32px, 9.5vw, 56px); }
	.skhh-subtitle { font-size: 14px; }
	.skhh-eyebrow__text { font-size: 10px; letter-spacing: 0.16em; }
	.skhh-eyebrow__awards { gap: 14px; }
	.skhh-eyebrow__award { height: 26px; }
	/* Trim the buttons so the pair still fits on one row at ~375px rather than
	   wrapping into a stack. They wrap below that, which is the right fallback. */
	.skhh-cta-row { gap: 10px; }
	.skhh-cta { padding: 12px 20px; font-size: 14px; }
	.skhh-logos { gap: 18px; margin-top: 4px; }
	.skhh-logos__item { height: 18px; }
	.skhh-foot {
		flex-direction: row;
		align-items: flex-end;
		gap: 14px;
		padding: 14px 18px;
		font-size: 10px;
	}
	.skhh-foot__left,
	.skhh-foot__right {
		max-width: 18ch;
	}
}