/* Leithonpark Advisory — shared styles */

:root {
  --color-ink: #10433D;
  --color-ink-soft: #063A49;
  --color-charcoal: #383838;
  --color-navy: #244152;
  --color-teal: #063A49;
  --color-slate: #3A4A5E;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f5f1;
  --color-text: #383838;
  --color-text-muted: #747474;
  --color-line: #e3e1da;
  --header-h: 96px;
  --max-w: 1180px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

/* height:auto hoort hier expliciet bij: zonder die regel gebruikt de browser
   het height-attribuut uit de HTML terwijl max-width de breedte terugschaalt,
   en rekt de afbeelding dus verticaal uit. */
img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), height .3s var(--ease);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header.is-solid {
  height: 80px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--color-line);
}

.brand img {
  height: 34px;
  width: auto;
  transition: opacity .3s var(--ease);
}

.brand .logo-dark { display: none; }
.brand .logo-light { display: block; }

.site-header.is-solid .logo-dark,
.page-header .logo-dark { display: block; }
.site-header.is-solid .logo-light,
.page-header .logo-light { display: none; }

/* Language switcher */

.lang-switch {
  /* No padding/margin here on purpose: this is a plain nav <li> and
     must keep the exact same box model as its siblings so its text
     lines up with them. The hover-gap is bridged by ::after below
     instead, which is position:absolute and so has zero layout impact. */
  position: relative;
}

.lang-switch::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;
}

.lang-current {
  display: inline;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  padding-bottom: 6px;
  cursor: default;
  transition: color .3s var(--ease);
}

.site-header.is-solid .lang-current,
.page-header .lang-current {
  color: var(--color-ink);
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 18px;
  background: var(--color-ink);
  border-radius: 8px;
  padding: 4px;
  min-width: 46px;
  opacity: 0;
  transform: translateX(-50%);
  /* Appears all at once (no gradual unfold like the Diensten dropdown),
     just a quick fade in as a whole block. */
  pointer-events: none;
  transition: opacity .43s var(--ease);
  z-index: 50;
}

.lang-switch:hover .lang-dropdown,
.lang-switch:focus-within .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
}

.lang-dropdown a {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  border-radius: 3px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

/* Higher-specificity (4 classes) than ".site-header.is-solid .main-nav a"
   / ".page-header .main-nav a" (3 classes each further below), so this
   always wins regardless of source order and the dropdown text stays
   white instead of being recolored to the ink green background it
   sits on (which would make it unreadable). */
.site-header.is-solid .lang-switch .lang-dropdown a,
.site-header.page-header .lang-switch .lang-dropdown a {
  color: #ffffff;
}

.lang-dropdown a:hover {
  background: #e5deca;
  color: var(--color-ink);
}

/* Needs to out-specificity the two rules above so the hover color
   still wins on pages with a solid/page header (same pattern as the
   Diensten nav dropdown). */
.site-header.is-solid .lang-switch .lang-dropdown a:hover,
.site-header.page-header .lang-switch .lang-dropdown a:hover {
  color: var(--color-ink);
}

/* Diensten/Services nav dropdown -- same color and hover/reveal
   animation as the language switcher above, just wider to fit full
   service names left-aligned instead of two-letter codes. */

.nav-drop {
  position: relative;
}

.nav-drop::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;
}

.nav-drop__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 18px;
  background: var(--color-ink);
  border-radius: 8px;
  padding: 6px;
  min-width: 230px;
  opacity: 0;
  transform: translateX(-50%);
  /* Clips the menu away from the bottom up, rather than fading/sliding
     the whole block in at once, so it reads as unfolding downward. The
     inner links are never scaled/squashed since clip-path only affects
     what's visible, not layout. */
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: opacity .3s var(--ease), clip-path .55s var(--ease);
  z-index: 50;
}

.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
}

.nav-drop__menu a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  color: #ffffff;
  border-radius: 3px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.site-header.is-solid .nav-drop .nav-drop__menu a,
.site-header.page-header .nav-drop .nav-drop__menu a {
  color: #ffffff;
}

.nav-drop__menu a:hover {
  background: #e5deca;
  color: var(--color-ink);
}

/* Needs to out-specificity the two rules above so the hover color
   still wins on pages with a solid/page header. */
