/* Hallmark · shape: Marquee Hero (home), Banner (inner pages) · genre: modern-minimal · theme: brand · redesign: full · draw: fe5fa8 · job: hire
 * paper: oklch(98.2% 0.004 258) · accent: oklch(53.9% 0.2 261) · display: Inter · body: Inter · hero: Stage (/), Banner (inner pages), Corridor (/Bedankt.html) · nav: floating pill · footer: statement · signature: one incoming request carried through the four stages of a workflow, built in the hero
 * axes: light/grotesk-sans/chromatic-blue · posture: committed, navy field on the hero, the steps band and the footer · contrast: pass · fold: pass · imagery: product captures 2 (Bayline, MGK), owner photographs 9, muted · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, a B2B AI hero could be anyone's; the hero shows one request travelling through intake, classification, human check and CRM, and the home page now opens the two real projects */
/* Hallmark · dismissed 42 · the footer is a statement footer: the page's closing question set large over brand, two link lists and contact, not a four-column sitemap */
/* Hallmark · dropped Bedankt.html · on Contact the old submit was a plain link that faked a send (70); Bedankt.html is now the form's data-success target after a real request */
/* Hallmark · dropped f-mail-err, h-beveiliging, h-criteria, h-geleerd, h-intake, h-kandidaten, h-labels, h-letop, h-onderdelen, h-slot, h-stappen, h-stroom · aria-labelledby hooks of removed eyebrows and the static error demo; no link or script targets them */
/* Hallmark · dismissed 3 · items--3 are text sets parted by a top rule with an inline icon at most, no tiles */
/* Hallmark · answered F7 · the pill radius marks labels and chips that sit beside pill controls: sample labels, tags, jump links, the step mark */
/* Hallmark · answered F15 · the 96px gap is the hero split; the 24px gap sits inside a phase row as its sub-grid, not between sections */
/* Hallmark · dismissed 58 · redesign keeps the owner's words; articles and legal pages are long documents by nature */

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(98.2% 0.004 258); --color-paper-2: oklch(95.6% 0.009 258); --color-paper-3: oklch(92% 0.016 256);
  --color-ink: oklch(23.9% 0.05 259); --color-ink-2: oklch(40% 0.035 259); --color-muted: oklch(52% 0.028 259);
  --color-rule: oklch(88.5% 0.016 256); --color-rule-strong: oklch(78% 0.022 258);
  --color-field: oklch(23.9% 0.05 259); --color-field-2: oklch(29.5% 0.055 259); --color-field-ink: oklch(97% 0.006 258); --color-field-ink-2: oklch(82% 0.03 258); --color-field-rule: oklch(37% 0.045 259); --color-field-accent: oklch(78% 0.11 259);
  --color-accent: oklch(53.9% 0.2 261); --color-accent-hover: oklch(46% 0.18 261); --color-accent-ink: oklch(98.5% 0.004 258); --color-focus: oklch(56% 0.2 261); --color-focus-on-field: oklch(78% 0.13 259);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --nav-offset: 88px; --shadow-soft: 0 1px 2px oklch(20% 0.03 259 / 0.06);
  --radius-card: 12px; --radius-inner: 8px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.032em; --display-weight: 700;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
}

/* ---------- base additions ---------- */
html { scroll-behavior: smooth; }
body { font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4 { color: inherit; }
h4 { margin: 0; font-size: var(--text-md); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--color-accent); text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }
a:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }
a:active { color: var(--color-ink); }
strong, b { font-weight: 650; }
small, .small { font-size: var(--text-sm); }
.muted { color: var(--color-muted); }
.ink-2 { color: var(--color-ink-2); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-inner); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--24 { width: 24px; height: 24px; }

