/*
Theme Name: Dierenarts Dierzaam
Theme URI: https://dierenartsdierzaam.nl/
Author: Dierenarts Dierzaam
Description: Op maat gemaakt WordPress-blokthema voor Dierenarts Dierzaam — dierenarts aan huis in Culemborg en omgeving. Warme, rustige uitstraling. Volledig bewerkbaar via de WordPress-editor (teksten, foto's, tarieven, pagina's en blog).
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dierzaam
Tags: block-theme, full-site-editing, business, custom-colors, custom-logo
*/

/* =========================================================================
   Dierzaam Design System — Colors & Typography
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------
   Display / headings:  "Lora"        — warm humanist serif, gentle calls
   UI / body:           "Nunito Sans" — rounded humanist sans, friendly + readable
   Mono:                "JetBrains Mono"

   NOTE: We do not have access to the live site's webfonts. The live
   dierenartsdierzaam.nl runs on Elementor and likely uses Roboto. We've
   substituted a warmer pairing that matches the brand voice ("Professioneel
   en warm"). Swap below if real brand fonts arrive.
------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Brand color tokens ----------------------------------------------
     Sampled directly from the Dierzaam mark — the deep slate-teal of the
     dog silhouette, the bright aqua-teal of the cat, and the misty
     silver-blue background. */
  --teal-900: #143844;   /* deep ink-teal — text on light, deep accents */
  --teal-800: #1F4A55;   /* primary headings color */
  --teal-700: #2D6373;   /* PRIMARY — buttons, links, brand voice */
  --teal-600: #3C7E91;
  --teal-500: #4A98A8;   /* mid teal — illustration accents */
  --teal-400: #57BCC9;   /* ACCENT — bright cat-teal, highlights */
  --teal-300: #8FD0D8;
  --teal-200: #B7D6DC;
  --teal-100: #D7E8EB;
  --teal-50:  #EAF3F4;   /* tint backgrounds */

  /* ---- Warm neutrals (cream side) ---------------------------------------
     Pair with the cool teals to land "professioneel en warm". */
  --cream-50:  #FBF8F2;  /* page background */
  --cream-100: #F4EFE4;  /* card-on-cream */
  --cream-200: #EAE3D2;  /* dividers, soft chips */
  --sand-300:  #D9CDB3;
  --gold-500:  #C99A52;  /* warm gold accent — collars, dot accents */
  --gold-600:  #A77B3B;

  /* ---- Ink neutrals ----------------------------------------------------- */
  --ink-1000: #0E1F23;
  --ink-900:  #14272C;
  --ink-800:  #1E343A;
  --ink-700:  #2E464D;
  --ink-600:  #455A60;
  --ink-500:  #6B7A7E;   /* muted body */
  --ink-400:  #8E9A9D;
  --ink-300:  #B5BEC0;
  --ink-200:  #D6DCDD;
  --ink-100:  #E9EDED;
  --ink-50:   #F4F6F6;
  --white:    #FFFFFF;

  /* ---- Semantic ---------------------------------------------------------
     Muted, earthy variants so badges don't fight the calm brand palette. */
  --success: #6F9E7B;     /* sage — healthy / appointment confirmed */
  --success-soft: #DEEBE0;
  --warning: #D7A24A;     /* warm honey — reminders */
  --warning-soft: #F6E9C9;
  --danger:  #C0625A;     /* muted clay — emergency / euthanasia kept gentle */
  --danger-soft: #F2DDD9;
  --info:    var(--teal-600);
  --info-soft: var(--teal-50);

  /* ---- Semantic foreground / background --------------------------------- */
  --bg-page:        var(--cream-50);
  --bg-surface:     var(--white);
  --bg-surface-alt: var(--cream-100);
  --bg-tint:        var(--teal-50);
  --bg-inverse:     var(--teal-900);

  --fg-primary:   var(--ink-900);
  --fg-secondary: var(--ink-700);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--cream-50);
  --fg-brand:     var(--teal-700);
  --fg-link:      var(--teal-700);
  --fg-link-hover:var(--teal-800);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--teal-300);

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius (soft, never sharp) --------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------
     Soft, warm-tinted, never crisp grey. Reads like late-afternoon light. */
  --shadow-xs: 0 1px 2px rgba(20, 56, 68, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 56, 68, 0.07), 0 1px 2px rgba(20, 56, 68, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(20, 56, 68, 0.12), 0 2px 6px rgba(20, 56, 68, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(20, 56, 68, 0.18), 0 6px 12px rgba(20, 56, 68, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-focus: 0 0 0 3px rgba(74, 152, 168, 0.35);

  /* ---- Type families --------------------------------------------------- */
  --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (modular ~1.2) ---------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  /* ---- Weights --------------------------------------------------------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Line heights ---------------------------------------------------- */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* ---- Letter spacing -------------------------------------------------- */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;   /* eyebrow / smallcaps look */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* gentle settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   Semantic typography classes (use these in markup)
   ========================================================================= */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.ds-display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  font-weight: var(--fw-regular);   /* serif looks best lighter */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--teal-800);
  text-wrap: balance;
}

.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--teal-800);
  text-wrap: balance;
}

.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-primary);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.ds-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--fg-muted);
  letter-spacing: var(--ls-wide);
}

.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--teal-800);
}

.ds-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--teal-50);
  color: var(--teal-800);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* Common base for all design directions.
   Each design artboard is a 1440-wide self-contained mock that uses the
   Dierzaam tokens. Per-design styles live in dN.css. */

.artboard-reset, .artboard-reset * { box-sizing: border-box; }
.artboard-reset {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  min-height: 100%;
}
.artboard-reset a { color: inherit; text-decoration: none; }
.artboard-reset button { font: inherit; cursor: pointer; }

/* Placeholder photo utility — every design uses these. */
.ph {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--teal-50) 0%, var(--cream-100) 60%, var(--cream-200) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500);
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 35%, rgba(45,99,115,0.10) 0 22%, transparent 25%),
    radial-gradient(circle at 72% 60%, rgba(201,154,82,0.10) 0 16%, transparent 20%);
  pointer-events: none;
}
.ph-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--teal-800);
  padding: 8px 14px;
  background: rgba(251,248,242,0.7);
  border-radius: 999px;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 80%;
}
.ph-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: rgba(20,56,68,0.78);
  color: white;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Tiny inline icon stub used inside designs — keeps each design self-contained
   without needing Lucide loaded inside an iframe-less artboard. */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  vertical-align: -0.15em;
}

/* ============================================================
   Design 6 — Combinatie 1 + 4
   Klassieke ritme van D1 (alternerende dienst-rijen, persoonlijk,
   warm) gekruist met D4's service-first booking-widget en
   praktische trust-bar. Meer teal/blauw, meer foto's.
   ============================================================ */

.d6 { font-family: var(--font-sans); color: var(--ink-800); background: var(--cream-50); }
.d6 .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 48px; }

