/* Basisreset — in het artifact levert het platform dit; in dit
   losse bestand hoort het er zelf bij. */
:root{
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html,body{margin:0;}
img{max-width:100%;}
[hidden]{display:none !important;}

/* ============================================================
   TÈRRO — merkstijl
   Kleur, typografie en ruimte komen uit het logo.
   Bewust één lichte modus: geen donkere variant.
   ============================================================ */
:root{
  /* grond — uit het kleurenpalet van de merkstijl */
  --ecru:#F7F4EF;
  --linnen:#ECE6DD;
  --zand:#E4DCD0;

  /* tekst */
  --houtskool:#2B231F;
  --houtskool-zacht:#5A4F47;

  /* accent — #B08D57 is het merkgoud voor lijnen, iconen en het logo.
     Op lichte grond is het te licht voor kleine tekst, daarom een
     diepere variant voor tekst en knoppen (leesbaarheid AA). */
  --goud:#B08D57;
  --goud-tekst:#765A31;
  --goud-diep:#765A31;
  --goud-knop:#7A5C30;
  --goud-knop-hover:#5F4725;
  --goud-haar:#D6C3A2;

  /* hoogtelijnen uit het beeldmerk, als zacht decor op donkere vlakken */
  --hoogtelijnen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' fill='none' stroke='%23B08D57' stroke-opacity='.32' stroke-width='1'%3E%3Cpath d='M-10 140 C70 100 150 110 230 150 S390 200 470 160 S580 110 620 125'/%3E%3Cpath d='M-10 165 C70 128 150 136 230 176 S390 226 470 186 S580 138 620 152'/%3E%3Cpath d='M-10 192 C66 158 146 164 226 202 S386 252 466 214 S576 168 620 180'/%3E%3Cpath d='M-10 220 C60 190 140 194 220 230 S380 280 460 244 S570 200 620 210'/%3E%3Cpath d='M-10 250 C56 224 132 226 210 258 S370 310 450 278'/%3E%3Cpath d='M-10 280 C50 260 120 260 196 288'/%3E%3C/svg%3E");

  /* donkere vlakken */
  --donker:#2B231F;
  --donker-tekst:#ECE6DD;
  --donker-zacht:#BDB2A6;

  /* status */
  --salie:#5F6B55;
  --salie-vlak:#E7EAE2;
  --terracotta:#96503A;
  --terracotta-vlak:#F2E5DF;

  --lijn:#DDD3C5;

  --sectie:clamp(80px,10vw,156px);
  --gutter:clamp(20px,5vw,64px);
  --maat:1180px;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ecru);
  color:var(--houtskool);
  font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  font-weight:300;
  color:var(--houtskool);
  margin:0;
  text-wrap:balance;
  letter-spacing:.005em;
}
h1{font-size:clamp(42px,6.4vw,76px);line-height:1.08;}
h2{font-size:clamp(30px,4.2vw,50px);line-height:1.16;}
h3{font-size:clamp(22px,2.6vw,29px);line-height:1.24;font-weight:400;}
h4,.kop-klein{font-size:21px;line-height:1.3;font-weight:400;}
/* kopniveau klopt voor schermlezers, maar oogt als een h3 */
.kop-h3{font-size:clamp(22px,2.6vw,29px);line-height:1.24;font-weight:400;}
/* enkel voor schermlezers */
.visueel-verborgen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

p{margin:0;}
a{color:inherit;}

img{max-width:100%;display:block;}
/* <picture> is enkel een verpakking voor de WebP-bronnen: geen eigen vak */
picture{display:contents;}

::selection{background:var(--zand);}

:focus-visible{
  /* donker goud: minstens 3:1 contrast op de lichte grond (WCAG 1.4.11) */
  outline:2px solid var(--goud-tekst);
  outline-offset:3px;
}
/* op donkere vlakken het lichte merkgoud */
.hero-donker :focus-visible,
.merkwaarden-intro :focus-visible,
.voet :focus-visible{outline-color:var(--goud);}
/* koppen en main krijgen focus via de router of de skiplink, zonder kader */
h1[tabindex="-1"]:focus,
main:focus{outline:none;}

