/*
Theme Name: Geoflux
Theme URI: https://geoflux.be
Author: Wizarts
Author URI: https://wizarts.be
Description: Geoflux client child theme — editorial, technical-business signature for a B2B engineering studio (HVAC, sanitair, geothermie). Overrides Wizarts Base token values (warm palette, Mozaic via Adobe Fonts) and adds client-unique patterns. Basic tier.
Template: wizarts-base
Version: 0.2.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: geoflux
Tags: block-theme, full-site-editing, editorial
*/

/* ============================================================
   Geoflux — client component styling.
   Tokens live in theme.json; this file styles the client-unique
   compositions (ambient flux, hero, section cards, footer) ported
   from the Netlify prototype (source/styles/*). Maps the source's
   --color-* / --r-* / --ease-out tokens onto theme.json presets.

   Token map:
     --color-cream  → --wp--preset--color--base
     --color-deep   → --wp--preset--color--contrast
     --color-orange → --wp--preset--color--accent
     --color-lime   → --wp--preset--color--secondary
     --text-muted   → --wp--preset--color--muted
     --r-card/pill  → --wp--custom--radius--card / --pill
     --ease-out     → --wp--custom--ease
   ============================================================ */

/* Italic copy uses the dedicated Mozaic IT family (ships as a normal style,
   so reset font-style) — mirrors the onepager. */
em, i, .is-italic {
	font-family: var(--wp--preset--font-family--italic);
	font-style: normal;
}

/* ── Ambient flux field (CSS fallback for the deferred WebGL) ─── */
/* Fixed, behind everything; dark sections are opaque so it only
   warms the light (cream) sections — exactly like the source. */
body::before {
	content: "";
	position: fixed;
	inset: -16vh -10vw;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 14% 76%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent) 44%, transparent 74%),
		radial-gradient(32% 30% at 84% 24%, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 0%, transparent 70%),
		radial-gradient(28% 26% at 52% 56%, color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent) 0%, transparent 68%);
	opacity: 0.9;
	animation: geoflux-field 30s var(--wp--custom--ease, ease-in-out) infinite alternate;
}
.wp-site-blocks { position: relative; z-index: 1; }
@keyframes geoflux-field {
	0%   { transform: translate3d(-4%, 2%, 0) scale(0.96); opacity: 0.7; }
	50%  { transform: translate3d(5%, -3%, 0) scale(1.06); opacity: 1; }
	100% { transform: translate3d(-2%, 3%, 0) scale(1.0); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
	body::before { animation: none; }
}

/* ── Scroll reveal (driven by wizarts/reveal module) ─────────── */
.wizarts-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--wp--custom--ease, ease),
		transform 0.7s var(--wp--custom--ease, ease);
	will-change: opacity, transform;
}
.wizarts-reveal.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.wizarts-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Section label ───────────────────────────────────────────── */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 24px;
}
.section-label::before {
	content: "";
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
}


/* ── Header (fixed; transparent over hero, solid on scroll) ───── */
.geoflux-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background 320ms var(--wp--custom--ease, ease), box-shadow 320ms;
}
/* The fixed header is out of flow, so main starts flush at the top, and the
   footer sits flush against the last section (removes root block-gaps). */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }

.geoflux-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	backdrop-filter: blur(20px) saturate(130%);
	-webkit-backdrop-filter: blur(20px) saturate(130%);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.geoflux-header__wordmark a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}
.geoflux-header__inner {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}
/* Site logo (the Geoflux wordmark) in the header. */
.geoflux-header__brand .custom-logo-link { display: inline-flex; line-height: 0; }
.geoflux-header__brand .custom-logo { height: clamp(34px, 4.2vw, 44px); width: auto; display: block; }
.geoflux-header__nav {
	gap: clamp(16px, 2.5vw, 40px);
}

