/* =============================================================================
   Regionale landingspagina's, UNIQ Estates
   -----------------------------------------------------------------------------
   Aanvulling op main.css. Geen nieuwe branding: kleuren, fonts, radii en
   schaduwen komen uit de bestaande stylesheet. Alles is gescoped onder
   .region-page zodat de rest van de website onaangeroerd blijft.

   De pagina is een direct-response landingspagina: één doel, één formulier.
   ========================================================================== */

.region-page {
  /*
    Expliciet wit. De secties zonder --cream hebben geen eigen achtergrond;
    zonder deze regel nemen ze het canvas van de browser over, en dat is zwart
    zodra het toestel in donkere modus staat en de browser zelf verdonkert.
    Zie ook color-scheme: light in de layout.
  */
  background: #fff;

  /* Tokens uit main.css */
  --copper: #bd6f47;
  --copper-dark: #a75e39;
  --copper-soft: rgba(189, 111, 71, 0.12);
  --ink: #171a27;
  --body: #727084;
  --cream: #fdfbf7;
  --sand: rgba(228, 209, 192, 0.35);
  /* Alleen voor "hij is bereikbaar" en "deze review is geverifieerd". */
  --green: #1fa463;
  --line: rgba(23, 26, 39, 0.08);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --card-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.06);
  /*
    main.css houdt het op 5px voor de meeste elementen en 10px voor de
    woningkaarten. Grotere radii lieten deze pagina's als een losse microsite
    aanvoelen, dus we volgen de website.
  */
  --radius: 8px;
  --radius-lg: 10px;

  /* Ruimte: één schaal voor de hele pagina */
  --gutter: 7%;
  /*
    De verticale maat van een sectie, boven en onder. Twee secties naast
    elkaar leveren dus het dubbele op: bij 1440 px was dat 216 px witruimte
    tussen elke sectie, en boven 1700 px zelfs 256. Dat leest als losse
    pagina's onder elkaar in plaats van één verhaal. Nu 150 px bij 1440 en
    maximaal 176.
  */
  --section-y: clamp(52px, 5.2vw, 88px);
  --gap-lg: clamp(30px, 4.5vw, 76px);
  --gap-md: clamp(22px, 2.4vw, 36px);
  --head-gap: clamp(34px, 4vw, 60px);
}

/*
  Geen overflow-x: hidden op .region-page. Dat maakt het element een
  scroll-container, en daardoor werken position: sticky en zichtbaarheids-
  berekeningen voor kinderen niet meer zoals verwacht. main.css zet die regel
  al op body, wat hier volstaat.
*/

/*
  Het hidden-attribuut moet ook echt verbergen.

  De reset van main.css zet `display: block` op onder meer elke div. Dat is een
  auteursregel, en die wint van de `[hidden] { display: none }` van de browser
  zelf. Gevolg: een element dat met `hidden` verborgen wordt, blijft gewoon
  staan. Dat kostte de contactwidget zijn sluitknop.
*/
.region-page [hidden] {
  display: none;
}

/* Ankerlinks mogen niet onder de vaste header verdwijnen. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.region-page :is(h2, h3, h4, h5, h6) {
  text-transform: none;
}

/* --------------------------------------------------- entrance-animaties */

/*
  Entrance-animaties zonder JavaScript, via scroll-driven animations. De
  animatie hangt aan de scrollpositie van het element zelf, dus ze lost altijd
  correct op: ook bij een deeplink naar een anker of bij een sprong halfweg de
  pagina staat het element gewoon volledig.

  Waarom niet met JavaScript: dan moet de content standaard verborgen zijn en
  weer zichtbaar gemaakt worden. Faalt dat, dan is de pagina leeg. Bovendien
  overschrijft React bij het hydrateren de class-attributen van de secties,
  waardoor een klasse die JavaScript zet weer verdwijnt.

  Browsers zonder ondersteuning (op dit moment vooral Firefox) krijgen geen
  animatie en tonen de pagina meteen volledig. Dat is het juiste compromis.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    .reveal--left {
      animation-name: rp-reveal-left;
    }
    .reveal--right {
      animation-name: rp-reveal-right;
    }
  }
}

@keyframes rp-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-reveal-left {
  from {
    opacity: 0;
    transform: translate3d(-26px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rp-reveal-right {
  from {
    opacity: 0;
    transform: translate3d(26px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
  Kaarten in een raster komen na elkaar binnen, door hun bereik op de
  scroll-tijdlijn te verschuiven. Niet met animation-delay: dat werkt op een
  tijdlijn die aan de scroll hangt niet, want daar is geen tijd maar afstand.

  Per kolom, niet per kaart: bij een raster van drie hoort de eerste kolom van
  rij twee gelijk te komen met die van rij een, anders loopt de trap door en
  wordt het laatste blok merkbaar traag.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Rasters van drie. */
    :is(.rp-highlights__grid, .rp-places__grid, .rp-types, .rp-services, .rp-choice__grid)
      > .reveal:nth-child(3n + 2) {
      animation-range: entry 9% cover 25%;
    }
    :is(.rp-highlights__grid, .rp-places__grid, .rp-types, .rp-services, .rp-choice__grid)
      > .reveal:nth-child(3n) {
      animation-range: entry 14% cover 30%;
    }

    /* Woningkaarten en clips: rasters van drie, maar in eigen markup. */
    .region-page .properties #properties-container > ul > li.reveal:nth-child(3n + 2),
    .rp-videos__grid > .reveal:nth-child(4n + 2) {
      animation-range: entry 9% cover 25%;
    }
    .region-page .properties #properties-container > ul > li.reveal:nth-child(3n),
    .rp-videos__grid > .reveal:nth-child(4n + 3) {
      animation-range: entry 14% cover 30%;
    }
    .rp-videos__grid > .reveal:nth-child(4n) {
      animation-range: entry 19% cover 35%;
    }

    /* De stappen onder elkaar: elke stap iets later dan de vorige. */
    .rp-steps > .reveal:nth-child(2n) {
      animation-range: entry 8% cover 24%;
    }
  }
}

/* Op smalle schermen alleen verticaal binnenkomen: een zijwaartse beweging
   levert daar niets op en kan de eerste frames doen schokken. */
@media screen and (max-width: 860px) {
  .reveal--left,
  .reveal--right {
    animation-name: rp-reveal;
  }
}

/* -------------------------------------------------------------- primitieven */

.rp-section {
  padding: var(--section-y) var(--gutter);
  position: relative;
}
.rp-section--cream {
  background: var(--cream);
}
/* Voor blokken die tussen twee secties hangen, zoals een losse CTA. */
.rp-section--flush {
  padding-top: 0;
}
/*
  Voor een pagina zonder hero erboven, zoals de ebook-bedankpagina: de header
  staat absoluut gepositioneerd over de eerste sectie, dus die heeft extra
  ruimte nodig om er niet onder te verdwijnen.
*/
.rp-section--top {
  padding-top: calc(var(--section-y) + 64px);
}
@media screen and (max-width: 860px) {
  .rp-section--top {
    padding-top: calc(var(--section-y) + 56px);
  }
}

.rp-eyebrow {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
}

.rp-title {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(29px, 1.9vw + 21px, 55px);
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 20px;
  white-space: pre-line;
  text-transform: none;
}
.rp-title--light {
  color: #fff;
}

/*
  De inleiding onder een sectiekop. Groter en donkerder dan de gewone lopende
  tekst: dit is de zin die de bezoeker wél leest als hij de rest overslaat, en
  in het grijs van --body viel hij weg tegen de kop erboven.
*/
.rp-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 60ch;
  white-space: pre-line;
  margin: 0;
}
.rp-lead a {
  color: var(--copper);
  border-bottom: 1px solid var(--copper-soft);
}
.rp-lead a:hover {
  border-bottom-color: var(--copper);
}

.rp-rich > :is(p, ul, ol, h3) {
  margin-bottom: 16px;
}
.rp-rich > :last-child {
  margin-bottom: 0;
}
.rp-rich p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
}
.rp-rich strong {
  color: var(--ink);
  font-weight: 500;
}
.rp-rich h3 {
  font-family: "Salvager", sans-serif;
  font-size: 22px;
  color: var(--ink);
  margin-top: 26px;
}
.rp-rich a {
  color: var(--copper);
  border-bottom: 1px solid var(--copper-soft);
}
.rp-rich a:hover {
  border-bottom-color: var(--copper);
}
.rp-rich ul {
  padding-left: 22px;
}
.rp-rich li {
  list-style: disc;
  color: var(--body);
  line-height: 1.8;
  margin-bottom: 6px;
}

.rp-head {
  max-width: 720px;
  margin-bottom: var(--head-gap);
}
.rp-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.rp-head--center .rp-lead {
  margin-left: auto;
  margin-right: auto;
}
/* Voor een kop met twee lead-alinea's, bv. spreker of programma zonder beeld. */
.rp-head--center .rp-lead + .rp-lead {
  margin-top: 10px;
}

.rp-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: #f4f4f4;
}
.rp-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rp-figure figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(23, 26, 39, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- klemtoon

   De zin waar een bezoeker op afhaakt of doorklikt: het makelaarsloon, wat er
   netto overblijft, het BIV-nummer. Alleen vet, geen kleurvlak en geen cursief.
   Het vet moet hier expliciet: de reset in main.css maakt van elke <mark> een
   gele, cursieve markering, en dat is precies wat hier niet mag.

   Hoogstens één klemtoon per alinea, anders valt er niets meer op.
   ======================================================================== */

.region-page mark {
  background: none;
  /* Zwart in plaats van het grijs van de lopende tekst: vet alleen is op
     lichtgrijs een klein verschil, met de donkere kleur erbij springt de zin
     er echt uit. */
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
  padding: 0;
}
/* Op een donkere sectie zou dat zwart wegvallen; daar wit. */
.rp-hero mark,
.rp-cta mark {
  color: #fff;
}

/* ----------------------------------------------------------------- knoppen */

.region-page .btn_solid,
.region-page .btn_ghost_light {
  display: inline-block;
  padding: 21px 34px;
  border-radius: 5px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  transition: 0.25s ease-in-out;
  margin-top: 0;
}
.region-page .btn_solid {
  background: var(--copper);
  border: 1px solid var(--copper);
  color: #fff;
}
.region-page .btn_solid:hover {
  background: var(--copper-dark);
  border-color: var(--copper-dark);
  box-shadow: 0 4px 26px rgba(189, 111, 71, 0.45);
}
.region-page .btn_ghost_light {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
/*
  Dezelfde vorm als de knop in de kop van de pagina, maar dan voor een lichte
  achtergrond: een rand in plaats van een vlak, zodat hij naast de koperen knop
  staat zonder ermee te concurreren.
*/
.region-page .btn_ghost_dark {
  display: inline-block;
  padding: 21px 34px;
  border: 1px solid rgba(23, 26, 39, 0.22);
  border-radius: 5px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink);
  transition: 0.25s ease-in-out;
}
.region-page .btn_ghost_dark:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.region-page .btn_ghost_light:hover {
  background: #fff;
  color: var(--copper);
  border-color: #fff;
}
.region-page .btn_asset {
  margin-top: 0;
}

.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
}
.rp-actions > a {
  margin-top: 0;
}

