/* ==========================================================================
   Edumach: main stylesheet (Figma frame 1600px, container 1360px)
   1. Fonts   2. Tokens   3. Base   4. Utilities   5. Components
   6. Layout (header, overlay, panels, footer)   7. Sections   8. Templates
   9. Forms   10. Motion   11. Responsive
   ========================================================================== */

/* 1. Fonts (self-hosted) ------------------------------------------------------
   Headings: Bootzy TM (supplied by the client, converted to WOFF). One weight; weight range so no faux bold. */
@font-face {
	font-family: "Bootzy TM";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/bootzy-tm.woff") format("woff");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens (Figma: White #fff, Black #151f20 + the colours used in the frames) */
:root {
	--white: #fff;
	--black: #151f20;          /* Figma variable "Black" */
	--ink: #10161e;            /* headings */
	--ink-form: #0e241d;       /* form labels */
	--blue: #3783dd;
	--blue-dark: #3478bd;
	--blue-mid: #95bded;
	--blue-light: #e7f0fb;
	--red: #e3000f;
	--green: #1fa855;

	--font-title: "Bootzy TM", "Arial", "Helvetica Neue", sans-serif;
	--font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* type scale: Figma px at 1600 → clamp(min, vw, max) */
	--fs-hero: clamp(1.75rem, 5vw + 0.5rem, 5rem);  /* 80 */
	--fs-section: clamp(2.125rem, 3.75vw, 3.75rem); /* 60 */
	--fs-advice: clamp(2rem, 3.125vw, 3.125rem);    /* 50 */
	--fs-card: clamp(1.75rem, 2.5vw, 2.5rem);       /* 40 */
	--fs-usp: clamp(1.625rem, 2.1875vw, 2.1875rem); /* 35 */
	--fs-30: clamp(1.375rem, 1.875vw, 1.875rem);    /* 30 */
	--fs-marquee: clamp(2.5rem, 4.375vw, 4.375rem); /* 70 */
	--fs-lead: clamp(1rem, 1.125vw, 1.125rem);      /* 18 */
	--fs-nav: 1.25rem;                              /* 20 */
	--track-title: 0.05em;                          /* Figma letter-spacing 5% */

	--container: 1360px;
	--gutter: clamp(16px, 4vw, 120px);
	--panel-r: clamp(40px, 9.375vw, 150px);
	--panel-pad: clamp(64px, 7.5vw, 120px);
	--gap-section: clamp(64px, 7.5vw, 120px);
	--radius: 10px;
	--radius-sm: 5px;
	--header-h: 100px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--speed: 0.3s;
}

/* 3. Base ------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
	overflow-x: clip;
	scrollbar-gutter: stable; /* space for the scrollbar stays reserved, so nothing shifts when scrolling is locked */
	background: var(--white);
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--white);
	color: var(--black);
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.34;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


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

a { color: inherit; text-decoration: none; }
p,
h1,
h2,
h3,
h4,
figure { margin: 0; }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

/* 4. Utilities --------------------------------------------------------------- */
.u-sr,
.screen-reader-response {
	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: fixed;
	z-index: 1000;
	top: 12px;
	left: 12px;
	padding: 10px 16px;
	border-radius: 100px;
	background: var(--ink);
	color: var(--white);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}
.container--narrow { max-width: 1120px; }
.container--text { max-width: 900px; }

/* 5. Components --------------------------------------------------------------- */

/* Hand-drawn circle and star (Figma vectors) as colourable masks */
.blob,
.star {
	display: block;
	background: currentColor;
	-webkit-mask: var(--mask) center / contain no-repeat;
	mask: var(--mask) center / contain no-repeat;
}
.blob { --mask: url("../img/blob.svg"); }
.star { --mask: url("../img/star.svg"); }

.title {
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
	color: var(--ink);
}
.title--hero { font-size: var(--fs-hero); color: var(--white); overflow-wrap: break-word; hyphens: auto; }
.title--section { font-size: var(--fs-section); }

.eyebrow {
	font-size: clamp(0.875rem, 1.375vw, 1.375rem);
	line-height: 1.1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lead { font-size: var(--fs-lead); line-height: 1.34; color: #000; }

.text-link {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color var(--speed) ease;
}
.text-link:hover { color: var(--blue); }

/* Pill button (+ circle with star) */
.button {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
	text-decoration: none;
}
.button__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 39px;
	border-radius: 100px;
	background: var(--blue);
	color: var(--white);
	transition: background-color var(--speed) ease, transform var(--speed) var(--ease-out);
}
.button__badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--blue);
	transition: transform var(--speed) var(--ease-out);
}
.button__badge .blob { position: absolute; inset: 0; }
.button__badge .star { position: relative; width: 28px; height: 28px; color: var(--white); transform: rotate(8.47deg); transition: transform 0.45s var(--ease-out); }
.button:hover .button__label,
.button:focus-visible .button__label { background: var(--blue-dark); }
.button:hover .button__badge { transform: translateX(4px); }
.button:hover .button__badge .star { transform: rotate(98deg); }
.button--light .button__label { background: var(--blue-light); color: var(--black); padding-inline: 38px; }
.button--light:hover .button__label { background: var(--white); }
.button:focus-visible { outline: none; }
.button:focus-visible .button__label { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Round buttons (header menu, video controls) on a hand-drawn circle */
.round-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--speed) var(--ease-out);
}
.round-button > * { grid-area: 1 / 1; }
.round-button .blob { position: absolute; inset: 0; transition: transform 0.45s var(--ease-out); }
.round-button:hover .blob { transform: rotate(90deg) scale(1.06); }
.round-button__icon { position: relative; }
.round-button--blue { color: var(--blue); }
.round-button--blue .round-button__icon { color: var(--white); width: 11px; height: auto; }
.round-button--small { width: 40px; height: 40px; }

/* Photo placeholder (photos still to come from the client): a #E7F0FB block in the photo's place */
.media-placeholder { display: block; background: var(--blue-light); }

