.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   Janssens BV — site-wide styling (Elementor kit)

   This kit owns the whole responsive layer. Do NOT duplicate any of
   it in a page's own Custom CSS: Elementor prefixes page CSS with
   [data-elementor-id="<id>"], which lands on the SAME specificity as
   the .elementor-kit-6s here and then wins on source order. The homepage
   carried exactly such a stale copy and silently overrode the rhythm
   and type scale on that page only.

   Structural facts driving the .elementor-kit-6s:
   1. Boxed containers put their PADDING on the inner .e-con-inner
      element, not on .e-con. Padding rules must target
      ".e-con-boxed > .e-con-inner".
   2. Boxed containers also wrap children in .e-con-inner, so
      "> .elementor-element" does NOT reach them. Use descendants.
   3. icon-box renders with no .elementor-widget-container.
   4. _css_classes set via the API often never reaches the rendered
      HTML. Target element IDs for anything that must work now.
   5. A container's background OVERLAY is a ::before pseudo-element,
      absolutely positioned with z-index auto. Any child that is not
      positioned paints BENEATH it. Never set a widget inside an
      overlaid container to position:static — its text disappears
      under the scrim.
   6. The mobile block forces every widget to width:100%. To exempt
      one, the .elementor-kit-6 must OUTRANK it, not just repeat it with
      !important — matching specificity loses the tie. An element-ID
      class alone (0,2,0) does NOT beat ".e-con-full.e-parent" (0,3,0);
      add ".e-con" to the compound.
   7. FULL containers have no .e-con-inner, so any rule written against
      .e-con-inner silently skips them. Vertical rhythm has to be
      written twice: once for boxed, once for full.
   ============================================================ */

/* ============================================================
   TYPE SCALE — one scale for the whole site so section headings
   cannot drift page to page.
   ============================================================ */
