/* ==========================================================================
   HARBOUR CLINIC — house style & base
   Navy / sand-gold / ivory
   ========================================================================== */

:root{
  /* merkkleuren */
  --navy-900:#081A31;
  --navy-800:#0E2545;
  --navy-700:#173357;
  --navy-600:#22456C;
  --navy-300:#8095B0;

  --gold-600:#A87C40;
  --gold-500:#C29657;
  --gold-400:#D4AC6E;
  --gold-200:#E8D5B8;

  --ivory:#FAF7F4;
  --cream:#F4F0EC;
  --sand:#EBE4DC;
  --line:#E1D9D0;

  --ink:#1C2530;
  --ink-soft:#5A6572;

  --white:#FFFFFF;

  /* typografie */
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ritme */
  --pad-x:clamp(1.25rem, 5vw, 5.5rem);
  --max:1440px;
  --sec-y:clamp(5rem, 11vw, 11rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ---------- typografie ---------- */
h1,h2,h3,h4,.factlist .n,.hero__badge strong,.treat__num,address,.loc h3,
.zijmenu a::before,.stappen li::before,.prose ol li::marker,.prijstabel td{
  font-variant-numeric:lining-nums;
  font-feature-settings:'lnum' 1;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  color:var(--navy-800);
  margin:0;
  letter-spacing:-.01em;
  line-height:1.06;
}
.d1{font-size:clamp(2.9rem,7.4vw,6.6rem)}
.d2{font-size:clamp(2.25rem,4.9vw,4.35rem); line-height:1.08}
.d3{font-size:clamp(1.6rem,2.5vw,2.5rem); line-height:1.16}
.d4{font-size:clamp(1.25rem,1.5vw,1.6rem); line-height:1.24}
em{font-style:italic; color:var(--gold-600)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.075rem,1rem + .45vw,1.3rem); line-height:1.7; color:var(--ink-soft)}
/* Een link in een lead staat buiten .prose en zou anders niet te herkennen zijn. */
.lead a{color:var(--navy-800); border-bottom:1px solid var(--line); transition:border-color .3s var(--ease)}
.lead a:hover{border-color:var(--gold-500)}
.section--navy .lead a,.cta .lead a,.pagekop--navy .lead a{
  color:var(--ivory); border-bottom-color:rgba(250,247,244,.35);
}
.section--navy .lead a:hover,.cta .lead a:hover,.pagekop--navy .lead a:hover{border-bottom-color:var(--gold-400)}
.muted{color:var(--ink-soft)}

.eyebrow{
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--gold-600);
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.5rem;
}
.eyebrow::before{
  content:''; width:2.25rem; height:1px; background:var(--gold-500); flex:none;
}
.eyebrow.is-center{justify-content:center; text-align:center}
.eyebrow.is-center::after{content:''; width:2.25rem; height:1px; background:var(--gold-500)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x)}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.grid{display:grid; gap:clamp(2rem,4vw,4.5rem)}
@media(min-width:900px){
  .grid--split{grid-template-columns:1fr 1fr; align-items:center}
  .grid--5-7{grid-template-columns:5fr 7fr; align-items:center}
  .grid--7-5{grid-template-columns:7fr 5fr; align-items:center}
}
.stack-sm > * + *{margin-top:1rem}

/* ---------- knoppen ---------- */
.btn{
  --bg:var(--navy-800); --fg:var(--ivory); --bd:var(--navy-800);
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05rem 2.1rem;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:100px;
  color:var(--fg);
  font-size:.735rem; letter-spacing:.19em; text-transform:uppercase; font-weight:400;
  line-height:1; white-space:nowrap;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold-500);
  transform:translateY(101%); transition:transform .55s var(--slow);
}
.btn:hover{color:var(--navy-900); border-color:var(--gold-500)}
.btn:hover::before{transform:translateY(0)}

.btn--ghost{--bg:transparent; --fg:var(--navy-800); --bd:var(--navy-300)}
.btn--light{--bg:var(--ivory); --fg:var(--navy-800); --bd:var(--ivory)}
.btn--outline-light{--bg:transparent; --fg:var(--ivory); --bd:rgba(250,247,244,.38)}

.btn-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.735rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--navy-800); padding-block:.4rem;
  border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
}
.btn-arrow svg{transition:transform .45s var(--slow)}
.btn-arrow:hover{border-color:var(--gold-500); color:var(--gold-600)}
.btn-arrow:hover svg{transform:translateX(5px)}

.btn-row{display:flex; flex-wrap:wrap; gap:.9rem 1.1rem; align-items:center}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto; z-index:90;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.header::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ivory);
  opacity:0; transition:opacity .5s var(--ease);
}
.header.is-stuck::after{opacity:1}
.header.is-stuck{box-shadow:0 1px 0 var(--line)}
.header.is-hidden{transform:translateY(-100%)}

.header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block:1.35rem;
  transition:padding .5s var(--ease);
}
.header.is-stuck .header__bar{padding-block:.85rem}

.brand{display:flex; align-items:center; gap:.85rem; flex:none}
.brand__marks{position:relative; display:block; line-height:0}
.brand__mark{width:auto; height:clamp(38px,4.4vw,52px); transition:height .5s var(--ease), opacity .4s var(--ease)}
.header.is-stuck .brand__mark{height:clamp(34px,3.6vw,42px)}
.brand__mark--wit{position:absolute; left:0; top:0; opacity:0}
/* Staat het menu open, dan ligt het donkere paneel over de hele pagina. De balk
   moet dan niet zijn ivoren achtergrond tonen: het logo en de streepjes worden
   wit, en op ivoor zijn die onzichtbaar. */
body.is-menu .header.is-stuck::after{opacity:0}
body.is-menu .header.is-stuck{box-shadow:none}
body.is-menu .zoekknop{color:var(--ivory); border-color:rgba(250,247,244,.35)}
body.is-menu .zoekknop:hover{color:var(--gold-400); border-color:var(--gold-400)}
body.is-menu .brand__mark{opacity:0}
body.is-menu .brand__mark--wit{opacity:1}
body.is-menu .brand__type{color:var(--ivory); border-color:rgba(250,247,244,.28)}
body.is-menu .burger{border-color:rgba(250,247,244,.35)}
body.is-menu .burger span{background:var(--ivory)}
.brand__type{
  font-size:clamp(.82rem,1.05vw,1rem);
  letter-spacing:.28em; text-transform:uppercase; font-weight:400;
  color:var(--navy-800); line-height:1; white-space:nowrap;
  padding-left:.9rem; border-left:1px solid var(--line);
}
/* Onder 1520 px is de ruimte in de balk nodig voor het menu; het beeldmerk
   alleen is daar nog steeds herkenbaar genoeg. */
@media(max-width:1519px){ .brand__type{display:none} }

.nav{display:none}
/* Zeven menu-items passen niet meer bij 1100 pixels. De tussenruimte krimpt
   mee met het scherm en het menu verschijnt pas wanneer het echt past; daaronder
   staat alles in het uitklapmenu, dat dezelfde items bevat. */
@media(min-width:1200px){
  .nav{display:flex; align-items:center; gap:clamp(1rem,1.5vw,1.75rem); margin-inline:auto}
}
.nav__link{
  position:relative;
  font-size:.705rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  color:var(--navy-700); padding-block:.35rem; white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-500); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--slow);
}
.nav__link:hover{color:var(--navy-900)}
.nav__link:hover::after{transform:scaleX(1); transform-origin:left}
.nav__link.is-hier{color:var(--navy-900)}
.nav__link.is-hier::after{transform:scaleX(1); background:var(--gold-500)}

