@charset "UTF-8";

/* =========================================================================
   International Brokers
   Design system + page styles.

   The visual target is the approved comp in output/imagegen/. Token values
   were sampled from those PNGs rather than eyeballed; see the note on gold
   below for the one place where we deliberately differ.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — self-hosted. A third-party request in front of the H1 (the LCP
   element) is the difference between passing and failing the 2.5s target.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/bodoni-moda-latin.woff2') format('woff2');
  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: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/bodoni-moda-italic-latin.woff2') format('woff2');
  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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-latin.woff2') format('woff2');
  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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-latin.woff2') format('woff2');
  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;
}

/* Metric-matched fallbacks.
   Bodoni Moda renders 11.4% wider than Times New Roman at the same size, so
   while the webfont is loading the hero headline wraps differently and the
   whole section resizes when it swaps in — measured as CLS 0.78, which is a
   failure, not a nitpick. These faces re-scale the local fallback to Bodoni's
   own metrics so the fallback occupies exactly the space the real font will,
   and the swap becomes invisible. Percentages derived from the shipped files'
   hhea tables and verified against rendered widths. */

@font-face {
  font-family: 'Bodoni Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif'), local('Tinos');
  size-adjust: 111.4%;
  ascent-override: 101%;
  descent-override: 35.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Lato Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('Roboto');
  size-adjust: 99%;
  ascent-override: 99.7%;
  descent-override: 21.5%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Surfaces and ink, sampled from the comp. */
  --paper: #f4f0eb;
  --paper-raised: #f8f5f1;
  --ink: #0e1826;
  --ink-muted: #4a5561;
  --navy: #0c1421;
  --navy-deep: #0e1826;
  --line: #d9d2c8;
  --line-navy: rgb(255 255 255 / 0.14);
  /* De-emphasised text. Light enough to read as secondary, dark enough to
     clear 4.5:1 on paper at 12px — the two are not in conflict. */
  --ink-quiet: #6b645c;

  /* Gold.
     The comp's gold is #a17c4a. At 3.37:1 on paper it fails AA for the small
     tracked links it is used on, and white on it is only 3.82:1 — so the token
     is split. --gold stays exactly as comped and is used only where contrast
     rules do not apply (rules, dividers, large numerals). --gold-ink (4.69:1
     on paper, 5.32:1 behind white) carries every piece of gold *text* and every
     solid button. At these sizes the two are indistinguishable. */
  --gold: #a17c4a;
  --gold-ink: #8a6431;
  --gold-hover: #74531f;
  --gold-light: #c39a5f;

  --focus: #8a6431;
  --focus-on-navy: #d6b483;

  /* Type */
  --font-display: 'Bodoni Moda', 'Bodoni Fallback', 'Times New Roman', serif;
  --font-body: 'Lato', 'Lato Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* The scale is measured off the comp, not invented. Cap heights were read
     from the section PNGs at their native widths (1681px and 1747px) and
     converted to font sizes through the shipped fonts' own cap ratios —
     cap height is independent of tracking, so it gives the true size where a
     width comparison would conflate size with letter-spacing.

     Reference points, expressed at a 1440px viewport:
       H1 79 · H2 69 · numeral 60 · column label 24 · body 19
       column text 19.5 · eyebrow/nav 14 · button/link 15
     Each clamp is anchored on two measured widths (1440 and 1681/1747) with a
     floor that stays readable on a phone. */
  /* Capped so the headline's second line always fits its column on one line.
     Bodoni Moda's italic runs ~14% wider than the comp's, so the comp's literal
     92px would push "bijzonder vastgoed." onto a third line — and the two-line
     break is the more visible half of that composition. 88px at 1680 gets both. */
  --step-display: clamp(2.5rem, -0.06rem + 5vw, 5.2rem);
  --step-h2: clamp(2rem, -0.0875rem + 4.886vw, 5.25rem);
  --step-h3: clamp(1.5rem, 0.55rem + 2.1vw, 2.75rem);
  --step-h4: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  --step-body: clamp(1rem, 0.93rem + 0.286vw, 1.25rem);
  --step-column: clamp(0.9375rem, 0.904rem + 0.35vw, 1.35rem);
  --step-small: clamp(0.875rem, 0.84rem + 0.16vw, 1rem);
  --step-label: clamp(0.75rem, 0.69rem + 0.26vw, 1.0625rem);
  /* Buttons and the gold text links sit a step above the tracked meta labels. */
  --step-action: clamp(0.8125rem, 0.75rem + 0.24vw, 1.0625rem);
  /* The column sub-heading is much larger than the other tracked labels in the
     comp — it reads as a heading, not as meta. */
  --step-col-label: clamp(1.0625rem, 0.03rem + 1.63vw, 1.85rem);
  --step-numeral: clamp(2.25rem, 0.62rem + 3.48vw, 4.5rem);

  /* Rhythm — varied on purpose; a single spacing step reads as a template. */
  --gutter: clamp(1.375rem, 4.4vw, 5rem);
  --shell: 1680px;
  --section-y: clamp(4.5rem, 8vw, 8.75rem);
  --section-y-tight: clamp(3.25rem, 5.5vw, 5.5rem);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* Semantic z-index scale — never arbitrary numbers. */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav-backdrop: 200;
  --z-nav: 210;
  --z-skiplink: 300;
}