/* Herhaalde aanzet naar het formulier. */
/*
  De knop, of twee knoppen naast elkaar, met de geruststelling eronder. Het
  zinnetje stond eerder naast de knop: daar las het als een losse regel in de
  leegte rechts, terwijl het gaat over wat er gebeurt als je klikt.
*/
.rp-inlinecta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.rp-inlinecta__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rp-inlinecta span {
  font-size: 13px;
  color: var(--body);
}
.rp-section .rp-inlinecta {
  margin-top: clamp(34px, 4vw, 56px);
}
.rp-section--flush .rp-inlinecta {
  margin-top: 0;
}

/* --------------------------------------------------------------- 1. header */

/*
  Geen navigatie: deze pagina staat los van de website en heeft één doel.
  Wat er staat, is de snelste weg naar contact.
*/
.rp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter);
  transition: 0.28s ease;
}
.rp-header.is-stuck {
  position: fixed;
  padding: 11px var(--gutter);
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sand);
  box-shadow: 0 4px 24px rgba(23, 26, 39, 0.06);
}
.rp-header__logo {
  display: flex;
  align-items: center;
}
.rp-header__logo img {
  width: 38px;
  height: auto;
  transition: 0.28s ease;
}
.rp-header.is-stuck .rp-header__logo img {
  width: 30px;
}
.rp-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.rp-header__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  transition: 0.25s ease;
}
.rp-header__wa img {
  width: 19px;
  height: 19px;
}
.rp-header__wa:hover {
  background: rgba(255, 255, 255, 0.14);
}
.rp-header.is-stuck .rp-header__wa {
  color: var(--ink);
  border-color: var(--sand);
}
.rp-header.is-stuck .rp-header__wa:hover {
  border-color: var(--copper);
  color: var(--copper);
  background: transparent;
}
.rp-header__cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 5px;
  background: var(--copper);
  color: #fff;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.25s ease;
}
.rp-header__cta:hover {
  background: var(--copper-dark);
  box-shadow: 0 4px 26px rgba(189, 111, 71, 0.45);
}

/* Actiebalk onderaan, alleen op smalle schermen. */
.rp-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sand);
}
.rp-mobilebar__wa,
.rp-mobilebar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 6px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.rp-mobilebar__wa {
  flex: 0 0 auto;
  border: 1px solid var(--sand);
  color: var(--ink);
  background: #fff;
}
.rp-mobilebar__cta {
  flex: 1;
  background: var(--copper);
  color: #fff;
  text-align: center;
}

/* ----------------------------------------------------------------- 2. hero */

.rp-hero {
  position: relative;
  background: var(--ink);
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.rp-hero__media,
.rp-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.rp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(15, 18, 28, 0.8) 0%,
      rgba(15, 18, 28, 0.56) 34%,
      rgba(15, 18, 28, 0.12) 64%,
      rgba(15, 18, 28, 0.05) 100%
    ),
    linear-gradient(
      180deg,
      rgba(15, 18, 28, 0.52) 0%,
      rgba(15, 18, 28, 0.05) 32%,
      rgba(15, 18, 28, 0.6) 100%
    );
}
.rp-hero__inner {
  width: 100%;
  padding: 140px var(--gutter) clamp(48px, 6vh, 92px);
  max-width: 1500px;
  margin: 0 auto;
}
.rp-hero__eyebrow {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
}
.rp-hero h1 {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #fff;
  text-transform: none;
  white-space: pre-line;
  margin: 0 0 22px;
  max-width: 17ch;
}
/*
  Een hero waarvan de koptekst een hele zin is. De maat hierboven is op drie
  korte regels gebouwd; een zin zou daarin vijf regels beslaan en de knoppen
  onder de vouw duwen. Dus kleiner, en met een bredere regel zodat de tekst
  breekt waar de content het bedoelt en niet één woord per regel wordt.
*/
.rp-hero--compact h1 {
  font-size: clamp(30px, 3.3vw, 54px);
  line-height: 1.1;
  max-width: 30ch;
}

/*
  De inleiding ligt op een foto. Op 88 procent wit in een dun lettertype viel ze
  weg in de lichte plekken van het water. Voller wit en een zachte schaduw
  houden haar leesbaar, zonder dat er een donker vlak overheen hoeft.
*/
.rp-hero__intro {
  font-size: clamp(15px, 0.35vw + 14px, 18px);
  line-height: 1.75;
  color: #fff;
  text-shadow: 0 1px 12px rgba(12, 13, 20, 0.45);
  max-width: 56ch;
  margin: 0;
}
/*
  De bewijsregels stonden als losse witte tekst op de foto en waren daardoor
  onleesbaar zodra het beeld op die plek licht was. Nu staan ze in één donkere
  balk, zodat het contrast niet meer van de foto afhangt.
*/
/* Reviewlabel en bewijsbalk elk op een eigen regel, links uitgelijnd. */
.rp-hero__trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
}
/*
  Twee kolommen en een breedte die zich naar de inhoud voegt. Als flexbox met
  wrap nam het blok altijd de volle breedte van de kolom, ook als de derde regel
  al was afgebroken: rechts bleef er dan een strook donker vlak over waar niets
  in stond. Een raster is precies zo breed als zijn breedste regel.
*/
.rp-hero__proof {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  width: fit-content;
  max-width: 100%;
  /* De ruimte tussen de regels doet het werk dat de scheidingslijnen deden. */
  gap: 5px 24px;
  padding: 10px 16px;
  background: rgba(20, 22, 33, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 5px;
}
.rp-hero__proof li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}
/*
  Geen scheidingslijnen tussen de bewijsregels: het vinkje markeert al waar een
  regel begint, en bij het afbreken naar een tweede regel bleef er een streepje
  aan het eind van de eerste hangen dat nergens naar wees.

  Het vinkje staat in de CSS en niet in de tekst: het is versiering, en een
  schermlezer die drie keer "vinkje" voorleest voegt niets toe aan de zin
  erachter. Koper op het donkere vlak, zoals de andere accenten.
*/
.rp-hero__proof li::before {
  content: "\2713";
  color: var(--copper);
  font-weight: 700;
}

/*
  Het reviewlabel naast het formulier. Het staat daar op wit in plaats van op
  een foto, dus met een rand eromheen in plaats van een schaduw.
*/
/* Onder het formulier, gecentreerd zoals de geruststelling boven de knop. */
.rp-form__review {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.rp-form__review .rp-hero__review {
  border: 1px solid var(--line);
  box-shadow: none;
}

/*
  Het groene vinkje: deze score staat op een platform, niet op onze eigen site.
  Met de ouder erbij in de selector, want .rp-hero__review span zet alles
  eronder in het grijs van de lopende tekst.
*/
.rp-hero__review .rp-hero__verified {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--green);
}

/* Reviewlabel: score en aantal beoordelingen als los, leesbaar blok. */
.rp-hero__review {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(23, 26, 39, 0.18);
}
.rp-hero__stars {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.rp-hero__stars img {
  width: 14px;
  height: auto;
  display: block;
}
.rp-hero__review div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.rp-hero__review b {
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.rp-hero__review span {
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  color: var(--body);
}
.rp-hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------- 3. intro */

.rp-intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
.rp-intro__figure {
  min-height: 340px;
}
.rp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--head-gap);
  padding: clamp(26px, 2.6vw, 42px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
}
.rp-stats li {
  padding: 0 clamp(14px, 1.8vw, 30px);
  border-right: 1px solid var(--line);
}
.rp-stats li:last-child {
  border-right: 0;
}
/*
  Het pictogram boven het cijfer. Koper, dezelfde kleur als de andere accenten,
  en een halve regel lucht eronder zodat het cijfer de blikvanger blijft.
*/
.rp-stats__icon {
  display: block;
  margin-bottom: 10px;
  color: var(--copper);
}
/*
  De pijlpunten uit het prijsevolutieblok, hier stil. Daar bewegen ze omhoog;
  in een balk met vier cijfers zou dat de aandacht van de cijfers weghalen.
*/
.rp-stats__icon--chevrons {
  width: auto;
  height: 26px;
  margin-bottom: 8px;
}
.rp-stats b {
  display: block;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 0.9vw + 14px, 28px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 5px;
}
.rp-stats span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.rp-stats span a {
  color: var(--copper);
  border-bottom: 1px solid var(--copper-soft);
}
.rp-stats span a:hover {
  border-bottom-color: var(--copper);
}
/* Voor een balk met drie feiten (infodag) in plaats van de gebruikelijke vier. */
@media screen and (min-width: 1001px) {
  .rp-stats--three {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rp-stats__note {
  margin-top: 16px;
  font-size: 12px;
  font-style: italic;
  color: var(--body);
  opacity: 0.65;
  max-width: 70ch;
}

/* ----------------------------------------------------------- 4. highlights */

.rp-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.rp-highlight {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-soft);
  overflow: hidden;
}
.rp-highlight__media {
  position: relative;
  height: 200px;
  background: #f4f4f4;
  overflow: hidden;
}
.rp-highlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rp-highlight:hover .rp-highlight__media img {
  transform: scale(1.045);
}
.rp-highlight__body {
  padding: clamp(24px, 1.8vw, 34px);
}
.rp-highlight h3 {
  font-family: "Salvager", sans-serif;
  font-size: clamp(19px, 0.45vw + 16px, 23px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}
.rp-highlight p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}

/* -------------------------------------------------------------- 5. plaatsen */

.rp-group + .rp-group {
  margin-top: clamp(56px, 6.5vw, 104px);
}
.rp-group__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-lg);
  align-items: start;
  padding-bottom: 26px;
  margin-bottom: clamp(30px, 3.4vw, 46px);
  border-bottom: 1px solid var(--sand);
}
.rp-group__name {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(27px, 2.1vw + 16px, 56px);
  line-height: 1;
  color: var(--ink);
  text-transform: none;
  margin: 0;
}
.rp-group__kicker {
  margin-top: 10px;
  margin-bottom: 0;
}
.rp-group__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--body);
  margin: 0;
}
.rp-climate {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.rp-climate li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--sand);
  border-radius: 100px;
  background: #fff;
}
.rp-climate b {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--copper);
}
.rp-climate span {
  font-size: 12px;
  color: var(--body);
}

