/* ==========================================================================
   Venelpark — stylesheet
   Design system: DESIGN.md (frontmatter is normative). Brand rules: PRODUCT.md.

   Naming is flat kebab-case (.hero, .hero-title); modifiers are separate
   additive classes (.btn + .btn-accent). Mobile-first; min-width queries only.
   ========================================================================== */

/* ===========================
   Fonts
   =========================== */

@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================
   Tokens
   =========================== */

:root {
  /* Surface */
  --bg: oklch(96.5% 0.0086 84.6);
  --bg-warm: oklch(97.4% 0.0114 84.6);
  --bg-cool: oklch(95.8% 0.0070 88.6);
  --surface: oklch(98.8% 0.0029 84.6);

  /* Ink */
  --ink: oklch(26.2% 0.0664 257.9);
  --ink-soft: oklch(28.8% 0.0722 259.1);
  --body: oklch(46.7% 0.0440 258.3);

  /* Night — the two dark sections */
  --deep: oklch(15.7% 0.0364 262.8);
  --deep-raised: oklch(20.9% 0.0530 262.1);
  --field: oklch(24.1% 0.0519 261.2);
  --muted-on-dark: oklch(81.7% 0.0256 257.7);
  --placeholder: oklch(63.7% 0.0383 260.3);

  /* Accents. See DESIGN.md, The Two Blues Rule — accent is a fill colour,
     never small text. Text uses accent-text on light, accent-on-dark on dark. */
  --accent: oklch(56.9% 0.2023 259.7);
  --accent-hover: oklch(51.5% 0.1900 259.7);
  --accent-text: oklch(52.0% 0.1900 259.7);
  --accent-on-dark: oklch(66.0% 0.1600 259.7);
  --accent-faint: oklch(72.0% 0.0900 259.7); /* process connector arrows */
  --teal: oklch(65.5% 0.1092 194.8);
  --teal-ink: oklch(52.0% 0.1050 194.8);

  /* Interaction siblings. Every one is its base token shifted in lightness
     only — hue and chroma are held, per DESIGN.md. */
  --ink-hover: oklch(21.0% 0.0664 257.9);
  --deep-hover: oklch(26.0% 0.0530 262.1);
  --panel: oklch(19.0% 0.0450 261.0 / 0.82);
  --placeholder-light: oklch(54.0% 0.0300 258.3);

  --hairline: oklch(89.6% 0.0121 79.8);
  --hairline-strong: oklch(82.0% 0.0180 79.8);
  --hairline-cool: oklch(30.0% 0.0300 261.0);
  --hairline-cool-strong: oklch(40.0% 0.0400 261.0);

  --danger: oklch(48.0% 0.1700 27.0);
  --danger-bg: oklch(94.0% 0.0300 27.0);
  --danger-on-dark: oklch(72.0% 0.1600 27.0);
  --danger-bg-dark: oklch(30.0% 0.0800 27.0);

  /* Type */
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display: clamp(2.75rem, 6.2vw, 5.25rem);
  --text-display-sm: clamp(2.375rem, 5.2vw, 4.25rem);
  --text-headline: clamp(2rem, 3.8vw, 3.25rem);
  --text-subhead: clamp(1.5rem, 2.4vw, 2rem);
  --text-subhead-sm: clamp(1.375rem, 2vw, 1.75rem);
  /* The dark expertise band sets its heading a step below the section ramp so
     it clears the artwork on two lines instead of wrapping into it. */
  --text-headline-inset: clamp(1.875rem, 3.4vw, 2.875rem);
  --text-title: clamp(1.1875rem, 1.5vw, 1.4375rem);
  --text-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
  --text-body: clamp(1rem, 0.95vw, 1.125rem);
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;
  --text-numeral: clamp(3rem, 5.5vw, 4.75rem);
  --text-monogram: clamp(3.25rem, 5.5vw, 4.5rem);
  /* The regional managers sit a tier below the directors; the monogram size
     is what carries that, since the names share one weight. */
  --text-monogram-sm: clamp(1.75rem, 2.4vw, 2.25rem);
  --text-wordmark: clamp(1.0625rem, 1.35vw, 1.3125rem);

  /* Space */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xl: 72px;
  --space-2xl: 112px;
  --space-3xl: 160px;

  --section-pad: clamp(72px, 9vw, 160px);
  --heading-gap: clamp(48px, 5vw, 72px);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Depth — one resting shadow, tinted toward ink. Never neutral black. */
  --shadow-settle: 0 1px 2px oklch(26.2% 0.0664 257.9 / 0.04),
    0 8px 24px oklch(26.2% 0.0664 257.9 / 0.05);
  --shadow-settle-raised: 0 2px 4px oklch(26.2% 0.0664 257.9 / 0.05),
    0 16px 40px oklch(26.2% 0.0664 257.9 / 0.08);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --measure: 65ch;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 620ms;

  /* z-index — semantic scale, no arbitrary values */
  --z-sticky: 100;
  --z-nav-panel: 200;
  --z-skip: 300;
}

