/* B · the proof (vouw/b.html): three subpage folds in which his own photos of the job carry the trust.
   Loaded after style.css, diensten.css and the two dienst.css; every class of its own starts svb-. The site's parts
   are used as they are: kruimel, tegel (opens in the lightbox), label, cijfers / cijfer, stars, btn btn--wa. */

/* The bar keeps its logo. script.js hides the bar's logo while a .fold is in view, because the site's folds carry the
   big lockup; these folds do not (the space goes to the work), so the bar shows the firm from the first screen. */
:root[data-v="b1"] .head .head__bar .brand,
:root[data-v="b2"] .head .head__bar .brand,
:root[data-v="b3"] .head .head__bar .brand { opacity: 1; transform: none; visibility: visible; }

/* ==================================================== SHARED */
.fold.svb { padding: clamp(4px, 1vw, 14px) 0 clamp(30px, 3.6vw, 52px); overflow: visible; }
.svb .kruimel { margin-bottom: clamp(12px, 1.6vw, 22px); }

.svb-h1 {
  margin: 0 0 12px; max-width: 12em;
  font-weight: 800; font-size: clamp(31px, 3.5vw, 52px); line-height: 1.03; letter-spacing: -.035em; color: var(--lood);
  text-wrap: balance;
}
.svb-h1 em { font-style: normal; color: var(--dakpan); }
.svb-lede { margin: 0 0 16px; max-width: 33em; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--lood); }
@media (max-width: 560px) {
  .fold.svb { padding-bottom: 22px; }
  .svb .kruimel { margin-bottom: 10px; }
  .svb-lede { line-height: 1.5; margin-bottom: 14px; }
}

/* the two ratings, as the site sets them, one row (a narrow screen wraps the second under the first rather than
   squeezing its words) */
.svb-cijfers { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2vw, 30px); width: auto; max-width: none; margin: 0; }
.svb .cijfer { flex: none; flex-direction: row; align-items: center; gap: 9px; padding: 0; text-align: left; }
.svb .cijfer + .cijfer { border-left: 0; }
.svb .cijfer__score { font-size: clamp(24px, 2vw, 30px); }
.svb .cijfer__wie { align-items: flex-start; font-size: 13px; }
.svb .cijfer__wie > span { white-space: nowrap; }
@media (max-width: 560px) {
  .svb-cijfers { justify-content: space-between; column-gap: 8px; }
  .svb .cijfer { gap: 7px; }
  .svb .cijfer__score { font-size: 23px; }
  .svb .cijfer__wie { font-size: 12px; }
  .svb .cijfer .stars svg { width: 12px; height: 12px; }
}

/* call and app: the green button leads (send a photo), the number beside it */
.svb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.svb-acts .btn { min-height: 50px; padding: 0 22px; }
.svb-tel {
  font-size: 15.5px; font-weight: 600; color: var(--lood); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.svb-tel:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
@media (max-width: 560px) {
  .svb-acts { margin-top: 14px; }
}

/* a step's number, the site's numbered disc (as in the way in of the service pages) */
.svb-n {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 700; font-size: 13.5px; line-height: 1; letter-spacing: 0;
}

/* the way into the whole series in the viewer */
.svb-alle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-weight: 600; font-size: 14.5px; color: var(--lood);
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.svb-alle:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
.svb-alle .ico { width: 13px; height: 13px; color: var(--dakpan); }

/* ==================================================== b1 · HET VERLOOP
   phone and tablet: the steps first, then the words; from 961 up the words left, the steps right */
.svb1__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kruimel" "klus" "tekst"; }
.svb1 .kruimel { grid-area: kruimel; }
.svb1__klus { grid-area: klus; margin: 0 0 20px; max-width: 640px; }
.svb1__tekst { grid-area: tekst; min-width: 0; }

.svb1__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin: 0 0 9px; }
.svb1__wat { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--lood); }
.svb1__kop .label { font-size: 12px; }

.svb1__stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.svb1__stap { min-width: 0; }
.svb1__stap .tegel { aspect-ratio: 3 / 4; }
.svb1__stap .svb-n { position: absolute; left: 8px; top: 8px; box-shadow: 0 0 0 2px rgba(255, 252, 247, .9); pointer-events: none; }
.svb1__stap p { margin: 7px 0 0; font-weight: 600; font-size: 13.5px; line-height: 1.28; color: var(--lood); hyphens: manual; }

@media (max-width: 560px) {
  .svb1__stappen { gap: 6px; margin: 0 -8px; }   /* a little wider than the words: the three photos get the pixels */
  .svb1__stap .tegel { aspect-ratio: 4 / 5; }
  .svb1__stap p { font-size: 13px; }
  .svb1__stap .svb-n { left: 6px; top: 6px; width: 22px; height: 22px; font-size: 12.5px; }
}

@media (width > 960px) {
  .svb1__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 4.4vw, 64px);
    grid-template-areas: "kruimel kruimel" "tekst klus"; align-items: center;
  }
  .svb1__klus { margin: 0; max-width: none; }
  .svb1__stappen { gap: 14px; }
  .svb1__stap p { margin-top: 10px; font-size: 15px; }
  .svb1__stap .svb-n { left: 12px; top: 12px; width: 28px; height: 28px; font-size: 15px; }
  .svb1__wat { font-size: 16.5px; }
  .svb1__kop { margin-bottom: 12px; }
}

/* ==================================================== b2 · DE FOTO UITGELEGD
   phone and tablet: the photo with its key, then the words; from 961 up the words left, the photo right with its key
   beside it */