.nav__item{position:relative}
.nav__item--has-sub > .nav__link{display:inline-flex; align-items:center; gap:.45rem}
.nav__caret{width:9px; height:9px; transition:transform .35s var(--ease)}
.nav__item--has-sub:hover .nav__caret{transform:rotate(180deg)}
.subnav{
  position:absolute; top:100%; left:50%;
  /* De padding vormt een onzichtbare brug tussen het menu-item en het paneel.
     Zou het paneel bij het openen omlaag schuiven, dan ontstaat daar een dode
     strook en valt het submenu weg zodra je er langzaam naartoe beweegt.
     Daarom schuift het juist omhoog naar zijn plek. */
  transform:translateX(-50%) translateY(-7px);
  padding:1.1rem 1.5rem 1.25rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.nav__item--has-sub:hover .subnav,
.nav__item--has-sub:focus-within .subnav,
.nav__item--has-sub.is-open .subnav{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.subnav__inner{
  min-width:250px; background:var(--white);
  border:1px solid var(--line); border-radius:2px;
  padding:.6rem;
  box-shadow:0 24px 60px -30px rgba(14,37,69,.35);
}
.subnav__inner--breed{
  min-width:34rem; display:grid; grid-template-columns:repeat(2,1fr); gap:0 .35rem;
}
/* Het brede paneel is te wijd om vanuit het midden van het menu-item te openen:
   bij het eerste item viel de linkerhelft buiten het scherm. Daarom lijnt het
   uit op de linkerkant van het item. */
.subnav--breed{left:0; transform:translateX(0) translateY(-7px)}
.nav__item--has-sub:hover .subnav--breed,
.nav__item--has-sub:focus-within .subnav--breed,
.nav__item--has-sub.is-open .subnav--breed{transform:translateX(0) translateY(0)}
.subnav__link{
  display:block; padding:.7rem .95rem;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--navy-700);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.subnav__link:hover{background:var(--cream); color:var(--navy-900)}

.header__actions{display:flex; align-items:center; gap:1rem; flex:none}
.header__tel{
  display:none; align-items:center; gap:.55rem;
  font-size:.75rem; letter-spacing:.12em; color:var(--navy-700);
}
/* Het telefoonnummer in de balk kost ruim 140 px. Met zeven menu-items past dat
   er pas vanaf 1440 bij; daaronder staat het nummer nog steeds in de voettekst,
   op de contactpagina en in het uitklapmenu. */
@media(min-width:1440px){ .header__tel{display:inline-flex} }
.header .btn{padding:.85rem 1.6rem}
@media(max-width:1199px){ .header .btn--cta{display:none} }

/* hamburger */
.burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid var(--line); border-radius:50%;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
@media(min-width:1200px){ .burger{display:none} }
.burger:hover{border-color:var(--gold-500)}
.burger span{display:block; width:19px; height:1px; background:var(--navy-800); transition:transform .4s var(--ease), opacity .3s}
.burger span + span{margin-top:5px}
body.is-menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.is-menu .burger span:nth-child(2){opacity:0}
body.is-menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Header op een donkere paginakop.
   Pagina's die met een navy blok beginnen zetten body.kop-donker. Zolang de
   header nog transparant over dat blok ligt, moet alles licht zijn; zodra hij
   vastplakt komt de ivoren achtergrond terug en gelden de gewone kleuren weer. */
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .nav__link{color:rgba(250,247,244,.74)}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .nav__link:hover,
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .nav__link.is-hier{color:var(--ivory)}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .header__tel{color:rgba(250,247,244,.74)}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .header__tel:hover{color:var(--ivory)}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .brand__mark{opacity:0}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .brand__mark--wit{opacity:1}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .brand__type{
  color:var(--ivory); border-color:rgba(250,247,244,.28);
}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .burger{border-color:rgba(250,247,244,.35)}
body.kop-donker:not(.is-menu) .header:not(.is-stuck) .burger span{background:var(--ivory)}

/* mobiel menu */
.menu{
  position:fixed; inset:0; z-index:80;
  background:var(--navy-800); color:var(--ivory);
  padding:7rem var(--pad-x) 3rem;
  overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--slow);
}
body.is-menu .menu{clip-path:inset(0 0 0 0)}
.menu__list{list-style:none; margin:0; padding:0}
.menu__list li{overflow:hidden; border-bottom:1px solid rgba(250,247,244,.12)}
.menu__list a{
  display:block; padding:.85rem 0;
  font-family:var(--serif); font-size:clamp(1.65rem,5.5vw,2.4rem); color:var(--ivory);
  transform:translateY(110%); transition:transform .7s var(--slow), color .35s var(--ease);
}
body.is-menu .menu__list a{transform:translateY(0)}
.menu__list a:hover{color:var(--gold-400)}

/* ---------- onderdelen in het mobiele menu ---------- */
/* De naam en de openknop staan naast elkaar; de naam blijft een link naar de
   overzichtspagina, zodat één tik daarop niet alleen maar uitklapt. */
.menu__rij{display:flex; align-items:center; gap:1rem}
.menu__rij a{flex:1; min-width:0}
.menu__meer{
  flex:none; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold-400); border:1px solid rgba(250,247,244,.22); border-radius:50%;
  transform:translateY(110%);
  transition:transform .7s var(--slow), border-color .3s var(--ease), color .3s var(--ease);
}
body.is-menu .menu__meer{transform:translateY(0)}
.menu__meer:hover{border-color:var(--gold-400)}
.menu__meer svg{transition:transform .35s var(--ease)}
.menu__tak.is-open .menu__meer svg{transform:rotate(45deg)}

.menu__sub{list-style:none; margin:0 0 .9rem; padding:0}
.menu__sub li{border:0}
.menu__sub a{
  display:block; padding:.5rem 0 .5rem 1.1rem;
  font-family:var(--sans); font-size:.95rem; letter-spacing:.02em;
  color:rgba(250,247,244,.72); transform:none;
  border-left:1px solid rgba(250,247,244,.18);
}
.menu__sub a:hover{color:var(--gold-400); border-left-color:var(--gold-400)}

.menu__foot{margin-top:2.75rem; display:grid; gap:1rem; font-size:.9rem; color:rgba(250,247,244,.75)}
.menu__foot a:hover{color:var(--gold-400)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; background:var(--ivory); overflow:hidden}
.hero__inner{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(8.5rem,15vw,12.5rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
@media(min-width:1000px){
  .hero__inner{grid-template-columns:1.05fr .95fr; align-items:center}
}
.hero__copy{position:relative; z-index:2; max-width:41rem}
.hero h1{margin-bottom:1.6rem}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln > span{display:block; transform:translateY(105%); transition:transform 1.1s var(--slow)}
.hero.is-in h1 .ln > span{transform:translateY(0)}
.hero h1 .ln:nth-child(2) > span{transition-delay:.09s}
.hero h1 .ln:nth-child(3) > span{transition-delay:.18s}

.hero__sub{max-width:34rem; margin-bottom:2.4rem}
.hero__fade{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--slow)}
.hero.is-in .hero__fade{opacity:1; transform:none}
.hero.is-in .hero__fade--1{transition-delay:.4s}
.hero.is-in .hero__fade--2{transition-delay:.52s}
.hero.is-in .hero__fade--3{transition-delay:.64s}

.hero__media{position:relative}
.hero__frame{
  position:relative; overflow:hidden;
  border-radius:280px 280px 8px 8px;
  aspect-ratio:4/5;
  background:var(--sand);
}
@media(max-width:999px){ .hero__frame{aspect-ratio:5/4; border-radius:200px 200px 8px 8px} }
.hero__frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.16); transition:transform 1.8s var(--slow);
}
.hero.is-in .hero__frame img{transform:scale(1)}
.hero__badge{
  position:absolute; left:clamp(-2.5rem,-2vw,-1rem); bottom:clamp(1.5rem,4vw,3rem);
  background:var(--ivory); border:1px solid var(--line);
  padding:1.35rem 1.6rem; border-radius:2px; max-width:15.5rem;
  box-shadow:0 30px 70px -40px rgba(14,37,69,.5);
}
.hero__badge strong{
  display:block; font-family:var(--serif); font-size:2.35rem; color:var(--navy-800); line-height:1;
}
.hero__badge span{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft)}
@media(max-width:999px){ .hero__badge{left:1.25rem; bottom:1.25rem} }