/* ===========================
   Reset & base
   =========================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 96px;
}

body {
  background-color: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 400;
  text-wrap: balance;
  /* Last-resort guard only: this triggers when a word would actually overflow,
     never to "improve" a line break. Do not add hyphens:auto here — combined
     with text-wrap:balance it hyphenates titles that fit fine. */
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

/* Each editorial sentence begins on its own line, flush with the left edge of
   its prose column. A block-level span rather than <br> or a second <p>: the
   paragraph stays one paragraph in the accessibility tree, so a screen reader
   still reads it as continuous prose and the break is purely visual.

   Wrapping inside a sentence is untouched — a long sentence still fills the
   measure and wraps naturally. Only the sentence boundary is a hard break. */
.sentence {
  display: block;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.dark :focus-visible {
  outline-color: var(--accent-on-dark);
}

::selection {
  background-color: oklch(56.9% 0.2023 259.7 / 0.18);
  color: var(--ink);
}

/* ===========================
   Layout primitives
   =========================== */

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section-tight {
  padding-block: clamp(56px, 6vw, 104px);
}

.section-heading {
  font-size: var(--text-headline);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-block-end: var(--heading-gap);
}

.lead {
  max-inline-size: 52ch;
  font-size: var(--text-lead);
  line-height: 1.7;
}

.prose {
  max-inline-size: var(--measure);
}

.prose p + p {
  margin-block-start: 1.35em;
}

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -120%;
  z-index: var(--z-skip);
  padding: 14px 24px;
  background-color: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transition: translate var(--dur) var(--ease-out);
}

.skip-link:focus {
  translate: -50% 0;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Honeypot. Off-screen rather than display:none — hidden fields are skipped by
   some bots but an off-screen one still gets filled. */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.icon {
  inline-size: 100%;
  block-size: 100%;
}

.eyebrow {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: clamp(24px, 3vw, 40px);
}

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

/* ===========================
   Buttons
   =========================== */

.btn {
  --btn-fill: var(--ink);
  --btn-ink: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.6vw, 38px);
  min-block-size: 56px;
  padding: 18px 24px;
  border: 1px solid transparent;
  border-radius: 0; /* Square buttons against rounded cards — deliberate. */
  background-color: var(--btn-fill);
  color: var(--btn-ink);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.btn .icon {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}

.btn:hover {
  --btn-fill: var(--ink-hover);
}

.btn-accent {
  --btn-fill: var(--accent);
  --btn-ink: #fff;
}

.btn-accent:hover {
  --btn-fill: var(--accent-hover);
}

.btn-outline {
  --btn-fill: transparent;
  --btn-ink: var(--ink);
  border-color: var(--hairline);
}

.btn-outline:hover {
  --btn-fill: var(--surface);
  border-color: var(--hairline-strong);
}

.dark .btn-outline {
  --btn-ink: #fff;
  border-color: var(--hairline-cool);
}

.dark .btn-outline:hover {
  --btn-fill: var(--deep-hover);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Text link with a trailing arrow. The only element on the site whose arrow
   moves on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--accent-text);
  font-size: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.dark .link-arrow {
  color: var(--accent-on-dark);
}

.link-arrow .icon {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  transition: translate var(--dur) var(--ease-out);
}

.link-arrow:hover .icon {
  translate: 4px 0;
}

/* ===========================
   Header & navigation
   =========================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--bg);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  border-block-end-color: var(--hairline);
  background-color: oklch(96.5% 0.0086 84.6 / 0.92);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-block-size: 88px;
  padding-block: var(--space-xs);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  color: var(--ink);
}

.logo-mark {
  inline-size: clamp(26px, 2.6vw, 32px);
  block-size: auto;
  flex: none;
}

/* Wide tracking is part of the mark — see brand-guidelines. */
.logo-word {
  font-size: var(--text-wordmark);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 46px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  color: var(--ink);
  font-size: var(--text-body);
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: var(--hairline);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease-out);
}

.nav-link:hover::after {
  scale: 1 1;
}