/* Inverted-corner tab ("notch"): a tab in the page colour cut out of a card corner.
   The pseudo elements draw the two concave corners (radius 10). */
.notch {
	--notch-bg: var(--white);
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	height: 56px;
	padding: 0 20px;
	background: var(--notch-bg);
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.notch::before,
.notch::after {
	content: "";
	position: absolute;
	width: var(--radius);
	height: var(--radius);
	pointer-events: none;
}
.notch--top-left { top: 0; left: 0; border-bottom-right-radius: var(--radius); }
.notch--top-left::before { top: 0; left: 100%; background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }
.notch--top-left::after { top: 100%; left: 0; background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }
.notch--top-right { top: 0; right: 0; border-bottom-left-radius: var(--radius); }
.notch--top-right::before { top: 0; right: 100%; background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }
.notch--top-right::after { top: 100%; right: 0; background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }
.notch--bottom-right { bottom: 0; right: 0; border-top-left-radius: var(--radius); }
.notch--bottom-right::before { bottom: 0; right: 100%; background: radial-gradient(circle at 0 0, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }
.notch--bottom-right::after { bottom: 100%; right: 0; background: radial-gradient(circle at 0 0, transparent var(--radius), var(--notch-bg) calc(var(--radius) + 0.5px)); }

/* Photo with tab */
.tab-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 480 / 460;
	border-radius: var(--radius);
	background: var(--blue-light);
}
.tab-media__image { width: 100%; height: 100%; object-fit: cover; }
.tab-media__tab { padding: 0 20px; font-size: 1rem; }
.panel--light .tab-media { background: var(--white); }
.panel--light .tab-media .notch { --notch-bg: var(--blue-light); }

/* Category card (Figma product card, without prices) */
.category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 491px;
	padding: 20px 20px 40px;
	border-radius: var(--radius);
	background: var(--white);
	transition: transform var(--speed) var(--ease-out);
}
.category-card__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	background: var(--white);
}
.category-card__image { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease-out); }
.category-card__media--cover .category-card__image,
.category-detail__media--cover .category-detail__image { object-fit: cover; }
.category-card__body { display: flex; flex: 1; flex-direction: column; padding: 25px 20px 0; }
.category-card__brand {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--blue);
}
.category-card__title {
	margin-top: 10px;
	font-family: var(--font-title);
	font-size: var(--fs-30);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
	color: var(--black);
}
.category-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.category-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--black);
}
.category-card__arrow { transition: transform var(--speed) var(--ease-out); }
.category-card:hover .category-card__image { transform: scale(1.04); }
.category-card:hover .category-card__arrow { transform: translateX(4px); }
.category-card:has(.category-card__link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.category-card__link:focus-visible { outline: none; }

/* Advice card */
.advice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 491px;
	overflow: hidden;
	padding: 50px 40px;
	border-radius: var(--radius);
	background: var(--blue);
	color: var(--white);
}
.advice-card__pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.advice-card__title,
.advice-card__text {
	position: relative;
	max-width: 318px;
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
}
.advice-card__title { font-size: var(--fs-advice); }
.advice-card__text { margin-top: auto; padding-top: 32px; font-size: var(--fs-usp); }
.advice-card__button { position: relative; margin-top: 20px; align-self: flex-start; }

/* Read more: first paragraph visible, the rest folds out */
.read-more .lead + .lead,
.read-more__inner .lead:first-child { margin-top: 1em; }
.js .read-more__more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s var(--ease-out), visibility 0s linear 0.45s; }
.read-more__inner { min-height: 0; overflow: hidden; }
.js .read-more.is-open .read-more__more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.read-more__toggle { margin-top: 16px; padding: 0; border: 0; background: none; font-size: 1.125rem; cursor: pointer; }

/* Socials */
.socials { display: flex; gap: 5px; }
.socials__link {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--blue);
}
.socials__link > * { grid-area: 1 / 1; }
.socials__link .blob { position: absolute; inset: 0; transition: transform 0.45s var(--ease-out); }
.socials__link:hover .blob { transform: rotate(90deg) scale(1.08); }
.socials__icon { position: relative; color: var(--white); }
.socials--light .socials__link { color: var(--white); }
.socials--light .socials__icon { color: var(--blue); }

/* Open/closed status */
.status { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 0.875rem; line-height: 1; color: #000; }
.status__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--red); }
.status--open .status__dot { background: var(--green); }

