/* Round y · the site's bar and the breadcrumb made part of r1's photo banner on a phone (y1 y2 y3). Every rule is scoped
   :root[data-kop^="y"] (or ="yN"), which bouw.py's inline script sets only when it swapped one of these headers in.
   r.css's rules are scoped ^="r" and do not reach here, so r1 is carried over whole first (its shared rules and its own,
   transcribed and renamed svy-; the r2/r3 rules left out): from 561 px up every variant is r1 exactly. The variants
   differ only from 560 px down, at the bottom of this file, where the site's own bar changes too (style.css: sticky,
   60 px, the call buttons gone, the logo held back while the fold is in view). Every colour is a site token (or a
   token's rgb with an alpha). The site's bar (header.head, its .menu-btn and #nav) is restyled from here; script.js and
   style.css are untouched. y.js keeps two things on <html>: --svy-boven (where the page starts under anything fixed
   above it: 0 on the site, the dev server's 30 px bar here) and data-svy-onder (the photo has gone under the bar). */

/* ==================================================== r1, carried over (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-kop^="y"] .head .brand { visibility: visible; opacity: 1; transform: none; }

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

:root[data-kop^="y"] .svy { position: relative; }
:root[data-kop^="y"] .svy .kruimel { margin: 0; }
:root[data-kop^="y"] .svy-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-kop^="y"] .svy-h1 em { font-style: normal; color: var(--dakpan); }
:root[data-kop^="y"] .svy-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-kop^="y"] .svy__band {
  position: relative; height: var(--svy-hoog);
  --svy-x: calc(max(var(--gut), (100% - var(--wrap)) / 2) + var(--svy-pad));   /* where the card's words start */
  --svy-w: clamp(250px, 27vw, 380px);                                          /* about the name's width */
}
:root[data-kop^="y"] .svy__beeld {
  position: absolute; inset: 0; display: block; overflow: hidden; cursor: zoom-in; background: var(--lood);
}
:root[data-kop^="y"] .svy-foto { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
:root[data-kop^="y"] .svy-label {
  z-index: 2; left: auto; right: max(var(--gut), calc((100% - var(--wrap)) / 2)); bottom: calc(var(--svy-over) + 14px);
  background: rgba(26, 36, 41, .8);
}
:root[data-kop^="y"] .svy-label:empty { display: none; }   /* a photo without place or date (10-16) */
:root[data-kop^="y"] .svy-merk { position: absolute; z-index: 2; width: max-content; text-decoration: none; }
:root[data-kop^="y"] .svy-merk .naam { color: var(--kalk-wit); }
:root[data-kop^="y"] .svy-merk:focus-visible { outline-color: var(--kalk-wit); }
:root[data-kop^="y"] .svy__band > .svy-merk,
:root[data-kop^="y"] .svy__teken {
  left: var(--svy-x); bottom: calc(var(--svy-over) + clamp(18px, 2vw, 28px));
}
:root[data-kop^="y"] .svy-merk { --d: clamp(80px, 8.6vw, 124px); }
/* the dark fall-off from the lower left that carries the name; --svy-w is the width it must hold dark */
:root[data-kop^="y"] .svy__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(--svy-x) + var(--svy-w)), rgba(26, 36, 41, .2) calc(var(--svy-x) + var(--svy-w) + 200px), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 420px)),
    linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, .22) calc(var(--svy-over) + 100px), rgba(26, 36, 41, 0) 78%);
}
/* data-svy-kant="r": the name (and what travels with it) on the right, the fall-off turned round */
:root[data-kop^="y"] [data-svy-kant="r"] > .svy-merk,
:root[data-kop^="y"] [data-svy-kant="r"] > .svy__teken { left: auto; right: var(--svy-x); }
:root[data-kop^="y"] [data-svy-kant="r"] .svy__beeld::after {
  background:
    linear-gradient(270deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, .2) calc(var(--svy-x) + var(--svy-w) + 200px), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 420px)),
    linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, .22) calc(var(--svy-over) + 100px), rgba(26, 36, 41, 0) 78%);
}
:root[data-kop^="y"] [data-svy-kant="r"] .svy-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-kop^="y"] .svy__kruimel {
  position: absolute; z-index: 3; left: 0; right: 0; pointer-events: none;
  top: calc(var(--svy-hoog) - var(--svy-over) + var(--svy-top));
}
:root[data-kop^="y"] .svy__kruimel .kruimel { padding: 0 var(--svy-pad); pointer-events: auto; }

