/* Auto-generated — npm run build:theme. Nie edytuj ręcznie. */
@layer tokens, base, layout, components, blocks, templates;

/* --- styles/tokens.css --- */
/* ==========================================================================
   KFB Technologies — design tokens (źródło prawdy)
   Patrz styles/design-system.md. Oryginał: mockup/KFB_Tech_907/tokens.css
   ========================================================================== */

/* ---- Web fonts ----
   Overused Grotesk (Roman / upright) — font display (wybór klienta, 2026-07).
   Pliki lokalne w assets/fonts/. Poppins ładowany z Google Fonts (inc/assets.php).
   Ścieżka url() względna do pliku CSS: dev styles/ i prod build/ są 1 poziom pod
   rootem motywu, więc ../assets/fonts/ działa w obu (i w iframe edytora).
   @font-face poza @layer — reguły @font-face nie podlegają warstwom kaskady. */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('../assets/fonts/OverusedGroteskRoman-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Overused Grotesk';
	src: url('../assets/fonts/OverusedGroteskRoman-Roman.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Overused Grotesk';
	src: url('../assets/fonts/OverusedGroteskRoman-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Overused Grotesk';
	src: url('../assets/fonts/OverusedGroteskRoman-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Overused Grotesk';
	src: url('../assets/fonts/OverusedGroteskRoman-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@layer tokens {

:root {
	/* ---- Fonts ----
	   NOTE 2026-07: font display to teraz SANS (Overused Grotesk; był Georgia serif).
	   Tytuły kart/feature również używają --font-display. */
	--font-display: 'Overused Grotesk', 'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-sans: 'Poppins', Helvetica, Arial, sans-serif;

	/* ---- Font weights ---- */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* ---- Type scale: font-size ---- */
	--fs-h1: 72px; /* RESERVE — currently unused */
	--fs-h2: 64px;
	--fs-h3: 48px;
	--fs-h4: 40px;
	--fs-h5: 32px;
	--fs-h6: 24px;
	--fs-quote: 24px;
	--fs-body-lg: 20px;
	--fs-body: 16px;
	--fs-body-sm: 14px;
	--fs-caption: 12px;

	/* ---- Type scale: line-height ---- */
	--lh-h1: 76px;
	--lh-h2: 76px;
	--lh-h3: 60px;
	--lh-h4: 52px;
	--lh-h5: 44px;
	--lh-h6: 34px;
	--lh-quote: 34px;
	--lh-body-lg: 30px;
	--lh-body: 26px;
	--lh-body-sm: 20px;
	--lh-caption: 16px;

	/* ---- Letter-spacing ---- */
	--ls-display: -0.5px;
	--ls-hero: -1px;
	--ls-eyebrow: 0.14em;
	--ls-tag: 0.08em;
	--ls-meta: 0.03em;

	/* ---- Colours: core ---- */
	--paper: #ffffff;
	--ink: #050505;
	--sub: #525252;
	--accent: #ff5b22;
	--accent-hover: #ff7440;

	/* ---- Colours: footer (dark) ---- */
	--fbg: #0a0a0a;
	--fink: #f4f4f4;
	--fmuted: rgb(244 244 244 / 0.62);
	--field: #050505;
	--frame-ink: #ffffff;

	/* ---- Colours: sub-brands ---- */
	--brand-solutions: #d4541c;
	--brand-labs: #235ea3;
	--brand-rafa: #2d7a55;
	--brand-environmental: #1d6b40;
	--brand-academy: #d23f2f;

	/* ---- Glass pill (type label on card images) ---- */
	--pill-bg: rgb(10 10 10 / 0.42);
	--pill-blur: blur(14px) saturate(130%);

	/* ---- Spacing / layout ---- */
	--sec-gap: 120px;
	--sec-px: 80px;
	--tc-gap: 64px;
	--nav-h: 84px;
	--content-max: 1488px;
	--page-gutter: 12px;

	/* ---- Radii ---- */
	--radius-card: 16px;
	--radius-lg: 32px;
	--radius-pill: 99px;
	--notch-r: 40px;

	/* ---- Motion ---- */
	--ease-ui: 0.15s ease;
	--ease-nav: 0.3s ease;
}

@media (max-width: 1040px) {
	:root {
		--sec-gap: 80px;
		--sec-px: 24px;
		--tc-gap: 44px;
	}
}

@media (max-width: 860px) {
	:root {
		--sec-gap: 80px;
		--sec-px: 24px;
		--nav-h: 72px;
		--page-gutter: 8px;
	}
}

}

/* --- styles/colors.css --- */
/*
 * Semantyczne aliasy kolorów + kompatybilność wsteczna (nav, stopka, CTA).
 * Tokeny kanoniczne: tokens.css (--paper, --ink, --accent, …).
 */

@layer tokens {

:root {
	color-scheme: light;

	/* Ink — przezroczystości (design-system §4) */
	--ink-70: rgb(5 5 5 / 0.7);
	--ink-55: rgb(5 5 5 / 0.55);
	--ink-42: rgb(5 5 5 / 0.42);
	--ink-30: rgb(5 5 5 / 0.3);

	/* Powierzchnie i tekst (semantyka motywu) */
	--text-primary: var(--ink);
	--text-secondary: var(--sub);
	--text-muted: var(--ink-55);
	--surface-page: var(--paper);
	--surface-nav: var(--paper);
	--border-subtle: var(--ink-08, rgb(5 5 5 / 0.08));

	/* ---- Aliasy kompatybilności (istniejące komponenty nav / footer / CTA) ---- */
	--color-black: var(--ink);
	--color-white: var(--paper);
	--color-gray-100: #f7f7f7;
	--color-gray-200: #e8e8e8;
	--color-gray-600: var(--sub);
	--color-gray-900: var(--ink);

	--color-brand-primary: var(--brand-labs);
	--color-brand-accent: #03c8fd;

	--color-solutions-orange-600: var(--brand-solutions);
	--color-solutions-orange-400: var(--accent);
	--color-solutions-orange-200: var(--accent-hover);

	--color-orange: var(--accent);
	--color-orange-400: var(--accent);
	--color-orange-2: var(--accent-hover);
	--color-orange-200: var(--accent-hover);

	--color-yellow-100: #ffd300;
	--color-black-08: rgb(5 5 5 / 0.08);
	--color-black-80: rgb(5 5 5 / 0.8);
	--color-white-90: rgb(255 255 255 / 0.9);
	--color-ink-04: rgb(0 0 0 / 0.04);
	--color-ink-08: rgb(0 0 0 / 0.08);
	--color-ink-12: rgb(0 0 0 / 0.12);
	--color-ink-50: rgb(0 0 0 / 0.5);

	/* Stopka — mapowanie na tokeny DS */
	--footer-reveal-bg: var(--fbg);
	--footer-reveal-ink: var(--fink);
	--footer-reveal-muted: var(--fmuted);
	--footer-reveal-accent: var(--accent);
	--footer-reveal-accent-hot: var(--accent-hover);

	/* Typografia — aliasy rozmiarów (stare pliki CSS) */
	--font-size-xs: var(--fs-caption);
	--font-size-sm: var(--fs-body-sm);
	--font-size-md: var(--fs-body);
	--font-size-lg: var(--fs-body-lg);
	--font-size-3xl: var(--fs-h4);
	--font-size-4xl: var(--fs-h3);
	--line-height-sm: var(--lh-body-sm);
	--line-height-md: var(--lh-body);
	--font-weight-medium: var(--fw-medium);
	--text-subsection: var(--fs-body-sm);
	--text-caption-12: var(--fs-caption);
}

}

/* --- styles/typography.css --- */
/*
 * Typografia bazowa + klasy utility (reużywalne).
 * Design system: styles/design-system.md
 *
 * Reset tagów (h1–h6) używa :where() — specyficzność 0, więc klasy
 * (BEM bloków, .sec-title, .type-*) zawsze wygrywają bez !important.
 */

@layer base {

/* ---- Reset typografii dokumentu ---- */

html {
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-regular);
	color: var(--ink);
	background: var(--paper);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--accent);
	color: #fff;
}

::-moz-selection {
	background: var(--accent);
	color: #fff;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	color: var(--ink);
	margin: 0 0 0.5em;
}

:where(h1) {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-hero);
}

:where(h2) {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-hero);
}

:where(h3) {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-display);
}