/* golf-motief uit het logo */
.wave{position:absolute; pointer-events:none; opacity:.42}
.wave--hero{bottom:2%; left:-14%; width:62%; color:var(--gold-200); z-index:0}

/* trustbalk */
.trust{border-top:1px solid var(--line); background:var(--ivory)}
.trust__inner{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
}
@media(min-width:800px){ .trust__inner{grid-template-columns:repeat(4,1fr)} }
.trust__item{
  padding:1.7rem 1.4rem;
  display:flex; align-items:center; gap:.9rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.8rem; letter-spacing:.055em; color:var(--navy-700); line-height:1.4;
}
@media(min-width:800px){ .trust__item{border-bottom:0} .trust__item:last-child{border-right:0} }
@media(max-width:799px){ .trust__item:nth-child(2n){border-right:0} }
.trust__item svg{flex:none; color:var(--gold-500)}

/* ==========================================================================
   INTRO / OVER
   ========================================================================== */
.section--cream{background:var(--cream)}
.section--navy{background:var(--navy-800); color:rgba(250,247,244,.82)}
.section--navy h2,.section--navy h3,.section--navy h4{color:var(--ivory)}
.section--navy .eyebrow{color:var(--gold-400)}
.section--navy .eyebrow::before,.section--navy .eyebrow::after{background:var(--gold-500)}
.section--navy .lead{color:rgba(250,247,244,.72)}

.figure{position:relative; overflow:hidden; border-radius:3px; background:var(--sand)}
.figure img{width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 1.6s var(--slow)}
.figure.is-in img{transform:scale(1)}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:16/10}
.figure--arch{border-radius:240px 240px 3px 3px}
/* Bij beeld met tekst erin mag er niets worden weggesneden: geen vaste
   verhouding en geen uitsnede, zodat de hele afbeelding leesbaar blijft. */
.figure--vol{background:transparent}
.figure--vol img{height:auto; object-fit:contain; transform:none}
.figure--vol.is-in img{transform:none}
/* Een staand beeld zou anders de halve pagina vullen. */
.figure--staand{max-width:30rem; margin-inline:auto}
/* Liggend beeld dat niet de volle kolombreedte hoeft te vullen. */
.figure--klein{max-width:36rem; margin-inline:auto}

.factlist{list-style:none; margin:2.4rem 0 0; padding:0; border-top:1px solid var(--line)}
.section--navy .factlist{border-color:rgba(250,247,244,.16)}
.factlist li{
  display:flex; gap:1.15rem; padding:1.15rem 0; border-bottom:1px solid var(--line);
  font-size:.97rem;
}
.section--navy .factlist li{border-color:rgba(250,247,244,.16)}
.factlist .n{
  font-family:var(--serif); font-size:.9rem; color:var(--gold-600); flex:none; padding-top:.15rem;
}
.section--navy .factlist .n{color:var(--gold-400)}

/* ==========================================================================
   TWEE ZORGROUTES
   ========================================================================== */
.routes{display:grid; gap:clamp(1.5rem,2.5vw,2rem)}
@media(min-width:860px){ .routes{grid-template-columns:1fr 1fr} }
.route{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column;
  transition:border-color .5s var(--ease), transform .6s var(--slow), box-shadow .6s var(--ease);
}
.route:hover{border-color:var(--gold-400); transform:translateY(-5px); box-shadow:0 40px 80px -55px rgba(14,37,69,.55)}
.route__img{aspect-ratio:16/9; overflow:hidden; background:var(--sand)}
.route__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--slow)}
.route:hover .route__img img{transform:scale(1.05)}
.route__body{padding:clamp(1.75rem,3vw,2.75rem); display:flex; flex-direction:column; gap:1.1rem; flex:1}
.route__tag{
  align-self:flex-start;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.45rem .85rem; border-radius:100px;
  background:var(--cream); color:var(--navy-700); border:1px solid var(--line);
}
.route ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.94rem; color:var(--ink-soft)}
.route ul li{display:flex; gap:.65rem}
.route ul li::before{content:'—'; color:var(--gold-500); flex:none}
.route .btn-arrow{margin-top:auto; align-self:flex-start}

/* ==========================================================================
   SPECIALISMEN
   ========================================================================== */
.spec-head{display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:end; justify-content:space-between; margin-bottom:clamp(2.5rem,5vw,4rem)}
.spec-head > *:first-child{flex:1 1 30rem; min-width:0}
.spec-head h2{max-width:24ch}
.spec-head > p{max-width:34ch; margin:0; flex:0 1 28rem}

.specs{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){ .specs{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1120px){ .specs{grid-template-columns:repeat(5,1fr)} }
.spec{
  position:relative; background:var(--ivory);
  padding:clamp(1.4rem,2.4vw,2rem) clamp(1.1rem,1.8vw,1.5rem);
  min-height:clamp(150px,15vw,190px);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.1rem;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.spec:hover{background:var(--navy-800)}
.spec__icon{color:var(--gold-500); transition:color .5s var(--ease)}
.spec__name{
  font-family:var(--serif); font-size:clamp(1.1rem,1.35vw,1.35rem); color:var(--navy-800);
  line-height:1.2; transition:color .5s var(--ease);
}
.spec:hover .spec__name{color:var(--ivory)}
.spec:hover .spec__icon{color:var(--gold-400)}
.spec__soon{
  position:absolute; top:.85rem; right:.85rem;
  font-size:.575rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); border:1px solid var(--gold-200); border-radius:100px;
  padding:.25rem .55rem; background:var(--white);
  transition:opacity .4s var(--ease);
}
.spec:hover .spec__soon{opacity:.85}

/* ==========================================================================
   BEHANDELINGEN (onverzekerd)
   ========================================================================== */
.treat{display:grid; gap:clamp(1.5rem,2.5vw,2rem)}
@media(min-width:800px){ .treat{grid-template-columns:repeat(3,1fr)} }
@media(min-width:800px){ .treat--4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1200px){ .treat--4{grid-template-columns:repeat(4,1fr)} }
.treat__col{
  background:rgba(250,247,244,.05); border:1px solid rgba(250,247,244,.15); border-radius:3px;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:1.25rem;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.treat__col:hover{background:rgba(250,247,244,.09); border-color:rgba(212,172,110,.5)}
.treat__col h3{font-size:clamp(1.35rem,1.9vw,1.75rem)}
.treat__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.94rem}
.treat__col ul li{display:flex; gap:.65rem; color:rgba(250,247,244,.78)}
.treat__col ul li::before{content:'·'; color:var(--gold-400); flex:none}
.treat__col .btn-arrow{
  margin-top:auto; align-self:flex-start; color:var(--ivory); border-color:rgba(250,247,244,.28);
}
.treat__col .btn-arrow:hover{color:var(--gold-400); border-color:var(--gold-400)}
.treat__num{font-family:var(--serif); font-size:.85rem; letter-spacing:.2em; color:var(--gold-400)}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{display:grid; gap:clamp(1.5rem,2.5vw,2.25rem)}
@media(min-width:640px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .team{grid-template-columns:repeat(4,1fr)} }
/* Op een groepspagina staan er meestal maar één tot drie behandelaars. Vier
   kolommen laat dan een gat vallen; drie vult netjes. */
@media(min-width:1000px){ .team--kort{grid-template-columns:repeat(3,1fr)} }
.team--kort{max-width:60rem}
.member__img{position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--sand); border-radius:3px}
.member__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow), filter .6s var(--ease)}
.member:hover .member__img img{transform:scale(1.05)}
.member__spec{
  position:absolute; left:0; bottom:0;
  background:var(--ivory); padding:.5rem .9rem;
  font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--navy-700);
}
.member h3{margin-top:1.2rem; font-size:1.3rem}
.member__functie{
  margin:.3rem 0 0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600);
}
.member__focus{
  margin:.55rem 0 0; font-size:.85rem; line-height:1.6; color:var(--ink-soft);
}
.team__noot{
  margin:2rem 0 0; max-width:62ch;
  font-size:.8rem; line-height:1.7; color:var(--ink-soft);
}