[data-elementor-type="wp-page"] h1.elementor-heading-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 64px !important; font-weight: 500 !important; line-height: 1.08 !important;
}
[data-elementor-type="wp-page"] h2.elementor-heading-title,
[data-elementor-type="wp-page"] h2.elementor-heading-title + div.elementor-heading-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 46px !important; font-weight: 500 !important; line-height: 1.14 !important;
}
[data-elementor-type="wp-page"] h3.elementor-heading-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 26px !important; font-weight: 500 !important; line-height: 1.2 !important;
}
.js-display em, .js-display i { font-style: italic; color: #C8102E; font-weight: 500; }

/* Hero media columns: 62/38 split per the design. .js-hero-media is the
   PRIMARY .elementor-kit-6 and is shared by every hero-pattern page site-wide
   (homepage included) — it is not homepage-specific. The four extra
   .elementor-element-* .elementor-kit-6s are belt-and-suspenders fallbacks for
   pages where _css_classes previously failed to reach the rendered
   HTML (see note 4); keep them in sync with .js-hero-media. */
.js-hero-media, .elementor-element-c0a36fe, .elementor-element-3f11fd8,
.elementor-element-0dacad1, .elementor-element-8a99ee5 {
  flex: 0 0 38% !important; max-width: 38% !important;
  align-self: stretch !important; min-height: 660px;
}
.e-con:has(> .js-hero-media), .e-con:has(> .elementor-element-c0a36fe),
.e-con:has(> .elementor-element-3f11fd8), .e-con:has(> .elementor-element-0dacad1),
.e-con:has(> .elementor-element-8a99ee5) { flex-wrap: nowrap !important; align-items: stretch !important; }
.e-con:has(> .js-hero-media) > :not(.js-hero-media),
.e-con:has(> .elementor-element-c0a36fe) > :not(.elementor-element-c0a36fe),
.e-con:has(> .elementor-element-3f11fd8) > :not(.elementor-element-3f11fd8),
.e-con:has(> .elementor-element-0dacad1) > :not(.elementor-element-0dacad1),
.e-con:has(> .elementor-element-8a99ee5) > :not(.elementor-element-8a99ee5) {
  flex: 1 1 62% !important; max-width: 62% !important; min-width: 0;
}

/* Homepage-only override: wider 68/32 split. Scoped strictly to the
   homepage's own hero-media element ID (e2fe916) — NOT the shared
   .js-hero-media class, which every hero-pattern page reuses (an
   earlier version of this override mistakenly used .js-hero-media
   itself and widened every page's hero, not just the homepage's).
   .elementor-element-{id} is unique per element, so this cannot leak
   to any other page no matter the cascade order. */
.elementor-element-e2fe916 {
  flex: 0 0 32% !important; max-width: 32% !important;
}
.e-con:has(> .elementor-element-e2fe916) > :not(.elementor-element-e2fe916) {
  flex: 1 1 68% !important; max-width: 68% !important; min-width: 0;
}
.elementor-element-c0a36fe > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.elementor-widget-template .elementor-heading-title,
.elementor-widget-template .elementor-widget-text-editor { text-align: left !important; }

/* ============================================================
   REALISATIE CARDS — used by template 1424 (Blok — Onze realisaties)
   and by the homepage's own inline copy of the same block.
   These class names live inside text-editor widgets, so they carry no
   Elementor styling of their own and none travels with the template.
   Kept in the kit (not in page CSS) so the block renders identically
   on every page that uses it.
   ============================================================ */
.js-tags { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.js-tags span {
  background: #C8102E; color: #FFFFFF; padding: 6px 13px;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.js-proj-title {
  font-family: "Cormorant Garamond", serif; font-size: 27px; font-weight: 500;
  line-height: 1.2; color: #FFFFFF; margin: 0 0 8px;
}
.js-proj-loc { font-family: Inter, sans-serif; font-size: 15px; color: #EDE7DC; margin: 0; }

/* Whole card clickable via one stretched link on the title — one link
   per card, wrapping real text, which is best for a11y and SEO.

   The widget must stay POSITIONED so its white text paints above the
   card's ::before gradient scrim (see note 5). That makes the widget,
   not the card, the containing block for the link's ::after — so
   inset:0 would only cover the bottom text strip. Instead the ::after
   overflows far past the widget in every direction and the card's
   overflow:hidden clips it neatly back to the card. */
.elementor-element-dd900e3, .elementor-element-912cabf, .elementor-element-d1138e5 {
  position: relative; overflow: hidden;
}
.js-proj { position: relative; z-index: 1; }
.js-proj-title a { color: inherit; text-decoration: none; }
.js-proj-title a::after {
  content: ""; position: absolute;
  top: -2000px; right: -2000px; bottom: -2000px; left: -2000px;
  z-index: 2;
}
.elementor-element-dd900e3:hover .js-proj-title,
.elementor-element-912cabf:hover .js-proj-title,
.elementor-element-d1138e5:hover .js-proj-title { text-decoration: underline; text-underline-offset: 4px; }

/* "— Alle projecten" links must not shrink onto a second line.
   The heading column beside them is greedy, so pin these by ID. */
.elementor-element-68cc03d, .elementor-element-1705449, .elementor-element-bedd51a,
.elementor-element-f68a1a0, .elementor-element-22b48e4 { flex-shrink: 0 !important; }
.elementor-element-68cc03d .elementor-heading-title,
.elementor-element-1705449 .elementor-heading-title,
.elementor-element-bedd51a .elementor-heading-title,
.elementor-element-f68a1a0 .elementor-heading-title,
.elementor-element-22b48e4 .elementor-heading-title { white-space: nowrap; }

/* --- Footer contact links (phone/email in the .js-f-contact block) -
   these had no color rule at all, so they rendered as default browser
   link blue on the dark (#1C1A18) footer instead of brand red. */
.js-f-contact a { color: #C8102E; text-decoration: none; }
.js-f-contact a:hover { text-decoration: underline; }

/* --- Contact Form 7 ------------------------------------------------ */
.wpcf7 p { margin: 0 0 26px; }
.wpcf7 label { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #9E9690; margin-bottom: 8px; font-family: Inter, sans-serif; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid #C9BFB2;
  border-radius: 0; padding: 10px 0; font-size: 17px; color: #1C1A18;
  box-shadow: none; font-family: Inter, sans-serif;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 0; border-bottom-color: #C8102E; }
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input[type=submit] {
  background: #1C1A18; color: #FFFFFF; border: 0; border-radius: 0; padding: 18px 38px;
  font-weight: 600; letter-spacing: .02em; cursor: pointer; font-family: Inter, sans-serif; font-size: 15px;
}
.wpcf7 input[type=submit]:hover { background: #C8102E; }

/* --- Accordion ----------------------------------------------------- */
.elementor-accordion .elementor-accordion-item { border: 0 !important; border-top: 1px solid #C9BFB2 !important; background: transparent; }
.elementor-accordion .elementor-accordion-item:last-child { border-bottom: 1px solid #C9BFB2 !important; }
.elementor-accordion .elementor-tab-title {
  background: transparent !important; border: 0 !important; padding: 26px 0 !important;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.elementor-accordion .elementor-accordion-icon { float: none; margin: 0; width: auto; order: 2; }
.elementor-accordion .elementor-tab-content { border: 0 !important; padding: 0 0 26px !important; background: transparent; }

/* ============================================================
   RESPONSIVE — page content only, never header/footer templates.
   ============================================================ */

/* --- TABLET (<= 1024px) -------------------------------------------- */
@media (max-width: 1024px) {
  [data-elementor-type="wp-page"] .e-con.e-flex,
  [data-elementor-type="wp-page"] .e-con-inner { flex-wrap: wrap !important; }

  [data-elementor-type="wp-page"] .e-con-boxed.e-parent > .e-con-inner {
    padding-left: 48px !important; padding-right: 48px !important;
  }
  [data-elementor-type="wp-page"] .e-con-full.e-parent { padding-left: 48px; padding-right: 48px; }
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.js-hero-media),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-0dacad1),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-3f11fd8),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-8a99ee5) {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* Hero stacks */
  .e-con:has(> .js-hero-media), .e-con:has(> .elementor-element-c0a36fe),
  .e-con:has(> .elementor-element-3f11fd8), .e-con:has(> .elementor-element-0dacad1),
  .e-con:has(> .elementor-element-8a99ee5) { flex-wrap: wrap !important; }
  .js-hero-media, .elementor-element-c0a36fe, .elementor-element-3f11fd8,
  .elementor-element-0dacad1, .elementor-element-8a99ee5 {
    flex: 0 0 100% !important; max-width: 100% !important; min-height: 420px;
  }
  .e-con:has(> .js-hero-media) > :not(.js-hero-media),
  .e-con:has(> .elementor-element-c0a36fe) > :not(.elementor-element-c0a36fe),
  .e-con:has(> .elementor-element-3f11fd8) > :not(.elementor-element-3f11fd8),
  .e-con:has(> .elementor-element-0dacad1) > :not(.elementor-element-0dacad1),
  .e-con:has(> .elementor-element-8a99ee5) > :not(.elementor-element-8a99ee5) {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
}

/* --- MOBILE (<= 767px) --------------------------------------------- */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] .e-con.e-flex,
  [data-elementor-type="wp-page"] .e-con-inner {
    flex-direction: column !important; flex-wrap: wrap !important;
    align-items: stretch !important; row-gap: 22px;
  }
  [data-elementor-type="wp-page"] .e-con.e-flex > .e-con,
  [data-elementor-type="wp-page"] .e-con.e-flex > .elementor-widget,
  [data-elementor-type="wp-page"] .e-con-inner > .e-con,
  [data-elementor-type="wp-page"] .e-con-inner > .elementor-widget {
    flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important;
  }

  /* Badges shrink-wrap to their label instead of stretching across the
     column. A flex item blockifies, so display:inline-block alone will
     not do it — align-self handles the cross axis, and the extra
     .js-badge class is what outranks the rule above (see note 6). */
  [data-elementor-type="wp-page"] .e-con.e-flex > .elementor-widget.js-badge,
  [data-elementor-type="wp-page"] .e-con-inner > .elementor-widget.js-badge {
    width: auto !important; max-width: max-content !important;
    align-self: flex-start !important;
  }

  /* ---- Vertical rhythm -------------------------------------------
     48px top and bottom on every section, so unrelated sections sit
     96px apart and a section header sits 48px above its own content.
     Written twice because full containers have no .e-con-inner
     (note 7). */
  [data-elementor-type="wp-page"] .e-con-boxed.e-parent > .e-con-inner {
    padding: 48px 24px !important;
  }
  [data-elementor-type="wp-page"] .e-con-full.e-parent {
    padding-left: 24px; padding-right: 24px;
    padding-top: 48px !important; padding-bottom: 48px !important;
  }

  /* The 24px gutter belongs to the outermost boxed level only. Nested
     boxed containers used to re-apply it on every level. */
  [data-elementor-type="wp-page"] .e-con-boxed.e-child > .e-con-inner {
    padding-left: 24px !important; padding-right: 24px !important;
  }
  [data-elementor-type="wp-page"] .e-con-boxed.e-child .e-con-boxed > .e-con-inner {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* Hero copy column. It keeps a desktop inset (163px left, 60px right)
     that leaves almost nothing on a phone — that is what squeezed the
     hero CTA to 262px while every other button was 505px. */
  [data-elementor-type="wp-page"] .e-con.e-con-boxed.elementor-element-80d970f {
    padding: 0 !important;
  }
  [data-elementor-type="wp-page"] .e-con.e-con-boxed.elementor-element-80d970f > .e-con-inner {
    padding: 48px 24px !important;
  }

  /* A section holding only a shared template, or a card grid belonging
     to the header above it, adds no rhythm of its own — otherwise the
     header's 48px and its own 48px stacked into a ~264px void. */
  [data-elementor-type="wp-page"] .e-con.e-parent:has(> .elementor-widget-template) > .e-con-inner,
  [data-elementor-type="wp-page"] .e-con.e-parent:has(> .e-con-inner > .elementor-widget-template) > .e-con-inner,
  [data-elementor-type="wp-page"] .e-con.e-con-full.e-parent:has(> .elementor-widget-template),
  [data-elementor-type="wp-page"] .e-con.e-parent.elementor-element-c56b01e,
  [data-elementor-type="wp-page"] .e-con.e-parent.elementor-element-36b4f77 {
    padding-top: 0 !important;
  }

  /* Nieuwbouw / Renovatie panels. The desktop 64px inset leaves only
     262px of copy on a 390px phone; 28px keeps the text comfortable and
     sits close to the 24px site gutter. */
  .elementor-element-cac3aa0, .elementor-element-017f304 {
    padding: 44px 28px !important;
    min-height: 480px !important;
  }

  /* Heroes stay edge-to-edge */
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.js-hero-media),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-0dacad1),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-3f11fd8),
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-8a99ee5) { padding: 0 !important; }
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.js-hero-media) > .e-con-inner,
  [data-elementor-type="wp-page"] .e-con.e-parent:has(.elementor-element-0dacad1) > .e-con-inner {
    padding-top: 0 !important; padding-bottom: 0 !important;
  }

  /* Mobile type scale (overrides the desktop scale above) */
  [data-elementor-type="wp-page"] h1.elementor-heading-title { font-size: 40px !important; line-height: 1.1 !important; }
  [data-elementor-type="wp-page"] h2.elementor-heading-title,
  [data-elementor-type="wp-page"] h2.elementor-heading-title + div.elementor-heading-title { font-size: 32px !important; line-height: 1.15 !important; }
  [data-elementor-type="wp-page"] h3.elementor-heading-title { font-size: 24px !important; line-height: 1.2 !important; }
  [data-elementor-type="wp-page"] .elementor-widget-text-editor { font-size: 16px !important; }

  /* Realisatie cards step down with the rest of the scale */
  .js-proj-title { font-size: 22px !important; }

  /* Full-width on a narrow screen, so wrapping here is fine */
  .elementor-element-68cc03d .elementor-heading-title,
  .elementor-element-1705449 .elementor-heading-title,
  .elementor-element-bedd51a .elementor-heading-title,
  .elementor-element-f68a1a0 .elementor-heading-title,
  .elementor-element-22b48e4 .elementor-heading-title { white-space: normal; }

  /* Buttons: full width and identical. Needs !important — Elementor's
     own inline-block sizing wins the unweighted declaration. */
  [data-elementor-type="wp-page"] .elementor-widget-button .elementor-button {
    width: 100% !important; display: flex !important;
    align-items: center; justify-content: center; text-align: center;
  }
  [data-elementor-type="wp-page"] .elementor-tabs-wrapper { flex-wrap: wrap !important; gap: 14px; }
  [data-elementor-type="wp-page"] .elementor-tab-title,
  [data-elementor-type="wp-page"] .elementor-tab-desktop-title { white-space: normal !important; }
  [data-elementor-type="wp-page"] .elementor-tab-mobile-title { display: none !important; }
}


/* ============================================================
   Realisatie-labels (Elementor v4 atomic blokken)

   De rode labels in .js-realisatie-tags waren per widget gestyled
   via een lokale s_<id>-klasse. Zodra je een label bewerkt,
   dupliceert of een nieuw label toevoegt, is die lokale stijl weg
   en valt het ontwerp uit. Deze regel stylet elk kind van de
   labelrij, dus labels blijven rood wat je er ook mee doet.
   ============================================================ */
.js-realisatie-tags > * {
  display: inline-block;
  background: #C8102E;
  color: #FFFFFF;
  padding: 6px 13px;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.js-realisatie-tags > * > p,
.js-realisatie-tags > * > span {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Zelfde vangnet voor de tekst-editor-variant van de labels
   (.js-tags in template 1424). De visuele editor gooit soms de
   <span> weg of vervangt hem door <strong>/<em>/<a>; dit stylet
   elk inline element in de labelrij, niet alleen <span>. */
.js-tags > * {
  background: #C8102E; color: #FFFFFF; padding: 6px 13px;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600;
  font-style: normal; text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em;
}/* End custom CSS */