/* Active state is an underline, never a weight change — a weight change would
   shift the layout of every other item. */
.nav-link.is-active::after {
  background-color: var(--accent-text);
  scale: 1 1;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 48px;
  min-block-size: 44px;
  padding-inline: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.lang-toggle:hover {
  border-color: var(--ink);
  background-color: var(--surface);
}

/* ---------------------------------------------------------------------------
   Language menu

   A <details> disclosure, so it opens and closes without JavaScript. The
   summary keeps the exact footprint the two-state NL/EN toggle had, which is
   what lets four languages sit in an approved header design without moving
   anything around it.
   --------------------------------------------------------------------------- */

.lang-menu {
  position: relative;
}

.lang-menu > summary {
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

/* Safari and Chrome each draw their own marker; both are removed. */
.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lang-menu > summary::marker {
  content: '';
}

.lang-menu > summary svg {
  inline-size: 14px;
  block-size: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.lang-menu[open] > summary svg {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 20;
  min-inline-size: 148px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  box-shadow: 0 8px 24px oklch(26.2% 0.0664 257.9 / 0.10);
  list-style: none;
  margin: 0;
}

.lang-list a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-small);
  text-decoration: none;
  white-space: nowrap;
}

.lang-list a:hover {
  background-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu > summary svg {
    transition: none;
  }
}

/* The mobile panel lists the languages flat, so they need no disclosure.
   .nav-mobile-actions is a wrapping flex row, so the list has to claim a
   full row of its own; without the 100% basis it shrinks to content width
   and the language buttons come out narrower than the call to action
   directly above them. */
.nav-mobile-langs {
  flex: 1 1 100%;
  display: grid;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-mobile-langs .btn {
  inline-size: 100%;
}

.header-cta {
  min-block-size: 48px;
  padding: 12px 24px;
  gap: var(--space-xs);
  font-size: var(--text-small);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background-color: transparent;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  inline-size: 18px;
  block-size: 1.5px;
  background-color: var(--ink);
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    translate var(--dur) var(--ease-out);
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
}

.hamburger::before {
  translate: 0 -6px;
}

.hamburger::after {
  translate: 0 6px;
}

.nav-toggle[aria-expanded='true'] .hamburger {
  background-color: transparent;
}

.nav-toggle[aria-expanded='true'] .hamburger::before {
  translate: 0 0;
  rotate: 45deg;
}

.nav-toggle[aria-expanded='true'] .hamburger::after {
  translate: 0 0;
  rotate: -45deg;
}

/* Mobile panel */
.nav-mobile {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: var(--z-nav-panel);
  max-block-size: calc(100dvh - 88px);
  overflow-y: auto;
  padding: var(--space-md) var(--gutter) var(--space-xl);
  background-color: var(--bg);
  border-block-end: 1px solid var(--hairline);
}

.nav-mobile .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.nav-mobile .nav-link {
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--hairline);
  font-size: var(--text-lead);
}

.nav-mobile .nav-link::after {
  display: none;
}

.nav-mobile .nav-link.is-active {
  color: var(--accent-text);
}

.nav-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
}

.nav-mobile-actions .btn {
  flex: 1 1 14rem;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  /* Resize guard: a stale .is-open must never leak onto desktop. */
  .nav-mobile {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .nav-desktop,
  .header-actions .header-cta,
  .header-actions .lang-toggle {
    display: none;
  }
}

/* ===========================
   Hero
   =========================== */

.hero {
  position: relative;
  background-color: var(--bg);
  overflow: hidden;
}

.hero-copy {
  padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 88px);
  max-inline-size: 40rem;
}

.hero-title {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  max-inline-size: 34ch;
  margin-block-start: clamp(24px, 3vw, 40px);
  font-size: var(--text-lead);
  line-height: 1.65;
}

.hero-ctas {
  margin-block-start: clamp(32px, 4vw, 56px);
}

.hero-media {
  position: relative;
  margin-inline-start: var(--gutter);
  overflow: hidden;
}

.hero-media img {
  inline-size: 100%;
  block-size: clamp(260px, 46vw, 420px);
  object-fit: cover;
  object-position: 68% center;
}

@media (min-width: 1024px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    inline-size: min(48%, 35rem);
    max-inline-size: none;
    padding-block: clamp(88px, 9vw, 148px) clamp(88px, 9vw, 148px);
  }

  /* Full-bleed to the viewport edge with a hard vertical edge — the signature
     of this design. Never feather it. */
  .hero-media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 52%;
    margin-inline-start: 0;
  }

  .hero-media img {
    block-size: 100%;
  }
}

