/* Badkamer renovatie — what this page adds to ../../style.css (linked before it, never edited). Every colour is a
   token from that file, so from palette.json. Every picture frame below is drawn for its picture: the shape is
   chosen so that the picture's focus (data-focus, whatsapp/plaatsen/badkamer.md) stands whole at every width,
   and ../../focus.js crops around it. */

/* ==================================================== SHARED: the head system, the seam, the lists, the tiles */

/* One head, designed once: the same element, the same size, the same place (the top left of every section's
   wrap, on a light ground), in every section, the back sections included. No kicker, no line under it. */
.dk { padding: clamp(72px, 8vw, 116px) 0; }
.kop {
  margin: 0 0 clamp(24px, 2.8vw, 38px);
  font-weight: 800; font-size: clamp(36px, 4.2vw, 58px); line-height: 1; letter-spacing: -.035em;
  color: var(--lood); text-wrap: balance;
}

/* lead and answer: one frame, one size, one ink; the seam between them is a label with a rule */
.lead, .antw p, .antw li, .antw .buren { font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.62; color: var(--lood); }
.lead { margin: 0 0 clamp(20px, 2.2vw, 28px); max-width: 36em; text-wrap: pretty; }
.antw p { margin: 0 0 1em; max-width: 36em; text-wrap: pretty; }
.naad {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px !important; max-width: none !important;
  font-family: var(--f-tech); font-weight: 700; font-size: 13px !important; line-height: 1.2 !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan) !important;
}
.naad::after { content: ""; flex: 1; height: 2px; background: var(--dakpan); }
.antw a:not(.btn) { color: var(--lood); text-decoration: underline; text-decoration-color: var(--dakpan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.antw a:not(.btn):hover { color: var(--dakpan); }

/* the list inside an answer, with the house's own gable as its bullet */
.punten { margin: 0 0 1.1em; padding: 0; list-style: none; }
.punten li { position: relative; padding: 6px 0 6px 28px; font-weight: 600; }
.punten li::before {
  content: ""; position: absolute; left: 2px; top: .78em; width: 13px; height: 13px; background: var(--dakpan);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}

/* the section's way in, its closing move */
.sluit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.sluit .buren { margin: 0; }

/* a picture as a tile: it opens whole in the lightbox; the frame's shape is set where the tile stands */
.tegel {
  position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--r); cursor: zoom-in;
  background: var(--kalk-diep); box-shadow: var(--shadow-1);
}
.tegel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tegel:hover img { transform: scale(1.03); }
.tegel:focus-visible { outline-offset: -3px; }
.tegel .label { left: 10px; bottom: 10px; max-width: calc(100% - 20px); pointer-events: none; }

/* ==================================================== OPENING */
.intro__groot img { aspect-ratio: 1320 / 1419; }   /* n=116 in its own shape; the rest of the opening is in ../diensten.css */
.intro__groot { --groot-vorm: calc(1320 / 1419); }   /* the same shape as a number: the desktop fold's cap (../diensten.css) */

/* ==================================================== ONE BREATH: what the klus covers */
.onder { background: var(--lood); color: var(--kalk-wit); padding: clamp(40px, 4.6vw, 64px) 0; }
.onder__voor {
  margin: 0 0 12px; font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dakpan-licht);
}
.onder__groot { margin: 0; max-width: 30em; font-weight: 800; font-size: clamp(25px, 3vw, 42px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.onder__groot span { white-space: nowrap; }
.onder__groot span:not(:last-child)::after { content: " · "; color: var(--dakpan-licht); font-weight: 700; white-space: pre; }
.onder__na { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--gips-licht); }

/* ==================================================== 1 · LEIDINGWERK EN AFVOER: the card, the work behind the tiles in
   a column at its side (n=3 leads; n=3, 4 and 54 all stand 4:5, inside their focus at every width) */
.kaart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "tekst strook";
  gap: clamp(28px, 3.6vw, 52px); align-items: start;
  padding: clamp(24px, 3.2vw, 44px); background: var(--kalk-wit); border: 2px solid var(--lood); border-radius: 10px; box-shadow: var(--shadow-1);
}
.kaart__tekst { grid-area: tekst; }
.strook { grid-area: strook; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.strook li .tegel { aspect-ratio: 4 / 5; }
.strook .strook__lead { grid-column: 1 / -1; }
.punten--kader { padding: 12px 20px 12px 18px; background: var(--gips-licht); border-radius: var(--r); border-left: 5px solid var(--dakpan); }
@media (max-width: 960px) {
  .kaart { grid-template-columns: minmax(0, 1fr); grid-template-areas: "strook" "tekst"; }
  .strook { grid-template-columns: 1.25fr 1fr 1fr; align-items: end; }
  .strook .strook__lead { grid-column: auto; }
  .strook .strook__lead .tegel { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .kaart { padding: 14px 14px 22px; }
  .strook { grid-template-columns: 1fr 1fr; }
  .strook .strook__lead { grid-column: 1 / -1; }
  .kaart__tekst { padding: 0 4px; }
}

/* ==================================================== 2 · INLOOPDOUCHE: a changed ground; the four styles as a 2×2 of
   upright tiles (3:4, each inside its focus), the first leads */
.s-inloop { background: var(--gips-licht); }
.inloop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4.4vw, 64px); align-items: start; }
.stijlen { position: sticky; top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stijlen .tegel { aspect-ratio: 3 / 4; }
.stijl {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px 5px; border-radius: 3px; pointer-events: none;
  background: var(--kalk-wit); color: var(--lood);
  font-family: var(--f-tech); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}
.stijlen li:first-child .stijl { background: var(--dakpan); color: var(--kalk-wit); }
.punten--rij { margin-top: -.2em; }
.pair--inloop::after { box-shadow: 0 0 0 3px var(--gips-licht); }
@media (max-width: 960px) {
  .inloop { grid-template-columns: minmax(0, 1fr); }
  .stijlen { position: static; max-width: 620px; }
}
@media (max-width: 560px) {
  .stijlen { gap: 8px; }
  .stijl { left: 8px; top: 8px; font-size: 11px; padding: 3px 8px 4px; }
}

/* ==================================================== 3 · COMPLETE BADKAMERRENOVATIE: inside the margin like every other
   section, the words on the left and the voor/na in a column on the right that stays in view while they run. Its
   shape (7:8, 4:5 on a phone) keeps the focus of the Zaandam pair (n=102 / n=114) whole; the second pair's
   thumbnails stand 3:4. */
.compleet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); grid-template-areas: "tekst ba";
  gap: clamp(32px, 4.4vw, 64px); align-items: start;
}
.compleet__tekst { grid-area: tekst; }
.compleet__ba { grid-area: ba; position: sticky; top: 24px; margin: 0; }
.compleet .ba__stage { aspect-ratio: 7 / 8; }

