@import url("./fonts.css");

/* ============================================================================
   Wax Salon Vlissingen — twee ontwerpvoorstellen in één document.
   Alles is genamespaced met v1- of v2- zodat de twee paletten en typeschalen
   elkaar niet kunnen raken. Zie README.md.

   Kleurtokens zijn genoemd naar het VLAK waarop ze leesbaar zijn, met de
   gemeten ratio in de comment. Elk token is doorgerekend tegen elk vlak waar
   het op kan landen voordat één component het gebruikte.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* Eén focusring zonder specificiteitsoorlog. currentColor werkt op elk vlak,
   want de tekstkleur is daar per definitie al leesbaar. */
:where(a, button, [tabindex], summary, input):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Progressive enhancement.
   Zonder JavaScript zijn de cyclusring, de zonekiezer en de prijstabbladen
   dode knoppen. Die verbergen we dan, en de bijbehorende panelen staan
   gewoon allemaal onder elkaar: de cyclus blijft een genummerde lijst, de
   zones blijven een lijst met materiaal en prijs. Het idee overleeft, alleen
   de bediening verdwijnt.
   ------------------------------------------------------------------------- */
html:not(.js) .v1-dial,
html:not(.js) .v2-zonelist,
html:not(.js) .v1-tabs,
html:not(.js) .v2-cat__tabs { display: none; }

html.js .v1-list:not([data-active]),
html.js .v2-cat__cols:not([data-active]) { display: none; }

.nojs-label { display: none; }
html:not(.js) .nojs-label {
  display: block; margin-top: 30px; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Reveal. De verborgen staat hangt aan html.motion, die alleen wordt gezet
   als JavaScript draait EN de bezoeker geen reduced motion vraagt. Zonder JS
   of met motion uit bestaat de regel dus niet en is alles gewoon zichtbaar.
   Nooit clip-path als verborgen staat: dat zet intersectionRatio op nul.
   ------------------------------------------------------------------------- */
html.motion .reveal { opacity: 0; transform: translateY(16px); }
html.motion .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.motion .reveal.d1.in { transition-delay: .08s; }
html.motion .reveal.d2.in { transition-delay: .16s; }
html.motion .reveal.d3.in { transition-delay: .24s; }

/* ---------------------------------------------------------------------------
   Versieschakelaar. Bewust buiten beide composities: klein, stil, en links
   onderin zodat hij op smalle schermen nooit over de hoofdactie in het eerste
   scherm valt.
   ------------------------------------------------------------------------- */
.switch {
  position: fixed; left: 14px; bottom: 14px; z-index: 999;
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: rgba(20, 16, 15, .92);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 6px 24px rgba(20, 16, 15, .22);
  backdrop-filter: blur(6px);
}
.switch__label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #B9B2AC;                        /* 7.4:1 op #14100F */
  padding: 0 8px 0 10px;
}
.switch button {
  min-width: 44px; min-height: 34px; padding: 0 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: #EFEAE5;                        /* 15.3:1 op #14100F */
  transition: background .25s, color .25s;
}
.switch button[aria-pressed="true"] { background: #EFEAE5; color: #14100F; }
.switch button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.12); }

@media (max-width: 720px) {
  .switch { left: 10px; bottom: 10px; padding: 3px; }
  .switch__label { display: none; }
  .switch button { min-width: 46px; min-height: 36px; font-size: 11px; }
}

@media print { .switch { display: none; } }

/* ===========================================================================
   VERSIE 1 — "De cyclus"
   Hoog in de sleutel, warm, kalm. Het signature device is de wax-cyclus:
   dit bedrijf is letterlijk georganiseerd rond een herhaling van 4 tot 6 weken.
   =========================================================================== */