/* ---- Warmere photo placeholders, lokaal voor D6 ---- */
.d6 .ph6 {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 30% 35%, rgba(45,99,115,0.22), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(87,188,201,0.28), transparent 60%),
    linear-gradient(135deg, var(--teal-100) 0%, var(--cream-100) 55%, var(--cream-200) 100%);
}
.d6 .ph6.warm {
  background:
    radial-gradient(circle at 25% 30%, rgba(201,154,82,0.22), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(45,99,115,0.20), transparent 60%),
    linear-gradient(140deg, #f3e8d6 0%, var(--cream-100) 60%, var(--teal-50) 100%);
}
.d6 .ph6.deep {
  background:
    radial-gradient(circle at 65% 35%, rgba(87,188,201,0.30), transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(201,154,82,0.16), transparent 55%),
    linear-gradient(150deg, var(--teal-900) 0%, var(--teal-800) 60%, var(--teal-700) 100%);
  color: rgba(255,255,255,0.92);
}
.d6 .ph6-label {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  color: var(--teal-900); background: rgba(251,248,242,0.88);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  z-index: 3;
}
/* Echte foto's gerenderd binnenin .ph6: vult volledig, valt netjes terug
   op de gradient achtergrond als de afbeelding faalt. */
.d6 .ph6 > img.ph6-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.d6 .ph6.deep .d6 .ph6-label,
.d6 .ph6.deep > .d6 .ph6-label { background: rgba(20,56,68,0.6); color: #fff; }
.d6 .ph6-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(20,56,68,0.82); color: white;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; z-index: 2;
}

/* ---- Trust bar (D4-stijl) ---- */
.d6-trust {
  background: var(--teal-900); color: rgba(255,255,255,0.82);
  font-size: 13px; padding: 9px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.d6-trust .ks { display: flex; gap: 28px; }
.d6-trust .ks span { display: inline-flex; align-items: center; gap: 7px; }
.d6-trust .ks svg { color: var(--teal-300); }
.d6-trust .stars { color: var(--gold-500); letter-spacing: 2px; }

/* ---- Header ---- */
.d6-header {
  background: var(--cream-50); border-bottom: 1px solid var(--cream-200);
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.d6-header .brand { display: flex; align-items: center; gap: 14px; }
.d6-header .brand .mark { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; background: var(--cream-100); }
.d6-header .brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.d6-header .brand .name { font-family: var(--font-display); font-size: 19px; color: var(--teal-800); line-height: 1.1; }
.d6-header .brand .sub { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin-top: 3px; }
.d6-header nav { display: flex; gap: 30px; }
.d6-header nav a { font-size: 15px; font-weight: 600; color: var(--ink-800); }
.d6-header nav a.active { color: var(--teal-700); }
.d6-header .right { display: flex; align-items: center; gap: 14px; }
.d6-header .right .ph-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-800); }

.d6-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; line-height: 1;
  border: 1px solid transparent;
  transition: background-color .2s, box-shadow .2s;
}
.d6-btn-primary { background: var(--teal-700); color: white; box-shadow: var(--shadow-sm); }
.d6-btn-cta { background: var(--gold-500); color: var(--teal-900); }
.d6-btn-ghost { background: transparent; color: var(--teal-700); border-color: var(--teal-200); }
.d6-btn-inv { background: var(--teal-400); color: var(--teal-900); }
.d6-btn-outline-inv { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }
.d6-btn-block { width: 100%; justify-content: center; padding: 14px 18px; }

/* ---- Hero: cream + portretfoto + booking widget ---- */
.d6-hero {
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--teal-50) 100%);
  padding: 56px 0 72px;
}
.d6-hero .grid {
  display: grid; grid-template-columns: 1.05fr 1fr 420px;
  gap: 40px; align-items: stretch;
}
.d6-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 16px;
}
.d6-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold-500); display: inline-block; }
.d6-hero h1 {
  font-family: var(--font-display); font-size: 58px; font-weight: 400;
  line-height: 1.03; letter-spacing: -0.02em; color: var(--teal-900);
  margin: 0 0 22px; text-wrap: balance;
}
.d6-hero h1 em { font-style: italic; color: var(--teal-600); }
.d6-hero .lead { font-size: 18px; line-height: 1.7; color: var(--ink-700); margin: 0 0 26px; max-width: 480px; }
.d6-hero .trust-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--teal-100);
  font-size: 14px; color: var(--ink-700);
}
.d6-hero .trust-row .stars { color: var(--gold-500); letter-spacing: 3px; }
.d6-hero-photo {
  position: relative;
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 560px;
}
.d6-hero-photo .badge {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(251,248,242,0.94); color: var(--teal-900);
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; max-width: 260px;
  box-shadow: var(--shadow-sm);
}
.d6-hero-photo .badge .av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal-100); flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; color: var(--teal-700);
  font-family: var(--font-display); font-size: 18px;
}
.d6-hero-photo .badge .nm { font-family: var(--font-display); font-size: 15px; color: var(--teal-900); line-height: 1.1; }
.d6-hero-photo .badge .role { font-size: 11px; color: var(--ink-600); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
/* Hero-portretfoto: houd het gezicht in beeld bij brede uitsnede (mobiel/tablet). */
.d6 .d6-hero-photo > img.ph6-img { object-position: 50% 20%; }

/* Booking widget — D4-stijl, iets warmer */
.d6-book {
  background: white; border: 1px solid var(--teal-100);
  border-radius: 20px; padding: 26px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.d6-book .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.d6-book h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--teal-800); margin: 0; }
.d6-book .tag { background: var(--success-soft); color: var(--success); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.d6-book .field { margin-bottom: 14px; }
.d6-book label { font-size: 11px; font-weight: 700; color: var(--ink-700); display: block; margin-bottom: 7px; letter-spacing: 0.06em; text-transform: uppercase; }
.d6-book .pet-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.d6-book .pet-pick button {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 10px; padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
}
.d6-book .pet-pick button.on { background: var(--teal-50); border-color: var(--teal-400); color: var(--teal-800); }
.d6-book select, .d6-book input {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--cream-200); background: var(--cream-50);
  border-radius: 10px; font-size: 14px; color: var(--ink-800); font-family: inherit;
  appearance: none;
}
.d6-book .slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.d6-book .slot { text-align: center; padding: 9px 0; border: 1px solid var(--cream-200); background: var(--cream-50); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-700); }
.d6-book .slot.on { background: var(--teal-700); border-color: var(--teal-700); color: white; }
.d6-book .slot.off { color: var(--ink-300); background: transparent; text-decoration: line-through; }
.d6-book .note { font-size: 12px; color: var(--ink-600); margin: 12px 0 14px; line-height: 1.5; }
.d6-book .note strong { color: var(--teal-700); }

/* ---- Persoonlijke intro: "Hoi, ik ben Grégor" ---- */
.d6-meet { background: var(--teal-50); padding: 80px 0; border-top: 1px solid var(--teal-100); border-bottom: 1px solid var(--teal-100); }
.d6-meet .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.d6-meet .photo-stack { position: relative; min-height: 460px; }
.d6-meet .photo-stack .a, .d6-meet .photo-stack .b {
  position: absolute; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.d6-meet .photo-stack .a { width: 76%; height: 80%; top: 0; left: 0; }
.d6-meet .photo-stack .b { width: 56%; height: 50%; bottom: 0; right: 0; border: 6px solid var(--teal-50); }
.d6-meet h2 {
  font-family: var(--font-display); font-size: 42px; font-weight: 400; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--teal-900); margin: 12px 0 18px;
}
.d6-meet h2 em { font-style: italic; color: var(--teal-600); }
.d6-meet p { font-size: 17px; line-height: 1.75; color: var(--ink-700); margin: 0 0 14px; max-width: 540px; }
.d6-meet .sig { margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--teal-700); }
.d6-meet .mini { display: flex; gap: 32px; margin-top: 28px; }
.d6-meet .mini > div { padding-left: 16px; border-left: 2px solid var(--teal-300); }
.d6-meet .mini .v { font-family: var(--font-display); font-size: 26px; color: var(--teal-800); line-height: 1; }
.d6-meet .mini .k { font-size: 12px; color: var(--ink-600); margin-top: 6px; letter-spacing: 0.04em; }

