/* ==========================================================================
   Base: fonts, design tokens, reset, typography, shared components.
   Breakpoints: mobile < 768px, tablet 768–1023px, desktop >= 1024px.
   ========================================================================== */

/* Fonts (bundled locally). No font files were supplied; Magra stands in for
   the heavy condensed heading face and Libre Franklin for body text. */
@font-face { font-family: "Magra"; src: url("../fonts/magra-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Magra"; src: url("../fonts/magra-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
	/* Colour */
	--c-bg: #f2efe9;
	--c-surface: #e9e5de;
	--c-surface-2: #fafafa;
	--c-text: #1e1e1e;
	--c-muted: #4f4f4b;
	--c-accent: #ff5c00;
	--c-accent-soft: #f6b48c;
	--c-blue: #0c73b9; /* Brand blue from the logo: hovers, icons, charts. */
	--c-blue-soft: #cfe6f6;
	--c-border: rgba(30, 30, 30, 0.08);
	--c-border-strong: rgba(30, 30, 30, 0.14);
	--c-white: #fafafa;

	/* Type */
	--f-display: "Magra", "Arial Narrow", sans-serif;
	--f-body: "Libre Franklin", system-ui, sans-serif;
	--f-number: "Familjen Grotesk", "Libre Franklin", sans-serif;
	--fs-h1: clamp(56px, 5.5vw, 80px);
	--fs-h2: clamp(40px, 4.2vw, 60px);
	--fs-h3: 36px;
	--fs-body: 17px;
	--fs-small: 15px;
	--lh-tight: 1;
	--ls-display: -0.04em;

	/* Layout */
	--container: 1200px;
	--gutter: 40px;
	--section-y: 110px;
	--radius-sm: 6px;
	--radius: 12px;
	--radius-lg: 20px;
	--header-h: 72px;

	/* Motion (CSS-only effects; GSAP values live in motion-config.js) */
	--t-swap: 250ms;
	--t-hover: 350ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
	:root { --gutter: 28px; --section-y: 80px; --fs-h3: 32px; }
}
@media (max-width: 767px) {
	:root { --gutter: 20px; --section-y: 60px; --fs-h1: clamp(38px, 11.5vw, 44px); --fs-h2: clamp(30px, 9vw, 34px); --fs-h3: 24px; --header-h: 64px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* No sideways scroll or wobble on any device: clip horizontal overflow at the root (hidden first for
   browsers without clip), and no double-tap zoom on taps (pinch-zoom still works). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: hidden; overflow-x: clip; touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; }
/* Default h4–h6 sizes (components and articles set their own h2/h3): always larger than body text. */
h4 { font-size: 22px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }
/* Site rule: H1 and H2 are always uppercase (slightly looser tracking for capitals). */
h1, h2 { text-transform: uppercase; letter-spacing: -0.02em; }
/* Smaller headings wrap onto two lines often; give them a little more air than the display sizes. */
h3, h4, h5, h6 { line-height: 1.15; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

.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: 16px; top: -100px; z-index: 1000; background: var(--c-accent); color: var(--c-white); padding: 10px 16px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 16px; }

/* Layout primitives */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 56px; }
.section-title { font-size: var(--fs-h2); max-width: 9.5em; }
@media (max-width: 767px) { .section-head { margin-bottom: 40px; gap: 14px; } }

/* Eyebrow pill */
.eyebrow {
	display: inline-flex; align-items: center;
	padding: 4px 10px; border-radius: var(--radius-sm);
	background: var(--c-surface-2); font-size: var(--fs-small); font-weight: 400; line-height: 1.5;
	box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04);
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--c-accent)); flex: none; }

/* Chips */
.chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, var(--c-surface) 90%, #1e1e1e); border: 1px solid var(--c-border); font-size: var(--fs-small); line-height: 1.5; } /* grey tag, never white */
.chip--light { background: var(--c-surface-2); }

/* Text swap (nav + buttons): two identical layers in a clipped wrapper. */
.swap { position: relative; display: inline-flex; overflow: hidden; vertical-align: top; }
.swap__a, .swap__b { display: block; transition: transform var(--t-swap) var(--ease-out); }
.swap__b { position: absolute; inset: 0; transform: translateY(100%); }
a:hover .swap__a, a:focus-visible .swap__a, button:hover .swap__a, button:focus-visible .swap__a { transform: translateY(-100%); }
a:hover .swap__b, a:focus-visible .swap__b, button:hover .swap__b, button:focus-visible .swap__b { transform: translateY(0); }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px; border-radius: 10px;
	font-family: var(--f-body); font-weight: 500; font-size: 16px; line-height: 1.5;
	white-space: nowrap; transition: background-color var(--t-swap), box-shadow var(--t-swap);
}
.btn--primary { background: var(--c-accent); color: var(--c-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-blue); color: var(--c-white); }
/* No dark buttons: "dark" renders as the orange primary (same blue hover). */
.btn--dark { background: var(--c-accent); color: var(--c-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--c-blue); color: var(--c-white); }
.btn--light { background: var(--c-white); color: var(--c-text); }
.btn--lg { padding: 12px 24px; font-size: 17px; border-radius: 12px; }

/* Motion start states — only while html.motion is set (JS running, motion allowed).
   If GSAP never initialises the class is removed and everything shows. */
.motion [data-hero-reveal],
.motion [data-reveal],
.motion [data-service-card],
.motion [data-step],
.motion [data-benefit],
.motion [data-metric],
.motion [data-post-card],
.motion [data-card] { opacity: 0; }

/* Inner pages (reveal.js, no GSAP): CSS transitions to the visible state. */
.reveal-js :is([data-reveal], [data-post-card], [data-step], [data-benefit], [data-metric], [data-service-card], [data-card]) {
	transform: translateY(20px);
	transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-js .is-in { opacity: 1; transform: none; }

/* Stretched link: makes a whole card clickable from its title link. */
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.btn--block { display: flex; width: 100%; }