/* =============================================================================
   GroundDeck website - styles.css

   The design handoff in docs/handoff/landingpage ("GroundDeck Landing" and
   its five service pages, 2026-09-28) rebuilt as classes: the prototype is
   written in inline styles and React state, and the site allows neither (the
   Worker's Content-Security-Policy forbids inline style and inline script).
   Every value below is the prototype's; the states it kept in React are
   attributes and classes that src/site.ts sets.

   This one file is also what the dashboard's website editor draws with
   (CLAUDE-Site.md §7), so every class a page uses lives here.

     1.  Tokens and the base
     2.  Shared pieces: buttons, labels, ticks, the mark, the GD icons, plates
     3.  Bands: the stacked sections with their two tabs
     4.  The header, the Voorbeelden menu and the mobile menu
     5.  Homepage: hero
     6.  Homepage: what we solve
     7.  Homepage: why GroundDeck
     8.  Homepage: the process
     9.  Homepage: work
     10. FAQ
     11. Contact
     12. Footer and the mobile call to action
     13. Service pages: the shared parts
     14. Automatisering
     15. Koppelingen
     16. Planning en samenwerking
     17. Klantportaal
     18. Dashboard
     19. The editor's extra sections and widgets
     20. CMS utilities: the editor's Style tab
   ========================================================================== */

/* =============================================================================
   1. Tokens and the base
   ========================================================================== */

/* IBM Plex Mono (SIL Open Font Licence), the labels' face, served from this
   site (public/fonts/, the Latin subset) rather than Google Fonts, so a visit
   sends no visitor's address to a third party. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --ink: #101216;
  --ink-2: #1A1D24;
  --ink-3: #232730;
  --ink-line: #2A2F38;
  --blue: #1B6FD0;
  --blue-deep: #1557A8;
  --blue-mid: #1667C2;
  --sky: #6AAEF5;
  --sky-2: #56A8F5;
  --sky-3: #8DBDF3;
  --sky-pale: #D5E6FA;
  --sky-text: #F4F8FE;
  --tint: #EAF1FB;
  --grey: #F2F3F5;
  --stone: #F6F4EF;
  --paper: #FBFAF8;
  --white: #FFFFFF;
  --line: #ECEAE4;
  --line-2: #E4E0D6;
  --line-3: #D9D5CB;
  --text: #353A43;
  --text-muted: #4A505A;
  --text-soft: #5B6270;
  --text-subtle: #6B7079;
  --text-faint: #8A919C;
  --on-dark: #C3C8D0;
  --on-dark-2: #A3AAB5;

  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: clamp(56px, 9vh, 88px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--blue);
}

input,
textarea,
button {
  font-family: inherit;
}

::placeholder {
  color: var(--text-subtle);
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

/* "Naar de inhoud": the first thing a keyboard reaches, shown only then. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  color: #fff;
  transform: none;
}

/* A panel the script shows or hides; the editor lifts it to edit what is inside. */
[hidden] {
  display: none !important;
}

.hl {
  color: var(--blue);
}

.hl-sky {
  color: var(--sky);
}

.hl-ink {
  color: var(--ink);
}

.hl-white {
  color: #fff;
}

.nowrap {
  white-space: nowrap;
}

/* The icon sprite (siteRender.ts): drawn once, used by name. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =============================================================================
   2. Shared pieces
   ========================================================================== */

/* Buttons: pills. The arrow is part of the words ("Plan een gesprek →"). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}

.btn--lg {
  padding: 17px 26px;
  font-size: 16px;
}

.btn--md {
  padding: 15px 22px;
}

.btn--mds {
  padding: 15px 20px;
}

.btn--sm {
  padding: 13px 18px;
}

.btn--xs {
  padding: 13px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  background: var(--blue);
  color: #fff;
}

.btn--dark-inverse {
  background: var(--ink);
  color: #fff;
}

.btn--dark-inverse:hover {
  background: #fff;
  color: var(--ink);
}

.btn--blue {
  background: var(--blue);
  color: #fff;
}

.btn--blue:hover {
  background: var(--ink);
  color: #fff;
}

.btn--light {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}

.btn--light:hover,
.btn--plain:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

.btn--plain {
  background: #fff;
  color: var(--ink);
}

.btn--white {
  background: #fff;
  color: var(--ink);
}

.btn--white:hover {
  background: var(--ink);
  color: #fff;
}

.btn--white-blue {
  background: #fff;
  color: var(--ink);
}

.btn--white-blue:hover {
  background: var(--blue);
  color: #fff;
}

.btn--white-sky {
  background: #fff;
  color: var(--ink);
}

.btn--white-sky:hover,
.btn--sky {
  background: var(--sky);
  color: var(--ink);
}

.btn--sky:hover {
  background: #fff;
  color: var(--ink);
}

.btn--ghost-light {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.btn--ghost-light:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}

.btn--ghost-dark {
  color: #fff;
  box-shadow: inset 0 0 0 1px #3A404A;
}

.btn--ghost-dark:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* Mono labels above things: "WAT JE MERKT", "OOK INTERESSANT". */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
}

.label--12 {
  font-size: 12px;
}

.label--bold {
  font-weight: 600;
  letter-spacing: .04em;
}

.label--blue { color: var(--blue); }
.label--mid { color: var(--blue-mid); }
.label--grey { color: var(--text-soft); }
.label--slate { color: var(--text-muted); }
.label--pale { color: var(--sky-text); }
.label--sky { color: var(--sky-3); }
.label--faint { color: var(--text-faint); }

/* A small pill tag: "Gratis", "Eerst zien". */
.badge {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--sm {
  padding: 4px 10px;
}

.badge--blue {
  background: var(--blue);
  color: #fff;
}

.badge--tint {
  background: var(--tint);
  color: var(--blue-deep);
}

.badge--white {
  background: #fff;
  color: var(--blue-deep);
}

/* The tick before "what you notice", drawn in the current colour. */
.tick {
  flex: none;
  width: 12px;
  height: 7px;
  margin-top: -4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.tick--blue {
  color: var(--blue);
}

.tick--white {
  color: #fff;
}

.tick--sm {
  width: 10px;
  height: 6px;
  margin-top: -3px;
}

/* A tick on a round blue button-like dot. */
.check-dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
}

.check-dot--28 {
  width: 28px;
  height: 28px;
}

.check-dot::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Round placeholders for a face. */
.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E4EEFB;
}

.avatar--40 { width: 40px; height: 40px; }
.avatar--48 { width: 48px; height: 48px; }
.avatar--52 { width: 52px; height: 52px; }
.avatar--sky { background: var(--sky-2); }

/* The mark in a round placeholder (the FAQ's and the contact block's cards). */
.avatar--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0E1116;
}

.avatar--logo > .mark {
  width: 100%;
  height: 100%;
}

/* A small coloured dot. */
.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
}

.dot--7 { width: 7px; height: 7px; }
.dot--10 { width: 10px; height: 10px; }

/* The GroundDeck mark from spans: a tile, the blue L and the square. */
.mark {
  position: relative;
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #0E1116;
}

.mark > span {
  position: absolute;
  display: block;
}

.mark__v {
  left: 25%;
  top: 25%;
  width: 12.5%;
  height: 50%;
  background: var(--sky-2);
}

.mark__h {
  left: 25%;
  top: 62.5%;
  width: 50%;
  height: 12.5%;
  background: var(--sky-2);
}

.mark__sq {
  left: 56%;
  top: 25%;
  width: 19%;
  height: 19%;
  background: var(--paper);
}

.mark--tile {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.mark--tile .mark__v { left: 23.4%; top: 23.4%; width: 14%; height: 53.1%; }
.mark--tile .mark__h { left: 23.4%; top: 62.5%; width: 53.1%; height: 14%; }
.mark--tile .mark__sq { left: 56.25%; top: 23.4%; width: 20.3%; height: 20.3%; }

/* ---------------------------------------------------------------------------
   GD icons: the six little pictures of the service pages (GDIcon in the
   design), a 52px tile scaled to its size. Tone by class: blue, mono or
   outline; a lit parent (hover, the page you are on) turns mono to blue.
   ------------------------------------------------------------------------- */

.gdi {
  --s: 52;
  --gdi-bg: var(--blue);
  --gdi-c1: #fff;
  --gdi-c2: var(--sky-3);
  --gdi-blend: screen;
  --gdi-o6bg: var(--stone);
  --gdi-o6ring: #fff;
  --gdi-o6dash: #9AA6B8;
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--s) * 1px);
  height: calc(var(--s) * 1px);
}

.gdi--mono {
  --gdi-bg: #EEF0F3;
  --gdi-c1: var(--ink);
  --gdi-c2: #A9B2BF;
  --gdi-blend: multiply;
}

.gdi--outline {
  --gdi-bg: transparent;
  --gdi-o6bg: transparent;
  --gdi-o6ring: transparent;
  --gdi-o6dash: rgba(255, 255, 255, .4);
}

