/* ============================================================
   DOLCE MANO
   Praktijk voor readings, healings, massages en meditatie, Delft.

   Design language
   - Canvas is warm ivory; the single accent is a dusty mauve taken
     from the violet of the Dolce Mano wordmark and softened.
   - Cormorant Garamond speaks (headings, pull quotes), Jost reads
     (body, navigation, labels).
   - Shape rule: photography is organic (ovals, arches), interface is
     near-sharp (2px cards, 2px buttons). Nothing is a pill except the
     round icon buttons.
   - One light theme throughout. No section inverts.
   ============================================================ */

:root {
    /* Surfaces */
    --ivory:        #FBF8F4;
    --shell:        #F2EBE4;
    --white:        #FFFFFF;
    --mauve-mist:   #E9E0E3;

    /* Accent (single) */
    --mauve:        #9C8494;
    --mauve-deep:   #7C6472;
    --mauve-pale:   #C6B3BE;

    /* Ink */
    --ink:          #33292E;
    --ink-soft:     #5F535A;
    --ink-faint:    #7A6D73;
    --line:         #E4DAD3;
    --line-soft:    #EFE8E1;

    /* Brand violet, straight from the Dolce Mano wordmark. It carries
       interaction and emphasis: buttons, links, small-caps labels, the
       footer field. Mauve above stays the atmosphere: surface tints,
       decoration, the leaf and star flourishes. */
    --indigo:       #5C62AA;
    --indigo-deep:  #474C8C;
    --indigo-ink:   #3F4478;
    --indigo-line:  #C4C7E2;
    --indigo-mist:  #E8E9F3;

    /* Type */
    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-sans:    'Jost', 'Segoe UI', system-ui, sans-serif;

    --step-fine:    .75rem;
    --step-small:   .875rem;
    --step-body:    1.0625rem;
    --step-lead:    1.25rem;

    --measure:      66ch;

    /* Space scale */
    --space-1:  .5rem;
    --space-2:  1rem;
    --space-3:  1.5rem;
    --space-4:  2.5rem;
    --space-5:  4rem;
    --space-6:  6rem;
    --space-7:  8.5rem;

    /* Shape and depth. Shadows carry the ink hue, never pure black. */
    --radius:     2px;
    --radius-arch: 220px 220px 4px 4px;
    --shadow-soft: 0 18px 48px rgba(51, 41, 46, .09);
    --shadow-lift: 0 26px 64px rgba(51, 41, 46, .14);

    /* Motion */
    --ease:       cubic-bezier(.22, 1, .36, 1);
    --fast:       .22s var(--ease);
    --slow:       .55s var(--ease);

    /* Layers */
    --z-flourish: 0;
    --z-sticky:   80;
    --z-panel:    90;
    --z-overlay:  100;

    color-scheme: light;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: var(--step-body);
    line-height: 1.75;
    color: var(--ink-soft);
    background: var(--ivory);
    overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, blockquote {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.14;
    letter-spacing: -.005em;
    /* Cormorant sets airy; keep descenders on italics clear of the box. */
    text-wrap: balance;
}

strong, b { font-weight: 500; color: var(--ink); }
em { font-style: italic; }

::selection { background: var(--indigo-mist); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 1px;
}

/* ── Utilities ───────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: var(--z-overlay);
    padding: 10px 20px;
    background: var(--ink);
    color: var(--ivory);
    font-size: var(--step-small);
    transition: transform var(--fast);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--ivory);
    border-bottom: 1px solid var(--line-soft);
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px 32px 4px;
}

/* Logo row: wordmark centred, booking link parked at the right. */
.header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
}

.site-logo { display: block; }
.site-logo img {
    /* The asset is 282x62; draw it at exactly that, so it is never resampled. */
    width: 282px;
    height: 62px;
}
.logo-mark {
    display: inline-flex;
    width: 44px; height: 44px;
    color: var(--indigo);
}
.site-logo .logo-text {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1.1;
    text-align: center;
}
.site-logo .logo-text span {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--step-fine);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--indigo);
}

/* Menu row: the ten items sit centred on their own line. */
.header-bar {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}

