/* The service page's fold for round v: the subpage's frame (r1 on a computer, y2 on a phone) with the
   service page's own H1 and opening line, the card closed under them. Cut from vouw/j.css by
   vouw/v-basis.py; do not edit here, it is rewritten on every run. */

/* ==================================================== r1 and y2, carried over (the subpage's frame, shared by the three) */

/* The bar keeps its own logo from the first screen on (k.css's first rule, for this scope). */
:root.js[data-svj^="j"] .head .brand { visibility: visible; opacity: 1; transform: none; }

:root[data-svj^="j"] section.svj { padding-top: 0; }
:root[data-svj^="j"] section.svj {
  --svj-hoog: clamp(320px, 30vw, 430px);   /* the band's height (k2's) */
  --svj-over: clamp(70px, 7.6vw, 110px);   /* how far the card rides up over its foot */
  --svj-pad: clamp(22px, 2.8vw, 40px);     /* the card's side padding */
  --svj-top: clamp(20px, 2.2vw, 30px);     /* the card's top padding */
}
/* the block: the card's lower half, joined without a gap */
:root[data-svj^="j"] .svj__kop + .wrap > :first-child {
  position: relative; z-index: 2; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}

:root[data-svj^="j"] .svj__kop { position: relative; }
:root[data-svj^="j"] .svj__kop .kruimel { margin: 0; }
:root[data-svj^="j"] .svj-h1 {
  margin: 0; max-width: 12.5em;
  font-weight: 800; font-size: clamp(36px, 3.7vw, 54px); line-height: 1.03; letter-spacing: -.035em; color: var(--lood);
  text-wrap: balance;
}
:root[data-svj^="j"] .svj-h1 em { font-style: normal; color: var(--dakpan); }
:root[data-svj^="j"] .svj-lede {
  margin: clamp(12px, 1.3vw, 18px) 0 0; max-width: 31em;
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--lood); text-wrap: pretty;
}

/* the band: the photo, and the firm's name on it as its title (k2) */
:root[data-svj^="j"] .svj__band {
  position: relative; height: var(--svj-hoog);
  --svj-x: calc(max(var(--gut), (100% - var(--wrap)) / 2) + var(--svj-pad));   /* where the card's words start */
  --svj-w: clamp(250px, 27vw, 380px);                                          /* about the name's width */
}
:root[data-svj^="j"] .svj__beeld {
  position: absolute; inset: 0; display: block; overflow: hidden; cursor: zoom-in; background: var(--lood);
}
:root[data-svj^="j"] .svj-foto { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
:root[data-svj^="j"] .svj-label {
  z-index: 2; left: auto; right: max(var(--gut), calc((100% - var(--wrap)) / 2)); bottom: calc(var(--svj-over) + 14px);
  background: rgba(26, 36, 41, .8);
}
:root[data-svj^="j"] .svj-merk { position: absolute; z-index: 2; width: max-content; text-decoration: none; }
:root[data-svj^="j"] .svj-merk .naam { color: var(--kalk-wit); }
:root[data-svj^="j"] .svj-merk:focus-visible { outline-color: var(--kalk-wit); }
:root[data-svj^="j"] .svj__band > .svj-merk,
:root[data-svj^="j"] .svj__teken {
  left: var(--svj-x); bottom: calc(var(--svj-over) + clamp(18px, 2vw, 28px));
}
:root[data-svj^="j"] .svj-merk { --d: clamp(80px, 8.6vw, 124px); }
/* the dark fall-off from the lower left that carries the name; --svj-w is the width it must hold dark */
:root[data-svj^="j"] .svj__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, .2) calc(var(--svj-x) + var(--svj-w) + 200px), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 420px)),
    linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, .22) calc(var(--svj-over) + 100px), rgba(26, 36, 41, 0) 78%);
}
/* data-svj-kant="r": the name (and what travels with it) on the right, the fall-off turned round */
:root[data-svj^="j"] [data-svj-kant="r"] > .svj-merk,
:root[data-svj^="j"] [data-svj-kant="r"] > .svj__teken { left: auto; right: var(--svj-x); }
:root[data-svj^="j"] [data-svj-kant="r"] .svj__beeld::after {
  background:
    linear-gradient(270deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, .2) calc(var(--svj-x) + var(--svj-w) + 200px), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 420px)),
    linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, .22) calc(var(--svj-over) + 100px), rgba(26, 36, 41, 0) 78%);
}
:root[data-svj^="j"] [data-svj-kant="r"] .svj-label { right: auto; left: max(var(--gut), calc((100% - var(--wrap)) / 2)); }