/* the eight parts, in order, drawn as part of the answer */
.stappen { counter-reset: st; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 2.4vw, 32px); margin: 4px 0 1.4em; padding: 0; list-style: none; }
.stappen li { counter-increment: st; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--kalk-rand); }
.stappen li:nth-last-child(-n+2) { border-bottom: 1px solid var(--kalk-rand); }
.stappen li::before {
  content: counter(st); position: absolute; left: 0; top: 13px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--dakpan); color: var(--dakpan);
  font-family: var(--f-tech); font-weight: 700; font-size: 15px; line-height: 1;
}
.stappen b { display: block; margin-bottom: 2px; font-weight: 800; letter-spacing: -.01em; }

/* the closing move: the indicatieprijs, in his three steps */
.prijs {
  margin-top: clamp(26px, 3vw, 36px); padding: clamp(22px, 2.6vw, 32px);
  background: var(--lood); color: var(--kalk-wit); border-radius: 10px;
}
.prijs__vraag { margin: 0 0 16px !important; font-weight: 800; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; letter-spacing: -.02em; color: var(--kalk-wit) !important; }
.prijs__stappen { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.antw .prijs__stappen li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--kalk-wit); }
.prijs__n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit); font-family: var(--f-tech); font-weight: 700; font-size: 14px; line-height: 1;
}
.antw .prijs__na { margin: 14px 0 0; color: var(--gips-licht); }