/* Prose (legal pages, category texts) */
.prose { font-size: var(--fs-lead); line-height: 1.5; color: #000; }
.prose > * + * { margin-top: 1em; }
.prose h2,
.prose h3 { margin-top: 1.6em; font-family: var(--font-title); letter-spacing: var(--track-title); color: var(--ink); line-height: 1.1; }
.prose h2 { font-size: var(--fs-30); }
.prose h3 { font-size: 1.375rem; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose ul { padding-left: 1.2em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.prose th,
.prose td { padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); }
.prose tr:nth-child(even) td { background: rgba(255, 255, 255, 0.5); }
@media (max-width: 767px) {
	.prose table { display: block; overflow-x: auto; }
}

/* 6. Layout ------------------------------------------------------------------ */

/* Header: static at the top of the page (does not follow while scrolling) */
.header {
	position: absolute;
	z-index: 50;
	inset: 0 0 auto;
	padding-top: 40px;
}
.admin-bar .header { top: 32px; }
.header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 60px; }
.header__logo { flex: none; color: var(--white); }
.header__wordmark { width: 200px; height: auto; }
/* An uploaded logo keeps its own proportions within the same box */
img.header__wordmark.is-uploaded { width: auto; max-width: 200px; max-height: 60px; object-fit: contain; object-position: left center; }
img.footer__logo-svg.is-uploaded { width: auto; max-width: 100%; max-height: 140px; object-fit: contain; object-position: left center; }
/* The nav spans the bar (no transform) so mega panels can use the full container width; only the list catches pointers. */
.header__nav { position: absolute; inset-inline: 0; display: flex; justify-content: center; pointer-events: none; }
.header__nav .nav__list { pointer-events: auto; }
.header__menu { flex: none; position: relative; width: 60px; height: 60px; }

.nav__list { display: flex; align-items: center; gap: 50px; }
.nav__item { position: relative; }
.nav__link {
	position: relative; /* Underline stays under the word, also on mega items (position: static). */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 18px;
	font-size: var(--fs-nav);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--white);
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--speed) var(--ease-out);
}
.nav__link:hover::after,
.nav__item--current > .nav__link::after { transform: scaleX(1); }
.nav__caret { width: 8px; height: auto; transition: transform var(--speed) var(--ease-out); }
.nav__item--has-children:hover .nav__caret,
.nav__item--has-children:focus-within .nav__caret { transform: rotate(180deg); }
.nav__submenu {
	position: absolute;
	top: 100%;
	left: -30px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	gap: 4px 48px;
	min-width: 360px;
	padding: 28px 36px;
	border-radius: var(--radius);
	background: var(--white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--speed) ease, transform var(--speed) var(--ease-out), visibility 0s linear var(--speed);
}
.nav__submenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.nav__sublink {
	display: block;
	padding-block: 8px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--ink);
	transition: color var(--speed) ease, transform var(--speed) var(--ease-out);
}
.nav__sublink:hover,
.nav__subitem.nav__item--current .nav__sublink { color: var(--blue); transform: translateX(4px); }

/* Mega menus (Machines, Merken): full container width under the bar, filled from brands/categories/machines */
.nav__item--mega { position: static; }
.nav__item--mega.is-open .nav__caret,
.nav__item--mega:has(:focus-visible) .nav__caret { transform: rotate(180deg); }
.js .nav__item--mega:not(.is-open):hover .nav__caret { transform: none; }
/* No "current" underline on the mega items; the hover/open underline stays. */
.nav__item--mega.nav__item--current > .nav__link::after { transform: scaleX(0); }
.nav__item--mega > .nav__link:hover::after,
.nav__item--mega.is-open > .nav__link::after { transform: scaleX(1); }
.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100dvh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: 0 30px 80px rgba(16, 22, 30, 0.22);
	color: var(--ink);
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--speed) ease, transform var(--speed) var(--ease-out), visibility 0s linear var(--speed);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
/* With JS the menu opens via .is-open (with a short close delay, so a diagonal mouse path to the panel keeps it open);
   keyboard focus opens it too, a mouse click inside it does not keep it open. Without JS: plain hover. */
html:not(.js) .nav__item--mega:hover > .mega,
.nav__item--mega:has(:focus-visible) > .mega,
.nav__item--mega.is-open > .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0.08s, 0.08s, 0s;
}
.nav__item--mega.is-closed > .mega { opacity: 0; visibility: hidden; transform: translateY(10px); transition: none; }
.mega__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 12px; }
.mega--brands .mega__inner { grid-template-columns: minmax(0, 1fr) 280px; }

.mega__tabs { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-sm); background: var(--blue-light); }
.mega__tab {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 12px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--speed) ease, color var(--speed) ease;
}
.mega__tab-name { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: var(--track-title); }
.mega__tab-meta { grid-column: 1; font-size: 0.875rem; color: rgba(16, 22, 30, 0.6); }
.mega__tab-arrow { grid-row: 1 / span 2; grid-column: 2; width: 15px; height: 12px; opacity: 0; transform: translateX(-6px); transition: opacity var(--speed) ease, transform var(--speed) var(--ease-out); }
.mega__tab:hover { color: var(--blue); }
.mega__tab[aria-selected="true"] { background: var(--white); color: var(--blue); }
.mega__tab[aria-selected="true"] .mega__tab-arrow { opacity: 1; transform: none; }
.mega__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mega__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 16px 18px 6px;
	font-weight: 600;
	color: var(--ink);
	transition: color var(--speed) ease;
}
.mega__all-arrow { width: 15px; height: 12px; transition: transform var(--speed) var(--ease-out); }
.mega__all:hover { color: var(--blue); }
.mega__all:hover .mega__all-arrow { transform: translateX(4px); }

.mega__panels { padding: 22px 16px 16px; }
.mega__panel[hidden] { display: none; }
.mega__panel { animation: mega-in 0.3s var(--ease-out); }
@keyframes mega-in { from { opacity: 0; transform: translateY(6px); } }
.mega__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(16, 22, 30, 0.1); }
.mega__eyebrow { font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); }
.mega__brand-link { font-size: 1rem; }
.mega__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin-top: 24px; }
.mega__cat-link {
	display: block;
	font-family: var(--font-title);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--track-title);
	color: var(--ink);
	transition: color var(--speed) ease;
}
.mega__cat-link:hover { color: var(--blue); }
.mega__links { display: grid; gap: 2px; margin-top: 10px; }
.mega__links--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.mega__link {
	display: inline-block;
	padding-block: 4px;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: rgba(16, 22, 30, 0.72);
	transition: color var(--speed) ease, transform var(--speed) var(--ease-out);
}
.mega__link:hover { color: var(--blue); transform: translateX(4px); }
.mega__link--more { font-weight: 600; color: var(--blue); }