#version-v1 {
  /* vlakken */
  --v1-linen:      #F6F1EC;   /* pagina */
  --v1-shell:      #FFFFFF;   /* kaarten */
  --v1-sand:       #EAE0D6;   /* secundaire tint */
  --v1-blush:      #F7E7F0;   /* accenttint */
  --v1-deep:       #3A2028;   /* donkere band */
  /* tekst op de lichte vlakken */
  --v1-ink:        #2A1E22;   /* 14.3:1 linen · 16.1:1 shell · 12.3:1 sand · 13.5:1 blush */
  --v1-muted:      #5C4A50;   /* 7.3:1 linen · 8.2:1 shell · 6.3:1 sand · 6.9:1 blush */
  --v1-accent-d:   #A8005E;   /* accent als TEKST op licht: 6.6:1 linen · 6.2:1 blush */
  /* tekst op de donkere band */
  --v1-on-deep:    #F6F1EC;   /* 13.2:1 op deep */
  --v1-muted-deep: #D9C4CC;   /* 9.0:1 op deep */
  --v1-accent-l:   #FF9ECF;   /* 7.8:1 op deep */
  /* vulling. NOOIT als kleine tekst: #D5077D haalt op linen precies 4,50:1,
     dus zonder marge. Wit hierop is 5,05:1 en dat is wel in orde. */
  --v1-accent:     #D5077D;
  --v1-line:       #DDD1C8;

  --v1-display: "Instrument Serif", Georgia, serif;
  --v1-ui: "Inter", system-ui, sans-serif;

  background: var(--v1-linen);
  color: var(--v1-ink);
  font-family: var(--v1-ui);
}

.v1-wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
@media (max-width: 720px) { .v1-wrap { width: min(1240px, 100% - 32px); } }

.v1-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--v1-accent-d);
}
.v1-eyebrow--deep { color: var(--v1-accent-l); }

.v1-h2 {
  font-family: var(--v1-display); font-weight: 400;
  font-size: clamp(30px, 5.2vw, 62px); line-height: 1.04;
  letter-spacing: -.015em;
}
.v1-h3 {
  font-family: var(--v1-display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.12;
}
.v1-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--v1-muted); max-width: 56ch; }
.v1-body { color: var(--v1-muted); }
.v1-em { font-style: italic; color: var(--v1-accent-d); }

.v1-section { padding: clamp(64px, 9vw, 132px) 0; }