/* the card */
:root[data-kop^="y"] .svy__vel { position: relative; z-index: 2; margin-top: calc(-1 * var(--svy-over)); }
:root[data-kop^="y"] .svy__kaart {
  padding: var(--svy-top) var(--svy-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-kop^="y"] .svy__klus { padding-top: calc(20px + clamp(12px, 1.4vw, 18px)); }

@media (max-width: 560px) {
  :root[data-kop^="y"] section[data-sv] { --svy-over: 24px; --svy-hoog: 214px; }
  :root[data-kop^="y"] .svy__band { --svy-w: 200px; --svy-x: calc(var(--gut) + 14px); }
  :root[data-kop^="y"] .svy__band > .svy-merk,
  :root[data-kop^="y"] .svy__teken { bottom: calc(var(--svy-over) + 16px); }
  :root[data-kop^="y"] .svy-merk { --d: clamp(54px, 17vw, 66px); }
  :root[data-kop^="y"] .svy__beeld::after {
    background:
      linear-gradient(90deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, .18) calc(var(--svy-x) + var(--svy-w) + 90px), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 150px)),
      linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, 0) 70%);
  }
  :root[data-kop^="y"] [data-svy-kant="r"] .svy__beeld::after {
    background:
      linear-gradient(270deg, rgba(26, 36, 41, .72) 0, rgba(26, 36, 41, .62) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, .18) calc(var(--svy-x) + var(--svy-w) + 90px), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 150px)),
      linear-gradient(0deg, rgba(26, 36, 41, .42) 0, rgba(26, 36, 41, 0) 70%);
  }
  :root[data-kop^="y"] [data-svy-kant="r"] .svy-label { left: 10px; right: auto; }
  :root[data-kop^="y"] .svy__kruimel { position: static; padding-top: 12px; padding-bottom: 12px; }
  :root[data-kop^="y"] .svy__kruimel .kruimel { padding: 0; }
  :root[data-kop^="y"] .svy .kruimel { font-size: 13.5px; }
  :root[data-kop^="y"] .svy__klus { padding-top: 0; }
  :root[data-kop^="y"] .svy-label { top: 10px; bottom: auto; right: 10px; font-size: 11px; padding: 3px 8px; }
  :root[data-kop^="y"] .svy__kaart { padding: 14px 14px 16px; border-radius: 8px 8px 0 0; }
  :root[data-kop^="y"] .svy-h1 { font-size: clamp(29px, 8.4vw, 35px); }
  :root[data-kop^="y"] .svy-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 (--svy-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-kop^="y"] .svy .svy__band { --svy-w: clamp(330px, 32vw, 450px); }
:root[data-kop^="y"] section[data-sv] { --svy-hoog: clamp(350px, 32vw, 460px); }
:root[data-kop^="y"] .svy__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-kop^="y"] .svy .svy-merk { position: relative; pointer-events: auto; }
:root[data-kop^="y"] .svy .svy-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-kop^="y"] .svy .cijfer { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0; }
:root[data-kop^="y"] .svy .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-kop^="y"] .svy .cijfer__score { font-size: clamp(28px, 2.4vw, 36px); color: var(--kalk-wit); }
:root[data-kop^="y"] .svy .cijfer__wie { align-items: flex-start; font-size: 13.5px; line-height: 1.3; color: var(--kalk-wit); white-space: nowrap; }
:root[data-kop^="y"] .svy .cijfer__wie b { color: var(--kalk-wit); }
:root[data-kop^="y"] .svy .cijfer .stars { color: var(--dakpan-licht); }
:root[data-kop^="y"] .svy .cijfer .stars svg { width: 14px; height: 14px; }
/* the card: the H1 and its line side by side, their feet on one line */
:root[data-kop^="y"] .svy .svy__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-kop^="y"] .svy .svy-h1 { max-width: 12.5em; }
:root[data-kop^="y"] .svy .svy-lede { margin: 0; max-width: 30em; padding-bottom: .2em; }