.rp-places__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}
.rp-place {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow-soft);
}
.rp-place__media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #f4f4f4;
}
.rp-place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rp-place:hover .rp-place__media img {
  transform: scale(1.05);
}
/* Plaats zonder eigen fotografie: bewust typografische kaart, geen leeg vlak. */
.rp-place__media--type {
  height: auto;
  min-height: 104px;
  display: flex;
  align-items: flex-end;
  padding: 18px 22px;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
}
.rp-place__marker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--copper);
}
.rp-place__marker img {
  width: 11px;
  height: auto;
}
.rp-place__body {
  padding: clamp(20px, 1.6vw, 28px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rp-place h4 {
  font-family: "Salvager", sans-serif;
  font-size: clamp(19px, 0.45vw + 16px, 25px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 5px;
  text-transform: none;
}
.rp-place__usp {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.rp-place p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}
.rp-place__link {
  margin-top: auto;
  padding-top: 16px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.86px;
  text-transform: uppercase;
  color: var(--copper);
}
.rp-place__link:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------- 6. lifestyle */

.rp-life__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
}
.rp-life__block + .rp-life__block {
  margin-top: clamp(44px, 5vw, 86px);
}
.rp-life__block--image-left .rp-life__figure {
  order: -1;
}
.rp-life__figure {
  aspect-ratio: 4 / 5;
  max-height: 580px;
}
.rp-life__block h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 0.9vw + 18px, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.rp-life__block p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
  max-width: 54ch;
  margin: 0;
}
.rp-life__block--full {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: clamp(30px, 3.4vw, 50px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-soft);
}
.rp-life__block--full p {
  margin-left: auto;
  margin-right: auto;
}

/*
  Compacter en met een rechte, horizontale kop. De vorige versie had een
  gedraaid label en veel witruimte; dat las als een los designelement in plaats
  van als een blok uit deze website.
*/
/*
  Twee kolommen: de toeschrijving links, de tip rechts. Met de tekst links en
  niets rechts bleef er op een breed scherm een leeg vlak van honderden pixels
  in de band staan.
*/
.rp-tip {
  display: grid;
  grid-template-columns: minmax(150px, 0.2fr) 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  margin-top: clamp(38px, 4vw, 64px);
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.4vw, 38px);
  border-radius: 5px;
  background: var(--copper);
  color: #fff;
}
.rp-tip__label {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}
.rp-tip blockquote {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 0.7vw + 15px, 26px);
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 72ch;
}
.rp-tip cite {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------- 7. vastgoed */

.rp-property__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
.rp-property__figure {
  min-height: 340px;
}
.rp-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  margin-top: var(--head-gap);
}
.rp-type {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 1.8vw, 34px);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  transition: 0.25s ease;
}
.rp-type:hover {
  border-color: var(--copper);
  box-shadow: var(--card-shadow-soft);
}
.rp-type h3 {
  font-family: "Salvager", sans-serif;
  font-size: clamp(18px, 0.4vw + 16px, 22px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.rp-type p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}
.rp-type a {
  margin-top: auto;
  padding-top: 16px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.86px;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---------------------------------------------------------------- 8. aanbod */

/* De property cards zelf komen uit main.css (.properties #properties-container). */
.region-page .properties #properties-container {
  padding: 0;
}
.region-page .properties #properties-container > ul {
  margin: 0 -1.5%;
}

/*
  Labels op de kaarten. main.css zet geen position op de li, dus dat doen we
  hier; het label hangt in de hoek van de foto en niet over de prijs.
*/
.region-page .properties #properties-container > ul > li {
  position: relative;
}
.rp-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  padding: 6px 11px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(23, 26, 39, 0.16);
  pointer-events: none;
}
.rp-badge--popular {
  background: var(--copper);
  color: #fff;
}

/*
  De kaarten op een projectpagina leiden naar het formulier op deze pagina en
  niet naar uniqestates.be. Dat mag je zien: dit is de regel die zegt waar de
  klik naartoe gaat. Het pijltje schuift op hover mee, zoals bij de andere
  verwijzingen op de pagina.
*/
.rp-property-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 26, 39, 0.1);
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--copper);
}
.rp-property-cta span {
  transition: transform 0.2s ease;
}

/* ------------------------------------------------------- fotogalerij op de kaart

   De knop ligt over het beeld van de kaart, de kaartlink eronder. Zo gaat een
   klik op de foto naar de foto's en een klik op de rest van de kaart naar het
   formulier. De maat volgt .img-property uit main.css (250px hoog).
   ======================================================================== */

.rp-gallery__trigger {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
  background: none;
  border: 0;
  cursor: zoom-in;
}
.rp-gallery__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(23, 26, 39, 0.16);
  transition: background 0.2s ease, color 0.2s ease;
}
.rp-gallery__trigger:hover .rp-gallery__count {
  background: var(--copper);
  color: #fff;
}

/* De galerij zelf: het beeld vult het scherm, de bediening ligt eromheen. */
.rp-gallery {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 26px);
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 13, 20, 0.93);
}
.rp-gallery__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
.rp-gallery__stage img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.rp-gallery__stage figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}
.rp-gallery__stage figcaption span {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.rp-gallery__nav,
.rp-gallery__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rp-gallery__nav:hover,
.rp-gallery__close:hover {
  background: var(--copper);
}
.rp-gallery__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  font-size: 26px;
}

@media (max-width: 720px) {
  /* Op een telefoon is er geen plek voor knoppen naast het beeld: ze schuiven
     onderaan, waar de duim zit. */
  .rp-gallery {
    flex-wrap: wrap;
    align-content: center;
  }
  .rp-gallery__stage {
    order: -1;
    flex-basis: 100%;
  }
  .rp-gallery__stage img {
    max-height: 62vh;
  }
}
.region-page .properties #properties-container > ul > li:hover .rp-property-cta span {
  transform: translateX(4px);
}

/* ------------------------------------------------------- 9. waarom UNIQ */

.rp-why__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
.rp-why__figure {
  min-height: 420px;
  /* Voorkomt dat het beeld een extreme, sterk gecropte strook wordt. */
  max-height: 700px;
}
/*
  Vanaf de bovenkant croppen in plaats van vanuit het midden. De hoogte van dit
  beeld volgt de tekst ernaast, en bij een lagere kolom sneed een crop uit het
  midden de hoofden af.
*/
.rp-why__figure img {
  object-position: 50% 0%;
}
/* De clip die de foto vervangt heeft een vaste verhouding en rekt dus niet mee
   met de tekst ernaast. Bovenaan uitlijnen in plaats van uitrekken. */
.rp-why__video {
  align-self: start;
}
.rp-usps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  margin-top: clamp(30px, 3.4vw, 46px);
}
/*
  Geen streep boven de kop. De website gebruikt Salvager voor koppen en geen
  accentlijnen in tekstblokken; die lijnen lieten dit blok als een template
  aanvoelen.
*/
.rp-usp h3 {
  font-family: "Salvager", sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 6px;
}
.rp-usp p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}
.rp-usp__link {
  display: inline-block;
  margin-top: 8px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  color: var(--copper);
  border-bottom: 1px solid var(--copper-soft);
}
.rp-usp__link:hover {
  border-bottom-color: var(--copper);
}
.rp-quote {
  margin-top: var(--head-gap);
  padding: clamp(26px, 2.6vw, 44px);
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--sand);
  box-shadow: none;
  position: relative;
}
.rp-quote::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: url("../img/web/quote.svg") center / cover no-repeat;
  transform: rotate(180deg);
  opacity: 0.14;
}
.rp-quote blockquote {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 0.9vw + 15px, 28px);
  line-height: 1.35;
  color: var(--ink);
  position: relative;
  z-index: 1;
  margin: 0;
}
.rp-quote cite {
  display: block;
  margin-top: 14px;
  font-family: "RocGrotesk", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--copper);
}

/* ------------------------------------------------------------------ 10. cta */

.rp-cta {
  position: relative;
  /* De band mag ruimer ademen dan een gewone sectie, maar volgt wel dezelfde
     verkleining. */
  padding: clamp(64px, 7vw, 120px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.rp-cta__media,
.rp-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.rp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 18, 28, 0.74) 0%,
    rgba(15, 18, 28, 0.62) 50%,
    rgba(15, 18, 28, 0.76) 100%
  );
}
.rp-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}
.rp-cta .rp-eyebrow {
  color: rgba(255, 255, 255, 0.88);
}
.rp-cta p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.93);
  margin: 0;
}
.rp-cta .rp-actions {
  justify-content: center;
}

/* ----------------------------------------------------------------- vragen

   Uitklapbare vragen, gebouwd op <details>. Het plusje is een pseudo-element en
   geen icoon: twee streepjes waarvan er één wegdraait bij het openklappen.
   ======================================================================== */

.rp-faq {
  max-width: 820px;
  margin: var(--head-gap) auto 0;
}
.rp-faq__item {
  border-bottom: 1px solid var(--line);
}
.rp-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 0.5vw + 15px, 21px);
  line-height: 1.35;
  color: var(--ink);
  list-style: none;
}
/* Safari zet er anders een eigen driehoekje voor. */
.rp-faq__item summary::-webkit-details-marker {
  display: none;
}
.rp-faq__item summary:hover {
  color: var(--copper);
}
.rp-faq__mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
.rp-faq__mark::before,
.rp-faq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--copper);
  transition: transform 0.25s ease;
}
.rp-faq__mark::after {
  transform: rotate(90deg);
}
.rp-faq__item[open] .rp-faq__mark::after {
  transform: rotate(0deg);
}
.rp-faq__item p {
  margin: 0;
  padding: 0 44px 24px 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}

/* ------------------------------------------------------------ 11. formulier */

.rp-form {
  padding: var(--section-y) var(--gutter);
  background: var(--cream);
  scroll-margin-top: 90px;
}
.rp-form__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}
.rp-form__pitch .rp-eyebrow {
  color: var(--copper);
}
.rp-form__pitch .rp-title {
  color: var(--ink);
}
.rp-form__benefits {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
.rp-form__benefits li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
/*
  Hetzelfde koperen vinkje voor de drie opsommingen die een belofte doen: de
  redenen naast het formulier, wat wij regelen, en waarom je gerust mag twijfelen.
  Eén regel in plaats van drie keer dezelfde data-URI.
*/
.rp-form__benefits li::before,
.rp-service::before,
.rp-explain__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 37'%3E%3Cpath d='M49.17.83a2.83 2.83 0 0 0-3.53 0L15.75 30.72 4.26 19.23a2.83 2.83 0 0 0-3.53 3.53l13.26 13.25a2.83 2.83 0 0 0 3.53 0L49.17 4.36a2.83 2.83 0 0 0 0-3.53z' fill='%23fff'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.rp-form__phone {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 15px;
  color: var(--body);
}
.rp-form__phone a {
  font-family: "Salvager", sans-serif;
  font-size: 21px;
  color: var(--ink);
}
.rp-form__phone a:hover {
  color: var(--copper);
}
.rp-form__phone .rp-form__wa {
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--copper);
  padding: 8px 14px;
  border: 1px solid var(--sand);
  border-radius: 5px;
}
.rp-form__phone .rp-form__wa:hover {
  border-color: var(--copper);
  color: var(--copper);
}

/* Bewijsblok naast het formulier: de award van Huizenjagers Buitenland. */
.rp-award {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 30px;
  padding: 18px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(23, 26, 39, 0.07);
}
.rp-award__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
}
.rp-award h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 6px;
}
.rp-award p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}
.rp-award a {
  display: inline-block;
  margin-top: 10px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid var(--copper-soft);
}
.rp-award a:hover {
  border-bottom-color: var(--copper);
}

