/* ============ De subpagina's van Gevelrenovatie Den Haag — de klus-pagina in zijn eigen kleding.
   Gelinkt na de stylesheets van de homepage (checkpoints/st75, via symlinks): die geven de kop, de voet, de knoppen,
   de belbalk, de viewer, het stempel en het label op de foto, Projecten, de vragen en het contactblok. Hier staat
   alleen wat de klus-pagina zelf heeft: de vouw (foto, kaart, formulier), de twee vormen van de hoofdsectie
   (genummerd en secties), de andere diensten en het werkgebied. Kleuren en letters zijn die van de homepage:
   kalkwit, gevelgroen, goudgeel voor wat je aanklikt, Playfair Display, Inter en Caveat. De afgeknipte hoek op kaarten
   en knoppen is de huisstijl; geen schuine fotoranden, en op de telefoon geen schuine lijnen. ============ */

.sp-pagina {
  --sp-hoek: var(--hoek, 2.4rem);
  --sp-knip: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-hoek)), calc(100% - var(--sp-hoek)) 100%, 0 100%);
  --sp-knip-klein: polygon(0 0, 100% 0, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, 0 100%);
  --sp-sectie: clamp(3.6rem, 7vw, 6rem);
}

/* de kleine letter van deze pagina's: kapitaaltjes nooit klein of bleek */
.sp-kicker {
  margin: 0 0 1rem; font: 600 .86rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--groen-600);
}

/* ═══════════════ DE VOUW — foto, kaart, het formulier ═══════════════ */
.sp-vouw { position: relative; background: var(--kalk-100); padding-bottom: clamp(.5rem, 1.5vw, 1.2rem); }
.sp-band { position: relative; height: clamp(360px, 33vw, 480px); overflow: hidden; background: var(--groen-900); }
.sp-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.sp-band .foto-open { z-index: 1; }
/* stempel en label op de breedte van de tekst, boven de kaart (die over de voet van de foto ligt) */
.sp-band__rand {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--wrap); padding-inline: var(--pad); pointer-events: none;
}
.sp-band__rand > * { pointer-events: auto; }
.sp-band__rand .fotolabel { top: 1.5rem; bottom: auto; left: var(--pad); }
.sp-band__rand .zegel { top: 1.3rem; right: var(--pad); width: 92px; height: 92px; }
.sp-band__teken, .sp-menu { display: none; }

.sp-vel { position: relative; z-index: 3; margin-top: calc(-1 * clamp(120px, 11vw, 168px)); filter: drop-shadow(0 18px 38px rgba(23, 29, 38, .16)); }
.sp-kaart { background: var(--kalk-000); clip-path: var(--sp-knip); }
.sp-kaart__boven {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.2rem clamp(2rem, 4vw, 3.6rem);
  align-items: end; padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.4rem, 3vw, 2.8rem) clamp(1.5rem, 2.4vw, 2.1rem);
}
.sp-kruimel ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; margin: 0 0 .85rem; font-size: 1rem; line-height: 1.4; color: var(--lei-600); }
.sp-kruimel li + li::before { content: "›"; margin-right: .55rem; color: var(--groen-600); }
.sp-kruimel a { color: var(--groen-700); text-decoration: underline; text-decoration-color: var(--kalk-300); text-underline-offset: 4px; }
.sp-kruimel a:hover { text-decoration-color: var(--groen-600); }
.sp-kruimel [aria-current] { color: var(--lei-900); font-weight: 500; }
.sp-h1 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 3.5vw, 3.25rem); line-height: 1.06;
  letter-spacing: -.015em; color: var(--lei-900); text-wrap: balance;
}
.sp-h1 em { font-style: italic; font-weight: 500; color: var(--groen-600); }
.sp-lede { margin: 0 0 .3rem; font-size: var(--t-tekst); line-height: 1.6; color: var(--lei-900); text-wrap: pretty; }