/* ===========================
   Trust strip
   =========================== */

.trust-strip {
  border-block: 1px solid var(--hairline);
}

.trust-list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
  inline-size: 100%;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.trust-item .icon {
  inline-size: clamp(34px, 3vw, 44px);
  block-size: clamp(34px, 3vw, 44px);
  flex: none;
}

.trust-item:nth-child(1) .icon {
  color: var(--ink);
}

.trust-item:nth-child(2) .icon {
  color: var(--accent);
}

.trust-item:nth-child(3) .icon {
  color: var(--teal-ink);
}

.trust-label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .trust-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .trust-item + .trust-item {
    padding-inline-start: clamp(24px, 4vw, 64px);
    border-inline-start: 1px solid var(--hairline);
  }

  .trust-item:not(:last-child) {
    padding-inline-end: clamp(24px, 4vw, 64px);
  }
}

/* ===========================
   Solution cards
   =========================== */

.solutions {
  background-image: linear-gradient(to bottom, var(--bg-warm), var(--bg));
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 26px);
}

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

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.solution-card {
  display: flex;
  flex-direction: column;
  min-block-size: clamp(240px, 23vw, 330px);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-settle);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.solution-card:hover {
  box-shadow: var(--shadow-settle-raised);
  border-color: var(--hairline-strong);
}

/* Sizing only — spacing goes on margin. With border-box, padding here would
   be subtracted from block-size and shrink the glyph itself. */
.solution-card .icon {
  inline-size: clamp(54px, 5.4vw, 78px);
  block-size: clamp(54px, 5.4vw, 78px);
  flex: none;
  margin-block-end: clamp(24px, 2.6vw, 34px);
}

/* Cards keep a common minimum height, but the copy sits directly under the
   icon rather than being pushed to the foot — the approved design has no gap
   there. */
.solution-card .card-body {
  margin-block-end: auto;
}

/* Blue and teal alternate as rhythm only — never as meaning. */
.solution-card:nth-child(odd) .icon,
.why-item:nth-child(odd) .icon {
  color: var(--accent);
}

.solution-card:nth-child(even) .icon,
.why-item:nth-child(even) .icon {
  color: var(--teal-ink);
}

.card-title {
  font-size: var(--text-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  margin-block-end: var(--space-sm);
}

.card-body {
  font-size: var(--text-body);
  line-height: 1.7;
}

/* A card that is a link has to say so. The arrow is the system's existing
   affordance; it nudges on hover exactly like the text link does. */
.card-more {
  display: block;
  margin-block-start: var(--space-sm);
  color: var(--accent-text);
}

.card-more .icon {
  inline-size: 22px;
  block-size: 22px;
  transition: translate var(--dur) var(--ease-out);
}

.solution-card:hover .card-more .icon,
.solution-card:focus-visible .card-more .icon {
  translate: 4px 0;
}

/* ===========================
   Split section (about)
   =========================== */

.split {
  position: relative;
  background-color: var(--bg-cool);
  overflow: hidden;
}

.split-copy {
  padding-block: var(--section-pad);
  max-inline-size: 38rem;
}

.split-copy .section-heading {
  margin-block-end: clamp(28px, 3vw, 40px);
}

.split-copy p + p {
  margin-block-start: 1.5em;
}

.split-copy .btn {
  margin-block-start: clamp(32px, 4vw, 56px);
}

.split-media {
  margin-inline-start: var(--gutter);
}

.split-media img {
  inline-size: 100%;
  block-size: clamp(240px, 42vw, 400px);
  object-fit: cover;
  object-position: 55% center;
}

@media (min-width: 1024px) {
  .split-copy {
    inline-size: min(48%, 36rem);
  }

  .split-media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 50%;
    margin-inline-start: 0;
  }

  .split-media img {
    block-size: 100%;
  }
}

/* ===========================
   Process steps
   =========================== */