.hero-tile:hover .gdi,
.mega__item:hover .gdi,
.mega__item[aria-current="page"] .gdi {
  --gdi-bg: var(--blue);
  --gdi-c1: #fff;
  --gdi-c2: var(--sky-3);
  --gdi-blend: screen;
}

.gdi--s44 { --s: 44; }
.gdi--s72 { --s: 72; }
.gdi--s76 { --s: 76; }
.gdi--s88 { --s: 88; }
.gdi--s104 { --s: 104; }
.gdi--s110 { --s: 110; }
.gdi--s130 { --s: 130; }

.gdi__tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gdi-bg);
  transform: scale(calc(var(--s) / 52));
  transform-origin: 0 0;
  transition: background .25s;
}

.gdi__tile span {
  display: block;
}

.gdi__lines {
  position: absolute;
  inset: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
}

.gdi__lines > span {
  height: 5px;
  border-radius: 2px;
  background: var(--gdi-c1);
}

.gdi__lines > span:nth-child(2) { width: 66%; }
.gdi__lines > span:nth-child(3) { width: 33%; }

.gdi__ring {
  position: absolute;
  left: 9px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--gdi-c1);
}

.gdi__disc {
  position: absolute;
  left: 22px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gdi-c2);
  mix-blend-mode: var(--gdi-blend);
}

.gdi__rail {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 25px;
  height: 2px;
  background: var(--gdi-c2);
}

.gdi__node {
  position: absolute;
  top: 21px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gdi-c1);
}

.gdi__node:nth-child(2) { left: 8px; }
.gdi__node:nth-child(3) { left: 21px; }
.gdi__node:nth-child(4) { left: 34px; }

.gdi__head {
  position: absolute;
  left: 19px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gdi-c1);
}

.gdi__body {
  position: absolute;
  left: 13px;
  top: 28px;
  width: 26px;
  height: 14px;
  border-radius: 13px 13px 3px 3px;
  background: var(--gdi-c2);
}

.gdi__grid {
  position: absolute;
  inset: 0;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 12px;
}

.gdi__grid > span {
  border-radius: 2px;
  background: var(--gdi-c2);
}

.gdi__grid > span:first-child {
  background: var(--gdi-c1);
}

.gdi__frame {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--gdi-o6bg);
  box-shadow: inset 0 0 0 2px var(--gdi-o6ring);
}

.gdi__dash {
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 2.5px dashed var(--gdi-o6dash);
}

/* ---------------------------------------------------------------------------
   Plates: the isometric tiles behind a hero or a section.
   ------------------------------------------------------------------------- */

.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  pointer-events: none;
}

.deco--flat {
  border-radius: 0;
}

.plate {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 56px;
  background: #F0F4FA;
  box-shadow: -18px 18px 0 #E3EAF4;
  transform: rotateX(58deg) rotateZ(-45deg);
}

.plate--line {
  background: none;
  box-shadow: none;
  border: 1.5px solid #E1E5EB;
}

.plate--blue-line {
  background: none;
  box-shadow: none;
  border: 1.5px solid var(--sky-3);
}

.deco--hero .plate { left: -190px; }
.deco--hero .plate:nth-child(1) { top: 214px; }
.deco--hero .plate:nth-child(2) { top: 364px; }
.deco--hero .plate:nth-child(3) { top: 514px; }
.deco--hero .plate:nth-child(4) { top: 664px; }

.deco--right .plate { right: -190px; }
.deco--right .plate:nth-child(1) { top: -60px; }
.deco--right .plate:nth-child(2) { top: 90px; }
.deco--right .plate:nth-child(3) { top: 240px; }

.deco--left .plate { left: -190px; }
.deco--left .plate:nth-child(1) { top: -40px; }
.deco--left .plate:nth-child(2) { top: 110px; }
.deco--left .plate:nth-child(3) { top: 260px; }

.deco--sub .plate { right: -190px; }
.deco--sub .plate:nth-child(1) { top: 180px; }
.deco--sub .plate:nth-child(2) { top: 330px; }

@media (max-width: 759px) {
  .deco--hero .plate { left: -270px; }
}

/* Striped stand-ins for a picture, labelled with what goes there. A picture
   placed inside one fills it. */
.visual {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px;
  background: repeating-linear-gradient(135deg, var(--v1) 0 12px, var(--v2) 12px 24px);
  color: var(--vc);
  font-family: var(--font-mono);
  font-size: 12px;
  --v1: #232730;
  --v2: #1C1F26;
  --vc: var(--text-faint);
}

.visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual--tint { --v1: var(--tint); --v2: #E0EAF7; --vc: #5F6B7A; }
.visual--tint-2 { --v1: #D6E3F4; --v2: #E0EAF7; --vc: #5F6B7A; }
.visual--blue { --v1: #2A7BDB; --v2: #1F72D4; --vc: var(--sky-text); }
.visual--4x3 { aspect-ratio: 4 / 3; }
.visual--wide { aspect-ratio: 21 / 8; min-height: 220px; }
.visual--tall { min-height: 320px; }

/* Grids that fit as many columns of at least --fit as there is room for. */
.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fit, 300px)), 1fr));
  gap: 12px;
}

.fit--160 { --fit: 160px; }
.fit--190 { --fit: 190px; }
.fit--210 { --fit: 210px; }
.fit--220 { --fit: 220px; }
.fit--240 { --fit: 240px; }
.fit--250 { --fit: 250px; }
.fit--280 { --fit: 280px; }
.fit--300 { --fit: 300px; }
.fit--340 { --fit: 340px; }
.fit--360 { --fit: 360px; }
.fit--380 { --fit: 380px; }
.fit--420 { --fit: 420px; }
.fit--440 { --fit: 440px; }
.fit--460 { --fit: 460px; }

/* =============================================================================
   3. Bands

   Every section after the hero is a band: a rounded sheet laid 32px over the
   one before, with two coloured tabs peeking out above it. The sheet is the
   band's ::before; the tabs are the pseudo-elements of its first child,
   .band__tabs, painted beneath the sheet. isolation keeps each band's layers
   to itself, so a later band always lies on an earlier one.
   ========================================================================== */

.band {
  --band-bg: #fff;
  --tab-1: #E4EBF5;
  --tab-2: #EFF3F9;
  position: relative;
  isolation: isolate;
  margin-top: -32px;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px 32px 0 0;
  background: var(--band-bg);
  pointer-events: none;
}

/* The tabs reach 12px past the band's sides, which is past the screen's edge:
   clipped sideways here (and only sideways, so they still peek out above), or a
   phone could scroll the page left and right. */
.band__tabs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow-x: clip;
  pointer-events: none;
}

.band__tabs::before,
.band__tabs::after {
  content: "";
  position: absolute;
  height: 60px;
  border-radius: 24px 24px 0 0;
}

.band__tabs::before {
  left: 40px;
  right: -12px;
  top: -14px;
  background: var(--tab-1);
}

.band__tabs::after {
  left: -12px;
  right: 24px;
  top: -7px;
  background: var(--tab-2);
}

.band--flip .band__tabs::before {
  left: -12px;
  right: 40px;
}

.band--flip .band__tabs::after {
  left: 24px;
  right: -12px;
}

