/* ==========================================================================
   Fielo Cosmetics — kleurlaag over site.css, voor de hele site
   --------------------------------------------------------------------------
   Vijf kleuren, elk met één taak. Meer worden het er niet.

     terracotta  #965B38  de kopbalk, één sectie in het midden, en de voet
                          (die laatste een tint dieper). Drie banden die de
                          pagina vasthouden.
     oranje      #E47036  alles waar iemand op moet klikken, plus de icoontjes
                          en het poortmotief. Nergens als vlak.
     oudroze     #F3E2E0  de knop in de kopbalk, de balk met pluspunten onder
                          de hero, en het contactpaneel onderaan. Boven en
                          onder dezelfde tint, dat sluit de pagina.
     licht       creme en wit, wisselend per sectie, als rustige ondergrond.
     bijna-zwart alleen tekst.

   De hero houdt zijn foto op de achtergrond; dat is beeld, geen vlak.
   ========================================================================== */

:root{
  --terra:#965B38;        /* de band-kleur */
  --terra-diep:#7E4A2C;   /* een tint dieper, voor de voet */
  --op-terra:#FBF3EC;     /* tekst op terracotta */
  --op-terra-70:rgba(251,243,236,.76);
  --op-terra-45:rgba(251,243,236,.56);
  --terra-lijn:rgba(251,243,236,.2);
  --gloed:#E47036;        /* oranje: knoppen, icoontjes, het poortmotief */
  --gloed-dk:#C95C25;     /* dezelfde bij aanwijzen */
  --roze:#F3E2E0;         /* zacht oudroze: de pluspuntenbalk en het contactpaneel */
}

/* de bovenste strip is verwijderd; de ruimte die site.css ervoor reserveert
   moet dan ook op nul */
:root{ --util:0px }

/* ---------- kopbalk in terracotta ---------- */

.bar{background:var(--terra);border-bottom:0;box-shadow:0 1px 0 rgba(29,29,27,.08)}
.bar__in{gap:clamp(14px,2vw,30px)}
/* De losse links zijn tekst, de uitklapknoppen zijn knoppen met een pijltje.
   Zonder gelijke regelhoogte en uitlijning zakken de knoppen een paar pixels. */
.nav > a,.nav__item > .nav__top{
  display:inline-flex; align-items:center; line-height:1;
  font-size:.77rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  padding:0; margin:0;
}
.nav a,.nav__top{color:var(--op-terra-70)}
.nav a:hover,.nav__top:hover{color:var(--op-terra)}
.nav a[aria-current]{color:var(--op-terra);font-weight:500}
.burger{color:var(--op-terra)}
/* Het logo is koper op een doorzichtige achtergrond. Op terracotta valt dat
   weg, dus keren we het om naar wit. brightness(0) maakt eerst alles zwart,
   invert(1) maakt daar wit van; de doorzichtige delen blijven doorzichtig. */
.brand{display:inline-flex;align-items:center}
.brand img{height:clamp(46px,4.6vw,62px);
           filter:brightness(0) invert(1);opacity:.96}

/* De knop in de balk krijgt het zachte oudroze in plaats van oranje. Op de
   terracotta balk springt dat rustiger naar voren, en het maakt de knop in
   de kop herkenbaar los van de oranje knoppen in de pagina zelf. */
.bar .btn--fill{background:var(--roze);color:var(--ink);box-shadow:none}
.bar .btn--fill:hover{background:#FAF0EF}

/* ---------- uitklapmenu ---------- */

.nav{gap:clamp(10px,1.5vw,22px)}
/* De omhulling van een uitklapmenu is een div. Als blok krijgt die de
   regelhoogte van 16px-tekst mee, waardoor de knop erin twee pixels zakt
   ten opzichte van de gewone links. Zelf een flexbox maken lost dat op. */
.nav > .nav__item{position:relative;display:flex;align-items:center;line-height:1}
.nav__item{position:relative}
.nav__top{
  display:inline-flex; align-items:center; gap:.42em;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:.77rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  transition:color .2s ease;
}
.nav__item > .nav__top svg{width:9px;height:6px;flex:none;
   transition:transform .22s var(--ease);position:relative;top:1px}
.nav__item[data-open="true"] > .nav__top{color:var(--op-terra)}
.nav__item[data-open="true"] > .nav__top svg{transform:rotate(180deg)}

.nav__menu{
  position:absolute; left:-14px; top:calc(100% + 14px); z-index:80;
  min-width:15.5rem; padding:.5rem 0;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 20px 50px -24px rgba(29,29,27,.42);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s var(--ease), visibility .18s;
}
/* onzichtbare brug, zodat het menu niet dichtklapt tussen knop en menu */
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item[data-open="true"] > .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}

.nav__menu a,.nav__menu .nav__top{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  width:100%; padding:.62rem 1.15rem;
  font-size:.83rem; letter-spacing:.01em; text-transform:none; font-weight:400;
  color:var(--ink-70); white-space:nowrap;
}
.nav__menu a:hover,.nav__menu .nav__top:hover{background:var(--cream);color:var(--copper-dk)}

.nav__sub > .nav__menu{left:100%;top:-.5rem;margin-left:1px}
.nav__sub > .nav__menu::before{left:-14px;right:auto;top:0;bottom:0;width:14px;height:auto}
.nav__sub > .nav__top svg{transform:rotate(-90deg)}
.nav__sub[data-open="true"] > .nav__top svg{transform:rotate(-90deg)}

/* ---------- mobiel menu ---------- */

.sheet{background:var(--terra);color:var(--op-terra);align-items:flex-start;
       justify-content:flex-start;padding:76px clamp(24px,7vw,48px) 40px;
       overflow-y:auto;gap:0}
.sheet__close{color:var(--op-terra)}
.sheet a{color:var(--op-terra);font-size:1.05rem;padding:11px 0}
.sheet a:hover{color:#fff}
.sheet > a{width:100%;border-bottom:1px solid var(--terra-lijn)}
.sheet__groep{width:100%;border-bottom:1px solid var(--terra-lijn)}
.sheet__groep > button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;padding:13px 0;font:inherit;font-size:1.05rem;
  color:var(--op-terra);cursor:pointer;
}
.sheet__groep > button svg{width:11px;height:7px;transition:transform .22s var(--ease)}
.sheet__groep[data-open="true"] > button svg{transform:rotate(180deg)}
.sheet__groep > div{display:none;padding:0 0 10px 14px;
                    border-left:1px solid var(--terra-lijn);margin-left:2px}
.sheet__groep[data-open="true"] > div{display:block}
.sheet__groep a{font-size:.95rem;color:var(--op-terra-70);padding:8px 0;display:block;border:0}
.sheet__diep{padding-left:14px;border-left:1px solid var(--terra-lijn);margin-left:2px}
.sheet .sub{color:var(--op-terra);border-bottom:0;margin-top:20px}

/* ---------- hero: beeld blijft, maar warmer en minder zwart ---------- */

/* Dezelfde donkere sluier als de koppen met foto op de binnenpagina's
   (.kop__beeld), met een zweem warmte in plaats van bruin. De koperlaag
   (.hero__tint) staat uit, anders trekt die de foto weer naar oranje.
   Rechts loopt de sluier verder weg, zodat het beeld daar vrij blijft. */