.site-header.is-solid .nav-drop .nav-drop__menu a:hover,
.site-header.page-header .nav-drop .nav-drop__menu a:hover {
  color: var(--color-ink);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  position: relative;
  padding-bottom: 6px;
  transition: color .3s var(--ease);
}

.site-header.is-solid .main-nav a,
.page-header .main-nav a {
  color: var(--color-ink);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  width: 100%;
}

/* The dropdown menus' links are still ".main-nav a" elements, so
   without this they'd pick up the underline-on-hover meant for the
   top-level nav items -- visible as a stray white bar flashing in and
   out while moving between items in an open dropdown. */
.nav-drop__menu a::after,
.lang-dropdown a::after {
  content: none;
}

.nav-toggle {
  display: none;
}

/* Header variant for interior pages (no hero behind it). Height matches
   the default (pre-scroll) .site-header height so the logo/nav sit at
   the same position on every page -- only the homepage/Diensten header
   shrinks to 80px, and only once the user actually scrolls. */
.page-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--color-line);
  height: var(--header-h);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 34, 33, 0.35) 0%, rgba(6, 34, 33, 0.15) 40%, rgba(6, 34, 33, 0.8) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 110px;
  color: #fff;
}

/* Homepage hero has one line less content (no lede paragraph) than the
   interior-page hero, so its bottom-anchored block would otherwise sit
   lower. Extra padding-bottom pushes it up so the kicker/title line up
   at the same height as the Diensten hero's kicker/title. */
.hero:not(.hero--page) .hero__content {
  padding-bottom: 174px;
}

.hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
  margin: 0 0 18px;
}

.hero__tagline {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 820px;
  margin: 0;
}

.hero__lede {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Interior-page hero (Diensten, etc.): title sized down from the
   homepage's big tagline since it sits above a lede paragraph here. */
.hero--page .hero__tagline {
  font-size: clamp(30px, 4vw, 46px);
}

/* Kicker/title/lede fade up one after another the moment the page
   loads (not on scroll -- this always plays once, immediately). */
@keyframes heroIntroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-intro__kicker,
.hero-intro__title,
.hero-intro__lede {
  opacity: 0;
  animation: heroIntroIn .8s var(--ease) forwards;
}

.hero-intro__kicker { animation-delay: .2s; }
.hero-intro__title { animation-delay: .4s; }
.hero-intro__lede { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .hero-intro__kicker,
  .hero-intro__title,
  .hero-intro__lede {
    opacity: 1;
    animation: none;
  }
}

.placeholder {
  border-bottom: 1px dashed currentColor;
  opacity: 0.85;
}

.hero__tagline .placeholder {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.55);
}

.hero__scroll {
  position: absolute;
  bottom: 36px;
  right: 40px;
  z-index: 2;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.85;
}

.hero__scroll span {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ---------- Sections ---------- */

section { padding: 120px 0; }

/* The hard divider line is replaced with a soft shadow cast from the
   seam -- the same "no border lines" language used for the service
   cards on the Diensten page -- instead of a straight grey rule. Used
   by both the homepage's "Expertises" section and About's "Onze
   principes" section. Wide blur and low opacity keep the transition
   gradual rather than reading as a second hard edge. */
.section-alt {
  background: var(--color-bg-alt);
  box-shadow: 0 -46px 60px -42px rgba(16, 67, 61, 0.06);
}

/* Homepage-only override: "Expertises" goes back to white instead of
   the alt grey (About's principles section, which also uses
   .section-alt, is unaffected since it doesn't have .section-compact). */
.section-compact.section-alt {
  background: var(--color-bg);
}

/* Used on the homepage's "Waar wij voor staan" / "Expertises" pair so
   both sections come out exactly the same height. The heading gets a
   reserved min-height (in em, so it scales with the clamped font-size)
   because the two headings wrap to a different number of lines;
   without it the two sections' content blocks -- and therefore the
   sections themselves -- would be different heights. Padding is
   intentionally asymmetric: more room above the kicker (between the
   hero/divider and the heading) than below the arrow-link, since equal
   content height on both sides already keeps the two sections in sync
   with each other. */
.section-compact {
  padding: 88px 0 40px;
}

.section-compact .wrap { width: 100%; }

.section-compact .section-head h2 { min-height: 3.9em; }

/* Scroll-triggered fade-up, toggled by IntersectionObserver in main.js */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Left-to-right scroll-triggered reveal (About page's four value
   items), toggled by the same IntersectionObserver as .reveal. Each
   item gets a slightly later delay than the one before it so they
   step in one after another, left to right. */

.reveal-x {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal-x.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.principles-grid .value-item:nth-child(1) { transition-delay: 0s; }
.principles-grid .value-item:nth-child(2) { transition-delay: .12s; }
.principles-grid .value-item:nth-child(3) { transition-delay: .24s; }
.principles-grid .value-item:nth-child(4) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-x {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.section-head .kicker {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 600;
  margin: 0 0 14px;
}

.section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink);
}

.section-head p {
  color: var(--color-text-muted);
  margin-top: 16px;
  font-size: 17px;
}

/* Animated arrow link, used as a CTA under short intro copy */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
}

