/* Round d3 (2026-10-12): version 3 with every service in it (vouw/d3.js writes the markup, d3-recept.md says why).
   Every class here starts with sd3-, every rule is scoped to the section; with ?d=0 nothing here applies. Colours and
   type are style.css's tokens.

   The ground is version 3's: lood, the homepage's ground for its service doors. The main section above ends on kalk
   (q3, x1) or kalk-wit (t2), Projecten below stands on gips-licht (and where a job has no Projecten, the reviews on
   kalk-diep), so the dark band reads as its own section under every pick. Nothing here lies over anything else:
   every level opens in the band's own flow, so it never covers the page or meets the site's Diensten menu. */

.sd3 {
  --sd3-rand: rgba(231, 205, 189, .22);       /* the rules between the names: gips on lood */
  --sd3-rand-zacht: rgba(231, 205, 189, .13);
  --sd3-stil: rgba(231, 205, 189, .72);       /* small quiet type on lood (4.8 : 1) */
  position: relative; background: var(--lood); color: var(--kalk-wit);
  padding: clamp(56px, 7vw, 104px) 0;
  overflow-anchor: none;   /* d3.js keeps the tapped row in place itself */
}
/* a level toggled with the hidden attribute stays gone whatever display a rule gives it; hidden="until-found" is the
   browser's own (in the HTML, searchable, takes no room) */
.sd3 [hidden]:not([hidden="until-found"]) { display: none !important; }
/* without script, every level stands open: all the links, one long list */
html:not(.js) .sd3 [hidden] { display: block !important; content-visibility: visible !important; }

.sd3-h {
  margin: 0 0 clamp(22px, 2.4vw, 32px); color: var(--kalk-wit);
  font-weight: 800; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.08; letter-spacing: -.028em;
  text-wrap: balance; max-width: 19em;
}
.sd3-tel {
  flex: none; font-family: var(--f-tech); font-weight: 600; font-size: 12.5px; line-height: 1.2; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sd3-stil); white-space: nowrap;
}
.sd3 :focus-visible { outline-color: var(--dakpan-licht); }
/* a service's name and its count (d3a, d3b): the count under the name on a phone, beside the arrow on a wider screen */
.sd3-nt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.sd3-nt-naam { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 561px) {
  .sd3-nt { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px 16px; }
}

/* ---------------------------------------------------------------- a job */
.sd3-klussen { margin: 0; padding: 0; list-style: none; }
.sd3-li + .sd3-li { border-top: 1px solid var(--sd3-rand-zacht); }
.sd3-klus {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 9px 0;
  color: var(--gips-licht); text-decoration: none;
  font-weight: 700; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.22; letter-spacing: -.012em;
  transition: color .15s;
}
.sd3-naam { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.sd3-klus > .ico { flex: none; width: 16px; height: 16px; color: var(--dakpan-licht); opacity: .5; transition: transform .15s, opacity .15s; }
a.sd3-klus:hover { color: var(--kalk-wit); }
a.sd3-klus:hover > .ico { opacity: 1; transform: translateX(4px); }
a.sd3-klus:focus-visible { outline-offset: 2px; border-radius: 2px; }
/* the page's own job, whichever job the page is (d3.js marks it): where it belongs in the list, lit as the one you
   are on, by its look alone; aria-current says it to a screen reader. Not a link: no arrow, nothing on hover. A plate
   of gips on lood behind it (the lightbox's lit strip is the same light on dark), its name in kalk-wit, its small
   photo ringed in dakpan-licht (the lightbox's ring on the photo it shows). The plate reaches into the gutter on the
   left, so the name stays in line with the names above and below it; the rules on either side give way to it.
   (Until 10-13: greyed, with a "hier ben je" badge.) */
@media not all and (hover: none) and (min-width: 861px) {   /* one column (the two of a wide touch screen keep theirs) */
  .sd3 .sd3-klussen > .sd3-li.sd3-li--hier, .sd3 .sd3-klussen > .sd3-li--hier + .sd3-li { border-top-color: transparent; }
}
.sd3 .sd3-klus.sd3-klus--hier {
  position: relative; cursor: default; color: var(--kalk-wit);
  margin-left: -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--r);
  background: rgba(231, 205, 189, .13);
}
.sd3-klus--hier .sd3-duim { box-shadow: 0 0 0 2px var(--dakpan-licht); }
/* d3a: the plate grows out of the service's line, and the line is version 3's bar where it does (the band's own mark
   for the chosen one): its 4 px left edge in dakpan-licht lies over the 2 px line, square on that side */
