/* =========================================================================
   Sir Alfred — designsysteem
   Vertaling van Merkboek v1.0 (augustus 2026) naar het scherm.
   Kleuren p16-17 · Typografie p18-19 · Raster p20 · Website p25
   ========================================================================= */

/* --- Letters. Zelf gehost: geen externe fontdienst (merkboek p25). -------- */
@font-face{font-family:'Bodoni Moda';src:url('fonts/bodoni-moda-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('fonts/bodoni-moda-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Dragers */
  --inkt:#2A3036;  --nacht:#1B1F23;  --ivoor:#F6F2EC;  --linnen:#DED7C9;
  /* Tekst */
  --steen:#6A6660; --wol:#9A958C;
  /* Accent & signaal */
  --leer:#8E6B4E;  --zegel:#8C3A2E;

  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --lopend:'EB Garamond',Garamond,Georgia,serif;
  --label:'Jost','Helvetica Neue',Arial,sans-serif;
  --cijfer:'IBM Plex Mono','SF Mono',Menlo,monospace;

  /* Raster: twaalf kolommen, gutter meeschalend (merkboek p20) */
  --kolommen:12;
  --gutter:clamp(14px,1.6vw,26px);
  --marge:clamp(22px,5.2vw,84px);
  --maat:1360px;

  /* Ritme */
  --sectie:clamp(5.5rem,11vw,10.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--ivoor); color:var(--inkt);
  font-family:var(--lopend); font-size:clamp(1.02rem,.38vw + .95rem,1.14rem);
  line-height:1.62; /* merkboek: minimaal 1,55x */
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--linnen);color:var(--inkt)}

/* --- Raster -------------------------------------------------------------- */
.wrap{max-width:var(--maat);margin-inline:auto;padding-inline:var(--marge)}
.raster{display:grid;grid-template-columns:repeat(var(--kolommen),1fr);gap:var(--gutter)}
.sectie{padding-block:var(--sectie)}
.sectie--kort{padding-block:calc(var(--sectie)*.6)}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
.display{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.04;letter-spacing:-.012em}
h2,.kop{font-size:clamp(1.85rem,3.5vw,3rem);line-height:1.12;letter-spacing:-.008em}
h3,.tussenkop{font-size:clamp(1.16rem,1.1vw + .9rem,1.45rem);line-height:1.24}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
em{font-style:italic}
strong{font-weight:400;font-style:italic} /* nooit vet in lopende tekst (p19) */

.eyebrow{
  font-family:var(--label);font-weight:400;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--leer);
  margin:0 0 1.4rem;display:block;
}
.eyebrow--stil{color:var(--steen)}
.inleiding{font-size:clamp(1.18rem,.6vw + 1.02rem,1.42rem);line-height:1.5;max-width:34ch}
.secundair{color:var(--steen);font-size:.95em}
.bijschrift{font-family:var(--label);font-weight:300;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steen);margin-top:.85rem}
.cijfer,.getal{font-family:var(--cijfer);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.citaat{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.35rem);line-height:1.24;max-width:22ch}
.accent{color:var(--leer)}

/* Streep: één label, één woord, nooit een vlak (merkboek p17) */
.streep{width:46px;height:1px;background:var(--leer);border:0;margin:0 0 1.8rem}
.lijn{height:1px;background:var(--wol);border:0;opacity:.55;margin:0}

/* --- Links & knoppen. Nooit onderstrepen (p19). -------------------------- */
a{color:inherit;text-decoration:none}
.knop{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--label);font-weight:400;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border:1px solid var(--inkt);background:var(--inkt);color:var(--ivoor);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.knop:hover{background:transparent;color:var(--inkt)}
.knop--leeg{background:transparent;color:var(--inkt)}
.knop--leeg:hover{background:var(--inkt);color:var(--ivoor)}
.knop--licht{border-color:var(--ivoor);background:transparent;color:var(--ivoor)}
.knop--licht:hover{background:var(--ivoor);color:var(--inkt)}
.pijl{
  font-family:var(--label);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--leer);display:inline-flex;align-items:center;gap:.7rem;
}
.pijl::after{content:'';width:20px;height:1px;background:var(--leer);transition:width .25s ease}
.pijl:hover::after{width:34px}

/* --- Logo ---------------------------------------------------------------- */
/* Woordmerk: origineel bestand, nooit nagetekend (merkboek p15). */
.logo{display:inline-block;line-height:0}
.logo img{display:block;height:auto;width:150px}   /* minimum 150 px op scherm */
.logo--groot img{width:200px}
.logo .logo__ivoor{display:block}
.logo .logo__inkt{display:none}
.balk.vast .logo .logo__ivoor{display:none}
.balk.vast .logo .logo__inkt{display:block}
body.open .balk .logo .logo__ivoor{display:block}
body.open .balk .logo .logo__inkt{display:none}
.logo--kop{font-size:.92rem}
.logo--groot{font-size:1.5rem}