.process-list {
  display: grid;
  gap: clamp(40px, 5vw, 56px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(20px, 2.5vw, 32px);
}

.process-number {
  font-size: var(--text-numeral);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.process-title {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--ink-soft);
  margin-block-end: var(--space-xs);
}

.process-body {
  max-inline-size: 30ch;
  line-height: 1.7;
}

.process-arrow {
  display: none;
  color: var(--accent-faint);
}

@media (min-width: 900px) {
  .process-list {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: clamp(20px, 2.5vw, 36px);
  }

  .process-arrow {
    display: block;
    inline-size: clamp(48px, 5vw, 84px);
    block-size: 20px;
    margin-block-start: clamp(20px, 2.5vw, 32px);
  }
}

/* ===========================
   Dark sections
   =========================== */

.dark {
  position: relative;
  background-color: var(--deep);
  background-image: linear-gradient(135deg, var(--deep) 0%, var(--deep-raised) 72%);
  color: var(--muted-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.dark h1,
.dark h2,
.dark h3 {
  color: #fff;
}

.dark-media {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.expertise-media {
  inset-block-end: -8%;
  inset-inline-start: -14%;
  inline-size: min(860px, 92%);
  opacity: 0.7;
  /* Only the alpha channel of a mask is read, so currentColor simply means
     "opaque here" — no literal colour, nothing that belongs in the palette. */
  mask-image:
    linear-gradient(to right, currentColor 38%, transparent 88%),
    linear-gradient(to top, currentColor 45%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.expertise-inner {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}

.expertise-heading {
  font-size: var(--text-headline-inset);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.expertise-cols {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.expertise-col .icon {
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--space-md);
}

.expertise-col:nth-child(1) .icon {
  color: var(--accent-on-dark);
}

.expertise-col:nth-child(2) .icon {
  color: var(--teal);
}

.expertise-col h3 {
  font-size: var(--text-title);
  font-weight: 500;
  margin-block-end: var(--space-sm);
  hyphens: auto;
}

.expertise-col p {
  max-inline-size: 34ch;
  line-height: 1.7;
}

.expertise-link {
  margin-block-start: var(--space-md);
}

@media (min-width: 1024px) {
  .expertise-inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }

  .expertise-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 3.5vw, 56px);
  }

  .expertise-col + .expertise-col {
    padding-inline-start: clamp(32px, 3.5vw, 56px);
    border-inline-start: 1px solid var(--hairline-cool);
  }
}

/* ===========================
   Why Venelpark
   =========================== */

.why-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}

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

@media (min-width: 1024px) {
  .why-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
}

/* Centred content — the single deliberate exception to left alignment. */
.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(0px, 2vw, 28px);
}

.why-item .icon {
  inline-size: clamp(48px, 5vw, 72px);
  block-size: clamp(48px, 5vw, 72px);
  margin-block-end: clamp(32px, 4vw, 52px);
}

.why-item h3 {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--ink-soft);
  margin-block-end: var(--space-sm);
}

.why-item p {
  max-inline-size: 26ch;
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .why-item + .why-item {
    border-inline-start: 1px solid var(--hairline);
  }
}

/* ===========================
   Leadership
   =========================== */

.leadership-list {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.leader {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.leader {
  grid-template-columns: 1fr;
}

.leader-monogram {
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: var(--text-monogram);
  line-height: 1;
  letter-spacing: 0.01em;
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--hairline);
}

@media (min-width: 560px) {
  .leader {
    grid-template-columns: auto 1fr;
  }

  .leader-monogram {
    padding-block-end: 0;
    padding-inline-end: clamp(20px, 3vw, 40px);
    border-block-end: 0;
    border-inline-end: 1px solid var(--hairline);
  }
}

.leader:nth-child(odd) .leader-monogram {
  color: var(--accent);
}

.leader:nth-child(even) .leader-monogram {
  color: var(--teal-ink);
}

.leader-name {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--ink);
}

.leader-role {
  font-size: var(--text-small);
  margin-block-end: var(--space-xs);
}

.leader:nth-child(odd) .leader-role {
  color: var(--accent-text);
}

.leader:nth-child(even) .leader-role {
  color: var(--teal-ink);
}

.leader-body + .leader-body {
  margin-block-start: 1em;
}

.leader-body {
  max-inline-size: 52ch;
  font-size: var(--text-body);
  line-height: 1.65;
}

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

/* ===========================
   Contact CTA + form
   =========================== */

.cta-media {
  inset-block-end: -12%;
  inset-inline-start: -10%;
  inline-size: min(980px, 96%);
  opacity: 0.85;
  mask-image:
    linear-gradient(to right, currentColor 32%, transparent 86%),
    linear-gradient(to top, currentColor 40%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.cta-inner {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}

.cta-heading {
  font-size: var(--text-display-sm);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-inline-size: 14ch;
}

.cta-body {
  max-inline-size: 34ch;
  margin-block-start: var(--space-md);
  font-size: var(--text-lead);
  line-height: 1.65;
}

.cta-inner .btn {
  margin-block-start: clamp(32px, 4vw, 48px);
}

@media (min-width: 1024px) {
  .cta-inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

.form-panel {
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--hairline-cool);
  border-radius: var(--radius-xl);
  background-color: var(--panel);
  backdrop-filter: blur(6px);
}

.form-panel-light {
  border-color: var(--hairline);
  background-color: var(--surface);
  backdrop-filter: none;
  box-shadow: var(--shadow-settle);
}

.form-rows {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  border: 0;
  padding: 0;
  margin: 0;
}

.field-row {
  display: grid;
  gap: var(--space-2xs);
}

.field-label {
  font-size: var(--text-small);
  line-height: 1.5;
  padding-block-start: 2px;
}

.dark .field-label {
  color: var(--muted-on-dark);
}

.field {
  inline-size: 100%;
  padding: 16px 18px;
  border: 1px solid var(--hairline-cool);
  border-radius: var(--radius-sm);
  background-color: var(--field);
  color: #fff;
  font-size: var(--text-body);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.form-panel-light .field {
  border-color: var(--hairline);
  background-color: var(--bg);
  color: var(--ink);
}

.field::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.form-panel-light .field::placeholder {
  color: var(--placeholder-light);
}

.field:hover {
  border-color: var(--hairline-cool-strong);
}

.form-panel-light .field:hover {
  border-color: var(--hairline-strong);
}

.field:focus {
  border-color: var(--accent-on-dark);
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

.form-panel-light .field:focus {
  border-color: var(--accent-text);
  outline-color: var(--accent-text);
}

textarea.field {
  min-block-size: 168px;
  resize: vertical;
}

.field.is-invalid,
.form-panel-light .field.is-invalid {
  border-color: var(--danger);
}

.field-error {
  display: none;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--danger-on-dark);
}

.form-panel-light .field-error {
  color: var(--danger);
}

.field-row.has-error .field-error {
  display: block;
}

.formalert {
  display: none;
  padding: 14px 18px;
  margin-block-end: var(--space-sm);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background-color: var(--danger-bg-dark);
  color: #fff;
  font-size: var(--text-small);
  line-height: 1.6;
}

.form-panel-light .formalert {
  background-color: var(--danger-bg);
  color: var(--danger);
}

.formalert.is-visible {
  display: block;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: clamp(24px, 3vw, 36px);
}

.form-note {
  max-inline-size: 46ch;
  font-size: var(--text-small);
  line-height: 1.6;
  margin-block-start: var(--space-sm);
}

.dark .form-note {
  color: var(--muted-on-dark);
}

.btn.is-sending .icon {
  animation: pulse 1.1s var(--ease-out) infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: clamp(110px, 14vw, 150px) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
  }

  .field-label {
    padding-block-start: 17px;
  }

  .field-error {
    grid-column: 2;
  }
}

/* ===========================
   Footer
   =========================== */

.site-footer {
  border-block-start: 1px solid var(--hairline);
  padding-block: clamp(56px, 6vw, 96px) var(--space-md);
}

.footer-grid {
  display: grid;
  gap: clamp(40px, 5vw, 56px);
}

.footer-brand .logo-mark {
  inline-size: clamp(28px, 2.8vw, 34px);
}

.footer-brand .logo-word {
  font-size: calc(var(--text-wordmark) * 1.06);
}

.footer-tagline {
  max-inline-size: 34ch;
  margin-block-start: var(--space-sm);
  font-size: var(--text-small);
  line-height: 1.7;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-start: var(--space-md);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.footer-social .icon {
  inline-size: 22px;
  block-size: 22px;
}

.footer-social:hover {
  background-color: var(--ink);
  color: var(--surface);
}

.footer-heading {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink);
  margin-block-end: var(--space-sm);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}

.footer-list a,
.footer-address a {
  color: var(--ink-soft);
  font-size: var(--text-small);
  text-decoration: none;
}

.footer-list a:hover,
.footer-address a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer-address {
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.9;
  color: var(--ink-soft);
}

/* An inline span ignores block margins, which ran the KvK line straight
   into the postcode. */
.footer-address .footer-meta {
  display: block;
  margin-block-start: var(--space-sm);
}

.footer-bottom {
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--text-small);
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.8fr));
    gap: clamp(32px, 5vw, 88px);
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* ===========================
   Page headers & content pages
   =========================== */

.page-header {
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px);
}