.sd3a .sd3-klus.sd3-klus--hier {
  margin-left: calc(-1 * var(--sd3a-inspring) - 3px); padding-left: calc(var(--sd3a-inspring) - 1px);
  border-left: 4px solid var(--dakpan-licht); border-radius: 0 var(--r) var(--r) 0;
}

/* the small photo each job takes where nothing hovers: no place label and no stamp, at 52 px they would be noise
   (the homepage's own thumbnail strips carry none either) */
.sd3-duim {
  display: block; flex: none; width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
  background: var(--lood-diep); box-shadow: 0 0 0 2px rgba(231, 205, 189, .22);
}
.sd3-duim > img { width: 100%; height: 100%; object-fit: cover; }
.sd3-duim.sd3-leeg { display: grid; place-items: center; }
.sd3-duim.sd3-leeg > img { width: 50%; height: auto; opacity: .55; }

/* the way to the service's own page: the homepage's quiet underlined link, on the dark ground */
.sd3-alles {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--kalk-wit);
  text-decoration: underline; text-decoration-color: rgba(231, 205, 189, .4); text-decoration-thickness: 2px;
  text-underline-offset: 6px; transition: color .15s, text-decoration-color .15s;
}
.sd3-alles .ico { width: 15px; height: 15px; color: var(--dakpan-licht); transition: transform .15s; }
.sd3-alles:hover { color: var(--gips); text-decoration-color: var(--dakpan-licht); }
.sd3-alles:hover .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------- the one picture */
.sd3-kijk { display: none; }
.sd3-beeld { margin: 0; }
.sd3-foto {
  position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  background: var(--lood-diep); box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 24px 60px rgba(0, 0, 0, .28);
}
.sd3-laag { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .25s; }
.sd3-laag.is-nu { z-index: 1; opacity: 1; }
.sd3-laag > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.sd3-laag--leeg { display: grid; place-items: center; }
.sd3-laag--leeg > img { width: 34%; height: auto; opacity: .55; }
.sd3 .sd3-foto .sd3-laag--zonder .label, .sd3 .sd3-foto .sd3-laag--leeg .label, .sd3 .sd3-foto .sd3-laag--leeg .zegel { display: none; }
.sd3-zin { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--gips-licht); max-width: 32em; text-wrap: pretty; }
/* every link's words in one cell, only the shown ones seen: the box is as tall as the longest at every width, so a
   hover never changes the band's height (d3.js, bindBeeld) */
.sd3-zin { display: grid; }
.sd3-zin-in { grid-area: 1 / 1; min-width: 0; }
.sd3-zin-maat { visibility: hidden; }
.sd3-zin-kop {
  display: block; margin-bottom: 4px; font-family: var(--f-tech); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan-licht);
}

/* where a pointer hovers and the screen is wide: the picture beside the list, and no small photos */
@media (hover: hover) and (min-width: 861px) {
  .sd3-kijk { display: block; position: sticky; top: 32px; }
  .sd3 .sd3-duim, .sd3 .sd3-duim.sd3-leeg { display: none; }
  /* the link the picture shows */
  a.sd3-klus.is-nu { color: var(--kalk-wit); }
  a.sd3-klus.is-nu > .ico { opacity: 1; transform: translateX(4px); }
}

/* the list and the picture, side by side (d3a, d3b) */
.sd3-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (hover: hover) and (min-width: 861px) {
  .sd3-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
}
/* wide but nothing hovers (a tablet on its side): no picture, so the jobs take two columns */
@media (hover: none) and (min-width: 861px) {
  .sd3a .sd3-klussen, .sd3b .sd3-klussen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: 32px; }
  .sd3a .sd3-li, .sd3b .sd3-li { border-top: 1px solid var(--sd3-rand-zacht); }
  .sd3b .sd3-li { border-top-color: var(--sd3-rand); }
  .sd3b-kop { border-bottom: 0; }
}

