/* =========================================================================
   VERSIE 2 · "Wat kunnen wij voor u schilderen?"

   Een andere compositie, geen andere kleurstelling (LESSONS regel 24).

   V1 ordent op HOOGTE: de afdaling door het huis, langs de vijf vakken
   waarin de bron zijn foto's heeft gegroepeerd, met een duimstok als
   maatlat en het archief als hoofdmoot. V2 ordent op DIENST, en die vraag
   stelt de bron letterlijk: "Wat kunnen wij voor u schilderen?", gevolgd
   door zeven werkzaamheden. Die zeven zijn hier de ruggengraat. Het beeld
   staat niet voorop maar erachter: één brede band onder de kop en een
   filmstrook met resultaten. Twee van de zeven zijn geen schilderwerk, en
   dat is in deze versie juist het punt.

   Het eerste scherm is een diepgroen vlak met de vraag erin; pas onder de
   fotoband slaat de pagina om naar papier. Dat is de eerste opzet van deze
   versie geweest, tot de botsingsmeter hem op 87 procent zette op vlak,
   accent, kopletter en hero-vorm tegelijk. Toen is niet de meter maar dit
   ontwerp herzien: het lichte eerste scherm werd groen, het groene accent
   werd de terracotta uit dezelfde kleurenwaaier in hun logo, en de letter
   werd Bitter.

   TOKENS, gemeten tegen élk vlak waarop ze kunnen landen:
     ink    #1b1a18 op papier 15,57 · papier2 13,99 · kaart 17,39
     muted  #5c574f op papier  6,42 · papier2  5,76 · kaart  7,16
     terra  #8e2f3d op papier  7,17 · papier2  6,44 · kaart  8,00
     wit op terra 8,00 · wit op het diepe vlak 12,27
     onDeep #e9efe9 op diep 10,51 · onDeepDim #b9c9bf 7,11 · zand #e8dcc0 9,01
   ========================================================================= */

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/bitter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/worksans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/worksans-600.woff2") format("woff2");
}

#version-v2 {
  --paper: #f5f2ed;
  --paper-2: #ebe6dd;
  --card: #ffffff;
  --deep: #1a3b30;

  --ink: #1b1a18;
  --muted: #5c574f;
  --terra: #8e2f3d;
  --terra-hover: #7d2836;
  --on-deep: #e9efe9;
  --on-deep-dim: #b9c9bf;
  --sand: #e8dcc0;

  --line: #ddd6ca;

  --serif: "Bitter", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
  --gut: clamp(16px, 4.2vw, 56px);
  --maxw: 1180px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
}

#version-v2 ::selection { background: var(--terra); color: #ffffff; }

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

.v2-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--terra);
}

/* ---------- kop: plakkend, op het diepe vlak, gestapeld woordmerk --------
   V1 heeft een meescrollende kop met het woordmerk op één regel. Deze plakt,
   staat op de kleur van de hero, en zet de naam boven de ondertitel.
   ------------------------------------------------------------------------- */

.v2-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--deep);
  color: var(--on-deep);
  border-bottom: 1px solid rgba(233, 239, 233, 0.16);
}

.v2-top__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 12px; }

.v2-brand { text-decoration: none; flex: none; }
.v2-brand strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.14; letter-spacing: -0.01em; color: #ffffff; }
.v2-brand span { display: block; font-size: 12.5px; color: var(--on-deep-dim); }

.v2-menu { display: flex; gap: 4px 22px; }

.v2-menu a {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-deep);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.v2-menu a:hover { color: var(--sand); border-bottom-color: var(--sand); }

/* In een gesloten <details> landt focus niet, dus de navigatie krijgt een
   expliciete ring bovenop de globale regel. */
.v2-menu a:focus { outline: 3px solid #ffffff; outline-offset: 2px; }

html:not(.has-js) #version-v2 .v2-top__inner .burger-nav { width: 100%; }

/* ---------- hero: alleen de vraag, op kleur ------------------------------
   Geen beeld in het eerste scherm. De vraag is van hen, het antwoord staat
   eronder, en de foto komt pas als de vraag gesteld is.
   ------------------------------------------------------------------------- */

.v2-hero {
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(40px, 6.8vw, 96px) clamp(38px, 5.6vw, 82px);
}

.v2-hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 15ch;
  color: #ffffff;
}

.v2-hero__lead {
  margin-top: 22px;
  max-width: 50ch;
  font-size: clamp(16.5px, 1.5vw, 19.5px);
  color: var(--on-deep-dim);
}

.v2-hero__lead b { color: var(--sand); font-weight: 600; }

.v2-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ffffff;
  color: var(--deep);          /* diepgroen op wit, 12,27 */
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.v2-btn:hover { background: var(--sand); border-color: var(--sand); }

