/* ==========================================================================
   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;
}

/* Subset to J, C, F, S — the two leadership monograms and nothing else. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   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;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', 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);
  --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);
  --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;
}

p {
  text-wrap: pretty;
}

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);
}

.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;
}

.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(36px, 4.5vw, 60px);
}

/* Pushes the title/body pair to the foot of the card, so cards of unequal
   copy length still align along their baselines. */
.solution-card .card-title {
  margin-block-start: 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;
}

/* ===========================
   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: -6%;
  inset-inline-start: -12%;
  inline-size: min(680px, 78%);
  opacity: 0.85;
}

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

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

.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);
}

.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.9fr) minmax(0, 1.1fr);
    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-heading .accent-stop {
  color: var(--teal-ink);
}

.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: center;
  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-monogram {
  font-family: var(--font-serif);
  font-size: var(--text-monogram);
  line-height: 1;
  letter-spacing: 0.01em;
  padding-inline-end: clamp(20px, 3vw, 40px);
  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 {
  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: -10%;
  inset-inline-start: -8%;
  inline-size: min(760px, 72%);
  opacity: 0.9;
}

.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-lead {
  margin-block-start: var(--space-xs);
  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;
  }
}

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

.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-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);
}

.status-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===========================
   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;
  }
}