.band--white { --band-bg: #fff; }
.band--grey { --band-bg: var(--grey); }
.band--tint { --band-bg: var(--tint); --tab-1: #D6E3F4; --tab-2: #E0EAF7; }
.band--stone { --band-bg: var(--stone); --tab-1: #E9E6DE; --tab-2: #F0EEE8; }
.band--ink { --band-bg: var(--ink); --tab-1: var(--ink-line); --tab-2: #1D2128; color: #fff; }
.band--blue { --band-bg: var(--blue); --tab-1: #5E9BE2; --tab-2: #3D85D9; color: #fff; }
.band--tabs-tint { --tab-1: #D6E3F4; --tab-2: #E0EAF7; }

.band__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) var(--gutter) clamp(80px, 12vh, 112px);
}

.band__inner--home {
  padding-top: clamp(56px, 9vh, 80px);
}

.band__inner--short {
  padding: clamp(48px, 8vh, 64px) var(--gutter) clamp(80px, 11vh, 104px);
}

.band__inner--1080 { max-width: 1080px; }
.band__inner--880 { max-width: 880px; }

/* Headings. */
.h-section {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
}

.h-section--mb { margin-bottom: clamp(28px, 4vw, 44px); }
.h-section--mb40 { margin-bottom: clamp(28px, 4vw, 40px); }
.h-section--mb32 { margin-bottom: clamp(20px, 3vw, 32px); }
.h-section--mb56 { margin-bottom: clamp(32px, 5vw, 56px); }
.h-section--mb48 { margin-bottom: clamp(28px, 4vw, 48px); }
.h-section--center { text-align: center; }
.h-section--balance { text-wrap: balance; }
.h-section--760 { max-width: 760px; }
.h-section--720 { max-width: 720px; }

.h-case {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.lead {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}

.lead--slate {
  color: #3A4250;
}

.lead--17 {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.6;
}

.lead--on-dark {
  color: var(--on-dark);
}

/* A heading beside its introduction, bottom-aligned. */
.split-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 20px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.split-head--home {
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vh, 40px);
}

.split-head--services {
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: clamp(24px, 3vw, 32px);
}

.split-head--44 {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.split-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* =============================================================================
   4. The header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: clamp(10px, 2vw, 16px) clamp(12px, 3vw, 40px);
  pointer-events: none;
}

.site-header__wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 32px -16px rgba(16, 18, 22, .28), 0 0 0 1px var(--line);
}

.site-header__brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.site-header__brand:hover {
  background: #EFECE5;
  color: var(--ink);
}

.site-header__nav {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  min-width: 0;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.site-header__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0 11px;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .2s, color .2s;
}

.site-header__link:hover {
  color: var(--blue);
}

.site-header__caret {
  font-size: 9px;
  color: var(--text-faint);
  transition: transform .2s;
}

.site-header__drop[aria-expanded="true"] {
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}

.site-header__drop[aria-expanded="true"] .site-header__caret {
  color: var(--blue);
  transform: rotate(180deg);
}

.site-header[data-on-example] .site-header__drop {
  color: var(--blue);
}

.site-header[data-on-example] .site-header__caret {
  color: var(--blue);
}

.site-header__cta {
  flex: none;
  padding: 15px clamp(16px, 1.8vw, 24px);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
}

.site-header__cta:hover {
  background: var(--ink);
  color: #fff;
}

.site-header__burger {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}

.site-header__burger > span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s;
}

.site-header__burger[aria-expanded="true"] > span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] > span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 979px) {
  .site-header__nav,
  .site-header__cta,
  .mega {
    display: none !important;
  }

  .site-header__burger {
    display: flex;
  }
}

@media (min-width: 980px) {
  .site-menu {
    display: none !important;
  }
}

/* The Voorbeelden menu. */
.mega {
  position: absolute;
  left: 50%;
  top: 100%;
  padding-top: 14px;
  transform: translateX(-50%);
}

.mega__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 900px;
  max-width: calc(100vw - 48px);
  padding: 10px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(16, 18, 22, .35), 0 0 0 1px var(--line);
}

.mega__feature {
  position: relative;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 22px;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
}

.mega__feature:hover {
  background: var(--ink);
  color: #fff;
}

.mega__feature-deco {
  position: absolute;
  right: -30px;
  top: -30px;
  pointer-events: none;
}

.mega__feature-kicker {
  position: relative;
  color: var(--sky-text);
}

.mega__feature-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 85%;
}

.mega__feature-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mega__feature-desc {
  color: var(--sky-text);
  font-size: 15px;
  line-height: 1.45;
}

.mega__feature-btn {
  position: relative;
  align-self: flex-start;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.mega__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 86px;
  overflow: hidden;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line-2), 0 0 0 1px var(--line-2);
  color: var(--ink);
  transition: box-shadow .2s, transform .2s;
}

.mega__item--wide {
  grid-column: 2 / 4;
}

.mega__item:hover,
.mega__item[aria-current="page"] {
  box-shadow: 0 6px 0 var(--line-3), 0 0 0 2px var(--blue);
  color: var(--ink);
}

.mega__item:hover {
  transform: translateY(-2px);
}

.mega__wm {
  position: absolute;
  right: -14px;
  bottom: -18px;
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}

.mega__item:hover .mega__wm,
.mega__item[aria-current="page"] .mega__wm {
  opacity: 1;
  transform: translate(-8px, -8px) rotate(-6deg);
}

.mega__kicker {
  position: relative;
  color: var(--text-faint);
}

.mega__item:hover .mega__kicker,
.mega__item[aria-current="page"] .mega__kicker {
  color: var(--blue);
}

.mega__here,
.mega__item[aria-current="page"] .mega__example {
  display: none;
}

.mega__item[aria-current="page"] .mega__here {
  display: inline;
}

.mega__name {
  position: relative;
  max-width: 72%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* The phone's menu. */
.site-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 10px;
}

.site-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(16, 18, 22, .4), 0 0 0 1px var(--line);
}

.site-menu__label {
  padding: 14px 14px 6px;
  color: var(--blue);
}

.site-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.site-menu__item:hover,
.site-menu__item[aria-current="page"] {
  background: #F0F4FA;
  color: var(--ink);
}

.site-menu__num {
  color: var(--blue-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}

.site-menu__sep {
  display: block;
  height: 1px;
  margin: 8px 14px;
  background: var(--line);
}

.site-menu__big {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.site-menu__big:hover {
  background: var(--stone);
  color: var(--ink);
}

/* On the homepage the menu needs no way home. */
.site-menu__big[aria-current="page"] {
  display: none;
}

.site-menu__arrow {
  color: var(--blue);
  font-size: 16px;
}

.site-menu__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 17px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.site-menu__cta:hover {
  background: var(--ink);
  color: #fff;
}

/* =============================================================================
   5. Homepage: hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: -94px;
  background: #fff;
}

.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(124px, 18vh, 160px) var(--gutter) clamp(80px, 12vh, 112px);
}

.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  max-width: 1000px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 600px;
  margin: clamp(14px, 2.5vh, 22px) 0 0;
  color: var(--text);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  text-wrap: pretty;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: clamp(20px, 3.5vh, 28px);
}

.hero__ctas > .btn {
  flex: 0 1 auto;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: clamp(24px, 5vh, 40px);
  text-align: left;
}

.hero-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 100px;
  overflow: hidden;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line-2), 0 0 0 1px var(--line-2);
  color: var(--ink);
  transition: box-shadow .2s, transform .2s;
}

.hero-tile:hover {
  box-shadow: 0 6px 0 var(--line-3), 0 0 0 2px var(--blue);
  color: var(--ink);
  transform: translateY(-2px);
}

.hero-tile__wm {
  position: absolute;
  right: -18px;
  bottom: -22px;
  opacity: .5;
  pointer-events: none;
  transition: opacity .9s, transform .9s;
}

.hero-tile .gdi {
  --s: 104;
}

.hero-tile.is-peek .hero-tile__wm {
  opacity: .75;
  transform: translate(-6px, -6px) rotate(-4deg);
}

.hero-tile:hover .hero-tile__wm {
  opacity: 1;
  transform: translate(-8px, -8px) rotate(-6deg);
  transition-duration: .3s;
}

.hero-tile__kicker {
  position: relative;
  color: var(--text-subtle);
  transition: color .2s;
}

.hero-tile:hover .hero-tile__kicker {
  color: var(--blue);
}

.hero-tile__label {
  position: relative;
  max-width: 78%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--stone);
}

.hero-quote__text {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.hero-quote__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-quote__who {
  color: var(--text-soft);
  font-size: 12px;
}

.hero-quote__who strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-quote__dots {
  flex: none;
  display: flex;
  gap: 4px;
}

.hero-quote__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--line-3);
  cursor: pointer;
  transition: all .3s;
}

.hero-quote__dot[aria-current="true"] {
  width: 20px;
  background: var(--ink);
}

@media (max-width: 759px) {
  .hero__inner {
    padding-top: 100px;
  }

  .hero__ctas > .btn {
    padding: 16px 24px;
  }

  .hero__second {
    display: none !important;
  }

  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-tile {
    min-height: 88px;
    padding: 12px 14px;
  }

  .hero-tile--wide {
    grid-column: 1 / -1;
  }

  .hero-tile__wm {
    right: -14px;
    bottom: -18px;
  }

  .hero-tile .gdi {
    --s: 72;
  }

  .hero-tile__label {
    max-width: 80%;
    font-size: 14px;
  }

  .hero-quote {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* =============================================================================
   6. Homepage: what we solve
   ========================================================================== */

.problems {
  padding: 16px;
  border-radius: clamp(26px, 4vw, 36px);
  background: rgba(241, 245, 251, .85);
}

.problems__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.problem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: inset 0 0 0 0 transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .25s;
}

.problem[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 28px 50px -30px rgba(16, 18, 22, .45), inset 0 0 0 2px var(--blue);
}

.problem__name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.problem[aria-pressed="true"] .problem__name {
  color: var(--blue);
}

.problem__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #9AA6B8;
}

.problem[aria-pressed="true"] .problem__dot {
  background: var(--blue);
}

.problem--other .problem__dot {
  background: transparent;
  border: 1.5px dashed #9AA6B8;
}

.problem--other[aria-pressed="true"] .problem__dot {
  background: transparent;
  border-color: var(--blue);
}

.problem__bubble {
  position: relative;
  display: block;
  padding: 30px 14px 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 22px -16px rgba(16, 18, 22, .35), 0 0 0 1px #E3E8F0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  transition: all .3s;
}

.problem[aria-pressed="true"] .problem__bubble {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 28px -14px rgba(16, 18, 22, .45);
}

