/*
Theme Name: WP site
Theme URI:
Author:
Author URI:
Description: Custom WordPress theme for WP site, built with AppBuilder
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: wp-site
*/

/* ==========================================================================
   Design tokens — colours, typography, spacing, radii, shadows, motion.

   VERBATIM MIRROR of assets/css/design-tokens.css, so the theme stylesheet on
   its own defines the complete set of custom properties. That file is the
   single source of truth (see DESIGN.md): edit it there and copy the block
   below unchanged. Never hard-code a value in the rules that follow.
   ========================================================================== */

:root {
    /* Colors: primary (European ink-blue) */
    --color-primary-50: #eff5fb;
    --color-primary-100: #dce8f5;
    --color-primary-200: #b9d1ea;
    --color-primary-300: #8fb2d9;
    --color-primary-400: #5f8cc4;
    --color-primary-500: #3d6fae;
    --color-primary-600: #2f5a92;
    --color-primary-700: #264975;
    --color-primary-800: #1e3a5f;
    --color-primary-900: #162b47;

    /* Colors: accent (analogous teal) */
    --color-accent-50: #f0fdfa;
    --color-accent-100: #ccfbf1;
    --color-accent-200: #99f6e4;
    --color-accent-300: #5eead4;
    --color-accent-400: #2dd4bf;
    --color-accent-500: #14b8a6;
    --color-accent-600: #0d9488;
    --color-accent-700: #0f766e;
    --color-accent-800: #115e59;
    --color-accent-900: #134e4a;

    /* Colors: cool neutrals (blue primary) */
    --color-neutral-50: #f8f9fa;
    --color-neutral-100: #f1f3f5;
    --color-neutral-200: #e3e7ea;
    --color-neutral-300: #cfd5da;
    --color-neutral-400: #9aa3ab;
    --color-neutral-500: #6b747d;
    --color-neutral-600: #4f5861;
    --color-neutral-700: #3b434b;
    --color-neutral-800: #272d33;
    --color-neutral-900: #181c20;

    /* Semantic */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Surface roles */
    --color-bg: var(--color-neutral-50);
    --color-surface: #fdfdfd;
    --color-surface-dark: var(--color-primary-900);
    --color-text: var(--color-neutral-900);
    --color-text-muted: var(--color-neutral-600);
    --color-border: var(--color-neutral-200);
    --color-link: var(--color-primary-600);
    --color-link-hover: var(--color-primary-800);
    --hero-overlay: linear-gradient(180deg, rgba(22, 43, 71, 0.35) 0%, rgba(22, 43, 71, 0.70) 100%);

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.563rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;
    --text-4xl: 3.052rem;
    --letter-tight: -0.03em;
    --letter-normal: 0;
    --letter-wide: 0.05em;
    --leading-tight: 1.15;
    --leading-normal: 1.65;
    --measure: 65ch;

    /* Spacing (8px grid) */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-section: clamp(4rem, 8vw, 7rem);

    /* Borders */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows (diffuse) */
    --shadow-sm: 0 1px 2px rgba(24, 28, 32, 0.04);
    --shadow-md: 0 4px 12px rgba(24, 28, 32, 0.06);
    --shadow-lg: 0 8px 24px rgba(24, 28, 32, 0.08);
    --shadow-xl: 0 16px 48px rgba(24, 28, 32, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(24, 28, 32, 0.06);
    --shadow-glow: 0 0 20px rgba(61, 111, 174, 0.15);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --stagger-step: 100ms;

    /* Layout */
    --container-max: 1280px;
    /* Mobile-first page gutter, widened at the 640px breakpoint below. */
    --container-padding: 1.125rem;

    /*
     * Breakpoints. CSS cannot interpolate a custom property into a media
     * query, so every @media repeats the number literally — these record the
     * scale in one place and are usable in calc().
     */
    --bp-xs: 30rem;
    --bp-sm: 40rem;
    --bp-md: 48rem;
    --bp-lg: 64rem;
    --bp-xl: 80rem;

    /* Minimum size of anything a finger has to hit (WCAG 2.5.5). */
    --tap-target: 44px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --stagger-step: 0ms;
    }
}