.hero{background:#1D1D1B}
.hero__tint{display:none}
.hero__scrim{background:
  linear-gradient(100deg,
    rgba(24,20,18,.9) 0%, rgba(24,20,18,.8) 30%, rgba(24,20,18,.48) 60%,
    rgba(24,20,18,.2) 100%),
  linear-gradient(to top, rgba(24,20,18,.5) 0%, rgba(24,20,18,0) 45%)}
.hero{min-height:min(82vh,740px)}
.hero__copy{color:var(--op-terra)}
.hero__sub{color:var(--op-terra)}
.hero__body{color:var(--op-terra-70)}
/* titel op een regel in het sierlijke lettertype; de ondertitel idem, schuin,
   en met ruimte eronder zodat de tekst hoger staat dan de knoppen */
.hero__copy{max-width:none}
.hero h1{font-family:var(--f-mark);font-weight:500;letter-spacing:.005em;white-space:nowrap;
         font-size:clamp(1.3rem,7.4vw,4.4rem)}
.hero__sub{font-family:var(--f-mark);font-style:italic;font-weight:500;
           font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.25;
           margin-top:.7em;margin-bottom:calc(clamp(2rem,13vh,9rem) - .7em)}
/* het streepje boven de titel is hetzelfde oranje als de knoppen, zodat er
   geen negende kleur bijkomt */
.hero .eyebrow--light{color:var(--gloed)}
.hero .eyebrow--light::before{background:var(--gloed)}
.hero__chip{background:rgba(251,243,236,.92);color:var(--ink-70);border:0}
.hero__chip .dots{color:var(--copper-dk)}

/* ---------- knoppen ----------
   Alles waar iemand op klikt is oranje. Daarmee is er maar één signaal op de
   pagina en hoeft bijna-zwart nergens meer als vlak. De tweede knop is een
   omlijning, zodat de twee niet met elkaar concurreren. */

.btn--fill{background:var(--gloed);color:#fff}
.btn--fill:hover{background:var(--gloed-dk)}
.btn--ink{background:var(--gloed);border-color:var(--gloed);color:#fff}
.btn--ink:hover{background:var(--gloed-dk);border-color:var(--gloed-dk);color:#fff}

/* ---------- secties: lichter en krapper ---------- */

.sect{padding-block:clamp(44px,5.6vw,84px)}
.sect--tight{padding-block:clamp(30px,3.6vw,52px)}
.sect--wit{background:var(--white)}

/* de enige oudroze band op de pagina, direct onder de hero */
.usp{background:var(--roze);border-bottom:0}
.usp__cell{border-left-color:rgba(29,29,27,.12)}
.usp__icon{color:var(--gloed)}
.usp__cell p{color:rgba(29,29,27,.7)}
/* drie pluspunten, alleen koppen (27-09-2026); ook op tablet naast elkaar */
@media (min-width:521px){
  .usp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:521px) and (max-width:900px){
  .usp__cell{border-top:0;border-left:1px solid rgba(29,29,27,.12);padding-inline:clamp(12px,2.4vw,24px)}
  .usp__cell:first-child{border-left:0;padding-left:0}
}
@media (max-width:520px){ .usp__cell:nth-child(2){border-top:1px solid rgba(29,29,27,.12)} }

/* de ene terracotta sectie in het midden */
.sect--terra{background:var(--terra);color:var(--op-terra)}
.sect--terra .duo__body p,.sect--terra .shead p{color:var(--op-terra-70)}
.sect--terra .eyebrow--light{color:var(--gloed)}
.sect--terra .eyebrow--light::before{background:var(--gloed)}
.sect--terra .duo__art figure{border:0}
.duo__badge{background:var(--gloed);color:#fff}

/* knop op terracotta: een lichte omlijning, geen wit vlak */
/* Op de terracotta sectie staat maar één knop, dus die mag gevuld zijn:
   oudroze, net als in de kopbalk. In de hero staan er twee naast elkaar;
   daar blijft de tweede een lichte omlijning zodat ze niet concurreren. */
.btn--op-terra{background:var(--roze);border-color:var(--roze);color:var(--ink)}
.btn--op-terra:hover{background:#FAF0EF;border-color:#FAF0EF;color:var(--ink)}
.hero .btn--ghost{border-color:var(--op-terra-45);color:var(--op-terra);background:none}
.hero .btn--ghost:hover{border-color:var(--op-terra);color:#fff}

/* ---------- het poortmotief ----------
   Een omtrek van een poort: rechthoek met volledig ronde bovenkant, geen
   vulling, twee pixels dik. Hij komt half buiten beeld aan de rechterkant,
   zodat het een achtergrondvorm blijft en geen plaatje wordt.
   Op een smal scherm laten we hem weg; daar is er geen ruimte voor. */
.sect--poort{position:relative;overflow:hidden;isolation:isolate}
.sect--poort > .wrap{position:relative;z-index:1}
.sect--poort::before{
  content:""; position:absolute; pointer-events:none; z-index:0;
  border:2px solid var(--gloed); border-radius:999px 999px 0 0;
}
/* de grote poort, half buiten beeld */
.sect--poort::before{
  right:clamp(-120px,-6vw,-40px); bottom:0;
  width:clamp(200px,25vw,340px); height:clamp(280px,38vw,500px);
  opacity:.55;
}
/* De kleinere poort staat niet meer hier maar onderaan 'Even voorstellen'
   (.sect--boogje), gevuld in de kleur van de dienstensectie eronder. */
@media (max-width:820px){ .sect--poort::before{display:none} }

/* Dezelfde poort keert terug in de voet, gespiegeld naar links en groter,
   zodat de vorm de pagina van boven tot onder doorloopt. */
.ftr::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  border:2px solid var(--gloed); border-radius:999px 999px 0 0;
  left:clamp(-90px,-4vw,-30px); bottom:0;
  width:clamp(220px,26vw,380px); height:clamp(300px,40vw,520px);
  opacity:.26;
}
@media (max-width:900px){ .ftr::before{display:none} }

/* ---------- beeld naast tekst ---------- */

.duo{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
     gap:clamp(24px,3.6vw,64px)}
.duo__art figure{aspect-ratio:auto;height:clamp(270px,32vw,420px);
                 border:1px solid var(--line)}
.duo--portret .duo__art figure{height:clamp(340px,44vw,560px)}
/* het portret is staand en het gezicht zit hoog in het beeld; zonder deze
   regel snijdt de uitsnede het hoofd eraf */
.duo--portret .duo__art img{object-position:58% 18%}
.duo__body{gap:1rem}
.duo__body p{max-width:52ch;line-height:1.72}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo__art figure,.duo--portret .duo__art figure{height:clamp(260px,64vw,380px)}
}

/* ---------- de vier behandelingen: kader, langwerpig beeld, trapsgewijs ---------- */

.diensten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
          gap:clamp(14px,1.7vw,26px);align-items:start}
/* het trapje: elke kaart zakt een stapje verder weg */
.diensten > *:nth-child(2){margin-top:clamp(16px,2.8vw,44px)}
.diensten > *:nth-child(3){margin-top:clamp(32px,5.6vw,88px)}
.diensten > *:nth-child(4){margin-top:clamp(48px,8.4vw,132px)}

.dienst{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:clamp(11px,1vw,14px);
  transition:border-color .25s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.dienst:hover{border-color:var(--taupe);transform:translateY(-4px);
              box-shadow:0 22px 44px -26px rgba(29,29,27,.45)}
/* langwerpig en dominant: het beeld is het grootste deel van de kaart */
.dienst figure{
  margin:0 0 1.05rem; overflow:hidden; border-radius:2px; aspect-ratio:3/4.5;
  background:var(--cream-2); position:relative;
}
.dienst img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dienst:hover img{transform:scale(1.05)}
.dienst__no{
  position:absolute; left:0; top:0; z-index:2;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--gloed); color:#fff;
  font-size:.7rem; font-weight:600; letter-spacing:.06em;
}
.dienst h3{font-size:1.08rem;margin-bottom:.42rem;padding-inline:.15rem}
.dienst p{font-size:.87rem;color:var(--ink-70);line-height:1.6;
          margin-bottom:.85rem;padding-inline:.15rem}
.dienst__vanaf{font-size:.81rem;color:var(--ink-45);margin-bottom:1rem;padding-inline:.15rem}
.dienst__vanaf b{color:var(--ink);font-weight:500}
.dienst .btn{margin-top:auto;width:100%;font-size:.7rem;padding:.74rem 1rem;
             white-space:nowrap}
@media (max-width:1040px){
  .diensten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diensten > *:nth-child(2){margin-top:clamp(20px,5vw,44px)}
  .diensten > *:nth-child(3){margin-top:0}
  .diensten > *:nth-child(4){margin-top:clamp(20px,5vw,44px)}
  .dienst figure{aspect-ratio:3/4}
}
@media (max-width:560px){
  .diensten{grid-template-columns:1fr}
  .diensten > *{margin-top:0!important}
  .dienst figure{aspect-ratio:4/3}
}

/* ---------- kentallen ---------- */

.kentallen{display:flex;gap:clamp(20px,3.4vw,48px);flex-wrap:wrap;margin-top:.3rem}
.kental b{display:block;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;
          letter-spacing:-.04em}
.kental span{font-size:.79rem}

/* ---------- bezoek: licht paneel ---------- */

.visit__panel{background:var(--roze);color:var(--ink);
              border-top:0;border-bottom:0}
.visit__panel .eyebrow--light{color:var(--copper-dk)}
.visit__panel .eyebrow--light::before{background:var(--copper)}
.visit__panel p{color:var(--ink-70)!important}
.visit dt{color:var(--ink-45)}
.visit dd,.visit dd a{color:var(--ink)}

/* ---------- voet in diepe terracotta ---------- */

.ftr{
  background:var(--terra-diep); color:var(--op-terra-70);
  padding-block:clamp(46px,5.4vw,74px) 20px;
  position:relative; overflow:hidden; isolation:isolate;
}
.ftr > .wrap{position:relative;z-index:1}

/* De bovenkant van het logo ligt op één lijn met de bovenkant van de
   kolomkoppen. Alle kolommen beginnen dus gewoon bovenaan; de slogan zakt
   mee onder het logo. Dat scheelt hoogte, dus de voet mag krapper. */
.ftr{--ftr-logo:clamp(74px,7vw,92px)}
.ftr__grid{align-items:start}
.ftr__brand{background:none;gap:.9rem}
.ftr__brand img{height:var(--ftr-logo);width:auto;margin-top:0;
                filter:brightness(0) invert(1);opacity:.92}

.ftr__pay{color:var(--op-terra);font-size:.62rem;letter-spacing:.22em;line-height:1.7;margin:0}
/* het volledige logo met de slogan als onderdeel ervan (28-09-2026); de
   slogan maakt het plaatje hoger, zo blijft het beeldmerk even groot */
.ftr__brand img[src$="fielo-logo-full.png"]{height:calc(var(--ftr-logo) * 1144 / 1058)}
.ftr h4{color:var(--op-terra);margin:0 0 1rem;font-size:.74rem;letter-spacing:.2em}
.ftr li{color:var(--op-terra-70)}
.ftr li a:hover{color:#fff}

/* de voorwaarden rond aanbetaling en annuleren: klein, zonder kader,
   en dicht tegen de scheidingslijn onderaan */
.ftr__klein{
  margin:clamp(34px,4.4vw,58px) 0 0;
  font-size:.76rem; line-height:1.6; color:var(--op-terra-45);
  max-width:74ch;
}
.ftr__base{margin-top:14px;padding-top:18px;
           border-top:1px solid var(--terra-lijn);color:var(--op-terra-45)}
.ftr__base a{color:var(--op-terra-45)}
.ftr__base a:hover{color:var(--op-terra)}

/* ankerpunten niet onder de vaste kopbalk laten verdwijnen */
section[id]{scroll-margin-top:calc(var(--bar) + 14px)}


/* ==========================================================================
   Onderdelen voor de binnenpagina's
   --------------------------------------------------------------------------
   Dezelfde taal als de homepagina: terracotta banden, oranje voor alles wat
   klikbaar is, oudroze als zachte tussenkleur, en de poort als terugkerende
   vorm. Geen nieuwe kleuren, geen nieuwe lettertypen.
   ========================================================================== */

/* ---------- kop van een binnenpagina ---------- */

.kop{
  background:var(--terra); color:var(--op-terra);
  padding-block:clamp(46px,6vw,88px) clamp(42px,5.4vw,78px);
  position:relative; overflow:hidden; isolation:isolate;
}
.kop > .wrap{position:relative;z-index:1}
/* de poort komt half achter de titel vandaan */
.kop::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  border:2px solid var(--gloed); border-radius:999px 999px 0 0;
  right:clamp(-70px,-3vw,-20px); bottom:0;
  width:clamp(180px,22vw,300px); height:clamp(240px,32vw,420px);
  opacity:.42;
}
@media (max-width:820px){ .kop::before{display:none} }

.kruimel{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
         font-size:.74rem;letter-spacing:.08em;color:var(--op-terra-45);margin-bottom:1.4rem}
.kruimel a{color:var(--op-terra-45)}
.kruimel a:hover{color:var(--op-terra)}
.kruimel span{opacity:.5}

.kop h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.035em;
        max-width:18ch;line-height:1.08}
.kop h1 .mark{font-family:var(--f-mark);font-weight:500;letter-spacing:.005em}
.kop__intro{margin-top:1.1rem;max-width:54ch;color:var(--op-terra-70);
            font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.68}

/* ---------- leestekst ---------- */

.lees{max-width:64ch}
.lees > * + *{margin-top:1.05rem}
.lees p{color:var(--ink-70);line-height:1.78}
.lees h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-top:2.4rem}
.lees h3{font-size:1.12rem;margin-top:1.9rem}
.lees ul{padding-left:1.15em;list-style:disc}
.lees li{margin-bottom:.5rem;color:var(--ink-70);line-height:1.7}
.lees li::marker{color:var(--gloed)}
.lees a{color:var(--gloed-dk);text-decoration:underline;text-underline-offset:3px}
.lees strong,.lees b{font-weight:500;color:var(--ink)}

/* tekst naast een smalle zijkolom */
.metzij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);
        gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){ .metzij{grid-template-columns:1fr} }