/* ==========================================================================
   VOOR & NA
   ========================================================================== */
.ba{position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/5; background:var(--sand); cursor:ew-resize; user-select:none}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ivory);
  box-shadow:0 0 0 1px rgba(14,37,69,.15);
}
.ba__handle::after{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
  z-index:1;
  width:46px; height:46px; border-radius:50%;
  background:var(--ivory); border:1px solid var(--gold-400);
  box-shadow:0 10px 30px -10px rgba(14,37,69,.65);
}
.ba__handle::before{
  content:'\2039\2003\203A'; position:absolute; top:50%; left:50%; translate:-50% -50%;
  z-index:2; font-size:1rem; line-height:1; color:var(--navy-800);
}
.ba__lbl{
  position:absolute; bottom:1rem; z-index:3;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(14,37,69,.72); color:var(--ivory); padding:.4rem .8rem; border-radius:100px;
}
.ba__lbl--l{left:1rem} .ba__lbl--r{right:1rem}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.5rem 0; text-align:left;
  font-family:var(--serif); font-size:clamp(1.15rem,1.7vw,1.5rem); color:var(--navy-800);
  transition:color .35s var(--ease);
}
.faq__q:hover{color:var(--gold-600)}
.faq__ico{position:relative; flex:none; width:20px; height:20px}
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--gold-500);
  transition:transform .45s var(--slow);
}
.faq__ico::after{transform:rotate(90deg)}
.faq__item.is-open .faq__ico::after{transform:rotate(0)}
.faq__a{overflow:hidden; height:0; transition:height .5s var(--slow)}
.faq__a > div{padding:0 0 1.75rem; max-width:62ch; color:var(--ink-soft)}

/* ==========================================================================
   LOCATIES
   ========================================================================== */
.locs{display:grid; gap:clamp(1.25rem,2vw,1.75rem)}
@media(min-width:760px){ .locs{grid-template-columns:repeat(3,1fr)} }
@media(min-width:760px){ .locs--4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .locs--4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:760px){ .locs--2{grid-template-columns:repeat(2,1fr)} }
.loc{
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .5s var(--ease), transform .6s var(--slow);
}
.loc:hover{border-color:var(--gold-400); transform:translateY(-4px)}
.loc h3{font-size:1.45rem}
.loc address{font-style:normal; color:var(--ink-soft); font-size:.94rem; line-height:1.7}
.loc .btn-arrow{align-self:flex-start; margin-top:auto}

/* ==========================================================================
   CTA-band
   ========================================================================== */
.cta{position:relative; background:var(--navy-800); color:var(--ivory)}
.cta__stage{position:relative; overflow:hidden}
.cta h2,.cta h3{color:var(--ivory)}
.cta .lead{color:rgba(250,247,244,.72)}
.cta .eyebrow{color:var(--gold-400)}
.cta .eyebrow::before,.cta .eyebrow::after{background:var(--gold-500)}
.cta__inner{position:relative; z-index:2; text-align:center; padding-block:clamp(4.5rem,9vw,8.5rem)}
.cta h2{margin-bottom:1.5rem; max-width:20ch; margin-inline:auto}
.cta .lead{max-width:46ch; margin:0 auto 2.6rem}
.cta .btn-row{justify-content:center}
.wave--cta{bottom:-18%; right:-8%; width:46%; color:var(--gold-400); opacity:.11}

.contactbar{display:grid; gap:1px; background:rgba(250,247,244,.14); border-top:1px solid rgba(250,247,244,.14)}
@media(min-width:760px){ .contactbar{grid-template-columns:repeat(3,1fr)} }
.contactbar a{
  background:var(--navy-800); padding:1.9rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(250,247,244,.85);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.contactbar a:hover{background:var(--navy-700); color:var(--gold-400)}
.contactbar svg{color:var(--gold-500); flex:none}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy-900); color:rgba(250,247,244,.62); font-size:.9rem}
.footer__top{display:grid; gap:2.75rem; padding-block:clamp(3.5rem,7vw,6rem)}
@media(min-width:900px){ .footer__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr} }
.footer__logo{height:78px; width:auto; margin-bottom:1.5rem; opacity:.95}
.footer h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:1.35rem; font-weight:400;
}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.footer a{transition:color .3s var(--ease)}
.footer a:hover{color:var(--gold-400)}
.footer__bottom{
  border-top:1px solid rgba(250,247,244,.13); padding-block:1.75rem;
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-size:.78rem; letter-spacing:.05em;
}
.footer__legal{display:flex; flex-wrap:wrap; gap:.75rem 1.6rem}

/* ==========================================================================
   WHATSAPP-KNOP (vast aan de zijkant, blijft zichtbaar tijdens scrollen)
   ========================================================================== */
.wa-knop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:94;
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem; border-radius:999px;
  background:#25D366; color:var(--white);
  font-size:.95rem; font-weight:500; letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 12px 30px -10px rgba(8,26,49,.45);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.wa-knop:hover{background:#1EBE5A; transform:translateY(-2px)}
.wa-knop svg{flex:none; display:block}
.wa-knop__nummer{display:none}
@media(min-width:900px){
  .wa-knop{padding:.75rem 1.3rem .75rem .85rem}
  .wa-knop__nummer{display:inline}
}

/* ==========================================================================
   REVEAL-ANIMATIES
   ========================================================================== */
.rv{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--slow)}
.rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s}
.rv-d3{transition-delay:.27s} .rv-d4{transition-delay:.36s}
.rv-line{opacity:0; transform:scaleX(0); transform-origin:left; transition:opacity .6s, transform 1.1s var(--slow)}
.rv-line.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv,.hero__fade{opacity:1; transform:none}
  .hero h1 .ln > span{transform:none}
}

/* toegankelijkheid */
:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-800); color:var(--ivory); padding:1rem 1.5rem;
}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ==========================================================================
   BINNENPAGINA'S
   ========================================================================== */
