/* Kapsalon Krul & Kleur (kapper b) · eigen ontwerp
   N7 masthead · H11 magazine-asymmetrie · R2 redactionele kolommen.
   Een modeblad over haar: de naam als bladtitel in een balayage-verloop (donkere uitgroei, honingblonde punten),
   haarlokken uit de kleurenkaart, haarniveaus 1–10 en krultypes 2A–4C.
   Letters: Gloock (titels), Newsreader (tekst), Hanken Grotesk (bediening). Alle drie SIL Open Font License. */

@font-face { font-family: "Gloock"; src: url("/assets/fonts/Gloock-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/HankenGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/HankenGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

body.s-kapper-b {
  --papier: #f4eee5; --papier2: #ebe2d4; --inkt: #241913; --inkt2: #5a4a3f; --koper: #9c4119; --honing: #d4a865;
  --lijn: #d3c5b2; --nacht: #211813; --nacht2: #2d211a; --licht: #e2bf86;
  --balayage: linear-gradient(180deg, #1f140f 0%, #2c1b12 36%, #5c3820 54%, #94643a 70%, #c49257 86%, #d6ad72 100%);
  --lok-h: linear-gradient(90deg, #3a2519, #7a4f2c 35%, #c49257 70%, #e2c48f);
  --f-titel: "Gloock", "DM Serif Display", Georgia, serif;
  --f-tekst: "Newsreader", Georgia, serif;
  --f-ui: "Hanken Grotesk", "Instrument Sans", system-ui, sans-serif;
  --max: 1320px; --zij: clamp(16px, 4vw, 56px);
  --a: #9c4119; --a2: #d4a865; --bg2: #e3d6c3;
  margin: 0; background: var(--papier); color: var(--inkt);
  font: 400 19px/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.s-kapper-b *, body.s-kapper-b *::before, body.s-kapper-b *::after { box-sizing: border-box; }
body.s-kapper-b main { display: block; overflow-x: clip; }
body.s-kapper-b a { color: inherit; }
body.s-kapper-b img, body.s-kapper-b video { display: block; max-width: 100%; }
body.s-kapper-b ::selection { background: #d9b98a; color: var(--inkt); }
body.s-kapper-b :focus-visible { outline: 2px solid var(--koper); outline-offset: 3px; }
body.s-kapper-b h1, body.s-kapper-b h2, body.s-kapper-b h3 { margin: 0; font-weight: 400; }
body.s-kapper-b p { margin: 0 0 1em; }
body.s-kapper-b .kk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Foto's: een rustige, warme ondergrond zolang de echte foto's er niet zijn */
body.s-kapper-b .kk-img { width: 100%; height: 100%; object-fit: cover; }
body.s-kapper-b .ph.kk-img { min-height: 0; border-radius: 0; color: #f6ead6;
  background: linear-gradient(180deg, #4a3121 0%, #7b5232 45%, #b88a55 78%, #d8b884 100%); }
body.s-kapper-b .ph .ph-cap { font-family: var(--f-ui); border-radius: 0; background: #f4eee5e6; }

/* ── Knoppen en links ─────────────────────────────────────────── */
body.s-kapper-b .kk-pijl { width: 22px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; transition: transform .2s; }
body.s-kapper-b .kk-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
body.s-kapper-b .kk-knop { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px 17px; border: 0; cursor: pointer;
  background: var(--inkt); color: var(--papier); font: 600 15px/1.2 var(--f-ui); letter-spacing: .02em; text-decoration: none; }
body.s-kapper-b .kk-knop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--lok-h); transition: height .2s; }
body.s-kapper-b .kk-knop:hover::after { height: 7px; }
body.s-kapper-b .kk-knop:hover .kk-pijl, body.s-kapper-b .kk-link:hover .kk-pijl { transform: translateX(4px); }
body.s-kapper-b .kk-knop-lijn { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
body.s-kapper-b .kk-knop-tekst { background: none; color: var(--inkt); padding: 4px 0; border-bottom: 1px solid var(--inkt); }
body.s-kapper-b .kk-knop-tekst::after { display: none; }
body.s-kapper-b .kk-link { display: inline-flex; align-items: center; gap: 12px; font: 600 15px/1.3 var(--f-ui); color: var(--koper); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 4px; }
body.s-kapper-b .kk-klein { font-size: 16px; line-height: 1.55; color: var(--inkt2); }
body.s-kapper-b .kk-kicker { margin: 0 0 14px; font: italic 500 21px/1.3 var(--f-tekst); color: var(--koper); }
body.s-kapper-b .kk-stand { font: 400 23px/1.45 var(--f-tekst); color: var(--inkt2); max-width: 40em; }

/* ── Masthead (N7) ────────────────────────────────────────────── */
body.s-kapper-b .kk-mh { position: relative; max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij); background: var(--papier); }
body.s-kapper-b .kk-mh-boven { display: flex; align-items: center; gap: 12px 28px; padding: 13px 0 11px; border-bottom: 1px solid var(--inkt);
  font: 500 13px/1.3 var(--f-ui); letter-spacing: .03em; }
body.s-kapper-b .kk-mh-boven i { font-style: normal; color: var(--koper); padding: 0 4px; }
body.s-kapper-b .kk-mh-avond { margin-left: auto; color: var(--inkt2); }
body.s-kapper-b .kk-mh-site { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; color: var(--inkt);
  border: 1px solid var(--inkt); padding: 4px 11px 5px; }
body.s-kapper-b .kk-mh-site:hover, body.s-kapper-b .kk-mh-site[aria-current] { background: var(--inkt); color: var(--papier); }
body.s-kapper-b .kk-mh-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--lok-h); }
body.s-kapper-b .kk-mh-naam { display: flex; justify-content: space-between; align-items: baseline; text-decoration: none;
  font: 400 min(17.6vw, 250px)/.88 var(--f-titel); letter-spacing: -.035em; padding: .06em 0 .05em; }
body.s-kapper-b .kk-mh-w { background: var(--balayage); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
body.s-kapper-b .kk-mh-en { font: italic 400 .74em/1 var(--f-tekst); color: var(--koper); letter-spacing: 0; transform: translateY(-.04em); }
body.s-kapper-b .kk-niveaus { display: grid; grid-template-columns: repeat(10, 1fr); height: 5px; }
body.s-kapper-b .kk-niveaus i { background: var(--c); }
body.s-kapper-b .kk-mh-lijn { display: flex; align-items: center; gap: 24px; min-height: 58px; border-bottom: 1px solid var(--lijn); }
body.s-kapper-b .kk-nav { display: flex; align-items: center; gap: 6px 34px; flex-wrap: wrap; }
body.s-kapper-b .kk-nav a { font: 500 15px/1.2 var(--f-ui); letter-spacing: .02em; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
body.s-kapper-b .kk-nav a:hover { border-bottom-color: var(--lijn); }
body.s-kapper-b .kk-nav a.nu { border-bottom-color: var(--koper); color: var(--koper); }
body.s-kapper-b .kk-mh-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font: 600 15px/1.2 var(--f-ui); text-decoration: none;
  color: var(--papier); background: var(--inkt); padding: 12px 18px 13px; box-shadow: inset 0 -4px 0 #c49257; }
body.s-kapper-b .kk-mh-cta:hover .kk-pijl { transform: translateX(4px); }
body.s-kapper-b .kk-menu-t { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
body.s-kapper-b .kk-menu-knop { display: none; }

@media (max-width: 900px) {
  body.s-kapper-b .kk-mh-wat, body.s-kapper-b .kk-mh-avond { display: none; }
  body.s-kapper-b .kk-mh-boven { justify-content: space-between; }
  body.s-kapper-b .kk-mh-boven::before { content: "Kapsalon · kleur en krullen"; }
  body.s-kapper-b .kk-mh-naam { font-size: 17.2vw; }
  body.s-kapper-b .kk-mh-lijn { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding: 10px 0; }
  body.s-kapper-b .kk-menu-knop { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 15px/1 var(--f-ui); padding: 12px 0; }
  body.s-kapper-b .kk-menu-streep { position: relative; width: 22px; height: 12px; border-top: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); }
  body.s-kapper-b .kk-menu-dicht { display: none; }
  body.s-kapper-b .kk-mh-cta { padding: 11px 14px 12px; font-size: 14px; }
  body.s-kapper-b .kk-nav { order: 3; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 6px; }
  body.s-kapper-b .kk-nav a { font: 400 30px/1.2 var(--f-titel); padding: 12px 0; border-bottom: 1px solid var(--lijn); letter-spacing: -.01em; }
  body.s-kapper-b .kk-nav a.nu { border-bottom-color: var(--lijn); }
  body.s-kapper-b .kk-nav a.nu::after { content: " ·"; }
  body.s-kapper-b .kk-menu-t:checked ~ .kk-mh-lijn .kk-nav { display: flex; }
  body.s-kapper-b .kk-menu-t:checked ~ .kk-mh-lijn .kk-menu-open { display: none; }
  body.s-kapper-b .kk-menu-t:checked ~ .kk-mh-lijn .kk-menu-dicht { display: inline; }
  body.s-kapper-b .kk-menu-t:checked ~ .kk-mh-lijn .kk-menu-streep { height: 2px; border-bottom: 0; }
  body.s-kapper-b .kk-menu-t:focus-visible ~ .kk-mh-lijn .kk-menu-knop { outline: 2px solid var(--koper); outline-offset: 3px; }
}
@media (max-width: 420px) {
  body.s-kapper-b .kk-mh-boven::before { content: "Kleur en krullen"; }
}

/* ── Rubriekskop en kolommen (R2) ─────────────────────────────── */
body.s-kapper-b .kk-rubriek { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding-top: 22px; border-top: 1px solid var(--inkt); margin-bottom: 48px; }
body.s-kapper-b .kk-rubriek .kk-kicker { margin: 6px 0 0; }
body.s-kapper-b .kk-rubriek h2 { font: 400 clamp(38px, 4.6vw, 64px)/1.02 var(--f-titel); letter-spacing: -.02em; max-width: 15em; }
body.s-kapper-b .kk-rubriek .kk-stand { margin: 18px 0 0; }
body.s-kapper-b .kk-kolommen { column-count: 3; column-gap: 48px; column-rule: 1px solid var(--lijn); }
body.s-kapper-b .kk-kolommen p { margin: 0 0 .9em; }
body.s-kapper-b .kk-initiaal > p:first-child::first-letter, body.s-kapper-b p.kk-initiaal::first-letter {
  float: left; font: 400 5.1em/.78 var(--f-titel); color: var(--koper); padding: .07em .09em 0 0; }
body.s-kapper-b .kk-quote { margin: .4em 0 1.1em; padding: 22px 0 20px; border-top: 3px solid var(--inkt); border-bottom: 1px solid var(--inkt); break-inside: avoid; }
body.s-kapper-b .kk-quote p { margin: 0; font: italic 500 29px/1.25 var(--f-tekst); color: var(--inkt); }
body.s-kapper-b .kk-byline { font: 500 14px/1.45 var(--f-ui); color: var(--inkt2); padding-top: 12px; border-top: 1px solid var(--lijn); break-inside: avoid; }
body.s-kapper-b .kk-byline b { display: block; font: 400 22px/1.2 var(--f-titel); color: var(--inkt); }

/* ── Cover (H11) ──────────────────────────────────────────────── */
body.s-kapper-b .kk-cover { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 46px var(--zij) 120px; }
body.s-kapper-b .kk-cover-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-kapper-b .kk-cover-lijnen { grid-column: 1 / 5; grid-row: 1; }
body.s-kapper-b .kk-cover-seizoen { font: 600 12.5px/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--koper); margin: 0 0 14px; }
body.s-kapper-b .kk-cover-seizoen i { font-style: normal; padding: 0 4px; }
body.s-kapper-b .kk-cover-lijnen ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
body.s-kapper-b .kk-cover-lijnen li { border-top: 1px solid var(--lijn); counter-increment: c; }
body.s-kapper-b .kk-cover-lijnen a { display: grid; grid-template-columns: 26px 1fr; padding: 11px 0 12px; text-decoration: none; }
body.s-kapper-b .kk-cover-lijnen a::before { content: counter(c); font: 400 18px/1.3 var(--f-titel); color: var(--koper); grid-row: 1 / 3; }
body.s-kapper-b .kk-cover-lijnen b { font: 400 21px/1.2 var(--f-titel); }
body.s-kapper-b .kk-cover-lijnen span { font: italic 400 16px/1.35 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-cover-lijnen a:hover b { color: var(--koper); }
body.s-kapper-b .kk-cover-foto { grid-column: 5 / 11; grid-row: 1 / 4; margin: 0; aspect-ratio: 4 / 5; position: relative; z-index: 0; }
body.s-kapper-b .kk-cover-credit { grid-column: 11 / 12; grid-row: 1 / 3; justify-self: start; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 12.5px/1.2 var(--f-ui); letter-spacing: .1em; color: var(--inkt2); padding-bottom: 4px; border-right: 1px solid var(--inkt); padding-right: 0; }
body.s-kapper-b .kk-cover-h1 { grid-column: 1 / 10; grid-row: 2; position: relative; z-index: 2; margin: 34px 0 30px;
  font: 400 clamp(56px, 8.3vw, 120px)/.98 var(--f-titel); letter-spacing: -.03em; }
body.s-kapper-b .kk-cover-h1 span { display: table; background: var(--papier); padding: 0 .14em .04em 0; }
body.s-kapper-b .kk-cover-h1 span:nth-child(2) { margin-left: 1.15em; font: italic 500 1.06em/.98 var(--f-tekst); color: var(--koper); padding-left: .12em; letter-spacing: -.01em; }
body.s-kapper-b .kk-cover-lead { grid-column: 1 / 5; grid-row: 3; font-size: 19px; }
body.s-kapper-b .kk-cover-lead p { margin-bottom: 26px; }
body.s-kapper-b .kk-cover-klein { grid-column: 10 / 13; grid-row: 3 / 5; margin: -170px 0 0; position: relative; z-index: 3; }
body.s-kapper-b .kk-cover-klein > .kk-img { aspect-ratio: 3 / 4; height: auto; border: 12px solid var(--papier); border-bottom: 0; }
body.s-kapper-b .kk-cover-klein figcaption { background: var(--papier); padding: 10px 12px 0; font: italic 400 16px/1.4 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-cover-klein figcaption b { font: 600 13px/1 var(--f-ui); font-style: normal; color: var(--papier); background: var(--inkt); padding: 3px 6px; margin-right: 6px; }

/* ── Voorwoord ────────────────────────────────────────────────── */
body.s-kapper-b .kk-voorwoord, body.s-kapper-b .kk-inhoud, body.s-kapper-b .kk-team, body.s-kapper-b .kk-werkwijze, body.s-kapper-b .kk-vragen, body.s-kapper-b .kk-vergelijk {
  max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij) 120px; }

/* ── Kleurenkaart met haarlokken ──────────────────────────────── */
body.s-kapper-b .kk-kaart { background: var(--papier2); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px;
  padding: 96px max(var(--zij), calc((100% - var(--max)) / 2)); align-items: end; }
body.s-kapper-b .kk-groot { font: 400 clamp(40px, 4.8vw, 66px)/1 var(--f-titel); letter-spacing: -.02em; margin-bottom: 26px; }
body.s-kapper-b .kk-kaart-tekst p b { font: 600 .9em var(--f-ui); color: var(--koper); }
body.s-kapper-b .kk-kaart-lokken { display: flex; align-items: flex-start; gap: 30px; border-top: 5px solid #b5a68f; position: relative; padding: 0 0 0 4px; }
body.s-kapper-b .kk-kaart-lokken::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 2px; background: #cdbfa9; }
body.s-kapper-b .kk-kaart-rij { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
body.s-kapper-b .kk-lok { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
body.s-kapper-b .kk-klem { position: relative; z-index: 1; display: block; width: 100%; text-align: center; background: var(--inkt); color: var(--papier);
  font: 600 12px/1 var(--f-ui); letter-spacing: .02em; padding: 6px 2px; white-space: nowrap; }
body.s-kapper-b .kk-haar { display: block; width: 76%; height: 200px; margin-top: -1px;
  background:
    linear-gradient(180deg, transparent 16%, rgba(255, 245, 225, .26) 25%, transparent 35%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 240, 215, .14) 4px 5px, transparent 5px 7px),
    linear-gradient(180deg, var(--w), var(--p));
  clip-path: polygon(4% 0, 96% 0, 100% 58%, 94% 80%, 74% 100%, 56% 92%, 36% 99%, 16% 88%, 2% 70%, 0 40%); }
body.s-kapper-b .kk-lok figcaption { margin-top: 10px; font: italic 400 15px/1.25 var(--f-tekst); text-align: center; color: var(--inkt2); }
body.s-kapper-b .kk-lok-groot { width: 128px; flex: none; }
body.s-kapper-b .kk-lok-groot .kk-haar { height: 380px; width: 82%; }
body.s-kapper-b .kk-lok-groot figcaption { font: 400 22px/1.2 var(--f-titel); color: var(--inkt); font-style: normal; }

/* ── Niveauschaal ─────────────────────────────────────────────── */
body.s-kapper-b .kk-niveau { background: var(--nacht); color: var(--papier); padding: 110px max(var(--zij), calc((100% - var(--max)) / 2)) 120px; }
body.s-kapper-b .kk-niveau .kk-kicker { color: var(--licht); }
body.s-kapper-b .kk-niveau h2 { font: 400 clamp(40px, 5.4vw, 76px)/1 var(--f-titel); letter-spacing: -.02em; max-width: 12em; }
body.s-kapper-b .kk-niveau .kk-stand { color: #d9cbb8; margin: 22px 0 56px; }
body.s-kapper-b .kk-schaal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; }
body.s-kapper-b .kk-schaal li { position: relative; height: 190px; padding: 12px 12px; display: flex; flex-direction: column; justify-content: flex-end;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 4px), var(--c); color: var(--papier); }
body.s-kapper-b .kk-schaal li:nth-child(n+8) { color: var(--inkt); }
body.s-kapper-b .kk-schaal b { font: 400 44px/1 var(--f-titel); font-weight: 400; }
body.s-kapper-b .kk-schaal span { font: 500 12.5px/1.25 var(--f-ui); margin-top: 6px; opacity: .9; }
body.s-kapper-b .kk-schaal li.jij, body.s-kapper-b .kk-schaal li.doel { box-shadow: inset 0 0 0 3px var(--papier); }
body.s-kapper-b .kk-schaal-uitleg { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 0; font: italic 500 19px/1.3 var(--f-tekst); color: var(--licht); }
body.s-kapper-b .kk-s-boog { grid-column: 6 / 10; grid-row: 1; margin: 0 12.5%; height: 46px; border: 2px solid var(--licht); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; position: relative; }
body.s-kapper-b .kk-s-boog::after { content: ""; position: absolute; right: -7px; top: -2px; border: 7px solid transparent; border-bottom: 10px solid var(--licht); transform: translateY(-12px); }
body.s-kapper-b .kk-s-jij { grid-column: 5 / 8; grid-row: 2; text-align: center; padding-top: 8px; }
body.s-kapper-b .kk-s-doel { grid-column: 8 / 11; grid-row: 2; text-align: center; padding-top: 8px; }
body.s-kapper-b .kk-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 70px; }
body.s-kapper-b .kk-drie > div { border-top: 1px solid #5d4b3f; padding-top: 22px; }
body.s-kapper-b .kk-drie h3 { font: 400 27px/1.15 var(--f-titel); margin-bottom: 12px; color: var(--licht); }
body.s-kapper-b .kk-drie p { color: #e1d5c4; margin: 0; }

/* ── Krullen ──────────────────────────────────────────────────── */
body.s-kapper-b .kk-krul { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 130px var(--zij) 130px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-kapper-b .kk-krul-foto { grid-column: 1 / 6; margin: 70px 0 0; aspect-ratio: 3 / 4; }
body.s-kapper-b .kk-krul-tekst { grid-column: 7 / 13; }
body.s-kapper-b .kk-krul-tekst h2 { font: 400 clamp(40px, 5vw, 70px)/1 var(--f-titel); letter-spacing: -.02em; margin-bottom: 22px; }
body.s-kapper-b .kk-krul-tekst .kk-stand { margin-bottom: 18px; }
body.s-kapper-b svg.kk-streng { width: 30px; height: 100px; fill: none; stroke: var(--inkt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
body.s-kapper-b svg.kk-streng .k2, body.s-kapper-b symbol .k2 { opacity: .4; }
body.s-kapper-b .kk-krultypes { list-style: none; margin: 30px 0 14px; padding: 18px 0 14px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--lijn); }
body.s-kapper-b .kk-krultypes li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
body.s-kapper-b .kk-krultypes b { font: 600 13px/1 var(--f-ui); }
body.s-kapper-b .kk-krultypes span { font: italic 400 14px/1.2 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-krultypes li:nth-child(n+4) svg.kk-streng { stroke: #6a4429; }
body.s-kapper-b .kk-krultypes li:nth-child(n+7) svg.kk-streng { stroke: var(--inkt); }
body.s-kapper-b .kk-meenemen { margin: 34px 0 30px; padding: 26px 28px; background: var(--papier2); }
body.s-kapper-b .kk-meenemen h3 { font: 600 16px/1.3 var(--f-ui); margin-bottom: 12px; letter-spacing: .01em; }
body.s-kapper-b .kk-meenemen ul, body.s-kapper-b .kk-punten { list-style: none; margin: 0; padding: 0; }
body.s-kapper-b .kk-meenemen li, body.s-kapper-b .kk-punten li { position: relative; padding: 5px 0 5px 34px; }
body.s-kapper-b .kk-meenemen li::before, body.s-kapper-b .kk-punten li::before { content: ""; position: absolute; left: 0; top: .82em; width: 20px; height: 4px; background: var(--lok-h); }

/* ── Inhoudsopgave diensten ───────────────────────────────────── */
body.s-kapper-b .kk-inh-lijst { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--inkt); }
body.s-kapper-b .kk-inh-lijst a { display: grid; grid-template-columns: 70px minmax(0, 3.2fr) minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 30px; gap: 24px;
  align-items: baseline; padding: 28px 8px 26px; border-top: 1px solid var(--inkt); text-decoration: none; transition: background .2s; }
body.s-kapper-b .kk-inh-lijst a:hover { background: var(--papier2); }
body.s-kapper-b .kk-inh-nr { font: italic 400 46px/.9 var(--f-tekst); color: var(--koper); }
body.s-kapper-b .kk-inh-t { font: 400 36px/1.05 var(--f-titel); letter-spacing: -.01em; }
body.s-kapper-b .kk-inh-k { font: italic 400 19px/1.4 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-inh-d, body.s-kapper-b .kk-inh-p { font: 500 15px/1.3 var(--f-ui); }
body.s-kapper-b .kk-inh-p { font-weight: 600; }
body.s-kapper-b .kk-inh-lijst .kk-pijl { align-self: center; }

/* ── Avond: foto met overlappend blok ─────────────────────────── */
body.s-kapper-b .kk-avond { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij) 250px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
body.s-kapper-b .kk-avond-foto { grid-column: 1 / 9; grid-row: 1; margin: 0; aspect-ratio: 5 / 4; }
body.s-kapper-b .kk-avond-blok { grid-column: 8 / 13; grid-row: 1; align-self: end; position: relative; z-index: 1; background: var(--papier); padding: 46px 0 0 46px; margin-bottom: -130px; }
body.s-kapper-b .kk-avond-blok h2 { font: 400 clamp(36px, 4vw, 54px)/1.02 var(--f-titel); letter-spacing: -.02em; margin-bottom: 18px; }
body.s-kapper-b .kk-tijden { margin: 22px 0 30px; font: 500 15px/1.35 var(--f-ui); }
body.s-kapper-b .kk-tijden div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--lijn); }
body.s-kapper-b .kk-tijden div:last-child { border-bottom: 1px solid var(--lijn); }
body.s-kapper-b .kk-tijden dt { color: var(--inkt2); }
body.s-kapper-b .kk-tijden dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Slot op subpagina's ──────────────────────────────────────── */
body.s-kapper-b .kk-slot { background: var(--nacht); color: var(--papier); text-align: center; padding: 0 var(--zij) 110px; }
body.s-kapper-b .kk-slot-in { max-width: 760px; margin: 0 auto; }
body.s-kapper-b .kk-slot-lokken { display: flex; justify-content: center; gap: 10px; margin-bottom: 56px; }
body.s-kapper-b .kk-slot-lokken span { width: 26px; height: 92px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--w), var(--p));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 80% 100%, 50% 90%, 20% 100%, 0 66%); }
body.s-kapper-b .kk-slot h2 { font: 400 clamp(38px, 5vw, 64px)/1.02 var(--f-titel); letter-spacing: -.02em; margin-bottom: 18px; }
body.s-kapper-b .kk-slot p { color: #ddd0bf; font-size: 21px; margin: 0 auto 34px; max-width: 32em; }
body.s-kapper-b .kk-slot .kk-knoppen { justify-content: center; }
body.s-kapper-b .kk-slot .kk-knop { background: var(--papier); color: var(--inkt); }
body.s-kapper-b .kk-slot .kk-knop-lijn { background: transparent; color: var(--papier); }

/* ── Paginakop subpagina's ────────────────────────────────────── */
body.s-kapper-b .kk-pkop { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 72px var(--zij) 80px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
body.s-kapper-b .kk-pkop .kk-kicker { grid-column: 1 / 4; margin-top: 14px; }
body.s-kapper-b .kk-pkop h1 { grid-column: 4 / 13; font: 400 clamp(50px, 7.4vw, 108px)/.98 var(--f-titel); letter-spacing: -.03em; }
body.s-kapper-b .kk-pkop h1 em, body.s-kapper-b .kk-pkop h1 em { font: italic 500 1.04em/.98 var(--f-tekst); color: var(--koper); letter-spacing: -.01em; }
body.s-kapper-b .kk-pkop .kk-stand { grid-column: 4 / 11; margin: 28px 0 0; }
body.s-kapper-b .kk-sprong { grid-column: 4 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--lijn); }
body.s-kapper-b .kk-sprong span { font: italic 400 17px/1 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-sprong a { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.2 var(--f-ui); text-decoration: none; border-bottom: 1px dotted var(--inkt2); padding-bottom: 2px; }
body.s-kapper-b .kk-omlaag { width: 10px; height: 13px; fill: none; stroke: var(--koper); stroke-width: 1.6; }

/* ── Diensten ─────────────────────────────────────────────────── */
body.s-kapper-b .kk-diensten { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij); }
body.s-kapper-b .kk-dienst { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; padding: 70px 0 110px; border-top: 1px solid var(--inkt); scroll-margin-top: 20px; }
body.s-kapper-b .kk-dienst-foto { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; aspect-ratio: 4 / 5; }
body.s-kapper-b .kk-dienst-tekst { grid-column: 7 / 13; grid-row: 1; }
body.s-kapper-b .kk-formule { grid-column: 7 / 12; grid-row: 2; align-self: start; }
body.s-kapper-b .kk-dienst-om .kk-dienst-foto { grid-column: 8 / 13; }
body.s-kapper-b .kk-dienst-om .kk-dienst-tekst { grid-column: 1 / 7; }
body.s-kapper-b .kk-dienst-om .kk-formule { grid-column: 2 / 7; }
body.s-kapper-b .kk-dienst-nr { font: 400 20px/1 var(--f-titel); color: var(--koper); margin-bottom: 16px; }
body.s-kapper-b .kk-dienst-nr i { font: italic 400 17px var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-dienst h2 { font: 400 clamp(46px, 5.6vw, 80px)/.98 var(--f-titel); letter-spacing: -.03em; margin-bottom: 20px; }
body.s-kapper-b .kk-dienst .kk-stand { font-style: italic; margin-bottom: 28px; }
body.s-kapper-b .kk-dienst-kol { column-count: 2; column-gap: 36px; }
body.s-kapper-b .kk-dienst-kol p { margin: 0 0 .9em; }
body.s-kapper-b .kk-punten { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); font: 500 16px/1.4 var(--f-ui); }
body.s-kapper-b .kk-formule { background: var(--papier2); padding: 0 28px 24px; position: relative; }
body.s-kapper-b .kk-formule::before { content: ""; display: block; height: 6px; margin: 0 -28px 22px; background: linear-gradient(90deg, #3a2519, #7a4f2c 35%, #c49257 70%, #e2c48f); }
body.s-kapper-b .kk-formule h3 { font: italic 500 22px/1.2 var(--f-tekst); color: var(--koper); margin-bottom: 12px; }
body.s-kapper-b .kk-formule dl { margin: 0; }
body.s-kapper-b .kk-formule dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--lijn); }
body.s-kapper-b .kk-formule dt { font: 600 12.5px/1.6 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt2); }
body.s-kapper-b .kk-formule dd { margin: 0; font-size: 18px; line-height: 1.45; }
body.s-kapper-b .kk-formule-noot { margin: 14px 0 0; font: italic 400 15px/1.45 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-formule .kk-krultypes { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; margin: 18px 0 0; border-bottom: 0; }
body.s-kapper-b .kk-formule .kk-krultypes span { font-size: 13px; }

/* ── Vergelijking ─────────────────────────────────────────────── */
body.s-kapper-b .kk-vergelijk { padding-top: 40px; }
body.s-kapper-b .kk-tabel-wrap { max-width: 980px; margin-left: calc(25% + 6px); }
body.s-kapper-b .kk-tabel { width: 100%; border-collapse: collapse; }
body.s-kapper-b .kk-tabel th, body.s-kapper-b .kk-tabel td { text-align: left; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
body.s-kapper-b .kk-tabel thead th { font: 400 34px/1.1 var(--f-titel); border-bottom: 2px solid var(--inkt); padding-bottom: 14px; }
body.s-kapper-b .kk-tabel tbody th { font: 600 13px/1.9 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt2); width: 22%; }
body.s-kapper-b .kk-tabel td { width: 39%; }
body.s-kapper-b .kk-vergelijk-noot { margin: 22px 0 0 calc(25% + 6px); }

/* ── Prijzen ──────────────────────────────────────────────────── */
body.s-kapper-b .kk-pl-wrap { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij) 120px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-kapper-b .kk-pl-zij { grid-column: 1 / 5; position: sticky; top: 56px; }
body.s-kapper-b .kk-pl-lijsten { grid-column: 6 / 13; }
body.s-kapper-b .kk-pl-tekening { margin: 0 0 34px; padding: 22px 0 0; border-top: 1px solid var(--inkt); }
body.s-kapper-b .kk-pl-tekening figcaption { font: italic 400 16px/1.4 var(--f-tekst); color: var(--inkt2); margin-top: 10px; }
body.s-kapper-b .kk-lengte { width: 100%; height: auto; display: block; }
body.s-kapper-b .kk-lengte-haar { fill: #d9bb8c; }
body.s-kapper-b .kk-lengte-lijn { fill: none; stroke: var(--inkt); stroke-width: 1.5; stroke-linecap: round; }
body.s-kapper-b .kk-lengte-maat path { stroke: var(--koper); stroke-width: 1.3; stroke-dasharray: 4 4; }
body.s-kapper-b .kk-lengte-tekst text { font: italic 400 14px var(--f-tekst); fill: var(--inkt2); }
body.s-kapper-b .kk-lengte-tekst .kk-lt-b { font: 600 14px var(--f-ui); font-style: normal; fill: var(--inkt); }
body.s-kapper-b .kk-lengte-gezicht { fill: var(--papier); }
body.s-kapper-b .kk-pl-goed { padding-top: 20px; border-top: 1px solid var(--inkt); }
body.s-kapper-b .kk-pl-goed h2 { font: 400 26px/1.15 var(--f-titel); margin-bottom: 12px; }
body.s-kapper-b .kk-pl-goed ul { list-style: none; margin: 0; padding: 0; font-size: 16.5px; line-height: 1.5; }
body.s-kapper-b .kk-pl-goed li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
body.s-kapper-b .kk-pl-goed b { font: 600 14.5px var(--f-ui); }
body.s-kapper-b .kk-pl-blok { margin-bottom: 72px; scroll-margin-top: 20px; }
body.s-kapper-b .kk-pl-titel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--inkt); }
body.s-kapper-b .kk-pl-titel h2 { font: 400 clamp(34px, 3.8vw, 50px)/1 var(--f-titel); letter-spacing: -.02em; }
body.s-kapper-b .kk-pl-titel p { margin: 0; font: italic 400 18px/1.3 var(--f-tekst); color: var(--inkt2); }
body.s-kapper-b .kk-pl { width: 100%; border-collapse: collapse; }
body.s-kapper-b .kk-pl th, body.s-kapper-b .kk-pl td { padding: 14px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: baseline; }
body.s-kapper-b .kk-pl-kop th { font: 600 12px/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--inkt2); padding: 12px 0 10px; }
body.s-kapper-b .kk-pl-kop th:nth-child(n+3) { text-align: right; }
body.s-kapper-b .kk-pl tbody th { font: 400 19px/1.35 var(--f-tekst); padding-right: 16px; }
body.s-kapper-b .kk-pl-duur { font: 500 14px/1.3 var(--f-ui); color: var(--inkt2); white-space: nowrap; width: 110px; padding-right: 14px; }
body.s-kapper-b .kk-pl-p { font: 600 16px/1.3 var(--f-ui); text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; width: 84px; }
body.s-kapper-b .kk-pl-een { width: auto; }
body.s-kapper-b .kk-pl tbody tr:hover th, body.s-kapper-b .kk-pl tbody tr:hover td { background: #efe7db; }

/* ── Over ons ─────────────────────────────────────────────────── */
body.s-kapper-b .kk-interview { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij) 120px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-kapper-b .kk-interview-foto { grid-column: 1 / 6; margin: 0; position: sticky; top: 40px; }
body.s-kapper-b .kk-interview-foto > .kk-img { aspect-ratio: 4 / 5; height: auto; }
body.s-kapper-b .kk-interview-foto figcaption { font: italic 400 16px/1.4 var(--f-tekst); color: var(--inkt2); padding-top: 10px; }
body.s-kapper-b .kk-interview-tekst { grid-column: 7 / 13; }
body.s-kapper-b .kk-interview-intro { font: 400 24px/1.5 var(--f-tekst); margin-bottom: 40px !important; }
body.s-kapper-b .kk-qa h3 { font: 600 17px/1.4 var(--f-ui); margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--lijn); }
body.s-kapper-b .kk-qa h3::before { content: "— "; color: var(--koper); }
body.s-kapper-b .kk-quote-breed { margin: 44px 0 10px; }
body.s-kapper-b .kk-quote-breed p { font-size: clamp(28px, 3vw, 38px); }
body.s-kapper-b .kk-team-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-left: calc(25% + 6px); }
body.s-kapper-b .kk-team-p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
body.s-kapper-b .kk-team-letter { margin: 0; font: 400 150px/.8 var(--f-titel); background: var(--balayage); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
body.s-kapper-b .kk-team-p h3 { font: 400 32px/1.1 var(--f-titel); }
body.s-kapper-b .kk-team-rol { font: italic 500 19px/1.3 var(--f-tekst); color: var(--koper); margin: 4px 0 14px; }
body.s-kapper-b .kk-team-dagen { font: 500 14.5px/1.4 var(--f-ui); color: var(--inkt2); padding-top: 10px; border-top: 1px solid var(--lijn); }
body.s-kapper-b .kk-stappen { list-style: none; margin: 0 0 0 calc(25% + 6px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
body.s-kapper-b .kk-stappen li { border-top: 3px solid var(--inkt); padding-top: 18px; }
body.s-kapper-b .kk-stap-nr { display: block; font: italic 400 50px/1 var(--f-tekst); color: var(--koper); margin-bottom: 12px; }
body.s-kapper-b .kk-stappen h3 { font: 400 28px/1.1 var(--f-titel); margin-bottom: 10px; }
body.s-kapper-b .kk-waarden { background: var(--papier2); padding: 96px var(--zij); margin-bottom: 0; }
body.s-kapper-b .kk-waarden-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
body.s-kapper-b .kk-waarden h2 { font: 400 clamp(36px, 4vw, 54px)/1.02 var(--f-titel); letter-spacing: -.02em; }
body.s-kapper-b .kk-waarden ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
body.s-kapper-b .kk-waarden li { padding: 16px 0 18px; border-top: 1px solid var(--inkt); }
body.s-kapper-b .kk-waarden b { display: block; font: 400 23px/1.2 var(--f-titel); margin-bottom: 4px; }

/* ── Contact ──────────────────────────────────────────────────── */
body.s-kapper-b .kk-contact { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij) 120px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
body.s-kapper-b .kk-form { grid-column: 1 / 8; background: #fbf8f3; padding: 40px 44px 44px; border-top: 6px solid transparent;
  border-image: linear-gradient(90deg, #3a2519, #7a4f2c 35%, #c49257 70%, #e2c48f) 1; }
body.s-kapper-b .kk-form-noot { font: italic 400 16px/1.4 var(--f-tekst); color: var(--koper); margin: 0 0 24px; }
body.s-kapper-b .kk-veld { display: block; margin-bottom: 24px; }
body.s-kapper-b .kk-veld > span, body.s-kapper-b .kk-keuze legend { display: block; font: 600 14px/1.3 var(--f-ui); margin-bottom: 8px; letter-spacing: .01em; }
body.s-kapper-b .kk-keuze legend small { font-weight: 500; color: var(--inkt2); }
body.s-kapper-b .kk-veld input, body.s-kapper-b .kk-veld select, body.s-kapper-b .kk-veld textarea { width: 100%; font: 400 18px/1.4 var(--f-tekst); color: var(--inkt);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--inkt); padding: 10px 2px; border-radius: 0; }
body.s-kapper-b .kk-veld select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241913' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; }
body.s-kapper-b .kk-veld textarea { border: 1.5px solid var(--inkt); padding: 12px; resize: vertical; }
body.s-kapper-b .kk-veld input:focus, body.s-kapper-b .kk-veld select:focus, body.s-kapper-b .kk-veld textarea:focus { outline: none; border-color: var(--koper); box-shadow: 0 2px 0 var(--koper); }
body.s-kapper-b .kk-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.s-kapper-b .kk-keuze { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.s-kapper-b .kk-keuze legend { float: left; width: 100%; }
body.s-kapper-b .kk-keuze label { position: relative; cursor: pointer; }
body.s-kapper-b .kk-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.s-kapper-b .kk-keuze label > span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--inkt); font: 500 15px/1.2 var(--f-ui); background: var(--papier); }
body.s-kapper-b .kk-keuze small { display: block; font: italic 400 13.5px/1.2 var(--f-tekst); color: var(--inkt2); margin-left: 6px; }
body.s-kapper-b .kk-keuze input:checked + span { background: var(--inkt); color: var(--papier); }
body.s-kapper-b .kk-keuze input:checked + span small { color: #d9cbb8; }
body.s-kapper-b .kk-keuze input:checked + span svg.kk-streng { stroke: var(--papier); }
body.s-kapper-b .kk-keuze input:focus-visible + span { outline: 2px solid var(--koper); outline-offset: 2px; }
body.s-kapper-b .kk-keuze-krul svg.kk-streng { width: 12px; height: 34px; stroke-width: 2.4; }
body.s-kapper-b .kk-form .kk-knop { margin-top: 6px; }
body.s-kapper-b .kk-contact-zij { grid-column: 9 / 13; }
body.s-kapper-b .kk-contact-zij > div { padding: 20px 0 24px; border-top: 1px solid var(--inkt); }
body.s-kapper-b .kk-adres h2 { font: 400 34px/1.1 var(--f-titel); margin-bottom: 12px; }
body.s-kapper-b .kk-adres a { font-weight: 600; color: var(--koper); }
body.s-kapper-b .kk-contact-zij h3 { font: italic 500 21px/1.3 var(--f-tekst); color: var(--koper); margin-bottom: 4px; }
body.s-kapper-b .kk-route p { font-size: 17px; }
body.s-kapper-b .kk-vragen-lijst { margin-left: calc(25% + 6px); border-bottom: 1px solid var(--inkt); }
body.s-kapper-b .kk-vraag { border-top: 1px solid var(--inkt); }
body.s-kapper-b .kk-vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 400 25px/1.25 var(--f-titel); }
body.s-kapper-b .kk-vraag summary::-webkit-details-marker { display: none; }
body.s-kapper-b .kk-vraag summary::after { content: "+"; font: 400 30px/1 var(--f-tekst); color: var(--koper); transition: transform .2s; flex: none; }
body.s-kapper-b .kk-vraag[open] summary::after { transform: rotate(45deg); }
body.s-kapper-b .kk-vraag p { max-width: 40em; margin: 0 0 24px; color: var(--inkt2); }
body.s-kapper-b .kk-vragen { scroll-margin-top: 20px; }

/* ── Voet: colofon ────────────────────────────────────────────── */
body.s-kapper-b .kk-voet { background: var(--nacht); color: #e7dccd; font-size: 16.5px; line-height: 1.55; }
body.s-kapper-b .kk-voet-in { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 84px var(--zij) 64px; display: grid;
  grid-template-columns: minmax(0, 3.4fr) repeat(4, minmax(0, 1.6fr)); gap: 40px; }
body.s-kapper-b .kk-voet-label { font: italic 500 19px/1 var(--f-tekst); color: var(--licht); margin: 0 0 14px; }
body.s-kapper-b .kk-voet-naam { font: 400 64px/.95 var(--f-titel); letter-spacing: -.03em; margin: 0 0 18px; color: var(--papier); }
body.s-kapper-b .kk-voet-naam span { font: italic 400 .78em var(--f-tekst); color: var(--licht); }
body.s-kapper-b .kk-voet-zin { color: #cdbfae; max-width: 22em; }
body.s-kapper-b .kk-voet h2 { font: 600 12.5px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--licht); margin: 6px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #4a3a30; }
body.s-kapper-b .kk-voet a { color: var(--papier); text-decoration: none; border-bottom: 1px solid #6a5546; }
body.s-kapper-b .kk-voet a:hover { border-bottom-color: var(--licht); }
body.s-kapper-b .kk-voet-klein { font-size: 14.5px; color: #b9aa98; }
body.s-kapper-b .kk-voet-pag { list-style: none; margin: 0; padding: 0; }
body.s-kapper-b .kk-voet-pag li { padding: 3px 0; }
body.s-kapper-b .kk-tijden-voet { margin: 0; font-size: 14px; }
body.s-kapper-b .kk-tijden-voet div { display: block; border-color: #4a3a30 !important; padding: 7px 0; }
body.s-kapper-b .kk-tijden-voet dt { color: #b9aa98; }
body.s-kapper-b .kk-tijden-voet dd { color: var(--papier); }
body.s-kapper-b .kk-voet-strip { height: 6px; max-width: none; }
body.s-kapper-b .kk-voet-onder { max-width: calc(var(--max) + 2 * var(--zij)); margin: 0 auto; padding: 20px var(--zij) 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font: 500 13.5px/1.4 var(--f-ui); color: #b9aa98; }

/* ── Smaller ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.s-kapper-b .kk-kolommen { column-count: 2; }
  body.s-kapper-b .kk-inh-lijst a { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr) 30px; row-gap: 6px; }
  body.s-kapper-b .kk-inh-k { grid-column: 2 / 4; grid-row: 2; }
  body.s-kapper-b .kk-inh-d { grid-column: 3; grid-row: 1; }
  body.s-kapper-b .kk-inh-p { grid-column: 3; grid-row: 1; justify-self: end; }
  body.s-kapper-b .kk-inh-d { display: none; }
  body.s-kapper-b .kk-inh-lijst .kk-pijl { grid-column: 4; grid-row: 1; }
  body.s-kapper-b .kk-voet-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.s-kapper-b .kk-voet-kop { grid-column: 1 / -1; }
  body.s-kapper-b .kk-kaart { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body.s-kapper-b { font-size: 18px; }
  body.s-kapper-b .kk-stand { font-size: 20px; }
  body.s-kapper-b .kk-rubriek { grid-template-columns: 1fr; gap: 0; margin-bottom: 34px; }
  body.s-kapper-b .kk-rubriek .kk-kicker { margin-bottom: 8px; }
  body.s-kapper-b .kk-kolommen { column-count: 1; }
  body.s-kapper-b .kk-voorwoord, body.s-kapper-b .kk-inhoud, body.s-kapper-b .kk-team, body.s-kapper-b .kk-werkwijze, body.s-kapper-b .kk-vragen, body.s-kapper-b .kk-vergelijk { padding-bottom: 80px; }

  /* cover gestapeld: foto, kop eroverheen, tekst, kleine foto, coverregels */
  body.s-kapper-b .kk-cover { padding-top: 18px; padding-bottom: 80px; }
  body.s-kapper-b .kk-cover-grid { display: flex; flex-direction: column; }
  body.s-kapper-b .kk-cover-foto { order: 1; width: calc(100% + var(--zij)); margin-right: calc(-1 * var(--zij)); align-self: flex-end; width: 92%; }
  body.s-kapper-b .kk-cover-credit { display: none; }
  body.s-kapper-b .kk-cover-h1 { order: 3; margin: -92px 0 22px; font-size: clamp(50px, 14.4vw, 84px); }
  body.s-kapper-b .kk-cover-h1 span:nth-child(2) { margin-left: .9em; }
  body.s-kapper-b .kk-cover-lead { order: 4; }
  body.s-kapper-b .kk-cover-klein { order: 5; width: 64%; align-self: flex-end; margin: 40px 0 0; }
  body.s-kapper-b .kk-cover-klein > .kk-img { border: 0; }
  body.s-kapper-b .kk-cover-lijnen { order: 6; margin-top: 46px; }

  body.s-kapper-b .kk-kaart { padding-top: 70px; padding-bottom: 70px; gap: 36px; }
  body.s-kapper-b .kk-kaart-lokken { flex-direction: column; align-items: stretch; gap: 34px; }
  body.s-kapper-b .kk-lok-groot { width: 100%; flex-direction: row; align-items: stretch; gap: 0; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 18px; }
  body.s-kapper-b .kk-lok-groot .kk-klem { grid-column: 1; grid-row: 1; }
  body.s-kapper-b .kk-lok-groot .kk-haar { grid-column: 1; grid-row: 2; height: 230px; width: 80%; justify-self: center; }
  body.s-kapper-b .kk-lok-groot figcaption { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: left; margin: 0; }
  body.s-kapper-b .kk-kaart-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  body.s-kapper-b .kk-haar { height: 150px; }

  body.s-kapper-b .kk-niveau { padding-top: 80px; padding-bottom: 80px; }
  body.s-kapper-b .kk-schaal li { height: 120px; padding: 8px 4px; align-items: center; }
  body.s-kapper-b .kk-schaal b { font-size: 24px; }
  body.s-kapper-b .kk-schaal span { display: none; }
  body.s-kapper-b .kk-schaal li.jij, body.s-kapper-b .kk-schaal li.doel { box-shadow: inset 0 0 0 2px var(--papier); }
  body.s-kapper-b .kk-schaal-uitleg { font-size: 15px; }
  body.s-kapper-b .kk-s-jij { grid-column: 4 / 9; text-align: left; padding-left: 4%; }
  body.s-kapper-b .kk-s-doel { grid-column: 7 / 11; grid-row: 3; text-align: right; }
  body.s-kapper-b .kk-s-jij { grid-column: 1 / 8; text-align: left; padding-left: 0; }
  body.s-kapper-b .kk-s-jij::before { content: "6 · "; }
  body.s-kapper-b .kk-s-doel::before { content: "9 · "; }
  body.s-kapper-b .kk-s-doel { grid-column: 1 / 11; grid-row: 3; text-align: left; padding-top: 2px; }
  body.s-kapper-b .kk-s-boog { height: 30px; }
  body.s-kapper-b .kk-drie { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }

  body.s-kapper-b .kk-krul { display: flex; flex-direction: column; padding-top: 80px; padding-bottom: 80px; }
  body.s-kapper-b .kk-krul-foto { order: 2; width: 82%; margin: 34px 0 0; }
  body.s-kapper-b .kk-krul-tekst { order: 1; }
  body.s-kapper-b .kk-krultypes { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; }
  body.s-kapper-b .kk-meenemen { padding: 22px 20px; }

  body.s-kapper-b .kk-inh-lijst a { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 4px 12px; padding: 22px 0; }
  body.s-kapper-b .kk-inh-nr { font-size: 32px; grid-row: 1 / 4; }
  body.s-kapper-b .kk-inh-t { font-size: 29px; grid-column: 2; grid-row: 1; }
  body.s-kapper-b .kk-inh-k { grid-column: 2 / 4; grid-row: 2; font-size: 17px; }
  body.s-kapper-b .kk-inh-p { grid-column: 2; grid-row: 3; justify-self: start; font-size: 14.5px; }
  body.s-kapper-b .kk-inh-lijst .kk-pijl { grid-column: 3; grid-row: 1; }

  body.s-kapper-b .kk-avond { display: block; padding-bottom: 80px; }
  body.s-kapper-b .kk-avond-foto { margin-right: calc(-1 * var(--zij)); }
  body.s-kapper-b .kk-avond-blok { margin: -60px 0 0; padding: 30px 24px 0 0; width: 92%; }

  body.s-kapper-b .kk-pkop { display: block; padding-top: 44px; padding-bottom: 50px; }
  body.s-kapper-b .kk-pkop .kk-kicker { margin: 0 0 10px; }
  body.s-kapper-b .kk-pkop h1 { font-size: clamp(46px, 13vw, 76px); }
  body.s-kapper-b .kk-pkop .kk-stand { margin-top: 20px; }
  body.s-kapper-b .kk-sprong { gap: 12px 20px; }
  body.s-kapper-b .kk-sprong span { flex-basis: 100%; }

  body.s-kapper-b .kk-dienst, body.s-kapper-b .kk-dienst-om { display: flex; flex-direction: column; gap: 30px; padding: 46px 0 70px; }
  body.s-kapper-b .kk-dienst-foto { width: 100%; aspect-ratio: 4 / 3; }
  body.s-kapper-b .kk-dienst-kol { column-count: 1; }
  body.s-kapper-b .kk-formule { padding: 0 20px 20px; }
  body.s-kapper-b .kk-formule::before { margin: 0 -20px 18px; }
  body.s-kapper-b .kk-formule dl div { grid-template-columns: 96px minmax(0, 1fr); }
  body.s-kapper-b .kk-tabel-wrap, body.s-kapper-b .kk-vergelijk-noot { margin-left: 0; }
  body.s-kapper-b .kk-tabel thead th { font-size: 24px; }
  body.s-kapper-b .kk-tabel th, body.s-kapper-b .kk-tabel td { padding-right: 10px; font-size: 16px; }
  body.s-kapper-b .kk-tabel tbody th { font-size: 11.5px; width: 26%; }

  body.s-kapper-b .kk-pl-wrap { display: flex; flex-direction: column-reverse; padding-bottom: 80px; }
  body.s-kapper-b .kk-pl-zij { position: static; width: 100%; }
  body.s-kapper-b .kk-pl-tekening { max-width: 340px; }
  body.s-kapper-b .kk-pl-lijsten { width: 100%; }
  body.s-kapper-b .kk-pl-blok { margin-bottom: 52px; }
  body.s-kapper-b .kk-pl thead { display: none; }
  body.s-kapper-b .kk-pl tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 14px 0 12px; border-bottom: 1px solid var(--lijn); }
  body.s-kapper-b .kk-pl tbody th, body.s-kapper-b .kk-pl td { border: 0; padding: 0; width: auto; }
  body.s-kapper-b .kk-pl tbody th { grid-column: 1 / 3; font-size: 18px; }
  body.s-kapper-b .kk-pl-duur { grid-column: 3; text-align: right; padding: 3px 0 0 !important; }
  body.s-kapper-b .kk-pl-lengtes .kk-pl-p { text-align: left !important; margin-top: 8px; background: var(--papier2); padding: 7px 9px !important; }
  body.s-kapper-b .kk-pl-lengtes .kk-pl-p::before { content: attr(data-l); display: block; font: 500 11px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt2); margin-bottom: 2px; }
  body.s-kapper-b .kk-pl-een { grid-column: 1 / 4; text-align: left !important; margin-top: 4px; color: var(--koper); }

  body.s-kapper-b .kk-interview { display: block; padding-bottom: 80px; }
  body.s-kapper-b .kk-interview-foto { position: static; margin-bottom: 40px; }
  body.s-kapper-b .kk-interview-intro { font-size: 21px; }
  body.s-kapper-b .kk-team-rij, body.s-kapper-b .kk-stappen, body.s-kapper-b .kk-vragen-lijst { margin-left: 0; grid-template-columns: 1fr; }
  body.s-kapper-b .kk-team-letter { font-size: 96px; }
  body.s-kapper-b .kk-stappen { gap: 30px; }
  body.s-kapper-b .kk-waarden { padding: 70px var(--zij); }
  body.s-kapper-b .kk-waarden-in, body.s-kapper-b .kk-waarden ul { grid-template-columns: 1fr; gap: 24px; }
  body.s-kapper-b .kk-waarden ul { gap: 0; }

  body.s-kapper-b .kk-contact { display: block; padding-bottom: 80px; }
  body.s-kapper-b .kk-form { padding: 28px 18px 30px; margin: 0 calc(-1 * var(--zij)) 50px; }
  body.s-kapper-b .kk-veld-rij { grid-template-columns: 1fr; gap: 0; }
  body.s-kapper-b .kk-vraag summary { font-size: 21px; }

  body.s-kapper-b .kk-voet-in { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; padding-bottom: 46px; }
  body.s-kapper-b .kk-voet-naam { font-size: 50px; }
  body.s-kapper-b .kk-slot { padding-bottom: 80px; }
  body.s-kapper-b .kk-slot-lokken { gap: 7px; margin-bottom: 40px; }
  body.s-kapper-b .kk-slot-lokken span { width: 20px; height: 70px; }
  body.s-kapper-b .kk-slot p { font-size: 18px; }
}