/* ── Hero (CSS flux/blob background; WebGL deferred) ──────────── */
.geoflux-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
}
.geoflux-hero::before,
.geoflux-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.7;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
	mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
}
.geoflux-hero::before {
	width: 56vw;
	height: 56vw;
	top: -18vw;
	left: -16vw;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 58%, transparent) 0%, transparent 68%);
	animation: geoflux-drift-a 22s var(--wp--custom--ease, ease-in-out) infinite alternate;
}
.geoflux-hero::after {
	width: 42vw;
	height: 42vw;
	bottom: -12vw;
	right: -10vw;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent) 0%, transparent 68%);
	animation: geoflux-drift-b 18s var(--wp--custom--ease, ease-in-out) infinite alternate;
}
@keyframes geoflux-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(8vw, 5vw, 0) scale(1.12); }
}
@keyframes geoflux-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.05); }
	to   { transform: translate3d(-6vw, -3vw, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.geoflux-hero::before,
	.geoflux-hero::after { animation: none; }
}
/* Hero is a flex column (vertical centering), which bypasses WP's constrained
   layout — so size the content explicitly to the 1360 container, centered. */
.geoflux-hero__content {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}
.geoflux-hero__content > * { animation: geoflux-fade-up 0.9s var(--wp--custom--ease, ease) both; }
.geoflux-hero__content > :nth-child(2) { animation-delay: 0.1s; }
.geoflux-hero__content > :nth-child(3) { animation-delay: 0.2s; }
.geoflux-hero__content > :nth-child(4) { animation-delay: 0.3s; }
@keyframes geoflux-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.geoflux-hero__content > * { animation: none; }
}
.geoflux-hero__eyebrow { margin-bottom: 24px; color: var(--wp--preset--color--muted); }
.geoflux-hero__eyebrow.section-label { color: var(--wp--preset--color--muted); }
.geoflux-hero__title { max-width: 920px; margin: 0; }
.geoflux-hero__sub {
	max-width: 500px;
	margin-top: 1.5rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
}
.geoflux-hero__scroll {
	position: absolute;
	/* Align to the left edge of the centred 1360 content, not the gutter. */
	left: max(var(--wp--preset--spacing--60), calc((100% - 1360px) / 2));
	bottom: var(--wp--preset--spacing--50);
	margin: 0;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.geoflux-hero__scroll::before {
	content: "";
	display: block;
	width: 1px;
	height: 40px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--contrast);
	opacity: 0.4;
	transform-origin: top;
	animation: geoflux-scroll-line 2.4s var(--wp--custom--ease, ease-in-out) infinite;
}
@keyframes geoflux-scroll-line {
	0%, 100% { transform: scaleY(0.3); opacity: 0.2; }
	50%      { transform: scaleY(1);   opacity: 0.5; }
}

/* ── About / audience grid ───────────────────────────────────── */
.wizarts-audience-grid {
	display: grid;
	grid-template-columns: repeat(var(--wizarts-audience-columns, 3), 1fr);
	gap: 48px;
	padding-top: 48px;
	margin-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
/* Numbering (01/02/03) is the block's own counter (wizarts-audience) — the
   theme must NOT redefine counter-increment here or it resets to 00. */
.wizarts-audience-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.wizarts-audience-card p {
	font-size: 15px;
	line-height: 1.68;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ── Expertise cards ─────────────────────────────────────────── */
.s-expertise__grid { gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.wizarts-expertise-tile {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-top: 3px solid transparent;
	border-radius: var(--wp--custom--radius--card, 16px);
	padding: 40px 36px 36px;
	overflow: hidden;
	isolation: isolate;
	transition: border-top-color 280ms,
		transform 300ms var(--wp--custom--ease, ease),
		box-shadow 300ms var(--wp--custom--ease, ease);
}
.wizarts-expertise-tile::after {
	content: "";
	position: absolute;
	inset: auto -34px -44px auto;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent) 0%, transparent 72%);
	filter: blur(18px);
	z-index: -1;
	pointer-events: none;
}
.wizarts-expertise-tile:hover {
	border-top-color: var(--wp--preset--color--accent);
	transform: translateY(-8px);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.wizarts-expertise-tile__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	margin: 0 0 32px;
}
.wizarts-expertise-tile h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
}
.wizarts-expertise-tile p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	margin: 0 0 36px;
	flex: 1;
}
.wizarts-expertise-tile__link { margin: auto 0 0; }

/* ── Stats (dark) ────────────────────────────────────────────── */
.s-stats h2 {
	font-weight: 300;
	font-size: clamp(26px, 3.5vw, 44px);
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	max-width: 600px;
}
.wizarts-stats-row {
	display: grid;
	grid-template-columns: repeat(var(--wizarts-stat-columns, 4), 1fr);
	gap: 40px;
	padding-top: 64px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
}
.wizarts-stat-item { text-align: center; }
.wizarts-stat-item .stat-number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(52px, 6.5vw, 84px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 14px;
}
.wizarts-stat-item .stat-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 42%, transparent);
	margin: 0;
}