.arrow-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.arrow-link__icon svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}

.arrow-link:hover .arrow-link__icon {
  background: var(--color-ink);
  color: #fff;
}

.arrow-link:hover .arrow-link__icon svg {
  transform: translateX(3px);
}

/* CTA band */

.cta-band {
  background: var(--color-ink);
  color: #fff;
  padding: 90px 0;
  text-align: center;
}

.cta-band h2 {
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 2px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.btn-light {
  color: #fff;
}
.btn-light:hover {
  background: #fff;
  color: var(--color-ink);
}

.btn-dark {
  color: var(--color-ink);
}
.btn-dark:hover {
  background: var(--color-ink);
  color: #fff;
}

/* ---------- Interior page hero (About / Contact) ---------- */

/* Bottom padding matches .shadow-seam-top's / .team-section's top
   padding (both 48px) so the gap above "Onze aanpak" / "Gegevens" /
   the team grid is the same 96px on all three interior pages --
   neither cramped nor the ~200px gap this used to leave. */
.page-intro {
  padding: calc(var(--header-h) + 64px) 0 48px;
}

.page-intro.no-divider {
  padding-bottom: 48px;
}

/* No divider/shadow here by design -- stays plain white, separated
   from .page-intro only by the 48px gap above. */
.shadow-seam-top {
  background: var(--color-bg);
  padding-top: 48px;
}

.team-section { padding-top: 48px; }

.page-intro .kicker {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 600;
  margin: 0 0 18px;
}

.page-intro h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  max-width: 760px;
  margin: 0 0 20px;
  color: var(--color-ink);
}

.page-intro .lede {
  max-width: 640px;
  font-size: 18px;
  color: var(--color-text-muted);
  margin: 0;
}

/* About content */

.about-body {
  max-width: 720px;
}

.about-body h2 {
  font-weight: 400;
  font-size: 26px;
  color: var(--color-ink);
  margin: 0 0 20px;
}

.about-body p + h2 { margin-top: 44px; }

.about-body p {
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

.stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.stat-list li {
  border-bottom: 1px solid var(--color-line);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.stat-list .label {
  color: var(--color-text-muted);
  font-size: 15px;
}

.stat-list .value {
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 400;
  white-space: nowrap;
}

/* Principles grid on about page: spans the full .wrap width (logo to
   language switch) with the four items evenly centered across it. */

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.value-item h3 {
  font-weight: 500;
  font-size: 18px;
  color: var(--color-ink);
  margin: 0 0 10px;
}

.value-item p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  margin: 0;
}

/* Wraps the services grid with less top/bottom padding than the site's
   default section spacing, symmetrically, so the gap above (from the
   hero image) matches the gap below (into the CTA band). */
.services-section {
  padding: 72px 0;
}

/* Services grid (Diensten page): 3 columns x 2 rows. Cards are all
   white with no divider lines -- separation comes from the gap between
   them plus a soft shadow, rather than borders or alternating fills. */

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding: 44px 40px;
  border-radius: 6px;
  min-height: 350px;
  box-shadow: 0 1px 3px rgba(16, 67, 61, 0.06), 0 10px 30px rgba(16, 67, 61, 0.07);
}

.service-card h3 {
  font-weight: 500;
  font-size: 22px;
  color: var(--color-ink);
  margin: 0 0 14px;
}

.service-card p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  /* The bottom margin guarantees a minimum gap to the CTA below. The
     CTA's "margin-top: auto" only absorbs LEFTOVER space, so on cards
     whose text fills the whole card that gap would otherwise be zero.
     Flex children don't collapse margins, so these two never merge. */
  margin: 0 0 32px;
}