.mega__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mega-brand {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	border-radius: var(--radius-sm);
	background: var(--blue-light);
	color: var(--ink);
	transition: background-color var(--speed) ease;
}
.mega-brand__logo-wrap { display: flex; align-items: center; height: 56px; margin-bottom: 24px; }
.mega-brand__logo { width: auto; max-width: 160px; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter var(--speed) ease, opacity var(--speed) ease; }
.mega-brand__name { font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: var(--track-title); }
.mega-brand__subtitle { margin-top: 8px; font-size: 1rem; line-height: 1.35; }
.mega-brand__meta { margin-top: 12px; font-size: 0.875rem; color: rgba(16, 22, 30, 0.6); }
.mega-brand__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 28px; font-weight: 600; color: var(--blue); }
.mega-brand__arrow { width: 15px; height: 12px; transition: transform var(--speed) var(--ease-out); }
.mega-brand:hover { background: #d9e7f8; }
.mega-brand:hover .mega-brand__logo { filter: none; opacity: 1; }
.mega-brand:hover .mega-brand__arrow { transform: translateX(4px); }

.mega__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 320px;
	padding: 32px 28px;
	border-radius: var(--radius-sm);
	background: var(--blue);
	color: var(--white);
}
.mega__promo-pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mega__promo-title,
.mega__promo-text { position: relative; font-family: var(--font-title); font-weight: 700; line-height: 1; letter-spacing: var(--track-title); }
.mega__promo-title { font-size: 2rem; }
.mega__promo-text { margin-top: auto; padding-top: 24px; font-size: 1.25rem; line-height: 1.15; }
.mega__promo-button { position: relative; margin-top: 20px; align-self: flex-start; }

@media (max-width: 1399px) {
	.mega__inner { grid-template-columns: 220px minmax(0, 1fr); }
	.mega--brands .mega__inner { grid-template-columns: minmax(0, 1fr) 240px; }
	.mega--machines .mega__promo { display: none; }
}

/* Hamburger navigation: the white button grows into a panel with the menu (scaling hamburger pattern) */
.navigation__dark-bg {
	position: fixed;
	z-index: 60;
	inset: 0;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.header.is-menu-open .navigation__dark-bg { opacity: 0.33; visibility: visible; }
.hamburger-nav {
	position: absolute;
	z-index: 70;
	top: 0;
	right: 0;
	border-radius: 30px;
}
.hamburger-nav__blob {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 64px;
	height: 64px;
	color: var(--white);
	transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
.hamburger-nav__bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: var(--white);
	transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.header.is-menu-open .hamburger-nav__bg { width: 100%; height: 100%; }
.header.is-menu-open .hamburger-nav__blob { opacity: 0; }
.hamburger-nav:has(.hamburger-nav__toggle:hover) .hamburger-nav__blob { transform: rotate(90deg); }
.hamburger-nav__group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 40px 32px 32px;
	transform-origin: 100% 0;
	transform: scale(0.15) rotate(0.001deg);
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.header.is-menu-open .hamburger-nav__group { transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; }
.hamburger-nav__menu-p {
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0.5;
}
.hamburger-nav__ul { display: flex; flex-direction: column; gap: 6px; }
.hamburger-nav__a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--ink);
}
.hamburger-nav__p {
	padding-right: 20px;
	font-family: var(--font-title);
	font-size: clamp(1.625rem, 2vw, 2rem);
	line-height: 1.15;
	letter-spacing: var(--track-title);
	white-space: nowrap;
	transition: color var(--speed) ease, opacity var(--speed) ease;
}
.hamburger-nav__a[aria-current] .hamburger-nav__p { opacity: 0.33; }
.hamburger-nav__a:hover .hamburger-nav__p { color: var(--blue); }
.hamburger-nav__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue);
	opacity: 0.5;
	transform: scale(0) rotate(0.001deg);
	transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.hamburger-nav__a[aria-current] .hamburger-nav__dot { transform: scale(1) rotate(0.001deg); opacity: 1; }
.hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot { transform: scale(0) rotate(0.001deg); }
.hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot { transform: scale(1) rotate(0.001deg); opacity: 0.5; }
.hamburger-nav__toggle {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transform: translate(0, 0) rotate(0.001deg);
	transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.header.is-menu-open .hamburger-nav__toggle { transform: translate(-12px, 12px) rotate(0.001deg); }
.hamburger-nav__toggle-bar {
	position: absolute;
	width: 18px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--blue);
	transform: translateY(-4px) rotate(0.001deg);
	transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
.hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(4px) rotate(0.001deg); }
.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar { transform: translateY(4px) rotate(0.001deg); }
.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(0.001deg); }
.header.is-menu-open .hamburger-nav__toggle .hamburger-nav__toggle-bar { transform: translateY(0) rotate(45deg); }
.header.is-menu-open .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0) rotate(-45deg); }