@media (max-width: 960px) {
  :root[data-kop^="y"] .svy .svy__klus { grid-template-columns: minmax(0, 1fr); }
  :root[data-kop^="y"] .svy .svy-lede { margin-top: clamp(12px, 1.3vw, 18px); padding-bottom: 0; }
}
@media (max-width: 560px) {
  :root[data-kop^="y"] section[data-sv] { --svy-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-kop^="y"] .svy .svy__band { --svy-w: 200px; }
  :root[data-kop^="y"] .svy__teken { right: var(--svy-x); bottom: calc(var(--svy-over) + 12px); }
  :root[data-kop^="y"] .svy .svy__beeld::after {
    background:
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svy-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svy-over) + 150px)),
      linear-gradient(90deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 120px));
  }
  :root[data-kop^="y"] .svy .svy-cijfers { display: grid; grid-template-columns: auto auto; justify-content: start; width: 100%; margin-top: 10px; padding-top: 9px; }
  :root[data-kop^="y"] .svy .cijfer { gap: 7px; }
  :root[data-kop^="y"] .svy .cijfer + .cijfer { margin-left: 12px; padding-left: 12px; }
  :root[data-kop^="y"] .svy .cijfer__score { font-size: clamp(21px, 6vw, 24px); }
  :root[data-kop^="y"] .svy .cijfer__wie { font-size: 11px; line-height: 1.25; }
  :root[data-kop^="y"] .svy .cijfer__wie > span:nth-child(2) { font-size: 0; }
  :root[data-kop^="y"] .svy .cijfer__wie > span:nth-child(2) b { font-size: 11px; }
  :root[data-kop^="y"] .svy .cijfer .stars { margin-bottom: 1px; }
  :root[data-kop^="y"] .svy .cijfer .stars svg { width: 10px; height: 10px; }
  :root[data-kop^="y"] [data-svy-kant="r"] > .svy__teken { left: var(--svy-x); right: var(--svy-x); align-items: flex-end; }
  :root[data-kop^="y"] .svy [data-svy-kant="r"] .svy__beeld::after {
    background:
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svy-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svy-over) + 150px)),
      linear-gradient(270deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 120px));
  }
}


/* 8B (vouw/i2.css) reaches r1's card through r1's class names (.svr__klus, .svr:has(.si2-open)); the same, for these */
:root[data-kop^="y"] .svy__klus > .si2-a,
:root[data-kop^="y"] .svy__klus > .si2-b { grid-column: 1 / -1; }
:root[data-kop^="y"] .svy:has(.si2-open) > .svy__vel { z-index: 5; }
:root[data-kop^="y"] .svy:has(.si2-open) > .svy__kruimel { z-index: 6; }
@media (min-width: 961px) {
  :root[data-kop^="y"] .svy__klus > .si2-c { grid-column: 2; }
}

/* ==================================================== 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-svr-lede, the line Google reads). */
@media (max-width: 560px) {
  :root[data-kop^="y"] { scroll-padding-top: calc(60px + var(--svy-boven, 0px)); }
  :root[data-kop^="y"] .head { top: var(--svy-boven, 0px); margin-bottom: -60px; }
  :root[data-kop^="y"] .nav { max-height: calc(100svh - 60px - 70px - var(--svy-boven, 0px)); }
  :root[data-kop^="y"] .svy [data-svr-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-kop^="y"] .svy-label { display: none; }
  /* a link on the photo or the dark band: the focus ring in kalk */
  :root[data-kop="y1"] .svy__kruimel a:focus-visible,
  :root[data-kop="y3"] .svy__kruimel a:focus-visible { outline-color: var(--kalk-wit); }
}

/* ==================================================== y1 · the bar on the photo
   The site's bar lies over the photo's top, clear: no kalk ground, no logo (the photo carries the firm's emblem and name,
   the reason the site holds its bar's logo back on a phone anyway). The breadcrumb stands in the bar's row where the logo
   would be, in kalk on a dark fall-off from the top; the menu button is the site's own, ringed in kalk so it reads on a
   dark photo. The place label moves under the button. The photo is 24 px taller than r1's for that row. Once the photo
   has gone under the bar (data-svy-onder), or while its menu is open, the bar is the site's own phone bar again: kalk,
   its logo coming in, its shadow. The breadcrumb scrolls away with the photo; the bar stays. */