/* knoppen */
.v1-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .2s, background .25s, color .25s;
}
.v1-btn--primary { background: var(--v1-accent); color: #FFFFFF; }  /* 5.05:1 */
.v1-btn--primary:hover { background: var(--v1-accent-d); transform: translateY(-2px); }
.v1-btn--ghost { border: 1px solid var(--v1-line); color: var(--v1-ink); }
.v1-btn--ghost:hover { border-color: var(--v1-ink); transform: translateY(-2px); }
.v1-btn--deep { background: var(--v1-on-deep); color: var(--v1-deep); }
.v1-btn--deep:hover { background: #FFFFFF; transform: translateY(-2px); }

/* --- navigatie ------------------------------------------------------------ */
.v1-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 241, 236, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v1-line);
}
.v1-nav__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.v1-brand {
  font-family: var(--v1-display); font-size: 20px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; margin-right: auto;
}
.v1-brand b { font-weight: 400; color: var(--v1-accent-d); }
.v1-nav__links { display: flex; gap: 26px; }
.v1-nav__links a {
  font-size: 14px; text-decoration: none; color: var(--v1-muted);
  padding: 6px 0; position: relative;
}
.v1-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--v1-accent-d); transition: right .3s;
}
.v1-nav__links a:hover { color: var(--v1-ink); }
.v1-nav__links a:hover::after { right: 0; }
.v1-nav__cta { display: inline-flex; }
@media (max-width: 900px) { .v1-nav__links { display: none; } }
@media (max-width: 520px) {
  .v1-nav__cta { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .v1-brand { font-size: 17px; }
}

/* --- hero: full bleed beeld met verschoven displaytype --------------------- */
.v1-hero { position: relative; }
.v1-hero__media { position: relative; }
.v1-hero__media img { width: 100%; height: clamp(420px, 74vh, 760px); object-fit: cover; object-position: 58% 46%; }
/* De scrim staat als background-image OP de voorouder van de tekst, niet als
   losse broer of ::before. Alleen zo telt de tekst als "op beeld". */
.v1-hero__panel {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background-image: linear-gradient(100deg, rgba(38,22,28,.80) 0%, rgba(38,22,28,.62) 38%, rgba(38,22,28,.16) 66%, rgba(38,22,28,0) 88%);
}
.v1-hero__inner { padding-bottom: clamp(38px, 6vw, 76px); padding-top: 40px; }
.v1-hero__content { max-width: 40ch; min-width: 0; }
.v1-hero h1 {
  font-family: var(--v1-display); font-weight: 400;
  font-size: clamp(38px, 7.4vw, 92px); line-height: 1;
  letter-spacing: -.02em; color: #FFFFFF; margin: 16px 0 0;
}
.v1-hero h1 em { font-style: italic; color: #FFC9E6; }
.v1-hero__sub { margin-top: 20px; color: #F3E7EC; font-size: clamp(15px, 1.5vw, 18px); max-width: 44ch; }
.v1-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v1-hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 30px; font-size: 13px; color: #EFDFE6;
}
.v1-hero__trust b { font-weight: 600; color: #FFFFFF; }
.v1-hero__dot { width: 3px; height: 3px; border-radius: 50%; background: #FFC9E6; }
@media (max-width: 760px) {
  .v1-hero__media img { height: 92vh; min-height: 520px; object-position: 62% 42%; }
  .v1-hero__panel { background-image: linear-gradient(180deg, rgba(38,22,28,.42) 0%, rgba(38,22,28,.58) 42%, rgba(38,22,28,.86) 100%); }
}

/* --- statement: puur typografisch, geen beeld ------------------------------ */
.v1-statement { text-align: center; }
.v1-statement__q {
  font-family: var(--v1-display); font-weight: 400;
  font-size: clamp(27px, 4.4vw, 56px); line-height: 1.14;
  letter-spacing: -.015em; max-width: 20ch; margin: 22px auto 0;
}
.v1-statement__note {
  margin: 30px auto 0; max-width: 60ch; color: var(--v1-muted);
  padding-top: 26px; border-top: 1px solid var(--v1-line);
}

/* --- signature: de cyclus -------------------------------------------------- */
.v1-cycle { background: var(--v1-sand); }
.v1-cycle__head { max-width: 62ch; }
.v1-cycle__grid {
  margin-top: clamp(34px, 5vw, 58px);
  display: grid; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 74px); align-items: center;
}

/* de ring zelf */
.v1-dial { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; margin-inline: auto; }
.v1-dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v1-dial__track { fill: none; stroke: #D9C9BC; stroke-width: 1.5; }
.v1-dial__arc {
  fill: none; stroke: var(--v1-accent); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.22,.61,.36,1);
}
.v1-dial__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54%; text-align: center;
}
.v1-dial__hubnum {
  font-family: var(--v1-display); font-size: clamp(40px, 8vw, 68px);
  line-height: .9; color: var(--v1-accent-d);
}
.v1-dial__hublabel {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v1-muted); margin-top: 8px;
}
.v1-dial__stop {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: var(--v1-shell); border: 1px solid var(--v1-line);
  font-size: 12px; font-weight: 600; color: var(--v1-muted);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.v1-dial__stop:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--v1-accent-d); }
.v1-dial__stop[aria-selected="true"] {
  background: var(--v1-accent); border-color: var(--v1-accent); color: #FFFFFF;
}

/* de panelen. Zonder JS staan ze allemaal onder elkaar: de cyclus blijft dan
   gewoon leesbaar als genummerde lijst. Met JS wordt het een dial. */
.v1-cycle__panels { min-width: 0; }
.v1-cycle__panel + .v1-cycle__panel { margin-top: 30px; }
html.js .v1-cycle__panel + .v1-cycle__panel { margin-top: 0; }
html.js .v1-cycle__panel:not([data-active]) { display: none; }
.v1-cycle__when {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em; color: var(--v1-accent-d);
}
.v1-cycle__title { margin-top: 12px; }
.v1-cycle__text { margin-top: 14px; color: var(--v1-muted); max-width: 52ch; }
.v1-cycle__meta {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--v1-line);
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--v1-muted);
}
.v1-cycle__meta b { color: var(--v1-ink); font-weight: 600; }
.v1-dial__hint { margin-top: 20px; font-size: 12px; color: var(--v1-muted); }
@media (max-width: 860px) {
  .v1-cycle__grid { grid-template-columns: 1fr; }
  .v1-dial { max-width: 340px; }
}