/* WhatsApp button */
.whatsapp {
	position: fixed;
	z-index: 40;
	right: clamp(16px, 3.125vw, 50px);
	bottom: 32px;
	width: 70px;
	transition: transform var(--speed) var(--ease-out), opacity var(--speed) ease;
}
.whatsapp__icon { width: 100%; height: auto; }
.whatsapp:hover { transform: scale(1.08) rotate(-6deg); }
.header.is-menu-open ~ .whatsapp { opacity: 0; pointer-events: none; }

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--blue);
	color: var(--white);
	text-align: center;
}
.hero__media { position: absolute; inset: 0; }
.hero__image { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
/* Video with Figma's Gradient map shader (WebGL canvas from main.js on top of the playing video).
   Until the first frame is drawn, or without WebGL, the video shows tinted like the photo (50% over blue). */
.gradient-map { overflow: hidden; }
.gradient-map > video,
.gradient-map > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gradient-map > video { opacity: 0.5; }
.gradient-map.is-active > video { opacity: 0; pointer-events: none; }
.hero__inner { position: relative; }
.hero--home { padding: clamp(150px, 18.5vw, 296px) 0 calc(clamp(56px, 6.25vw, 100px) + var(--panel-r)); }
.hero--page { padding: clamp(140px, 15.5vw, 248px) 0 calc(clamp(48px, 9.25vw, 148px) + var(--panel-r)); }
.hero__eyebrow { margin-bottom: 20px; }
.hero--home .hero__title { max-width: 1264px; margin-inline: auto; }

/* Panels: stacked blocks with 150px top corners that slide over the previous block */
.panel {
	position: relative;
	margin-top: calc(var(--panel-r) * -1);
	padding: var(--panel-pad) 0 calc(var(--panel-pad) + var(--panel-r));
	border-radius: var(--panel-r) var(--panel-r) 0 0;
}
.panel--light { background: var(--blue-light); }
.panel--white { background: var(--white); }
.panel--light .notch { --notch-bg: var(--blue-light); }
.main > .panel:last-child { padding-bottom: calc(var(--panel-pad) + var(--panel-r) + 20px); }

.section { position: relative; }
.section + .section,
.section + .marquee,
.marquee + .section { margin-top: var(--gap-section); }
.section__head--center { max-width: 1100px; margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: clamp(12px, 1vw, 16px); }

/* Footer */
.footer { padding: 80px 0 36px; }
.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 572fr) minmax(0, 297fr) minmax(0, 297fr) minmax(0, 194fr);
	align-items: start;
}
.footer__brand { width: min(100%, 362px); }
.footer__logo { display: block; color: var(--ink); }
.footer__logo-svg { width: 100%; height: auto; }
.footer__follow { display: flex; align-items: center; justify-content: flex-end; gap: 13px; margin-top: 30px; font-size: var(--fs-lead); }
.footer__title {
	font-family: var(--font-title);
	font-size: var(--fs-30);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
	color: var(--ink);
}
.footer__title a:hover { color: var(--blue); }
.footer-nav__list,
.footer__list { margin-top: 10px; }
.footer-nav__link,
.footer__list li,
.footer__list a {
	font-size: var(--fs-lead);
	line-height: 30px;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.footer-nav__link:hover,
.footer__list a:hover { color: var(--blue); }
.footer__list--meta { margin-top: 10px; }
.footer__brands {
	display: grid;
	grid-template-columns: minmax(0, 747fr) minmax(0, 479fr) auto;
	gap: 32px;
	margin-top: 50px;
}
.footer__brand-col--wide .footer__list { columns: 2; column-gap: 32px; max-width: 654px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 46px; }
.footer__copy { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* 7. Sections ------------------------------------------------------------------ */

/* Home: "Maak kennis" block (same as the first block of Over Edumach) with the star decoration */
.about__star {
	position: absolute;
	z-index: 0;
	top: calc(-1 * (var(--panel-pad) + clamp(80px, 16vw, 256px)));
	right: calc(-1 * clamp(40px, 15.6vw, 250px));
	width: clamp(260px, 40.6vw, 650px);
	height: auto;
	transform: rotate(10.16deg) skewX(3.11deg);
	pointer-events: none;
}
.about .container { position: relative; }

/* Brands */
.brands__list {
	display: grid;
	/* Full container width (Figma: 3 × 398): the client's brand summaries need the room */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(28px, 2.5vw, 40px);
}
.brand-card {
	--notch-bg: var(--white);
	position: relative;
	overflow: hidden;
	min-height: 210px;
	padding: 50px 30px 86px;
	border-radius: var(--radius);
	background: var(--blue-light);
	isolation: isolate;
}
/* Star on hover, placed like the star on the "Keuzestress" card: large, right of centre, running off the edge */
.brand-card__pattern {
	position: absolute;
	z-index: -1;
	top: 7%;
	left: 34%;
	width: 92%;
	aspect-ratio: 650 / 794;
	background: rgba(55, 131, 221, 0.1);
	-webkit-mask: url("../img/star-large.svg") center / contain no-repeat;
	mask: url("../img/star-large.svg") center / contain no-repeat;
	opacity: 0;
	transform: scale(0.85) rotate(-12deg);
	transition: opacity var(--speed) ease, transform 0.6s var(--ease-out);
}
.brand-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.brand-card__title {
	font-family: var(--font-title);
	font-size: var(--fs-card);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
	color: var(--ink);
}
.brand-card__link::after { content: ""; position: absolute; z-index: 3; inset: 0; }
.brand-card__logo {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 139px;
	height: 50px;
	object-fit: contain;
	object-position: right top;
	filter: grayscale(1) contrast(1.1);
	opacity: 0.75;
	transition: filter var(--speed) ease, opacity var(--speed) ease;
}
.brand-card__subtitle { margin-top: 8px; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--blue); }
.brand-card__text { margin-top: 10px; font-size: 1rem; line-height: 1.35; color: #000; }
.brands__outro { max-width: 1100px; margin: clamp(32px, 3.75vw, 60px) auto 0; text-align: center; }
.brands__outro-title { margin-bottom: clamp(12px, 1vw, 16px); font-family: var(--font-title); font-size: var(--fs-card); font-weight: 700; line-height: 1; letter-spacing: var(--track-title); color: var(--ink); }
.brand-card__tab {
	width: 140px;
	padding: 0;
	transform: translate(100%, 100%);
	transition: transform 0.35s var(--ease-out);
}
.brand-card:hover .brand-card__tab,
.brand-card:focus-within .brand-card__tab { transform: none; }
.brand-card:hover .brand-card__pattern,
.brand-card:focus-within .brand-card__pattern { opacity: 1; transform: none; }
.brand-card:hover .brand-card__logo,
.brand-card:focus-within .brand-card__logo { filter: none; opacity: 1; }
.brand-card__link:focus-visible { outline: none; }
.brand-card:has(.brand-card__link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Marquee */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee__item { display: flex; align-items: center; }
.marquee__word {
	padding-inline: clamp(14px, 1.9vw, 30px);
	font-family: var(--font-title);
	font-size: var(--fs-marquee);
	font-weight: 700;
	line-height: 1.07;
	letter-spacing: var(--track-title);
	white-space: nowrap;
	color: var(--ink);
	transition: color var(--speed) ease;
}
.marquee__word:hover { color: var(--blue-mid); }
.marquee__star { flex: none; width: clamp(18px, 1.75vw, 28px); height: clamp(18px, 1.75vw, 28px); color: var(--blue); transform: rotate(8.47deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Why Edumach: expanding cards */
.usps__list { display: flex; gap: 20px; height: 300px; margin-top: clamp(24px, 2vw, 32px); }
.usp {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--blue-mid);
	color: var(--white);
	transition: flex-grow 0.45s var(--ease-out);
	isolation: isolate;
}
.usp.is-active { flex-grow: 2; }
.usp:not(:has(.usp__image)) { background: var(--blue); }
.usp:not(:has(.usp__image))::after { display: none; }
.usp::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to bottom, rgba(149, 189, 237, 0), var(--blue-mid));
}
.usp__image {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}
.usp:hover .usp__image { transform: scale(1.04); }
.usp__toggle {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding: 30px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}
.usp__title {
	display: block;
	width: min(212px, 100%);
	font-family: var(--font-title);
	font-size: var(--fs-usp);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-title);
}
.usp__body {
	display: grid;
	grid-template-rows: 0fr;
	max-width: 458px;
	opacity: 0;
	transition: grid-template-rows 0.45s var(--ease-out), opacity 0.25s ease;
}
.usp__text { min-height: 0; overflow: hidden; font-size: 1rem; font-weight: 500; line-height: 1.25; }
.usp__text::before { content: ""; display: block; height: 10px; }
.usp.is-active .usp__title { width: auto; max-width: 100%; }
.usp.is-active .usp__body { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.1s, 0.2s; }
.usp__tab {
	width: 181px;
	padding: 0;
	transform: translate(100%, -100%);
	transition: transform 0.35s var(--ease-out), color var(--speed) ease;
}
.usp__tab:hover { color: var(--blue); }
.usp.is-active .usp__tab { transform: none; transition-delay: 0.15s; }

/* SEO block */
.seo-block__inner {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 800px);
	justify-content: space-between;
	align-items: center;
	gap: 40px 80px;
}
.seo-block--reverse .seo-block__inner { grid-template-columns: minmax(0, 800px) minmax(0, 480px); }
.seo-block--reverse .seo-block__media { order: 2; }
.seo-block__content .lead { margin-top: clamp(12px, 1vw, 16px); }
.seo-block__button { margin-top: 25px; }

