/* ── Figtree (lokaal) ── */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree/Figtree-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree/Figtree-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree/Figtree-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree/Figtree-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree/Figtree-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Midland Luxury ── */
@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-ExtraLight.otf")
    format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-ExtraBold.otf")
    format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Midland Luxury";
  src: url("fonts/Midland luxury/MidlandLuxury-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =============================================
       DESIGN TOKENS  (extracted from Figma variables)
    ============================================= */
:root {
  /* Colors */
  --color-dark-blue: #082743;
  --color-blue: #0d385f;
  --color-red: #c4322a;
  --color-white: #ffffff;
  --color-green-light: #063e31;
  --color-bg-light: rgba(0, 0, 0, 0.05);
  --color-placeholder: rgba(6, 62, 49, 0.25);

  /* Fonts */
  --font-midland: "Midland Luxury", Georgia, serif;
  --font-figtree: "Figtree", sans-serif;

  /* Font sizes  (from Figma token names) */
  --fs-h1: 40px;
  /* Desktop/H1 - Midland  */
  --fs-h2: 30px;
  /* Desktop/H2 - Midland  */
  --fs-h3: 27px;
  /* Desktop/H3 - Midland  */
  --fs-h4: 36px;
  /* Desktop/H4 - Figtree  */
  --fs-body: 18px;
  /* Desktop/Body - Figtree */
  --fs-navbar: 9px;
  /* Desktop/Navbar - Midland */
  --fs-button: 9px;
  /* Desktop/Button - Midland */
  --fs-caption: 7px;
  /* Desktop/Caption - Midland */

  /* Line heights */
  --lh-h1: 100px;
  --lh-h2: 80px;
  --lh-h3: 50px;
  --lh-h4: 40px;
  --lh-body: 35px;
  --lh-navbar: 42px;
  --lh-label: 33px;

  /* Letter spacings */
  --ls-h1: 12px;
  /* 30 / 1000 * 40px → kept as Figma absolute */
  --ls-h2: 3px;
  /* 10 tracking */
  --ls-h2-caps: 6px;
  /* 20 tracking */
  --ls-h3: 4.05px;
  /* 15 tracking */
  --ls-h4: 1.8px;
  /* 5 tracking */
  --ls-navbar: 1.53px;
  /* 17 tracking */
  --ls-button: 2.7px;
  /* 30 tracking */
  --ls-caption: 2.1px;
  /* 30 tracking */

  /* Layout */
  --page-padding: 130px;

  /* ── Responsive sectie-spacing (clamp: mobiel → desktop) ── */
  --section-px: clamp(24px, 10.9vw, 210px);
  /* 210px @ 1920px */
  --section-py: clamp(60px, 7.8vw, 150px);
  /* 150px @ 1920px */
  --section-py-sm: clamp(40px, 4.2vw, 80px);
  /*  80px @ 1920px */

  /* ── Layout gaps ── */
  --gap-xs: 8px;
  --gap-sm: 20px;
  --gap-md: 40px;
  --gap-lg: clamp(40px, 4.2vw, 80px);
  --gap-xl: clamp(40px, 4.8vw, 92px);

  /* ── Tussenruimte secties (Figma design system)
        Pas hier één waarde aan → werkt overal door ── */
  --gap-section: 150px; /* standaard: 150px desktop */
  --gap-section-ww: 75px;
  /* wit op wit:  70px desktop */
}

/* ── Responsive gap-section + headings ── */

/* ================================================================
   GLOBALE TYPOGRAFIE – Headings
   h1/h2/h3 erven font, grootte, gewicht, regelafstand en tracking
   uit deze basis. Componenten overschrijven alleen wat echt afwijkt.
================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: var(--font-midland);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 3em;
  letter-spacing: var(--ls-h1);
  color: var(--color-dark-blue);
}

h2 {
  font-family: var(--font-midland);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 3em;
  letter-spacing: var(--ls-h2);
  color: var(--color-dark-blue);
}

h3 {
  font-family: var(--font-midland);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 3em;
  letter-spacing: var(--ls-h3);
  color: var(--color-dark-blue);
}

/* ==============================================
   GLOBALE SECTIE-TUSSENRUIMTE
   
   SYSTEEM:
   - Wit → Wit                    : 150px margin-top
   - Gekleurd NA wit/split        : 150px margin-top
   - Gekleurd NA gekleurd         : 0 (interne padding)
   - Uitzonderingen               : threecol na cta-bar = 0,
                                    cards na dualpanel = 0
   ============================================= */

/* Hero: altijd 0 */
main > .hero {
  margin-top: 0;
}

/* Gekleurde secties: standaard 0 marge (interne padding-top zorgt voor gap) */
main > .cta-bar,
main > .fin,
main > .qb,
main > .portula {
  margin-top: 0;
}

/* Tussentekst: 0 (abuts intro direct) */
main > .hkn-tussentekst {
  margin-top: 0;
}

/* ── Standaard 150px gaps ───────────────────────────────────────────── */

/* ── Uitzonderingen: 0 marge ──────────────────────────────────────────── */

/* =============================================
      DESKTOP / MOBILE VISIBILITY HELPERS
   ============================================= */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

/* Wanneer desktop/mobile-only direct in een <section> zitten,
   gebruik display:contents zodat ze transparant zijn voor
   flex/grid layouts van de parent section. */
section > .desktop-only {
  display: contents;
}

section > .mobile-only {
  display: none;
}

/* =============================================
       CONTAINER SYSTEM
       .container      → max-width 1728px (content sections)
       .container--wide → max-width 1920px (full-bleed sections: gallery, cta)
    ============================================= */
.container {
  width: 100%;
  max-width: 1468px;
  /* 1728 - 130 - 130 */
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.container--wide {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* =============================================
       RESET / BASE
    ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-figtree);
  color: var(--color-dark-blue);
  background: var(--color-white);
  overflow-x: hidden;
}

/* ── MAX-WIDTH CAP: secties nooit breder dan 1920px ── */
section {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

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

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

ul {
  list-style: none;
}

/* =============================================
       NAVBAR
    ============================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 126px;
  background: #ffffff;
  overflow: visible;
}

/* Fade-out gradient aan de onderkant van de navbar */
.navbar::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 99;
}

.navbar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 var(--page-padding);
  max-width: 1920px;
  margin: 0 auto;
}

.navbar__logo {
  flex-shrink: 0;
  display: block;
  width: 34px;
  height: 34px;
  overflow: hidden;
}

.navbar__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.navbar__link {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(7px, 0.52vw, 9px);
  font-weight: 400;
  letter-spacing: var(--ls-navbar);
  text-transform: uppercase;
  color: var(--color-dark-blue);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__link:hover {
  opacity: 0.7;
}

/* ── Dropdown menu ── */
.navbar__item {
  position: relative;
}

.navbar__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid rgba(8, 39, 67, 0.1);
  box-shadow: 0 8px 24px rgba(8, 39, 67, 0.1);
  list-style: none;
  margin: 0;
  padding: 20px 0 8px; /* padding-top creates the visual gap without breaking hover */
  min-width: 180px;
  z-index: 999;
  white-space: nowrap;
}

/* Caret positioned inside the padding-top area */
.navbar__dropdown::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid rgba(8, 39, 67, 0.1);
  border-top: 1px solid rgba(8, 39, 67, 0.1);
}

.navbar__item--has-dropdown:hover .navbar__dropdown,
.navbar__item--has-dropdown:focus-within .navbar__dropdown {
  display: block;
}

.navbar__dropdown-link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.52vw, 9px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  text-decoration: none;
  transition: background 0.15s;
}

.navbar__dropdown-link:hover {
  background: rgba(8, 39, 67, 0.05);
  opacity: 1;
}

.navbar__link-arrow,
.navbar__search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.navbar__divider {
  width: 100%;
  height: 2px;
  background: rgba(8, 39, 67, 0.25);
}

/* Mobile-only bar: hidden on desktop */
.navbar__mobile-bar {
  display: none;
}

.navbar__hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 49px;
  height: 49px;
  background: var(--color-red);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
}

.navbar__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
}

/* ── HAMBURGER DRAWER ──────────────────────────
       Figma: wit panel, 440px, slide-in van rechts.
       Logo bovenaan, nav-links met lijn + pijl,
       zoekbalk + CTA knop onderaan.
       Sluitknop: rood 49×49 blok rechts van logo.
    ─────────────────────────────────────────────── */
.navbar__drawer {
  display: none;
}

/* =============================================
       SECTION 1 – HERO
       Node 365:9289  y=0  h=970
    ============================================= */
section.hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 126px);
    overflow: hidden;
    max-width: 100%;
}

section.hero--compact {
  height: auto;
}

.hero__bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* rgba(255,255,255,0.7) overlay — exact Figma value on node 365:9289 */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.7);
}

.hero__content {
  padding-top: 185px;
  padding-bottom: 250px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  text-align: center;
  justify-content: center;
  gap: 0;
}

/* Desktop/H1 - Midland: size=40, weight=500, lh=100, ls=30 */
.hero__headline {
  font-weight: 500;
  line-height: 2.5em;
  text-transform: uppercase;
  text-wrap-style: balance;
  padding: 0 var(--page-padding);
  margin-bottom: 40px;
}

/* Red lines run full-width edge-to-edge, wordmark sits centered between them.
       In Figma: Line 88 x=479 w=479, wordmark x=564 w=601, Line 89 x=1730 w=479
       Both lines extend beyond canvas edges — so we use flex:1 with no max-width. */
.hero__logo-row {
  display: flex;
  align-items: center;
  width: 100%;
  column-gap: 54px;
}

.hero__line {
  flex: 1;
  height: 2px;
  background: var(--color-red);
}

.hero__wordmark {
  flex-shrink: 0;
  width: 601px;
  height: 73px;
}

.hero__wordmark img {
  width: 100%;
  height: auto;
}

/* =============================================
       SECTION 2 – WAAROM INVESTEREN  (2-column)
       Node 404:6260  y=1120  w=1241  h=297
       Left col: big heading "Ervaar / Estetische / Kwaliteit"
       Right col: body text + Norway flag
    ============================================= */
section.why {
  margin: var(--gap-section) 0;
}

section.why .container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

.why__left {
  flex: 1 1 0;
  min-width: 0;
}

/* Desktop/H2 - Midland CAPS: size=30, weight=600, lh=80, ls=20 */
.why__heading {
  letter-spacing: var(--ls-h2-caps);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-dark-blue);
}

.why__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  margin: auto;
}

/* Desktop/Body - Figtree: size=18, weight=300, lh=35, ls=0 */
.why__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-blue);
  text-align: center;
  max-width: 517px;
}

.why__flag {
  width: 163px;
  height: 131px;
  object-fit: contain;
}

/* =============================================
       SECTION 3 – 3 CARD GRID
       Node 365:9632  y=1567  h=808
       Row: 1314×442 gecentreerd, elke card 411×442
       Image: 411×365, Button: 411×51 (26px gap onder image)
    ============================================= */
section.cards {
  background: var(--color-bg-light);
  padding: var(--gap-section) 0;
  max-width: 100%;
}

section.cards .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

.cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Desktop/H2 - Midland: size=30, weight=400, lh=80, ls=10 */
.cards__title {
  text-align: center;
}

/* Rode lijn onder de titel — Figma Line 89 kleur: red */
.cards__divider {
  width: 100%;
  max-width: 479px;
  height: 2px;
  background: var(--color-red);
}

/* Desktop/Body - Figtree */
.cards__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  text-align: center;
  color: var(--color-dark-blue);
}

/* Row: 3 cards met gap=40px, vult de container */
.cards__row {
  display: flex;
  gap: 40px;
  width: 100%;
}

/* Elke card: gelijke breedte, vult de rij */
.card {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Image: full card width × 365px hoog, met border-radius uit Figma */
.card__image-wrap {
  position: relative;
  width: 100%;
  height: 365px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 4px;
}

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

/* Radial gradient overlay — donker in het midden zodat label leesbaar is */
.card__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Label staat verticaal gecentreerd in de afbeelding (y=97/131/143 van image top)
       Langste label "Leven in Noorwegen" begint op y=97 → midden ca. 177 van 365 */
.card__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  color: var(--color-white);
}

/* Desktop/Button - Midland: size=9, weight=400, ls=30 */
.card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  background: var(--color-red);
  height: 51px;
}

.card__btn-label {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
  flex: 1;
}

/* =============================================
       SECTION 4 – SPLIT LEFT  (text left, image right)
       Node 365:9267  y=2525  h=768
    ============================================= */
section.split {
  width: 100%;

  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Beide splits gebruiken row — HTML-volgorde bepaalt links/rechts.
       split--text-left:  content | image  → page-padding links op content
       split--text-right: image | content  → page-padding rechts op content */
section.split--text-left,
section.split--text-right {
  flex-direction: row;
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-section);
}

/* Twee splits direct na elkaar: tweede split krijgt geen extra padding-top */
main > .split + .split {
  padding-top: 0;
}

section.split--text-right .split__content {
  padding: 67px 210px 67px 40px;
}

.split__image {
  flex-shrink: 0;
  width: 958px;
  height: 768px;
  overflow: hidden;
  max-width: 69vw;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.split__content {
  flex: 1;
  /* Frame421 x=207 op 1728px canvas → content start 207px van edge.
         Content frame w=522, gap naar image=40px (Figma gap-[40px]) */
  padding: 67px 40px 67px 207px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* badge group is opacity:0 in Figma (decorative / hidden) — display:none removes dead space */
.split__badges {
  display: none;
}

.split__divider {
  width: 387px;
  height: 2px;
  background: var(--color-red);
}

/* Desktop/Body - Figtree */
.split__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* =============================================
       SECTION 5 – SPLIT RIGHT (image left, text right)
       Node 365:9671  y=3443  h=768
       (same CSS as .split, reversed via split--text-right)
    ============================================= */

/* =============================================
       SECTION 6 – PHOTO GALLERY
       Node 365:9703  y=4361  w=1728  h=468
       Patroon: 291 | 20 | 387.5 | 20 | 291 | 20 | 387.5 | 20 | 291
       Loopt van rand tot rand — geen page-padding
    ============================================= */
/* Gallery: 3 tall + 2 stacks, verhouding tall:stack = 291:387.5 ≈ 1:1.332
       flex-grow zorgt dat alles samen altijd 100% breedte vult */
section.gallery {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
  height: 468px;
  display: flex;
  gap: 20px;
  overflow: hidden;
}

.gallery__tall {
  flex: 1 1 0;
  /* basis 0, groeit gelijk mee */
  min-width: 0;
  height: 468px;
  overflow: hidden;
}

.gallery__tall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__stack {
  flex: 1.332 1 0;
  /* 387.5/291 ≈ 1.332 — stapel is breder dan tall */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 468px;
}

.gallery__item {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
       SECTION 7+8 – RODE BALK + CTA  (gecombineerd)
       In Figma: rode Frame 331 (y=4849 h=308) is achtergrond,
       CTA Frame 298 (y=4938 h=127) staat 89px lager = padding-top.
       308 - 89 - 127 = 92px padding-bottom.
       De rode stripe heeft een subtiele foto-texture op opacity 0.15.
    ============================================= */
section.cta-bar {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-red);
  display: flex;
  align-items: center;
  gap: 100px;
  padding: 89px 210px 92px;
  max-width: 100%;
}

/* Subtiele foto-texture als overlay */
.cta-bar__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-bar__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.cta-bar__text {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
  color: var(--color-white);
}

/* Desktop/H4 - Figtree: size=36, weight=400, lh=40, ls=5 */
.cta-bar__heading {
  color: var(--color-white);
}

/* Desktop/Body - Figtree */
.cta-bar__sub {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-white);
  max-width: 840px;
}

/* Desktop/Button - Midland: wit kader op rode achtergrond */
.cta-bar__btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 51px;
  padding: 15px 25px;
  background: var(--color-dark-blue);
  border: none;
}

.cta-bar__btn-label {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* =============================================
       SECTION 9 – IMAGE + TEXT  (photo left, text right)
       Node 365:9656  y=5157  h=687
    ============================================= */
section.imgtext {
  margin: var(--gap-section) 0;
}

section.imgtext .container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

.imgtext__photo {
  flex: 1;
  min-width: 0;
  height: 462px;
  overflow: hidden;
}

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

.imgtext__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 47px;
}

/* Desktop/Body - Figtree */
.imgtext__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* =============================================
       SECTION 10 – TWO-COLUMN TEXT
       Node 365:9662  y=5844  h=652
    ============================================= */