.zijkaart{background:var(--white);border:1px solid var(--line);border-radius:2px;
          padding:clamp(18px,2vw,26px);position:sticky;top:calc(var(--bar) + 18px)}
.zijkaart h4{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
             color:var(--gloed-dk);margin:0 0 .9rem}
.zijkaart p{font-size:.9rem;color:var(--ink-70);line-height:1.66;margin-bottom:1rem}
.zijkaart .btn{width:100%}
.zijkaart dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;
             font-size:.88rem;margin:0 0 1.1rem}
.zijkaart dt{color:var(--ink-45)}
.zijkaart dd{margin:0;font-weight:500}
@media (max-width:900px){ .zijkaart{position:static} }

/* ---------- technieken naast elkaar ---------- */

.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
      gap:clamp(16px,2vw,28px)}
.tech__kaart{background:var(--white);border:1px solid var(--line);border-radius:2px;
             padding:clamp(12px,1.1vw,15px);display:flex;flex-direction:column}
.tech__kaart figure{margin:0 0 1rem;overflow:hidden;border-radius:2px;
                    aspect-ratio:3/2.3;background:var(--cream-2);position:relative}
.tech__kaart img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tech__kaart:hover img{transform:scale(1.04)}
.tech__kaart h3{font-size:1.06rem;margin-bottom:.45rem;padding-inline:.15rem}
.tech__kaart p{font-size:.89rem;color:var(--ink-70);line-height:1.62;padding-inline:.15rem}
.tech__prijs{margin-top:auto;padding:.9rem .15rem 0;font-size:.85rem;color:var(--ink-45)}
.tech__prijs b{color:var(--ink);font-weight:500}

/* ---------- prijstabel ---------- */

.prijsblok + .prijsblok{margin-top:clamp(30px,3.6vw,52px)}
.prijsblok h3{font-size:1.16rem;margin-bottom:.35rem}
.prijsblok .bij{font-size:.85rem;color:var(--ink-45);margin-bottom:1rem}
.prijsrij{display:grid;grid-template-columns:minmax(0,1fr) 7rem 8rem 7rem;
          align-items:baseline;gap:.3rem 1.2rem;padding-block:.95rem;
          border-bottom:1px solid var(--line);font-size:.95rem}
.prijsrij--kop{border-bottom:1px solid var(--ink);padding-block:.55rem;
               font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.prijsrij b{font-weight:500}
.prijsrij .bedrag{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.prijsrij .duur{color:var(--ink-45);font-size:.88rem}
.prijsrij .touch{color:var(--ink-45);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:760px){
  .prijsrij,.prijsrij--kop{grid-template-columns:minmax(0,1fr) auto}
  .prijsrij .duur,.prijsrij .touch{grid-column:1 / -1;font-size:.82rem}
  .prijsrij--kop span:nth-child(n+3){display:none}
}

/* ---------- lijst met richtlijnen ---------- */

.regels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
        gap:clamp(16px,2vw,26px);align-items:start}
.regelkaart{background:var(--white);border:1px solid var(--line);border-radius:2px;
            padding:clamp(20px,2.2vw,30px)}
.regelkaart--roze{background:var(--roze);border-color:transparent}
.regelkaart h3{font-size:1.04rem;margin-bottom:.2rem}
.regelkaart .termijn{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
                     color:var(--gloed-dk);margin-bottom:.9rem;display:block}
.regelkaart ul{margin:0;padding-left:1.1em;list-style:none}
.regelkaart li{position:relative;margin-bottom:.6rem;font-size:.9rem;
               color:var(--ink-70);line-height:1.62}
.regelkaart li::before{content:"";position:absolute;left:-1.1em;top:.62em;
                       width:6px;height:6px;border:1.5px solid var(--gloed);
                       border-radius:999px 999px 0 0}

/* ---------- afsluitende oproep ---------- */

.slot{background:var(--roze);padding-block:clamp(38px,4.6vw,66px)}
.slot__in{display:flex;align-items:center;justify-content:space-between;
          gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.slot h2{font-size:clamp(1.4rem,2.4vw,2rem);max-width:20ch}
.slot p{color:var(--ink-70);max-width:46ch;margin-top:.5rem;font-size:.97rem}
.slot__knoppen{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- doorverwijzingen onderaan ---------- */

.verder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
        gap:clamp(12px,1.4vw,20px)}
.verder a{display:flex;flex-direction:column;gap:.35rem;
          background:var(--white);border:1px solid var(--line);border-radius:2px;
          padding:clamp(16px,1.8vw,22px);transition:border-color .25s var(--ease),
          transform .25s var(--ease)}
.verder a:hover{border-color:var(--gloed);transform:translateY(-3px)}
.verder span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gloed-dk)}
.verder b{font-weight:500;font-size:1rem}


/* ---------- contactpagina ---------- */

.contactgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
             gap:clamp(26px,3.6vw,60px);align-items:start}
@media (max-width:900px){ .contactgrid{grid-template-columns:1fr} }

.formulier{display:flex;flex-direction:column;gap:1.05rem;max-width:38rem}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:560px){ .veldrij{grid-template-columns:1fr} }
.formulier .veld{display:flex;flex-direction:column;gap:.4rem}
.formulier label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.formulier .moet{color:var(--gloed)}
.formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],
.formulier select,.formulier textarea{
  font:inherit;font-size:.96rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:.78rem .9rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.formulier textarea{resize:vertical;min-height:8rem;line-height:1.6}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{
  outline:0;border-color:var(--gloed);box-shadow:0 0 0 3px rgba(228,112,54,.16)}
.formulier .hint{font-size:.8rem;color:var(--ink-45);letter-spacing:0;text-transform:none}

.akkoordveld{display:flex;gap:.8rem;align-items:flex-start;
             background:var(--roze);border-radius:2px;padding:1rem 1.1rem;
             font-size:.86rem;line-height:1.6;color:var(--ink-70);
             letter-spacing:0;text-transform:none}
.akkoordveld input{margin-top:.22rem;accent-color:var(--gloed);width:17px;height:17px;flex:none}
.akkoordveld b{color:var(--ink);font-weight:500}
.akkoordveld a{color:var(--gloed-dk);text-decoration:underline;text-underline-offset:3px}

.formfout{background:#FBE9E4;border-left:3px solid #A8452F;color:#8C3823;
          padding:.8rem 1rem;font-size:.88rem;line-height:1.55}
.formmelding{background:var(--roze);border-left:3px solid var(--gloed);
             padding:1rem 1.2rem;font-size:.92rem;line-height:1.6;color:var(--ink-70);
             max-width:38rem;margin-bottom:1.4rem}
.formmelding b{color:var(--ink);font-weight:500}

/* het veld dat alleen spamrobots invullen */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contactzij .zijkaart dl{margin-bottom:1rem}
.stappen{margin:0 0 1rem;padding-left:1.3em;list-style:decimal;
         font-size:.89rem;color:var(--ink-70);line-height:1.62}
.stappen li{margin-bottom:.5rem}
.stappen li::marker{color:var(--gloed-dk);font-weight:500}

.salonbeeld{margin:0;overflow:hidden;border-radius:2px;
            aspect-ratio:21/8;background:var(--cream-2)}
.salonbeeld img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){ .salonbeeld{aspect-ratio:3/2} }


/* ==========================================================================
   Tweak: de vier diensten als boog (volgens Context/Screenshot)
   Het trapje en de vier kolommen blijven; de kaart zelf krijgt een boog,
   de tekst is gecentreerd en er staat geen nummer meer bij.
   ========================================================================== */

.dienst{border-radius:999px 999px 4px 4px;padding:clamp(10px,1vw,14px);text-align:center;
        border-color:rgba(150,91,56,.14)}
.dienst:hover{border-color:var(--copper)}
.dienst figure{border-radius:999px 999px 0 0;margin-bottom:0}
.dienst__soort{display:block;margin:1.2rem 0 .35rem;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper-dk)}
.dienst h3{font-size:clamp(1.05rem,1.35vw,1.28rem);margin-bottom:.55rem}
.dienst p{padding-inline:.4rem}
.dienst__vanaf{margin-bottom:1.1rem}
.dienst__meer{margin:auto auto .6rem;display:inline-flex;align-items:center;gap:.8rem;
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.dienst__meer i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(150,91,56,.3);color:var(--gloed-dk);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.dienst__meer svg{transition:transform .3s var(--ease)}
.dienst:hover .dienst__meer i,.dienst__meer:hover i{background:var(--gloed);border-color:var(--gloed);color:#fff}
.dienst__meer:hover svg{transform:translateX(3px)}
/* de hele kaart klikbaar via de link */
.dienst{position:relative}
.dienst__meer::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ==========================================================================
   Tweak: beeld in de bruine sectie (volgens Context/Screenshot)
   Rechthoekig beeld met label, zacht oudroze rondje linksonder erachter.
   ========================================================================== */

/* het beeld blijft rechthoekig, zoals bij 'Over mij'; alleen het rondje komt erbij */
.sect--terra .duo__art{isolation:isolate}
.sect--terra .duo__art figure{position:relative;z-index:1}
.sect--terra .duo__art::before{content:"";position:absolute;z-index:0;
  width:44%;aspect-ratio:1;border-radius:50%;left:-7%;bottom:-12%;
  background:var(--roze);opacity:.28}
.sect--terra .duo__badge{z-index:3}


/* ==========================================================================
   Binnenpagina's
   --------------------------------------------------------------------------
   Kop met foto en sluier (of oranje als er geen foto is), een gewoon
   kruimelpad met bolletjes, technieken als boogkaarten (zelfde vorm als de
   diensten op de homepagina, zonder trapje) en de andere diensten onderaan.
   ========================================================================== */

/* ---------- actieve tab in de kopbalk: het oudroze van de knop ---------- */

.nav > a[aria-current],
.nav > .nav__item > .nav__top.is-actief{color:var(--roze);font-weight:500}

/* ---------- kop met foto: zwarte sluier, een zweem warmte ---------- */

.kop--beeld{background:#1D1D1B;padding-block:clamp(64px,8.4vw,128px) clamp(56px,7.4vw,112px)}
.kop__beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kop__beeld img{width:100%;height:100%;object-fit:cover}
.kop__beeld::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(24,20,18,.9) 0%,rgba(24,20,18,.8) 30%,rgba(24,20,18,.48) 60%,rgba(24,20,18,.2) 100%),
  linear-gradient(to top,rgba(24,20,18,.5) 0%,rgba(24,20,18,0) 45%)}
.kop--beeld .kop__intro{color:rgba(255,255,255,.84)}
@media (max-width:700px){
  .kop__beeld::after{background:linear-gradient(180deg,rgba(24,20,18,.7) 0%,rgba(24,20,18,.86) 100%)}
}

/* ---------- kruimelpad: gewoon tekst, bolletje ertussen ---------- */

.kruimel{margin-bottom:1.4rem;font-size:.76rem;letter-spacing:.06em;color:var(--op-terra-70)}
.kruimel ol{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin:0;padding:0;list-style:none}
.kruimel li{display:inline-flex;align-items:center}
.kruimel li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--roze);margin:0 .75rem}
.kruimel a,.kruimel span{color:var(--op-terra-70);opacity:1}
.kruimel a:hover{color:#fff}
.kruimel [aria-current]{color:var(--op-terra);font-weight:500}

/* ---------- voor/na links, technieken rechts ----------
   Spiegelbeeld van de sectie erboven (tekst links, 'in het kort' rechts). */

.techvergelijk{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.techvergelijk__beeld{position:sticky;top:calc(var(--bar) + 24px)}
.techvergelijk .ba{aspect-ratio:4/5}
.techvergelijk__onder{margin-top:.8rem;font-size:.82rem;color:var(--ink-45)}
.techvergelijk__onder a{color:var(--gloed-dk);text-decoration:underline;text-underline-offset:3px}
.techvergelijk__tekst{max-width:62ch}
.techvergelijk__tekst h2{font-size:clamp(1.7rem,3.3vw,2.7rem);margin:1.1rem 0 0}
.techvergelijk__intro{margin-top:1rem;color:var(--ink-70);line-height:1.72}
.techlijst{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.techlijst__item{padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--line)}
.techlijst__item h3{display:flex;align-items:center;gap:.65rem;font-size:clamp(1.08rem,1.4vw,1.25rem);margin-bottom:.5rem}
.techlijst__item h3::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gloed)}
.techlijst__item p{color:var(--ink-70);line-height:1.72;font-size:.95rem}
.techlijst__item .tech__prijs{display:block;margin-top:.6rem;padding:0;font-size:.86rem;color:var(--ink-45)}
.techlijst__item .tech__prijs b{color:var(--ink);font-weight:500}
@media (max-width:860px){
  .techvergelijk{grid-template-columns:1fr}
  .techvergelijk__beeld{position:static;max-width:26rem}
}