.primary-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
}
.primary-menu > li { position: relative; }
.primary-menu > li > a {
    display: block;
    padding: 10px 0;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    transition: color var(--fast);
}
.primary-menu > li > a::after {
    /* Hairline that draws in from the centre on hover. */
    content: '';
    display: block;
    height: 1px;
    margin-top: 3px;
    background: var(--indigo);
    transform: scaleX(0);
    transition: transform var(--slow);
}
.primary-menu > li > a:hover { color: var(--indigo); }
.primary-menu > li > a:hover::after { transform: scaleX(1); }
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a,
.primary-menu > li.current-menu-ancestor > a { color: var(--indigo); }
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-parent > a::after,
.primary-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Dropdown */
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    padding: 8px 0;
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-size: var(--step-small);
    color: var(--ink-soft);
    transition: background var(--fast), color var(--fast);
}
.primary-menu .sub-menu a:hover { background: var(--shell); color: var(--ink); }


/* Hamburger: two rules that cross into an x. */
.nav-toggle {
    display: none;
    position: absolute;
    right: 0;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
}
.nav-toggle-bars {
    position: relative;
    display: block;
    width: 24px; height: 12px;
}
.nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%; height: 1px;
    background: var(--ink);
    transition: transform var(--slow), opacity var(--fast);
}
.nav-toggle-bars span:first-child { top: 0; }
.nav-toggle-bars span:last-child  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child  { transform: translateY(-5.5px) rotate(-45deg); }

/* Phone + booking button live in the mobile panel only. */
.nav-panel-extra { display: none; }

/* ============================================================
   BUTTONS AND LINKS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Some buttons carry a trailing arrow glyph from the template. */
    gap: 10px;
    min-height: 48px;
    padding: 14px 34px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--step-fine);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--indigo); color: var(--white); }
.btn-primary:hover { background: var(--indigo-deep); }

.btn-outline { border-color: var(--indigo); color: var(--indigo); }
.btn-outline:hover { background: var(--indigo); border-color: var(--indigo); color: var(--white); }

/* On the dark footer: light rule and light text, filling to ivory. */
.btn-outline-white { border-color: rgba(251, 248, 244, .4); color: var(--ivory); }
.btn-outline-white:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

/* Booking link in the header row: quieter and shorter than a page button. */
.header-cta {
    position: absolute;
    right: 0;
    min-height: 38px;
    padding: 10px 20px;
    font-size: .69rem;
    letter-spacing: .14em;
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--step-small);
    letter-spacing: .02em;
    color: var(--indigo);
    border-bottom: 1px solid var(--indigo-line);
    padding-bottom: 2px;
    transition: color var(--fast), border-color var(--fast);
}
.link-more:hover { color: var(--ink); border-color: var(--ink); }


/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: var(--space-6) 0; }
.section-alt { background: var(--shell); }

.section-header {
    max-width: 620px;
    margin: 0 auto var(--space-5);
    text-align: center;
}
.section-header h2 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    margin-bottom: 12px;
}
.section-header p {
    font-size: var(--step-body);
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 0 auto;
}
.section-header-split {
    max-width: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: left;
}
.section-header-split h2 { margin: 0; }

.eyebrow {
    display: block;
    font-size: var(--step-fine);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 14px;
}

/* ============================================================
   AANBOD, service cards
   Photo above, tinted body below, one flat label as the action.
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.service-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--slow), box-shadow var(--slow);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.service-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--shell);
}
.service-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.service-card:hover .service-card-media img { transform: scale(1.04); }

.service-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--mauve-mist);
}
.service-card-glyph {
    display: block;
    width: 26px; height: 26px;
    margin-bottom: 16px;
    color: var(--mauve-deep);
}
.service-card-body h3 {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    margin-bottom: 10px;
}
.service-card-body p {
    font-size: var(--step-small);
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: var(--space-3);
}
/* Actions line up across cards regardless of summary length. */
.service-card-cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: var(--step-fine);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--indigo);
    padding-bottom: 3px;
    transition: color var(--fast), border-color var(--fast);
}
.service-card:hover .service-card-cta { color: var(--indigo); border-color: var(--indigo); }
/* ============================================================
   RONDLEIDING
   ============================================================ */