.rp-form__box {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(26px, 2.6vw, 44px);
  box-shadow: 0 18px 44px rgba(23, 26, 39, 0.09);
}
:is(.rp-form__box, .rp-wizard, .rp-callback) label {
  display: block;
  margin-bottom: 16px;
}
:is(.rp-form__box, .rp-wizard, .rp-callback) label > span {
  display: block;
  margin-bottom: 6px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
/*
  De naam van het veld staat in het veld zelf, als placeholder. Het label blijft
  wel in de HTML staan, alleen onzichtbaar: een schermlezer en de autofill van
  de browser hebben het nodig, en zodra iemand begint te typen is een
  placeholder weg. Zo leest het formulier als vier invulvakken in plaats van
  acht regels tekst, zonder dat iemand erop achteruitgaat.
*/
.rp-form__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Iets lichter dan de ingevulde tekst, zodat het verschil zichtbaar blijft. */
:is(.rp-form__box, .rp-wizard, .rp-callback) ::placeholder {
  color: rgba(114, 112, 132, 0.75);
  opacity: 1;
}
/*
  Een keuzelijst kent geen placeholder: de eerste optie ís de veldnaam. Zolang
  die geselecteerd staat, krijgt de lijst dezelfde grijstint als de lege
  invulvelden ernaast; kiest de bezoeker iets, dan wordt het gewone tekst.
*/
:is(.rp-form__box, .rp-wizard, .rp-callback) select:has(option[value=""]:checked) {
  color: rgba(114, 112, 132, 0.75);
}
:is(.rp-form__box, .rp-wizard, .rp-callback) input[type="text"],
:is(.rp-form__box, .rp-wizard, .rp-callback) input[type="email"],
:is(.rp-form__box, .rp-wizard, .rp-callback) input[type="tel"],
:is(.rp-form__box, .rp-wizard, .rp-callback) select,
:is(.rp-form__box, .rp-wizard, .rp-callback) textarea {
  width: 100%;
  /*
    main.css laat formuliervelden op content-box staan. Met width: 100% liep de
    padding en de rand daardoor buiten de kolom: de velden Voornaam en Naam
    raakten elkaar en het hele formulier stond scheef in de witte kaart.
  */
  box-sizing: border-box;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf8;
  /* 16px voorkomt dat iOS bij focus inzoomt. */
  font: 16px/1.5 "RocGrotesk", sans-serif;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
:is(.rp-form__box, .rp-wizard, .rp-callback) select {
  background-image: url("../img/svg/arrow-copper.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  padding-right: 38px;
}
:is(.rp-form__box, .rp-wizard, .rp-callback) textarea {
  resize: vertical;
  min-height: 84px;
}
:is(.rp-form__box, .rp-wizard, .rp-callback) :is(input, select, textarea):focus {
  outline: 2px solid rgba(189, 111, 71, 0.35);
  outline-offset: 1px;
  border-color: var(--copper);
  background: #fff;
}
.rp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
/* Sessiekeuze op de infodag-pagina: dezelfde velduitstraling, maar als
   selecteerbare rijen in plaats van een los label + input. */
.rp-form__sessions {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.rp-form__sessions legend {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
/*
  Specifieker dan ".rp-form__box label" (klasse + tag), anders wint die regel
  z'n eigen "display: block" en staat de radio-knop los boven de tekst in
  plaats van ernaast.
*/
.rp-form__box .rp-form__session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf8;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rp-form__box .rp-form__session:has(input:checked) {
  border-color: var(--copper);
  background: var(--copper-soft);
}
.rp-form__box .rp-form__session input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--copper);
}
.rp-form__box .rp-form__session > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.rp-form__session b {
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.rp-form__session em {
  font-style: normal;
  font-size: 12px;
  color: var(--body);
}
.rp-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 20px;
}
.rp-form__consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--copper);
}
/*
  De kleine lettertjes bij een vinkje: nodig, maar het is niet wat de bezoeker
  moet lezen. Kleiner en lichter dan de labels erboven, zodat de velden en de
  knop het beeld houden.
*/
/*
  Het formaat moet specifieker staan dan het algemene label hierboven
  (:is(.rp-form__box, …) label > span), anders wint dat met zijn 13px.
*/
.rp-form__consent span,
:is(.rp-form__box, .rp-wizard, .rp-callback) .rp-form__consent > span {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(114, 112, 132, 0.8);
  margin: 0;
  font-weight: 300;
}
/* De link naar het privacybeleid, zichtbaar maar even klein als de rest. */
.rp-form__consent a {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rp-form__submit {
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  padding: 20px;
}
.rp-form__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(114, 112, 132, 0.85);
}
.rp-form__safe svg {
  flex: none;
  color: var(--copper);
}
.rp-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.rp-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rp-form__error {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fdeaea;
  color: #a32626;
  font-size: 14px;
}
.rp-form__done {
  text-align: center;
  padding: clamp(14px, 2vw, 30px) 0;
}
.rp-form__done h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 1vw + 17px, 30px);
  color: var(--ink);
  margin: 0 0 12px;
}
.rp-form__done p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
  margin: 0 auto 22px;
  max-width: 46ch;
}

/* ------------------------------------------------------------ 12. voetregel */

.rp-footnote {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(22px, 3vw, 56px);
  padding: 30px var(--gutter) 36px;
  background: var(--cream);
  border-top: 1px solid var(--sand);
}
/* Drie blokken: de kolommen voor de linklijstjes mogen smaller. */
.rp-footnote--three {
  grid-template-columns: 0.75fr 0.85fr 1.6fr;
}
.rp-footnote__label {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 8px;
}
.rp-footnote ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.rp-footnote li {
  font-size: 12px;
  line-height: 1.6;
  color: var(--body);
  opacity: 0.8;
}
.rp-footnote a {
  color: var(--body);
  border-bottom: 1px solid rgba(114, 112, 132, 0.3);
}
.rp-footnote a:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

/* --------------------------------------------------------- draft banner */

.rp-notice {
  position: relative;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  padding: 11px var(--gutter);
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.rp-notice a {
  color: #e2a982;
  text-decoration: underline;
}

/* ================================================================ responsive */

@media screen and (max-width: 1200px) {
  .region-page {
    --gutter: 5.5%;
  }
  .rp-highlights__grid,
  .rp-places__grid,
  .rp-types {
    grid-template-columns: repeat(2, 1fr);
  }
  .region-page .properties #properties-container > ul > li {
    width: 46%;
  }
}

@media screen and (max-width: 1000px) {
  .rp-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }
  .rp-stats li:nth-child(2n) {
    border-right: 0;
  }
  .rp-group__head {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rp-form__inner {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .rp-footnote,
  .rp-footnote--three {
    grid-template-columns: 1fr;
  }
  /*
    Hieronder wordt de tekstkolom met de USP's zo hoog dat het beeld ernaast een
    smalle strook wordt. Dus hier al naar één kolom, met het beeld erboven.
  */
  .rp-why__grid {
    grid-template-columns: 1fr;
  }
  /*
    Over de volle breedte werd dit een strook van ruim 2:1, en de teamfoto is
    staand (1016 × 1299). Daar bleef een reep van over: twee hoofden,
    afgesneden op borsthoogte. De foto staat daarom gecentreerd op een beperkte
    breedte, met een verhouding die dicht genoeg bij de foto zelf ligt om de
    mensen erop heel te laten.

    Die breedte houdt het beeld bovendien binnen zijn eigen resolutie, dus het
    wordt ook niet meer opgeblazen.
  */
  .rp-why__figure {
    order: -1;
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: none;
    height: auto;
    /* De breedte moet expliciet blijven: `margin-inline: auto` alleen maakt van
       een grid-item een krimpend blok, en het beeld erin staat absoluut, dus
       dan blijft er niets van over. */
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  /* De clip houdt haar eigen verhouding, maar staat wel boven de tekst. */
  .rp-why__video {
    order: -1;
  }
}

@media screen and (max-width: 860px) {
  .region-page {
    --gutter: 22px;
    /* Bovengrens gelijk aan wat de desktopmaat op 860px geeft, anders springt
       de afstand omlaag zodra een tablet net iets breder is. */
    --section-y: clamp(44px, 9vw, 52px);
    /* Ruimte voor de vaste actiebalk onderaan. */
    padding-bottom: 74px;
  }
  html {
    scroll-padding-top: 72px;
  }
  .rp-mobilebar {
    display: flex;
  }
  .rp-header__cta,
  .rp-header__waNumber {
    display: none;
  }
  .rp-header__wa {
    padding: 9px 11px;
  }

  .rp-hero {
    min-height: 0;
  }
  .rp-hero__inner {
    padding: 106px var(--gutter) 40px;
  }
  .rp-hero h1 {
    max-width: 100%;
  }
  .rp-hero__trust {
    margin-top: 24px;
    align-self: stretch;
  }
  /* Op een telefoon past er maar één regel naast elkaar. */
  .rp-hero__proof {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 13px 16px;
  }
  .rp-hero__proof li {
    font-size: 12.5px;
  }

  .rp-intro__grid,
  .rp-life__block,
  .rp-property__grid,
  .rp-why__grid {
    grid-template-columns: 1fr;
  }
  /* Op mobiel staat het beeld altijd boven de tekst. */
  .rp-intro__figure,
  .rp-life__figure,
  .rp-property__figure,
  .rp-why__figure {
    order: -1;
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: 340px;
  }
  /* De teamfoto is staand; in een liggend vlak van 4:3 blijven er twee
     afgesneden hoofden van over. */
  .rp-why__figure {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
  .rp-usps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .rp-tip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rp-award {
    grid-template-columns: 96px 1fr;
    gap: 16px;
  }
  .region-page .properties #properties-container > ul {
    margin: 0;
  }
  .region-page .properties #properties-container > ul > li {
    width: 100%;
    margin: 0 0 20px 0;
  }
  .rp-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .rp-actions > a {
    width: 100%;
    text-align: center;
    padding: 18px 22px;
  }
  .rp-inlinecta {
    flex-direction: column;
  }
  .rp-inlinecta > a {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 560px) {
  .rp-highlights__grid,
  .rp-places__grid,
  .rp-types {
    grid-template-columns: 1fr;
  }
  .rp-stats {
    grid-template-columns: 1fr;
    padding: 22px 24px;
  }
  .rp-stats li {
    border-right: 0;
    padding: 0;
  }
  .rp-stats li + li {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .rp-form__row {
    grid-template-columns: 1fr;
  }
  .rp-hero__caption {
    display: none;
  }
  .rp-highlight__media {
    height: 190px;
  }
  /* Naast een smalle tekstkolom wordt de foto te klein; dus erboven. */
  .rp-award {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rp-award__media {
    aspect-ratio: 16 / 10;
  }
}

/* ====================================================== bezichtigingstrip

   Beeld links, aanbod rechts. Dezelfde opbouw als de andere beeld-en-tekst
   secties, dus het beeld volgt de hoogte van de tekst ernaast.
   ======================================================================== */

.rp-trip__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
.rp-trip__figure {
  min-height: 360px;
  max-height: 620px;
}
.rp-trip__points {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 34px);
}
.rp-trip__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.rp-trip__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 37'%3E%3Cpath d='M49.17.83a2.83 2.83 0 0 0-3.53 0L15.75 30.72 4.26 19.23a2.83 2.83 0 0 0-3.53 3.53l13.26 13.25a2.83 2.83 0 0 0 3.53 0L49.17 4.36a2.83 2.83 0 0 0 0-3.53z' fill='%23fff'/%3E%3C/svg%3E") center / 9px no-repeat;
}
/*
  Twee klassen, net als bij .rp-explain__cta: .region-page .btn_solid zet
  margin-top op 0 en wint anders op specificiteit. Zonder dit plakt de knop
  tegen het laatste opsommingsteken.
*/
.region-page .rp-trip__cta {
  display: inline-block;
  margin-top: clamp(30px, 3.2vw, 42px);
}
.rp-trip__terms {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--body);
}

/*
  Het korte formulier halverwege de pagina.

  De kolomverdeling staat in een media query: zonder die grens won deze regel
  van de mobiele regel op .rp-form__inner, en dan bleef het formulier op een
  telefoon in twee kolommen van 150 pixels staan.
*/
@media screen and (min-width: 1001px) {
  .rp-form--compact .rp-form__inner {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }
}
.rp-form--compact .rp-form__box {
  padding: clamp(22px, 2.2vw, 32px);
}
.rp-form--compact .rp-form__pitch .rp-title {
  font-size: clamp(26px, 1.5vw + 19px, 40px);
}

/*
  Een eigen tint voor het korte formulier.

  De secties wisselen af tussen wit (#fff) en crème (#fdfbf7). Dit blok stond
  tussen twee crème secties in, en dan lopen ze in elkaar over tot één band van
  vijftienhonderd pixels. Deze tint zit een stap dieper dan crème, in dezelfde
  zandfamilie als de randen en de accenten, zodat de overgang zichtbaar is
  zonder dat het blok uit de pagina springt.
*/
.rp-form--compact {
  background: #f4efe5;
}

@media screen and (max-width: 1000px) {
  .rp-trip__grid {
    grid-template-columns: 1fr;
  }
  .rp-trip__figure {
    order: -1;
    min-height: 0;
    max-height: none;
    height: clamp(240px, 36vw, 380px);
  }
}

/* ============================================================ Box 3-pagina
   Alleen de twee secties die daar extra bij komen. De rest van de pagina
   gebruikt dezelfde klassen als de regiopagina's.
   ======================================================================== */

.b3-rates {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-lg);
  align-items: start;
}
.b3-rates__list {
  display: grid;
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
}
.b3-rate {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 6px clamp(18px, 2.2vw, 34px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px);
  background: #fff;
}
.b3-rate b {
  grid-row: span 2;
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 2.4vw, 46px);
  line-height: 1;
  color: var(--copper);
}
.b3-rate h3 {
  font-family: "RocGrotesk", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.b3-rate p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}

