/* Doelen Advocatuur */
:root{
  --ink:#22161f;
  --plum:#5d2440;
  --plum-d:#411829;
  --ochre:#a9651f;
  --paper:#ffffff;
  --soft:#f7f2f4;
  --soft2:#faf7f3;
  --line:rgba(34,22,31,.16);
  --line-s:rgba(34,22,31,.09);
  --mut:#6d5c65;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.68 var(--sans);
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--plum);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ochre)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--plum);color:#fff;padding:10px 14px;z-index:60}

/* header */
.hd{border-bottom:1px solid var(--line)}
.hd-top{background:var(--plum);color:#f6ebe1;text-align:center;padding:22px 24px 18px}
.wordmark{display:inline-block;font:600 27px/1 var(--serif);letter-spacing:.02em;color:#fff;text-decoration:none}
.wordmark span{font-style:italic;color:#e9b98e}
.tagline{margin:8px 0 0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#d6b6c4}
.nt{position:absolute;left:-9999px}
.burger{display:none}
.nav ul{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0;max-width:var(--wrap);margin:0 auto}
.nav a{display:block;padding:14px 18px;font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{color:var(--plum);border-bottom-color:var(--line)}
.nav a.on{border-bottom-color:var(--ochre);color:var(--plum)}

/* crumbs */
.crumbs{padding-top:18px;font-size:13.5px;color:var(--mut)}
.crumbs a{color:var(--mut)}
.crumbs b{margin:0 8px;font-weight:400;color:var(--line)}

/* opener */
.opener{padding:66px 0 54px;border-bottom:1px solid var(--line)}
.opener h1{margin:0;max-width:19ch;font:400 clamp(34px,5vw,58px)/1.1 var(--serif);letter-spacing:-.012em}
.opener-lead{margin:26px 0 0;max-width:62ch;font-size:19px;color:#3d2f37}
.opener-cta{margin:30px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.opener-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr);gap:60px;align-items:start}
.opener-panel{border-top:2px solid var(--plum);background:var(--soft);padding:22px 22px 20px}
.opener-panel h2{margin:0 0 12px;font:600 12.5px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--plum)}
.opener-panel ul{list-style:none;margin:0;padding:0}
.opener-panel li{border-top:1px solid var(--line-s);padding:11px 0}
.opener-panel li:first-child{border-top:0;padding-top:0}
.opener-panel a{display:block;font:400 17.5px/1.3 var(--serif);text-decoration:none;color:var(--plum)}
.opener-panel a:hover{color:var(--ochre);text-decoration:underline}
.opener-panel span{display:block;margin-top:3px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.op-foot{margin:18px 0 0;font-size:14.5px}
.op-foot a{color:var(--ink)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr);gap:60px;align-items:start;padding-bottom:10px}
.ph-grid .nu{margin-bottom:0;margin-top:34px}
.btn{display:inline-block;background:var(--plum);color:#fff;text-decoration:none;padding:13px 22px;
  font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--plum)}
.btn:hover{background:var(--plum-d);border-color:var(--plum-d);color:#fff}
.btn.ghost{background:transparent;color:var(--plum);border-color:var(--line)}
.btn.ghost:hover{background:var(--soft);color:var(--plum)}

/* page head */
.ph{padding:40px 24px 6px;max-width:var(--wrap)}
.kicker{margin:0 0 10px;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ochre)}
.ph h1{margin:0;max-width:20ch;font:400 clamp(30px,4.2vw,46px)/1.12 var(--serif);letter-spacing:-.01em}
.lead{margin:20px 0 0;max-width:66ch;font-size:19px;color:#3d2f37}

/* sections */
.band-lines{padding:52px 24px}
.sec-hd{border-top:2px solid var(--ink);padding-top:14px;margin-bottom:26px}
.sec-hd h2{margin:0;font:400 27px/1.2 var(--serif)}
.sec-hd p{margin:6px 0 0;color:var(--mut);font-size:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}

/* situatie-rijen */
.sit-rows{list-style:none;margin:0;padding:0}
.sit-rows li{border-bottom:1px solid var(--line-s)}
.sit-rows a{display:block;padding:17px 0;text-decoration:none;color:var(--ink)}
.sit-rows a:hover{background:var(--soft2)}
.sr-q{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ochre)}
.sr-t{display:block;margin-top:5px;font:400 21px/1.28 var(--serif);color:var(--plum)}
.sit-rows a:hover .sr-t{color:var(--ochre)}
.sr-k{display:block;margin-top:4px;font-size:15.5px;color:var(--mut)}

/* gidsen */
.gids{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-s);border:1px solid var(--line-s)}
.gids a{display:block;background:var(--paper);padding:24px 22px;height:100%;text-decoration:none;color:var(--ink)}
.gids a:hover{background:var(--soft2)}
.gids h3{margin:0;font:400 20px/1.3 var(--serif);color:var(--plum)}
.gids p{margin:8px 0 0;font-size:15.5px;color:var(--mut)}

/* quote band */
.quote{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.quote p{margin:0;max-width:30ch;font:italic 400 clamp(23px,3vw,32px)/1.35 var(--serif);color:var(--plum)}
.quote-link{margin-top:18px !important;font:400 14.5px/1.5 var(--sans);font-style:normal !important}
.quote-link a{color:var(--ink)}

/* kantoorblok */
.kb{background:var(--plum);color:#f3e7e2;padding:48px 24px}
.kb-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px}
.kb-lb{margin:0 0 10px;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:#e9b98e}
.kb h2{margin:0;font:400 30px/1.2 var(--serif);color:#fff}
.kb-pl{margin:6px 0 0;font-size:15px;color:#d6b6c4}
.kb-ty{margin:16px 0 0;font-size:16.5px;color:#f0e0e6}
.kb-list{margin:0;padding:0;list-style:none}
.kb-list li{border-top:1px solid rgba(255,255,255,.18);padding:12px 0;font-size:16px}
.kb-cta{margin:22px 0 0}
.kb-cta a{display:inline-block;background:#f6ecdf;color:var(--plum-d);text-decoration:none;padding:13px 22px;
  font-size:14.5px;letter-spacing:.05em;font-weight:600}
.kb-cta a:hover{background:#fff;color:var(--plum-d)}
.kb-url{margin:12px 0 0;font-size:13.5px;color:#d6b6c4;word-break:break-all}

/* kolommen */
.cols{display:grid;grid-template-columns:290px minmax(0,1fr);gap:56px;padding-top:34px;padding-bottom:56px;align-items:start}
.cols.one{grid-template-columns:minmax(0,760px)}
.side{position:sticky;top:20px}
.nu{background:var(--soft);border-top:2px solid var(--plum);padding:20px 20px 22px;margin-bottom:26px}
.nu h2{margin:0 0 12px;font:600 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.nu ol{margin:0;padding-left:20px}
.nu li{margin-bottom:10px;font-size:15.5px;line-height:1.55}
.nu li:last-child{margin-bottom:0}
.nu.alt{border-top-color:var(--ochre)}
.plain{list-style:none;margin:0;padding:0}
.plain li{margin-bottom:8px;font-size:15.5px}
.toc h2{margin:0 0 10px;font:600 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{border-top:1px solid var(--line-s)}
.toc a{display:block;padding:8px 0;font-size:15px;color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--ochre)}

/* prose */
.prose{max-width:70ch}
.prose h2{margin:38px 0 12px;font:400 26px/1.25 var(--serif);color:var(--plum);scroll-margin-top:20px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:26px 0 8px;font:600 17.5px/1.4 var(--sans)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.faq{margin-top:40px;border-top:2px solid var(--ink);padding-top:18px}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--line-s)}
.faq summary{cursor:pointer;padding:14px 0;font:600 17px/1.45 var(--sans);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:22px;color:var(--ochre);font-weight:400}
.faq details[open] summary::before{content:"–"}
.faq details>div{padding:0 0 12px 22px}
.faq details>div p{margin:0 0 10px}
.rel{margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.rel h2{margin:0 0 10px;font:600 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.rel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.prose-two h3{margin-top:0;font:400 21px/1.3 var(--serif);color:var(--plum)}
.prose-two div h3+p{margin-bottom:22px}
.prose-two p{margin:0 0 14px}

/* advocatengids */
.ag{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ag li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:40px;padding:26px 0;border-bottom:1px solid var(--line-s)}
.ag-vak{margin:0;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ochre)}
.ag h3{margin:6px 0 0;font:400 23px/1.25 var(--serif);color:var(--plum)}
.ag-pl{margin:5px 0 0;font-size:15px;color:var(--mut)}
.ag-r p{margin:0 0 10px}
.ag-sit{font-size:15.5px}
.ag-cta a{font-weight:600}
.ag-url{font-size:13.5px;color:var(--mut);word-break:break-all}

/* footer */
.ft{background:var(--ink);color:#d9cfd4;margin-top:0;padding:52px 0 0;font-size:15px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ft-mark{margin:0 0 12px;font:400 22px/1.2 var(--serif);color:#fff}
.ft-a p{margin:0 0 12px;color:#b7a8b0;max-width:38ch}
.ft-mail a{color:#e9b98e}
.ft h2{margin:0 0 12px;font:600 12.5px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#8f8189}
.ft h2.mt{margin-top:24px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:8px;line-height:1.4}
.ft a{color:#d9cfd4;text-decoration:none}
.ft a:hover{color:#fff;text-decoration:underline}
.ft-bot{margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#8f8189}
.ft-bot p{margin:0;max-width:60ch}

@media (max-width:1000px){
  .cols{grid-template-columns:1fr;gap:30px}
  .opener-grid,.ph-grid{grid-template-columns:1fr;gap:32px}
  .ph-grid .nu{margin-top:0}
  .side{position:static}
  .kb-in{grid-template-columns:1fr;gap:26px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:860px){
  body{font-size:16.5px}
  .two{grid-template-columns:1fr;gap:0}
  .ag li{grid-template-columns:1fr;gap:14px}
  .burger{display:flex;align-items:center;gap:10px;justify-content:center;padding:13px 24px;cursor:pointer;
    font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);border-top:1px solid var(--line-s)}
  .burger span{display:block;width:18px;height:2px;background:var(--plum);position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--plum)}
  .burger span::before{top:-6px}.burger span::after{top:6px}
  .nav{display:none}
  .nt:checked ~ .nav{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{border-bottom:1px solid var(--line-s);text-align:center}
}
@media (max-width:600px){
  .ft-grid{grid-template-columns:1fr}
  .opener{padding:44px 0 38px}
}
@media print{.hd,.ft,.kb{display:none}}