/* ── Project cards (two-part: red gradient media + solid body) ── */
.s-projects__grid { gap: 20px; }
.wizarts-project-card {
	min-height: 380px;
	background: var(--wp--preset--color--contrast); /* solid body */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
}
.wizarts-project-card:hover {
	box-shadow: 0 22px 60px color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
/* Media zone — red-leaning gradient (the "image"). */
.wizarts-project-card__media {
	flex: 1 1 auto;
	min-height: 210px;
	background:
		linear-gradient(150deg,
			color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--contrast) 78%, var(--wp--preset--color--accent)) 48%,
			var(--wp--preset--color--contrast) 100%);
}
.wizarts-project-card__overline {
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill, 999px);
}
/* Body — solid. */
.wizarts-project-card__body { background: var(--wp--preset--color--contrast); }
.wizarts-project-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--base);
}
.wizarts-project-card__meta {
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 46%, transparent);
}
.wizarts-project-card__kpi {
	font-weight: 500;
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
}
.wizarts-project-card__kpi:first-child {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	color: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

/* ── Phases / process (outcome cards) ────────────────────────── */
.geoflux-process__grid { gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.geoflux-process__card {
	position: relative;
	height: 100%;
	padding: 30px 28px 28px;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) 100%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	box-shadow: 0 12px 34px color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
	isolation: isolate;
	transition: transform 320ms var(--wp--custom--ease, ease),
		box-shadow 320ms var(--wp--custom--ease, ease), border-color 240ms;
}
.geoflux-process__card::after {
	content: "";
	position: absolute;
	inset: auto -38px -42px auto;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 0%, transparent 72%);
	filter: blur(18px);
	z-index: -1;
	pointer-events: none;
}
.geoflux-process__card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
/* Higher specificity than .geoflux-process__card p so colour/size/margin win. */
.geoflux-process__card .geoflux-process__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 26px;
}
.geoflux-process__card .geoflux-process__kicker::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
}
.geoflux-process__card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(22px, 2vw, 31px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 13ch;
	margin: 0 0 14px;
}
.geoflux-process__card p {
	font-size: 15px;
	line-height: 1.68;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.geoflux-process__foot {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ── CTA (dark) — content left-aligned within the 1360 container ─ */
.s-cta { position: relative; overflow: hidden; isolation: isolate; }
.s-cta::before {
	content: "";
	position: absolute;
	inset: -24% -12%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(40% 34% at 26% 34%, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent) 0%, transparent 72%),
		radial-gradient(34% 30% at 74% 64%, color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent) 0%, transparent 72%);
	filter: blur(60px);
	opacity: 0.75;
	animation: geoflux-cta-veil 26s var(--wp--custom--ease, ease-in-out) infinite alternate;
}
@keyframes geoflux-cta-veil {
	from { transform: translate3d(-3%, 2%, 0) scale(1); }
	to   { transform: translate3d(4%, -3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .s-cta::before { animation: none; } }
.s-cta > * { position: relative; z-index: 1; }
.s-cta h2 { max-width: 820px; margin-left: 0; margin-right: auto; }
.s-cta p {
	max-width: 460px;
	margin-left: 0;
	margin-right: auto;
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.wp-block-button__link {
	transition: background 240ms var(--wp--custom--ease, ease),
		color 240ms var(--wp--custom--ease, ease),
		border-color 240ms var(--wp--custom--ease, ease),
		transform 240ms var(--wp--custom--ease, ease),
		box-shadow 240ms var(--wp--custom--ease, ease);
}
/* Primary: stays orange, lifts + casts an orange shadow (no colour flip). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
/* Secondary (outline) on light: dark border, lifts on hover. */
.is-style-outline > .wp-block-button__link {
	border-width: 2px;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}
.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}
/* Secondary on dark sections (CTA): soft semi-transparent border, lightens. */
.s-cta .is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 32%, transparent);
	color: var(--wp--preset--color--base);
}
.s-cta .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
}

/* Fixed header offset for generic pages (homepage hero clears itself). */
.geoflux-page-main { padding-top: clamp(72px, 9vh, 104px); }

/* ── Footer ──────────────────────────────────────────────────── */
.geoflux-footer {
	position: relative;
	overflow: hidden;
	border-top: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); /* red hairline on top */
	isolation: isolate;
}
/* Red blob atmosphere (mirrors the CTA). */
.geoflux-footer::before,
.geoflux-footer::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.geoflux-footer::before {
	width: 700px;
	height: 700px;
	top: -300px;
	left: -180px;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) 0%, transparent 68%);
	filter: blur(90px);
}
.geoflux-footer::after {
	width: 500px;
	height: 500px;
	bottom: -160px;
	right: -100px;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 0%, transparent 68%);
	filter: blur(80px);
}
/* Wordmark: huge, very faint, anchored bottom-left, behind the content. */
.geoflux-footer__wordmark {
	position: absolute;
	bottom: -16px;
	left: -8px;
	margin: 0;
	font-weight: 700;
	font-size: clamp(88px, 14vw, 180px);
	line-height: 1;
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: color-mix(in srgb, var(--wp--preset--color--base) 5%, transparent);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
/* Content above the wordmark/blobs. */
.geoflux-footer__grid,
.geoflux-footer__bottom { position: relative; z-index: 1; }

/* Column titles: small red caps. */
.geoflux-footer h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 62%, transparent);
	margin: 0 0 20px;
}
/* Links: small, light, no underline. */
.geoflux-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.geoflux-footer a { text-decoration: none; }
.geoflux-footer__links a {
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--base) 48%, transparent);
	transition: color 200ms;
}
.geoflux-footer__links a:hover { color: var(--wp--preset--color--accent); }
/* Brand tagline: italic, light. */
.geoflux-footer__grid > .wp-block-column:first-child p {
	font-family: var(--wp--preset--font-family--italic);
	font-style: normal;
	font-size: 14px;
	line-height: 1.78;
	color: color-mix(in srgb, var(--wp--preset--color--base) 50%, transparent);
	max-width: 270px;
}
/* Legal row: under a line, lighter. */
.geoflux-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent) !important;
	padding-top: 22px;
}
.geoflux-footer__bottom p,
.geoflux-footer__bottom a {
	font-size: 12px;
	color: color-mix(in srgb, var(--wp--preset--color--base) 32%, transparent);
}
.geoflux-footer__bottom a:hover { color: color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent); }

