@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 + 5.33vw, 5.5rem);
  --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;
}

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

.lang__soon {
  position: relative;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--ink-quiet);
  letter-spacing: 0.13em;
  cursor: help;
}

.lang__soon:hover,
.lang__soon:focus-visible { color: var(--gold-hover); }

.lang__soon::after {
  content: attr(data-note);
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: var(--z-raised);
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart), visibility var(--dur-fast);
}

.lang__soon:hover::after,
.lang__soon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.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__list {
  align-self: center;
  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.6);
  font-size: var(--step-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

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.5rem + 0.72vw, 1.3rem);
  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.64fr) minmax(0, 1.36fr);
  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__soon { color: rgb(255 255 255 / 0.55); }
.footer__bottom .lang__soon:hover,
.footer__bottom .lang__soon:focus-visible { color: var(--gold-light); }

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

/* -------------------------------------------------------------------------
   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
   ------------------------------------------------------------------------- */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  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); }

.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); }
.contact-list a { color: var(--gold-ink); }

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

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

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

.locations > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.locations h3 { font-size: var(--step-h3); }
.locations p { margin-top: 0.85rem; color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   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] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

html[data-motion='on'] [data-reveal][data-revealed='true'] {
  opacity: 1;
  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] {
    opacity: 1;
    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; }
}

@media (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 {
    border-inline-start: 0;
    padding-inline: 0;
  }

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

  .locations > 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: 400px) {
  h1, h2, h3 {
    hyphens: auto;
    overflow-wrap: break-word;
  }

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