/* verborgen tot iemand met het toetsenbord begint */
.skiplink{
  position:absolute;
  left:16px;
  top:-100px;
  z-index:100;
  padding:12px 20px;
  background:var(--donker);
  color:var(--donker-tekst);
  font-size:14px;
  text-decoration:none;
  transition:top .2s ease;
}
.skiplink:focus{top:12px;}

/* verplichte velden */
.veld:has(> [required]) > label::after{content:" *";color:var(--goud-tekst);}
.formulier-hint{margin:0;}

/* ---------- ruimte ---------- */
.wrap{
  width:100%;
  max-width:var(--maat);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sectie{padding-block:var(--sectie);}
.sectie--kort{padding-block:calc(var(--sectie) * .58);}

.stapel{display:flex;flex-direction:column;}
.stapel-8{gap:8px;}
.stapel-16{gap:16px;}
.stapel-24{gap:24px;}
.stapel-32{gap:32px;}
.stapel-48{gap:48px;}
.stapel-72{gap:clamp(40px,6vw,72px);}

.meet{max-width:60ch;}
.meet-smal{max-width:48ch;}

/* ---------- labels & eyebrows ---------- */
.eyebrow{
  font-size:12px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--goud-tekst);
  margin:0;
}
.eyebrow--stil{color:var(--houtskool-zacht);}

.lead{
  font-size:clamp(18px,2vw,21px);
  line-height:1.72;
  color:var(--houtskool-zacht);
  font-weight:400;
}

.stil{color:var(--houtskool-zacht);}

.streep{display:block;width:34px;height:1px;background:var(--goud);}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:17px 34px;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .4s ease,color .4s ease,border-color .4s ease;
}
.knop--goud{
  background:var(--goud-knop);
  color:#FFFFFF;
  border-color:var(--goud-knop);
}
.knop--goud:hover{background:var(--goud-knop-hover);border-color:var(--goud-knop-hover);}

/* op donkere grond: exact merkgoud met donkere tekst (contrast 5:1) */
.knop--licht{
  background:var(--goud);
  color:var(--donker);
  border-color:var(--goud);
}
.knop--licht:hover{background:#C4A574;border-color:#C4A574;}

.knop--lijn{
  background:transparent;
  color:var(--houtskool);
  border-color:var(--lijn);
}
.knop--lijn:hover{border-color:var(--houtskool);}

.knoppen{display:flex;flex-wrap:wrap;gap:14px;}

/* tekstlink met onderlijn die meegroeit */
.tekstlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--houtskool);
  padding-bottom:6px;
  border-bottom:1px solid var(--goud-haar);
  transition:border-color .4s ease,color .4s ease;
  align-self:flex-start;
}
.tekstlink:hover{border-color:var(--goud);color:var(--goud-tekst);}
.tekstlink .pijl{transition:transform .4s ease;}
.tekstlink--licht{color:var(--donker-tekst);border-bottom-color:rgba(176,141,87,.7);}
.tekstlink--licht:hover{color:var(--goud);border-color:var(--goud);}
.eyebrow--licht{color:var(--goud);}
.tekstlink:hover .pijl{transform:translateX(4px);}

/* ---------- logo ---------- */
.merk{display:flex;align-items:center;gap:13px;text-decoration:none;}
.merk{color:var(--houtskool);}
.merk-mark{width:38px;height:38px;flex:none;}
.merk-tekst{display:flex;flex-direction:column;gap:2px;}
.merk-woord{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  font-weight:400;
  letter-spacing:.2em;
  line-height:1;
  color:var(--houtskool);
}
.merk-sub{
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--houtskool-zacht);
  line-height:1;
}