.pagekop{
  position:relative; overflow:hidden;
  background:var(--cream);
  padding-top:clamp(8rem,13vw,11rem);
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line);
}
.pagekop--navy{background:var(--navy-800); border-bottom:0}
.pagekop--navy h1,.pagekop--navy .kruimels a,.pagekop--navy .kruimels{color:var(--ivory)}
.pagekop--navy .lead{color:rgba(250,247,244,.72)}
.pagekop--navy .eyebrow{color:var(--gold-400)}
.pagekop--navy .eyebrow::before{background:var(--gold-500)}
.pagekop__inner{position:relative; z-index:2; max-width:46rem}
.pagekop h1{margin-bottom:1.2rem}
.wave--kop{bottom:-30%; right:-6%; width:44%; color:var(--gold-400); opacity:.15; z-index:1}

.kruimels{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  margin:0 0 1.4rem; padding:0; list-style:none;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.kruimels li{display:flex; align-items:center; gap:.55rem}
.kruimels li+li::before{content:'/'; color:var(--gold-500)}
.kruimels a{color:inherit; transition:color .3s var(--ease)}
.kruimels a:hover{color:var(--gold-600)}
.kruimels [aria-current]{color:var(--navy-800)}
.pagekop--navy .kruimels [aria-current]{color:var(--gold-400)}

/* ---------- lopende tekst ---------- */
.prose{max-width:68ch}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.5rem,2.3vw,2.1rem); margin-top:2.4em; margin-bottom:.65em}
.prose h3{font-size:clamp(1.2rem,1.6vw,1.5rem); margin-top:1.9em; margin-bottom:.5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0; padding:0 0 0 1.2rem; display:grid; gap:.5rem}
.prose ul{list-style:none; padding-left:0}
/* Het streepje stond eerst naast de tekst met flexbox. Nadeel daarvan: élk
   element in de regel wordt dan een eigen kolom, dus een <strong> of een link
   sprong los van de zin — bij bedragen als '€ 100' viel dat meteen op. Met een
   absoluut geplaatst streepje loopt de regel gewoon door. */
.prose ul li{position:relative; padding-left:1.6rem}
.prose ul li::before{
  content:'—'; color:var(--gold-500);
  position:absolute; left:0; top:0;
}
.prose ol{color:var(--ink-soft)}
.prose ol li{padding-left:.35rem}
.prose ol li::marker{color:var(--gold-600); font-family:var(--serif)}
.prose a{color:var(--navy-800); border-bottom:1px solid var(--line); transition:border-color .3s var(--ease)}
.prose a:hover{border-color:var(--gold-500)}
/* Een knop in lopende tekst mag de linkstijl niet overnemen: dan krijgt de tekst
   dezelfde donkere kleur als de knop zelf en valt hij weg tegen de achtergrond. */
.prose .btn{color:var(--fg); border:1px solid var(--bd)}
.prose .btn:hover{color:var(--navy-900); border-color:var(--gold-500)}
.prose .btn-arrow{border-bottom-color:var(--line)}
.prose strong{font-weight:500; color:var(--navy-800)}

/* ---------- inhoudsopgave naast de tekst ---------- */
.metgrid{display:grid; gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:1000px){ .metgrid{grid-template-columns:16rem 1fr; align-items:start} }
.zijmenu{position:sticky; top:7rem; display:none}
@media(min-width:1000px){ .zijmenu{display:block} }
.zijmenu h4{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-600); margin:0 0 1.1rem; font-weight:400;
}
.zijmenu ol{list-style:none; margin:0; padding:0; display:grid; gap:.1rem; counter-reset:z}
.zijmenu a{
  display:flex; gap:.75rem; padding:.55rem 0;
  font-size:.88rem; color:var(--ink-soft); line-height:1.45;
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease);
}
.zijmenu li{counter-increment:z}
.zijmenu a::before{
  content:counter(z,decimal-leading-zero);
  font-family:var(--serif); font-size:.78rem; color:var(--gold-600); flex:none; padding-top:.15rem;
}
.zijmenu a:hover,.zijmenu a.is-hier{color:var(--navy-900)}

/* ---------- kaartenrasters ---------- */
.kaarten{display:grid; gap:clamp(1.25rem,2.2vw,1.9rem)}
@media(min-width:700px){ .kaarten--2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:700px){ .kaarten--3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1050px){ .kaarten--3{grid-template-columns:repeat(3,1fr)} }
.kaart{
  position:relative; display:flex; flex-direction:column; gap:.85rem;
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.5rem,2.4vw,2.1rem);
  transition:border-color .5s var(--ease), transform .6s var(--slow), box-shadow .6s var(--ease);
}
.kaart:hover{border-color:var(--gold-400); transform:translateY(-4px); box-shadow:0 36px 70px -55px rgba(14,37,69,.5)}
.kaart h3{font-size:clamp(1.2rem,1.6vw,1.45rem)}
.kaart p{margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.7}
/* Een link in een kaarttekst kreeg dezelfde kleur als de zin eromheen en was
   daardoor niet als link te herkennen. Knoppen houden hun eigen opmaak. */
.kaart p a:not(.btn):not(.btn-arrow){
  color:var(--navy-800); border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.kaart p a:not(.btn):not(.btn-arrow):hover{border-color:var(--gold-500)}
.kaart .btn-arrow{margin-top:auto; align-self:flex-start}
.kaart__icon{color:var(--gold-500); margin-bottom:.35rem}
.kaart--soon{opacity:.72}
.kaart__soon{
  align-self:flex-start;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); border:1px solid var(--gold-200); border-radius:100px;
  padding:.25rem .6rem;
}

/* ---------- prijstabel ---------- */
.prijsblok + .prijsblok{margin-top:clamp(2.5rem,4vw,3.5rem)}
.prijsblok h2{margin-bottom:1.4rem}
/* table-layout:fixed dwingt elke tabel dezelfde kolombreedtes af. Zonder dit
   meet de browser per tabel de inhoud op, en dan staat 'Verdoving' bij de ene
   groep verder naar links dan bij de andere — precies wat er slordig uitzag. */
.prijstabel{
  width:100%; min-width:30rem; table-layout:fixed;
  border-collapse:collapse; font-size:.95rem;
}
.prijstabel th,.prijstabel td{
  text-align:left; padding:1.05rem 1rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.prijstabel th{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  color:var(--ink-soft); border-bottom-color:var(--navy-300);
}
.prijstabel td:first-child{padding-left:0; color:var(--navy-800); overflow-wrap:break-word}
.prijstabel td:last-child,.prijstabel th:last-child{
  width:9.5rem; text-align:right; padding-right:0; white-space:nowrap;
}
.prijstabel tbody tr{transition:background .3s var(--ease)}
.prijstabel tbody tr:hover{background:var(--cream)}
.prijstabel .nog{color:var(--ink-soft); font-style:italic}
.tabelrol{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- resultaten (voor & na) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,3.5vw,3rem)}
.filter{
  padding:.65rem 1.25rem; border:1px solid var(--line); border-radius:100px;
  background:var(--white);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-700);
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.filter:hover{border-color:var(--gold-400)}
.filter.is-aan{background:var(--navy-800); border-color:var(--navy-800); color:var(--ivory)}