/* ---------- controls: eight states ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); color: var(--color-accent-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); color: var(--color-ink); }
.btn--quiet:active { color: var(--color-ink); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.on-field .btn--quiet { color: var(--color-field-ink); border-color: var(--color-field-rule); }
.on-field .btn--quiet:hover { background: var(--color-field-2); border-color: var(--color-field-ink-2); color: var(--color-field-ink); }
.on-field .btn:focus-visible, .on-field a:focus-visible, .on-field summary:focus-visible { outline-color: var(--color-focus-on-field); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, var(--color-accent) 35%, transparent); }
.textlink:hover { text-decoration-color: currentColor; }
.on-field .textlink { color: var(--color-field-accent); }
.on-field a:not(.btn) { color: var(--color-field-accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }

/* ---------- navigation: floating pill ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-block: var(--space-sm); pointer-events: none; }
.site-header .container { pointer-events: none; }
.nav-pill { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); box-shadow: var(--shadow-soft); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink); text-decoration: none; font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; white-space: nowrap; }
.wordmark:hover { color: var(--color-ink); }
.wordmark svg { width: 32px; height: 32px; }
.wordmark .wm-name { color: inherit; }
.wordmark .wm-ai { color: var(--color-accent); }
.logo-bg { fill: var(--color-ink); }
.logo-a { stroke: var(--color-field-accent); }
.logo-b { stroke: var(--color-paper); }
.on-field .logo-bg { fill: var(--color-field-2); }
.nav-links { display: flex; align-items: center; gap: var(--space-2xs); list-style: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-links a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav-links a:active { background: var(--color-paper-3); }
.nav-links a[aria-current="page"], .nav-links a[data-section="current"] { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
/* dropdowns under the pill: hover, the chevron button, or keyboard focus without script */
.nav-links > li { position: relative; display: flex; align-items: center; }
.has-sub > a { padding-right: var(--space-2xs); }
.sub-toggle { display: inline-grid; place-items: center; width: 28px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.sub-toggle:hover { background: var(--color-paper-2); color: var(--color-ink); }
.sub-toggle:active { background: var(--color-paper-3); }
.sub-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sub-toggle .icon { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
.has-sub.is-open .sub-toggle .icon, .has-sub:hover .sub-toggle .icon { transform: rotate(180deg); }
.nav-links .sub { display: none; position: absolute; top: 100%; left: 50%; z-index: var(--z-dropdown); width: 22rem; padding-top: var(--space-sm); transform: translateX(-50%); }
.has-sub:hover > .sub, .has-sub.is-open > .sub, html:not(.js) .has-sub:focus-within > .sub { display: block; animation: sub-in var(--dur-short) var(--ease-out); }
.sub__list { list-style: none; display: grid; gap: var(--space-3xs); padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-soft); }
.nav-links .sub a { display: grid; gap: var(--space-3xs); min-height: 44px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); white-space: normal; color: var(--color-ink); text-decoration: none; line-height: 1.35; }
.nav-links .sub a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav-links .sub a:active { background: var(--color-paper-3); }
.nav-links .sub a strong { font-size: var(--text-sm); font-weight: 600; }
.nav-links .sub a span { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.nav-links .sub a[aria-current="page"] { background: var(--color-paper-2); text-decoration: none; }
.nav-links .sub a[aria-current="page"] strong { color: var(--color-accent); }
@keyframes sub-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .has-sub:hover > .sub, .has-sub.is-open > .sub { animation: none; } .sub-toggle .icon { transition: none; } }
.nav-end { display: flex; align-items: center; gap: var(--space-xs); }
.nav-toggle { display: none; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.nav-toggle:hover { background: var(--color-paper-2); }
.nav-toggle:active { background: var(--color-paper-3); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-panel { display: none; }

@media (max-width: 70rem) {
  .js .nav-links, .js .nav-pill .nav-cta { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .nav-pill { padding-left: var(--space-md); }
  .js .nav-panel { pointer-events: auto; max-height: calc(100svh - var(--nav-offset) - var(--space-md)); overflow-y: auto; overscroll-behavior: contain; margin-top: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-soft); }
  .js .nav-panel:not([hidden]) { display: block; animation: panel-in var(--dur-short) var(--ease-out); }
  .nav-panel ul { list-style: none; display: grid; gap: var(--space-3xs); }
  .nav-panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-sm); border-radius: var(--radius-inner); color: var(--color-ink); font-weight: 500; text-decoration: none; }
  .nav-panel a:not(.btn):hover { background: var(--color-paper-2); }
  .nav-panel a[aria-current="page"] { background: var(--color-paper-2); font-weight: 650; }
  .nav-panel .sub a { padding-left: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-sm); min-height: 44px; }
  .nav-panel .btn { width: 100%; margin-top: var(--space-sm); }
  html:not(.js) .nav-pill { flex-wrap: wrap; border-radius: var(--radius-card); }
  html:not(.js) .nav-links { flex-wrap: wrap; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .nav-panel:not([hidden]) { animation: none; } }

