/* AUTO-GENERATED from styles.css base rules (no @media) */
.elementor .e-con.about-grid{display:grid}
.elementor .e-con.about-intro{display:grid}
.elementor .e-con.about-stats{display:grid}
.elementor .e-con.about-stats-row{display:grid}
.elementor .e-con.circle-arrow{display:grid}
.elementor .e-con.contact-layout{display:grid}
.elementor .e-con.culture-body{display:grid}
.elementor .e-con.dienst-row{display:grid}
.elementor .e-con.feature{display:grid}
.elementor .e-con.footer-grid{display:grid}
.elementor .e-con.gallery{display:grid}
.elementor .e-con.intro-cols{display:grid}
.elementor .e-con.lb-nav{display:grid}
.elementor .e-con.milestones{display:grid}
.elementor .e-con.offerte-grid{display:grid}
.elementor .e-con.principles{display:grid}
.elementor .e-con.proj-grid{display:grid}
.elementor .e-con.proj-mosaic{display:grid}
.elementor .e-con.projects-track{display:grid}
.elementor .e-con.split-hero{display:grid}
.elementor .e-con.stats-band{display:grid}
.elementor .e-con.story-btn{display:grid}
.elementor .e-con.story-slide{display:grid}
.elementor .e-con.svc-cards{display:grid}
.elementor .e-con.svc-layout{display:grid}
.elementor .e-con.vac-detail{display:grid}
.elementor .e-con.vac-facts{display:grid}
.elementor .e-con.vac-list{display:grid}
.elementor .e-con.vac-offer{display:grid}
.elementor .e-con.arrow-cta{--flex-direction:row}
.elementor .e-con.back-link{--flex-direction:row}
.elementor .e-con.brand{--flex-direction:row}
.elementor .e-con.chips{--flex-direction:row}
.elementor .e-con.crumbs{--flex-direction:row}
.elementor .e-con.design-label{--flex-direction:row}
.elementor .e-con.dienst-more{--flex-direction:row}
.elementor .e-con.feature-meta{--flex-direction:row}
.elementor .e-con.footer-bottom{--flex-direction:row}
.elementor .e-con.footer-social{--flex-direction:row}
.elementor .e-con.lb-stage{--flex-direction:row}
.elementor .e-con.lead-act{--flex-direction:row}
.elementor .e-con.lead-cta{--flex-direction:row}
.elementor .e-con.nav-menu{--flex-direction:row}
.elementor .e-con.page-hero--card{--flex-direction:row}
.elementor .e-con.page-hero--photo{--flex-direction:row}
.elementor .e-con.proj-filter{--flex-direction:row}
.elementor .e-con.project-meta{--flex-direction:row}
.elementor .e-con.site-nav{--flex-direction:row}
.elementor .e-con.story-dots{--flex-direction:row}
.elementor .e-con.story-head{--flex-direction:row}
.elementor .e-con.story-nav{--flex-direction:row}
.elementor .e-con.story-track{--flex-direction:row}
.elementor .e-con.topbar{--flex-direction:row}
.elementor .e-con.vac-chips{--flex-direction:row}
.elementor .e-con.vac-head{--flex-direction:row}
.elementor .e-con.contact-info{--flex-direction:column}
.elementor .e-con.feature-body{--flex-direction:column}
.elementor .e-con.footer-col{--flex-direction:column}
.elementor .e-con.hero{--flex-direction:column}
.elementor .e-con.offerte-contact{--flex-direction:column}
.elementor .e-con.proj-tile{--flex-direction:column}
.elementor .e-con.section-head{--flex-direction:column}
.elementor .e-con.story-body{--flex-direction:column}
.elementor .e-con.subnav{--flex-direction:column}
.elementor .e-con.svc-aside{--flex-direction:column}
.elementor .e-con.svc-card{--flex-direction:column}
.elementor .e-con.svc-rows{--flex-direction:column}
.elementor .e-con.vac-card{--flex-direction:column}
.elementor .e-con.arrow-cta > .e-con{--width:auto}
.elementor .e-con.back-link > .e-con{--width:auto}
.elementor .e-con.brand > .e-con{--width:auto}
.elementor .e-con.chips > .e-con{--width:auto}
.elementor .e-con.crumbs > .e-con{--width:auto}
.elementor .e-con.design-label > .e-con{--width:auto}
.elementor .e-con.dienst-more > .e-con{--width:auto}
.elementor .e-con.feature-meta > .e-con{--width:auto}
.elementor .e-con.footer-bottom > .e-con{--width:auto}
.elementor .e-con.footer-social > .e-con{--width:auto}
.elementor .e-con.lb-stage > .e-con{--width:auto}
.elementor .e-con.lead-act > .e-con{--width:auto}
.elementor .e-con.lead-cta > .e-con{--width:auto}
.elementor .e-con.nav-menu > .e-con{--width:auto}
.elementor .e-con.page-hero--card > .e-con{--width:auto}
.elementor .e-con.page-hero--photo > .e-con{--width:auto}
.elementor .e-con.proj-filter > .e-con{--width:auto}
.elementor .e-con.project-meta > .e-con{--width:auto}
.elementor .e-con.site-nav > .e-con{--width:auto}
.elementor .e-con.story-dots > .e-con{--width:auto}
.elementor .e-con.story-head > .e-con{--width:auto}
.elementor .e-con.story-nav > .e-con{--width:auto}
.elementor .e-con.story-track > .e-con{--width:auto}
.elementor .e-con.topbar > .e-con{--width:auto}
.elementor .e-con.vac-chips > .e-con{--width:auto}
.elementor .e-con.vac-head > .e-con{--width:auto}
/* ============================================================================
 * elementor-1to1.css  (bridge)  --  CJ de Boer native-Elementor 1:1 layer
 * Loaded AFTER site.css + elementor-frontend.css. Everything is scoped under
 * `.elementor` so it only affects the Elementor page body, never the
 * theme-level header/footer partials.
 *
 * Job:
 *  1) Neutralize Elementor container/widget default padding/gap/margins.
 *  2) Re-attach original child selectors that used tags Elementor replaced
 *     (figure -> .elementor-widget-image, <article> -> .elementor-element).
 *  3) Let images fill their aspect boxes across Elementor's extra wrappers.
 *  4) Style the Elementor Pro form to match .offerte-form 1:1.
 * The AUTO block (display/flex-direction per class) is prepended at build time.
 * ============================================================================ */

/* ---- 1. neutralize Elementor container chrome (2-class > Elementor's 1-class) ---- */
.elementor .e-con,
.elementor .e-con > .e-con-inner{
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;
  --content-width:100%;
}
/* widgets add no stray spacing; helper .cjx-* rules (loaded later) still win */
.elementor .e-con > .elementor-widget{margin:0}

/* ---- 1b. neutralize GeneratePress' body font leak ----
   GeneratePress sets `body{font-size:17px;line-height:1.5}`. That leaks into
   the Elementor page subtree and inflates every element whose size/line-height
   is NOT explicitly pinned by site.css: bare <li> in the vacature bullet lists
   (rendered ~17px instead of the static 1rem), and the line-BOX of inline text
   held in a text-editor widget (e.g. `.svc-card-link` "Lees verder", whose
   wrapper became 25.5px tall = one 17px line instead of the static ~17px).
   The static <body> has font-size:1rem (=html calc, 16.16px @1440) and
   line-height:normal, so match that on the Elementor content root. All real
   copy keeps its own pinned size/line-height (generic `p{font-size:1rem;
   line-height:1.35}` etc), so only the leaked, unpinned bits move — toward the
   static reference. Header/footer are theme partials OUTSIDE `.elementor`. */
.elementor{font-size:1rem;line-height:normal}
/* belt & suspenders for the vacature bullet lists (bare <li> in a text-editor) */
.elementor .vac-offer li{font-size:1rem;line-height:1.55}

/* ---- 2. headings: strip ONLY Elementor's chrome; let site.css win ----
   Do NOT reset margin/font-family/font-weight/line-height here. The old
   `font-family:inherit;font-weight:inherit` made every heading inherit the
   BODY font (Sohne) at weight 400 instead of the Eurostile display font at
   700 (the "lighter/generic" regression), and `margin:0` clobbered contextual
   section-heading margins (`.vac-main h2`, `.panel h3`, ...) causing the
   collapsed-gap regression. Elementor already sets .elementor-heading-title
   margin:0;padding:0;line-height:1 (0,1,0); site.css contextual rules (0,1,1)
   beat that, and generic `h1,h2,h3{font-family:var(--head);font-weight:700}`
   applies to the real h1/h2/h3 tags. Only re-assert h3 line-height (site's
   generic `h3{line-height:1.1}` (0,0,1) loses to Elementor's (0,1,0)). */
.elementor .elementor-heading-title{color:inherit}
.elementor h3{line-height:1.1}

/* text-editor: kill any inherited elementor spacing so our markup flows natively */
.elementor .elementor-widget-text-editor{color:inherit}
.elementor .elementor-widget-text-editor > .elementor-widget-container{line-height:inherit}