.resultaten{display:grid; gap:clamp(1.5rem,2.6vw,2.25rem)}
/* De reeks op een behandelpagina volgt hetzelfde raster als op /voor-en-na/. */
.resultaten--kort{margin-top:0}
@media(min-width:760px){ .resultaten{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1150px){ .resultaten{grid-template-columns:repeat(3,1fr)} }
.resultaat{display:flex; flex-direction:column; gap:.9rem}
/* Zonder deze regel wint display:flex van het hidden-attribuut en blijft
   een weggefilterde kaart gewoon staan. */
.resultaat[hidden]{display:none}
.resultaat .ba{aspect-ratio:3/4}
.resultaat__bij{font-size:.85rem; color:var(--ink-soft); line-height:1.6; margin:0}
.resultaat__bij strong{
  display:block; font-family:var(--serif); font-size:1.15rem; color:var(--navy-800);
  margin-bottom:.15rem; font-weight:400;
}
.reeks{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .reeks{grid-template-columns:repeat(4,1fr)} }
.reeks figure{margin:0}
.reeks img{width:100%; border-radius:3px; display:block}
.reeks figcaption{
  margin-top:.6rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- formulieren ---------- */
.formulier{display:grid; gap:1.6rem; max-width:44rem}
.veldrij{display:grid; gap:1.6rem}
@media(min-width:640px){ .veldrij--2{grid-template-columns:1fr 1fr} }
.veld{position:relative}
.veld > label{
  display:block; margin-bottom:.55rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.veld input,.veld select,.veld textarea{
  width:100%; padding:1rem 1.1rem;
  font-family:var(--sans); font-weight:300; font-size:1rem; color:var(--navy-800);
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.veld textarea{min-height:9rem; resize:vertical}
.veld select{appearance:none; background-image:none; cursor:pointer}
.veld--select::after{
  content:''; position:absolute; right:1.1rem; bottom:1.35rem;
  width:8px; height:8px; border-right:1px solid var(--navy-700); border-bottom:1px solid var(--navy-700);
  transform:rotate(45deg); pointer-events:none;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(194,150,87,.14);
}
.veld__hulp{margin:.5rem 0 0; font-size:.8rem; color:var(--ink-soft)}
/* 'optioneel' achter een label — zachter dan het label zelf */
.veld__bij{font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--ink-soft); opacity:.75}

/* genummerde opsomming in een kaart */
.opsomming{
  margin:0; padding:0 0 0 1.15rem;
  display:grid; gap:.6rem;
  font-size:.92rem; line-height:1.55; color:var(--ink-soft);
}
.opsomming li{padding-left:.25rem}
.opsomming li::marker{color:var(--gold-600); font-variant-numeric:lining-nums}

.akkoord{display:flex; gap:.85rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft)}
.akkoord input{
  flex:none; width:1.15rem; height:1.15rem; margin-top:.2rem;
  accent-color:var(--navy-800);
}
.akkoord a{color:var(--navy-800); text-decoration:underline; text-underline-offset:3px}

.melding{
  padding:1.2rem 1.4rem; border-radius:3px; font-size:.92rem; line-height:1.65;
  border:1px solid var(--line); background:var(--white);
}
.melding--goed{border-color:var(--gold-400); background:rgba(194,150,87,.07)}
.melding--fout{border-color:#D8AFAA; background:rgba(180,69,60,.06); color:#8C332C}

/* ---------- contactgegevens ---------- */
.gegevens{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
.gegevens li{display:flex; gap:1rem; align-items:flex-start}
.gegevens svg{flex:none; color:var(--gold-500); margin-top:.2rem}
.gegevens span{display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.gegevens a,.gegevens p{margin:.15rem 0 0; color:var(--navy-800); font-size:1.02rem; line-height:1.6}
.gegevens a:hover{color:var(--gold-600)}
/* Korte variant: label en waarde op één regel, zonder pictogram. */
.gegevens--kort{gap:.65rem}
.gegevens--kort li{align-items:baseline; gap:.75rem; font-size:.98rem; color:var(--navy-800)}
.gegevens--kort span{flex:none; min-width:6.5rem}

/* ---------- stappen ---------- */
.stappen{list-style:none; margin:0; padding:0; counter-reset:st; display:grid; gap:0}
.stappen li{
  counter-increment:st; position:relative;
  padding:1.5rem 0 1.5rem 4rem; border-bottom:1px solid var(--line);
}
.stappen li:first-child{padding-top:0}
.stappen li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute; left:0; top:1.5rem;
  font-family:var(--serif); font-size:1.6rem; color:var(--gold-500); line-height:1;
}
.stappen li:first-child::before{top:0}
.stappen h3{font-size:1.2rem; margin-bottom:.35rem}

/* Binnen lopende tekst wint `.prose ol` van `.stappen` op inspringing en
   tussenruimte. Dan schuift het nummer over het kopje heen. Deze regels zetten
   de stappenlijst weer op zijn eigen maten. */
.prose .stappen{margin:1.5rem 0 0; padding:0; display:grid; gap:0}
.prose .stappen li{padding:1.5rem 0 1.5rem 4rem; margin:0}
.prose .stappen li:first-child{padding-top:0}
.prose .stappen li::marker{content:none}
.prose .stappen h3{margin-top:0}
.prose .stappen p{margin:0}
.stappen p{margin:0; color:var(--ink-soft); font-size:.94rem}

/* ---------- kleine notitie ---------- */
.notitie{
  border-left:2px solid var(--gold-500); padding:.35rem 0 .35rem 1.35rem;
  font-size:.88rem; color:var(--ink-soft); line-height:1.7; max-width:66ch;
}

/* ---------- team, ingedeeld per vakgebied ---------- */
.vakgroep{display:grid; gap:clamp(1.5rem,3vw,2.5rem); padding-block:clamp(2.25rem,4vw,3.25rem)}
.vakgroep + .vakgroep{border-top:1px solid var(--line)}
.vakgroep:first-child{padding-top:0}
@media(min-width:900px){ .vakgroep{grid-template-columns:14rem 1fr; align-items:start} }

.vakgroep__label{position:sticky; top:7rem}
@media(max-width:899px){ .vakgroep__label{position:static} }
.vakgroep__label .eyebrow{margin-bottom:.9rem}
.vakgroep__label h2{color:var(--navy-800)}
.vakgroep__aantal{
  margin:.6rem 0 0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}

.vakgroep__leden{display:grid; gap:clamp(1.25rem,2.4vw,2rem)}
@media(min-width:560px){ .vakgroep__leden{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1200px){ .vakgroep__leden{grid-template-columns:repeat(3,1fr)} }

/* Sprongmenu per vakgebied in de paginakop van /specialisten/; zelfde pilletjes
   als het sprongmenu bij de prijslijst. */
.vakwijzer{margin-top:clamp(1.75rem,3vw,2.5rem)}
.vakwijzer__kop{
  margin:0 0 .9rem; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-600);
}
.vakwijzer ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.vakwijzer li a{
  display:inline-block; padding:.3rem .8rem;
  font-size:.84rem; color:var(--ink-soft);
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.vakwijzer li a:hover{border-color:var(--gold-500); color:var(--navy-800)}
.vakwijzer__aantal{margin-left:.3em; color:var(--gold-600)}
/* De vaste header mag een aangesprongen vakgebied niet afdekken. */
.vakgroep[id]{scroll-margin-top:clamp(5rem,9vw,7rem)}

/* ---------- voor/na-schuif op aanraakschermen ----------
   De foto zelf vangt geen aanrakingen af, zodat scrollen door de pagina nooit
   hapert. Alleen de greep sleept; die staat op pan-y, dus een verticale veeg
   vanaf de greep scrollt ook gewoon. */
.ba{cursor:default}
@media (pointer:fine){ .ba{cursor:ew-resize} }
.ba.is-sleep{cursor:ew-resize}

.ba img{pointer-events:none; -webkit-user-drag:none; user-select:none}

.ba__handle{
  touch-action:pan-y;
  cursor:ew-resize;
}
/* onzichtbaar grijpvlak rondom de greep, zodat je hem met een duim raakt */
.ba__handle::before{
  content:'\2039\2003\203A';
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  z-index:2; font-size:1rem; line-height:1; color:var(--navy-800);
  width:56px; height:56px;
  display:grid; place-items:center;
}
@media (max-width:760px){
  .ba__handle::after{width:52px; height:52px}
  .ba__handle::before{width:64px; height:64px; font-size:1.05rem}
}
.ba:focus-visible{outline:2px solid var(--gold-500); outline-offset:3px}

/* aanwijzing dat je aan de greep moet slepen */
.ba__hint{
  position:absolute; left:50%; bottom:.9rem; translate:-50% 0; z-index:3;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(14,37,69,.62); color:var(--ivory);
  padding:.35rem .75rem; border-radius:100px; white-space:nowrap;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.ba.is-sleep .ba__hint{opacity:0}
@media (pointer:fine){ .ba__hint{display:none} }

/* ---------- loopbaanoverzicht op een specialistenpagina ---------- */
.loopbaan{margin:1.75rem 0 0; display:grid; gap:0}
@media(min-width:620px){ .loopbaan{grid-template-columns:9.5rem 1fr} }
.loopbaan dt{
  padding:.95rem 0 .3rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600);
  font-variant-numeric:lining-nums;
}
.loopbaan dd{
  margin:0; padding:0 0 .95rem;
  font-size:.95rem; color:var(--ink-soft); line-height:1.6;
  border-bottom:1px solid var(--line);
}
@media(min-width:620px){
  .loopbaan dt{padding:.95rem 1rem .95rem 0; border-bottom:1px solid var(--line)}
  .loopbaan dd{padding:.95rem 0}
}

/* ---------- specialistenkaart als link ---------- */
.member__link{display:block; color:inherit}
.member__link h3{transition:color .35s var(--ease)}
.member__link:hover h3{color:var(--gold-600)}
.member__meer{margin-top:.9rem}

/* ---------- sprongmenu bij de prijslijst ---------- */
.prijswijzer{
  margin:clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem);
  padding:clamp(1.4rem,2.5vw,2rem);
  background:var(--white); border:1px solid var(--line); border-radius:3px;
}
.prijswijzer__kop{
  margin:0 0 1.4rem; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-600);
}
.prijswijzer__groep + .prijswijzer__groep{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.prijswijzer__hoofd{
  display:block; margin-bottom:.7rem;
  font-family:var(--serif); font-size:1.1rem; color:var(--navy-800);
}
.prijswijzer__hoofd:hover{color:var(--gold-600)}
.prijswijzer ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.prijswijzer li a{
  display:inline-block; padding:.3rem .8rem;
  font-size:.84rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.prijswijzer li a:hover{border-color:var(--gold-500); color:var(--navy-800)}

/* De vaste header mag een aangesprongen kop niet afdekken. */
.prijsblok[id],.prijsblok__kop[id]{scroll-margin-top:clamp(5rem,9vw,7rem)}

/* ---------- financieringspartner ---------- */
.partner{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2rem;
  margin:clamp(2rem,3.5vw,2.75rem) 0;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--white); border:1px solid var(--line); border-radius:3px;
}
/* Het aangeleverde logo is 160 px breed; niet groter tonen, anders wordt het wazig. */
.partner__logo{flex:none; width:150px; height:auto}
.partner__tekst{flex:1; min-width:15rem}
.prose .partner__tekst p{margin:0 0 1rem}
.prose .partner .btn{color:var(--ivory); border:0}

/* ---------- waarschuwing bij krediet ---------- */
/* Het officiële bord is 580 px breed; niet groter tonen dan 340 px, anders
   wordt het wazig op een scherm met hoge resolutie. */
.leenwaarschuwing{max-width:200px}
.leenwaarschuwing img{display:block; width:100%; height:auto}

/* ---------- blog ---------- */
.artikelen{display:grid; gap:clamp(2rem,3.5vw,3rem)}
@media(min-width:760px){ .artikelen{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .artikelen{grid-template-columns:repeat(3,1fr)} }
@media(min-width:760px){ .artikelen--2{grid-template-columns:repeat(2,1fr)} }

.artikel__link{display:block; color:inherit}
.artikel__beeld{
  margin:0 0 1.4rem; overflow:hidden; border-radius:3px;
  aspect-ratio:3 / 2; background:var(--sand);
}
.artikel__beeld img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--slow)}
.artikel__link:hover .artikel__beeld img{transform:scale(1.04)}

.artikel__datum{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600);
}
.artikel__titel{
  margin:.85rem 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1.5vw,1.4rem); line-height:1.3; color:var(--navy-800);
  transition:color .35s var(--ease);
}
.artikel__link:hover .artikel__titel{color:var(--gold-600)}
.artikel__kort{margin:.8rem 0 0; font-size:.95rem; line-height:1.65; color:var(--ink-soft)}
.artikel__meer{margin-top:1.2rem; display:inline-flex}

/* leesbare regellengte op een artikelpagina */
.artikel__body{max-width:44rem}
.artikel__voet{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-soft);
}