:where(h4) {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-display);
}

:where(h5) {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-display);
}

:where(h6) {
	font-family: var(--font-sans);
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	font-weight: var(--fw-medium);
	letter-spacing: normal;
}

.entry-title {
	font-size: clamp(var(--fs-h5), 4vw, var(--fs-h2));
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-hero);
}

/* ---- Font family utilities ---- */

.font-display {
	font-family: var(--font-display);
}

.font-sans {
	font-family: var(--font-sans);
}

/* ---- Type scale utilities ---- */

.type-h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-hero);
}

.type-h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-hero);
}

/*
 * .sec-title — tytuł sekcji (mockup: 48px = --fs-h3).
 * --fs-h2 (64px) zarezerwowane pod hero / tytuły strony.
 */
.sec-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-display);
}

.type-h3 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-display);
}

.type-h4 {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-display);
}

.type-h5 {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-display);
}

.type-h6 {
	font-family: var(--font-sans);
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	font-weight: var(--fw-medium);
	letter-spacing: normal;
}

.type-quote {
	font-family: var(--font-display);
	font-size: var(--fs-quote);
	line-height: var(--lh-quote);
	font-weight: var(--fw-regular);
	letter-spacing: normal;
}

.type-body-lg {
	font-family: var(--font-sans);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-regular);
}

