/* ==================================================== A · THE TRADESMAN (fold agent A, 2026-10-10)
   Three subpage folds where the man is the proof: a1 his word, a2 his picture, a3 his line. Everything is the site's
   own tokens, fonts and components (style.css, diensten.css); what is new is prefixed sva-. */

/* ---- outside the fold, scoped to a1–a3 only: the bar keeps its own logo. On the homepage and today's service
   pages the bar hides it while a .fold with a big lockup is in view; these folds carry no lockup (the man leads),
   so the firm's name stays in the bar from the first screen. On a phone the bar stays at the top: a hairline
   under it so the page does not run into it. ---- */
:root[data-v^="a"] .head .brand { opacity: 1 !important; visibility: visible !important; transform: none !important; }
@media (max-width: 560px) {
  :root[data-v^="a"] .head { box-shadow: 0 1px 0 var(--kalk-diep); }
}

/* ---- shared by the three ---- */
.sva { position: relative; background: var(--kalk); padding: clamp(6px, 1.2vw, 14px) 0 clamp(36px, 4vw, 56px); }
.sva .kruimel { margin-bottom: clamp(12px, 1.8vw, 22px); }
.sva .kruimel ol { flex-wrap: nowrap; min-width: 0; }
.sva .kruimel li { white-space: nowrap; }
.sva .kruimel li[aria-current] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* the two ratings, one line each: the figure, the stars, the platform and its count */
.sva-cijfers { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.sva-cijfer { display: flex; align-items: center; gap: 10px; }
.sva-cijfer__score { font-weight: 800; font-size: clamp(24px, 2vw, 28px); line-height: 1; letter-spacing: -.035em; color: var(--lood); }
.sva-cijfer__wie { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.3; color: var(--lood-zacht); white-space: nowrap; }
.sva-cijfer__wie b { color: var(--lood); font-weight: 700; }
.sva-cijfer .stars svg { width: 13px; height: 13px; }
.sva-hide-s { display: inline; }

/* his face: the one picture with his face (fotos/eigenaar-gezicht.jpg, 240×240), never shown larger than it is */
.sva1__gezicht, .sva2__gezicht, .sva3__gezicht { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--gips); }

/* ==================================================== a1 · ZIJN WOORD
   His sentence about this job is the fold's largest line, in the site's appje quotes, signed under it with his face
   and name. The H1 and the opening sentence stand above it; his photo of the job beside it from 721px up. */
.sva1__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sva1__h1 {
  margin: 0 0 14px; max-width: 14em;
  font-weight: 800; font-size: clamp(30px, 3vw, 42px); line-height: 1.06; letter-spacing: -.03em; color: var(--lood); text-wrap: balance;
}
.sva1__h1 em { font-style: normal; color: var(--dakpan); }
.sva1__lede { margin: 0 0 clamp(26px, 3vw, 40px); max-width: 33em; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.55; color: var(--lood-zacht); }

.sva1__woord { margin: 0 0 clamp(26px, 3vw, 38px); }
.sva1__zin { margin: 0; quotes: "\201C" "\201D"; }
.sva1__zin p {
  margin: 0; max-width: 19em; text-indent: -.42em;
  font-weight: 700; font-size: clamp(25px, 2.6vw, 38px); line-height: 1.18; letter-spacing: -.025em; color: var(--lood); text-wrap: pretty;
}
.sva1__zin p::before { content: open-quote; color: var(--dakpan); }
.sva1__zin p::after { content: close-quote; color: var(--dakpan); }
.sva1__wie { display: flex; align-items: center; gap: 14px; margin-top: clamp(16px, 1.8vw, 22px); }
.sva1__gezicht { width: 76px; height: 76px; box-shadow: 0 0 0 3px var(--kalk-wit), 0 0 0 5px var(--dakpan); }
.sva1__naam { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.sva1__naam b { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.sva1__naam span { font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dakpan); }

.sva1__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sva1__pair { max-width: 460px; }

.sva1__foto { margin: 0; }
.sva1__groot { position: relative; display: block; border-radius: var(--r); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-2); }
.sva1__groot img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }

@media (max-width: 1060px) {
  .sva1__pair .hide-s { display: none; }   /* the pair stays one line in the narrower text column */
}
@media (max-width: 960px) {
  .sva1__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; }
}
@media (max-width: 720px) {
  .sva1__grid { grid-template-columns: minmax(0, 1fr); }
  .sva1__foto { display: none; }   /* the phone: his word and his face fill the screen; the photos follow in the section below */
}
@media (max-width: 560px) {
  .sva1__h1 { font-size: clamp(27px, 7.6vw, 31px); margin-bottom: 10px; }
  .sva1__lede { font-size: 16px; margin-bottom: 24px; }
  .sva1__zin p { font-size: clamp(22px, 6.2vw, 25px); }
  .sva1__wie { margin-top: 14px; }
  .sva1__gezicht { width: 56px; height: 56px; }
  .sva1__naam b { font-size: 18px; }
  .sva1__naam span { font-size: 11px; letter-spacing: .14em; }
  .sva1__woord { margin-bottom: 24px; }
  .sva1__acts { gap: 16px; align-items: stretch; }
  .sva1__pair { max-width: none; }
}

/* ==================================================== a2 · ZIJN FOTO
   His own phone photo of the job is the fold's picture, in a white frame like a print; on the frame's foot his
   face, his name and the caption he sent it with, word for word. WhatsApp leads ("send him a photo"), the number
   beside it. */
.sva2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sva2__h1 {
  margin: 0 0 18px; max-width: 11em;
  font-weight: 800; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.035em; color: var(--lood); text-wrap: balance;
}
.sva2__lede { margin: 0 0 clamp(24px, 2.8vw, 34px); max-width: 30em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--lood); }
.sva2__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: clamp(24px, 2.8vw, 34px); }
.sva2__wa { min-height: 58px; font-size: 17px; padding: 0 26px; }
.sva2__tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 600; color: var(--lood);
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.sva2__tel .ico { width: 16px; height: 16px; color: var(--dakpan); }
.sva2__tel:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }

.sva2__print {
  margin: 0; padding: 12px 12px 0; background: var(--kalk-wit); border-radius: 10px;
  box-shadow: var(--shadow-2); transform: rotate(.8deg);
}
@media (min-width: 721px) {
  /* the print is about as tall as it is wide plus its foot and thumbnails: on a low screen it narrows, so it ends
     above the screen's edge (1024×768 included) */
  .sva2__print { width: min(100%, calc(100vh - 350px)); min-width: 300px; justify-self: end; }
}
.sva2__foto { display: block; border-radius: 4px; overflow: hidden; cursor: zoom-in; }
.sva2__foto img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.sva2__voet { display: flex; align-items: center; gap: 14px; padding: 14px 6px 16px; }
.sva2__gezicht { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--kalk-wit), 0 0 0 4px var(--gips-diep); }
.sva2__regel { margin: 0; min-width: 0; line-height: 1.2; }
.sva2__naam { font-weight: 800; font-size: 16px; }
.sva2__rol { margin-left: 6px; font-family: var(--f-tech); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lood-zacht); }
.sva2__bijschrift { display: block; margin-top: 3px; quotes: "\201C" "\201D"; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--lood); }
.sva2__bijschrift::before, .sva2__bijschrift::after { color: var(--dakpan); }
.sva2__duimen { margin: 0; padding: 0 0 14px 6px; transform: none; }

@media (max-width: 960px) {
  .sva2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; }
}
@media (max-width: 720px) {
  /* stacked (tablet and phone): H1 and the opening sentence first, then the print (the photo 4:3, no thumbnails),
     then WhatsApp with the call beside it as a square, then the two ratings */
  .sva2__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sva2__tekst { display: contents; }
  .sva2__h1 { order: 1; }
  .sva2__lede { order: 2; }
  .sva2__print { order: 3; width: auto; max-width: 480px; transform: none; margin-bottom: 20px; }
  .sva2__foto img { aspect-ratio: 4 / 3; }
  .sva2__duimen, .sva2__print .meer__rest { display: none; }
  .sva2__acts { order: 4; flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; max-width: 480px; }
  .sva2__wa { flex: 1 1 auto; min-width: 0; }
  .sva2__tel {
    flex: none; justify-content: center; width: 58px; height: 58px; min-height: 0; border-radius: var(--r);
    background: var(--dakpan); color: var(--kalk-wit); text-decoration: none;
  }
  .sva2__tel:hover { background: var(--dakpan-diep); color: var(--kalk-wit); }
  .sva2__tel .ico { width: 20px; height: 20px; color: var(--kalk-wit); }
  .sva2__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sva2__cijfers { order: 5; }
}
@media (max-width: 560px) {
  .sva2__h1 { font-size: clamp(28px, 7.8vw, 32px); margin-bottom: 8px; }
  .sva2__lede { font-size: 16px; margin-bottom: 14px; }
  .sva2__print { padding: 6px 6px 0; margin-bottom: 14px; }
  .sva2__voet { padding: 8px 2px 10px; gap: 12px; }
  .sva2__gezicht { width: 42px; height: 42px; }
  .sva2__regel { font-size: 15px; line-height: 1.35; }
  .sva2__naam { font-size: 15px; }
  .sva2__rol { display: none; }
  .sva2__bijschrift { display: inline; margin: 0; font-size: 15px; }
  .sva2__acts { margin-bottom: 14px; }
  .sva2__wa { font-size: 15.5px; padding: 0 14px; min-height: 54px; }
  .sva2__tel { width: 54px; height: 54px; }
}