/* ---------- doorverwijzingen onderaan ----------
   Zelfde kaartstijl als 'in het kort': wit, dunne lijn, rechte hoeken, pijl
   rechts. Bij de diensten met een rond fotootje links; op de info- en
   contactpagina's zonder foto, zakelijker. */

.sect--verder{background:var(--cream-2)}
.verder__kop{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-bottom:clamp(20px,2.4vw,30px)}
.verder__kop h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.verder .verder__dienst{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;
  padding:14px 16px;border-radius:2px}
.verder--info .verder__dienst{padding:18px 18px 18px clamp(18px,2vw,24px);min-height:88px}
.verder--diensten{grid-template-columns:repeat(4,minmax(0,1fr))}
.verder--info{grid-template-columns:repeat(3,minmax(0,1fr))}
.verder--diensten figure{flex:none;margin:0;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--cream-2)}
.verder--diensten img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.verder--diensten .verder__dienst:hover img{transform:scale(1.08)}
.verder .verder__tekst{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1;
  font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--ink)}
.verder .verder__dienst b{font-size:1rem;line-height:1.2}
.verder__pijl{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(150,91,56,.3);color:var(--gloed-dk);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.verder__pijl svg{transition:transform .3s var(--ease)}
.verder__dienst:hover .verder__pijl{background:var(--gloed);border-color:var(--gloed);color:#fff}
.verder__dienst:hover .verder__pijl svg{transform:translateX(3px)}
@media (max-width:1100px){ .verder--diensten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .verder--info{grid-template-columns:1fr} }
@media (max-width:560px){ .verder--diensten{grid-template-columns:1fr} }

/* ---------- bezoekblok op binnenpagina's: wit (op de homepagina blijft het oudroze) ---------- */

.visit--wit .visit__panel{background:var(--white)}

/* ---------- contact: kaartje met de locatie ---------- */

.locatie{margin-top:clamp(14px,1.6vw,20px);background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.locatie iframe{display:block;width:100%;height:260px;border:0;filter:saturate(.85)}
.locatie__route{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(18px,2vw,24px);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gloed-dk);border-top:1px solid var(--line)}
.locatie__route:hover{color:var(--ink)}

/* ---------- prijzen: elk blok als kaart met een oudroze kopbalk ---------- */

.prijsblok{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.prijsblok + .prijsblok{margin-top:clamp(22px,2.6vw,34px)}
.prijsblok__kop{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.3rem 1.4rem;
  background:var(--roze);padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px)}
.prijsblok__kop h3{display:flex;align-items:center;gap:.65rem;margin:0;font-size:clamp(1.12rem,1.5vw,1.3rem)}
.prijsblok__kop h3::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gloed)}
.prijsblok__kop .bij{margin:0;color:var(--ink-70);font-size:.84rem}
.prijsblok .prijsrij{padding-inline:clamp(18px,2.2vw,28px);transition:background .2s ease}
.prijsblok .prijsrij:last-child{border-bottom:0}
.prijsblok .prijsrij:not(.prijsrij--kop):hover{background:var(--cream)}
.prijsblok .prijsrij--kop{border-bottom:1px solid var(--line);color:var(--copper-dk);padding-block:.8rem}
.prijsblok .prijsrij .bedrag{color:var(--copper-dk);font-weight:600;font-size:1rem}
.prijsblok .prijsrij .touch:not(:empty){justify-self:start;background:var(--cream-2);color:var(--ink-70);
  border-radius:999px;padding:.18rem .7rem;font-size:.82rem}

/* ---------- zijkolom met meerdere kaartjes (prijzen) ---------- */

.zijkolom{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);position:sticky;top:calc(var(--bar) + 18px)}
.zijkolom .zijkaart{position:static}
.zijkolom .zijkaart p:last-child{margin-bottom:0}
@media (max-width:900px){ .zijkolom{position:static} }

/* ---------- homepagina: boogje onderaan 'Even voorstellen' ----------
   Gevuld in dezelfde crème als de dienstensectie eronder, zodat de boog uit
   die sectie omhoog lijkt te komen. Zelfde maat en plek als de kleine poort
   die eerst in de terracotta sectie stond, maar verder naar rechts en lager,
   zodat hij niet achter de tekst valt. */

.sect--boogje{position:relative;overflow:hidden;isolation:isolate}
.sect--boogje > .wrap{position:relative;z-index:1}
.sect--boogje::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(24px,4vw,60px); bottom:0;
  width:clamp(110px,14vw,190px); height:clamp(130px,15vw,210px);
  background:var(--cream); border-radius:999px 999px 0 0;
}
@media (max-width:1100px){ .sect--boogje::after{display:none} }

/* ---------- info PMU: rustige secties met foto ----------
   Rechthoekig beeld met een dunne lijn, geen bogen of bolletjes: deze
   pagina's zijn zakelijker dan de homepagina. */

.infoduo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.infoduo--flip .infoduo__beeld{order:2}
.infoduo--intro{margin-bottom:clamp(32px,4vw,56px)}
.infoduo__beeld{margin:0;overflow:hidden;border-radius:2px;border:1px solid var(--line);
  aspect-ratio:4/3.1;background:var(--cream-2)}
.infoduo__beeld img{width:100%;height:100%;object-fit:cover}
.infoduo .lees{max-width:60ch}
.infoduo .lees > h2:first-child,.infoduo .lees > .eyebrow + h2,.infokolommen .lees > h2:first-child{margin-top:0}
.infoduo .lees > .eyebrow{margin-bottom:-.2rem}
.infokolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.zijkaart--onder{position:static;margin-top:clamp(22px,2.6vw,32px);max-width:28rem}
@media (max-width:860px){
  .infoduo,.infokolommen{grid-template-columns:1fr}
  .infoduo--flip .infoduo__beeld{order:0}
  .infoduo__beeld{aspect-ratio:3/2}
}

/* ---------- behandelingenpagina: de kaarten van de homepagina, zonder trapje ---------- */

.diensten--overzicht{grid-template-columns:repeat(6,minmax(0,1fr))}
.diensten--overzicht > *{grid-column:span 2;margin-top:0!important}
.diensten--overzicht > *:nth-child(4){grid-column:2 / span 2}
/* drie kolommen zijn breder dan de vier op de homepagina: beeld iets minder hoog */
.diensten--overzicht .dienst figure{aspect-ratio:4/4.3}
@media (max-width:1040px){
  .diensten--overzicht{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diensten--overzicht > *,.diensten--overzicht > *:nth-child(4){grid-column:auto}
}
@media (max-width:560px){ .diensten--overzicht{grid-template-columns:1fr} }

/* ==========================================================================
   Contactpagina
   --------------------------------------------------------------------------
   Drie kanalen direct in beeld (half over de kop), het formulier in een
   witte kaart met de reactietijd erbij, en ernaast een gezicht en de kaart.
   ========================================================================== */

.sect--kanalen{padding-top:0}
/* extra lucht onder de kop, want de tegels schuiven er half overheen */
.kop--contact{padding-bottom:clamp(96px,11vw,160px)}
.kanalen{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(-64px,-4.4vw,-40px);margin-bottom:clamp(40px,5vw,72px)}
.kanaal{display:flex;align-items:center;gap:16px;background:var(--white);
  border:1px solid var(--line);border-radius:2px;padding:clamp(16px,1.8vw,22px);
  box-shadow:0 22px 44px -32px rgba(29,29,27,.45);
  transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.kanaal:hover{border-color:var(--gloed);transform:translateY(-3px);box-shadow:0 26px 48px -30px rgba(29,29,27,.5)}
.kanaal__icoon{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--roze);color:var(--gloed-dk)}
.kanaal__icoon svg{width:22px;height:22px}
.kanaal__tekst{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.kanaal__tekst small{font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gloed-dk)}
.kanaal__tekst b{font-size:1.02rem;font-weight:500;overflow-wrap:anywhere}
.kanaal__tekst span{font-size:.84rem;color:var(--ink-45)}
.kanaal:hover .verder__pijl{background:var(--gloed);border-color:var(--gloed);color:#fff}
.kanaal:hover .verder__pijl svg{transform:translateX(3px)}
@media (max-width:980px){ .kanalen{grid-template-columns:1fr;margin-top:clamp(-48px,-5vw,-28px)} }

.contactgrid{grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:clamp(22px,3vw,44px)}
.formkaart{background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:clamp(22px,3.2vw,44px)}
.formkaart__kop{display:flex;flex-direction:column;gap:.7rem;margin-bottom:clamp(20px,2.4vw,30px);
  padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--line)}
.formkaart__kop h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.formkaart__kop p:last-child{color:var(--ink-70);font-size:.95rem;line-height:1.65;max-width:52ch}
.formkaart .formulier{max-width:none}
.formkaart .formulier input[type=text],.formkaart .formulier input[type=email],.formkaart .formulier input[type=tel],
.formkaart .formulier select,.formkaart .formulier textarea{background:var(--cream)}
.formkaart .formulier input:focus,.formkaart .formulier select:focus,.formkaart .formulier textarea:focus{background:var(--white)}
.formkaart .formulier .btn{align-self:flex-start;min-width:13rem}

.contactzij{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.persoon{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.persoon__foto{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.persoon__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 22%}
.persoon__tekst{padding:clamp(18px,2vw,24px)}
.persoon__tekst b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.persoon__tekst span{display:block;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gloed-dk);margin-top:.2rem}
.persoon__tekst p{margin-top:.9rem;font-size:.92rem;line-height:1.66;color:var(--ink-70)}

.contactzij .locatie{margin-top:0}
.locatie iframe{height:220px}
.locatie__adres{display:flex;flex-direction:column;gap:.15rem;padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px) 0;font-size:.9rem;color:var(--ink-70)}
.locatie__adres b{color:var(--ink);font-weight:500}
.locatie__route{margin-top:.9rem}
@media (max-width:900px){ .contactgrid{grid-template-columns:1fr} }

/* ==========================================================================
   Voorzorg en nazorg: overzicht, tijdlijn en afvinklijstjes
   ========================================================================== */

.zorgintro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(28px,5vw,80px);align-items:start}
.zorgintro .lees{max-width:60ch}
.zorgintro .lees > .eyebrow{margin-bottom:-.2rem}
.zorgintro .lees > h2{margin-top:0}
@media (max-width:900px){ .zorgintro{grid-template-columns:1fr} }