/* ---------- sections and rhythm ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.section--flush-top { padding-top: 0; }
.band { background: var(--color-paper-2); }
.band-3 { background: var(--color-paper-3); }
.on-field { background: var(--color-field); color: var(--color-field-ink); }
.on-field .lead, .on-field p { color: var(--color-field-ink-2); }
.on-field h1, .on-field h2, .on-field h3, .on-field strong { color: var(--color-field-ink); }
.rule-top { border-top: 1px solid var(--color-rule); }

.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 60rem; }
.head .lead { color: var(--color-ink-2); }
.head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-columns); align-items: end; max-width: none; }
.head--split > :last-child { grid-column: 2; }
.head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); max-width: none; }
.head--row > *, .actions > *, .work__text > *, .split__text > * { min-width: 0; max-width: 100%; }
@media (max-width: 60rem) { .head--split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); } .head--split > :last-child { grid-column: 1; } }

.caption, figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.on-field figcaption, .on-field .caption { color: var(--color-field-ink-2); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.on-field .label { color: var(--color-field-ink-2); }
.sample-label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-field .fill { color: var(--color-field-ink-2); border-color: var(--color-field-rule); }

/* ---------- home hero: Stage on the navy field ---------- */
.hero { margin-top: calc(-1 * var(--nav-offset)); padding-top: var(--nav-offset); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; min-height: calc(100svh - var(--nav-offset)); padding-block: var(--space-2xl) var(--space-3xl); }
.hero h1 { font-size: clamp(2.75rem, 4.4vw + 0.75rem, 5rem); line-height: 1.02; max-width: 14ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero .actions { margin-top: var(--space-xl); }
.hero__notes { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); list-style: none; font-size: var(--text-sm); color: var(--color-field-ink-2); }
.hero__notes li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hero__notes .icon { width: 16px; height: 16px; color: var(--color-field-accent); }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); } }

/* the signature: one request through four stages */
.flow { margin: 0; padding: var(--space-lg) var(--space-xl); border: 1px solid var(--color-field-rule); border-radius: var(--radius-card); background: var(--color-field-2); color: var(--color-field-ink); }
.flow__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-field-rule); }
.flow__top h2 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; max-width: none; }
.flow .sample-label { background: var(--color-field-ink); color: var(--color-field); }
.flow ol { list-style: none; display: grid; }
.flow ol > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-field-rule); }
.flow ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
.flow ol > li::before { content: ""; position: absolute; left: 19px; top: calc(var(--space-md) + 44px); bottom: calc(-1 * var(--space-md) + var(--space-2xs)); width: 2px; background: var(--color-field-rule); }
.flow ol > li:last-child::before { display: none; }
.flow__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--color-field-rule); background: var(--color-field); color: var(--color-field-accent); }
.flow ol > li.is-now .flow__mark { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.flow h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.flow p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-field-ink-2); }
.flow blockquote { margin: var(--space-xs) 0 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-field); color: var(--color-field-ink); font-size: var(--text-md); }
.flow .tags { margin-top: var(--space-xs); }
.flow .tag { background: var(--color-field); border-color: var(--color-field-rule); color: var(--color-field-ink); }
.flow figcaption { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-field-rule); }
.js .flow li[data-step] { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .flow:not(.is-in) li[data-step] { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .js .flow:not(.is-in) li[data-step] { opacity: 1; transform: none; } .js .flow li[data-step] { transition: none; } }
@media (max-width: 40rem) { .flow { padding: var(--space-lg) var(--space-md); } }

/* ---------- compositions ---------- */
/* quotes: what a visitor recognises */
.quotes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); list-style: none; }
.quotes li { grid-column: span 2; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); font-size: var(--text-title); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink); text-wrap: balance; }
.quotes li:nth-child(4), .quotes li:nth-child(5) { grid-column: span 3; }
@media (max-width: 60rem) { .quotes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .quotes li, .quotes li:nth-child(4), .quotes li:nth-child(5) { grid-column: span 1; } }
@media (max-width: 40rem) { .quotes { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* rows: services as an index */
.rows { list-style: none; border-top: 1px solid var(--color-rule-strong); }
.rows > li { border-bottom: 1px solid var(--color-rule-strong); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-xl); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
a.row:hover { color: var(--color-ink); background: color-mix(in oklab, var(--color-paper-3) 50%, transparent); }
a.row:active { background: var(--color-paper-3); }
a.row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.row h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.row p { color: var(--color-ink-2); max-width: 46ch; }
.row__go { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.row__go .icon { transition: transform var(--dur-short) var(--ease-out); }
a.row:hover .row__go .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { a.row:hover .row__go .icon { transform: none; } }
@media (max-width: 60rem) { .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); } .row__go { justify-self: start; } .row h3 { font-size: var(--text-xl); } }
.rows-note { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); color: var(--color-ink-2); }