@media (max-width: 560px) {
  :root[data-kop="y1"] section[data-sv] { --svy-hoog: 248px; }
  :root[data-kop="y1"] .head {
    background: transparent; box-shadow: none; pointer-events: none;
    transition: background-color .25s, box-shadow .25s;
  }
  :root[data-kop="y1"] .head .menu-btn,
  :root[data-kop="y1"] .head .nav { pointer-events: auto; }
  :root[data-kop="y1"] .head .brand { pointer-events: none; }   /* fading out, it must not catch a tap meant for the breadcrumb */
  :root[data-kop="y1"] .menu-btn { box-shadow: 0 0 0 1.5px rgba(255, 252, 247, .55); transition: box-shadow .25s; }
  :root.js[data-kop="y1"] .head .brand {
    opacity: 0; transform: translateY(10px); visibility: hidden;
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  :root[data-kop="y1"][data-svy-onder] .head,
  :root[data-kop="y1"] .head:has(#nav.open) {
    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-kop="y1"][data-svy-onder] .head .brand,
  :root.js[data-kop="y1"] .head:has(#nav.open) .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-kop="y1"][data-svy-onder] .menu-btn,
  :root[data-kop="y1"] .head:has(#nav.open) .menu-btn { box-shadow: none; }

  /* the breadcrumb: in the bar's row, left of the menu button (38 px wide, 12 px clear of it) */
  :root[data-kop="y1"] .svy__kruimel {
    position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 60px; max-width: none;
    display: flex; align-items: center; padding: 0 calc(var(--gut) + 50px) 0 var(--gut);
  }
  :root[data-kop="y1"] .svy__kruimel .kruimel { color: var(--kalk-wit); line-height: 1.35; text-shadow: 0 1px 6px rgba(26, 36, 41, .45); }
  :root[data-kop="y1"] .svy__kruimel .kruimel ol { gap: 1px 8px; }
  :root[data-kop="y1"] .svy__kruimel .kruimel a { color: var(--kalk-wit); text-decoration-color: rgba(255, 252, 247, .5); }
  :root[data-kop="y1"] .svy__kruimel .kruimel a:hover { color: var(--kalk-wit); text-decoration-color: var(--kalk-wit); }
  /* each "›" ends its line, so a breadcrumb that wraps never starts a line with one */
  :root[data-kop="y1"] .svy__kruimel .kruimel li + li::before { content: none; }
  :root[data-kop="y1"] .svy__kruimel .kruimel li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--dakpan-licht); font-weight: 700; }

  /* r1's fall-offs, and one from the top that holds the bar's row dark */
  :root[data-kop="y1"] .svy .svy__beeld::after {
    background:
      linear-gradient(180deg, rgba(26, 36, 41, .74) 0, rgba(26, 36, 41, .66) 54px, rgba(26, 36, 41, 0) 112px),
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svy-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svy-over) + 150px)),
      linear-gradient(90deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 120px));
  }
  :root[data-kop="y1"] .svy [data-svy-kant="r"] .svy__beeld::after {
    background:
      linear-gradient(180deg, rgba(26, 36, 41, .74) 0, rgba(26, 36, 41, .66) 54px, rgba(26, 36, 41, 0) 112px),
      linear-gradient(0deg, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .7) calc(var(--svy-over) + 58px), rgba(26, 36, 41, 0) calc(var(--svy-over) + 150px)),
      linear-gradient(270deg, rgba(26, 36, 41, .62) 0, rgba(26, 36, 41, .5) calc(var(--svy-x) + var(--svy-w)), rgba(26, 36, 41, 0) calc(var(--svy-x) + var(--svy-w) + 120px));
  }
}

/* ==================================================== 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-svy-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-kop="y2"] .head,
  :root[data-kop="y2"] .head.is-scrolled {
    background: transparent; box-shadow: none; pointer-events: none;
    transition: background-color .25s, box-shadow .25s;
  }
  :root[data-kop="y2"] .head .brand { opacity: 0; visibility: hidden; pointer-events: none; }
  :root.js[data-kop="y2"] .head .brand {
    opacity: 0; transform: translateY(10px); visibility: hidden;
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  :root[data-kop="y2"] .head .menu-btn,
  :root[data-kop="y2"] .head .nav { pointer-events: auto; }
  :root[data-kop="y2"] .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-kop="y2"] .menu-btn[aria-expanded="true"] { background: var(--lood-diep); }
  :root[data-kop="y2"] .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-kop="y2"][data-svy-onder] .head,
  :root[data-kop="y2"][data-svy-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-kop="y2"][data-svy-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-kop="y2"][data-svy-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-kop="y2"] .svy { display: flex; flex-direction: column; }
  :root[data-kop="y2"] .svy__band { order: 1; }
  :root[data-kop="y2"] .svy__kruimel { order: 2; position: relative; top: auto; z-index: 2; margin-top: calc(-1 * var(--svy-over)); padding-top: 0; padding-bottom: 0; }
  :root[data-kop="y2"] .svy__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);
  }
  /* the path only, "Home › Loodgieter ›", as the H1's kicker: the page's own name is the H1 under it (the item stays in
     the markup, with aria-current, for a screen reader) */
  :root[data-kop="y2"] .svy__kruimel .kruimel li[aria-current] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-kop="y2"] .svy__kruimel .kruimel li:nth-child(2)::after { content: "›"; margin-left: 8px; color: var(--dakpan); font-weight: 700; }
  :root[data-kop="y2"] .svy__vel { order: 3; margin-top: 0; }
  :root[data-kop="y2"] .svy__kaart { padding-top: 7px; border-radius: 0; box-shadow: none; }
  :root[data-kop="y2"] .svy-reeks { order: 4; }
}