.problem--other .problem__bubble,
.problem--other[aria-pressed="true"] .problem__bubble {
  border: 2px dashed #BFCBDD;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.problem__mark {
  position: absolute;
  left: 14px;
  top: 4px;
  color: var(--blue);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.problem[aria-pressed="true"] .problem__mark {
  color: var(--sky);
}

.problems__panel {
  position: relative;
  margin-top: 10px;
  padding: 20px 24px;
  border-radius: 24px;
  background: var(--blue);
  color: #fff;
}

.problems__arrow {
  position: absolute;
  top: -8px;
  left: calc(16.667% - 12.33px);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--blue);
  transform: rotate(45deg);
  transition: left .35s cubic-bezier(.2, .8, .2, 1);
}

[data-col="1"] .problems__arrow { left: calc(50% - 9px); }
[data-col="2"] .problems__arrow { left: calc(83.333% - 5.67px); }

.problems__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
}

.problems__line {
  flex: 1 1 300px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.problems__notes {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.problems__note {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

/* May shrink to the card, so its two buttons wrap on a phone instead of
   pushing past the screen's edge. */
.problems__actions {
  flex: 0 1 auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problems__card--other {
  gap: 18px 24px;
}

.problems__other {
  flex: 1 1 260px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
}

@media (max-width: 759px) {
  .problems {
    padding: 0;
    background: transparent;
  }

  .problems__tiles {
    display: flex;
    flex-direction: column;
  }

  .problem,
  .problem[aria-pressed="true"] {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .problem__name {
    display: none;
  }

  .problem__bubble {
    padding: 26px 16px 14px;
    font-size: 17px;
  }

  .problem__mark {
    font-size: 32px;
  }

  .problems__panel {
    padding: 18px;
  }

  .problems__arrow {
    display: none;
  }
}

/* =============================================================================
   7. Homepage: why GroundDeck - the stack of plates
   ========================================================================== */

.why__head {
  max-width: 860px;
  margin: 0 auto clamp(28px, 5vh, 48px);
  text-align: center;
}

.why__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 66px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.why__lead {
  max-width: 620px;
  margin: 0 auto;
  color: #3A4250;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.why__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid #C9D8EC;
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.pillar__top {
  display: flex;
  justify-content: space-between;
  color: #5F6B7A;
  font-family: var(--font-mono);
  font-size: 12px;
}

.pillar__mark::before {
  content: "○";
}

.pillar__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.03em;
}

.pillar__desc {
  color: #3F4955;
  font-size: 15px;
  line-height: 1.55;
}

.why__stack {
  position: relative;
  order: -1;
  height: 300px;
  --plate: 220px;
  --plate-top: 98px;
  --plate-step: 54px;
}

.why__plate {
  --lift: 0px;
  position: absolute;
  left: 50%;
  top: calc(var(--plate-top) + var(--i) * var(--plate-step) - var(--lift));
  width: var(--plate);
  height: var(--plate);
  margin-left: calc(var(--plate) / -2);
  margin-top: calc(var(--plate) / -2);
  border: 1px solid #36404C;
  border-radius: 16px;
  background: #1C232C;
  box-shadow: -18px 18px 0 #11161C;
  transform: rotateX(58deg) rotateZ(-45deg);
  cursor: pointer;
  transition: top .35s ease, background .35s, box-shadow .35s, border-color .35s;
}

.why__plate--0 { --i: 0; z-index: 10; background: #222A34; }
.why__plate--1 { --i: 1; z-index: 9; }
.why__plate--2 { --i: 2; z-index: 8; }
.why__plate--3 { --i: 3; z-index: 7; }

.why__bracket {
  position: absolute;
  left: 15%;
  bottom: 15%;
  width: 50%;
  height: 50%;
  border-left: 26px solid var(--sky-2);
  border-bottom: 26px solid var(--sky-2);
  transition: border-color .35s;
}

.why__square {
  position: absolute;
  right: 15%;
  top: 15%;
  width: 18%;
  height: 18%;
  background: var(--paper);
}

[data-layer="0"] .why__plate--0,
[data-layer="1"] .why__plate--1,
[data-layer="2"] .why__plate--2,
[data-layer="3"] .why__plate--3 {
  --lift: 22px;
  border-color: var(--sky-2);
  background: var(--sky-2);
  box-shadow: -18px 18px 0 var(--blue-mid);
}

[data-layer="0"] .why__plate--0 .why__bracket {
  border-color: #0E1116;
}

[data-layer="0"] [data-layer-card="0"],
[data-layer="1"] [data-layer-card="1"],
[data-layer="2"] [data-layer-card="2"],
[data-layer="3"] [data-layer-card="3"] {
  border-color: var(--blue-mid);
  background: #fff;
}

[data-layer="0"] [data-layer-card="0"] .pillar__top,
[data-layer="1"] [data-layer-card="1"] .pillar__top,
[data-layer="2"] [data-layer-card="2"] .pillar__top,
[data-layer="3"] [data-layer-card="3"] .pillar__top {
  color: var(--blue-mid);
}

[data-layer="0"] [data-layer-card="0"] .pillar__mark::before,
[data-layer="1"] [data-layer-card="1"] .pillar__mark::before,
[data-layer="2"] [data-layer-card="2"] .pillar__mark::before,
[data-layer="3"] [data-layer-card="3"] .pillar__mark::before {
  content: "●";
}

.why__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 4vh, 40px);
}

.why__cta .btn {
  padding: 16px 26px;
}

@media (min-width: 980px) {
  .why__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) minmax(0, 1fr);
    gap: 24px;
  }

  .why__stack {
    order: 0;
  }
}

@media (max-width: 759px) {
  .why__stack {
    height: 270px;
    --plate: 180px;
    --plate-top: 82px;
    --plate-step: 44px;
  }
}

/* =============================================================================
   8. Homepage: the process
   ========================================================================== */

.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding: 22px;
  border: 0;
  border-radius: 22px;
  background: var(--stone);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: flex .5s cubic-bezier(.2, .8, .2, 1), background .3s;
}

.step[aria-expanded="true"] {
  gap: 40px;
  background: var(--blue);
  color: #fff;
}

.step__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.step__num {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
  transition: font-size .4s;
}

.step[aria-expanded="true"] .step__num {
  color: #fff;
  font-size: 56px;
}

.step__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
}

.step__toggle::before {
  content: "+";
}

.step[aria-expanded="true"] .step__toggle {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.step[aria-expanded="true"] .step__toggle::before {
  content: "−";
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.step__tag {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.step[aria-expanded="true"] .step__tag {
  color: var(--blue-deep);
}

.step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.step[aria-expanded="true"] .step__title {
  font-size: 30px;
}

.step__desc {
  display: none;
  max-width: 480px;
  color: var(--sky-text);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.step[aria-expanded="true"] .step__desc {
  display: block;
}

@media (min-width: 760px) {
  .steps {
    flex-direction: row;
    height: clamp(320px, 50vh, 400px);
  }

  .step,
  .step[aria-expanded="true"] {
    flex: 1;
    gap: 0;
    padding: 28px;
    border-radius: 28px;
  }

  .step[aria-expanded="true"] {
    flex: 2.6;
  }

  .step__num { font-size: 44px; }
  .step[aria-expanded="true"] .step__num { font-size: 64px; }
  .step[aria-expanded="true"] .step__title { font-size: 34px; }
  .step__desc { font-size: 18px; }
}

.note-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(16px, 2.5vw, 28px);
  padding: 18px 18px 18px clamp(20px, 2.5vw, 28px);
  border-radius: 20px;
  background: var(--stone);
}

.note-bar__text {
  flex: 1 1 260px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

/* =============================================================================
   9. Homepage: work
   ========================================================================== */

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.work__head .h-section {
  max-width: 800px;
}

.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink-2);
  color: #fff;
}

.case:hover {
  background: #1F232B;
  color: #fff;
}

.case__visual {
  flex: 1;
  min-height: 190px;
  border-radius: 0;
}

.case__visual--sm {
  flex: none;
  height: 96px;
  min-height: 0;
  background: repeating-linear-gradient(135deg, var(--v1) 0 10px, var(--v2) 10px 20px);
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px);
}

.case__body--sm {
  flex: 1;
  gap: 8px;
  padding: 22px;
}

.case__tag {
  color: var(--sky-3);
}

.case__title {
  max-width: 600px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.case__title--sm {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.case__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  font-size: 14px;
}

.chip-dark {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink-line);
}

.case__more {
  margin-left: auto;
  padding: 6px 0;
  color: #fff;
  font-weight: 600;
}

.case__more--sm {
  margin: auto 0 0;
  padding: 8px 0 0;
  font-size: 14px;
}

.case-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  padding: clamp(22px, 3vw, 28px) clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: var(--blue);
  color: #fff;
}

.case-cta:hover {
  background: #2A7BDB;
  color: #fff;
}