/* ================================================================ d3a: unfold */
.sd3a-diensten { border-bottom: 1px solid var(--sd3-rand); }
.sd3a-d { border-top: 1px solid var(--sd3-rand); }
.sd3a-sum {
  display: flex; align-items: center; gap: 10px 16px; min-height: 66px; padding: 12px 0;
  list-style: none; cursor: pointer; color: var(--gips-licht);
  font-weight: 800; font-size: clamp(21px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em;
  transition: color .15s;
}
.sd3a-sum::-webkit-details-marker { display: none; }
.sd3a-sum::marker { content: ''; }
.sd3a-sum .sd3-chev { flex: none; width: 20px; height: 20px; color: var(--dakpan-licht); transition: transform .2s; }
.sd3a-sum:hover, .sd3a-d[open] > .sd3a-sum { color: var(--kalk-wit); }
.sd3a-d[open] > .sd3a-sum .sd3-chev { transform: rotate(180deg); }
.sd3a-sum:focus-visible { outline-offset: 2px; border-radius: 2px; }
/* the jobs, under the name they belong to: indented on a thin dakpan line */
.sd3a-in {
  --sd3a-inspring: clamp(16px, 2vw, 24px);
  margin: 0 0 22px 2px; padding: 2px 0 2px var(--sd3a-inspring); border-left: 2px solid rgba(208, 138, 108, .5);
}
.sd3a-d[open] > .sd3a-in { animation: sd3-open .22s ease-out; }
@keyframes sd3-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ================================================================ d3b: step in */
.sd3b-lijst { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sd3-rand); }
.sd3b-lijst > li { border-top: 1px solid var(--sd3-rand); }
.sd3b-in {
  display: flex; align-items: center; gap: 10px 16px; width: 100%; min-height: 66px; padding: 12px 0; margin: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gips-licht);
  font: 800 clamp(21px, 2vw, 28px)/1.15 var(--f-sans); letter-spacing: -.025em; transition: color .15s;
}
.sd3b-in > .ico { flex: none; width: 18px; height: 18px; color: var(--dakpan-licht); opacity: .5; transition: transform .15s, opacity .15s; }
.sd3b-in:hover { color: var(--kalk-wit); }
.sd3b-in:hover > .ico { opacity: 1; transform: translateX(4px); }
.sd3b-in:focus-visible { outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (min-width: 861px) {
  .sd3b-in.is-nu { color: var(--kalk-wit); }
  .sd3b-in.is-nu > .ico { opacity: 1; transform: translateX(4px); }
}
/* a service stepped into: the way back, its name, its jobs in the band's big type (one level shows at a time, so
   each can be as large as version 3's names) */
.sd3b-terug {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0 6px -10px; padding: 8px 14px 8px 10px;
  background: none; border: 0; border-radius: 4px; cursor: pointer; color: var(--gips-licht);
  font: 600 15.5px/1.2 var(--f-sans); transition: background-color .15s, color .15s;
}
.sd3b-terug .ico { width: 16px; height: 16px; color: var(--dakpan-licht); transform: rotate(180deg); transition: transform .15s; }
.sd3b-terug:hover { background: rgba(231, 205, 189, .08); color: var(--kalk-wit); }
.sd3b-terug:hover .ico { transform: rotate(180deg) translateX(3px); }
.sd3b-kop {
  margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--sd3-rand);
  font-family: var(--f-tech); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dakpan-licht);
}
.sd3b-kop:focus { outline: none; }
.sd3b-kop:focus-visible { outline: 3px solid var(--dakpan-licht); outline-offset: 4px; }
.sd3b .sd3-klussen { border-bottom: 1px solid var(--sd3-rand); }
.sd3b .sd3-li + .sd3-li { border-top-color: var(--sd3-rand); }
.sd3b .sd3-klus { min-height: 62px; padding: 11px 0; font-weight: 800; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.15; letter-spacing: -.022em; }
.sd3b .sd3-alles { margin-top: 20px; }
.sd3b-komt--in { animation: sd3b-in .22s ease-out; }
.sd3b-komt--uit { animation: sd3b-uit .22s ease-out; }
@keyframes sd3b-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sd3b-uit { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ================================================================ d3c: side by side */
/* a phone, a narrow screen: the services a row of buttons over the chosen one's list */
.sd3c-rooster { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sd3c-rooster > .sd3-h { flex: 0 0 100%; margin-bottom: clamp(14px, 2vw, 22px); }
.sd3c-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 9px 15px;
  background: none; border: 1.5px solid rgba(231, 205, 189, .32); border-radius: 999px; cursor: pointer;
  color: var(--gips-licht); text-align: left; font: 700 15.5px/1.2 var(--f-sans); letter-spacing: -.005em;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sd3c-tab > .ico { display: none; }
.sd3c-tab:hover { border-color: var(--gips-licht); color: var(--kalk-wit); }
@media (max-width: 360px) {
  .sd3c-rooster { gap: 7px 6px; }
  .sd3c-tab { padding: 8px 12px; font-size: 14.5px; }
}
.sd3c-tab[aria-expanded="true"] { background: var(--gips-licht); border-color: var(--gips-licht); color: var(--lood); }
.sd3c-tab:focus-visible { outline-offset: 3px; }
.sd3c-p { order: 1; flex: 0 0 100%; min-width: 0; }
.sd3c-p:not(.is-open) { display: none; }
.sd3c-p-in { margin-top: 14px; border-top: 1px solid var(--sd3-rand); border-bottom: 1px solid var(--sd3-rand); padding-bottom: 18px; }
.sd3c-p-in > .sd3-klussen { border-bottom: 1px solid var(--sd3-rand-zacht); }
.sd3c .sd3-kijk { order: 2; }
.sd3c-p.is-open > .sd3c-p-in { animation: sd3-open .2s ease-out; }

/* wide: three columns, the services, the chosen one's jobs, the picture (two where nothing hovers). Every service's
   jobs sit in one cell, the chosen one shown, so the band keeps the height of the longest and nothing below moves
   while the pointer goes down the services. */
@media (min-width: 861px) {
  .sd3c-rooster {
    display: grid; gap: 0 clamp(28px, 4vw, 64px); align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto repeat(var(--sd3-n, 6), auto) 1fr;
  }
  .sd3c-rooster > .sd3-h { grid-column: 1 / -1; grid-row: 1; }
  .sd3c-tab {
    grid-column: 1; width: 100%; min-height: 64px; padding: 12px 0; gap: 16px;
    border: 0; border-top: 1px solid var(--sd3-rand); border-radius: 0; background: none;
    font: 800 clamp(20px, 1.9vw, 26px)/1.15 var(--f-sans); letter-spacing: -.025em; color: rgba(244, 230, 220, .78);
    position: relative;
  }
  .sd3c-tab:last-of-type { border-bottom: 1px solid var(--sd3-rand); }   /* the tabs are the only buttons among them */
  .sd3c-tab > .ico { display: block; flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--dakpan-licht); opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }
  .sd3c-tab:hover, .sd3c-tab[aria-expanded="true"] { background: none; border-color: var(--sd3-rand); color: var(--kalk-wit); }
  .sd3c-tab[aria-expanded="true"] > .ico { opacity: 1; transform: none; }
  /* the chosen one: version 3's bar beside the name */
  .sd3c-tab::before {
    content: ""; position: absolute; left: -18px; top: 50%; width: 4px; height: 0; border-radius: 2px;
    background: var(--dakpan-licht); transition: height .2s, margin-top .2s;
  }
  .sd3c-tab[aria-expanded="true"]::before { height: 28px; margin-top: -14px; }
  .sd3c-tab:focus-visible { outline-offset: 2px; border-radius: 2px; }
  .sd3c-p { grid-column: 2; grid-row: 2 / -1; align-self: stretch; }
  .sd3c-p:not(.is-open) { display: block; visibility: hidden; }
  .sd3c-p-in { margin-top: 0; padding: 0; border: 0; }
  .sd3c-p-in > .sd3-klussen { border-top: 1px solid var(--sd3-rand); border-bottom-color: var(--sd3-rand); }
  .sd3c .sd3-klus { min-height: 64px; }
}
@media (hover: hover) and (min-width: 861px) {
  .sd3c-rooster { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); }
  .sd3c-rooster > .sd3-h { grid-column: 1 / 3; }
  .sd3c .sd3-kijk { grid-column: 3; grid-row: 1 / -1; align-self: start; }
}

/* without script: the services and their jobs one after the other */
html:not(.js) .sd3c-rooster { display: block; }
html:not(.js) .sd3c-p { display: block !important; visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
  .sd3 *, .sd3 *::before { transition: none !important; animation: none !important; }
}

/* 10-13, by hand, on a crop of d3a's job list on a phone: "hide all the pics on mobile at this section". On a phone the
   jobs stand without their small photos (lazy, so a hidden one is never fetched either); the page's own job keeps its
   plate and bar. */
@media (max-width: 560px) {
  .sd3 .sd3-duim, .sd3 .sd3-duim.sd3-leeg { display: none; }
}