.service-card__cta {
  /* Pins the button to the card's bottom edge regardless of how many
     lines the description above it wraps to, so it lines up at the
     same height across every card (all cards share one min-height). */
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 14px;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.service-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--ease);
}

.service-card__cta:hover {
  background: var(--color-ink);
  color: #fff;
}

.service-card__cta:hover svg { transform: translateX(2px); }

@media (max-width: 900px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .service-cards { grid-template-columns: 1fr; }
  .service-card { padding: 32px 28px; }
}

/* ---------- Team page ---------- */

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 72px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-avatar {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.team-avatar svg {
  width: 62%;
  height: 62%;
}

.team-name-label {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
}

.team-name-label.placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}

.team-role {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.team-role.placeholder {
  display: inline-block;
}

.team-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.team-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.team-icon svg {
  width: 16px;
  height: 16px;
}

.team-icon:hover,
.team-icon:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

.team-icon .tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 3;
}

.team-icon .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-ink);
}

.team-icon:hover .tooltip,
.team-icon:focus-visible .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.team-icons-placeholder {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom: 1px dashed var(--color-text-muted);
  padding-bottom: 1px;
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}

.contact-info h2 {
  font-weight: 400;
  font-size: 22px;
  color: var(--color-ink);
  margin: 0 0 24px;
}

.contact-detail {
  border-top: 1px solid var(--color-line);
  padding: 20px 0;
}

.contact-detail:last-child { border-bottom: 1px solid var(--color-line); }

.contact-detail .label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.contact-detail a,
.contact-detail p {
  margin: 0;
  font-size: 17px;
  color: var(--color-ink);
}

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

