/* Fold agent C · recognition (c1 c2 c3). Loaded after style.css, diensten.css and the two dienst.css; every colour is a
   site token. Own classes are svc-…; the site's own svc-h, svc-lead and svc-bath are never used or touched. */

/* ==================================================== shared by the three */

/* No lockup in these folds: the bar keeps its own logo from the first screen (the site hides it while a .fold is in
   view, because its folds carry the big one). Scoped to the c states; specificity above html.js .head:not(.is-past). */
:root.js[data-v^="c"] .head .brand { visibility: visible; opacity: 1; transform: none; }

.fold.svc-vouw { padding: clamp(8px, 1.2vw, 16px) 0 clamp(40px, 4.4vw, 64px); overflow: visible; }
.svc-vouw .kruimel { margin-bottom: clamp(12px, 1.6vw, 22px); }

.svc-titel {
  margin: 0 0 clamp(12px, 1.4vw, 18px); max-width: 13em;
  font-weight: 800; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.03; letter-spacing: -.035em; color: var(--lood);
  text-wrap: balance;
}
.svc-titel em { font-style: normal; color: var(--dakpan); }
.svc-lede { margin: 0 0 clamp(16px, 1.8vw, 24px); max-width: 32em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--lood); text-wrap: pretty; }

.svc-vraagkop {
  margin: 0 0 8px; font-family: var(--f-tech); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dakpan);
}

/* the two ratings, one quiet row: the site's cijfer markup, kept in a row at every width */
.svc-vouw .svc-cijfers { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 28px); margin: 0 0 clamp(18px, 2vw, 26px); }
.svc-vouw .cijfer__score { font-size: clamp(24px, 2vw, 30px); }

/* the call as a quiet link beside the green button (the site's uitweg__tel) */
.svc-tel {
  font-size: 15px; font-weight: 600; color: var(--lood); text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap;
}
.svc-tel:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
.svc-tel--wa { display: inline-flex; align-items: center; gap: 7px; }
.svc-tel--wa .ico { width: 19px; height: 19px; color: #1fae55; }

/* the answer a symptom jumps to lights up for a moment (c.js) */
.svc-hier { animation: svc-hier 2.2s ease-out; }
@keyframes svc-hier { 0%, 35% { background: var(--dakpan-wash); box-shadow: 0 0 0 12px var(--dakpan-wash); } 100% { background: transparent; box-shadow: 0 0 0 12px transparent; } }

@media (max-width: 560px) {
  .svc-vouw .kruimel { margin-bottom: 10px; }
  .svc-titel { font-size: clamp(30px, 8.6vw, 36px); margin-bottom: 10px; }
  .svc-lede { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
  /* diensten.css stacks the two ratings into a centred grid on a phone; here they stay one low row */
  .svc-vouw .svc-cijfers { display: flex; flex-wrap: nowrap; gap: 0 12px; width: auto; max-width: none; margin-bottom: 16px; }
  .svc-vouw .cijfer { flex-direction: row; align-items: center; gap: 6px; padding: 0; flex: none; }
  .svc-vouw .cijfer + .cijfer { border-left: 1px solid var(--kalk-rand); padding-left: 12px; }
  .svc-vouw .cijfer__wie { align-items: flex-start; font-size: 11.5px; line-height: 1.25; }
  .svc-vouw .cijfer__wie > span:nth-child(2) { white-space: nowrap; }
  .svc-vouw .cijfer__score { font-size: 22px; }
  .svc-vouw .cijfer .stars svg { width: 11px; height: 11px; }
}
@media (max-width: 380px) {
  .svc-vouw .cijfer__wie > span:nth-child(2) { font-size: 0; }          /* "op" goes, the platform stays */
  .svc-vouw .cijfer__wie > span:nth-child(2) b { font-size: 11.5px; }
}

/* ==================================================== c1 · the diagnosis: each row the symptom and what it usually is */
.svc-v1__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

.svc-diag { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--kalk-rand); }
.svc-diag li { border-top: 1px solid var(--kalk-rand); }
.svc-diag a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center;
  padding: 12px 2px 13px 0; color: var(--lood); text-decoration: none;
}
.svc-diag__zie { grid-column: 1; font-weight: 700; font-size: clamp(19px, 1.65vw, 23px); line-height: 1.22; letter-spacing: -.018em; transition: color .15s; }
.svc-diag__is { grid-column: 1; margin-top: 4px; font-size: clamp(15px, 1.12vw, 16.5px); line-height: 1.45; color: var(--lood-zacht); text-wrap: pretty; }
.svc-diag .ico { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--dakpan); transition: transform .15s; }
.svc-diag a:hover .svc-diag__zie { color: var(--dakpan); }
.svc-diag a:hover .ico { transform: translateX(4px); }
.svc-diag__kop { display: none; }
.svc-diag__na { margin: 14px 0 0; max-width: 34em; font-size: clamp(15px, 1.12vw, 16.5px); line-height: 1.45; color: var(--lood); }
.svc-diag__na b { color: var(--dakpan); font-weight: 700; }

