/* ==========================================================================
   alfred. — Home
   All sizes are in Figma pixels × --u, so the 1440×1024 design scales 1:1
   with the viewport (limited by height so nothing overflows short screens).
   ========================================================================== */

:root {
  --black: #232323;
  --red: #ff6b60;
  --cream: #f9f9ef;

  /* Dark panels read this, so a card hover can tint the whole scene */
  --dark-bg: var(--black);

  --u: min(100vw / 1440, 100vh / 1024);

  /* Obviously via Adobe Fonts kit svj0nrs:
     obviously      300i Light Italic · 400 Regular · 400i Italic · 500 Medium · 800 Black · 900i Super Italic
     obviously-wide 700 Wide Bold · 800 Wide Black · 900 Wide Super · 900i Wide Super Italic */
  --font: "obviously", system-ui, sans-serif;
  --font-wide: "obviously-wide", "obviously", system-ui, sans-serif;

  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { background: var(--cream); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Obviously Wide Super */
b, strong, .wide {
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
}

/* Inline SVGs injected from data-svg */
[data-svg] svg { width: 100%; height: auto; overflow: visible; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(72 * var(--u));
  padding: 0 calc(80 * var(--u)) 0 calc(92 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cream);
  background: var(--dark-bg);
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out), transform .8s var(--ease-out);
  transform: translateY(-100%);
}
.nav.is-visible { transform: none; }
.nav[data-theme="light"] { color: var(--black); background: var(--cream); }
.nav[data-theme="light"] .nav__logo { color: var(--red); }

.nav__logo { width: calc(168 * var(--u)); color: var(--cream); transition: color .6s var(--ease-out); }
.nav__links { display: flex; gap: calc(24 * var(--u)); }
.nav__links a {
  font-size: calc(22 * var(--u));
  text-transform: none;   /* thin in small letters, the bold hover copy in capitals (user) */
  letter-spacing: .02em;
}
/* Regular and Wide Super copies stacked (JS); hover crossfades so it never snaps */
.nav__links a { display: inline-grid; justify-items: center; align-items: baseline; }   /* both copies on one baseline: the bold one never sits lower */
.nav__links a > span { grid-area: 1 / 1; transition: opacity .08s linear; }   /* slim to bold almost at once, no visible fade (user) */
.nav__links .t-bold { font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; opacity: 0; }
.nav__links a:hover .t-reg { opacity: 0; }
.nav__links a:hover .t-bold { opacity: 1; }   /* bold on hover only, never for the page you are on (user) */
/* nav words never lift or grow on hover: every label stays on one line (user) */
.nav__links a.pop:hover, .nav__lang .pop:hover { transform: none; }


/* Language: current one in the nav; hover drops the other one down */
.nav__lang { position: relative; display: flex; }
.nav__lang-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
  background: var(--dark-bg);
  opacity: 0;
  transform: translate(-50%, calc(-8 * var(--u)));
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-pop);
}
.nav[data-theme="light"] .nav__lang-menu { background: var(--cream); }
.nav__lang:hover .nav__lang-menu,
.nav__lang:focus-within .nav__lang-menu { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nav__lang.is-closing .nav__lang-menu { opacity: 0; transform: translate(-50%, calc(-8 * var(--u))); pointer-events: none; }

/* ---------- FX: film grain over the whole site (subtle, always on) ---------- */
.fx-grain {
  position: fixed;
  z-index: 9999;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.6' intercept='-.8'/><feFuncG type='linear' slope='2.6' intercept='-.8'/><feFuncB type='linear' slope='2.6' intercept='-.8'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  /* contrasty specks at low opacity: visible on cream and on Rich Black alike, never loud */
  opacity: .12;   /* +20% from .1 */
  animation: grain .9s steps(9) infinite;
  transition: opacity .6s var(--ease-out);
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  11%  { transform: translate(-3%, 2%); }
  22%  { transform: translate(2%, -4%); }
  33%  { transform: translate(-4%, -1%); }
  44%  { transform: translate(3%, 3%); }
  55%  { transform: translate(-1%, 4%); }
  66%  { transform: translate(4%, -2%); }
  77%  { transform: translate(-2%, -3%); }
  88%  { transform: translate(1%, 2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .fx-grain { animation: none; } }

/* ---------- Hover pop (all buttons) ---------- */
.pop { display: inline-block; transition: transform .45s var(--ease-pop); will-change: transform; }
.pop:hover { transform: translateY(calc(-4 * var(--u))) scale(1.06); }

/* ---------- 01 / 02 framed red windows ---------- */
.frame { height: 100vh; padding: calc(45 * var(--u)); background: var(--cream); }
.window {
  height: 100%;
  border-radius: calc(16 * var(--u));
  background: var(--red);
  color: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* content may step past the window's edge, as in Figma */
#header .window { overflow: visible; }
.opening__logo { width: calc(411 * var(--u)); opacity: 0; }

.header__text {
  width: calc(846 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: calc(75 * var(--u));   /* Figma: 75 on 64 */
  text-align: center;
  /* the five lines are fixed with <br>; never let the browser add a sixth */
  white-space: nowrap;
}
/* text block */
.header__block { position: relative; width: calc(846 * var(--u)); }

/* ---------- Horizontal journey ---------- */
.journey { height: 100vh; overflow: hidden; position: relative; }
.track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.panel { position: relative; height: 100vh; flex: none; overflow: hidden; }
.panel--dark  { background: var(--dark-bg); color: var(--cream); transition: background-color .7s var(--ease-out); }
.panel--cream { background: var(--cream); color: var(--black); }

/* Scene colour hand-off layer (faded out by the journey timeline) */
.panel { isolation: isolate; }
.fade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene-fade { background: var(--cream); }

/* 02 - Header */
#header { width: 100vw; }

/* 03 - Hero: shares the screen with the work column */
#hero {
  width: calc(100vw - 576 * var(--u));
  display: grid;
  place-items: center;
  padding-inline: calc(64 * var(--u));
  container-type: inline-size;
}
.hero__inner { text-align: right; }
/* Sized from the panel's own width as well as the screen, so "BUSINESS" always fits */
.hero__kicker {
  font-size: calc(var(--hero-fs) * 64 / 160);
  line-height: calc(var(--hero-fs) * 75 / 160);
  /* Figma: both boxes are bottom-aligned, so HAPPY starts 65 below the kicker's top */
  margin-bottom: calc(var(--hero-fs) * -10 / 160);
}
.hero__title {
  font-size: var(--hero-fs);
  line-height: calc(var(--hero-fs) * 148 / 160);
  color: var(--red);
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
}

/* 04 - Selected work */
.panel--work { width: calc(576 * var(--u)); }
.work__col {
  width: calc(422 * var(--u));
  margin-left: calc(77 * var(--u));
  padding: calc(120 * var(--u)) 0 calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--u));
  will-change: transform;
}

/* Figma component: Project Card (Image radius 16, Project Info 24 below, white text) */
.card { display: block; position: relative; }
/* hover outline: the warped image shape stroked in the pop-up red */
.card__ring {
  position: absolute; left: 0; top: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  /* on top of the image: the inner half of the stroke covers the image's
     anti-aliased edge, so nothing peeks out between photo and border */
  z-index: 2;
}
.card__ring path { fill: none; stroke: var(--red); stroke-width: calc(12 * var(--u)); stroke-linejoin: round; }
/* Hover: JS moves the four corners of a rounded clip path independently (gardeners) */
.card__media {
  position: relative; z-index: 1;
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  will-change: clip-path;
  background: var(--cream);
}
.card--4x3 .card__media { aspect-ratio: 4 / 3; }
.card--3x4 .card__media { aspect-ratio: 3 / 4; }
.card--3x3 .card__media { aspect-ratio: 1; }
/* Placeholder until real images: off-white with the Figma transparency grid */
.card__img {
  width: 100%; height: 100%;
  background-color: var(--cream);
  /* grid squares: Rich Black at 7% over Off White, so only brand colours are used */
  background-image: conic-gradient(rgba(35, 35, 35, .07) 25%, transparent 0 50%, rgba(35, 35, 35, .07) 0 75%, transparent 0);
  background-size: calc(60 * var(--u)) calc(60 * var(--u));
  background-position: center;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-out);
}
.card__meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: calc(8 * var(--u));
  padding-top: calc(24 * var(--u));
  color: var(--cream);   /* Off White #F9F9EF */
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
}