/* -------------------------------------------------------------------------
   3. Reset and base
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Several components set an explicit `display`, which would otherwise win over
   the UA's [hidden] rule and leave "hidden" elements on screen. */
[hidden] { display: none !important; }

img,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

/* Media wells size their <picture> so the <img> inside can fill them. Without
   this the picture collapses to auto height and the image floats in a box of
   background colour. */
.hero__media picture,
.split__media picture,
.closing__media picture,
.property__media picture,
.page-hero__media picture {
  width: 100%;
  height: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

.on-navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--focus-on-navy); }

::selection { background: var(--gold); color: #fff; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: 0;
  z-index: var(--z-skiplink);
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: var(--step-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.skip-link:focus-visible { transform: translateY(0); }

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

/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */

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

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

.section--navy {
  background: var(--navy);
  color: var(--paper);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 { color: #fff; }

/* The rule that sits under most headings in the comp. */
.rule {
  display: block;
  width: 4.5rem;
  height: 2px;
  border: 0;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  background: var(--gold);
  transform-origin: left center;
}

.section--navy .rule { background: var(--gold-light); }

.lede {
  max-width: 46ch;
  color: var(--ink-muted);
  line-height: 1.85;
}

/* Each sentence of a lede starts on its own line, at the client's request.
   A block rather than a <br> so a sentence longer than the measure still
   wraps normally, and so the break is a styling decision that can be undone
   in one place rather than baked into the copy. */
.lede__line { display: block; }

.section--navy .lede { color: rgb(244 240 235 / 0.78); line-height: 1.9; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.25em; }
.prose h2 { font-size: var(--step-h3); margin-top: 2.5em; }
.prose h3 { font-size: var(--step-h4); margin-top: 2em; }
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }
.prose h2 + p,
.prose h3 + p { margin-top: 0.9em; }

.prose a,
.contact-list a,
.footer__nap a { overflow-wrap: break-word; }

.prose ul {
  margin-top: 1.25em;
  display: grid;
  gap: 0.75em;
}

.prose li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--ink-muted);
}

.prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}

/* -------------------------------------------------------------------------
   5. Typographic details
   ------------------------------------------------------------------------- */

.display-italic {
  font-style: italic;
  font-weight: 400;
}

/* The tracked uppercase label. Used sparingly — as a section meta note, a
   column heading or a link, never stacked above every heading. */
.label {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.5;
}

.label--gold { color: var(--gold-ink); }
.section--navy .label--gold,
.site-footer .label--gold { color: var(--gold-light); }

.numeral {
  font-family: var(--font-display);
  font-size: var(--step-numeral);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

.section--navy .numeral { color: #fff; }

/* -------------------------------------------------------------------------
   6. Buttons and links
   ------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--gold-ink);
  --btn-fg: #fff;
  --btn-border: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.05rem 1.85rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 0;
  font-size: var(--step-action);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.btn:hover {
  --btn-bg: var(--gold-hover);
  --btn-border: var(--gold-hover);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: #b9b0a4;
}

.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
}

.btn .arrow { transition: transform var(--dur) var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(0.3rem); }

/* The gold text link with a rule under it, used across the comp. */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid rgb(138 100 49 / 0.4);
  color: var(--gold-ink);
  font-family: var(--font-body);
  font-size: var(--step-action);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
}

.textlink:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

.textlink .arrow { transition: transform var(--dur) var(--ease-out-expo); }
.textlink:hover .arrow { transform: translateX(0.35rem); }

.section--navy .textlink,
.site-footer .textlink {
  color: var(--gold-light);
  border-bottom-color: rgb(195 154 95 / 0.45);
}

.arrow { flex: none; width: 1.5rem; height: 0.75rem; }

/* -------------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    box-shadow var(--dur) var(--ease-out-quart);
}

.site-header[data-scrolled='true'] {
  background: rgb(244 240 235 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 5.75rem;
  transition: min-height var(--dur) var(--ease-out-quart);
}

.site-header[data-scrolled='true'] .site-header__inner { min-height: 4.75rem; }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover { color: var(--gold-hover); }

.primary-nav { margin-inline-start: clamp(1.5rem, 4vw, 4.5rem); }

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

.primary-nav__link {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.primary-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out-expo);
}

.primary-nav__link:hover { color: var(--gold-hover); }
.primary-nav__link:hover::after,
.primary-nav__link[aria-current='page']::after { transform: scaleX(1); }

.header__end {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-inline-start: auto;
}

/* Language switch — NL is live, EN is parked for now. */
.lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.13em;
}