/* ── het formulier: één vraag tegelijk; alle stappen in één cel, zodat de kaart nooit verspringt ── */
.sp-vorm { position: relative; --vp: clamp(1.4rem, 3vw, 2.8rem); border-top: 1px solid var(--kalk-300); color: var(--lei-900); }
.sp-vorm__kop {
  position: absolute; z-index: 3; top: 1.35rem; left: var(--vp); display: flex; align-items: center; gap: .9rem;
}
.sp-vorm__tel { margin: 0; font: 600 .86rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--groen-600); white-space: nowrap; }
.sp-vorm__tel b { font-weight: 700; color: var(--groen-900); }
.sp-vorm__seg { display: flex; gap: 4px; }
.sp-vorm__seg i { display: block; width: 18px; height: 3px; background: var(--kalk-300); transition: background-color .2s, width .2s; }
.sp-vorm__seg i.is-af { background: var(--groen-600); }
.sp-vorm__seg i.is-nu { width: 30px; background: var(--bak-600); }
.sp-terug {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .7rem 0 .55rem; margin-left: .2rem;
  border: 1px solid var(--kalk-300); background: var(--kalk-000); color: var(--groen-700); cursor: pointer;
  font: 600 .95rem/1 var(--sans);
}
.sp-terug .ico { width: 16px; height: 16px; }
.sp-terug:hover { border-color: var(--groen-600); }
.sp-terug[hidden] { display: none; }

.sp-vorm__stage { display: grid; }
.sp-stap {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); min-height: 19rem;
  visibility: hidden; margin: 0; border: 0; padding: 0; min-width: 0;
}
.sp-stap.is-nu { visibility: visible; }
.sp-q { display: flex; flex-direction: column; padding: 4.3rem var(--vp) 1.6rem; min-width: 0; }
.sp-vraag {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.15;
  letter-spacing: -.01em; color: var(--lei-900); outline: none; text-wrap: balance;
}
.sp-vraag .tel-inline { white-space: nowrap; }
.sp-direct { margin-top: auto; padding-top: 1.4rem; }
.sp-direct__zin { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.35; color: var(--lei-600); }
.sp-direct__knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-rond {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; text-decoration: none;
  font: 600 .98rem/1 var(--sans); border: 1px solid var(--kalk-300); background: var(--kalk-000); color: var(--groen-800);
  clip-path: var(--sp-knip-klein); transition: border-color .15s, background-color .15s;
}
.sp-rond:hover { border-color: var(--groen-600); background: var(--kalk-100); }
.sp-rond--bel { background: var(--bak-600); border-color: var(--bak-600); color: var(--groen-900); }
.sp-rond--bel:hover { background: var(--bak-700); border-color: var(--bak-700); }

/* de antwoorden: tegels op het kalkvlak; de tegel die naar bellen leidt staat al in het groen, met de telefoon */
.sp-opties { display: grid; gap: 1px; background: var(--kalk-300); border-left: 1px solid var(--kalk-300); }
.sp-opties--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.sp-opties--3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.sp-optie {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.4rem 1.1rem; background: var(--kalk-100); cursor: pointer; min-height: 5.2rem;
  transition: background-color .15s, color .15s;
}
.sp-opties--3 .sp-optie { flex-direction: row; align-items: center; }
.sp-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sp-optie__w { font: 600 1.08rem/1.35 var(--sans); color: var(--lei-900); }
.sp-optie__pijl { flex: none; align-self: flex-end; width: 22px; height: 22px; color: var(--groen-700); transition: transform .15s; }
.sp-opties--3 .sp-optie__pijl { align-self: center; }
.sp-optie:hover { background: var(--kalk-200); }
.sp-optie:hover .sp-optie__pijl { transform: translateX(4px); }
.sp-optie:has(input:focus-visible) { outline: 2.5px solid var(--geel-tekst, #7E5A0A); outline-offset: -3px; }
.sp-optie:has(input:checked) { background: var(--groen-700); }
.sp-optie:has(input:checked) .sp-optie__w, .sp-optie:has(input:checked) .sp-optie__pijl { color: var(--kalk-000); }
.sp-optie[data-bel] { background: var(--groen-800); }
.sp-optie[data-bel] .sp-optie__w, .sp-optie[data-bel] .sp-optie__pijl { color: var(--kalk-000); }
.sp-optie[data-bel]:hover { background: var(--groen-900); }
.sp-optie[data-bel]:hover .sp-optie__pijl { transform: none; }

/* de belstap: de zin groot links, rechts het donkere vlak met de twee knoppen */
.sp-bel { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 1.8rem 2rem; background: var(--groen-800); color: var(--kalk-100); }
.sp-bel__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }
.sp-bel__foto { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--kalk-100); }
.sp-bel__foto .ico { flex: none; width: 22px; height: 22px; margin-top: .05em; color: var(--bak-400); }
.sp-bel__foto b { color: var(--kalk-000); }