.case-cta__text {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-cta__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.case-cta__btn {
  padding: 14px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

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

  .case--featured {
    grid-column: span 2;
  }
}

@media (min-width: 760px) {
  .case--featured .case__visual {
    min-height: clamp(180px, 28vh, 280px);
  }
}

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

  .case--featured {
    grid-row: span 2;
  }

  .case-cta {
    grid-column: span 2;
  }
}

/* =============================================================================
   10. FAQ - native <details name="faq">: one answer open at a time
   ========================================================================== */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
}

.faq__aside {
  align-self: start;
}

.faq__title {
  margin-bottom: clamp(20px, 3vw, 32px);
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .faq__aside {
    position: sticky;
    top: 120px;
  }
}

.ask-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
}

.ask-card__text {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
}

.ask-card__text strong {
  font-weight: 600;
}

.ask-card__text span {
  color: var(--text-soft);
  font-size: 14px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border-radius: 18px;
  background: transparent;
  transition: background .2s;
}

.faq-item[open] {
  background: #fff;
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2vh, 18px) clamp(18px, 2vw, 24px);
  font-size: clamp(16px, 1.4vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__text {
  flex: 1;
}

.faq-item__sign {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}

.faq-item__sign::before {
  content: "+";
}

.faq-item[open] .faq-item__sign {
  background: var(--blue);
  color: #fff;
}

.faq-item[open] .faq-item__sign::before {
  content: "−";
}

.faq-item__a {
  margin: 0;
  padding: 0 clamp(20px, 6vw, 78px) 22px clamp(18px, 2vw, 24px);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* A service page's list: fixed sizes. */
.faq-list--sub .faq-item__q {
  padding: 18px 24px;
  font-size: 17px;
}

.faq-list--sub .faq-item__a {
  padding-left: 24px;
}

/* On a white band: the open answer on stone. */
.faq-list--on-white .faq-item[open] {
  background: var(--stone);
}

.faq-list--on-white .faq-item__sign {
  background: var(--stone);
}

/* Lines between the questions, no cards (Klantportaal). */
.faq-list--lines .faq-item {
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.faq-list--lines .faq-item[open] {
  background: transparent;
}

.faq-list--lines .faq-item__q {
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.faq-list--lines .faq-item[open] .faq-item__q {
  color: var(--blue);
}

.faq-list--lines .faq-item__sign,
.faq-list--lines .faq-item[open] .faq-item__sign {
  width: auto;
  height: auto;
  background: none;
  color: inherit;
  font-size: 22px;
}

.faq-list--lines .faq-item__a {
  padding: 0 48px 22px 0;
}

/* =============================================================================
   11. Contact
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 5vw, 64px);
}

.contact--home {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .contact--home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .contact--home .contact__form,
  .contact--home .contact__thanks {
    margin-top: -120px;
  }
}

.contact__intro {
  display: flex;
  flex-direction: column;
}

.contact__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.contact__lead {
  max-width: 480px;
  margin: 0 0 28px;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.contact__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
}

.contact__points li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact__tick {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scaleY(.6);
}

.contact__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  max-width: 480px;
  margin-top: auto;
  padding: 16px 16px 16px 18px;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
}

.contact__call-text {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
}

.contact__call-text strong {
  font-size: 17px;
  font-weight: 600;
}

.contact__call-text span {
  color: var(--text-soft);
  font-size: 14px;
}

.contact__form,
.contact__thanks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(6, 20, 45, .55);
  color: #fff;
}

.contact__form-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.contact__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.field__input {
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid #2C313A;
  border-radius: 12px;
  background: var(--ink-2);
  color: #fff;
  font-size: 16px;
  outline: none;
}

.field__input:focus {
  border-color: var(--sky);
}

textarea.field__input {
  line-height: 1.5;
  resize: vertical;
}

.contact__topic {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__topic-label {
  font-size: 14px;
  font-weight: 500;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #343A44;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--sky);
  box-shadow: inset 0 0 0 1px var(--sky);
  color: var(--ink);
}

.contact__submit {
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sky);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.contact__submit:hover {
  background: #fff;
}

.contact__privacy {
  margin: 0;
  color: var(--on-dark-2);
  font-size: 13px;
  line-height: 1.5;
}

.contact__privacy a {
  color: #fff;
  text-decoration: underline;
}

/* The consent box: the privacy line with a checkbox in front of it. */
.contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--sky);
  cursor: pointer;
}

.contact__thanks {
  align-items: flex-start;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
}

.contact__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sky);
}

.contact__check::before {
  content: "";
  width: 20px;
  height: 11px;
  margin-top: -4px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}

.contact__thanks-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.contact__thanks-text {
  margin: 0;
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.contact__thanks .btn {
  margin-top: 6px;
  padding: 16px 22px;
  font-weight: 700;
}

/* =============================================================================
   12. Footer and the mobile call to action
   ========================================================================== */

.site-footer__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 64px) var(--gutter) 32px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  padding-bottom: 48px;
}

.site-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 980px) {
  .site-footer__cols {
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.site-footer__mail {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.site-footer__phone {
  color: var(--text-muted);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
}

.site-footer__head {
  margin-bottom: 2px;
  color: var(--blue);
}

.site-footer__col a[aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.sticky-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
}

.sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 16px 36px -12px rgba(16, 18, 22, .5), 0 0 0 1px rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.sticky-cta__btn:hover {
  background: var(--blue);
  color: #fff;
}

@media (max-width: 759px) {
  .sticky-cta.is-visible {
    display: block;
  }

  body:has(.sticky-cta) .site-footer__inner {
    padding-bottom: 104px;
  }
}

/* =============================================================================
   13. Service pages: the shared parts
   ========================================================================== */

.sub-hero {
  position: relative;
  isolation: isolate;
  margin-top: -92px;
  background: #fff;
}

.sub-hero--tint { background: var(--tint); }
.sub-hero--stone { background: var(--stone); }
.sub-hero--ink { background: var(--ink); color: #fff; }
.sub-hero--blue { background: var(--blue); color: #fff; }

.sub-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(124px, 18vh, 168px) var(--gutter) clamp(88px, 12vh, 120px);
}

.crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
}

.crumbs a {
  color: inherit;
}

.crumbs__here {
  color: var(--blue-deep);
}

.sub-hero--tint .crumbs { color: #5F6B7A; }
.sub-hero--ink .crumbs { color: var(--text-faint); }
.sub-hero--ink .crumbs__here { color: var(--sky); }
.sub-hero--blue .crumbs { color: var(--sky-text); }
.sub-hero--blue .crumbs__here { color: #fff; }

.sub-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.sub-title--72 { font-size: clamp(38px, 5.2vw, 72px); }
.sub-title--66 { font-size: clamp(36px, 4.8vw, 66px); line-height: .95; }
.sub-title--1000 { max-width: 1000px; }
.sub-title--1040 { max-width: 1040px; }

.sub-lead {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--text);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.sub-lead--slate { max-width: 580px; color: #3A4250; }
.sub-lead--500 { max-width: 500px; }
.sub-lead--dark { max-width: 480px; margin: 0; color: var(--on-dark); }
.sub-lead--blue { max-width: 560px; color: var(--sky-text); }

.sub-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.center-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.center-hero .sub-ctas {
  justify-content: center;
}

/* "Ook interessant": the other service pages. */
.related {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related--gap {
  margin-top: clamp(40px, 6vw, 64px);
}

/* A picture from one of the projects, with its story. */
.praktijk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.praktijk--420 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.praktijk__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.praktijk__text .btn {
  margin-top: 6px;
}

.praktijk__kicker {
  display: block;
  margin-bottom: 18px;
}

/* =============================================================================
   14. Automatisering
   ========================================================================== */

.auto-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.auto-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.task-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 28px;
  background: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(16, 18, 22, .6);
  color: #fff;
}

.task-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  color: var(--text-faint);
}

.task-card__live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sky);
}

.task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ink-2);
}

.task__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.task__title {
  font-size: 15px;
  font-weight: 600;
}

.task__desc {
  color: var(--text-faint);
  font-size: 13px;
}

.task__value {
  color: var(--on-dark);
}

.task-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 18px 16px 4px;
  border-top: 1px solid var(--ink-line);
}

.task-card__label {
  max-width: 200px;
  color: var(--on-dark-2);
  font-size: 14px;
  line-height: 1.4;
}

.task-card__big {
  color: var(--sky);
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
}