/* the breadcrumb: at the head of the white card; on a phone a line of its own above the photo */
:root[data-svj^="j"] .svj__kruimel {
  position: absolute; z-index: 3; left: 0; right: 0; pointer-events: none;
  top: calc(var(--svj-hoog) - var(--svj-over) + var(--svj-top));
}
:root[data-svj^="j"] .svj__kruimel .kruimel { padding: 0 var(--svj-pad); pointer-events: auto; }

/* the card */
:root[data-svj^="j"] .svj__vel { position: relative; z-index: 2; margin-top: calc(-1 * var(--svj-over)); }
:root[data-svj^="j"] .svj__kaart {
  padding: var(--svj-top) var(--svj-pad) clamp(26px, 2.8vw, 36px);
  background: var(--kalk-wit); border-radius: 10px 10px 0 0; box-shadow: 0 -10px 30px rgba(26, 36, 41, .12);
}
:root[data-svj^="j"] .svj__klus { padding-top: calc(20px + clamp(12px, 1.4vw, 18px)); }

@media (max-width: 560px) {
  :root[data-svj^="j"] section.svj { --svj-over: 24px; --svj-hoog: 214px; }
  :root[data-svj^="j"] .svj__band { --svj-w: 200px; --svj-x: calc(var(--gut) + 14px); }
  :root[data-svj^="j"] .svj__band > .svj-merk,
  :root[data-svj^="j"] .svj__teken { bottom: calc(var(--svj-over) + 16px); }
  :root[data-svj^="j"] .svj-merk { --d: clamp(54px, 17vw, 66px); }
  :root[data-svj^="j"] .svj__beeld::after {
    background:
      linear-gradient(90deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, .18) calc(var(--svj-x) + var(--svj-w) + 90px), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 150px)),
      linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, 0) 70%);
  }
  :root[data-svj^="j"] [data-svj-kant="r"] .svj__beeld::after {
    background:
      linear-gradient(270deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, .18) calc(var(--svj-x) + var(--svj-w) + 90px), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 150px)),
      linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, 0) 70%);
  }
  :root[data-svj^="j"] [data-svj-kant="r"] .svj-label { left: 10px; right: auto; }
  :root[data-svj^="j"] .svj__kruimel { position: static; padding-top: 12px; padding-bottom: 12px; }
  :root[data-svj^="j"] .svj__kruimel .kruimel { padding: 0; }
  :root[data-svj^="j"] .svj__kop .kruimel { font-size: 13.5px; }
  :root[data-svj^="j"] .svj__klus { padding-top: 0; }
  :root[data-svj^="j"] .svj-label { top: 10px; bottom: auto; right: 10px; font-size: 11px; padding: 3px 8px; }
  :root[data-svj^="j"] .svj__kaart { padding: 14px 14px 16px; border-radius: 8px 8px 0 0; }
  :root[data-svj^="j"] .svj-h1 { font-size: clamp(29px, 8.4vw, 35px); }
  :root[data-svj^="j"] .svj-lede { margin-top: 8px; font-size: 16px; line-height: 1.5; }
}

/* ==================================================== r1 · the firm's: the ratings join its name on the photo
   The firm's name is the photo's title; what customers say about the firm becomes the sign's second line: under the
   name a kalk hairline, under it the two scores side by side in kalk, set as the site sets them (the big 5/5, the stars,
   the platform, the count). The name and its reputation are one object, on the firm's side of the photo. The fall-off
   holds dark under the whole sign (--svj-w is the sign's width). The card keeps only the job: the H1 and its opening
   line side by side, so the card is no taller than its heading. */
