/* =====================================================================
   SON DE MAISON — HUISSTIJL
   Eén stijl voor de hele site. Geen pagina wijkt hiervan af.

   Sfeer    : een woonkamer 's avonds, lamp aan, de piano open.
   Kleur    : linnen en toast als basis, notenhout voor nadruk,
              lamplicht-amber en koper als accent.
   Letters  : Fraunces (koppen) — een warme serif met zachte randen
              Source Sans 3 (tekst) — gemaakt om lang prettig te lezen
   Contrast : alle lopende tekst minimaal 7 : 1
   ===================================================================== */

:root{
  /* lichte basis */
  --paper:#F6EDE0;       /* linnen */
  --paper-2:#EEDFCA;     /* toast */
  --card:#FBF5EC;        /* kaart, iets lichter dan linnen */

  /* donkere nadruk */
  --night:#22170F;       /* diep notenhout */
  --walnut:#2E2017;      /* notenhout */
  --walnut-2:#3B2A1E;

  /* tekst op licht */
  --ink:#2A1D14;
  --grey:#4F3D30;

  /* accenten */
  --bronze:#7C4318;      /* koper — op licht */
  --bronze-light:#EDBE74;/* lamplicht — op donker */
  --felt:#8E3322;        /* vilt — op licht */

  --line:rgba(42,29,20,.16);
  --line-strong:rgba(42,29,20,.32);
  --line-dark:rgba(246,237,224,.16);

  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius:6px;
  --gutter:clamp(22px,5vw,72px);
  --section:clamp(72px,10vw,140px);
}

/* In donkere blokken keren de tekstkleuren om, zodat elk onderdeel vanzelf klopt */
.hero-dark, .dark, .slot, footer{
  --ink:#F6EBDD;
  --grey:#DDCBB6;
  --bronze:var(--bronze-light);
  --felt:#F2A088;
  --line:rgba(246,235,221,.16);
  --line-strong:rgba(246,235,221,.34);
  color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;color:var(--ink);background-color:var(--paper);
  /* heel zachte papierstructuur voor warmte */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family:var(--body);font-size:18px;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
::selection{background:#EDBE74;color:#22170F}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:62ch}
.measure-s{max-width:44ch}

/* ---------- typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:500;margin:0;color:var(--ink);
  font-optical-sizing:auto;font-variation-settings:"SOFT" 70;letter-spacing:-.012em;
}
h1{font-size:clamp(2.7rem,6.6vw,4.7rem);line-height:1.04}
h2{font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;margin-bottom:1.2rem}
h3{font-size:1.5rem;line-height:1.22;margin-bottom:.45rem}
p{margin:0 0 1.2rem}
.lead{font-size:1.2rem;line-height:1.7}
.dim{color:var(--grey)}
.small{font-size:.95rem}

/* ---------- beweging ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- navigatie ---------- */
.nav{border-bottom:1px solid var(--line);background:rgba(246,237,224,.93);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px}
.wordmark{
  font-family:var(--display);font-weight:500;font-size:1.55rem;letter-spacing:-.01em;
  font-variation-settings:"SOFT" 100;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.nav ul{display:flex;gap:clamp(14px,2.4vw,32px);list-style:none;margin:0;padding:0;align-items:center}
.nav a.link{text-decoration:none;font-size:1rem;font-weight:600;color:var(--ink);padding-bottom:3px;position:relative}
.nav a.link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--bronze);transition:right .3s ease}
.nav a.link:hover::after,.nav a.link[aria-current="page"]::after{right:0}
.nav a.login{color:var(--grey);font-weight:400}
@media(max-width:760px){
  .nav{position:static}
  .nav .wrap{flex-direction:column;align-items:flex-start;gap:10px;padding-top:16px;padding-bottom:14px;min-height:0}
  .nav ul{flex-wrap:wrap;gap:18px}
}

/* ---------- secties ---------- */
section{padding:var(--section) 0}
.tight{padding:clamp(48px,7vw,84px) 0}
.band{background:var(--paper-2)}
.dark{
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(237,190,116,.13) 0%, rgba(237,190,116,0) 70%),
    linear-gradient(175deg,var(--walnut-2) 0%, var(--walnut) 100%);
}