/* --- Kop van de site ----------------------------------------------------- */
.balk{
  position:fixed;inset:0 0 auto;z-index:60;
  padding-block:1.5rem;color:var(--ivoor);
  transition:background .35s ease,color .35s ease,padding .35s ease,box-shadow .35s ease;
}
.balk::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,31,35,.55) 0%,rgba(27,31,35,0) 100%);
  transition:opacity .35s ease;
}
.balk.vast::before{opacity:0}
.balk__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.balk.vast{background:var(--ivoor);color:var(--inkt);padding-block:1rem;box-shadow:0 1px 0 rgba(154,149,140,.35)}
.menu{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem)}
.menu a{
  font-family:var(--label);font-weight:400;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  padding-block:.4rem;opacity:.86;transition:opacity .2s ease,color .2s ease;
}
.menu a:hover,.menu a[aria-current="page"]{opacity:1;color:var(--leer)}
.balk__knop{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:inherit}
.balk__knop span{display:block;width:24px;height:1px;background:currentColor;margin:5px 0;transition:transform .3s ease,opacity .3s ease}

/* --- Hero: beeld met donkere overlay, nooit een kadertje (p25) ----------- */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--nacht)}
.hero--kort{min-height:min(74svh,660px)}
.hero__beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,31,35,.58) 0%,rgba(27,31,35,.24) 32%,rgba(27,31,35,.82) 100%),
             linear-gradient(90deg,rgba(27,31,35,.52) 0%,rgba(27,31,35,.10) 48%,rgba(27,31,35,0) 72%);
}
.hero__in{position:relative;z-index:2;width:100%;color:var(--ivoor);padding-bottom:clamp(4rem,8vw,7rem);padding-top:11rem}
.hero .eyebrow{color:var(--linnen)}
.hero__tekst{max-width:19ch}
.hero__onder{margin-top:clamp(2.2rem,4vw,3.4rem);display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center}

/* --- Drie diensten, gelijkwaardig (p25) ---------------------------------- */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3.2rem)}
.dienst{display:flex;flex-direction:column}
.dienst__beeld{aspect-ratio:4/5;overflow:hidden;background:var(--linnen)}
.dienst__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.dienst:hover .dienst__beeld img,.dienst:focus-within .dienst__beeld img{transform:scale(1.045)}
.dienst__in{display:flex;flex-direction:column;flex:1;padding-top:1.6rem;margin-top:1.6rem;border-top:1px solid var(--wol)}
.dienst h3{margin:0 0 .7rem;font-size:clamp(1.35rem,1.5vw,1.75rem)}
.dienst p{color:var(--steen);font-size:.98rem;margin:0}
.dienst .pijl{margin-top:auto;padding-top:1.8rem}

/* --- Twee kolommen: tekst naast beeld ------------------------------------ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.duo--smal{grid-template-columns:1fr 1.15fr}
.duo__tekst{max-width:46ch}
.duo img{width:100%;height:100%;object-fit:cover}
.duo--om .duo__beeld{order:-1}

/* --- Genummerde onderdelen ----------------------------------------------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.4rem) var(--gutter)}
.stappen--twee{grid-template-columns:repeat(2,1fr)}
.stap{padding-top:1.5rem;border-top:1px solid var(--wol)}
.stap__nr{font-family:var(--cijfer);font-size:.78rem;color:var(--leer);display:block;margin-bottom:1rem;letter-spacing:.08em}
.stap h3{margin-bottom:.6rem}
.stap p{color:var(--steen);font-size:.97rem}

/* --- Opsomming met streepje ---------------------------------------------- */
.lijst{list-style:none;margin:0;padding:0}
.lijst li{position:relative;padding-left:1.75rem;margin-bottom:.7rem;color:var(--steen)}
.lijst li::before{content:'—';position:absolute;left:0;color:var(--leer)}
.lijst--twee{columns:2;column-gap:var(--gutter)}
.lijst--twee li{break-inside:avoid}

/* --- Rustvlak in Linnen -------------------------------------------------- */
.vlak{background:var(--linnen)}
.vlak--nacht{background:var(--nacht);color:var(--ivoor)}
.vlak--nacht .eyebrow{color:var(--linnen)}
.vlak--nacht .secundair,.vlak--nacht .lijst li{color:#C6C2BB}
.vlak--nacht .lijn{background:rgba(246,242,236,.22);opacity:1}

/* --- Beeldstrook, tot de rand -------------------------------------------- */
.strook{position:relative;min-height:clamp(380px,58vh,680px);display:flex;align-items:flex-end;overflow:hidden;background:var(--nacht)}
.strook>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strook::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,31,35,.30) 0%,rgba(27,31,35,.34) 45%,rgba(27,31,35,.82) 100%),
             linear-gradient(90deg,rgba(27,31,35,.55) 0%,rgba(27,31,35,0) 62%)}
.strook__tekst{position:relative;z-index:2;width:100%;color:var(--ivoor);padding-bottom:clamp(2.8rem,5vw,4.5rem);padding-top:clamp(4rem,9vw,7rem)}
.strook .accent{color:var(--linnen)}

/* --- Slot: kennismaken --------------------------------------------------- */
.slot{background:var(--nacht);color:var(--ivoor)}
.slot .eyebrow{color:var(--linnen)}
.slot__in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:end}
.slot h2{max-width:16ch}