.page-title {
  font-size: var(--text-display-sm);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.page-intro {
  max-inline-size: 54ch;
  margin-block-start: clamp(24px, 3vw, 36px);
  font-size: var(--text-lead);
  line-height: 1.7;
}

.detail-list {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  scroll-margin-block-start: 120px;
}

.detail .icon {
  inline-size: clamp(44px, 4.5vw, 56px);
  block-size: clamp(44px, 4.5vw, 56px);
}

.detail:nth-child(odd) .icon {
  color: var(--accent);
}

.detail:nth-child(even) .icon {
  color: var(--teal-ink);
}

.detail-title {
  font-size: var(--text-subhead);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.detail-title + p {
  margin-block-start: var(--space-sm);
}

.detail-lead {
  font-size: var(--text-lead);
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .detail {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
}

/* Unmistakably provisional, and impossible to confuse with the legal text
   itself. Removed once the client's lawyer signs the pages off. */
.draft-note {
  max-inline-size: 62ch;
  margin-block-start: var(--space-sm);
  padding: 14px 18px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background-color: var(--danger-bg);
  color: var(--danger);
  font-size: var(--text-small);
  line-height: 1.6;
}

.legal-body {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  max-inline-size: var(--measure);
}

.legal-body p + p {
  margin-block-start: 1.35em;
}

.legal-body h2 {
  font-size: var(--text-subhead-sm);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-sm);
}

.legal-updated {
  font-size: var(--text-small);
  color: var(--ink-soft);
}

.contact-details {
  display: grid;
  gap: var(--space-md);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.contact-row {
  display: grid;
  gap: var(--space-3xs);
}

.contact-row dt {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-row dd {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink);
}

.contact-note {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--body);
}

.contact-row a {
  color: var(--accent-text);
  text-decoration: none;
}

.contact-row a:hover {
  text-decoration: underline;
}

.contact-layout {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.status-page {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding-block: clamp(72px, 10vw, 160px);
}

/* ===========================
   Touch targets
   =========================== */

@media (pointer: coarse) {
  .footer-list a,
  .contact-row a,
  .footer-address a {
    display: inline-block;
    padding-block: 11px;
  }

  .footer-list {
    gap: 0;
  }

  .link-arrow {
    min-block-size: 44px;
  }

  .logo-link {
    padding-block: 10px;
  }

  .nav-link {
    padding-block: 12px;
  }
}

/* ===========================
   Motion
   =========================== */

/* The thesis: one authored moment, then quiet.
   The hero's hard vertical edge is this design's signature, so the edge itself
   is what moves — a single slow sweep across the photograph on load. Nothing
   else on the page announces its arrival, because "we do not need to shout" is
   the whole brand argument. The one exception is the process list, where
   01 -> 02 -> 03 is a genuine sequence and revealing it in order carries
   meaning rather than decorating it.

   Every entrance is written as `from`-only keyframes with `both` fill, so the
   resting state IS the visible state. If an animation never runs — reduced
   motion, no JS, a headless renderer — the element is simply already there. */

@keyframes edge-sweep {
  from {
    translate: 0 0;
  }
  to {
    translate: 101% 0;
  }
}

@keyframes settle-up {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* A curtain sliding off the photograph, not a clip-path on the photograph
     itself. Clipping the image delays its own paint and cost ~180ms of LCP,
     since the LCP element is exactly this image. An overlay leaves the paint
     untouched and looks identical. */
  .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--bg);
    animation: edge-sweep 1000ms var(--ease-out) both;
  }

  /* The copy settles a beat behind the edge, in reading order, and is done
     before the sweep finishes. Total sequence stays under 1.2s. */
  .hero-copy > * {
    animation: settle-up 700ms var(--ease-out) both;
  }

  .hero-copy > :nth-child(1) { animation-delay: 60ms; }
  .hero-copy > :nth-child(2) { animation-delay: 130ms; }
  .hero-copy > :nth-child(3) { animation-delay: 210ms; }
  .hero-copy > :nth-child(4) { animation-delay: 290ms; }

  .js .reveal-stagger.is-visible > * {
    animation: settle-up 620ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
}

/* Continuity: the panel descends from the bar it belongs to rather than
   appearing from nowhere. visibility is delayed on close so the fade can run. */
.nav-mobile {
  opacity: 0;
  translate: 0 -8px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out),
    translate var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.nav-mobile.is-open {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===========================
   Partners
   =========================== */

.partner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* A hairline above each entry rather than a card: the list is a register of
   relationships, not a set of products. Keeps the section flat. */
.partner {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--hairline);
}

.partner-name {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--ink-soft);
  margin-block-end: var(--space-2xs);
}

.partner-body {
  max-inline-size: 34ch;
  font-size: var(--text-body);
  line-height: 1.7;
}

.partner-outro {
  max-inline-size: 54ch;
  margin-block-start: clamp(32px, 4vw, 52px);
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ===========================
   Team — regional tier
   =========================== */

/* Regions sit two to a row. A region of three or more people claims the whole
   row (.team-region-wide) and keeps its three columns; a smaller one takes half
   and pairs up with the next small region, so a single person is never left
   beside two empty columns. The row gap replaces the heading's old top margin,
   which would otherwise push the two halves of a pair out of line with each
   other. */
.team-regions {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 80px);
  margin-block-start: clamp(48px, 6vw, 80px);
}

@media (min-width: 768px) {
  .team-regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }

  .team-region-wide {
    grid-column: 1 / -1;
  }
}