section.twocol {
  margin: var(--gap-section) 0;
}

section.twocol .container {
  display: flex;
  gap: 40px;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

.twocol__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 47px;
}

/* Desktop/Body - Figtree */
.twocol__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* =============================================
       SECTION 11 – CONTACT FORM
       Node 405:6271  y=6496  h=631
    ============================================= */
section.contact {
  width: 100%;
  background-image: url("/wp-content/uploads/hkn-placeholders/hkn-0826fde1-eaff-4d02-8197-b78affa0d3b4.png");
  background-size: cover;
  background-position: center top;
  max-width: 100%;
}

.contact__overlay {
  width: 100%;
  background: rgba(196, 50, 42, 0.8);
  backdrop-filter: blur(5px);
  padding: var(--gap-section) 0;
}

.contact__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 210px;
  padding-right: 210px;
}

.contact__left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Desktop/H2 - Midland */
.contact__label {
  color: var(--color-white);
}

/* Desktop/H4 - Figtree */
.contact__heading {
  color: var(--color-white);
}

.contact__divider {
  width: 479px;
  height: 2px;
  background: var(--color-dark-blue);
}

/* Desktop/Body - Figtree */
.contact__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-white);
}

.contact__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  width: 100%;
}

.contact__form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

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

/* Desktop/Button - Midland */
.contact__field-label {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Desktop/Label - Figtree: size=18, weight=300, lh=33, ls=2 */
.contact__input,
.contact__textarea {
  background: var(--color-white);
  border: none;
  outline: none;
  padding: 8px 12px;
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  letter-spacing: 0.36px;
  color: var(--color-placeholder);
  width: 100%;
}

.contact__input {
  height: 48px;
}

.contact__textarea {
  height: 136px;
  resize: vertical;
}

/* Desktop/Button - Midland */
.contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 51px;
  padding: 15px 35px;
  background: var(--color-dark-blue);
  border: none;
  cursor: pointer;
}

.contact__submit-label {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* =============================================
       SECTION 12 – FOOTER
       Node 405:6272  y=7147  h=526
    ============================================= */
.footer {
  background: var(--color-dark-blue);
  width: 100%;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 526px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 56px 210px 16px;
}

.footer__top {
  display: flex;
  gap: 89px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer__brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__logo {
  width: 394px;
  height: 48px;
  object-fit: contain;
  object-position: left;
}

.footer__partners {
  display: flex;
  gap: 42px;
  align-items: flex-end;
}

.footer__partner-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Desktop/Label - Figtree */
.footer__partner-label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  color: var(--color-white);
  text-align: center;
}

.footer__partner-logo {
  width: 132px;
  height: 146px;
  object-fit: contain;
}

.footer__flag {
  width: 122px;
  height: 100px;
  object-fit: contain;
}

.footer__divider-v {
  width: 2px;
  height: 363px;
  background: var(--color-white);
  flex-shrink: 0;
  align-self: center;
}

.footer__content {
  flex: 1;
  display: flex;
  column-gap: 100px;
  row-gap: 12px;
  align-items: flex-start;
  color: var(--color-white);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.footer__text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

/* Desktop/H4 - Figtree */
.footer__heading {
  font-family: var(--font-figtree);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-white);
  max-width: 337px;
}

/* Desktop/Body - Figtree */
.footer__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-white);
  max-width: 398px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 262px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Desktop/Body - Figtree */
.footer__links a,
.footer__link {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-white);
  text-decoration: underline;
}

.footer__links a:hover,
.footer__link:hover {
  opacity: 0.75;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 32px;
}

.footer__bottom-left,
.footer__bottom-right {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

/* Desktop/Caption - Midland: size=7, weight=600, lh=100, ls=30 */
.footer__bottom a,
.footer__bottom span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: normal;
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.footer__bottom-left a,
.footer__bottom-right a {
  text-decoration: underline;
}

/* =============================================
    SECTION – INTRO
    Tekst links | Twee foto's rechts
 ============================================= */
section.intro {
  width: 100%;
  background: var(--color-white);
  padding: 0 clamp(60px, 11.57vw, 200px);
  margin: var(--gap-section) 0px;
}

.intro__inner {
  display: flex;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;

  padding-bottom: 0px;
}

.intro__text {
  flex: 0 0 574px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.intro__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-blue);
}

.intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  padding: 15px 25px;
  min-width: 220px;
  text-decoration: none;
  align-self: flex-start;
}

.intro__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

.intro__photos {
  flex: 1;
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: flex-end;
}

.intro__photo-tall {
  width: 317px;
  height: 611px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}

.intro__photo-tall img,
.intro__photo-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__photo-col {
  flex-shrink: 0;
  width: 297px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.intro__photo-label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 33px;
  letter-spacing: 0.36px;
  color: var(--color-blue);
}

.intro__photo-small {
  width: 100%;
  height: 455px;
  overflow: hidden;
  border-radius: 4px;
}

/* =============================================
    SECTION – STAPPENPLAN
    Lichtgrijs. Lijst links | Foto rechts
 ============================================= */
section.steps {
  width: 100%;
  background: var(--color-bg-light);
}

.steps__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 80px 0 80px 110px;
}

.steps__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.steps__heading {
  color: var(--color-green-light);
}

.steps__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.steps__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.steps__item-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 6px;
}

.steps__item-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.steps__item-dot--filled {
  background: var(--color-blue);
}

.steps__item-dot--outline {
  border: 3px solid var(--color-red);
  background: transparent;
}

.steps__item-line {
  display: block;
  width: 2px;
  height: 199px;
  background: var(--color-blue);
  opacity: 0.3;
  margin-top: 8px;
}

.steps__item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
}

.steps__item-title {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

.steps__item--open .steps__item-title {
  font-weight: 600;
}

.steps__item-body {
  background: var(--color-white);
  padding: 20px;
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-green-light);
}

.steps__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  padding: 15px 25px;
  min-width: 220px;
  text-decoration: none;
  align-self: flex-start;
}

.steps__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

.steps__photo {
  flex: 0 0 547px;
  height: 756px;
  overflow: hidden;
  border-radius: 4px;
}

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

/* =============================================
    SECTION – DRIE KOLOMMEN
    Lichtgrijs. 3 gelijke kolommen tekst
 ============================================= */
section.threecol {
  width: 100%;
  background: var(--color-bg-light);
  max-width: 100%;
}

.threecol__inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 70px 210px;
}

.threecol__grid {
  display: flex;
  gap: 71px;
  align-items: flex-start;
}

.threecol__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.threecol__col-heading {
  font-family: var(--font-figtree);
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 0.44px;
  color: var(--color-dark-blue);
}

.threecol__col-body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* =============================================
    SECTION – DUAAL PANEEL (Bouwen vs Bestaand)
    Twee overlappende foto's, twee witte kaarten
 ============================================= */
section.dualpanel {
  width: 100%;
  overflow: hidden;
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-section);
}

.dualpanel__stage {
  position: relative;
  width: 100%;
  height: 950px;
  max-width: 1920px;
  margin: 0 auto;
}

.dualpanel__photo {
  position: absolute;
  overflow: hidden;
}

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

.dualpanel__photo--a {
  top: 0;
  left: 0;
  width: 55%;
  height: 450px;
}

.dualpanel__photo--b {
  bottom: 0;
  right: 0;
  width: 55%;
  height: 450px;
}

.dualpanel__card {
  position: absolute;
  background: var(--color-white);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dualpanel__card--a {
  top: 50px;
  right: 110px;
  width: 774px;
}

.dualpanel__card--b {
  bottom: 50px;
  left: 110px;
  width: 774px;
}

.dualpanel__card-heading--right {
  text-align: right;
}

.dualpanel__card-body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

.dualpanel__card-body--right {
  text-align: right;
}

.dualpanel__stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 40px 24px;
}

.dualpanel__card-mobile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dualpanel__photo-mobile {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 4px;
}

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

.dualpanel__card-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Navbar + typografie: breakpoint 1350px */

/* Intro: voorkomen overflow bij lage desktop resolutie */

/* Gallery: compact layout (1 tall + stack) vanaf 967px */

/* Contact: stack eerder zodat de twee kolommen niet te smal worden */

/* =============================================
       RESPONSIVE – TABLET  max-width: 1024px
    ============================================= */

/* =============================================
       RESPONSIVE – MOBILE  max-width: 480px
       Figma "Home Mobile" — 440px canvas, x=25px padding
       Type tokens (exact Figma Mobile styles):
         H1  Midland  22px / lh=70px / ls=6.6px
         H2  Midland  24px / lh=50px / ls=2.4px
         H3  Midland  20px / lh=50px / ls=3px
         H4  Figtree  22px / lh=28px / ls=1.1px
         Body Figtree 16px / lh=25px
    ============================================= */

/* =================================================================
   LEVEN IN NOORWEGEN – SECTIES
   Gebruik CSS Custom Properties voor spacing/gap.
   Flex + Grid layouts; breakpoints: 1200px | 768px | 480px
================================================================= */

/* ──────────────────────────────────────────────
   SECTION – DUALPIC  (Waarom wonen in Noorwegen)
   Grid: [foto-kolommen] [tekst]
────────────────────────────────────────────── */
section.dualpic {
  display: grid;
  grid-template-columns: minmax(0, 654px) minmax(0, 574px);
  align-items: center;
  gap: var(--gap-lg);
  margin: var(--gap-section) 0;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
  overflow: hidden;
}

.dualpic__photos {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-md);
}

.dualpic__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  flex: 1;
  min-width: 0;
}

.dualpic__caption {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  color: var(--color-blue);
  text-align: right;
  letter-spacing: 0.36px;
}

.dualpic__img-wrap {
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
}

.dualpic__img-wrap--short {
  aspect-ratio: 297 / 455;
  max-height: 455px;
}

.dualpic__img-wrap--tall {
  aspect-ratio: 317 / 611;
  max-height: 611px;
}

.dualpic__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dualpic__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.dualpic__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-blue);
}

.dualpic__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(180px, 11.5vw, 220px);
  height: 51px;
  padding: 15px 25px;
  background: var(--color-red);
  text-decoration: none;
}

.dualpic__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* ──────────────────────────────────────────────
   SECTION – DE NOORSE LEVENSSTIJL
   Figma (1728px canvas):
     Flex row, gap=92px, align-items=center, padding-left=210px, height=1038px
     Content: x=210 y=193, w=558, flex col, gap=40px
     Bullets: flex row, col-gap=50px; left-col gap=41px; right-col gap=45px
     Photo: x=860, w=866, h=1038 (volledige hoogte)
     Quote: open left=207 top=368; text center@453 top=411 w=608; close left=691 top=604
────────────────────────────────────────────── */
section.lifestijl {
  display: flex;
  align-items: center;
  height: clamp(520px, 60.07vw, 1038px);
  /* 1038/1728 */
  gap: clamp(40px, 5.32vw, 92px);
  /* 92/1728 */
  padding-left: var(--section-px);
  /* x=210px @ 1728 */
  overflow: hidden;
  margin: var(--gap-section) 0;
}

.lifestijl__content {
  flex: 0 0 clamp(320px, 32.29vw, 558px);
  /* 558/1728 */
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.31vw, 40px);
  /* 40/1728 — gap tussen alle children */
}

.lifestijl__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* Bullets: flex row, col-gap=50px */
.lifestijl__bullets {
  display: flex;
  gap: clamp(24px, 2.89vw, 50px);
  /* 50/1728 tussen de twee kolommen */
  align-items: flex-start;
}

/* Linker kolom: gap=41px tussen bullets */
.lifestijl__bullet-col {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.37vw, 41px);
  /* 41/1728 */
}

/* Rechter kolom: gap=45px */
.lifestijl__bullet-col:last-child {
  gap: clamp(20px, 2.6vw, 45px);
  /* 45/1728 */
}

/* Linker bullet: items-center, gap=30px */
.lifestijl__bullet {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.74vw, 30px);
  /* 30/1728 */
}

/* Rechter bullet: items-end (tekst uitgelijnd op onderkant icon), gap=37px */
.lifestijl__bullet-col:last-child .lifestijl__bullet {
  align-items: flex-end;
  gap: clamp(18px, 2.14vw, 37px);
  /* 37/1728 */
}

/* Linker icon: 72x55px */
.lifestijl__bullet-icon {
  flex-shrink: 0;

  width: 50px;
  height: 50px;
  object-fit: contain;
  background-repeat: no-repeat;
}

/* Rechter icon: 51x51px */
.lifestijl__bullet-icon--sm {
  width: clamp(28px, 2.95vw, 51px);
  /* 51/1728 */
}

.lifestijl__bullet span {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

.lifestijl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  /* 220/1728 */
  height: 51px;
  padding: 15px 25px;
  text-decoration: none;
  align-self: flex-start;
}

.lifestijl__btn--dark {
  background: var(--color-dark-blue);
}

.lifestijl__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* Foto: vult rest van sectie, volledige hoogte */
.lifestijl__image-wrap {
  flex: 1 1 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.lifestijl__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lifestijl__image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Quote-block gecentreerd op de foto */
.lifestijl__quote-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 70%, 608px);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Open aanhalingsteken: linksboven van het tekstblok */
.lifestijl__quote-mark--open {
  width: clamp(24px, 2.8vw, 48px);
  height: clamp(22px, 2.6vw, 45px);
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: 4px;
}

/* Sluit aanhalingsteken: rechtsonder van het tekstblok */
.lifestijl__quote-mark--close {
  width: clamp(24px, 2.8vw, 48px);
  height: clamp(22px, 2.6vw, 45px);
  object-fit: contain;
  transform: rotate(180deg);
  align-self: flex-end;
  margin-top: 4px;
}

/* Quote tekst */
.lifestijl__quote-text {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(18px, 1.74vw, 30px);
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
  text-align: center;
}

/* ──────────────────────────────────────────────
   SECTION – RUST, NATUUR EN SEIZOENEN
   Gecentreerde header + scène (landscape + portret overlay + quote)
────────────────────────────────────────────── */
section.natuur {
  width: 100%;
  max-width: 100%;
}

.natuur__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  margin: var(--gap-section) 0;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
  text-align: center;
  max-width: 1920px;
}

.natuur__divider {
  width: clamp(240px, 27.72vw, 479px);
  /* 479/1728 */
  height: 2px;
  background: var(--color-red);
}

.natuur__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  text-align: center;
  column-count: 2;
  text-align: center;
}

.natuur__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(180px, 11.5vw, 220px);
  height: 51px;
  padding: 15px 25px;
  background: var(--color-red);
  text-decoration: none;
}

.natuur__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* Scène: Figma 1728px canvas, scene height = 1078-306 = 772px */
.natuur__scene {
  position: relative;
  width: 100%;
  padding-bottom: clamp(400px, 44.68vw, 772px);
  /* 772/1728 */
  overflow: hidden; /* clip any absolute children that exceed the scene bounds */
}

.natuur__landscape {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(220px, 28.24vw, 488px);
  /* 488/1728 */
  overflow: hidden;
}

.natuur__landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portret: Figma top=307px (scene-relative), left=210px, 354×465 */
.natuur__portrait {
  position: absolute;
  left: var(--section-px);
  top: clamp(150px, 17.77vw, 307px);
  /* 307/1728 */
  width: clamp(160px, 20.49vw, 354px);
  /* 354/1728 */
  aspect-ratio: 354 / 465;
  overflow: hidden;
  border-radius: 4px;
  z-index: 2;
}