/* --- Voet ---------------------------------------------------------------- */
.voet{background:var(--nacht);color:var(--ivoor);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.voet a:hover{color:var(--leer)}
.voet__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,4rem)}
.voet h2{font-family:var(--label);font-weight:400;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--linnen);margin:0 0 1.35rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:.6rem;font-size:.97rem;color:#C6C2BB}
.voet .payoff{font-family:var(--display);font-size:1.05rem;margin-top:1.5rem;color:var(--ivoor)}
.voet__onder{
  margin-top:clamp(3rem,5vw,4.5rem);padding-top:1.6rem;border-top:1px solid rgba(246,242,236,.18);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-family:var(--label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wol);
}

/* --- Contact ------------------------------------------------------------- */
.gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1.8rem clamp(1.5rem,3vw,3rem)}
.gegeven .cijfer,.gegeven a{font-size:1.02rem}
.gegeven .cijfer{white-space:nowrap}
.gegeven a{overflow-wrap:anywhere}
.formulier{display:grid;gap:1.4rem}
.veld{display:grid;gap:.55rem}
.veld label{font-family:var(--label);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steen)}
.veld input,.veld textarea,.veld select{
  font-family:var(--lopend);font-size:1.02rem;color:var(--inkt);
  background:transparent;border:0;border-bottom:1px solid var(--wol);padding:.7rem 0;border-radius:0;
}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:0;border-bottom-color:var(--leer)}
.veld textarea{resize:vertical;min-height:7rem}
.veld--rij{grid-template-columns:1fr 1fr;gap:var(--gutter)}

/* --- Rustige opkomst ----------------------------------------------------- */
.komt{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.komt.er{opacity:1;transform:none}

/* --- Smallere schermen --------------------------------------------------- */
@media (max-width:900px){
  .diensten,.stappen,.gegevens{grid-template-columns:1fr}
  .stappen--twee{grid-template-columns:1fr}
  .duo,.duo--smal,.slot__in{grid-template-columns:1fr}
  .duo--om .duo__beeld{order:0}
  .voet__in{grid-template-columns:1fr 1fr}
  .lijst--twee{columns:1}
  .balk__knop{display:block}
  .menu{
    position:fixed;inset:0;background:var(--nacht);color:var(--ivoor);
    flex-direction:column;justify-content:center;gap:2rem;
    transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .menu a{font-size:.9rem;letter-spacing:.24em}
  body.open .menu{transform:none}
  body.open .balk__knop span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.open .balk__knop span:nth-child(2){opacity:0}
  body.open .balk__knop span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  body.open{overflow:hidden}
  body.open .balk{color:var(--ivoor);background:transparent;box-shadow:none}
  .hero__tekst{max-width:14ch}
  .veld--rij{grid-template-columns:1fr}
}
@media (max-width:560px){ .voet__in{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .komt{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =========================================================================
   HET HUISDOSSIER — interactief voorbeeld
   Structuur en velden zijn overgenomen uit het echte dossier (Monday):
   woningdossier per ruimte, onderhoudsplan per maand, ingrepen met foto,
   bedrag en naam. Cijfers in Plex Mono, Zegel uitsluitend als signaal.
   ========================================================================= */
.dossier{
  border:1px solid var(--wol);background:var(--ivoor);
  display:grid;grid-template-rows:auto auto 1fr;
  box-shadow:0 24px 60px -40px rgba(27,31,35,.55);
}
.dossier__balk{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:baseline;
  padding:1.05rem clamp(1.1rem,2.2vw,1.9rem);background:var(--linnen);
}
.dossier__balk span{
  font-family:var(--label);font-weight:400;font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
}
.dossier__merk{color:var(--inkt)}
.dossier__ref{font-family:var(--cijfer)!important;letter-spacing:.08em!important;color:var(--steen);font-size:.66rem!important}

.dossier__tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--wol);padding-inline:clamp(.5rem,1.4vw,1rem)}
.dossier__tab{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--label);font-weight:400;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steen);padding:1rem clamp(.7rem,1.4vw,1.15rem);position:relative;transition:color .25s ease;
}
.dossier__tab:hover{color:var(--inkt)}
.dossier__tab[aria-selected="true"]{color:var(--inkt)}
.dossier__tab[aria-selected="true"]::after{
  content:'';position:absolute;left:clamp(.7rem,1.4vw,1.15rem);right:clamp(.7rem,1.4vw,1.15rem);bottom:-1px;
  height:2px;background:var(--leer);
}
.dossier__tab:focus-visible{outline:2px solid var(--leer);outline-offset:-4px}

.dossier__paneel{padding:clamp(1.4rem,2.6vw,2.2rem);display:none}
.dossier__paneel[data-actief]{display:block}

/* Overzicht */
.dossier__kop{font-family:var(--display);font-size:clamp(1.3rem,1.6vw,1.65rem);line-height:1.2;margin:0 0 .35rem}
.dossier__onderkop{color:var(--steen);font-size:.92rem;margin:0 0 1.6rem;max-width:44ch}
.kerncijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1.4rem;margin-bottom:1.8rem}
.kerncijfer dt{
  font-family:var(--label);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steen);margin-bottom:.5rem;
}
.kerncijfer dd{margin:0;font-family:var(--cijfer);font-size:1.18rem;letter-spacing:.01em;color:var(--inkt)}
.kerncijfer dd.signaal{color:var(--zegel)}

