:root{
    --serif:'Newsreader',Georgia,serif;
    --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --green:#1e2b23; --green-2:#233029; --cream:#f4f0e9; --cream-2:#eae3d6; --paper:#faf7f1;
    --ink:#23231f; --body:#55564d; --muted:#837e71; --clay:#c0876b; --clay-d:#a96f4d;
    --sage:#93a094; --on-green:#efeadd; --on-green-2:#c3c9bf; --line:#dcd5c8; --hair:#e4ded1; --card-line:#e6e0d3;
    --maxw:1200px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{margin:0;background:var(--cream);color:var(--body);font-family:var(--sans);
       font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
  img,svg{max-width:100%;height:auto;display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,h4,p,ul,figure{margin:0;} ul{padding:0;list-style:none;}
  :where(a,button):focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px;}
  ::selection{background:#e9d8c7;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,5vw,64px);}
  .band{padding:clamp(74px,9vw,128px) 0;}
  .band-green{background:var(--green);color:var(--on-green-2);}
  .band-cream{background:var(--cream);}
  .band-greige{background:var(--cream-2);}

  /* Typografie */
  .kicker{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0;}
  .kicker-rule{display:inline-block;padding-bottom:13px;border-bottom:1px solid var(--hair);}
  .band-green .kicker-rule{border-color:rgba(239,234,221,.22);}
  .disp,.disp-2,.disp-3,.pull,.subi{-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal;}
  .disp{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.04;letter-spacing:-.021em;color:var(--ink);}
  .disp-2{font-family:var(--serif);font-weight:500;font-size:clamp(2.05rem,3.8vw,3.2rem);line-height:1.06;letter-spacing:-.014em;color:var(--ink);}
  .disp-3{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.12;color:var(--ink);}
  .band-green .disp,.band-green .disp-2,.band-green .disp-3{color:#f2ede1;}
  .subi{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.22;color:var(--clay);}
  .lead{font-size:1.16rem;line-height:1.55;color:var(--body);}
  .band-green .lead{color:var(--on-green-2);}
  p.body{margin:0 0 1.1em;color:var(--body);}
  .band-green p.body{color:var(--on-green-2);}
  p.body:last-child{margin-bottom:0;}
  .measure{max-width:36em;} .measure-s{max-width:27em;}
  strong{font-weight:600;color:var(--ink);} .band-green strong{color:#f4efe4;}
  em.hl,.hl{color:var(--clay);font-style:normal;}
  .serif-i{font-family:var(--serif);font-style:italic;color:var(--clay);}
  .pull{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.32;color:var(--ink);letter-spacing:-.005em;}
  .band-green .pull{color:#f2ede1;}
  .stack>*+*{margin-top:1.05em;}

  /* Kolom-label + inhoud (editorial 2-koloms) */
  .split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(36px,6vw,84px);align-items:start;}
  .split-c{align-items:center;}
  .split--wideleft{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);}

  /* Cascade-blok in hero */
  .cascade{border-left:1px solid var(--line);padding-left:22px;margin:26px 0;}
  .cascade p{margin:0 0 6px;color:var(--body);font-size:1.05rem;line-height:1.5;}
  .cascade p:last-child{margin-bottom:0;}

  /* Copper tick-list */
  .tlist{display:flex;flex-direction:column;gap:16px;}
  .tlist li{position:relative;padding-left:22px;font-family:var(--serif);font-size:1.18rem;line-height:1.35;color:var(--ink);}
  .band-green .tlist li{color:#eee7d9;}
  .tlist li::before{content:"";position:absolute;left:0;top:.28em;width:2px;height:1.15em;background:var(--clay);}
  .tlist--cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;}

  /* Knoppen */
  .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.2;
       padding:15px 27px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,transform .12s;}
  .btn:active{transform:translateY(1px);}
  .btn-clay{background:var(--clay);color:#26190f;border-color:var(--clay);}
  .btn-clay:hover{background:var(--clay-d);color:#fff;}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
  .band-green .btn-outline{color:var(--on-green);border-color:rgba(239,234,221,.3);}
  .btn-outline:hover{background:rgba(0,0,0,.04);} .band-green .btn-outline:hover{background:rgba(255,255,255,.06);}
  .btn-lg{padding:18px 34px;font-size:1.04rem;}
  .link{font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--clay-d);border-bottom:1px solid rgba(169,111,77,.35);padding-bottom:2px;}
  .band-green .link{color:var(--clay);border-color:rgba(192,135,107,.45);}
  .link:hover{border-color:currentColor;}
  .actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px;}
  .fine{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem;margin-top:16px;}
  .band-green .fine{color:var(--sage);}

  /* Header */
  .hd{position:sticky;top:0;z-index:60;background:rgba(244,240,233,.88);backdrop-filter:saturate(1.1) blur(9px);border-bottom:1px solid var(--hair);}
  .hd-in{display:flex;align-items:center;justify-content:space-between;height:76px;}
  .brand{display:flex;align-items:center;gap:11px;color:var(--ink);}
  .brand b{font-family:var(--sans);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;}
  .nav{display:flex;align-items:center;gap:34px;}
  .nav a{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--body);}
  .nav a:hover{color:var(--ink);}
  .hd .btn{padding:11px 18px;font-size:.9rem;}
  .burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center;}
  .burger span,.burger span::before,.burger span::after{content:"";display:block;width:24px;height:2px;background:var(--ink);position:relative;transition:transform .2s,opacity .2s;}
  .burger span::before{position:absolute;top:-7px;} .burger span::after{position:absolute;top:7px;}
  #nv{display:none;} .navpanel{display:none;}

  /* Diagram-figuur */
  .fig{background:var(--paper);border:1px solid var(--card-line);border-radius:8px;padding:26px 26px 20px;box-shadow:0 30px 60px -38px rgba(30,43,35,.4);}
  .band-green .fig{background:#20291f;border-color:rgba(239,234,221,.12);box-shadow:none;}
  .fig svg{width:100%;height:auto;overflow:visible;}
  .fig figcaption{margin-top:14px;text-align:center;font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--muted);}
  .band-green .fig figcaption{color:var(--sage);}
  .dep-line{stroke:var(--clay);stroke-width:1.1;stroke-dasharray:2.5 3;opacity:.7;}
  .dep-chip{fill:var(--paper);stroke:var(--card-line);stroke-width:1;}
  .band-green .dep-chip{fill:#273126;stroke:rgba(239,234,221,.14);}
  .dep-cat{fill:var(--clay);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.13em;}
  .dep-desc{fill:#3b3930;font-family:var(--sans);font-size:13.5px;}
  .band-green .dep-desc{fill:#dfe2d8;}
  .dep-hub{fill:var(--green);} .band-green .dep-hub{fill:#12190f;}
  .dep-hub-t{fill:#f2ede1;font-family:var(--serif);font-style:italic;font-size:19px;}
  .dep-faucet{stroke:var(--clay);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

  /* 5-stappen index */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px;border-top:1px solid rgba(239,234,221,.18);}
  .steps .s{padding:28px 22px 6px;border-left:1px solid rgba(239,234,221,.18);}
  .steps .s:first-child{border-left:0;padding-left:0;}
  .s .num{font-family:var(--serif);font-size:1.1rem;color:var(--clay);}
  .s .t{font-family:var(--serif);font-weight:500;font-size:1.42rem;line-height:1.1;color:#f2ede1;margin:12px 0 12px;}
  .s .q{font-size:.96rem;line-height:1.48;color:var(--on-green-2);}

  /* Documentplaten */
  .plate{background:var(--paper);border:1px solid var(--card-line);border-radius:6px;padding:22px;box-shadow:0 30px 55px -34px rgba(30,43,35,.4);}
  .plate img{width:100%;border-radius:3px;border:1px solid rgba(0,0,0,.05);}
  .tool{border-top:2px solid var(--clay);padding-top:26px;}
  .tool .tk{font-family:var(--serif);font-weight:500;font-size:1.55rem;color:var(--ink);margin-bottom:12px;}
  .band-green .tool .tk{color:#f2ede1;}

  /* Prijs */
  .price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
  .price .amt{font-family:var(--serif);font-weight:500;font-size:3.3rem;line-height:1;color:#f2ede1;}
  .price .note{font-family:var(--sans);font-size:.95rem;color:var(--sage);}

  /* Groei-index */
  .grow{display:flex;flex-direction:column;}
  .grow .row{display:grid;grid-template-columns:8rem 1fr;gap:24px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line);}
  .grow .row:last-child{border-bottom:1px solid var(--line);}
  .grow .ph{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);white-space:nowrap;}
  .grow .val{font-family:var(--serif);font-size:1.4rem;color:var(--ink);line-height:1.25;}
  .grow .val small{display:block;font-family:var(--sans);font-size:.95rem;color:var(--muted);margin-top:3px;}

  /* Resultaten */
  .results li{padding:17px 0;border-top:1px solid rgba(239,234,221,.18);font-family:var(--serif);font-size:1.25rem;color:#f2ede1;}
  .results li:last-child{border-bottom:1px solid rgba(239,234,221,.18);}

  /* Footer */
  .ft{background:var(--green);color:var(--on-green-2);padding:78px 0 40px;}
  .ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(239,234,221,.14);}
  .ft b.nm{font-family:var(--sans);font-weight:800;font-size:1.2rem;color:#f2ede1;letter-spacing:-.02em;}
  .ft p{margin-top:14px;max-width:30ch;font-size:1rem;color:var(--on-green-2);}
  .ft h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-bottom:15px;}
  .ft a{display:block;font-size:.98rem;color:var(--on-green-2);padding:5px 0;}
  .ft a:hover{color:#f2ede1;}
  .ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-family:var(--sans);font-size:.78rem;letter-spacing:.03em;color:var(--sage);text-transform:uppercase;}

  .hero{padding-top:clamp(56px,7vw,96px);}
  .center{text-align:center;} .mxa{margin-inline:auto;}
  hr.hair{border:0;border-top:1px solid var(--line);margin:clamp(44px,6vw,64px) 0;}
  .band-green hr.hair{border-color:rgba(239,234,221,.16);}

  /* Relatie-/definitielijst (hoe de onderdelen samenhangen) */
  .deflist{border-top:1px solid var(--line);margin-top:12px;}
  .band-green .deflist{border-color:rgba(239,234,221,.2);}
  .deflist .drow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(16px,4vw,54px);
       padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .band-green .deflist .drow{border-color:rgba(239,234,221,.2);}
  .deflist .dt{font-family:var(--serif);font-weight:500;font-size:1.34rem;line-height:1.18;color:var(--ink);}
  .band-green .deflist .dt{color:#f2ede1;}
  .deflist .role{display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;
       text-transform:uppercase;color:var(--clay);margin-bottom:9px;}
  .deflist .dd{color:var(--body);font-size:1.03rem;line-height:1.55;}
  .band-green .deflist .dd{color:var(--on-green-2);}
  .deflist .dd strong{color:var(--ink);} .band-green .deflist .dd strong{color:#f4efe4;}

  /* Vergelijking: wandkraan / bladkraan */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,30px);}
  .compare .opt{background:var(--paper);border:1px solid var(--card-line);border-top:2px solid var(--clay);
       border-radius:6px;padding:30px 28px;}
  .band-green .compare .opt{background:#20291f;border-color:rgba(239,234,221,.14);border-top-color:var(--clay);}
  .compare .lbl{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--ink);margin-bottom:14px;}
  .band-green .compare .lbl{color:#f2ede1;}
  .compare .opt h3{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.5;color:var(--body);margin-bottom:18px;}
  .band-green .compare .opt h3{color:var(--on-green-2);}
  .compare .opt ul{display:flex;flex-wrap:wrap;gap:9px;}
  .compare .opt li{font-family:var(--sans);font-size:.9rem;color:#3b3930;background:rgba(192,135,107,.1);
       border:1px solid rgba(192,135,107,.3);border-radius:100px;padding:6px 14px;line-height:1.3;}
  .band-green .compare .opt li{color:#eee7d9;background:rgba(192,135,107,.14);border-color:rgba(192,135,107,.36);}

  /* RN-kaarten (productonderdelen / wat je krijgt) */
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .card{background:var(--paper);border:1px solid var(--card-line);border-top:2px solid var(--clay);border-radius:6px;padding:28px 28px;}
  .band-green .card{background:#20291f;border-color:rgba(239,234,221,.14);}
  .card .ct{font-family:var(--serif);font-weight:500;font-size:1.28rem;line-height:1.15;color:var(--ink);margin-bottom:11px;}
  .band-green .card .ct{color:#f2ede1;}
  .card p{color:var(--body);font-size:1rem;line-height:1.55;margin:0;}
  .band-green .card p{color:var(--on-green-2);}

  /* Twee diagrammen naast elkaar */
  .figpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,30px);align-items:start;}

  @media (max-width:920px){
    .nav,.hd .btn{display:none;} .burger{display:flex;}
    #nv:checked ~ .navpanel{display:block;}
    .navpanel{position:absolute;left:0;right:0;top:76px;background:var(--cream);border-bottom:1px solid var(--line);padding:8px clamp(24px,5vw,64px) 22px;}
    .navpanel a{display:block;font-family:var(--sans);font-weight:500;font-size:1.05rem;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--hair);}
    .navpanel a:last-of-type{border-bottom:0;}
    .navpanel .btn{margin-top:14px;width:100%;justify-content:center;}
    #nv:checked ~ .burger span{background:transparent;}
    #nv:checked ~ .burger span::before{top:0;transform:rotate(45deg);}
    #nv:checked ~ .burger span::after{top:0;transform:rotate(-45deg);}
    .split{grid-template-columns:1fr;gap:40px;}
    .hero .fig{max-width:520px;margin-inline:auto;}
    .steps{grid-template-columns:1fr;border-top:0;margin-top:28px;}
    .steps .s{border-left:0;border-top:1px solid rgba(239,234,221,.18);padding:24px 0 6px;}
    .tlist--cols{grid-template-columns:1fr;}
    .compare,.cards,.figpair{grid-template-columns:1fr;}
    .deflist .drow{grid-template-columns:1fr;gap:8px;padding:22px 0;}
    .ft-top{grid-template-columns:1fr 1fr;} .ft .ft-brand{grid-column:1/-1;}
  }
  @media (max-width:560px){
    body{font-size:17px;} .actions{flex-direction:column;align-items:stretch;} .actions .btn{justify-content:center;}
    .ft-top{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none!important;}}