/* product captures (screens of real work) */
.shot { margin: 0; }
.shot__frame { overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); box-shadow: var(--shadow-soft); }
.shot__frame img { width: 100%; height: auto; }
.on-field .shot__frame { border-color: var(--color-field-rule); }
.work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.work + .work { margin-top: var(--section-gap-s); padding-top: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.work--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.work--flip .shot { order: 2; }
.work__text { display: grid; gap: var(--space-md); align-content: start; }
.work__text h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.12; }
.work__meta { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .work, .work--flip { grid-template-columns: minmax(0, 1fr); } .work--flip .shot { order: 0; } }

/* figures the owner measured */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin-top: var(--space-lg); }
.stats > * { padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.stats > :first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.stats span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 40rem) { .stats { grid-template-columns: minmax(0, 1fr); } .stats > * { padding: var(--space-md) 0; border-left: 0; border-top: 1px solid var(--color-rule); } .stats > :first-child { border-top: 0; padding-top: 0; } }

/* steps: a real ordered list */
.steps { counter-reset: step; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps > li { counter-increment: step; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.steps > li::before { content: counter(step); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-md); }
.steps h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.steps p { color: var(--color-ink-2); font-size: var(--text-md); }
.on-field .steps > li { border-top-color: var(--color-field-rule); }
.on-field .steps > li::before { color: var(--color-field-accent); }
.on-field .steps p { color: var(--color-field-ink-2); }
@media (max-width: 64rem) { .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 40rem) { .steps, .steps--4, .steps--3 { grid-template-columns: minmax(0, 1fr); } }

/* statement */
.statement { font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; max-width: 22ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.statement-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.statement-wrap p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .statement-wrap { grid-template-columns: minmax(0, 1fr); } }

/* items: sets of two, three or four across, parted by a top rule */
.items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); list-style: none; }
.items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items > li, .items > div { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.items h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.items p, .items li li { color: var(--color-ink-2); }
.items .icon { color: var(--color-accent); margin-bottom: var(--space-xs); }
.on-field .items > li, .on-field .items > div { border-top-color: var(--color-field-rule); }
.on-field .items p { color: var(--color-field-ink-2); }
@media (max-width: 64rem) { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .items, .items--3, .items--2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* split: text beside a photograph or a built sample */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--wide-text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip > :first-child { order: 2; }
.split__text { display: grid; gap: var(--space-md); align-content: center; }
.split__text .lead, .split__text p { color: var(--color-ink-2); }
.on-field .split__text p { color: var(--color-field-ink-2); }
@media (max-width: 60rem) { .split, .split--even, .split--wide-text { grid-template-columns: minmax(0, 1fr); } .split--flip > :first-child { order: 0; } }

.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); aspect-ratio: 4 / 3; background: var(--color-paper-3); }
.photo > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.02); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--wide { aspect-ratio: 16 / 9; }

/* person: the founder */
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; }
.person__text { display: grid; gap: var(--space-md); }
.person__text p { color: var(--color-ink-2); }
.facts { list-style: none; display: grid; gap: 0; margin-top: var(--space-xs); border-top: 1px solid var(--color-rule); }
.facts li { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; border-bottom: 1px solid var(--color-rule); font-weight: 500; }
.facts .icon { color: var(--color-accent); }
@media (max-width: 60rem) { .person { grid-template-columns: minmax(0, 1fr); } .person .photo { max-width: 28rem; } }