:root[data-svj^="j"] .svj__kop .svj__band { --svj-w: clamp(330px, 32vw, 450px); }
:root[data-svj^="j"] section.svj { --svj-hoog: clamp(350px, 32vw, 460px); }
:root[data-svj^="j"] .svj__teken {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none;   /* a tap beside the name, or on the ratings, opens the photo under them */
}
:root[data-svj^="j"] .svj__kop .svj-merk { position: relative; pointer-events: auto; }
:root[data-svj^="j"] .svj__kop .svj-cijfers {
  display: flex; flex-wrap: nowrap; gap: 0; width: auto; max-width: none;
  margin: clamp(14px, 1.5vw, 20px) 0 0; padding: clamp(12px, 1.3vw, 16px) 0 0; list-style: none;
  border-top: 1px solid rgba(255, 252, 247, .45); pointer-events: none;
}
:root[data-svj^="j"] .svj__kop .cijfer { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0; }
:root[data-svj^="j"] .svj__kop .cijfer + .cijfer { margin-left: clamp(18px, 2vw, 26px); padding-left: clamp(18px, 2vw, 26px); border-left: 1px solid rgba(255, 252, 247, .45); }
:root[data-svj^="j"] .svj__kop .cijfer__score { font-size: clamp(28px, 2.4vw, 36px); color: var(--kalk-wit); }
:root[data-svj^="j"] .svj__kop .cijfer__wie { align-items: flex-start; font-size: 13.5px; line-height: 1.3; color: var(--kalk-wit); white-space: nowrap; }
:root[data-svj^="j"] .svj__kop .cijfer__wie b { color: var(--kalk-wit); }
:root[data-svj^="j"] .svj__kop .cijfer .stars { color: var(--dakpan-licht); }
:root[data-svj^="j"] .svj__kop .cijfer .stars svg { width: 14px; height: 14px; }
/* the card: the H1 and its line side by side, their feet on one line */
:root[data-svj^="j"] .svj__kop .svj__klus {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); align-items: end;
}
:root[data-svj^="j"] .svj__kop .svj-h1 { max-width: 12.5em; }
:root[data-svj^="j"] .svj__kop .svj-lede { margin: 0; max-width: 30em; padding-bottom: .2em; }

@media (max-width: 960px) {
  :root[data-svj^="j"] .svj__kop .svj__klus { grid-template-columns: minmax(0, 1fr); }
  :root[data-svj^="j"] .svj__kop .svj-lede { margin-top: clamp(12px, 1.3vw, 18px); padding-bottom: 0; }
}
@media (max-width: 560px) {
  :root[data-svj^="j"] section.svj { --svj-hoog: 236px; }
  /* on a phone the two scores run across the photo's foot, under the name; the foot is held dark from edge to edge */
  :root[data-svj^="j"] .svj__kop .svj__band { --svj-w: 200px; }
  :root[data-svj^="j"] .svj__teken { right: var(--svj-x); bottom: calc(var(--svj-over) + 12px); }
  :root[data-svj^="j"] .svj__kop .svj__beeld::after {
    background:
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svj-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svj-over) + 150px)),
      linear-gradient(90deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 120px));
  }
  :root[data-svj^="j"] .svj__kop .svj-cijfers { display: grid; grid-template-columns: auto auto; justify-content: start; width: 100%; margin-top: 10px; padding-top: 9px; }
  :root[data-svj^="j"] .svj__kop .cijfer { gap: 7px; }
  :root[data-svj^="j"] .svj__kop .cijfer + .cijfer { margin-left: 12px; padding-left: 12px; }
  :root[data-svj^="j"] .svj__kop .cijfer__score { font-size: clamp(21px, 6vw, 24px); }
  :root[data-svj^="j"] .svj__kop .cijfer__wie { font-size: 11px; line-height: 1.25; }
  :root[data-svj^="j"] .svj__kop .cijfer__wie > span:nth-child(2) { font-size: 0; }
  :root[data-svj^="j"] .svj__kop .cijfer__wie > span:nth-child(2) b { font-size: 11px; }
  :root[data-svj^="j"] .svj__kop .cijfer .stars { margin-bottom: 1px; }
  :root[data-svj^="j"] .svj__kop .cijfer .stars svg { width: 10px; height: 10px; }
  :root[data-svj^="j"] [data-svj-kant="r"] > .svj__teken { left: var(--svj-x); right: var(--svj-x); align-items: flex-end; }
  :root[data-svj^="j"] .svj__kop [data-svj-kant="r"] .svj__beeld::after {
    background:
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svj-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svj-over) + 150px)),
      linear-gradient(270deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svj-x) + var(--svj-w)), rgba(26, 36, 41, 0) calc(var(--svj-x) + var(--svj-w) + 120px));
  }
}