.natuur__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Quote naast portret: Figma left=691px, bottom-gealigneerd aan scene */
.natuur__quote-block {
  position: absolute;
  left: clamp(320px, 40vw, 691px);
  /* 691/1728 */
  bottom: -90px; /* anker aan scèneonderkant zodat het nooit buiten de sectie uitsteekt */
  width: clamp(280px, 46.6vw, 805px);
  /* 805/1728 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  text-align: center;
  z-index: 2;
}

.natuur__quote-open {
  width: clamp(36px, 3.75vw, 72px);
  height: clamp(33px, 3.86vw, 67px);
  object-fit: contain;
  align-self: flex-start;
  opacity: 0.5;
  top: -35px;
  position: absolute;
  left: -34px;
}

.natuur__quote-close {
  width: clamp(36px, 3.75vw, 72px);
  height: clamp(33px, 3.86vw, 67px);
  object-fit: contain;
  align-self: flex-end;
  transform: rotate(180deg);
  opacity: 0.5;
  position: absolute;
  bottom: 100px;
}

.natuur__quote-text {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(18px, 1.74vw, 30px);
  font-weight: 600;
  letter-spacing: var(--ls-h2-caps);
  text-transform: uppercase;
  color: var(--color-dark-blue);
  padding-bottom: 105px;
}

/* ──────────────────────────────────────────────
   SECTION – SCANDINAVIË ALS WOONKEUZE
   Grid: [tekst] [foto]
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
   SECTION – SCANDINAVIË ALS WOONKEUZE
   Figma (1728px canvas):
     Flex row, gap=40px, items-center, height=768px
     Content: margin-left≈209px (--section-px), w=522, gap=40
     Photo:   w=958px, h=768px (volledige hoogte), vult rest
────────────────────────────────────────────── */
.scandinavia {
  display: flex;
  align-items: center;
  padding: var(--section-py) 0;
  height: clamp(400px, 44.44vw, 768px);
  /* 768/1728 */
  gap: clamp(20px, 2.31vw, 40px);
  /* 40px tussen tekst en foto */
  overflow: hidden;
}

/* Tekst: margin-left = --section-px, breedte = 522px */
.scandinavia__content {
  flex: 0 0 clamp(280px, 30.21vw, 522px);
  /* 522/1728 */
  margin-left: var(--section-px);
  /* x=209px @ 1728px */
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.31vw, 40px);
  /* 40px tussen titel / divider / body */
}

/* Decoratieve iconen boven de titel (Figma: Group 225) */
.scandinavia__icons {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 0;
}

.scandinavia__icon--badge {
  width: clamp(50px, 6.94vw, 120px); /* Figma: 120×120 */
  height: clamp(50px, 6.94vw, 120px);
  object-fit: contain;
}

.scandinavia__icon--mountain {
  width: clamp(80px, 9.2vw, 159px); /* Figma: 159×113 */
  height: clamp(57px, 6.54vw, 113px);
  object-fit: contain;
}

.scandinavia__divider {
  width: clamp(200px, 23.78vw, 411px);
  /* 411/1728 */
  height: 2px;
  background: var(--color-red);
}

.scandinavia__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* Foto: vult resterende breedte, volledige hoogte */
.scandinavia__image {
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.scandinavia__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ──────────────────────────────────────────────
   SECTION – ERVARINGEN VAN NEDERLANDERS
   Gecentreerde header + horizontaal-scrollbare slider
────────────────────────────────────────────── */
section.reviews {
  margin: var(--gap-section) 0;
  overflow: hidden;
  max-width: 100%;
}

.reviews__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0 var(--section-px) var(--gap-md);
  text-align: center;
}

.reviews__divider {
  width: clamp(240px, 25vw, 479px);
  height: 2px;
  background: var(--color-red);
}

.reviews__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

/* Keyframe: scroll van 0 naar -50% (helft = originele set cards) */
@keyframes reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Track wrapper */
.reviews__track-wrap {
  position: relative;
  overflow: hidden;
}

.reviews__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 8vw, 150px);
  z-index: 2;
  pointer-events: none;
}

.reviews__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-white),
    rgba(255, 255, 255, 0)
  );
}

.reviews__fade--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-white),
    rgba(255, 255, 255, 0)
  );
}

.reviews__track {
  display: flex;
  gap: var(--gap-md);
  width: max-content;
  padding: var(--gap-sm) 0;
  animation: reviews-scroll 30s linear infinite;
}

/* Geen animatie voor gebruikers met voorkeur voor minder beweging */

.review-card {
  flex-shrink: 0;
  width: clamp(280px, 33vw, 634px);
  background: var(--color-dark-blue);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.review-card__stars {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 43px;
  overflow: hidden;
}

.review-card__stars img {
  display: block;
  flex-shrink: 0;
}

.review-card__quote {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-white);
}

.review-card__name {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
}

.reviews__cta {
  display: flex;
  justify-content: center;
  padding: var(--gap-md) 0 var(--gap-sm);
}

.reviews__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 51px;
  padding: 15px 35px;
  background: var(--color-red);
  text-decoration: none;
}

.reviews__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* ──────────────────────────────────────────────
   SECTION – ACTIVITEITEN IN NOORWEGEN
   Grid: [tekst] [mozaïek]  — mozaïek via CSS Grid
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
   SECTION – ACTIVITEITEN IN NOORWEGEN
   Figma (1728px canvas):
     Content: absolute left=211 top=95  w=449 gap=20
     portrait-sm:    left=773    top=104  w=254  h=408
     landscape-top:  left=1046   top=178  w=379  h=168
     landscape-bot:  left=1046   top=368  w=379  h=284
     portrait-lg:    left=1445   top=8    w=284  h=564
────────────────────────────────────────────── */
section.activiteiten {
  position: relative;
  height: clamp(400px, 37.73vw, 652px);
  /* 652/1728 */
}

/* Tekst links */
.activiteiten__content {
  position: absolute;
  left: var(--section-px);
  /* 211px @ 1728px */
  top: clamp(40px, 5.5vw, 95px);
  /* 95/1728 */
  width: clamp(260px, 26vw, 449px);
  /* 449/1728 */
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.16vw, 20px);
  /* 20px gap */
}

.activiteiten__divider {
  width: clamp(160px, 17.48vw, 302px);
  /* 302/1728 */
  height: 2px;
  background: var(--color-red);
}

.activiteiten__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

.activiteiten__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;

  /* 259/1728 */

  padding: 15px 35px;
  background: var(--color-dark-blue);
  text-decoration: none;
}

.activiteiten__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* Mozaïek: container dekt volledige sectie */
.activiteiten__mosaic {
  position: absolute;
  inset: 0;
}

/* Smal portret — kolom 1 */
.activiteiten__img--portrait-sm {
  position: absolute;
  left: 44.74vw;
  /* 773/1728 */
  top: clamp(50px, 6.05vw, 104px);
  /* 104.43/1728 */
  width: clamp(130px, 14.7vw, 254px);
  /* 253.89/1728 */
  height: clamp(200px, 23.63vw, 408px);
  /* 408.18/1728 */
  overflow: hidden;
  border-radius: 4px;
}

/* Bovenste landscape — kolom 2 */
.activiteiten__img--landscape-top {
  position: absolute;
  left: 60.56vw;
  /* 1046.42/1728 */
  top: clamp(80px, 10.28vw, 178px);
  /* 177.67/1728 */
  width: clamp(180px, 21.93vw, 379px);
  /* 378.885/1728 */
  height: clamp(80px, 9.72vw, 168px);
  /* 167.959/1728 */
  overflow: hidden;
  border-radius: 4px;
}

/* Onderste landscape — kolom 2 */
.activiteiten__img--landscape-bot {
  position: absolute;
  left: 60.56vw;
  /* 1046.42/1728 */
  top: clamp(170px, 21.3vw, 368px);
  /* 368.08/1728 */
  width: clamp(180px, 21.93vw, 379px);
  /* 378.885/1728 */
  height: clamp(140px, 16.44vw, 284px);
  /* 284.163/1728 */
  overflow: hidden;
  border-radius: 4px;
}

/* Breed portret — kolom 3, tot rechterrand sectie */
.activiteiten__img--portrait-lg {
  position: absolute;
  left: 83.61vw;
  /* 1444.84/1728 */
  top: clamp(4px, 0.45vw, 8px);
  /* 7.75/1728 */
  width: clamp(140px, 16.44vw, 284px);
  /* 284.163/1728 */
  height: clamp(280px, 32.67vw, 564px);
  /* 564.421/1728 */
  overflow: hidden;
  border-radius: 4px;
}

.activiteiten__img--portrait-sm img,
.activiteiten__img--landscape-top img,
.activiteiten__img--landscape-bot img,
.activiteiten__img--portrait-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────────────
   SECTION – ZOMER, LICHT EN BUITENLEVEN
   Figma (1728px canvas):
     Photo:   absolute left=772  w=746  h=725  top=0
     Content: absolute left=210  w=750  top=50  pr=50  py=50
     Overlap: content right (960) > photo left (772) = 188px
────────────────────────────────────────────── */
section.seizoen {
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
  margin: var(--gap-section);
}

/* Foto: absoluut, vult de volledige hoogte van de section */
.seizoen__image {
  position: absolute;
  right: var(--section-px);
  top: 0;
  bottom: 0;
  width: clamp(360px, 43.2vw, 746px);
  height: 100%;
  overflow: hidden;
}

.seizoen__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}

/* Wit content-paneel: in-flow, bepaalt de hoogte van de section */
.seizoen__content {
  position: relative;
  margin-left: var(--section-px);
  width: clamp(420px, 43.4vw, 750px);
  background: var(--color-white);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.2vw, 20px);
  padding: clamp(30px, 2.9vw, 50px) clamp(25px, 2.9vw, 50px)
    clamp(30px, 2.9vw, 50px) 0;
}

.seizoen__icon {
  width: clamp(60px, 5.7vw, 99px);
  /* 99/1728 = 5.7vw — Figma: 99×99 (vierkant) */
  height: clamp(
    60px,
    5.7vw,
    99px
  ); /* expliciet, voorkomt SVG intrinsic-height overflow */
  object-fit: contain;
}

.seizoen__title {
  text-align: right;
  max-width: clamp(250px, 22.7vw, 393px);
  /* 393/1728 = 22.7vw */
}

.seizoen__divider {
  width: clamp(180px, 20.3vw, 351px);
  /* 351/1728 = 20.3vw */
  height: 2px;
  background: var(--color-red);
}

.seizoen__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  text-align: right;
  width: 100%;
}

.seizoen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  width: fit-content;
  /* 220/1728 = 12.7vw */
  height: 51px;
  padding: 15px 35px;
  background: var(--color-dark-blue);
  text-decoration: none;
  margin-top: clamp(12px, 1.2vw, 20px);
  /* extra gap: 40px totaal vóór knop */
}

.seizoen__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* ──────────────────────────────────────────────
   SECTION – 10 DINGEN DIE JE MOET WETEN
   Figma (1728px canvas, node 365:14033 + 365:14249):
     Flex row, height=756px
     Panel: width=1161px, bg=#f3f5f7, pad: 80px 175px 80px 110px
     Gap panel↔image: 20px
     Image: width=547px, height=756px
     Accordion: items gap=40px, dot=24px, line=2px dashed #0d385f
     Button: width=274px, bg=#c4322a
────────────────────────────────────────────── */
section.tien-dingen {
  display: flex;
  min-height: clamp(400px, 43.75vw, 756px);
  /* minimaal de Figma-hoogte */
  gap: clamp(10px, 1.16vw, 20px);
  /* 20/1728 — gap tussen panel en foto */
  overflow: hidden;
  max-width: 100%;
}

/* ── Linker panel ── */
.tien-dingen__panel {
  flex: 0 0 clamp(500px, 67.24vw, 1161px);
  /* 1161/1728 */
  background: #f3f5f7;
  padding: clamp(40px, 4.63vw, 80px) /* top: 80/1728 */
    clamp(80px, 10.12vw, 175px) /* right: 175/1728 */ clamp(40px, 4.63vw, 80px)
    /* bottom: 80/1728 */ clamp(60px, 6.37vw, 110px);
  /* left: 110/1728 */
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.31vw, 40px);
  /* 40/1728 — gap tussen title en accordion en btn */
  overflow: hidden;
  /* panel knipt af — geen scrollbar-breedte-lek */
}

.tien-dingen__title {
  color: #063e31;
  /* Portula green */
  flex-shrink: 0;
}

/* ── Accordion container ── */
.tien-dingen__accordion {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.31vw, 40px);
  /* 40/1728 tussen items */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Verberg scrollbar maar behoud scroll-functionaliteit */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.tien-dingen__accordion::-webkit-scrollbar {
  display: none;
  /* Chrome / Safari */
}

/* ── Accordion item ── */
.tien-dingen__item {
  display: flex;
  gap: clamp(12px, 1.16vw, 20px);
  /* 20px — dot kolom tot tekst */
  align-items: flex-start;
}

/* ── Indicator kolom: dot + verticale lijn ── */
.tien-dingen__indicator-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 8px;
  /* verticaal uitlijnen met tekst */
  align-self: stretch;
}

.tien-dingen__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Standaard: inactief — holde cirkel met rode rand */
  border: 3px solid #c4322a;
  background: transparent;
  /* Dot – transition op kleurwisseling */
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* Actief item: gevulde blauwe dot */
.tien-dingen__item--active .tien-dingen__dot {
  background: #0d385f;
  border-color: #0d385f;
}

/* Verticale stippellijn — altijd zichtbaar, behalve op het laatste item */
.tien-dingen__line {
  display: block;
  width: 2px;
  flex: 1;
  min-height: 20px;
  margin-top: 8px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 5px,
    transparent 11px
  );
  transition: background 0.3s ease;
}

/* Laatste item: geen lijn eronder */
.tien-dingen__item:last-child .tien-dingen__line {
  display: none;
}

/* Actief item: donkerblauwe lijn */
.tien-dingen__item--active .tien-dingen__line {
  background: repeating-linear-gradient(to bottom, #0d385f 0px);
}

/* ── Item inhoud: label + uitklapbaar tekstvak ── */
.tien-dingen__item-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.74vw, 30px);
}

.tien-dingen__item-toggle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: font-weight 0.2s ease;
}

.tien-dingen__item--active .tien-dingen__item-toggle {
  font-weight: 600;
}

/* Uitklapbare inhoud – smooth via max-height */
.tien-dingen__item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.tien-dingen__item--active .tien-dingen__item-body {
  max-height: 1500px;
}

/* Witte tekst-box (Figma: bg=white, padding=20px) */
.tien-dingen__content-box {
  background: var(--color-white);
  padding: 20px;
}

.tien-dingen__content-box p {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: #063e31;
  /* Portula green in expanded */
}

/* ── Knop: bg=#c4322a, width=274px ── */
.tien-dingen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content; /* 274/1728 */
  height: 51px;
  padding: 15px 25px;
  background: #c4322a;
  text-decoration: none;
  flex-shrink: 0;
  align-self: flex-start;
}

.tien-dingen__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

/* ── Rechter foto ── */
.tien-dingen__image {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  /* ankerpunt voor de absolute img */
  overflow: hidden;
}

.tien-dingen__img {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0 — vult de container altijd 100% */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Tussentekst: gecentraliseerd blok tussen intro en tien-dingen (Figma y=1630) ── */
section.hkn-tussentekst {
  padding: clamp(40px, 4.34vw, 75px) clamp(24px, 18.23vw, 315px);
  background: var(--color-white);
  text-align: center;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-bottom: var(--gap-section);
}

.hkn-tussentekst p {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  text-align: center;
  max-width: clamp(600px, 63.54vw, 1098px);
  margin: 0 auto;
}

/* =================================================================
   TABLET BREAKPOINT  (≤ 1200px)
================================================================= */

/* =================================================================
   TABLET BREAKPOINT  (≤ 768px)
================================================================= */

/* =================================================================
   MOBIEL BREAKPOINT  (≤ 480px)
================================================================= */

/* =================================================================
   SECTION – FINANCIERING VOOR NEDERLANDERS
   Figma node 365:14059  |  1728 × 851px
================================================================= */

/* Buitenste wrapper — donkerblauwe achtergrond, padding = Figma 150px 210px */
section.fin {
  position: relative;
  background: var(--color-dark-blue);
  /* #082743 */
  padding: clamp(60px, 8.68vw, 150px) clamp(20px, 12.15vw, 210px);
  overflow: hidden;
  max-width: 100%;
}

/* Huisfoto rechts — Figma: left=825px, top=2px, 1126.92×502px
   In CSS: absolute, rechterhelft, met radiale gradient die naar links vervaagt */
.fin__bg-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(40%, 65.2vw, 65.2%);
  /* 1126/1728 = 65.2% */
  pointer-events: none;
  z-index: 0;
}

.fin__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient-masker: transparant rechts → volledig donkerblauw links
   (exact: rgba(8,39,67,0)@47% → rgba(8,39,67,0.72)@78% → rgba(8,39,67,1)@100%) */
.fin__bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-dark-blue) 0%,
    rgba(8, 39, 67, 0.72) 22%,
    rgba(8, 39, 67, 0) 53%
  );
}

/* Binnenste wrapper — staat boven de foto (z-index 1) */
.fin__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.47vw, 60px);
  /* Figma gap-60px tussen rijen */
}