/* ---------- navigatie ---------- */
.kop{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  border-bottom:1px solid transparent;
  transition:border-color .4s ease;
}
/* De waas zit op een pseudo-element: backdrop-filter op .kop zelf zou het
   vaste mobiele menu opsluiten binnen de hoogte van de kop. */
.kop::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(247,244,239,.93);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
  backdrop-filter:saturate(120%) blur(10px);
}
.kop[data-gescrold="ja"]{border-bottom-color:var(--lijn);}

.kop-binnen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:20px;
}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);}
.nav a{
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--houtskool-zacht);
  padding-block:4px;
  border-bottom:1px solid transparent;
  transition:color .35s ease,border-color .35s ease;
}
.nav a:hover{color:var(--houtskool);}
.nav a[aria-current="page"]{color:var(--houtskool);border-bottom-color:var(--goud-haar);}
/* de gouden knop in de navigatie mag de linkstijl hierboven niet overnemen */
.nav a.knop--goud{color:#FFFFFF;padding:11px 22px;border-color:var(--goud-knop);}
.nav a.knop--goud:hover,
.nav a.knop--goud[aria-current="page"]{color:#FFFFFF;background:var(--goud-knop-hover);border-color:var(--goud-knop-hover);}

.nav-knop{display:none;background:none;border:0;padding:15px 10px;margin-right:-10px;cursor:pointer;color:var(--houtskool);}
.nav-knop svg{display:block;}

@media (max-width:900px){
  .nav-knop{display:block;}
  .nav{
    position:fixed;
    inset:0;
    background:var(--ecru);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:14px;
    padding:var(--gutter);
    padding-top:calc(var(--gutter) + env(safe-area-inset-top,0px));
    z-index:60;
  }
  .nav[hidden]{display:none;}
  .nav a{font-size:16px;letter-spacing:.14em;padding-block:10px;}
  .nav a.knop--goud{padding:15px 28px;margin-top:10px;}
  .nav-sluit{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:calc(var(--gutter) - 12px);background:none;border:0;cursor:pointer;color:var(--houtskool);padding:12px;}
}
@media (min-width:901px){
  .nav-sluit{display:none;}
  .nav[hidden]{display:flex;}
}

/* ---------- beeld ---------- */
.beeld{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:var(--ratio,4/5);
  background:
    linear-gradient(107deg,transparent calc(50% - .5px),rgba(176,141,87,.28) calc(50% - .5px),rgba(176,141,87,.28) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(152deg,#F1EBE1 0%,#E4DBCB 100%);
  overflow:hidden;
}
.beeld::after{
  content:attr(data-slot);
  position:absolute;
  left:18px;
  bottom:16px;
  right:18px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(43,35,31,.5);
}
.beeld > img,
.beeld > picture > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.beeld:has(img)::after{content:none;}
.beeld--breed{--ratio:16/10;}
.beeld--vierkant{--ratio:1/1;}
.beeld--hoog{--ratio:3/4;}


/* ---------- donkere hero (startpagina) ---------- */
.hero-donker{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  align-items:center;
  /* vult het scherm onder de kop (--kop-hoogte wordt gemeten in main.js) */
  min-height:calc(100vh - var(--kop-hoogte,82px));
  min-height:calc(100svh - var(--kop-hoogte,82px));
  background:var(--donker);
  color:var(--donker-tekst);
  text-align:center;
}
.hero-donker-beeld{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% center;
}
.hero-donker::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at center,rgba(43,35,31,.62) 0%,rgba(43,35,31,.82) 70%),
    linear-gradient(180deg,rgba(43,35,31,.2),rgba(43,35,31,.6));
}
.hero-donker-inhoud{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding-block:clamp(64px,9vw,120px);
}
.hero-merk{width:clamp(76px,9vw,104px);height:auto;color:var(--donker-tekst);}
.hero-donker h1{color:var(--donker-tekst);font-weight:300;}
.hero-donker .lead{color:#DDD4C9;max-width:54ch;}
.hero-donker-acties{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px 32px;
  margin-top:10px;
}

.merkwaarden{
  display:grid;
  /* donker paneel lijnt links uit met de inhoud (.wrap) en krijgt vaste leesbreedte */
  grid-template-columns:calc(max(0px,(100vw - var(--maat)) / 2) + 460px) minmax(0,1fr);
  background:var(--linnen);
}
.merkwaarden-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  padding:clamp(48px,6vw,80px) clamp(28px,4vw,56px);
  padding-left:max(var(--gutter),calc((100vw - var(--maat)) / 2 + var(--gutter)));
  background:var(--donker) var(--hoogtelijnen) no-repeat right -80px bottom -40px / 520px auto;
  color:var(--donker-zacht);
  font-size:14px;
  line-height:1.9;
}
.merkwaarden-titel{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(16px,1.6vw,19px);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--goud);
}
.merkwaarden-lijst{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-content:center;
  margin:0;
  padding:clamp(40px,5vw,64px) var(--gutter) clamp(40px,5vw,64px) clamp(8px,2vw,24px);
  list-style:none;
}
.merkwaarden-lijst li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:8px clamp(14px,1.8vw,26px);
  text-align:center;
}
.merkwaarden-lijst li + li{border-left:1px solid var(--lijn);}
.merkwaarden-lijst svg{
  width:48px;
  height:48px;
  fill:none;
  stroke:var(--goud);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:4px;
}
.merkwaarden-lijst h3{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--houtskool);
}
.merkwaarden-lijst p{font-size:14px;line-height:1.75;color:var(--houtskool-zacht);max-width:22ch;}
@media (max-width:1280px){
  .merkwaarden{grid-template-columns:1fr;}
  .merkwaarden-intro{padding-inline:var(--gutter);}
  .merkwaarden-lijst{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:var(--gutter);row-gap:0;}
  .merkwaarden-lijst li{padding-block:28px;}
  .merkwaarden-lijst li:nth-child(odd){border-left:0;}
  .merkwaarden-lijst li:nth-child(n+3){border-top:1px solid var(--lijn);}
}
@media (max-width:560px){
  .merkwaarden-lijst{grid-template-columns:1fr;}
  .merkwaarden-lijst li{border-left:0 !important;}
  .merkwaarden-lijst li + li{border-top:1px solid var(--lijn);}
}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr .86fr;
  gap:clamp(32px,6vw,86px);
  align-items:center;
  padding-block:clamp(48px,6vw,88px) clamp(64px,8vw,116px);
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero .beeld{--ratio:4/5;}
}