.balkje{margin-top:.2rem}
.balkje__spoor{height:6px;background:var(--linnen);overflow:hidden}
.balkje__vulling{height:100%;width:0;background:var(--leer);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.dossier.er .balkje__vulling{width:var(--vul,0%)}
.balkje__tekst{
  display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;
  font-family:var(--cijfer);font-size:.74rem;color:var(--steen);
}

/* Rijen: onderhoudsplan en dossierregels */
.regels{list-style:none;margin:0;padding:0}
.regel{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline;
  padding:.78rem 0;border-top:1px solid rgba(154,149,140,.4);
  opacity:0;transform:translateY(6px);
}
.regel:first-child{border-top:0}
.dossier.er .regel{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 70ms)}
.regel__naam{font-size:1rem}
.regel__bij{display:block;color:var(--steen);font-size:.84rem;margin-top:.2rem}
.regel__stand{
  font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steen);white-space:nowrap;
}
.regel__stand.gereed{color:var(--inkt)}
.regel__stand.lopend{color:var(--leer)}
.regel__stand.open{color:var(--zegel)}
.regel__stand .cijfer{letter-spacing:.06em}

/* Woningdossier per ruimte */
.ruimte{margin-bottom:1.9rem}
.ruimte:last-child{margin-bottom:0}
.ruimte__kop{
  font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--leer);
  margin:0 0 .7rem;
}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.1rem 2rem;margin:0}
.veldje dt{font-family:var(--label);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steen);margin-bottom:.3rem}
.veldje dd{margin:0;font-size:.95rem;line-height:1.45}
.veldje dd .cijfer{font-size:.86rem;color:var(--steen)}

/* Ingrepen: rapportagekaarten die langzaam doorlopen */
.ingrepen{position:relative;overflow:hidden;max-height:22rem;padding-block:1.2rem}
.ingrepen::after,.ingrepen::before{
  content:'';position:absolute;left:0;right:0;height:3.2rem;pointer-events:none;z-index:2;
}
.ingrepen::after{bottom:0;background:linear-gradient(180deg,rgba(246,242,236,0),var(--ivoor))}
.ingrepen::before{top:0;background:linear-gradient(0deg,rgba(246,242,236,0),var(--ivoor))}
.vlak .ingrepen::after{background:linear-gradient(180deg,rgba(246,242,236,0),var(--ivoor))}
.ingrepen__spoor{display:grid;gap:1.1rem}
.dossier.er .dossier__paneel[data-actief] .ingrepen__spoor{animation:dossierloop 30s linear infinite}
.ingrepen:hover .ingrepen__spoor,.ingrepen:focus-within .ingrepen__spoor{animation-play-state:paused}
@keyframes dossierloop{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.ingreep{border:1px solid rgba(154,149,140,.45);padding:1.05rem 1.2rem;background:var(--ivoor)}
.ingreep__kop{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;align-items:baseline;margin-bottom:.55rem}
.ingreep__titel{font-family:var(--display);font-size:1.05rem}
.ingreep__nr{font-family:var(--cijfer);font-size:.66rem;color:var(--steen);letter-spacing:.06em}
.ingreep p{font-size:.9rem;color:var(--steen);margin:0 0 .7rem}
.ingreep__cijfers{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font-family:var(--cijfer);font-size:.72rem;color:var(--steen)}
.ingreep__cijfers b{font-weight:400;color:var(--inkt)}
.ingreep__foto{display:flex;gap:.4rem;margin-bottom:.75rem}
.ingreep__foto img,.ingreep__foto span{width:3.4rem;height:2.55rem;object-fit:cover;background:var(--linnen);display:block}

.dossier__voet{
  border-top:1px solid var(--wol);padding:.85rem clamp(1.1rem,2.2vw,1.9rem);
  font-family:var(--label);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steen);
}

@media (max-width:700px){
  .dossier__tab{padding-inline:.55rem;font-size:.6rem;letter-spacing:.14em}
  .ingrepen{max-height:24rem}
}
@media (prefers-reduced-motion:reduce){
  .dossier.er .dossier__paneel[data-actief] .ingrepen__spoor{animation:none}
  .regel{opacity:1;transform:none}
  .balkje__vulling{transition:none}
}

/* Dossier — plattegronden en apparaatkaarten, naar het echte document */
.tekeningen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.1rem}
.tekening figure{margin:0}
.tekening__vlak{aspect-ratio:4/3;background:var(--linnen);position:relative;overflow:hidden}
.tekening__vlak::after{
  content:'';position:absolute;inset:12% 10%;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none' stroke='%236A6660' stroke-width='1.1' opacity='.55'%3E%3Crect x='2' y='2' width='116' height='86'/%3E%3Cpath d='M46 2v34M46 52v36M2 36h44M78 2v86M78 44h40M2 62h20M22 62v26'/%3E%3Cpath d='M46 36v16M22 2v20' stroke-dasharray='3 3'/%3E%3Ccircle cx='98' cy='24' r='6'/%3E%3Crect x='6' y='68' width='12' height='16'/%3E%3C/svg%3E");
}
.tekening figcaption{margin-top:.7rem}
.tekening__laag{font-family:var(--label);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steen);display:block;margin-bottom:.2rem}
.tekening__naam{font-size:.95rem}

.apparaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border:1px solid rgba(154,149,140,.45)}
.appk{padding:1.15rem 1.25rem;border-right:1px solid rgba(154,149,140,.45)}
.appk:last-child{border-right:0}
.appk__naam{font-family:var(--display);font-size:1.08rem;line-height:1.2}
.appk__soort{font-family:var(--label);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--leer);display:block;margin:.35rem 0 .8rem}
.appk__om{font-size:.9rem;color:var(--steen);margin:0 0 .55rem}
.appk__code{font-family:var(--cijfer);font-size:.76rem;color:var(--inkt);letter-spacing:.04em;padding-bottom:.9rem;border-bottom:1px solid rgba(154,149,140,.45);display:block}
.appk__docs{list-style:none;margin:.9rem 0 0;padding:0}
.appk__docs li{font-family:var(--label);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steen);padding-left:1.1rem;position:relative;margin-bottom:.45rem}
.appk__docs li::before{content:'—';position:absolute;left:0;color:var(--leer)}
.ruimtekop{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;margin:0 0 .9rem}
.ruimtekop h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:0}
.ruimtekop .meta{font-family:var(--label);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steen)}
.ruimtekop .meta .cijfer{letter-spacing:.05em}
@media (max-width:640px){ .appk{border-right:0;border-bottom:1px solid rgba(154,149,140,.45)} .appk:last-child{border-bottom:0} }


/* =========================================================================
   Uitbreidingen — beeld, ritme en beweging
   ========================================================================= */

/* --- Hero: het beeld komt langzaam naar je toe, de tekst zet zich ------- */
.hero__beeld{transform-origin:52% 55%}
.hero__in>*{opacity:0;transform:translateY(22px);animation:opkomst 1.5s cubic-bezier(.16,.84,.24,1) forwards}
.hero__in .eyebrow{animation-delay:.35s}
.hero__in h1{animation-delay:.55s}
.hero__in .hero__onder{animation-delay:.95s}
@keyframes opkomst{to{opacity:1;transform:none}}
@keyframes heroAdem{from{transform:scale(1)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion:no-preference){
  .hero__beeld{animation:heroAdem 24s cubic-bezier(.22,.6,.36,1) forwards}
}

/* --- Sectiekop met kleine bovenregel ------------------------------------ */
.sectiekop{max-width:52ch}
.sectiekop h2{margin-top:.2rem}
.sectiekop p{margin-top:1.4rem;max-width:46ch}

/* --- De standaard: verbindt de diensten -------------------------------- */
.standaard{background:var(--linnen)}
.standaard .stap{border-top-color:rgba(106,102,96,.45)}
.standaard .stap p{color:#5C5852}

/* --- Het werk: een strook projectbeeld die langzaam doorloopt ---------- */
.werk{overflow:hidden;position:relative}
.werk__spoor{display:flex;gap:clamp(.9rem,1.4vw,1.5rem);width:max-content;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .werk__spoor{animation:werkloop 52s linear infinite}
  .werk:hover .werk__spoor{animation-play-state:paused}
}
@keyframes werkloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.werk__tegel{flex:0 0 auto;width:clamp(200px,20vw,290px);aspect-ratio:3/4;overflow:hidden;background:var(--linnen)}
.werk__tegel img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.97)}
.werk__rand{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ivoor),rgba(246,242,236,0) 7%,rgba(246,242,236,0) 93%,var(--ivoor))}
.vlak--nacht .werk__rand{background:linear-gradient(90deg,var(--nacht),rgba(27,31,35,0) 7%,rgba(27,31,35,0) 93%,var(--nacht))}

/* --- Cijfers ------------------------------------------------------------ */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:clamp(1.8rem,2.8vw,2.9rem)}
.cijferblok{border-top:1px solid var(--wol);padding-top:1.4rem}
.cijferblok__getal{font-family:var(--display);font-size:clamp(2.4rem,3.7vw,3.35rem);line-height:1;letter-spacing:-.01em;display:block}
.cijferblok__na{font-family:var(--display);font-size:.62em;margin-left:.06em}
.cijferblok__wat{font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--steen);display:block;margin-top:1rem}
.cijferblok__uitleg{color:var(--steen);font-size:.9rem;margin-top:.55rem;max-width:23ch}
.vlak--nacht .cijferblok{border-top-color:rgba(246,242,236,.28)}
.vlak--nacht .cijferblok__wat,.vlak--nacht .cijferblok__uitleg{color:#B7B2AA}

/* --- Beeldband tussen hoofdstukken, met rustige parallax --------------- */
.band{position:relative;height:clamp(340px,62vh,720px);overflow:hidden;background:var(--nacht)}
.band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,31,35,.18) 0%,rgba(27,31,35,.26) 45%,rgba(27,31,35,.78) 100%),
             linear-gradient(90deg,rgba(27,31,35,.62) 0%,rgba(27,31,35,.10) 55%,rgba(27,31,35,0) 80%)}
.band__tekst{position:absolute;inset:auto 0 0;z-index:2;color:var(--ivoor);padding-bottom:clamp(2.5rem,5vw,4.5rem)}

/* --- Koppen die regel voor regel binnenkomen --------------------------- */
.opkomst .rgl{display:block;overflow:hidden}
.opkomst .rgl>span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,.84,.24,1)}
.opkomst.er .rgl>span{transform:none}
.opkomst.er .rgl:nth-child(2)>span{transition-delay:.1s}
.opkomst.er .rgl:nth-child(3)>span{transition-delay:.2s}