/* --- behandelingen: redactionele index ------------------------------------ */
.v1-treat__head { display: flex; flex-wrap: wrap; align-items: end; gap: 22px; justify-content: space-between; }
.v1-tabs { display: flex; gap: 6px; padding: 4px; background: var(--v1-sand); border-radius: 999px; }
.v1-tabs button {
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--v1-muted);
  transition: background .25s, color .25s;
}
.v1-tabs button[aria-selected="true"] { background: var(--v1-shell); color: var(--v1-ink); }
.v1-list { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--v1-line); }
.v1-list__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 26px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--v1-line);
}
.v1-list__name { font-size: clamp(16px, 1.7vw, 20px); min-width: 0; }
.v1-list__dur {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--v1-muted); white-space: nowrap;
}
.v1-list__price {
  font-family: var(--v1-display); font-size: clamp(19px, 2vw, 25px);
  white-space: nowrap; color: var(--v1-ink);
}
.v1-list__note { margin-top: 22px; font-size: 14px; color: var(--v1-muted); }
@media (max-width: 560px) {
  .v1-list__row { grid-template-columns: minmax(0, 1fr) auto; }
  .v1-list__dur { grid-column: 1; grid-row: 2; }
  .v1-list__price { grid-row: 1 / span 2; align-self: center; }
}

/* --- eerste keer: asymmetrisch, beeld plus citaat -------------------------- */
.v1-first { background: var(--v1-blush); }
.v1-first__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.v1-first__fig { position: relative; }
.v1-first__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.v1-first__badge {
  position: absolute; right: -14px; bottom: -14px;
  background: var(--v1-shell); padding: 16px 20px; border-radius: 3px;
  max-width: 200px; box-shadow: 0 12px 34px rgba(42,30,34,.12);
}
.v1-first__badge b { display: block; font-family: var(--v1-display); font-size: 26px; color: var(--v1-accent-d); }
.v1-first__badge span { font-size: 12px; color: var(--v1-muted); }
.v1-quote {
  font-family: var(--v1-display); font-weight: 400;
  font-size: clamp(23px, 3vw, 38px); line-height: 1.18; margin-top: 22px;
}
.v1-quote__by { margin-top: 20px; font-size: 13px; color: var(--v1-muted); }
.v1-quote__by b { color: var(--v1-ink); font-weight: 600; }
.v1-first__points { margin-top: 30px; display: grid; gap: 14px; }
.v1-first__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--v1-muted); }
.v1-first__points svg { flex: none; margin-top: 4px; color: var(--v1-accent-d); }
@media (max-width: 860px) {
  .v1-first__grid { grid-template-columns: 1fr; }
  .v1-first__badge { right: 12px; bottom: -18px; }
}

/* --- voorbereiding: twee kolommen tegenover elkaar ------------------------- */
.v1-prep__grid {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.v1-prep__col { background: var(--v1-shell); padding: clamp(24px, 3vw, 38px); border-radius: 3px; min-width: 0; }
.v1-prep__col--dont { background: var(--v1-sand); }
.v1-prep__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--v1-accent-d);
}
.v1-prep__list { margin-top: 22px; display: grid; gap: 15px; }
.v1-prep__list li {
  display: flex; gap: 13px; align-items: flex-start;
  padding-bottom: 15px; border-bottom: 1px solid var(--v1-line); color: var(--v1-muted);
}
.v1-prep__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.v1-prep__list i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--v1-blush); color: var(--v1-accent-d);
}
.v1-prep__col--dont .v1-prep__list i { background: #E4D5CC; color: #7A4A2E; }  /* 5.2:1 */

/* --- vertrouwensband op donker -------------------------------------------- */
.v1-trust { background: var(--v1-deep); color: var(--v1-on-deep); }
.v1-trust__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(26px, 4vw, 48px);
}
.v1-trust__item { min-width: 0; }
.v1-trust__n {
  font-family: var(--v1-display); font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1; color: var(--v1-accent-l);
}
.v1-trust__l { margin-top: 10px; font-size: 14px; color: var(--v1-muted-deep); }
.v1-trust__foot {
  margin-top: clamp(34px, 5vw, 56px); padding-top: 26px;
  border-top: 1px solid rgba(246,241,236,.2);
  display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between;
}
.v1-trust__claim { font-family: var(--v1-display); font-size: clamp(20px, 2.4vw, 30px); max-width: 24ch; }