/* Bronvermelding bij fiscale cijfers. Bewust rustig, maar altijd zichtbaar. */
.b3-source {
  max-width: 76ch;
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--body);
}
.b3-source--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.b3-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  margin-top: var(--head-gap);
}
.b3-col {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 44px);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}
.b3-col--accent {
  background: var(--ink);
  border-color: var(--ink);
}
.b3-col__label {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.b3-col h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 1.3vw + 18px, 36px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.b3-col__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}
.b3-col--accent h3 {
  color: #fff;
}
.b3-col--accent .b3-col__body {
  color: rgba(255, 255, 255, 0.82);
}

.b3-col__lines {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  border-top: 1px solid var(--line);
}
.b3-col__lines > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.b3-col__lines dt {
  font-size: 14px;
  color: var(--body);
}
.b3-col__lines dd {
  margin: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.b3-col--accent .b3-col__lines,
.b3-col--accent .b3-col__lines > div {
  border-color: rgba(255, 255, 255, 0.16);
}
.b3-col--accent .b3-col__lines dt {
  color: rgba(255, 255, 255, 0.72);
}
.b3-col--accent .b3-col__lines dd {
  color: #fff;
}
.b3-col__note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
}
.b3-col--accent .b3-col__note {
  color: rgba(255, 255, 255, 0.65);
}

.b3-compare__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 3.4vw, 46px);
}

.b3-disclaimer {
  padding: 34px var(--gutter) 44px;
  background: var(--cream);
}
/*
  Dezelfde tekst, maar onderin de footer. De footer zorgt zelf voor de marge
  links en rechts, en de scheidingslijn is die van de sub-footer eronder, zodat
  de drie blokken onderaan dezelfde ritmiek houden.
*/
.b3-disclaimer--footer {
  padding: 40px 0 0;
  margin-top: 60px;
  border-top: 2px solid rgba(228, 209, 192, 0.15);
  background: none;
}
.b3-disclaimer__inner {
  /* Uitgelijnd op de gutter van de pagina, net als de andere voetteksten. */
  max-width: 92ch;
}
.b3-disclaimer h2 {
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 10px;
}
.b3-disclaimer p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}

@media screen and (max-width: 1000px) {
  .b3-rates {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 860px) {
  .b3-compare {
    grid-template-columns: 1fr;
  }
  .b3-rate {
    grid-template-columns: 1fr;
  }
  .b3-rate b {
    grid-row: auto;
  }
}

/* ======================================================== site chrome tweaks
   De footer van uniqestates.be heeft op deze pagina geen newsletter-blok, dus
   wel wat lucht boven. De WhatsApp-bubbel wijkt voor de mobiele actiebalk.
   ======================================================================== */

#footer {
  padding-top: 60px;
}

/* ================================================== WhatsApp-knop rechtsonder

   main.css zet #whatsapp op een vast blokje van 50 bij 50 met alleen een
   icoon. Hier wordt het een pil met een label erbij, zodat zichtbaar is wat
   er gebeurt als je klikt. Het kaartje dat opengaat is #whatsapp-box, dat
   main.css al opmaakt.
   ======================================================================== */

.region-page ~ #whatsapp,
#whatsapp {
  width: auto;
  height: auto;
}
.rp-wa__launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 13px;
  border: 0;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 26, 39, 0.16);
  cursor: pointer;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--ink);
  transition: 0.25s ease;
}
.rp-wa__launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(23, 26, 39, 0.22);
}
.rp-wa__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: url("../img/svg/whatsapp.svg") center / contain no-repeat;
}
.rp-wa__label {
  white-space: nowrap;
}
/* Open: alleen het icoon, zodat het kaartje erboven de aandacht heeft. */
.rp-wa__launch.is-open .rp-wa__label {
  display: none;
}
.rp-wa__launch.is-open {
  padding: 11px;
}

/*
  Het kaartje zelf komt uit main.css. Twee dingen zetten we recht: het hangt
  daar op een vaste hoogte die niet klopt met een pil, en het moet niet
  aanklikbaar zijn zolang het dicht is.
*/
#whatsapp #whatsapp-box {
  bottom: 96px;
  pointer-events: none;
}
#whatsapp #whatsapp-box.box-active {
  pointer-events: auto;
}

@media screen and (max-width: 860px) {
  #whatsapp {
    display: none;
  }
  #footer {
    padding: 44px 22px 54px 22px;
  }
}

/* ====================================================== overzichtspagina op /
   Alleen het keuzeblok komt hier extra bij. De hero, de CTA-band, "waarom
   UNIQ", het formulier en de voetregel gebruiken dezelfde klassen als de
   regiopagina's, zodat het één huisstijl blijft.

   Twee kolommen in plaats van drie: de foto is hier het argument, en op een
   derde van de breedte is een kustlijn niet meer te lezen.
   ======================================================================== */

.rp-choice__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
}

.rp-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-soft);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.rp-choice:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}
@media (prefers-reduced-motion: reduce) {
  .rp-choice,
  .rp-choice__media img {
    transition: none;
  }
  .rp-choice:hover {
    transform: none;
  }
}
.rp-choice__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  /* Zand in plaats van kaal grijs: zichtbaar zolang het beeld nog laadt. */
  background: var(--sand);
  overflow: hidden;
}
.rp-choice__media img {
  transition: transform 0.7s ease;
}
.rp-choice:hover .rp-choice__media img {
  transform: scale(1.045);
}
.rp-choice__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(26px, 2vw, 38px);
}
.rp-choice__body .rp-eyebrow {
  margin-bottom: 8px;
}
.rp-choice h3 {
  font-family: "Salvager", sans-serif;
  font-size: clamp(23px, 0.6vw + 19px, 30px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}
.rp-choice h3 a {
  color: inherit;
}
.rp-choice h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rp-choice:hover h3 a {
  color: var(--copper);
}
.rp-choice p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
  max-width: 52ch;
}

/* De feiten zijn het vergelijkpunt tussen de kaarten, dus staan ze in dezelfde
   volgorde: zon, prijs, bereikbaarheid. */
.rp-choice__facts {
  /* auto duwt de feiten naar de onderkant van de kaart. De kaarten in een rij
     zijn even hoog, dus staan de feiten en de knoppen op één lijn, ook als de
     ene omschrijving een regel langer is dan de andere. */
  margin: auto 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 22px;
}
.rp-choice__facts li {
  position: relative;
  padding-left: 16px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.rp-choice__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
}
/* --------------------------------------------------------- de vierde kaart */

/*
  Even groot als de andere drie en op dezelfde plek in het raster, maar zonder
  beeld en in het donker. Wie na drie kusten nog twijfelt, moet hier niet nog
  een bestemming zien maar een uitweg.
*/
.rp-advice {
  background: var(--ink);
  color: #fff;
  justify-content: center;
  padding: clamp(30px, 3vw, 52px) clamp(26px, 3vw, 48px);
}
/*
  Deze kaart draagt ook .rp-choice, en die selectors zijn met een elementnaam
  erbij specifieker dan een losse klasse. Vandaar overal .rp-advice ervoor:
  zonder dat wint .rp-choice h3 en staat de titel in donkergrijs op donker.
*/
.rp-advice .rp-advice__title {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 0.8vw + 19px, 34px);
  line-height: 1.14;
  color: #fff;
  margin: 0 0 18px;
}

/*
  De woordgrap. Geen nieuw lettertype: Salvager is al het speelse gezicht van de
  huisstijl. Het effect komt van de schaal, de lichte koperkleur en een graad
  scheefstand, alsof het erbij geroepen wordt.
*/
.rp-advice .rp-advice__shout {
  /* Eigen regel: de grap moet landen, niet meelopen in de zin. */
  display: block;
  margin-top: 6px;
  font-size: 1.75em;
  line-height: 1.02;
  letter-spacing: 0.5px;
  color: #e2a982;
}
.rp-advice .rp-advice__body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 46ch;
}
.rp-advice .rp-advice__points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 26px 0 0;
}
.rp-advice .rp-advice__points li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
/* Een vinkje uit twee randen: geen extra bestand voor drie streepjes. */
.rp-advice .rp-advice__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--copper);
  border-bottom: 1.5px solid var(--copper);
  transform: rotate(-45deg);
}
.rp-advice .rp-advice__cta {
  align-self: flex-start;
  margin-top: 30px;
  padding: 18px 30px;
}

