/* Design tokens: brand colours, fonts and the fluid type scale. */
:root {
	--mfb-color-ink: #2d2d2d;
	--mfb-color-text: #515151;
	--mfb-color-paper: #fefdfb;
	--mfb-color-cream: #fef7eb;
	--mfb-color-sand: #f2e6d6;
	--mfb-color-stone: #a9a196;
	--mfb-color-text-muted: #756e64;
	--mfb-color-accent: #e0745e;
	--mfb-color-accent-soft: #f2937f;
	--mfb-color-sun: #f4b13b;
	--mfb-color-sun-soft: #f6be5c;
	--mfb-color-forest: #0f3d3a;
	--mfb-color-coral: #f06c57;
	--mfb-color-white: #fff;
	--mfb-color-black: #000;
	--mfb-color-ink-deep: #171717;
	--mfb-color-line: rgb(169 161 150 / 40%);
	--mfb-color-divider: #d9d9d9;

	/* Client Stories card colours, cycled in this order. */
	--mfb-story-1: #ffe9c3;
	--mfb-story-2: #93d8b7;
	--mfb-story-3: #fff6e5;
	--mfb-story-4: #ffbbae;
	--mfb-story-5: #94e0db;
	--mfb-story-6: #e6e0d8;
	--mfb-story-7: #ffcbc0;

	--mfb-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mfb-font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;

	/* Type scale: one size per role, fluid between 375px and 1280px+ (wide screens: see html). */
	/* Section titles (h2) match the hero on phones and cap lower on desktop, so the hero leads. */
	--mfb-text-h1: clamp(1.775rem, 1rem + 3.4vw, 3.5rem);
	--mfb-text-h2: clamp(1.775rem, 1rem + 3.4vw, 3rem);
	--mfb-text-h3: clamp(1.375rem, 0.9rem + 2.2vw, 2.625rem);
	--mfb-text-menu: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
	--mfb-text-h4: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	--mfb-text-h5: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
	--mfb-text-h6: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	--mfb-text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--mfb-text-small: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
	--mfb-text-caption: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	--mfb-text-lead: var(--mfb-text-h6);

	--mfb-leading-display: 1.1;
	--mfb-leading-heading: 1.2;
	--mfb-leading-body: 1.5;
	--mfb-tracking-display: -0.02em;
	--mfb-tracking-heading: -0.01em;
	--mfb-tracking-label: 0.05em;

	--mfb-space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
	--mfb-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	--mfb-space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--mfb-space-md: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
	--mfb-space-lg: clamp(2rem, 1.5rem + 2.5vw, 4rem);
	--mfb-space-xl: clamp(3rem, 2rem + 4vw, 6rem);
	--mfb-space-2xl: clamp(4rem, 2.5rem + 6vw, 9rem);

	--mfb-gutter: clamp(1rem, 0.25rem + 3.5vw, 6rem);
	--mfb-container: 78rem;

	--mfb-radius-sm: 0.875rem;
	--mfb-radius-md: clamp(1.25rem, 1rem + 1vw, 1.875rem);
	--mfb-radius-lg: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	--mfb-radius-pill: 999px;

	--mfb-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
	--mfb-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
	--mfb-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

html {
	/* Every size is in rem, so wide screens grow the whole layout together:
	   100% up to 1600px, rising to 120% at 2560px. Percentages keep the
	   reader's own browser font setting as the base. */
	font-size: clamp(100%, 100% + (100vw - 100rem) / 300, 120%);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--mfb-color-paper);
	color: var(--mfb-color-text);
	font-family: var(--mfb-font-body);
	font-size: var(--mfb-text-body);
	line-height: var(--mfb-leading-body);
	text-rendering: optimizeLegibility;
}

/* Own stacking context, so the pinned hero's negative z-index stays above main and remains clickable. */
.mfb-main {
	isolation: isolate;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* --mfb-section-heading is set by a section background chosen in the admin. */
	color: var(--mfb-section-heading, var(--mfb-color-ink));
	font-family: var(--mfb-font-display);
	font-weight: 600;
	line-height: var(--mfb-leading-heading);
	letter-spacing: var(--mfb-tracking-heading);
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--mfb-text-h1);
	line-height: var(--mfb-leading-display);
	letter-spacing: var(--mfb-tracking-display);
}

/* Section titles all share the display style, so they always outrank the h3 items inside. */
h2 {
	font-size: var(--mfb-text-h2);
	line-height: var(--mfb-leading-display);
	letter-spacing: var(--mfb-tracking-display);
}

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

h4 {
	font-size: var(--mfb-text-h4);
}

h5 {
	font-size: var(--mfb-text-h5);
	letter-spacing: 0;
}

h6 {
	font-size: var(--mfb-text-h6);
	letter-spacing: 0;
}

p {
	text-wrap: pretty;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--mfb-color-ink);
	outline-offset: 3px;
}

[id] {
	scroll-margin-top: var(--mfb-space-md);
}

.mfb-container {
	width: min(100% - 2 * var(--mfb-gutter), var(--mfb-container));
	margin-inline: auto;
}

.mfb-skip-link {
	position: absolute;
	top: var(--mfb-space-2xs);
	left: var(--mfb-space-2xs);
	z-index: 100;
	padding: var(--mfb-space-2xs) var(--mfb-space-xs);
	border-radius: var(--mfb-radius-pill);
	background: var(--mfb-color-ink);
	color: var(--mfb-color-paper);
	font-size: var(--mfb-text-small);
	text-decoration: none;
	transform: translateY(-200%);
}

.mfb-skip-link:focus-visible {
	transform: none;
}

.mfb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}