@media (max-width:900px){
  .werk__tegel{width:clamp(170px,44vw,220px)}
  .band{height:clamp(280px,48vh,420px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__in>*{opacity:1;transform:none;animation:none}
  .werk__spoor{animation:none}
  .opkomst .rgl>span{transform:none}
  .band img{top:0;height:100%}
}


/* Twee ivoren secties achter elkaar hoeven niet dubbel te ademen */
.sectie--aansluit{padding-top:calc(var(--sectie) * .45)}

/* De pagina zet zich rustig neer bij het laden */
body{opacity:0;animation:paginaIn 1.1s ease .05s forwards}
@keyframes paginaIn{to{opacity:1}}

/* Een fijne aanwijzing dat er meer is dan het eerste scherm */
.scrolwenk{
  position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--linnen);
  font-family:var(--label);font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;opacity:.85;
}
.scrolwenk::after{content:'';width:1px;height:54px;background:linear-gradient(180deg,var(--linnen),rgba(222,215,201,0));
  transform-origin:top;animation:wenk 2.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes wenk{0%{transform:scaleY(0);opacity:0}25%{opacity:.9}60%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(1);opacity:0}}
@media (max-width:700px){ .scrolwenk{display:none} }
@media (prefers-reduced-motion:reduce){
  body{opacity:1;animation:none}
  .scrolwenk::after{animation:none}
}


/* De hele dienstkaart is klikbaar: beeld, naam en pijl.
   Eén link per kaart, zodat toetsenbord en zoekmachine één doel zien. */
.dienst--klik{position:relative}
.dienst--klik .pijl::before{content:'';position:absolute;inset:0;z-index:1}
.dienst--klik:has(.pijl:focus-visible){outline:2px solid var(--leer);outline-offset:6px}
.dienst--klik .pijl:focus-visible{outline:none}
.dienst--klik .dienst__beeld{cursor:pointer}
.dienst--klik:hover .pijl::after{width:34px}

/* =========================================================================
   DE UITSPRAAK — de kernzin die zich woord voor woord onthult
   Eén display-element, alleen op het scherm (merkboek p19).
   Het blok blijft staan terwijl je scrolt; de zin vult zich.
   ========================================================================= */
.uitspraak{position:relative;height:230vh;background:var(--ivoor)}
.uitspraak__vast{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
}
.uitspraak__zin{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5vw,4.4rem);line-height:1.16;letter-spacing:-.012em;
  max-width:19ch;margin:0;text-wrap:balance;
}
.uitspraak__zin .w{
  display:inline-block;color:var(--inkt);opacity:.14;
  transition:opacity .45s cubic-bezier(.3,.7,.3,1);
}
.uitspraak__zin .w.aan{opacity:1}
.uitspraak__zin .w.accent.aan{color:var(--leer)}
.uitspraak__staart{
  margin-top:clamp(1.8rem,3vw,2.8rem);max-width:44ch;color:var(--steen);
  opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.uitspraak.klaar .uitspraak__staart{opacity:1;transform:none}
.uitspraak__merk{
  position:absolute;right:0;bottom:14vh;width:clamp(180px,26vw,420px);opacity:0;
  transition:opacity 1.2s ease;pointer-events:none;
}
.uitspraak.klaar .uitspraak__merk{opacity:.09}

@media (max-width:900px){
  .uitspraak{height:190vh}
  .uitspraak__zin{max-width:14ch}
  .uitspraak__merk{display:none}
}
@media (prefers-reduced-motion:reduce){
  .uitspraak{height:auto}
  .uitspraak__vast{position:static;height:auto;padding-block:var(--sectie)}
  .uitspraak__zin .w{opacity:1}
  .uitspraak__staart{opacity:1;transform:none}
}

/* =========================================================================
   DE DRIE DEUREN — de diensten als hoofdstuk, niet als kaartjes
   Drie panelen die bijna het hele scherm vullen. Je kunt er niet langs.
   ========================================================================= */
/* --- de kop: dit is een hoofdstuk, dus gecentreerd en groot --- */
.deuren{background:var(--nacht);color:var(--ivoor);
  border-bottom:1px solid rgba(246,242,236,.16)}
.deuren__kop{text-align:center;padding-block:clamp(4.5rem,9vw,8rem) clamp(2.6rem,4.5vw,4rem)}
.deuren__kop .streep{margin-inline:auto}
.deuren__kop h2{max-width:19ch;margin-inline:auto;
  font-size:clamp(2.15rem,4.3vw,3.85rem);line-height:1.06}
.deuren__lead{margin:1.6rem auto 0;max-width:56ch;color:#C3BEB5;font-size:1.08rem}

/* --- de drie panelen --- */
.deuren__rij{display:flex;gap:1px;background:rgba(246,242,236,.16)}
.deur{
  position:relative;flex:1 1 0;min-width:0;min-height:min(84vh,820px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--nacht);isolation:isolate;
  transition:flex-grow 1s cubic-bezier(.2,.7,.2,1);
}
/* het vlak schuift mee met de scroll, de foto zelf zoomt bij hover — twee lagen, geen conflict */
.deur__vlak{position:absolute;inset:-7% 0;z-index:0;display:block;will-change:transform}
.deur__beeld{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);filter:brightness(.87) saturate(.95);
  transition:transform 1.8s cubic-bezier(.2,.7,.2,1),filter 1.1s ease}
.deur::after{
  content:'';position:absolute;inset:0;z-index:1;transition:opacity 1s ease;
  background:linear-gradient(180deg,rgba(27,31,35,.48) 0%,rgba(27,31,35,.10) 32%,rgba(27,31,35,.55) 60%,rgba(27,31,35,.97) 100%);
}
/* hover: het paneel wint ruimte van de andere twee */
.deuren__rij:hover .deur{flex-grow:.84}
.deuren__rij .deur:hover,.deuren__rij .deur:focus-within{flex-grow:1.52}
.deur:hover .deur__beeld,.deur:focus-within .deur__beeld{transform:scale(1.08);filter:brightness(1.03) saturate(1)}
.deur:hover::after,.deur:focus-within::after{opacity:.86}

.deur__in{position:relative;z-index:2;width:100%;
  padding:clamp(1.7rem,2.6vw,2.9rem) clamp(1.7rem,2.4vw,2.6rem) clamp(2rem,3vw,3.1rem)}
.deur__streep{width:34px;height:1px;background:var(--leer);border:0;margin:0 0 1.4rem;
  transition:width .8s cubic-bezier(.2,.7,.2,1)}
.deur:hover .deur__streep,.deur:focus-within .deur__streep{width:76px}
.deur__naam{font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,2.7vw,3rem);line-height:1.05;margin:0 0 .7rem;color:var(--ivoor)}
.deur__zin{margin:0 0 1.6rem;color:#D3CEC6;font-size:1rem;max-width:26ch}
.deur .pijl{color:var(--linnen);white-space:nowrap}
.deur .pijl::after{background:var(--linnen)}
.deur .pijl::before{content:'';position:absolute;inset:-2400px 0 0 0;z-index:3}
.deur{cursor:pointer}
.deur:focus-within{outline:2px solid var(--leer);outline-offset:-3px}
.deur .pijl:focus-visible{outline:none}

/* rustige opkomst, één voor één */
.deur{opacity:0;transform:translateY(30px)}
.deuren.er .deur{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),
             flex-grow 1s cubic-bezier(.2,.7,.2,1)}