/* Twee kolommen, dus per twee binnenkomen in plaats van per drie. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rp-choice__grid > .reveal:nth-child(2n) {
      animation-range: entry 10% cover 26%;
    }
  }
}

@media screen and (max-width: 860px) {
  .rp-choice__grid {
    grid-template-columns: 1fr;
  }
  .rp-advice {
    padding: 34px 26px 38px;
  }
  .rp-advice .rp-advice__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* Onder deze breedte passen drie feiten niet meer naast elkaar. */
@media screen and (max-width: 620px) {
  .rp-choice__facts {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================ videokaarten

   Gebruikt op / en op de regiopagina's. Een clip staat op de pagina als een
   kaart: stilstaand beeld met een afspeelknop, en pas na de klik de speler
   zelf. Zie VideoCard.tsx voor waarom dat zo is.
   ======================================================================== */

.rp-videos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}

.rp-video {
  display: flex;
  flex-direction: column;
}
.rp-video__frame {
  position: relative;
  /*
    De clips zijn staand opgenomen, op 4:5. In een 16:9-kader zou een crop het
    hoofd en de ingebrande ondertitels eraf snijden, dus volgt het kader het
    bronmateriaal.
  */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  /* Zand in plaats van kaal grijs, net als bij de keuzekaarten. */
  background: var(--sand);
  box-shadow: var(--card-shadow-soft);
}
.rp-video__player,
.rp-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Zwart eromheen als de verhouding van de speler net afwijkt. */
video.rp-video__player {
  display: block;
  background: #000;
  object-fit: contain;
}
.rp-video__poster {
  display: block;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.rp-video__poster img {
  transition: transform 0.7s ease;
}
.rp-video__poster:hover img {
  transform: scale(1.045);
}
/*
  Een sluier over het beeld. Zonder die sluier verdwijnt het witte driehoekje
  in een lichte lucht of een wit gevel, en dat is precies het soort beeld dat
  bij deze clips hoort.
*/
.rp-video__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 18, 28, 0.08) 0%, rgba(15, 18, 28, 0.4) 100%);
}
.rp-video__poster:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.rp-video__play {
  position: absolute;
  /* Boven de sluier: die is een ::after en staat dus achteraan in de kaart. */
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 4vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 10px 26px rgba(15, 18, 28, 0.35);
  transition: transform 0.3s ease, background 0.3s ease;
}
/* Het driehoekje uit drie randen van een leeg element: geen extra bestand voor
   een vorm van vijftien pixels. Iets naar rechts, want optisch midden ligt
   niet op het rekenkundige midden. */
.rp-video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.rp-video__poster:hover .rp-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--copper-dark);
}
@media (prefers-reduced-motion: reduce) {
  .rp-video__poster img,
  .rp-video__play {
    transition: none;
  }
  .rp-video__poster:hover img {
    transform: none;
  }
  .rp-video__poster:hover .rp-video__play {
    transform: translate(-50%, -50%);
  }
}

.rp-video__duration {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: rgba(15, 18, 28, 0.72);
  border-radius: 3px;
}

/*
  Nog niet opgenomen. De kaart houdt haar plek in het raster, maar krijgt geen
  afspeelknop: een knop die niets doet is erger dan geen knop. Het label leest
  als "hier komt iets", niet als een fout.
*/
.rp-video__poster--soon {
  display: grid;
  place-items: center;
  background: var(--sand);
}
.rp-video__poster--soon::after {
  /* Licht in plaats van donker: hier moet niets van het beeld af, er moet een
     label op. */
  background: rgba(253, 251, 247, 0.4);
}
.rp-video__soon {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3px;
  box-shadow: var(--card-shadow-soft);
}

.rp-video__body {
  padding: 18px 2px 0;
}
.rp-video h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 0.4vw + 15px, 21px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}
.rp-video p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  margin: 0;
  max-width: 46ch;
}

/* ================================================ wat wij concreet regelen

   Acht onderdelen, zonder beeld en zonder kaartrand. De waarde zit in de
   lengte van de lijst: de bezoeker moet in één blik zien hoe ver de
   begeleiding gaat, niet acht kaarten los lezen.
   ======================================================================== */

.rp-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(26px, 2.8vw, 42px) var(--gap-md);
}
.rp-service {
  position: relative;
  padding-left: 30px;
}
.rp-service::before {
  /* Het vinkje zelf staat bij de opsomming naast het formulier. */
  top: 4px;
}
.rp-service h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}
.rp-service p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}

/* ================================================================== uitleg

   De sectie die één vraag beantwoordt: tekst links, de clip rechts. Verticaal gecentreerd, want de kolommen zijn
   hier ongeveer even hoog en een clip die bovenaan hangt naast een half zo
   hoge tekstkolom staat scheef.
   ======================================================================== */

.rp-explain__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-lg);
  align-items: center;
}
.rp-explain__points {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 34px);
}
.rp-explain__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
/*
  Specifieker dan ".region-page .btn_solid" (twee klassen), anders wint die
  regel z'n eigen "margin-top: 0" en "display: inline-block" gewoon terug.
*/
.region-page .rp-explain__cta {
  display: inline-block;
  margin-top: clamp(40px, 5vw, 56px);
}

/* ================================================================ het traject

   Tien stappen in één kolom, want de volgorde is het hele punt: in twee
   kolommen moet de lezer raden of stap 6 rechts van 1 staat of onder 5. De kop
   blijft ernaast staan tijdens het scrollen, anders raakt de lijst halverwege
   los van waar ze over gaat.
   ======================================================================== */

.rp-journey {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap-lg);
  align-items: start;
}
.rp-journey__head {
  position: sticky;
  /* Onder de vaste header, met dezelfde lucht als scroll-padding-top. */
  top: 104px;
  max-width: 36ch;
}
.rp-steps {
  list-style: none;
}
.rp-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 22px;
  padding-bottom: 26px;
}
/* De lijn tussen de stappen loopt van onder het nummer naar de volgende stap,
   en houdt bij de laatste op: daar is niets meer om naartoe te lopen. */
.rp-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--sand);
}
.rp-step:last-child {
  padding-bottom: 0;
}
.rp-step:last-child::before {
  display: none;
}
.rp-step__number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.rp-step__body h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 5px;
  /* Op één lijn met het cijfer ernaast. */
  padding-top: 5px;
}
.rp-step__body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--body);
  margin: 0;
  max-width: 58ch;
}

/* Vier kolommen, dus per vier binnenkomen in plaats van per drie. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.rp-videos__grid, .rp-services) > .reveal:nth-child(4n + 2) {
      animation-range: entry 7% cover 23%;
    }
    :is(.rp-videos__grid, .rp-services) > .reveal:nth-child(4n + 3) {
      animation-range: entry 11% cover 27%;
    }
    :is(.rp-videos__grid, .rp-services) > .reveal:nth-child(4n) {
      animation-range: entry 15% cover 31%;
    }
  }
}

@media screen and (max-width: 1200px) {
  .rp-videos__grid,
  .rp-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1000px) {
  .rp-journey {
    grid-template-columns: 1fr;
  }
  /* Boven de lijst kan de kop niet meescrollen, dus laat hem gewoon staan. */
  .rp-journey__head {
    position: static;
    max-width: 100%;
    margin-bottom: var(--head-gap);
  }
}

@media screen and (max-width: 860px) {
  .rp-explain__grid {
    grid-template-columns: 1fr;
  }
  /* Op mobiel staat het beeld altijd boven de tekst, net als bij de foto's. */
  .rp-explain__video {
    order: -1;
  }
  .region-page .rp-explain__cta {
    display: block;
    width: 100%;
    padding: 14px 24px;
    text-align: center;
  }
}

@media screen and (max-width: 620px) {
  .rp-videos__grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 560px) {
  .rp-services {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------- programma (infodag) */

.rp-sessions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
  margin-top: clamp(32px, 4vw, 48px);
}
.rp-session-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-soft);
  padding: clamp(24px, 2.2vw, 36px);
}
.rp-session-card header {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.rp-session-card h3 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 0.5vw + 17px, 25px);
  color: var(--ink);
  margin: 0 0 6px;
}
.rp-session-card .rp-eyebrow {
  margin: 0;
}
.rp-session-card ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rp-session-card li {
  padding-left: 20px;
  position: relative;
}
.rp-session-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
}
.rp-session-card li b {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.rp-session-card li p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}

/* ========================================================== projectpagina
   Eén sectie: het rekenvoorbeeld. De rest van de projectpagina gebruikt de
   klassen van de regiopagina's, de overzichtspagina en de Box 3-pagina.

   De som staat links en de uitkomst rechts. Die uitkomst is het antwoord op
   de vraag waarmee de bezoeker op zo'n pagina komt, dus hij mag niet aan het
   einde van een lange tabel staan te wachten tot er gescrold wordt.
   ======================================================================== */

.rp-yield {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--gap-md);
  align-items: start;
  margin-top: var(--head-gap);
}

.rp-yield__table {
  padding: clamp(24px, 2.6vw, 40px);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}