@media (min-width: 640px) {
    :root {
        --container-padding: 1.5rem;
    }
}

/* Theme additions — roles the token file does not define. */
:root {
	--color-text-invert: var(--color-neutral-50);

	/*
	 * Fluid type for the page-level headings, mobile-first: they grow with the
	 * viewport instead of stepping at a breakpoint, so a 320px phone never
	 * receives a desktop-sized headline.
	 */
	--text-fluid-h1: clamp(1.75rem, 1.35rem + 2.6vw, var(--text-3xl));
	--text-fluid-h2: clamp(1.5rem, 1.25rem + 1.8vw, var(--text-2xl));
	--text-fluid-h3: clamp(1.25rem, 1.1rem + 1vw, var(--text-xl));
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	overflow-x: hidden;
	/* A long URL or address can never push a 320px viewport sideways. */
	overflow-wrap: break-word;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tight);
}

/*
 * Headings scale fluidly with the viewport instead of stepping at a
 * breakpoint, so a 320px phone never gets a desktop-sized headline. Section
 * and hero components further down the file set their own clamp() where they
 * need a different ceiling.
 */
h1 {
	font-size: var(--text-fluid-h1);
}

h2 {
	font-size: var(--text-fluid-h2);
}

h3 {
	font-size: var(--text-fluid-h3);
}

p {
	margin: 0 0 var(--space-4);
	max-width: var(--measure);
}

/*
 * Anything a finger has to hit is at least 44x44px (WCAG 2.5.5). inline-flex
 * rather than inline, because min-height has no effect on an inline box.
 */
.btn,
.site-footer__list a,
.site-footer__cookie-settings {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease-default);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-accent-600);
	outline-offset: 2px;
}

ul {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
}

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

.section {
	padding-block: var(--space-section);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	color: var(--color-link);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
}

.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

.btn--primary {
	background: var(--color-accent-700);
	border-color: var(--color-accent-700);
	color: var(--color-neutral-50);
	box-shadow: var(--shadow-md);
}

.btn--primary:hover,
.btn--primary:focus {
	background: var(--color-accent-800);
	border-color: var(--color-accent-800);
	color: var(--color-neutral-50);
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
}

.btn--secondary {
	background: transparent;
	border-color: var(--color-neutral-50);
	color: var(--color-neutral-50);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background: var(--color-neutral-50);
	color: var(--color-primary-900);
	transform: translateY(-1px);
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 10;
	background: var(--color-primary-900);
	color: var(--color-text-invert);
	border-bottom: 1px solid rgba(248, 249, 250, 0.08);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-invert);
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-lg);
	letter-spacing: var(--letter-tight);
}

.site-brand:hover,
.site-brand:focus {
	color: var(--color-accent-300);
}

.site-brand__mark {
	display: inline-flex;
	color: var(--color-primary-700);
}

/*
 * The hamburger button. Visible below the 768px breakpoint only; at and above
 * it the full horizontal menu shows and this is removed from the page (and
 * from the accessibility tree) entirely. assets/js/navigation.js keeps its
 * aria-expanded and aria-label in sync.
 */
.site-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-target);
	min-width: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	background: transparent;
	border: 1px solid rgba(248, 249, 250, 0.3);
	border-radius: var(--radius-md);
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

/*
 * The button only appears once the script that drives it has run, so with
 * JavaScript off a visitor is never shown a control that cannot do anything.
 */
.site-header--js .site-nav-toggle {
	display: inline-flex;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus {
	background: rgba(248, 249, 250, 0.1);
	border-color: var(--color-accent-400);
}

.site-nav-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
}

.site-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: var(--radius-full);
}

/*
 * The collapsed state is keyed on .site-header--js, which the navigation
 * script adds. With JavaScript unavailable the menu stays visible — stacked on
 * phones — instead of being hidden behind a button that cannot open it.
 */
.site-header--js .site-nav {
	display: none;
	flex-basis: 100%;
}

.site-header--js .site-nav--open {
	display: block;
}

.site-nav ul {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	list-style: none;
}

.site-nav a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: var(--space-2) 0;
	color: var(--color-neutral-200);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--color-neutral-50);
	border-bottom-color: var(--color-accent-400);
}

