/* The service pages' shared parts — linked by every diensten/<dienst>/index.html after ../../style.css and before its
   own dienst.css. Moved here unchanged from badkamer-renovatie/dienst.css (2026-10-01): the opening every service
   page opens with (section.fold.intro: breadcrumb, the firm and its two ratings, the H1 and lede, the principal
   picture with its thumbnails, the reasons people come, the way out) and the thumbnail shapes it uses. The one
   thing that stayed behind is the principal picture's frame shape, which belongs to each page's own picture. */

/* thumbnails shaped for their pictures: 4:3 for a landscape one, 3:4 for an upright one, square for a square one */
.duim.duim--43 { width: 96px; height: 72px; }
.duim.duim--34 { width: 54px; height: 72px; }
.duim.duim--11 { width: 72px; height: 72px; }
@media (max-width: 560px) {
  .duim.duim--43 { width: 84px; height: 63px; }
  .duim.duim--34 { width: 48px; height: 64px; }
  .duim.duim--11 { width: 64px; height: 64px; }
}

/* ==================================================== OPENING */
.fold.intro { padding: clamp(6px, 1.2vw, 14px) 0 clamp(56px, 6vw, 88px); overflow: visible; }

.kruimel { margin: 0 0 clamp(14px, 2vw, 24px); font-size: 14px; line-height: 1.4; color: var(--lood-zacht); }
.kruimel ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.kruimel li + li::before { content: "›"; margin-right: 8px; color: var(--dakpan); font-weight: 700; }
.kruimel a { color: var(--lood); text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kruimel a:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }

.intro__grid { display: grid; column-gap: clamp(32px, 4.4vw, 64px); align-items: start; }

/* the firm: its own mark and name, and its two ratings as figures */
.intro__firma { grid-area: firma; display: flex; align-items: center; flex-wrap: wrap; gap: 16px clamp(22px, 2.4vw, 34px); margin-bottom: clamp(22px, 2.4vw, 32px); }
.intro__lockup { --d: 54px; }
.cijfers { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.cijfer { display: flex; align-items: center; gap: 10px; }
.cijfer__score { font-weight: 800; font-size: clamp(30px, 2.6vw, 38px); line-height: 1; letter-spacing: -.035em; color: var(--lood); }
.cijfer__wie { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; line-height: 1.3; color: var(--lood-zacht); }
.cijfer__wie b { color: var(--lood); font-weight: 700; }
.cijfer .stars { margin-bottom: 2px; }
.cijfer .stars svg { width: 14px; height: 14px; }

.intro__kop { grid-area: kop; }
.intro__h1 {
  margin: 0 0 18px; max-width: 11.5em;
  font-weight: 800; font-size: clamp(38px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.035em; color: var(--lood);
  text-wrap: balance;
}
.intro__h1 em { font-style: normal; color: var(--dakpan); }
.intro__lede { margin: 0 0 clamp(26px, 3vw, 36px); max-width: 32em; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--lood); }

/* the principal picture, large; each page gives the frame the shape its own picture needs (its dienst.css) */
.intro__foto { grid-area: foto; margin: 0; position: sticky; top: 24px; align-self: start; }
.intro__groot { position: relative; display: block; border-radius: var(--r); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-2); }
.intro__groot img { display: block; width: 100%; height: auto; object-fit: cover; }
.intro__groot .label { left: 14px; bottom: 14px; }
.intro__duimen { margin-top: 14px; align-items: flex-end; }

/* the reasons people come, big, each a link into the page */
.intro__vragen { grid-area: vragen; }
.intro__vraagkop {
  margin: 0 0 10px; font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dakpan);
}
.redenen { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--kalk-rand); }
.redenen li { border-top: 1px solid var(--kalk-rand); }
.redenen a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 2px 12px 0;
  font-weight: 700; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.22; letter-spacing: -.018em;
  color: var(--lood); text-decoration: none; transition: color .15s;
}
.redenen .ico { width: .7em; height: .7em; color: var(--dakpan); flex: none; transition: transform .15s; }
.redenen a:hover { color: var(--dakpan); }
.redenen a:hover .ico { transform: translateX(4px); }

/* the way out: his own way in, in three big steps; up to 960px a card under the fold's grid (from 961 up it closes
   the list, in the desktop block below) */
.uitweg {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(24px, 3vw, 40px);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px);
  background: var(--kalk-wit); border-radius: 10px; border-top: 5px solid var(--dakpan); box-shadow: var(--shadow-1);
}
.uitweg__vraag { grid-column: 1 / -1; margin: 0; font-weight: 800; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.18; letter-spacing: -.02em; color: var(--lood); text-wrap: balance; }
.uitweg__stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
.uitweg__stappen li { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.28; letter-spacing: -.01em; color: var(--lood); }
.uitweg__n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit); font-family: var(--f-tech); font-weight: 700; font-size: 15px; letter-spacing: 0;
}
.uitweg__acts { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.uitweg__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; }
.uitweg__tel:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }

/* ---------------------------------------------------- from 961px up (template2-dienstvouw, answer 2, picked 2026-10-02)
   One grid of two columns from top to bottom. The firm and its two ratings on one line; the H1 over the picture's
   column and its paragraph over the questions'; then the picture and the questions face each other, and the way in
   closes the list as its last question: out of its card, no discs, the green button its one accent. The fold's
   .wrap is the grid; .intro__grid and .intro__kop let their parts into it (display: contents), so the markup stays
   the phone's. The picture slides along the list, as before. */
@media (width > 960px) {
  .fold.intro > .wrap {
    display: grid; align-items: start; column-gap: clamp(40px, 4.4vw, 64px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "kruimel kruimel" "firma firma" "h1 lede" "foto vragen" "foto uitweg";
    grid-template-rows: auto auto auto auto 1fr;
  }
  .intro__grid, .intro__kop { display: contents; }
  .kruimel { grid-area: kruimel; }

  .intro__firma { flex-wrap: nowrap; gap: 16px clamp(24px, 2.6vw, 40px); margin-bottom: clamp(20px, 2.2vw, 30px); }
  .cijfers { flex-wrap: nowrap; }
  .cijfer__score { font-size: clamp(24px, 2.1vw, 30px); }

  .intro__h1 { grid-area: h1; margin: 0 0 clamp(32px, 3.4vw, 48px); }
  .intro__lede { grid-area: lede; align-self: end; margin: 0 0 clamp(32px, 3.4vw, 48px); }

  /* the picture keeps its page's frame (dienst.css) but runs no taller than 44vw (480–600px): an upright one
     narrows instead, so the picture and the list end close together. The width is that height times the frame's
     shape, which each dienst.css gives as a number (--groot-vorm, beside its aspect-ratio); plain calc(), so every
     browser sizes it alike (2026-10-02: was attr() in sizes, which only Chrome knows). */
  .intro__groot { width: min(100%, calc(clamp(480px, 44vw, 600px) * var(--groot-vorm, 1))); }

  /* the way in, the list's last question: set as the questions are, without the arrow; its steps one quiet line each */
  .uitweg {
    grid-area: uitweg; align-self: start; display: block; margin: 0; padding: 16px 0 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .uitweg__vraag { font-weight: 700; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.22; letter-spacing: -.018em; text-wrap: pretty; }
  .uitweg__stappen { display: block; margin-top: 8px; }
  .uitweg__stappen li {
    gap: 7px; padding: 2px 0; font-weight: 500; font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.45; letter-spacing: 0;
    color: var(--lood-zacht);
  }
  .uitweg__n {
    display: inline; width: auto; height: auto; margin: 0; border-radius: 0; background: none;
    color: var(--dakpan); font-family: var(--f-tech); font-weight: 700; font-size: 1em; line-height: inherit;
    font-variant-numeric: tabular-nums;
  }
  .uitweg__acts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
}
@media (max-width: 960px) {
  /* stacked (phone and tablet): the firm, its mark and its two ratings, first; then his pictures; then the words
     (the operator, 2026-10-01: logo and ratings above the pictures, not under them) */
  .intro__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "firma" "foto" "kop" "vragen"; grid-template-rows: none; }
  .intro__foto { position: static; max-width: 560px; margin-bottom: clamp(24px, 4vw, 36px); }
}
@media (max-width: 720px) {
  .uitweg { grid-template-columns: minmax(0, 1fr); }
  .uitweg__stappen { grid-template-columns: minmax(0, 1fr); }
  .uitweg__acts { align-items: stretch; }
  .uitweg__acts .btn { width: 100%; }
}
@media (max-width: 560px) {
  .kruimel { font-size: 13.5px; margin-bottom: 12px; }
  .intro__foto { margin-bottom: 26px; }
  .intro__duimen { margin-top: 10px; }
  .intro__firma { flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 24px; }
  .intro__lockup { --d: 58px; }
  .cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; max-width: 360px; }
  .cijfer { flex-direction: column; gap: 4px; padding: 0 6px; }
  .cijfer + .cijfer { border-left: 1px solid var(--kalk-diep); }
  .cijfer__wie { align-items: center; font-size: 12.5px; }
  .cijfer__score { font-size: 30px; }
  .intro__h1 { font-size: clamp(34px, 9.6vw, 42px); }
  .intro__lede { font-size: 17px; }
  .redenen a { font-size: 19.5px; padding: 12px 0 13px; }
  .uitweg { padding: 20px 18px 22px; }
}