/* ---------- twee kolommen ---------- */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,86px);
  align-items:center;
}
.duo--verspringend{align-items:start;}
.duo--verspringend > :last-child{padding-top:clamp(0px,5vw,72px);}
@media (max-width:860px){
  .duo{grid-template-columns:1fr;}
  .duo--verspringend > :last-child{padding-top:0;}
  .duo--omkeren > :first-child{order:2;}
}

/* ---------- stappen ---------- */
.stappen{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,60px);
}
@media (max-width:820px){.stappen{grid-template-columns:1fr;}}
.stap{display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:1px solid var(--lijn);}
.stap-nr{
  font-size:12px;
  letter-spacing:.24em;
  color:var(--goud-tekst);
}

/* ---------- kernwaarden ---------- */
.waarden{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--lijn);}
.waarde{
  flex:1 1 200px;
  padding:26px 26px 26px 0;
  border-bottom:1px solid var(--lijn);
}
.waarde h3{margin-bottom:8px;}

/* ---------- panden ---------- */
.rooster{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4.4vw,64px) clamp(26px,3.4vw,48px);
}
@media (max-width:760px){.rooster{grid-template-columns:1fr;}}

.pand{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit;}
.pand .beeld{--ratio:4/3;transition:opacity .5s ease;}
.pand:hover .beeld{opacity:.86;}
.pand-kop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.pand h3{font-size:clamp(21px,2.2vw,26px);}
.pand-plaats{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--houtskool-zacht);
}
.pand-prijs{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pand-feiten{
  display:flex;
  flex-wrap:wrap;
  row-gap:6px;
  font-size:13px;
  color:var(--houtskool-zacht);
  /* elk feit draagt zijn scheidingspunt vooraan; wie aan het begin van een
     regel belandt, valt buiten het zichtbare vlak en blijft onzichtbaar */
  margin-left:-36px;
  clip-path:inset(0 0 0 36px);
}
.pand-feiten > span::before{
  content:"·";
  display:inline-block;
  width:36px;
  text-align:center;
}

/* status */
.status{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:7px 13px;
  background:var(--salie-vlak);
  color:var(--salie);
}
.status[data-status="sealed"]{
  background:var(--terracotta-vlak);
  color:var(--terracotta);
  letter-spacing:.26em;
}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;}
.filter{
  font-family:inherit;
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  padding:11px 20px;
  background:transparent;
  border:1px solid var(--lijn);
  color:var(--houtskool-zacht);
  cursor:pointer;
  transition:border-color .35s ease,color .35s ease,background-color .35s ease;
}
.filter:hover{border-color:var(--houtskool-zacht);color:var(--houtskool);}
.filter[aria-pressed="true"]{background:var(--houtskool);border-color:var(--houtskool);color:var(--ecru);}