.site-nav .sub-menu {
	gap: var(--space-2);
	padding-left: var(--space-4);
}

/* Mobile: the drawer sits on its own row under the brand, with a hairline. */
.site-header--js .site-nav--open {
	margin-top: var(--space-2);
	border-top: 1px solid rgba(248, 249, 250, 0.15);
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}

/*
 * From 768px up: the hamburger is gone, the horizontal menu is always shown
 * whether or not the drawer was left open, and the list is a row again.
 */
@media (min-width: 768px) {
	.site-nav-toggle,
	.site-header--js .site-nav-toggle {
		display: none;
	}

	.site-header--js .site-nav,
	.site-header--js .site-nav--open {
		display: block;
		flex-basis: auto;
		margin-top: 0;
		border-top: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.site-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-6);
	}

	.site-nav a {
		display: inline-flex;
	}

	.site-nav .sub-menu {
		padding-left: 0;
	}
}

/* ==========================================================================
   Home hero
   ========================================================================== */

.home-hero {
	position: relative;
	isolation: isolate;
	background: var(--color-primary-900);
	color: var(--color-text-invert);
	overflow: hidden;
}

.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.home-hero__video,
.home-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hero-overlay), rgba(22, 43, 71, 0.55);
}

.home-hero__inner {
	padding-block: clamp(var(--space-16), 12vw, var(--space-24));
	max-width: var(--container-max);
}

.home-hero__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-300);
}

.home-hero__title {
	margin: 0 0 var(--space-5);
	max-width: 18ch;
	font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
	color: var(--color-neutral-50);
}

.home-hero__subtitle {
	max-width: 56ch;
	margin: 0 0 var(--space-8);
	font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
	color: var(--color-neutral-100);
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-10);
}

.home-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-8);
	margin: 0;
	padding: var(--space-5) 0 0;
	list-style: none;
	border-top: 1px solid rgba(248, 249, 250, 0.25);
	font-size: var(--text-sm);
	color: var(--color-neutral-200);
}

.home-hero__facts li {
	list-style: none;
}

@media (min-width: 768px) {
	.home-hero__title,
	.home-hero__subtitle,
	.home-hero__facts {
		max-width: 60%;
	}

	.home-hero__title {
		max-width: 16ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__video {
		display: none;
	}

	/* Only when the template confirmed the poster file is actually present. */
	.home-hero__media--has-poster {
		background-image: url("assets/videos/hero.jpg");
		background-size: cover;
		background-position: center;
	}
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.section__head {
	max-width: 62ch;
	margin-bottom: var(--space-12);
}

.section__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-primary-600);
}

.section__title {
	margin: 0 0 var(--space-4);
	font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
	color: var(--color-text);
}

.section__lead {
	margin: 0;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

/* ==========================================================================
   What we do — service cards
   ========================================================================== */

.home-what {
	background: var(--color-bg);
}

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.service-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.service-card:hover,
.service-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.service-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-primary-800);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

.service-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--space-6);
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary-50);
	color: var(--color-primary-700);
}

.service-card__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
}

.service-card__text {
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

.service-card__link {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-link);
	border-bottom: 2px solid var(--color-accent-400);
	padding-bottom: 2px;
}

.service-card__link:hover,
.service-card__link:focus {
	color: var(--color-link-hover);
	border-bottom-color: var(--color-accent-700);
}

.service-card__link-arrow {
	display: inline-block;
	margin-left: var(--space-2);
	transition: transform var(--duration-fast) var(--ease-default);
}

.service-card__link:hover .service-card__link-arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   Who we help — dark band, asymmetric 60/40 split with audience blocks
   ========================================================================== */

.home-audience {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
}

/*
 * Yoast SEO breadcrumbs sitting on a dark hero: the default link colour
 * (primary-600 on primary-900) is far below the contrast floor, so the inverted
 * variant lives here — several page heroes are dark and share it.
 */
.breadcrumbs--invert {
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-neutral-100);
}

.breadcrumbs--invert a {
	color: var(--color-accent-300);
	text-decoration: underline;
}