@media (width > 960px) {
  .svc-v1__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(40px, 4.6vw, 80px);
    align-items: start;
  }
  .svc-v1__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); }
  .svc-v1__herken { padding-top: 4px; }
  /* a pro's table: what you see on the left, what it usually is on the right; its head replaces the kicker */
  .svc-v1__herken > .svc-vraagkop { display: none; }
  .svc-diag__kop {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 18px; column-gap: 26px; margin: 0 0 8px;
    font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan);
  }
  .svc-diag__kop span + span { color: var(--lood-zacht); }
  .svc-diag a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 18px; column-gap: 26px; align-items: baseline; padding: 15px 0 16px; }
  .svc-diag__zie { grid-column: 1; font-size: clamp(19px, 1.5vw, 21px); }
  .svc-diag__is { grid-column: 2; grid-row: 1; margin-top: 0; }
  .svc-diag .ico { grid-column: 3; grid-row: 1; align-self: center; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .svc-v1__herken { margin-top: clamp(26px, 4vw, 36px); max-width: 640px; }
}
@media (max-width: 560px) {
  /* the order on a phone: the title and the line Google reads, the ratings, then the four rows, then call / app */
  .svc-v1__grid { display: flex; flex-direction: column; }
  .svc-v1__kop { display: contents; }
  .svc-v1__herken { order: 1; }
  .svc-v1__acts { order: 2; margin-top: 14px; gap: 10px 16px; }
  .svc-v1__acts .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .svc-vouw .svc-vraagkop { margin-bottom: 4px; }
  .svc-diag a { padding: 8px 0 9px; column-gap: 12px; }
  .svc-diag__zie { font-size: 17px; }
  .svc-diag__is { margin-top: 1px; font-size: 14px; line-height: 1.38; }
  .svc-diag .ico { width: 15px; height: 15px; }
  .svc-diag__na { margin-top: 10px; font-size: 14px; line-height: 1.4; }
  .svc-diag__vierde { display: none; }
  .svc-v1__plek { display: none; }   /* a phone shows the three most common; the bakje line closes them */
}