/* ---------- specificatietabel ---------- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--lijn);}
@media (max-width:620px){.specs{grid-template-columns:1fr;}}
.spec{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--lijn);
}
.specs > .spec:nth-child(odd){padding-right:clamp(0px,3vw,40px);}
.specs > .spec:nth-child(even){padding-left:clamp(0px,3vw,40px);}
@media (max-width:620px){
  .specs > .spec{padding-inline:0 !important;}
}
.spec dt{font-size:13px;color:var(--houtskool-zacht);}
.spec dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums;}

.epc{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.epc-label{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  font-size:12px;
  color:#FBF8F2;
  background:var(--salie);
}
.epc-label[data-klasse="C"],.epc-label[data-klasse="D"]{background:var(--goud-knop);}
.epc-label[data-klasse="E"],.epc-label[data-klasse="F"],.epc-label[data-klasse="G"]{background:var(--terracotta);}

/* ---------- vlak ---------- */
.vlak{background:var(--linnen);}

/* ---------- verhalen ---------- */
.verhaal-kaart{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit;}
.verhaal-kaart .beeld{--ratio:3/4;transition:opacity .5s ease;}
.verhaal-kaart:hover .beeld{opacity:.86;}
.citaat{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(23px,2.6vw,31px);
  line-height:1.3;
  font-weight:300;
}
.artikel p + p{margin-top:1.15em;}
.artikel-tekst{max-width:62ch;}

/* ---------- privacyverklaring ---------- */
.privacy{display:flex;flex-direction:column;gap:clamp(36px,5vw,52px);}
.privacy ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;}
.privacy li::marker{color:var(--goud);}
.privacy a,.formulier-privacy a,.voet-onder a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--goud);}
.privacy-gegevens{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;}
.privacy-gegevens > div{display:contents;}
.privacy-gegevens dt{color:var(--houtskool-zacht);font-size:14px;}
.privacy-gegevens dd{margin:0;}
@media (max-width:480px){.privacy-gegevens{grid-template-columns:1fr;}.privacy-gegevens dd{margin-bottom:8px;}}
/* nog in te vullen door de klant: valt bewust op */
.invullen{background:#F2E1B8;color:var(--houtskool);padding:0 4px;}
.formulier-privacy{margin:0;}

/* ---------- formulier ---------- */
.formulier{display:flex;flex-direction:column;gap:26px;max-width:560px;}
.veld{display:flex;flex-direction:column;gap:9px;}
.veld label{
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--houtskool-zacht);
}
.veld input,.veld select,.veld textarea{
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  color:var(--houtskool);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lijn);
  padding:11px 2px;
  border-radius:0;
  transition:border-color .35s ease;
  width:100%;
}
.veld textarea{resize:vertical;min-height:110px;line-height:1.7;}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;
  border-bottom-color:var(--goud);
}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:620px){.veld-rij{grid-template-columns:1fr;}}