.type-body,
.text-body-standard {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-regular);
}

.type-body-sm {
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-regular);
}

.type-caption {
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-regular);
}

/* ---- Named UI text styles ---- */

.type-eyebrow,
.eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.type-eyebrow--muted,
.eyebrow--muted {
	color: var(--ink-42);
}

.type-card-title {
	font-family: var(--font-sans);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
}

.type-card-title--featured {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
}

.type-card-meta {
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-meta);
	color: var(--ink-55);
}

.type-brand-tag {
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
	color: var(--ink-55);
}

/* ---- Fluid hero title (H2 scale) ---- */

.type-hero-title {
	font-family: var(--font-display);
	font-size: clamp(var(--fs-h5), 5vw, var(--fs-h2));
	line-height: var(--lh-h2);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-hero);
}

/* ---- Weight utilities ---- */

.fw-light { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }

/* ---- Colour utilities ---- */

.text-ink { color: var(--ink); }
.text-sub { color: var(--sub); }
.text-muted { color: var(--ink-55); }
.text-accent { color: var(--accent); }

}

/* --- styles/layout.css --- */
/*
 * Layout — sekcje, kontenery, rhythm (reużywalne).
 */

@layer layout {

.site-container {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding: 0;
	box-sizing: border-box;
	container-type: inline-size;
}

.entry-content {
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

/* Sekcja strony — pionowy rhythm + padding boczny */
.section {
	padding-block: var(--sec-gap);
	padding-inline: var(--sec-px);
	box-sizing: border-box;
}

.section--compact {
	padding-block: calc(var(--sec-gap) * 0.5);
}

.section__inner {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
}

/* Stack — pionowe odstępy między elementami */
.stack {
	display: flex;
	flex-direction: column;
}

.stack--gap-sm { gap: 12px; }
.stack--gap-md { gap: 24px; }
.stack--gap-lg { gap: 48px; }
.stack--gap-xl { gap: 80px; }

/* Grid pomocniczy */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 860px) {
	.grid-2,
	.grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Karta / blok z zaokrągleniem DS */
.surface-card {
	background: var(--paper);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.surface-lg {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Breakout — pełna szerokość w obrębie entry-content */
.breakout {
	width: 100cqi;
	max-width: 100cqi;
	margin-inline: calc(50% - 50cqi);
}

}

/* --- style.css --- */
/**
 * Layout globalny — tokeny w styles/tokens.css, szczegóły w styles/design-system.md.
 */
@layer layout {

.site-main {
	overflow-x: hidden;
	overflow-y: visible;
	padding: calc(var(--nav-h, 84px) + var(--page-gutter, 12px)) var(--page-gutter, 12px) 0;
}

body.nav-dynamic .site-main {
	padding-top: calc(var(--nav-h, 84px) + 16px);
}

@media (max-width: 1040px) {
	.site-main {
		padding-top: calc(72px + var(--page-gutter, 12px));
	}

	body.nav-dynamic .site-main {
		padding-top: calc(12px + 72px + 12px);
	}
}

@supports (overflow: clip) {
	.site-main {
		overflow-x: clip;
	}
}

/*
 * About — layout w tym samym bundle co .site-main (bez FOUC / skoku po about.css).
 * Hero .abm ma margin-top: -84px w bloku; tu tylko zerujemy padding i overflow.
 */
body.page-slug-about .nav {
	top: 0;
	background: rgb(255 255 255 / 0.85);
	-webkit-backdrop-filter: saturate(140%) blur(50px);
	backdrop-filter: saturate(140%) blur(50px);
}

body.page-slug-about .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-about .site-container,
body.page-slug-about .entry-content {
	max-width: none;
	padding-inline: 0;
}

body.page-slug-about .about-hero.abm {
	position: relative;
	max-width: none;
	margin-top: calc(-1 * var(--nav-h, 84px));
	height: calc(clamp(540px, 86vh, 880px) + var(--nav-h, 84px));
	overflow: hidden;
	background: #fff;
}

body.page-slug-about .about-hero .abm-wall {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 0 clamp(20px, 4vw, 40px);
	overflow: hidden;
}

body.page-slug-about .about-hero .abm-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body.page-slug-about .about-hero .abm-frame {
	flex: none;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

body.page-slug-about .about-hero .abm-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

body.page-slug-about .about-hero .abm-inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
	max-width: 1488px;
	margin: 0 auto;
	padding: 0 var(--sec-px, 80px) clamp(48px, 7vh, 84px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

@supports (overflow: clip) {
	body.page-slug-about .site-main {
		overflow-x: visible;
	}
}

/*
 * Contact — glob our-offices wychodzi poza siatkę; bez overflow-x: visible jest obcinany.
 * Padding .site-main zerowany — odstęp od góry daje sama sekcja .contact-section.ct (mockup).
 */
body.page-slug-contact .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-contact .site-container,
body.page-slug-contact .entry-content {
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-contact .site-main {
		overflow-x: visible;
	}
}

/*
 * Newsroom — hero full-bleed; padding daje sekcja .nr-hero (mockup).
 */
body.page-slug-newsroom .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-newsroom .site-container,
body.page-slug-newsroom .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-newsroom .site-main {
		overflow-x: visible;
	}
}

/*
 * Markets — hero full-bleed; padding daje sekcja .ab-hero (mockup).
 */
body.page-slug-markets .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-markets .site-container,
body.page-slug-markets .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-markets .site-main {
		overflow-x: visible;
	}
}

/*
 * Careers — hero full-bleed; padding daje sekcja .careers-hero (mockup).
 */
body.page-slug-careers .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-careers .site-container,
body.page-slug-careers .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-careers .site-main {
		overflow-x: visible;
	}
}

/*
 * Our Impact — hero full-bleed; padding daje sekcja .impact-hero (mockup).
 */
body.page-slug-our-impact .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-our-impact .site-container,
body.page-slug-our-impact .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-our-impact .site-main {
		overflow-x: visible;
	}
}

/*
 * Leadership — hero full-bleed; padding daje sekcja .leadership-hero (mockup).
 */
body.page-slug-leadership .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-leadership .site-container,
body.page-slug-leadership .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-leadership .site-main {
		overflow-x: visible;
	}
}

/*
 * Home — hero pełnoszerokościowy, wjeżdża pod nav (.hero ma margin-top:-84px
 * w bloku home-hero); zerujemy tu ambientowy padding .site-main, w tym
 * dodatkowe body.nav-dynamic .site-main{padding-top:+16px} (linia 24-26
 * wyżej) — inaczej hero ląduje POD navem z odstępem zamiast pod nim.
 */
body.page-slug-home.nav-dynamic .site-main,
body.page-slug-home .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-home .site-container,
body.page-slug-home .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-home .site-main {
		overflow-x: visible;
	}
}