/* ---- Why at home — D1-stijl, 3 kaarten ---- */
.d6-why { padding: 88px 0; background: var(--cream-50); }
.d6-section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.d6-section-head .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 16px;
}
.d6-section-head .kicker::before, .d6-section-head .kicker::after { content: ""; width: 22px; height: 1px; background: var(--gold-500); }
.d6-section-head h2 { font-family: var(--font-display); font-size: 42px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--teal-900); margin: 0 0 14px; text-wrap: balance; }
.d6-section-head p { font-size: 17px; line-height: 1.65; color: var(--ink-700); margin: 0; }
.d6-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.d6-why-card {
  background: white; border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 32px 28px;
  transition: transform .2s, box-shadow .2s;
}
.d6-why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.d6-why-card .ic { width: 50px; height: 50px; border-radius: 12px; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; margin-bottom: 18px; }
.d6-why-card h3 { font-size: 19px; font-weight: 700; color: var(--teal-900); margin: 0 0 10px; }
.d6-why-card p { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin: 0; }

/* ---- Services — alternerende rijen (D1) met prijs-chip (D4) ---- */
.d6-services { padding: 80px 0; background: var(--cream-50); }
.d6-service-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center; padding: 56px 0;
  border-bottom: 1px solid var(--cream-200);
}
.d6-service-row:last-child { border-bottom: 0; }
.d6-service-row.rev .text { order: 2; }
.d6-service-row.rev .photo { order: 1; }
.d6-service-row .num {
  font-family: var(--font-display); font-style: italic; font-size: 52px;
  color: var(--teal-400); line-height: 1; margin-bottom: 6px;
}
.d6-service-row h3 { font-family: var(--font-display); font-size: 34px; font-weight: 400; color: var(--teal-900); line-height: 1.15; margin: 0 0 16px; }
.d6-service-row p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 20px; max-width: 480px; }
.d6-service-row .features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.d6-service-row .features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-700); }
.d6-service-row .features li .ck { color: var(--teal-500); }
.d6-service-row .photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-md);
  position: relative;
}
.d6-service-row .photo .price-pill {
  position: absolute; bottom: 16px; right: 16px;
  background: white; padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-display); font-size: 20px; color: var(--teal-800);
  box-shadow: var(--shadow-md);
}
.d6-service-row .photo .price-pill small { font-size: 10px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; display: block; line-height: 1; margin-bottom: 3px; }
.d6-link { font-size: 14px; font-weight: 700; color: var(--teal-700); display: inline-flex; align-items: center; gap: 6px; }

/* ---- Foto-strip: "Onderweg in Culemborg" ---- */
.d6-strip { padding: 72px 0; background: var(--teal-900); color: white; }
.d6-strip .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 24px; flex-wrap: wrap; }
.d6-strip .head .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 8px; }
.d6-strip .head h2 { font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1.1; margin: 0; color: white; max-width: 600px; }
.d6-strip .head .sub { font-size: 14px; color: rgba(255,255,255,0.65); max-width: 300px; line-height: 1.5; }
.d6-strip .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 16px; }
.d6-strip .row .cell {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; position: relative;
}
.d6-strip .row .cell.tall { aspect-ratio: 3 / 5; }
.d6-strip .row .cell.wide { aspect-ratio: 1 / 1; }

/* ---- Stappen ---- */
.d6-steps { padding: 80px 0; }
.d6-steps-strip {
  background: white; border: 1px solid var(--teal-100);
  border-radius: 22px; padding: 36px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  position: relative;
}
.d6-steps-strip .step { position: relative; padding-right: 12px; }
.d6-steps-strip .step:not(:last-child)::after {
  content: ""; position: absolute; right: -14px; top: 16px;
  width: 28px; height: 1px; background: var(--teal-200);
}
.d6-steps-strip .n {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal-700); color: white;
  font-family: var(--font-display); font-size: 18px;
  display: grid; place-items: center; margin-bottom: 14px;
}
.d6-steps-strip h4 { font-size: 17px; font-weight: 700; color: var(--teal-900); margin: 0 0 8px; }
.d6-steps-strip p { font-size: 14px; line-height: 1.6; color: var(--ink-700); margin: 0; }

/* ---- Tarieven ---- */
.d6-tarieven { padding: 80px 0; background: var(--cream-100); border-top: 1px solid var(--cream-200); border-bottom: 1px solid var(--cream-200); }
.d6-tar-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: stretch; }
.d6-tar-intro h2 { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--teal-900); margin: 12px 0 16px; }
.d6-tar-intro p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 14px; max-width: 420px; }
.d6-tar-intro .pdflink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--teal-700); margin-top: 8px; }
.d6-tar-intro .voorrij {
  margin-top: 28px; background: white; border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg); padding: 18px 22px;
  display: flex; align-items: center; gap: 14px;
}
.d6-tar-intro .voorrij .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; flex-shrink: 0; }
.d6-tar-intro .voorrij .k { font-size: 11px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.d6-tar-intro .voorrij .v { font-family: var(--font-display); font-size: 20px; color: var(--teal-800); line-height: 1.2; }
.d6-tar-intro .voorrij .v small { display: block; font-family: var(--font-sans); font-size: 12px; font-style: normal; color: var(--ink-500); margin-top: 4px; letter-spacing: 0; text-transform: none; }
.d6-tar-table {
  background: white; border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.d6-tar-row {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 18px; align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cream-200);
  transition: background-color .15s;
}
.d6-tar-row:last-child { border-bottom: 0; }
.d6-tar-row:hover { background: var(--teal-50); }
.d6-tar-row .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; flex-shrink: 0; }
.d6-tar-row .t { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--teal-900); line-height: 1.2; }
.d6-tar-row .d { font-size: 13px; color: var(--ink-600); margin-top: 4px; }
.d6-tar-row .price { font-family: var(--font-display); font-size: 22px; color: var(--teal-700); text-align: right; line-height: 1; white-space: nowrap; }
.d6-tar-row .price small { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 5px; }

/* ---- Testimonials ---- */
.d6-testimonials { padding: 80px 0; background: var(--teal-50); }
.d6-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.d6-test {
  background: white; border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.d6-test .stars { color: var(--gold-500); letter-spacing: 2px; font-size: 16px; }
.d6-test blockquote { font-family: var(--font-display); font-size: 18px; line-height: 1.5; color: var(--teal-900); margin: 0; font-weight: 400; }
.d6-test .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cream-200); }
.d6-test .who .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.d6-test .who .nm { font-size: 14px; font-weight: 700; color: var(--teal-800); }
.d6-test .who .pet { font-size: 12px; color: var(--ink-600); margin-top: 2px; }

/* ---- Werkgebied ---- */
.d6-area { padding: 80px 0; }
.d6-area-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.d6-area-map { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--teal-100); }
.d6-area h2 { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--teal-900); margin: 10px 0 16px; }
.d6-area p { font-size: 17px; line-height: 1.7; color: var(--ink-700); margin: 0 0 18px; max-width: 480px; }
.d6-area .places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.d6-area .places span { background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--teal-800); }