.tour-embed {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.tour-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ============================================================
   PAGE HEADER, inner pages
   Light like every other section: the title sits on ivory above a
   hairline, with a single flourish.
   ============================================================ */
.page-header {
    position: relative;
    padding: var(--space-5) 0 var(--space-4);
    text-align: center;
    overflow: hidden;
}
.page-header::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 120px; height: 1px;
    transform: translateX(-50%);
    background: var(--indigo-line);
}
.page-header-eyebrow {
    font-size: var(--step-fine);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 16px;
}
.page-header h1 {
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    line-height: 1.06;
    max-width: 24ch;
    margin: 0 auto;
}
.page-header-intro {
    max-width: 58ch;
    margin: var(--space-2) auto 0;
    color: var(--ink-soft);
}
.page-header-intro p + p { margin-top: 10px; }

/* ============================================================
   ENTRY CONTENT, editor output
   ============================================================ */
.entry-content { max-width: var(--measure); }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content p { font-size: var(--step-body); line-height: 1.8; }
.entry-content h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    margin-top: 2em;
    scroll-margin-top: 140px;
}
.entry-content h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.6rem);
    margin-top: 1.8em;
}
.entry-content h4 {
    font-family: var(--font-sans);
    font-size: var(--step-fine);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-top: 1.8em;
}
.entry-content a {
    color: var(--indigo);
    border-bottom: 1px solid var(--indigo-line);
    transition: border-color var(--fast), color var(--fast);
}
.entry-content a:hover { color: var(--ink); border-color: var(--ink); }
.entry-content ul, .entry-content ol { padding-left: 0; }
.entry-content ul li,
.entry-content ol li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    line-height: 1.7;
}
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 4px; top: .68em;
    width: 6px; height: 6px;
    border: 1px solid var(--mauve);
    border-radius: 50%;
}
.entry-content ol { counter-reset: dm-list; }
.entry-content ol li { counter-increment: dm-list; }
.entry-content ol li::before {
    content: counter(dm-list) '.';
    position: absolute;
    left: 0; top: 0;
    font-family: var(--font-display);
    color: var(--mauve);
}
.entry-content blockquote {
    padding-left: var(--space-3);
    border-left: 1px solid var(--mauve-pale);
    font-style: italic;
    font-size: var(--step-lead);
    line-height: 1.6;
}
.entry-content figure img,
.entry-content .wp-block-image img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content td, .entry-content th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-size: var(--step-small);
}

/* Floated editor images. The clear happens on the wrapper so a float can
   never bleed into the next section. */
.entry-content::after { content: ''; display: table; clear: both; }
.entry-content .alignright,
.about-content .alignright,
.services-content .alignright {
    float: right;
    width: 100%;
    max-width: 320px;
    margin: 6px 0 28px 36px;
}
.entry-content .alignleft,
.about-content .alignleft,
.services-content .alignleft {
    float: left;
    width: 100%;
    max-width: 320px;
    margin: 6px 36px 28px 0;
}
.entry-content .aligncenter,
.about-content .aligncenter,
.services-content .aligncenter {
    max-width: 420px;
    margin: var(--space-3) auto;
}
.about-content .is-small,
.services-content .is-small { max-width: 220px; }

/* ============================================================
   OVER RENSKE
   Portrait sits in its own column beside the story, squared off.
   ============================================================ */
.about-page { padding-top: var(--space-4); }
.about-page .about-content { max-width: 74ch; margin: 0 auto; }

/* When the editor has placed a portrait, give it a column of its own
   instead of wrapping the story into a 30-character gutter. The core
   image block arrives two ways, as a bare <figure class="alignright">
   or wrapped in <div class="wp-block-image">, so both are matched. The
   float rules further down remain the fallback without :has(). */
.about-page .about-content:has(> figure.alignright, > figure.alignleft),
.about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) {
    display: grid;
    grid-template-columns: minmax(0, 62ch) minmax(0, 340px);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
    max-width: 1080px;
}
.about-page .about-content:has(> figure.alignright, > figure.alignleft) > *,
.about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) > * { grid-column: 1; }