@media (max-width: 1040px) {
	body.page-slug-about .site-main {
		padding-top: 0;
	}

	body.page-slug-about .about-hero.abm {
		margin-top: -72px;
		height: calc(clamp(540px, 86vh, 880px) + 72px);
	}
}

@media (max-width: 860px) {
	body.page-slug-about .about-hero.abm {
		margin-top: calc(-1 * var(--nav-h, 72px));
		height: calc(70vh + var(--nav-h, 72px));
	}

	body.page-slug-about .about-hero .abm-inner {
		padding-bottom: 40px;
	}
}

/*
 * Partnering — hero full-bleed (impact-hero reużyty, ten sam wzorzec
 * .pn-hero co Our-Impact.html); padding daje sekcja .impact-hero.
 */
body.page-slug-partnering .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-partnering .site-container,
body.page-slug-partnering .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-partnering .site-main {
		overflow-x: visible;
	}
}

/*
 * Privacy / Terms — strona prawna (.legal-page). Zerujemy padding .site-main;
 * górny odstęp pod navem i szerokość daje sama sekcja .legal-page/.legal-inner
 * (mockup Privacy.html / Terms.html).
 */
body.page-slug-privacy .site-main,
body.page-slug-terms .site-main {
	padding-top: 0;
	padding-inline: 0;
	overflow-x: visible;
}

body.page-slug-privacy .site-container,
body.page-slug-privacy .entry-content,
body.page-slug-terms .site-container,
body.page-slug-terms .entry-content {
	max-width: none;
	padding-inline: 0;
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-privacy .site-main,
	body.page-slug-terms .site-main {
		overflow-x: visible;
	}
}

}

/* --- styles/components.css --- */
/*
 * Komponenty UI — reużywalne wzorce z design systemu.
 * Przyciski (.btn): styles/buttons.css
 */

/* ---- Highlight (wyróżnione słowo w tytule — kolor akcentu) ---- */

@layer components {

.kfb-heading-highlight {
	color: var(--accent);
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: inherit;
}

.kfb-heading-highlight--serif {
	font-family: var(--font-display);
}

/* ---- Type pill (glass label on card image) ---- */

.type-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-medium);
	color: var(--paper);
	background: var(--pill-bg);
	-webkit-backdrop-filter: var(--pill-blur);
	backdrop-filter: var(--pill-blur);
}

/* ---- Link z podkreśleniem (poza nav — utility) ---- */

.link-underline {
	position: relative;
	text-decoration: none;
	color: inherit;
}

.link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease;
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
	transform: scaleX(1);
}

/* ---- Sub-brand colour utilities ---- */

.brand-solutions { color: var(--brand-solutions); }
.brand-labs { color: var(--brand-labs); }
.brand-rafa { color: var(--brand-rafa); }
.brand-environmental { color: var(--brand-environmental); }
.brand-academy { color: var(--brand-academy); }