/* faq: details as rows beside a head */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.faq__head { display: grid; gap: var(--space-md); position: sticky; top: calc(var(--nav-offset) + var(--space-lg)); }
.faq__list { border-top: 1px solid var(--color-rule-strong); }
.faq details { border-bottom: 1px solid var(--color-rule-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding-block: var(--space-md); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); cursor: pointer; list-style: none; border-radius: var(--radius-inner); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq summary:active { color: var(--color-accent-hover); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary .icon { transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details > div, .faq details > p { padding-bottom: var(--space-lg); max-width: 65ch; color: var(--color-ink-2); }
.faq details > div > * + * { margin-top: var(--space-sm); }
.faq-group + .faq-group { margin-top: var(--space-2xl); }
.faq-group > h3 { margin-bottom: var(--space-md); font-size: var(--text-title); }
@media (max-width: 60rem) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__head { position: static; } }

/* links to related pages */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 88px; padding: var(--space-lg); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; text-decoration: none; letter-spacing: -0.01em; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.related a:hover { border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.related a:active { background: var(--color-paper-2); }
.related .icon { color: var(--color-accent); }
@media (max-width: 60rem) { .related { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .related a { min-height: 64px; padding: var(--space-md); font-size: var(--text-md); overflow-wrap: break-word; } }

/* close band */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.close h2 { max-width: 18ch; }
.close .actions { justify-content: flex-end; }
@media (max-width: 60rem) { .close { grid-template-columns: minmax(0, 1fr); } .close .actions { justify-content: flex-start; } }

/* ---------- inner pages: Banner hero ---------- */
.page-head { padding-block: var(--space-2xl) var(--section-gap-s); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-3xl); align-items: end; }
.page-head__grid--visual { align-items: center; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.page-head h1 { font-size: var(--text-display-s); line-height: 1.04; max-width: 18ch; }
.page-head .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.page-head.on-field .lead { color: var(--color-field-ink-2); }
.page-head .actions { margin-top: var(--space-xl); }
.crumbs { margin-bottom: var(--space-xl); font-size: var(--text-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); list-style: none; color: var(--color-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.crumbs li + li::before { content: "/"; color: var(--color-rule-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.on-field .crumbs ol { color: var(--color-field-ink-2); }
.on-field .crumbs a { color: var(--color-field-ink-2); }
.on-field .crumbs li + li::before { color: var(--color-field-rule); }
.page-head.on-field { margin-top: calc(-1 * var(--nav-offset)); padding-top: calc(var(--nav-offset) + var(--space-2xl)); }
@media (max-width: 60rem) { .page-head__grid, .page-head__grid--visual { grid-template-columns: minmax(0, 1fr); } }

/* jump links inside a page */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin-top: var(--space-xl); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.jump a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.jump a:active { background: var(--color-paper-3); }

/* ---------- long documents: articles and legal ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.doc__aside { position: sticky; top: calc(var(--nav-offset) + var(--space-lg)); display: grid; gap: var(--space-lg); font-size: var(--text-sm); }
.doc__aside h2 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-ink); }
.toc ol { list-style: none; display: grid; gap: var(--space-3xs); border-left: 1px solid var(--color-rule); }
.toc a { display: block; padding: var(--space-xs) var(--space-md); color: var(--color-ink-2); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--color-accent); }
.byline { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
@media (max-width: 60rem) { .doc { grid-template-columns: minmax(0, 1fr); } .doc__aside { position: static; } }

.prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; color: var(--color-ink); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.15; scroll-margin-top: var(--space-4xl); }
.prose h3 { margin-top: var(--space-xl); font-size: var(--text-lg); letter-spacing: -0.01em; }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-sm); }
.prose ul, .prose ol { padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-accent); }
.prose blockquote, .prose .note { margin-inline: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); }
.prose .note p + p { margin-top: var(--space-xs); }
.prose figure { margin-block: var(--space-xl); margin-inline: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }

/* tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table th { text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); white-space: nowrap; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-strong); }
.table td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; color: var(--color-ink-2); }
.table td:first-child { font-weight: 600; color: var(--color-ink); }

/* ---------- a built sample: chat or record ---------- */
.sample { margin: 0; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.sample__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; }
.chat { list-style: none; display: grid; gap: var(--space-sm); }
.chat li { max-width: 85%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-md); line-height: 1.5; }
.chat .me { justify-self: end; background: var(--color-field); color: var(--color-field-ink); }
.chat small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); }
.chat .handover { justify-self: center; max-width: none; background: transparent; padding: var(--space-2xs) var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.record { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); font-size: var(--text-md); }
.record dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-3xs); }
.record dd { margin: 0; font-weight: 500; }
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); counter-reset: pipe; }
.pipeline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pipeline li { counter-increment: pipe; display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.pipeline li strong { color: var(--color-ink); font-size: var(--text-md); }
.pipeline li::before { content: counter(pipe); font-weight: 700; color: var(--color-accent); }
.on-field .pipeline li { background: var(--color-field-2); color: var(--color-field-ink-2); }
.on-field .pipeline li strong { color: var(--color-field-ink); }
.on-field .pipeline li::before { color: var(--color-field-accent); }
@media (max-width: 60rem) { .pipeline, .pipeline--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pipeline, .pipeline--5 { grid-template-columns: minmax(0, 1fr); } .chat li { max-width: 100%; } .sample { padding: var(--space-lg) var(--space-md); } }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label, .field legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.field .opt { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-inner); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.field__help.is-error { color: var(--color-error); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.form__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 40rem) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer: statement ---------- */
.site-footer { padding-block: var(--section-gap-s) var(--space-xl); }
.footer__close { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl) var(--gap-columns); align-items: end; padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--color-field-rule); }
.footer__close h2 { font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; }
.footer__close p { margin-top: var(--space-lg); max-width: 46ch; }
.footer__close .actions { justify-content: flex-end; }
.footer__links { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 2fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-2xl); }
.footer__links h2 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-field-ink); margin-bottom: var(--space-sm); }
.footer__links ul { list-style: none; display: grid; gap: var(--space-3xs); }
.footer__links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-field-ink-2); text-decoration: none; font-size: var(--text-sm); }
.footer__links a:hover { color: var(--color-field-ink); text-decoration: underline; }
.footer__links p { font-size: var(--text-sm); }
.footer__contact li, .footer__contact p, .footer__contact a { font-size: var(--text-md); }
.fill { font-size: max(1em, var(--text-md)); }
.footer__brand { display: grid; gap: var(--space-md); align-content: start; }
.footer__brand .wordmark { color: var(--color-field-ink); }
.footer__brand .wordmark .wm-ai { color: var(--color-field-accent); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); font-size: var(--text-sm); color: var(--color-field-ink-2); }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; }
.footer__legal a { color: var(--color-field-ink-2); text-decoration: none; }
.footer__legal a:hover { color: var(--color-field-ink); text-decoration: underline; }
.footer__credit { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-field-ink-2); }
@media (max-width: 64rem) { .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 60rem) { .footer__close { grid-template-columns: minmax(0, 1fr); } .footer__close .actions { justify-content: flex-start; } }
@media (max-width: 40rem) { .footer__links { grid-template-columns: minmax(0, 1fr); } }