/* --- praktisch en bezoek --------------------------------------------------- */
.v1-visit__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(30px, 4vw, 50px);
}
.v1-card { background: var(--v1-shell); padding: clamp(24px, 3vw, 36px); border-radius: 3px; min-width: 0; }
.v1-card--accent { background: var(--v1-deep); color: var(--v1-on-deep); }
.v1-card h3 { margin-bottom: 16px; }
.v1-card dl { display: grid; gap: 13px; }
.v1-card dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v1-muted); }
.v1-card--accent dt { color: var(--v1-muted-deep); }
.v1-card dd { margin: 4px 0 0; }
.v1-card a { color: inherit; }
.v1-card__line { display: block; }
.v1-card__cta { margin-top: 26px; }

/* --- footer ---------------------------------------------------------------- */
.v1-foot { background: var(--v1-linen); border-top: 1px solid var(--v1-line); padding: 44px 0 40px; }
.v1-foot__grid { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; }
.v1-foot__meta { font-size: 13px; color: var(--v1-muted); display: grid; gap: 4px; }
.v1-foot__credit { font-size: 13px; color: var(--v1-muted); }
.v1-foot__credit a { color: var(--v1-accent-d); text-underline-offset: 3px; }

/* ===========================================================================
   VERSIE 2 — "Hard of soft"
   Redactioneel, materieel, donkerder. Het signature device is het
   materiaalsysteem: welke wax hoort bij welke zone, en waarom.
   =========================================================================== */

#version-v2 {
  --v2-bone:      #EDE9E3;   /* pagina */
  --v2-bone-2:    #E4DED6;   /* secundair vlak */
  --v2-paper:     #F7F5F1;   /* kaarten */
  --v2-dark:      #191413;   /* donkere band */
  --v2-ink:       #14100F;   /* 15.6:1 bone · 14.2:1 bone-2 */
  --v2-muted:     #55504B;   /* 6.6:1 bone · 6.0:1 bone-2 */
  --v2-on-dark:   #EFEAE5;   /* 15.3:1 op dark */
  --v2-muted-dark:#A9A099;   /* 7.1:1 op dark */
  /* materiaalmarkeringen. -d is de tekstvariant op licht, -l die op donker. */
  --v2-hard:      #D5077D;   /* vulling */
  --v2-hard-d:    #A8005E;   /* 6.1:1 bone · 5.6:1 bone-2 */
  --v2-hard-l:    #FF8FC8;   /* 8.7:1 op dark */
  --v2-soft-d:    #7E5119;   /* 5.6:1 bone · 5.1:1 bone-2 */
  --v2-soft-l:    #E0A96B;   /* 8.7:1 op dark */
  --v2-line:      #D3CCC3;
  --v2-line-dark: rgba(239,234,229,.18);

  --v2-display: "Space Grotesk", system-ui, sans-serif;
  --v2-mono: "JetBrains Mono", ui-monospace, monospace;
  --v2-ui: "Inter", system-ui, sans-serif;

  background: var(--v2-bone);
  color: var(--v2-ink);
  font-family: var(--v2-ui);
}

.v2-wrap { width: min(1300px, 100% - 48px); margin-inline: auto; }
@media (max-width: 720px) { .v2-wrap { width: min(1300px, 100% - 32px); } }

.v2-section { padding: clamp(62px, 8.5vw, 128px) 0; }

.v2-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-muted);
}
.v2-tag--dark { color: var(--v2-muted-dark); }
.v2-tag__sq { width: 7px; height: 7px; }
.v2-tag__sq--hard { background: var(--v2-hard); }
.v2-tag__sq--soft { background: var(--v2-soft-l); }

.v2-h2 {
  font-family: var(--v2-display); font-weight: 700;
  font-size: clamp(29px, 5vw, 62px); line-height: 1.02; letter-spacing: -.03em;
}
.v2-h3 {
  font-family: var(--v2-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.14; letter-spacing: -.02em;
}
.v2-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--v2-muted); max-width: 58ch; }
.v2-lead--dark { color: var(--v2-muted-dark); }