/* ---------- waarom ---------- */
.waarom{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:.95rem;
}
.waarom li{
  display:flex; align-items:flex-start; gap:.85rem;
  font-size:.97rem; line-height:1.6; color:var(--ink-soft);
}
.waarom svg{
  flex:none; width:19px; height:19px; margin-top:.18rem;
  color:var(--gold-600);
}
/* In .prose krijgt elke <li> een streepje mee; het vinkje is hier het teken. */
.prose .waarom li::before{content:none}
.prose .waarom li{padding-left:0}
/* De gegevenslijsten (adres, parkeren, openingstijden) hebben een eigen icoon;
   het streepje van de gewone opsomming moet daar niet bij. */
.prose .gegevens li{padding-left:0}
.prose .gegevens li::before{content:none}
.prose .waarom{gap:.95rem}
.section--navy .waarom li,.cta .waarom li{color:rgba(250,247,244,.82)}
.section--navy .waarom svg,.cta .waarom svg{color:var(--gold-400)}

/* ---------- verplichte waarschuwing bij cosmetische behandelingen (CCBA) ---------- */
.ccba{
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding:1.1rem 1.4rem;
  border:1px solid var(--line); border-left:2px solid var(--gold-500); border-radius:3px;
  background:var(--white);
  font-size:.86rem; line-height:1.65; color:var(--ink-soft); max-width:66ch;
}
.section--navy .ccba{
  background:rgba(250,247,244,.06); border-color:rgba(250,247,244,.18);
  border-left-color:var(--gold-400); color:rgba(250,247,244,.78);
}

/* ---------- prijslijst ---------- */
.legenda{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem;
  list-style:none; margin:0 0 clamp(2rem,3.5vw,3rem); padding:1.1rem 1.4rem;
  border:1px solid var(--line); border-radius:3px; background:var(--white);
  font-size:.85rem; color:var(--ink-soft);
}
.legenda li{display:flex; align-items:center; gap:.7rem}
.legenda span{
  display:grid; place-items:center; flex:none;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--cream); border:1px solid var(--line);
  font-size:.72rem; letter-spacing:.04em; color:var(--navy-800);
}
.prijsblok__kop{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-600); font-weight:400;
  margin:clamp(2rem,3.5vw,2.75rem) 0 .9rem;
}
.prijsblok__kop:first-of-type{margin-top:1.25rem}
.prijstabel__code{
  width:6.5rem; text-align:center !important; padding-right:1rem !important;
  color:var(--ink-soft); font-size:.85rem;
}
/* Toelichting onder een tarief, bijvoorbeeld waar de DBIR-registratie voor is. */
.prijstabel__bij{
  display:block; margin-top:.3rem; max-width:52ch;
  font-size:.8rem; line-height:1.55; color:var(--ink-soft);
}
.prijstabel a{color:var(--navy-800); border-bottom:1px solid var(--line)}
.prijstabel a:hover{border-color:var(--gold-500)}
.prijstabel__vraag{
  display:inline-block; margin-left:.6rem;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600); border:1px solid var(--gold-200); border-radius:100px;
  padding:.2rem .5rem; cursor:help; white-space:nowrap;
}