/* de berichtstap */
.sp-mee { margin: 1rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--lei-600); }
.sp-mee span { display: block; }
.sp-mee b { font-weight: 600; color: var(--lei-900); }
.sp-velden { display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem var(--vp) 1.3rem 1.6rem; background: var(--kalk-100); border-left: 1px solid var(--kalk-300); }
.sp-veld { display: flex; flex-direction: column; gap: .35rem; }
.sp-veld > span { font: 600 .95rem/1.3 var(--sans); color: var(--lei-900); }
.sp-veld em { font-style: normal; font-weight: 500; color: var(--lei-600); }
.sp-veld em[hidden] { display: none; }
.sp-veld input, .sp-veld textarea {
  width: 100%; padding: .7rem .85rem; font: 400 1rem/1.4 var(--sans); color: var(--lei-900);
  background: var(--kalk-000); border: 1px solid var(--kalk-300); border-bottom: 2px solid var(--groen-600); border-radius: 0;
}
.sp-veld textarea { resize: vertical; min-height: 4.6rem; }
.sp-veld input:focus, .sp-veld textarea:focus { outline: none; border-color: var(--groen-600); border-bottom-color: var(--bak-600); }
.sp-verzend { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .2rem; }
.sp-nw { white-space: nowrap; }
.sp-verzend__voet { margin: 0; flex: 1 1 14rem; font-size: 1rem; line-height: 1.4; color: var(--lei-600); }

/* dank */
.sp-dank { display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 1.6rem 2rem; background: var(--kalk-100); border-left: 1px solid var(--kalk-300); }
.sp-dank p { margin: 0; font-size: var(--t-tekst); line-height: 1.55; }
.sp-dank__link { color: var(--groen-700); font-weight: 600; text-underline-offset: 3px; }

/* ═══════════════ GENUMMERD — het werk in stappen (SAL's werkwijze x1) ═══════════════ */
.sp-route { background: var(--kalk-100); padding: 0 0 var(--sp-sectie); }
.sp-route__kop {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.2rem clamp(2rem, 5vw, 4.5rem);
  align-items: end; padding: var(--sp-sectie) 0 clamp(2rem, 3.4vw, 2.8rem); border-bottom: 1px solid var(--kalk-300);
  margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.sp-route__h { margin: 0; }
.sp-route__lead { margin: 0; font-size: clamp(1.18rem, 1.5vw, 1.34rem); line-height: 1.55; color: var(--lei-900); text-wrap: pretty; }
.sp-route__stappen { position: relative; }
.sp-halte {
  position: relative; display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(1.4rem, 3vw, 3rem);
  padding-bottom: clamp(2.8rem, 4.6vw, 4rem);
}
.sp-halte::before {
  content: ""; position: absolute; left: 2.1rem; top: 4.2rem; bottom: 0; width: 2px; margin-left: -1px; background: var(--kalk-300);
}
.sp-halte__n {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 4.2rem; height: 4.2rem; display: grid; place-items: center;
  font: 600 2rem/1 var(--serif); color: var(--kalk-000); background: var(--groen-800); clip-path: var(--sp-knip-klein);
}
.sp-halte__tekst { grid-column: 2; padding-top: .55rem; min-width: 0; }
.sp-halte__h { margin: 0 0 .85rem; font: 600 clamp(1.45rem, 2vw, 1.8rem)/1.2 var(--serif); color: var(--lei-900); text-wrap: balance; }
.sp-halte__woorden > p { margin: 0 0 .9em; font-size: var(--t-tekst); line-height: 1.65; color: var(--lei-900); text-wrap: pretty; }
.sp-halte__kant { grid-column: 3; padding-top: .55rem; display: grid; gap: 1rem; align-content: start; min-width: 0; }
.sp-halte--kaal .sp-halte__tekst { grid-column: 2 / 4; max-width: 46rem; }
.sp-lijst { margin: .2rem 0 1rem; }
.sp-lijst li { font-size: var(--t-tekst); }

/* een zin apart: de gouden rand van de homepage, Playfair; spreekt Roy zelf, dan zijn naam in zijn hand */
.sp-noot {
  margin: 1.4rem 0 0; padding: .2rem 0 .2rem 1.3rem; border-left: 4px solid var(--bak-600);
  font: 500 clamp(1.25rem, 1.7vw, 1.45rem)/1.4 var(--serif); color: var(--lei-900);
}
blockquote.sp-noot p { margin: 0; }
.sp-noot__wie { margin-top: .35rem; font: 600 1.75rem/1 var(--hand); color: var(--groen-700); }

/* de slotkaart: het donkere groen van de homepage, de afgeknipte hoek, de twee knoppen */
.sp-slot {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem 2.4rem; align-items: center;
  margin-left: calc(4.2rem + clamp(1.4rem, 3vw, 3rem)); padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem);
  background: var(--groen-800); color: var(--kalk-100); clip-path: var(--sp-knip);
}
.sp-slot__h { margin: 0 0 .5rem; font: 600 clamp(1.45rem, 2vw, 1.8rem)/1.2 var(--serif); color: var(--kalk-000); }
.sp-slot__tekst p { margin: 0; font-size: var(--t-tekst); line-height: 1.55; color: var(--kalk-100); }
.sp-slot__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }
.sp-slot .tel-inline { color: var(--bak-400); }