/* ---- CTA band ---- */
.d6-cta-band { padding: 64px 0 96px; }
.d6-cta-inner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%);
  color: white; border-radius: var(--radius-2xl);
  padding: 64px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center;
}
.d6-cta-inner::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,188,201,0.28), transparent 70%);
}
.d6-cta-inner::after {
  content: ""; position: absolute; left: -80px; bottom: -100px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,154,82,0.18), transparent 70%);
}
.d6-cta-inner h2 { font-family: var(--font-display); font-size: 42px; font-weight: 400; line-height: 1.1; margin: 0 0 16px; color: white; text-wrap: balance; position: relative; z-index: 1; }
.d6-cta-inner p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.8); margin: 0 0 26px; max-width: 480px; position: relative; z-index: 1; }
.d6-cta-panel {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.d6-cta-panel .row { display: flex; align-items: center; gap: 14px; }
.d6-cta-panel .row .ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(87,188,201,0.2); color: var(--teal-300); display: grid; place-items: center; flex-shrink: 0; }
.d6-cta-panel .k { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
.d6-cta-panel .v { font-size: 15px; color: white; }
.d6-cta-panel .k, .d6-cta-panel .v { margin: 0; }
.d6-cta-panel .row > .wp-block-group:not(.ic) { display: flex; flex-direction: column; gap: 2px; }

/* ---- Footer ---- */
.d6-footer { background: var(--teal-900); color: rgba(255,255,255,0.7); padding: 64px 48px 24px; border-top: 1px solid rgba(255,255,255,0.06); }
.d6-footer-inner { max-width: 1240px; margin: 0 auto; }
.d6-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.d6-footer h4 { font-size: 12px; color: white; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 16px; font-weight: 700; }
.d6-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.d6-footer .col-1 .logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.d6-footer .col-1 .logo-row .mark { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.08); }
.d6-footer .col-1 .logo-row .mark img { width: 100%; height: 100%; object-fit: cover; }
.d6-footer .col-1 .name { font-family: var(--font-display); font-size: 20px; color: white; }
.d6-footer .col-1 p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 320px; margin: 8px 0 0; }
.d6-footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.5); }

/* ---- Sub-page: Over Grégor ---- */
.d6-over-hero { padding: 64px 0 32px; }
.d6-over-hero .crumb { font-size: 13px; color: var(--ink-500); margin-bottom: 14px; }
.d6-over-hero .crumb a { color: var(--teal-700); font-weight: 600; }
.d6-over-hero h1 { font-family: var(--font-display); font-size: 60px; font-weight: 400; color: var(--teal-900); margin: 0 0 16px; line-height: 1.02; letter-spacing: -0.02em; max-width: 900px; }
.d6-over-hero h1 em { font-style: italic; color: var(--teal-600); }
.d6-over-hero p { font-size: 19px; line-height: 1.7; color: var(--ink-700); max-width: 660px; margin: 0; }

.d6-over-portrait {
  padding: 32px 0 80px;
}
.d6-over-portrait .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; }
.d6-over-portrait .main {
  aspect-ratio: 4 / 5; border-radius: var(--radius-2xl);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.d6-over-portrait .body p { font-size: 17px; line-height: 1.8; color: var(--ink-700); margin: 0 0 18px; }
.d6-over-portrait .body p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 64px; line-height: 0.9;
  float: left; padding: 6px 12px 0 0; color: var(--teal-700);
}
.d6-over-portrait .body .pull {
  margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--teal-400);
  background: var(--teal-50); border-radius: 0 12px 12px 0;
  font-family: var(--font-display); font-style: italic; font-size: 20px;
  color: var(--teal-900); line-height: 1.5;
}

.d6-over-facts { padding: 64px 0; background: var(--teal-900); color: white; }
.d6-over-facts .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.d6-over-facts .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 14px; }
.d6-over-facts h2 { font-family: var(--font-display); font-size: 38px; font-weight: 400; line-height: 1.15; margin: 0 0 16px; }
.d6-over-facts > .wrap > .grid > div > p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 440px; }
.d6-over-facts .list { display: flex; flex-direction: column; gap: 14px; }
.d6-over-facts .item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); padding: 18px 22px;
}
.d6-over-facts .item .ic { width: 44px; height: 44px; border-radius: 10px; background: rgba(87,188,201,0.18); color: var(--teal-300); display: grid; place-items: center; }
.d6-over-facts .item .t { font-family: var(--font-display); font-size: 18px; color: white; line-height: 1.2; }
.d6-over-facts .item .d { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.d6-over-facts .item .y { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--teal-300); }

.d6-over-gallery { padding: 80px 0; }
.d6-over-gallery .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; }
.d6-over-gallery .cell { border-radius: var(--radius-lg); overflow: hidden; }
.d6-over-gallery .cell.wide { grid-column: span 2; }
.d6-over-gallery .cell.tall { grid-row: span 2; }

/* ============================================================
   Sub-page: Diensten (detail)
   ============================================================ */
.d6-d-hero { padding: 64px 0 32px; }
.d6-d-hero .crumb { font-size: 13px; color: var(--ink-500); margin-bottom: 14px; }
.d6-d-hero .crumb a { color: var(--teal-700); font-weight: 600; }
.d6-d-hero h1 { font-family: var(--font-display); font-size: 60px; font-weight: 400; color: var(--teal-900); margin: 0 0 16px; line-height: 1.02; letter-spacing: -0.02em; max-width: 900px; }
.d6-d-hero h1 em { font-style: italic; color: var(--teal-600); }
.d6-d-hero p { font-size: 19px; line-height: 1.7; color: var(--ink-700); max-width: 660px; margin: 0; }

.d6-d-toc {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 24px 0 8px;
}
.d6-d-toc a {
  background: var(--cream-100); border: 1px solid var(--cream-200);
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  display: inline-flex; align-items: center; gap: 8px;
}
.d6-d-toc a .n { color: var(--teal-700); font-family: var(--font-display); font-style: italic; }

.d6-d-body { padding: 32px 0 80px; }
.d6-d-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }

.d6-d-detail {
  background: white; border: 1px solid var(--cream-200);
  border-radius: 20px; padding: 36px; margin-bottom: 18px;
  display: grid; grid-template-columns: 64px 1fr; gap: 28px;
}
.d6-d-detail .ic { width: 56px; height: 56px; border-radius: 14px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; }
.d6-d-detail .num { font-family: var(--font-display); font-style: italic; color: var(--teal-400); font-size: 22px; margin-bottom: 6px; }
.d6-d-detail h3 { font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--teal-900); margin: 0 0 12px; line-height: 1.15; }
.d6-d-detail .meta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.d6-d-detail .meta-row .price { font-family: var(--font-display); font-size: 24px; color: var(--teal-700); line-height: 1; }
.d6-d-detail .meta-row .price small { font-size: 11px; color: var(--ink-500); display: block; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; line-height: 1.2; }
.d6-d-detail .meta-row .pets { display: flex; gap: 4px; }
.d6-d-detail .meta-row .pets span { background: var(--cream-100); color: var(--ink-700); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
.d6-d-detail p { font-size: 16px; line-height: 1.7; color: var(--ink-700); margin: 0 0 14px; }
.d6-d-detail ul.included { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.d6-d-detail ul.included li { font-size: 14px; color: var(--ink-700); display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.d6-d-detail ul.included li .ck { color: var(--teal-500); flex-shrink: 0; }
.d6-d-detail .photo {
  aspect-ratio: 5 / 3; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.d6-d-detail .actions { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cream-200); flex-wrap: wrap; }

.d6-d-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.d6-d-aside .helpcard {
  background: var(--teal-900); color: white;
  border-radius: var(--radius-lg); padding: 22px;
  position: relative; overflow: hidden;
}
.d6-d-aside .helpcard::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,188,201,0.28), transparent 70%);
}
.d6-d-aside .helpcard h4 { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin: 0 0 8px; color: white; position: relative; z-index: 1; }
.d6-d-aside .helpcard p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 14px; position: relative; z-index: 1; }
.d6-d-aside .helpcard .btn-row { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ============================================================
   Sub-page: Contact
   ============================================================ */
.d6-c-hero { padding: 64px 0 32px; }
.d6-c-hero .crumb { font-size: 13px; color: var(--ink-500); margin-bottom: 14px; }
.d6-c-hero .crumb a { color: var(--teal-700); font-weight: 600; }
.d6-c-hero h1 { font-family: var(--font-display); font-size: 60px; font-weight: 400; color: var(--teal-900); margin: 0 0 16px; line-height: 1.02; letter-spacing: -0.02em; max-width: 900px; }
.d6-c-hero h1 em { font-style: italic; color: var(--teal-600); }
.d6-c-hero p { font-size: 19px; line-height: 1.7; color: var(--ink-700); max-width: 660px; margin: 0; }

.d6-c-body { padding: 32px 0 64px; }
.d6-c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.d6-c-info {
  display: flex; flex-direction: column; gap: 14px;
}
.d6-c-card {
  background: white; border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 22px 24px;
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center;
}
.d6-c-card .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; }
.d6-c-card .k { font-size: 11px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.d6-c-card .v { font-family: var(--font-display); font-size: 20px; color: var(--teal-900); line-height: 1.2; margin-top: 4px; }
.d6-c-card .v small { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--ink-600); margin-top: 4px; }

.d6-c-hours {
  background: var(--teal-900); color: white;
  border-radius: var(--radius-lg); padding: 24px 26px;
  position: relative; overflow: hidden;
}
.d6-c-hours::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,188,201,0.28), transparent 70%);
}
.d6-c-hours h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0 0 16px; color: white; position: relative; z-index: 1; }
.d6-c-hours .rows { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.d6-c-hours .rows .row { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; }
.d6-c-hours .rows .row:last-child { border-bottom: 0; padding-bottom: 0; }
.d6-c-hours .rows .day { color: rgba(255,255,255,0.78); }
.d6-c-hours .rows .val { color: white; font-weight: 600; }
.d6-c-hours .rows .row.closed .val { color: rgba(255,255,255,0.5); }

.d6-c-form {
  background: white; border: 1px solid var(--cream-200);
  border-radius: var(--radius-xl); padding: 32px;
  box-shadow: var(--shadow-sm);
}
.d6-c-form h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--teal-900); margin: 0 0 6px; }
.d6-c-form .sub { font-size: 14px; color: var(--ink-600); margin: 0 0 22px; }
.d6-c-form .field { margin-bottom: 14px; }
.d6-c-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d6-c-form label { font-size: 12px; font-weight: 700; color: var(--ink-700); display: block; margin-bottom: 7px; letter-spacing: 0.04em; text-transform: uppercase; }
.d6-c-form input, .d6-c-form select, .d6-c-form textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--cream-200); background: var(--cream-50);
  border-radius: 10px; font-size: 14px; color: var(--ink-800); font-family: inherit;
  appearance: none;
}
.d6-c-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.d6-c-form .submit-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.d6-c-form .submit-row .legal { font-size: 12px; color: var(--ink-500); max-width: 240px; line-height: 1.5; }

.d6-c-map {
  height: 280px; border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--teal-100);
  margin-top: 16px;
}

.d6-c-faq { padding: 64px 0; background: var(--teal-50); }
.d6-c-faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; }
.d6-c-faq .l h2 { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--teal-900); margin: 8px 0 16px; line-height: 1.1; letter-spacing: -0.015em; }
.d6-c-faq .l p { font-size: 15px; color: var(--ink-700); line-height: 1.65; margin-bottom: 20px; max-width: 380px; }
.d6-c-faq .qa { background: white; border: 1px solid var(--teal-100); border-radius: 12px; margin-bottom: 10px; padding: 20px 24px; }
.d6-c-faq .qa .q { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.d6-c-faq .qa .q h4 { font-size: 16px; font-weight: 700; color: var(--teal-900); margin: 0; }
.d6-c-faq .qa .q .chev { color: var(--teal-500); flex-shrink: 0; }
.d6-c-faq .qa.open .a { padding-top: 14px; }
.d6-c-faq .qa .a { font-size: 14px; line-height: 1.7; color: var(--ink-700); }

/* Dierzaam - Responsive laag voor de live site */
html, body { margin: 0; padding: 0; background: var(--cream-50); }
.d6 a.d6-btn { text-decoration: none; }

.d6-burger { display: none; background: transparent; border: 0; color: var(--teal-800); padding: 6px; align-items: center; }
.d6-header nav a { cursor: pointer; }
.nav-cta-mobile { display: none !important; }
.d6-trust .ks a { display: inline-flex; align-items: center; gap: 7px; }

.d6-hero h1 { font-size: clamp(34px, 5.2vw, 58px); }
.d6-over-hero h1, .d6-d-hero h1, .d6-c-hero h1 { font-size: clamp(34px, 5.2vw, 60px); }
.d6-section-head h2, .d6-meet h2, .d6-area h2, .d6-tar-intro h2,
.d6-cta-inner h2, .d6-over-facts h2, .d6-c-faq .l h2, .d6-strip .head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
}
.d6-service-row h3 { font-size: clamp(26px, 3vw, 34px); }