/* overzicht van de stappen, klikbaar */
.stappenkaart{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:clamp(18px,2vw,26px)}
.stappenkaart h4{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gloed-dk);margin:0 0 .8rem}
.stappenkaart ol{list-style:none;margin:0;padding:0}
.stappenkaart li + li{border-top:1px solid var(--line)}
.stappenkaart a{display:flex;align-items:center;gap:14px;padding:.8rem 0;transition:color .2s ease}
.stappenkaart a:hover{color:var(--gloed-dk)}
.stappenkaart__nr{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--roze);color:var(--copper-dk);font-size:.82rem;font-weight:600}
.stappenkaart a:hover .stappenkaart__nr{background:var(--gloed);color:#fff}
.stappenkaart small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.stappenkaart b{display:block;font-weight:500;font-size:.96rem;line-height:1.3}

/* de tijdlijn */
.tijdlijn{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.tijdlijn::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;border-left:1.5px dashed rgba(150,91,56,.4)}
.tijdlijn__stap{display:grid;grid-template-columns:48px minmax(0,1fr);gap:clamp(14px,2.4vw,30px);align-items:start;
  scroll-margin-top:calc(var(--bar) + 24px)}
.tijdlijn__nr{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin-top:clamp(14px,1.8vw,22px);
  border-radius:50%;background:var(--gloed);color:#fff;font-weight:600;font-size:1.05rem;box-shadow:0 0 0 6px var(--cream)}
.tijdlijn__kaart{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(16px,3vw,48px);
  background:var(--white);border:1px solid var(--line);border-radius:2px;padding:clamp(20px,2.4vw,30px)}
.tijdlijn__kop{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.tijdlijn__termijn{display:inline-block;background:var(--roze);color:var(--copper-dk);border-radius:999px;
  padding:.28rem .8rem;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.tijdlijn__kop h3{font-size:clamp(1.12rem,1.5vw,1.3rem)}
.tijdlijn__label{font-size:.8rem;color:var(--ink-45)}
.tijdlijn__kaart .lees p{color:var(--ink-70);line-height:1.72}
@media (max-width:760px){
  .tijdlijn__kaart{grid-template-columns:1fr}
  .tijdlijn__stap{grid-template-columns:36px minmax(0,1fr)}
  .tijdlijn__nr{width:36px;height:36px;font-size:.9rem}
  .tijdlijn::before{left:17px}
}

/* afvinklijstje */
.vinklijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.vinklijst li{position:relative;padding-left:2rem;color:var(--ink-70);line-height:1.62;font-size:.95rem}
.vinklijst li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;
  background:var(--roze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' stroke='%23C95C25' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px 11px}

/* extra punten per behandeling, zelfde kaart als de prijzen */
.extrakaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.extrakaart{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.extrakaart__kop{background:var(--roze);padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px)}
.extrakaart__kop small{display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gloed-dk);margin-bottom:.3rem}
.extrakaart__kop h3{display:flex;align-items:center;gap:.65rem;font-size:clamp(1.12rem,1.5vw,1.3rem)}
.extrakaart__kop h3::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gloed)}
.extrakaart__in{padding:clamp(18px,2.2vw,28px)}
@media (max-width:760px){ .extrakaarten{grid-template-columns:1fr} }

/* huisartsmelding */
.meldkaart{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.4vw,32px);align-items:center;
  margin-top:clamp(28px,3.4vw,48px);background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gloed);
  border-radius:2px;padding:clamp(20px,2.4vw,30px)}