/* Linker content-kolom — Figma: 771px breed (771/1728 = 44.6%) */
.fin__content {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.16vw, 20px);
  /* Figma gap-20px */
  width: clamp(280px, 44.6vw, 771px);
}

/* H2 — Midland Regular 30px / lh 80px / tracking 3px / wit */
.fin__title {
  letter-spacing: 3px;
  color: var(--color-white);
}

/* Body + knop — Figma gap-39px ertussen */
.fin__body-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.26vw, 39px);
}

.fin__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  /* 18px */
  font-weight: 300;
  line-height: var(--lh-body);
  /* 35px */
  color: var(--color-white);
}

/* Rode CTA-knop — Figma: 220px breed, px 25px, py 15px */
.fin__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  /* #c4322a */
  min-width: 220px;
  padding: 15px 25px;
  text-decoration: none;
  align-self: flex-start;
}

.fin__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  /* 9px */
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  line-height: normal;
}

/* Rij met 3 witte kaarten — Figma: flex gap-25px, elke kaart flex-1 */
.fin__cards {
  display: flex;
  gap: clamp(10px, 1.45vw, 25px);
}

.fin__card {
  flex: 1 0 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.16vw, 20px);
  /* Figma gap-20px */
  padding: 25px 15px;
}

/* Samengesteld icoon — 54×54px, 11 absoluut gepositioneerde SVG-onderdelen
   (positie per deel = Figma inset-waarden, zie ook section-financiering.php) */
.fin__icon {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  overflow: clip;
}

.fin__icon .fi {
  position: absolute;
}

.fin__icon .fi img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

/* inset-[0_12.38%_13.79%_0] */
.fi--efb3e6c3 {
  inset: 0 12.38% 13.79% 0;
}

/* inset-[0_30.35%_14.82%_17.97%] */
.fi--ffe7ad87 {
  inset: 0 30.35% 14.82% 17.97%;
}

/* inset-[1.85%_54.32%_50.75%_41.94%] */
.fi--a824ddbe {
  inset: 1.85% 54.32% 50.75% 41.94%;
}

/* inset-[47.4%_0_0_35.95%] */
.fi--cc41290c {
  inset: 47.4% 0 0 35.95%;
}

/* inset-[55.17%_30.16%_2.96%_66.1%] */
.fi--d3a880dd {
  inset: 55.17% 30.16% 2.96% 66.1%;
}

/* inset-[59.24%_41.01%_37.05%_46.8%] */
.fi--0d49e6da-a {
  inset: 59.24% 41.01% 37.05% 46.8%;
}

/* inset-[71.09%_41.01%_25.2%_46.8%] */
.fi--0d49e6da-b {
  inset: 71.09% 41.01% 25.2% 46.8%;
}

/* inset-[59.24%_10.86%_37.05%_76.96%] */
.fi--d57bbad4-a {
  inset: 59.24% 10.86% 37.05% 76.96%;
}

/* inset-[71.09%_10.86%_25.2%_76.96%] */
.fi--d57bbad4-b {
  inset: 71.09% 10.86% 25.2% 76.96%;
}

/* inset-[26.66%_17.01%_69.64%_4.63%] */
.fi--63e49f9d {
  inset: 26.66% 17.01% 69.64% 4.63%;
}

/* inset-[56.28%_62.18%_40.02%_4.63%] */
.fi--9887239c {
  inset: 56.28% 62.18% 40.02% 4.63%;
}

/* Icoon geüpload via ACF */
.fin__card-icon-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Kaarttekst — Figtree SemiBold 22px / lh 33px / tracking 0.44px / #082743 / 260px */
.fin__card-text {
  font-family: var(--font-figtree);
  font-size: clamp(14px, 1.27vw, 22px);
  font-weight: 600;
  line-height: var(--lh-label);
  /* 33px */
  letter-spacing: 0.44px;
  color: var(--color-dark-blue);
  text-align: center;
  width: clamp(120px, 15.05vw, 260px);
}

/* =================================================================
   SECTION – QUOTE BANNER
   Figma node 365:14233  |  1728 × 540px
================================================================= */

/* Sectie-wrapper — hoogte bepaald door inhoud */
section.qb {
  position: relative;
  overflow: hidden;
  padding: var(--section-py) 0;
  max-width: 100%;
}

/* Achtergrondfoto — vult de volledige sectie */
.qb__bg {
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  overflow: hidden;
}

.qb__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Wit vervaag bovenaan */
.qb__fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(60px, 8vw, 120px);
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

/* Donkerblauw kleurverloop */
.qb__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 56, 95, 0.27),
    rgba(8, 39, 67, 0.9)
  );
  pointer-events: none;
  z-index: 2;
}

/* Inhoud-laag — in-flow flex-rij, boven de achtergrondlagen */
.qb__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 var(--section-px);
  gap: 0;
}

/* Koptekst links */
.qb__heading {
  flex: 1;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0;
  padding-right: clamp(20px, 3vw, 60px);
}

/* Verticale scheidingslijn */
.qb__divider {
  width: 2px;
  height: clamp(80px, 13.5vw, 231px);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 1);
}

/* Citaat rechts */
.qb__quote {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.16vw, 20px);
  text-align: center;
  padding-left: clamp(20px, 3vw, 60px);
}

.qb__quote-text {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  /* 18px */
  font-weight: 300;
  line-height: var(--lh-body);
  /* 35px */
  color: var(--color-white);
}

.qb__quote-name {
  font-family: var(--font-figtree);
  font-size: clamp(14px, 1.27vw, 22px);
  font-weight: 600;
  line-height: var(--lh-label);
  /* 33px */
  letter-spacing: 0.44px;
  color: var(--color-white);
  height: clamp(24px, 2.43vw, 42px);
}

/* =================================================================
   SECTION – DE SAMENWERKING MET PORTULA
   Figma nodes 379:14211 + 365:14405 + 365:14406  |  1728 × 982px
================================================================= */

/* Sectie — achtergrond #f2f2f2
   padding-top = var(--gap-section): de tussenruimte zit BINNEN de grijze achtergrond.
   Figma: sectie 982px, foto-bottom=844px → padding-bottom = 138px */
section.portula {
  background: #f2f2f2;
  padding-top: var(--gap-section);
  /* gap zit IN het grijs, niet als wit gat */
  padding-bottom: 200px; /*deze padding afwijken ivm. absolute blok in sectie*/
  padding-top: var(--gap-section);
  overflow: hidden;
  max-width: 100%;
}

/* Gecentreerde koptekst-blok (Figma: 1010px breed, flex-col gap-20px) */
.portula__header {
  max-width: clamp(600px, 58.45vw, 1010px);
  margin: 0 auto;
  padding: 0 clamp(16px, 2.31vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.16vw, 20px);
  text-align: center;
}

/* H2 — Midland Regular 30px / lh 80px / tracking 3px / #010101 */
.portula__title {
  letter-spacing: 3px;
  color: #010101;
}

/* Rode horizontale lijn (Figma: 479px breed, #c4322a, h-0 met SVG overlay → 2px visueel) */
.portula__divider {
  width: clamp(160px, 27.72vw, 479px);
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}

/* Body intro — Figtree Light 18px / lh 35px / #010101 */
.portula__intro {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: #010101;
}

/* Onderste gedeelte: hoogte = foto-hoogte (467px)
   De 138px bottom-ruimte zit op .portula { padding-bottom }
   Kaart is absoluut gecentreerd binnen deze container → top:50% = midden van de foto */
.portula__lower {
  position: relative;
  margin-top: clamp(20px, 5.09vw, 88px);
  height: clamp(140px, 27.03vw, 467px);
  /* enkel foto-hoogte: 467/1728 = 27.03vw */
}

/* Foto links — x=210, y=0, 508×467 (t.o.v. lower-container)
   In %: left=12.15%, width=29.4%, height=77.2% van lower */
.portula__photo {
  position: absolute;
  left: 12.15%;
  top: 0;
  width: 29.4%;
  height: clamp(140px, 27.03vw, 467px);
  /* 467/1728 = 27.03vw */
}

.portula__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Donkerblauwe kaart — x=590 (34.14%), y+67 (3.88vw), 955×333px
   Staat deels OVER de foto (128px overlap) */
/* Donkerblauwe kaart — Figma: x=590 (34.14%), y+67, 955×333px
   Padding: logo-left=60px → padding-left=60px, heading y=69 → padding-top=69px
   Logo(136) + gap(50) + content(629) = 815px = kaartbreedte - padding-lr */
.portula__card {
  position: absolute;
  left: 34.14%;
  /* 590/1728 */
  top: 50%;
  transform: translateY(-50%);
  /* verticaal gecentreerd t.o.v. foto */
  right: 10.59%;
  /* 183/1728 */
  min-height: clamp(160px, 19.27vw, 333px);
  background: var(--color-blue);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(20px, 2.89vw, 50px);
  /* 50px: logo-right(196) → content-left(246) */
  padding-top: clamp(28px, 4vw, 69px);
  /* heading y=69 in Figma */
  padding-bottom: clamp(24px, 3.47vw, 60px);
  /* 333-273=60px */
  padding-left: clamp(20px, 3.47vw, 60px);
  /* logo start x=60 */
  padding-right: clamp(20px, 4.63vw, 80px);
}

/* Portula logo — Figma: 136×150px, wit SVG op donkerblauwe achtergrond */
.portula__card-logo {
  flex-shrink: 0;
  width: clamp(80px, 7.87vw, 136px);
  /* 136/1728 = 7.87vw */
  height: auto;
  display: block;
}

/* Tekstkolom in kaart */
.portula__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Kaarttitel — Houstiq Regular 59px / lh 65px / wit
   Figma: heading h=65px, body start y=134 → heading+gap=0
   Met Midland Luxury fallback: lh iets ruimer + margin-bottom voor visuele lucht */
.portula__card-title {
  font-family: var(--font-midland);

  font-weight: 400;
  line-height: 1.35;
  letter-spacing: clamp(0.5px, 0.14vw, 2px);
  color: var(--color-white);
  margin-bottom: clamp(6px, 0.7vw, 12px);
}

/* Kaart-body — Figtree Light 18px / lh 33px / wit */
.portula__card-body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 33px;
  letter-spacing: 0.36px;
  color: var(--color-white);
}

/* Rode knop in kaart — Figma: full-width binnen kolom, py-15px */
.portula__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  padding: 15px 28px;
  text-decoration: none;
  margin-top: clamp(10px, 1.27vw, 22px);
}

.portula__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  line-height: normal;
}

/* =================================================================
   TWEE-KOLOMMEN TEKST (Figma 618:8500)
   Section op de Wie zijn wij pagina – 2 gelijke tekstkolommen
================================================================= */
section.twocol-text .container {
  display: flex;
  gap: 40px;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

.twocol-text__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
  color: var(--color-mid);
}

.twocol-text__intro {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 35px;
}

.twocol-text__sub-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.twocol-text__sub {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 35px;
}

.twocol-text__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 35px;
}

.twocol-text__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  padding: 15px 25px;
  text-decoration: none;
  margin-top: 10px;
}

.twocol-text__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

/* =================================================================
   FULL-BLEED FOTO (Figma 618:8540)
   Edge-to-edge foto zonder zijmarges, hoogte ~488px
================================================================= */
section.fullbleed-photo {
  width: 100%;
  height: clamp(200px, 28.24vw, 488px);
  overflow: hidden;
  margin-top: var(--gap-section);
  max-width: 100%;
}

.fullbleed-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Spacing-regel: fullbleed foto krijgt geen extra marge via het sibling-systeem */
main > .fullbleed-photo {
  margin-top: var(--gap-section);
}

/* =================================================================
   EXPERTISE (Figma 618:8684)
   Tekst + icoon-bullets LINKS | Grote foto + quote RECHTS
================================================================= */
section.expertise {
  padding: 0;
  overflow: hidden;
}

section.expertise .container {
  display: flex;
  align-items: stretch;
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 0; /* foto loopt door tot aan rand */
  gap: clamp(40px, 5.32vw, 92px);
}

.expertise__content {
  flex: 0 0 clamp(320px, 32.29vw, 558px);
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--gap-section);
  padding-bottom: var(--gap-section);
}

.expertise__heading {
  line-height: 80px;
  letter-spacing: 3px;
  color: var(--color-dark-blue);
}

.expertise__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 35px;
  color: var(--color-dark-blue);
}

/* 2×2 grid voor icoon-bullets */
.expertise__bullets {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

/* Linkerkolom: gap 41px, icoon 72×55 */
.expertise__bullets-col--wide {
  display: flex;
  flex-direction: column;
  gap: 41px;
}

/* Rechterkolom: gap 45px, icoon 51×51 */
.expertise__bullets-col--narrow {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.expertise__bullet {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Rechterkolom-bullets: align bottom (Figma: items-end) */
.expertise__bullet--bottom {
  align-items: flex-end;
  gap: 37px;
}

.expertise__bullet-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.expertise__bullet-label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 35px;
  color: var(--color-dark-blue);
  white-space: nowrap;
}

.expertise__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark-blue);
  width: 220px;
  padding: 15px 25px;
  text-decoration: none;
}

.expertise__btn span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

/* Rechter fotopaneel: neemt alle resterende breedte + volledige hoogte */
.expertise__photo {
  flex: 1;
  position: relative;
  min-height: clamp(400px, 60.07vw, 1038px);
  overflow: hidden;
}

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

.expertise__photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* Union SVG quote-markeringen (Figma: 71.775×66.733px, fill white 50%) */
.expertise__union {
  position: absolute;
  width: clamp(48px, 4.15vw, 72px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Open quote: Figma left=207, top=368 (binnen foto-frame 866px breed) */
.expertise__union--open {
  left: clamp(100px, 11.98vw, 207px);
  top: clamp(200px, 21.3vw, 368px);
}

/* Close quote: Figma left=691, top=604 (binnen foto-frame) */
.expertise__union--close {
  left: clamp(400px, 39.99vw, 691px);
  top: clamp(380px, 34.95vw, 604px);
}

/* Quote tekst: Midland Semi Bold · 30px · 80px lh · 6px tracking · UPPERCASE
   Figma: center=453 (van foto-linkerkant), top=411, w=608 */
.expertise__quote {
  position: absolute;
  left: clamp(150px, 26.27vw, 453px);
  top: clamp(250px, 23.84vw, 411px);
  transform: translateX(-50%);
  width: clamp(280px, 35.18vw, 608px);
  font-weight: 600;
  line-height: 80px;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
  margin: 0;
  z-index: 2;
  font-style: normal;
}

/* =================================================================
   VISIE (Figma 618:8541)
   Foto-stapel LINKS | Heading + bullet-lijst RECHTS
================================================================= */
section.visie {
  margin: var(--gap-section) 0;
}

section.visie .container {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5.32vw, 80px);
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

/* Linkerkolom: verticale foto-slider */
.visie__photos {
  flex: 0 0 clamp(220px, 28.82vw, 498px);
  height: clamp(260px, 30.5vw, 530px);
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}

.visie__photos-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s ease;
}

.visie__photo-slide {
  width: 100%;
  height: clamp(260px, 30.5vw, 530px);
  flex-shrink: 0;
  overflow: hidden;
}

.visie__photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fade-out onderrand van de slider */
.visie__photos::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Rechterkolom: heading + bullet-lijst */
.visie__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.77vw, 40px);
}

.visie__heading {
  line-height: 80px;
  letter-spacing: 3px;
  color: var(--color-dark-blue);
  width: clamp(300px, 39.93vw, 690px);
}

.visie__bullets {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.77vw, 40px);
}

.visie__bullet {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.visie__bullet-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 3px;
}

.visie__bullet-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-dark-blue);
  flex-shrink: 0;
}

.visie__bullet-dot--filled {
  background: var(--color-red);
  border-color: var(--color-red);
}