/* 8. Templates ------------------------------------------------------------------ */

/* Category grid (brand/category page, machines archive) */
.category-grid__parent { margin-bottom: 20px; }
.category-grid__parent a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--blue);
}
.category-grid__parent-icon { width: 15px; height: 12px; transform: scaleX(-1); transition: transform 0.3s var(--ease-out); }
.category-grid__parent a:hover .category-grid__parent-icon { transform: scaleX(-1) translateX(4px); }
.category-grid__text { max-width: 1100px; margin-top: clamp(12px, 1vw, 16px); }
.category-grid__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 19px 20px;
	margin-top: clamp(32px, 4.4vw, 70px);
}
.category-grid__item.is-hidden { display: none; }

.filter { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 40px; }
.filter__button {
	min-height: 50px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ink-form);
	cursor: pointer;
	transition: background-color var(--speed) ease, color var(--speed) ease;
}
.filter__button:hover { color: var(--blue); }
.filter__button.is-active { background: var(--blue); color: var(--white); }
.filter + .category-grid__list { margin-top: 30px; }

/* Category detail */
.category-detail__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px 80px; }
.category-detail__content .category-card__brand { margin-bottom: 20px; }
.category-detail__content .lead,
.category-detail__content .prose { margin-top: clamp(12px, 1vw, 16px); }
.category-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 40px; }
.category-detail__media { overflow: hidden; padding: 20px; border-radius: var(--radius); background: var(--white); }
.category-detail__image { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radius-sm); }
.category-detail + .category-grid .title,
.machine-body + .category-grid .title { font-size: var(--fs-card); }

/* Machine description: full width under the intro, any length; the contact block stays in view (sticky) next to long texts */
.machine-body { padding-top: 0; }
.machine-body__inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 40px 80px; }
.machine-body__text { max-width: 860px; padding: clamp(28px, 3vw, 50px); border-radius: var(--radius); background: var(--white); }
.machine-body__aside { position: sticky; top: 40px; }
.machine-aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px 28px;
	border-radius: var(--radius);
	background: var(--blue);
	color: var(--white);
}
.machine-aside__title { font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: var(--track-title); }
.machine-aside__text { margin-bottom: 8px; font-size: 1rem; line-height: 1.45; opacity: 0.9; }
.machine-aside__line { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; }
.machine-aside__line:hover { text-decoration-color: currentColor; }
.machine-aside__button { margin-top: 14px; }

/* Machine downloads (PDF) under the intro */
.machine-downloads { margin-top: 36px; }
.machine-downloads__title { margin-bottom: 12px; }
.machine-downloads__list { display: grid; gap: 8px; }
.machine-download {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px 12px 12px;
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--ink);
	transition: background-color var(--speed) ease, transform var(--speed) var(--ease-out);
}
.machine-download:hover { background: #d9e7f8; transform: translateX(4px); }
.machine-download__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--blue); color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; }
.machine-download__name { font-weight: 600; line-height: 1.3; }
.machine-download__size { font-size: 0.875rem; color: rgba(16, 22, 30, 0.6); white-space: nowrap; }