.task-card__unit {
  color: #fff;
  font-size: .4em;
  letter-spacing: -.02em;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat__msg {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  gap: 6px;
  max-width: min(100%, 560px);
}

.chat__msg--right {
  align-self: flex-end;
  align-items: flex-end;
}

.chat__bubble {
  padding: 18px 22px;
  border-radius: 22px 22px 22px 6px;
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(16, 18, 22, .35);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.chat__msg--right .chat__bubble {
  border-radius: 22px 22px 6px 22px;
  background: var(--ink);
  color: #fff;
}

.chat__who {
  padding: 0 8px;
}

.sol-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  padding: clamp(22px, 2.5vw, 30px);
  border-radius: 24px;
  background: var(--stone);
}

.sol-card__num {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
}

.sol-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.sol-card__desc,
.sol-row__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sol-card__foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.calc__now {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: #1760B8;
}

.calc__label {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calc__q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.calc__hours {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
}

.calc__unit {
  font-size: .35em;
  letter-spacing: -.02em;
}

.calc__now .calc__q {
  max-width: 380px;
}

.calc__range {
  width: 100%;
  height: 28px;
  accent-color: #fff;
  cursor: pointer;
}

.calc__scale {
  display: flex;
  justify-content: space-between;
}

.calc__later {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
}

.calc__year {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 128px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.06em;
}

.calc__year-unit {
  color: var(--ink);
  font-size: .3em;
  letter-spacing: -.02em;
}

.calc__weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.calc__weeks > span {
  width: 26px;
  height: 10px;
  border-radius: 3px;
  background: var(--blue);
}

.calc__note {
  color: var(--text-muted);
  font-size: 15px;
}

.calc__note strong {
  color: var(--ink);
}

.case-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  overflow: hidden;
  border-radius: 28px;
  background: var(--ink-2);
  color: #fff;
}

.case-wide:hover {
  background: #1F232B;
  color: #fff;
}

.case-wide .visual {
  min-height: 320px;
  border-radius: 0;
}

.case-wide__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 44px);
}

.case-wide__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.case-wide__desc {
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.case-wide .case__chips {
  margin-top: auto;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
}

.step-card--hi {
  background: var(--blue);
  color: #fff;
}

.step-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.step-card__num {
  color: var(--blue-mid);
  font-family: var(--font-mono);
  font-size: 13px;
}

.step-card--hi .step-card__num {
  color: var(--sky-text);
}

.step-card__title {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.step-card__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.step-card--hi .step-card__desc {
  color: var(--sky-text);
}

.faq-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(28px, 5vw, 64px);
}

.faq-split__side {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--grey);
  color: var(--ink);
}

.related-card:hover {
  background: var(--tint);
  color: var(--ink);
}

.related-card__wm {
  position: absolute;
  right: -12px;
  bottom: -16px;
  opacity: .6;
  pointer-events: none;
}

.related-card__title {
  position: relative;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.02em;
}

.related-card__desc {
  position: relative;
  max-width: 75%;
  color: var(--text-muted);
  font-size: 14px;
}

/* =============================================================================
   15. Koppelingen
   ========================================================================== */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 880px;
  margin-top: clamp(40px, 6vh, 64px);
}

.flow__apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 24px);
  width: 100%;
}

.flow__app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow__card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px -16px rgba(16, 18, 22, .35), 0 0 0 1px #D6E3F4;
  text-align: left;
}

.flow__swatch {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--sky-2);
}

.flow__swatch--2 { background: var(--sky-3); }
.flow__swatch--3 { background: var(--blue); }

.flow__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flow__text strong,
.flow__text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow__text strong {
  font-size: 14px;
  font-weight: 700;
}

.flow__text span {
  color: #5F6B7A;
  font-size: 12px;
}

.flow__drop {
  width: 2px;
  height: 56px;
  background: repeating-linear-gradient(var(--blue) 0 6px, transparent 6px 12px);
}

.flow__bar {
  width: calc(66.6% + 2px);
  height: 2px;
  margin-top: -2px;
  background: var(--blue);
}

.flow__stem {
  width: 2px;
  height: 28px;
  background: var(--blue);
}

.flow__result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 460px);
  padding: 20px 22px;
  border-radius: 24px;
  background: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(16, 18, 22, .6);
  color: #fff;
  text-align: left;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.person-row__text {
  display: flex;
  flex-direction: column;
}

.person-row__text strong {
  font-size: 16px;
}

.person-row__text span {
  color: var(--text-faint);
  font-size: 13px;
}

.person-row__tag {
  margin-left: auto;
  color: var(--sky);
}

.flow__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: var(--on-dark-2);
  font-size: 12px;
}

.flow__stats > span {
  padding: 10px;
  border-radius: 12px;
  background: var(--ink-2);
}

.flow__stats strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 14px;
}

.quote-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: clamp(56px, 6vw, 72px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: var(--grey);
}

.quote-card__mark {
  position: absolute;
  left: clamp(18px, 2.6vw, 30px);
  top: 6px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
}

.quote-card__text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.sol-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sol-row {
  gap: 12px 32px;
  align-items: center;
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px);
  border-radius: 22px;
  background: #fff;
}

.sol-row__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.sol-row__num {
  color: var(--blue-mid);
  font-family: var(--font-mono);
  font-size: 13px;
}

.sol-row__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.sol-row__notice {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--tint);
  line-height: 1.35;
}

.vn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.vn-head .h-section {
  max-width: 640px;
}

.seg {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--ink-2);
}

.seg__btn {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.seg__btn[aria-selected="true"] {
  background: var(--blue);
  color: #fff;
}

.screens {
  gap: 14px;
  align-items: start;
}

.screen {
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--ink-line);
}

.screen--r1 { transform: rotate(-1.5deg); }
.screen--r2 { transform: rotate(1deg); }
.screen--r3 { transform: rotate(-.5deg); }

.screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--ink-3);
}

.screen__light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3A404A;
}

.screen__app {
  margin-left: 8px;
  color: var(--text-faint);
}

.screen__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.screen__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 14px;
}

.screen__k {
  color: var(--text-faint);
}

.screen__v {
  color: #fff;
  font-weight: 600;
}

.screen__v--warn {
  color: #F5A26A;
}

.screens-note {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--on-dark-2);
  font-size: 16px;
  line-height: 1.55;
}

.cust-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
}

.cust-card__who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cust-card__who strong {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.02em;
}

.cust-card__who span {
  color: var(--text-soft);
  font-size: 14px;
}

.cust-card__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cust-card__col--6 {
  gap: 6px;
}

.cust-card__line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.cust-card__line > span {
  color: var(--text-soft);
}

.meter {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--tint);
}

.meter__fill {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: 5px;
  background: var(--blue);
}

.cust-card__lesson {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.cust-card__lesson:last-child {
  border-bottom: 0;
}

.later-points {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(8px, 2vw, 24px);
}

.later-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.35;
}

.line-steps {
  gap: 28px 20px;
}

.line-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line-step__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.line-step__dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--blue);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.line-step--hi .line-step__dot {
  background: var(--blue);
  color: #fff;
}

.line-step__line {
  flex: 1;
  height: 2px;
  background: #C9D8EC;
}

.line-step:last-child .line-step__line {
  background: transparent;
}

.line-step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.line-step__desc,
.tl-step__desc,
.num-step__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.qa-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.5vw, 28px);
  border-radius: 22px;
  background: #fff;
}

.qa-card__q {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.qa-card__a {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.related-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
}

.related-row:hover {
  background: var(--ink);
  color: #fff;
}

.related-row__title {
  flex: 1 1 280px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -.03em;
}

.related-row__go {
  font-size: 15px;
  font-weight: 600;
}

/* =============================================================================
   16. Planning en samenwerking
   ========================================================================== */

.plan-hero {
  gap: 24px 64px;
  align-items: end;
}

.plan-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.plan-hero__side .sub-ctas {
  margin-top: 0;
}

.week {
  margin-top: clamp(40px, 6vh, 64px);
  padding: clamp(14px, 2vw, 20px);
  border-radius: 28px;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--ink-line);
}

.week__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 14px;
}

.week__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.week__legend {
  display: flex;
  gap: 6px;
  color: var(--on-dark);
  font-size: 12px;
}

.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink-3);
}

.legend__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sky-2);
}

.legend__swatch--field {
  background: var(--stone);
}

.week__scroll {
  overflow-x: auto;
}

.week__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
  min-width: 780px;
}

.day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  padding: 10px;
  border-radius: 18px;
  background: #14171C;
}

.day--today {
  background: #232A34;
}

.day__head {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px 6px;
  color: var(--text-faint);
}

.day--today .day__head {
  color: var(--sky);
}

.shift {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sky-2);
  color: #0E1116;
}

.shift--field {
  background: var(--stone);
  color: var(--ink);
}

.shift--team {
  background: var(--ink-line);
  color: #fff;
}

.shift strong {
  font-size: 13px;
  font-weight: 600;
}

.shift span {
  font-size: 12px;
  opacity: .75;
}

.board {
  gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(20px, 4vw, 48px);
  border-radius: 28px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.pin-note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 170px;
  padding: 30px 20px 22px;
  border-radius: 6px;
  background: var(--sky-pale);
  box-shadow: 0 14px 24px -18px rgba(16, 18, 22, .5);
}

.pin-note--1 { transform: rotate(-2deg); }
.pin-note--2 { transform: rotate(1.5deg); background: var(--stone); }
.pin-note--3 { transform: rotate(-1deg); background: var(--tint); }
.pin-note--4 { transform: rotate(2deg); }
.pin-note--5 { transform: rotate(-1.5deg); background: var(--stone); }