.meldkaart__icoon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--roze);color:var(--gloed-dk)}
.meldkaart__icoon svg{width:24px;height:24px}
.meldkaart__tekst h3{font-size:1.12rem;margin-bottom:.4rem}
.meldkaart__tekst p{color:var(--ink-70);font-size:.92rem;line-height:1.6}
.meldkaart__tekst ul{list-style:none;margin:.5rem 0 .7rem;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.meldkaart__tekst li{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.22rem .75rem;font-size:.84rem;color:var(--ink)}
@media (max-width:760px){ .meldkaart{grid-template-columns:1fr} .meldkaart .btn{justify-self:start} }

/* ---------- homepagina: gezichtsbehandelingen als eigen deel onder het trapje ----------
   Eigen kop zoals 'Wenkbrauwen, eyeliner en lippen', daaronder dezelfde opbouw
   als op de subpagina (.techvergelijk): voor/na links, behandelingen rechts. */

.gezichtdeel{margin-top:clamp(36px,4vw,56px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.gezichtdeel .techvergelijk__tekst{align-self:center}
.gezichtdeel .techlijst{margin-top:1rem}
.gezichtdeel__meer{margin-top:clamp(20px,2.4vw,30px)}

/* ---------- homepagina: 'Geen geklieder met oogpotlood' gespiegeld ----------
   Tekst links, beeld rechts. De kolombreedtes, het oudroze rondje, het label
   en de poort op de achtergrond wisselen mee van kant. Op mobiel blijft het
   beeld bovenaan (site.css). */
/* verder buiten beeld dan rechts, anders loopt de lijn door de tekst */
.sect--poort-links::before{right:auto;left:clamp(-260px,-17vw,-150px)}
@media (min-width:861px){
  .sect--terra .duo--flip{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}
.sect--terra .duo--flip .duo__art::before{left:auto;right:-7%}
.sect--terra .duo--flip .duo__badge{left:auto;right:-1px}

/* ---------- vijf behandelingen naast elkaar, kleinere bogen ----------
   Feedback Josefien (24-09-2026): de bogen mogen kleiner, zodat alle
   behandelingen naast elkaar staan. Gezichtsbehandelingen is de vijfde boog.
   Op de homepagina blijft het trapje, op de behandelingenpagina niet. */

.diensten--vijf{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.diensten--vijf > *{grid-column:auto}
.diensten--vijf > *:nth-child(2){margin-top:clamp(10px,1.6vw,26px)}
.diensten--vijf > *:nth-child(3){margin-top:clamp(20px,3.2vw,52px)}
.diensten--vijf > *:nth-child(4){margin-top:clamp(30px,4.8vw,78px)}
.diensten--vijf > *:nth-child(5){margin-top:clamp(40px,6.4vw,104px)}
.diensten--vlak > *{margin-top:0!important}
.diensten--vijf .dienst figure{aspect-ratio:3/3.7}
.diensten--vijf .dienst__soort{margin-top:.95rem}
.diensten--vijf .dienst h3{font-size:clamp(.98rem,1.15vw,1.12rem)}
.diensten--vijf .dienst p{font-size:.82rem;line-height:1.55;padding-inline:.2rem}
.diensten--vijf .dienst__vanaf{font-size:.76rem}
.diensten--vijf .dienst__meer{font-size:.64rem;gap:.6rem}
.diensten--vijf .dienst__meer i{width:34px;height:34px}
@media (max-width:1100px){
  .diensten--vijf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .diensten--vijf > *{margin-top:0!important}
}
@media (max-width:720px){
  .diensten--vijf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .diensten--vijf{grid-template-columns:1fr}
  .diensten--vijf .dienst figure{aspect-ratio:4/3}
}

/* ---------- tekstronde 24-09-2026 ---------- */

/* sectiekop waarvan de tekst rechts bovenaan begint, gelijk met de boventitel */
.shead--boven{align-items:start}

/* PMU verwijderen: drie voor/na-sliders naast elkaar */
.ba-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.ba-rij .ba{aspect-ratio:4/5}
@media (max-width:860px){ .ba-rij{grid-template-columns:1fr;max-width:26rem} }

/* afspraakknop onder de technieken op een dienstpagina */
.techlijst__cta{margin-top:clamp(20px,2.4vw,30px)}

/* ---------- 'Minder tijd kwijt aan make-up': beeld zo hoog als de tekst ----------
   Sinds de kortere tekst (28-09-2026) volgt het beeld de hoogte van de
   tekstkolom, zodat de hele sectie meekrimpt. Op mobiel blijft het beeld
   bovenaan met de vaste hoogte uit de regels hierboven. */
@media (min-width:861px){
  .duo--meekrimp{align-items:stretch}
  .duo--meekrimp .duo__art{min-height:300px}
  .duo--meekrimp .duo__art figure{position:absolute;inset:0;height:auto}
  /* de poort op de achtergrond past zich aan de lagere sectie aan */
  .sect--poort-links::before{height:min(clamp(280px,38vw,500px),85%)}
}

/* ---------- voet: contact onder het logo, openingstijden als kolom (28-09-2026) ---------- */
.ftr__brand{gap:1.1rem}
.ftr__contact{list-style:none;margin:0;padding:0}
.ftr__contact li{margin-bottom:.45rem}
.ftr__social{display:flex;gap:.6rem}
.ftr__social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--op-terra-70);color:var(--op-terra);transition:color .2s ease,border-color .2s ease}
.ftr__social a:hover{color:#fff;border-color:#fff}
.ftr__social svg{width:18px;height:18px}
.ftr__tijden{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;margin:0;
  font-size:.92rem;color:var(--op-terra-70)}
.ftr__tijden dt{color:var(--op-terra)}
.ftr__tijden dd{margin:0}

/* ---------- ronde 2, behandelpagina's (28-09-2026) ---------- */
/* Afspraak maken, voorzorg en nazorg als knoppen naast elkaar */
.knoppenrij{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
/* de tekst achter 'TIP:' schuin en een maat kleiner */
.tip{font-size:.9em}
/* productfoto's in een licht kader */
.productfotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);
  background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:clamp(14px,2vw,26px)}
.productfotos--twee{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.productfotos figure{margin:0;background:#fff;aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center}
.productfotos img{width:100%;height:100%;object-fit:contain}
@media (max-width:860px){ .productfotos{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* prijstabel zonder touch-up-kolom */
.prijsblok--drie .prijsrij{grid-template-columns:minmax(0,1fr) 7rem 15rem}
@media (max-width:760px){ .prijsblok--drie .prijsrij{grid-template-columns:minmax(0,1fr) auto} }
/* vier knoppen op de prijzenpagina */
.verder--info.verder--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .verder--info.verder--vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .verder--info.verder--vier{grid-template-columns:1fr} }
.productfotos--twee figure{aspect-ratio:4/5}
.productfotos--twee img{object-fit:cover}
/* knoppen binnen een tekstkolom niet als tekstlink opmaken */
.lees .knoppenrij .btn,.lees .knoppenrij .btn:hover{color:#fff;text-decoration:none;border-bottom:0}

/* handtekening onder "Over mij" (feedback Josefien deel 3, 3H2): haar eigen
   schrijfletters (Unicode Mathematical Bold Script), in haar kleur. Voor
   schermlezers staat er onzichtbaar gewoon "Josefien" naast. */
.handtekening{display:inline-block;margin-top:-.3rem;font-size:1.7rem;line-height:1;letter-spacing:-.09em;color:#BF4E14}
/* tussen o en s laten de uithalen van beide letters te veel wit */
.handtekening__rest{margin-left:-.16em}
.onzichtbaar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- voet, feedback Josefien deel 3 (3H8, 3H9; 09-10-2026) ----------
   Alleen maandag en donderdag, daaronder de contactgegevens. Logo en slogan los:
   de slogan is tekst, de bovenste regel even breed als het logo. */
.ftr{--ftr-logo:clamp(104px,10.5vw,140px)}
.ftr__overig{margin:.6rem 0 0;font-size:.92rem;color:var(--op-terra-70)}
.ftr__tijden + .ftr__overig + .ftr__contact{margin-top:1.6rem}
.ftr__merk{display:flex;flex-direction:column;gap:calc(var(--ftr-logo) * .07);width:max-content}
.ftr__brand .ftr__logo{height:var(--ftr-logo);width:auto}
/* social-iconen onderaan, gelijk met de onderkant van de langste kolom */
.ftr__grid{align-items:stretch}
.ftr__brand{align-self:stretch}
.ftr__social{margin-top:auto}
.ftr__grid ul li:last-child{margin-bottom:0}
/* slogan als tekst; de bovenste regel is even breed als het logo (lettergrootte schaalt mee met het logo) */
.ftr__brand .ftr__slogan{margin:0;font-size:calc(var(--ftr-logo) * .1275);line-height:1.25;color:var(--op-terra-70)}
@media (max-width:900px){ .ftr__social{margin-top:0} }
/* gelijke witruimte tussen de vier kolommen: links en rechts blijven staan,
   de twee middelste kolommen schuiven zodat de drie tussenruimtes even groot zijn */
@media (min-width:901px){
  .ftr__grid{display:flex;justify-content:space-between}
  .ftr__grid > *{flex:none}
  .ftr__grid > :last-child{flex:0 0 calc((100% - 3 * clamp(26px,3.4vw,50px)) * 1.15 / 4.65)}
}

/* ---------- feedback Josefien deel 3, overige punten (09-10-2026) ---------- */
/* prijzen: groepskoppen en het blok "Alle PMU" (3P2, 3P3) */
.prijsgroep{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 clamp(14px,1.6vw,20px)}
.prijsblok + .prijsgroep{margin-top:clamp(34px,4vw,56px)}
.allepmu{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gloed);padding:1rem 1.2rem;
  margin-bottom:clamp(18px,2vw,26px);font-size:.92rem;line-height:1.65;color:var(--ink-70)}
.allepmu b{color:var(--ink);font-weight:600}
.allepmu p{margin:.2rem 0 0}
/* contact: kaders naast het formulier (3C1, 3C2) */
.contactzij .zijkaart{position:static}
.contactzij .zijkaart h4 + dl{margin-bottom:1.1rem}
.contactzij .zijkaart dl + h4{margin-top:.2rem}
.contactzij .zijkaart p:last-child{margin-bottom:0}
.contactzij .zijkaart a{color:var(--gloed-dk)}
/* nazorg: kader "Na zes weken" onder het genezingsproces (3N3) */
.zorgresultaat{margin-top:clamp(36px,4.4vw,64px)}

/* ---------- alles kleiner en compacter (3A1, 3A2) ----------
   Josefien: "op elke pagina lijken de kaders en tekstvakken en foto's te groot".
   Minder witruimte tussen secties, kleinere koppen en foto's. */
.sect{padding-block:clamp(34px,4.2vw,62px)}
.sect--tight{padding-block:clamp(24px,2.8vw,40px)}
.hero{min-height:min(70vh,620px)}
.kop--beeld{padding-block:clamp(44px,5.6vw,84px) clamp(38px,5vw,74px)}
.kop h1{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.shead h2{font-size:clamp(1.5rem,2.7vw,2.2rem)}
.duo__body h2{font-size:clamp(1.45rem,2.5vw,2rem)}
.infokolommen{gap:clamp(24px,3.6vw,56px)}
@media (min-width:861px){
  .duo__art figure{height:clamp(230px,26vw,340px)}
  .duo--portret .duo__art figure{height:clamp(290px,34vw,440px)}
  .infoduo{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,3.6vw,56px)}
  .infoduo--flip{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
}

/* ---------- fixes na de controle op mobiel en consistentie (09-10-2026) ---------- */
/* boventitels in een sectiekop: site.css (.shead p) maakte ze groter en grijs;
   nu overal even groot en in dezelfde kleur als de andere boventitels */
.shead p.eyebrow{font-size:.67rem;line-height:1.4}
.shead p.eyebrow:not(.eyebrow--light){color:var(--copper-dk)}
/* contactformulier: na de sprong naar #afspraak niet onder de kopbalk */
#afspraak{scroll-margin-top:calc(var(--bar) + 16px)}
/* mobiel menu: de huidige pagina */
.sheet a[aria-current]{color:var(--roze);font-weight:600}
.sheet__groep.is-actief > button{color:var(--roze)}
@media (max-width:760px){
  /* een iPhone zoomt in bij velden kleiner dan 16px */
  .formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],
  .formulier select,.formulier textarea{font-size:16px}
  /* prijzen: op een smal scherm vallen de kolomkoppen weg, dus een label bij de touch-up */
  .prijsblok .prijsrij .touch:not(:empty)::before{content:"Touch-up tot 1,5 jaar ";color:var(--ink-45)}
  /* grotere tikvlakken zonder dat de opmaak verschuift */
  .dienst__meer{min-height:44px}
  .ftr__social a{width:44px;height:44px}
  .kruimel a,.ftr__base a{display:inline-block;padding-block:12px;margin-block:-12px}
}
@media (max-width:360px){
  /* de knop in de kopbalk past anders niet op één regel */
  .bar .btn--fill{white-space:nowrap;padding-inline:.85rem;font-size:.64rem;letter-spacing:.12em}
}

/* ---------- over mij: staand portret van Josefien (11-10-2026) ----------
   De bovenste 12% van de foto valt weg, de rest staat er heel op. De sectie lijnt
   links uit: de fotokolom is zo breed als de foto, de tekst sluit er met de gewone
   tussenruimte op aan. Daaronder loopt de sectie door met een tweede tekstblok. */
.duo--portret .duo__art figure{aspect-ratio:480/563;height:auto}
.duo--portret .duo__art img{object-position:50% 100%}
@media (min-width:861px){
  .duo--portret{grid-template-columns:calc((100% - clamp(24px,3.6vw,64px))*.4) minmax(0,1fr)}
}
@media (max-width:860px){ .duo--portret .duo__art{width:85%} }
.duo__body--vervolg{margin-top:clamp(34px,4.2vw,62px)}
.duo__body--vervolg p{max-width:68ch}

/* ---------- homepage: licht afgeronde hoeken op de foto's (11-10-2026) ----------
   Alleen op de homepage (main.home). De hero en de foto van het pand lopen tot de
   rand door en blijven recht; bij de bogen ronden alleen de onderhoeken af. */
.home .duo__art figure{border-radius:12px}
.home .dienst figure{border-radius:999px 999px 12px 12px}

/* sectiekop zonder tekst ernaast: minder ruimte tot het blok eronder */
.shead--krap{margin-bottom:clamp(18px,2.2vw,30px)}

/* zwart omlijnde knop, als tweede knop naast een oranje */
.btn--omlijnd{background:none;border-color:var(--ink);color:var(--ink)}
.btn--omlijnd:hover{background:var(--ink);color:#fff}
.acc + .knoppenrij{margin-top:clamp(22px,2.4vw,32px)}

/* ---------- contactblok homepage: iconen in plaats van labels (11-10-2026) ---------- */
.visit__kop .eyebrow{margin-bottom:1.1rem}
.visit dl.visit__lijst{gap:.8rem 1rem;align-items:start}
.visit__lijst dt{display:grid;place-items:center;width:22px;height:1.5em;color:var(--gloed)}
.visit__lijst dt svg{width:20px;height:20px}
.visit__lijst dd{line-height:1.5}

/* ---------- voet: volledig logo met payoff, groter (11-10-2026) ----------
   De losse slogan is weg; het logo vult de ruimte tot de social-iconen. De boog hangt
   nu aan de logokolom en loopt er rechts langs, zodat hij het logo niet doorsnijdt. */
.ftr{--ftr-logo:150px}
@media (min-width:901px){ .ftr{--ftr-logo:185px} }
.ftr::before{display:none}
@media (min-width:901px){
  .ftr__brand{position:relative}
  .ftr__brand::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    border:2px solid var(--gloed); border-radius:999px 999px 0 0;
    right:-30px; width:380px; top:-200px; bottom:-160px;
    opacity:.26;
  }
}

/* ---------- contactpagina (11-10-2026) ----------
   De drie blokjes hebben alleen nog icoon en gegeven en vallen deels over de kop; de kop
   heeft geen introtekst meer. In de zijkaart staan iconen in plaats van labels. */
.kop.kop--contact{padding-bottom:clamp(84px,8.4vw,124px)}
.sect.sect--kanalen{padding-top:0}
.sect--kanalen .kanalen{margin-top:clamp(-36px,-2.5vw,-24px)}
.zijkaart dl.zijkaart__iconen{gap:.55rem .8rem;align-items:start}
.zijkaart__iconen dt{display:grid;place-items:center;width:20px;height:1.5em;color:var(--gloed)}
.zijkaart__iconen dt svg{width:18px;height:18px}
.zijkaart__iconen dd{line-height:1.5}
.contactzij .zijkaart .zijkaart__iconen a{color:var(--ink)}

/* een knop als <button> neemt het lettertype van de pagina over, net als een knop als link */
.btn{font-family:inherit}
/* de verzendknop staat iets los van het laatste veld; de regel eronder sluit er direct op aan */
.formkaart .formulier .btn{margin-top:.5rem}

/* voet: adres, telefoon en e-mail met iconen, in de volgorde van het contactblok op de homepage (11-10-2026) */
.ftr__lijst{display:grid;grid-template-columns:auto 1fr;gap:.6rem .8rem;margin:1.6rem 0 0;font-size:.92rem;align-items:start}
.ftr__lijst dt{display:grid;place-items:center;width:20px;height:1.5em;color:var(--roze)}
.ftr__lijst dt svg{width:18px;height:18px}
.ftr__lijst dd{margin:0;line-height:1.5;color:var(--op-terra-70)}
.ftr__lijst dd a{transition:color .2s ease}
.ftr__lijst dd a:hover{color:#fff}

/* ---------- fotopagina (11-10-2026) ----------
   Op een breed scherm is de galerij een kwart smaller, met meer marge links en rechts.
   Elke plaatsing is een kaartje: de tekst hangt in een wit vlak onder de foto. */
@media (min-width:981px){ .results{max-width:75%;margin-inline:auto} }
.results .result{gap:0;background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.results .result .result__beeld{border-radius:0}
.results .result p{margin:0;padding:.8rem 1rem .9rem;border-top:1px solid var(--line)}

/* prijzen: 'Meerprijs uittekenen' staat rechts, direct links van het bedrag, en is niet vet */
.prijsrij--meer .meer{grid-column:1 / -2;justify-self:end;text-align:right;color:var(--ink-70)}
@media (max-width:760px){
  .prijsrij--meer .meer{grid-column:1;font-size:.9rem}
  .prijsblok .prijsrij--meer .touch{grid-column:2;justify-self:end}
  .prijsblok .prijsrij--meer .touch:not(:empty)::before{content:none}
}

/* prijzen: een groepskop (h2) in de roze balk krijgt dezelfde opmaak als de koppen van de PMU-blokken */
.prijsblok__kop h2{display:flex;align-items:center;gap:.65rem;margin:0;font-size:clamp(1.12rem,1.5vw,1.3rem)}
.prijsblok__kop h2::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gloed)}

/* prijzen: een toelichting onder de naam van een behandeling, niet vet */
.prijsrij .naam small{display:block;margin-top:.15rem;font-size:.85rem;font-weight:400;color:var(--ink-45)}

/* voor-en-na-schuif met liggende foto's (wenkbrauwen): de foto's zijn 2:1 */
.techvergelijk .ba.ba--liggend{aspect-ratio:2/1}

/* voor-en-na-schuif met staande foto's (lippen): de foto's zijn 3:4 */
.techvergelijk .ba.ba--heel{aspect-ratio:3/4}

/* voor-en-na-schuif met een oog van dichtbij (eyeliner): de foto's zijn 4:3 */
.techvergelijk .ba.ba--43{aspect-ratio:4/3}

/* lippen: een derde smaller dan de andere voor/na-schuiven (staande foto, anders te groot) */
@media (min-width:861px){ .techvergelijk--smal{grid-template-columns:minmax(0,15.6rem) minmax(0,1fr)} }
@media (max-width:860px){ .techvergelijk--smal .techvergelijk__beeld{max-width:15.6rem} }
.techvergelijk__onder a{white-space:nowrap}

/* een lange paginatitel die op één regel hoort: geen maximale breedte; op een smal scherm breekt hij vanzelf */
.kop h1.h1--regel{max-width:none}
@media (max-width:560px){ .kop h1.h1--regel{font-size:min(1.8rem,6.3vw);white-space:nowrap} }

/* kaarten naast elkaar even hoog (de twee gezondheidsblokken) */
.regels--gelijk{align-items:stretch}

/* de twee kaders naast elkaar even hoog */
.extrakaarten--gelijk{align-items:stretch}

/* ---------- licht afgeronde hoeken op alle foto's bij tekst (11-10-2026) ----------
   Net als op de homepage. Foto's die tot de rand doorlopen (de kop van een pagina, het pand
   in het contactblok) blijven recht; de ronde fotootjes bij 'Bekijk ook' waren al rond. */
.duo__art figure,.infoduo__beeld,.techvergelijk .ba,.productfotos figure,
.tech__kaart figure,.salonbeeld{border-radius:12px}
.dienst figure{border-radius:999px 999px 12px 12px}

/* fotopagina: elk kaartje is zo hoog als zijn eigen foto en tekst; het tekstvak rekt niet mee
   met een hoger kaartje ernaast. De kaartjes houden rechte hoeken. */
.results{align-items:flex-start}

/* contactformulier: foto's meesturen (15-10-2026). Het echte bestandsveld is onzichtbaar;
   de omlijnde knop is het label ervan. Gekozen foto's verschijnen als kleine tegels. */
.formulier .optioneel{color:var(--ink-45);text-transform:none;letter-spacing:0}
.fotoveld{position:relative}
.fotoveld .hint{margin:0 0 .35rem;line-height:1.6}
.formkaart .formulier label.fotoknop{font-size:.75rem;letter-spacing:.14em;color:var(--ink);align-self:flex-start;margin-top:0}
.formkaart .formulier label.fotoknop:hover{color:#fff}
.fotoinvoer{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fotoinvoer:focus-visible + .fotoknop{outline:2px solid var(--gloed);outline-offset:3px}
.fotolijst{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.fotolijst li{position:relative;width:84px;height:84px;border-radius:2px;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.fotolijst img{width:100%;height:100%;object-fit:cover;display:block}
.fotolijst button{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;border-radius:50%;
                  background:rgba(29,29,27,.72);color:#fff;font:400 17px/26px inherit;cursor:pointer;padding:0}
.fotolijst button:hover{background:var(--gloed-dk)}
.fotolijst__geen{display:grid;place-items:center;font-size:.78rem;color:var(--ink-45)}
/* leeg: buiten beeld maar wel in de pagina, zodat schermlezers de melding blijven voorlezen */
.fotostatus:empty{position:absolute;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   Mobiel en tablet, controleronde 15-10-2026
   Alles hieronder geldt alleen onder 1024px (plus twee regels voor aanraakschermen);
   desktop verandert niet. De codes verwijzen naar het logboek in
   werk/mobiel-ronde/index.html.
   ========================================================================== */

/* --- tussenmaten 901-1023: dingen die echt door elkaar lopen --- */
@media (max-width:1023px){
  /* T-01 prijzen: de zijkolom onder de tabel, anders schuiven naam en prijs over elkaar */
  .metzij:has(> .zijkolom){grid-template-columns:1fr}
  .zijkolom{position:static}
  /* T-04 contacttegels: onder elkaar tot 1023, anders breekt het e-mailadres midden in het woord */
  .kanalen{grid-template-columns:1fr}
  /* T-06/D-01/J-1 geen loze ruimte boven een kop die bovenaan staat */
  .lees > h2:first-child{margin-top:0}
  /* D-08 label VOOR/NA ook op tablet leesbaar */
  .ba__tag{font-size:.7rem;padding:5px 10px}
}
/* T-01 de kaart onder de prijstabel niet over de volle breedte (op de telefoon wel) */
@media (min-width:561px) and (max-width:1023px){ .zijkolom .zijkaart{max-width:28rem} }
/* T-02 telefoonveld steekt buiten de kaart; het rasterelement mag smaller worden dan het veld */
@media (max-width:1099px){ .veldrij > *{min-width:0} }

/* --- tablet en aanraakschermen tot 980 --- */
@media (max-width:980px){
  /* G-3 tikvlakken in de voet ook op tablet */
  .ftr__social a{width:44px;height:44px}
  .ftr__base a{display:inline-block;padding-block:12px;margin-block:-12px}
  /* G-4 hamburger en sluitkruis 44px en op precies dezelfde plek */
  .burger{width:44px;height:44px}
  .sheet__close{top:13px;right:var(--gut);width:44px;height:44px}
}
/* C-6 velden 16px op tablet, anders zoomt de iPad in */
@media (min-width:761px) and (max-width:1023px){
  .formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],
  .formulier select,.formulier textarea{font-size:16px}
}
/* H-2 vijf behandelbogen: de onderste rij van twee in het midden in plaats van een gat rechts */
@media (min-width:721px) and (max-width:1100px){
  .diensten--vijf{grid-template-columns:repeat(6,minmax(0,1fr))}
  .diensten--vijf > *{grid-column:span 2}
  .diensten--vijf > *:nth-child(4){grid-column:2 / span 2}
}

@media (max-width:900px){
  /* G-1/G-2 tikvlakken van de links in de voet en het contactblok */
  .ftr li{margin-bottom:0}
  .ftr li a{display:inline-block;padding-block:10px}
  .visit__lijst dd a,.ftr__lijst dd a{display:inline-block;padding-block:8px;margin-block:-8px}
  /* G-5 sublinks in het mobiele menu */
  .sheet__groep a{padding-block:10px}
  /* H-5/T-05 het contactpaneel lijnt uit met de rest van de pagina */
  .visit__panel{padding-inline:var(--gut)}
  /* H-6 de foto van het pand geen smalle strook op tablet */
  .visit__pand{height:max(220px,52vw)}
  /* C-1 de formulierkaart blijft binnen de marge */
  .contactgrid{grid-template-columns:minmax(0,1fr)}
  /* D-02 ruimte tussen de laatste alinea en de knoppen */
  .lees > .knoppenrij{margin-top:1.5rem}
}
@media (min-width:561px) and (max-width:900px){
  /* D-07/K-3/P-6 "In het kort" niet 700px breed met een balk van een knop */
  .metzij .zijkaart,.zijkolom .zijkaart{max-width:28rem}
}
@media (max-width:860px){
  /* H-1/T-07 portret "Over mij" niet schermvullend op tablet */
  .duo--portret .duo__art{width:min(85%,380px)}
  /* H-7 het decoratieve rondje niet tegen de schermrand */
  .sect--terra .duo--flip .duo__art::before{right:-14px}
  /* I-1 de wenkbrauw in beeld houden bij de liggende uitsnede */
  .infoduo__beeld img[src$="wenkbrauwen-macro.jpg"]{object-position:50% 8%}
  /* I-2 kop in de gezondheidskaarten los van de lijst */
  .regelkaart h3{margin-bottom:.75rem}
}
@media (min-width:561px) and (max-width:860px){
  /* K-1 productfoto's op tablet op één rij, anders een blok van 1000px hoog */
  .productfotos:not(.productfotos--twee){grid-template-columns:repeat(4,minmax(0,1fr))}
  /* I-5/T-10 "Goed om te weten"-kaarten in twee kolommen, zoals "Bekijk ook" */
  .verder--info{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* P-5 bij een oneven aantal kaarten de laatste over de volle breedte (alleen waar twee kolommen staan) */
@media (min-width:561px) and (max-width:860px){ .verder--info > :last-child:nth-child(odd){grid-column:1 / -1} }
@media (min-width:861px) and (max-width:1000px){
  .verder--info.verder--vier > :last-child:nth-child(odd){grid-column:1 / -1}
  /* twee kaarten in een raster van drie laten een lege kolom achter */
  .verder--info:not(.verder--vier):has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  /* D-03 tikvlak "Meer foto's" onder de voor/na-schuif */
  .techvergelijk__onder a{display:inline-block;padding-block:14px;margin-block:-14px}
  /* P-2 duur en kuurvoorwaarden niet kleiner dan op desktop */
  .prijsrij .duur{font-size:.88rem}
  /* C-1 velden nemen de breedte van de kaart, niet hun eigen standaardbreedte */
  .formulier input[type=text],.formulier input[type=email],.formulier input[type=tel],
  .formulier select,.formulier textarea{width:100%;min-width:0}
  /* C-3 verzend- en fotoknop minstens 48px hoog */
  .formkaart .formulier button[type=submit],.formkaart .formulier label.fotoknop{min-height:48px}
  /* C-4 weghaalknop op de fototegels groter */
  .fotolijst button{width:34px;height:34px;line-height:34px;font-size:20px}
  .fotolijst button::before{content:"";position:absolute;inset:-6px}
  /* C-5 kop van twee regels in de zijkaart niet op elkaar */
  .contactzij .zijkaart h4{line-height:1.5}
}
@media (max-width:560px){
  /* H-4 labels in de behandelbogen */
  .diensten--vijf .dienst__soort,.diensten--vijf .dienst__meer{font-size:.7rem}
  /* C-7 uitleg bij het fotoveld */
  .fotoveld .hint{font-size:.875rem}
}
@media (max-width:520px){
  /* G-7 gestapelde knoppen even breed in plaats van rafelig */
  .hero__do .btn,.knoppenrij .btn,.visit__panel .btn{width:100%}
}
@media (max-width:480px){
  /* P-1 toelichting "(uitsluitend wenkbrauwen)" onder de titel in plaats van als losse kolom */
  .prijsblok__kop h3{flex-wrap:wrap;row-gap:.2rem}
  .prijsblok__kop h3 .bij{flex-basis:100%;padding-left:calc(9px + .65rem)}
  /* Z-1 tijdlijn voor- en nazorg: meer breedte voor de tekst */
  .tijdlijn__stap{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .tijdlijn__nr{width:30px;height:30px;font-size:.85rem;box-shadow:0 0 0 4px var(--cream)}
  .tijdlijn::before{left:14px}
  .tijdlijn__kaart{padding:16px}
  .tijdlijn__kaart .vinklijst li{padding-left:1.75rem}
}
@media (max-width:380px){
  /* C-2 e-mailadres in de contacttegel op één regel */
  .kanaal{gap:12px;padding:14px}
  .kanaal__icoon{width:40px;height:40px}
  .kanaal__icoon svg{width:20px;height:20px}
  .kanaal__tekst b{font-size:.9rem}
  /* C-3 fotoknop past op één regel */
  .formkaart .formulier label.fotoknop{padding-inline:1.2em;letter-spacing:.1em}
}
@media (max-width:360px){
  /* G-6 afspraakknop in de kopbalk: leesbare letter, 46px hoog */
  .bar .btn--fill{font-size:.68rem;letter-spacing:.1em;padding-block:13px}
  /* G-8 lange boventitels op één regel */
  .eyebrow{letter-spacing:.2em}
}

/* --- aanraakschermen --- */
/* R-1 een getikte foto blijft na het sluiten van de kijker niet ingezoomd staan */
@media (hover:none){ .result__open:hover img{transform:none} }
/* R-2 kijker bij een liggende telefoon: foto groter */
@media (max-width:1023px) and (max-height:500px){
  .kijker__beeld{padding:12px 0 10px}
  .kijker__beeld img{max-height:calc(100dvh - 70px)}
}

/* --- keuzes van de webmaster uit de twijfellijst (15-10-2026); nummers als in werk/mobiel-ronde --- */

/* 1 · behandelbogen op de telefoon twee naast elkaar, alle vijf even groot;
   de vijfde staat links met een lege plek ernaast */
@media (max-width:720px){
  .diensten--vijf{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
}
@media (max-width:460px){
  .diensten--vijf .dienst figure{aspect-ratio:3/3.4}
  /* elke titel ruimte voor twee regels, zodat alle kaarten even hoog zijn */
  .diensten--vijf .dienst h3{font-size:1rem;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
  .diensten--vijf .dienst__meer{white-space:nowrap;letter-spacing:.1em;gap:.5rem}
  .diensten--vijf .dienst__meer i{width:34px;height:34px}
}
@media (max-width:380px){
  .diensten--vijf .dienst__meer{font-size:.64rem;letter-spacing:.06em;gap:.4rem}
}

/* 2 · pluspuntenbalk: icoon naast de tekst */
@media (max-width:520px){
  .usp__cell{flex-direction:row;align-items:center;gap:14px;padding-block:14px}
  .usp__icon{margin-bottom:0;flex:none}
}

/* 3 · mobiel menu: logo linksboven op dezelfde plek als in de kopbalk,
   en "Afspraak maken" onder het telefoonnummer */
.sheet .sheet__logo{position:absolute;top:12px;left:var(--gut);width:auto;padding:0;border:0}
.sheet__logo img{display:block;height:46px;width:auto;filter:brightness(0) invert(1);opacity:.96}
.sheet .sheet__afspraak{width:100%;margin-top:18px;padding:1.02em 1.75em;border:0;color:#fff;font-size:.75rem}
.sheet .sheet__afspraak:hover{color:#fff}

/* 4 · behandelpagina's: de bovenste "Afspraak maken" weg, die staat al in "In het kort";
   Voorzorg en Nazorg naast elkaar */
@media (max-width:900px){
  .lees > .knoppenrij .btn[href="contact"]{display:none}
}
@media (max-width:560px){
  .lees > .knoppenrij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .lees > .knoppenrij .btn{width:auto}
}

/* 5 · behandelpagina's: "In het kort" (prijs, duur, afspraakknop) boven de tekst */
@media (max-width:900px){
  .metzij--kaartboven > .zijkaart{order:-1}
}

/* 6 · contact: de icoonlijst in de eerste zijkaart herhaalt de tegels erboven */
@media (max-width:900px){
  .contactzij .zijkaart:first-child .zijkaart__iconen{display:none}
}

/* 8 · onderste regel van de voet op kleine telefoons onder elkaar */
@media (max-width:400px){
  .ftr__base{flex-direction:column;align-items:flex-start;gap:10px}
  .ftr__base .push{display:none}
}

/* 9 · paginatitel van Wat is PMU en Ben je geschikt mag afbreken, op de normale maat */
@media (max-width:400px){
  .kop h1.h1--regel{white-space:normal;font-size:1.8rem}
}

/* 10 · infofoto's: op een kleine tablet lager (16:9), op een grote tablet naast de tekst */
@media (min-width:561px) and (max-width:699px){
  .infoduo__beeld{aspect-ratio:16/9 !important}
}
@media (min-width:700px) and (max-width:860px){
  .infoduo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px}
  .infoduo--flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .infoduo--flip .infoduo__beeld{order:2}
}

/* 13 · kleine labels in hoofdletters op mobiel iets groter */
@media (max-width:560px){
  .eyebrow,.shead p.eyebrow,.zijkaart h4,.regelkaart .termijn,.verder__tekst > span{font-size:.72rem}
}

/* --- keuzes van de webmaster, kleinere twijfels (15-10-2026); nummers als in werk/mobiel-ronde --- */

/* 19 · T-09 de onderste voetregel dekt de boog af, zodat de lijn niet door het KvK-nummer loopt (alle breedtes) */
.ftr__base{position:relative;z-index:1;background:var(--terra-diep)}

/* 20 · T-03 de oranje boog bij "Waarom permanente make-up?" pas vanaf 1440px; smaller valt hij over de tekst */
@media (max-width:1439px){ .sect--poort-links::before{display:none} }

/* 15 · productfoto's van verschillende formaten in vierkante vakjes: kleinere witranden */
@media (max-width:860px){
  .productfotos:not(.productfotos--twee) figure{aspect-ratio:1/1}
}

/* 16 · lopende tekst op mobiel iets krapper */
@media (max-width:560px){
  .lees p{line-height:1.65}
  .lees li{line-height:1.6}
}

/* 17 · voor/na-schuif op een grote tablet naast de technieken (wenkbrauwen, met een liggende foto, blijft eronder) */
@media (min-width:700px) and (max-width:860px){
  .techvergelijk{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
  .techvergelijk:has(.ba--liggend){grid-template-columns:1fr}
}

/* 18 · fotokijker op een staande telefoon: bladerpijlen direct onder de foto */
@media (max-width:660px){
  .kijker[open]{align-content:center;grid-template-rows:auto auto}
  .kijker__beeld{padding-top:60px}
}

/* 19 · telefoon (19-10-2026): de afspraakknop staat alleen in het menu, niet in de kopbalk;
   in de voet staan Behandelingen en Info PMU naast elkaar, logo en openingstijden over de volle breedte */
@media (max-width:560px){
  .bar .btn--fill{display:none}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__grid > .ftr__brand,.ftr__grid > :last-child{grid-column:1 / -1}
}