/* Verticale rode lijn onder de cirkel – volgt de hoogte van het open tekstblok */
.visie__bullet-line {
  width: 2px;
  flex: 1;
  min-height: 0;
  background: var(--color-red);
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visie__bullet--expanded .visie__bullet-line {
  opacity: 1;
}

.visie__bullet-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Button reset voor accordion toggle */
.visie__bullet-toggle {
  all: unset;
  cursor: pointer;
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 35px;
  color: var(--color-dark-blue);
}

/* Body: smooth open/close via max-height */
.visie__bullet-body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 35px;
  color: var(--color-dark-blue);
  width: clamp(280px, 38.77vw, 670px);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.visie__bullet--expanded .visie__bullet-body {
  max-height: 600px;
}

/* =================================================================
   LOGO STRIP (Figma 618:8515)
   HuisKopenNoorwegen.nl wordmark · 890×85px gecentreerd
   Figma: 150px gap boven (van collage) · 50px gap onder (naar twocol-text)
================================================================= */
section.logo-strip {
  margin: var(--gap-section) 0px;
}

section.logo-strip .container {
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-strip__img {
  width: 100%;
  max-width: 890px;
  height: auto;
  display: block;
}

/* Spacing-regels voor nieuwe sections */
main > .fullbleed-photo + [data-section-bg="light"] {
  margin-top: var(--gap-section);
}
main > .fullbleed-photo + .expertise {
  margin-top: var(--gap-section);
}
main > .expertise + [data-section-bg="light"] {
  margin-top: var(--gap-section);
}
main > .visie + .portula {
  margin-top: 0;
}

/* logo-strip krijgt 150px gap van foto-collage; twocol-text volgt 50px later
   (de 50px zit als padding-bottom op .logo-strip, twocol heeft margin-top: 0) */
main > .logo-strip + .twocol-text {
  margin-top: 0;
}

/* =================================================================
   RESPONSIVE — TABLET (≤ 1024px)
================================================================= */

/* =================================================================
   RESPONSIVE — MOBIEL (≤ 768px)
================================================================= */

/* =================================================================
   RESPONSIVE — KLEIN MOBIEL (≤ 480px)
================================================================= */
/* =============================================================
   INTRO REVERSED (Bestemmingen — foto's links, tekst rechts)
   ============================================================= */
section.intro--reversed .intro__inner {
  flex-direction: row-reverse;
}
section.intro--reversed .intro__photos {
  flex-direction: row-reverse;
}

/* =============================================================
   NORWAY MAP SECTION
   ============================================================= */
section.norway-map {
  position: relative;
  padding-top: clamp(60px, 8.68vw, 150px);
  padding-bottom: clamp(60px, 8.68vw, 150px);
  overflow: hidden;
  min-height: 600px;
  max-width: 100%;
  padding-left: clamp(16px, 12.15vw, 210px);
  padding-right: clamp(16px, 12.15vw, 210px);
}

.norway-map__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.norway-map__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
}

.norway-map__inner {
  position: relative;
  z-index: 1;
  /* max-width: 1308px; */
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  min-height: 560px;

  max-width: 1920px;
}

/* Info panel links */
.norway-map__info {
  flex: 0 0 clamp(280px, 30vw, 430px);
  max-width: 430px;
}
.norway-map__label {
  font-family: var(--font-figtree);
  font-size: clamp(12px, 0.87vw, 15px);
  font-weight: 400;
  color: var(--color-dark-blue);
  letter-spacing: 1px;
  margin: 0 0 8px;
}
.norway-map__regio-naam {
  font-family: var(--font-midland);
  line-height: 3em;
  font-weight: 400;
  color: var(--color-dark-blue);
  margin: 0 0 20px;
}
.norway-map__divider {
  width: clamp(120px, 22.34vw, 386px);
  height: 2px;
  background: var(--color-red, #8b1a1a);
  margin-bottom: 24px;
}
.norway-map__tekst {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  color: var(--color-dark-blue);
  line-height: 1.7;
  margin: 0 0 16px;
  font-weight: 300;
}
.norway-map__extra {
  font-family: var(--font-figtree);
  font-size: clamp(12px, 0.87vw, 14px);
  color: var(--color-dark-blue);
  opacity: 0.7;
  margin: 0 0 32px;
}
.norway-map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--color-blue);
  color: var(--color-white);
  width: fit-content;
  font-size: var(--fs-button);

  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;

  font-family: var(--font-midland);
  line-height: 3em;
}
.norway-map__btn:hover {
  background: #0a2a4a;
}

/* SVG kaart rechts */
.norway-map__svg-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: clamp(380px, 30vw, 540px); */
  margin-top: -500px;
}
section.norway-map:before {
  content: "";
  width: 100%;
  height: 20%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 00%,
    rgba(255, 255, 255, 0) 100%
  );
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 12;
  pointer-events: none;
}

.norway-map__svg {
  width: auto;
  height: 100%;
  max-height: 540px;
  transform: scale(2);
  transform-origin: left;
}

/* Regio paths */
.norway-map__region {
  fill: #c8d0d8;
  stroke: #ffffff;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.25s ease;
}

.norway-map__region:focus {
  outline: none !important;
}
.norway-map__region:hover {
  fill: #a0aab5;
}
.norway-map__region.is-active {
  fill: var(--color-red);
}
.norway-map__outline {
  fill: #dde3ea;
  stroke: #b0b8c1;
  stroke-width: 0.5;
}
.norway-map__borders {
  pointer-events: none;
}

/* Mobile */

/* =============================================================
   REGIO'S SLIDER / CAROUSEL
   ============================================================= */
section.regios-slider {
  padding-top: var(--gap-section);
  padding-bottom: var(--gap-section);
  background: #f7f7f5;
  overflow: hidden;
  max-width: 100%;
}
.regios-slider__inner {
  /* max-width: 1728px; */
  margin: 0 auto;
  padding: 0 clamp(16px, 12.15vw, 210px);
}
.regios-slider__header {
  margin-bottom: clamp(24px, 2.78vw, 48px);
}
.regios-slider__title {
  font-family: var(--font-midland);
  line-height: 3em;

  color: var(--color-dark-blue);
  margin: 0 0 12px;
}
.regios-slider__title-line {
  width: clamp(80px, 22.34vw, 386px);
  height: 2px;
  background: var(--color-red, #8b1a1a);
}

/* Viewport + track */
.regios-slider__viewport {
  overflow: visible; /* track bleeds into section's right padding; section clips at full width */
}
.regios-slider__track {
  display: flex;
  gap: clamp(20px, 2.31vw, 40px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.regios-slider__slide {
  flex: 0 0 calc(300px - 30px);
  min-width: 0;
}

.regios-slider__card {
  display: flex;
  flex-direction: column;
}
.regios-slider__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 350 / 365;
  overflow: hidden;
}
.regios-slider__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Radiale vignette overlay: donker in midden → tekst leesbaarheid */
.regios-slider__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
}
.regios-slider__naam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 12px;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.15em;

  z-index: 1;
}
.regios-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 26px;
  transition: background 0.2s;
}
.regios-slider__btn:hover {
  background: #a52820;
}

/* Navigatie */
.regios-slider__nav {
  display: flex;
  gap: 8px;
  margin-top: clamp(20px, 2.31vw, 40px);
}
.regios-slider__arrow {
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-dark-blue);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s;
}
.regios-slider__arrow:hover:not(:disabled) {
  background: var(--color-dark-blue);
  color: var(--color-white);
}
.regios-slider__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.regios-slider__arrow--next {
  background: var(--color-red, #8b1a1a);
  color: var(--color-white);
  border-color: var(--color-red, #8b1a1a);
}
.regios-slider__arrow--next:hover:not(:disabled) {
  background: #6b1212;
  border-color: #6b1212;
}

/* =============================================================
   FOTO COLLAGE
   ============================================================= */
section.foto-collage {
  overflow: hidden;
  margin-top: var(--gap-section);
}
.foto-collage__grid {
  display: grid;
  grid-template-columns: 291fr 387fr 291fr 387fr 291fr;
  gap: 20px;
  height: clamp(280px, 27.08vw, 468px);
}
.foto-collage__col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-collage__col--tall img {
  height: 100%;
}
.foto-collage__col--stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}
.foto-collage__col--stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================
   THREECOL MET ICONEN
   ============================================================= */
section.threecol-icons {
  padding-top: clamp(40px, 4.62vw, 80px);
  padding-bottom: clamp(40px, 4.62vw, 80px);
  background: rgba(0, 0, 0, 0.05);
  max-width: 100%;
}
.threecol-icons__inner {
  padding: 0px 210px;
  margin: 0 auto;
}
.threecol-icons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4.11vw, 71px);
}
.threecol-icons__col {
  display: flex;
  flex-direction: column;
}
.threecol-icons__icon {
  width: 72px;
  height: 55px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}
.threecol-icons__icon img {
  max-width: 72px;
  max-height: 55px;
  object-fit: contain;
}
.threecol-icons__heading {
  font-family: var(--font-figtree);
  color: var(--color-dark-blue);
  margin: 0 0 20px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.threecol-icons__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  color: var(--color-dark-blue);
  line-height: 1.7;
  margin: 0;
  opacity: 0.8;
}

/* =============================================================
   BLOG GRID (Praktisch & Regelgeving – Figma 618:8282)
   ============================================================= */

/* ── Sectie-wrapper ── */
section.blog-grid {
  margin: var(--gap-section) 0px;
}
/* blog-grid → faq: geen dubbele marge, enkel de faq eigen padding-top */
main > .blog-grid + .faq {
  margin-top: 0;
}
/* blog-grid → foto-collage: margin-top overriden, enkel blog-grid padding-bottom telt */
main > .blog-grid + .foto-collage {
  margin-top: 0;
}
/* foto-collage → faq: faq margin-top overriden */
main > .foto-collage + .faq {
  margin-top: 0;
}
section.blog-grid .container {
  padding-left: clamp(16px, 10.94vw, 210px);
  padding-right: clamp(16px, 10.94vw, 210px);
}

/* ── Search-header (max 559px, gecentreerd) ── */
.blog-grid__header {
  max-width: 559px;
  margin: 0 auto clamp(40px, 4.17vw, 80px);
  text-align: center;
}
.blog-grid__title {
  text-transform: uppercase;
  margin-bottom: 14px;
}
.blog-grid__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  margin-bottom: 28px;
}
.blog-grid__search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #0000000d;
  max-width: 420px;
  margin: 0 auto;
}
.blog-grid__search-input {
  flex: 1;
  height: 50px;
  padding: 0 18px;
  border: none;
  outline: none;
  font-family: var(--font-figtree);
  font-size: 15px;
  color: var(--color-dark-blue);
  background: #0000000d;
}
.blog-grid__search-input::placeholder {
  opacity: 0.5;
}
.blog-grid__search-btn {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: none;
  background: #0000000d;
  color: var(--color-dark-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.blog-grid__search-btn:hover {
  background: var(--color-blue);
}

/* ── Rij-containers ── */
.blog-grid__row {
  display: grid;
  gap: 40px;
}
.blog-grid__row--3col {
  grid-template-columns: repeat(3, 1fr);
}
.blog-grid__row--2col {
  grid-template-columns: repeat(2, 1fr);
}
.blog-grid__row + .blog-grid__row {
  margin-top: clamp(32px, 3.13vw, 60px);
}

/* ── Blog-kaart ── */
.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.blog-card__img-link {
  display: block;
}
.blog-card__img-wrap {
  height: clamp(200px, 19.01vw, 365px);
  overflow: hidden;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__img {
  transform: scale(1.03);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 26px;
}
.blog-card__category {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-dark-blue);
  display: block;
  margin-bottom: 12px;
}
.blog-card__title {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  line-height: 3em;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blog-card__excerpt {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-dark-blue);
  margin-bottom: 20px;
  flex: 1;
  /* 3-regelbegrenzing */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 300;
}
.blog-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
  align-self: stretch; /* volledig breed binnen de kaartkolom */
  text-align: center;
}
/* 2-kol kaarten: knop max 220px */
.blog-grid__row--2col .blog-card__btn {
  align-self: flex-start;
  width: 220px;
}
.blog-card__btn:hover {
  background: #9e2822;
}

/* ── Blog-paginering ── */
.blog-pagination {
  margin-top: clamp(40px, 3.65vw, 70px);
}
.blog-pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-pagination__item a,
.blog-pagination__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-dark-blue);
  border: 1px solid rgba(8, 39, 67, 0.2);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.blog-pagination__item a:hover {
  background: var(--color-dark-blue);
  color: #fff;
  border-color: var(--color-dark-blue);
}
.blog-pagination__item .current {
  background: var(--color-red);
  color: #fff;
  border-color: var(--color-red);
}
.blog-pagination__item .dots {
  border: none;
  opacity: 0.4;
}

/* ── Responsive ── */

/* =============================================================
   FAQ (Figma 618:8418 + 618:8429)
   ============================================================= */

section.faq {
  margin: var(--gap-section);
}
section.faq .container {
  padding-left: clamp(16px, 10.94vw, 210px);
  padding-right: clamp(16px, 10.94vw, 210px);
}

/* ── Header ── */
.faq__header {
  text-align: center;
  margin-bottom: clamp(32px, 3.13vw, 60px);
}
.faq__title {
  text-transform: uppercase;
  margin-bottom: 14px;
}
.faq__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-dark-blue);

  max-width: 560px;
  margin: 0 auto;
}

/* ── Filter-tabs ── */
.faq__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: clamp(32px, 3.65vw, 70px);
}
.faq__tab {
  height: 44px;
  padding: 0 clamp(18px, 1.82vw, 35px);
  font-family: var(--font-figtree);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: var(--ls-button);
  color: white;
  background: var(--color-dark-blue);
  border: 1px solid var(--color-dark-blue);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.faq__tab:hover:not(.faq__tab--active) {
  background: rgba(8, 39, 67, 0.08);
}
.faq__tab--active {
  background: var(--color-red);
  color: #fff;
  border-color: var(--color-red);
}

/* ── Accordion ── */
.faq__accordion {
  max-width: 1232px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--color-dark-blue);
}
.faq__item:first-child {
  border-top: 1px solid var(--color-dark-blue);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq__question-text {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-dark-blue);
}
.faq__arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
  transform: rotate(180deg);
}
.faq__arrow img {
  display: block;
}
.faq__item--open .faq__arrow {
  transform: rotate(0deg);
}
.faq__item--open .faq__question-text {
  color: var(--color-red);
}

.faq__answer {
  overflow: hidden;
}
.faq__answer-inner {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-dark-blue);

  padding: 0 0 24px;
  max-width: 800px;
}

/* ── Empty states ── */
.blog-grid__empty,
.faq__empty {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  color: var(--color-dark-blue);
  opacity: 0.5;
  text-align: center;
  padding: 60px 0;
}

/* ── Spacing: blog-grid → faq handled by data-section-bg="light" + light rule ── */
/* ── Spacing: faq → foto-collage: foto-collage has its own margin-top ── */

/* =============================================================
   SINGLE POST (single.php) – Figma 618:9212
   2-koloms: artikel-content links | sidebar rechts
   ============================================================= */

/* ── Sectie-wrapper ── */
section.single-post {
  margin: var(--gap-section) 0px;
}
.single-post .container {
  padding-left: clamp(16px, 10.94vw, 210px);
  padding-right: clamp(16px, 10.94vw, 210px);
}

/* ── 2-koloms grid ── */
.single-post__layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: clamp(40px, 4.69vw, 90px);
  align-items: start;
}

/* ── Meta: categorie + datum ── */
.spost__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.spost__category {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-red);
}
.spost__meta-sep {
  color: rgba(8, 39, 67, 0.3);
}
.spost__date {
  font-family: var(--font-figtree);
  font-size: 14px;
  color: var(--color-dark-blue);
  opacity: 0.65;
}

/* ── Hero-afbeelding ── */
.spost__hero-img {
  margin-bottom: 48px;
  overflow: hidden;
}
.spost__hero-img img {
  width: 100%;
  height: clamp(240px, 26.04vw, 480px);
  object-fit: cover;
  display: block;
}

/* ── Rich-text content ── */
.spost__content {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-dark-blue);
}
.spost__content h2 {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(22px, 1.82vw, 35px);
  color: var(--color-dark-blue);
  margin: 48px 0 20px;
  scroll-margin-top: 100px;
}
.spost__content h3 {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(18px, 1.3vw, 25px);
  color: var(--color-dark-blue);
  margin: 40px 0 16px;
  scroll-margin-top: 100px;
}
.spost__content h4 {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(16px, 1.04vw, 20px);
  color: var(--color-dark-blue);
  margin: 32px 0 12px;
  scroll-margin-top: 100px;
}
.spost__content h5 {
  font-family: var(--font-figtree);
  font-size: clamp(15px, 0.83vw, 16px);
  font-weight: 700;
  color: var(--color-dark-blue);
  margin: 28px 0 10px;
  scroll-margin-top: 100px;
}
.spost__content p {
  margin-bottom: 24px;
}
.spost__content ul,
.spost__content ol {
  padding-left: 24px;
  margin-bottom: 24px;
}
.spost__content li {
  margin-bottom: 8px;
  list-style: disc;
}
.spost__content ol li {
  list-style: decimal;
}
.spost__content img {
  width: 100%;
  height: auto;
  display: block;
  margin: 32px 0 12px;
  object-fit: cover;
}
.spost__content figure {
  margin: 32px 0;
}
.spost__content figcaption {
  font-size: 13px;
  color: rgba(8, 39, 67, 0.55);
  margin-top: 8px;
  font-style: italic;
}
.spost__content blockquote {
  border-left: 3px solid var(--color-red);
  margin: 36px 0;
  padding: 16px 24px;
  background: rgba(8, 39, 67, 0.03);
  font-size: clamp(16px, 0.94vw, 18px);
  font-style: italic;
  color: var(--color-dark-blue);
  line-height: 1.7;
}
.spost__content blockquote p {
  margin-bottom: 0;
}
.spost__content a {
  color: var(--color-dark-blue);
  text-decoration: underline;
}
.spost__content a:hover {
  color: var(--color-red);
}