.deuren.er .deur:nth-child(2){transition-delay:.15s}
.deuren.er .deur:nth-child(3){transition-delay:.30s}

/* =========================================================================
   HET RUSTBLOK — na de drie deuren even niets. Alleen de zin.
   Geen foto: die zou concurreren met de drie panelen erboven.
   ========================================================================= */
.rust{background:var(--ivoor);color:var(--inkt);position:relative;overflow:hidden}
.rust__in{padding-block:clamp(7.5rem,16vw,14rem);position:relative;z-index:1}
.rust .streep{margin:0 0 clamp(2rem,3.6vw,3.2rem)}
.rust__zin{font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,3.2vw,3rem);line-height:1.24;max-width:22ch;margin:0;
  text-wrap:balance}
.rust__zin em{font-style:italic;color:var(--leer)}
.rust__merk{position:absolute;right:clamp(1.5rem,6vw,6.5rem);top:50%;translate:0 -50%;
  width:clamp(200px,26vw,400px);height:auto;opacity:.06;z-index:0;pointer-events:none}
.rust.komt .rust__zin,.rust.komt .streep{opacity:0;transform:translateY(20px)}
.rust.er .rust__zin,.rust.er .streep{opacity:1;transform:none;
  transition:opacity 1.3s cubic-bezier(.2,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.rust.er .rust__zin{transition-delay:.12s}
@media (max-width:700px){
  .rust__merk{width:190px;opacity:.05;right:1rem}
  .rust__zin{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rust.komt .rust__zin,.rust.komt .streep{opacity:1;transform:none}
}

@media (max-width:900px){
  .deuren__rij{flex-direction:column}
  .deur{min-height:66vh}
  .deuren__rij:hover .deur,.deuren__rij .deur:hover,.deuren__rij .deur:focus-within{flex-grow:1}
  .deur__vlak{inset:-4% 0}
}
@media (prefers-reduced-motion:reduce){
  .deur{opacity:1;transform:none}
  .deur__beeld,.deur__vlak{transition:none;transform:none}
  .deuren__rij:hover .deur,.deuren__rij .deur:hover,.deuren__rij .deur:focus-within{flex-grow:1}
}

/* Alleen voor schermlezers en zoekmachines: zichtbaar blijft de korte tekst. */
.vw{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* =========================================================================
   TOESTEMMING — een smalle balk, geen pop-up en geen waas.
   Hij legt zich onder de inhoud, bedekt niets en verdwijnt na een keuze.
   ========================================================================= */
.tstm{position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--nacht);color:var(--ivoor);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.5rem,3vw,3rem);
  padding:clamp(1rem,1.8vw,1.4rem) var(--marge);
  border-top:1px solid rgba(246,242,236,.16);
  transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tstm.er{transform:none}
.tstm__tekst{margin:0;flex:1 1 30ch;font-size:.92rem;color:#D3CEC6;max-width:78ch}
.tstm__tekst a{color:var(--ivoor);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(246,242,236,.45)}
.tstm__tekst a:hover{text-decoration-color:var(--leer);color:var(--leer)}
.tstm__knoppen{display:flex;gap:.7rem;flex:0 0 auto}
.tstm__knop{border:1px solid rgba(246,242,236,.34);background:transparent;color:var(--ivoor);
  font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.85rem 1.4rem;cursor:pointer;white-space:nowrap;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.tstm__knop:hover{border-color:var(--ivoor)}
.tstm__knop--ja{background:var(--ivoor);color:var(--inkt);border-color:var(--ivoor)}
.tstm__knop--ja:hover{background:var(--leer);border-color:var(--leer);color:var(--ivoor)}
.tstm__knop:focus-visible{outline:2px solid var(--leer);outline-offset:3px}
@media (max-width:720px){
  .tstm{gap:.9rem}
  .tstm__tekst{font-size:.84rem;line-height:1.5}
  .tstm__knoppen{width:100%}
  .tstm__knop{flex:1 1 0;text-align:center;padding:.9rem .6rem}
}
@media (prefers-reduced-motion:reduce){ .tstm{transition:none} }

/* =========================================================================
   VOORWAARDEN — één lange tekst die leesbaar moet blijven. Smalle kolom,
   nummers in Plex Mono (p19 regel 4), nadruk cursief, nooit vet.
   ========================================================================= */
.vwkop{max-width:58ch}
.vwmeta{font-family:var(--label);font-weight:300;font-size:.72rem;letter-spacing:.08em;
  color:var(--steen);margin-top:2rem}

.vwindex{margin-top:.4rem;columns:2;column-gap:calc(var(--gutter)*2)}
.vwindex__deel{font-family:var(--label);font-weight:400;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--leer);margin:1.8rem 0 .8rem;break-after:avoid}
.vwindex__deel:first-child{margin-top:0}
.vwindex__deel span{color:var(--wol);margin-right:.7rem}
.vwindex ul{list-style:none;margin:0;padding:0}
.vwindex li{margin-bottom:.4rem;break-inside:avoid;font-size:.92rem;color:var(--steen)}
.vwindex a:hover{color:var(--leer)}
@media(max-width:760px){.vwindex{columns:1}}

.vwtekst{max-width:68ch}
.vwdeel{margin:5rem 0 2.4rem}
.vwdeel:first-child{margin-top:0}
.vwdeel h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:.2rem 0 1.6rem}
.vwart{margin:3.4rem 0 1.2rem;scroll-margin-top:7rem;
  font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.15}
.vwart:first-of-type{margin-top:0}

.vwleden{list-style:none;margin:0 0 1.6rem;padding:0}
.vwleden li{position:relative;padding-left:2.5rem;margin-bottom:.95rem;color:var(--steen)}
.vwleden--sub{margin:-.8rem 0 1.6rem;padding-left:2.5rem}
.vwnr{position:absolute;left:0;top:.18em;font-family:var(--cijfer);
  font-size:.74rem;color:var(--leer)}
.vwtekst p{color:var(--steen)}

.vwslot{margin-top:5rem;max-width:44ch}
@media(max-width:640px){
  .vwleden li{padding-left:2rem}
  .vwleden--sub{padding-left:1.6rem}
}

/* Juridische pagina's: de paginatitel is hier de h1, want er is geen hero. */
.vwtitel{font-family:var(--display);font-weight:400;line-height:1.06;margin:.2rem 0 0;
  font-size:clamp(2.1rem,4vw,3.4rem);color:var(--inkt)}

/* Toestemming intrekken moet even makkelijk zijn als geven. */
.vwknop{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--linnen);max-width:52ch}
.knopje{border:1px solid var(--inkt);background:transparent;color:var(--inkt);cursor:pointer;
  font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.9rem 1.5rem;transition:background .35s ease,color .35s ease,border-color .35s ease}
.knopje:hover{background:var(--inkt);color:var(--ivoor)}
.knopje:focus-visible{outline:2px solid var(--leer);outline-offset:3px}
.vwknop p{margin:.9rem 0 0}

/* --- Stand van het contactformulier ------------------------------------- */
.formulier__stand{
  font-family:var(--label);font-weight:300;font-size:.82rem;letter-spacing:.04em;
  margin:0;padding-left:1.1rem;border-left:2px solid var(--wol);color:var(--steen)}
.formulier__stand--goed{border-left-color:var(--leer);color:var(--inkt)}
.formulier__stand--fout{border-left-color:var(--zegel);color:var(--zegel)}
.formulier button[disabled]{opacity:.55;cursor:default}
.cf-turnstile{margin:.4rem 0}

/* --- Huisdossier: ingang voor klanten (dossier.sir-alfred.nl) ------------ */
.menu a.menu__dossier{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .95rem;margin-left:.4rem;
  border:1px solid currentColor;border-radius:1px;opacity:.9}
.menu a.menu__dossier:hover{opacity:1;color:var(--leer);border-color:var(--leer)}
.menu__dossier svg,.dossier__ingang svg{width:10px;height:12px;flex:none}
.dossier__ingang{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem;margin-top:clamp(2rem,3.5vw,2.8rem)}
@media (max-width:900px){.menu a.menu__dossier{margin:1rem 0 0}}