/* ---- 3. images fill their boxes across .elementor-widget-image/.elementor-widget-container ---- */
.elementor .elementor-widget-image,
.elementor .elementor-widget-image > .elementor-widget-container{line-height:0}
.elementor .elementor-widget-image img{display:block}

/* full-bleed hero background image (home .hero, page-hero--photo/--card) */
.elementor .hero-bg,
.elementor .page-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.elementor .hero-bg > .elementor-widget-container,
.elementor .hero-bg img{width:100%;height:100%}
.elementor .hero-bg img{object-fit:cover}
/* page-hero--card/--photo keep opacity rules from site.css on .hero-bg wrapper */

/* aspect-ratio boxes whose <img> used height:100% (need the wrapper chain at 100%) */
.elementor .dienst-img .elementor-widget-image,
.elementor .dienst-img .elementor-widget-image > .elementor-widget-container,
.elementor .about-img .elementor-widget-image,
.elementor .about-img .elementor-widget-image > .elementor-widget-container,
.elementor .svc-card-img .elementor-widget-image,
.elementor .svc-card-img .elementor-widget-image > .elementor-widget-container,
.elementor .svc-row-img .elementor-widget-image,
.elementor .svc-row-img .elementor-widget-image > .elementor-widget-container,
.elementor .feature-media .elementor-widget-image,
.elementor .feature-media .elementor-widget-image > .elementor-widget-container,
.elementor .story-media .elementor-widget-image,
.elementor .story-media .elementor-widget-image > .elementor-widget-container,
.elementor .split-hero .sh-photo .elementor-widget-image,
.elementor .split-hero .sh-photo .elementor-widget-image > .elementor-widget-container{height:100%;width:100%}

/* project-card image widget must be full width; hover moved to the card (link is a container) */
.elementor .project-card .elementor-widget-image,
.elementor .project-card .elementor-widget-image > .elementor-widget-container{width:100%}
.elementor .project-card:hover img{filter:brightness(.9);transform:scale(.99)}
.elementor .dienst:hover .dienst-img img{filter:brightness(.96);transform:scale(1.03)}

/* ---- gallery figures -> .elementor-widget-image (timmerfabriek werkplaats) ---- */
.elementor .gallery .elementor-widget-image{margin:0;overflow:hidden;background:#e9ecef}
.elementor .gallery .elementor-widget-image:hover img{transform:scale(1.04);filter:brightness(.96)}

/* ---- proj-mosaic figures -> .elementor-widget-image (project-detail lightbox) ---- */
.elementor .proj-mosaic .elementor-widget-image{margin:0;aspect-ratio:1/1;overflow:hidden;background:#e9ecef;cursor:zoom-in}
.elementor .proj-mosaic .elementor-widget-image > .elementor-widget-container{height:100%}
.elementor .proj-mosaic .elementor-widget-image img{width:100%;height:100%;object-fit:cover}
.elementor .proj-mosaic .elementor-widget-image:hover img{transform:scale(1.04);filter:brightness(.96)}

/* ---- principles: <article> -> .elementor-element (home #waarom) ---- */
.elementor .principles > .elementor-element{display:flex;flex-direction:column;gap:.7rem;padding:0 2rem;border-right:1px solid rgba(64,64,65,.22)}
.elementor .principles > .elementor-element:first-child{padding-left:0}
.elementor .principles > .elementor-element:last-child{padding-right:0;border-right:0}
.elementor .principles span{font-family:var(--head);font-weight:700;color:#fff;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1}
@media(max-width:991px){
  .elementor .principles > .elementor-element,
  .elementor .principles > .elementor-element:first-child,
  .elementor .principles > .elementor-element:last-child{padding:0;border-right:0}
}

/* ---- section-heading (home ONZE DIENSTEN / PROJECTEN rows) ----
   `.diensten .section-heading` / `.portfolio .section-heading` are
   display:flex;justify-content:space-between;align-items:flex-end in site.css,
   but Elementor forces the container to --flex-direction:column (and the class
   is only flex via a DESCENDANT selector, so bridge-auto never sees it). In a
   column, align-items:flex-end shoved the (auto-width) merged run to the RIGHT
   -> both labels clustered right. Force row so justify-content:space-between
   splits kicker (left) and the cta (right). Nested containers (the portfolio
   kicker+h2 <div>) must be content-width so space-between can push the cta out;
   Elementor defaults them to --width:100%. The two inline labels are itemized
   into separate flex items by convert_native (ITEMIZE_EXTRA). */
.elementor .e-con.section-heading{--flex-direction:row}
.elementor .e-con.section-heading > .e-con{--width:auto}
/* The kicker/cta are small inline text (.78-.82rem) that Elementor drops
   straight into a text-editor widget (no inner wrapper). The WIDGET's own line
   strut comes from the inherited 1rem body font (~19px), so the row rendered
   ~4px taller than the static flex-item spans (~15px). font-size:0 on the widget
   removes that strut, letting the line box collapse to the child's own box; the
   child keeps its explicit rem font-size (root-relative, unaffected by 0). Both
   the kicker and the cta text-editor need it (either can be the tallest item). */
.elementor .e-con.section-heading > .elementor-widget-text-editor{font-size:0}

/* `.section-head` (kicker ABOVE a heading) is a flex COLUMN in the static CSS,
   so its kicker is a flex item sized to its own 14px box, not a 19px line strut.
   Zero the kicker text-editor's strut to match. (Only kickers in a FLEX parent
   need this: in the static page a kicker inside a BLOCK parent -- intro,
   portfolio inner <div>, about-text, offerte-info, ph-card/ph-inner,
   vac-apply-card, svc-main -- occupies the full ~19px line box, which Elementor
   already reproduces, so those must NOT be zeroed.) */
.elementor .e-con.section-head > .elementor-widget-text-editor{font-size:0}

/* ---- NATIVE button widgets (.btn/.btn-solid/.btn-ghost/.arrow-cta/.link/.back-link) ----
   convert_native emits every text CTA as a real Elementor button widget. Elementor
   renders the ORIGINAL class on the widget WRAPPER (.elementor-widget-button.btn ...),
   so the existing site.css button rules (`.lead .btn`, `.vac-card .link`, `.arrow-cta`,
   `.about-text .link:after` ...) style that wrapper 1:1 -- border, background, padding,
   colour, the hover underline :after, margin-top:auto, everything -- exactly as on the
   original <a>. All we do here is STRIP Elementor's own chrome off the inner
   <a class="elementor-button"> so ONLY the wrapper's original styling shows through.
   site.css never targets .elementor-button, so there is no cascade conflict. The scope
   `.elementor-widget-button > .elementor-button` never matches the offerte-form submit
   button (that <button> is not a direct child of an .elementor-widget-button), so the
   form is untouched. */
.elementor .elementor-widget-button > .elementor-button{
  display:block;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  color:inherit;
  fill:currentColor;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  text-align:inherit;
  text-decoration:none;
  line-height:inherit;
  box-shadow:none;
  transition:inherit;
  width:auto;
}
.elementor .elementor-widget-button > .elementor-button > .elementor-button-content-wrapper{display:inline}
.elementor .elementor-widget-button > .elementor-button .elementor-button-text{font:inherit;letter-spacing:inherit}

/* ---- 4. Elementor Pro form styled as .offerte-form ---- */
.elementor .offerte-form .elementor-form-fields-wrapper{gap:0 1.4rem}
.elementor .offerte-form .elementor-field-group{display:block;flex-basis:100%;border-bottom:1px solid rgba(64,64,65,.4);padding:1rem 0;margin:0 !important}
.elementor .offerte-form .elementor-field-group.elementor-col-40{flex-basis:calc(40% - .7rem)}
.elementor .offerte-form .elementor-field-group.elementor-col-60{flex-basis:calc(60% - .7rem)}
.elementor .offerte-form .elementor-field-label{display:block;border-bottom:0;margin-bottom:.35rem;padding:0;font-family:Sohne,Arial,sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(64,64,65,.72);font-weight:400}
.elementor .offerte-form .elementor-field-textual,
.elementor .offerte-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper){width:100%;border:0 !important;background:transparent !important;outline:0;padding:.3rem 0 !important;color:var(--char);resize:none;font-size:1rem;min-height:auto;border-radius:0 !important;box-shadow:none;line-height:normal}
.elementor .offerte-form textarea.elementor-field-textual{min-height:5rem}
.elementor .offerte-form .elementor-field-textual::placeholder{color:rgba(64,64,65,.8);font-weight:500}
.elementor .offerte-form .elementor-field-group.elementor-field-type-submit{border-bottom:0;padding:1.3rem 0 0}
.elementor .offerte-form .elementor-button{margin:0;border:0;background:var(--char);color:#fff;padding:.75rem 1.9rem;font-weight:700;font-family:var(--head);font-size:1rem;line-height:normal;cursor:pointer;border-radius:0;transition:transform .3s var(--ease)}
.elementor .offerte-form .elementor-button:hover{transform:translateY(-2px);background:var(--char)}
.elementor .offerte-form .elementor-button .elementor-button-text{font-weight:700}

/* ---- lightbox: figure cursor now on widget-image (script.js still finds imgs) ---- */
.elementor .proj-mosaic[data-lightbox] .elementor-widget-image{cursor:zoom-in}

/* ---- flex-item auto-margins: original targeted the inner <a>, now on the widget ----
   The vac-card "Solliciteer" link is a native button widget whose WRAPPER carries
   .link, so site.css `.vac-card .link{margin-top:auto}` already pushes it to the
   bottom; the button-widget selector here is belt-and-suspenders. svc-card's
   "Lees meer" is still a text-editor. */
.elementor .vac-card > .elementor-widget-text-editor:last-child,
.elementor .vac-card > .elementor-widget-button:last-child{margin-top:auto}
.elementor .svc-card > .elementor-widget-text-editor:last-child{margin-top:auto}
/* (site.css `p{margin:0}` already resets; context rules like `.prose p` add the
    intended spacing back — do NOT globally zero text-editor <p> margins.) */

/* ---- over: milestones story-slider ----
   Each slide must fill the viewport so the translateX carousel shows ONE slide.
   bridge-auto sets row-flex children to --width:auto, which would line every
   slide up side-by-side (the reported "uitgeklapte track"). Force full-width. */
.elementor .story-viewport{overflow:hidden}
.elementor .story-track{display:flex;flex-wrap:nowrap}
.elementor .story-track > .story-slide{flex:0 0 100% !important;width:100% !important;max-width:100%}

/* ---- contact-info rows ----
   Each .row's <span class="lbl"> + value are merged into one text-editor, so the
   static column-flex line-break is gone. Force the label onto its own line. */
.elementor .contact-info .row .lbl{display:block;margin-bottom:.25rem}

/* ---- vacature pull-quote (figure.vac-quote, now a container) ----
   Strip GeneratePress' <blockquote> defaults (border-left/padding/italic/font-size)
   that never exist on the static site; site.css `.vac-quote blockquote` supplies
   the real look. */
.elementor .vac-quote blockquote{border:0;padding:0;background:none;font-style:normal;max-width:none}
.elementor .vac-quote figcaption{font-style:normal}

/* ---- vacature chips (`.vac-chips span`) ----
   In the static page each chip <span> is a DIRECT flex item of `.vac-chips`, so
   its .4rem/.9rem padding + border count toward the item (line) height (~28px).
   In Elementor the spans are wrapped in text-editor widgets and become inline,
   so their vertical padding overflows the line box and the row collapses to
   ~19px (page ended up ~9px short). inline-block makes the padded border-box set
   the line height again -> matches static. */
.elementor .vac-chips span{display:inline-block}

/* ---- vacature body: block flow so consecutive heading/paragraph margins
   COLLAPSE exactly like the static page (Elementor's flex column would add them,
   over-spacing the section headings). ---- */
.elementor .vac-main{display:block}

/* ============================================================
   CPT / Loop-Grid bridge (project/dienst/vacature overzichten + home)
   Each loop-grid carries a scoping class via _css_classes so the inner
   .elementor-grid can be laid out 1:1 with the static grid it replaces. ============================================================ */
/* projecten-overzicht: 3-koloms raster, zelfde gap als static .proj-grid */
.elementor-widget-loop-grid.grid-projecten .elementor-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.8rem 2rem;}
.elementor-widget-loop-grid.grid-projecten .e-loop-item.is-hidden{display:none}
/* diensten-overzicht: zelfde raster als static .svc-cards */
.elementor-widget-loop-grid.grid-diensten .elementor-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
/* vacatures-overzicht: 2-koloms .vac-list-stijl */
.elementor-widget-loop-grid.grid-vacatures .elementor-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;}
/* Elementor wraps each loop item in .e-loop-item; it must be a transparent
   grid cell so the inner .project-card/.vac-card/.svc-card fills it 1:1. */
.elementor .e-loop-item{display:flex}
.elementor .e-loop-item > a,.elementor .e-loop-item > .e-con{width:100%}
@media(max-width:900px){
  .elementor-widget-loop-grid.grid-projecten .elementor-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
}
@media(max-width:640px){
  .elementor-widget-loop-grid.grid-projecten .elementor-grid,
  .elementor-widget-loop-grid.grid-diensten .elementor-grid,
  .elementor-widget-loop-grid.grid-vacatures .elementor-grid{grid-template-columns:1fr}
}
/* mosaic gallery (image-gallery widget bound to ACF) -> static .proj-mosaic */
.elementor .cjdb-mosaic .elementor-image-gallery .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0}
.elementor .cjdb-mosaic .gallery-item{width:auto!important;margin:0!important;padding:0!important;float:none!important}
.elementor .cjdb-mosaic .gallery-item img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border:0!important;display:block}
@media(max-width:640px){.elementor .cjdb-mosaic .elementor-image-gallery .gallery{grid-template-columns:1fr 1fr}}
/* project-meta: de cat|bar|loc spans zitten in WP in de text-editor-container
   i.p.v. direct in .project-meta, waardoor de flex-gap (.55rem) wegviel.
   Herstel de gap op de container zodat het separator-ritme 1:1 is. */