.pin-note__tape {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 56px;
  height: 16px;
  margin-left: -28px;
  border-radius: 2px;
  background: rgba(141, 189, 243, .55);
}

.pin-note__text {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.sol-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sol-tab {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 0;
  border-radius: 20px;
  background: var(--grey);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}

.sol-tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.sol-tab__num {
  color: var(--blue-mid);
  font-family: var(--font-mono);
  font-size: 13px;
}

.sol-tab[aria-selected="true"] .sol-tab__num {
  color: var(--sky);
}

.sol-tab__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.sol-tab[aria-selected="true"]::after {
  content: "→";
  font-size: 18px;
}

.sol-detail {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: 24px;
  background: var(--blue);
  color: #fff;
}

.sol-detail__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sol-detail__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.sol-detail__desc {
  max-width: 460px;
  color: var(--sky-text);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.sol-detail__notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
}

.sol-detail__notice .notice {
  font-size: 16px;
}

.morning {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  --kc: var(--text-subtle);
  --md: var(--line-3);
}

.morning--later {
  background: var(--blue);
  color: #fff;
  --kc: var(--sky-text);
  --md: #fff;
}

.morning__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--kc);
}

.morning__tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--stone);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.morning--later .morning__tag {
  background: #fff;
  color: var(--blue-deep);
}

.morning__row {
  display: grid;
  grid-template-columns: 56px 14px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0;
}

.morning__time {
  padding-top: 2px;
  color: var(--kc);
  font-family: var(--font-mono);
  font-size: 13px;
}

.morning__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--md);
}

.morning__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.phones {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.phone {
  width: min(44%, 220px);
  aspect-ratio: 9 / 19;
  border-radius: 32px;
  background: repeating-linear-gradient(135deg, #232730 0 10px, #1C1F26 10px 20px);
  box-shadow: 0 0 0 6px var(--ink-2), 0 0 0 7px var(--ink-line);
  font-size: 11px;
}

.phone--low {
  margin-top: 48px;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.tl-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
}

.tl-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-step__dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grey);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.tl-step--hi .tl-step__dot {
  background: var(--blue);
  color: #fff;
}

.tl-step__line {
  flex: 1;
  width: 2px;
  background: #E1E5EB;
}

.tl-step:last-child .tl-step__line {
  background: transparent;
}

.tl-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 32px;
}

.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.step-head strong {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.03em;
}

.work-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.work-intro .lead {
  max-width: 420px;
  font-size: 17px;
}

.related-dark {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
}

.related-dark:hover {
  background: var(--blue);
  color: #fff;
}

.related-dark__top {
  display: flex;
  justify-content: space-between;
}

.related-dark__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.related-grid {
  gap: 10px;
  margin-top: clamp(40px, 6vw, 64px);
}

/* =============================================================================
   17. Klantportaal
   ========================================================================== */

.klant-hero {
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}

.portal-wrap {
  position: relative;
  padding: 0 0 28px;
}

.portal {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(16, 18, 22, .45), 0 0 0 1px var(--line-2);
}

.portal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.portal__light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
}

.portal__url {
  flex: 1;
  margin-left: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--stone);
  color: var(--text-subtle);
}

.portal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 28px);
}

.portal__welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal__hello {
  display: flex;
  flex-direction: column;
}

.portal__hello span {
  color: var(--text-subtle);
  font-size: 13px;
}

.portal__hello strong {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -.03em;
}

.portal__button {
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.portal__order {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--tint);
}

.portal__order-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.portal__ref {
  color: var(--blue-deep);
}

.track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.track__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track__bar {
  height: 6px;
  border-radius: 3px;
  background: #fff;
}

.track__label {
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 500;
}

.track__step--done .track__bar { background: var(--blue); }
.track__step--now .track__bar { background: var(--sky-3); }
.track__step--done .track__label,
.track__step--now .track__label { color: var(--ink); }
.track__step--now .track__label { font-weight: 700; }

.portal__invoices {
  display: flex;
  flex-direction: column;
}

.invoice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.invoice__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invoice__amount {
  color: var(--text-subtle);
}

.invoice__status {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 600;
}

.invoice__status--new {
  background: var(--ink);
  color: #fff;
}

.portal__toast {
  position: absolute;
  left: clamp(-24px, -2vw, 0px);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--ink);
  box-shadow: 0 20px 40px -20px rgba(16, 18, 22, .6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.intro-dark {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-dark .lead {
  max-width: 420px;
  color: var(--on-dark-2);
  font-size: 17px;
}

.inbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--ink-line);
}

.inbox__item--s1 { margin-left: clamp(0px, 3vw, 32px); }
.inbox__item--s2 { margin-left: clamp(0px, 1.5vw, 16px); }
.inbox__item--s3 { margin-left: clamp(0px, 4.5vw, 48px); }

.inbox__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.inbox__icon--mail {
  background: var(--stone);
}

.inbox__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inbox__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-faint);
  font-size: 13px;
}

.inbox__q {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.sol-tile {
  --tile-desc: var(--text-muted);
  --tile-kicker: var(--blue-mid);
  --tile-line: var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
}

.sol-tile--ink {
  --tile-desc: var(--on-dark);
  --tile-kicker: var(--sky);
  --tile-line: var(--ink-line);
  background: var(--ink);
  color: #fff;
}

.sol-tile--blue {
  --tile-desc: var(--sky-text);
  --tile-kicker: var(--sky-text);
  --tile-line: #3D85D9;
  background: var(--blue);
  color: #fff;
}

.sol-tile--drop {
  margin-top: 32px;
}

.sol-tile__title {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.sol-tile__desc {
  color: var(--tile-desc);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sol-tile__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tile-line);
  font-size: 14px;
  font-weight: 600;
}

.sol-tile__kicker {
  color: var(--tile-kicker);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

.journeys {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey {
  --kc: var(--text-subtle);
  --card: #fff;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 24px;
  background: var(--stone);
  color: var(--ink);
}

.journey--later {
  --kc: var(--sky);
  --card: var(--ink-2);
  background: var(--ink);
  color: #fff;
}

.journey__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--kc);
}

.journey__dur {
  color: inherit;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.journey__head .journey__dur {
  color: var(--ink);
}

.journey--later .journey__head .journey__dur {
  color: #fff;
}

.journey__steps {
  gap: 8px;
}

.journey__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
}

.journey__n {
  color: var(--kc);
}

.journey__t {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 28px;
}

.head-row .h-case {
  max-width: 760px;
  font-size: clamp(30px, 3.8vw, 52px);
}

.arch-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.arch-step {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 24px;
  border-radius: 999px 999px 24px 24px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}

.arch-step--hi {
  background: var(--blue);
  color: #fff;
}

.arch-step__num {
  padding-top: 10px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}

.arch-step--hi .arch-step__num {
  color: #fff;
}

.arch-step__title {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -.03em;
}

.arch-step__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.arch-step--hi .arch-step__desc {
  color: var(--sky-text);
}

.faq-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-lines .h-section {
  margin-bottom: 20px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: end;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  background: var(--stone);
  color: var(--ink);
}

.related-item:hover {
  background: var(--tint);
  color: var(--ink);
}

.related-item__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
}

.related-item__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.related-item__text strong {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -.02em;
}

.related-item__text span {
  color: var(--text-muted);
  font-size: 14px;
}

.related-item__go {
  color: var(--blue);
  font-size: 18px;
}

/* =============================================================================
   18. Dashboard
   ========================================================================== */

.dash {
  margin-top: clamp(40px, 6vh, 64px);
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 50px 100px -40px rgba(6, 20, 45, .6);
  color: var(--ink);
  text-align: left;
}

.kpis {
  gap: 10px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: var(--stone);
  color: var(--ink);
}

.kpi__label {
  color: var(--text-subtle);
}

.kpi__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.kpi__delta {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.kpi__delta--blue {
  color: var(--blue);
}

.kpi--dark {
  background: var(--ink);
  color: #fff;
}

.kpi--dark .kpi__label {
  color: var(--text-faint);
}

.kpi--dark .kpi__delta {
  color: var(--sky);
}

.dash__row {
  gap: 10px;
  margin-top: 10px;
}

.dash__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: var(--stone);
}

.dash__panel--list {
  gap: 6px;
}

.dash__panel-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.dash__panel-title {
  margin-bottom: 6px;
  font-size: 14px;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
}

.bar {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: var(--ink);
}

.bar--blue { background: var(--blue); }
.bar--sky { background: var(--sky-3); }
.bar--38 { height: 38%; }
.bar--44 { height: 44%; }
.bar--52 { height: 52%; }
.bar--56 { height: 56%; }
.bar--60 { height: 60%; }
.bar--64 { height: 64%; }
.bar--68 { height: 68%; }
.bar--70 { height: 70%; }
.bar--72 { height: 72%; }
.bar--76 { height: 76%; }
.bar--82 { height: 82%; }
.bar--90 { height: 90%; }