@media (max-width: 1024px) {
  .d6 .wrap { padding-inline: 32px; }
  .d6-hero .grid { grid-template-columns: 1fr; gap: 28px; }
  .d6-hero-photo { min-height: 420px; }
  .d6-book { max-width: 520px; }
  .d6-meet .grid { grid-template-columns: 1fr; gap: 36px; }
  .d6-meet .photo-stack { min-height: 380px; max-width: 520px; }
  .d6-tar-grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-area-grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-cta-inner { grid-template-columns: 1fr; gap: 32px; padding: 44px; }
  .d6-d-grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-d-aside { position: static; }
  .d6-d-aside .d6-book { max-width: none; }
  .d6-c-grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-c-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-over-portrait .grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-over-portrait .main { max-width: 520px; }
  .d6-over-facts .grid { grid-template-columns: 1fr; gap: 32px; }
  .d6-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .d6-header { position: relative; flex-wrap: wrap; }
  .d6-header .right .ph-link { display: none; }
  .d6-header .right .d6-btn-cta { display: none; }
  .d6-burger { display: inline-flex; }
  .d6-header nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--cream-50);
    border-bottom: 1px solid var(--cream-200);
    box-shadow: var(--shadow-md);
    padding: 8px 0; display: none; z-index: 50;
  }
  .d6-header nav.open { display: flex; }
  .d6-header nav a { padding: 14px 32px; font-size: 16px; border-bottom: 1px solid var(--cream-100); }
  .d6-header nav a:last-child { border-bottom: 0; }
  .nav-cta-mobile {
    display: inline-flex !important; align-items: center; gap: 8px;
    margin: 10px 24px 6px; padding: 13px 18px !important;
    background: var(--gold-500); color: var(--teal-900);
    border-radius: 10px; font-weight: 700; justify-content: center; border-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  .d6 .wrap { padding-inline: 20px; }
  .d6-trust { padding: 8px 20px; font-size: 12px; gap: 12px; flex-wrap: wrap; }
  .d6-trust .ks { gap: 14px; flex-wrap: wrap; }
  .hide-sm { display: none !important; }
  .d6-header { padding: 14px 20px; }
  .d6-header .brand .mark { width: 42px; height: 42px; }
  .d6-header .brand .name { font-size: 17px; }
  .d6-hero { padding: 36px 0 48px; }
  .d6-meet, .d6-why, .d6-services, .d6-tarieven,
  .d6-testimonials, .d6-area, .d6-steps { padding: 52px 0; }
  .d6-strip { padding: 48px 0; }
  .d6-why-grid { grid-template-columns: 1fr; gap: 16px; }
  .d6-test-grid { grid-template-columns: 1fr; gap: 16px; }
  .d6-steps-strip { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .d6-steps-strip .step:not(:last-child)::after { display: none; }
  .d6-service-row { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .d6-service-row.rev .text { order: 1; }
  .d6-service-row.rev .photo { order: 2; }
  .d6-service-row .photo { max-width: 460px; }
  .d6-service-row .num { font-size: 40px; }
  .d6-strip .row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .d6-strip .head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .d6-over-gallery .grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .d6-over-gallery .cell.wide, .d6-over-gallery .cell.tall { grid-column: auto; grid-row: auto; }
  .d6-over-gallery .cell { aspect-ratio: 4 / 3; }
  .d6-tar-row { grid-template-columns: 44px 1fr; gap: 14px; row-gap: 6px; padding: 16px 18px; }
  .d6-tar-row .price { grid-column: 2; text-align: left; margin-top: 2px; }
  .d6-meet .mini { flex-direction: column; gap: 16px; }
  .d6-cta-band { padding: 40px 0 64px; }
  .d6-cta-inner { padding: 32px 26px; border-radius: var(--radius-xl); }
  .d6-d-detail { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .d6-d-detail ul.included { grid-template-columns: 1fr; }
  .d6-d-detail .actions .d6-btn { flex: 1; justify-content: center; }
  .d6-c-form { padding: 24px 20px; }
  .d6-c-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .d6-c-form .submit-row { flex-direction: column; align-items: stretch; }
  .d6-c-form .submit-row .legal { max-width: none; }
  .d6-c-form .submit-row .d6-btn { justify-content: center; }
  .d6-footer { padding: 48px 20px 24px; }
  .d6-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .d6-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 480px) {
  .d6-strip .row { grid-template-columns: 1fr; }
  .d6-over-gallery .grid { grid-template-columns: 1fr; }
  .d6-footer-grid { grid-template-columns: 1fr; }
  .d6-book .slot-grid { grid-template-columns: 1fr 1fr; }
  .d6-hero-photo { min-height: 340px; }
}

.d6-c-faq .qa { cursor: pointer; user-select: none; }



/* =========================================================================
   WordPress-aanpassingen — Dierzaam blokthema
   Houdt het oorspronkelijke ontwerp identiek binnen de WordPress-omgeving.
   ========================================================================= */

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

html { scroll-behavior: smooth; }

/* De hele site draait in de 'd6'-ontwerpcontext (body krijgt class 'd6' via functions.php). */
body.d6 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}
body.d6 a { color: inherit; text-decoration: none; }
body.d6 button { font: inherit; cursor: pointer; }

/* WordPress-blokken neutraliseren zodat ons eigen ontwerp leidend blijft. */
.d6 .wp-block-group,
.d6 .wp-block-columns,
.d6 .wp-block-column { margin: 0; }
.d6 .wp-block-heading { margin: 0; }
.d6 p { margin: 0; }
.d6 .wp-block-image { margin: 0; }
.d6 .wp-block-image img { display: block; }
.d6 figure { margin: 0; }

/* De editor en front-end gebruiken dezelfde 'wrap'-breedte. */
.d6 .entry-content,
.d6 .wp-block-post-content { margin: 0; }

/* Skip-link netjes verbergen. */
.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal-900); color: #fff; padding: 10px 16px; z-index: 9999;
}
.skip-link.screen-reader-text:focus { left: 8px; top: 8px; }

/* ---- Blog / berichten — in dezelfde rustige stijl ---- */
.d6-blog { padding: 56px 0 80px; }
.d6-blog .wrap { max-width: 860px; }
.d6-blog .blog-head { margin: 0 0 40px; }
.d6-blog .blog-head .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 14px;
}
.d6-blog h1, .d6-blog .blog-title {
  font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--teal-900);
  margin: 0 0 14px; text-wrap: balance;
}
.d6-post-card {
  background: #fff; border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 22px; transition: transform .2s, box-shadow .2s;
}
.d6-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.d6-post-card .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.d6-post-card .pc-body { padding: 26px 28px; }
.d6-post-card .wp-block-post-title { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0 0 10px; }
.d6-post-card .wp-block-post-title a { color: var(--teal-900); }
.d6-post-card .wp-block-post-date { font-size: 13px; color: var(--ink-500); margin-bottom: 10px; }
.d6-post-card .wp-block-post-excerpt { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.d6-post-card .wp-block-post-excerpt__more-link { color: var(--teal-700); font-weight: 700; }

.d6-single { padding: 56px 0 80px; }
.d6-single .wrap { max-width: 760px; }
.d6-single .post-meta { font-size: 14px; color: var(--ink-500); margin-bottom: 18px; }
.d6-single h1.wp-block-post-title { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 50px); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: var(--teal-900); margin: 0 0 18px; text-wrap: balance; }
.d6-single .wp-block-post-featured-image { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; }
.d6-single .entry-content p { font-size: 17px; line-height: 1.8; color: var(--ink-700); margin: 0 0 18px; }
.d6-single .entry-content h2 { font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--teal-900); margin: 32px 0 12px; }
.d6-single .entry-content h3 { font-size: 22px; font-weight: 700; color: var(--teal-900); margin: 26px 0 10px; }
.d6-single .entry-content a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.d6-single .entry-content blockquote { margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--teal-400); background: var(--teal-50); border-radius: 0 12px 12px 0; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--teal-900); }
.d6-single .entry-content img { border-radius: var(--radius-md); max-width: 100%; height: auto; }

.d6-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 32px; }
.d6-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--cream-200); border-radius: 8px; color: var(--teal-800); font-weight: 600; background: #fff; }
.d6-pagination .page-numbers.current { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }

/* Eenvoudige standaardpagina (Over ons-stijl body voor losse pagina's). */
.d6-page { padding: 12px 0 64px; }
.d6-page .wrap { max-width: 820px; }
.d6-page .page-title { font-family: var(--font-display); font-size: clamp(34px, 5vw, 60px); font-weight: 400; color: var(--teal-900); margin: 32px 0 24px; line-height: 1.05; letter-spacing: -0.02em; }
.d6-page .entry-content p { font-size: 17px; line-height: 1.8; color: var(--ink-700); margin: 0 0 18px; }
.d6-page .entry-content h2 { font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--teal-900); margin: 30px 0 12px; }

/* ---- FAQ open/dicht (statische versie, aangestuurd door dierzaam.js) ---- */
.d6-c-faq .qa .a { display: none; }
.d6-c-faq .qa.open .a { display: block; padding-top: 14px; }
.d6-c-faq .qa .chev .ic-minus { display: none; }
.d6-c-faq .qa.open .chev .ic-plus { display: none; }
.d6-c-faq .qa.open .chev .ic-minus { display: inline-flex; }

