/* ============================================================================
   Kastelier, gedeeld visueel systeem (2026-08-30)

   Eén bestand voor de hele site. Bovenaan de nieuwe kern, onderaan de oude
   class-API van light.css opnieuw getekend, zodat bestaande pagina-eigen CSS
   die op tokens zoals --radius, --shadow-sm of --surface steunt vanzelf
   meekantelt in plaats van tegen het nieuwe systeem in te werken.

   Regels die niet gebroken mogen worden:
   - geen border-radius, geen gradients, geen glas, geen glow, geen pillen
   - één grotesk (Archivo), geen kleine uppercase eyebrow boven elke titel
   - één zwarte rechthoek als actie, verder tekstlinks
   - geen fade-in-on-scroll
   - geen drie identieke kaarten naast elkaar
   ========================================================================== */

:root{
  --bg:#F4F2ED;
  --bg2:#E9E6DF;
  --dark:#24231F;
  --ink:#20201D;
  --ink2:#68645D;
  --line:#D5D1C8;
  --line2:#C4BFB4;
  --accent:#4D5345;
  --accent-l:#8E9682;

  /* Oude namen uit light.css en styles.css, doorgesluisd naar het nieuwe
     palet. Zo blijft bestaande pagina-CSS werken zonder oude kleuren. */
  --bg-cream:#F4F2ED;
  --bg-stone:#E9E6DF;
  --surface:#F4F2ED;
  --surface-sunken:#E9E6DF;
  --text:#20201D;
  --text-heading:#20201D;
  --text-muted:#68645D;
  --text-faint:#8A857C;
  --text-on-dark:#F4F2ED;
  --walnut:#4D5345;
  --walnut-deep:#3C4136;
  --walnut-soft:#8E9682;
  --walnut-wash:#E9E6DF;
  --navy:#24231F;
  --navy-light:#3A382F;
  --cream:#F4F2ED;
  --cream-light:#F4F2ED;
  --charcoal:#20201D;
  --warm-grey:#68645D;
  --line-strong:#C4BFB4;
  --line-faint:rgba(32,32,29,.07);
  --success:#4D5345;
  --info:#5A6472;
  --attention:#8C6A3C;
  --focus:#4D5345;

  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;
  --sp-6:64px;--sp-7:96px;--sp-8:128px;--sp-9:160px;

  --container:1280px;--container-wide:1440px;--container-mid:1040px;--container-narrow:680px;--max-width:1320px;

  /* hoekig */
  --radius-sm:0;--radius:0;--radius-lg:0;
  /* geen zwevende kaarten */
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --duration-fast:180ms;--duration:280ms;--duration-slow:600ms;

  --overlay-soft:none;
  --overlay-tint:rgba(244,242,237,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4,h5,.serif{
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:500;letter-spacing:-.03em;line-height:1.04;color:var(--ink);
}
h1{font-size:clamp(2.45rem,5.3vw,4.5rem);letter-spacing:-.035em;line-height:1.0}
h2{font-size:clamp(1.85rem,3.4vw,3.15rem);line-height:1.07}
h3{font-size:clamp(1.45rem,2.3vw,2.05rem)}
h4{font-size:1.12rem;letter-spacing:-.015em}
p{max-width:35rem}

.lede,.lead{font-size:1.16rem;color:var(--ink2);line-height:1.5;max-width:38rem}
.note{font-size:.86rem;color:var(--ink2);line-height:1.6}
.tcol{max-width:35rem}
.acc{color:var(--accent)}
.small{font-size:.9rem}

/* Bewust geen container die overal terugkomt: elke sectie kiest haar eigen
   inspringing, zodat het ritme van de pagina niet vlak wordt. */
.pad{padding-inline:clamp(1.25rem,6vw,6.5rem)}
.deep{padding-inline:clamp(1.25rem,15vw,17rem)}
.pad-l{padding-left:clamp(1.25rem,6vw,6.5rem)}
.pad-r{padding-right:clamp(1.25rem,6vw,6.5rem)}

/* acties */
.cta,.btn-primary{
  display:inline-flex;align-items:center;gap:.7em;background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);border-radius:0;padding:1.02rem 1.55rem;
  font-size:.95rem;font-weight:500;cursor:pointer;box-shadow:none;
  transition:background .2s,color .2s;
}
.cta:hover,.btn-primary:hover{background:transparent;color:var(--ink);transform:none;box-shadow:none}
.tlink,.btn-secondary,.btn-text{
  display:inline-flex;align-items:center;gap:.5em;background:none;
  border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 2px;
  font-size:.95rem;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:none;
}
.tlink:hover,.btn-secondary:hover,.btn-text:hover{color:var(--ink2);border-bottom-color:var(--ink2);background:none;transform:none}
.ar{display:inline-block;transition:transform .2s}
.cta:hover .ar,.tlink:hover .ar,.btn-primary:hover .ar{transform:translateX(4px)}

/* navigatie: typografie, geen pil */
.topnav{position:fixed;top:0;left:0;right:0;z-index:120;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s}
.topnav.on{background:rgba(244,242,237,.95);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.topnav__in{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-block:1.3rem}
.mark{font-size:1rem;font-weight:600;letter-spacing:.14em;color:var(--ink)}
.topnav__l{display:flex;align-items:baseline;gap:1.85rem;font-size:.93rem}
.topnav__l a{color:var(--ink2);transition:color .18s}
.topnav__l a:hover{color:var(--ink)}
.topnav__l .go{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.topnav__l .here{color:var(--ink)}
.topnav__l .tiny{font-size:.79rem}
@media(max-width:900px){.topnav__l .sm{display:none}}

/* voettekst */
.foot{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.9rem;color:var(--ink2)}
.foot a:hover{color:var(--ink)}
.foot__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.3fr));gap:clamp(1.8rem,4vw,3.5rem)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:2.4rem}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__brand p{margin-top:.9rem;max-width:32ch;line-height:1.6}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.foot__col h4{font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--ink);margin-bottom:.4rem}
.foot__col a{color:var(--ink2);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .18s,border-color .18s}
.foot__col a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot__onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.4rem 2.2rem;border-top:1px solid var(--line);font-size:.83rem}
.foot__onder .rechts a{margin-left:1.5rem}
.foot__onder .rechts a:first-child{margin-left:0}
/* oude voettekst, blijft staan voor pagina's die nog niet om zijn */
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:baseline}