.proj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}

.proj__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj__meter {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line-2);
}

.proj__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
}

.proj__fill--35 { width: 35%; }
.proj__fill--62 { width: 62%; }
.proj__fill--88 { width: 88%; }
.proj__fill--over { width: 100%; background: var(--blue); }

.proj__pct {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}

.proj__pct--over {
  color: var(--blue);
}

.dash__alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.big-list {
  display: flex;
  flex-direction: column;
}

.big-list__row {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 120px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid var(--line);
}

.big-list__num {
  color: var(--blue-mid);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.4vw, 18px);
}

.big-list__q {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.bento__cell {
  --cell-desc: var(--text-muted);
  --cell-kicker: var(--blue-mid);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  padding: clamp(22px, 2.8vw, 32px);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
}

.bento__cell--tall {
  min-height: 300px;
}

.bento__cell--ink {
  --cell-desc: var(--on-dark);
  --cell-kicker: var(--sky);
  background: var(--ink);
  color: #fff;
}

.bento__cell--blue {
  --cell-desc: var(--sky-text);
  --cell-kicker: var(--sky-text);
  background: var(--blue);
  color: #fff;
}

.bento__num {
  color: var(--cell-kicker);
}

.bento__title {
  max-width: 520px;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.bento__title--big {
  font-size: clamp(26px, 3vw, 38px);
}

.bento__desc {
  max-width: 480px;
  color: var(--cell-desc);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.bento__pill {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 600;
}

.bento__cell--ink .bento__pill {
  background: var(--blue);
  color: #fff;
}

.bento__cell--blue .bento__pill {
  background: #fff;
}

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

  .bento__cell--span {
    grid-column: span 2;
  }
}

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

  .bento__cell--span-wide {
    grid-column: span 2;
  }
}

.vn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

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

.vn__now,
.vn__later {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 24px;
  background: var(--ink-2);
}

.vn__later {
  min-height: 360px;
}

.files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--ink-3);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 13px;
}

.file::before {
  content: "";
  flex: none;
  width: 18px;
  height: 22px;
  border-radius: 3px;
  background: #3A404A;
}

.file--x4 { transform: translateX(4px); }
.file--x6 { transform: translateX(6px); }
.file--x10 { transform: translateX(10px); }
.file--x14 { transform: translateX(14px); }

.vn__note {
  margin-top: auto;
  color: var(--on-dark-2);
  font-size: 15px;
  line-height: 1.5;
}

.vn__slot {
  flex: 1;
  min-height: 300px;
  border-radius: 16px;
}

.case-split {
  color: var(--ink);
}

.case-split:hover {
  color: var(--ink);
}

.case-split__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: 28px;
  background: #fff;
}

.case-split__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.case-split__desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.case-split__btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.num-steps {
  gap: 0;
  border-top: 2px solid var(--ink);
}

.num-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 8px 0;
}

.num-step__num {
  color: var(--line-3);
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
}

.num-step--hi .num-step__num {
  color: var(--blue);
}

.qa-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-row {
  gap: 10px 40px;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 22px;
  background: #fff;
}

.qa-row__q {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.qa-row__a {
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.related-blue {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 180px;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  background: var(--blue);
  color: #fff;
}

.related-blue:hover {
  background: var(--ink);
  color: #fff;
}

.related-blue__wm {
  position: absolute;
  right: -16px;
  top: -16px;
  opacity: .9;
  pointer-events: none;
}

.related-blue__kicker {
  position: relative;
}

.related-blue__title {
  position: relative;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* =============================================================================
   19. The editor's extra sections and widgets

   What the website editor's templates and Add panel bring on top of the
   design: a page header, an article, a simple call to action, a checklist,
   a picture, a quote and a person.
   ========================================================================== */

.prose {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

.prose h2 {
  margin: 1.6em 0 .5em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.prose h3 {
  margin: 1.4em 0 .4em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.prose p {
  margin: 0 0 1em;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: .35em;
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
}

.prose > :first-child {
  margin-top: 0;
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.cta-band__title {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 600;
}

.text-link:hover {
  color: var(--ink);
}

.site-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
}

.quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--blue);
}

.person {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.person__photo {
  aspect-ratio: 1;
  border-radius: 24px;
}

.person__name {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.person__role {
  display: block;
  color: var(--text-soft);
  font-size: 14px;
}

.person__bio {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* =============================================================================
   20. CMS utilities: the website editor's Style tab
   ----------------------------------------------------------------------------
   Each preset the editor offers is one class here (shared/src/siteModel.ts,
   SITE_STYLE_OPTIONS -> u-<setting>-<value>). The site allows no inline
   style, so a layout, a spacing or a colour chosen in the editor is always
   one of these. Add a value in both places, or neither.
   ========================================================================== */

.u-layout-stack { display: flex; flex-direction: column; }
.u-layout-row { display: flex; flex-flow: row wrap; }
.u-layout-grid-2,
.u-layout-grid-3,
.u-layout-grid-4 { display: grid; grid-template-columns: repeat(var(--u-cols), minmax(0, 1fr)); }
.u-layout-grid-2 { --u-cols: 2; }
.u-layout-grid-3 { --u-cols: 3; }
.u-layout-grid-4 { --u-cols: 4; }

@media (max-width: 999px) {
  .u-layout-grid-3,
  .u-layout-grid-4 { --u-cols: 2; }
}

@media (max-width: 767px) {
  .u-layout-row { flex-direction: column; }
  .u-layout-grid-2,
  .u-layout-grid-3,
  .u-layout-grid-4 { --u-cols: 1; }
}

.u-gap-none { gap: 0; }
.u-gap-xs { gap: 6px; }
.u-gap-sm { gap: 12px; }
.u-gap-md { gap: 20px; }
.u-gap-lg { gap: 32px; }
.u-gap-xl { gap: clamp(40px, 5vw, 64px); }

.u-align-start { align-items: flex-start; }
.u-align-center { align-items: center; }
.u-align-end { align-items: flex-end; }
.u-align-stretch { align-items: stretch; }

.u-justify-start { justify-content: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }

.u-textAlign-left { text-align: left; }
.u-textAlign-center { text-align: center; }
.u-textAlign-right { text-align: right; }

.u-padY-none { padding-top: 0; padding-bottom: 0; }
.u-padY-sm { padding-top: 16px; padding-bottom: 16px; }
.u-padY-md { padding-top: 32px; padding-bottom: 32px; }
.u-padY-lg { padding-top: 56px; padding-bottom: 56px; }
.u-padY-xl { padding-top: 88px; padding-bottom: 88px; }
.u-padY-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

.u-padX-none { padding-left: 0; padding-right: 0; }
.u-padX-sm { padding-left: 16px; padding-right: 16px; }
.u-padX-md { padding-left: 28px; padding-right: 28px; }
.u-padX-lg { padding-left: 48px; padding-right: 48px; }
.u-padX-gutter { padding-left: var(--gutter); padding-right: var(--gutter); }

.u-marginBottom-none { margin-bottom: 0; }
.u-marginBottom-sm { margin-bottom: 12px; }
.u-marginBottom-md { margin-bottom: 24px; }
.u-marginBottom-lg { margin-bottom: 40px; }
.u-marginBottom-xl { margin-bottom: 64px; }

.u-width-narrow { max-width: 560px; margin-inline: auto; }
.u-width-text { max-width: 760px; margin-inline: auto; }
.u-width-content { max-width: var(--container); margin-inline: auto; }
.u-width-full { max-width: none; width: 100%; }

.u-background-paper { background: var(--paper); }
.u-background-white { background: var(--white); }
.u-background-stone { background: var(--stone); }
.u-background-tint { background: var(--tint); }
.u-background-ink { background: var(--ink); color: #fff; }
.u-background-blue { background: var(--blue); color: #fff; }

.u-tone-muted { color: var(--text-muted); }
.u-tone-on-dark { color: var(--on-dark); }
.u-tone-accent { color: var(--blue); }

.u-size-sm { font-size: 14px; line-height: 1.5; }
.u-size-md { font-size: 17px; line-height: 1.55; }
.u-size-lg { font-size: 21px; line-height: 1.45; }
.u-size-xl { font: 700 clamp(28px, 3vw, 40px)/1.1 var(--font-display); letter-spacing: -.035em; }
.u-size-display { font: 800 clamp(36px, 5vw, 64px)/.95 var(--font-display); letter-spacing: -.05em; }

.u-radius-none { border-radius: 0; }
.u-radius-sm { border-radius: 12px; }
.u-radius-md { border-radius: 18px; }
.u-radius-lg { border-radius: 28px; }

@media (max-width: 767px) {
  .u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 999px) {
  .u-hide-tablet { display: none !important; }
}

@media (min-width: 1000px) {
  .u-hide-desktop { display: none !important; }
}

/* =============================================================================
   Focus and motion
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

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

  *,
  ::before,
  ::after {
    transition-duration: 0s !important;
  }
}