.keuzes{display:flex;flex-wrap:wrap;gap:10px;}
.keuze{position:relative;}
.keuze input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.keuze span{
  display:block;
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:11px 19px;
  border:1px solid var(--lijn);
  color:var(--houtskool-zacht);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
}
.keuze input:checked + span{background:var(--houtskool);border-color:var(--houtskool);color:var(--ecru);}
.keuze input:focus-visible + span{outline:1.5px solid var(--goud);outline-offset:3px;}

.bevestiging{
  border-left:2px solid var(--goud);
  padding:20px 24px;
  background:var(--linnen);
}

/* ---------- voet ---------- */
.voet{
  background:var(--donker) var(--hoogtelijnen) no-repeat left -120px bottom -60px / 640px auto;
  color:var(--donker-zacht);
  padding-block:clamp(56px,7vw,92px) 34px;
  margin-top:var(--sectie);
}
.voet .merk{color:var(--donker-tekst);}
.voet .merk-woord{color:var(--donker-tekst);}
.voet .merk-sub{color:var(--goud);}
.voet-slogan{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  line-height:1.35;
  color:var(--donker-tekst);
  max-width:20ch;
}
.voet-rooster{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(34px,5vw,72px);
}
@media (max-width:800px){.voet-rooster{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.voet-rooster{grid-template-columns:1fr;}}
.voet-kolom{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.voet-kolom h2{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--goud);
  margin-bottom:6px;
}
.voet-kolom a{
  font-size:14px;
  text-decoration:none;
  color:var(--donker-zacht);
  transition:color .3s ease;
  width:fit-content;
}
.voet-kolom a:hover{color:var(--donker-tekst);}

/* contactband zoals onderaan de merkstijl */
.voet-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  margin-top:clamp(40px,5vw,66px);
  padding-top:26px;
  border-top:1px solid rgba(176,141,87,.28);
}
.voet-gegevens{
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--goud);
}
.voet-gegevens span + span::before{content:"•";margin-inline:18px;opacity:.7;}
@media (max-width:760px){
  .voet-gegevens{flex-direction:column;}
  .voet-gegevens span + span::before{content:none;}
}
.sociaal{display:flex;gap:12px;}
.sociaal a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(176,141,87,.55);
  border-radius:50%;
  color:var(--goud);
  transition:background-color .3s ease,color .3s ease;
}
.sociaal a:hover{background:var(--goud);color:var(--donker);}
.sociaal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.voet-onder{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  justify-content:space-between;
  font-size:12px;
  color:#A89C90;
}

.voet-wettelijk{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(176,141,87,.18);
  display:grid;
  gap:4px;
  font-size:11.5px;
  line-height:1.6;
  color:#A89C90;
}
.voet-wettelijk a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--goud);}
.aanbod-binnenkort{align-items:start;}

/* ---------- terug ---------- */
.terug{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--houtskool-zacht);
  transition:color .3s ease;
  align-self:flex-start;
}
.terug:hover{color:var(--houtskool);}

/* grotere tikzone voor kleine tekstlinks op touchscreens, zonder de opmaak te verschuiven */
@media (pointer:coarse){
  .tekstlink,.terug,.voet-kolom a{position:relative;}
  .tekstlink::before,.terug::before,.voet-kolom a::before{
    content:"";
    position:absolute;
    inset:-9px -6px;
  }
}