/* Twee afbeeldingen naast elkaar (WordPress gallery) */
.spost__content .wp-block-gallery,
.spost__content .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.spost__content .wp-block-gallery img,
.spost__content .gallery img {
  width: 100%;
  height: clamp(160px, 14.06vw, 270px);
  object-fit: cover;
  margin: 0;
}

/* ── Terug-knop ── */
.spost__back {
  margin-top: 60px;
}
.spost__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  background: var(--color-dark-blue);
  color: #fff;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.spost__back-btn:hover {
  background: var(--color-blue);
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
/* Sidebar sticky als geheel */
.single-post__sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: sticky;
  top: 40px;
  align-self: start; /* voorkomt dat grid-cel strekt over volledige hoogte */

  overflow-y: auto;
}

/* ── TOC: Inhoud van de blog ── */
.spost-toc {
  background: #fff;
  padding: 28px 0 0;
}
.spost-toc__heading {
  font-size: clamp(20px, 1.56vw, 30px);
  color: var(--color-dark-blue);
  margin: 0 0 16px;
  padding: 0 28px 16px;
  border-bottom: 1px solid rgba(8, 39, 67, 0.08);

  font-family: var(--font-figtree);
  line-height: 1.2em;
}
.spost-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.spost-toc__item--h3 .spost-toc__link {
  padding-left: 42px;
  font-size: 13px;
}
.spost-toc__item--h4 .spost-toc__link {
  padding-left: 56px;
  font-size: 12px;
}
.spost-toc__link {
  display: block;
  padding: 13px 28px;
  font-family: var(--font-figtree);
  font-size: 14px;
  color: rgba(8, 39, 67, 0.55);
  text-decoration: none;
  font-weight: 400;
  line-height: 1.4;
  border: 1px solid transparent;
  margin: 0 0 2px;
  /* Smooth transitie op alle relevante properties */
  transition:
    color 0.25s ease,
    font-weight 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.spost-toc__link:hover {
  color: var(--color-dark-blue);
}
/* Actieve staat: box + vetgedrukt — zelfde stijl als Figma */
.spost-toc__link--active {
  color: var(--color-dark-blue);
  font-weight: 700;
  background: #fff;
  border-color: rgba(8, 39, 67, 0.18);
  margin: 0 8px 4px;
  padding: 12px 20px;
}

/* ── Portula CTA-blok ── */
.spost-cta {
  background: var(--color-dark-blue);
  overflow: hidden;
}
.spost-cta__img-wrap {
  overflow: hidden;
}
.spost-cta__img {
  width: 100%;
  height: clamp(160px, 13.02vw, 250px);
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.spost-cta:hover .spost-cta__img {
  transform: scale(1.03);
}
.spost-cta__body {
  padding: 28px;
}
.spost-cta__title {
  font-family: var(--font-figtree);
  line-height: 3em;
  font-size: clamp(16px, 1.04vw, 20px);
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}
.spost-cta__text {
  font-family: var(--font-figtree);
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin: 0 0 24px;
}
.spost-cta__btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.spost-cta__btn:hover {
  background: #b5231c;
}

/* ─────────────────────────────────────────
   ANDERE BLOGS
───────────────────────────────────────── */
.andere-blogs {
  margin: var(--gap-section) 0px;
}
.andere-blogs .container {
  padding-left: clamp(16px, 10.94vw, 210px);
  padding-right: clamp(16px, 10.94vw, 210px);
}
.andere-blogs__header {
  margin-bottom: 48px;
}
.andere-blogs__title {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(28px, 2.6vw, 50px);
  color: var(--color-dark-blue);
  margin: 0 0 12px;
}
.andere-blogs__subtitle {
  font-family: var(--font-figtree);
  font-size: clamp(15px, 0.94vw, 18px);
  color: var(--color-dark-blue);
  margin: 0;
}
.andere-blogs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.andere-blogs__card {
  display: flex;
  flex-direction: column;
}
.andere-blogs__card-img-link {
  display: block;
  overflow: hidden;
}
.andere-blogs__card-img-wrap {
  overflow: hidden;
}
.andere-blogs__card-img {
  width: 100%;
  height: clamp(200px, 19.01vw, 365px);
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.andere-blogs__card:hover .andere-blogs__card-img {
  transform: scale(1.03);
}
.andere-blogs__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 0 0;
}
.andere-blogs__card-cat {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  color: var(--color-red);
  display: block;
  margin-bottom: 12px;
}
.andere-blogs__card-excerpt {
  font-family: var(--font-figtree);
  font-size: clamp(15px, 0.94vw, 18px);
  color: var(--color-dark-blue);
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}
.andere-blogs__card-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: var(--color-dark-blue);
  color: #fff;
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s;
}
.andere-blogs__card-btn:hover {
  background: var(--color-blue);
}

/* Spacing */
main > .single-post + .foto-collage {
  margin-top: 0;
}
main > .foto-collage + .andere-blogs {
  margin-top: 0;
}
main > .andere-blogs + .contact {
  margin-top: 0;
}

/* ── Responsive ── */

/* =============================================================
   ACTIVITEITEN GRID (section-activiteiten-grid.php)
   Figma 618:8817 · filter-tabs · 2-koloms categorie-blokken
   ============================================================= */
section.act-grid {
  margin-top: var(--gap-section);
  margin-bottom: var(--gap-section);
}
section.act-grid .container {
  /* padding-left: clamp(16px, 10.94vw, 210px);
  padding-right: clamp(16px, 10.94vw, 210px); */
  max-width: 1920px;
  padding-left: 210px;
  padding-right: 210px;
}

/* ── Header ── */
.act-grid__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.act-grid__title {
  font-family: var(--font-midland);
  line-height: 3em;

  color: var(--color-dark-blue);
  margin: 0 0 12px;
}
.act-grid__subtitle {
  font-family: var(--font-figtree);
  font-size: clamp(15px, 0.94vw, 18px);
  color: var(--color-dark-blue);
  line-height: 1.55;
  margin: 0;
  max-width: 600px;
}

/* ── Search ── */
.act-grid__search-wrap {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 51px;
  border: 1px solid rgba(8, 39, 67, 0.15);
}
.act-grid__search-input {
  flex: 1;
  min-width: 240px;
  background: rgb(248, 248, 248);
  border: none;
  padding: 0 20px;
  font-family: var(--font-figtree);
  font-size: 15px;
  color: var(--color-dark-blue);
  outline: none;
}
.act-grid__search-input::placeholder {
  color: rgba(8, 39, 67, 0.45);
}
.act-grid__search-btn {
  width: 51px;
  background: rgb(38, 45, 101);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.act-grid__search-btn:hover {
  background: var(--color-dark-blue);
}

/* ── Filter tabs ── */
.act-grid__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 60px;
}
.act-grid__tab {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(8px, 0.47vw, 9px);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 10px 28px;
  background: transparent;
  border: 1px solid rgba(8, 39, 67, 0.35);
  color: var(--color-dark-blue);
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.act-grid__tab:hover {
  background: rgba(8, 39, 67, 0.06);
}
.act-grid__tab--active {
  background: rgb(196, 50, 42);
  border-color: rgb(196, 50, 42);
  color: #fff;
}

/* ── 2-koloms grid ── */
.act-grid__blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 37px;
}

/* ── Categorie-blok ── */
.act-grid__block {
  background: rgb(248, 248, 248);
  overflow: hidden;
}

/* Rode header + achtergrondafbeelding */
.act-grid__block-header {
  position: relative;
  background-size: cover;
  background-position: center;
}
.act-grid__block-bar {
  background: rgb(196, 50, 42);
  padding: 16px 24px;
}
.act-grid__block-name {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: clamp(14px, 1.15vw, 22px);
  letter-spacing: 0.06em;
  color: #fff;
}

/* ── Featured kaart ── */
.act-grid__featured-img-link {
  display: block;
}
.act-grid__featured-img {
  width: 100%;
  height: clamp(200px, 16.93vw, 325px);
  object-fit: cover;
  display: block;
}
.act-grid__featured-body {
  padding: 20px 24px 24px;
  background: #fff;
}
.act-grid__featured-desc {
  font-family: var(--font-figtree);
  font-size: clamp(14px, 0.78vw, 15px);
  color: var(--color-dark-blue);
  line-height: 1.6;
  margin: 0;
}

/* ── List-items ── */
.act-grid__items {
  padding: 0 24px;
  background: rgb(248, 248, 248);
}
.act-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}
.act-grid__item-img-link {
  flex-shrink: 0;
  display: block;
}
.act-grid__item-img {
  width: clamp(140px, 11.93vw, 229px);
  height: clamp(90px, 7.4vw, 142px);
  object-fit: cover;
  display: block;
}
.act-grid__item-content {
  flex: 1;
  padding-top: 4px;
}
.act-grid__item-leestijd {
  display: block;
  font-family: var(--font-figtree);
  font-size: 12px;
  color: rgba(8, 39, 67, 0.55);
  margin-bottom: 8px;
  text-transform: lowercase;
}
.act-grid__item-title {
  font-family: var(--font-figtree);
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 600;
  color: var(--color-dark-blue);
  line-height: 1.35;
  margin: 0;
}
.act-grid__item-title a {
  color: inherit;
  text-decoration: none;
}
.act-grid__item-title a:hover {
  text-decoration: underline;
}

.act-grid__divider {
  border: none;
  border-top: 2px solid rgba(8, 39, 67, 0.1);
  margin: 0;
}

/* ── Meer-knop ── */
.act-grid__meer {
  display: block;
  width: 100%;
  padding: 14px 24px 20px;
  font-family: var(--font-figtree);
  font-size: 14px;
  color: var(--color-dark-blue);
  text-decoration: none;
  background: rgb(248, 248, 248);
  border: none;
  cursor: pointer;
  text-align: left;
}
.act-grid__meer:hover {
  text-decoration: underline;
}

.act-grid__item--hidden {
  display: none;
}

/* ── Spacing ── */
main > .act-grid + .foto-collage {
  margin-top: 0;
}

/* ── Responsive ── */

/* =============================================
   SECTION – NEEM CONTACT OP
   Figma node 365:13033 · Contact pagina
============================================= */
section.contact-opnemen {
  width: 100%;
  background: #0000000d;
  padding: var(--gap-section) 0;
  max-width: 100%;
}

.contact-opnemen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 210px;
}

.contact-opnemen__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 768px;
  text-align: center;
}

.contact-opnemen__line {
  width: 479px;
  height: 2px;
  background: var(--color-red);
}

.contact-opnemen__subtitle {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
}

.contact-opnemen__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.contact-opnemen__row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.contact-opnemen__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#gform_wrapper_2,
#gform_wrapper_1 {
  width: 100%;
}

/* Gravity Forms ID 2 – witte velden */
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 input[type="tel"],
#gform_wrapper_2 input[type="number"],
#gform_wrapper_2 select,
#gform_wrapper_2 textarea {
  background: var(--color-white) !important;
}
.contact-opnemen__field--full {
  flex: none;
  width: 100%;
}

.contact-opnemen__label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  letter-spacing: 0.36px;
  color: var(--color-dark-blue);
}

.contact-opnemen__input,
.contact-opnemen__textarea {
  background: rgba(8, 39, 67, 0.05);
  border: none;
  outline: none;
  padding: 8px 12px;
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  color: var(--color-dark-blue);
  width: 100%;
}

.contact-opnemen__input {
  height: 48px;
}
.contact-opnemen__textarea {
  height: 180px;
  resize: vertical;
}

.contact-opnemen__radios {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-opnemen__radios-label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-label);
  letter-spacing: 0.36px;
  color: var(--color-dark-blue);
}

.contact-opnemen__radios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.contact-opnemen__radio {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  cursor: pointer;
}

.contact-opnemen__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--color-dark-blue);
  border-radius: 100px;
  background: rgba(8, 39, 67, 0.05);
  cursor: pointer;
  position: relative;
}

.contact-opnemen__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-dark-blue);
}

.contact-opnemen__submit {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 25px;
  background: var(--color-dark-blue);
  border: none;
  cursor: pointer;
}

.contact-opnemen__submit span {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* =============================================
   GRAVITY FORMS – HKN Contact stijl
   Overschrijft GF defaults voor .hkn-contact-form
============================================= */

/* Wrapper */
.hkn-contact-form .gform_wrapper,
.hkn-contact-form .gform_body {
  width: 100%;
}

/* GF gebruikt CSS grid (12 kolommen) — override naar 2-koloms */
.hkn-contact-form .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
}

/* Halve velden = 1 kolom, volledige velden = 2 kolommen */
.hkn-contact-form .gfield--width-half {
  grid-column: span 1;
}

.hkn-contact-form .gfield--width-full,
.hkn-contact-form .gfield:not(.gfield--width-half) {
  grid-column: span 2;
}

/* Labels */
.hkn-contact-form .gfield_label {
  font-family: var(--font-figtree) !important;
  font-size: var(--fs-body) !important;
  font-weight: 300 !important;
  line-height: var(--lh-label) !important;
  letter-spacing: 0.36px;
  color: var(--color-dark-blue) !important;
  margin-bottom: 8px;
  display: block;
}

/* Verberg "(Vereist)" tekst */
.hkn-contact-form .gfield_required,
.hkn-contact-form .gfield_required_text {
  display: none !important;
}

/* Inputs & textarea */
.hkn-contact-form input[type="text"],
.hkn-contact-form input[type="email"],
.hkn-contact-form input[type="tel"],
.hkn-contact-form textarea {
  background: rgba(8, 39, 67, 0.05) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-family: var(--font-figtree) !important;
  font-size: var(--fs-body) !important;
  font-weight: 300 !important;
  line-height: var(--lh-label) !important;
  color: var(--color-dark-blue) !important;
  width: 100% !important;
  border-radius: 0 !important;
  height: 48px !important;
}

.hkn-contact-form textarea {
  height: 180px !important;
  resize: vertical !important;
}

.hkn-contact-form input::placeholder,
.hkn-contact-form textarea::placeholder {
  color: rgba(8, 39, 67, 0.4);
}

/* Validatie */
.hkn-contact-form .gfield_error input,
.hkn-contact-form .gfield_error textarea {
  border: 1px solid var(--color-red) !important;
}

.hkn-contact-form .validation_message,
.hkn-contact-form .gfield_description.validation_message {
  font-family: var(--font-figtree);
  font-size: 14px;
  color: var(--color-red);
  margin-top: 4px;
}

/* Radio buttons – GF gebruikt .gchoice divs */
.hkn-contact-form .hkn-radio-2col .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.hkn-contact-form .hkn-radio-2col .gchoice {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hkn-contact-form .gfield_radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px !important;
  min-width: 18px;
  border: 1px solid var(--color-dark-blue) !important;
  border-radius: 100px !important;
  background: rgba(8, 39, 67, 0.05) !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  margin: 0 !important;
  flex-shrink: 0;
}

.hkn-contact-form .gfield_radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-dark-blue);
}

.hkn-contact-form .gfield_radio label {
  font-family: var(--font-figtree) !important;
  font-size: var(--fs-body) !important;
  font-weight: 300 !important;
  line-height: var(--lh-body) !important;
  color: var(--color-dark-blue) !important;
  cursor: pointer;
  margin: 0 !important;
}

/* Submit knop – GF gebruikt input[type=submit] */
.hkn-contact-form .gform-footer,
.hkn-contact-form .gform_footer {
  display: flex;
  justify-content: center;
  padding: 0 !important;
  margin-top: 8px;
  grid-column: span 2;
}