/* ==================================================== y3 · the path is the bar
   A dark band across the photo's top, the height of the site's bar, is the bar: the breadcrumb is its title (the path
   small over the page's name) and the site's menu button, outlined in kalk, stands at its end. On the photo the band is
   dark glass, the photo running on under it; once the photo has gone under it (data-svy-onder) it is solid lood-diep,
   and it stays at the top all the way down, naming the page, with Home and the service one tap away. The breadcrumb is
   fixed (the band); the site's bar is never drawn, only its button and its menu. The place label moves under the band;
   the photo is 20 px taller than r1's for it. */
@media (max-width: 560px) {
  :root[data-kop="y3"] section[data-sv] { --svy-hoog: 248px; }
  :root[data-kop="y3"] .head,
  :root[data-kop="y3"] .head.is-scrolled { background: transparent; box-shadow: none; pointer-events: none; }
  :root.js[data-kop="y3"] .head .brand,
  :root[data-kop="y3"] .head .brand { opacity: 0; visibility: hidden; }
  :root[data-kop="y3"] .head .menu-btn,
  :root[data-kop="y3"] .head .nav { pointer-events: auto; }
  :root[data-kop="y3"] .menu-btn { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 252, 247, .6); }
  :root[data-kop="y3"] .menu-btn[aria-expanded="true"] { background: rgba(255, 252, 247, .14); }

  :root[data-kop="y3"] .svy__kruimel {
    position: fixed; z-index: 1009; top: var(--svy-boven, 0px); left: 0; right: 0; height: 60px; max-width: none;
    display: flex; align-items: center; padding: 0 calc(var(--gut) + 50px) 0 var(--gut); pointer-events: auto;
    background: rgba(26, 36, 41, .7); box-shadow: inset 0 -2px 0 var(--dakpan);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color .25s, box-shadow .25s;
  }
  :root[data-kop="y3"][data-svy-onder] .svy__kruimel { background: rgba(26, 36, 41, .97); box-shadow: inset 0 -2px 0 var(--dakpan), 0 8px 20px rgba(26, 36, 41, .18); }
  /* the title: "Home › Loodgieter ›" small, the page's name under it */
  :root[data-kop="y3"] .svy__kruimel .kruimel { min-width: 0; width: 100%; font-size: 12.5px; line-height: 1.3; color: var(--kalk-wit); }
  :root[data-kop="y3"] .svy__kruimel .kruimel ol { display: block; white-space: nowrap; }
  :root[data-kop="y3"] .svy__kruimel .kruimel li { display: inline; }
  :root[data-kop="y3"] .svy__kruimel .kruimel li + li::before { margin-left: 4px; color: var(--dakpan-licht); }
  :root[data-kop="y3"] .svy__kruimel .kruimel li:nth-child(2)::after { content: "›"; margin-left: 8px; color: var(--dakpan-licht); font-weight: 700; }
  :root[data-kop="y3"] .svy__kruimel .kruimel li[aria-current] {
    display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
    font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; line-height: 1.25;
  }
  :root[data-kop="y3"] .svy__kruimel .kruimel li[aria-current]::before { content: none; }
  :root[data-kop="y3"] .svy__kruimel .kruimel a { color: var(--kalk-wit); text-decoration-color: rgba(255, 252, 247, .45); text-underline-offset: 2px; }
  :root[data-kop="y3"] .svy__kruimel .kruimel a:hover { color: var(--kalk-wit); text-decoration-color: var(--kalk-wit); }
}