.about-page .about-content:has(> figure.alignright, > figure.alignleft) > figure,
.about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) > .wp-block-image {
    grid-column: 2;
    /* Row 2: the opening line above runs the full width. */
    grid-row: 2 / span 40;
    position: sticky;
    top: 150px;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
}
.about-page .about-content > .wp-block-image > figure {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
}
/* The welcome line reads as a lead-in, so it spans both columns and stays
   on a single line instead of breaking across the narrow text column. */
.about-page .about-content:has(> figure.alignright, > figure.alignleft) > p:first-of-type,
.about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) > p:first-of-type {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: var(--space-2);
}

.about-content > p:first-of-type {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.45;
    color: var(--ink);
}
.about-page .about-content figure { position: relative; }
/* Portrait sits square, with the hairline-sharp corners the rest of the
   interface uses. */
.about-page .about-content figure img {
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(51, 41, 46, .14);
}
.about-page-cta {
    max-width: 74ch;
    margin: var(--space-5) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   AANBOD, service page
   ============================================================ */
.services-tabbar {
    border-bottom: 1px solid var(--line-soft);
    background: var(--ivory);
}
.services-tabbar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px 32px 0;
}
.services-tab {
    padding: 14px 22px;
    font-size: var(--step-fine);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    transition: color var(--fast), border-color var(--fast);
}
.services-tab:hover { color: var(--ink); }
.services-tab.is-active { color: var(--ink); border-color: var(--indigo); }

.services-content { max-width: 78ch; margin: 0 auto; }
.services-content > h2:first-child { margin-top: 0; }
.services-content h2 {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}
.services-content > h2:first-child { padding-top: 0; border-top: 0; }
.services-content h3 {
    font-family: var(--font-sans);
    font-size: var(--step-fine);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-top: 2.2em;
}
.services-content h3 + p {
    padding: 18px 22px;
    background: var(--shell);
    font-size: var(--step-small);
}
.services-index .services-grid { margin-top: 0; }

/* ============================================================
   RECENSIES, full page
   ============================================================ */
.ervaringen-grid {
    column-count: 3;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ervaring-card {
    break-inside: avoid;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: var(--space-3) 0 var(--space-2);
    border-top: 1px solid var(--mauve-pale);
}
.ervaring-quote-mark {
    font-family: var(--font-display);
    font-size: 2.4rem;
    /* The glyph hangs from the top of its line box, so pull the quote up
       under it instead of leaving a hole. */
    line-height: .62;
    color: var(--mauve-pale);
    margin-bottom: 4px;
}
.ervaring-text {
    font-size: var(--step-small);
    line-height: 1.75;
    color: var(--ink-soft);
}
.ervaring-text p + p { margin-top: .8em; }
.ervaring-author {
    margin-top: 14px;
    font-size: var(--step-fine);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}
.ervaring-date {
    margin-top: 2px;
    font-size: var(--step-fine);
    color: var(--ink-faint);
}

/* ============================================================
   BOEK
   ============================================================ */
.boek-hero { position: relative; padding-top: var(--space-5); }
.boek-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
}
.boek-hero-text h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    margin-bottom: 10px;
}
.boek-meta {
    font-size: var(--step-fine);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: var(--space-3);
}
.boek-hero-text .about-content { max-width: none; margin-bottom: var(--space-4); }
.boek-cover {
    position: sticky;
    top: 150px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}
.boek-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* ============================================================
   BOEKENTIPS
   Two columns of title-plus-author rows, one hairline per row.
   ============================================================ */