/* ── een foto van het werk: het stempel erop, plaats en datum eronder (klein) of erop (groot) ── */
.sp-foto { margin: 0; min-width: 0; }
.sp-foto__vak { position: relative; aspect-ratio: var(--asp, 3 / 2); overflow: hidden; background: var(--kalk-300); }
.sp-foto__vak img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sp-foto__vak:hover img { transform: scale(1.03); }
.sp-foto .zegel { top: 10px; right: 10px; width: 64px; height: 64px; }
.sp-foto--groot .zegel { top: 14px; right: 14px; width: 80px; height: 80px; }
.sp-foto__label { display: flex; align-items: flex-start; gap: .45rem; margin-top: .6rem; font: 500 1rem/1.35 var(--serif); color: var(--lei-600); }
.sp-foto__label::before {
  content: ""; flex: none; width: 1em; height: 1em; margin-top: .14em; background: var(--groen-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ═══════════════ SECTIES — vier delen met SAL's opmaak (De Zaanse Schilder's svb-delen) ═══════════════ */
.sp-delen { background: var(--kalk-100); overflow: clip; }
.sp-delen__grid { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); column-gap: clamp(2.4rem, 5vw, 5rem); }
.sp-delen__kant { position: relative; z-index: 1; }
.sp-delen__vast { position: sticky; top: calc(var(--hdr-h, 72px) + 1.6rem); padding-top: var(--sp-sectie); padding-bottom: 2rem; }
.sp-inhoud { counter-reset: none; border-bottom: 1px solid var(--kalk-300); }
.sp-inhoud a {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .4rem; padding: .75rem 0; border-top: 1px solid var(--kalk-300);
  text-decoration: none; font-size: 1rem; line-height: 1.35; color: var(--lei-600); transition: color .15s;
}
.sp-inhoud__n { font: 600 1rem/1.35 var(--serif); color: var(--groen-600); }
.sp-inhoud a:hover { color: var(--lei-900); }
.sp-inhoud a.is-nu { color: var(--lei-900); font-weight: 600; }
.sp-inhoud a.is-nu .sp-inhoud__n { color: var(--geel-tekst, #7E5A0A); }
.sp-delen__knoppen { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }
.sp-delen__knoppen .btn { justify-content: flex-start; }

.sp-deel { position: relative; padding: var(--sp-sectie) 0; }
/* elk deel op zijn eigen grond, van rand tot rand (onder de zijkolom door) */
.sp-deel:nth-child(even) { background: var(--kalk-200); box-shadow: 0 0 0 100vmax var(--kalk-200); clip-path: inset(0 -100vmax); }
.sp-deel__kicker { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; font: 600 .86rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--groen-600); }
.sp-deel__nr { font: 500 1.05rem/1 var(--serif); letter-spacing: .04em; color: var(--groen-900); }
.sp-deel__lijn { width: 2.6rem; height: 2px; background: var(--groen-600); }
.sp-deel__h { max-width: 24ch; margin-bottom: 1.2rem; text-wrap: balance; }
.sp-deel__lead { max-width: 36em; margin: 0 0 1.1rem; font: 500 clamp(1.3rem, 1.9vw, 1.6rem)/1.45 var(--serif); color: var(--lei-900); text-wrap: pretty; }
.sp-deel__woorden { max-width: 40em; }
.sp-deel__woorden > p { margin: 0 0 .9em; font-size: var(--t-tekst); line-height: 1.65; color: var(--lei-900); text-wrap: pretty; }
.sp-deel__met-noot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.6rem, 3.4vw, 3rem); align-items: start; }
.sp-deel__met-noot .sp-noot { margin-top: .3rem; }
.sp-paar { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(.8rem, 1.6vw, 1.3rem); margin-top: 1.8rem; align-items: start; }
.sp-paar--een { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }

/* het vierde deel: de zin van het bellen groot, Roy ernaast met zijn gezicht en de twee knoppen */
.sp-slot2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.6rem, 3.4vw, 3rem); align-items: start; }
.sp-slot2__groot { margin: 0 0 1rem; font: 500 clamp(1.45rem, 2.1vw, 1.85rem)/1.3 var(--serif); color: var(--lei-900); text-wrap: balance; }
.sp-slot2__tekst > p:not(.sp-slot2__groot) { margin: 0; font-size: var(--t-tekst); line-height: 1.65; text-wrap: pretty; }
.sp-slot2__naam { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.1rem; }
.sp-slot2__naam img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--kalk-000); }
.sp-slot2__naam > span { display: flex; flex-direction: column; line-height: 1.3; }
.sp-slot2__naam b { font: 600 1.15rem/1.25 var(--serif); color: var(--lei-900); }
.sp-slot2__naam b + span { font-size: 1rem; color: var(--lei-600); }
.sp-slot2__knoppen { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }

/* ═══════════════ PROJECTEN — de rij van de homepage ═══════════════ */
.sp-projecten { padding-top: var(--sp-sectie); }

/* ═══════════════ DE ANDERE DIENSTEN (SAL's 3A) ═══════════════ */
.sp-andere { background: var(--groen-900); color: var(--kalk-100); padding: var(--sp-sectie) 0; }
.sp-andere__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: start; }
.sp-andere__h { max-width: 20ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); text-wrap: balance; }
.sp-diensten { border-bottom: 1px solid var(--groen-700); }
.sp-dienst { border-top: 1px solid var(--groen-700); }
.sp-dienst__kop {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 0; list-style: none; cursor: pointer;
  font: 600 clamp(1.3rem, 1.8vw, 1.55rem)/1.25 var(--serif); color: var(--kalk-000);
}
.sp-dienst__kop::-webkit-details-marker { display: none; }
.sp-dienst__kop:hover .sp-dienst__naam { text-decoration: underline; text-decoration-color: var(--groen-500); text-underline-offset: 5px; }
.sp-dienst__chev { flex: none; margin-left: auto; color: var(--bak-400); transition: transform .2s; }
.sp-dienst[open] .sp-dienst__chev { transform: rotate(180deg); }
.sp-dienst__in { padding: 0 0 1.5rem; }
.sp-dienst__zin { margin: 0 0 1rem; max-width: 36em; font-size: 1.06rem; line-height: 1.55; color: var(--kalk-100); }
.sp-klussen { display: grid; gap: .45rem; margin: 0 0 1.1rem; }
.sp-klus {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; text-decoration: none;
  font: 600 1.05rem/1.3 var(--sans); background: var(--groen-800); color: var(--kalk-000); clip-path: var(--sp-knip-klein);
  transition: background-color .15s;
}
a.sp-klus:hover { background: var(--groen-700); }
.sp-klus .ico { width: 20px; height: 20px; color: var(--bak-400); }
.sp-klus--hier { background: var(--kalk-000); color: var(--groen-900); }
.sp-klus--hier em { font: 600 .95rem/1 var(--sans); font-style: normal; color: var(--geel-tekst, #7E5A0A); }
.sp-dienst__meer {
  display: inline-flex; align-items: center; gap: .55rem; padding-bottom: .25rem; text-decoration: none;
  font: 600 1rem/1.3 var(--sans); color: var(--bak-400); border-bottom: 2px solid rgba(237, 203, 120, .35); transition: border-color .15s, gap .15s;
}
.sp-dienst__meer:hover { border-bottom-color: var(--bak-400); gap: .8rem; }
.sp-andere__kijk { position: sticky; top: calc(var(--hdr-h, 72px) + 1.6rem); }
.sp-andere__beeld { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--groen-800); clip-path: var(--sp-knip); }
.sp-andere__beeld img { width: 100%; height: 100%; object-fit: cover; }
.sp-andere__label { display: flex; align-items: flex-start; gap: .45rem; margin: .8rem 0 0; font: 500 1rem/1.35 var(--serif); color: var(--groen-300); }
.sp-andere__label::before {
  content: ""; flex: none; width: 1em; height: 1em; margin-top: .14em; background: var(--bak-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sp-andere__naam { margin: 1.1rem 0 .3rem; font: 600 1.4rem/1.25 var(--serif); color: var(--kalk-000); }
.sp-andere__zin { margin: 0; font-size: 1.04rem; line-height: 1.55; color: var(--kalk-100); opacity: .9; }

/* ═══════════════ DE VRAGEN — die van de homepage; op de computer open ═══════════════ */
.sp-vragen--open .vraag summary { cursor: default; padding-right: 0; }
.sp-vragen--open .vraag summary::after { display: none; }
.sp-vragen--open .vraag summary:hover { color: inherit; }
.sp-vragen .vraag__a { padding-right: 0; }

/* ═══════════════ HET WERKGEBIED — een fries tussen twee haarlijnen ═══════════════ */
.sp-gebied { background: var(--kalk-100); padding: clamp(2.8rem, 5vw, 4rem) 0; text-align: center; }
.sp-gebied .wrap { max-width: 62rem; }
.sp-gebied__label {
  display: flex; align-items: center; gap: 18px; margin: 0; font: italic 400 clamp(1.3rem, 1.7vw, 1.55rem)/1 var(--serif);
  color: var(--groen-900); white-space: nowrap;
}
.sp-gebied__label::before, .sp-gebied__label::after { content: ""; flex: 1 1 0; height: 1px; background: var(--groen-900); }
.sp-gebied__plaatsen {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .4rem; margin: 1.1rem 0 0;
  padding-bottom: clamp(1rem, 1.6vw, 1.3rem); border-bottom: 1px solid var(--groen-900);
  font: 600 1rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--groen-800);
}
.sp-gebied__plaatsen li { white-space: nowrap; }
.sp-gebied__plaatsen li + li::before {
  content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: 0 1.1rem 0 calc(1.1rem - .16em);
  border-radius: 50%; background: var(--bak-600); position: relative; top: -1px;
}
.sp-gebied__thuis { font-weight: 700; color: var(--groen-900); }

/* ═══════════════ CONTACT — het blok van de homepage, met het formulier van de vouw ═══════════════ */
.sp-contact .contact__in { align-items: start; }
.sp-vorm--onder { background: var(--kalk-000); border-top: 0; clip-path: var(--sp-knip); }
.sp-vorm--onder .sp-stap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
.sp-vorm--onder .sp-q { padding: 4.3rem var(--vp) 1.3rem; }
.sp-vorm--onder .sp-direct { order: 3; }
.sp-vorm--onder .sp-stap--1 { grid-template-rows: auto 1fr auto; }
.sp-vorm--onder .sp-stap--1 .sp-q { display: contents; }
.sp-vorm--onder .sp-stap--1 .sp-vraag { padding: 4.3rem var(--vp) 1.3rem; }
.sp-vorm--onder .sp-stap--1 .sp-direct { padding: 1.1rem var(--vp) 1.3rem; margin: 0; }
.sp-vorm--onder .sp-opties { border-left: 0; border-top: 1px solid var(--kalk-300); }
.sp-vorm--onder .sp-velden, .sp-vorm--onder .sp-dank { border-left: 0; border-top: 1px solid var(--kalk-300); padding-left: var(--vp); }
.sp-vorm--onder .sp-optie { min-height: 6rem; }
/* de donkere sectie zet elke alinea in kalkwit (stitch.css, met zes klassen gewicht); in de witte kaart weer de
   letter van de pagina — het id weegt zwaarder */
#contact .sp-vorm p { color: var(--lei-900); }
#contact .sp-vorm .sp-direct__zin, #contact .sp-vorm .sp-verzend__voet, #contact .sp-vorm .sp-mee { color: var(--lei-600); }
#contact .sp-vorm .sp-vorm__tel { color: var(--groen-600); }
#contact .sp-vorm .sp-bel__foto { color: var(--kalk-100); }

/* ═══════════════ DE DIENSTPAGINA — de klus-pagina met de dienst op de plaats van de klus ═══════════════ */
/* de klussen van de dienst staan alleen als link in de woorden ([woorden](slug) in dienst/<x>.json; de operator:
   "woven into the page as clickable links, not separate headers and sections"): groen en vet, de gouden streep eronder */
.sp-tekstlink {
  font-weight: 600; color: var(--groen-700); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--bak-600); text-underline-offset: .22em; transition: color .15s, text-decoration-color .15s;
}
.sp-tekstlink:hover { color: var(--groen-900); text-decoration-color: var(--groen-600); }
/* "in Den Haag" blijft bij elkaar; een lang woord in de H1 breekt op zijn naad (h1 in dienst/<x>.json, een zacht
   afbreekstreepje), en alleen waar het niet past: op 320 */
.sp-h1 em { white-space: nowrap; }

/* ═══════════════ TABLET EN KLEINER (860 en smaller): de kop van de homepage wacht tot het merk op de foto weg is ═══ */
@media (max-width: 1040px) {
  .sp-kaart__boven { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sp-halte { grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, .9fr); }
  .sp-halte__n { width: 3.6rem; height: 3.6rem; font-size: 1.75rem; }
  .sp-halte::before { left: 1.8rem; top: 3.6rem; }
  .sp-slot { margin-left: 0; }
  .sp-delen__grid { grid-template-columns: 13rem minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* de foto draagt zijn merk, wit, en de menuknop in de hoek (SAL's y2); de kop van de homepage komt pas als het merk
     weg is (script.js). Het label en het stempel staan op de telefoon niet op deze foto: de foto's eronder dragen ze. */
  .sp-band { height: clamp(300px, 64vw, 440px); }
  .sp-band__img { object-position: var(--pos-smal, var(--pos, 50% 50%)); }
  .sp-band::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(22, 27, 14, .74) 0, rgba(22, 27, 14, .36) 110px, rgba(22, 27, 14, 0) 190px);
  }
  .sp-band .foto-open { z-index: 2; }
  .sp-band__rand { display: none; }
  .sp-band__teken {
    display: flex; position: absolute; z-index: 3; top: 0; left: 0; right: 0; justify-content: center; pointer-events: none;
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 4.6rem 0;
  }
  .sp-band .merkblok--fold { margin: 0; padding: 0; font-size: clamp(30px, 9vw, 36px); order: 0; align-self: auto; }
  .sp-band .merkblok__vogel { filter: brightness(0) invert(1); }
  .sp-band .merkblok__woord, .sp-band .merkblok__plaats { color: var(--kalk-000); }
  .sp-band .merkblok__plaats i { opacity: .75; }
  .sp-menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 48px; height: 48px;
    padding: 0; border: 0; cursor: pointer; background: var(--kalk-000); clip-path: var(--sp-knip-klein);
  }
  .sp-menu span { display: block; width: 20px; height: 2px; background: var(--groen-900); }
  .sp-vel { margin-top: -64px; }

  .sp-route__kop { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sp-halte { grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 1.1rem; }
  .sp-halte__n { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; grid-row: 1; }
  .sp-halte::before { left: 1.6rem; top: 3.2rem; }
  .sp-halte__tekst { padding-top: .35rem; }
  .sp-halte__kant, .sp-halte--kaal .sp-halte__tekst { grid-column: 2; }
  .sp-halte__kant { padding-top: .4rem; }
  .sp-slot { grid-template-columns: minmax(0, 1fr); }

  .sp-delen__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-delen__kant { display: none; }
  .sp-deel__met-noot, .sp-slot2 { grid-template-columns: minmax(0, 1fr); }

  .sp-andere__in { grid-template-columns: minmax(0, 1fr); }
  .sp-andere__kijk { display: none; }
}

/* ═══════════════ TELEFOON (620 en smaller): één kolom; geen letter onder 16px ═══════════════ */
@media (max-width: 620px) {
  .sp-pagina { --sp-hoek: 1.6rem; --sp-sectie: 3.5rem; }
  .sp-vel { padding-inline: 12px; }
  .sp-kaart__boven { padding: 1.2rem 1.15rem 1.1rem; gap: .6rem; }
  .sp-kruimel ol { margin-bottom: .6rem; }
  .sp-h1 { font-size: clamp(1.9rem, 8.6vw, 2.35rem); }
  .sp-lede { display: none; }                       /* SAL's y: de regel onder de kop alleen op het grotere scherm */

  .sp-vorm { --vp: 1.15rem; }
  .sp-vorm__kop { top: 1.1rem; gap: .7rem; }
  .sp-vorm__tel { font-size: 1rem; letter-spacing: .12em; }
  .sp-vorm__seg i { width: 14px; }
  .sp-vorm__seg i.is-nu { width: 22px; }
  .sp-terug { font-size: 1rem; min-height: 44px; }
  .sp-stap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .sp-vorm--boven .sp-stap--1 { grid-template-rows: auto 1fr auto; }
  .sp-vorm .sp-stap--1 .sp-q { display: contents; }
  .sp-vorm .sp-stap--1 .sp-vraag { padding: 3.9rem var(--vp) 1rem; }
  .sp-vorm .sp-stap--1 .sp-direct { order: 3; margin: 0; padding: 1rem var(--vp) 1.15rem; }
  .sp-q, .sp-vorm--onder .sp-q { padding: 3.9rem var(--vp) 1rem; }
  .sp-vraag { font-size: 1.6rem; }
  .sp-direct__zin { margin-bottom: .5rem; }
  .sp-rond { flex: 1 1 auto; justify-content: center; min-height: 48px; font-size: 1rem; }
  .sp-opties, .sp-vorm--onder .sp-opties { border-left: 0; border-top: 1px solid var(--kalk-300); grid-auto-rows: auto; align-content: start; gap: 0; background: transparent; }
  .sp-opties .sp-optie { border-bottom: 1px solid var(--kalk-300); }
  .sp-opties--4 { grid-template-columns: minmax(0, 1fr); }
  .sp-optie, .sp-vorm--onder .sp-optie { flex-direction: row; align-items: center; min-height: 3.6rem; padding: .85rem 1.15rem; }
  .sp-optie__pijl { align-self: center; }
  .sp-optie__w { font-size: 1.05rem; }
  .sp-bel { padding: 1.3rem 1.15rem 1.4rem; }
  .sp-bel__knoppen .btn { flex: 1 1 100%; justify-content: center; }
  .sp-velden, .sp-dank, .sp-vorm--onder .sp-velden, .sp-vorm--onder .sp-dank { border-left: 0; border-top: 1px solid var(--kalk-300); padding: 1.1rem var(--vp) 1.2rem; }
  .sp-veld > span { font-size: 1rem; }
  .sp-verstuur { width: 100%; justify-content: center; }

  .sp-route__kop { padding-top: var(--sp-sectie); }
  .sp-halte { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; padding-bottom: 2.4rem; }
  .sp-halte__n { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
  .sp-halte::before { left: 1.3rem; top: 2.6rem; }
  .sp-halte__h { font-size: 1.4rem; margin-bottom: .6rem; }
  .sp-noot { font-size: 1.2rem; }
  .sp-slot { padding: 1.5rem 1.25rem 1.6rem; }
  .sp-slot__knoppen .btn { flex: 1 1 100%; justify-content: center; }

  .sp-deel__h { margin-bottom: .9rem; }
  .sp-deel__lead { font-size: 1.25rem; }
  .sp-paar { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .sp-slot2__knoppen .btn { justify-content: center; }

  .sp-kicker, .sp-deel__kicker { font-size: 1rem; letter-spacing: .14em; }
  .sp-klus--hier em { font-size: 1rem; }
  .sp-dienst__kop { font-size: 1.3rem; }
  .sp-klus { font-size: 1rem; }

  .sp-gebied__label { font-size: 1.3rem; }
  .sp-gebied__plaatsen { flex-direction: column; letter-spacing: .14em; }
  .sp-gebied__plaatsen li + li::before { display: none; }

  /* de kleine letter van de homepage's delen, op deze pagina's minstens 16px (de operator: nooit klein of bleek) */
  .sp-pagina .eyeb, .sp-pagina .gegevens dt, .sp-pagina .belblok__eyeb, .sp-pagina .belblok__na,
  .sp-pagina .plaatshouder, .sp-pagina .voet__k, .sp-pagina .voet__onder p, .sp-pagina .microlabels span,
  .sp-pagina .fotolabel__door, .sp-pagina .sticky__form, .sp-pagina .sticky a span, .sp-pagina .voet__kol a,
  .sp-pagina .voet__gebied li, .sp-pagina .drop__list a, .sp-pagina .drop__list em, .sp-pagina .nav__link,
  .sp-pagina .btn {
    font-size: 1rem;
  }
  .sp-pagina .eyeb, .sp-pagina .gegevens dt, .sp-pagina .belblok__eyeb, .sp-pagina .voet__k, .sp-pagina .microlabels span { letter-spacing: .14em; }
}