/* beeld */
.shot{position:relative;overflow:hidden;background:var(--bg2)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
@media(prefers-reduced-motion:no-preference){.shot:hover img{transform:scale(1.018)}}

/* prijs */
.price{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin:.2rem 0 .1rem}
.price em{font-style:normal;font-size:.85rem;font-weight:400;letter-spacing:0;color:var(--ink2);display:block;margin-top:.55rem;line-height:1.6}
.spec{list-style:none;font-size:.93rem;color:var(--ink2);margin-top:1.4rem}
.spec li{border-top:1px solid var(--line);padding:.52rem 0}

/* keten, proces en levering: typografie en dunne lijnen, geen iconen */
.chain{background:var(--dark);color:#EDEAE3;padding-block:clamp(4.5rem,9vw,8.5rem)}
.chain h2,.chain h3{color:#F4F2ED}
.chain .lede{color:rgba(237,234,227,.62)}
.chains{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,6.5rem);margin-top:clamp(2.6rem,5vw,4.2rem);max-width:56rem}
@media(max-width:640px){.chains{grid-template-columns:1fr;gap:2.6rem}}
.chains h4{font-size:.95rem;font-weight:500;color:#F4F2ED;padding-bottom:.85rem;
  border-bottom:1px solid rgba(244,242,237,.22);margin-bottom:1.2rem}
.chains ul{list-style:none;font-size:1.05rem;line-height:2.1;color:rgba(237,234,227,.55)}
.chains li::before{content:"";display:inline-block;width:16px;height:1px;
  background:rgba(237,234,227,.3);vertical-align:middle;margin-right:.75rem}
.chains .us li{color:#F4F2ED}
.chains .us li::before{background:var(--accent-l);width:26px}
.chain__foot{margin-top:clamp(2.4rem,4vw,3.4rem);max-width:44rem;color:rgba(237,234,227,.66);font-size:1.02rem}

.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.steps>div{padding:1.35rem 1.15rem 1.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps>div:last-child{border-right:0}
.steps b{display:block;font-weight:500;font-size:1rem;margin-bottom:.28rem}
.steps span{font-size:.85rem;color:var(--ink2);line-height:1.5;display:block}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps>div:nth-child(2n){border-right:0}}

.lev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding:1.05rem 0}
.lev b{font-weight:500;font-size:1.05rem}
.lev p{font-size:.89rem;color:var(--ink2);margin-top:.15rem;max-width:38rem}
.lev .amt{font-weight:500;font-size:1.05rem;white-space:nowrap}

/* formulieren */
.fld{display:block;margin-bottom:1.05rem}
.fld>span{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.38rem}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:1rem;padding:.82rem .9rem;
  border:1px solid var(--line);background:transparent;color:inherit;border-radius:0}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid var(--line);padding:.6rem 1.05rem;font-size:.92rem;cursor:pointer;transition:.15s}
.chip span:hover{border-color:var(--line2)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.file{margin:.3rem 0 1.1rem}
.file>span{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.38rem}
.file input{font-size:.87rem;color:var(--ink2)}
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--ink2);margin:.5rem 0 1.2rem;line-height:1.5}
.hp{position:absolute;left:-9999px}
.fmsg{min-height:1px;font-size:.89rem;margin-bottom:.6rem}
.fmsg.err{color:#8C3A21}.fmsg.ok{color:var(--accent)}

/* lopende tekst, voor de juridische pagina's */
.prose{max-width:38rem}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:2.6rem 0 .8rem}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.prose p,.prose li{color:var(--ink2);margin-bottom:.85rem}
.prose ul,.prose ol{padding-left:1.15rem;margin-bottom:1.1rem}
.prose li{margin-bottom:.35rem}
.prose a{border-bottom:1px solid var(--line2)}
.prose a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.prose strong{color:var(--ink);font-weight:500}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.93rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.7rem .8rem .7rem 0;text-align:left;vertical-align:top}
.prose th{font-weight:500;color:var(--ink)}