/* Booking-widget knoppen tonen icoon + label onder elkaar (zoals origineel). */
.d6-book .pet-pick button { line-height: 1.1; }

/* ---- Native afbeeldingen (wp:image) binnen onze fotokaders ----
   Zo blijven foto's klikbaar/vervangbaar in de editor én vullen ze netjes
   het kader (.ph6 en varianten zoals .main, .cell, .photo, .d6-hero-photo). */
.d6 .ph6 > .wp-block-image { position: absolute; inset: 0; margin: 0; z-index: 1; }
.d6 .ph6 > .wp-block-image,
.d6 .ph6 > .wp-block-image img { width: 100%; height: 100%; }
.d6 .ph6 > .wp-block-image img { object-fit: cover; display: block; }


/* =========================================================================
   Icoon-systeem voor de editor — iconen worden via CSS getekend (mask),
   zodat er geen losse code-blokjes in de pagina-editor staan.
   Een leeg blok met class "ic dz-ic dz-ic-NAAM" toont automatisch het icoon
   in de huidige tekstkleur.
   ========================================================================= */
.d6 .dz-ic::before {
  content: ""; display: block;
  width: var(--dz-ic-size, 20px); height: var(--dz-ic-size, 20px);
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.d6-cta-panel .ic { --dz-ic-size: 18px; }
.d6-c-card .ic, .d6-c-hours .ic { --dz-ic-size: 22px; }
.d6-why-card .ic { --dz-ic-size: 24px; }
.d6-d-detail > .ic { --dz-ic-size: 28px; }
.d6 .dz-ic-arrow-right::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.37%201.9.72%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.35%201.85.59%202.81.72A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.37%201.9.72%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.35%201.85.59%202.81.72A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-mail::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2ZM22%206%2012%2013%202%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2ZM22%206%2012%2013%202%206%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-home::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209%2012%202l9%207v11a2%202%200%200%201-2%202h-4v-7H9v7H5a2%202%200%200%201-2-2Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209%2012%202l9%207v11a2%202%200%200%201-2%202h-4v-7H9v7H5a2%202%200%200%201-2-2Z%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-map-pin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%207-8%2013-8%2013S4%2017%204%2010a8%208%200%200%201%2016%200ZM12%2011.5A1.5%201.5%200%201%200%2012%208.5a1.5%201.5%200%200%200%200%203Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%207-8%2013-8%2013S4%2017%204%2010a8%208%200%200%201%2016%200ZM12%2011.5A1.5%201.5%200%201%200%2012%208.5a1.5%201.5%200%200%200%200%203Z%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-clock::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020ZM12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020ZM12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-check::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-calendar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2ZM3%2010h18M8%202v4M16%202v4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2ZM3%2010h18M8%202v4M16%202v4%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-heart::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78L12%2021.23l8.84-8.84a5.5%205.5%200%200%200%200-7.78Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78L12%2021.23l8.84-8.84a5.5%205.5%200%200%200%200-7.78Z%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-stethoscope::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202v8a4%204%200%200%200%204%204%204%204%200%200%200%204-4V2M5%202v8a4%204%200%200%200%204%204M15%2014v3a4%204%200%200%201-8%200M19%204a1%201%200%201%200%200%202%201%201%200%200%200%200-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202v8a4%204%200%200%200%204%204%204%204%200%200%200%204-4V2M5%202v8a4%204%200%200%200%204%204M15%2014v3a4%204%200%200%201-8%200M19%204a1%201%200%201%200%200%202%201%201%200%200%200%200-2%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-syringe::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%202l4%204-2%202-4-4ZM15%205l4%204-8%208-4-4ZM7%2013l-4%204%204%204%204-4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%202l4%204-2%202-4-4ZM15%205l4%204-8%208-4-4ZM7%2013l-4%204%204%204%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-scissors::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206a3%203%200%201%201%200%206%203%203%200%200%201%200-6ZM6%2012a3%203%200%201%201%200%206%203%203%200%200%201%200-6ZM20%204%208.12%2015.88M14.47%2014.48%2020%2020M8.12%208.12%2012%2012%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206a3%203%200%201%201%200%206%203%203%200%200%201%200-6ZM6%2012a3%203%200%201%201%200%206%203%203%200%200%201%200-6ZM20%204%208.12%2015.88M14.47%2014.48%2020%2020M8.12%208.12%2012%2012%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-users::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206.5A4.5%204.5%200%200%201%206.5%202h11A4.5%204.5%200%200%201%2022%206.5v11a4.5%204.5%200%200%201-4.5%204.5h-11A4.5%204.5%200%200%201%202%2017.5ZM12%208a4%204%200%201%200%200%208%204%204%200%200%200%200-8ZM17.5%206.5h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206.5A4.5%204.5%200%200%201%206.5%202h11A4.5%204.5%200%200%201%2022%206.5v11a4.5%204.5%200%200%201-4.5%204.5h-11A4.5%204.5%200%200%201%202%2017.5ZM12%208a4%204%200%201%200%200%208%204%204%200%200%200%200-8ZM17.5%206.5h.01%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-whatsapp::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%204.65%2017.05A8.97%208.97%200%200%201%203%2012a9%209%200%201%201%209%209%208.97%208.97%200%200%201-5.05-1.65L3%2021ZM8.5%208.5c-.25.25-.5.75-.5%201.5%200%202%201.5%204%204%205.5%201%20.5%201.5.5%202%20.25.5-.25%201-.75%201-1.25v-.5l-1.5-.75c-.25%200-.5%200-.75.25l-.5.5c-.5-.25-1.5-1-2-2l.5-.5c.25-.25.25-.5.25-.75L10%209c0-.25-.5-.5-.5-.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%204.65%2017.05A8.97%208.97%200%200%201%203%2012a9%209%200%201%201%209%209%208.97%208.97%200%200%201-5.05-1.65L3%2021ZM8.5%208.5c-.25.25-.5.75-.5%201.5%200%202%201.5%204%204%205.5%201%20.5%201.5.5%202%20.25.5-.25%201-.75%201-1.25v-.5l-1.5-.75c-.25%200-.5%200-.75.25l-.5.5c-.5-.25-1.5-1-2-2l.5-.5c.25-.25.25-.5.25-.75L10%209c0-.25-.5-.5-.5-.5%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-shield-check::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010ZM9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010ZM9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-plus::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-minus::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .dz-ic-external::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E"); }

/* ---- Native knoppen (wp:button) in de Dierzaam-stijl ---- */
.d6 .wp-block-button.dz-btn { margin: 0; }
.d6 .wp-block-button.dz-btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; text-decoration: none;
}
.d6 .wp-block-button.dz-primary  .wp-block-button__link { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-sm); }
.d6 .wp-block-button.dz-cta      .wp-block-button__link { background: var(--gold-500); color: var(--teal-900); }
.d6 .wp-block-button.dz-ghost    .wp-block-button__link { background: transparent; color: var(--teal-700); border-color: var(--teal-200); }
.d6 .wp-block-button.dz-inv      .wp-block-button__link { background: var(--teal-400); color: var(--teal-900); }
.d6 .wp-block-button.dz-outline-inv .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
/* Icoon vóór de knoptekst */
.d6 .wp-block-button[class*="dz-ico-"] .wp-block-button__link::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.d6 .wp-block-button.dz-ico-calendar .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2ZM3%2010h18M8%202v4M16%202v4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2ZM3%2010h18M8%202v4M16%202v4%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .wp-block-button.dz-ico-phone .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.37%201.9.72%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.35%201.85.59%202.81.72A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.37%201.9.72%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.35%201.85.59%202.81.72A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E"); }
.d6 .wp-block-buttons { gap: 12px; }
.d6 .wp-block-button.dz-ico-arrow-after .wp-block-button__link::after {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}

