/* ── ayni-holistic.com — site styles (extracted from head.php blocks 1-6 on 2026-05-24) ── */

  /* ────── Tokens ────── */
  :root {
    --cream:       #f6f1ed;
    --beige:       #d1ccbe;
    --green:       #64665b;
    --green-soft:  #d8d4ca;
    --ink:         #2a2620;
    --muted:       #6a635a;
    --terra:       #c0673a;
    --terra-hover: #a8582f;
    --on-accent:   #f6f1ed;   /* always light — text on terra/green CTAs */
    --hairline:    rgba(42, 38, 32, 0.14);

    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --sans:  'Manrope', system-ui, sans-serif;

    --maxw:   1024px;
    --gutter: 56px;
  }

  [data-theme="dark"] {
    --cream:       #3d3024;
    --beige:       #5c4938;
    --green:       #2a2018;
    --green-soft:  #c8bda6;
    --ink:         #efe6d8;
    --muted:       #b8aa92;
    --terra:       #e08a55;
    --terra-hover: #c97540;
    --hairline:    rgba(239, 230, 216, 0.14);
  }

  /* ────── Reset ────── */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }

  /* ────── Layout ────── */
  .page { max-width: var(--maxw); margin: 0 auto; }

  /* ────── Header ────── */
  header.site-header {
    padding: 18px var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    transition: box-shadow .25s ease, background .3s;
  }
  header.site-header.scrolled {
    box-shadow:
      0 1px 0 var(--hairline),
      0 6px 18px rgba(42, 38, 32, 0.05),
      0 12px 28px rgba(42, 38, 32, 0.06);
  }
  .logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .logo img {
    height: 48px;
    width: auto;
    display: block;
  }
  @media (max-width: 600px) {
    .logo img { height: 40px; }
  }
  /* Header right-side group — wraps the theme/translate widgets plus
   * the hamburger button. Nav links + drawer + burger animation are
   * owned by the core/nav widget (see ../assets/site.css :root for
   * the --nav-* token overrides). */
  .nav-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ────── Hero ────── */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 48px var(--gutter) 56px;
    align-items: start;
  }
  .hero-copy h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 58px;
    line-height: 1.05;
    margin: 36px 0 8px;
    letter-spacing: 0.3px;
  }
  .hero-copy h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--terra);
    font-size: 30px;
    margin: 8px 0 28px;
    line-height: 1.1;
  }
  .hero-copy p {
    max-width: 280px;
    margin: 0 0 36px;
    color: var(--ink);
  }
  .hero-buttons {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .btn-primary {
    background: var(--terra);
    color: var(--on-accent);
    padding: 14px 22px;
    border: none;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    transition: background .2s;
  }
  .btn-primary:hover { background: var(--terra-hover); }
  .btn-link {
    font-size: 14px;
    color: var(--ink);
    background: none;
    border: none;
    font-family: var(--sans);
    white-space: nowrap;
  }
  .btn-link:hover { color: var(--terra); }

  .hero-art {
    margin-right: -16px;
    margin-top: -28px;
  }
  .hero-art img { width: 100%; height: auto; }

  /* Rectangular hero photo cropped to a circle via CSS — replaces the
     earlier hero-art.png that had the circular alpha-mask baked in. The
     soft shadow gives it a tiny lift on the cream background. */
  .hero-art .hero-portrait {
    display: block;
    width: 78%;                 /* shape smaller than the column */
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 60% 35%;   /* keep face in frame on a 3:2 source */
    /* Organic blob shape — 8-value border-radius gives a different X/Y
       radius per corner, so the silhouette is uneven rather than a perfect
       circle. Reads like an oversized pebble. */
    border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
    /* Minimal edge softening — radial mask keeps the image fully
     * opaque until 88%, then fades to transparent at 100%. Just a
     * ~12% feather band so the silhouette barely "overflows" into
     * the page bg, but the photo itself stays sharp. */
    -webkit-mask-image: radial-gradient(ellipse at center, #000 88%, transparent 100%);
            mask-image: radial-gradient(ellipse at center, #000 88%, transparent 100%);
  }

  /* ────── Reviews (onder hero) ────── */
  .reviews {
    padding: 0 var(--gutter) 64px;
  }
  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 940px;
    margin: 0 auto;
  }
  .review {
    margin: 0;
    text-align: center;
  }
  .review .review-heart {
    display: block;
    margin: 0 auto 14px;
    color: var(--terra);
  }
  .review blockquote {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink);
    text-wrap: pretty;
  }
  .review figcaption {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.4px;
  }
  @media (max-width: 760px) {
    .reviews { padding-bottom: 56px; }
    .reviews-grid { grid-template-columns: 1fr; gap: 32px; max-width: 420px; }
  }

  /* ────── Beige feature band ────── */
  .band-beige-edge { line-height: 0; font-size: 0; }
  .band-beige-edge img { width: 100%; display: block; vertical-align: top; aspect-ratio: 1024 / 90; }
  .band-beige {
    background: var(--beige);
    padding: 8px var(--gutter) 56px;
    margin-top: -1px;
  }
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .feature {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--ink);
  }
  .feature .svg-icon {
    width: 56px; height: auto; flex-shrink: 0;
    color: var(--ink); stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .feature .lbl { display: flex; flex-direction: column; gap: 4px; }
  .feature strong { font-weight: 500; color: var(--ink); font-size: 14.5px; }
  .feature span  { font-size: 13px; color: var(--muted); }

  /* ────── Herken je dit? ────── */
  .recognize {
    padding: 88px var(--gutter) 56px;
    text-align: center;
  }
  .recognize h2,
  .offer h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 38px;
    margin: 0 0 64px;
    letter-spacing: 0.3px;
  }
  .eggs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
    max-width: 820px;
    margin: 0 auto;
  }
  .egg {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .egg-svg { width: 100%; height: auto; display: block; }
  .egg-svg .egg-shape { stroke: none; }
  .egg-svg .egg-icon { stroke: #2a2620; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .egg p {
    position: absolute;
    left: 12%;
    right: 12%;
    /* Anchor by vertical center (~62% from top) instead of bottom, so
     * single-line edits sit in the body of the egg rather than at the
     * very bottom. Multi-line texts still occupy roughly the same range
     * because their center lands near the same point. */
    top: 62%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: #2a2620;   /* always dark — sits on the light egg shape */
    text-align: center;
  }
  .hairline {
    margin: 28px 100px 0;
    text-align: center;
  }
  .hairline .divider-wave {
    width: 100%;
    height: auto;
    display: block;
    stroke: var(--ink);
    fill: none;
    opacity: 0.45;
  }

  /* ────── Mijn aanbod ────── */
  .offer {
    padding: 64px var(--gutter) 80px;
    text-align: center;
  }
  .offer h2 { margin-bottom: 12px; }
  .offer-divider {
    width: 40px;
    height: 14px;
    margin: 0 auto 40px;
    opacity: 0.55;
    background:
      linear-gradient(90deg, transparent 0%, transparent 40%, var(--ink) 41%, var(--ink) 59%, transparent 60%, transparent 100%)
      center/100% 1px no-repeat;
    position: relative;
  }
  .offer-divider::before,
  .offer-divider::after {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    top: 4px;
  }
  .offer-divider::before { left: 6px; }
  .offer-divider::after  { right: 6px; }

  .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .service {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid var(--hairline);
  }
  .service:last-child { border-right: none; }
  .service .svg-icon {
    width: 78px; height: auto; margin-bottom: 18px;
    color: var(--ink); stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .service h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 14px;
  }
  .service p {
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 200px;
  }
  .service .more {
    color: var(--terra);
    font-size: 13.5px;
    transition: opacity .2s;
  }
  .service .more:hover { opacity: 0.7; }

  /* ────── Over mij ──────
     Single centered "stage" card: hero portrait → intro (moon + title +
     subtitle) → body paragraphs → wave divider → lower section + CTA bar.
     Source: _template/overmij2_extracted/Mijn verhaal v2.html. The stage
     is capped at 560px and centered; on phones it fills the viewport
     edge-to-edge, on desktop it stays a portrait-card width — so the
     mobile and desktop layouts are visually nearly identical (by design).
     Palette is pinned warm-sandy (not theme-flipping). */
  .over-mij {
    --om-ink:        #2b2320;
    --om-ink-soft:   #5b4a43;
    --om-terra:      #b85a36;
    --om-terra-2:    #c0623c;
    --om-rule:       #c98d70;
    --om-bg:         #f5ece4;
    --om-bg-soft:    #ece1d0;

    max-width: 560px;
    margin: 0 auto;
    background: var(--om-bg);
    color: var(--om-ink);
    font-family: var(--sans);
    line-height: 1.6;
    overflow: hidden;
    scroll-margin-top: 80px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ── Hero portrait ──
   * NB: class is `om-hero` (not `hero`) to dodge the homepage's global
   *     `.hero { display: grid; grid-template-columns: 1fr 1fr; ... }`
   *     which would otherwise cascade onto this <figure> and squash the
   *     portrait into a half-width grid cell. */
  .over-mij .om-hero {
    margin: 0 0 -1px;
    padding: 0;
    line-height: 0;
    display: block;
  }
  .over-mij .om-hero img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ── Intro ── */
  .over-mij .intro {
    text-align: center;
    padding: 14px 11% 0;
    margin-top: -10px;
    position: relative;
  }
  .over-mij .moon {
    width: 44px; height: 44px;
    color: var(--om-terra);
    margin: 6px auto 4px;
    display: block;
  }
  .over-mij .moon svg { width: 100%; height: 100%; }
  .over-mij .rule-tiny {
    width: 56px; height: 1px;
    background: var(--om-rule); opacity: .7;
    margin: 6px auto 22px;
  }
  .over-mij .title-1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(30px, 5.6vw, 40px);
    line-height: 1.12;
    letter-spacing: -.002em;
    margin: 0 0 14px;
    color: var(--om-ink);
    text-wrap: balance;
  }
  .over-mij .title-1 .accent,
  .over-mij .title-1 em {
    font-style: normal;
    color: var(--om-terra);
  }
  .over-mij .subtitle-1 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 3.4vw, 22px);
    color: var(--om-terra);
    opacity: .85;
    margin: 0 0 22px;
  }
  .over-mij .subtitle-1 .underline { /* legacy wrapper; no underline in v2 design */ }
  .over-mij .rule {
    width: 64px; height: 1px;
    background: var(--om-rule); opacity: .7;
    margin: 0 auto 28px;
  }

  /* ── Body paragraphs ── */
  .over-mij .body-1 {
    padding: 4px 11% 44px;
    text-align: center;
  }
  .over-mij .body-1 p {
    font-size: clamp(13px, 1.9vw, 14.5px);
    line-height: 1.85;
    color: var(--om-ink-soft);
    margin: 0 auto 22px;
    max-width: 40ch;
    text-wrap: pretty;
  }
  .over-mij .body-1 p:last-child { margin-bottom: 0; }

  /* ── Wave divider + lower section ── */
  .over-mij .lower-wrap { position: relative; }
  .over-mij .wave {
    display: block;
    width: 100%;
    height: 42px;
    margin-bottom: -1px;
    color: var(--om-bg-soft);
  }
  .over-mij .lower {
    background: var(--om-bg-soft);
    padding: 20px 11% 38px;
    text-align: center;
  }

  /* Title-2 uses the existing two-span content key as eyebrow + heading. */
  .over-mij .title-2 {
    margin: 0 0 14px;
    line-height: 1.05;
  }
  .over-mij .title-2 .line1 {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(11px, 1.6vw, 12px);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--om-ink-soft);
    margin: 8px 0 10px;
  }
  .over-mij .title-2 .line2 {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(30px, 5.4vw, 38px);
    color: var(--om-ink);
    letter-spacing: -.002em;
  }
  .over-mij .heart {
    width: 16px; height: 16px;
    color: var(--om-terra);
    margin: 6px auto 24px;
    display: block;
  }

  .over-mij .body-2a,
  .over-mij .brush-text,
  .over-mij .body-2b,
  .over-mij .body-2c {
    margin: 0 auto 24px;
    max-width: 40ch;
    text-align: center;
  }
  .over-mij .body-2c { margin-bottom: 32px; }
  .over-mij .body-2a p,
  .over-mij .brush-text p,
  .over-mij .body-2b p,
  .over-mij .body-2c p {
    font-size: clamp(13px, 1.9vw, 14.5px);
    line-height: 1.85;
    color: var(--om-ink-soft);
    margin: 0;
    text-wrap: pretty;
  }
  .over-mij .body-2b .accent,
  .over-mij .body-2c .accent,
  .over-mij .brush-text .accent {
    color: var(--om-terra);
    font-weight: 500;
  }

  /* ── CTA bar ── */
  .over-mij .cta {
    background: var(--om-bg-soft);
    padding: 4px 22px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .over-mij .cta .q {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(17px, 3vw, 20px);
    color: var(--om-ink);
  }
  .over-mij .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--om-terra);
    color: #fff;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(13px, 1.8vw, 14px);
    letter-spacing: .01em;
    border: 0;
    border-radius: 999px;
    padding: 13px 20px;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px rgba(184, 90, 54, .55);
    transition: background .15s ease, transform .15s ease;
    text-decoration: none;
    white-space: nowrap;
  }
  .over-mij .cta-btn:hover { background: var(--om-terra-2); }
  .over-mij .cta-btn:active { transform: translateY(1px); }
  .over-mij .cta-btn .arrow { display: inline-block; transition: transform .2s ease; }
  .over-mij .cta-btn:hover .arrow { transform: translateX(3px); }
  .over-mij ::selection { background: rgba(184, 90, 54, .25); }

  /* On narrow phones the CTA "Klaar voor verandering?" + button can crowd
   * each other at 320–360px. Stack them when the row gets too tight. */
  @media (max-width: 380px) {
    .over-mij .cta {
      flex-direction: column;
      gap: 14px;
      padding-bottom: 30px;
    }
  }

  /* ────── Footer CTA brand band (cream) ────── */
  .footer-cta {
    background: var(--cream);
    text-align: center;
    padding: 64px var(--gutter) 72px;
    position: relative;
    overflow: hidden;
  }
  .footer-cta-leaves {
    position: absolute;
    top: -8px; left: -10px;
    width: 130px; height: auto;
    stroke: var(--terra);
    opacity: 0.55;
    pointer-events: none;
  }
  .footer-cta-inner {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
  }
  .footer-cta-brand {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 72px;
    line-height: 1;
    color: var(--terra);
    margin: 0 0 18px;
  }
  .footer-cta-lead {
    font-family: var(--sans);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 30px;
  }
  .footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--terra);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 28px;
    border-radius: 999px;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 6px 22px rgba(192, 103, 58, 0.28);
  }
  .footer-cta-btn:hover {
    background: var(--terra-hover);
    color: var(--on-accent);
    transform: translateY(-1px);
  }
  /* Arrow as pseudo-element so it's NOT inside the editable area —
   * CMS edit mode now uses data-edit on the anchor itself (pattern 1)
   * so only the link text is editable. */
  .footer-cta-btn::after {
    content: "→";
    display: inline-block;
    line-height: 1;
    margin-left: 4px;
  }
  /* Pill button uses pattern 1 (data-edit ON the anchor). Tight
   * inset outline keeps the pill at non-edit size visually. */
  body.is-edit-mode .footer-cta-btn[data-edit] {
    outline-offset: -3px !important;
    outline-color: rgba(255, 255, 255, 0.55) !important;
  }
  body.is-edit-mode .footer-cta-btn[data-edit]:hover,
  body.is-edit-mode .footer-cta-btn[data-edit]:focus,
  body.is-edit-mode .footer-cta-btn[data-edit].mce-edit-focus {
    outline-color: rgba(255, 255, 255, 0.9) !important;
  }

  /* ────── Footer (green) ────── */
  .band-green-edge { line-height: 0; font-size: 0; }
  .band-green-edge img { width: 100%; display: block; vertical-align: top; margin-bottom: -1px; aspect-ratio: 1024 / 95; }
  footer.site-footer {
    background: var(--green);
    color: var(--on-accent);
    padding: 16px var(--gutter) 28px;
    position: relative;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 640px;
    margin: 0 auto;
    padding-top: 24px;
  }
  .footer-col-icon {
    width: 22px; height: 22px;
    stroke: var(--terra);
    fill: none;
    margin: 0 0 14px;
    display: block;
  }
  .footer-col h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 18px;
    color: var(--on-accent);
  }
  .footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--green-soft);
  }
  .footer-col ul a:hover { color: var(--on-accent); }
  .footer-email {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    font-size: 14px;
  }
  .footer-email-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(246, 241, 237, 0.10);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .footer-email-icon svg {
    width: 15px; height: 15px;
    stroke: var(--green-soft);
    fill: none;
  }
  .footer-email a { color: var(--green-soft); white-space: nowrap; }
  .footer-email a:hover { color: var(--on-accent); }
  .follow-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 14px;
    color: var(--on-accent);
  }
  .socials { display: flex; gap: 12px; flex-wrap: wrap; }
  .social-item { display: inline-flex; }
  .socials a {
    width: 38px; height: 38px;
    background: var(--on-accent);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--green);
    transition: background .2s, color .2s;
  }
  .socials a:hover { background: var(--green-soft); color: var(--green); }
  .socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .footer-leaf {
    position: absolute;
    right: 0; bottom: 28px;
    width: 144px;
    pointer-events: none;
    stroke: var(--on-accent);
    fill: none;
    opacity: 0.55;
  }
  .footer-bottom {
    margin-top: 36px;
    text-align: center;
    font-size: 13px;
    color: var(--green-soft);
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .footer-bottom span.sep { opacity: 0.5; }
  .footer-bottom a:hover { color: var(--on-accent); }

  /* ────── Signup card (shared by favorieten / blog / plan-een-basis-sessie) ──
   * Visual shell around the core/waitlist "minimal" skin. The form
   * comes from the widget; everything else (sprig, title, script line,
   * body copy) lives on the page so admins can inline-edit via TinyMCE.
   * Light + dark; colours hardcoded so the look is identical across
   * the three coming-soon pages regardless of their page-prefix tokens. */
  .signup-card {
    margin: clamp(28px, 5vw, 44px) auto 0;
    width: min(100%, 380px);
    background: rgba(245, 220, 200, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(201, 141, 112, .18);
    border-radius: 14px;
    padding: 28px 26px 26px;
    text-align: center;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .5) inset,
      0 18px 40px -28px rgba(120, 60, 30, .35);
    color: #2b2320;
  }
  .signup-card-sprig { color: #b85a36; margin-bottom: 14px; display: inline-block; }
  .signup-card-sprig svg { width: 22px; height: 22px; display: block; }
  .signup-card-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(20px, 3.4vw, 26px);
    color: #2b2320;
    margin: 0 0 4px;
    line-height: 1.2;
  }
  .signup-card-script {
    font-family: "Pinyon Script", cursive;
    font-size: clamp(20px, 3.4vw, 26px);
    color: #b85a36;
    line-height: 1.3;
    margin: 0 0 10px;
  }
  .signup-card-rule {
    width: 60px; height: 1px;
    background: #c98d70;
    opacity: .7;
    margin: 6px auto 14px;
  }
  .signup-card-copy {
    font-size: clamp(12.5px, 1.7vw, 13.5px);
    color: #5b4a43;
    line-height: 1.8;
    margin: 0 auto 18px;
    max-width: 28ch;
  }
  [data-theme="dark"] .signup-card {
    background: rgba(60, 48, 36, .70);
    border-color: rgba(208, 156, 130, .22);
    color: #efe6d8;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .04) inset,
      0 18px 40px -28px rgba(0, 0, 0, .55);
  }
  [data-theme="dark"] .signup-card-sprig  { color: #e08a55; }
  [data-theme="dark"] .signup-card-title  { color: #efe6d8; }
  [data-theme="dark"] .signup-card-script { color: #e08a55; }
  [data-theme="dark"] .signup-card-rule   { background: #c89580; opacity: .35; }
  [data-theme="dark"] .signup-card-copy   { color: #b8aa92; }

  /* ────── E-books & begeleiding modal — coming soon ──────
   * Same painted-stage + signup-card layout the standalone page used,
   * now scoped under .ebooks-page and reachable both as a hash-routed
   * modal (#ebooks-begeleiding) and (if a site keeps the standalone
   * page) at /ebooks-begeleiding/. Modal context forces light tokens
   * because .page-modal-inner pins the modal palette light.
   */
  @import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");

  .ebooks-page {
    --eb-ink:      #2b2320;
    --eb-ink-soft: #5b4a43;
    --eb-terra:    #b85a36;
    --eb-terra-2:  #c0623c;
    --eb-cream:    #f5e8dc;
    --eb-rule:     #c98d70;

    background: var(--cream);
    display: flex;
    justify-content: center;
    padding: 0;
    color: var(--eb-ink);
    font-family: "Manrope", system-ui, sans-serif;
  }
  .ebooks-page .stage {
    position: relative;
    width: 100%;
    max-width: 864px;
    /* Standalone page uses viewport min-height; in modal context the
     * modal scrolls so we let the bg image's natural aspect ratio drive
     * height (864 × 1536/1024 ≈ 1296px). */
    min-height: min(100vh, calc(100vw * 1536 / 1024));
  }
  @media (min-width: 865px) {
    .ebooks-page .stage { min-height: calc(864px * 1536 / 1024); }
  }
  .ebooks-page .stage-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  .ebooks-page .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22% 11% 8%;
    text-align: center;
  }
  @media (max-width: 480px) {
    .ebooks-page .content { padding: 24% 8% 8%; }
  }
  .ebooks-page .eyebrow {
    font-weight: 500;
    font-size: clamp(11px, 1.6vw, 13px);
    letter-spacing: .42em;
    color: var(--eb-terra);
    margin: 0 0 18px;
    text-transform: uppercase;
  }
  .ebooks-page .headline {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--eb-ink);
    font-size: clamp(28px, 5.6vw, 44px);
    line-height: 1.12;
    margin: 0;
    letter-spacing: .002em;
    text-wrap: balance;
  }
  .ebooks-page .headline .script {
    display: block;
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    color: var(--eb-terra);
    font-size: 1.05em;
    line-height: 1.4;
    margin: .12em 0 .08em;
    letter-spacing: 0;
  }
  .ebooks-page .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--eb-rule);
  }
  .ebooks-page .divider .line {
    width: clamp(38px, 7vw, 60px);
    height: 1px;
    background: currentColor;
    opacity: .8;
  }
  .ebooks-page .divider svg { width: 14px; height: 14px; display: block; }
  .ebooks-page .lede {
    font-size: clamp(13px, 1.9vw, 14.5px);
    line-height: 1.85;
    color: var(--eb-ink-soft);
    font-weight: 400;
    max-width: 36ch;
    margin: 0 auto;
    letter-spacing: .005em;
  }
  .ebooks-page .footer-block {
    margin-top: clamp(28px, 5vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--eb-rule);
  }
  .ebooks-page .footer-block .thanks {
    font-size: clamp(12.5px, 1.8vw, 13.5px);
    color: var(--eb-ink-soft);
    letter-spacing: .01em;
    margin: 0;
  }
  .ebooks-page .footer-block svg { width: 14px; height: 14px; display: block; }
  .ebooks-page ::selection { background: rgba(184, 90, 54, .25); }

  /* Dark theme — only applies on the standalone page; modal-context
   * override below pins back to light because .page-modal-inner is
   * always light-palette by design. */
  [data-theme="dark"] .ebooks-page {
    --eb-ink:      #efe6d8;
    --eb-ink-soft: #b8aa92;
    --eb-terra:    #e08a55;
    --eb-terra-2:  #c97540;
    --eb-cream:    #3d3024;
    --eb-rule:     rgba(208, 156, 130, .35);
  }
  [data-theme="dark"] .ebooks-page .stage-bg {
    opacity: 0.16;
    filter: brightness(.55) saturate(.8);
  }
  [data-theme="dark"] .ebooks-page ::selection {
    background: rgba(224, 138, 85, .35);
  }
  /* Modal context — pin to light tokens regardless of site theme, and
   * un-dim the bg image. Equal specificity to the dark rule above so
   * declaration order (this block later) wins. */
  .page-modal-body .ebooks-page,
  [data-theme="dark"] .page-modal-body .ebooks-page {
    --eb-ink:      #2b2320;
    --eb-ink-soft: #5b4a43;
    --eb-terra:    #b85a36;
    --eb-terra-2:  #c0623c;
    --eb-cream:    #f5e8dc;
    --eb-rule:     #c98d70;
  }
  .page-modal-body .ebooks-page .stage-bg,
  [data-theme="dark"] .page-modal-body .ebooks-page .stage-bg {
    opacity: 1;
    filter: none;
  }
  /* Modal-body's default 80px padding clashes with the painted stage's
   * own internal padding. Zero it out specifically for the ebooks modal
   * (page_modal.php sets class="ebooks-modal" via the $pages array).
   * Other modals keep their generous padding. */
  .page-modal-body.ebooks-modal { padding: 0; }
  .page-modal-body .ebooks-page { background: transparent; }

  /* The painted bg-image spans the full modal width, so the default
   * CMS edit-mode dashed outline (which sits 4px OUTSIDE the element)
   * cuts a visible strip along the modal edges. Suppress the outline
   * here — the image is still click-to-replace via the img-edit
   * popover; just no dashed visual hint in this modal. */
  body.is-edit-mode .page-modal-body.ebooks-modal .stage-bg {
    outline: none;
  }
  /* Mobile shell rule sits 8px in from the viewport (backdrop visible
   * around the modal-inner). For the painted ebooks modal that gap
   * reads as a sliver of dark behind the modal — kill the lateral
   * padding so the modal goes edge-to-edge on narrow viewports. */
  @media (max-width: 860px) {
    .page-modal#ebooks-begeleiding {
      padding-left: 0;
      padding-right: 0;
    }
    .page-modal#ebooks-begeleiding .page-modal-inner {
      border-radius: 0;
    }
  }

  /* ────── Page modals (sessie / consult / begeleiding) ────── */
  .page-modal {
    position: fixed;
    inset: 0;
    background: rgba(42, 38, 32, 0.55);
    z-index: 900;
    display: flex;
    flex-direction: column;
    /* Guarantee breathing room above the sticky site-header even when
       viewport is short (where 10vh would shrink below the nav height).
       In edit mode the admin-bar pushes the site-header down by 48px so
       the modal needs the same extra margin (set via --pm-extra below). */
    --pm-extra: 0px;
    padding: max(calc(100px + var(--pm-extra)), calc(10vh + var(--pm-extra))) 16px max(40px, 6vh);
    animation: page-modal-fade .2s ease-out;
  }
  body.is-edit-mode .page-modal { --pm-extra: 48px; }
  body.is-edit-mode .page-modal-inner { max-height: calc(80vh - 48px); }
  .page-modal[hidden] { display: none; }
  @keyframes page-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .page-modal-inner {
    /* Pin the modal content to the light palette regardless of site theme.
       The page-modals (sessie / consult / begeleiding) are designed as
       light overlays — sessie-rich and consult-rich use hardcoded light
       section backgrounds with dark text, so in dark mode the surrounding
       modal-inner and any default page-modal-body text were rendering
       dark-on-dark. Re-declaring the tokens here snaps all descendants
       (including default .page-modal-body type styles) back to readable. */
    --cream:       #f6f1ed;
    --beige:       #d1ccbe;
    --green:       #64665b;
    --green-soft:  #d8d4ca;
    --ink:         #2a2620;
    --muted:       #6a635a;
    --terra:       #c0673a;
    --terra-hover: #a8582f;
    --hairline:    rgba(42, 38, 32, 0.14);
    position: relative;
    background: var(--cream);
    max-width: 1024px;
    width: 100%;
    margin: auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* clip the body's scrollbar to rounded corners */
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(42, 38, 32, 0.25);
  }
  .page-modal-body {
    padding: 80px var(--gutter) 64px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;                /* required so flex child can scroll below content size */
  }
  .page-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--cream);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s, transform .15s, border-color .15s;
  }
  .page-modal-close:hover {
    background: var(--beige);
    border-color: var(--terra);
    color: var(--terra);
    transform: scale(1.05);
  }
  .page-modal-body h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: 0.2px;
    margin: 0 0 32px;
    color: var(--ink);
  }
  .page-modal-body h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    color: var(--terra);
    font-size: 26px;
    margin: 32px 0 12px;
    line-height: 1.2;
  }
  .page-modal-body h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    margin: 24px 0 10px;
    color: var(--ink);
  }
  .page-modal-body p,
  .page-modal-body ul,
  .page-modal-body ol {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .page-modal-body ul,
  .page-modal-body ol { padding-left: 24px; }
  .page-modal-body a {
    color: var(--terra);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .page-modal-body a:hover { color: var(--terra-hover); }
  .page-modal-body blockquote {
    border-left: 3px solid var(--terra);
    padding: 4px 0 4px 18px;
    margin: 20px 0;
    font-style: italic;
    color: var(--muted);
  }
  body.page-modal-open { overflow: hidden; }

  /* ────── Rich consult modal (Voedingsadvies & consult) ──────
     Scoped under .consult-rich so its tokens, typography and section
     designs don't leak into the rest of the site. The modal-body keeps
     scrolling but loses its default padding so the colored sections
     reach edge-to-edge inside the 1024px modal frame. */
  .page-modal-body.consult-rich {
    padding: 0;
  }
  .consult-rich {
    --cr-sage:        #b8baa3;
    --cr-sage-deep:   #3d4a2c;
    --cr-cream:       #f6ede1;
    --cr-khaki:       #aea58a;
    --cr-rose:        #f6e7dc;
    --cr-rose-tint:   #f1d6c5;
    --cr-ink:         #2a261f;
    --cr-ink-soft:    #4a3f33;
    --cr-terracotta:  #b76b3f;
    --cr-terracotta-d:#a85a31;
    --cr-green-btn:   #6d7b4b;

    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--cr-ink-soft);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .consult-rich .section {
    width: 100%;
    padding: 96px 32px;
    position: relative;
    overflow: hidden;
  }
  .consult-rich .wrap {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .consult-rich h1,
  .consult-rich h2,
  .consult-rich h3 {
    font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
  }
  .consult-rich p { margin: 0; text-wrap: pretty; }
  .consult-rich .accent { color: var(--cr-terracotta-d); }
  .consult-rich em { font-style: italic; }
  .consult-rich strong { font-weight: 700; }

  .consult-rich .ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--cr-terracotta-d);
  }
  .consult-rich .ornament .line {
    width: 46px; height: 1px;
    background: currentColor;
    opacity: .55;
  }
  .consult-rich .ornament svg { display: block; }

  /* ── Section 1 — sage / book photo ── */
  .consult-rich .s1 {
    background-color: #bbb59a;
    color: var(--cr-sage-deep);
    padding: 96px 0 0;
    position: relative;
  }
  .consult-rich .s1::before {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.018) 0px, rgba(0,0,0,0.018) 1px,
        rgba(255,255,255,0.018) 1px, rgba(255,255,255,0.018) 2px),
      repeating-linear-gradient(0deg,
        rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 2px,
        transparent 2px, transparent 5px);
    pointer-events: none;
    z-index: 0;
  }
  .consult-rich .s1 .wrap,
  .consult-rich .s1 .photo,
  .consult-rich .s1 .photo-wrap { position: relative; z-index: 1; }
  .consult-rich .s1 .wrap { padding: 0 32px 32px; }
  .consult-rich .s1 .seedling {
    margin: 0 auto 24px;
    display: block;
    color: var(--cr-sage-deep);
  }
  .consult-rich .s1 h1 {
    font-size: clamp(40px, 6.2vw, 72px);
    color: var(--cr-sage-deep);
    margin-bottom: 18px;
  }
  .consult-rich .s1 h1 .small {
    display: block;
    font-size: 0.78em;
    margin-top: 18px;
    line-height: 1.18;
  }
  .consult-rich .s1 .orn-row { margin: 34px 0 38px; }
  .consult-rich .s1 .body {
    color: #3f4733;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.2vw, 26px);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.55;
  }
  .consult-rich .s1 .body p + p { margin-top: 22px; }
  .consult-rich .s1 .photo-wrap { margin-top: 48px; }
  .consult-rich .s1 .photo {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 40px, #000 140px);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.4) 40px, #000 140px);
  }

  /* ── Section 2 — cream / Herken je dit ── */
  .consult-rich .s2 {
    background: var(--cr-cream);
    color: var(--cr-ink-soft);
  }
  .consult-rich .s2 .wrap { max-width: 640px; text-align: left; }
  .consult-rich .s2 .leaf {
    display: block;
    margin: 0 auto 38px;
    color: var(--cr-terracotta-d);
  }
  .consult-rich .s2 h2 {
    font-size: clamp(34px, 4.4vw, 52px);
    color: var(--cr-ink);
    margin-bottom: 22px;
    text-align: center;
  }
  .consult-rich .s2 .lede {
    font-size: 17px;
    line-height: 1.7;
    color: #4a3f33;
  }
  .consult-rich .s2 .subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--cr-terracotta-d);
    margin: 38px 0 18px;
  }
  .consult-rich .s2 ul.checks {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
  }
  .consult-rich .s2 ul.checks li {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 8px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--cr-ink);
  }
  .consult-rich .s2 ul.checks .ico {
    flex: 0 0 44px; height: 44px;
    border-radius: 50%;
    background: var(--cr-rose-tint);
    display: flex; align-items: center; justify-content: center;
    color: var(--cr-ink);
  }
  .consult-rich .s2 .divider { margin: 36px 0; text-align: center; }
  .consult-rich .s2 .note {
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
  }

  /* ── Werkwijze — het samenhang-wiel (tussen s2 en s3) ── */
  .consult-rich .swerk {
    background: var(--cr-cream);
    text-align: center;
  }
  .consult-rich .swerk .wrap { max-width: 680px; margin: 0 auto; }
  .consult-rich .swerk h2 {
    font-size: clamp(30px, 4vw, 46px);
    color: var(--cr-ink);
    margin-bottom: 16px;
    text-align: center;
  }
  .consult-rich .swerk .lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--cr-ink-soft);
    max-width: 460px;
    margin: 0 auto 30px;
  }
  .consult-rich .swerk .wheel { margin: 0; }
  .consult-rich .swerk .wheel-img {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
    margin: 0 auto;
  }
  .consult-rich .swerk .wheel figcaption {
    font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--cr-ink-soft);
    margin-top: 12px;
  }

  /* ── Section 3 — khaki / Wat een voedingsconsult ── */
  .consult-rich .s3 {
    background: var(--cr-khaki);
    color: #2e2a22;
    position: relative;
  }
  .consult-rich .s3 .seedling {
    margin: 0 auto 24px;
    display: block;
    color: #2e2a22;
  }
  .consult-rich .s3 h2 {
    font-size: clamp(40px, 5.6vw, 64px);
    color: #1f1d18;
    margin-bottom: 22px;
  }
  .consult-rich .s3 .orn-row { margin: 14px 0 28px; }
  .consult-rich .s3 .lede {
    max-width: 560px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: #2e2a22;
  }
  .consult-rich .s3 .grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 56px;
    text-align: left;
  }
  .consult-rich .s3 .cell {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0,0,0,0.18);
  }
  .consult-rich .s3 .cell:nth-last-child(-n+2) { border-bottom: none; }
  .consult-rich .s3 .cell .ico {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: #1f1d18;
  }
  .consult-rich .s3 .cell h3 {
    margin: 0 0 6px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 23px;
    color: #1f1d18;
  }
  .consult-rich .s3 .cell p {
    font-size: 15.5px;
    line-height: 1.6;
    color: #2e2a22;
  }
  .consult-rich .s3 .closer { margin-top: 54px; }
  .consult-rich .s3 .closer .q {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 2.6vw, 30px);
    color: #1f1d18;
    margin-bottom: 22px;
  }
  .consult-rich .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 42px;
    background: var(--cr-terracotta-d);
    color: #fff7ef;
    border-radius: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05);
    transition: transform .15s ease, background .15s ease;
  }
  .consult-rich .cta-btn:hover {
    background: #9a4f29;
    transform: translateY(-1px);
  }
  .consult-rich .s3 .leaf-decor {
    position: absolute;
    right: -10px;
    bottom: 80px;
    color: rgba(60,60,40,0.35);
    pointer-events: none;
  }

  /* ── Section 4 — rose / Mijn consulten ── */
  .consult-rich .s4 {
    background: var(--cr-rose);
    color: var(--cr-ink-soft);
    position: relative;
  }
  .consult-rich .s4 .wrap { max-width: 980px; }
  .consult-rich .s4 h2 {
    font-size: clamp(46px, 6vw, 76px);
    color: var(--cr-ink);
    margin-bottom: 14px;
  }
  .consult-rich .s4 h2 .accent { color: var(--cr-terracotta-d); }
  .consult-rich .s4 .orn-row { margin: 6px 0 24px; }
  .consult-rich .s4 .lede {
    font-size: 17px;
    line-height: 1.7;
    color: var(--cr-ink-soft);
    max-width: 520px;
    margin: 0 auto;
  }
  /* Quotes boven de prijskaarten — zelfde groen/rust-koppeling als de cards */
  .consult-rich .s4 .quotes {
    margin-top: 52px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: center;
  }
  .consult-rich .s4 .quote { margin: 0; }
  .consult-rich .s4 .quote .quote-heart {
    display: block;
    margin: 0 auto 14px;
    color: var(--cr-terracotta);
  }
  .consult-rich .s4 .quote blockquote {
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.45;
    color: var(--cr-ink-soft);
    text-wrap: pretty;
  }
  .consult-rich .s4 .quote figcaption {
    font-size: 13px;
    letter-spacing: 0.4px;
    color: #5a4a3d;
  }
  .consult-rich .s4 .quote .about {
    display: block;
    margin-top: 3px;
    font-style: italic;
    opacity: 0.8;
  }
  .consult-rich .s4 .quote.green .about { color: #586a3f; }
  .consult-rich .s4 .quote.rust  .about { color: var(--cr-terracotta-d); }

  .consult-rich .s4 .cards {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    text-align: left;
  }
  .consult-rich .card {
    background: #fbf0e6;
    border-radius: 32px;
    padding: 48px 40px 40px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .consult-rich .card .icon-wrap {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #f4d6c5;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
  }
  .consult-rich .card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(34px, 3vw, 42px);
    line-height: 1.1;
    margin: 0 0 14px;
    text-align: center;
  }
  .consult-rich .card h3.green { color: #586a3f; }
  .consult-rich .card h3.rust  { color: var(--cr-terracotta-d); }
  .consult-rich .card .h-rule {
    width: 38px; height: 2px;
    background: currentColor;
    opacity: .65;
    margin: 0 auto 28px;
    border-radius: 2px;
  }
  .consult-rich .card .blurb {
    font-size: 15.5px;
    line-height: 1.65;
    color: #5a4a3d;
    text-align: center;
    margin-bottom: 28px;
  }
  .consult-rich .card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
  }
  .consult-rich .card ul li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #3f352d;
  }
  .consult-rich .card ul li .li-ico { margin-top: 2px; }
  .consult-rich .card.green ul li .li-ico { color: #7a8a5b; }
  .consult-rich .card.rust  ul li .li-ico { color: var(--cr-terracotta-d); }
  .consult-rich .card .price-row {
    border-top: 1px solid rgba(0,0,0,0.12);
    padding-top: 22px;
    margin-top: auto;
    text-align: center;
  }
  .consult-rich .card .price {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    color: var(--cr-ink);
    background: #f4d6c5;
    padding: 6px 24px;
    border-radius: 14px;
  }
  .consult-rich .card .price svg { opacity: .7; }
  .consult-rich .card .button-row { margin-top: 22px; }
  .consult-rich .card .button-row a,
  .consult-rich .card .button-row button {
    width: 100%;
    padding: 18px 24px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: #fbf0e6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
  }
  .consult-rich .card .button-row a:hover,
  .consult-rich .card .button-row button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
  .consult-rich .card.green .button-row a,
  .consult-rich .card.green .button-row button { background: var(--cr-green-btn); }
  .consult-rich .card.rust  .button-row a,
  .consult-rich .card.rust  .button-row button { background: var(--cr-terracotta-d); }
  .consult-rich .s4 .disclaimer { margin-top: 54px; text-align: center; }
  .consult-rich .s4 .disclaimer .heart {
    color: var(--cr-terracotta);
    margin-bottom: 12px;
  }
  .consult-rich .s4 .disclaimer p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #7a6657;
    font-size: 18px;
    line-height: 1.5;
  }
  .consult-rich .s4 .disclaimer p strong {
    font-weight: 500;
    color: #6a5447;
  }
  .consult-rich .s4 .branch-decor {
    position: absolute;
    right: -30px;
    top: 30px;
    color: rgba(80,60,40,0.18);
    pointer-events: none;
    width: 240px;
    height: auto;
  }

  @media (max-width: 760px) {
    .consult-rich .section { padding: 64px 22px; }
    .consult-rich .s1 { padding: 64px 0 0; }
    .consult-rich .s3 .grid { grid-template-columns: 1fr; gap: 0; }
    .consult-rich .s3 .cell { border-bottom: 1px solid rgba(0,0,0,0.18) !important; }
    .consult-rich .s4 .quotes { grid-template-columns: 1fr; gap: 32px; }
    .consult-rich .s4 .cards { grid-template-columns: 1fr; }
    .consult-rich .card { padding: 36px 26px 30px; }
    .consult-rich .s4 .branch-decor { display: none; }
  }

  /* ────── Rich sessie modal (Energetische sessie op afstand) ──────
     Scoped under .sessie-rich; the modal-inner is narrowed to 780px to
     match the template's page width. Tokens prefixed --ses- to avoid
     colliding with site tokens; SVG sprite IDs use s- prefix. */
  .page-modal#sessie .page-modal-inner { max-width: 780px; }
  .page-modal-body.sessie-rich { padding: 0; background: #faeee3; }
  .sessie-rich {
    --ses-cream-1:#faeee3;
    --ses-peach-1:#f7c9ad;
    --ses-terra:#b75a3f;
    --ses-terra-soft:#c87358;
    --ses-ink:#1d1d1d;
    --ses-ink-soft:#2a2422;
    --ses-muted:#b88370;
    font-family: 'Lato', system-ui, sans-serif;
    color: var(--ses-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .sessie-rich .section { position: relative; padding: 40px 56px 72px; overflow: hidden; }
  .sessie-rich .h-serif { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: var(--ses-ink); letter-spacing: -.01em; line-height: 1.05; margin: 0; }
  .sessie-rich .h-serif .accent { color: var(--ses-terra); font-style: normal; }

  .sessie-rich .divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ses-terra); margin: 14px 0; }
  .sessie-rich .divider .line { height: 1px; width: 64px; background: currentColor; opacity: .55; }
  .sessie-rich .divider svg { width: 18px; height: 18px; }
  .sessie-rich .divider.left { justify-content: flex-start; }
  .sessie-rich .divider.left .line { width: 48px; }

  .sessie-rich .heart-only { display: flex; justify-content: center; color: var(--ses-terra); margin: 18px 0; }
  .sessie-rich .heart-only svg { width: 16px; height: 16px; }

  .sessie-rich .moon-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ses-terra); }
  .sessie-rich .moon-icon svg { width: 56px; height: 48px; }
  .sessie-rich .moon-icon .sub-heart { width: 1px; height: 18px; background: currentColor; opacity: .5; }
  .sessie-rich .moon-icon .heart-mini { width: 14px; height: 14px; }

  .sessie-rich .book-icon { display: flex; justify-content: center; color: var(--ses-ink); margin-bottom: 14px; }
  .sessie-rich .book-icon svg { width: 64px; height: 64px; }

  /* ── Sec 1 — hero photo (full-bleed background) ── */
  .sessie-rich .sec1 {
    padding: 0;
    position: relative;
    background: #f5c8aa url('/assets/sessie-hero.jpg') center top / cover no-repeat;
    min-height: 1180px;
    color: #faeee3;
    overflow: hidden;
  }
  .sessie-rich .sec1-inner { padding: 60px 56px 80px; max-width: 430px; }
  .sessie-rich .sec1 .moon-icon { justify-content: flex-start; align-items: flex-start; padding-left: 90px; margin-bottom: 34px; color: #faeee3; }
  .sessie-rich .sec1-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 54px; line-height: 1.0; color: #faeee3; margin: 0 0 18px; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(30,15,8,.45); }
  .sessie-rich .sec1-title .accent { color: #f4d9b8; display: block; }
  .sessie-rich .sec1 .divider.left { margin: 8px 0 42px; }
  .sessie-rich .sec1 .divider.left .line { background: #faeee3; opacity: .8; }
  .sessie-rich .sec1 .divider.left svg { color: #faeee3; }
  .sessie-rich .sec1-body { font-size: 16px; line-height: 1.6; color: #faeee3; margin: 0 0 28px; text-shadow: 0 1px 2px rgba(30,15,8,.45); }
  .sessie-rich .sec1-body .sec1-emph { color: #f4d9b8; }
  .sessie-rich .sec1 .mini-heart { display: flex; justify-content: flex-start; color: #f4d9b8; margin: 10px 0 22px; }
  .sessie-rich .sec1 .mini-heart svg { width: 14px; height: 14px; }
  .sessie-rich .sec1 .script-quote { font-family: 'Pinyon Script', cursive; color: #f4d9b8; font-size: 38px; line-height: 1.3; margin: 18px 0 14px; text-shadow: 0 1px 3px rgba(30,15,8,.4); }
  .sessie-rich .sec1 .sprig { display: flex; justify-content: flex-start; color: var(--ses-terra); margin: 6px 0 36px; }
  .sessie-rich .sec1 .sprig svg { width: 54px; height: 18px; }
  .sessie-rich .sec1 .leaf-decor { position: absolute; left: 6px; bottom: 140px; color: var(--ses-terra); opacity: .45; }
  .sessie-rich .sec1 .leaf-decor svg { width: 42px; height: 140px; }

  .sessie-rich .cta {
    display: inline-flex; align-items: center; gap: 14px;
    background: var(--ses-terra-soft); color: #fff;
    padding: 18px 28px; border-radius: 999px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 500; text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(150,70,40,.18);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer; border: none;
  }
  .sessie-rich .cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(150,70,40,.25); }
  .sessie-rich .cta svg { width: 22px; height: 22px; }

  /* ── Sec 2 — Herken je dit? ── */
  .sessie-rich .sec2 { background: var(--ses-cream-1); padding: 80px 56px 90px; text-align: center; }
  .sessie-rich .sec2 .moon-icon { align-items: center; }
  .sessie-rich .sec2-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 64px; line-height: 1; margin: 18px 0 28px; }
  .sessie-rich .sec2-title .accent { color: var(--ses-terra); font-weight: 500; }
  .sessie-rich .sec2-lead { font-size: 17px; color: var(--ses-ink-soft); max-width: 520px; margin: 0 auto; line-height: 1.6; }
  .sessie-rich .sec2 .divider { margin: 36px 0 40px; }
  .sessie-rich .sec2 .divider .line { background: var(--ses-terra); opacity: .7; width: 90px; }

  .sessie-rich .misschien-label { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; color: var(--ses-terra); text-align: center; margin: 0 0 26px; font-weight: 500; }
  .sessie-rich .symptom-grid { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: center; max-width: 360px; margin: 0 auto; }
  .sessie-rich .symptom { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .sessie-rich .symptom .icon-wrap { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: #f3dccb; display: flex; align-items: center; justify-content: center; color: var(--ses-ink); }
  .sessie-rich .symptom .icon-wrap svg { width: 30px; height: 30px; stroke-width: 1.4; }
  .sessie-rich .symptom .symptom-icon { width: 30px; height: 30px; object-fit: contain; display: block; }
  .sessie-rich .symptom .label { font-size: 15px; line-height: 1.35; color: var(--ses-ink-soft); text-align: center; }

  .sessie-rich .feel-card { margin: 48px auto 0; max-width: 640px; background: #f3dccb; border-radius: 22px; padding: 26px 28px 30px; text-align: center; }
  .sessie-rich .feel-card .heart-only { margin: 0 0 8px; }
  .sessie-rich .feel-card .script { font-family: 'Pinyon Script', cursive; color: var(--ses-terra-soft); font-size: 24px; margin: 0 0 10px; }
  .sessie-rich .feel-card .quote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: var(--ses-ink); font-style: italic; margin: 0; font-weight: 500; }

  .sessie-rich .closing-2 { margin-top: 50px; text-align: center; }
  .sessie-rich .closing-2 .sprig { display: flex; justify-content: center; color: var(--ses-terra); margin-bottom: 24px; }
  .sessie-rich .closing-2 .sprig svg { width: 60px; height: 18px; }
  .sessie-rich .closing-2 .line1 { font-size: 17px; color: var(--ses-ink); margin: 0 0 4px; }
  .sessie-rich .closing-2 .line2 { font-size: 17px; color: var(--ses-terra-soft); margin: 0; font-style: italic; }

  /* ── Sec 3 — Hoe werkt een sessie ── */
  .sessie-rich .sec3 { background: linear-gradient(180deg, #f9cfb3 0%, #fbd9c1 50%, #f7c9ad 100%); padding: 80px 56px 90px; text-align: center; }
  .sessie-rich .sec3-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 56px; line-height: 1.0; margin: 6px 0 18px; }
  .sessie-rich .sec3-title .accent { color: var(--ses-terra); display: block; }
  .sessie-rich .sec3 .divider { margin: 14px 0 36px; }
  .sessie-rich .sec3-body { text-align: left; max-width: 620px; margin: 0 auto 36px; font-size: 16.5px; line-height: 1.7; color: var(--ses-ink); }
  .sessie-rich .sec3-body p { margin: 0 0 18px; }
  .sessie-rich .sec3-body .link { color: var(--ses-terra); text-decoration: none; border-bottom: 1px solid rgba(183,90,63,.4); }

  .sessie-rich .pillars { max-width: 640px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; text-align: left; position: relative; }
  .sessie-rich .pillar { padding: 24px 22px; display: flex; gap: 16px; align-items: flex-start; }
  .sessie-rich .pillar .picon { flex: 0 0 60px; color: var(--ses-ink); }
  .sessie-rich .pillar .picon svg { width: 54px; height: 54px; stroke-width: 1.3; }
  .sessie-rich .pillar h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; color: var(--ses-ink); }
  .sessie-rich .pillar p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ses-ink-soft); }
  .sessie-rich .pillars::before,
  .sessie-rich .pillars::after { content: ""; position: absolute; background: rgba(120,60,30,.18); }
  .sessie-rich .pillars::before { left: 50%; top: 18px; bottom: 18px; width: 1px; transform: translateX(-.5px); }
  .sessie-rich .pillars::after { left: 18px; right: 18px; top: 50%; height: 1px; transform: translateY(-.5px); }

  .sessie-rich .closing-3 { margin-top: 46px; }
  .sessie-rich .closing-3 .heart-only { margin: 0 0 18px; }
  .sessie-rich .closing-3 .line1 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: var(--ses-terra-soft); margin: 0 0 6px; }
  .sessie-rich .closing-3 .line2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: var(--ses-ink); margin: 0; }

  /* ── Sec 4 — boek ── */
  .sessie-rich .sec4 { background: var(--ses-cream-1); padding: 80px 56px 90px; text-align: center; }
  .sessie-rich .sec4-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 54px; line-height: 1.05; margin: 18px 0 6px; }
  .sessie-rich .sec4-title .accent { color: var(--ses-terra); display: block; }
  .sessie-rich .sec4 .divider { margin: 14px 0 24px; }
  .sessie-rich .sec4-lead { font-size: 17px; color: var(--ses-ink-soft); max-width: 480px; margin: 0 auto 40px; line-height: 1.6; }
  /* Quote vlak boven het prijsblok — laatste zetje voor het boeken */
  .sessie-rich .sec4-quote { margin: 48px auto 0; max-width: 460px; }
  .sessie-rich .sec4-quote .quote-heart { display: block; width: 18px; height: 18px; margin: 0 auto 14px; color: var(--ses-terra); }
  .sessie-rich .sec4-quote blockquote { margin: 0 0 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ses-ink-soft); text-wrap: pretty; }
  .sessie-rich .sec4-quote figcaption { font-size: 13px; letter-spacing: 0.4px; color: var(--ses-muted); }

  .sessie-rich .wat-label { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; color: var(--ses-terra); font-weight: 500; margin: 0 0 10px; }
  .sessie-rich .wat-line { width: 120px; height: 1px; background: var(--ses-terra); opacity: .5; margin: 0 auto 28px; }

  .sessie-rich .receive-list { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
  .sessie-rich .receive { display: flex; align-items: center; gap: 22px; text-align: left; }
  .sessie-rich .receive .ricon { flex: 0 0 64px; display: flex; justify-content: center; color: var(--ses-ink); }
  .sessie-rich .receive .ricon svg { width: 54px; height: 54px; stroke-width: 1.3; }
  .sessie-rich .receive .rtext { font-size: 16px; color: var(--ses-ink-soft); line-height: 1.45; }
  .sessie-rich .receive .rtext b { font-weight: 700; color: var(--ses-ink); }

  .sessie-rich .price-block { position: relative; margin: 50px auto 30px; max-width: 520px; }
  .sessie-rich .price-block .price-bg {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 340px; height: 130px;
    background: radial-gradient(ellipse at center, rgba(245,180,150,.55) 0%, rgba(245,180,150,0) 70%);
    z-index: 0; pointer-events: none;
  }
  .sessie-rich .price { position: relative; z-index: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 64px; color: var(--ses-terra); font-weight: 500; line-height: 1; margin: 0 0 10px; }
  .sessie-rich .price-sub { position: relative; z-index: 1; font-size: 15px; color: var(--ses-ink-soft); line-height: 1.45; margin: 0; }

  .sessie-rich .sec4 .heart-only { margin: 34px 0 18px; }
  .sessie-rich .sec4 .cta { margin: 0 auto; display: inline-flex; }

  .sessie-rich .closing-4 { margin-top: 38px; color: var(--ses-terra); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
  .sessie-rich .closing-4 .leaf-mini { display: flex; justify-content: center; color: var(--ses-terra); margin-bottom: 10px; }
  .sessie-rich .closing-4 .leaf-mini svg { width: 18px; height: 18px; }
  .sessie-rich .closing-4 .l1 { font-size: 15.5px; color: var(--ses-muted); margin: 0 0 2px; }
  .sessie-rich .closing-4 .l2 { font-size: 15.5px; color: var(--ses-muted); margin: 0; }

  @media (max-width: 680px) {
    .sessie-rich .section { padding: 28px 28px 56px; }

    /* Hero: same full-bleed photo + light text as desktop. Image anchored
       to the left so text sits over the rocks; woman's face stays visible
       on the right side of the screen. */
    .sessie-rich .sec1 {
      min-height: 880px;
      background: #f5c8aa url('/assets/sessie-hero-mobile.jpg') 35% top / cover no-repeat;
    }
    .sessie-rich .sec1-inner { padding: 48px 24px 56px; max-width: 65%; }
    .sessie-rich .sec1 .moon-icon { padding-left: 0; }
    .sessie-rich .sec1-title { font-size: 36px; line-height: 1.05; }
    .sessie-rich .sec1 .divider.left { margin: 8px 0 28px; }
    .sessie-rich .sec1-body { font-size: 14.5px; }
    .sessie-rich .sec1 .script-quote { font-size: 28px; }
    .sessie-rich .sec1 .leaf-decor { display: none; }

    .sessie-rich .sec2-title { font-size: 48px; }
    .sessie-rich .sec3-title,
    .sessie-rich .sec4-title { font-size: 40px; }
    .sessie-rich .symptom-grid { grid-template-columns: 1fr; gap: 18px; }
    .sessie-rich .pillars { grid-template-columns: 1fr; }
    .sessie-rich .pillars::before { display: none; }
    .sessie-rich .pillars::after { top: auto; bottom: 0; }
  }

  /* ────── Responsive ────── */
  @media (max-width: 860px) {
    :root { --gutter: 24px; }
    header.site-header { grid-template-columns: auto 1fr auto; }
    /* Nav links + burger + drawer styling owned by the core/nav widget
     * (see :root --nav-* overrides further down for ayni branding).
     * Only the chrome-level effects stay here: nav-right gap, scroll-
     * lock + hiding the sticky CTA when the mobile drawer is open. */
    .nav-right { gap: 18px; }
    body.cms-nav-open .scta { display: none; }

    .hero { grid-template-columns: 1fr; gap: 16px; padding: 24px var(--gutter) 32px; }
    .hero-art { order: -1; margin: 0; }
    .hero-copy h1 { font-size: 44px; margin-top: 12px; }
    .hero-copy h2 { font-size: 24px; }

    .features { grid-template-columns: 1fr; gap: 20px; }

    .eggs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .recognize h2, .offer h2 { font-size: 28px; margin-bottom: 36px; }
    .hairline { margin: 28px 24px 0; }

    .services { grid-template-columns: 1fr; gap: 36px; }
    .service { border-right: none; border-bottom: 1px solid var(--hairline); padding-bottom: 28px; }

    .page-modal { padding: max(calc(80px + var(--pm-extra)), calc(6vh + var(--pm-extra))) 8px max(24px, 4vh); }
    .page-modal-inner { max-height: 88vh; border-radius: 8px; }
    body.is-edit-mode .page-modal-inner { max-height: calc(88vh - 48px); }
    .page-modal-body { padding: 64px 20px 40px; }
    .page-modal-close { top: 14px; right: 14px; width: 36px; height: 36px; }
    .page-modal-body h1 { font-size: 34px; margin-bottom: 22px; }
    .page-modal-body h2 { font-size: 22px; }
    .page-modal-body p { font-size: 15px; }
    .service:last-child { border-bottom: none; }

    .footer-cta { padding: 48px var(--gutter) 56px; }
    .footer-cta-brand { font-size: 56px; }
    .footer-cta-leaves { width: 100px; }
    .footer-grid { gap: 28px; padding-top: 16px; }
    .footer-leaf { display: none; }
  }
  @media (max-width: 520px) {
    .eggs { grid-template-columns: repeat(2, 1fr); }
    .footer-cta-brand { font-size: 48px; }
    .footer-grid { gap: 24px; }
    .hero-buttons { gap: 14px; }
    .btn-primary { padding: 12px 18px; }
  }

/* ── block 2 ── */

  :root {
    --theme-switcher-bg:     var(--cream);
    --theme-switcher-border: rgba(42,38,32,0.12);
    --theme-switcher-hover:  var(--terra);
    --theme-track-bg-light:  linear-gradient(135deg, #e6d5b8, #d4a87e);
    --theme-track-bg-dark:   linear-gradient(135deg, #3a4435, #4f5a45);
    --theme-thumb-bg-light:  #fff;
    --theme-thumb-bg-dark:   #e8e2d6;
  }

/* ── block 3 ── */

  :root {
    --tr-btn-bg:            var(--cream);
    --tr-btn-border:        rgba(42,38,32,0.12);
    --tr-btn-color:         var(--ink);
    --tr-btn-hover-bg:      var(--beige);
    --tr-btn-hover-color:   var(--ink);
    --tr-btn-hover-border:  var(--terra);
    --tr-dd-bg:             var(--cream);
    --tr-dd-border:         rgba(42,38,32,0.12);
    --tr-search-bg:         var(--beige);
    --tr-search-border:     rgba(42,38,32,0.12);
    --tr-search-color:      var(--ink);
    --tr-search-placeholder:var(--muted);
    --tr-item-color:        var(--muted);
    --tr-item-hover-bg:     var(--beige);
    --tr-item-hover-color:  var(--ink);
    --tr-item-active-color: var(--terra);
    --tr-item-active-bg:    rgba(192,103,58,0.08);
    --tr-scroll-thumb:      rgba(42,38,32,0.12);
    --tr-spinner-bg:        linear-gradient(135deg, var(--terra), var(--terra-hover));
    --tr-spinner-shadow:    0 2px 16px rgba(192,103,58,0.4);
    --tr-pill-bg:           var(--terra);
    --tr-pill-shadow:       0 8px 24px rgba(192,103,58,0.35);
  }

/* ── block 4 ── */

  :root {
    --chat-button-bg:           linear-gradient(135deg, var(--terra), var(--terra-hover));
    --chat-button-shadow:       0 4px 20px rgba(192,103,58,0.35);
    --chat-button-hover-shadow: 0 6px 28px rgba(192,103,58,0.45);
    --chat-window-bg:           var(--cream);
    --chat-window-border:       rgba(42,38,32,0.12);
    --chat-header-bg:           linear-gradient(135deg, var(--terra), var(--terra-hover));
    --chat-bubble-bg:           var(--beige);
    --chat-bubble-color:        var(--ink);
    --chat-bubble-user-bg:      linear-gradient(135deg, var(--terra), var(--terra-hover));
    --chat-bubble-user-color:   var(--cream);
    --chat-input-bg:            var(--beige);
    --chat-input-border:        rgba(42,38,32,0.12);
    --chat-input-color:         var(--ink);
    --chat-input-focus-border:  var(--terra);
    --chat-input-placeholder:   var(--muted);
    --chat-input-divider:       rgba(42,38,32,0.12);
    --chat-cta-bg:              linear-gradient(135deg, var(--terra), var(--terra-hover));
    --chat-cta-shadow:          0 4px 12px rgba(192,103,58,0.25);
    --chat-cta-hover-shadow:    0 6px 16px rgba(192,103,58,0.35);
    --chat-form-bg:             var(--cream);
    --chat-form-border:         rgba(42,38,32,0.12);
    --chat-text:                var(--ink);
    --chat-muted:               var(--muted);
    --chat-muted2:              var(--muted);
    --chat-typing-dot:          var(--muted);
  }

/* ── block 5 ── */

  :root {
    --scta-font:             var(--sans);
    --scta-color:            var(--ink);
    --scta-bg:               var(--cream);
    --scta-border:           rgba(42, 38, 32, 0.08);
    --scta-shadow:           0 -6px 28px rgba(42, 38, 32, 0.12);
    --scta-padding:          0.75rem 2rem;
    --scta-tagline-size:     0.95rem;
    --scta-link-color:       var(--muted);
    --scta-link-hover:       var(--terra);
    --scta-wordmark-color:   var(--terra);

    --scta-cta-bg:           var(--terra);
    --scta-cta-bg-hover:     var(--terra-hover);
    --scta-cta-color:        var(--on-accent);
    --scta-cta-padding:      0.6rem 1.25rem;
    --scta-cta-radius:       999px;
    --scta-cta-size:         0.88rem;
    --scta-cta-shadow:       0 4px 16px rgba(192, 103, 58, 0.3);
    --scta-cta-shadow-hover: 0 6px 22px rgba(192, 103, 58, 0.4);
    --scta-bar-height:       60px;
  }
  [data-theme="dark"] :root {
    --scta-border: rgba(255, 255, 255, 0.08);
    --scta-shadow: 0 -6px 28px rgba(0, 0, 0, 0.4);
  }

/* ── block 6 ── */

  :root {
    --xpop-overlay-bg:      rgba(42,38,32,0.85);
    --xpop-modal-bg:        linear-gradient(160deg, #3a4435 0%, #2a3527 100%);
    --xpop-modal-border:    rgba(192,103,58,0.25);
    --xpop-logo-bg:         linear-gradient(135deg, var(--terra), var(--terra-hover));
    --xpop-title-bg:        linear-gradient(90deg, #f3c8b3, var(--terra));
    --xpop-btn-bg:          linear-gradient(135deg, var(--terra), var(--terra-hover));
    --xpop-btn-shadow:      0 4px 24px rgba(192,103,58,0.4);
    --xpop-btn-hover-shadow:0 6px 32px rgba(192,103,58,0.55);
    --xpop-code-border:     rgba(192,103,58,0.4);
    --xpop-input-focus:     rgba(192,103,58,0.5);
  }


/* ── Nav widget (core/nav): Ayni override layer ─────────────────
 * Tokens mirror what the old hardcoded `nav.main` rules used.
 * Mobile drawer uses the serif heading face for impact. */
:root {
  --nav-text:             var(--ink);
  --nav-text-hover:       var(--terra);
  --nav-bg-overlay:       var(--cream);
  --nav-link-font:        inherit;
  --nav-link-size:        14px;
  --nav-link-size-mobile: 30px;
  --nav-link-gap:         36px;
  --nav-burger-color:     var(--ink);
  --nav-cta-bg:           var(--terra);
  --nav-cta-color:        var(--on-accent);
  --nav-cta-bg-hover:     var(--terra-hover);
  --nav-cta-shadow:       0 6px 22px rgba(192, 103, 58, 0.3);
}
/* Mobile drawer items in serif — matches the previous typography. */
@media (max-width: 860px) {
  .cms-nav__item {
    font-family: var(--serif);
    font-weight: 500;
  }
}

/* iOS focus-zoom defense — Mobile Safari zooms when a focused form
 * control has a computed font-size < 16px. Bump every text-bearing
 * input on touch-sized viewports so focus never triggers a zoom. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px;
  }
}