/* ==================================================== c2 · the evidence: each symptom on his photo of that spot opened */
.svc-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.svc-kaart { display: flex; flex-direction: column; min-width: 0; }
.svc-kaart__foto { aspect-ratio: 3 / 4; }
.svc-kaart__tekst { display: block; padding-top: 10px; color: var(--lood); text-decoration: none; }
.svc-kaart__tekst b { display: block; font-weight: 700; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.24; letter-spacing: -.012em; transition: color .15s; }
.svc-kaart__tekst span { display: block; margin-top: 4px; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.42; color: var(--lood-zacht); }
.svc-kaart__tekst:hover b { color: var(--dakpan); text-decoration: underline; text-decoration-color: var(--dakpan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.svc-kaarten__bron { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--lood-zacht); }
.svc-kaarten__bron b { font-weight: 600; color: var(--lood); white-space: nowrap; }
.svc-v2__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

@media (width > 960px) {
  /* the pictures lead on the left, the title and the way in on the right (the DOM keeps the H1 first) */
  .svc-v2__grid {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "herken kop";
    column-gap: clamp(40px, 4.4vw, 72px); align-items: center;
  }
  .svc-v2__kop { grid-area: kop; }
  .svc-v2__herken { grid-area: herken; }
  .svc-v2__herken .svc-vraagkop { margin-bottom: 12px; }
  .svc-kaarten { max-width: 720px; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .svc-v2__herken { margin-top: clamp(26px, 4vw, 36px); max-width: 640px; }
}
@media (max-width: 560px) {
  .svc-v2__grid { display: flex; flex-direction: column; }
  .svc-v2__kop { display: contents; }
  .svc-v2__herken { order: 1; }
  .svc-v2__acts { order: 2; margin-top: 14px; gap: 10px 16px; }
  .svc-v2__acts .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .svc-v2__herken .svc-vraagkop { margin-bottom: 8px; font-size: 12px; letter-spacing: .14em; }
  .svc-kaarten { gap: 8px; }
  .svc-kaart__tekst { padding-top: 7px; }
  .svc-kaart__tekst b { font-size: 14px; line-height: 1.22; letter-spacing: -.005em; }
  .svc-kaart__tekst span { display: none; }   /* on a phone the picture is the answer; the line under it is on the desktop */
  .svc-kaarten__bron { margin-top: 8px; font-size: 12.5px; }
  .svc-kaarten__bron br, .svc-kaarten__bron .svc-tik { display: none; }
}

/* ==================================================== c3 · the first question: what you see, and the photo he needs */
.svc-v3__tool {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0;
  margin-top: clamp(22px, 2.6vw, 34px); background: var(--kalk-wit); border-radius: 10px; border-top: 5px solid var(--dakpan);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.svc-v3__r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.svc-v3__keus { padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px); border-right: 1px solid var(--kalk-diep); }
.svc-v3__opties { margin: 0; padding: 0; list-style: none; }
.svc-v3__opties li + li { border-top: 1px solid var(--kalk-diep); }
.svc-v3__opties label {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 6px 12px 0; cursor: pointer;
  font-weight: 700; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.22; letter-spacing: -.015em; color: var(--lood);
  transition: color .15s;
}
.svc-v3__opties label::before {   /* the round mark: open when not chosen, the house's dakpan when chosen */
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--kalk-rand);
  background: var(--kalk-wit); transition: box-shadow .15s, background-color .15s;
}
.svc-v3__opties label:hover { color: var(--dakpan); }
.svc-v3__panelen { padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.6vw, 36px); background: var(--kalk); }
.svc-v3__paneel { display: none; }
.svc-v3__stuur { margin: 0 0 10px; font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.16; letter-spacing: -.022em; color: var(--lood); text-wrap: balance; }
.svc-v3__pre { color: var(--dakpan); }
.svc-v3__waarom { margin: 0 0 18px; max-width: 30em; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.5; color: var(--lood-zacht); text-wrap: pretty; }
.svc-v3__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.svc-v3__dan { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }

/* the checked radio: its label marked, its panel shown */
#svc-zie-1:checked ~ .svc-v3__keus label[for="svc-zie-1"],
#svc-zie-2:checked ~ .svc-v3__keus label[for="svc-zie-2"],
#svc-zie-3:checked ~ .svc-v3__keus label[for="svc-zie-3"],
#svc-zie-4:checked ~ .svc-v3__keus label[for="svc-zie-4"] { color: var(--dakpan); }
#svc-zie-1:checked ~ .svc-v3__keus label[for="svc-zie-1"]::before,
#svc-zie-2:checked ~ .svc-v3__keus label[for="svc-zie-2"]::before,
#svc-zie-3:checked ~ .svc-v3__keus label[for="svc-zie-3"]::before,
#svc-zie-4:checked ~ .svc-v3__keus label[for="svc-zie-4"]::before { background: var(--dakpan); box-shadow: inset 0 0 0 5px var(--kalk-wit), 0 0 0 2px var(--dakpan); }
#svc-zie-1:focus-visible ~ .svc-v3__keus label[for="svc-zie-1"],
#svc-zie-2:focus-visible ~ .svc-v3__keus label[for="svc-zie-2"],
#svc-zie-3:focus-visible ~ .svc-v3__keus label[for="svc-zie-3"],
#svc-zie-4:focus-visible ~ .svc-v3__keus label[for="svc-zie-4"] { outline: 3px solid var(--dakpan); outline-offset: 2px; }
#svc-zie-1:checked ~ .svc-v3__panelen .svc-v3__paneel--1,
#svc-zie-2:checked ~ .svc-v3__panelen .svc-v3__paneel--2,
#svc-zie-3:checked ~ .svc-v3__panelen .svc-v3__paneel--3,
#svc-zie-4:checked ~ .svc-v3__panelen .svc-v3__paneel--4 { display: block; animation: svc-in .22s ease-out; }
@keyframes svc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (width > 960px) {
  /* the title on the left, the line Google reads and the ratings on the right; the tool under both, the width of the page */
  .svc-v3__kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4.4vw, 64px); align-items: center; }
  .svc-v3__kop .svc-titel { margin-bottom: 0; }
  .svc-v3__lede .svc-cijfers { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .svc-v3__tool { grid-template-columns: minmax(0, 1fr); }
  .svc-v3__keus { border-right: 0; border-bottom: 1px solid var(--kalk-diep); }
}
@media (max-width: 560px) {
  .svc-v3__tool { margin-top: 2px; border-top-width: 4px; }
  .svc-v3__keus { padding: 12px 14px 12px; }
  .svc-vouw .svc-v3__keus .svc-vraagkop { margin-bottom: 8px; font-size: 12px; letter-spacing: .14em; }
  /* the four choices two by two, each a tile that may run to two lines */
  .svc-v3__opties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .svc-v3__opties li + li { border-top: 0; }
  .svc-v3__opties li { display: flex; }
  .svc-v3__opties label {
    flex: 1; gap: 7px; min-height: 48px; padding: 6px 8px 6px 8px; border-radius: 8px; background: var(--kalk); font-size: 14px; line-height: 1.2;
    letter-spacing: -.005em; box-shadow: inset 0 0 0 1px var(--kalk-rand);
  }
  .svc-v3__opties label::before { width: 14px; height: 14px; }
  #svc-zie-1:checked ~ .svc-v3__keus label[for="svc-zie-1"],
  #svc-zie-2:checked ~ .svc-v3__keus label[for="svc-zie-2"],
  #svc-zie-3:checked ~ .svc-v3__keus label[for="svc-zie-3"],
  #svc-zie-4:checked ~ .svc-v3__keus label[for="svc-zie-4"] { background: var(--dakpan-wash); box-shadow: inset 0 0 0 1.5px var(--dakpan); }
  #svc-zie-1:checked ~ .svc-v3__keus label[for="svc-zie-1"]::before,
  #svc-zie-2:checked ~ .svc-v3__keus label[for="svc-zie-2"]::before,
  #svc-zie-3:checked ~ .svc-v3__keus label[for="svc-zie-3"]::before,
  #svc-zie-4:checked ~ .svc-v3__keus label[for="svc-zie-4"]::before { box-shadow: inset 0 0 0 3.5px var(--dakpan-wash), 0 0 0 1.5px var(--dakpan); }
  .svc-v3__panelen { padding: 14px 14px 14px; }
  .svc-v3__stuur { font-size: 19px; margin-bottom: 6px; }
  .svc-v3__waarom { font-size: 14.5px; line-height: 1.42; margin-bottom: 12px; }
  .svc-v3__acts { gap: 8px 14px; }
  .svc-v3__acts .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .svc-v3__via { display: none; }
  .svc-v3__dan { margin-top: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hier, .svc-v3__paneel { animation: none !important; }
}