/* ============================================================
   Track B — secondary pages (over-ons, expertise, projecten,
   jobs, contact). Layout-only, palette tokens, reuses blocks.
   ============================================================ */

/* Page hero (label + h1 + sub) */
.geoflux-page-hero__title { max-width: 16ch; margin: 0; }
.geoflux-page-hero__sub {
	max-width: 52ch;
	margin-top: 1.25rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* Over ons — origin */
.geoflux-origin__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 7vw, 88px);
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px;
}

/* Over ons — team (dark) */
.geoflux-avatar {
	aspect-ratio: 1;
	border-radius: 16px;
	margin-bottom: 1rem;
	background:
		linear-gradient(150deg,
			color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--base) 6%, transparent) 70%);
}
.geoflux-team__role { color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent); margin: 0; }

/* Over ons — values */
.geoflux-value-card {
	height: 100%;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.geoflux-value-card p { color: var(--wp--preset--color--muted); }

/* Expertise — alternating media/text blocks */
.geoflux-media {
	min-height: 320px;
	height: 100%;
	border-radius: var(--wp--custom--radius--card, 16px);
	background:
		linear-gradient(150deg,
			color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--contrast) 80%, var(--wp--preset--color--accent)) 60%,
			var(--wp--preset--color--contrast) 100%);
}
.geoflux-domain-num {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 14px;
}
/* Promises reuse audience-card on a dark band → lighten the body text. */
.s-promises .wizarts-audience-card p { color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent); }
.s-promises .wizarts-audience-grid { border-top-color: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent); }

/* Jobs */
.geoflux-job {
	padding: clamp(24px, 3vw, 40px) 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.geoflux-job__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin: 0 0 8px;
}
.geoflux-job__domain {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.geoflux-job__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.geoflux-jobs__open {
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

/* Contact */
.geoflux-contact__aside { height: 100%; }
.geoflux-contact__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 1.25rem 0 0.25rem;
}
.geoflux-contact__btw {
	margin-top: var(--wp--preset--spacing--50);
	color: color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
}
.geoflux-formslot {
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	border-radius: var(--wp--custom--radius--card, 16px);
	padding: clamp(28px, 4vw, 48px);
	background: var(--wp--preset--color--surface);
}
.geoflux-formslot__note { margin: 0; color: var(--wp--preset--color--muted); }

@media (max-width: 860px) {
	.geoflux-media { min-height: 220px; }
}

/* ============================================================
   One-pager — anchor scroll, contact call-CTA, dark value band.
   ============================================================ */

/* Smooth in-page nav; offset anchors below the fixed header. */
html { scroll-behavior: smooth; }
.wp-site-blocks [id] { scroll-margin-top: clamp(76px, 9vh, 100px); }

/* Contact section — call-to-action block (transparent, bordered). */
.geoflux-call {
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	border-radius: var(--wp--custom--radius--card, 16px);
	padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 22px);
	gap: 16px;
}
.geoflux-call__label { margin: 0 0 2px; font-size: 13px; color: var(--wp--preset--color--muted); }
.geoflux-call__phone {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.geoflux-call__phone a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.geoflux-call__phone a:hover { color: var(--wp--preset--color--accent); }
.geoflux-contact__line { color: var(--wp--preset--color--muted); line-height: 1.7; }
.geoflux-contact__line a { color: var(--wp--preset--color--accent); text-decoration: none; }

/* Value cards on the dark "waarden" band. */
.s-values .geoflux-value-card { border-top-color: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent); }
.s-values .geoflux-value-card p { color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent); }

/* ── Responsive (source breakpoints: 1100 / 860 / 560) ───────── */
@media (max-width: 1100px) {
	.wizarts-stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
}
@media (max-width: 860px) {
	.wizarts-audience-grid { grid-template-columns: 1fr; gap: 32px; }
	.geoflux-process__card h3 { max-width: none; }
}
@media (max-width: 560px) {
	.wizarts-stats-row { grid-template-columns: 1fr 1fr; }
	.geoflux-process__card { padding: 26px 22px 22px; border-radius: 20px; }
}