.rp-yield__case {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.rp-yield__table dl {
  margin: 0;
}
.rp-yield__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px clamp(18px, 2.2vw, 34px);
  align-items: baseline;
  padding: clamp(13px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--line);
}
.rp-yield__row:first-child {
  border-top: 0;
  padding-top: 0;
}
.rp-yield__row dt {
  font-family: "RocGrotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
/* De toelichting hoort bij de regel, niet bij de volgende.
   main.css centreert `small`; hier hoort die onder het label uit te lijnen. */
.rp-yield__row dt small {
  display: block;
  text-align: left;
  margin-top: 3px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}
.rp-yield__row dd {
  margin: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

/* Een tussentotaal sluit een blok af, dus een zwaardere lijn en meer nadruk. */
.rp-yield__row--total {
  border-top: 1px solid rgba(23, 26, 39, 0.24);
}
.rp-yield__row--total dd {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.1;
  color: var(--copper);
}

.rp-yield__outcome {
  padding: clamp(26px, 2.8vw, 40px);
  background: var(--ink);
  border-radius: var(--radius);
  color: #fff;
}
.rp-yield__outcome > b {
  display: block;
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: clamp(42px, 4vw, 66px);
  line-height: 1;
  color: #fff;
}
.rp-yield__outcome-label {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.rp-yield__summary {
  list-style: none;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  padding: clamp(22px, 2.4vw, 32px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 16px;
}
.rp-yield__summary li {
  display: grid;
  gap: 2px;
}
.rp-yield__summary b {
  font-family: "RocGrotesk", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--copper);
}
.rp-yield__summary span {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width: 1000px) {
  .rp-yield {
    grid-template-columns: 1fr;
  }
  /* Naast elkaar leest de uitkomst als sluitstuk, onder elkaar als antwoord. */
  .rp-yield__outcome {
    order: -1;
  }
  .rp-yield__summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 560px) {
  .rp-yield__summary {
    grid-template-columns: 1fr;
  }
  .rp-yield__row {
    grid-template-columns: 1fr;
  }
  .rp-yield__row dd {
    justify-self: start;
  }
}

/* ------------------------------------------- hero met formulier ernaast */

.rp-hero--split {
  /* Tekst en formulier hebben elk hun eigen hoogte; centreren houdt ze
     samen in het midden in plaats van allebei tegen de onderrand. */
  align-items: center;
}
.rp-hero--split .rp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: clamp(30px, 3.5vw, 64px);
  align-items: center;
  /* Ruim onder de vaste header, en gelijke lucht onderaan. */
  padding-top: clamp(124px, 13vh, 156px);
  padding-bottom: clamp(44px, 5vh, 76px);
}
/* De koptekst deelt de breedte nu met een formulier, dus een maat kleiner.
   24ch en niet 21: de langste regel van deze kop paste met zeven pixels
   speling, en dan breekt een regel al bij een iets ander lettertype. */
.rp-hero--split.rp-hero--compact h1 {
  font-size: clamp(30px, 2.9vw, 46px);
  max-width: 24ch;
}
.rp-hero--split .rp-hero__intro {
  max-width: 46ch;
}
.rp-hero__aside {
  width: 100%;
}

/* De formulierkaart in de hero: compacter dan die onderaan de pagina, en met
   een zwaardere schaduw omdat ze op een foto ligt in plaats van op crème. */
.rp-form__box--card {
  padding: clamp(22px, 1.9vw, 30px);
  box-shadow: 0 24px 60px rgba(10, 12, 20, 0.3);
}
.rp-form__cardhead {
  margin-bottom: 20px;
}
.rp-form__cardhead h2 {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 1.1vw + 14px, 28px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.rp-form__cardhead p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
}
.rp-form__box--card label {
  margin-bottom: 12px;
}
.rp-form__box--card :is(input[type="text"], input[type="email"], input[type="tel"]) {
  padding: 12px 14px;
}
.rp-form__box--card .rp-form__consent {
  margin: 4px 0 16px;
}
.rp-form__box--card .rp-form__submit {
  padding: 17px;
}

@media screen and (max-width: 1000px) {
  .rp-hero--split .rp-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  /* Onder elkaar mag de koptekst weer de volle maat hebben. */
  .rp-hero--split.rp-hero--compact h1 {
    max-width: 30ch;
  }
  .rp-hero__aside {
    max-width: 460px;
  }
}

/* Laatste rij woningkaarten centreren.
   Het raster uit main.css is een flexbox met vaste kaartbreedtes. Bij zes
   kaarten vult elke rij zich precies en verandert dit niets; bij acht blijft
   er anders een halve rij links hangen met een gat ernaast. */
.region-page .properties #properties-container ul {
  justify-content: center;
}

/* --------------------------------------------------------- aansluiting footer

   main.css zet 60px onder de pagina en nog eens 100px marge plus 100px
   binnenruimte boven de adressen. Op uniqestates.be staat daar het
   nieuwsbriefblok tussen; in deze footer zit dat niet, dus bleef er een leeg
   vlak van bijna 300px over tussen de voetnoot en de eerste kolom. Hier blijft
   er een kleine 60px van over: genoeg lucht om de footer te laten beginnen,
   niet genoeg om als een gat te lezen.
   ======================================================================== */

.region-page #footer {
  padding-top: 0;
}
/* Twee id's, want main.css schrijft #footer #footer-txt. */
.region-page #footer #footer-txt {
  margin-top: 0;
  padding-top: 24px;
}

/* ----------------------------------------------------- zwevende contactknop

   Waar de WhatsApp-bubbel hing. Zelfde plek en zelfde maat, zodat de knop van
   Serge erboven blijft staan waar hij stond.
   ======================================================================== */

.rp-floating-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--copper);
  color: #fff;
  box-shadow: 0 6px 20px rgba(23, 26, 39, 0.22);
  transition: 0.25s ease;
}
.rp-floating-contact:hover {
  background: var(--copper-dark);
  transform: translateY(-2px);
}

/*
  Het groene bolletje op de foto van Serge: hij is bereikbaar. Een witte rand
  eromheen, zodat het los van de foto staat en niet als een vlekje leest.
*/
.rp-advisor__online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--green);
  border: 2px solid #fff;
}

/* ------------------------------------------------- contactwidget rechtsonder

   Zelfde plek en dezelfde vorm als de WhatsApp-bubbel van uniqestates.be: een
   knop rechtsonder die een wit kaartje boven zichzelf openklapt. Deze staat
   erboven, zodat de twee elkaar niet raken.
   ======================================================================== */

.rp-advisor {
  position: fixed;
  right: 30px;
  /* Boven de WhatsApp-bubbel, die op 30px zit en 50px hoog is. */
  bottom: 96px;
  z-index: 11;
}

.rp-advisor__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 26, 39, 0.22);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.rp-advisor__toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(23, 26, 39, 0.28);
}
.rp-advisor__toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
.rp-advisor__label {
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.rp-advisor__avatar {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sand);
}
.rp-advisor__avatar--big {
  width: 72px;
  height: 72px;
}

/* Het kaartje. Zelfde maten en schaduw als #whatsapp-box in main.css. */
.rp-advisor__card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(320px, calc(100vw - 60px));
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.18);
}
.rp-advisor__card:focus {
  outline: none;
}
/* Het puntje naar de knop toe, zoals bij de WhatsApp-bubbel. */
.rp-advisor__card::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -8px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
}

.rp-advisor__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--body);
  cursor: pointer;
}
.rp-advisor__close:hover {
  color: var(--ink);
}

.rp-advisor__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rp-advisor__head h3 {
  margin: 0;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.rp-advisor__role {
  display: block;
  margin-top: 3px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--copper);
}

/* De award. Een regel met een koperen vinkje ervoor, zoals de beloftes bij
   het formulier, want het is hetzelfde soort bewijs. */
.rp-advisor__proof {
  position: relative;
  margin: 18px 0 0;
  padding-left: 26px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}
.rp-advisor__proof::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 37'%3E%3Cpath d='M49.17.83a2.83 2.83 0 0 0-3.53 0L15.75 30.72 4.26 19.23a2.83 2.83 0 0 0-3.53 3.53l13.26 13.25a2.83 2.83 0 0 0 3.53 0L49.17 4.36a2.83 2.83 0 0 0 0-3.53z' fill='%23fff'/%3E%3C/svg%3E") center / 8px no-repeat;
}

.rp-advisor__body {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
}

.rp-advisor__actions {
  margin-top: 20px;
}
.rp-advisor__actions .btn_solid {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 15px;
  font-size: 12px;
}
/* Bellen is een knop en geen kale telefoonlink: hij leest als actie naast de
   knop erboven, en een klik erop is te meten. Zie CallButton.tsx. */
/* De scope moet mee: `.region-page .btn_asset` zet de marge van main.css op
   nul en is specifieker dan een losse klasse. Zonder die scope raken de twee
   knoppen elkaar. */
.region-page .rp-advisor__call {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  text-align: center;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Onder deze breedte verdwijnt de WhatsApp-bubbel voor de mobiele actiebalk.
   Deze widget hoort daar om dezelfde reden weg te blijven. */
@media screen and (max-width: 860px) {
  .rp-advisor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-advisor__toggle {
    transition: none;
  }
  .rp-advisor__toggle:hover {
    transform: none;
  }
}

/* -------------------------------------------- rendementsberekening in de widget

   Drie stappen in het kaartje van de contactwidget. Het kaartje wordt breder
   zodra de berekening open staat, want een som van zes regels past niet in de
   breedte van een contactkaart.
   ======================================================================== */

/* Het puntje naar de knop hoort bij een kaartje dat in één keer past. Zodra
   het kaartje scrolt, scrollt dat puntje mee en staat het midden in de som. */
.rp-advisor__card--wide::after {
  display: none;
}
.rp-advisor__card--wide {
  width: min(400px, calc(100vw - 60px));
  /*
    De uitkomst is langer dan het scherm hoog is op een laptop, dus de kaart
    scrollt vanbinnen. De hoogte houdt rekening met wat eronder en erboven
    staat: 96px tot de onderkant van het scherm, de knop met Serge erin, en de
    balk bovenaan de pagina. Op 78vh schoof de bovenkant van de kaart onder die
    balk, en dan was Serge zelf niet meer te zien.
  */
  max-height: min(680px, calc(100vh - 264px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/*
  Serge blijft staan terwijl de rest van de kaart scrollt: hij is de reden dat
  de bezoeker het kaartje opent, en zonder hem is het een formulier zonder
  afzender. De negatieve marge vangt de binnenruimte van de kaart op, zodat hij
  echt tegen de bovenrand plakt.
*/
.rp-advisor__card--wide .rp-advisor__head {
  position: sticky;
  top: -24px;
  z-index: 2;
  padding: 24px 0 12px;
  margin: -24px 0 0;
  background: #fff;
}
/* Het kruisje hoort bij de bovenrand en niet bij de tekst die eronder wegrolt. */
.rp-advisor__card--wide .rp-advisor__close {
  position: sticky;
  float: right;
  top: 0;
  z-index: 3;
  margin: -8px -14px 0 0;
}

.rp-wizard {
  margin-top: 18px;
}
.rp-wizard h3 {
  margin: 0 0 6px;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
}
.rp-wizard > p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}

@media screen and (max-width: 760px) {
  .rp-sessions__grid {
    grid-template-columns: 1fr;
  }
}

/* Klein bedrijfslogo bij een sprekersectie (bv. OYOO bij de externe gastspreker). */
.rp-speaker__logo {
  display: inline-block;
  margin-bottom: 18px;
}
.rp-speaker__logo a {
  display: block;
  transition: opacity 0.2s ease;
}
.rp-speaker__logo a:hover {
  opacity: 0.85;
}
.rp-speaker__logo img {
  display: block;
  border-radius: 12px;
  box-shadow: var(--card-shadow-soft);
}

/* De drie stappen als streepjes: genoeg om te zien waar je bent, en het kost
   geen regel tekst in een kaartje dat toch al vol staat. */
.rp-wizard__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.rp-wizard__steps li {
  padding-top: 7px;
  border-top: 2px solid var(--sand);
  font-family: "RocGrotesk", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--body);
}
.rp-wizard__steps li.is-current,
.rp-wizard__steps li.is-done {
  border-top-color: var(--copper);
}
.rp-wizard__steps li.is-current {
  color: var(--copper);
}

/* De weg terug. Een knop met een pijl op een vaste plek boven de stappenbalk,
   niet een tekstlinkje tussen de regels: die was wel aanwezig maar niet te
   vinden. */
.rp-wizard__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: #fff;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rp-wizard__back span {
  font-size: 14px;
  line-height: 1;
  color: var(--copper);
}
.rp-wizard__back:hover {
  border-color: var(--copper);
  background: var(--cream);
  color: var(--copper);
}
.rp-wizard__back:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.rp-wizard__next {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  padding: 15px;
}
.rp-wizard__next:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* De gekozen woning, als bevestiging onder de keuzelijst. */
.rp-wizard__pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 14px;
  background: var(--cream);
  border-radius: 6px;
}
.rp-wizard__pick dt {
  font-family: "RocGrotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--body);
}
.rp-wizard__pick dd {
  margin: 2px 0 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.rp-wizard__woning {
  display: block;
  margin-bottom: 14px;
  font-family: "RocGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--copper);
}

/* De som. Dezelfde opbouw als de tabel in het rekenvoorbeeld op de pagina,
   maar smaller, dus zonder de toelichting per regel. */
.rp-wizard__sum {
  margin: 0;
  border: 1px solid var(--sand);
  border-radius: 6px;
  padding: 4px 14px;
}
.rp-wizard__sum > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.rp-wizard__sum > div:first-child {
  border-top: 0;
}
.rp-wizard__sum dt {
  font-family: "RocGrotesk", sans-serif;
  font-size: 13px;
  color: var(--body);
}
.rp-wizard__sum dd {
  margin: 0;
  font-family: "RocGrotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.rp-wizard__sum > div.is-total {
  border-top-color: rgba(23, 26, 39, 0.24);
}
.rp-wizard__sum > div.is-total dt {
  color: var(--ink);
  font-weight: 500;
}
.rp-wizard__sum > div.is-total dd {
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: 19px;
  color: var(--copper);
}

.rp-wizard__outcome {
  margin-top: 16px;
  padding: 20px;
  background: var(--ink);
  border-radius: 6px;
  color: #fff;
}
.rp-wizard__outcome > b {
  display: block;
  font-family: "Salvager", sans-serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
}
.rp-wizard__outcome > span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}
.rp-wizard__outcome ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 12px;
}
.rp-wizard__outcome li b {
  display: block;
  font-family: "RocGrotesk", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--copper);
}
.rp-wizard__outcome li span {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.rp-wizard__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--body);
}