.boekentips-content { max-width: none; }
.boekentips-content .wp-block-table table,
.boekentips-content .wp-block-table tbody { display: block; width: 100%; border: none; }
.boekentips-content .wp-block-table table {
    column-count: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
    border-collapse: collapse;
}
.boekentips-content .wp-block-table tr {
    display: block;
    break-inside: avoid;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.boekentips-content .wp-block-table td { display: block; border: none; padding: 0; }
.boekentips-content .wp-block-table td:first-child {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 2px;
}
.boekentips-content .wp-block-table td:last-child {
    font-size: var(--step-fine);
    letter-spacing: .04em;
    color: var(--ink-faint);
}

/* ============================================================
   AGENDA, archive and single
   ============================================================ */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.event-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--slow), box-shadow var(--slow);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.event-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 5;
    background: var(--mauve-mist);
}
.event-card-icon { width: 38px; color: var(--mauve-deep); opacity: .8; }
.event-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-3) var(--space-3) var(--space-3);
}
.event-date {
    font-size: var(--step-fine);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 8px;
}
.event-card-body h3 { font-size: 1.5rem; margin-bottom: 8px; }
.event-time {
    font-size: var(--step-small);
    color: var(--ink-faint);
    line-height: 1.6;
    margin-bottom: var(--space-2);
}
.event-card-body .link-more { margin-top: auto; align-self: flex-start; }
.events-empty {
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--step-lead);
    color: var(--ink-faint);
}
.single-agenda-image {
    margin-bottom: var(--space-3);
    border-radius: var(--radius);
    overflow: hidden;
}
.single-agenda-time {
    font-size: var(--step-small);
    color: var(--mauve-deep);
    padding: 16px 20px;
    background: var(--shell);
    margin-bottom: var(--space-3);
}
.single-agenda-back {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

/* ============================================================
   POST CARDS
   ============================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--slow), box-shadow var(--slow);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-image { aspect-ratio: 16 / 10; overflow: hidden; }
.card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.card:hover .card-image img { transform: scale(1.04); }
.card-body { padding: var(--space-3); }
.card-body h3 { font-size: 1.5rem; margin-bottom: 6px; }
.card-meta {
    font-size: var(--step-fine);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 12px;
}
.card-body p { font-size: var(--step-small); line-height: 1.7; }

.entry-title { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: 12px; }
.entry-meta {
    font-size: var(--step-fine);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: var(--space-3);
}
.entry-thumbnail {
    margin-bottom: var(--space-4);
    border-radius: var(--radius);
    overflow: hidden;
}
.post-navigation {
    max-width: var(--measure);
    margin: var(--space-5) auto 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    font-size: var(--step-small);
}
.post-navigation a { color: var(--indigo); }
.post-navigation a:hover { color: var(--ink); }
.nav-links { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ============================================================
   NOTHING FOUND, 404
   ============================================================ */
.state-empty {
    max-width: 46ch;
    margin: 0 auto;
    padding: var(--space-5) 0;
    text-align: center;
}
.state-empty .state-mark {
    display: block;
    width: 54px; height: 54px;
    margin: 0 auto var(--space-3);
    color: var(--mauve-pale);
}
.state-empty h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: 14px; }
.state-empty p { margin-bottom: var(--space-4); }
.state-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
.contact-info .entry-content { max-width: 44ch; }
.contact-info h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.contact-details {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.contact-details li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--step-body);
}
.contact-details a { color: var(--ink); border-bottom: 1px solid var(--mauve-pale); transition: border-color var(--fast); }
.contact-details a:hover { border-color: var(--ink); }
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--indigo);
}

/* ============================================================
   FORMS
   Label above, field, then helper or error text. Never a
   placeholder standing in for a label.
   ============================================================ */
.contact-form-wrap,
.lead-form-wrap {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.lead-form-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.lead-form-sub {
    font-size: var(--step-small);
    color: var(--ink-faint);
    margin-bottom: var(--space-3);
}

.form-row, .lf-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
.form-group, .lf-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: var(--space-2);
}
.form-group label, .lf-group label {
    font-size: var(--step-fine);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}
.form-group label span, .lf-group label span { color: var(--indigo); }