.hkn-contact-form input[type="submit"].gform_button {
  appearance: none;
  display: inline-block;
  min-width: 220px;
  padding: 15px 25px;
  background: var(--color-dark-blue) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: var(--font-midland) !important;
  font-size: var(--fs-button) !important;
  font-weight: 400 !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase;
  color: var(--color-white) !important;
  border-radius: 0 !important;
  height: auto !important;
  width: auto !important;
}

.hkn-contact-form input[type="submit"].gform_button:hover {
  background: var(--color-blue) !important;
}

#gform_2 > div.gform-footer.gform_footer.top_label {
  justify-content: flex-end;
}

#gform_2 .gfield_label {
  color: white !important;
}
.hkn-contact-form #gform_2 .gfield_label {
  color: white !important;
  font-family: var(--font-midland) !important;
  line-height: 3em !important;
  font-size: 11px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400 !important;
}

/* Bevestigingsbericht */
.hkn-contact-form .gform_confirmation_message {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  text-align: center;
  padding: 40px 0;
}

/* Responsive */

/* ==============================================
   SECTION – REGIO LEEFSTIJL (donker)
   Figma: Telemark · donkere foto-achtergrond + 3-kolom grid
============================================== */
section.regio-leefstijl {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.regio-leefstijl__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.regio-leefstijl__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(8, 39, 67, 0.82) 0%,
    rgba(8, 39, 67, 0.75) 100%
  );
}

.regio-leefstijl__inner {
  position: relative;
  z-index: 2;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(60px, 6.94vw, 120px) clamp(16px, 12.15vw, 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4.63vw, 80px);
}

/* ── Header (gecentreerd) ── */
.regio-leefstijl__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  gap: 0;
}

.regio-leefstijl__title {
  color: var(--color-white);
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0 0 24px;
}

.regio-leefstijl__divider {
  width: clamp(120px, 17.36vw, 300px);
  height: 2px;
  background: var(--color-red);
  margin-bottom: 24px;
}

.regio-leefstijl__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: #fff;
  margin: 0;
  text-align: center;
}

/* ── Drie kolommen ── */
.regio-leefstijl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4.11vw, 71px);
  width: 100%;
}

.regio-leefstijl__col {
  display: flex;
  flex-direction: column;
}

.regio-leefstijl__icon {
  width: 72px;
  height: 55px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  /* Iconen wit kleuren voor donkere achtergrond */
  filter: brightness(0) invert(1);
}

.regio-leefstijl__icon img {
  max-width: 72px;
  max-height: 55px;
  object-fit: contain;
}

.regio-leefstijl__col-heading {
  font-family: var(--font-figtree);
  font-size: clamp(16px, 1.27vw, 22px);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 16px;
  line-height: 1.4;
}

.regio-leefstijl__col-body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: #ffffff;
  margin: 0;
}

/* ── Mobiel ── */

/* ==============================================
   SECTION – REGIO KAART
   Figma 408:25268 · 1728 × 1572px
   Links: info panel · Rechts: decoratief SVG kaart
============================================== */
section.regio-kaart {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  padding: 120px 0 var(--gap-section);
  max-width: 100%;
}

.regio-kaart__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.regio-kaart__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.regio-kaart__inner {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 210px;
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 0 var(--section-px);
}

/* ── Info panel (links) ── */
.regio-kaart__info {
  flex: 0 0 514px;
  max-width: 514px;
  display: flex;
  flex-direction: column;
}

.regio-kaart__label {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-dark-blue);
  letter-spacing: 0.36px;
  margin: 0 0 8px;
}

.regio-kaart__naam {
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: 27px;
  font-weight: 400;
  color: var(--color-dark-blue);
  letter-spacing: 4.05px;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.regio-kaart__divider {
  width: 398px;
  height: 2px;
  background: var(--color-dark-blue);
  margin-bottom: 32px;
}

.regio-kaart__body {
  font-family: var(--font-figtree);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-dark-blue);
  margin-bottom: 48px;
}

.regio-kaart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark-blue);
  color: var(--color-white);
  font-family: var(--font-midland);
  line-height: 3em;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  text-decoration: none;
  min-width: 349px;
  height: 51px;
  padding: 0 25px;
  transition: background 0.2s ease;
}

.regio-kaart__btn:hover {
  background: var(--color-blue);
}

/* ── SVG kaart (rechts) ── */
.regio-kaart__map-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.regio-kaart__svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 32px rgba(8, 39, 67, 0.12));

  transform: scale(2);
  transform-origin: bottom left;
}

.regio-kaart__outline {
  fill: #dde3ea;
  stroke: none;
}

.regio-kaart__region {
  fill: #c8d0d8;
  stroke: #fff;
  stroke-width: 1;
  transition: fill 0.3s ease;
}

.regio-kaart__region--active {
  fill: var(--color-red);
}

/* ── Mobiel ── */

/* ================================================================
   RESPONSIVE BREAKPOINTS
   Media queries gegroepeerd per breakpoint, van groot naar klein.
   ================================================================ */

@media (max-width: 1500px) {
  .intro__inner {
    gap: 40px;
  }

  .intro__text {
    flex: 1 1 0;
    min-width: 0;
  }

  .intro__photos {
    flex: 0 1 auto;
    min-width: 0;
  }

  .intro__photo-tall {
    width: 230px;
    height: 440px;
    flex-shrink: 1;
  }

  .intro__photo-col {
    flex-shrink: 1;
    width: 210px;
    min-width: 0;
  }

  .intro__photo-small {
    height: 320px;
  }
}

@media (max-width: 1350px) {
  .navbar__drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100vw;
    height: 100dvh;
    background: var(--color-white);
    z-index: 200;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 0 0 40px;
  }

  .navbar__drawer.is-open {
    transform: translateX(0);
  }

  /* Scrim achter drawer */
  .navbar__drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .navbar__drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bovenste balk: sluit-knop rechts (wordmark verwijderd) */
  .navbar__drawer-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 25px;
    height: 64px;
    border-bottom: 1px solid rgba(8, 39, 67, 0.12);
  }

  /* Rode sluit-knop 49×49 — Figma: bg=#c4322a, schaduw wit glow */
  .navbar__drawer-close {
    position: relative; /* nodig voor ::before/::after positionering */
    width: 49px;
    height: 49px;
    background: var(--color-red);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
  }

  /* × als CSS, wit */
  .navbar__drawer-close::before,
  .navbar__drawer-close::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--color-white);
  }

  .navbar__drawer-close::before {
    transform: rotate(45deg);
  }

  .navbar__drawer-close::after {
    transform: rotate(-45deg);
  }

  /* Nav-links in drawer */
  .navbar__drawer-links {
    display: flex;
    flex-direction: column;
    padding: 0 25px;
    margin-top: 14px;
  }

  .navbar__drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 49px;
    border-bottom: 1px solid rgba(8, 39, 67, 0.15);
    font-family: var(--font-midland);
    line-height: 3em;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.53px;
    text-transform: uppercase;
    color: var(--color-dark-blue);
    text-decoration: none;
  }

  .navbar__drawer-item:hover {
    opacity: 0.7;
  }

  .navbar__drawer-item-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(90deg);
  }

  /* ── Sub-menu accordion ── */
  .navbar__drawer-group {
    border-bottom: 1px solid rgba(8, 39, 67, 0.15);
  }

  .navbar__drawer-item-row {
    display: flex;
    align-items: center;
  }

  .navbar__drawer-item--parent {
    flex: 1;
    border-bottom: none;
  }

  .navbar__drawer-toggle {
    width: 44px;
    height: 49px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-blue);
    flex-shrink: 0;
    padding: 0;
  }

  .navbar__drawer-toggle-icon {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
  }

  .navbar__drawer-toggle[aria-expanded="true"] .navbar__drawer-toggle-icon {
    transform: rotate(0deg);
  }

  .navbar__drawer-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 8px 16px;
  }

  .navbar__drawer-sub.is-open {
    display: block;
  }

  .navbar__drawer-subitem {
    display: block;
    padding: 12px 0;
    font-family: var(--font-midland);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.53px;
    text-transform: uppercase;
    line-height: 3em;
    color: var(--color-dark-blue);
    text-decoration: none;
  }

  .navbar__drawer-subitem:hover {
    opacity: 0.7;
  }

  /* Zoekbalk in drawer */
  .navbar__drawer-search {
    margin: 20px 25px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 51px;
    padding: 0 20px;
    background: var(--color-bg-light);
  }

  .navbar__drawer-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-figtree);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-dark-blue);
    letter-spacing: 0.32px;
    width: 100%;
  }

  .navbar__drawer-search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* CTA knop in drawer */
  .navbar__drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 25px 0;
    height: 51px;
    background: var(--color-dark-blue);
    font-family: var(--font-midland);
    line-height: 3em;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
  }

  .navbar__drawer-cta:hover {
    opacity: 0.85;
  }

  :root {
    --fs-h1: 31px;
    --lh-h1: 77px;
    --fs-h2: 23px;
    --lh-h2: 61px;
    --fs-h3: 21px;
    --lh-h3: 38px;
    --fs-h4: 28px;
    --lh-h4: 31px;
  }

  .navbar {
    height: 64px;
    overflow: visible;
  }

  .navbar__inner {
    padding: 0 40px;
    max-width: 100%;
  }

  .navbar__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .navbar__links {
    display: none;
  }

  .navbar__divider {
    display: none;
  }

  .navbar::after {
    display: none;
  }
}