/* ---------- WHISE: galerij, formulierstatus ---------- */
.galerij{display:flex;flex-direction:column;gap:12px;outline:none;}
.galerij-hoofd img{transition:opacity .3s ease;}
.galerij-knop{
  position:absolute;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-top:-23px;
  border:0;
  border-radius:50%;
  background:rgba(247,244,239,.92);
  color:var(--houtskool);
  font-size:18px;
  cursor:pointer;
  transition:background-color .3s ease;
}
.galerij-knop:hover{background:var(--ecru);}
.galerij-knop--vorige{left:14px;}
.galerij-knop--volgende{right:14px;}
.galerij-teller{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  padding:4px 11px;
  background:rgba(43,35,31,.72);
  color:#F7F4EF;
  font-size:12px;
  letter-spacing:.12em;
}
.galerij-duimen{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
}
.galerij-duimen button{
  flex:0 0 auto;
  width:104px;
  aspect-ratio:4/3;
  padding:0;
  border:1px solid transparent;
  background:var(--zand);
  cursor:pointer;
  opacity:.62;
  scroll-snap-align:start;
  transition:opacity .3s ease,border-color .3s ease;
}
.galerij-duimen button:hover{opacity:.9;}
.galerij-duimen button[aria-current="true"]{opacity:1;border-color:var(--goud);}
.galerij-duimen img{width:100%;height:100%;object-fit:cover;}
@media (max-width:600px){
  .galerij-knop{width:40px;height:40px;margin-top:-20px;}
  .galerij-duimen button{width:84px;}
}