@media (min-width: 961px) and (max-width: 1180px) {
  .compleet { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
@media (max-width: 960px) {
  .compleet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ba" "tekst"; }
  .compleet__ba { position: static; max-width: 560px; }
  .compleet__tekst { max-width: 700px; }
}
@media (max-width: 560px) {
  .compleet .ba__stage { aspect-ratio: 4 / 5; }
  .stappen { grid-template-columns: 1fr; }
  .stappen li:nth-last-child(2) { border-bottom: 0; }
}

/* ==================================================== ONE BREATH: one review whole */
.stem { background: var(--kalk-diep); padding: clamp(48px, 5.4vw, 76px) 0; }
.stem__rij { display: flex; align-items: center; justify-content: center; gap: 28px clamp(32px, 5vw, 72px); flex-wrap: wrap; }
.stem__rv { flex: 1 1 420px; max-width: 640px; }
.stem__plats { flex-direction: column; gap: 18px; }
.stem__plats .plat:first-child { padding-left: 22px; border-left: 2px solid var(--kalk-rand); }
@media (max-width: 720px) {
  .stem__plats { flex-direction: row; width: 100%; }
  .stem__plats .plat:first-child { padding-left: 0; border-left: 0; }
  .stem__plats .plat { padding-right: 0; }
  .stem__plats .plat + .plat { padding-left: 22px; }
}

/* ==================================================== 4 · ZOLDERBADKAMER: a light panel, the words on the left and his
   zolder in Almere on the right: n=59 leads (39:50), under it 67 and 74 upright (3:4) and 66 lying wide (6:5) in
   one row, each inside its focus. */
.schuinte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); grid-template-areas: "tekst fotos";
  gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(24px, 3.4vw, 48px) clamp(22px, 3.4vw, 48px);
  background: var(--kalk-wit); box-shadow: var(--shadow-1); border-radius: 10px;
}
.schuinte__tekst { grid-area: tekst; }
.zolder { grid-area: fotos; display: grid; grid-template-columns: .75fr .75fr 1.2fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zolder li .tegel { aspect-ratio: 3 / 4; }
.zolder .zolder__lead { grid-column: 1 / -1; }
.zolder .zolder__lead .tegel { aspect-ratio: 39 / 50; }
.zolder .zolder__breed .tegel { aspect-ratio: 6 / 5; }   /* 1.2fr wide at the row's height: exactly 6:5 */
@media (max-width: 960px) {
  .schuinte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fotos" "tekst"; }
  .zolder { max-width: 560px; }
}
@media (max-width: 560px) {
  .schuinte { padding: 14px 14px 22px; }
  .zolder { grid-template-columns: 1fr 1fr; gap: 8px; }
  .zolder .zolder__breed { grid-column: 1 / -1; }   /* still 6:5, now the row's full width */
  .schuinte__tekst { padding: 0 4px; }
}

/* ==================================================== ONE BREATH: the owner's own words */
.eigen { background: var(--dakpan); color: var(--kalk-wit); padding: clamp(40px, 4.6vw, 64px) 0; }
.eigen__rij { display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 20px clamp(24px, 3.6vw, 52px); }
.eigen__mark { width: clamp(56px, 5vw, 76px); height: auto; }
.eigen__q { margin: 0; }
.eigen__q p {
  margin: 0; font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em;
  quotes: "\201C" "\201D"; text-wrap: balance;
}
.eigen__q p::before { content: open-quote; }
.eigen__q p::after { content: close-quote; }
.eigen__na p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--gips-licht); max-width: 30em; }
.eigen__na .eigen__wie { margin-bottom: 6px; font-family: var(--f-tech); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--kalk-wit); }
@media (max-width: 960px) {
  .eigen__rij { grid-template-columns: auto minmax(0, 1fr); }
  .eigen__na { grid-column: 1 / -1; }
}

/* ==================================================== 5 · TOILET VERVANGEN: under a heavy rule, the lead beside three
   toilets of one size, all square (inside the focus of n=33, 72 and 25) and top-aligned with the lead, then the
   prose with its framed list beside it */
.wc { border-top: 6px solid var(--dakpan); padding-top: clamp(24px, 2.8vw, 36px); }
.wc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); grid-template-areas: "lead fotos" "antw antw"; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.wc__lead-tekst { grid-area: lead; margin-top: -.3em; margin-bottom: clamp(28px, 3.4vw, 44px); }
.wc__fotos { grid-area: fotos; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 0; list-style: none; }
.wc__fotos .tegel { aspect-ratio: 1 / 1; }
.wc__antw { grid-area: antw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "naad naad" "proza kader"; gap: 0 clamp(28px, 4vw, 56px); align-items: start; }
.wc__antw .naad { grid-area: naad; }
.wc__proza { grid-area: proza; }
.wc__kader { grid-area: kader; padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px) 10px; border: 2px solid var(--lood); border-radius: 10px; background: var(--kalk-wit); }
.wc__kaderkop { margin: 0 0 8px !important; font-family: var(--f-tech); font-weight: 700; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan) !important; }
.wc__kader .punten { margin-bottom: .6em; }
.wc__kader .punten li { border-top: 1px solid var(--kalk-diep); }
.wc__kader .punten li:first-child { border-top: 0; }
@media (max-width: 860px) {
  .wc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fotos" "lead" "antw"; }
  .wc__fotos { max-width: 620px; margin-bottom: clamp(22px, 3vw, 30px); }
  .wc__lead-tekst { margin-bottom: clamp(20px, 2.2vw, 28px); }
  .wc__antw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "naad" "proza" "kader"; }
  .wc__kader { margin-top: 22px; }
}
@media (max-width: 560px) {
  /* three squares across a phone are too small for their labels: one size still, as a row you swipe */
  .wc__fotos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(-1 * var(--gut)); padding-right: var(--gut);
  }
  .wc__fotos::-webkit-scrollbar { display: none; }
  .wc__fotos li { scroll-snap-align: start; }
}

/* ==================================================== ONE BREATH: the brands (the homepage's strip, as it stands there) */
.merkband { background: var(--kalk-wit); border-top: 1px solid var(--kalk-diep); border-bottom: 1px solid var(--kalk-diep); padding: clamp(30px, 3.4vw, 44px) 0; }
.merkband .merken { margin: 0; }

/* ==================================================== PROJECTEN: one photo large and five beside it as tiles of one
   size, the last the "+N"; the whole width, a calm block. script.js fills the six cells (--plekken) from the photos
   behind the tile. The way in as a band under it, across the same width. The operator picked this of three layouts
   (2026-10-02: "make these project sections a bit more normal"); before, the large photo stood alone at 470 px with
   small thumbnails under it and the way in beside it, at its foot. */
.proj__lead { margin: 0 0 clamp(24px, 2.8vw, 36px); max-width: 40em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.62; color: var(--lood); }
.proj { margin: 0; padding: 0; list-style: none; }
.proj__lead-tegel { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 12px; }
.proj__lead-tegel .plek__groot { position: relative; min-height: 0; }
.proj__lead-tegel .plek__groot img { position: absolute; inset: 0; }   /* the tiles beside it set its height, not the picture */
.proj .plek__duimen { --plekken: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.proj .plek__duimen > li { min-width: 0; }
/* 5:6, not 4:5: a landscape photo among them (the schilder page's ceiling) keeps its focus whole in it too */
.proj .plek__duimen .duim { width: 100%; height: auto; aspect-ratio: 5 / 6; border-radius: var(--r); box-shadow: var(--shadow-1); }
.proj .plek__duimen .duim:hover { box-shadow: 0 0 0 2px var(--dakpan), var(--shadow-1); transform: none; }
.proj__in {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-top: clamp(16px, 2vw, 24px); padding: clamp(16px, 1.8vw, 22px);
  background: var(--lood); color: var(--kalk-wit); border-radius: var(--r);
}
.proj__in-vraag { margin: 0; font-weight: 800; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.12; letter-spacing: -.02em; }
.proj__in-txt { margin: 0; font-size: 15px; line-height: 1.45; color: var(--gips-licht); }
.proj__in .btn { min-height: 46px; padding: 0 14px; font-size: 15px; }
@media (min-width: 761px) {
  /* the band: the question and its line on the left, the button on the right */
  .proj__in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "vraag knop" "txt knop";
    column-gap: 32px; row-gap: 6px; align-items: center; padding: 24px 28px;
  }
  .proj__in-vraag { grid-area: vraag; }
  .proj__in-txt { grid-area: txt; }
  .proj__in .btn { grid-area: knop; min-width: 230px; }
}
@media (max-width: 760px) {
  /* on a phone the large photo stands alone at 4:5, the tiles three across under it */
  .proj__lead-tegel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .proj__lead-tegel .plek__groot { aspect-ratio: 4 / 5; }
  .proj .plek__duimen { gap: 8px; }
}

/* ==================================================== ONE BREATH: where he works */
.lint { background: var(--gips); color: var(--lood); padding: clamp(40px, 4.6vw, 64px) 0; }
.lint__voor {
  margin: 0 0 12px; font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dakpan-diep);
}
.lint__groot { margin: 0; font-weight: 800; font-size: clamp(25px, 3vw, 42px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.lint__groot span { white-space: nowrap; }
.lint__groot span:not(:last-child)::after { content: " · "; color: var(--dakpan); white-space: pre; }
.lint__na { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
.lint__na a { margin-left: 6px; font-weight: 700; color: var(--lood); text-decoration: underline; text-decoration-color: var(--dakpan); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.lint__na a:hover { color: var(--dakpan-diep); }

/* ==================================================== VRAGEN: every answer open, for whoever scrolled here */
.vr { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 40px) clamp(32px, 4.4vw, 64px); }
.vr__item { border-top: 2px solid var(--lood); padding-top: 16px; }
.vr__q { margin: 0 0 8px; font-weight: 700; font-size: clamp(18.5px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -.01em; color: var(--lood); text-wrap: balance; }
.vr__item p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--lood); }
.vr__item a { color: var(--lood); text-decoration-color: var(--dakpan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vr__sluit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(36px, 4vw, 56px); }
.vr__sluit p { margin: 0; font-weight: 700; font-size: 18px; }
@media (max-width: 760px) {
  .vr { grid-template-columns: minmax(0, 1fr); }
}