.team-region-heading {
  margin-block: 0 var(--space-md);
  font-size: var(--text-subhead-sm);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.region-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --cols comes from the template and is the number of people in this region,
   capped at three. A half-width region must not inherit three columns: that
   would squeeze one person into a sixth of the page. */
@media (min-width: 640px) {
  .region-list {
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  }
}

.region-person {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--hairline);
}

/* Smaller than the directors' monogram — the size difference is what carries
   the hierarchy once the names are all the same weight. */
.region-monogram {
  display: block;
  font-family: var(--font);
  font-size: var(--text-monogram-sm);
  line-height: 1;
  color: var(--accent-text);
  margin-block-end: var(--space-xs);
}

.region-person:nth-child(even) .region-monogram {
  color: var(--teal-ink);
}

.region-name {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink);
}

.region-role {
  font-size: var(--text-small);
  color: var(--body);
  margin-block-end: var(--space-xs);
}

.region-body + .region-body,
.authorised-body + .authorised-body {
  margin-block-start: 1em;
}

.region-body {
  max-inline-size: 32ch;
  font-size: var(--text-small);
  line-height: 1.7;
}

.authorised {
  max-inline-size: var(--measure);
  margin-block-start: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.authorised-heading {
  font-size: var(--text-title);
  font-weight: 500;
  color: var(--ink);
  margin-block-end: var(--space-xs);
}

.authorised-body {
  font-size: var(--text-small);
  line-height: 1.75;
}

/* ===========================
   Marker list
   =========================== */

/* Numerals are reserved for the process sequence, so this list marks with a
   short rule instead — no bullets, no icons, nothing that reads as a feature
   grid. See DESIGN.md, The One Numbering Rule. */
.marker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0;
  max-inline-size: 68rem;
}