/* ---------- utilities ---------- */
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.center-text { text-align: center; }

/* Hallmark · page styles for AiOplossingen, AiChatbots, Workflowautomatisering, Documentverwerking, SalesLeadopvolging · system and stamp in site.css */

/* pipelines that fit beside a page head */
.pipeline--col { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.pipeline--col li { grid-template-columns: var(--space-lg) minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; }
.pipeline--col li > * { grid-column: 2; }
.pipeline--col li::before { grid-column: 1; grid-row: 1; }
.pipeline--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 60rem) { .pipeline--col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .pipeline--2 { grid-template-columns: minmax(0, 1fr); } }
.sample > figcaption { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.sample h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }

/* problem and solution side by side */
.duo h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.duo p { color: var(--color-ink-2); }
.split__text h2 + p { margin-top: calc(-1 * var(--space-2xs)); }
.split__text p + h2 { margin-top: var(--space-lg); }

/* a sub-list inside an item */
.items ul { list-style: none; display: grid; gap: var(--space-2xs); }
.items ul li { display: flex; align-items: center; gap: var(--space-xs); }
.items ul .icon { margin-bottom: 0; width: 16px; height: 16px; }

/* the invoice beside what was read from it */
.invoice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: start; }
.invoice__paper { display: grid; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.invoice__paper b { color: var(--color-ink); font-size: var(--text-md); }
.invoice__paper span { display: block; height: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.invoice__paper span:nth-of-type(2) { width: 70%; }
.invoice__paper .is-open { color: var(--color-accent); font-weight: 600; }
.invoice h3 { margin-bottom: var(--space-sm); }
.record .is-open { color: var(--color-accent); font-weight: 600; }
@media (max-width: 40rem) { .invoice { grid-template-columns: minmax(0, 1fr); } }

/* static controls drawn inside a sample (not interactive) */
.mock-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.mock-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.mock-btn--primary { border-color: var(--color-accent); color: var(--color-accent); }

/* a review queue */
.queue { list-style: none; display: grid; }
.queue li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.queue li:first-child { padding-top: 0; }
.queue li:last-child { border-bottom: 0; padding-bottom: 0; }
.queue b { display: block; font-variant-numeric: tabular-nums; }
.queue small { display: block; color: var(--color-ink-2); }
.queue .mock-actions { margin-top: 0; }

/* an activity log */
.log { grid-template-columns: max-content minmax(0, 1fr); row-gap: 0; }
.log dt, .log dd { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.log dt { font-variant-numeric: tabular-nums; padding-top: calc(var(--space-sm) + var(--space-3xs)); }
.log dt:last-of-type, .log dd:last-of-type { border-bottom: 0; }
.log .is-open { color: var(--color-accent); }

/* a lead board */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.board section { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.board h3 { margin-bottom: var(--space-2xs); }
.board ul { list-style: none; display: grid; gap: var(--space-xs); }
.board li { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper); font-weight: 600; }
.board li small { display: block; font-weight: 400; color: var(--color-ink-2); }
.board .is-open { border-color: var(--color-accent); }
@media (max-width: 40rem) { .board { grid-template-columns: minmax(0, 1fr); } }

/* Hallmark · page styles for OverOns, WieBenIk, Werkwijze, Projecten, ToolsTechnologie · system and stamp in site.css */

/* founder quote beside the portrait */
.person__text blockquote { margin: 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); font-size: var(--text-title); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--color-ink); text-wrap: pretty; }

/* missie and visie beside the workplace photo */
.mv { display: grid; gap: var(--space-xl); }
.mv > div { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.mv h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.mv p { font-size: var(--text-lead); color: var(--color-ink-2); }

/* rows without a link (an open item, a technology) */
div.row { cursor: default; }
.rows .row .fill { font-size: var(--text-md); font-weight: 400; }

/* werkwijze: five phases as one ordered list */
.steps.phases { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--color-rule-strong); }
.steps.phases > li { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-2xl); scroll-margin-top: var(--nav-offset); }
.steps.phases > li::before { margin-bottom: 0; }
.phases__head { display: grid; gap: var(--space-sm); align-content: start; }
.phases__head h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.12; }
.phases__head p { color: var(--color-ink-2); }
.phases dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin: 0; }
.phases dl > div { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.phases dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.phases dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 64rem) { .steps.phases { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .steps.phases > li { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); } .phases dl { grid-column: 2; } }
@media (max-width: 40rem) { .steps.phases > li { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); } .phases dl { grid-column: 1; grid-template-columns: minmax(0, 1fr); } }