.bg-brand-solutions { background-color: var(--brand-solutions); }
.bg-brand-labs { background-color: var(--brand-labs); }
.bg-brand-rafa { background-color: var(--brand-rafa); }
.bg-brand-environmental { background-color: var(--brand-environmental); }
.bg-brand-academy { background-color: var(--brand-academy); }

}

/* --- styles/navigation.css --- */
/*
 * Navigation — 1:1 z mockup/KFB_Tech_907/index.html (.nav, mobile .nav-mobile).
 * Menu podpinane przez wp_nav_menu (primary).
 */

/* ================= NAVIGATION ================= */

@layer components {

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--nav-h, 84px);
	background: transparent;
	--nav-gap: 12px;
	--nav-radius: 24px;
	transition:
		background 0.35s ease,
		transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav.solid {
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: saturate(140%) blur(50px);
	backdrop-filter: saturate(140%) blur(50px);
}

/* Cień/scrim pod navem, gdy stoi nad ciemnym hero (czytelność linków) — mockup .nav::before */
.nav::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -2;
	opacity: 0;
	transition:
		opacity 0.35s ease,
		left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		right 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(to bottom, rgb(0 0 0 / 1), rgb(0 0 0 / 0.72) 58%, rgb(0 0 0 / 0));
}

.nav:not(.solid)::before {
	opacity: 1;
}

body.framed .nav::before {
	left: var(--nav-gap, 12px);
	right: var(--nav-gap, 12px);
	border-radius: var(--nav-radius, 24px) var(--nav-radius, 24px) 0 0;
}

/* Po przescrollowaniu poza gap+radius narożniki scrimu przełączają się na
   kwadratowe bez animacji (mockup: body.framed .nav.nav-flat:not(.solid)::before). */
body.framed .nav.nav-flat:not(.solid)::before {
	border-radius: 0;
}