.lang__sep { color: var(--ink-quiet); }
.lang__current { color: var(--ink); }

/* The language switch is a real link now that both languages exist. It keeps
   the de-emphasised treatment of the old parked state — the language you are
   not reading should not compete with the one you are. */
.lang__other {
  padding: 0.25rem 0;
  color: var(--ink-quiet);
  letter-spacing: 0.13em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.lang__other:hover { color: var(--gold-hover); }

.header__cta { padding: 0.9rem 1.5rem; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-toggle__bars {
  position: relative;
  width: 1.5rem;
  height: 0.75rem;
  flex: none;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out-expo),
    opacity var(--dur-fast) var(--ease-out-quart);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 100%; }

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--navy);
  color: var(--paper);
  padding: 1.5rem var(--gutter) 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--dur) var(--ease-out-quart),
    transform var(--dur) var(--ease-out-expo), visibility var(--dur);
}

.mobile-nav[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
}

.mobile-nav__top .wordmark { color: #fff; }

.mobile-nav__close {
  background: none;
  border: 0;
  padding: 0.5rem;
  color: #fff;
  cursor: pointer;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mobile-nav > nav { align-self: center; }

.mobile-nav__list {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.mobile-nav__link {
  display: block;
  padding-block: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.mobile-nav__link[aria-current='page'] { color: var(--gold-light); }

.mobile-nav__foot { display: grid; gap: 1.5rem; }
.mobile-nav__foot .btn { width: 100%; }

.mobile-nav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: rgb(244 240 235 / 0.72);
  font-size: var(--step-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mobile-nav .lang__current { color: #fff; }
.mobile-nav .lang__sep { color: rgb(255 255 255 / 0.35); }
.mobile-nav .lang__other { color: rgb(255 255 255 / 0.62); }
.mobile-nav .lang__other:hover,
.mobile-nav .lang__other:focus-visible { color: var(--gold-light); }

body[data-nav-open='true'] { overflow: hidden; }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(78vh, 780px);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The hero sits closer to the edge than the rest of the site: in the comp
     its text starts at 3.45% of the viewport where a section heading starts at
     5.6%. That inset, plus a tight right gutter, is what gives the headline
     the width it needs to break over two lines rather than three. */
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 1.8vw, 2.5rem)
    clamp(3rem, 6vw, 5.5rem) max(1.375rem, 3.45vw);
}

.hero__eyebrow { color: var(--gold-ink); }

.hero h1 {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  /* The comp tracks the display line at roughly -0.02em. At -0.03em the line
     measured 442px against the comp's 523px — tighter tracking was making the
     headline read a size smaller than it is. */
  letter-spacing: -0.02em;
  /* Not balanced. The comp's break is deliberately uneven — a short first line
     over a long second one — and `balance` overrides that by splitting the
     headline across three even lines instead. Natural wrapping reproduces the
     comp's break exactly and degrades sensibly as the column narrows. */
  text-wrap: normal;
}

.hero__lede { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.hero__locations {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--ink-quiet);
  letter-spacing: 0.22em;
}

.hero__media {
  position: relative;
  overflow: hidden;
  background: #d7cfc4;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

/* -------------------------------------------------------------------------
   9. Column set — services, process steps. Hairline dividers between columns,
   not cards. (The comp is explicit about this and it is the better call:
   cards here would add three boxes of chrome for no information.)
   ------------------------------------------------------------------------- */

.columns {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

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

.columns > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-inline-start: 1px solid var(--line);
}

/* Four columns live inside a half-width split, so they get a much tighter
   gutter than three columns spanning the whole shell. */
.columns--3 > * { padding-inline: clamp(1.25rem, 2.6vw, 2.75rem); }
.columns--4 > * { padding-inline: clamp(0.85rem, 1.55vw, 1.75rem); }

.columns > *:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* Vertical rhythm inside a column, measured off the comp at 1747px:
   numeral -> label 65px, label -> body 52px, body -> link 91px. */
.col__label {
  margin-top: clamp(1.5rem, 3.7vw, 4.05rem);
  font-size: var(--step-col-label);
  letter-spacing: 0.13em;
}

.col__text {
  margin-top: clamp(1rem, 3vw, 3.25rem);
  color: var(--ink-muted);
  font-size: var(--step-column);
  line-height: 1.8;
  max-width: 30ch;
}

.columns--4 .col__text {
  margin-top: clamp(0.85rem, 1.5vw, 1.5rem);
  font-size: var(--step-small);
}

.columns--4 .col__label { margin-top: clamp(1.1rem, 2vw, 1.9rem); }

.columns--4 .col__link { padding-top: clamp(1.25rem, 2.4vw, 2.5rem); }

/* The four-column set is the narrowest track on the site, and the longest
   label ("Onderhandelen") overruns it between 1200 and 1300px at full tracking.
   Two small corrections keep it on one line: slightly tighter spacing, and a
   negative end margin that reclaims the tracking CSS adds *after* the final
   letter — space that is never wanted and always counts against the box. At
   12px neither is perceptible next to the three-column set. */
.columns--4 .col__label {
  font-size: clamp(0.9375rem, 0.55rem + 0.55vw, 1.2rem);
  letter-spacing: 0.11em;
  margin-inline-end: -0.11em;
}

/* margin-top:auto pins the link to the bottom of the column, so the row of
   links lines up even when the copy above them runs to different lengths. */
.col__link { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.columns .col__link {
  margin-top: auto;
  padding-top: clamp(1.75rem, 5.2vw, 5.7rem);
}

/* A bare arrow link, used in the process row where the label is the step name. */
.arrow-link {
  display: inline-flex;
  color: var(--gold-ink);
  padding: 0.35rem 0.25rem 0.35rem 0;
  transition: transform var(--dur) var(--ease-out-expo);
}

.arrow-link:hover { transform: translateX(0.35rem); color: var(--gold-hover); }

/* -------------------------------------------------------------------------
   10. Section headers
   ------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.section-head__meta { color: var(--gold-ink); }

/* -------------------------------------------------------------------------
   11. Property grid
   ------------------------------------------------------------------------- */

.properties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.property { position: relative; }

.property__media {
  position: relative;
  overflow: hidden;
  background: #ded7cd;
  aspect-ratio: 24 / 25;
}

.property__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.property:hover .property__media img,
.property:focus-within .property__media img { transform: scale(1.04); }

.property__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}

.property__place {
  font-size: clamp(1rem, 0.7rem + 0.7vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The whole card is the click target; the heading holds the accessible name. */
.property__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
}

.property__link { text-decoration: none; color: inherit; }

.property__type {
  display: block;
  margin-top: 0.45rem;
  color: var(--gold-ink);
  font-size: var(--step-action);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.property__arrow {
  flex: none;
  color: var(--gold-ink);
  margin-top: 0.15rem;
  transition: transform var(--dur) var(--ease-out-expo);
}

.property:hover .property__arrow { transform: translateX(0.35rem); }

.properties-foot { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* -------------------------------------------------------------------------
   12. Trust band — navy, with the network map
   ------------------------------------------------------------------------- */

.trust {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.network-map { width: 100%; height: auto; color: var(--gold-light); }

.network-map .map-land {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.5;
}

.network-map .map-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.9;
  stroke-dasharray: 3 5;
}

.network-map .map-node {
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   13. Split section — image hard against one edge, content on the other
   ------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.split--content-first { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.split--media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.split__media {
  position: relative;
  overflow: hidden;
  background: #ded7cd;
  min-height: clamp(18rem, 34vw, 30rem);
}

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

.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.25rem, 7vw, 6.5rem);
}

/* Content edge alignment: hug the shell gutter on the outer side. */
.split--content-first .split__content {
  padding-inline: max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter)))
    clamp(2rem, 4vw, 4.5rem);
}

.split--media-first .split__content {
  padding-inline: clamp(1.75rem, 3.2vw, 3.75rem)
    max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter)));
}

.split__content > h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.3vw, 3.1rem);
  max-width: 22ch;
}