.form-group input, .form-group textarea, .form-group select,
.lf-group input, .lf-group textarea, .lf-group select {
    width: 100%;
    padding: 13px 16px;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step-small);
    color: var(--ink);
    transition: border-color var(--fast), background var(--fast);
    resize: vertical;
}
.form-group input::placeholder, .form-group textarea::placeholder,
.lf-group input::placeholder, .lf-group textarea::placeholder {
    color: var(--ink-faint);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
.lf-group input:focus, .lf-group textarea:focus, .lf-group select:focus {
    outline: none;
    border-color: var(--indigo);
    background: var(--white);
}
.form-group input.error, .lf-group input.error,
.form-group select.error, .lf-group select.error { border-color: #9E4B3F; }
.lf-field-error {
    font-size: var(--step-fine);
    color: #9E4B3F;
}

.lf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    margin-top: var(--space-1);
    padding: 14px 34px;
    background: var(--indigo);
    color: var(--white);
    border-radius: var(--radius);
    font-size: var(--step-fine);
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background var(--fast), transform var(--fast), opacity var(--fast);
}
.lf-submit:hover { background: var(--indigo-deep); }
.lf-submit:active { transform: translateY(1px); }
.lf-submit:disabled { opacity: .6; cursor: progress; }
.lf-submit-arrow { transition: transform var(--fast); }
.lf-submit:hover .lf-submit-arrow { transform: translateX(4px); }

.lf-message {
    margin-top: var(--space-2);
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: var(--step-small);
}
.lf-success { background: var(--indigo-mist); color: var(--ink); }
.lf-error   { background: #F6E7E3; color: #7E362B; }
.lf-privacy {
    margin-top: var(--space-2);
    font-size: var(--step-fine);
    color: var(--ink-faint);
    line-height: 1.6;
}

/* ============================================================
   LEAD SECTION
   ============================================================ */
.lead-section {
    position: relative;
    padding: var(--space-6) 0;
    background: var(--shell);
    overflow: hidden;
}
.lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
.lead-eyebrow {
    font-size: var(--step-fine);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mauve-deep);
    margin-bottom: 14px;
}
.lead-title {
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    max-width: 20ch;
    margin-bottom: 16px;
}
.lead-desc { max-width: 44ch; margin-bottom: var(--space-4); }
.lead-promise {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: var(--white);
    border-left: 2px solid var(--indigo);
    margin-bottom: var(--space-4);
}
.lead-promise-icon { color: var(--indigo); font-size: 1.2rem; line-height: 1.4; }
.lead-promise strong { display: block; font-size: var(--step-small); }
.lead-promise span { font-size: var(--step-small); color: var(--ink-faint); }
.lead-contacts { display: flex; flex-direction: column; gap: 14px; }
.lead-contacts li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--step-small);
}
.lead-contacts a { color: var(--ink); border-bottom: 1px solid var(--mauve-pale); }
.lead-contacts a:hover { border-color: var(--ink); }
.lead-ci {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--indigo);
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
    position: relative;
    background: var(--indigo-ink);
    color: rgba(251, 248, 244, .72);
    overflow: hidden;
}
.footer-sprig {
    position: absolute;
    right: 4%; top: -30px;
    width: 180px;
    color: var(--mauve);
    opacity: .22;
    pointer-events: none;
}
.footer-sprig svg { width: 100%; height: auto; }

.footer-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    padding: var(--space-6) 0 var(--space-5);
}
.footer-logo {
    /* Vector, so the footer can sit a size down without losing sharpness. */
    width: 228px; height: 50px;
    margin-bottom: var(--space-2);
}
/* Only the raster fallback needs inverting; the ivory SVG is already light. */
.footer-logo--raster { filter: brightness(0) invert(1); opacity: .92; }
.footer-lotus {
    display: inline-flex;
    width: 40px; height: 40px;
    color: var(--ivory);
    margin-bottom: var(--space-2);
}
.footer-welcome p {
    max-width: 34ch;
    font-size: var(--step-small);
    line-height: 1.8;
    margin-bottom: var(--space-3);
}

.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--step-small);
    line-height: 1.6;
}
.footer-contact svg { flex-shrink: 0; margin-top: 4px; color: var(--mauve-pale); }
.footer-contact a { transition: color var(--fast); }
.footer-contact a:hover { color: var(--ivory); }

.footer-social {
    display: flex;
    gap: 10px;
    align-self: center;
    justify-content: flex-end;
}
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(251, 248, 244, .28);
    color: rgba(251, 248, 244, .8);
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.social-icon:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

.footer-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: var(--space-3) 0;
    border-top: 1px solid rgba(251, 248, 244, .14);
    font-size: var(--step-fine);
    letter-spacing: .06em;
    color: rgba(251, 248, 244, .68);
}
.footer-bottom a:hover { color: var(--ivory); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
body.lightbox-open { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: rgba(29, 23, 26, .94);
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 78vh;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: var(--radius);
}
.lightbox-caption {
    color: rgba(251, 248, 244, .8);
    font-size: var(--step-small);
    text-align: center;
}
.lightbox-close, .lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(251, 248, 244, .12);
    color: var(--ivory);
    transition: background var(--fast);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(251, 248, 244, .28); }
.lightbox-close { top: 22px; right: 22px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 1.4rem; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

/* ============================================================
   FLOURISHES
   Leaves, a crescent and small sparkles sit in the margins of the
   page titles and the enquiry band, as they did before the redesign,
   now drawn in the mauve palette. Each mark is placed individually
   with a percentage position, so it is always drawn complete and
   never clipped by the section edge. Decorative only: behind the
   copy, no pointer events, never in the tab order.
   ============================================================ */
.page-header::before,
.lead-section::before,
.boek-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

.page-header::before,
.boek-hero::before {
    opacity: .5;
    background-image:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M30 6a20 20 0 1 0 0 36 15 15 0 1 1 0-36z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>");
    background-position:
        3% 74%,
        13% 26%,
        8% 4%,
        96% 30%,
        86% 76%,
        90% 10%,
        79% 52%;
    background-size:
        58px 58px,
        20px 20px,
        28px 28px,
        46px 46px,
        16px 16px,
        13px 13px,
        34px 34px;
}

.lead-section::before {
    opacity: .42;
    background-image:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M30 6a20 20 0 1 0 0 36 15 15 0 1 1 0-36z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>");
    background-position:
        2% 88%,
        9% 12%,
        4% 42%,
        26% 96%,
        97% 8%,
        92% 62%;
    background-size:
        62px 62px,
        18px 18px,
        30px 30px,
        14px 14px,
        44px 44px,
        16px 16px;
}

/* Keep the copy above the marks. */
.page-header > .container,
.lead-section > .container,
.boek-hero > .container { position: relative; z-index: 1; }

/* A sparkle either side of the small label above a title. */
.page-header-eyebrow::before,
.page-header-eyebrow::after,
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: 1px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>") no-repeat center / contain;
    opacity: .9;
}
.page-header-eyebrow::before,
.eyebrow::before { margin-right: 10px; }
.page-header-eyebrow::after { margin-left: 10px; }

/* Portrait accents: a sparkle off the top corner, a leaf off the foot. */
.about-page .about-content figure { position: relative; }
.about-page .about-content figure::before,
.about-page .about-content figure::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.about-page .about-content figure::before {
    top: -16px;
    right: -14px;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>") no-repeat center / contain;
    opacity: .85;
}
.about-page .about-content figure::after {
    bottom: -20px;
    left: -18px;
    width: 38px;
    height: 38px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>") no-repeat center / contain;
    opacity: .7;
}