.card:hover .card__img { transform: scale(1.06); }

/* Hover description: off-white panel rises from the bottom over half the image */
.card__media { position: relative; }
/* .card__desc only slides; .card__sheet is the paper itself, which JS maps
   onto the warped card shape so the text bends with it */
.card__desc {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(100% / 3);
  transform: translateY(101%);
  transition: transform .75s var(--ease-out);
}
.card__sheet {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* equal space left and right of the text */
  padding: 0 calc(24 * var(--u));
  background: var(--red);
  color: var(--black);
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  /* lifts it off the off-white placeholder underneath */
  box-shadow: 0 calc(-6 * var(--u)) calc(24 * var(--u)) rgba(35, 35, 35, .12);
  transform-origin: 0 0;
  will-change: transform;
}
.card__desc p {
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  /* centred, balanced lines: the gap to the left and right edge is the same */
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.card__more {
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
.card:hover .card__desc { transform: none; }
/* text follows the panel up a beat later */
.card:hover .card__desc p { opacity: 1; transform: none; transition-delay: .12s; }

/* Title eases from upright to italic: two stacked copies crossfade */
.card__meta strong { display: grid; justify-items: end; }
.card__meta strong > span { grid-area: 1 / 1; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.card__meta .t-it { font-style: italic; opacity: 0; transform: translateX(calc(6 * var(--u))); }
.card:hover .t-up { opacity: 0; transform: translateX(calc(-6 * var(--u))); }
.card:hover .t-it { opacity: 1; transform: none; }

/* MORE WORK badge */
.badge {
  position: relative;
  align-self: center;
  width: calc(260 * var(--u));
  aspect-ratio: 1;
  margin-top: calc(20 * var(--u));
}
.badge__ring { position: absolute; inset: 0; animation: spin 12s linear infinite; }
.badge__ring text {
  fill: var(--red);
  font-size: 15px;
  letter-spacing: .1em;
}
.badge__arrow {
  position: absolute;
  width: 46%;
  left: 27%; top: 27%;
  transition: transform .5s var(--ease-pop);
}
/* Arrow swings to point right: "keep going this way" */
.badge:hover .badge__arrow { transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 05 - About */
.panel--about { width: 100vw; }
.about__col {
  width: calc(1062 * var(--u));
  margin-left: calc(50vw - 531 * var(--u));
  padding: calc(178 * var(--u)) 0 calc(140 * var(--u));
  will-change: transform;
}
.about__head {
  display: flex;
  justify-content: flex-end;
  /* Figma: intro starts 128 below the column top, WHO WE ARE 636 below it */
  padding-top: calc(128 * var(--u));
  min-height: calc(636 * var(--u));
}
.about__intro {
  width: calc(628 * var(--u));
  margin-right: calc(52 * var(--u));   /* intro ends at x 1199, not the column edge */
  font-size: calc(64 * var(--u));
  line-height: calc(75 * var(--u));
  text-align: right;
}
.about__title {
  font-size: calc(96 * var(--u));
  line-height: calc(75 * var(--u));
  color: var(--red);
  font-family: var(--font-wide);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: calc(80 * var(--u));
}
.about__lead {
  width: calc(736 * var(--u));
  font-size: calc(48 * var(--u));
  font-style: italic;
  line-height: calc(52 * var(--u));
  margin-bottom: calc(80 * var(--u));
}
/* Figma: Obviously Super Italic (not the wide cut) */
.about__lead b { font-family: var(--font); font-weight: 900; text-transform: none; font-style: italic; }
.about__body { width: calc(414 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(25 * var(--u)); margin-bottom: calc(80 * var(--u)); }

/* Buttons (Figma: Button / About, Button / Contact) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(82 * var(--u));
  padding: 0 calc(48 * var(--u));
  border-radius: calc(72 * var(--u));
  border: calc(3 * var(--u)) solid var(--black);
  background: var(--red);
  color: var(--black);
  font-size: calc(40 * var(--u));
  font-family: var(--font-wide);
  font-weight: 800;   /* Wide Black */
  text-transform: uppercase;
  white-space: nowrap;
  /* Obviously keeps room for descenders that capitals never use, so the caps sat
     ~0.125em low; this lifts them to the optical centre (measured on every button) */
  padding-bottom: .25em;
}
.btn--red { color: var(--cream); border-color: var(--cream); }

/* 06 - Services strip */
.panel--strip { width: calc(185 * var(--u)); display: flex; justify-content: center; }
/* The rail stays still; only the text inside it travels (no dashed lines, user 2026-10-27) */
.strip__rail {
  width: calc(75 * var(--u));
  height: 100%;
  overflow: hidden;
}
.strip__loop { display: flex; flex-direction: column; will-change: transform; }
.strip__loop span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: calc(58 * var(--u));
  line-height: calc(71 * var(--u));
  font-family: var(--font-wide);
  font-weight: 900;
  white-space: nowrap;
  /* each copy ends with the gap before the next "COMMERCE", so the seam is invisible */
  padding-top: .5em;
}

/* 07 - Footer */
.panel--footer { width: 100vw; color: var(--red); transition: none; }
.footer__info {
  position: absolute;
  left: calc(147 * var(--u)); top: calc(194 * var(--u));
  display: flex;
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));   /* Figma: 25 */
}
/* Figma: the columns start at x 147, 441 and 923; the last box is 371 wide, so the address wraps */
.footer__col { flex: none; }
.footer__col:nth-child(1) { width: calc(294 * var(--u)); }
.footer__col:nth-child(2) { width: calc(482 * var(--u)); }
.footer__col:nth-child(3) { width: calc(371 * var(--u)); }
/* Figma: each block starts 48-49 below the previous one */
.footer__col { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.footer__col a + a { margin-top: calc(-24 * var(--u)); }   /* phone + email are one 2-line block */
.footer__col a { transition: color .5s var(--ease-out); }
.footer__col a:hover { color: var(--cream); }
.panel--footer .btn { position: absolute; left: calc(485 * var(--u)); top: calc(511 * var(--u)); width: calc(471 * var(--u)); }
.footer__logo {
  position: absolute;
  left: 0;
  bottom: calc(-96 * var(--u));
  width: calc(1562 * var(--u));
  color: var(--cream);
}

/* ---------- Text split helpers (hidden until revealed; JS removes this) ---------- */
.js .split-chars, .js .split-words, .js .split-lines, .js .reveal-up, .js .reveal-pop { visibility: hidden; }
.split-chars .char, .split-words .word { display: inline-block; will-change: transform, opacity; }
.split-chars .word { white-space: nowrap; }
.line-mask { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

@media (prefers-reduced-motion: reduce) {
  .badge__ring, .strip__loop { animation: none; }
}

/* ---------- Letter case, everywhere (user, 2026-11-03): thin, regular text in small letters,
   fat (Wide / bold) text in capitals. Each page's fat styles set their own capitals. ---------- */
body { text-transform: none; }
/* what visitors type stays as they type it; only the examples follow the rule */
input, textarea, select { text-transform: none; }
input::placeholder, textarea::placeholder { text-transform: none; }

/* every photo that zooms on hover stays inside its rounded corners (the browser otherwise draws a
   transforming image square until the zoom ends) */
.wcard, .nimg, .card__media, .w-card, .w-card__media, .ab-pop__media, .ab-card {
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* ==========================================================================
   Phones and upright tablets (user, 2026-11-04): a hamburger instead of the links
   (same query as MOBILE_Q in core.js)
   ========================================================================== */
.nav__burger, .nav-sheet { display: none; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  body .nav.nav { height: calc(var(--navh) + var(--pad)); padding: 0 18px 0 24px; }   /* ends exactly where the window starts, so its rounded corners stay whole */
  body .nav.nav .nav__logo { width: 92px; }
  body .nav .nav__links { display: none; }
  .nav__burger { -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 2; display: grid; place-content: center; gap: 7px;
    width: 48px; height: 48px; margin-right: -6px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer;
  }
  .nav__burger i { display: block; width: 28px; height: 3px; border-radius: 3px; background: currentColor; transition: transform .45s var(--ease-pop); }
  .nav__burger[aria-expanded="true"] i:first-child { transform: translateY(5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-5px) rotate(-45deg); }
  .nav-sheet {
    position: fixed; inset: 0; z-index: 62; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px;   /* over the frame, edge to edge */
    background: var(--frame, var(--red)); color: var(--cream);
    clip-path: circle(0% at calc(100% - 44px) 40px); pointer-events: none;
  }
  .is-menu .nav-sheet { pointer-events: auto; }
  /* the nav stays on top the whole time (logo and button never hide), but without its own fill while
     the menu is open: the frame shows through it, so it never shows as a bar */
  .is-menu body .nav.nav { z-index: 63; background: transparent; transition: none; }   /* no fade: a half-see-through nav over the cream edge was the bar */
  .nav-sheet__links { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .nav-sheet__links a { font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; font-size: min(7.5vw, 40px); line-height: 1.3; transform-origin: 50% 100%; }
  .nav-sheet__links a.is-here { color: var(--black); }
  .nav-sheet__lang { display: flex; gap: 10px; }
  .nav-sheet__lang button { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 40px; padding: 0 0 .12em; font: inherit; font-size: 17px; line-height: 1; text-transform: none; color: inherit; background: none; border: 2px solid currentColor; border-radius: 99px; cursor: pointer; }
  .nav-sheet__lang button.is-on { background: var(--cream); color: var(--frame, var(--red)); border-color: var(--cream); }
  /* the other pages: the same frame as the homepage on phones (the window starts under the 64px nav) */
  body:is(.page-work, .page-services, .page-about, .page-contact, .page-case, .page-werkwijze) { --edge: 6px; --edge-radius: 30px; --pad: 8px; --navh: 50px; --radius: 22px; }
  html, body { overflow-x: clip; }
  /* the grain stands still on phones: a moving full-screen layer makes scrolling stutter */
  .fx-grain { animation: none; inset: 0; }
}

/* no grey tap flash on phones: every button and link animates its own press */
html { -webkit-tap-highlight-color: transparent; }

/* Phones: the browser's address bar slides in and out as you scroll. Anything pinned to the bottom of the
   screen jumped when it finished (a cut). The frame is pinned to the top instead and as tall as the
   screen with the bar hidden, so the bar simply slides over and off its foot, smoothly (user, 2026-11-04). */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  body:is(.page-home2, .page-work, .page-services, .page-about, .page-contact, .page-case, .page-werkwijze) .site-mask { bottom: auto; height: calc(100lvh - 2 * var(--edge)); }
  body:is(.page-work, .page-services, .page-about, .page-contact, .page-case, .page-werkwijze) :is(.w-window, .svc-window, .ab-window, .ct-window, .cs-window, .ww-window) { bottom: auto; height: calc(100lvh - var(--win-top) - var(--edge) - var(--pad)); }
  body.page-home2::after { bottom: auto !important; height: calc(100lvh - 2 * var(--edge) - 58px - var(--pad)); }
}

/* the CMS's preview: a tag on the page, so nobody mistakes the draft for the live site */
html.is-preview body::before { content: "preview · not live yet"; position: fixed; left: 50%; bottom: 14px; z-index: 999; transform: translateX(-50%); padding: 8px 16px 10px; border-radius: 99px; background: #232323; color: #f9f9ef; font: 500 14px/1 var(--font); pointer-events: none; }

/* ---------- a compact nav (user, 2026-11-06): like Stiff's, words 30% smaller (desktop) ---------- */
.nav__links a { font-size: calc(22 * .7 * var(--u)); }
.nav__links { gap: calc(20 * var(--u)); }
.nav__logo { width: calc(124 * var(--u)); }

/* ---------- buttons = the Figma component "Button" (user, 2026-11-09) ----------
   salmon, no outline, Wide Black 20 in Rich Black, 24 padding, fully rounded, about 63 high; the text sits
   dead centre (the font's empty space above and below the capitals is trimmed away). Hover: a hard
   Rich Black shadow 2 left and 6 down (core.js). One size for every button on the site. */
body .btn.btn {
  height: auto !important; width: auto !important; min-width: 0 !important;
  padding: calc(24 * var(--u)) calc(24 * var(--u)) !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--font-wide) !important; font-weight: 800 !important; font-size: calc(20 * var(--u)) !important; line-height: 1 !important;
  text-transform: uppercase; white-space: nowrap; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-box: trim-both cap alphabetic;
}
body .btn.btn > * { text-box: trim-both cap alphabetic; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  body .btn.btn { padding: 16px 18px !important; font-size: 14px !important; }
}

/* letter case (user, 2026-11-11): thin text exactly as typed; fat text always in capitals */
.is-blank { display: none !important; }   /* a text emptied in the CMS */
/* a section switched off in the CMS; a simple section added in the CMS (a headline, a line, a picture) */
.is-off { display: none !important; }
.x-sec { width: calc(1000 * var(--u)); max-width: calc(100% - 32px); margin: calc(150 * var(--u)) auto 0; text-align: center; }
.x-sec__title { margin: 0; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); font-size: calc(80 * var(--u)); line-height: .95; overflow-wrap: anywhere; }
.x-sec__text { margin: calc(28 * var(--u)) auto 0; max-width: calc(800 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.35; color: var(--black); }
.x-sec__img { display: block; width: 100%; height: auto; margin-top: calc(48 * var(--u)); border-radius: calc(16 * var(--u)); }
@media (orientation: portrait) {
  .x-sec { width: auto; margin: calc(120 * var(--u)) calc(40 * var(--u)) 0; max-width: none; }
  .x-sec__title { font-size: calc(46 * var(--u)); }
  .x-sec__text { max-width: none; font-size: max(16px, calc(30 * var(--u))); }
}
/* the language on a computer: a toggle switch, NL | EN (user, 2026-11-11) */
.lang-sw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; height: calc(30 * var(--u)); min-height: 22px; padding: 0; border: 1.5px solid currentColor; border-radius: 99px; background: none; color: inherit; cursor: pointer; font: inherit; font-size: calc(15 * var(--u)); letter-spacing: .04em; }
.lang-sw__opt { position: relative; z-index: 1; padding: 0 calc(11 * var(--u)); line-height: 1; transition: color .35s var(--ease-out); }
.lang-sw__knob { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 99px; background: currentColor; transition: transform .4s var(--ease-pop); }
.lang-sw.is-en .lang-sw__knob { transform: translateX(100%); }
.lang-sw:not(.is-en) .lang-sw__opt--nl, .lang-sw.is-en .lang-sw__opt--en { color: var(--frame, var(--black)); }
.lang-sw:hover .lang-sw__knob { filter: brightness(.92); }
.lang-sw:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* the language switch: smaller than the menu words (user, 2026-11-11) */
.lang-sw { height: calc(22 * var(--u)); min-height: 18px; font-size: calc(11 * var(--u)); border-width: 1px; }
.lang-sw__opt { padding: 0 calc(8 * var(--u)); }
.lang-sw__knob { top: 1.5px; bottom: 1.5px; left: 1.5px; width: calc(50% - 1.5px); }
/* smaller still (user, 2026-11-11): a small pill, clearly smaller than the menu words */
.lang-sw { height: calc(17 * var(--u)); min-height: 15px; font-size: calc(9 * var(--u)); letter-spacing: .06em; }
.lang-sw__opt { padding: 0 calc(6 * var(--u)); }
.lang-sw__knob { top: 1px; bottom: 1px; left: 1px; width: calc(50% - 1px); }