@media (max-width: 1280px) {
  .contact__inner {
    flex-direction: column;
    gap: 40px;
  }

  .contact__left {
    flex: none;
    width: 100%;
  }

  .contact__divider {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .natuur__subtitle {
    column-count: 1;
  }

  section.dualpic {
    grid-template-columns: 1fr 1fr;
  }

  /* Lifestijl: flex schaalt automatisch met vw — geen override nodig op 1200px */

  /* Scandinavia: flex schaalt automatisch — geen aanpassing nodig op 1200px */

  /* Activiteiten: absolute pos schaalt met vw — geen aanpassing nodig op 1200px */

  /* Tien dingen: flex schaalt automatisch met vw — geen override nodig op 1200px */

  /* Seizoen: smaller but still abs-overlap */
  section.seizoen {
    height: clamp(400px, 52vw, 620px);
  }

  .review-card {
    width: clamp(260px, 45vw, 500px);
  }

  .contact-opnemen__inner {
    padding: 0 80px;
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 30px;
    --lh-h1: 72px;
    --fs-h2: 20px;
    --lh-h2: 52px;
    --fs-h3: 12px;
    --lh-h3: 32px;
    --fs-h4: 28px;
    --lh-h4: 36px;
  }

  /* Hero */
  section.hero {
    height: 600px;
  }

  .hero__content {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .hero__wordmark {
    width: 380px;
    height: 46px;
  }

  /* Why */
  section.why {
    margin: 80px 0;
  }

  section.why .container {
    flex-direction: column;
    gap: 40px;
    align-items: center;
    padding-left: 40px;
    padding-right: 40px;
  }

  .why__left {
    flex: none;
    width: 100%;
  }

  /* Cards */
  section.cards .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .cards__row {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 480px;
  }

  .cards__divider {
    width: 100%;
    max-width: 479px;
  }

  .card {
    width: 100%;
  }

  .card__image-wrap {
    width: 100%;
  }

  .card__btn {
    width: 100%;
  }

  /* Splits */
  section.split {
    height: auto;
    flex-direction: column !important;
    margin-top: 50px;
    margin-bottom: 50px;
  }


  .split__image {
    width: 100vw;
    max-width: 100vw;
    height: 420px;
  }

  .split__content {
    padding: 48px 40px;
  }

  section.split--text-right .split__content {
    padding: 48px 40px;
    order: -1;
  }

  /* imgtext */
  section.imgtext {
    margin: 50px 0px;
  }

  section.imgtext .container {
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
  }

  .imgtext__photo {
    width: 100%;
    height: 320px;
  }

  /* twocol */
  section.twocol .container {
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* CTA bar */
  section.cta-bar {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 40px;
  }

  .cta-bar__btn {
    width: auto;
  }

  /* Contact */
  .contact__overlay {
    padding: 60px 0;
  }

  .contact__inner {
    flex-direction: column;
    gap: 40px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .contact__left {
    flex: none;
    width: 100%;
  }

  .contact__divider {
    width: 100%;
  }

  /* Footer */
  .footer__inner {
    padding: 56px 40px 16px;
  }

  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__divider-v {
    display: none;
  }

  .footer__content {
    flex-direction: column;
    gap: 40px;
  }

  .footer__logo {
    width: 280px;
  }

  .footer__links {
    width: 100%;
  }

  /* Intro tablet */
  section.intro {
    padding: 0;
  }

  .intro__inner {
    flex-direction: column;
    padding: 0px 40px;
    gap: 40px;
  }

  .intro__text {
    flex: 1 1 auto;
    width: 100%;
  }

  .intro__photos {
    flex-direction: row;
    width: 100%;
    gap: 20px;
  }

  .intro__photo-tall {
    width: 50%;
    height: 400px;
  }

  .intro__photo-col {
    width: calc(50% - 10px);
  }

  .intro__photo-small {
    height: 320px;
  }

  /* Steps tablet */
  .steps__inner {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
  }

  .steps__photo {
    flex: none;
    width: 100%;
    height: 300px;
    order: -1;
  }

  /* Threecol tablet */
  .threecol__inner {
    padding: 60px 40px;
  }

  .threecol__grid {
    flex-direction: column;
    gap: 40px;
  }

  /* Dualpanel tablet: stack */
  .dualpanel__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
  }

  .dualpanel__photo--a,
  .dualpanel__photo--b {
    position: static;
    width: 100%;
    height: 280px;
  }

  .dualpanel__card--a,
  .dualpanel__card--b {
    position: static;
    width: 100%;
    padding: 24px;
  }

  /* Financiering: tekst-kolom verbreed, foto iets kleiner */
  .fin__content {
    width: 100%;
    max-width: 600px;
  }

  .fin__bg-img {
    width: 55%;
    opacity: 0.6;
  }

  /* Quote banner: font iets kleiner bij smalere viewport */
  .qb__heading {
    font-size: clamp(18px, 2.5vw, 28px);
    letter-spacing: 3px;
  }

  /* Portula: kaart iets kleiner */
  .portula__card-title {
    font-size: clamp(20px, 2.6vw, 36px);
  }

  .single-post__layout {
    grid-template-columns: 1fr;
  }
  .single-post__sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .andere-blogs__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  section.act-grid .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 980px) {
  :root {
    --gap-section: 50px;

    /* Headings */
    --fs-h1: 26px;
    --lh-h1: 72px;
    --ls-h1: 7.8px;
    --fs-h2: 20px;
    --lh-h2: 52px;
    --ls-h2: 2.4px;
    --ls-h2-caps: 2.8px;
    --fs-h3: 12px;
    --lh-h3: 32px;
    --ls-h3: 3px;
    --fs-h4: 24px;
    --lh-h4: 32px;
    --ls-h4: 1.2px;

    /* Body & UI */
    --fs-body: 15px;
    --lh-body: 28px;
    --fs-button: 8px;
    --fs-caption: 6px;
  }

  .act-grid__tabs {
    gap: 6px;
    margin-bottom: 32px;
  }

  .act-grid__tab {
    padding: 6px 14px;
    font-size: 7px;
  }

  .act-grid__item {
    flex-direction: column;
  }

  .act-grid__item-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 967px) {
  section.gallery > .desktop-only {
    display: none;
  }
  section.gallery > .mobile-only {
    display: contents;
  }

  section.gallery {
    height: 380px;
    flex-wrap: nowrap;
    gap: 14px;
    margin-bottom: 0;
  }

  section.gallery .gallery__tall {
    flex: 2 1 0;
    height: 380px;
    width: auto;
  }

  section.gallery .gallery__stack {
    flex: 2 1 0;
    height: 380px;
    gap: 14px;
    width: auto;
  }

  section.gallery .gallery__item {
    flex: 1;
  }
}

@media (max-width: 900px) {
  .regios-slider__slide {
    flex: 0 0 calc(50% - 15px);
  }

  .blog-grid__row--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .act-grid__blocks {
    grid-template-columns: 1fr;
  }
  .act-grid__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .act-grid__search-wrap {
    width: 100%;
  }
  .act-grid__search-input {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  /* Dualpic: foto's verbergen, tekst vol-breed */
  section.dualpic {
    grid-template-columns: 1fr;
    padding: var(--section-py) var(--section-px);
  }

  .dualpic__photos {
    display: flex;
    order: 2;
  }

  .dualpic__content {
    order: 1;
  }

  /* Tien dingen: foto verbergen, panel vol-breed */
  section.tien-dingen {
    height: auto;
    gap: 0;
  }

  .tien-dingen__image {
    display: none;
  }

  .tien-dingen__panel {
    flex: none;
    width: 100%;
    padding: var(--section-py) var(--section-px);
    overflow-y: visible;
  }

  .tien-dingen__accordion {
    overflow-y: visible;
  }

  /* Lifestijl: stack — tekst boven, foto onder */
  section.lifestijl {
    flex-direction: column;
    height: auto;
    padding-left: 0;
    gap: 0;
    align-items: stretch;
  }

  .lifestijl__content {
    flex: none;
    width: 100%;
    padding: var(--section-py) var(--section-px) var(--gap-md);
  }

  .lifestijl__image-wrap {
    flex: none;
    height: auto;
    min-height: clamp(280px, 50vw, 500px);
  }

  /* Lifestijl quote-block: behoud absolute inset=0, % posities werken automatisch */

  /* Natuur: quote-blok als apart blok (niet absolute) */
  .natuur__scene {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .natuur__landscape {
    position: relative;
    height: clamp(180px, 40vw, 320px);
  }

  .natuur__portrait {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2 * var(--section-px));
    margin: var(--gap-md) var(--section-px) 0;
    aspect-ratio: 354 / 350;
    max-height: 300px;
  }

  .natuur__quote-block {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: var(--gap-md) var(--section-px) var(--section-py-sm);
    width: auto;
  }

  /* Scandinavia: gestapeld — tekst boven, foto onder */
  .scandinavia {
    flex-direction: column;
    height: auto;
    gap: 0;
  }

  .scandinavia__content {
    margin-left: 0;
    width: 100%;
    flex: none;
    padding: var(--section-py) var(--section-px) var(--gap-md);
  }

  .scandinavia__image {
    flex: none;
    width: 100%;
    height: clamp(240px, 40vw, 400px);
  }

  /* Activiteiten: static stacked — tekst boven, twee foto's onder */
  section.activiteiten {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .activiteiten__content {
    position: static;
    width: 100%;
    padding: var(--section-py) var(--section-px) var(--gap-md);
    gap: var(--gap-sm);
  }

  .activiteiten__mosaic {
    display: none;
  }

  .activiteiten__mosaic-mobile {
    display: flex;
    gap: var(--gap-xs);
    padding: 0 var(--section-px) var(--section-py);
  }

  .activiteiten__mosaic-mobile img {
    flex: 1;
    height: clamp(160px, 25vw, 240px);
    object-fit: cover;
    border-radius: 4px;
  }

  /* Seizoen mobiel: static stacked, foto boven – tekst onder */
  section.seizoen {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .seizoen__image {
    position: static;
    width: 100%;
    height: clamp(220px, 40vw, 380px);
  }

  .seizoen__content {
    position: static;
    width: 100%;
    top: auto;
    bottom: auto;
    align-items: flex-start;
    padding: var(--gap-md) 0 var(--section-py);
    padding-left: 0;
    margin-left: 0;
    padding-right: 0;
    gap: var(--gap-sm);
  }

  .seizoen__title {
    text-align: left;
    max-width: none;
  }

  .seizoen__body {
    text-align: left;
  }

  .seizoen__divider {
    width: clamp(140px, 30vw, 260px);
  }

  .seizoen__btn {
    margin-top: 0;
  }

  /* Reviews */
  .review-card {
    width: clamp(260px, 80vw, 480px);
  }

  /* ——— Financiering ——— */
  section.fin {
    padding: 48px 24px;
  }

  .fin__bg-img {
    display: none;
  }

  .fin__content {
    width: 100%;
  }

  .fin__title {
    font-size: 26px;
    line-height: 52px;
  }

  .fin__cards {
    flex-direction: column;
    gap: 12px;
  }

  .fin__card {
    justify-content: flex-start;
    padding: 20px 16px;
  }

  /* ——— Quote Banner ——— */
  .qb__content {
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
    text-align: center;
  }

  .qb__heading {
    font-size: 22px;
    line-height: 44px;
    letter-spacing: 3px;
    padding-right: 0;
  }

  .qb__divider {
    width: clamp(80px, 30vw, 160px);
    height: 2px;
  }

  .qb__quote {
    width: 100%;
    text-align: center;
    padding-left: 0;
  }

  .qb__quote-text {
    text-align: center;
  }

  .qb__quote-name {
    text-align: center;
    height: auto;
  }

  /* ——— Portula ——— */
  .portula__lower {
    position: static;
    height: auto;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    padding: 0 24px 48px;
  }

  .portula__photo {
    position: static;
    width: 100%;
    height: clamp(200px, 55vw, 340px);
  }

  .portula__photo img {
    height: 100%;
  }

  .portula__card {
    position: static;
    width: 100%;
    min-height: 0;
    height: auto;
    flex-direction: row;
    /* logo links, tekst rechts ook op mobiel */
    align-items: flex-start;
    gap: 16px;
    padding: 28px 20px;
    margin-top: -24px;
  }

  .portula__card-logo {
    width: 64px;
  }

  .portula__card-title {
    text-align: left;
  }

  .portula__card-body {
    font-size: 16px;
  }

  section.contact-opnemen {
    padding: 60px 0;
  }
  .contact-opnemen__inner {
    padding: 0 24px;
  }
  .contact-opnemen__row {
    flex-direction: column;
  }
  .contact-opnemen__radios-grid {
    grid-template-columns: 1fr;
  }
  .contact-opnemen__line {
    width: 100%;
    max-width: 320px;
  }

  .hkn-contact-form .gform_fields {
    grid-template-columns: 1fr !important;
  }

  .hkn-contact-form .gfield--width-half,
  .hkn-contact-form .gfield--width-full,
  .hkn-contact-form .gfield,
  .hkn-contact-form .gform-footer,
  .hkn-contact-form .gform_footer {
    grid-column: span 1 !important;
  }

  .hkn-contact-form .hkn-radio-2col .gfield_radio {
    grid-template-columns: 1fr;
  }

  .regio-leefstijl__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  section.regio-kaart {
    padding: 64px 0 60px;
  }

  .regio-kaart__inner {
    flex-direction: column;
    padding: 0 24px;
    gap: 48px;
  }

  .regio-kaart__info {
    flex: unset;
    max-width: 100%;
  }

  .regio-kaart__divider {
    width: 100%;
    max-width: 398px;
  }

  .regio-kaart__btn {
    min-width: unset;
    width: 100%;
    text-align: center;
  }

  .regio-kaart__map-wrap {
    width: 100%;
  }

  .regio-kaart__svg {
    max-width: 200px;
  }
}

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

@media (max-width: 600px) {
  .blog-grid__row--3col,
  .blog-grid__row--2col {
    grid-template-columns: 1fr;
  }
  .blog-grid__row--2col .blog-card__btn {
    align-self: stretch;
    width: auto;
  }
}

@media (max-width: 480px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  section > .mobile-only {
    display: contents;
  }

  section > .desktop-only {
    display: none;
  }

  :root {
    --fs-h1: 22px;
    --lh-h1: 70px;
    --ls-h1: 6.6px;
    --fs-h2: 20px;
    --lh-h2: 52px;
    --ls-h2: 2.4px;
    --ls-h2-caps: 2.4px;
    --fs-h3: 12px;
    --lh-h3: 32px;
    --ls-h3: 3px;
    --fs-h4: 22px;
    --lh-h4: 28px;
    --ls-h4: 1.1px;
    --fs-body: 16px;
    --lh-body: 25px;
  }

  /* ── Navbar ── */
  .navbar {
    height: 64px;
    overflow: visible;
  }

  .navbar__inner {
    padding: 0 25px;
    max-width: 100%;
  }

  .navbar__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .navbar__links {
    display: none;
  }

  .navbar__divider {
    display: none;
  }

  .navbar::after {
    display: none;
  }

  .hero__headline {
    font-size: 17px;

    letter-spacing: 6.6px;
    padding: 0 25px;
    max-width: 100%;
    margin-bottom: 30px;
  }

  .hero__logo-row {
    column-gap: 16px;
    padding: 0 25px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .hero__wordmark {
    width: clamp(180px, 55vw, 280px);
    height: 34px;
    flex-shrink: 1;
    min-width: 0;
  }

  /* ── Why ── stacked, 25px padding, heading left-aligned */
  section.why {
    margin: 60px 0;
  }

  section.why .container {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    padding-left: 25px;
    padding-right: 25px;
  }

  .why__left {
    flex: none;
    width: 100%;
  }

  /* Mobile/H2 CAPS Mobile: 24px / 600 / lh=50 / ls=20 (4.8px), text-align center */
  .why__heading {
    text-align: center;
    letter-spacing: 4.8px;
  }

  .why__right {
    align-items: center;
  }

  .why__body {
    text-align: center;
    max-width: 100%;
  }

  /* ── Cards ── stacked, 25px padding
         Figma: gap=30px between cards, image h=280px, image→button gap=10px */
  section.cards {
    padding: 50px 0;
  }

  section.cards .container {
    padding-left: 25px;
    padding-right: 25px;
  }

  .cards__header {
    align-items: flex-start;
  }

  .cards__title {
    text-align: left;
  }

  .cards__divider {
    width: 100%;
  }

  .cards__subtitle {
    text-align: left;
  }

  .cards__row {
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 100%;
  }

  .card {
    width: 100%;
    gap: 10px;
  }

  .card__image-wrap {
    width: 100%;
    height: 280px;
  }

  .card__btn {
    width: 100%;
  }

  /* ── Splits ── mobiele versie via .mobile-only HTML, geen order hacks */
  .split__divider {
    width: 100%;
  }

  /* ── Gallery ── Figma Group 236: tall w=108 h=324, stack rechts h=155+159, gap=11px
         section > .mobile-only heeft display:contents, dus de kinderen zijn
         directe flex-items van .gallery — hier overschrijven we de 1024px-waarden */
  section.gallery {
    height: 324px;
    flex-wrap: nowrap;
    gap: 11px;
    margin-bottom: 0;
  }

  section.gallery .gallery__tall {
    flex: 2 1 0;
    height: 324px;
    width: auto;
  }

  section.gallery .gallery__stack {
    flex: 2 1 0;
    height: 324px;
    gap: 10px;
    width: auto;
  }

  section.gallery .gallery__item {
    flex: 1;
  }

  /* ── CTA bar ── Figma Frame 331: px=25, py=100, kolom, h=419
         H4 22/28/1.1, body 16/25, knop 220px breed */
  section.cta-bar {
    height: auto;
    min-height: 419px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: var(--gap-section) 25px;
  }

  .cta-bar__btn {
    width: 220px;
  }

  /* ── imgtext ── mobiele volgorde via HTML (tekst boven, foto onder) */
  section.imgtext {
    padding: 50px 0 0;
  }

  section.imgtext .container {
    flex-direction: column;
    padding-left: 25px;
    padding-right: 25px;
    gap: 40px;
  }

  .imgtext__photo {
    width: 100%;
    height: 324px;
  }

  .imgtext__content {
    gap: 20px;
  }

  /* ── twocol ── Figma Frame 421 + Frame 422: x=25, stacked met gap
         Beide blokken y=5287 en y=6241, verschil=954 → ≈ 470px blok + gap */
  section.twocol {
    margin: 60px 0;
  }

  section.twocol .container {
    flex-direction: column;
    gap: 60px;
    padding-left: 25px;
    padding-right: 25px;
  }

  /* ── Contact ── Figma Frame 427: py=100, px=25, stacked
         Tekst (Frame 7 y=100 h=253) → divider → formulier (Frame 69 y=403 h=430) */
  .contact__overlay {
    padding: var(--gap-section) 0;
  }

  .contact__inner {
    flex-direction: column;
    gap: 40px;
    padding-left: 25px;
    padding-right: 25px;
  }

  .contact__left {
    flex: none;
    width: 100%;
  }

  .contact__divider {
    width: 100%;
  }

  .contact__form {
    align-items: flex-start;
  }

  .contact__form-row {
    flex-direction: row;
    gap: 20px;
  }

  .contact__submit {
    align-self: center;
    width: 220px;
  }

  /* ── Footer ── Figma Frame 75: pt=56, pb=16, px=25, h=873
         Frame 284 (content y=56 h=660) + Frame 283 (bottom y=766 h=91)
         Links in 2 kolommen (Frame 405: Frame 426 + Frame 425 naast elkaar) */
  .footer__inner {
    padding: 56px 25px 16px;
    min-height: auto;
  }

  .footer__top {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }

  .footer__divider-v {
    display: none;
  }

  .footer__content {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }

  .footer__logo {
    width: auto;
    max-width: 100%;
    height: 80px; /* cap SVG natural height; desktop=48px forced landscape */
  }

  .footer__partners {
    gap: 24px;
  }

  .footer__partner-logo {
    width: 90px;
    height: 100px;
  }

  .footer__flag {
    width: 80px;
    height: auto;
  }

  .footer__heading {
    max-width: 100%;
  }

  .footer__body {
    max-width: 100%;
  }

  .footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    width: 100%;
  }

  /* Bottom: Figma Frame 282 is gecentreerd (x=15.5 in 390px breed frame) */
  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    padding-top: 24px;
  }

  .footer__bottom-left {
    flex-direction: row;
    gap: 24px;
    justify-content: center;
  }

  .footer__bottom-right {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  /* Intro mobiel */
  .intro__inner {
    padding: 60px 24px;
    flex-direction: column;
    gap: 32px;
  }

  .intro__text {
    flex: none;
    width: 100%;
  }

  .intro__photos {
    flex-direction: column;
    width: 100%;
  }

  .intro__photo-tall {
    width: 100%;
    height: 280px;
  }

  .intro__photo-tall--mobile {
    width: 100%;
    height: 280px;
    border-radius: 4px;
    overflow: hidden;
  }

  .intro__photo-tall--mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .intro__photo-col {
    width: 100%;
  }

  .intro__photo-small--mobile {
    width: 100%;
    height: 220px;
    border-radius: 4px;
    overflow: hidden;
  }

  .intro__photo-small--mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Steps mobiel */
  .steps__inner {
    padding: 40px 24px;
    flex-direction: column;
  }

  .steps__inner--mobile {
    flex-direction: column;
  }

  .steps__photo--mobile {
    width: 100%;
    height: 240px;
    flex: none;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
  }

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

  /* Threecol mobiel */
  .threecol__inner {
    padding: 48px 24px;
  }

  .threecol__grid {
    flex-direction: column;
    gap: 32px;
  }

  /* Dualpanel mobiel: verberg desktop stage */
  section.dualpanel .desktop-only {
    display: none !important;
  }

  section.dualpanel .mobile-only {
    display: block !important;
  }

  /* Dualpic mobiel */
  section.dualpic {
    padding: var(--section-py) var(--section-px);
  }

  /* Lifestijl bullets: 1 kolom op mobiel */
  .lifestijl__bullets {
    flex-direction: column;
  }

  /* Reviews: volle kaartbreedte */
  .review-card {
    width: clamp(240px, 90vw, 380px);
  }

  /* Activiteiten mobiel: 1 foto */
  .activiteiten__mosaic-mobile {
    flex-direction: column;
  }

  .activiteiten__mosaic-mobile img {
    height: clamp(200px, 50vw, 320px);
  }

  .fin__title {
    font-size: 22px;
    line-height: 44px;
  }

  .fin__cards {
    gap: 8px;
  }

  .qb__heading {
    font-size: 20px;
    line-height: 40px;
  }

  .portula__title {
    font-size: 22px;
    line-height: 44px;
  }

  .norway-map__inner {
    flex-direction: column;
    min-height: auto;
  }
  .norway-map__info {
    flex: none;
    max-width: 100%;
  }
  .norway-map__svg-wrap {
    width: 100%;
    height: auto;
    min-height: 280px;
  }
  .norway-map__svg {
    width: 100%;
    height: auto;
    max-height: 360px;
  }

  .regios-slider__slide {
    flex: 0 0 100%;
  }

  .foto-collage__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .foto-collage__col--tall:nth-child(3),
  .foto-collage__col--tall:nth-child(5) {
    display: none;
  }

  .threecol-icons__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    animation: none;
    overflow-x: auto;
    width: 100%;
  }
}