/* -------------------------------------------------------------------------
   14. Closing CTA — full-bleed image with an overlaid paper card
   ------------------------------------------------------------------------- */

.closing {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: clamp(22rem, 40vw, 34rem);
}

.closing__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  background: #2b2419;
}

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

.closing__inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.closing__card {
  background: var(--paper);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  max-width: min(38rem, 100%);
}

.closing__card h2 {
  /* Sized so "Laten we uw volgende / stap bespreken." breaks over two lines
     inside the card, as it does in the comp. */
  font-size: clamp(1.75rem, 1.15rem + 1.95vw, 2.75rem);
  max-width: 21ch;
}
.closing__card .btn { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: rgb(244 240 235 / 0.85);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer__brand .wordmark {
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);
}

.footer__tagline {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem);
  line-height: 1.5;
  color: rgb(244 240 235 / 0.9);
  max-width: 40ch;
}

.footer__col h2,
.footer__col .footer__heading {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0;
  line-height: 1.5;
}

.footer__links {
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1.05rem);
  margin-top: clamp(1.35rem, 2.5vw, 2rem);
}

.footer__links a {
  display: inline-block;
  font-size: var(--step-label);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.footer__links a:hover { color: var(--gold-light); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line-navy);
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  font-size: var(--step-label);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}