/* ==================================================== a3 · ZIJN NUMMER
   The fold is his card: his photo of the job as the card's side, his face and name, how a first contact goes in
   his words, and his own number as the call button. H1, opening sentence and the two ratings stand beside it. */
.sva3__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.sva3__h1 {
  margin: 0 0 18px; max-width: 11em;
  font-weight: 800; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.035em; color: var(--lood); text-wrap: balance;
}
.sva3__lede { margin: 0 0 clamp(24px, 2.8vw, 34px); max-width: 28em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--lood); }
.sva3__cijfers { flex-direction: column; gap: 14px; }

.sva3__kaart {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  background: var(--kalk-wit); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2);
  border-top: 6px solid var(--dakpan);
}
.sva3__kop { position: relative; display: block; cursor: zoom-in; min-height: 100%; }
.sva3__kop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sva3__lijf { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px); }
.sva3__wie { display: flex; align-items: center; gap: 16px; }
.sva3__gezicht { width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--kalk-wit), 0 0 0 5px var(--dakpan); }
.sva3__naam { margin: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.15; }
.sva3__naam b { font-weight: 800; font-size: clamp(26px, 2.2vw, 30px); letter-spacing: -.02em; }
.sva3__naam span { font-family: var(--f-tech); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dakpan); }
.sva3__zin { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--lood); padding-left: 14px; border-left: 3px solid var(--gips); }
.sva3__knoppen { display: flex; flex-direction: column; gap: 10px; }
.sva3__bel { justify-content: flex-start; min-height: 64px; padding: 8px 20px; gap: 14px; }
.sva3__bel .ico { width: 22px; height: 22px; }
.sva3__bel-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sva3__bel-txt small { font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gips-licht); line-height: 1; }
.sva3__bel-txt span { font-weight: 800; font-size: clamp(24px, 2vw, 28px); letter-spacing: -.02em; line-height: 1; }
.sva3__app { justify-content: flex-start; min-height: 54px; padding: 0 20px; gap: 14px; }

@media (max-width: 1060px) {
  .sva3__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .sva3__kaart { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .sva3__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sva3__kaart { max-width: 620px; }
  .sva3__cijfers { flex-direction: row; }
}
@media (max-width: 560px) {
  /* the phone: the card without its photo (it follows in the section below), face beside the name, the number
     as the big button and WhatsApp under it */
  .sva3__h1 { font-size: clamp(28px, 7.8vw, 32px); margin-bottom: 10px; }
  .sva3__lede { font-size: 16px; margin-bottom: 16px; }
  .sva3__grid { gap: 20px; }
  .sva3__kaart { grid-template-columns: minmax(0, 1fr); }
  .sva3__kop { display: none; }
  .sva3__lijf { gap: 14px; padding: 18px 16px 16px; }
  .sva3__gezicht { width: 64px; height: 64px; }
  .sva3__naam b { font-size: 24px; }
  .sva3__naam span { font-size: 11px; letter-spacing: .14em; }
  .sva3__zin { font-size: 15.5px; padding-left: 12px; }
  .sva3__bel { min-height: 60px; }
  .sva3__bel-txt span { font-size: 24px; }
}

/* ==================================================== THE PHONE: the two ratings side by side (all three folds)
   As the site's own band on a phone: two columns with a hairline between, the figure and its stars on one line, the
   platform and its count under them. */
@media (max-width: 560px) {
  .sva { padding-bottom: 24px; }
  .sva-hide-s { display: none; }
  .sva-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .sva-cijfer { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "score stars" "plat plat"; align-items: center; column-gap: 8px; row-gap: 5px; }
  .sva-cijfer + .sva-cijfer { padding-left: 16px; border-left: 1px solid var(--kalk-rand); }
  .sva-cijfer__wie { display: contents; }
  .sva-cijfer__score { grid-area: score; font-size: 23px; }
  .sva-cijfer .stars { grid-area: stars; margin: 0; }
  .sva-cijfer .stars svg { width: 12px; height: 12px; }
  .sva-cijfer__plat { grid-area: plat; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.3; color: var(--lood-zacht); white-space: nowrap; }
  .sva-cijfer__plat b { color: var(--lood); font-weight: 700; }
  .sva-cijfer__sep { display: none; }
}