.svb2__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kruimel" "foto" "tekst"; }
.svb2 .kruimel { grid-area: kruimel; }
.svb2__foto { grid-area: foto; margin: 0 0 18px; max-width: 600px; }
.svb2__tekst { grid-area: tekst; min-width: 0; }

.svb2__tegel { aspect-ratio: 5 / 4; }
.svb2__tegel:hover img { transform: none; }   /* the marks stay on their spot */
.svb2__tegel .label { left: auto; right: 10px; top: 10px; bottom: auto; }
.svb2__pin {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 700; font-size: 15px; line-height: 1;
  box-shadow: 0 0 0 3px rgba(255, 252, 247, .92), 0 3px 10px rgba(26, 36, 41, .45);
  pointer-events: none;
}
.svb2__pin[hidden] { display: none; }
html:not(.svb-geplaatst) .svb2__pin { visibility: hidden; }   /* until b.js has put them on their spot */

.svb2__uitleg { margin: 0; }
.svb2__sleutel { display: grid; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; }
.svb2__sleutel li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--lood); }
.svb2__uitleg .svb-alle { margin-top: 8px; }

/* on a phone the photo itself says how many there are (it opens the viewer), so the key ends the figure */
.svb-chip {
  position: absolute; left: 10px; top: 10px; display: none; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 3px; background: rgba(38, 51, 58, .62); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .06em; line-height: 1.4; pointer-events: none;
}
.svb-chip .ico { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .svb2__foto { margin-bottom: 14px; }
  .svb2__tegel { aspect-ratio: 7 / 5; }
  .svb2__pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 13.5px; }
  .svb2__sleutel { gap: 3px; margin-top: 8px; }
  .svb2__sleutel li { font-size: 14px; gap: 9px; }
  .svb2__sleutel .svb-n { width: 22px; height: 22px; font-size: 12.5px; }
  .svb2__uitleg .svb-alle { display: none; }
  .svb2 .svb-chip { display: inline-flex; }
}

@media (width > 960px) {
  .svb2__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 4.4vw, 64px);
    grid-template-areas: "kruimel kruimel" "tekst foto"; align-items: center;
  }
  /* the key stands beside the photo, its foot level with the photo's */
  .svb2__foto {
    margin: 0; max-width: none;
    display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 200px); column-gap: 24px; align-items: end; justify-content: end;
  }
  /* the photo runs no taller than the screen allows below the bar: an upright frame narrows instead */
  .svb2__tegel { aspect-ratio: 4 / 5; width: min(100%, calc((100svh - 200px) * 4 / 5)); justify-self: end; }
  .svb2__sleutel { gap: 14px; margin: 0; }
  .svb2__sleutel li { align-items: flex-start; font-size: 16px; line-height: 1.35; }
  .svb2__sleutel .svb-n { width: 28px; height: 28px; font-size: 15px; margin-top: -3px; }
  .svb2__uitleg .svb-alle { margin-top: 18px; }
  .svb2__pin { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 16.5px; }
}

/* ==================================================== b3 · HET REGISTER
   the list first: a row per job, his photo at its side, place and date over what he did, this job on top with the way
   into its series; then the words. From 961 up the words left, the list right. */
.svb3__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kruimel" "register" "tekst"; }
.svb3 .kruimel { grid-area: kruimel; }
.svb3__tekst { grid-area: tekst; min-width: 0; }
.svb3__register { grid-area: register; min-width: 0; max-width: 620px; margin: 0 0 20px; }

.svb3__kop {
  margin: 0 0 6px; font-family: var(--f-tech); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; line-height: 1.35;
  text-transform: uppercase; color: var(--dakpan);
}
.svb3__rijen { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--kalk-rand); }
.svb3__rij {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--kalk-rand);
}
.svb3__duim { aspect-ratio: 1 / 1; border-radius: 4px; }
.svb3__rij--deze { grid-template-columns: 96px minmax(0, 1fr); align-items: start; padding: 11px 0; }
.svb3__rij--deze .svb3__duim { aspect-ratio: 4 / 5; }
.svb3__wat { min-width: 0; }
.svb3__wat .label { font-size: 11.5px; }
.svb3__wat p { margin: 2px 0 0; font-weight: 600; font-size: 14.5px; line-height: 1.32; color: var(--lood); }
.svb3__rij--deze .svb3__wat p { font-weight: 700; font-size: 16px; }
.svb3__wat .svb-alle { margin-top: 6px; font-size: 14px; }

@media (max-width: 560px) {
  .svb3__register { margin-bottom: 18px; }
  .svb3__rij { grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; padding: 7px 0; }
  .svb3__rij--deze { grid-template-columns: 76px minmax(0, 1fr); padding: 9px 0; }
  .svb3__wat .label { font-size: 11px; }
  .svb3__wat p { font-size: 14px; line-height: 1.28; }
  .svb3__rij--deze .svb3__wat p { font-size: 15px; }
  .svb3__wat .svb-alle { margin-top: 4px; font-size: 13.5px; }
}

@media (width > 960px) {
  .svb3__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px);
    grid-template-areas: "kruimel kruimel" "tekst register"; align-items: center;
  }
  .svb3__register { margin: 0; max-width: none; }
  .svb3__kop { font-size: 13px; margin-bottom: 10px; }
  .svb3__rij { grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; padding: 12px 0; }
  .svb3__rij--deze { grid-template-columns: 150px minmax(0, 1fr); padding: 14px 0; }
  .svb3__wat .label { font-size: 12px; }
  .svb3__wat p { font-size: 16px; }
  .svb3__rij--deze .svb3__wat p { font-size: 19px; line-height: 1.28; letter-spacing: -.01em; }
}