body.scrolled .nav::before {
	transition:
		opacity 0.35s ease,
		left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-inner {
	max-width: var(--content-max, 1488px);
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 68px;
	box-sizing: border-box;
}

.nav-zone {
	flex: 1;
	display: flex;
	align-items: center;
}

.nav-zone-right {
	justify-content: flex-end;
	gap: 24px;
}

.nav-logo {
	display: block;
	flex: none;
	text-decoration: none;
	color: inherit;
}

.nav-logo svg {
	height: 36px;
	width: auto;
	display: block;
}

.nav-logo .lg {
	display: block;
}

.nav-logo .lg-dark {
	display: none;
}

.nav.solid .nav-logo .lg-white {
	display: none;
}

.nav.solid .nav-logo .lg-dark {
	display: block;
}

.nav-logo__fallback {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}

.nav-links {
	display: flex;
	gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.nav-links > li {
	margin: 0;
	padding: 0;
}

.nav-links a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	display: inline-block;
	transition: color 0.2s;
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	height: 2px;
	width: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
	color: var(--accent);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
	transform: scaleX(1);
}

.nav.solid .nav-links a {
	color: var(--ink);
}

.nav.solid .nav-links a:hover,
.nav.solid .nav-links a:focus-visible {
	color: var(--accent);
}

.nav-has-dd {
	position: relative;
}

.nav-has-dd > a::after {
	display: none;
}

.nav-chev {
	width: 14px;
	height: 14px;
	margin-left: 5px;
	vertical-align: -2px;
	transition: transform 0.25s;
}

.nav-lang .nav-chev {
	width: 16px;
	height: 16px;
	margin-left: 0;
	vertical-align: middle;
}

.nav-has-dd:hover .nav-chev,
.nav-has-dd:focus-within .nav-chev {
	transform: rotate(180deg);
}

.nav-dd {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 190px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 34px rgb(0 0 0 / 0.16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
	z-index: 200;
}

.nav-dd::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.nav-has-dd:hover .nav-dd,
.nav-has-dd:focus-within .nav-dd {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(10px);
}

.nav-dd a {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--ink);
	font-size: 16px;
	white-space: nowrap;
	text-decoration: none;
}

.nav-dd a::after {
	display: none;
}

.nav-dd a:hover,
.nav-dd a:focus-visible {
	background: rgb(5 5 5 / 0.05);
	color: var(--accent);
}

.nav-dd-lang {
	left: auto;
	right: 0;
	min-width: 96px;
	transform: translateX(0) translateY(4px);
}

.nav-has-dd:hover .nav-dd-lang,
.nav-has-dd:focus-within .nav-dd-lang {
	transform: translateX(0) translateY(10px);
}

.nav-lang {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: 16px;
	color: #fff;
	background: none;
	border: 0;
	font-family: inherit;
	transition: color 0.2s;
	padding: 0;
}

.nav-lang:hover,
.nav-lang:focus-visible {
	color: var(--accent);
}

.nav.solid .nav-lang {
	color: var(--ink);
}

.nav.solid .nav-lang:hover,
.nav.solid .nav-lang:focus-visible {
	color: var(--accent);
}

.nav-lang svg {
	width: 24px;
	height: 24px;
	flex: none;
}

/* Nav CTA — mockup About.html .nav-cta */
.nav-cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	background: var(--accent);
	color: #fff;
	border-radius: 99px;
	white-space: nowrap;
	padding: 10px 22px;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity 0.22s ease,
		transform 0.26s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.nav-cta.show {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.nav-cta:hover,
.nav-cta:focus-visible {
	background: #ff7440;
}

.nav-burger {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.4rem;
}

.nav-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	margin: 5px 0;
	border-radius: 2px;
	transition:
		transform 0.25s ease,
		opacity 0.2s ease;
}

.nav.solid .nav-burger span {
	background: var(--ink);
}

.nav a:focus-visible,
.nav button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Aktywna strona — podkreślenie widoczne */
.nav-links a.active::after {
	transform: scaleX(1);
}

.nav.solid .nav-links a.active {
	color: var(--accent);
}

/* ===== mobile nav menu ===== */

.nav-mobile {
	display: none;
}

@media (max-width: 1040px) {
	.nav {
		height: 72px;
		--nav-gap: 4px;
		--nav-radius: 16px;
	}

	.nav-inner {
		padding: 0 24px;
	}

	.nav-links,
	.nav-lang-wrap {
		display: none;
	}

	.nav-burger {
		display: block;
	}

	.nav.menu-open .nav-mobile {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 72px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 16px 24px 40px;
		overflow-y: auto;
		z-index: 59;
		-webkit-overflow-scrolling: touch;
	}

	.nav-mobile .nm-link,
	.nav-mobile .nm-label {
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 20px;
		color: var(--ink);
		text-decoration: none;
		padding: 15px 0;
		border-top: 1px solid rgb(5 5 5 / 0.07);
	}

	.nav-mobile .nm-link.active {
		color: var(--accent);
	}

	.nav-mobile .nm-group {
		display: flex;
		flex-direction: column;
		border-top: 1px solid rgb(5 5 5 / 0.07);
		padding-bottom: 10px;
	}

	.nav-mobile .nm-label {
		border-top: 0;
		padding-bottom: 2px;
	}

	.nav-mobile .nm-sub {
		font-family: var(--font-sans);
		font-size: 16px;
		color: rgb(5 5 5 / 0.6);
		text-decoration: none;
		padding: 9px 0 9px 14px;
	}

	.nav-mobile .nm-cta {
		margin-top: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--accent);
		color: #fff;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 16px;
		text-decoration: none;
		border-radius: 99px;
		padding: 14px 26px;
	}

	.nav-mobile .nm-lang {
		display: flex;
		gap: 20px;
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid rgb(5 5 5 / 0.07);
	}

	.nav-mobile .nm-lang a {
		font-family: var(--font-sans);
		font-size: 16px;
		color: rgb(5 5 5 / 0.6);
		text-decoration: none;
	}

	.nav.menu-open .nav-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav.menu-open .nav-burger span:nth-child(2) {
		opacity: 0;
	}

	.nav.menu-open .nav-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav,
	.nav::before,
	.nav-cta,
	.nav-burger span,
	.nav-dd,
	.nav-chev {
		transition-duration: 0.01ms;
	}
}

}

/* --- styles/buttons.css --- */
/*
 * Przyciski — legacy `.kfb-story-btn` (CTA widget) + alias do DS `.btn`.
 */

@layer components {

.kfb-story-btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: var(--radius-pill, 99px);
	font-family: var(--font-sans);
	font-size: var(--fs-body, 16px);
	font-weight: var(--fw-medium, 500);
	line-height: var(--lh-body, 26px);
	text-decoration: none;
	box-sizing: border-box;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition:
		background var(--ease-ui, 0.15s ease),
		color var(--ease-ui, 0.15s ease),
		border-color var(--ease-ui, 0.15s ease);
}

.kfb-story-btn:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.kfb-story-btn--primary,
.btn--primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
}

.kfb-story-btn--primary:hover,
.btn--primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--paper);
}

.kfb-story-btn--outline,
.btn--outline {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.kfb-story-btn--outline:hover,
.btn--outline:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.kfb-story-btn__icon,
.btn__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.kfb-story-btn__svg,
.btn__svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Pill buttons — mockup .btn-pill (primary) / .btn-pill-secondary (outline) */
.btn-pill,
.btn-pill-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--radius-pill, 99px);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-body, 16px);
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background var(--ease-ui, 0.2s ease),
		border-color var(--ease-ui, 0.2s ease),
		color var(--ease-ui, 0.2s ease);
}

.btn-pill:focus-visible,
.btn-pill-secondary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.btn-pill svg,
.btn-pill-secondary svg,
.btn-pill .btn__svg,
.btn-pill-secondary .btn__svg {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform 0.2s ease;
}