form.contact-form {
  display: grid;
  gap: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.field input,
.field textarea {
  border: none;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  padding: 10px 2px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color .25s var(--ease);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.contact-form .btn {
  justify-self: start;
  margin-top: 8px;
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
  cursor: pointer;
}

.contact-form .btn:hover {
  background: var(--color-ink-soft);
}

.form-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: -6px;
}

.map-embed {
  margin-top: 90px;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 40px 0;
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

.footer-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Address/email/LinkedIn grouped tightly with no separators; they lift
   slightly toward the viewer on hover and stay lifted for as long as the
   cursor stays on them. The hover target itself (.footer-contact__item)
   never transforms or resizes; only the nested -text span does. This
   keeps the hoverable hit-box fixed, so the lift can't nudge the text
   out from under the cursor and cause it to flicker on/off mid-hover.
   The logo and KVK number are static, not links, so they don't animate. */

.footer-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-contact__item {
  display: inline-block;
}

.footer-contact__item-text {
  display: inline-block;
  transition: transform .2s var(--ease), color .2s var(--ease);
}

.footer-contact__item:hover .footer-contact__item-text,
.footer-contact__item:focus-visible .footer-contact__item-text {
  transform: translateY(-3px);
  color: var(--color-ink);
}

.footer-contact__static {
  color: var(--color-text-muted);
}

.footer-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .principles-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  section { padding: 80px 0; }
}

@media (max-width: 560px) {
  .principles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  :root { --header-h: 76px; }

  .main-nav ul { gap: 22px; }
  .main-nav a { font-size: 12px; }

  .hero__content { padding-bottom: 70px; }
  .hero__scroll { display: none; }

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

  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   Additions — mobile navigation, team bios, references, service
   detail pages, accessibility. Appended after the original rules on
   purpose: later source order lets these win where they overlap.
   ================================================================ */

/* ---------- Accessibility ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

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

.site-header--hero:not(.is-solid) .main-nav a:focus-visible,
.site-header--hero:not(.is-solid) .brand:focus-visible {
  outline-color: #fff;
}

main { display: block; }

/* ---------- Mobile navigation ---------- */

.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
  align-items: center;
  justify-content: flex-end;
}

.site-header.is-solid .nav-toggle,
.page-header .nav-toggle,
body.nav-open .nav-toggle { color: var(--color-ink); }

.nav-toggle__bars {
  display: block;
  position: relative;
  width: 26px;
  height: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-sub-toggle { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(16, 67, 61, 0.35);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  body.nav-open { overflow: hidden; }

  /* The panel is a plain fixed sheet -- no transform on the parent, so
     position:fixed children (none today) would not be trapped, and the
     slide is done with translateX which composites cheaply. */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    z-index: 110;
    background: #fff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
    padding: calc(var(--header-h) + 12px) 32px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .34s var(--ease), visibility .34s;
    visibility: hidden;
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .main-nav ul {
    display: block;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid var(--color-line);
  }

  .main-nav li:last-child { border-bottom: 0; }

  /* Colour is set unconditionally here: on the homepage the header is
     transparent (white nav links), but the open panel is white, so the
     links must flip to ink regardless of the header's state. */
  .main-nav a,
  .site-header .main-nav a,
  .site-header.is-solid .main-nav a,
  .page-header .main-nav a {
    display: block;
    padding: 16px 0;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--color-ink);
  }

  .main-nav a::after { content: none; }

  .main-nav a.is-active { font-weight: 600; }

  /* Services row: link on the left, chevron button on the right. */
  .nav-drop {
    position: relative;
    display: block;
  }

  .nav-drop::after { content: none; }

  .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px;
    right: -8px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
  }

  .nav-sub-toggle svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
    transition: transform .25s var(--ease);
  }

  .nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }

  .nav-drop__menu,
  .nav-drop:hover .nav-drop__menu,
  .nav-drop:focus-within .nav-drop__menu {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none;
    pointer-events: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: grid-template-rows .3s var(--ease);
  }

  .nav-drop__menu > * { min-height: 0; }

  /* Needs to out-specify ".nav-drop:hover .nav-drop__menu" above, which
     also carries grid-template-rows: 0fr -- otherwise a lingering hover
     state (common right after a tap) collapses the open sub-menu. */
  .main-nav .nav-drop .nav-drop__menu.is-open { grid-template-rows: 1fr; }

  .nav-drop__inner {
    overflow: hidden;
  }

  .nav-drop__menu a,
  .site-header.is-solid .nav-drop .nav-drop__menu a,
  .site-header.page-header .nav-drop .nav-drop__menu a {
    padding: 12px 0 12px 16px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
  }

  .nav-drop__menu a:last-child { padding-bottom: 20px; }

  /* Language switcher becomes a plain always-visible row. */
  .lang-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
  }

  .lang-switch::after { content: none; }

  .lang-current,
  .site-header.is-solid .lang-current,
  .page-header .lang-current {
    color: var(--color-ink);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .lang-dropdown,
  .lang-switch:hover .lang-dropdown,
  .lang-switch:focus-within .lang-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .lang-dropdown a,
  .site-header.is-solid .lang-switch .lang-dropdown a,
  .site-header.page-header .lang-switch .lang-dropdown a {
    padding: 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .main-nav { transition: none; }
}

/* ---------- Team: bios ---------- */

.member-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
  max-width: 900px;
}

.member {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  align-items: start;
}

.member__aside .team-avatar {
  width: 180px;
  height: 180px;
}

.member__name {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.3;
}

.member__role {
  margin: 4px 0 20px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.member__body p {
  margin: 0 0 16px;
  color: var(--color-text);
}

.member__body .team-icons { margin-top: 24px; }

@media (max-width: 700px) {
  .member-list { gap: 56px; }

  .member {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }

  .member__aside .team-avatar { width: 140px; height: 140px; }

  .member__body { text-align: left; }

  .member__body .team-icons { justify-content: center; }
}

/* ---------- Service detail pages ---------- */

.kicker-link {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}

.kicker-link:hover { border-bottom-color: currentColor; }

.service-detail { max-width: 760px; }

.service-detail h2 {
  margin: 0 0 28px;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 40px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--color-text);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 7px;
  border-left: 1.5px solid var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  transform: rotate(-45deg);
}

.related-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.related-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 15px;
  color: var(--color-ink);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.related-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .25s var(--ease);
}

.related-link:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.related-link:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .check-list { grid-template-columns: 1fr; }
  .related-links { grid-template-columns: 1fr; }
}

/* ---------- About: two-column principles ---------- */

.principles-grid--two { grid-template-columns: repeat(2, 1fr); }

.principles-grid--two .value-item:nth-child(3),
.principles-grid--two .value-item:nth-child(4) { transition-delay: 0s; }