.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media(min-width:880px){
  .split{grid-template-columns:1fr 1fr}
  .split.aside{grid-template-columns:.72fr 1fr}
  .split.wide{grid-template-columns:1.15fr .85fr}
}
.split.middle{align-items:center}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- kop van elke pagina: dezelfde nachtkop ---------- */
.eyebrow{font-size:.86rem;font-weight:600;letter-spacing:.2em;color:var(--bronze);margin:0 0 1.5rem;text-transform:uppercase}

.hero-dark{
  background:
    radial-gradient(55% 65% at 20% 15%, rgba(237,190,116,.20) 0%, rgba(237,190,116,0) 70%),
    radial-gradient(45% 55% at 90% 90%, rgba(158,58,40,.18) 0%, rgba(158,58,40,0) 70%),
    linear-gradient(180deg,var(--night) 0%, var(--walnut) 100%);
}
.hero{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(52px,7vw,92px)}
.hero-dark .hero{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px);align-items:center}
@media(min-width:980px){.hero-dark .hero{grid-template-columns:.85fr 1.15fr;gap:clamp(40px,4vw,72px)}}
.hero h1{max-width:14ch}
.hero .lead{margin-top:1.6rem;max-width:48ch}
.hero-dark .layers{margin-top:0}

/* ---------- klankkaart ---------- */
.klankkaart{width:100%;height:auto;overflow:visible}
.klankkaart .land{stroke:#6A4E37;stroke-width:3.2;stroke-linecap:round;fill:none;opacity:.9}
.klankkaart .kern{fill:#FFF1D6}
.klankkaart .kern.k0{animation:pols 6s ease-in-out infinite}
.klankkaart .kern.k1{animation:pols 7.5s ease-in-out infinite .8s}
.klankkaart .kern.k2{animation:pols 9s ease-in-out infinite 1.6s}
.klankkaart .kern.k3{animation:pols 6.8s ease-in-out infinite 2.4s}
.klankkaart .kern.k4{animation:pols 8.2s ease-in-out infinite 3.2s}
.klankkaart .kern.k5{animation:pols 7.1s ease-in-out infinite 4s}
@keyframes pols{0%,100%{opacity:.7}50%{opacity:1}}
.klankkaart .arc{
  fill:none;stroke:#EDBE74;stroke-width:1;opacity:.55;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:trek 3s cubic-bezier(.3,.8,.3,1) forwards;
  transition:stroke .25s ease,opacity .25s ease,stroke-width .25s ease;
}
.klankkaart .arc:nth-child(2n){animation-delay:.4s}
.klankkaart .arc:nth-child(3n){animation-delay:.9s}
.klankkaart .arc:nth-child(5n){animation-delay:1.3s}
.klankkaart .arc:hover{stroke:#FFF3DE;opacity:1;stroke-width:1.8}
@keyframes trek{to{stroke-dashoffset:0}}
.klankkaart .end{fill:#EDBE74}
.klankkaart .end:hover{fill:#FFF3DE}
.klankkaart .pulse{fill:#FFF3DE;opacity:.9}
.klankkaart .thuis{fill:#E0694E;stroke:#FFF3DE;stroke-width:1.1}
.map-note{font-size:.82rem;font-weight:600;letter-spacing:.16em;color:var(--grey);margin:18px 0 0;text-align:center}
@media (prefers-reduced-motion:reduce){
  .klankkaart .arc{animation:none;stroke-dashoffset:0}
  .klankkaart .pulse{display:none}
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:.03em;
  padding:15px 32px;border:1.5px solid var(--ink);border-radius:999px;background:none;color:var(--ink);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn.solid{background:var(--bronze);border-color:var(--bronze);color:#FFF8EE}
.btn.solid:hover{background:var(--felt);border-color:var(--felt)}
.hero-dark .btn,.dark .btn,.slot .btn{border-color:#EDBE74;color:#F6EBDD}
.hero-dark .btn:hover,.dark .btn:hover,.slot .btn:hover{background:#EDBE74;color:#22170F}
.hero-dark .btn.solid,.dark .btn.solid,.slot .btn.solid{background:#EDBE74;border-color:#EDBE74;color:#22170F}
.hero-dark .btn.solid:hover,.dark .btn.solid:hover,.slot .btn.solid:hover{background:#F6D39C;border-color:#F6D39C}

/* ---------- twee takken ---------- */
.branches{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px)}
@media(min-width:880px){.branches{grid-template-columns:1fr 1fr}}
.branch{
  text-decoration:none;display:block;background:var(--card);border-radius:var(--radius);
  padding:14px 14px 30px;box-shadow:0 1px 0 rgba(42,29,20,.05),0 18px 40px -24px rgba(60,36,18,.35);
  transition:transform .35s ease,box-shadow .35s ease;
}
.branch:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(42,29,20,.05),0 26px 50px -24px rgba(60,36,18,.45)}
.branch .shot{margin-bottom:24px}
.branch h3,.branch p,.branch .more{margin-left:14px;margin-right:14px}
.branch h3{font-size:clamp(1.8rem,3.4vw,2.3rem);margin-bottom:.5rem}
.branch .more{color:var(--bronze);font-weight:600;display:inline-block;margin-top:.3rem;position:relative;padding-right:24px}
.branch .more::after{content:"→";position:absolute;right:0;transition:transform .3s ease}
.branch:hover .more::after{transform:translateX(6px)}

/* ---------- lijsten met haarlijnen ---------- */
.rows{margin:0;padding:0}
.row{border-top:1px solid var(--line);padding:22px 6px;display:grid;grid-template-columns:1fr;gap:6px;transition:background-color .3s ease}
@media(min-width:720px){.row{grid-template-columns:.38fr 1fr;gap:32px}}
.row:hover{background:rgba(140,79,34,.06)}
.dark .row:hover{background:rgba(237,190,116,.07)}
.row:last-child{border-bottom:1px solid var(--line)}
.row dt{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0;color:var(--bronze);font-variant-numeric:lining-nums tabular-nums}
.row dd{margin:0;color:var(--grey);font-size:1.02rem}

/* ---------- tarief (oud blok, blijft bruikbaar) ---------- */
.rate{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,72px);align-items:baseline}
.rate .amount{font-family:var(--display);font-weight:600;font-size:clamp(2.8rem,7vw,4.2rem);line-height:1;color:var(--felt)}
.rate .unit{font-size:1rem;color:var(--grey);display:block;margin-top:.6rem;max-width:28ch}

/* ---------- beeld ---------- */
.shot{
  background:linear-gradient(150deg,#4A3526,#2A1D14);border-radius:var(--radius);
  color:#DDCBB6;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:24px;font-size:.9rem;line-height:1.45;
}
.shot.wide{aspect-ratio:16/9}
.shot.tall{aspect-ratio:3/4}
.shot.full{aspect-ratio:21/9}
img.shot{padding:0;object-fit:cover;width:100%;height:auto;box-shadow:0 22px 44px -26px rgba(40,24,12,.55)}

/* ---------- citaat ---------- */
.quote{
  font-family:var(--display);font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.3;max-width:24ch;margin:0;color:var(--ink);
}
.quote + .attrib{color:var(--bronze);font-weight:600;font-size:.95rem;margin-top:1.3rem}

/* ---------- formulier ---------- */
form{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;font-size:.98rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1.05rem;font-weight:400;color:var(--ink);
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 14px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#8A7564}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(140,79,34,.15)}
.field textarea{resize:vertical;min-height:110px}
.field-pair{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:620px){.field-pair{grid-template-columns:1fr 1fr;gap:22px}}
.form-note{font-size:.95rem;color:var(--grey);margin-top:16px}
.form-msg{margin-top:22px;padding:16px 20px;border-left:3px solid var(--bronze);background:rgba(140,79,34,.08);border-radius:var(--radius);font-size:1rem}
.form-msg[hidden]{display:none}

/* ---------- taalschakelaar ---------- */
html[data-lang="nl"] [lang="en"]{display:none}
html[data-lang="en"] [lang="nl"]{display:none}
.lang{display:flex;gap:6px;align-items:center;font-size:.95rem;color:var(--grey)}
.lang button{font-family:var(--body);font-size:.95rem;font-weight:600;background:none;border:0;color:var(--grey);padding:4px 2px;cursor:pointer;border-bottom:2px solid transparent}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--bronze)}

/* ---------- slotstrook ---------- */
.slot{
  text-align:center;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(237,190,116,.18) 0%, rgba(237,190,116,0) 70%),
    var(--walnut);
}
.slot h2{max-width:18ch;margin-left:auto;margin-right:auto}
.slot p{margin-left:auto;margin-right:auto;max-width:46ch}

/* ---------- voettekst ---------- */
footer{background:var(--night);color:var(--grey);padding:clamp(52px,7vw,88px) 0 42px;font-size:1rem}
footer h4{font-family:var(--body);font-size:.84rem;font-weight:600;letter-spacing:.18em;color:var(--bronze);margin:0 0 16px}
footer a{text-decoration:none;transition:color .25s ease}
footer a:hover{color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot-mark{font-family:var(--display);font-weight:500;font-size:1.9rem;font-variation-settings:"SOFT" 100;color:var(--ink);margin-bottom:14px}
.foot-bottom{border-top:1px solid var(--line);margin-top:46px;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.92rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}

/* ---------- werkgebiedkaart ---------- */
.kaart-blok{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:start}
@media(min-width:880px){.kaart-blok{grid-template-columns:.92fr 1.08fr}}
.kaart-figuur{width:100%;max-width:480px;margin:0 auto}
.nlkaart{width:100%;height:auto}
.nlkaart .land{stroke:#7A5B41;stroke-width:2.6;stroke-linecap:round;fill:none;opacity:.85}
.nlkaart .bereik{fill:rgba(237,190,116,.12);stroke:rgba(237,190,116,.5);stroke-width:1;transition:fill .3s ease,stroke .3s ease}
.nlkaart .bereik.aan{fill:rgba(237,190,116,.26);stroke:#F6D39C;stroke-width:1.6}
.nlkaart .stip{fill:#F2A088;transition:r .25s ease}
.nlkaart .stip.aan{fill:#FFF3DE;r:6}
.nlkaart .plaatsnaam{font-family:var(--body);font-size:14px;font-weight:600;fill:#DDCBB6;transition:fill .3s ease}
.nlkaart .plaatsnaam.aan{fill:#FFF3DE}
.nlkaart .werkplaats-bereik{fill:rgba(242,160,136,.15);stroke:rgba(242,160,136,.65);stroke-width:1.2}
.nlkaart .werkplaats-stip{fill:#FFF3DE;stroke:#F2A088;stroke-width:2}
.nlkaart .werkplaats-naam{font-family:var(--body);font-size:14px;font-weight:600;fill:#F7C3B3}

.team{list-style:none;margin:0;padding:0}
.team li{border-top:1px solid var(--line);padding:18px 8px;cursor:default;transition:background-color .3s ease;border-radius:4px}
.team li:last-child{border-bottom:1px solid var(--line)}
.team li.aan{background:rgba(237,190,116,.1)}
.team .naam{display:block;font-family:var(--display);font-weight:500;font-size:1.4rem;line-height:1.2;color:var(--ink)}
.team .plaats{display:block;font-size:.84rem;font-weight:600;letter-spacing:.14em;color:var(--bronze);margin:4px 0 6px;text-transform:uppercase}
.team .rol{display:block;font-size:1rem;color:var(--grey)}

/* ---------- prijsindicatie in het aanvraagformulier ---------- */
.prijsindicatie{
  margin:8px 0 28px;padding:26px;border-radius:var(--radius);
  background:var(--card);border:1px solid rgba(140,79,34,.3);
  box-shadow:0 18px 40px -28px rgba(60,36,18,.45);
}
.prijsindicatie .kop{font-size:.84rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:10px}
.prijsindicatie .som{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6vw,2.8rem);line-height:1;color:var(--felt);font-variant-numeric:lining-nums}
.prijsindicatie .uitleg{font-size:1rem;color:var(--grey);margin:12px 0 0}
.prijsindicatie .opbouw{display:grid;gap:4px;margin-top:10px;font-size:.98rem;color:var(--grey)}
.prijsindicatie .opbouw span{display:flex;justify-content:space-between;gap:16px;max-width:360px}
.prijsindicatie .opbouw b{font-weight:600;color:var(--ink)}
.prijsindicatie .voorwaarden{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:.98rem;color:var(--grey)}
.prijsindicatie .voorwaarden li{padding-left:16px;position:relative}
.prijsindicatie .voorwaarden li::before{content:"·";position:absolute;left:4px;color:var(--bronze)}