/* Machine photo gallery + lightbox */
.machine-gallery { padding-top: 0; }
.machine-gallery__title { font-size: var(--fs-card); }
.machine-gallery__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 2.5vw, 40px); }
.machine-gallery__item { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--white); cursor: zoom-in; }
.machine-gallery__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.machine-gallery__item:hover .machine-gallery__image { transform: scale(1.05); }
.machine-gallery__item:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lightbox::backdrop { background: rgba(10, 16, 24, 0.88); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { display: grid; justify-items: center; gap: 12px; margin: 0; padding: 70px 80px; }
.lightbox__image { max-width: min(1400px, 100%); max-height: calc(100dvh - 160px); object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { color: var(--white); font-size: 0.875rem; opacity: 0.8; }
.lightbox__button { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color var(--speed) ease; }
.lightbox__button:hover { background: var(--blue-light); }
.lightbox__button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lightbox__close { top: 20px; right: 20px; font-size: 26px; line-height: 1; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
.lightbox__prev .icon { transform: scaleX(-1); }
.lightbox__button .icon { width: 16px; height: 13px; }

/* Videos chosen instead of a photo take the photo's place and size */
video.is-video { display: block; background: var(--blue-light); }
.category-detail__media video.is-video,
.category-card__media video.is-video { object-fit: cover; }

/* Contact */
.contact__inner { display: grid; grid-template-columns: minmax(0, 904px) minmax(0, 376px); justify-content: space-between; align-items: start; gap: 48px 80px; }
.contact__text { margin-top: clamp(12px, 1vw, 16px); }
.contact__form { margin-top: 40px; }
.address-card { padding: 20px 20px 30px; border-radius: var(--radius); background: var(--white); }
.address-card__image { width: 100%; aspect-ratio: 336 / 250; object-fit: cover; border-radius: var(--radius); }
.address-card__title { margin-top: 30px; font-family: var(--font-title); font-size: var(--fs-30); font-weight: 700; line-height: 1; letter-spacing: var(--track-title); color: var(--ink); }
.address-card__address { margin-top: 10px; font-size: var(--fs-lead); line-height: 30px; letter-spacing: -0.02em; color: var(--ink); }

.contact-cards__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 398px));
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}
.contact-card {
	display: flex;
	flex-direction: column;
	min-height: 270px;
	padding: 40px;
	border-radius: var(--radius);
	background: var(--blue-light);
	transition: transform var(--speed) var(--ease-out);
}
.contact-card__title { font-family: var(--font-title); font-size: var(--fs-card); font-weight: 700; line-height: 1; letter-spacing: var(--track-title); color: var(--ink); }
.contact-card__text { margin-top: 15px; font-size: 1rem; line-height: 1.25; color: #000; }
.contact-card__link {
	margin-top: auto;
	padding-top: 20px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--speed) ease;
}
.contact-card__link:hover { color: var(--blue); }
.contact-card:hover { transform: translateY(-4px); }

/* About */
.about .section__head { max-width: 1200px; }
.about .title { max-width: 1150px; margin-inline: auto; }
.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 250px);
	gap: 20px;
	margin-top: 40px;
}
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--white); }
.gallery__item--1 { grid-area: 1 / 1; }
.gallery__item--2 { grid-area: 2 / 1; }
.gallery__item--3 { grid-area: 1 / 2 / 3 / 3; }
.gallery__image,
.gallery__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); transition: transform 0.6s ease; will-change: transform; }
/* Hover zoom as on skodora.nl/over-ons: the photo grows inside its rounded frame */
.gallery__item:hover .gallery__image,
.gallery__item:hover .gallery__video { transform: scale(1.05); }
.gallery__video { opacity: 0; transition: opacity 0.4s ease; }
.gallery__item.is-playing .gallery__video { opacity: 1; }
.gallery__controls { position: absolute; right: 30px; bottom: 30px; display: flex; gap: 6px; }
.round-button .icon-pause,
.round-button .icon-sound,
[aria-pressed="true"] .icon-play,
[aria-pressed="true"] .icon-muted { display: none; }
[aria-pressed="true"] .icon-pause,
[aria-pressed="true"] .icon-sound { display: block; }

.quote__inner { display: grid; grid-template-columns: minmax(0, 800px) minmax(0, 480px); justify-content: space-between; align-items: center; gap: 48px 80px; }
.quote__text { margin-top: clamp(12px, 1vw, 16px); font-size: var(--fs-lead); line-height: 1.34; color: #000; }
.quote__text > * + * { margin-top: 24px; }
.quote__media .tab-media__tab { padding-inline: 20px; }

/* Search results */
.result-list { display: grid; gap: 32px; }
.result-list__title { font-family: var(--font-title); font-size: var(--fs-30); letter-spacing: var(--track-title); color: var(--ink); }
.result-list__title a:hover { color: var(--blue); }

/* 404 */
.not-found__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 40px; }

/* 9. Forms (Contact Form 7 with own markup) ------------------------------------ */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10.33px; }
.form__field { display: grid; gap: 11px; }
.form__field--full { grid-column: 1 / -1; }
.form__label { padding-left: 23px; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--ink-form); }
.form__input {
	width: 100%;
	min-height: 50px;
	padding: 12px 23px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--white);
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	transition: border-color var(--speed) ease;
}
.form__input::placeholder { color: rgba(17, 12, 12, 0.49); font-style: italic; font-weight: 300; }
.form__input:focus { outline: none; border-color: var(--blue); }
textarea.form__input { height: auto; min-height: 100px; max-height: 320px; field-sizing: content; resize: vertical; }
.form__consent { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.4; color: #000; }
.form__consent a { text-decoration: underline; }
.form__consent input { accent-color: var(--blue); margin-right: 8px; }
.form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.form__submit {
	min-height: 56px;
	padding: 0 39px;
	border: 0;
	border-radius: 100px;
	background: var(--blue);
	color: var(--white);
	font-family: inherit; /* an <input type="submit"> does not inherit the font by itself */
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--speed) ease;
}
.form__submit:hover { background: var(--blue-dark); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; padding-left: 23px; font-size: 0.875rem; color: var(--red); }
.wpcf7-not-valid { border-color: var(--red); }
.hidden-fields-container { display: none; }
.wpcf7-response-output { margin-top: 20px; padding: 14px 23px; border-radius: var(--radius-sm); background: var(--white); font-size: 1rem; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-left: 4px solid var(--green); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left: 4px solid var(--red); }
.wpcf7-spinner { display: none; }
.wpcf7 form.submitting .form__submit { opacity: 0.6; }
.wpcf7-list-item { margin: 0; }
.form-fallback a { color: var(--blue); text-decoration: underline; }