.v2-btn--ghost { background: transparent; color: #ffffff; border-color: rgba(233, 239, 233, 0.45); }
.v2-btn--ghost:hover { background: rgba(233, 239, 233, 0.12); border-color: #ffffff; }

.v2-hero .v2-btn:focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 6px rgba(26, 59, 48, 0.92); }

/* De brede band. Staat BUITEN de container in de markup, niet met een
   100vw-truc: een negatieve marge op 100vw telt de schuifbalk mee en dat is
   precies hoe een pagina op een gewone desktop opzij gaat schuiven. */
.v2-band { width: 100%; background: var(--deep); }

.v2-band img {
  width: 100%;
  height: clamp(160px, 30vw, 380px);
  object-fit: cover;
  object-position: center 58%;
  background: var(--paper-2);
}

/* ---------- de zeven ------------------------------------------------------ */

.v2-seven { padding-block: clamp(44px, 6vw, 88px); }

.v2-seven__h { max-width: 40ch; margin-bottom: clamp(22px, 3vw, 38px); }

.v2-h2 {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3.8vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.v2-row {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 9fr) 104px;
  gap: 12px clamp(18px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(16px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}

.v2-row:last-of-type { border-bottom: 1px solid var(--line); }

/* Bewust géén flexrij. In een flexrij is de titel één ondeelbaar item: past
   hij niet naast het nummer, dan springt de hele titel naar de volgende regel
   en blijft het nummer alleen achter. Bij "Plaatsen van enkel en dubbelglas"
   gebeurde dat ook echt, en die regel zag er daardoor anders uit dan de zes
   andere. Inline laten lopen doet wat je wilt: het nummer blijft staan en de
   titel breekt binnen zichzelf af. */
.v2-row__name { min-width: 0; }

.v2-row__n {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--terra);
  margin-right: 9px;   /* plus de echte spatie die in de markup staat */
}

.v2-row__t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.v2-row__say { color: var(--muted); min-width: 0; }

.v2-row__fig { min-width: 0; }

.v2-row__fig img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--paper-2);
}

/* De twee werkzaamheden die geen schilderwerk zijn, krijgen een merkteken.
   Dat is geen versiering: het is het enige inhoudelijke onderscheid dat in
   die lijst van zeven verstopt zit. */
.v2-row--other { background: var(--paper-2); }

/* Blok, zodat het merkteken altijd op zijn eigen regel begint, en fit-content
   zodat de pil om zijn eigen tekst blijft sluiten in plaats van de hele kolom
   te vullen. */
.v2-flag {
  display: block;
  width: fit-content;
  margin-top: 9px;
  padding: 3px 10px;
  border: 1px solid var(--terra);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra);
  white-space: nowrap;
}

.v2-seven__note { margin-top: 22px; color: var(--muted); max-width: 58ch; }

/* ---------- resultaat: een filmstrook ------------------------------------
   Eén rij die opzij schuift in plaats van een raster. min-width: 0 en
   max-width: 100% op de rail, anders is het de rail zelf die de pagina opzij
   duwt (LESSONS regel 10).
   ------------------------------------------------------------------------- */

.v2-res { padding-bottom: clamp(44px, 6vw, 88px); }

.v2-res__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-top: clamp(30px, 4vw, 54px); border-top: 2px solid var(--ink); }
.v2-res__h h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(23px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.14; }
.v2-res__h p { color: var(--muted); }

.v2-rail {
  margin-top: clamp(20px, 2.6vw, 30px);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}

.v2-shot { flex: 0 0 auto; width: clamp(200px, 27vw, 290px); scroll-snap-align: start; }

.v2-shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--paper-2);
}

.v2-shot figcaption { margin-top: 9px; font-size: 14.5px; color: var(--muted); }

/* ---------- het bedrijf ---------------------------------------------------
   Opent met een dikke terracotta regel en de zin zelf, zonder label erboven.
   De kleur van de hero komt hier bewust niet terug: die hoort bij het eerste
   scherm en nergens anders.
   ------------------------------------------------------------------------- */

.v2-firm { padding-block: clamp(40px, 5.4vw, 80px); }
.v2-firm__inner { border-top: 4px solid var(--terra); padding-top: clamp(22px, 3vw, 36px); }

.v2-firm__say {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(23px, 3.6vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.v2-firm__body { margin-top: 20px; color: var(--muted); max-width: 54ch; }
.v2-firm__body p + p { margin-top: 12px; }

.v2-social { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }

.v2-social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.v2-social a:hover { border-color: var(--terra); color: var(--terra); }

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

.v2-contact { padding-bottom: clamp(40px, 5.4vw, 80px); }

.v2-contact__h { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.02em; line-height: 1.14; }
.v2-contact__lead { margin-top: 14px; color: var(--muted); max-width: 46ch; }

.v2-lines { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 2px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--line); }

.v2-line { min-width: 0; background: var(--card); padding: 18px 20px; text-decoration: none; display: block; }
.v2-line:hover { background: var(--paper-2); }
.v2-line__k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.v2-line__v { display: block; margin-top: 5px; font-family: var(--serif); font-weight: 700; font-size: clamp(16.5px, 1.9vw, 20px); letter-spacing: -0.015em; word-break: break-word; }
.v2-line address { font-style: normal; }

/* ---------- voet ----------------------------------------------------------- */

.v2-foot { border-top: 1px solid var(--line); padding-block: 22px; }

.v2-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--muted);
}

.v2-foot__inner a { color: var(--ink); font-weight: 600; }

/* ---------- hamburger in deze versie --------------------------------------- */

#version-v2 .burger-toggle { border-color: rgba(233, 239, 233, 0.42); }

@media (max-width: 900px) {
  .has-js #version-v2 .burger-nav[open] > nav {
    background: var(--deep);
    border-color: rgba(233, 239, 233, 0.3);
    box-shadow: 0 18px 40px rgba(9, 24, 19, 0.4);
  }
}

/* ---------- beweging -------------------------------------------------------- */

.js #version-v2 [data-rise] { opacity: 0; transform: translateY(14px); }

.js #version-v2 [data-rise].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

@media (max-width: 860px) {
  .v2-row { grid-template-columns: minmax(0, 1fr) 84px; align-items: start; }
  .v2-row__say { grid-column: 1; }
  .v2-row__fig { grid-row: span 2; }
  .v2-row--other { padding-inline: 14px; border-radius: 4px; }
}

@media (max-width: 520px) {
  .v2-row { grid-template-columns: minmax(0, 1fr); }
  .v2-row__fig { grid-row: auto; max-width: 130px; }
}