:root{
    --sage:#50A48B;
    --sage-dark:#2F6D5C;
    --forest:#1F4D3D;
    --cream:#F3EDE4;
    --ink:#23302B;
    --ink-soft:#5B6A63;
    --white:#FFFFFF;

    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;

    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-6: 48px;
    --sp-8: 64px;
    --sp-12: 96px;
    --sp-16: 128px;
    --sp-20: 160px;

    --margin: 80px;
    --measure: 680px;
  }

  @media (max-width: 1199px){
    :root{ --margin: 48px; }
  }
  @media (max-width: 767px){
    :root{ --margin: 24px; }
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  ul{ list-style: none; margin:0; padding:0; }
  section{ position: relative; }

  .wrap{
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--margin);
    padding-right: var(--margin);
  }

  .eyebrow{
    font-family: var(--font-body);
    font-weight:600;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 var(--sp-2) 0;
  }

  .measure{ max-width: var(--measure); }
  /* p.measure never had its own font-size/line-height/color/margin, so it
     fell through to the browser's UA default (16px, ~1.15 line-height,
     full-strength ink, a 1em margin) instead of the site's paragraph
     styling — reads cramped next to properly-styled text around it
     (e.g. the amenities list right below it on Verhuur). Scoped to `p`
     only so it doesn't touch `ul.measure`'s column layout. */
  p.measure{
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-3) 0;
  }
  /* A long bulleted list capped at the reading-width .measure column left
     roughly half the desktop viewport empty for the whole section (no
     accompanying image, unlike sibling sections) — a two-column layout
     for list content specifically fills the width and reads as a
     considered section rather than a narrow strip in a big empty room. */
  @media (min-width: 900px){
    ul.measure{
      max-width: 960px;
      column-count: 2;
      column-gap: var(--sp-6);
    }
    ul.measure li{ break-inside: avoid; }
  }

  /* ---------- Content lists (WP core List block) ---------- */
  .wp-block-list{
    list-style: disc;
    margin: 0;
    padding-left: 1.25em;
  }
  .wp-block-list li{
    margin-bottom: var(--sp-2);
    line-height: 1.6;
  }
  .wp-block-list li:last-child{
    margin-bottom: 0;
  }

  /* ---------- Buttons ---------- */
  /* !important throughout: a same-named `.btn`/`.btn-outline` utility class
     from the parent JupiterX theme / Elementor's global CSS was silently
     winning the cascade (confirmed via computed styles — border-radius 4px,
     font-weight 400 instead of ours), producing two visually mismatched CTA
     buttons. This scope is guaranteed to win regardless of load order. */
  .btn{
    display:inline-flex !important;
    align-items:center !important;
    gap: 8px !important;
    font-family: var(--font-body) !important;
    font-weight:600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.02em !important;
    color: var(--white) !important;
    background: var(--sage) !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 150ms ease !important;
    white-space: nowrap !important;
  }
  .btn:hover{ background: var(--sage-dark) !important; }
  .btn .chev{ transition: transform 150ms ease; }
  .btn:hover .chev{ transform: translateX(2px); }

  .btn-outline{
    display:inline-flex !important;
    align-items:center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: var(--font-body) !important;
    font-weight:600 !important;
    font-size: 0.9375rem !important;
    color: var(--ink) !important;
    background: var(--white) !important;
    padding: 16px 24px !important;
    border-radius: 999px !important;
    border: none !important;
    transition: background 150ms ease, color 150ms ease !important;
    white-space: nowrap !important;
  }
  .btn-outline:hover{ background: var(--sage) !important; color: var(--white) !important; }

  /* ---------- Nav ---------- */
  .nav{
    position: fixed;
    top:0; left:0; right:0;
    height: 96px;
    z-index: 200;
    display:flex;
    align-items:center;
    background: transparent;
    transition: background 450ms cubic-bezier(0.4, 0, 0.2, 1), border-color 450ms cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled{
    background: var(--cream);
    border-bottom-color: rgba(91,106,99,0.1);
  }
  @media (max-width: 767px){
    .nav{ height: 72px; }
  }
  .nav-inner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
  }
  .nav-logo img{ height: 36px; width:auto; }
  @media (max-width: 767px){
    .nav-logo img{ height: 30px; }
  }
  .nav-right{
    display:flex;
    align-items:center;
    gap: var(--sp-3);
  }
  .lang-toggle{
    display:flex;
    align-items:center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight:600;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
  }
  /* A background chip, not just a text-color change, so the active
     language stays legible regardless of what's behind it — a photo
     hero, the opaque scrolled nav, or the dark mobile menu overlay all
     sit behind this toggle at different times, and text-color-only
     contrast broke against the darker ones (confirmed: active "EN"
     went near-invisible on the mobile overlay and the Contact hero). */
  .lang-toggle .active{
    color: var(--white);
    background: var(--sage-dark);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .lang-toggle .sep{ opacity:0.4; }

  /* Desktop gets a real inline menu; the hamburger + full-screen overlay
     is a narrow-viewport pattern only, not a permanent fixture. */
  .nav-links{
    display:none;
    align-items:center;
    gap: var(--sp-4);
    list-style:none;
    margin:0;
    padding:0;
    /* Dark link text has no reliable footing over a hero photo — legible
       against nothing in particular, illegible against anything busy.
       Rather than fight for contrast against an unpredictable background,
       the links simply aren't there until the nav has one: they fade in
       together with .nav.scrolled's solid background, on the same timing,
       so the whole nav bar reads as one coordinated reveal instead of a
       background snapping in under text that was already awkwardly
       sitting on top of a photo. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav.scrolled .nav-links{
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a{
    font-family: var(--font-body);
    font-weight:600;
    font-size: 0.875rem;
    color: var(--ink);
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .nav-links a:hover{ border-color: var(--sage); }
  @media (min-width: 1024px){
    .nav-links{ display:flex; }
  }

  .hamburger{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width: 28px;
    height: 20px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }
  .hamburger span{
    display:block;
    height:2px;
    width:100%;
    background: var(--ink);
    transition: transform 250ms ease, opacity 250ms ease;
  }
  .hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  @media (min-width: 1024px){
    .hamburger{ display:none !important; }
  }

  .nav-btn{ padding: 12px 24px; font-size: 0.8125rem; }
  .nav-btn .nav-btn-icon{ display:none; width:16px; height:16px; }
  @media (max-width: 480px){
    .nav-btn span{ display:none; }
    .nav-btn .nav-btn-icon{ display:block; }
    .nav-btn{ padding: 12px; }
  }

  /* ---------- Menu overlay ---------- */
  .menu-overlay{
    position: fixed;
    inset: 0;
    background: var(--ink);
    z-index: 300;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition: opacity 350ms ease, visibility 350ms ease;
  }
  .menu-overlay.open{ opacity:1; visibility:visible; }
  .menu-overlay-close{
    position:absolute;
    top: 32px;
    right: var(--margin);
    background:none;
    border:none;
    color: var(--cream);
    cursor:pointer;
    width: 28px;
    height:20px;
  }
  .menu-overlay-close span{
    display:block;
    height:2px;
    width:100%;
    background: var(--cream);
    position:relative;
    top:9px;
  }
  .menu-overlay-close span:first-child{ transform: rotate(45deg); }
  .menu-overlay-close span:last-child{ transform: rotate(-45deg); top:7px; }
  .menu-list{
    display:flex;
    flex-direction:column;
    gap: var(--sp-3);
    text-align:center;
  }
  .menu-list a{
    font-family: var(--font-display);
    font-weight:600;
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--cream);
    transition: color 200ms ease;
  }
  .menu-list a:hover{ color: var(--sage); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height: 100vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    padding-top: 96px;
  }
  .hero-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero-scrim{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(31,77,61,0.35) 0%, rgba(31,77,61,0.5) 35%, rgba(31,77,61,0.93) 100%);
    z-index:1;
  }
  .hero-content{
    position:relative;
    z-index:2;
    max-width: 920px;
    padding: 0 var(--margin) var(--sp-12) var(--margin);
  }
  .hero-logo{
    width: 168px;
    height:auto;
    margin: 0 0 var(--sp-4) 0;
  }
  .hero-caption{
    font-family: var(--font-body);
    font-weight:500;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.8;
    margin: 0 0 var(--sp-2) 0;
  }
  .hero-h1{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(2.25rem, 4.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--cream);
    margin: 0;
  }
  .hero-sub{
    font-family: var(--font-body);
    font-weight:400;
    font-size: 1.125rem;
    line-height:1.6;
    color: var(--cream);
    opacity: 0.85;
    max-width: 640px;
    margin: var(--sp-4) 0 0 0;
  }
  @media (max-width: 767px){
    .hero-content{ padding: 0 var(--margin) var(--sp-8) var(--margin); }
    .hero-logo{ width: 128px; }
  }

  /* ---------- Statement card ---------- */
  .statement-wrap{
    position:relative;
    z-index: 5;
    /* padding, not margin: a margin's own gap doesn't get the element's
       background, so whatever sits behind it (the page's white body
       background) showed through as a seam right below the hero. */
    padding-top: var(--sp-6);
    background: var(--cream);
  }
  @media (max-width: 767px){
    .statement-wrap{ padding-top: var(--sp-4); }
  }

  .statement-card{
    position:relative;
    border-radius: 32px 32px 0 0;
    overflow:hidden;
    min-height: 720px;
    display:flex;
    align-items:flex-end;
    background: var(--ink);
  }
  @media (max-width: 767px){
    .statement-card{
      border-radius: 20px 20px 0 0;
      min-height: 640px;
      flex-direction: column;
      align-items: stretch;
    }
  }
  .statement-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .statement-scrim{
    position:absolute;
    inset:0;
    background: linear-gradient(to top, rgba(31,77,61,0.95) 0%, rgba(31,77,61,0.8) 40%, rgba(31,77,61,0.55) 65%, rgba(31,77,61,0.4) 100%);
  }
  .statement-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding: 96px var(--margin) 160px var(--margin);
  }
  @media (max-width: 767px){
    .statement-inner{ padding: 48px var(--margin) 32px var(--margin); }
  }
  .statement-text{
    max-width: 820px;
  }
  .statement-h1{
    font-family: var(--font-display);
    font-weight:600;
    font-size: clamp(2.5rem, 4.2vw, 4.25rem);
    line-height:1.05;
    letter-spacing: -0.015em;
    color: var(--cream);
    margin: 0 0 var(--sp-3) 0;
  }
  .statement-p{
    font-family: var(--font-body);
    font-weight:400;
    font-size: 1.25rem;
    line-height:1.65;
    color: rgba(243,237,228,0.9);
    margin: 0 0 var(--sp-2) 0;
  }
  .statement-p:last-child{
    margin-bottom: 1rem;
  }
  .statement-stats{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:3;
    padding: var(--sp-4) var(--margin) var(--sp-4) var(--margin);
    display:flex;
    align-items:center;
    gap: var(--sp-8);
    border-top: 1px solid rgba(243,237,228,0.18);
  }
  @media (max-width: 767px){
    .statement-stats{
      position: static;
      flex-direction:column;
      align-items:flex-start;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--margin) var(--sp-4) var(--margin);
    }
  }
  .stat-rule{
    width:1px;
    align-self:stretch;
    background: rgba(243,237,228,0.25);
  }
  @media (max-width: 767px){
    .stat-rule{ width:100%; height:1px; align-self:auto; }
  }
  .stat-block{ min-width: 0; }
  .stat-num{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height:1.0;
    letter-spacing: -0.01em;
    color: var(--cream);
    margin:0;
  }
  .stat-cap{
    font-family: var(--font-body);
    font-weight:500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243,237,228,0.7);
    margin: 6px 0 0 0;
    max-width: 260px;
  }

  /* ---------- Diensten ---------- */
  .diensten{
    background: var(--cream);
    padding: 96px 0;
  }
  @media (max-width: 767px){
    .diensten{ padding: 64px 0; }
  }
  .diensten-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom: var(--sp-8);
    gap: var(--sp-3);
    flex-wrap:wrap;
  }
  .diensten-h2{
    font-family: var(--font-display);
    font-weight:600;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height:1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin:0;
  }
  .diensten-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 900px){
    .diensten-grid{ grid-template-columns: 1fr; }
  }
  .card-tall{
    position:relative;
    border-radius: 24px;
    overflow:hidden;
    aspect-ratio: 3 / 4;
    display:flex;
    align-items:flex-end;
  }
  .card-tall-photo{
    position:absolute; inset:0;
    /* Fallback so a not-yet-loaded (native lazy-load) image never exposes
       the page background — a fast scroll on first load could otherwise
       show a blank card for a moment. */
    background: var(--ink);
  }
  .card-tall-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: transform 400ms ease;
  }
  .card-tall:hover .card-tall-photo img{ transform: scale(1.04); }
  .card-tall-scrim{
    position:absolute; left:0; right:0; bottom:0; height:70%;
    background: linear-gradient(to top, rgba(35,48,43,0.92) 40%, rgba(35,48,43,0));
  }
  .card-tall-content{
    position:relative; z-index:2;
    padding: var(--sp-4);
  }
  .card-tall-content .card-tag{ color: var(--cream); }
  .card-tall-content p{
    color: rgba(243,237,228,0.92);
    font-size: 1.0625rem;
    line-height:1.5;
    margin: 8px 0 0 0;
  }

  .stacked-cards{
    grid-column: 6 / 13;
    display:flex;
    flex-direction:column;
    gap: 16px;
  }
  .row-card{
    display:flex;
    align-items:stretch;
    background: var(--white);
    border-radius: 24px;
    overflow:hidden;
    min-height: 220px;
  }
  .row-card-photo{
    flex: 0 0 38%;
    position:relative;
    overflow:hidden;
  }
  .row-card-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: transform 400ms ease;
  }
  .row-card:hover .row-card-photo img{ transform: scale(1.04); }
  .row-card-body{
    flex: 1 1 62%;
    padding: var(--sp-4);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }
  .card-tag{
    display:block;
    font-weight:600;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    color: var(--sage-dark);
    margin-bottom: 8px;
  }
  .row-card-body h3{
    font-family: var(--font-display);
    font-weight:600;
    font-size: 1.5rem;
    line-height:1.15;
    color: var(--ink);
    margin: 0 0 8px 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .row-card-body p{
    font-size: 1.1875rem;
    line-height:1.65;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-2) 0;
    max-width: var(--measure);
  }
  .row-card-body p:last-child{
    margin-bottom:0;
  }
  .row-card-link{
    display:inline-block;
    margin-top: 12px;
    font-weight:600;
    font-size: 0.9375rem;
    color: var(--sage-dark);
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
  }
  .row-card-link:hover{ border-color: var(--sage-dark); }

  .row-card-price{
    align-self: flex-start;
    margin-top: var(--sp-3);
    padding: 10px 20px;
    background: var(--cream);
    border-radius: 14px;
    display:inline-flex;
    align-items:baseline;
    gap: 8px;
  }
  .row-card-price-amount{
    font-family: var(--font-display);
    font-weight:700;
    font-size: 1.375rem;
    color: var(--sage-dark);
    margin:0;
  }
  .row-card-price-cap{
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin:0;
  }

  /* Under 1024px card-tall becomes a plain row-card: photo box left,
     text right, non-overlapping. The asymmetric tall treatment is a
     desktop-only flourish (see Diensten grid notes in the spec). */
  @media (max-width: 1023px){
    .card-tall{
      grid-column: 1 / 13;
      aspect-ratio: auto;
      position: relative;
      display:flex;
      align-items:stretch;
      background: var(--white);
      border-radius: 24px;
      overflow:hidden;
      min-height: 220px;
    }
    .card-tall-photo{
      position: relative;
      inset: auto;
      flex: 0 0 38%;
      overflow: hidden;
    }
    .card-tall-scrim{ display:none; }
    .card-tall-content{
      padding: var(--sp-4);
      flex: 1 1 62%;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .card-tall-content .card-tag{ color: var(--sage-dark); }
    .card-tall-content p{ color: var(--ink-soft); font-size: 1.1875rem; }

    .stacked-cards{ grid-column: 1 / 13; }
  }
  @media (max-width: 767px){
    .row-card-body p, .card-tall-content p{ font-size: 1.0625rem; }
  }
  @media (max-width: 600px){
    .row-card, .card-tall{ flex-direction: column; }
    .row-card-photo, .card-tall-photo{ flex-basis: auto; height: 220px; }
  }

  /* ---------- Sticky beeldstrook ---------- */
  /* strip-pin-region wraps the strip AND Producten: the sticky band stays
     pinned above Producten as it scrolls underneath, then releases when
     Producten ends (matches copy brief: "pinned band ... visible above it") */
  .strip-pin-region{
    position: relative;
  }
  .strip-sticky{
    position: sticky;
    top: 0;
    height: 88vh;
    display:flex;
    overflow:hidden;
    background: var(--forest);
    z-index: 4;
  }
  @media (max-width: 767px){
    .strip-sticky{
      position: static;
      height:auto;
      flex-direction:column;
    }
  }
  .strip-panel{
    position:relative;
    flex: 0 0 33.3333vw;
    width: 33.3333vw;
    height:100%;
    overflow:hidden;
  }
  @media (max-width: 767px){
    .strip-panel{ flex-basis:auto; width:100%; height:60vh; }
  }
  .strip-panel img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: opacity 60ms linear;
  }
  .strip-panel-scrim{
    position:absolute; left:0; right:0; bottom:0; height:40%;
    background: linear-gradient(to top, rgba(31,77,61,0.85), rgba(31,77,61,0));
    pointer-events:none;
  }
  .strip-label{
    position:absolute;
    left: var(--sp-3);
    bottom: var(--sp-3);
    z-index:3;
  }
  .strip-label .word{
    display:block;
    font-family: var(--font-body);
    font-weight:600;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-transform:uppercase;
    color: var(--cream);
    transition: font-size 60ms linear;
  }
  .strip-label .cap{
    display:block;
    font-family: var(--font-body);
    font-weight:400;
    font-size: 0.9375rem;
    color: rgba(243,237,228,0.75);
    margin-top: 6px;
    transition: opacity 100ms linear;
  }
  .strip-panel + .strip-panel{
    border-left: 1px solid rgba(243,237,228,0.15);
  }
  @media (max-width: 767px){
    .strip-panel + .strip-panel{ border-left:none; border-top: 1px solid rgba(243,237,228,0.15); }
  }

  /* ---------- Slideshow ---------- */
  .slideshow-section{
    background: var(--white);
    padding: 128px 0;
  }
  @media (max-width: 767px){
    .slideshow-section{ padding: 64px 0; }
  }
  .slideshow-head{
    margin-bottom: var(--sp-6);
  }
  .slideshow-h2{
    font-family: var(--font-display);
    font-weight:600;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height:1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 var(--sp-2) 0;
  }
  .slideshow-head p{
    font-size: 1.0625rem;
    color: var(--ink-soft);
    margin:0;
  }
  .slideshow{
    position:relative;
    border-radius: 24px;
    overflow:hidden;
    aspect-ratio: 16 / 9;
    background: var(--cream);
  }
  @media (max-width: 767px){
    .slideshow{ aspect-ratio: 4 / 5; border-radius: 16px; }
  }
  .slideshow-track{
    position:absolute; inset:0;
  }
  .slide{
    position:absolute; inset:0;
    opacity:0;
    transition: opacity 700ms ease;
  }
  .slide.active{ opacity:1; }
  .slide img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .slide-caption{
    position:absolute; left:0; right:0; bottom:0;
    padding: var(--sp-4);
    background: linear-gradient(to top, rgba(31,77,61,0.75), rgba(31,77,61,0));
    color: var(--cream);
    font-size: 0.9375rem;
    font-weight:500;
  }
  .slideshow-controls{
    position:absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    display:flex;
    gap: 8px;
    z-index: 3;
  }
  .slide-btn{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border:none;
    background: rgba(243,237,228,0.92);
    color: var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: background 150ms ease;
  }
  .slide-btn:hover{ background: var(--cream); }
  .slide-btn svg{ width:18px; height:18px; }
  .slideshow-dots{
    display:flex;
    gap: 8px;
    margin-top: var(--sp-3);
  }
  .slideshow-dots button{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border:none;
    padding:0;
    background: var(--sage-dark);
    opacity: 0.3;
    cursor:pointer;
    transition: opacity 150ms ease;
  }
  .slideshow-dots button.active{ opacity:1; }

  /* ---------- Partners ---------- */
  .partners{
    background: var(--cream);
    padding: 128px 0;
  }
  @media (max-width: 767px){
    .partners{ padding: 64px 0; }
  }
  .partners-row{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-6) var(--sp-4);
    margin-top: var(--sp-8);
  }
  .partners-row .partner-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 64px;
  }
  /* Trimming source-file padding (previous pass) didn't fix the real
     problem: forcing InEnergie's ~7:1 wordmark up to the same PIXEL
     HEIGHT as every other logo made it visually dominate by width and
     stroke thickness, while the grayscale+opacity(0.75) mute filter
     below hits thin-stroke wordmarks (VVM, People Excellence) much
     harder than bold ones — same filter, very unequal legibility.
     Fix: cap this one logo by WIDTH instead of forcing it to full
     height (it renders shorter than its neighbors, which reads as
     normal variation, not "one huge logo"), and back off the mute
     filter so thin logos stay legible. */
  .partner-logo-wide{
    grid-column: span 2;
  }
  .partner-logo-wide img{
    max-width: 170px;
    max-height: 44px;
  }
  .partners-row img{
    max-height: 44px;
    max-width: 100%;
    width:auto;
    object-fit: contain;
    filter: grayscale(60%) opacity(0.9);
    transition: filter 200ms ease;
  }
  .partners-row img:hover{
    filter: grayscale(0%) opacity(1);
  }
  @media (max-width: 1023px) and (min-width: 768px){
    .partners-row{ grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 767px){
    .partners-row{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
    .partners-row .partner-logo{ height: 52px; }
    .partners-row img{ max-height: 38px; }
    .partner-logo-wide img{ height: 38px; }
    .partner-logo-wide{ grid-column: span 2; }
  }

  /* ---------- Member directory (Communityleden) ---------- */
  .member-directory{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  @media (max-width: 1023px) and (min-width: 768px){
    .member-directory{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 767px){
    .member-directory{ grid-template-columns: 1fr; }
  }
  .member-card{
    background: var(--white);
    border-radius: 24px;
    padding: var(--sp-4);
    display:flex;
    flex-direction:column;
  }
  .member-logo{
    height: 40px;
    margin: 0 0 var(--sp-3) 0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  /* Linked logos wrap the img in an <a> with no explicit height, so a
     percentage max-height resolves to none (per spec) and the image
     renders at full native size, overlapping the card body below it.
     Sizing the <a> to the box and giving the img a fixed pixel height
     (not a percentage) avoids that entirely. */
  .member-logo a{
    display:flex;
    align-items:center;
    height:100%;
  }
  .member-logo img{
    height: 40px;
    max-width: 100%;
    width:auto;
    object-fit: contain;
    object-position: left center;
  }
  .member-name{
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight:600;
    color: var(--ink);
    margin: 0 0 var(--sp-1) 0;
  }
  .member-desc{
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height:1.55;
    color: var(--ink-soft);
    margin:0;
  }
  .member-url{
    margin: var(--sp-2) 0 0 0;
  }
  .member-url a{
    display:inline-flex;
    align-items:center;
    gap: 4px;
    font-family: var(--font-body);
    font-weight:600;
    font-size: 0.8125rem;
    color: var(--sage-dark);
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
  }
  .member-url a:hover{ border-color: var(--sage-dark); }
  .member-url a::after{
    content: "\2197";
    font-size: 0.75rem;
  }

  /* ---------- Locatie band ---------- */
  .locatie-band{
    position:relative;
    overflow:hidden;
    padding: 160px 0;
    display:flex;
    align-items:center;
  }
  @media (max-width: 767px){
    .locatie-band{ padding: 80px 0; }
  }
  .locatie-band img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
    object-position: center 65%;
  }
  .locatie-band::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(243,237,228,0.55);
    z-index:1;
  }
  .locatie-inner{
    position:relative; z-index:2;
    max-width: 640px;
  }
  .locatie-h2{
    font-family: var(--font-display);
    font-weight:600;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height:1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 var(--sp-3) 0;
  }
  .locatie-inner > p{
    font-size: 1.1875rem;
    line-height:1.65;
    color: var(--ink);
    margin: 0 0 var(--sp-6) 0;
    max-width: var(--measure);
  }
  .locatie-links{
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ---------- Footer ---------- */
  .footer{
    position:relative;
    background: var(--forest);
    color: var(--cream);
    overflow:hidden;
    padding: 96px 0 48px 0;
  }
  .footer-lineart{
    position:absolute;
    right: -60px;
    bottom: -60px;
    width: 520px;
    height: 520px;
    opacity: 0.18;
    pointer-events:none;
  }
  @media (max-width: 767px){
    .footer-lineart{ width: 320px; height: 320px; right:-40px; bottom:-40px; }
  }
  .footer-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .footer-brand{ grid-column: 1 / 5; }
  .footer-brand img{
    height: 44px;
    width:auto;
    margin-bottom: var(--sp-3);
  }
  .footer-brand p{
    font-size: 0.9375rem;
    line-height:1.6;
    color: rgba(243,237,228,0.6);
    max-width: 280px;
  }
  .footer-nav{
    grid-column: 5 / 10;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .footer-col h4{
    font-family: var(--font-body);
    font-weight:600;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform:uppercase;
    color: rgba(243,237,228,0.7);
    margin: 0 0 var(--sp-3) 0;
  }
  .footer-col ul{
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .footer-col a{
    font-size: 0.9375rem;
    color: var(--cream);
    opacity: 0.85;
    transition: opacity 150ms ease;
  }
  .footer-col a:hover{ opacity: 1; color: var(--sage); }

  .footer-facts{
    grid-column: 10 / 13;
  }
  .fact-row{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(243,237,228,0.12);
    font-size: 0.9375rem;
  }
  .fact-row:first-child{ padding-top:0; }
  .fact-label{ color: rgba(243,237,228,0.5); }
  .fact-value{ color: rgba(243,237,228,0.8); text-align:right; }

  .footer-bottom{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-12);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(243,237,228,0.12);
  }
  .footer-lang{
    display:flex;
    gap:6px;
    font-size:0.8125rem;
    font-weight:600;
    color: rgba(243,237,228,0.6);
  }
  .footer-lang .active{ color: var(--cream); border-bottom: 2px solid var(--sage); padding-bottom:2px; }
  .footer-lang .sep{ opacity:0.5; }
  .footer-social{
    display:flex;
    gap: var(--sp-2);
  }
  .footer-social a{
    width: 36px; height:36px;
    border-radius:50%;
    border: 1px solid rgba(243,237,228,0.25);
    display:flex; align-items:center; justify-content:center;
    transition: border-color 150ms ease, background 150ms ease;
  }
  .footer-social a:hover{ border-color: var(--sage); background: rgba(80,164,139,0.12); }
  .footer-social svg{ width:16px; height:16px; }

  @media (max-width: 767px){
    .footer-brand, .footer-nav, .footer-facts{ grid-column: 1 / 13; }
    .footer-nav{ grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
    .footer-facts{ margin-top: var(--sp-6); }
  }

  /* ---------- Back to top ---------- */
  .back-to-top{
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius:50%;
    background: var(--sage);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 150;
    opacity:0;
    visibility:hidden;
    transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease, background 150ms ease;
    border:none;
    cursor:pointer;
  }
  .back-to-top.visible{
    opacity:1; visibility:visible; transform: translateY(0);
  }
  .back-to-top:hover{ background: var(--sage-dark); }
  .back-to-top svg{ width:20px; height:20px; }
  @media (max-width: 767px){
    .back-to-top{
      bottom:16px; right:16px;
      width:44px; height:44px;
      box-shadow: 0 2px 10px rgba(31,77,61,0.35);
    }
    .back-to-top svg{ width:18px; height:18px; }
  }

  /* ---------- Scroll reveal ---------- */
  /* Slide only, no opacity fade — an opacity-based reveal could catch
     text/prices mid-transition during a normal-speed scroll and read as
     faded/broken (confirmed on Producten's pricing cards against a dark
     gradient background). Content is always fully legible; only position
     animates. */
  .reveal{
    transform: translateY(12px);
    transition: transform 350ms ease-out;
  }
  .reveal.in{
    transform: translateY(0);
  }

  /* focus states */
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--sage-dark);
    outline-offset: 2px;
  }

  /* ================================================
     WordPress Block Editor compatibility (uco-website plan 03-01)
     Gutenberg's core/image block always wraps <img> in a <figure>,
     placing the block's "Additional CSS Class(es)" on the *figure*,
     not the <img>. Most prototype photo classes were already applied
     to a wrapper element with a descendant `img` selector (e.g.
     .card-tall-photo img, .strip-panel img) and need no change. Only
     classes the prototype put directly on a bare <img> for absolute-
     fill/object-fit behaviour (hero-photo, statement-photo) need this
     explicit figure-compatible extension so they still fill correctly
     when Gutenberg places the class on the figure instead.
     ================================================ */
  .hero .hero-photo img,
  .statement-card .statement-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  figure.hero-photo,
  figure.statement-photo{
    margin:0;
  }

  /* Group block inner-container (uco-website plan 03-01, Task 2): the
     prototype's design relies heavily on flex/grid/absolute-position
     relationships between DIRECT siblings (e.g. .statement-card's
     flex align-items:flex-end expecting .statement-inner and
     .statement-stats as direct flex items; .diensten-grid's CSS Grid
     expecting .card-tall as direct grid items). Gutenberg's Group
     block wraps all of a block's inner content in one extra
     <div class="wp-block-group__inner-container">, which silently
     merges what the prototype treated as separate siblings into a
     single flex/grid item - confirmed live via a real screenshot
     (statement-card's stats bar and body text overlapping instead of
     the stats pinning to the card's bottom edge). display:contents
     removes this wrapper from the layout box model entirely (children
     render as if they were direct children of the Group block's own
     outer element) without touching any block markup, restoring every
     ported flex/grid/absolute-position rule to work exactly as
     designed against the prototype's original flat structure. */
  .wp-block-group__inner-container{
    display:contents;
  }

  /* WP core block-gap defaults (uco-website plan 03-01, Task 2): confirmed
     live (Playwright bounding-box measurement) that WordPress's own
     block-library.css injects automatic margin-block-start/end spacing
     between children of any ".is-layout-flow"/".is-layout-flex" element
     (every Group block gets one of these layout classes) via
     `var(--wp--style--block-gap, 2em)`. The ported design already
     specifies its OWN exact margin/padding/gap for every element - this
     auto-injected extra spacing stacked on top of it, most visibly as
     ~64px of unwanted height inside .stat-block (between .stat-num and
     .stat-cap) that pushed .statement-stats tall enough to overlap
     .statement-text above it. Neutralized for all long-scroll content by
     zeroing the CSS custom property WP's rule reads, plus a direct
     override in case any block-library rule doesn't route through it. */
  #top{
    --wp--style--block-gap: 0px;
  }
  #top .is-layout-flow > *,
  #top .is-layout-flex > *{
    margin-block-start: 0;
    margin-block-end: 0;
  }

  /* Gallery block (uco-website plan 03-01, Task 2): the prototype's
     slideshow was hand-authored divs (.slide/.slide-caption); the real
     content is a core/gallery block, which renders each image as a
     nested <figure class="wp-block-image"> inside a flex/grid gallery
     wrapper, with an optional <figcaption class="wp-element-caption">
     for the caption. .slideshow (outer) and .slideshow-track (the
     gallery's own wrapper, carrying that class) keep their original
     verbatim rules (position/aspect-ratio/overflow-etc. don't care
     which tag they land on) - only the individual-slide behaviour
     needs a Gallery-specific reset + fade-crossfade treatment. */
  .slideshow-track.wp-block-gallery{
    display:block;
    gap:0;
  }
  /* !important required here: WP core's own gallery grid CSS
     (block-library/style.min.css) targets
     `.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
     - the `:not(#individual-image)` clause is a specificity hack (an ID
     selector inside :not() still counts as ID-level specificity even
     though #individual-image never needs to exist/match), so it beats
     ANY class-only selector regardless of how many classes are stacked.
     Confirmed live: without !important, WP core's `width:calc(50% - gap/2)`
     grid rule persisted despite this rule's own explicit width/position,
     leaving only a half-width, non-cropped image visible instead of a
     full-bleed single-slide crossfade. */
  .slideshow-track.wp-block-gallery figure.wp-block-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    opacity:0;
    transition: opacity 700ms ease;
  }
  .slideshow-track.wp-block-gallery figure.wp-block-image.slide-active{
    opacity:1;
  }
  .slideshow-track.wp-block-gallery figure.wp-block-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .slideshow-track.wp-block-gallery figcaption.wp-element-caption{
    position:absolute; left:0; right:0; bottom:0;
    margin:0;
    padding: var(--sp-4);
    background: linear-gradient(to top, rgba(31,77,61,0.75), rgba(31,77,61,0));
    color: var(--cream);
    font-size: 0.9375rem;
    font-weight:500;
    text-align:left;
  }

  /* ---------- reCAPTCHA badge ----------
     None of the long-scroll pages embed a form that needs it; the global
     script still enqueues the badge, which then sits mis-positioned
     (off-screen on some pages) and overlaps body copy on scroll. */
  .grecaptcha-badge{
    visibility: hidden !important;
  }


  /* ---------- Native-block components (quick 261006-l6a) ----------
     Buttons, link rows, the partner logo wall, the hero logo and the
     Contact page blocks used to be raw HTML blocks. They are now core
     blocks (Buttons, Paragraph, Gallery, Image, Group), so an editor can
     change text, links and images from the normal block editor. The rules
     below give those blocks the exact look of the old markup.
     !important mirrors the .btn/.btn-outline rules above: WP core's
     .wp-block-button__link and gallery rules out-specify single classes. */
  .wp-block-buttons.uco-buttons{ margin:0; gap:12px; }
  .uco-btn .wp-block-button__link,
  .uco-btn-outline .wp-block-button__link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family: var(--font-body) !important;
    font-weight:600 !important;
    border-radius:999px !important;
    border:none !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }
  .uco-btn .wp-block-button__link{
    gap:8px !important;
    font-size:0.875rem !important;
    letter-spacing:0.02em !important;
    color:var(--white) !important;
    background:var(--sage) !important;
    padding:14px 28px !important;
    transition: background 150ms ease !important;
  }
  .uco-btn .wp-block-button__link:hover{ background:var(--sage-dark) !important; }
  .uco-btn-outline .wp-block-button__link{
    gap:12px !important;
    font-size:0.9375rem !important;
    color:var(--ink) !important;
    background:var(--white) !important;
    padding:16px 24px !important;
    transition: background 150ms ease, color 150ms ease !important;
  }
  .uco-btn-outline .wp-block-button__link:hover{ background:var(--sage) !important; color:var(--white) !important; }
  .uco-btn .wp-block-button__link::after,
  .uco-btn-outline .wp-block-button__link::after{
    content:"\2192";
    transition: transform 150ms ease;
  }
  .uco-btn .wp-block-button__link:hover::after,
  .uco-btn-outline .wp-block-button__link:hover::after{ transform: translateX(2px); }

  p.row-card-link-wrap{ margin:12px 0 0 0; }
  p.row-card-link-wrap a{
    display:inline-block;
    font-weight:600;
    font-size:0.9375rem;
    color:var(--sage-dark);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition: border-color 150ms ease;
  }
  p.row-card-link-wrap a:hover{ border-color:var(--sage-dark); }
  p.row-card-link-wrap a::after{ content:" \2192"; }

  figure.wp-block-image.hero-logo{ margin:0 0 var(--sp-4) 0; }
  figure.wp-block-image.hero-logo img{ width:100%; height:auto; display:block; }

  /* Partner logo wall: a Gallery block (add or remove logos in the editor).
     Crop is switched off in the block so images keep their own proportions. */
  .partners-row.wp-block-gallery{
    display:grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-6) var(--sp-4) !important;
  }
  .partners-row.wp-block-gallery figure.wp-block-image{
    width:auto !important;
    margin:0 !important;
    flex:none !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    height:64px;
  }
  .partners-row.wp-block-gallery figure.wp-block-image img{
    width:auto !important;
    height:auto !important;
    max-height:44px;
    max-width:100% !important;
    object-fit:contain;
    filter: grayscale(60%) opacity(0.9);
    transition: filter 200ms ease;
  }
  .partners-row.wp-block-gallery figure.wp-block-image img:hover{ filter: grayscale(0%) opacity(1); }
  .partners-row.wp-block-gallery figure.partner-logo-wide{ grid-column: span 2; }
  @media (max-width: 1023px) and (min-width: 768px){
    .partners-row.wp-block-gallery{ grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 767px){
    .partners-row.wp-block-gallery{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3) !important; }
    .partners-row.wp-block-gallery figure.wp-block-image{ height:52px; }
    .partners-row.wp-block-gallery figure.wp-block-image img{ max-height:38px; }
  }

  /* Contact page: address card and "Zo vind je ons" columns */
  .contact-facts{
    background:#1F4D3D;
    border-radius:24px;
    padding:40px;
    max-width:640px;
    margin-top:32px;
  }
  .contact-facts .fact-row p{ margin:0; }
  .route-grid{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
  }
  .route-item{ flex:1 1 260px; }
  .route-item h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.25rem;
    color:var(--ink);
    margin:0 0 8px 0;
  }
  .route-item p{
    font-size:1.0625rem;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0;
  }

  /* ---------- News index, archives and single posts ---------- */
  .uco-plain .nav{ background: var(--cream); border-bottom-color: rgba(91,106,99,0.1); }
  .uco-plain .nav-links{ opacity:1; pointer-events:auto; }
  .news-head{ padding: 160px 0 var(--sp-6) 0; }
  .news-h1{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height:1.08;
    letter-spacing:-0.015em;
    color: var(--ink);
    margin: 0 0 var(--sp-3) 0;
    max-width: 960px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .news-list{ padding: 0 0 var(--sp-16) 0; }
  .post-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
  @media (max-width: 1023px){ .post-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 767px){
    .post-grid{ grid-template-columns: 1fr; }
    .news-head{ padding-top: 120px; }
  }
  .post-card{
    background: var(--white);
    border-radius: 24px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .post-card-media{ display:block; aspect-ratio: 16 / 10; overflow:hidden; }
  .post-card-media img{ width:100%; height:100%; object-fit:cover; }
  .post-card-body{ padding: var(--sp-4); display:flex; flex-direction:column; flex:1; }
  .post-card-meta{
    font-size: 0.8125rem;
    font-weight:600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin: 0 0 var(--sp-1) 0;
  }
  .post-card-title{
    font-family: var(--font-display);
    font-weight:600;
    font-size: 1.375rem;
    line-height:1.25;
    margin: 0 0 var(--sp-2) 0;
  }
  .post-card-title a:hover{ color: var(--sage-dark); }
  .post-card-excerpt{ font-size:1rem; line-height:1.6; color: var(--ink-soft); margin:0; }
  .post-card .row-card-link-wrap{ margin-top:auto; padding-top: var(--sp-2); }
  .news-pager{
    display:flex;
    justify-content:space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    font-weight:600;
  }
  .news-pager a{ color: var(--sage-dark); border-bottom: 1px solid transparent; }
  .news-pager a:hover{ border-color: var(--sage-dark); }
  @media (max-width: 767px){ .news-h1{ font-size: clamp(1.75rem, 8vw, 2.25rem); } }
  .entry-head{ padding: 160px 0 var(--sp-4) 0; }
  .entry-back{ margin: 0 0 var(--sp-3) 0 !important; }
  .entry-media{ margin-bottom: var(--sp-6); }
  .entry-media img{ width:100%; max-width:1040px; height:auto; border-radius:24px; }
  .entry-content{
    max-width: var(--measure);
    padding-bottom: var(--sp-4);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink);
  }
  .entry-content-wide{ max-width:none; }
  .entry-content{ overflow-wrap:break-word; }
  .entry-content iframe, .entry-content video, .entry-content embed, .entry-content table{ max-width:100%; }
  .entry-content > *{ margin-top:0; margin-bottom: var(--sp-3); }
  .entry-content h2, .entry-content h3{
    font-family: var(--font-display);
    font-weight:600;
    line-height:1.2;
    margin-top: var(--sp-6);
  }
  .entry-content a{ color: var(--sage-dark); text-decoration: underline; }
  .entry-content img{ height:auto; border-radius:16px; }
  .entry-content ul, .entry-content ol{ list-style: revert; padding-left:1.25em; }
  .entry-content blockquote{ border-left: 3px solid var(--sage); padding-left: var(--sp-3); margin-left:0; color: var(--ink-soft); }
  @media (max-width: 767px){ .entry-head{ padding-top: 120px; } }