/* questions for the first meeting */
.questions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); list-style: none; }
.questions li { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-strong); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-ink); text-wrap: balance; }
@media (max-width: 64rem) { .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .questions { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* jump links on the navy field */
.on-field .jump a { color: var(--color-field-ink); border-color: var(--color-field-rule); }
.on-field .jump a:hover { background: var(--color-field-2); color: var(--color-field-ink); }
.on-field .jump a:active { background: var(--color-field); }
.jump a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.on-field .jump a:focus-visible { outline-color: var(--color-focus-on-field); }

/* projecten: one case per section */
.case { scroll-margin-top: var(--nav-offset); }
.case__head { display: grid; gap: var(--space-md); max-width: 62rem; margin-bottom: var(--space-2xl); }
.case__head h2 { text-wrap: balance; }
.case__head p { color: var(--color-ink-2); }
.case__head .tags { margin-top: var(--space-2xs); }
.case__part { margin-top: var(--section-gap-s); }
.case__part > h3 { margin-bottom: var(--space-lg); font-size: var(--text-xl); letter-spacing: -0.02em; }
.case__measure { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.case__measure .stats { margin-top: 0; }
.case__measure > div { display: grid; gap: var(--space-sm); }
.case__measure p { color: var(--color-ink-2); }
.case__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.case__foot + p { margin-top: var(--space-md); }
@media (max-width: 60rem) { .case__measure { grid-template-columns: minmax(0, 1fr); } }

/* what was built: a ruled list with checks */
.built { list-style: none; border-top: 1px solid var(--color-rule); }
.built li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); }
.built .icon { margin-top: var(--space-2xs); color: var(--color-accent); }

/* the side finding, set apart */
.aside-note { display: grid; gap: var(--space-xs); max-width: 62rem; padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); border: 1px solid var(--color-rule); }
.aside-note h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
.aside-note p { color: var(--color-ink-2); }
@media (max-width: 40rem) { .aside-note { padding: var(--space-lg) var(--space-md); } }

/* tools: criteria as a row-headed table */
.table th[scope="row"] { padding-block: var(--space-md); font-size: var(--text-md); color: var(--color-ink); white-space: normal; border-bottom-color: var(--color-rule); vertical-align: top; width: 30%; }
.table tr:first-child > * { border-top: 1px solid var(--color-rule-strong); }

/* Hallmark · page styles for Kennisbank, ArtikelAiVoorMkb, ArtikelChatbot, ArtikelProcesautomatisering, Faq · system and stamp in site.css */

/* article opening */
.page-head--article h1 { max-width: 24ch; text-wrap: balance; }
.page-head--article .lead { max-width: 60ch; }
.page-head .byline { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); }
.photo--cover { aspect-ratio: 21 / 9; }
@media (max-width: 40rem) { .photo--cover { aspect-ratio: 3 / 2; } }