/* De slogan in de voettekst stond midden in een zin en viel daardoor weg.
   Nu een eigen regel, in het schreeflettertype van de kliniek. */
.footer__slogan{
  margin:0 0 .7rem; font-family:var(--serif); font-style:italic;
  font-size:1.15rem; line-height:1.35; color:var(--ivory);
}

/* ---------- locaties met kaart ---------- */
.locatie{display:grid; gap:clamp(1.8rem,3.5vw,2.75rem); align-items:start}
@media(min-width:900px){ .locatie{grid-template-columns:1fr 1fr} }
.locatie--volgende{margin-top:clamp(3rem,6vw,5rem)}

.kaart-blok{
  margin:0; position:relative; overflow:hidden;
  aspect-ratio:4/3; border:1px solid var(--line); border-radius:3px;
  background:var(--cream);
}
.kaart-blok iframe{display:block; width:100%; height:100%; border:0}
.kaart-blok__aanzet{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:2rem; text-align:center; color:var(--ink-soft);
}
.kaart-blok__aanzet svg{color:var(--gold-500)}
.kaart-blok__aanzet p{margin:0; font-size:.95rem; color:var(--navy-800)}
.kaart-blok__bij{max-width:30ch; font-size:.78rem !important; line-height:1.55; color:var(--ink-soft) !important}

/* ---------- folders (pdf) ---------- */
.folders{display:grid; gap:.9rem}
@media(min-width:760px){ .folders--raster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .folders--raster{grid-template-columns:repeat(3,1fr)} }

.folder{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.15rem 1.35rem; border:1px solid var(--line); border-radius:3px;
  background:var(--white); color:var(--navy-800);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.folder:hover{border-color:var(--gold-400); background:var(--cream)}
.folder--groot{max-width:52rem}
.folder__ico{color:var(--gold-500); flex:none; margin-top:.1rem}
.folder__tekst{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.folder__tekst strong{font-weight:500; line-height:1.35}
.folder__bij{font-size:.85rem; line-height:1.6; color:var(--ink-soft)}
.folder__soort{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-600);
}

/* de folders die onder 'Herstel en nazorg' op een behandelpagina staan */
.prose .folders{margin-top:1.3rem}
.prose .folder{text-decoration:none}
.prose .folder strong{color:var(--navy-800)}

/* ---------- de slogan als losse uitspraak ---------- */
/* Staat tussen twee tekstblokken in en moet daar duidelijk boven uit komen,
   maar niet met een kop worden verward. Vandaar geen kopstijl maar een eigen
   regel met gouden lijnen erboven en eronder. */
.slogan{
  margin:clamp(2.5rem,4.5vw,3.5rem) 0; padding:clamp(1.6rem,3vw,2.2rem) 0;
  border-top:1px solid var(--gold-200); border-bottom:1px solid var(--gold-200);
  text-align:center;
}
.slogan blockquote{margin:0}
.prose .slogan p{
  margin:0; font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.3; color:var(--navy-800);
}

/* ---------- citaat op een profielpagina ---------- */
.citaat{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0; padding:0 0 0 1.75rem;
  border-left:2px solid var(--gold-500);
}
.citaat p{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.35; color:var(--navy-800);
}
.citaat cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- bronvermelding bij beeld ---------- */
.bron{
  display:block; margin-top:.5rem;
  font-size:.68rem; letter-spacing:.1em; color:var(--ink-soft); opacity:.8;
}
.section--cream .bron{color:var(--ink-soft)}

/* ---------- uitgelicht blok op een behandelpagina ---------- */
.uitgelicht{
  margin:clamp(2.5rem,4vw,3.5rem) 0 0;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--cream); border:1px solid var(--line); border-left:2px solid var(--gold-500);
  border-radius:3px;
}
.uitgelicht h2{font-size:clamp(1.35rem,2vw,1.75rem); margin:0 0 1rem}
.uitgelicht p{margin:0 0 1em; color:var(--ink-soft); font-size:.97rem; line-height:1.75; max-width:64ch}
.uitgelicht p:last-child{margin-bottom:0}
.uitgelicht .bron{margin-top:1.2rem}
.uitgelicht .bron a{color:var(--navy-800); border-bottom:1px solid var(--line)}
.uitgelicht .bron a:hover{border-color:var(--gold-500)}

/* ---------- behandellijst op een specialismepagina ---------- */
.behandellijst{margin:1.25rem 0 0; display:grid; gap:0}
.behandellijst dt{
  padding:1.15rem 0 .35rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.35vw,1.2rem); color:var(--navy-800);
  border-top:1px solid var(--line);
}
.behandellijst dt:first-of-type{border-top:0; padding-top:.35rem}
.behandellijst dd{
  margin:0; padding:0 0 1.15rem;
  font-size:.95rem; line-height:1.75; color:var(--ink-soft); max-width:66ch;
}
.pijler{
  margin:1.5rem 0 0; padding:.9rem 1.2rem;
  border:1px solid var(--line); border-radius:100px; display:inline-block;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-600);
  background:var(--white);
}

/* ==========================================================================
   i-job: text logo (replaces the image marks) and form messages
   ========================================================================== */
.brand__mark--tekst{
  display:flex; align-items:flex-end; height:clamp(38px,4.4vw,52px);
  font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem,3.9vw,3rem);
  line-height:.8; letter-spacing:-.04em; color:var(--navy-800); position:relative;
  white-space:nowrap;
}
.brand__mark--tekst span:last-child{color:var(--gold-500); font-style:italic; margin-left:-.04em}
.brand__mark--tekst svg{position:absolute; left:-6%; bottom:-14%; width:112%; height:auto; color:var(--gold-500)}
.header.is-stuck .brand__mark--tekst{height:clamp(34px,3.6vw,42px); font-size:clamp(2rem,3.2vw,2.5rem)}
.brand__mark--tekst.brand__mark--wit{position:absolute; left:0; top:0; color:var(--ivory)}
.brand__mark--tekst.brand__mark--wit span:last-child,.brand__mark--tekst.brand__mark--wit svg{color:var(--gold-400)}
.footer__logo--tekst{
  height:auto; margin:0 0 1.5rem; font-family:var(--serif); font-weight:300;
  font-size:2.4rem; line-height:1; letter-spacing:-.01em; color:var(--ivory);
}
.footer__logo--tekst em{color:var(--gold-400)}

.ijob-form-success{
  margin:0 0 1.6rem; padding:1.2rem 1.4rem; border-radius:3px; font-size:.92rem; line-height:1.65;
  border:1px solid var(--gold-400); background:rgba(194,150,87,.07); color:var(--navy-800);
}
.ijob-form-errors{
  margin:0 0 1.6rem; padding:1.2rem 1.4rem 1.2rem 2.6rem; border-radius:3px; font-size:.92rem; line-height:1.65;
  border:1px solid #D8AFAA; background:rgba(180,69,60,.06); color:#8C332C;
}