.marker-list li {
  position: relative;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--text-body);
  line-height: 1.7;
}

.marker-list li::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 1px;
  background-color: var(--accent);
}

.marker-list li:nth-child(even)::before {
  background-color: var(--teal-ink);
}

/* ===========================
   Register comparison (working document — remove with vergelijk.php)
   =========================== */

.cmp {
  padding-block-end: var(--section-pad);
}

.cmp-row + .cmp-row {
  margin-block-start: clamp(48px, 6vw, 80px);
}

.cmp-label {
  font-size: var(--text-subhead-sm);
  line-height: 1.25;
  letter-spacing: -0.02em;
  padding-block-end: var(--space-xs);
  border-block-end: 1px solid var(--ink);
  margin-block-end: var(--space-md);
}

.cmp-pair {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

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

.cmp-col {
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.cmp-col p + p {
  margin-block-start: 1em;
}

.cmp-tag {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: var(--space-sm);
}

.cmp-tag-client {
  color: var(--body);
}

.cmp-tag-ours {
  color: var(--accent-text);
}

.cmp-name {
  font-weight: 500;
  color: var(--ink);
}

.cmp-name + p {
  margin-block-start: var(--space-3xs) !important;
}

/* ===========================
   Print
   =========================== */

@media print {
  /* Backgrounds are dropped by default when printing, which left white text
     on white paper — on /expertise that silently deleted the H1. Force every
     surface to paper and every text colour to ink. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .site-header,
  .nav-mobile,
  .skip-link,
  .dark-media,
  .card-more,
  form,
  .draft-note {
    display: none !important;
  }

  .section,
  .page-header {
    padding-block: 1.2rem;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* A printed page loses every href, so spell the important ones out. */
  .footer-list a::after,
  .contact-row a::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
  }

  .footer-list a[href^='/']::after,
  .contact-row a[href^='/']::after {
    content: '';
  }
}