@media (max-width: 768px) {
    /* Phones have no margins to spare: keep only the corner marks. */
    .page-header::before,
    .boek-hero::before {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M30 6a20 20 0 1 0 0 36 15 15 0 1 1 0-36z' fill='%235C62AA'/></svg>");
        background-position: 2% 82%, 94% 18%, 90% 88%;
        background-size: 40px 40px, 14px 14px, 22px 22px;
        opacity: .45;
    }
    .lead-section::before {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%239C8494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M24 42C11 33 8 19 24 6c16 13 13 27 0 36z'/><path d='M24 12v26M24 20c-4-2-7-1-9 1M24 28c4-2 7-1 9 1'/></g></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4c1 8 3 12 7 16s8 6 16 7c-8 1-12 3-16 7s-6 8-7 16c-1-8-3-12-7-16s-8-6-16-7c8-1 12-3 16-7s6-8 7-16z' fill='%235C62AA'/></svg>");
        background-position: 1% 94%, 95% 6%;
        background-size: 40px 40px, 15px 15px;
    }
    .about-page .about-content figure::before { width: 22px; height: 22px; top: -12px; right: -8px; }
    .about-page .about-content figure::after { width: 28px; height: 28px; bottom: -14px; left: -10px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The menu carries ten items; it needs the full row until then. */
@media (max-width: 1240px) {
    .nav-toggle { display: flex; }
    .header-cta { display: none; }
    .header-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 32px; }
    /* Logo row takes the width so the hamburger has a right edge to sit
       against instead of landing on the wordmark. */
    .header-top { flex: 1 1 auto; justify-content: flex-start; min-height: 62px; }
    /* Panel anchors to the header itself, not to the collapsed menu row. */
    .header-bar { position: static; width: auto; min-height: 0; }
    .site-logo img { width: 282px; height: 62px; }

    #primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        z-index: var(--z-panel);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        padding: var(--space-2) 32px var(--space-4);
        background: var(--ivory);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-soft);
    }
    #primary-nav.open { display: block; }

    .primary-menu { flex-direction: column; gap: 0; align-items: stretch; }
    .primary-menu > li { border-bottom: 1px solid var(--line-soft); }
    .primary-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        font-size: .8rem;
        letter-spacing: .14em;
    }
    .primary-menu > li > a::after { display: none; }
    .primary-menu > li.menu-item-has-children > a::before {
        content: '+';
        order: 2;
        font-size: 1rem;
        color: var(--mauve);
    }
    .primary-menu > li.open > a::before { content: '3'; }
    .primary-menu .sub-menu {
        position: static;
        display: none;
        transform: none;
        min-width: 0;
        padding: 0 0 10px 16px;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .primary-menu li.open > .sub-menu { display: block; }
    .primary-menu .sub-menu a { padding: 10px 0; }

    .nav-panel-extra {
        display: flex;
        align-items: flex-start;
        margin-top: var(--space-3);
    }
}

@media (max-width: 1024px) {
    /* Portrait column collapses: photo first, then the story. */
    .about-page .about-content:has(> figure.alignright, > figure.alignleft),
    .about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) {
        display: block;
        max-width: 74ch;
    }
    .about-page .about-content:has(> figure.alignright, > figure.alignleft) > figure,
    .about-page .about-content:has(> .wp-block-image > figure.alignright, > .wp-block-image > figure.alignleft) > .wp-block-image {
        position: static;
        float: none;
        max-width: 320px;
        margin: 0 auto var(--space-3);
    }

    .contact-layout,
    .lead-layout,
    .boek-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .boek-cover { position: static; max-width: 260px; }
    .ervaringen-grid { column-count: 2; }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
    .footer-welcome { grid-column: 1 / -1; }
    .footer-social { justify-content: flex-start; }
}

@media (max-width: 768px) {
    :root {
        --space-6: 4rem;
        --space-5: 3rem;
    }
    .container { padding: 0 20px; }
    .header-inner { padding: 12px 20px; }
    #primary-nav { padding-left: 20px; padding-right: 20px; }
    .services-tabbar-inner { padding: 4px 20px 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }

    .services-grid { grid-template-columns: minmax(0, 1fr); }
    .ervaringen-grid { column-count: 1; }
    .form-row, .lf-row { grid-template-columns: minmax(0, 1fr); }

    .footer-inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); }
    .footer-welcome { grid-column: auto; }
    .footer-sprig { width: 120px; opacity: .16; }

    /* A floated editor image leaves too narrow a text column here. */
    .entry-content .alignright, .entry-content .alignleft,
    .about-content .alignright, .about-content .alignleft,
    .services-content .alignright, .services-content .alignleft {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 var(--space-3);
    }
    .boekentips-content .wp-block-table table { column-count: 1; }
}

@media (max-width: 480px) {
    /* No room for 282px of wordmark plus the toggle: scale it down, keeping
       the aspect so the mark itself is untouched. */
    .site-logo img { width: min(282px, 62vw); height: auto; }
    .footer-logo { width: min(228px, 66vw); height: auto; }

    .lightbox-nav { width: 40px; height: 40px; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}