.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--v2-display); font-weight: 500; font-size: 15px;
  text-decoration: none; transition: transform .2s, background .25s, color .25s;
}
.v2-btn--solid { background: var(--v2-ink); color: var(--v2-on-dark); }
.v2-btn--solid:hover { background: var(--v2-hard-d); transform: translateY(-2px); }
.v2-btn--line { border: 1px solid var(--v2-ink); }
.v2-btn--line:hover { background: var(--v2-ink); color: var(--v2-on-dark); transform: translateY(-2px); }
.v2-btn--onDark { background: var(--v2-on-dark); color: var(--v2-ink); }
.v2-btn--onDark:hover { background: #FFFFFF; transform: translateY(-2px); }

/* --- nav ------------------------------------------------------------------- */
.v2-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(237, 233, 227, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v2-line);
}
.v2-nav__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.v2-brand {
  font-family: var(--v2-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.02em; text-transform: uppercase; text-decoration: none;
  margin-right: auto; white-space: nowrap;
}
.v2-nav__links { display: flex; gap: 28px; }
.v2-nav__links a {
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--v2-muted); padding: 6px 0;
}
.v2-nav__links a:hover { color: var(--v2-ink); }
@media (max-width: 960px) { .v2-nav__links { display: none; } }
@media (max-width: 520px) { .v2-nav__cta { min-height: 44px; padding: 0 16px; font-size: 14px; } }

/* --- hero: naad tussen hard en soft ---------------------------------------- */
.v2-hero { background: var(--v2-bone); overflow: clip; }
.v2-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 66px); align-items: center; padding: clamp(46px, 6vw, 96px) 0 clamp(52px, 7vw, 104px); }
.v2-hero h1 {
  font-family: var(--v2-display); font-weight: 700;
  font-size: clamp(40px, 8.2vw, 108px); line-height: .94; letter-spacing: -.045em;
  margin-top: 20px;
}
.v2-hero h1 .hard { color: var(--v2-hard-d); }
.v2-hero h1 .soft { color: var(--v2-soft-d); }
.v2-hero__sub { margin-top: 24px; max-width: 46ch; color: var(--v2-muted); font-size: clamp(15px, 1.5vw, 18px); }
.v2-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.v2-hero__strip {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--v2-line);
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .06em; color: var(--v2-muted);
}
.v2-hero__strip b { color: var(--v2-ink); font-weight: 400; }
/* twee materialen, één naad ertussen */
.v2-hero__stack { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
.v2-hero__mat { position: relative; }
.v2-hero__mat img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; }
.v2-hero__mat figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 13px;
  background-image: linear-gradient(0deg, rgba(25,20,19,.92) 0%, rgba(25,20,19,.66) 55%, rgba(25,20,19,0) 100%);
  font-family: var(--v2-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #F4EFEA;
}
.v2-hero__mat--hard figcaption b { color: var(--v2-hard-l); font-weight: 400; display: block; }
.v2-hero__mat--soft figcaption b { color: var(--v2-soft-l); font-weight: 400; display: block; }
@media (max-width: 900px) {
  .v2-hero__in { grid-template-columns: 1fr; }
  .v2-hero__stack { max-width: 460px; }
}