/* ==================================================== a phone (560 px down): what the three share
   The photo is the top of the page: the bar keeps its place in the flow (sticky, 60 px) but the page goes on under it
   (margin-bottom: -60px), so the photo starts where the bar starts and the bar's row lies over the photo's top. The bar's
   own kalk ground and its logo stay out while it lies on the photo (each variant says what it shows). The opening line
   is hidden, as he hid it; it stays in the HTML (data-svj-lede, the line Google reads). */
@media (max-width: 560px) {
  :root[data-svj^="j"] { scroll-padding-top: calc(60px + var(--svj-boven, 0px)); }
  :root[data-svj^="j"] .head { top: var(--svj-boven, 0px); margin-bottom: -60px; }
  :root[data-svj^="j"] .nav { max-height: calc(100svh - 60px - 70px - var(--svj-boven, 0px)); }
  :root[data-svj^="j"] .svj__kop [data-svj-lede] { display: none; }
  /* the photo's place-and-date label is not shown on a phone, as in r1 since 10-13 ("and the heemskerk thing") */
  :root[data-svj^="j"] .svj-label { display: none; }
}
/* ==================================================== y2 · the round button, and y1's bar once the photo is gone
   Picked 10-13 in this form: "opt 2, with the "if you scroll outside navbar view" transition effect where the logo
   appears, with a background and burger menu, of opt 1 (but still the round menu bar from opt 2)".
   At the top no bar is drawn: the site's menu button is the one thing of it on the photo, a round lood button with a
   kalk ring in the photo's top corner, where it reads as part of the photo (the bar around it has no ground, no logo, no
   shadow, and taps go through it). The breadcrumb heads the white card, over the H1, as it does in r1 on a computer.
   The photo keeps r1's height. Once the photo has gone under the bar (data-svj-onder, as in y1), y1's bar comes in
   around the same button: the kalk ground and the shadow fade in, the logo rises in on the left, and the round button
   stays where it was, the same element, settling into the bar (its drop shadow eases from floating to seated). Scrolled
   back up to the photo, the bar fades out again and the button is on the photo. Its menu is a panel under it, inset
   from the edges, at the top and in the bar alike. */