.btn-pill:hover svg,
.btn-pill-secondary:hover svg {
	transform: translateX(4px);
}

.btn-pill {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper, #fff);
}

.btn-pill:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--paper, #fff);
}

.btn-pill-secondary {
	background: transparent;
	border-color: rgb(5 5 5 / 0.25);
	color: var(--ink);
	padding: 11px 24px;
}

.btn-pill-secondary:hover {
	background: transparent;
	border-color: var(--accent);
	color: var(--accent);
}

}

/* --- styles/highlight.css --- */
/**
 * Highlight — akcent w nagłówkach (widget CTA, bloki).
 * Pełna definicja także w components.css.
 */

@layer components {

.kfb-heading-highlight {
	color: var(--accent);
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-style: inherit;
}

.kfb-heading-highlight--serif {
	font-family: var(--font-display);
}

}

/* --- styles/footer.css --- */
/*
 * Stopka — mockup .kfb-footer + widgety CMS (kfb-s).
 * Treść: Wygląd → Widgety → Footer Column * [PL/EN]: blok nagłówka + akapity.
 */

@layer components {

.site-footer.footer.kfb-footer {
	--facc: var(--accent, #f7612b);
	--fhot: #ffb070;
	--reveal-r: 220px;

	position: relative;
	max-width: none;
	margin: var(--sec-gap, 120px) var(--page-gutter, 12px) var(--page-gutter, 12px);
	width: auto;
	height: 720px;
	background-color: var(--fbg, #0a0a0a);
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	contain: layout paint style;
	color: var(--fink, #f4f4f4);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	padding: 0;
}

/* ---- Hallmark layers ---- */

.kfb-footer .footer-hm-layers,
.kfb-footer .hm-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.kfb-footer .hm-layer svg {
	position: absolute;
	right: -6%;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(620px, 47%, 1300px);
	height: auto;
	aspect-ratio: 733 / 833;
	overflow: visible;
}

.kfb-footer .hm-baseline path {
	fill: none;
	stroke: rgb(247 97 43 / 0.1);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.kfb-footer .hm-reveal {
	opacity: 0;
	-webkit-mask-image: radial-gradient(
		circle at var(--mx, -400px) var(--my, -400px),
		#000 0,
		#000 calc(var(--reveal-r) * 0.45),
		rgb(0 0 0 / 0.7) calc(var(--reveal-r) * 0.7),
		rgb(0 0 0 / 0.25) calc(var(--reveal-r) * 0.92),
		rgb(0 0 0 / 0) var(--reveal-r)
	);
	mask-image: radial-gradient(
		circle at var(--mx, -400px) var(--my, -400px),
		#000 0,
		#000 calc(var(--reveal-r) * 0.45),
		rgb(0 0 0 / 0.7) calc(var(--reveal-r) * 0.7),
		rgb(0 0 0 / 0.25) calc(var(--reveal-r) * 0.92),
		rgb(0 0 0 / 0) var(--reveal-r)
	);
	filter:
		drop-shadow(0 0 6px var(--fhot))
		drop-shadow(0 0 22px var(--facc));
	will-change: transform, opacity;
	transform: translateZ(0);
}

.kfb-footer .hm-reveal path {
	fill: none;
	stroke: var(--facc);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.kfb-footer .halo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle at var(--mx, -400px) var(--my, -400px),
		rgb(255 130 60 / 0.35) 0,
		rgb(247 97 43 / 0.18) calc(var(--reveal-r) * 0.45),
		rgb(247 97 43 / 0.05) calc(var(--reveal-r) * 0.85),
		rgb(0 0 0 / 0) calc(var(--reveal-r) * 1.15)
	);
	mix-blend-mode: screen;
	transition: opacity 0.25s ease;
	z-index: 1;
	will-change: transform, opacity;
	transform: translateZ(0);
}

/* ---- Content layout (mockup .content / .cols / .bottom) ---- */

.kfb-footer .content {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: var(--content-max, 1488px);
	margin: 0 auto;
	padding: clamp(28px, 3.6%, 56px) clamp(28px, 3.6%, 68px);
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 24px;
	box-sizing: border-box;
}

.kfb-footer .cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 150px));
	gap: 56px;
	align-content: start;
	max-width: 60%;
	min-width: 0;
}

.kfb-footer .col {
	min-width: 0;
	width: 100%;
}

.kfb-footer .footer-column .footer-column-widget {
	width: 100%;
	min-width: 0;
}

.kfb-footer .footer-column .footer-column-widget + .footer-column-widget {
	margin-top: 8px;
}

.kfb-footer .col h4,
.kfb-footer .f-col-title,
.kfb-footer .footer-column-heading {
	margin: 0 0 18px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--fink, #f4f4f4);
	border: none;
	padding: 0;
	background: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Kolumna: blok nagłówka + akapity z linkami (jak mockup .col ul) */
.kfb-footer .footer-column .footer-column-widget,
.kfb-footer .footer-column .widget_block {
	margin: 0;
}

.kfb-footer .footer-column .wp-block-paragraph {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fmuted);
	margin: 0;
}

.kfb-footer .footer-column .wp-block-paragraph + .wp-block-paragraph,
.kfb-footer .footer-column .footer-column-heading + .wp-block-paragraph,
.kfb-footer .footer-column h4.footer-column-heading + .wp-block-paragraph,
.kfb-footer .footer-column h4.footer-column-heading + p {
	margin-top: 8px;
}

.kfb-footer .footer-column .wp-block-paragraph a,
.kfb-footer .footer-column p a {
	display: inline;
	font-family: var(--font-sans);
	color: var(--fmuted);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5;
	transition: color 0.15s ease;
	white-space: normal;
}

.kfb-footer .footer-column .wp-block-paragraph a:hover,
.kfb-footer .footer-column p a:hover {
	color: var(--fink, #f4f4f4);
}

.kfb-footer .footer-column p {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fmuted);
	margin: 0;
}

.kfb-footer .footer-column p + p {
	margin-top: 8px;
}

.kfb-footer .bottom,
.kfb-footer .footer-bottom {
	display: grid;
	gap: 16px;
}

/* ---- Social ---- */

.kfb-footer .social,
.kfb-footer .footer-social.footer-socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.kfb-footer .footer-social-widget {
	display: contents;
}

.kfb-footer .footer-social-icons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.kfb-footer .social a,
.kfb-footer .footer-socials a {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgb(244 244 244 / 0.25);
	display: grid;
	place-items: center;
	color: var(--fink, #f4f4f4);
	transition:
		border-color 0.15s ease,
		color 0.15s ease;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
	text-decoration: none;
}

.kfb-footer .social a:hover,
.kfb-footer .footer-socials a:hover {
	border-color: var(--facc);
	color: var(--facc);
}

.kfb-footer .social svg,
.kfb-footer .footer-social-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* ---- Legal + copyright ---- */

.kfb-footer .legal,
.kfb-footer .footer-legal {
	display: grid;
	gap: 10px;
	color: var(--fmuted);
	font-size: 12px;
	font-family: var(--font-sans);
}

.kfb-footer .legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.kfb-footer .legal-row .footer-legal-widget {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.kfb-footer .legal-row .footer-legal-widget + .footer-legal-widget::before {
	content: '|';
	color: rgb(244 244 244 / 0.25);
	margin-right: 12px;
}

.kfb-footer .legal-row .wp-block-paragraph {
	display: inline;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: inherit;
}

.kfb-footer .legal-row .wp-block-paragraph + .wp-block-paragraph::before {
	content: '|';
	color: rgb(244 244 244 / 0.25);
	margin-right: 12px;
}

.kfb-footer .legal-row a,
.kfb-footer .footer-legal a,
.kfb-footer .footer-legal-widget a {
	color: var(--fink, #f4f4f4);
	text-decoration: none;
	font-size: 12px;
	padding: 0;
}

.kfb-footer .legal-row a:hover,
.kfb-footer .footer-legal a:hover,
.kfb-footer .footer-legal-widget a:hover {
	color: var(--facc);
}

.kfb-footer .legal-row .sep,
.kfb-footer .footer-sep {
	color: rgb(244 244 244 / 0.25);
}

.kfb-footer .copyright,
.kfb-footer .footer-copy {
	color: rgb(244 244 244 / 0.45);
	font-size: 12px;
	font-family: var(--font-sans);
	margin: 0;
}

.kfb-footer .copyright p,
.kfb-footer .footer-copy p {
	margin: 0;
}

/* Touch / reduced motion */

@media (hover: none) {
	.kfb-footer .hm-reveal {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.6;
	}

	.kfb-footer .halo {
		opacity: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kfb-footer .hm-reveal {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.55;
	}

	.kfb-footer .halo {
		opacity: 0.85 !important;
	}
}

/* ---- Responsive ---- */

@media (max-width: 1040px) {
	.kfb-footer.footer {
		height: auto;
		min-height: 560px;
	}

	.kfb-footer .cols {
		max-width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.kfb-footer.footer {
		margin: 0 var(--page-gutter, 8px) var(--page-gutter, 8px);
		min-height: min(560px, calc(100dvh - 96px));
	}

	.kfb-footer .content {
		padding: 24px;
	}

	.kfb-footer .cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.kfb-footer .col h4,
	.kfb-footer .f-col-title,
	.kfb-footer .footer-column-heading {
		margin-bottom: 16px;
	}
}

@media (max-width: 480px) {
	.kfb-footer .cols {
		grid-template-columns: 1fr;
	}
}

}