.bezoek-form{max-width:640px;padding-top:8px;}
.formulier-fout{
  margin:0;
  padding:12px 16px;
  border-left:2px solid var(--terracotta);
  background:var(--terracotta-vlak);
  color:#7A3F2D;
  font-size:14px;
}
.veld-hulp{font-size:13px;color:var(--houtskool-zacht);}
.veld-verborgen{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.knop:disabled{opacity:.7;cursor:progress;}
.laden{animation:verschijn .6s ease .2s both;}

/* ---------- hero-illustraties + intro-animatie ----------
   Gouden lijntekeningen in de stijl van het beeldmerk. main.js geeft elk
   lijnstuk pathLength="1" en een volgnummer (--i); daarmee tekent de lijn
   zichzelf. De animatie start opnieuw telkens een pagina zichtbaar wordt,
   omdat [hidden] het blok uit de weergave haalt. */
.pagina-kop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,5vw,72px);
}
.illu{
  display:block;
  width:clamp(260px,32vw,420px);
  height:auto;
  aspect-ratio:4/3;
  fill:none;
  stroke:var(--goud);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.illu *{vector-effect:non-scaling-stroke;}
.stapel > .illu{align-self:flex-start;}
.illu--over{width:min(100%,400px);margin-top:8px;}
.illu--boven-form{width:min(100%,380px);align-self:center !important;}

.illu [pathLength]{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:teken 1.5s cubic-bezier(.45,.05,.25,1) forwards;
  animation-delay:calc(var(--i,0) * 60ms + 250ms);
}
@keyframes teken{to{stroke-dashoffset:0;}}

/* kleine blijvende bewegingen, pas nadat de tekening klaar is */
.illu .illu-damp{animation:verschijn .8s ease 1.6s both,damp 3.2s ease-in-out 2.6s infinite;}
.illu .illu-damp--2{animation-delay:1.8s,3.4s;}
@keyframes verschijn{from{opacity:0;}to{opacity:1;}}
@keyframes damp{0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(-5px);opacity:.45;}}
.illu-dobber{animation:dobber 3.6s ease-in-out 2.4s infinite;}
@keyframes dobber{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.illu-wieg{transform-origin:252px 150px;animation:wieg 5s ease-in-out 2.4s infinite;}
@keyframes wieg{0%,100%{transform:rotate(0);}50%{transform:rotate(-4deg);}}
.illu .illu-zweef{animation:verschijn .8s ease 1.4s both,zweef 6s ease-in-out 2.2s infinite;}
.illu .illu-zweef--2{animation-duration:.8s,7s;}
@keyframes zweef{0%,100%{transform:translate(0,0);}50%{transform:translate(8px,-4px);}}
.illu .illu-stip{stroke-dasharray:.02 .03 !important;animation:verschijn 1s ease 1.6s both !important;}
/* lijnen die zelf bewegen, tekenen niet: ze verschijnen alleen */
.illu .illu-damp[pathLength],.illu .illu-zweef[pathLength]{stroke-dasharray:none;stroke-dashoffset:0;}

/* intro: tekst schuift zacht omhoog, element na element */
.intro > *{animation:opkomen .9s cubic-bezier(.2,.7,.2,1) both;}
.intro > :nth-child(2){animation-delay:.08s;}
.intro > :nth-child(3){animation-delay:.16s;}
.intro > :nth-child(4){animation-delay:.24s;}
.intro > :nth-child(5){animation-delay:.32s;}
.intro > :nth-child(n+6){animation-delay:.4s;}
.intro > .illu{animation:none;}
.intro-laat{animation:opkomen 1s cubic-bezier(.2,.7,.2,1) .3s both;}
@keyframes opkomen{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* startpagina: foto zakt rustig in, beeldmerk tekent zich, tekst volgt */
.hero-donker-beeld{animation:rustig-in 7s cubic-bezier(.2,.6,.2,1) both;}
@keyframes rustig-in{from{opacity:0;transform:scale(1.08);}25%{opacity:1;}to{opacity:1;transform:scale(1);}}
.hero-merk [pathLength]{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:teken 1.4s cubic-bezier(.45,.05,.25,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms + 200ms);
}
.hero-merk-t{animation:verschijn 1s ease 1.1s both;}
.hero-donker-inhoud.intro > .hero-merk{animation:none;}
.hero-donker-inhoud.intro > :nth-child(2){animation-delay:.9s;}
.hero-donker-inhoud.intro > .streep{animation:streep-groei .9s cubic-bezier(.2,.7,.2,1) 1.05s both;}
.hero-donker-inhoud.intro > :nth-child(4){animation-delay:1.15s;}
.hero-donker-inhoud.intro > :nth-child(5){animation-delay:1.3s;}
.hero-donker-inhoud.intro > :nth-child(6){animation-delay:1.45s;}
@keyframes streep-groei{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* waarden op de startpagina: iconen tekenen zich bij het in beeld scrollen.
   De beginstand geldt alleen als main.js .wacht heeft gezet (dus nooit zonder JS). */
/* svg > * i.p.v. [pathLength]: Chromium herberekent een attribuutselector met
   hoofdletters niet wanneer enkel de klasse op de lijst wijzigt */
.merkwaarden-lijst.wacht svg > *{stroke-dasharray:1;stroke-dashoffset:1;}
.merkwaarden-lijst.wacht li > h3,
.merkwaarden-lijst.wacht li > p{opacity:0;}
.merkwaarden-lijst.zichtbaar svg > *{
  animation:teken 1.3s cubic-bezier(.45,.05,.25,1) forwards;
  /* --i = icoon × 3 + lijnnummer (main.js): één variabele, want Chromium laat
     een calc() met twee var()'s hier de hele animatie vallen */
  animation-delay:calc(var(--i,0) * 60ms);
}
.merkwaarden-lijst.zichtbaar li > h3,
.merkwaarden-lijst.zichtbaar li > p{animation:opkomen .8s cubic-bezier(.2,.7,.2,1) both;}
.merkwaarden-lijst.zichtbaar li > h3{animation-delay:calc(var(--li,0) * 180ms + .45s);}
.merkwaarden-lijst.zichtbaar li > p{animation-delay:calc(var(--li,0) * 180ms + .6s);}

@media (max-width:760px){
  .pagina-kop{grid-template-columns:1fr;}
  .pagina-kop .illu{width:min(100%,320px);justify-self:center;order:-1;}
  .illu--boven-form{width:min(100%,300px);}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}