/* Page transition: Osmo "Page Name Transition (Wipe)" in the Edumach colours and heading font */
.transition {
	z-index: 100;
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: clip;
}
.transition__panel {
	background-color: var(--blue);
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	top: 100%;
	left: 0;
}
.transition__label {
	color: var(--white);
	text-transform: uppercase;
	font-family: var(--font-title);
	letter-spacing: var(--track-title);
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	text-align: center;
	padding-inline: var(--gutter);
}

/* Merkmaten tab */
.mm-tab { position: fixed; z-index: 45; left: 50%; bottom: 0; display: block; pointer-events: none; transform: translateX(-50%) translateY(100%); transition: transform 0.2s ease-out; }
.mm-tab.active { pointer-events: auto; transform: translateX(-50%) translateY(20px); }
.mm-tab:hover,
.mm-tab:focus-visible { transform: translateX(-50%) translateY(0); }
.mm-tab svg { display: block; width: 100px; height: 66px; }

/* 10. Motion ------------------------------------------------------------------ */
/* Lenis smooth scroll (rules from lenis/dist/lenis.css) */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
/* Menu open: stop scrolling with hidden (not clip) so scrollbar-gutter keeps the scrollbar space → no jump */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.marquee__track { animation: none; }
	.marquee { overflow-x: auto; }
}

/* 11. Responsive ------------------------------------------------------------------ */
@media (max-width: 1399px) {
	.nav__list { gap: 32px; }
	.nav__link { font-size: 1.125rem; }
}

@media (max-width: 1199px) {
	.machine-gallery__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.machine-body__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px 40px; }
	.header__nav { display: none; }
	.header { padding-top: 24px; }
	.header__wordmark { width: 170px; }
	img.header__wordmark.is-uploaded { max-width: 170px; }
	.brands__list { grid-template-columns: minmax(0, 1fr); }
	.contact-cards__list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
	.category-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.seo-block__inner,
	.seo-block--reverse .seo-block__inner,
	.quote__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; }
	.contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px 48px; }
	.footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
	.footer__brand { grid-column: 1 / -1; }
	.footer__follow { justify-content: flex-start; }
	.footer__brands { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto; }
}

@media (max-width: 1023px) {
	.usps__list { flex-direction: column; height: auto; }
	.usp { flex: none; height: 104px; transition: height 0.45s var(--ease-out); }
	.usp.is-active { height: 300px; }
	.usp__title { width: auto; }
	.usp.is-active .usp__title { white-space: normal; }
	.usp__toggle { padding: 24px; }
	.brand-card__tab { transform: none; }
}

@media (max-width: 767px) {
	.machine-gallery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.lightbox__figure { padding: 70px 12px 90px; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; }
	.machine-body__inner { grid-template-columns: minmax(0, 1fr); }
	.machine-body__aside { position: static; }
	:root { --header-h: 76px; }
	.admin-bar .header { top: 46px; }
	.header { padding-top: 16px; }
	.header__wordmark { width: 140px; }
	img.header__wordmark.is-uploaded { max-width: 140px; max-height: 48px; }
	.hamburger-nav__group { padding: 30px 28px 26px 24px; }
	.hero--home .hero__title br { display: none; }
	.hero--home .hero__title { text-wrap: balance; }
	.about__star { top: -150px; right: -70px; width: 190px; opacity: 0.7; }
	.footer__bottom { padding-bottom: 56px; }
	.whatsapp { width: 56px; bottom: 20px; }

	.brands__list,
	.contact-cards__list,
	.category-grid__list { grid-template-columns: minmax(0, 1fr); }
	.brand-card { padding: 30px 24px 76px; }
	.brand-card__logo { position: static; order: -1; margin-bottom: 18px; object-position: left top; }
	.brand-card__head { flex-direction: column; align-items: flex-start; gap: 0; }
	.category-card,
	.advice-card { min-height: 0; }
	.advice-card { padding: 40px 28px; }
	.advice-card__text { padding-top: 60px; }

	.seo-block__inner,
	.seo-block--reverse .seo-block__inner,
	.quote__inner,
	.contact__inner,
	.category-detail__inner { grid-template-columns: minmax(0, 1fr); }
	.seo-block--reverse .seo-block__media { order: 0; }
	.seo-block__media,
	.quote__media { max-width: 480px; }
	.quote__media { order: -1; }
	.form__grid { grid-template-columns: minmax(0, 1fr); }
	.form__actions { justify-content: stretch; }
	.form__submit { width: 100%; }
	.contact-card { min-height: 0; padding: 32px 28px; }

	.gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.gallery__item { aspect-ratio: 16 / 10; }
	.gallery__item--1,
	.gallery__item--2,
	.gallery__item--3 { grid-area: auto; }
	.gallery__item--3 { order: -1; aspect-ratio: 4 / 3.6; }
	.gallery__controls { right: 16px; bottom: 16px; }

	.footer { padding-top: 56px; }
	.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer__top > .footer__col:last-child { grid-column: 1 / -1; }
	.footer__brands { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.footer__brand-col--wide .footer__list { columns: 1; }
	.footer__bottom { flex-direction: column; margin-top: 40px; }
	.footer-nav__link,
	.footer__list li,
	.footer__list a { font-size: 1rem; line-height: 28px; }

	.notch { font-size: 0.875rem; }
	.brand-card__tab,
	.usp__tab { width: 160px; height: 48px; }
}

@media (max-width: 480px) {
	.footer__top { grid-template-columns: minmax(0, 1fr); }
	.filter { gap: 10px; }
	.filter__button { flex: 1 1 auto; padding: 0 18px; font-size: 1rem; }
}

/* Touch devices: hover-only details are shown straight away */
@media (hover: none) {
	.brand-card__tab { transform: none; }
	.brand-card__logo { filter: none; opacity: 1; }
	.brand-card__pattern { opacity: 1; transform: none; }
}