/* questions at the end of an article */
.qa { border-top: 1px solid var(--color-rule-strong); }
.qa details { border-bottom: 1px solid var(--color-rule-strong); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); font-weight: 600; color: var(--color-ink); cursor: pointer; list-style: none; border-radius: var(--radius-inner); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--color-accent); }
.qa summary:active { color: var(--color-accent-hover); }
.qa summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.qa summary .icon { flex-shrink: 0; transition: transform var(--dur-short) var(--ease-out); }
.qa details[open] summary .icon { transform: rotate(45deg); }
.qa details > p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* kennisbank index: one lead article, the rest as rows */
.kb-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; margin-bottom: var(--space-3xl); }
.kb-lead__text { display: grid; gap: var(--space-md); align-content: start; }
.kb-lead h2 { font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch; }
.kb-lead p { color: var(--color-ink-2); max-width: 52ch; }
.kb-lead .tags { margin-top: var(--space-2xs); }
@media (max-width: 60rem) { .kb-lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .kb-lead h2 { font-size: var(--text-2xl); } }
.kb-rows .row h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.15; }
.kb-rows .row__title { display: grid; gap: var(--space-sm); justify-items: start; }
@media (max-width: 60rem) { .kb-rows .row h2 { font-size: var(--text-xl); } }

.related--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .related--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .related--4 { grid-template-columns: minmax(0, 1fr); } }

/* faq: topic list left, grouped questions right */
.faq__head .toc h2 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-ink); margin-bottom: var(--space-sm); }
.faq-group { scroll-margin-top: calc(var(--nav-offset) + var(--space-lg)); }
.faq-group > h2 { margin-bottom: var(--space-md); font-size: var(--text-title); letter-spacing: -0.015em; line-height: 1.2; }
.faq summary .icon { flex-shrink: 0; }

/* the four applications in the mkb guide: a real list, the number comes from the marker */
.prose .kb-apps > li + li { margin-top: var(--space-lg); }
.prose .kb-apps > li::marker { font-size: var(--text-lg); font-weight: 700; }
.prose .kb-apps h3 { margin-top: 0; }
.prose .kb-apps p { margin-top: var(--space-xs); }

/* link to the matching solution after an article */
.kb-next { margin-bottom: 0; align-items: center; }

@media (prefers-reduced-motion: reduce) { .qa summary .icon { transition: none; } }

/* Hallmark · page styles for Contact, Bedankt, Privacy, Cookies, Voorwaarden · system and stamp in site.css */

/* Contact: the form card beside the expectations */
.contact { align-items: start; }
.form--card { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.form__title { text-wrap: balance; font-size: var(--text-xl); letter-spacing: -0.02em; }
.contact__aside { display: grid; gap: var(--space-xl); align-content: start; }
.contact__aside h2 { text-wrap: balance; font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.15; }
.steps--stack, .steps--3.steps--stack { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
.steps--stack > li { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-md); align-items: baseline; padding-top: var(--space-md); }
.steps--stack > li::before { font-size: var(--text-xl); margin-bottom: 0; }
.contact__mail { color: var(--color-ink-2); }
@media (max-width: 40rem) { .form--card { padding: var(--space-lg) var(--space-md); } }

/* Bedankt: one centred column */
.corridor { max-width: 44rem; display: grid; justify-items: center; gap: var(--space-lg); text-align: center; }
.corridor h1 { text-wrap: balance; font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.035em; }
.corridor .lead { color: var(--color-ink-2); max-width: 52ch; }
.corridor .actions { justify-content: center; margin-top: var(--space-sm); }
.corridor__mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-accent); }

/* Voorwaarden: numbered articles, numbers from the list */
.prose .articles { list-style: none; padding-left: 0; counter-reset: article; }
.prose .articles > li { counter-increment: article; }
.prose .articles > li + li { margin-top: var(--space-xl); }
.prose .articles h2 { text-wrap: balance; margin-top: var(--space-xl); }
.prose .articles h2::before { content: counter(article) ". "; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.prose .articles h2 + p { margin-top: var(--space-sm); }

/* Hallmark · WordPress adapter for the pantego.ai system · system and stamp in site.css */
/* Elementor wrappers carry no spacing of their own: the page markup owns the layout */
.nx-c, .nx-c > .e-con-inner, .nx-c .elementor-widget, .nx-c .elementor-widget-container { margin: 0 !important; padding: 0 !important; gap: 0 !important; max-width: none !important; width: 100%; }
.nx-c { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; }
.elementor-widget-html, .elementor-widget-shortcode { width: 100%; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Contact Form 7 in the system's form style */
.wpcf7 form { margin: 0; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 .field input, .wpcf7 .field select, .wpcf7 .field textarea { display: block; }
.wpcf7-not-valid { border-color: var(--color-error) !important; }
.wpcf7-not-valid-tip { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-error); }
.wpcf7 .btn.wpcf7-submit { margin: 0; }
.wpcf7-spinner { margin: 0 var(--space-sm); }
.wpcf7 form .wpcf7-response-output { margin: var(--space-lg) 0 0; padding: var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-inner); font-size: var(--text-sm); color: var(--color-ink); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--color-error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-success); }
.wpcf7-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }