/* =========================================================================
   VERSIE 1 · "Van oud naar nieuw"
   Art direction: het merk van de klant zelf, zwart met het gele blokje uit
   zijn logo, in de signaaltaal van de bouwplaats. Oswald gecondenseerd voor
   koppen, Inter voor lopende tekst.

   TOKENS, allemaal gemeten voordat een component ze gebruikte (regel 1 en 2).
   Het merkgeel is uit het logo bemonsterd: #dbd10d.
     ink   op wit 18,81 · paper2 16,87 · paper3 15,23 · GEEL 11,77
     muted op wit  7,97 · paper2  7,15 · paper3  6,45
     onDark op ink 16,87 · ink2 14,79
     dim    op ink  8,47 · ink2  7,42
     geel   op ink 11,77 · ink2 10,31

   HET GEEL IS UITSLUITEND VULLING. Op wit haalt het 1,60 en zelfs een
   donkerder afgeleide blijft op 3,62 steken: geel is als letterkleur op een
   licht vlak niet te redden zonder het merk kapot te maken. Dus geel als
   vlak, blok en markering, en op donker mag het wel tekst zijn (11,77).
   Alles gescopet onder #version-v1.
   ========================================================================= */

#version-v1 {
  --paper: #ffffff;
  --paper-2: #f2f3ef;
  --paper-3: #e6e8e2;

  --ink: #101211;
  --ink-2: #1c201d;

  --muted: #4a534d;
  --on-dark: #f2f3ef;
  --on-dark-dim: #a8b0aa;

  --yellow: #dbd10d;   /* vulling, draagt --ink · tekst alleen op donker */
  --steel: #3f4a44;    /* vulling, draagt wit (9,23) */

  --line: #d7dad3;
  --line-dark: rgba(242, 243, 239, 0.22);

  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --gut: clamp(18px, 4.4vw, 60px);
  --maxw: 1240px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

#version-v1 ::selection { background: var(--yellow); color: var(--ink); }

.v1-shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* ---------- gedeelde tekststijlen ------------------------------------- */

.v1-h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.v1-h2--invert { color: var(--on-dark); }

.v1-kicker {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Het gele blokje uit het logo, als markering voor een kicker. Vulling, geen
   letterkleur. */
.v1-kicker::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  background: var(--yellow);
}

.v1-lead { font-size: clamp(15.5px, 1.5vw, 18px); color: var(--muted); max-width: 62ch; }
.v1-note { margin-top: 14px; font-size: 14.5px; color: var(--muted); max-width: 60ch; }

/* ---------- knoppen ---------------------------------------------------- */

.v1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--yellow);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease;
}

.v1-btn svg { width: 19px; height: 19px; flex: none; }
.v1-btn:hover { background: #c4bb0b; border-color: #c4bb0b; }
.v1-btn:active { transform: translateY(1px); }

.v1-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.v1-btn--ghost:hover { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }

.v1-btn--dark { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.v1-btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* ---------- navigatie -------------------------------------------------- */

.v1-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--on-dark);
}

.v1-nav__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  padding-block: 10px;
}

.v1-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }

/* De twee blokjes uit zijn eigen logo, geel en grijs, in dezelfde trapstand. */
.v1-logo__marks { display: block; width: 34px; height: 34px; position: relative; flex: none; }
.v1-logo__marks i { position: absolute; display: block; width: 19px; height: 19px; }
.v1-logo__marks i:first-child { top: 0; left: 0; background: var(--yellow); }
.v1-logo__marks i:last-child { bottom: 0; right: 0; background: #b2b7b3; }

.v1-logo__txt strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-dark);
  line-height: 1.05;
}

.v1-logo__txt span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.v1-nav__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }

.v1-nav__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.v1-nav__links a:hover { border-bottom-color: var(--yellow); }

.v1-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 44px;
  padding: 9px 18px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.v1-callbtn svg { width: 17px; height: 17px; }
.v1-callbtn:hover { background: #c4bb0b; }

/* ---------- hero ------------------------------------------------------- */

.v1-hero { padding-block: clamp(38px, 6vw, 76px) clamp(30px, 4vw, 52px); }

.v1-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.v1-hero__copy { min-width: 0; }

.v1-hero__title { margin-bottom: 20px; }

.v1-hero__line1 {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 2.1vw, 24px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.v1-hero__line2 {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  /* Niet strakker dan dit. De achtergrondbox van de markering hieronder richt
     zich naar de FONTGROOTTE en niet naar de regelhoogte, dus bij een
     line-height onder 1 schuift het gele vlak van de tweede regel over de
     eerste heen en snijdt "VAN OUD" doormidden. Op 320 liepen de woorden
     daardoor volledig door elkaar. */
  line-height: 1.12;
  letter-spacing: 0.002em;
  text-transform: uppercase;
}

/* Geel als vlak achter de tekst, nooit als letterkleur op wit. */
.v1-hero__line2 em {
  font-style: normal;
  background: var(--yellow);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.02em 0.12em;
}

.v1-hero__lead { margin-bottom: 26px; }

.v1-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.v1-hero__where { font-size: 14px; color: var(--muted); max-width: 46ch; }

.v1-hero__figure { min-width: 0; }
.v1-hero__figure img { width: 100%; height: auto; }

/* ---------- feitenstrook ----------------------------------------------- */

.v1-facts { background: var(--ink); color: var(--on-dark); }

.v1-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(26px, 3.4vw, 42px);
}

.v1-fact { min-width: 0; }

.v1-fact b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1;
  color: var(--yellow);   /* geel op inkt = 11,77 */
}

.v1-fact__small {
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.v1-fact span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--on-dark-dim); }
.v1-fact--wide { grid-column: span 1; }

/* ---------- signature · voor en na ------------------------------------- */

.v1-work { padding-block: clamp(46px, 6.5vw, 92px); }

.v1-work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.v1-work__stage { min-width: 0; }

.v1-viewer {
  position: relative;
  background: var(--paper-3);
  border: 3px solid var(--ink);
}

/* Beide panelen liggen op elkaar; alleen de actieve is zichtbaar. Geen
   clip-path als verborgen staat (regel 7), en zonder JavaScript blijft het
   eerste paneel gewoon staan. */
.v1-viewer__pane { display: block; position: relative; }
.v1-viewer__pane img { width: 100%; height: auto; }

/* Bewust NIET aan de .js klasse gekoppeld. Die stuurt de reveals aan en staat
   bij reduced motion uit; als de kijker eraan hing zou hij dan zijn panelen
   niet meer stapelen, of erger, zouden de reveals aangaan zonder dat iets ze
   ooit onthult (LESSONS regel 8). De kijker zet zijn eigen klasse. */
/* Schakelen met display, niet met opacity. Het inactieve paneel draagt echte
   tekst ("Voor" en "Na"), en een tekstdragend element dat permanent op
   opacity:0 staat is niet te onderscheiden van inhoud die nooit zichtbaar
   wordt: de poort meldde het dan ook als zodanig. De overvloei is geen verlies,
   een directe vergelijking hoort juist niet te vervagen.
   De verhouding 3/4 komt overeen met beide bronfoto's (900x1204 en 900x1199),
   dus object-fit snijdt er vrijwel niets af. */
.is-live .v1-viewer { aspect-ratio: 3 / 4; }
.is-live .v1-viewer__pane { position: absolute; inset: 0; display: none; }
.is-live .v1-viewer__pane img { width: 100%; height: 100%; object-fit: cover; }
.is-live .v1-viewer[data-state="voor"] .v1-viewer__pane[data-pane="voor"],
.is-live .v1-viewer[data-state="na"] .v1-viewer__pane[data-pane="na"] { display: block; }

/* Het label hoort bij zijn eigen foto, niet bij de kijker. Daardoor staat het
   er ook zonder JavaScript, wanneer beide foto's onder elkaar vallen: anders
   ziet die bezoeker twee toiletten zonder te weten welke de oude is. */
.v1-viewer__tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.v1-viewer__pane[data-pane="na"] .v1-viewer__tag { background: var(--yellow); color: var(--ink); }

.v1-viewer__switch { display: none; margin-top: 14px; gap: 0; }
.is-live .v1-viewer__switch { display: flex; }

.v1-viewer__switch button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  padding: 12px 18px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.v1-viewer__switch button + button { border-left: 0; }
.v1-viewer__switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }

.v1-viewer__note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.v1-work__copy { min-width: 0; }
.v1-work__copy .v1-lead { margin-bottom: 26px; }

.v1-steps { display: flex; flex-direction: column; gap: 20px; }

.v1-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.v1-steps li:last-child { border-bottom: 0; padding-bottom: 0; }

.v1-steps__n {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
}

.v1-steps h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.v1-steps p { font-size: 15px; color: var(--muted); }

.v1-steps__shot { grid-column: 2; margin-top: 12px; }
.v1-steps__shot img { width: 100%; max-width: 245px; height: auto; border: 2px solid var(--ink); }

/* ---------- werkzaamheden ---------------------------------------------- */

.v1-services { background: var(--paper-2); padding-block: clamp(46px, 6.5vw, 92px); }
.v1-services__h { margin-bottom: 30px; }

.v1-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.v1-card {
  min-width: 0;
  padding: 24px 22px 22px;
  background: var(--paper);
  border-top: 6px solid var(--ink);
}

.v1-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Het vervangpaar: wat weggaat en wat ervoor in de plaats komt. */
.v1-card__old,
.v1-card__new { font-size: 15px; padding-left: 26px; position: relative; }

.v1-card__old { color: var(--muted); margin-bottom: 6px; }
.v1-card__new { color: var(--ink); font-weight: 600; }

/* Deze twee labels dragen de betekenis van het paar, dus staan ze in de DOM
   en niet in een ::before. Gegenereerde inhoud wordt door de meeste
   schermlezers wel voorgelezen, maar "wel meestal" is geen contract voor
   tekst die het verschil tussen de twee regels uitmaakt. */
.v1-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 2.05;
  text-transform: uppercase;
}

.v1-card__old .v1-tag { color: var(--muted); }
.v1-card__new .v1-tag { color: var(--ink); }

.v1-card__note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

.v1-services__shot img { width: 100%; height: auto; }

/* ---------- riool ------------------------------------------------------ */

.v1-drain { background: var(--ink); color: var(--on-dark); padding-block: clamp(46px, 6.5vw, 92px); }

.v1-drain__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.v1-drain__lead { margin: 16px 0 26px; font-size: clamp(15.5px, 1.5vw, 18px); color: var(--on-dark-dim); max-width: 52ch; }

.v1-drain__list { display: flex; flex-direction: column; gap: 0; }

.v1-drain__list > div { padding: 16px 0; border-top: 1px solid var(--line-dark); }
.v1-drain__list > div:last-child { border-bottom: 1px solid var(--line-dark); }

.v1-drain__list dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow);   /* geel op inkt = 11,77 */
}

.v1-drain__list dd { margin-top: 3px; font-size: 15px; color: var(--on-dark-dim); }

.v1-findings { min-width: 0; background: var(--ink-2); padding: 26px 24px; }

.v1-findings__head {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: 16px;
}

.v1-findings ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; }

.v1-findings li {
  min-width: 0;
  padding-left: 22px;
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.v1-findings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 11px;
  height: 11px;
  background: var(--yellow);
}

/* ---------- cv en onderhoud -------------------------------------------- */

.v1-cv { padding-block: clamp(46px, 6.5vw, 92px); }

.v1-cv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.v1-cv__copy { min-width: 0; }
.v1-cv__copy .v1-lead { margin-top: 14px; }
.v1-cv__copy .v1-btn { margin-top: 22px; }

.v1-spec { min-width: 0; border: 3px solid var(--ink); }

.v1-spec__head {
  padding: 14px 20px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v1-spec table { width: 100%; border-collapse: collapse; }

.v1-spec th,
.v1-spec td {
  padding: 11px 20px;
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.v1-spec th { font-weight: 400; color: var(--muted); width: 52%; }
.v1-spec td { font-weight: 600; }
.v1-spec tr:last-child th, .v1-spec tr:last-child td { border-bottom: 0; }

.v1-spec__note { padding: 14px 20px; font-size: 13px; color: var(--muted); background: var(--paper-2); }

/* ---------- contact ---------------------------------------------------- */

.v1-contact { background: var(--paper-2); padding-block: clamp(46px, 6.5vw, 92px); }

.v1-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.v1-contact .v1-lead { margin-top: 16px; }

.v1-quote {
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--paper);
  border-left: 8px solid var(--yellow);
}

.v1-quote p { font-size: clamp(17px, 1.8vw, 21px); font-style: italic; }

.v1-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.v1-details { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; align-items: start; }
.v1-details__shot { min-width: 0; }
.v1-details__shot img { width: 100%; height: auto; }

.v1-address { min-width: 0; font-style: normal; font-size: 15px; }
.v1-address p + p { margin-top: 12px; }

.v1-address__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.v1-address a { color: var(--ink); font-weight: 600; }
.v1-address__reg { font-size: 13px; color: var(--muted); }

/* ---------- footer ----------------------------------------------------- */

.v1-foot { background: var(--ink); color: var(--on-dark); padding-block: 32px; }

.v1-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: baseline;
  justify-content: space-between;
}

.v1-foot__where { font-size: 14px; color: var(--on-dark-dim); max-width: 60ch; }
.v1-foot__credit { font-size: 14px; color: var(--on-dark); }
.v1-foot__credit a { color: var(--yellow); font-weight: 600; }

/* ---------- reveal ------------------------------------------------------
   Alleen opacity en transform als verborgen staat (regel 7), en de klasse
   .js wordt uitsluitend gezet wanneer beweging gewenst is (regel 8), zodat
   bij motion-uit niets ooit onzichtbaar kan blijven staan.
   ----------------------------------------------------------------------- */

.js [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- breekpunten ------------------------------------------------- */

@media (max-width: 900px) {
  .v1-nav__inner { flex-wrap: wrap; row-gap: 12px; }
  .v1-nav__links { order: 3; width: 100%; margin-left: 0; gap: 2px 16px; }
  .v1-callbtn { margin-left: auto; }
}

@media (max-width: 560px) {
  .v1-nav__links a { font-size: 13px; }
  .v1-logo__txt span { display: none; }
  .v1-hero__actions .v1-btn { width: 100%; }
  .v1-viewer__note { font-size: 12.5px; }
}