/* --- signature: zone en materiaal ------------------------------------------ */
.v2-zones { background: var(--v2-dark); color: var(--v2-on-dark); }
.v2-zones__head { max-width: 60ch; }
.v2-zones__grid {
  margin-top: clamp(32px, 4.5vw, 56px);
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 4vw, 60px); align-items: start;
}
.v2-zonelist { display: grid; gap: 2px; min-width: 0; }
.v2-zonelist__b {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 62px; padding: 12px 18px; text-align: left;
  border: 1px solid var(--v2-line-dark);
  color: var(--v2-muted-dark);
  transition: background .25s, color .25s, border-color .25s;
}
.v2-zonelist__b:hover { color: var(--v2-on-dark); border-color: rgba(239,234,229,.42); }
.v2-zonelist__b[aria-selected="true"] { background: var(--v2-on-dark); color: var(--v2-ink); border-color: var(--v2-on-dark); }
.v2-zonelist__n { font-family: var(--v2-mono); font-size: 11px; opacity: .8; }
.v2-zonelist__t { font-family: var(--v2-display); font-weight: 500; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: -.01em; }
.v2-zonelist__m {
  margin-left: auto; font-family: var(--v2-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.v2-zonelist__b .v2-zonelist__m[data-wax="hard"] { color: var(--v2-hard-l); }
.v2-zonelist__b .v2-zonelist__m[data-wax="soft"] { color: var(--v2-soft-l); }
.v2-zonelist__b[aria-selected="true"] .v2-zonelist__m[data-wax="hard"] { color: var(--v2-hard-d); }
.v2-zonelist__b[aria-selected="true"] .v2-zonelist__m[data-wax="soft"] { color: var(--v2-soft-d); }

.v2-zonepanel { min-width: 0; }
.v2-zonepanel + .v2-zonepanel { margin-top: 34px; }
html.js .v2-zonepanel + .v2-zonepanel { margin-top: 0; }
html.js .v2-zonepanel:not([data-active]) { display: none; }
.v2-zonepanel__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.v2-zonepanel__wax {
  font-family: var(--v2-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px; white-space: nowrap;
}
.v2-zonepanel__wax[data-wax="hard"] { background: var(--v2-hard); color: #FFFFFF; }
.v2-zonepanel__wax[data-wax="soft"] { background: var(--v2-soft-l); color: var(--v2-dark); }
.v2-zonepanel__why { margin-top: 16px; color: var(--v2-muted-dark); max-width: 50ch; }
.v2-zonepanel__rows { margin-top: 26px; border-top: 1px solid var(--v2-line-dark); }
.v2-zonepanel__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--v2-line-dark);
}
.v2-zonepanel__row dt { min-width: 0; font-size: 15px; }
.v2-zonepanel__dur { font-family: var(--v2-mono); font-size: 11px; color: var(--v2-muted-dark); white-space: nowrap; margin: 0; }
.v2-zonepanel__price { font-family: var(--v2-display); font-weight: 500; font-size: 19px; white-space: nowrap; margin: 0; }
@media (max-width: 900px) { .v2-zones__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .v2-zonelist__m { display: none; }
  .v2-zonepanel__row { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-zonepanel__dur { grid-column: 1; grid-row: 2; }
  .v2-zonepanel__price { grid-row: 1 / span 2; align-self: center; }
}

/* --- materiaalvergelijking ------------------------------------------------- */
.v2-mat__grid {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.v2-mat__card { background: var(--v2-paper); min-width: 0; display: flex; flex-direction: column; }
.v2-mat__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.v2-mat__body { padding: clamp(22px, 2.6vw, 34px); flex: 1; }
.v2-mat__rule { height: 4px; }
.v2-mat__rule--hard { background: var(--v2-hard); }
.v2-mat__rule--soft { background: var(--v2-soft-l); }
.v2-mat__title { margin-top: 16px; }
.v2-mat__text { margin-top: 14px; color: var(--v2-muted); }
.v2-mat__where {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--v2-line);
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .05em; color: var(--v2-muted);
}
.v2-mat__where b { display: block; margin-bottom: 6px; letter-spacing: .12em; text-transform: uppercase; }
.v2-mat__card--hard .v2-mat__where b { color: var(--v2-hard-d); }
.v2-mat__card--soft .v2-mat__where b { color: var(--v2-soft-d); }

/* --- catalogus ------------------------------------------------------------- */
.v2-cat { background: var(--v2-bone-2); }
.v2-cat__head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: end; }
.v2-cat__tabs { display: flex; gap: 4px; }
.v2-cat__tabs button {
  min-height: 44px; padding: 0 20px; border: 1px solid var(--v2-line);
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-muted); transition: background .25s, color .25s, border-color .25s;
}
.v2-cat__tabs button[aria-selected="true"] { background: var(--v2-ink); color: var(--v2-on-dark); border-color: var(--v2-ink); }
.v2-cat__cols { margin-top: clamp(26px, 3.5vw, 44px); columns: 2; column-gap: clamp(28px, 4vw, 60px); }
.v2-cat__row {
  break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--v2-line);
}
.v2-cat__name { min-width: 0; font-size: 14.5px; }
.v2-cat__dur { font-family: var(--v2-mono); font-size: 10.5px; color: var(--v2-muted); white-space: nowrap; }
.v2-cat__price { font-family: var(--v2-mono); font-size: 13px; white-space: nowrap; }
.v2-cat__foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
@media (max-width: 780px) { .v2-cat__cols { columns: 1; } }