.footer__meta a { color: inherit; text-decoration: none; }
.footer__meta a:hover { color: var(--gold-light); }

.footer__bottom .lang__current { color: #fff; }
.footer__bottom .lang__sep { color: rgb(255 255 255 / 0.3); }
.footer__bottom .lang__other { color: rgb(255 255 255 / 0.55); }
.footer__bottom .lang__other:hover,
.footer__bottom .lang__other:focus-visible { color: var(--gold-light); }

.footer__nap {
  margin-top: 1.25rem;
  font-size: var(--step-small);
  line-height: 1.8;
  font-style: normal;
  color: rgb(255 255 255 / 0.72);
}

/* The registered company name carries slightly more weight than the address
   under it — it is the legal entity, not a line of contact detail. */
.footer__legal {
  font-weight: 700;
  color: rgb(255 255 255 / 0.9);
  letter-spacing: 0.01em;
}

.footer__reg {
  color: rgb(255 255 255 / 0.55);
  font-variant-numeric: tabular-nums;
}

.footer__copyright {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--step-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

/* -------------------------------------------------------------------------
   16. Page header (subpages)
   ------------------------------------------------------------------------- */

/* Full-bleed image band above a page head — used by the property pages. */
.page-hero__media {
  position: relative;
  overflow: hidden;
  background: #ded7cd;
  height: clamp(16rem, 42vw, 30rem);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.page-head {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.page-head h1 { max-width: 18ch; }
.page-head .lede { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.breadcrumb a { color: var(--gold-ink); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-hover); text-decoration: underline; }
.breadcrumb__sep { color: var(--ink-quiet); }

/* -------------------------------------------------------------------------
   17. Facts list (property detail)
   ------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.facts > div {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

.facts > div:first-child { border-inline-start: 0; padding-inline-start: 0; }

.facts dt {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.facts dd {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  line-height: 1.3;
}

/* -------------------------------------------------------------------------
   18. Form
   ------------------------------------------------------------------------- */

/* Contact card on the left, form on the right — the form keeps the wider
   column, it simply changed sides. The order is swapped in the markup rather
   than with `order`, so the reading order a screen reader announces and the
   order the Tab key follows both still match what is on screen. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.form { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.form legend {
  padding: 0;
  margin-bottom: 1.25rem;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.field { display: grid; gap: 0.55rem; }

.field__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.field label {
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

.field__hint {
  font-size: var(--step-small);
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--paper-raised);
  border: 1px solid #c8c0b4;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: #6e6862; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #a89e8f; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-ink);
  background: #fff;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea { border-color: #9b2c2c; }

.field__error {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-small);
  color: #8f2323;
}

.field[data-invalid='true'] .field__error { display: flex; }

/* Honeypot — present so the later mail wiring is a drop-in, hidden from
   everyone who is not a bot. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.form__note {
  font-size: var(--step-small);
  color: var(--ink-muted);
  max-width: 34ch;
}

.form__status {
  display: none;
  padding: 1rem 1.25rem;
  border: 1px solid;
  font-size: var(--step-small);
}

.form__status[data-state='error'] {
  display: block;
  border-color: #c98a8a;
  background: #fbf1f1;
  color: #7d1f1f;
}

.btn[data-loading='true'] { opacity: 0.7; pointer-events: none; }

.demo-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  font-size: var(--step-small);
  color: var(--ink-muted);
}

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

/* The illustrative-listings disclaimer. Same construction as .demo-note but
   with a gold rule on the leading edge, because unlike the demo notice this
   one stays on the live site permanently and has to read as part of the page
   rather than as scaffolding. Muted body, full-strength lead-in — enough to be
   read before the properties, not enough to shout over them. */
.note--illustrative {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(0.9rem, 1.8vw, 1.15rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border-inline-start: 2px solid var(--gold);
  background: var(--paper-raised);
  max-width: 46rem;
  font-size: var(--step-small);
  line-height: 1.8;
  color: var(--ink-muted);
}

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

.aside-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.aside-card h2 { font-size: var(--step-h3); }
.aside-card .rule { margin-top: 1.25rem; }

.contact-list {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.contact-list dt {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.contact-list dd { margin: 0.35rem 0 0; color: var(--ink); }

/* <address> defaults to italic; the rest of the card is upright. */
.contact-list__address { font-style: normal; line-height: 1.7; }
.contact-list a { color: var(--gold-ink); }

/* -------------------------------------------------------------------------
   19. Locations
   ------------------------------------------------------------------------- */

/* The separators are 1px grid gaps showing the container colour, not borders
   on the cells. With auto-fit the column count changes across the viewport,
   so a per-cell border-inline-start leaves a stray hairline on whichever cell
   happens to start a wrapped row — visible at 900-1280px as soon as a fourth
   and fifth location were added. Gaps separate cells on both axes at every
   wrap point, and stay correct however many locations the client adds. */
.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  /* Clips each cell's outer ring (below) so the hairlines stop at the shell
     edge. The reveal lifts cells by 1.15rem, less than their bottom padding,
     so only padding is ever clipped mid-animation — never a glyph. */
  overflow: hidden;
}

.locations > div {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  /* The ring paints into the 1px gaps on whichever sides have a neighbour.
     Painting from the cell rather than from the container means a short last
     row leaves the empty track as paper instead of a solid block of line. */
  box-shadow: 0 0 0 1px var(--line);
}

/* Only the very first cell sits flush with the shell, so the top row aligns
   with the heading above it as the comp does. */
.locations > div:first-child { padding-inline-start: 0; }
.locations h3 { font-size: var(--step-h3); }
.locations p { margin-top: 0.85rem; color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   19b. People
   Same skeleton as .locations — hairline-separated columns, gold role label
   over a display-serif name. Wider tracks than locations because names and
   role titles run long, and the columns stack a step earlier for the same
   reason.
   ------------------------------------------------------------------------- */

/* Gap-drawn hairlines, for the reason given above .locations. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.people > div {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 0 0 1px var(--line);
}

.people > div:first-child { padding-inline-start: 0; }

/* "International Business Consultant" wraps to two lines while the labels
   beside it stay on one, which would drop that column's name half a line below
   its neighbours. Subgrid puts label, name and remit on shared rows so they
   align across the whole row regardless of how any one of them wraps.
   Browsers without row subgrid drop the declaration and fall back to the
   ordinary block flow above — untidy in that one case, never broken. */
.people { grid-template-rows: auto auto auto; }

.people > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}

.people h3 {
  margin-top: 0.85rem;
  font-size: var(--step-h3);
  text-wrap: balance;
}

.people__remit {
  margin-top: 0.9rem;
  color: var(--ink-muted);
  font-size: var(--step-column);
  line-height: 1.8;
}

/* Heading for the second people group. It is an h2 like the first, but it sits
   inside the section rather than opening it, so it needs the space above that
   the section padding would otherwise have given it. */
.people__group { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* -------------------------------------------------------------------------
   19b. Company facts (About)
   Two paragraphs of prose beside the register details. The facts list reuses
   .facts from the property pages; on a narrow measure it drops below the prose
   rather than squeezing a register number into a 9rem column.
   ------------------------------------------------------------------------- */

.company {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.company__facts {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Single column: the vertical hairline between cells has nothing to separate,
   and every cell is now the first in its row. */
.company__facts > div {
  border-inline-start: 0;
  padding-inline: 0;
}

/* "CH-501.3.018.271-0" is a reference string, not a headline. Body font at
   body size: the display serif's old-style figures make it harder to read
   back, and that is the one thing this value has to be good at. */
.company__facts dd {
  font-family: var(--font-body);
  font-size: var(--step-column);
  line-height: 1.7;
}

@media (max-width: 920px) {
  .company { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   19c. Corporate advisory (Services)
   Four cards with no detail link — the client supplied one line each. The
   capability list and the single call to action sit beneath, side by side, so
   the section still ends on an action even though the cards do not.
   ------------------------------------------------------------------------- */

/* Same subgrid alignment as .people, for the same reason: "Marketing &
   Representation" wraps to two lines and the other three labels do not. */
.corporate__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-rows: auto auto;
}

.corporate__grid > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
}

.corporate__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.corporate__list {
  list-style: none;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.55rem clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--step-column);
  color: var(--ink-muted);
}

/* A gold hairline instead of a bullet: the same device as the rules elsewhere,
   and it keeps a two-line item's second line aligned with its first. */
.corporate__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.7;
}

.corporate__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.75em;
  width: 0.75rem;
  height: 1px;
  background: var(--gold);
}

.corporate__foot .col__link { padding-top: 0; margin: 0; }

@media (max-width: 760px) {
  .corporate__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* -------------------------------------------------------------------------
   19c. Dutch typography
   Dutch builds compounds where English uses two words — "Onderhandelen",
   "Grachtenpenthouse", "Privacyverklaring" — and those are single unbreakable
   tokens. Two narrow adjustments, scoped to :lang(nl) so the English pages are
   untouched.
   ------------------------------------------------------------------------- */

/* "Onderhandelen" is one unbreakable 13-letter token and the four-column track
   is the narrowest on the site, so it overran between 1120 and 1920px. Tuning
   the font size chased the problem around — the track does not scale linearly
   with the viewport, because the split's padding grows to stay aligned with the
   shell. The fix is a soft hyphen in the word itself (see nl.php): the browser
   gets a legal break point, wide viewports are untouched, and no size override
   is needed. */

/* Long compounds cannot wrap at a space, so on a phone they run past the
   gutter. Hyphenation is the right tool and Dutch is exactly the language it
   was built for — "Grachten-penthouse" reads correctly. Restricted to narrow
   viewports so a heading that would wrap naturally never gets hyphenated. */
@media (max-width: 560px) {
  html[lang='nl'] h1,
  html[lang='nl'] h2,
  html[lang='nl'] h3 { hyphens: auto; }
}

/* -------------------------------------------------------------------------
   20. Offer / checkout page
   ------------------------------------------------------------------------- */

.offer { max-width: 44rem; }

.offer__state { display: none; }
.offer__state[data-active='true'] { display: block; }

.offer__amount {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  line-height: 1;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.countdown > div {
  flex: 1 1 5rem;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
  border-inline-start: 1px solid var(--line);
}

.countdown > div:first-child { border-inline-start: 0; padding-inline-start: 0; }

.countdown__value {
  font-family: var(--font-display);
  font-size: var(--step-numeral);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.notice {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--gold);
  background: rgb(161 124 74 / 0.07);
  font-size: var(--step-small);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   21. Motion
   Reveals enhance a page that already renders. Nothing here gates content
   visibility — the default state is visible, and JS opts elements into the
   animation only when it is actually running.
   ------------------------------------------------------------------------- */

[data-reveal] { opacity: 1; }

html[data-motion='on'] [data-reveal] {
  /* Transform only — no opacity. Text that is mid-fade sits below AA contrast
     for the length of the fade, and any automated audit that samples a frame in
     that window reports a contrast failure; Lighthouse did so on a quarter to a
     half of its runs even after the fade was shortened. WCAG concerns the
     resting state so this was never a real barrier, but a preview should not
     look defective to whoever audits it. A short, firm rise into place reads as
     deliberate on its own and keeps every glyph at full contrast in every
     frame. */
  transform: translateY(1.15rem);
  transition: transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

html[data-motion='on'] [data-reveal][data-revealed='true'] { transform: none; }

html[data-motion='on'] .rule[data-reveal] { transform: scaleX(0); }
html[data-motion='on'] .rule[data-reveal][data-revealed='true'] { transform: scaleX(1); }

html[data-motion='on'] .network-map .map-arc {
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 2.4s var(--ease-out-quart);
  transition-delay: var(--arc-delay, 0ms);
}

html[data-motion='on'] .network-map[data-revealed='true'] .map-arc {
  stroke-dashoffset: 0;
}

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

  html[data-motion='on'] [data-reveal],
  html[data-motion='on'] .rule[data-reveal] {
    transform: none;
    transition: none;
  }

  html[data-motion='on'] .network-map .map-arc {
    stroke-dashoffset: 0;
    transition: none;
  }

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

/* -------------------------------------------------------------------------
   22. Responsive
   The comp is desktop-only; every breakpoint below is a designed stack, not
   a squeezed desktop layout.
   ------------------------------------------------------------------------- */

/* Between the desktop composition and the stacked layout the hero's text column
   gets tight enough that the two buttons wrap onto separate rows. Evening out
   the split gives them back the room without touching the desktop framing. */
@media (min-width: 1081px) and (max-width: 1360px) {
  .hero { grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr); }
}

@media (max-width: 1180px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 3rem);
  }

  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .primary-nav,
  .header__cta { display: none; }

  .nav-toggle { display: inline-flex; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__content {
    order: 2;
    padding: clamp(2.5rem, 7vw, 4rem) var(--gutter);
  }

  .hero__media { order: 1; aspect-ratio: 16 / 10; }
  .hero h1 { max-width: 18ch; }

  .split,
  .split--content-first,
  .split--media-first { grid-template-columns: 1fr; }

  .split__media { min-height: 0; aspect-ratio: 16 / 11; order: 1; }
  .split__content { order: 2; padding-inline: var(--gutter); padding-block: clamp(2.75rem, 7vw, 4rem); }

  .trust { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }

  .form-layout { grid-template-columns: 1fr; }
}

/* Lower-bounded on purpose. These are the *two-column* rules, and the first two
   cards are the top row — but ":nth-child(-n + 2)" outranks the plain
   "> *" selector in the single-column block below, so without the min-width the
   second card would still be treated as a top-row cell at 390px and lose the
   hairline that separates it from the first. */
@media (min-width: 521px) and (max-width: 900px) {
  .columns--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .columns--4 > * {
    padding-block: clamp(1.5rem, 3vw, 2rem);
    border-block-start: 1px solid var(--line);
  }

  .columns--4 > *:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .columns--4 > *:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
}

@media (max-width: 820px) {
  :root { --section-y: clamp(3.5rem, 9vw, 5rem); }

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

  .columns--3 > * {
    padding-inline: 0;
    border-inline-start: 0;
    padding-block: clamp(1.75rem, 4vw, 2.25rem);
    border-block-start: 1px solid var(--line);
  }

  .columns--3 > *:first-child { border-block-start: 0; padding-block-start: 0; }

  .properties { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.5rem); }
  .property__media { aspect-ratio: 4 / 3; }

  .facts > div,
  .locations > div,
  .people > div {
    border-inline-start: 0;
    padding-inline: 0;
  }

  .locations > div,
  .people > div {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(1.5rem, 4vw, 2rem);
  }

  .locations > div:first-child,
  .people > div:first-child { border-block-start: 0; }

  .closing__card { max-width: 100%; }
}

@media (max-width: 640px) {
  /* The wordmark and the menu trigger need the room more than the language
     switch does — it moves into the panel, where it is easier to hit anyway. */
  .header__end .lang { display: none; }
}

@media (min-width: 641px) {
  .mobile-nav__lang { display: none; }
}

/* 320px — the narrowest screen worth supporting. Two things break here and
   nowhere else: single long Dutch compounds ("Privacyverklaring") cannot wrap
   at the display size, and the closing card's padding plus the button's
   minimum content no longer fit inside the gutter. */
@media (max-width: 520px) {
  .columns--4 { grid-template-columns: 1fr; }

  .columns--4 > * {
    padding-inline: 0;
    border-inline-start: 0;
    padding-block: clamp(1.5rem, 4vw, 2rem);
    border-block-start: 1px solid var(--line);
  }

  .columns--4 > *:first-child { border-block-start: 0; padding-block-start: 0; }
}

/* Headings deliberately do NOT hyphenate. An earlier revision did, to fit a
   long Dutch compound; on the English copy it broke the hero headline across
   "excep-/tional" on a phone, which is worse than any wrap it prevented. Long
   unbreakable tokens are handled where they actually occur — email addresses in
   body copy, see .prose a above — rather than by letting every heading break. */
@media (max-width: 400px) {
  .closing__card { padding: clamp(1.5rem, 6vw, 2.25rem); }
  .btn { padding-inline: 1.25rem; gap: 0.6rem; }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}