.breadcrumbs--invert a:hover,
.breadcrumbs--invert a:focus {
	color: var(--color-neutral-50);
}

.section__eyebrow--invert {
	color: var(--color-accent-300);
}

.section__title--invert {
	color: var(--color-neutral-50);
}

.section__lead--invert {
	color: var(--color-neutral-200);
}

.home-audience__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

.home-audience__head {
	margin-bottom: 0;
}

.home-audience__cta {
	margin-top: var(--space-6);
}

.home-audience__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-audience__list > li {
	list-style: none;
}

@media (min-width: 1024px) {
	.home-audience__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
		gap: var(--space-16);
	}
}

.audience-block {
	position: relative;
	padding: var(--space-6);
	padding-left: var(--space-8);
	background: rgba(248, 249, 250, 0.05);
	border: 1px solid rgba(248, 249, 250, 0.12);
	border-radius: var(--radius-lg);
	transition: background var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.audience-block::before {
	content: "";
	position: absolute;
	left: var(--space-4);
	top: var(--space-6);
	bottom: var(--space-6);
	width: 3px;
	border-radius: var(--radius-full);
	background: var(--color-accent-400);
}

.audience-block:hover,
.audience-block:focus-within {
	background: rgba(248, 249, 250, 0.09);
	transform: translateY(-2px);
}

.audience-block__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	color: var(--color-neutral-50);
}

.audience-block__text {
	margin: 0;
	color: var(--color-neutral-200);
	font-size: var(--text-base);
}

/* ==========================================================================
   Why we are good at it — four differentiators
   ========================================================================== */

.home-why {
	background: var(--color-bg);
}

.home-why__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-why__list > li {
	list-style: none;
}

@media (min-width: 640px) {
	.home-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.home-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-12);
	}
}

.reason-item {
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.reason-item:hover,
.reason-item:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.reason-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-accent-50);
	color: var(--color-accent-700);
}

.reason-item__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	color: var(--color-text);
}

.reason-item__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

/* ==========================================================================
   Generic page / post content
   ========================================================================== */

.site-main {
	display: block;
}

.content-area {
	padding-block: var(--space-section);
}

.entry-title {
	font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
}

.entry-content > * {
	max-width: var(--measure);
}

.entry-content h2 {
	margin-top: var(--space-10);
	font-size: var(--text-2xl);
}

.entry-content h3 {
	margin-top: var(--space-8);
	font-size: var(--text-xl);
}

.entry-content img,
.entry-content figure {
	max-width: 100%;
	border-radius: var(--radius-lg);
}

.post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-6);
	transition: transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.post-card:hover,
.post-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.post-card__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
}

.post-card__title a {
	text-decoration: none;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

/*
 * On a phone the footer keeps full 16px body text — small print is the one
 * place a visitor most often has to read an address or a phone number. The
 * smaller scale starts at the tablet breakpoint, where the columns appear.
 */
.site-footer {
	background: var(--color-primary-900);
	color: var(--color-neutral-200);
	padding-top: var(--space-12);
	font-size: var(--text-base);
}

@media (min-width: 640px) {
	.site-footer {
		padding-top: var(--space-16);
		font-size: var(--text-sm);
	}
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-12);
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

.site-footer__brand {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: var(--letter-tight);
	color: var(--color-neutral-50);
}

.site-footer__text {
	margin: 0;
	color: var(--color-neutral-300);
}

.site-footer__heading {
	margin: 0 0 var(--space-4);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-300);
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}

.site-footer__list li {
	list-style: none;
}

.site-footer__list a {
	color: var(--color-neutral-200);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
	color: var(--color-neutral-50);
	text-decoration: underline;
}

/*
 * The theme's own legal link list (Imprint), rendered by footer.php only when
 * the footer menu does not already carry it, so it may sit directly below the
 * menu list and needs the same gap between the two.
 */
.site-footer__list--legal {
	margin-top: var(--space-2);
}

.site-footer__bottom {
	border-top: 1px solid rgba(248, 249, 250, 0.15);
	padding-block: var(--space-6);
	color: var(--color-neutral-400);
}

.site-footer__bottom p {
	margin: 0;
	max-width: none;
}