/* --- werkwijze: genummerde reeks ------------------------------------------- */
.v2-steps__grid {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  counter-reset: v2step;
}
.v2-steps__item { min-width: 0; padding-top: 20px; border-top: 2px solid var(--v2-ink); }
.v2-steps__n {
  font-family: var(--v2-mono); font-size: 11px; letter-spacing: .12em; color: var(--v2-hard-d);
}
.v2-steps__t { margin-top: 12px; font-family: var(--v2-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.v2-steps__d { margin-top: 10px; font-size: 14px; color: var(--v2-muted); }

/* --- kennisbank: accordeon -------------------------------------------------- */
.v2-faq { background: var(--v2-dark); color: var(--v2-on-dark); }
.v2-faq__grid { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.v2-faq__list { min-width: 0; border-top: 1px solid var(--v2-line-dark); }
.v2-faq__item { border-bottom: 1px solid var(--v2-line-dark); }
/* Native details/summary: de kennisbank werkt daardoor volledig zonder
   JavaScript, inclusief toetsenbord. Geen aria-state die kan gaan liegen. */
.v2-faq__q {
  display: flex; gap: 20px; align-items: center;
  min-height: 66px; padding: 14px 0; cursor: pointer;
  list-style: none; color: var(--v2-on-dark);
}
.v2-faq__q::-webkit-details-marker { display: none; }
.v2-faq__qt {
  font-family: var(--v2-display); font-weight: 500; font-size: clamp(15.5px, 1.7vw, 20px);
  letter-spacing: -.01em; min-width: 0;
}
.v2-faq__q:hover { color: var(--v2-hard-l); }
.v2-faq__ico { margin-left: auto; flex: none; transition: transform .3s; }
.v2-faq__item[open] .v2-faq__ico { transform: rotate(45deg); }
.v2-faq__a { padding: 0 0 22px; color: var(--v2-muted-dark); max-width: 62ch; }
.v2-faq__a p + p { margin-top: 12px; }
@media (max-width: 900px) { .v2-faq__grid { grid-template-columns: 1fr; } }

/* --- over Kimberley -------------------------------------------------------- */
.v2-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 4.5vw, 70px); align-items: center; }
.v2-about__q {
  font-family: var(--v2-display); font-weight: 500;
  font-size: clamp(22px, 3.1vw, 40px); line-height: 1.16; letter-spacing: -.025em; margin-top: 20px;
}
.v2-about__by { margin-top: 22px; font-family: var(--v2-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-muted); }
.v2-about__team { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--v2-line); display: grid; gap: 14px; }
.v2-about__team div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.v2-about__team b { font-family: var(--v2-display); font-weight: 500; font-size: 16px; }
.v2-about__team span { font-size: 13px; color: var(--v2-muted); }
.v2-about__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.v2-about__cap { margin-top: 12px; font-family: var(--v2-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-muted); }
@media (max-width: 860px) { .v2-about__grid { grid-template-columns: 1fr; } }

/* --- bezoek: volle band ----------------------------------------------------- */
.v2-visit { background: var(--v2-ink); color: var(--v2-on-dark); }
.v2-visit__big {
  font-family: var(--v2-display); font-weight: 700;
  font-size: clamp(32px, 6.4vw, 82px); line-height: .98; letter-spacing: -.04em; margin-top: 18px;
}
.v2-visit__grid {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  padding-top: 30px; border-top: 1px solid var(--v2-line-dark);
}
.v2-visit__k { font-family: var(--v2-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-muted-dark); }
.v2-visit__v { margin-top: 10px; font-size: 15px; }
.v2-visit__v a { text-decoration: none; border-bottom: 1px solid var(--v2-hard-l); padding-bottom: 1px; }
.v2-visit__v a:hover { color: var(--v2-hard-l); }
.v2-visit__cta { margin-top: clamp(32px, 4vw, 50px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- footer ---------------------------------------------------------------- */
.v2-foot { background: var(--v2-bone); padding: 40px 0 38px; border-top: 1px solid var(--v2-line); }
.v2-foot__in { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; }
.v2-foot__meta { font-family: var(--v2-mono); font-size: 11px; letter-spacing: .06em; color: var(--v2-muted); display: grid; gap: 5px; }
.v2-foot__credit { font-size: 13px; color: var(--v2-muted); }
.v2-foot__credit a { color: var(--v2-hard-d); text-underline-offset: 3px; }