@media (max-width: 560px) {
  :root[data-svj^="j"] .head,
  :root[data-svj^="j"] .head.is-scrolled {
    background: transparent; box-shadow: none; pointer-events: none;
    transition: background-color .25s, box-shadow .25s;
  }
  :root[data-svj^="j"] .head .brand { opacity: 0; visibility: hidden; pointer-events: none; }
  :root.js[data-svj^="j"] .head .brand {
    opacity: 0; transform: translateY(10px); visibility: hidden;
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  :root[data-svj^="j"] .head .menu-btn,
  :root[data-svj^="j"] .head .nav { pointer-events: auto; }
  :root[data-svj^="j"] .menu-btn {
    width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 252, 247, .92), 0 6px 18px rgba(26, 36, 41, .34);
    transition: box-shadow .25s;
  }
  :root[data-svj^="j"] .menu-btn[aria-expanded="true"] { background: var(--lood-diep); }
  :root[data-svj^="j"] .nav {
    top: calc(100% - 2px); left: 10px; right: 10px;
    border-radius: 10px; padding: 6px 16px 14px;
  }
  /* past the photo: y1's bar, the round button kept */
  :root[data-svj^="j"][data-svj-onder] .head,
  :root[data-svj^="j"][data-svj-onder] .head.is-scrolled {
    background: var(--kalk); pointer-events: auto;
    box-shadow: 0 1px 0 var(--kalk-diep), 0 8px 20px rgba(38, 51, 58, .07);
  }
  :root.js[data-svj^="j"][data-svj-onder] .head .brand {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity .32s ease-out, transform .42s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  :root[data-svj^="j"][data-svj-onder] .menu-btn { box-shadow: 0 0 0 2px rgba(255, 252, 247, .92), 0 2px 6px rgba(26, 36, 41, .18); }
}
@media (max-width: 560px) {
  /* the breadcrumb heads the card: it takes the card's overlap and its top edge */
  :root[data-svj^="j"] .svj__kop { display: flex; flex-direction: column; }
  :root[data-svj^="j"] .svj__band { order: 1; }
  :root[data-svj^="j"] .svj__kruimel { order: 2; position: relative; top: auto; z-index: 2; margin-top: calc(-1 * var(--svj-over)); padding-top: 0; padding-bottom: 0; }
  :root[data-svj^="j"] .svj__kruimel .kruimel {
    padding: 13px 14px 0; background: var(--kalk-wit); border-radius: 8px 8px 0 0;
    box-shadow: 0 -10px 30px rgba(26, 36, 41, .12);
  }
  /* y2 shows the path only ("Home › Loodgieter ›") and hides the job, which the subpage's H1 names; a service page's
     path is "Home › Loodgieter", so both items show, as on a computer */
  :root[data-svj^="j"] .svj__vel { order: 3; margin-top: 0; }
  :root[data-svj^="j"] .svj__kaart { padding-top: 7px; border-radius: 0; box-shadow: none; }
  :root[data-svj^="j"] .svj-reeks { order: 4; }
}



/* ==================================================== the service page in the subpage's frame (j1–j3 share this)
   What differs from a subpage: the H1 is the service page's own and twice a subpage's length, so it is set a step
   smaller; the fold ends the page here (only the footer follows), so it keeps a plain breath under it. */
:root[data-svj^="j"] section.svj { padding-bottom: clamp(48px, 5vw, 72px); }
:root[data-svj^="j"] .svj__kop .svj-h1 { font-size: clamp(34px, 3.3vw, 48px); max-width: 13.5em; }
:root[data-svj^="j"] .svj__kop .svj-lede { font-size: clamp(16.5px, 1.2vw, 18px); }
:root[data-svj^="j"] .svj__kruimel .kruimel li[aria-current] { color: var(--lood-zacht); }
@media (max-width: 560px) {
  :root[data-svj^="j"] .svj__kop .svj-h1 { font-size: clamp(28px, 8vw, 33px); }
}

/* the photos that carry his stamp (fotomerk.css) need a frame to stand in */
:root[data-svj^="j"] .fotomerk { position: relative; display: block; overflow: hidden; background: var(--kalk-diep); }
:root[data-svj^="j"] .fotomerk img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ==================================================== j4 · alleen de kop (the operator's, by hand, 10-15)
   "nothing but [the crown and the card] (and then the block ends as it naturally does)": the crown, the card with the
   breadcrumb, the H1 and the opening line, and the card closes under them, as j3's does. */
:root[data-svj="j4"] .svj__kaart { border-radius: 10px; box-shadow: 0 -10px 30px rgba(26, 36, 41, .12), 0 22px 22px -14px rgba(26, 36, 41, .16); }
@media (max-width: 560px) {
  :root[data-svj="j4"] .svj__kaart { border-radius: 0 0 10px 10px; box-shadow: 0 22px 22px -14px rgba(26, 36, 41, .16); }
}