.elementor .project-meta .elementor-widget-container{display:flex;gap:.55rem;align-items:center}

/* ---- project single (Theme Builder) exacte spacings 1:1 met static inline styles ---- */
.elementor .cjdb-proj-band{padding-top:6.5rem}
.elementor .cjdb-proj-prose{max-width:50rem;margin-bottom:2.6rem}
.elementor .cjdb-proj-cta{margin-top:0}
.elementor .cjdb-proj-back{margin-top:2.2rem}
/* project single intro: text-editor met __dynamic__ = platte tekst i.p.v. <p>,
   dus .prose p pakt 'm niet; repliceer de .prose p-typografie op de widget. */
.elementor .cjdb-intro,.elementor .cjdb-intro .elementor-widget-container{
  color:rgba(64,64,65,.82);font-size:1.08rem;line-height:1.55}
/* project single: btn-solid mag niet full-width rekken als flex-item */
.elementor .cjdb-proj-cta{align-items:flex-start}

/* ============================================================
   HOME loops: diensten-rij (loop-grid) + projecten (loop-carousel)
   ============================================================ */
/* Diensten-rij op de HOME: 5-koloms .dienst-row-stijl via de dienst loop-item
   (svc-card markup). De home-kaart toont GEEN omschrijving: foto + titel +
   "Lees verder" (1:1 met .dienst-row). */