.rp-wizard__done {
  margin-top: 16px;
  padding: 16px;
  background: var(--cream);
  border-radius: 6px;
}
.rp-wizard__done h4 {
  margin: 0 0 6px;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
}
.rp-wizard__done p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--body);
}

.region-page .rp-wizard .rp-advisor__call {
  margin-top: 16px;
}

.rp-wizard__disclaimer {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------------------ prijsevolutie

   Nagebouwd naar de sectie op uniqestates.be/investeren-in-spanje: links de
   plaatsen als een lijst die naar achteren wegvalt, rechts twee witte kaartjes
   met de pijl ertussen, de stijging in het midden en de drie pijlpunten die
   omhoog bewegen. Maten, kleuren en de textuur zijn die van de bronpagina.
   ======================================================================== */

.rp-prices {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 50px;
  padding: clamp(32px, 6vw, 100px);
  border-radius: 15px;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.1);
  background: url("../img/svg/linear-bg.svg") center center / 50% auto repeat;
}

/*
  De linkerkolom: de kop van de sectie en daaronder de plaatsnaam. Stond de kop
  eerder boven het hele blok, dan bleef hier een leeg vlak over en hing de titel
  los van het kaartje waar ze over gaat.
*/
.rp-prices__left {
  width: 70%;
}
/* De plaatsnaam staat erboven, dus de lucht hoort nu aan de bovenkant. */
.rp-prices__head {
  margin-top: clamp(18px, 2vw, 30px);
}
.rp-prices__head .rp-title {
  margin: 0;
}
.rp-prices__head .rp-lead {
  margin-top: 14px;
}
.rp-prices__cities {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rp-prices__cities button {
  position: relative;
  display: inline-block;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  /* 70px op de bronpagina; hier meeschalend, anders past de langste naam niet. */
  font-size: clamp(30px, 4.4vw, 70px);
  line-height: initial;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.3s ease, padding 0.3s ease;
}
/*
  De lijst valt naar achteren weg, zoals op de bronpagina. Daar loopt dat af
  tot 0.05, en dan is een plaatsnaam niet meer te lezen terwijl het wel de
  navigatie van deze sectie is. Dezelfde trap, met een leesbare bodem.
*/
.rp-prices__cities li:nth-child(1) button { opacity: 0.3; }
.rp-prices__cities li:nth-child(2) button { opacity: 0.26; }
.rp-prices__cities li:nth-child(3) button { opacity: 0.22; }
.rp-prices__cities li:nth-child(4) button { opacity: 0.19; }
.rp-prices__cities li:nth-child(5) button { opacity: 0.16; }
.rp-prices__cities li:nth-child(n + 6) button { opacity: 0.14; }
.rp-prices__cities button:hover {
  opacity: 0.55;
}
.rp-prices__cities button.is-active,
.rp-prices__cities button.is-active:hover {
  opacity: 1;
  padding-left: 30px;
  pointer-events: none;
}
.rp-prices__cities button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  opacity: 1;
}
/* Het koperen ringetje voor de gekozen plaats. */
.rp-prices__cities button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--copper);
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rp-prices__cities button.is-active::before {
  opacity: 1;
}

.rp-prices__data {
  position: relative;
}
.rp-prices__card {
  width: 200px;
  padding: 20px 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
/* De afstand waar de pijl tussen past. */
.rp-prices__data > .rp-prices__card:first-child {
  margin-bottom: 140px;
}
.rp-prices__year {
  display: block;
  margin-bottom: -10px;
  font-family: "Salvager", sans-serif;
  font-size: 25px;
  color: var(--copper);
}
.rp-prices__price {
  display: block;
  font-family: "Salvager", sans-serif;
  font-size: 20px;
  color: var(--ink);
}
.rp-prices__price b {
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 30px;
}

/* De pijl van het eerste peiljaar omhoog naar het laatste. */
.rp-prices__card--first {
  position: relative;
}
.rp-prices__card--first::before {
  content: "";
  position: absolute;
  top: -95px;
  left: 43%;
  width: 15px;
  height: 60px;
  background: url("../img/svg/big-arrow.svg") center center / 100% auto no-repeat;
}

.rp-prices__compare {
  position: absolute;
  top: 27%;
  margin: 45px 0 30px 130px;
}
.rp-prices__total {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "Salvager", sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--copper);
}
.rp-prices__total b {
  margin-left: 5px;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 40px;
  color: var(--ink);
}
.rp-prices__arrows {
  margin-left: 5px;
  height: 30px;
  opacity: 0;
  animation: rp-arrow-up 2s linear infinite forwards;
}
.rp-prices__yearly {
  margin: 0 0 0 20px;
  font-family: "Salvager", sans-serif;
  font-size: 17px;
  /* Was lichtgrijs, zoals op de bronpagina waar zeven plaatsen om aandacht
     vragen. Met één plaats is dit een cijfer dat gelezen moet worden. */
  color: var(--ink);
}

/*
  Eén plaats in beeld. De namen vervagen op de bronpagina naar achteren omdat je
  ertussen kan kiezen; staat er maar één, dan is dat geen keuze meer maar de kop
  van het blok, en hoort hij gewoon leesbaar te zijn.
*/
.rp-prices--single .rp-prices__cities span {
  display: inline-block;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 70px);
  line-height: initial;
  color: var(--ink);
}


.rp-prices__source {
  max-width: 200px;
  margin-top: 20px;
  font-size: 12px;
  font-style: italic;
  color: var(--body);
  opacity: 0.4;
}

@keyframes rp-arrow-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rp-prices__arrows {
    animation: none;
    opacity: 1;
  }
}

@media screen and (max-width: 1000px) {
  .rp-prices {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(30px, 5vw, 50px);
  }
  .rp-prices__cities {
    width: 100%;
  }
  /* Onder elkaar past de absolute opstelling niet meer: dan de twee kaartjes
     naast elkaar met de stijging ertussen. */
  .rp-prices__data {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
  }
  .rp-prices__data > .rp-prices__card:first-child {
    margin-bottom: 0;
    order: 3;
  }
  .rp-prices__card {
    width: auto;
  }
  .rp-prices__card--first::before {
    display: none;
  }
  .rp-prices__compare {
    position: static;
    margin: 0;
    order: 2;
    text-align: center;
  }
  .rp-prices__total {
    justify-content: center;
  }
  .rp-prices__yearly {
    margin-left: 0;
    text-align: center;
  }
  .rp-prices__source {
    order: 4;
    grid-column: 1 / -1;
    max-width: none;
    margin-top: 6px;
  }
}

@media screen and (max-width: 560px) {
  .rp-prices__data {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rp-prices__arrows {
    display: none;
  }
}

/* Het terugbelverzoek in de widget. Zelfde opmaak als de eerste stap van de
   rendementsberekening, zodat de kaart niet van vorm verandert. */
.rp-callback {
  margin-top: 18px;
}
.rp-callback h3 {
  margin: 0 0 6px;
  font-family: "Salvager", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
}
.rp-callback > p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}
.rp-callback__note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--body);
}
.rp-callback__done {
  text-align: center;
  padding: 10px 0 4px;
}
.rp-callback__done h3 {
  margin-bottom: 8px;
}
.rp-callback__done p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}

/* De weg terug vanuit de uitkomst staat onder de knoppen, niet bovenaan: daar
   is het een afsluiting en geen navigatie. */
.rp-wizard__again {
  margin: 18px 0 0;
}

/* Het reviewlabel als link. Zelfde vorm als het label zonder link, plus een
   pijltje en een hoverstaat, zodat zichtbaar is dat er iets te lezen valt. */
.rp-hero__review--link {
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rp-hero__review--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(23, 26, 39, 0.26);
}
.rp-hero__review--link:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
/* Pijltje uit twee randen: geen extra bestand voor twee streepjes. */
.rp-hero__review-go {
  width: 7px;
  height: 7px;
  margin-left: 2px;
  flex: none;
  border-top: 1.5px solid var(--copper);
  border-right: 1.5px solid var(--copper);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .rp-hero__review--link {
    transition: none;
  }
  .rp-hero__review--link:hover {
    transform: none;
  }
}

/* Meerdere reviewlabels naast elkaar; ze vallen onder elkaar zodra de kolom te
   smal wordt, bijvoorbeeld naast het formulier in de hero. */
.rp-hero__reviews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Rij met individuele portretten bij een sprekersectie met meerdere mensen
   onder één naam (bv. de drie UNIQ-adviseurs), i.p.v. één gedeelde foto. */
.rp-team-photos {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rp-team-photos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rp-team-photos__item img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  /* Boven i.p.v. center: dit zijn portretten, en een gewoon center-crop
     op een staand beeld snijdt het hoofd er zo af. */
  object-position: center top;
  box-shadow: var(--card-shadow-soft);
}
.rp-team-photos__item strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.rp-team-photos__item p {
  margin: 0;
  max-width: 180px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--body);
  text-align: center;
}