@media (max-width: 700px) {
  .principles-grid--two { grid-template-columns: 1fr; }
}

/* ---------- References ---------- */

.deal-block { margin-bottom: 64px; max-width: 820px; }

.deal-block:last-of-type { margin-bottom: 0; }

.deal-block h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}

.deal-block__intro {
  margin: 0 0 28px;
  color: var(--color-text-muted);
}

.deal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.deal {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-line);
}

.deal__parties {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 17px;
  color: var(--color-ink);
}

.deal__sep { color: var(--color-text-muted); }

.deal__buyer { color: var(--color-text-muted); }

.deal__desc {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.editor-note {
  margin-top: 48px;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-line);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Contact ---------- */

.contact-details h2,
.contact-form-wrap h2 {
  margin: 0 0 32px;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}

.contact-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
}

.contact-block:first-of-type { border-top: 1px solid var(--color-line); }

.contact-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-block p { margin: 0; }

.contact-block a {
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}

.contact-block a:hover { border-bottom-color: currentColor; }

.contact-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px !important;
}

.contact-line:last-child { margin-bottom: 0 !important; }

.contact-line__who {
  min-width: 62px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-status {
  margin-top: 14px;
  font-size: 14px;
  color: var(--color-ink);
}

/* ---------- Footer ---------- */

@media (max-width: 640px) {
  .site-footer .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- Mobiel menu: correcties ---------- */

/* On phones the side panel left a sliver of the header logo sticking out
   next to it, which read as a rendering glitch. Below 600px the panel
   simply takes the full width instead. */
@media (max-width: 600px) {
  .main-nav {
    width: 100%;
    box-shadow: none;
  }

  .nav-backdrop { display: none; }
}

/* ---------- Taalwissel: NL | EN ---------- */

/* Was a hover dropdown; both languages are now always visible with a
   divider between them. The ::after below used to bridge the gap to the
   opening menu -- with no menu left it would only swallow clicks. */
.lang-switch::after { content: none; }

.main-nav .lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
}

.main-nav .lang-switch .lang-current,
.main-nav .lang-switch .lang-sep,
.main-nav .lang-switch .lang-alt {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

/* The active language carries the header's own text colour; the other
   one is dimmed so the pair reads as "you are here | switch to that". */
.main-nav .lang-switch .lang-sep { opacity: 0.4; }

.main-nav .lang-switch .lang-alt,
.site-header.is-solid .main-nav .lang-switch .lang-alt,
.page-header .main-nav .lang-switch .lang-alt {
  opacity: 0.55;
  transition: opacity .25s var(--ease);
}

.main-nav .lang-switch .lang-alt:hover,
.main-nav .lang-switch .lang-alt:focus-visible { opacity: 1; }

/* The nav's generic underline-on-hover would sit under a two-letter
   code and read as an active-page marker, which it isn't. */
.main-nav .lang-switch .lang-alt::after { content: none; }

@media (max-width: 900px) {
  .main-nav .lang-switch {
    padding: 22px 0 0;
    border-bottom: 0;
  }

  .main-nav .lang-switch .lang-current,
  .main-nav .lang-switch .lang-sep,
  .main-nav .lang-switch .lang-alt,
  .site-header.is-solid .main-nav .lang-switch .lang-alt,
  .page-header .main-nav .lang-switch .lang-alt {
    display: inline-block;
    padding: 0;
    font-size: 13px;
    color: var(--color-ink);
  }
}

/* ---------- Mobiel menu: paneel werd afgekapt ---------- */

/* A "backdrop-filter" makes an element a containing block for its
   position:fixed descendants. The header carries one for its frosted
   look, so the off-canvas panel was being clipped to the header's own
   height (~136px) instead of filling the viewport -- visible on every
   interior page and on the homepage once scrolled. Dropping the blur
   below 900px hands the panel back to the viewport; the header is made
   fully opaque there so it loses nothing visually.
   Same trap applies to filter, perspective, transform and will-change. */
@media (max-width: 900px) {
  .site-header,
  .site-header.is-solid,
  .site-header.page-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header.is-solid,
  .site-header.page-header {
    background: #fff;
  }
}

/* ================================================================
   Tijdelijke homepage (holding). Staat los van de rest: geen header,
   geen navigatie, geen footer -- alleen logo en contactgegevens.
   Verwijderbaar zodra index2.html weer index.html wordt.
   ================================================================ */

body.holding {
  background: var(--color-bg-alt);
}

.hold {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 64px 24px;
}

.hold__inner {
  width: 100%;
  max-width: 560px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 64px 48px 56px;
  box-shadow: 0 1px 3px rgba(16, 67, 61, 0.05), 0 18px 50px rgba(16, 67, 61, 0.07);
}

.hold__logo {
  height: 46px;
  width: auto;
  margin: 0 auto;
}

.hold__tagline {
  margin: 26px 0 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.hold__rule {
  width: 40px;
  height: 1px;
  margin: 36px auto;
  background: var(--color-line);
}

.hold__details {
  display: grid;
  gap: 26px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}

.hold__label {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hold__details p { margin: 0; }

.hold__details a {
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}

.hold__details a:hover { border-bottom-color: currentColor; }

.hold__line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px !important;
}

.hold__line:last-child { margin-bottom: 0 !important; }

.hold__who {
  min-width: 58px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.hold__note {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.hold__meta {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.hold__meta a {
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.hold__meta a:hover {
  color: var(--color-ink);
  border-bottom-color: currentColor;
}

.hold__dot { margin: 0 10px; }

@media (max-width: 520px) {
  .hold { padding: 32px 18px; }
  .hold__inner { padding: 44px 26px 40px; }
  .hold__details { max-width: none; }
}

/* ---------- Beeldband op een tekstpagina ---------- */

/* Loopt mee in de tekstkolom in plaats van schermbreed: de foto hoort
   bij de kop erboven en zou losgezongen aanvoelen als hij breder liep
   dan alles eromheen. */
.page-figure {
  margin: 0;
  padding: 8px 0 0;
}

.page-figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.page-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .page-figure figcaption { margin-top: 10px; }
}

/* ---------- Drie principes naast elkaar ---------- */

.principles-grid--three { grid-template-columns: repeat(3, 1fr); }

.principles-grid--three .value-item:nth-child(1) { transition-delay: 0s; }
.principles-grid--three .value-item:nth-child(2) { transition-delay: .08s; }
.principles-grid--three .value-item:nth-child(3) { transition-delay: .16s; }

@media (max-width: 900px) {
  .principles-grid--three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .principles-grid--three { grid-template-columns: 1fr; }
}

/* ---------- Portretten in de teamkaart ---------- */

/* De cirkel wordt nu door een foto gevuld in plaats van een silhouet:
   overflow verbergen zodat de vierkante bron rond wordt uitgesneden, en
   object-fit zodat er niets vervormt. */
.member__aside .team-avatar {
  overflow: hidden;
  padding: 0;
  background: var(--color-bg-alt);
}

.member__aside .team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Houdt een samenstelling met koppelteken bij elkaar. Zonder dit brak
   "corporate finance-advies" af op het streepje, met "finance-" aan het
   eind van de regel; nu breekt de kop op de spatie ervoor. */
.nowrap { white-space: nowrap; }

/* ---------- Vacaturepagina (werken-bij.html) ---------- */

/* Plaats, dienstverband en ervaring onder de functietitel. */
.page-intro .job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 24px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.job-meta__sep { color: var(--color-text-muted); }

/* Lange zinnen lezen beter onder elkaar dan in twee kolommen. */
.check-list--single {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 28px;
}

.job-body h3 {
  margin: 36px 0 18px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
}

.job-body .check-list li { color: var(--color-text-muted); }

/* De inleidende alinea's horen bij de intro erboven: geen volle
   sectie-afstand eronder. */
section.job-intro { padding-bottom: 96px; }

/* Kop en tekst van een vacaturesectie iets dichter op elkaar. */
.job-body > p:first-child { margin-top: 0; }
.section-head + .job-body { margin-top: -16px; }

.cta-band--apply p {
  max-width: 560px;
  margin: -12px auto 32px;
  color: rgba(255, 255, 255, 0.82);
}

.cta-band--apply p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Blok op de Teampagina: tekst links, knop rechts; op mobiel eronder. */
.job-teaser .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 56px;
  flex-wrap: wrap;
}

.job-teaser .section-head { margin: 0; }

@media (max-width: 640px) {
  section.job-teaser { padding: 80px 0; }
  .cta-band--apply p { margin-top: -8px; }
}