/* =========================================================================
   Editor-helpers voor de homepage — inline-iconen via CSS + micro-tekstblokken.
   Hierdoor zijn alle teksten gewone, aanklikbare blokken (geen code).
   ========================================================================= */

/* Vinkjes vóór elk kenmerk in de dienstenlijst (native wp:list) */
.d6 .d6-service-row .features { list-style: none; }
.d6 .d6-service-row .features li::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background-color: var(--teal-500);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E");
}

/* Pijl achter "Meer over…" links en externe-pijl achter de PDF-link */
.d6 p.d6-link, .d6 p.pdflink { margin: 0; }
.d6 p.d6-link::after, .d6 p.pdflink::after {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.d6 p.d6-link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}
.d6 p.pdflink::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10M7%2017%2017%207%22%2F%3E%3C%2Fsvg%3E");
}

/* Prijs-chip op dienstfoto's: kleine bovenregel + groot bedrag, als losse tekstblokken */
.d6 .d6-service-row .photo .price-pill { display: block; }
.d6 .d6-service-row .photo .price-pill .lbl { font-size: 10px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; margin: 0 0 3px; }
.d6 .d6-service-row .photo .price-pill .amt { font-family: var(--font-display); font-size: 18px; color: var(--teal-800); line-height: 1; margin: 0; }

/* Tarieventabel: bedrag + kleine onderregel */
.d6 .d6-tar-row .price .amt { margin: 0; }
.d6 .d6-tar-row .price .lbl { font-family: var(--font-sans); font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; margin: 5px 0 0; }

/* Voorrijkosten-blok */
.d6 .d6-tar-intro .voorrij p { margin: 0; }
.d6 .d6-tar-intro .voorrij .vsub { display: block; font-family: var(--font-sans); font-size: 12px; font-style: normal; color: var(--ink-500); margin-top: 4px; letter-spacing: 0; text-transform: none; }
.d6 .d6-tar-intro .voorrij > .wp-block-group:not(.ic) { display: flex; flex-direction: column; }

/* Hero-badge, kennismaking-stats, stap-nummers, testimonials: marges resetten */
.d6 .d6-hero-photo .badge p { margin: 0; }
.d6 .d6-hero-photo .badge .av { font-size: 0; }
.d6 .d6-hero-photo .badge .av p { font-family: var(--font-display); font-size: 18px; line-height: 42px; }
.d6 .d6-hero-photo .badge > .wp-block-group:not(.av) { display: flex; flex-direction: column; }
.d6 .d6-meet .mini p { margin: 0; }
.d6 .d6-steps-strip .step .n { margin-top: 0; }
.d6 .d6-test .q { font-family: var(--font-display); font-size: 18px; line-height: 1.5; color: var(--teal-900); margin: 0; font-weight: 400; }
.d6 .d6-test .who p { margin: 0; }
.d6 .d6-test .who > .wp-block-group:not(.av) { display: flex; flex-direction: column; }
.d6 .d6-area .places p.place { margin: 0; background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--teal-800); }
.d6 .d6-area .d6-area-map p { margin: 0; }
.d6 .d6-strip .head .sub { margin: 0; }
.d6 .d6-hero .trust-row p { margin: 0; }

/* ===== Diensten-pagina: editor-helpers ===== */
/* Inhoudsopgave-pills blijven klikbare links; de paragraaf-wrapper valt weg uit de layout */
.d6 .d6-d-toc .toc-item { margin: 0; display: contents; }
/* Vinkjes vóór elk "inbegrepen"-item (native wp:list) */
.d6 .d6-d-detail ul.included li::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background-color: var(--teal-500);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012l5%205L20%206%22%2F%3E%3C%2Fsvg%3E");
}
/* Prijs (groot bedrag + kleine onderregel) in de dienstkop */
.d6 .d6-d-detail .meta-row .price .amt { margin: 0; }
.d6 .d6-d-detail .meta-row .price .lbl { font-size: 11px; color: var(--ink-500); display: block; letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 0; line-height: 1.2; }
/* Diersoort-labels als losse, aanklikbare tekstjes */
.d6 .d6-d-detail .meta-row .pets .pet { margin: 0; background: var(--cream-100); color: var(--ink-700); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
/* Knoppenrij in dienstkaart + hulpkaart krijgen geen extra marge */
.d6 .d6-d-detail .actions.wp-block-buttons { margin: 0; }
.d6 .d6-d-aside .helpcard .btn-row.wp-block-buttons { margin: 0; }

/* WhatsApp-icoon vóór knoptekst */
.d6 .wp-block-button.dz-ico-whatsapp .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%204.65%2017.05A8.97%208.97%200%200%201%203%2012a9%209%200%201%201%209%209%208.97%208.97%200%200%201-5.05-1.65L3%2021ZM8.5%208.5c-.25.25-.5.75-.5%201.5%200%202%201.5%204%204%205.5%201%20.5%201.5.5%202%20.25.5-.25%201-.75%201-1.25v-.5l-1.5-.75c-.25%200-.5%200-.75.25l-.5.5c-.5-.25-1.5-1-2-2l.5-.5c.25-.25.25-.5.25-.75L10%209c0-.25-.5-.5-.5-.5%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021%204.65%2017.05A8.97%208.97%200%200%201%203%2012a9%209%200%201%201%209%209%208.97%208.97%200%200%201-5.05-1.65L3%2021ZM8.5%208.5c-.25.25-.5.75-.5%201.5%200%202%201.5%204%204%205.5%201%20.5%201.5.5%202%20.25.5-.25%201-.75%201-1.25v-.5l-1.5-.75c-.25%200-.5%200-.75.25l-.5.5c-.5-.25-1.5-1-2-2l.5-.5c.25-.25.25-.5.25-.75L10%209c0-.25-.5-.5-.5-.5%22%2F%3E%3C%2Fsvg%3E");
}

/* ===== Contact-pagina: editor-helpers ===== */
/* Contactkaarten: label + waarde + kleine onderregel als losse tekstblokken */
.d6 .d6-c-card .k { margin: 0; }
.d6 .d6-c-card .v { margin: 4px 0 0; }
.d6 .d6-c-card .v a { color: inherit; text-decoration: none; }
.d6 .d6-c-card .vsub { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--ink-600); margin: 4px 0 0; }
.d6 .d6-c-card > .wp-block-group:not(.ic) { display: flex; flex-direction: column; }
/* Openingstijden-rijen */
.d6 .d6-c-hours .rows .row p { margin: 0; }
.d6 .d6-c-hours .rows .row .day { color: rgba(255,255,255,0.78); }
.d6 .d6-c-hours .rows .row .val { color: white; font-weight: 600; }
.d6 .d6-c-hours .rows .row.closed .val { color: rgba(255,255,255,0.5); }
/* Kaart-placeholder */
.d6 .d6-c-map p { margin: 0; }
/* FAQ: plus/min-icoon in de chevron op juiste maat */
.d6 .d6-c-faq .qa .chev .dz-ic { --dz-ic-size: 18px; }