/* ============================================================================
   OUDE CLASS-API, opnieuw getekend
   Zelfde namen als in light.css zodat de bestaande pagina-markup blijft
   werken, maar dan in het nieuwe systeem.
   ========================================================================== */

.container,.container-mid,.container-narrow{
  width:100%;margin-inline:auto;padding-inline:clamp(1.25rem,6vw,6.5rem)}
.container{max-width:1600px}
.container-mid{max-width:78rem}
.container-narrow{max-width:44rem}

.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-cream{background:var(--bg)}
.section-stone{background:var(--bg2)}
.section-walnut-wash{background:var(--bg2)}

.section-head{max-width:40rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{margin-bottom:.9rem}

/* Kleine uppercase labels boven elke titel geven een gegenereerde look.
   Ze blijven bestaan voor de markup, maar rustig en zonder tracking. */
.eyebrow,.label,.meta,.tag{
  display:inline-block;font-size:.79rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink2);margin-bottom:.55rem;
  background:none;border:0;padding:0;border-radius:0}
.tag{border:1px solid var(--line);padding:.3rem .6rem;margin:0}

/* geen zwevende kaarten, wel een haarlijn */
.card,.keuken-kaart,.faq-item,.usp-item,.step-item,.trust-item{
  background:none;border-radius:0;box-shadow:none;border:1px solid var(--line);
  padding:1.4rem 1.5rem 1.6rem;transition:border-color .18s}
.card:hover,.keuken-kaart:hover,.usp-item:hover{transform:none;box-shadow:none;border-color:var(--line2)}
.keuken-kaart-head,.keuken-kaart-body,.keuken-kaart-footer{background:none;border-radius:0}

/* iconenrijen en genummerde bolletjes zijn precies het patroon dat we weg
   willen; ze worden typografie of verdwijnen */
.usp-icon,.faq-icon{display:none}
.step-number{display:block;font-size:.85rem;font-weight:500;color:var(--accent);
  background:none;border:0;border-radius:0;width:auto;height:auto;line-height:1.4;margin-bottom:.4rem}

.usp-grid,.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.usp-grid>*,.steps-grid>*{margin:-1px 0 0 -1px}

.price-block{margin-block:1rem}
.price-now{font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
/* geen doorstreepte korting */
.price-was{display:block;text-decoration:none;font-size:.85rem;color:var(--ink2);margin-top:.5rem}

.included-list,.options-table{width:100%;border-collapse:collapse;font-size:.93rem}
.included-list li{list-style:none;border-top:1px solid var(--line);padding:.52rem 0;color:var(--ink2)}
.options-table th,.options-table td{border-bottom:1px solid var(--line);padding:.7rem .8rem .7rem 0;text-align:left}
.options-table th{font-weight:500}

.faq-list{max-width:44rem}
.faq-item{border:0;border-top:1px solid var(--line);padding:1.1rem 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-answer{color:var(--ink2);font-size:.97rem}

.hero-light{padding-top:68px;background:var(--bg)}
.hero-inner{padding-inline:clamp(1.25rem,6vw,6.5rem);padding-block:clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.8rem,5vw,5rem);align-items:end}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:2rem}}
.hero-text-col{min-width:0}
.hero-image-col,.hero-image-wrap{min-width:0;border-radius:0;box-shadow:none;overflow:hidden}
.hero-ctas{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}
.hero-trust,.trust-item{border:0;padding:0;font-size:.86rem;color:var(--ink2)}
.hero-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.6rem}

.render-slot,.plan-slot,.placeholder-slot{border-radius:0;box-shadow:none;background:var(--bg2);border:1px solid var(--line)}
.render-caption,.plan-caption{font-size:.82rem;color:var(--ink2);padding-top:.6rem}
.render-plan-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.render-plan-pair{grid-template-columns:1fr}}

/* geen fade-in-on-scroll */
.reveal,.reveal-delay-1,.reveal-delay-2,.reveal-delay-3{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}

/* de oude donkere voettekst en navigatie worden niet meer gebruikt, maar
   blijven neutraal staan voor het geval een pagina ze nog draagt */
.footer-dark{background:var(--dark);color:var(--text-on-dark);padding-block:clamp(3rem,6vw,5rem) 2rem}
.footer-dark a{color:rgba(244,242,237,.7)}
.footer-dark a:hover{color:#F4F2ED}
.nav-toggle{display:none}

/* ----------------------------------------------------------------------------
   Mobiel vangnet voor de oudere pagina's.
   Daar staan rasters met een inline style zoals
   style="display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)"
   zonder mediaquery. Op een smal scherm passen die niet en duwen ze de hele
   pagina breder dan het venster. Onder 820px gaan ze gewoon onder elkaar.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:var(--sp-4)!important}
}
/* Raster- en flexkinderen mogen krimpen onder hun min-content breedte, anders
   blaast één lange regel de kolom op. */
.container>*,.container-mid>*,.container-narrow>*{min-width:0}

/* Brede tabellen scrollen in hun eigen kader in plaats van de pagina mee te nemen. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}