.elementor-widget-loop-grid.grid-diensten-home .elementor-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;}
.grid-diensten-home .svc-card-img{aspect-ratio:1.08/.84;margin-bottom:0;background:#e9ecef}
.grid-diensten-home .svc-card h3{margin:.85rem 0 0;font-size:clamp(1.05rem,1.3vw,1.3rem)}
/* omschrijving (overview text-editor) verbergen; alleen de "Lees verder" blijft */
.grid-diensten-home .svc-card .elementor-widget-text-editor:not(.svc-card-link){display:none}
.grid-diensten-home .svc-card-link{margin-top:.55rem;padding-top:0}
@media(max-width:820px){
  .elementor-widget-loop-grid.grid-diensten-home .elementor-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
}
@media(max-width:560px){
  .elementor-widget-loop-grid.grid-diensten-home .elementor-grid{grid-template-columns:1fr}
}

/* Projecten op de HOME: loop-carousel gestyled als de .projects-track drag-slider.
   Swiper toont 5 kaarten (1:1 met static 5-koloms track), drag/swipe voor de rest.
   Gap 1rem = image_spacing_custom 16px; geen pijlen/dots (static heeft die niet). */
.carousel-projecten .elementor-loop-container,
.carousel-projecten .swiper{overflow:hidden;cursor:grab}
.carousel-projecten .swiper.is-dragging,
.carousel-projecten .swiper-wrapper.is-dragging{cursor:grabbing}
.carousel-projecten .swiper-wrapper{align-items:stretch}
.carousel-projecten .swiper-slide{height:auto}
.carousel-projecten .swiper-slide > .e-con,
.carousel-projecten .swiper-slide .project-card{height:100%}
.carousel-projecten .elementor-swiper-button,
.carousel-projecten .swiper-pagination,
.carousel-projecten .swiper-pagination-bullets{display:none!important}

/* "Lees verder" (.svc-card-link) is een text-editor-widget die BEIDE klassen
   .svc-card-link + .elementor-widget-text-editor draagt; Elementor's text-editor
   kleur wint dan van de single-class .svc-card-link -> link werd donker i.p.v.
   accent. Descendant-selector (hogere specificity, laadt als laatste) herstelt
   de accent-kleur 1:1 met de static (zowel home-rij als diensten-overzicht). */
.elementor .svc-card .svc-card-link{color:var(--accent)}
.elementor .svc-card:hover .svc-card-link{color:var(--char)}
.elementor .cjx-bar-botanique-1.cjx-bar-botanique-1{padding-top:6.5rem;}
.elementor .cjx-bar-botanique-2.cjx-bar-botanique-2{max-width:50rem;margin-bottom:2.6rem;}
.elementor .cjx-home-1.cjx-home-1{margin-top:1rem;}
.elementor .cjx-over-1.cjx-over-1{padding-top:5rem;}
.elementor .cjx-projecten-1.cjx-projecten-1{padding-top:6rem;}
.elementor .cjx-timmerfabriek-1.cjx-timmerfabriek-1{padding-top:0;}

/* vacature loop-item link ("Lees meer") heeft geen .link-class -> forceer accent-uppercase zoals .vac-card .link */
.elementor .vac-card .elementor-widget-button .elementor-button{color:var(--accent)!important;font-family:var(--head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.elementor .vac-card:hover .elementor-widget-button .elementor-button{color:var(--char)!important}

/* Elementor-editor: reveal-scroll-animatie uit zodat alle content zichtbaar is op het canvas (survives rebuild: staat in bron) */
.elementor-editor-active .reveal,
body.elementor-editor-active .reveal,
.elementor-editor-active .reveal.elementor-invisible{opacity:1 !important;transform:none !important;visibility:visible !important;}

/* ============================================================
   Blokken bibliotheek (interne referentie-pagina /blokken-bibliotheek)
   Alleen chrome voor de catalogus + native constructies die elders
   via shortcode-HTML liepen (proj-mosaic / chips). ============================================================ */
.elementor .lib-label{margin:0;padding:2.9rem var(--gutter) .3rem;border-top:1px solid #e6e6e6}
.elementor .lib-label .elementor-heading-title{font-family:var(--head);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a0a0a1}
.elementor .e-con.lib-card1{--width:100%;max-width:360px}
.elementor .e-con.lib-card2{--width:100%;max-width:540px}
.elementor .e-con.lib-btnrow{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.6rem;align-items:center}
.elementor .lib-btnrow > .elementor-widget{width:auto}
/* .btn en .btn-ghost zijn op de site context-gebonden (.lead .btn / .vac-apply-card .btn-ghost);
   repliceer exact dezelfde declaraties voor de geisoleerde knoppen-demo op de bibliotheek. */
.elementor .lib-btnrow .elementor-widget-button.btn{display:inline-block;background:transparent;border:1px solid var(--char);color:var(--char);padding:.3rem 1.1rem;font-family:var(--head);font-weight:400;transition:background .3s var(--ease),color .3s var(--ease)}
.elementor .lib-btnrow .elementor-widget-button.btn:hover{background:var(--char);color:#fff}
.elementor .lib-btnrow .elementor-widget-button.btn-ghost{color:var(--char);font-family:var(--head);font-weight:700;border:1.5px solid rgba(64,64,65,.4);padding:.75rem 1.2rem;transition:background .3s var(--ease),color .3s var(--ease)}
.elementor .lib-btnrow .elementor-widget-button.btn-ghost:hover{background:var(--char);color:#fff}
/* proj-mosaic als native container (site.css .proj-mosaic wint niet altijd van .e-con) */
.elementor .e-con.proj-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(max-width:640px){.elementor .e-con.proj-mosaic{grid-template-columns:1fr 1fr}}
/* chips: elke chip = container.chip (border/padding via site.css .chip), krimp naar inhoud */
.elementor .e-con.chips > .e-con.chip{--width:auto;--flex-direction:row;display:inline-flex}
.elementor .e-con.chip > .elementor-widget-text-editor{width:auto}
.elementor .e-con.chip .elementor-widget-container p{margin:0;font-family:var(--head);font-size:.76rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--char);line-height:1}

/* ============================================================
   Nieuwe blokken (/nieuwe-blokken) — herbruikbare landing-blokken
   Alles op de bestaande tokens (--char/--accent/--paper/--head/
   --gutter/--ease). Geen nieuwe kleuren of fonts. ============================================================ */

/* gedeelde band-achtergrondvarianten */
.elementor .e-con.bg-accent{background:var(--accent)}
.elementor .e-con.bg-char{background:var(--char);color:#fff}
.elementor .e-con.bg-soft{background:#f4f5f6}
.elementor .bg-char .section-head h2,.elementor .bg-char h2{color:#fff}

/* 1. Reviews / testimonials -------------------------------------------------- */
.elementor .e-con.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;align-items:stretch}
.elementor .e-con.review-card{--flex-direction:column;background:#f4f5f6;padding:2.1rem 2rem;gap:1rem;height:100%}
.elementor .review-card .elementor-star-rating{color:var(--accent)}
.elementor .review-card .elementor-star-rating i.elementor-star-full:before,
.elementor .review-card .elementor-star-rating .elementor-star-full{color:var(--accent)}
.elementor .review-card .elementor-star-rating__wrapper{display:flex;line-height:1}
.elementor .review-card .quote p{color:var(--char);font-size:1.02rem;line-height:1.55;font-style:normal;margin:0}
.elementor .review-card .review-author{margin-top:auto}
.elementor .review-card .review-author p{margin:0;font-family:var(--head);font-weight:700;color:var(--char);font-size:1rem}
.elementor .review-card .review-role p{margin:.12rem 0 0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(64,64,65,.6)}
@media(max-width:900px){.elementor .e-con.review-grid{grid-template-columns:1fr;gap:1.4rem}}

/* 3. Team-grid --------------------------------------------------------------- */
.elementor .e-con.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem}
.elementor .e-con.team-card{--flex-direction:column}
.elementor .team-card .team-photo{aspect-ratio:1.05/1;overflow:hidden;background:#e9ecef}
.elementor .team-card .team-photo .elementor-widget-image,
.elementor .team-card .team-photo .elementor-widget-image>.elementor-widget-container{height:100%;width:100%}
.elementor .team-card .team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.elementor .team-card:hover .team-photo img{transform:scale(1.04)}
.elementor .team-card h3{font-family:var(--head);font-weight:700;font-size:1.15rem;margin:.9rem 0 0;color:var(--char)}
.elementor .team-card .team-role p{margin:.2rem 0 0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-family:var(--head);font-weight:700}
@media(max-width:900px){.elementor .e-con.team-grid{grid-template-columns:1fr 1fr;gap:1.4rem}}
@media(max-width:520px){.elementor .e-con.team-grid{grid-template-columns:1fr}}

/* 4. FAQ-accordion ----------------------------------------------------------- */
.elementor .faq-accordion{max-width:52rem}
.elementor .faq-accordion .elementor-accordion-item{border:0;border-top:1px solid var(--line);background:transparent}
.elementor .faq-accordion .elementor-accordion-item:last-child{border-bottom:1px solid var(--line)}
.elementor .faq-accordion .elementor-tab-title{padding:1.15rem 0;background:transparent;border:0;cursor:pointer}
.elementor .faq-accordion .elementor-tab-title .elementor-accordion-title{font-family:var(--head);font-weight:700;font-size:1.08rem;color:var(--char);transition:color .3s var(--ease)}
.elementor .faq-accordion .elementor-tab-title:hover .elementor-accordion-title,
.elementor .faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-title{color:var(--accent)}
.elementor .faq-accordion .elementor-accordion-icon{color:var(--accent)}
.elementor .faq-accordion .elementor-tab-content{padding:0 0 1.25rem;background:transparent;border:0}
.elementor .faq-accordion .elementor-tab-content p{color:rgba(64,64,65,.82);line-height:1.6;margin:0}

/* 5. CTA-banner -------------------------------------------------------------- */
.elementor .e-con.cta-banner{background:var(--accent);color:var(--char);padding:clamp(3.5rem,7vw,6rem) var(--gutter);text-align:center;align-items:center;gap:1.15rem}
.elementor .cta-banner .kicker{color:var(--char)}
.elementor .cta-banner h2{font-family:var(--head);font-weight:700;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;margin:0;color:var(--char)}
.elementor .cta-banner .cta-text p{color:rgba(64,64,65,.85);font-size:1.08rem;line-height:1.55;max-width:46rem;margin:0 auto}
.elementor .cta-banner .elementor-widget-button{margin-top:.5rem}

/* 6. Logo-strip -------------------------------------------------------------- */
.elementor .e-con.logo-strip{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 2.4rem}
.elementor .e-con.logo-item{--width:auto;--flex-direction:row}
.elementor .logo-item .elementor-widget-container p{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.03em;color:rgba(64,64,65,.38);transition:color .35s var(--ease)}
.elementor .logo-item:hover .elementor-widget-container p{color:var(--accent)}

/* 7. Stappenplan / proces-timeline (genummerd, principles-stijl) ------------- */
.elementor .e-con.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 2.4rem}
.elementor .e-con.step{--flex-direction:column;gap:.55rem}
.elementor .step .step-num{border-top:2px solid var(--accent);padding-top:.85rem}
.elementor .step .step-num p{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--accent)}
.elementor .step h3{font-family:var(--head);font-weight:800;font-size:1.15rem;margin:.15rem 0 0;color:var(--char)}
.elementor .step p{color:rgba(64,64,65,.8);line-height:1.5;margin:0}
@media(max-width:900px){.elementor .e-con.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.elementor .e-con.steps{grid-template-columns:1fr}}

/* 8. Prijs / pakketten ------------------------------------------------------- */
.elementor .e-con.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;align-items:stretch}
.elementor .e-con.price-card{--flex-direction:column;border:1px solid var(--line);padding:2.3rem 2rem;gap:.9rem;height:100%}
.elementor .e-con.price-card.is-featured{border-color:var(--char);background:var(--char);color:#fff}
.elementor .price-card h3{font-family:var(--head);font-weight:700;font-size:1.35rem;margin:0;color:inherit}
.elementor .price-card .price p{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(2rem,3vw,2.7rem);line-height:1;color:inherit}
.elementor .price-card .price p .per{font-size:.9rem;font-weight:400;opacity:.65}
.elementor .price-card .elementor-icon-list-items{display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0}
.elementor .price-card .elementor-icon-list-item{display:flex;align-items:center;gap:.55rem;border:0;padding:0}
.elementor .price-card .elementor-icon-list-icon{color:var(--accent)}
.elementor .price-card .elementor-icon-list-icon svg,
.elementor .price-card .elementor-icon-list-icon i{color:var(--accent);fill:var(--accent)}
.elementor .price-card .elementor-icon-list-text{font-size:.95rem;color:inherit;opacity:.85}
.elementor .price-card .elementor-widget-button{margin-top:auto}
.elementor .price-card.is-featured .elementor-widget-button.btn-solid{background:var(--accent)}
.elementor .price-card.is-featured .elementor-widget-button.btn-solid > .elementor-button{color:var(--char)}
@media(max-width:900px){.elementor .e-con.pricing{grid-template-columns:1fr;max-width:26rem;margin:0 auto}}

/* 9. USP-iconen-rij ---------------------------------------------------------- */
.elementor .e-con.usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.elementor .usp-row .elementor-icon-box-wrapper{text-align:left}
.elementor .usp-row .elementor-icon-box-icon{margin-bottom:.85rem}
.elementor .usp-row .elementor-icon-box-icon .elementor-icon{color:var(--accent);fill:var(--accent);font-size:2rem}
.elementor .usp-row .elementor-icon-box-icon .elementor-icon svg{fill:var(--accent);height:2rem;width:2rem}
.elementor .usp-row .elementor-icon-box-title{font-family:var(--head);font-weight:800;font-size:1.1rem;color:var(--char);margin:0 0 .4rem}
.elementor .usp-row .elementor-icon-box-description{color:rgba(64,64,65,.8);line-height:1.55;font-size:.95rem}
@media(max-width:900px){.elementor .e-con.usp-row{grid-template-columns:1fr 1fr;gap:1.8rem}}
@media(max-width:520px){.elementor .e-con.usp-row{grid-template-columns:1fr}}

/* 10. Feature-blok (beeld + tekst) + omgekeerde variant ---------------------- */
.elementor .e-con.feature{grid-template-columns:1.1fr .9fr}
.elementor .e-con.feature.feature--rev{grid-template-columns:.9fr 1.1fr}
.elementor .feature--rev .feature-media{order:2}
.elementor .feature--rev .feature-body{order:1}
@media(max-width:820px){
  .elementor .e-con.feature,.elementor .e-con.feature.feature--rev{grid-template-columns:1fr}
  .elementor .feature--rev .feature-media,.elementor .feature--rev .feature-body{order:0}
}

/* story-slider nav-knoppen: GP/Elementor button-padding reset zodat het pijltje (:before) in het midden van de cirkel staat */
.elementor .story-btn,.story-btn{padding:0 !important;line-height:1;box-sizing:border-box;place-items:center}
.story-btn:before{display:block;line-height:1;transform:translateY(-0.5px)}

/* home diensten: hele kaart klikbaar via stretched overlay-anchor
   (container-link rendert geen <a> in Elementor 4.x) */
.elementor .e-con.dienst{position:relative}
.elementor .dienst .dienst-link{position:absolute;inset:0;z-index:4;overflow:hidden;text-indent:-9999px;white-space:nowrap;font-size:0}

/* FIX projecten-meta: cat|bar|loc uit elkaar (waren inline, | plakte vast) */
.elementor .project-meta .elementor-widget-text-editor,
.elementor .project-meta .elementor-widget-text-editor > .elementor-widget-container{display:flex;gap:.55rem;align-items:center}
/* FIX home dienst-kaart volledig klikbaar: anchor t.o.v. .dienst positioneren */
.elementor .dienst .elementor-widget-text-editor,
.elementor .dienst .elementor-widget-text-editor > .elementor-widget-container{position:static}
.elementor .dienst .dienst-link{position:absolute;inset:0;z-index:20;display:block}

/* FIX diensten-overzicht kaarten: foto vult de 4/3-box (grijze strook weg) + kaart rekt mee zodat LEES VERDER onderaan met ruimte staat.
   DOM = .svc-card-img(e-con) > .elementor-widget-image > <a> > img  (GEEN .elementor-widget-container in optimized markup).
   De <a> in de keten had geen height -> zakte in tot natuurlijke fotohoogte (3:2) binnen de 4:3-box -> grijze strook.
   Fix: hele keten (widget + evt. container + <a> + img) op height:100%; box krijgt vaste 4/3. */
.elementor .grid-diensten .svc-card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9ecef;margin-bottom:1.1rem;padding:0}
.elementor .grid-diensten .svc-card-img .elementor-widget-image,
.elementor .grid-diensten .svc-card-img .elementor-widget-image > .elementor-widget-container,
.elementor .grid-diensten .svc-card-img .elementor-widget-image a,
.elementor .grid-diensten .svc-card-img img{height:100% !important;width:100% !important}
.elementor .grid-diensten .svc-card-img .elementor-widget-image a{display:block}
.elementor .grid-diensten .svc-card-img img{object-fit:cover !important;display:block}
.elementor .grid-diensten .e-loop-item{align-items:stretch}
.elementor .grid-diensten .e-loop-item > .e-con.svc-card{flex:1 1 auto;height:100%}
.elementor .grid-diensten .svc-card p{line-height:1.55;margin:0 0 .9rem}
.elementor .grid-diensten .svc-card-link{margin-top:auto;padding-top:.2rem}

/* ============================================================
   Nieuwe landingssecties (uitbreiding /nieuwe-blokken, page 342)
   Uitsluitend bestaande tokens (--char/--accent/--paper/--soft/
   --head/--gutter/--ease). Geen nieuwe kleuren of fonts.
   ============================================================ */

/* button-variant voor donkere achtergronden: accent-vlak i.p.v. char */
.elementor .on-dark.elementor-widget-button.btn-solid{background:var(--accent)}
.elementor .on-dark.elementor-widget-button.btn-solid > .elementor-button{color:var(--char)}

/* A. Kop + intro gecentreerd */
.elementor .e-con.intro-center{--flex-direction:column;align-items:center;text-align:center;max-width:48rem;margin:0 auto;gap:1rem}
.elementor .intro-center h2{color:var(--char)}
.elementor .intro-center p{color:rgba(64,64,65,.8);font-size:1.08rem;line-height:1.6;margin:.2rem auto 0;max-width:44rem}

/* B. Kop + intro links (smal leesblok) */
.elementor .e-con.intro-narrow{--flex-direction:column;align-items:flex-start;max-width:42rem;gap:1rem}
.elementor .intro-narrow h2{color:var(--char)}
.elementor .intro-narrow p{color:rgba(64,64,65,.8);font-size:1.08rem;line-height:1.6;margin:.2rem 0 0}

/* C. 2-koloms tekst */
.elementor .e-con.text-2col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.elementor .text-2col p{color:rgba(64,64,65,.8);font-size:1.02rem;line-height:1.6;margin:0}
@media(max-width:820px){.elementor .e-con.text-2col{grid-template-columns:1fr;gap:1.6rem}}

/* accent-vinkjes icon-list (herbruikbaar: .check-list) */
.elementor .check-list .elementor-icon-list-items{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0}
.elementor .check-list .elementor-icon-list-item{display:flex;align-items:flex-start;gap:.7rem;border:0;padding:0}
.elementor .check-list .elementor-icon-list-icon{color:var(--accent);margin-top:.2rem}
.elementor .check-list .elementor-icon-list-icon svg,.elementor .check-list .elementor-icon-list-icon i{color:var(--accent);fill:var(--accent);width:1em;height:1em}
.elementor .check-list .elementor-icon-list-text{font-size:1rem;color:var(--char);line-height:1.5}

/* D. Tekst met opsomming */
.elementor .e-con.text-list{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.elementor .e-con.text-list > .e-con{--flex-direction:column;align-items:flex-start;gap:1rem}
.elementor .text-list .nb-lead h2{color:var(--char)}
.elementor .text-list .nb-lead p{color:rgba(64,64,65,.8);line-height:1.6;margin:0}
@media(max-width:820px){.elementor .e-con.text-list{grid-template-columns:1fr;gap:1.8rem}}

/* E. Groot statement / quote-blok */
.elementor .e-con.statement{--flex-direction:column;align-items:flex-start;max-width:60rem;border-left:3px solid var(--accent);padding-left:clamp(1.4rem,3vw,2.6rem);gap:1.1rem}
.elementor .statement .st-quote .elementor-heading-title{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.2;color:var(--char)}
.elementor .statement .st-by p{margin:0;font-family:var(--head);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}

/* F/G. media-text (beeld + tekst, licht) + omgekeerde variant */
.elementor .e-con.media-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
.elementor .e-con.media-text.media-text--rev .media-img{order:2}
.elementor .e-con.media-text.media-text--rev .media-body{order:1}
.elementor .e-con.media-img{--flex-direction:column}
.elementor .media-img .elementor-widget-image,.elementor .media-img .elementor-widget-image>.elementor-widget-container{width:100%}
.elementor .media-img img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.elementor .e-con.media-body{--flex-direction:column;align-items:flex-start;gap:1rem}
.elementor .media-body h2{color:var(--char);font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.12}
.elementor .media-body p{color:rgba(64,64,65,.8);line-height:1.6;margin:0;max-width:36rem}
@media(max-width:820px){
  .elementor .e-con.media-text{grid-template-columns:1fr;gap:1.8rem}
  .elementor .media-text--rev .media-img,.elementor .media-text--rev .media-body{order:0}
}

/* H. Beeld boven + tekst onder (gecentreerd) */
.elementor .e-con.media-stack{--flex-direction:column;align-items:center;text-align:center;gap:1.6rem}
.elementor .e-con.media-stack .ms-img{--flex-direction:column;width:100%;max-width:72rem}
.elementor .media-stack .ms-img .elementor-widget-image,.elementor .media-stack .ms-img .elementor-widget-image>.elementor-widget-container{width:100%}
.elementor .media-stack .ms-img img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover}
.elementor .e-con.media-stack .ms-body{--flex-direction:column;align-items:center;max-width:46rem;gap:1rem}
.elementor .media-stack .ms-body h2{color:var(--char)}
.elementor .media-stack .ms-body p{color:rgba(64,64,65,.8);line-height:1.6;margin:0}

/* I. Beeld met tekst-overlay (donkere scrim) */
.elementor .e-con.media-overlay{position:relative;min-height:clamp(24rem,42vw,34rem);background-size:cover;background-position:center;justify-content:center;align-items:center;text-align:center;padding:clamp(3rem,6vw,6rem) var(--gutter);overflow:hidden}
.elementor .e-con.media-overlay:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,64,65,.5),rgba(64,64,65,.72));z-index:0}
.elementor .e-con.media-overlay > *{position:relative;z-index:1}
.elementor .e-con.mo-inner{--flex-direction:column;align-items:center;gap:1.1rem;max-width:44rem}
.elementor .mo-inner .kicker{color:#fff}
.elementor .mo-inner h2{color:#fff;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}
.elementor .mo-inner p{color:rgba(255,255,255,.86);line-height:1.6;margin:0}

/* J/40-60. Split — content + kaart/aanbod-blok */
.elementor .e-con.split-offer{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.elementor .e-con.split-offer.split-offer--rev{grid-template-columns:1fr 1.5fr}
.elementor .split-offer--rev .so-body{order:2}
.elementor .split-offer--rev .offer-card{order:1}
.elementor .e-con.so-body{--flex-direction:column;align-items:flex-start;gap:1rem}
.elementor .so-body h2{color:var(--char)}
.elementor .so-body p{color:rgba(64,64,65,.8);line-height:1.6;margin:0}
.elementor .e-con.offer-card{--flex-direction:column;align-items:flex-start;gap:1rem;background:var(--soft,#f4f5f6);padding:2.2rem 2rem;position:sticky;top:2rem}
.elementor .e-con.offer-card.bg-char{background:var(--char)}
.elementor .offer-card h3{font-family:var(--head);font-weight:700;font-size:1.3rem;margin:0;color:var(--char)}
.elementor .offer-card p{color:rgba(64,64,65,.82);line-height:1.55;margin:0}
.elementor .offer-card.bg-char h3{color:#fff}
.elementor .offer-card.bg-char p{color:rgba(255,255,255,.82)}
.elementor .offer-card.bg-char .check-list .elementor-icon-list-text{color:#fff}
.elementor .offer-card .elementor-widget-button{margin-top:.3rem}
@media(max-width:820px){
  .elementor .e-con.split-offer,.elementor .e-con.split-offer.split-offer--rev{grid-template-columns:1fr;gap:1.8rem}
  .elementor .split-offer--rev .so-body,.elementor .split-offer--rev .offer-card{order:0}
  .elementor .e-con.offer-card{position:static}
}

/* K. Split — content + formulier */
.elementor .e-con.split-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.elementor .e-con.form-card{--flex-direction:column;background:var(--soft,#f4f5f6);padding:clamp(1.8rem,3vw,2.6rem)}
@media(max-width:820px){.elementor .e-con.split-form{grid-template-columns:1fr;gap:1.8rem}}

/* L. Smalle banner met knop */
.elementor .e-con.mini-banner{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:1.6rem clamp(1.8rem,3vw,2.6rem);background:var(--soft,#f4f5f6)}
.elementor .e-con.mini-banner.bg-accent{background:var(--accent)}
.elementor .e-con.mb-text{--width:auto}
.elementor .mini-banner .mb-text p{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--char);line-height:1.15}
.elementor .mini-banner > .elementor-widget-button{width:auto}

/* M. Opsomming-grid (2 koloms accent-vinkjes) */
.elementor .check-grid .elementor-icon-list-items{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 2.4rem;margin:0;padding:0}
.elementor .check-grid .elementor-icon-list-item{display:flex;align-items:flex-start;gap:.7rem;border:0;padding:0}
.elementor .check-grid .elementor-icon-list-icon{color:var(--accent);margin-top:.2rem}
.elementor .check-grid .elementor-icon-list-icon svg,.elementor .check-grid .elementor-icon-list-icon i{color:var(--accent);fill:var(--accent);width:1em;height:1em}
.elementor .check-grid .elementor-icon-list-text{font-size:1rem;color:var(--char);line-height:1.5}
@media(max-width:640px){.elementor .check-grid .elementor-icon-list-items{grid-template-columns:1fr}}

/* N. CTA-strook varianten (licht / donker / accent) */
.elementor .e-con.cta-strip{text-align:center;align-items:center;gap:1.1rem;padding:clamp(3rem,6vw,5rem) var(--gutter)}
.elementor .e-con.cta-strip.bg-soft{background:var(--soft,#f4f5f6)}
.elementor .e-con.cta-strip.bg-char{background:var(--char)}
.elementor .e-con.cta-strip.bg-accent{background:var(--accent)}
.elementor .cta-strip h2{font-family:var(--head);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.1;margin:0;color:var(--char)}
.elementor .cta-strip p{margin:0;font-size:1.06rem;line-height:1.55;max-width:44rem;color:rgba(64,64,65,.82)}
.elementor .cta-strip .kicker{color:var(--accent)}
.elementor .cta-strip.bg-char h2{color:#fff}
.elementor .cta-strip.bg-char p{color:rgba(255,255,255,.82)}
.elementor .cta-strip.bg-accent h2{color:var(--char)}
.elementor .cta-strip.bg-accent .kicker{color:var(--char)}
.elementor .cta-strip.bg-accent p{color:rgba(64,64,65,.82)}

/* ============================================================
   O. LANGE-TEKST-BLOKKEN (bibliotheek /nieuwe-blokken/)
   .longread · .text-sections · .longtext-2col · .media-longtext
   · .longread--wide — rustige leesopmaak, alleen bestaande tokens
   (--char/--accent/--head/--gutter). Geen nieuwe kleuren of fonts.
   ============================================================ */
/* gedeelde rich-tekst typografie binnen een text-editor (.lt-rich) */
.elementor .lt-rich .elementor-widget-container > *:first-child{margin-top:0}
.elementor .lt-rich .elementor-widget-container > *:last-child{margin-bottom:0}
.elementor .lt-rich p{color:var(--char);font-size:1.05rem;line-height:1.7;margin:0 0 1.2rem}
.elementor .lt-rich h3{font-family:var(--head);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.25;letter-spacing:.01em;color:var(--char);margin:2.1rem 0 .9rem}
.elementor .lt-rich ul{list-style:none;margin:1.3rem 0;padding:0}
.elementor .lt-rich ul li{position:relative;padding-left:1.5rem;color:var(--char);font-size:1.02rem;line-height:1.6;margin:0 0 .62rem}
.elementor .lt-rich ul li:last-child{margin-bottom:0}
.elementor .lt-rich ul li:before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;background:var(--accent);border-radius:50%}
/* intro-lead */
.elementor .lt-lead p{color:var(--char);font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.55;font-weight:400;margin:0}
.elementor .lt-lead--big p{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.5}

/* 1. .longread — smal leesblok ~46rem */
.elementor .e-con.longread{--flex-direction:column;align-items:flex-start;max-width:46rem;gap:1.15rem}
.elementor .longread .elementor-widget-heading .elementor-heading-title{color:var(--char);font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.12}
.elementor .e-con.longread.longread--wide{max-width:52rem;gap:1.5rem}

/* 2. .text-sections — tussenkoppen onder elkaar */
.elementor .e-con.text-sections{--flex-direction:column;align-items:flex-start;max-width:46rem;gap:0}

/* 3. .longtext-2col — twee leeskolommen lange tekst */
.elementor .e-con.longtext-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
@media(max-width:820px){.elementor .e-con.longtext-2col{grid-template-columns:1fr;gap:1.7rem}}

/* 4. .media-longtext — sticky beeld + lange tekstkolom */
.elementor .e-con.media-longtext{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.elementor .e-con.mlt-img{--flex-direction:column;position:sticky;top:2rem}
.elementor .mlt-img .elementor-widget-image,.elementor .mlt-img .elementor-widget-image>.elementor-widget-container{width:100%}
.elementor .mlt-img img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.elementor .e-con.mlt-body{--flex-direction:column;align-items:flex-start;gap:1.1rem}
.elementor .mlt-body .elementor-widget-heading .elementor-heading-title{color:var(--char);font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.14}
@media(max-width:820px){
  .elementor .e-con.media-longtext{grid-template-columns:1fr;gap:1.8rem}
  .elementor .e-con.mlt-img{position:static}
  .elementor .mlt-img img{aspect-ratio:4/3}
}

/* Filterbalk projecten komt uit een shortcode-widget ([cjdb_project_filter])
   i.p.v. zeven losse text-editor-widgets, zodat de knoppen uit de taxonomie
   komen. De widget is dan een flex-child; de knoppen erbinnen moeten zelf
   de rij + gap van .proj-filter overnemen. */
.elementor .proj-filter .elementor-widget-shortcode,
.elementor .proj-filter .elementor-widget-shortcode > .elementor-widget-container,
.elementor .proj-filter .elementor-shortcode{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;width:100%}

/* project-meta rendert nu via [cjdb_project_meta]; de shortcode-widget schuift
   een extra .elementor-shortcode-div tussen de container en de spans, waardoor
   de flex-gap van .project-meta er niet meer bij kwam (cat|loc plakte vast). */
.elementor .project-meta .elementor-shortcode{display:flex;gap:.55rem;align-items:center}

/* Anker-offset onder de vaste header. De statische regel section[id]
   {scroll-margin-top:6rem} pakt in WP niet, want Elementor rendert containers
   als div.e-con, niet als <section>. Zonder dit springt /#offerte ruim 400px
   te ver door en verdwijnt de kop onder de header. */
.elementor .e-con[id],.elementor .elementor-element[id]{scroll-margin-top:6rem}

/* ==========================================================================
   v84 (2026-07-21) — feedbacklijst gebruiker (Elementor-issues per pagina)
   ========================================================================== */

/* --- HOME + VACATURES: dubbele lijn tussen de vacaturekaarten --------------
   site.css rekent met .vac-card:nth-last-child(-n+2) om alleen de onderste rij
   een streep te geven. In een Loop Grid zit elke kaart alleen in zijn eigen
   .e-loop-item, dus IEDERE kaart was "een van de laatste twee" en kreeg een
   border-bottom bovenop de border-top van de kaart eronder. Nu telt de rij
   binnen de loop-container. */
.elementor .e-loop-item .vac-card{border-bottom:0}
.elementor .grid-vacatures .elementor-loop-container > .e-loop-item:nth-last-child(-n+2) .vac-card{border-bottom:1px solid var(--ink)}
@media (max-width:767px){
  .elementor .grid-vacatures .elementor-loop-container > .e-loop-item:nth-last-child(2) .vac-card{border-bottom:0}
}

/* --- Onderstreping van tekstlinks loopt door tot de rand van de widget -----
   .link/.arrow-cta/.back-link zijn native button-widgets; site.css tekent het
   lijntje met :after{width:100%} op het element dat de klasse draagt. Bij een
   widget is dat de volle kolombreedte in plaats van de tekst ("Lees ons
   verhaal", "Terug naar alle projecten"). Het lijntje hoort nu bij de <a>. */
.elementor .elementor-widget-button.link,
.elementor .elementor-widget-button.arrow-cta,
.elementor .elementor-widget-button.back-link,
.elementor .elementor-widget-button.dienst-more,
.elementor .elementor-widget-button.svc-card-link{width:max-content;max-width:100%}
.elementor .elementor-widget-button.link:after,
.elementor .elementor-widget-button.arrow-cta:after,
.elementor .elementor-widget-button.back-link:after,
.elementor .elementor-widget-button.dienst-more:after,
.elementor .elementor-widget-button.svc-card-link:after{display:none}
.elementor .elementor-widget-button.link .elementor-button,
.elementor .elementor-widget-button.arrow-cta .elementor-button,
.elementor .elementor-widget-button.back-link .elementor-button,
.elementor .elementor-widget-button.dienst-more .elementor-button,
.elementor .elementor-widget-button.svc-card-link .elementor-button{position:relative}
.elementor .elementor-widget-button.link .elementor-button:after,
.elementor .elementor-widget-button.arrow-cta .elementor-button:after,
.elementor .elementor-widget-button.back-link .elementor-button:after,
.elementor .elementor-widget-button.dienst-more .elementor-button:after,
.elementor .elementor-widget-button.svc-card-link .elementor-button:after{content:"";position:absolute;left:0;bottom:-.14rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.elementor .elementor-widget-button.link:hover .elementor-button:after,
.elementor .elementor-widget-button.arrow-cta:hover .elementor-button:after,
.elementor .elementor-widget-button.back-link:hover .elementor-button:after,
.elementor .elementor-widget-button.dienst-more:hover .elementor-button:after,
.elementor .elementor-widget-button.svc-card-link:hover .elementor-button:after{transform:scaleX(1);transform-origin:left}

/* --- Terug-links antraciet i.p.v. amber (consistent met de rest) ---------- */
.elementor .back-link,
.elementor .elementor-widget-button.back-link .elementor-button,
.vac-main .back-link,
.svc-main .back-link{color:var(--char);transition:color .3s var(--ease)}
/* 🛑 En bij hover amber, net als de andere knoppen. De regel hierboven stond in
   de bridge en die laadt NA site.css, dus een `.back-link:hover` daar verloor
   altijd. De hover hoort dus op dezelfde plek te staan. */
.elementor .back-link:hover,
.elementor .elementor-widget-button.back-link:hover,
.elementor .elementor-widget-button.back-link:hover .elementor-button,
.vac-main .back-link:hover,
.svc-main .back-link:hover{color:var(--accent)}

/* --- HOME: streep onder de over-sectie niet meer over de volle breedte ----- */
.elementor .e-con.section-divider{padding-inline:var(--gutter)}
.elementor .e-con.section-divider .elementor-widget-divider{width:100%}

/* --- HOME: telefoonnummer in de gele balk wordt wit op hover -------------- */
.elementor .lead:not(.lead--white) .phone{transition:color .3s var(--ease),border-color .3s var(--ease)}
.elementor .lead:not(.lead--white) .phone:hover{color:#fff;border-bottom-color:#fff}

/* --- HOME: offerteformulier houdt de open velden met onderlijntje; alleen
       de labels (NAAM, E-MAIL, ...) worden wit op het geel. -------------------- */
.elementor .offerte-form .elementor-field-label{color:#fff}

/* --- HOME: sectie "Werken bij CJ de Boer" = intro + knop rechts ----------- */
.elementor .e-con.vac-home-head{--flex-direction:row;align-items:flex-end;justify-content:space-between;gap:2rem 3rem;flex-wrap:wrap}
.elementor .e-con.vac-home-head > .e-con{--width:auto}
/* flex-basis in rem zou op mobiel (kolomrichting) een vaste HOOGTE worden en
   een gat van ~550px onder de tekst geven; daarom auto + min-width. */
.elementor .e-con.vac-home-text{flex:1 1 auto;min-width:0;max-width:62rem;margin-bottom:0}
.elementor .e-con.vac-home-act{flex:none}
@media (max-width:767px){
  .elementor .e-con.vac-home-head{--flex-direction:column;align-items:flex-start}
}

/* --- DIENSTEN-overzicht: kaartenraster 1:1 met de statische site -----------
   Statisch staat er <section class="band" style="padding-top:2.5rem">; in WP
   viel .band terug op de standaard 6.5rem en stond het raster 65px te laag. */
.e-con.band{--padding-top:6.5rem;--padding-bottom:6.5rem;--padding-left:var(--gutter);--padding-right:var(--gutter)}
.elementor .e-con.band{padding:var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start)}

/* --- DIENSTEN-detail: geen witte strook tussen het uitgelichte blok en de
       gele balk. .feature is donker en volledig breed; de sectie eronder ving
       de marge van het canvas op. */
.elementor .feature{margin-bottom:0}
.elementor .feature + .e-con.lead,
.elementor .feature + .elementor-element{margin-top:0}
/* 🛑 De witte strook kwam van de witruimte-tekstnodes TUSSEN de secties in de
   shortcode-output, niet van een marge. Dat was eerder met line-height:0 op de
   widget dichtgezet, maar line-height erft: de hele dienstpagina (kruimelpad,
   kicker, chips, knop) kreeg regelhoogte 0 en plakte op elkaar. Een flex-kolom
   negeert die tekstnodes zonder iets te erven. */
.elementor .elementor-widget-shortcode:has(.feature){margin-bottom:0}
.elementor .elementor-widget-shortcode:has(.feature) > .elementor-shortcode{display:flex;flex-direction:column}
/* GeneratePress geeft koppen een bovenmarge; in het grijze zijpaneel duwde dat
   "Plan in vertrouwen." 14px omlaag ten opzichte van de statische pagina. */
.elementor .svc-aside .panel h3{margin-top:0}

/* --- VACATURE-detail: fonts gelijk aan de rest van de site ----------------
   De koppen in het shortcode-blok (Profiel / Wat we bieden / ...) erfden het
   thema-font in plaats van Eurostile. */
.elementor .vac-detail h2,
.elementor .vac-detail h3,
.elementor .vac-apply-card h3,
.elementor .vac-chips span,
.elementor .vac-facts span,
.elementor .vac-facts strong{font-family:var(--head)}
.elementor .vac-detail h2{font-weight:700}
/* Meer lucht onder "Wat we bieden" en de andere lijsten. */
.elementor .vac-main .vac-offer{margin-bottom:2.6rem}
/* Lopende tekst tussen een kop en zijn bullets. */
.elementor .vac-main .vac-block-intro{margin:0 0 1.1rem}
.elementor .vac-main h2{margin-top:2.2rem}
.elementor .vac-main .vac-quote{margin-block:0 2.6rem}
.elementor .vac-main .vac-back{margin-top:2.6rem}

/* --- PROJECT-detail: alle categorieen in het grijze blok ------------------- */
.elementor .ph-card .kicker .cat{color:inherit}
.elementor .ph-card .kicker .bar{margin:0 .45rem;opacity:.55}

/* --- Lightbox: kruisje en pijltjes gecentreerd -----------------------------
   Het thema geeft elke <button> padding:10px 20px; in een ronde knop van 48px
   duwde dat het glyph uit het midden en .lb-close had geen centrering. */
.lightbox .lb-close,.lightbox .lb-nav{padding:0;display:grid;place-items:center;place-content:center;font-family:var(--head);line-height:1;text-align:center}
.lightbox .lb-close{font-size:1.6rem}
.lightbox .lb-nav{font-size:2.1rem}

/* --- outline-knop (zelfde vorm als "Offerte aanvragen" in de gele balk,
       maar bruikbaar buiten .lead) ------------------------------------------ */
.elementor .elementor-widget-button.btn-outline > .elementor-button,
.elementor .elementor-widget-button.btn-outline .elementor-button{background:var(--char);border:1px solid var(--char);color:#fff;padding:.85rem 2rem;font-family:var(--head);font-weight:700;font-size:1rem;text-transform:none;letter-spacing:0;white-space:nowrap;border-radius:0;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.elementor .elementor-widget-button.btn-outline:hover .elementor-button{background:var(--accent);border-color:var(--accent);color:var(--char);transform:translateY(-2px)}

/* --- DIENSTEN-overzicht: zelfde bovenmarge als statisch (2.5rem i.p.v. 6.5) -
   Lagere specificiteit dan Elementor's eigen padding-instelling, zodat het in
   de editor gewoon bij te stellen blijft. */
.band.cjx-diensten-1{--padding-top:2.5rem}

/* --- Nieuwe, nog lege pagina: kale post_content leesbaar onder de vaste
       header (body.cjdb-plain wordt gezet zolang er geen Elementor-inhoud is) */
body.cjdb-plain{padding-top:11rem}
body.cjdb-plain > p,
body.cjdb-plain > h1,body.cjdb-plain > h2,body.cjdb-plain > h3,
body.cjdb-plain > ul,body.cjdb-plain > ol,
body.cjdb-plain > .entry-content{max-width:52rem;margin:0 var(--gutter) 1.2rem}
body.cjdb-plain > .footer{margin-top:7rem}

/* --- VACATUREKAART: kleur en lijntje reageren allebei op de hele kaart ------
   De bridge liet de kleur al omslaan bij hover over de kaart, maar het
   onderlijntje pas bij hover over de link zelf. Nu gelijk, zoals bij de
   dienst- en projectkaarten (.dienst:hover .dienst-more:after). */
.elementor .vac-card:hover .elementor-widget-button .elementor-button:after{transform:scaleX(1);transform-origin:left}

/* --- Hamburger nam de halve headerbreedte in op <=991px --------------------
   GeneratePress heeft zelf een `button.menu-toggle{flex-grow:1;padding:0 20px;
   line-height:60px}` en die selector (0,0,1,1) wint van onze eigen
   `.menu-toggle` (0,0,1,0) uit site.css. Zelfde klassenaam, andere bedoeling.
   Hier winnen we terug binnen de header. */
@media (max-width:991px){
  .site-nav button.menu-toggle{flex:0 0 auto;width:3.2rem;height:1.7rem;padding:0;margin-left:auto;line-height:normal;text-align:initial;background-color:transparent}
}

/* ==========================================================================
   v86 (2026-07-21) — correcties na feedback
   ========================================================================== */

/* --- DIENSTEN-overzicht 1:1 met de statische kaarten ----------------------
   In de Loop Grid is de omschrijving een text-editor-WIDGET, geen <p>, dus
   `.svc-card p{...}` uit site.css raakte hem niet: verkeerde grootte, kleur,
   regelafstand en geen marge onder de tekst. En `.svc-card-link` is ook een
   widget (display:block, volle kolombreedte), waardoor het hover-lijntje over
   de hele kaart liep. */
.elementor .grid-diensten .svc-card > .elementor-widget-text-editor:not(.svc-card-link){
  color:rgba(64,64,65,.78);font-size:.94rem;line-height:1.55;margin:0 0 .9rem}
.elementor .svc-card > .elementor-widget.svc-card-link,
.elementor .vac-card > .elementor-widget.link,
.elementor .dienst > .elementor-widget.dienst-more{width:max-content;max-width:100%}

/* Hele dienstkaart klikbaar, zoals de statische <a class="svc-card">. */
.elementor .grid-diensten .svc-card{position:relative}
.elementor .svc-card > .elementor-widget-button.svc-card-overlay{position:absolute;inset:0;margin:0;z-index:4;width:auto}
.elementor .svc-card-overlay .elementor-button{position:absolute;inset:0;display:block;padding:0;background:transparent;border:0;font-size:0;line-height:0;box-shadow:none}
.elementor .svc-card-overlay .elementor-button:after{display:none}
.elementor .svc-card > .elementor-widget.svc-card-img,
.elementor .svc-card > .e-con.svc-card-img,
.elementor .svc-card > .elementor-widget-heading,
.elementor .svc-card > .elementor-widget.svc-card-link{position:relative;z-index:5}

/* --- Grijze blok op project- en vacaturepagina: kicker had zijn ruimte
       verloren. `.elementor .e-con > .elementor-widget{margin:0}` (0,0,3,0)
       won van `.page-hero--card .kicker{margin-bottom:.7rem}` (0,0,2,0),
       waardoor de kop tegen de kicker aan plakte. */
.elementor .ph-card > .elementor-widget.kicker{margin-bottom:.7rem}
.elementor .ph-card .ph-meta{line-height:1.35;margin-top:.15rem}
.elementor .ph-card > .elementor-widget.crumbs,
.elementor .ph-card > .e-con.crumbs{margin-bottom:1rem}

/* --- In de Elementor-editor: wijs aan waar de mijlpalen te bewerken zijn ---
   De slides komen uit de ACF-repeater op de pagina zelf, niet uit Elementor. */
.elementor-editor-active .story .elementor-widget-shortcode{position:relative}
.elementor-editor-active .story .elementor-widget-shortcode:before{
  content:"Mijlpalen bewerk je bij Pagina's > Over CJ de Boer > blok \201CMijlpalen\201D";
  position:absolute;top:0;left:0;right:0;z-index:9;
  background:#404041;color:#fff;font:700 12px/1.4 Arial,sans-serif;
  letter-spacing:.04em;padding:.5rem .8rem;text-align:center}

/* --- Header, topbar en footer stonden overal ruimer dan de statische site ---
   GeneratePress zet `body{font-size:17px;line-height:1.5}`. De bridge pinde dat
   al binnen `.elementor`, maar de site-header en -footer zijn thema-partials en
   staan daarbuiten: elke regel werd ~5px hoger (topbar 19 vs 14, menu 26 vs 20,
   footerlinks 40 vs 34). De statische <body> heeft 1rem / normal. */
body{font-size:1rem;line-height:normal}

/* --- HOME: introtekst onder de hero verdween op mobiel ---------------------
   In de statische site staat in de tweede kolom dezelfde alinea als in de
   eerste, en die dubbele wordt op smalle schermen verborgen met
   `.intro-cols p:last-child{display:none}`. In WP is elke alinea een eigen
   text-editor-widget, dus ELKE <p> is de laatste (en enige) child van zijn
   eigen wrapper: die regel raakte daardoor beide alinea's en de hele
   introtekst viel weg. In WP staat er bovendien echte, verschillende tekst in
   de tweede kolom, dus allebei tonen. */
@media (max-width:991px){
  .elementor .intro-cols p{display:block}
}