/*
Theme Name:   Hello Elementor Child
Theme URI:    https://techmich.digitalpha.be
Description:  Child theme van Hello Elementor — bevat de Techmich rebrand-CSS (dark theme + gradient huisstijl).
Author:       Techmich / DigitalPha
Template:     hello-elementor
Version:      1.0.19
*/

/* ==========================================================
   TECHMICH — REBRAND 2026 · COMPLETE CSS (ÉÉN BESTAND)
   ----------------------------------------------------------
   DIT IS DE ENIGE CSS DIE JE NODIG HEBT.
   Plaats: Elementor → ☰ → Site Settings → Custom CSS
   → SELECTEER ALLES WAT ER STAAT, VERWIJDER HET, EN PLAK DIT.
   Daarna: Elementor → Hulpmiddelen → Bestanden opnieuw genereren
   + harde refresh (Ctrl/Cmd + Shift + R).
   ========================================================== */

:root{
  --tm-black:#0F0C0E; --tm-black-2:#151114; --tm-surface:#1C1619; --tm-surface-2:#241C20;
  --tm-line:rgba(255,255,255,.08); --tm-white:#FFFFFF; --tm-text:#BCB2B7; --tm-text-dim:#8A7F85;
  --tm-ice:#5BC4DE; --tm-blue:#2F62BE; --tm-purple:#9C56AD; --tm-red:#E04038;
  --tm-gradient:linear-gradient(92deg,#52C2E8 0%,#2F62BE 30%,#8B4FD8 56%,#C2509E 78%,#E04038 100%);
  --tm-font-display:'Sora',sans-serif; --tm-font-body:'Manrope',sans-serif;
  --tm-radius:16px; --tm-ease:cubic-bezier(.22,.9,.3,1);
}
::selection{background:#8B4FD8;color:#fff}

/* ===== Gradient-tekst (wikkel woord in <span class="tm-grad-text">) ===== */
.tm-grad-text{background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ===== Eyebrow / sectie-label ===== */
.tm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--tm-font-display);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tm-text-dim)}
.tm-eyebrow::before{content:"✳";font-size:15px;line-height:1;background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== KNOPPEN (native Elementor Button-widget) =====
   Classes op de knop: "tm-btn tm-btn--grad"  of  "tm-btn tm-btn--ghost"  of  "tm-btn tm-btn--solid" */
.elementor-button.tm-btn,a.elementor-button.tm-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:12px;
  font-family:var(--tm-font-display)!important;font-weight:700!important;font-size:15.5px!important;
  line-height:1.1!important;min-height:0!important;
  padding:15px 30px!important;border-radius:16px!important;color:var(--tm-white)!important;
  text-decoration:none;background-image:none;transition:transform .35s,box-shadow .35s,background .35s}
.elementor-button.tm-btn .elementor-button-content-wrapper{line-height:1.1!important}
.elementor-button.tm-btn .elementor-button-text{color:var(--tm-white)!important}
.elementor-button.tm-btn--grad{border:1.5px solid transparent!important;
  background:linear-gradient(var(--tm-black),var(--tm-black)) padding-box,var(--tm-gradient) border-box!important}
.elementor-button.tm-btn--grad:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(139,79,216,.35),0 2px 12px rgba(224,64,56,.25)}
.elementor-button.tm-btn--ghost{background:transparent!important;border:1.5px solid rgba(255,255,255,.22)!important}
.elementor-button.tm-btn--ghost:hover{border-color:rgba(255,255,255,.5)!important;transform:translateY(-2px)}
.elementor-button.tm-btn--solid{border:none!important;background:var(--tm-gradient)!important;background-size:160% 100%!important}
.elementor-button.tm-btn--solid:hover{transform:translateY(-2px);background-position:80% 0;box-shadow:0 10px 36px rgba(224,64,56,.35)}

/* ===== HERO ===== */
.tm-hero{position:relative;overflow:hidden}
.tm-hero::before{content:"";position:absolute;top:-220px;right:-160px;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,98,190,.22),transparent 70%);pointer-events:none;z-index:0}
.tm-hero::after{content:"";position:absolute;bottom:-260px;left:-200px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,64,56,.12),transparent 70%);pointer-events:none;z-index:0}
.tm-hero > .elementor-container,.tm-hero > .e-con-inner{position:relative;z-index:1}
.tm-hero-badge{display:inline-flex!important;align-items:center;gap:10px;font-family:var(--tm-font-display);font-size:13px!important;font-weight:700!important;letter-spacing:.14em;text-transform:uppercase;color:var(--tm-white)!important;padding:9px 18px;border-radius:16px;border:1px solid transparent;background:linear-gradient(var(--tm-black-2),var(--tm-black-2)) padding-box,var(--tm-gradient) border-box}
.tm-hero-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tm-gradient);flex:none}
.tm-h1{font-family:var(--tm-font-display);font-weight:800;letter-spacing:-.02em;line-height:1.12!important;font-size:clamp(42px,5.6vw,72px)!important;color:var(--tm-white)}
.tm-lead{font-size:19px;line-height:1.75;max-width:520px;color:var(--tm-text)}
.tm-hero-media img{border-radius:16px;border:1px solid var(--tm-line);width:100%;min-height:540px;object-fit:cover;display:block}
@media(max-width:980px){.tm-hero-media img{min-height:340px}}

/* ===== Starburst Icon-Box (4 dienst-badges) — class: tm-seal-box ===== */
.tm-seal-box .elementor-icon-box-icon{margin-bottom:12px!important}
.tm-seal-box .elementor-icon{width:64px;height:64px}
.tm-seal-box .elementor-icon svg,.tm-seal-box .elementor-icon img{width:64px;height:64px;transition:transform .6s var(--tm-ease)}
.tm-seal-box:hover .elementor-icon svg,.tm-seal-box:hover .elementor-icon img{transform:rotate(30deg)}
.tm-seal-box .elementor-icon-box-title{font-family:var(--tm-font-display);font-size:13.5px!important;font-weight:600!important;line-height:1.35}
.tm-seal-box .elementor-icon-box-title a{color:var(--tm-white)!important}

/* ===== Drijvende stat-chip — class: tm-chip ===== */
.tm-chip{display:inline-flex!important;width:fit-content!important;max-width:max-content!important;flex:0 0 auto!important;align-items:center;gap:12px;background:rgba(22,17,20,.86);backdrop-filter:blur(8px);border:1px solid var(--tm-line);border-radius:16px;padding:13px 18px}
.tm-chip .tm-chip-num{font-family:var(--tm-font-display);font-weight:800;font-size:21px!important;line-height:1;margin:0!important;background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tm-chip .tm-chip-label{font-family:var(--tm-font-display);font-weight:700;font-size:14px;color:var(--tm-white);line-height:1.3}
.tm-chip .tm-chip-label small{display:block;font-family:var(--tm-font-body);font-weight:600;font-size:12px;color:var(--tm-text)}

/* ===== Kaart / paneel — class: tm-card (diensten, stappen) of tm-panel (contact) ===== */
.tm-card,.tm-panel{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:16px}
.tm-panel{padding:36px 32px}
.tm-card{padding:32px 28px;transition:transform .45s var(--tm-ease),border-color .45s,background .45s;height:100%}
.tm-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.16);background:var(--tm-surface-2)}

/* ===== Sectie-koppen & tekst ===== */
.tm-h2{font-family:var(--tm-font-display)!important;font-weight:800!important;letter-spacing:-.02em;line-height:1.12!important;font-size:clamp(32px,3.8vw,48px)!important;color:var(--tm-white)}
.tm-card-title{font-family:var(--tm-font-display)!important;font-weight:800!important;font-size:21px!important;color:var(--tm-white)!important;letter-spacing:-.01em}
.tm-card-text{font-size:15.5px!important;line-height:1.7!important;color:var(--tm-text)!important}
.tm-card .elementor-icon-box-description{color:var(--tm-text)!important;font-size:15.5px!important;line-height:1.7!important}
.tm-card .elementor-icon-box-title,.tm-card .elementor-icon-box-title a{font-family:var(--tm-font-display)!important;font-weight:800!important;font-size:21px!important;color:var(--tm-white)!important}

/* ===== USP-balk ===== */
.tm-usp-bar{border:1px solid var(--tm-line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.tm-usp .elementor-icon-box-title,.tm-usp .elementor-icon-box-title a{font-family:var(--tm-font-display)!important;font-weight:600!important;font-size:15px!important;color:var(--tm-white)!important}

/* ===== Stat-cijfer (over ons) — Heading met class: tm-stat-num ===== */
.tm-stat-num{font-family:var(--tm-font-display)!important;font-weight:800!important;letter-spacing:-.02em;line-height:1!important;font-size:46px!important;background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ===== Stap-nummer (werkwijze) — Heading met class: tm-step-num ===== */
.tm-step-num{font-family:var(--tm-font-display)!important;font-weight:800!important;letter-spacing:-.03em;line-height:1!important;font-size:64px!important;background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== CONTACTPAGINA ===== */
.tm-cinfo-row{display:flex!important;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--tm-line);border-radius:16px;background:var(--tm-black-2);transition:border-color .3s,transform .3s,background .3s;text-decoration:none}
.tm-cinfo-row:hover{border-color:rgba(255,255,255,.18);transform:translateX(4px);background:var(--tm-surface-2)}
.tm-hours-row{display:flex;justify-content:space-between;font-size:15px;padding:5px 0}
.tm-hours-row .day{color:var(--tm-text)}
.tm-hours-row .time{color:var(--tm-white);font-weight:600}
.tm-form-dark .elementor-field-group > label{font-family:var(--tm-font-display)!important;font-size:13.5px!important;font-weight:600!important;color:var(--tm-white)!important;margin-bottom:8px}
.tm-form-dark .elementor-field-group .elementor-field{font-family:var(--tm-font-body)!important;font-size:16px!important;color:var(--tm-white)!important;background:var(--tm-black-2)!important;border:1px solid var(--tm-line)!important;border-radius:12px!important;padding:14px 16px!important;height:auto!important;transition:border-color .3s,box-shadow .3s}
.tm-form-dark textarea.elementor-field{min-height:130px!important}
.tm-form-dark .elementor-field::placeholder{color:var(--tm-text-dim)!important}
.tm-form-dark .elementor-field:focus{outline:none!important;border-color:#8B4FD8!important;box-shadow:0 0 0 3px rgba(139,79,216,.25)!important}
.tm-form-dark select,.tm-form-dark select.elementor-field,.tm-form-dark .elementor-field-type-select select{
  background-color:var(--tm-black-2)!important;color:var(--tm-white)!important;border:1px solid var(--tm-line)!important;border-radius:12px!important;padding:14px 16px!important;
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BCB2B7' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important}
.tm-form-dark select option{background-color:#151114!important;color:#fff!important}
/* Verberg Elementor's eigen select-pijl (houd alleen onze subtiele) */
.tm-form-dark .elementor-select-wrapper::before,.tm-form-dark .elementor-select-wrapper::after{display:none!important;content:none!important}
.tm-form-dark .elementor-select-wrapper > i,.tm-form-dark .elementor-select-wrapper > svg,
.tm-form-dark .elementor-field-type-select > i,.tm-form-dark .elementor-field-type-select > svg,
.tm-form-dark .elementor-select-wrapper .e-font-icon-svg{display:none!important}
.tm-form-dark .elementor-field-type-checkbox label,.tm-form-dark .elementor-field-subgroup label{color:var(--tm-text)!important;font-weight:500!important}
.tm-form-dark .elementor-button[type=submit]{width:100%;justify-content:center;border:none!important;border-radius:16px!important;font-family:var(--tm-font-display)!important;font-weight:700!important;font-size:15.5px!important;color:#fff!important;background:var(--tm-gradient)!important;background-size:160% 100%!important;padding:16px 30px!important;transition:transform .35s,box-shadow .35s,background .35s}
.tm-form-dark .elementor-button[type=submit]:hover{transform:translateY(-2px);background-position:80% 0;box-shadow:0 10px 36px rgba(224,64,56,.35)}
.tm-trust-item .elementor-icon-box-title{font-family:var(--tm-font-display)!important;color:var(--tm-white)!important;font-size:17px!important;font-weight:700!important}
.tm-trust-item .elementor-icon-box-description{color:var(--tm-text)!important;font-size:14.5px!important}

/* ===== Logo in HTML-widget (indien gebruikt) ===== */
.tm-logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.tm-logo__mark{width:46px;height:46px;flex:none}
.tm-logo__name{font-family:var(--tm-font-display);font-weight:800;font-size:25px;color:var(--tm-white);line-height:1;letter-spacing:-.01em}
.tm-logo__sub{display:block;font-family:var(--tm-font-body);font-weight:600;font-size:10.5px;letter-spacing:.34em;color:var(--tm-text);margin-top:5px}

/* ==========================================================
   IMPORT-FIX — kaart/balk-opmaak terugzetten
   Bij JSON-import laat Elementor CSS-classes op CONTAINERS soms vallen
   (op widgets niet). Daarom stylen we de omhulsels hier op basis van
   wat ze BEVATTEN (.tm-seal-box / .tm-stat-num / .tm-step-num / .tm-usp),
   met :has(). Geen her-import of handmatige classes nodig.
   ========================================================== */

/* Diensten-kaarten (gescoped op #diensten, zodat de hero-badges niet meedoen),
   over-ons stat-kaarten en werkwijze-stappen (unieke classes = veilig) */
#diensten .e-con:is(:has(> .e-con-inner > .tm-seal-box),:has(> .tm-seal-box)),
.e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)),
.e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)){
  background:var(--tm-surface)!important;border:1px solid var(--tm-line)!important;
  border-radius:16px!important;padding:32px 28px!important;
  transition:transform .45s var(--tm-ease),border-color .45s,background .45s}
#diensten .e-con:is(:has(> .e-con-inner > .tm-seal-box),:has(> .tm-seal-box)):hover,
.e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)):hover,
.e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)):hover{
  transform:translateY(-8px);border-color:rgba(255,255,255,.16)!important;background:var(--tm-surface-2)!important}

/* Diensten-kaart: titel + omschrijving */
#diensten .tm-seal-box .elementor-icon-box-title,
#diensten .tm-seal-box .elementor-icon-box-title a{font-family:var(--tm-font-display)!important;font-weight:800!important;font-size:21px!important;color:var(--tm-white)!important}
#diensten .tm-seal-box .elementor-icon-box-description{color:var(--tm-text)!important;font-size:15.5px!important;line-height:1.7!important}

/* USP-balk (omhulsel met .tm-usp-items erin) */
.e-con:is(:has(> .e-con-inner > .tm-usp),:has(> .tm-usp)){
  border:1px solid var(--tm-line)!important;border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))!important;
  padding:8px 8px!important}

/* ==========================================================
   IMPORT-FIX 2 — typografie op BINNENSTE elementen + layout
   (Elementor zet tekstgrootte op .elementor-heading-title /
   .elementor-icon-box-title, niet op de wrapper-class)
   ========================================================== */
/* Hero-badge: klein, uppercase */
.tm-hero-badge .elementor-heading-title{font-size:13px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--tm-white)!important}
/* Koppen: juiste grootte + GEEN capitalize */
.tm-h1 .elementor-heading-title{font-size:clamp(42px,5.6vw,72px)!important;text-transform:none!important;line-height:1.12!important;font-weight:800!important}
.tm-h2 .elementor-heading-title{font-size:clamp(32px,3.8vw,48px)!important;text-transform:none!important;line-height:1.12!important;font-weight:800!important}
/* Icon-box titels — hero-badges klein, diensten-kaarten groter */
.tm-seal-box .elementor-icon-box-title,.tm-seal-box .elementor-icon-box-title a{font-size:13.5px!important;font-weight:600!important;text-transform:none!important;line-height:1.35!important;color:var(--tm-white)!important}
#diensten .tm-seal-box .elementor-icon-box-title,#diensten .tm-seal-box .elementor-icon-box-title a{font-size:21px!important;font-weight:800!important}
.tm-usp .elementor-icon-box-title,.tm-usp .elementor-icon-box-title a{font-size:15px!important;font-weight:600!important;text-transform:none!important;color:var(--tm-white)!important}
/* Icon-box icoon-grootte beteugelen */
.tm-seal-box .elementor-icon{font-size:34px!important}
.tm-seal-box .elementor-icon svg,.tm-seal-box .elementor-icon img{width:64px!important;height:64px!important}
.tm-usp .elementor-icon{font-size:20px!important}
.tm-usp .elementor-icon svg,.tm-usp .elementor-icon img{width:22px!important;height:22px!important}

/* Hero-badge-RIJ horizontaal (een rij heeft 2+ seals; een diensten-kaart maar 1) */
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner,
.e-con:is(:has(> .e-con-inner > .tm-usp + .tm-usp),:has(> .tm-usp + .tm-usp)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important}
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box{
  width:auto!important;flex:0 0 auto!important;max-width:130px!important;text-align:center!important}
.e-con:is(:has(> .e-con-inner > .tm-usp + .tm-usp),:has(> .tm-usp + .tm-usp)) > .e-con-inner > .tm-usp{width:auto!important;flex:1 1 0!important}

/* ==========================================================
   IMPORT-FIX 3 — knoppen (class op wrapper i.p.v. <a>) + seals 4-op-rij
   ========================================================== */
.tm-btn .elementor-button,.tm-btn a.elementor-button{
  display:inline-flex!important;align-items:center;justify-content:center;gap:12px;
  font-family:var(--tm-font-display)!important;font-weight:700!important;font-size:15.5px!important;
  line-height:1.1!important;min-height:0!important;padding:15px 30px!important;border-radius:16px!important;
  color:var(--tm-white)!important;background-image:none;transition:transform .35s,box-shadow .35s,background .35s}
.tm-btn--grad .elementor-button{border:1.5px solid transparent!important;
  background:linear-gradient(var(--tm-black),var(--tm-black)) padding-box,var(--tm-gradient) border-box!important}
.tm-btn--grad .elementor-button:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(139,79,216,.35),0 2px 12px rgba(224,64,56,.25)}
.tm-btn--ghost .elementor-button{background:transparent!important;border:1.5px solid rgba(255,255,255,.22)!important}
.tm-btn--ghost .elementor-button:hover{border-color:rgba(255,255,255,.5)!important;transform:translateY(-2px)}
.tm-btn--solid .elementor-button{border:none!important;background:var(--tm-gradient)!important;background-size:160% 100%!important}
.tm-btn--solid .elementor-button:hover{transform:translateY(-2px);background-position:80% 0;box-shadow:0 10px 36px rgba(224,64,56,.35)}
/* Seals 4 naast elkaar (smaller zodat ze niet wrappen) */
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner{gap:20px!important}
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box{max-width:108px!important}

/* ==========================================================
   IMPORT-FIX 4 — USP-balk native: gelijke kolommen + volle-hoogte
   streepjes + icoon en tekst verticaal gecentreerd (icon-boxes)
   ========================================================== */
/* De balk-container (herkend aan de tm-usp items erin) */
.e-con:is(:has(> .e-con-inner > .tm-usp),:has(> .tm-usp)){
  padding:0!important;border:1px solid var(--tm-line)!important;border-radius:16px!important;overflow:hidden!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))!important}
.e-con:is(:has(> .e-con-inner > .tm-usp),:has(> .tm-usp)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important}
/* Elke USP = gelijke kolom + volle-hoogte scheidingslijn */
.tm-usp{flex:1 1 0!important;width:auto!important;min-width:0!important;
  display:flex!important;align-items:stretch!important;
  padding:20px 22px!important;border-left:1px solid var(--tm-line)!important}
.tm-usp:first-child{border-left:none!important}
/* widget-container vult de hele kolomhoogte en centreert z'n inhoud verticaal */
.tm-usp > .elementor-widget-container{display:flex!important;flex-direction:column!important;justify-content:center!important;height:100%!important;width:100%!important}
/* Icon-box intern: icoon links, titel ernaast, mooi gecentreerd */
.tm-usp .elementor-icon-box-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;text-align:left!important}
.tm-usp .elementor-icon-box-icon{margin:0!important;flex:none!important}
.tm-usp .elementor-icon-box-content{flex:1 1 auto!important;min-width:0!important}
.tm-usp .elementor-icon-box-title{margin:0!important}
.tm-usp .elementor-icon-box-description{display:none!important}
/* Mobiel: 2 per rij, dan 1.
   LET OP: selectors moeten NET ZO SPECIFIEK zijn als de basisregels hierboven
   en in IMPORT-FIX 2 (.e-con:has(…) > .e-con-inner > .tm-usp), anders verliezen
   deze media-regels ondanks !important — dat was de bug in ≤v1.0.3. */
@media(max-width:880px){
  .e-con:is(:has(> .e-con-inner > .tm-usp),:has(> .tm-usp)) > .e-con-inner{flex-wrap:wrap!important}
  .e-con:is(:has(> .e-con-inner > .tm-usp + .tm-usp),:has(> .tm-usp + .tm-usp)) > .e-con-inner > .tm-usp,
  .tm-usp{flex:1 1 45%!important}
  .tm-usp:nth-child(3){border-left:none!important}
  .tm-usp:nth-child(n+3){border-top:1px solid var(--tm-line)!important}
}
@media(max-width:520px){
  .e-con:is(:has(> .e-con-inner > .tm-usp + .tm-usp),:has(> .tm-usp + .tm-usp)) > .e-con-inner > .tm-usp,
  .tm-usp{flex:1 1 100%!important;border-left:none!important;border-top:1px solid var(--tm-line)!important}
  .e-con:is(:has(> .e-con-inner > .tm-usp + .tm-usp),:has(> .tm-usp + .tm-usp)) > .e-con-inner > .tm-usp:first-child,
  .tm-usp:first-child{border-top:none!important}
}

/* ==========================================================
   IMPORT-FIX 5 — kaart-RIJEN horizontaal + kop/label-typografie
   ========================================================== */
/* Eyebrow klein + uppercase (binnenste element) */
.tm-eyebrow .elementor-heading-title{font-size:13px!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--tm-text-dim)!important}
/* Kaart-/stat-/stap-labels normale grootte, GEEN capitalize */
.tm-card-title .elementor-heading-title{font-size:15px!important;font-weight:600!important;text-transform:none!important;line-height:1.3!important;color:var(--tm-white)!important}
.tm-h1 .elementor-heading-title,.tm-h2 .elementor-heading-title,.tm-card-title .elementor-heading-title,
.tm-seal-box .elementor-icon-box-title{text-transform:none!important}

/* DIENSTEN — 4 kaarten naast elkaar */
#diensten .e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-seal-box),:has(> .e-con > .tm-seal-box)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
#diensten .e-con:is(:has(> .e-con-inner > .tm-seal-box),:has(> .tm-seal-box)){flex:1 1 200px!important;max-width:none!important;width:auto!important}
/* diensten-inhoud links uitlijnen (zoals het voorbeeld) */
#diensten .tm-seal-box .elementor-icon-box-wrapper,#diensten .tm-seal-box .elementor-icon-box-icon,#diensten .tm-seal-box .elementor-icon{text-align:left!important;justify-content:flex-start!important}

/* OVER ONS — stat-kaarten als 2×2 */
.e-con:has(> .e-con > .tm-stat-num):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-stat-num),:has(> .e-con > .tm-stat-num)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)){flex:1 1 40%!important;max-width:none!important;width:auto!important}

/* WERKWIJZE — 3 stappen naast elkaar */
.e-con:has(> .e-con > .tm-step-num):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-step-num),:has(> .e-con > .tm-step-num)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)){flex:1 1 220px!important;max-width:none!important;width:auto!important}

@media(max-width:880px){
  #diensten .e-con:is(:has(> .e-con-inner > .tm-seal-box),:has(> .tm-seal-box)),
  .e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)){flex:1 1 100%!important}
}

/* ==========================================================
   CONTACTPAGINA — import-robuust (panelen, 2-koloms, trust)
   ========================================================== */
/* Paneeltitel (~24px) */
.tm-h3 .elementor-heading-title,.tm-h3{font-family:var(--tm-font-display)!important;font-weight:800!important;font-size:24px!important;color:var(--tm-white)!important;text-transform:none!important;line-height:1.2!important}
/* Panelen herkennen aan inhoud (container-class tm-panel valt weg bij import) */
.e-con:is(:has(> .e-con-inner > .tm-cinfo-row),:has(> .tm-cinfo-row)),
.e-con:is(:has(> .e-con-inner > .tm-form-dark),:has(> .tm-form-dark)){
  background:var(--tm-surface)!important;border:1px solid var(--tm-line)!important;border-radius:16px!important;padding:36px 32px!important}
/* Body: de twee panelen naast elkaar */
.e-con:has(> .e-con > .tm-form-dark):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-form-dark),:has(> .e-con > .tm-form-dark)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;gap:28px!important}
.e-con:is(:has(> .e-con-inner > .tm-cinfo-row),:has(> .tm-cinfo-row)){flex:1 1 340px!important}
.e-con:is(:has(> .e-con-inner > .tm-form-dark),:has(> .tm-form-dark)){flex:1 1 420px!important}
/* Contact-rijen: icoon links + tekst, verticaal gecentreerd */
.tm-cinfo-row .elementor-icon-box-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;text-align:left!important}
.tm-cinfo-row .elementor-icon-box-icon{margin:0!important;flex:none!important}
.tm-cinfo-row .elementor-icon-box-title,.tm-cinfo-row .elementor-icon-box-title a{font-size:16px!important;font-weight:600!important;color:var(--tm-white)!important;margin:0!important;text-transform:none!important}
.tm-cinfo-row .elementor-icon-box-description{display:none!important}
/* Trust-strip: 3 items naast elkaar */
.e-con:has(> .tm-trust-item + .tm-trust-item):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .tm-trust-item + .tm-trust-item),:has(> .tm-trust-item + .tm-trust-item)) > .e-con-inner{flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important}
.tm-trust-item{flex:1 1 220px!important}
/* build-page wikkelt elk trust-item in een eigen kolom — die kolommen zelf ook */
.e-con:is(:has(> .e-con-inner > .tm-trust-item),:has(> .tm-trust-item)){
  flex:1 1 220px!important;max-width:none!important;width:auto!important;min-width:0!important}
.tm-trust-item .elementor-icon-box-wrapper{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:14px!important;text-align:left!important}
@media(max-width:880px){
  .e-con:is(:has(> .e-con-inner > .tm-cinfo-row),:has(> .tm-cinfo-row)),.e-con:is(:has(> .e-con-inner > .tm-form-dark),:has(> .tm-form-dark)){flex:1 1 100%!important}
  .e-con:is(:has(> .e-con-inner > .tm-trust-item),:has(> .tm-trust-item)){flex:1 1 100%!important}
}

/* ==========================================================
   FOOTER (native widgets)
   ========================================================== */
.tm-footer{background:var(--tm-black-2)!important;border-top:1px solid var(--tm-line)!important}
/* 4-koloms grid in exacte verhoudingen (zoals het ontwerp) */
.tm-footer-grid > .e-con-inner{display:grid!important;grid-template-columns:1.4fr 1fr 1fr 1.2fr!important;gap:48px!important;align-items:start!important}
@media(max-width:980px){.tm-footer-grid > .e-con-inner{grid-template-columns:1fr 1fr!important}}
@media(max-width:620px){.tm-footer-grid > .e-con-inner{grid-template-columns:1fr!important}}
/* kolomtitels */
.tm-footer-title .elementor-heading-title{font-family:var(--tm-font-display)!important;font-size:15px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:700!important;color:var(--tm-white)!important}
.tm-footer-about{font-size:15px!important;line-height:1.75!important;color:var(--tm-text)!important;max-width:300px}
/* link-lijsten */
.tm-footer-links .elementor-icon-list-text{color:var(--tm-text)!important;font-size:15px!important;transition:color .3s,padding-left .3s}
.tm-footer-links .elementor-icon-list-item:hover .elementor-icon-list-text{color:var(--tm-white)!important;padding-left:4px}
.tm-footer-links .elementor-icon-list-icon svg,.tm-footer-links .elementor-icon-list-icon i{fill:#8B4FD8!important;color:#8B4FD8!important}
/* contact-lijst */
.tm-footer-contact .elementor-icon-list-text,.tm-footer-contact .elementor-icon-list-text a{color:var(--tm-text)!important;font-size:15px!important}
.tm-footer-contact .elementor-icon-list-icon svg,.tm-footer-contact .elementor-icon-list-icon i{fill:#8B4FD8!important;color:#8B4FD8!important}
.tm-footer-contact .elementor-icon-list-icon{margin-top:3px!important}
/* onderbalk */
.tm-footer-bottom{border-top:1px solid var(--tm-line)!important;margin-top:48px!important;padding-top:26px!important}
.tm-footer-copy,.tm-footer-copy a{color:var(--tm-text-dim)!important;font-size:13.5px!important}
.tm-footer-copy a{text-decoration:underline}
/* gradient-lijn onderaan de footer */
.tm-footer-gradline{background:var(--tm-gradient)!important;min-height:3px!important;width:100%!important;padding:0!important}

/* ==========================================================
   FIX — hero-seal labels op ÉÉN regel ("Badkamers & Keukens")
   De vaste max-width brak de langste label af. Met nowrap +
   auto-breedte neemt elk item alleen de ruimte die het nodig
   heeft, dus de vier passen nog steeds naast elkaar.
   ========================================================== */
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box{
  max-width:none!important;width:auto!important;flex:0 0 auto!important}
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box
  .elementor-icon-box-title{white-space:nowrap!important}
/* Iets compactere maatvoering zodat de vier ook op smallere schermen
   op één rij blijven (getest: houdt tot ~490px kolombreedte).
   Wil je grotere zegels? Verwijder dit blokje van 3 regels. */
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner{gap:14px!important}
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) .elementor-icon-box-title{font-size:12.5px!important}
.e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) .elementor-icon img{width:56px!important;height:56px!important}
/* Smalle schermen: nette 2×2-grid, labels blijven op ÉÉN regel
   (klantfeedback aug 2026: "Badkamers & Keukens naast elkaar" +
   "icoontjes mobile view naast elkaar") */
@media(max-width:600px){
  .e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 8px!important;justify-items:center!important}
  .e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box{
    width:100%!important;max-width:none!important;text-align:center!important}
  .e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) > .e-con-inner > .tm-seal-box
    .elementor-icon-box-title{white-space:nowrap!important;font-size:11.5px!important}
  .e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) .elementor-icon-box-icon{text-align:center!important}
  .e-con:is(:has(> .e-con-inner > .tm-seal-box + .tm-seal-box),:has(> .tm-seal-box + .tm-seal-box)) .elementor-icon img{
    width:52px!important;height:52px!important;margin-inline:auto!important}
}

/* ==========================================================
   DIENST-DETAILPAGINA'S (airconditioning · badkamers & keukens ·
   loodgieterswerk · verwarming)
   Opbouw per pagina: hero · 6 wat-we-doen-kaarten · 3 stappen ·
   trust-strip · 5 FAQ-kaarten · andere diensten · CTA.
   Alle omhulsels worden via :has() herkend, dus dit werkt zowel
   bij JSON-import (container-classes vallen weg) als bij een
   MCP-build (classes blijven staan).
   ========================================================== */

/* --- Hero-gloed ook zonder .tm-hero op de container (JSON-import) --- */
.e-con:not(.e-child):has(.tm-h1){position:relative;overflow:hidden}
.e-con:not(.e-child):has(.tm-h1)::before{content:"";position:absolute;top:-220px;right:-160px;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,98,190,.22),transparent 70%);pointer-events:none;z-index:0}
.e-con:not(.e-child):has(.tm-h1)::after{content:"";position:absolute;bottom:-260px;left:-200px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,64,56,.12),transparent 70%);pointer-events:none;z-index:1}
/* de hero-sectie is een full-width container (géén .e-con-inner), dus alle
   directe kinderen boven de gloed tillen */
.e-con:not(.e-child):has(.tm-h1) > *{position:relative;z-index:2}

/* --- Kruimelpad boven de H1 --- */
.tm-crumb,.tm-crumb p{font-size:13.5px!important;line-height:1.5!important;color:var(--tm-text-dim)!important;margin:0!important}
.tm-crumb a{color:var(--tm-text-dim)!important;text-decoration:none;transition:color .3s}
.tm-crumb a:hover{color:var(--tm-white)!important}

/* --- Zegel als hero-beeld --- */
.tm-hero-seal{text-align:center}
.tm-hero-seal img{width:min(300px,74%)!important;height:auto!important;border:0!important;
  filter:drop-shadow(0 18px 60px rgba(139,79,216,.35));animation:tm-float 7s ease-in-out infinite}
@keyframes tm-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@media(max-width:980px){.tm-hero-seal img{width:190px!important}}

/* --- Vinkjeslijst in de hero --- */
.tm-checks .elementor-icon-list-item{align-items:flex-start!important}
.tm-checks .elementor-icon-list-text{color:var(--tm-text)!important;font-size:15.5px!important;line-height:1.6!important}
.tm-checks .elementor-icon-list-icon{margin-top:3px!important}
.tm-checks .elementor-icon-list-icon svg,.tm-checks .elementor-icon-list-icon i{fill:#8B4FD8!important;color:#8B4FD8!important;width:15px!important;height:15px!important}

/* --- 2. WAT WE VOOR JE DOEN — 6 kaarten (widget-class: tm-feat) --- */
.e-con:is(:has(> .e-con-inner > .tm-feat),:has(> .tm-feat)){
  background:var(--tm-surface)!important;border:1px solid var(--tm-line)!important;border-radius:16px!important;
  padding:30px 26px!important;transition:transform .45s var(--tm-ease),border-color .45s,background .45s}
.e-con:is(:has(> .e-con-inner > .tm-feat),:has(> .tm-feat)):hover{
  transform:translateY(-8px);border-color:rgba(255,255,255,.16)!important;background:var(--tm-surface-2)!important}
.e-con:has(> .e-con > .tm-feat):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-feat),:has(> .e-con > .tm-feat)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:is(:has(> .e-con-inner > .tm-feat),:has(> .tm-feat)){flex:1 1 350px!important;max-width:none!important;width:auto!important}
/* icoon in een tegel met gradient-rand */
.tm-feat .elementor-icon-box-wrapper{text-align:left!important}
.tm-feat .elementor-icon-box-icon{margin-bottom:16px!important;text-align:left!important}
.tm-feat .elementor-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:52px!important;height:52px!important;border-radius:14px!important;font-size:21px!important;color:#fff!important;
  border:1px solid transparent!important;
  background:linear-gradient(var(--tm-surface),var(--tm-surface)) padding-box,var(--tm-gradient) border-box!important}
.tm-feat .elementor-icon svg{width:21px!important;height:21px!important;fill:#fff!important}
.tm-feat .elementor-icon-box-title,.tm-feat .elementor-icon-box-title a{
  font-family:var(--tm-font-display)!important;font-weight:800!important;font-size:19px!important;
  color:var(--tm-white)!important;text-transform:none!important;line-height:1.3!important}
.tm-feat .elementor-icon-box-description{color:var(--tm-text)!important;font-size:15px!important;line-height:1.7!important}

/* --- 5. FAQ — 2 kaarten per rij (widget-class: tm-faq-q) --- */
.e-con:is(:has(> .e-con-inner > .tm-faq-q),:has(> .tm-faq-q)){
  background:var(--tm-surface)!important;border:1px solid var(--tm-line)!important;border-radius:16px!important;
  padding:28px 26px!important;transition:border-color .45s,background .45s}
.e-con:is(:has(> .e-con-inner > .tm-faq-q),:has(> .tm-faq-q)):hover{border-color:rgba(255,255,255,.16)!important;background:var(--tm-surface-2)!important}
.e-con:has(> .e-con > .tm-faq-q):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-faq-q),:has(> .e-con > .tm-faq-q)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:is(:has(> .e-con-inner > .tm-faq-q),:has(> .tm-faq-q)){flex:1 1 480px!important;max-width:none!important;width:auto!important}
.tm-faq-q,.tm-faq-q .elementor-heading-title{
  font-family:var(--tm-font-display)!important;font-weight:700!important;font-size:18px!important;
  color:var(--tm-white)!important;text-transform:none!important;line-height:1.4!important}

/* --- 6. ANDERE DIENSTEN — 3 klikbare kaarten (widget-class: tm-rel-ico) --- */
.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)){
  background:var(--tm-surface)!important;border:1px solid var(--tm-line)!important;border-radius:16px!important;
  padding:30px 26px!important;transition:transform .45s var(--tm-ease),border-color .45s,background .45s;cursor:pointer}
.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)):hover{
  transform:translateY(-8px);border-color:rgba(255,255,255,.16)!important;background:var(--tm-surface-2)!important}
.e-con:has(> .e-con > .tm-rel-ico):not(:has(> .e-con-inner)),
.e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-rel-ico),:has(> .e-con > .tm-rel-ico)) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)){flex:1 1 260px!important;max-width:none!important;width:auto!important}
.tm-rel-ico img{width:68px!important;height:68px!important;border:0!important;transition:transform .6s var(--tm-ease)}
.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)):hover .tm-rel-ico img{transform:rotate(30deg)}
.tm-rel-link{font-family:var(--tm-font-display);font-weight:700;font-size:14.5px;
  background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* --- Mobiel: alles onder elkaar --- */
@media(max-width:880px){
  .e-con:is(:has(> .e-con-inner > .tm-feat),:has(> .tm-feat)),
  .e-con:is(:has(> .e-con-inner > .tm-faq-q),:has(> .tm-faq-q)),
  .e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)){flex:1 1 100%!important}
}

/* ==========================================================
   MOBIEL — compactere secties (klantfeedback aug 2026:
   "veel scrollen, tussenstukken te groot")
   Desktop blijft ongewijzigd; alleen ≤767px worden de grote
   sectie-paddings (96–110px) teruggebracht. Secties worden
   herkend aan hun inhoud, dus dit werkt op alle pagina's.
   ========================================================== */
@media(max-width:767px){
  /* gewone content-secties (diensten, over ons, werkwijze, FAQ, CTA …) */
  .e-con:not(.e-child):has(.tm-h2){padding-top:32px!important;padding-bottom:32px!important}
  /* hero bovenaan de pagina */
  .e-con:not(.e-child):has(.tm-h1){padding-top:36px!important;padding-bottom:32px!important}
  /* USP-balk-sectie sluit aan op de hero erboven */
  .e-con:not(.e-child):has(.tm-usp):not(:has(.tm-h1)){padding-top:32px!important;padding-bottom:32px!important}
  #diensten{padding-top:32px!important}
  /* trust-strip (contact + dienstpagina's) */
  .e-con:not(.e-child):has(.tm-trust-item):not(:has(.tm-h2)){padding-top:32px!important;padding-bottom:32px!important}
  /* CTA-paneel binnenin: minder lucht op mobiel.
     Bewust .e-con-full: de boxed sectie-wrapper matcht hetzelfde
     inner-patroon en zou anders overal +48px krijgen. */
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)){
    padding-top:48px!important;padding-bottom:48px!important;padding-left:22px!important;padding-right:22px!important}
  /* koppen iets kleiner zodat er minder gescrold hoeft te worden */
  .tm-h1 .elementor-heading-title{font-size:clamp(34px,9vw,42px)!important}
  .tm-h2 .elementor-heading-title{font-size:clamp(27px,7vw,32px)!important}
  .tm-step-num{font-size:48px!important}
}

/* ==========================================================
   KEURMERKEN-STRIP — VCA · STEK · Techniek Nederland · Kiwa
   Gebruik: container met daarin Image-widgets (één per logo),
   zet class "tm-keurmerken" op de RIJ-container (of op elk
   image-widget "tm-keurmerk"). Logo's: PNG/SVG met transparante
   achtergrond, geüpload in de mediabibliotheek.
   ========================================================== */
.tm-keurmerken > .e-con-inner,.e-con:has(> .e-con-inner > .tm-keurmerk) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:14px 26px!important}
.tm-keurmerken img,.tm-keurmerk img{
  height:38px!important;width:auto!important;border:0!important;
  filter:grayscale(1) brightness(0) invert(1);opacity:.72;transition:opacity .3s,filter .3s}
.tm-keurmerken img:hover,.tm-keurmerk img:hover{opacity:1}
/* variant met kleur op wit schildje: zet daarnaast ook "tm-keurmerk--kleur" op het image-widget */
.tm-keurmerk--kleur img{filter:none!important;background:#fff;border-radius:10px;padding:6px 10px;opacity:1}
@media(max-width:600px){.tm-keurmerken img,.tm-keurmerk img{height:30px!important}}

/* ==========================================================
   WHATSAPP-KNOP — zwevend rechtsonder
   Gebruik: HTML-widget met de snippet uit elementor/whatsapp.html
   (in de footer-template, dan staat hij op elke pagina).
   ========================================================== */
.tm-wa{position:fixed;right:18px;bottom:18px;z-index:9999;width:56px;height:56px;
  border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--tm-ease),box-shadow .3s;
  text-decoration:none}
.tm-wa:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 40px rgba(37,211,102,.35)}
.tm-wa svg{width:30px;height:30px;fill:#fff;display:block}
@media(max-width:600px){.tm-wa{width:52px;height:52px;right:14px;bottom:14px}}

/* ==========================================================
   COMPLIANZ COOKIEBANNER — huisstijl
   ========================================================== */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  background:var(--tm-black-2)!important;border:1px solid var(--tm-line)!important;
  border-radius:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.55)!important;
  font-family:var(--tm-font-body)!important}
.cmplz-cookiebanner .cmplz-title{font-family:var(--tm-font-display)!important;font-weight:800!important;color:var(--tm-white)!important}
.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-body{color:var(--tm-text)!important;font-size:13.5px!important}
.cmplz-cookiebanner .cmplz-links a,.cmplz-cookiebanner .cmplz-link{color:var(--tm-text-dim)!important;text-decoration:underline}
.cmplz-cookiebanner .cmplz-links a:hover{color:var(--tm-white)!important}
.cmplz-cookiebanner .cmplz-category{background:var(--tm-surface)!important;border-radius:10px!important}
.cmplz-cookiebanner .cmplz-category *{color:var(--tm-text)!important}
.cmplz-cookiebanner .cmplz-btn{
  font-family:var(--tm-font-display)!important;font-weight:700!important;font-size:14px!important;
  border-radius:14px!important;padding:12px 18px!important;transition:transform .3s,box-shadow .3s!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{
  background:var(--tm-blue)!important;border:1.5px solid transparent!important;color:#fff!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(47,98,190,.4)}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
  background:transparent!important;border:1.5px solid rgba(255,255,255,.22)!important;color:#fff!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover{
  border-color:rgba(255,255,255,.5)!important}
/* de "Beheer toestemming"-heropen-knop */
#cmplz-manage-consent .cmplz-manage-consent{
  background:var(--tm-black-2)!important;border:1px solid var(--tm-line)!important;color:var(--tm-text)!important;
  font-family:var(--tm-font-display)!important;border-radius:12px 12px 0 0!important}

/* ==========================================================
   MOBIELE/TABLET HEADER — hamburger links · logo midden · tel rechts
   (klantfeedback aug 2026). Geldt zolang de hamburger actief is
   (Elementor dropdown-breakpoint = tablet, dus t/m 1024px).
   Element-ids uit header-template 39.
   ========================================================== */
@media(max-width:1024px){
  /* logo absoluut gecentreerd (transform wordt door Elementor overschreven,
     dus centreren via inset+margin) */
  .elementor-element-7bcfe9df{position:absolute!important;inset:0!important;margin:auto!important;
    width:fit-content!important;height:fit-content!important;z-index:1}
  /* menukolom over de volle breedte: hamburger links, telefoon rechts */
  .elementor-element-7a8390a8{width:100%!important;max-width:100%!important;flex:1 1 100%!important;
    flex-direction:row!important;justify-content:space-between!important;align-items:center!important}
  .elementor-element-26b9d052{width:auto!important;max-width:none!important;flex:0 0 auto!important}
  .elementor-element-26b9d052 .elementor-menu-toggle{margin-left:0!important}
  .elementor-element-74b69b51{width:auto!important;flex:0 0 auto!important}
}
/* heel smal: alleen het telefoon-icoontje (blijft een tel:-link) */
@media(max-width:440px){
  .elementor-element-74b69b51 .elementor-icon-list-text{display:none!important}
}
/* Dropdown-menu in huisstijl (was wit paneel met witte tekst = onleesbaar) */
.elementor-nav-menu--dropdown.elementor-nav-menu__container{
  background:var(--tm-black-2)!important;border-top:1px solid var(--tm-line)!important;
  border-bottom:1px solid var(--tm-line)!important;box-shadow:0 24px 48px rgba(0,0,0,.55)!important}
.elementor-nav-menu--dropdown .elementor-item{
  color:var(--tm-white)!important;background:transparent!important;
  font-family:var(--tm-font-display)!important;font-weight:600!important;padding:15px 24px!important}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
  color:var(--tm-white)!important;background:rgba(255,255,255,.06)!important}
.elementor-nav-menu--dropdown li{border-bottom:1px solid rgba(255,255,255,.05)}
.elementor-nav-menu--dropdown li:last-child{border-bottom:none}

/* ==========================================================
   MOBIEL-FIJNSLIJPEN (klantfeedback aug 2026, ronde 2)
   1. logo groter in de mobiele header
   2. hero/CTA-knoppen naast elkaar
   4. #diensten-kaarten compact: zegel naast de titel
   ========================================================== */
/* 1 — logo groter zolang de hamburger actief is */
@media(max-width:1024px){
  .elementor-element-3d73f9dd img{width:150px!important;max-width:150px!important;height:auto!important}
}
/* 2 — knoppenrijen horizontaal op mobiel (beide DOM-varianten:
   knoppen direct in de rij, of door build-page in eigen kolommen gewikkeld) */
@media(max-width:767px){
  .e-con:has(> .tm-btn + .tm-btn):not(:has(> .e-con-inner)),
  .e-con:has(> .e-con-inner > .tm-btn + .tm-btn) > .e-con-inner,
  .e-con:has(> .e-con > .tm-btn):has(> .e-con + .e-con):not(:has(> .e-con-inner)),
  .e-con:has(> .e-con-inner > .e-con > .tm-btn):has(> .e-con-inner > .e-con + .e-con) > .e-con-inner{
    flex-direction:row!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important}
  /* knop-wrapper-kolommen (alleen als de kolom énkel een knop bevat) niet oprekken */
  .e-con:has(> .tm-btn):not(:has(> .elementor-widget:not(.tm-btn))):not(:has(> .e-con)){
    width:auto!important;max-width:none!important;flex:0 0 auto!important}
  .tm-btn{width:auto!important;max-width:none!important}
  /* knoppen compacter zodat twee stuks naast elkaar passen op 375px */
  .tm-btn .elementor-button,.tm-btn a.elementor-button{padding:11px 12px!important;font-size:12.5px!important;gap:6px!important}
}
/* 4 — #diensten-kaarten (homepage): zegel links naast de tekst, compacter */
@media(max-width:600px){
  #diensten .e-con:is(:has(> .e-con-inner > .tm-seal-box),:has(> .tm-seal-box)){padding:18px 16px!important}
  #diensten .tm-seal-box .elementor-icon-box-wrapper{
    display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:14px!important;text-align:left!important}
  /* zegel optisch op één lijn met de titel */
  #diensten .tm-seal-box .elementor-icon-box-icon{margin-top:-6px!important}
  #diensten .tm-seal-box .elementor-icon-box-title{margin:0 0 8px!important}
  #diensten .tm-seal-box .elementor-icon-box-icon{margin:0!important;flex:none!important;text-align:left!important}
  #diensten .tm-seal-box .elementor-icon,#diensten .tm-seal-box .elementor-icon svg,
  #diensten .tm-seal-box .elementor-icon img{width:46px!important;height:46px!important}
  #diensten .tm-seal-box .elementor-icon-box-title,#diensten .tm-seal-box .elementor-icon-box-title a{font-size:17px!important}
  #diensten .tm-seal-box .elementor-icon-box-description{font-size:14px!important;line-height:1.55!important}
}

/* Stat-kaarten (10+/100+/4.9/24u): 2×2 en compact op mobiel
   (klantfeedback aug 2026, ronde 3) */
@media(max-width:600px){
  .e-con:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-stat-num),:has(> .e-con > .tm-stat-num)) > .e-con-inner,
  .e-con:has(> .e-con > .tm-stat-num):not(:has(> .e-con-inner)){gap:10px!important}
  .e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)){
    flex:1 1 42%!important;min-width:0!important;padding:16px 14px!important}
  .tm-stat-num,.tm-stat-num .elementor-heading-title{font-size:28px!important}
  .e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)) .tm-card-title .elementor-heading-title{
    font-size:13px!important;line-height:1.25!important}
  .e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)) .tm-card-text,
  .e-con:is(:has(> .e-con-inner > .tm-stat-num),:has(> .tm-stat-num)) .tm-card-text p{
    font-size:12px!important;line-height:1.45!important}
}

/* ==========================================================
   MOBIEL-FIJNSLIJPEN RONDE 4 (klantfeedback aug 2026)
   1. werkwijze-stappen compact: nummer naast de titel
   2. Trustindex/Google-reviews leesbaar op donker
   3. CTA-knoppen naast elkaar (paneel smaller + knoppen compacter)
   4. (ritme 28px zit in de bestaande mobiel-blokken)
   ========================================================== */
/* 1 — werkwijze-stappen */
@media(max-width:600px){
  .e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)){padding:18px 16px!important}
  .e-con:has(> .e-con-inner > .tm-step-num) > .e-con-inner,
  .e-con:has(> .tm-step-num):not(:has(> .e-con-inner)){
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;column-gap:14px!important;row-gap:8px!important}
  .e-con:has(> .e-con-inner > .tm-step-num) > .e-con-inner > .tm-step-num,
  .e-con:has(> .tm-step-num):not(:has(> .e-con-inner)) > .tm-step-num{grid-column:1!important;grid-row:1!important}
  .e-con:has(> .e-con-inner > .tm-step-num) > .e-con-inner > .tm-card-title,
  .e-con:has(> .tm-step-num):not(:has(> .e-con-inner)) > .tm-card-title{grid-column:2!important;grid-row:1!important}
  .e-con:has(> .e-con-inner > .tm-step-num) > .e-con-inner > .tm-card-text,
  .e-con:has(> .tm-step-num):not(:has(> .e-con-inner)) > .tm-card-text{grid-column:1 / -1!important;grid-row:2!important}
  .tm-step-num,.tm-step-num .elementor-heading-title{font-size:32px!important;line-height:1!important}
  .e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)) .tm-card-title .elementor-heading-title{
    font-size:16px!important;line-height:1.3!important}
  .e-con:is(:has(> .e-con-inner > .tm-step-num),:has(> .tm-step-num)) .tm-card-text{
    font-size:13.5px!important;line-height:1.55!important}
}
/* 2 — Trustindex (Google-reviews) op het donkere thema */
.ti-widget.ti-goog .ti-rating-text{color:var(--tm-text)!important}
.ti-widget.ti-goog .ti-rating-text strong.ti-rating,
.ti-widget.ti-goog .ti-rating-text .ti-rating{color:var(--tm-white)!important}
.ti-widget.ti-goog .ti-header,.ti-widget.ti-goog .ti-footer{color:var(--tm-text)!important}
.ti-widget.ti-goog .ti-controls .ti-next,.ti-widget.ti-goog .ti-controls .ti-prev{
  filter:invert(1) brightness(1.6)}
/* Google-reviews-sectie in het 28px-ritme (homepage: shortcode-widget a3292b5) */
@media(max-width:767px){
  .e-con:not(.e-child):has(.elementor-element-a3292b5),
  .e-con:not(.e-child):has(.ti-widget){padding-top:32px!important;padding-bottom:32px!important}
}
/* 3 — CTA-paneel: knoppen passen naast elkaar op mobiel */
@media(max-width:767px){
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)){padding-left:14px!important;padding-right:14px!important}
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .tm-btn .elementor-button,.e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .tm-btn a.elementor-button{
    padding:9px 10px!important;font-size:12px!important;gap:5px!important}
  /* Elementors standaard 10px zijpadding op de knoppenrij kost net de ruimte */
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .e-con:is(:has(> .e-con-inner > .tm-btn),:has(> .tm-btn)){padding-left:0!important;padding-right:0!important}
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)){padding-left:12px!important;padding-right:12px!important}
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .e-con:has(> .tm-btn + .tm-btn):not(:has(> .e-con-inner)),
  .e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .e-con:has(> .e-con-inner > .tm-btn + .tm-btn) > .e-con-inner{gap:6px!important}
}

/* ==========================================================
   MOBIEL RITME (klantfeedback aug 2026, ronde 5)
   Eén maat overal: 64px tussen blokken (32px sectiepadding per
   kant), 20px kantlijn. Elementors verborgen 10px-paddings op
   .e-con-inner en child-containers worden geneutraliseerd; de
   kaart-/paneelregels winnen door hogere specificiteit (:where
   houdt deze basisregels bewust op specificiteit ~0).
   ========================================================== */
@media(max-width:767px){
  [data-elementor-type="wp-page"] :where(.e-con.e-child){
    padding-top:0!important;padding-bottom:0!important;padding-left:0!important;padding-right:0!important}
  [data-elementor-type="wp-page"] :where(.e-con-inner){padding-top:0!important;padding-bottom:0!important}
  [data-elementor-type="wp-page"] .e-con:not(.e-child){padding-left:20px!important;padding-right:20px!important}
  /* in Elementor ingestelde sectie-marges (zoals 30px onder het Google-blok)
     mogen het 64px-ritme niet breken */
  [data-elementor-type="wp-page"] > .e-con{margin-top:0!important;margin-bottom:0!important}
  /* hero-foto: vaste hoogte, anders overflowt hij zijn kolom zonder de inner-paddings */
  .tm-hero-media img{height:340px!important;min-height:0!important;object-fit:cover!important;width:100%!important}
}

/* ==========================================================
   FIXES RONDE 6 (klantfeedback aug 2026) — alle schermformaten
   1. FAQ-titels stonden gecentreerd (Elementor centreert de
      widget zelf) → verspringende koppen. Nu vullen ze de kaart.
   2. "Andere diensten": link onderaan uitgelijnd.
   3. CTA-knoppen naast elkaar (kolommen 50%+gap pasten net niet
      → wrap; nu net zo breed als de knop).
   ========================================================== */
.e-con:is(:has(> .e-con-inner > .tm-faq-q),:has(> .tm-faq-q)) > .e-con-inner,
.e-con:has(> .tm-faq-q):not(:has(> .e-con-inner)){align-items:stretch!important}

.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)) > .e-con-inner,
.e-con:has(> .tm-rel-ico):not(:has(> .e-con-inner)){height:100%!important}
.e-con:is(:has(> .e-con-inner > .tm-rel-ico),:has(> .tm-rel-ico)) .elementor-widget:has(.tm-rel-link){margin-top:auto!important}

.e-con.e-child .e-con.e-child:is(:has(> .e-con-inner > .e-con > .e-con-inner > .tm-eyebrow),:has(> .e-con:not(.e-con-boxed) > .tm-eyebrow)) .e-con:is(:has(> .e-con-inner > .tm-btn),:has(> .tm-btn)){
  width:auto!important;max-width:none!important;flex:0 0 auto!important}

/* ==========================================================
   PROJECTEN (plugin "Techmich Projecten")
   Overzicht via [techmich_projecten] + projectpagina.
   Bewust eigen tm-proj-* klassen: deze markup komt uit de
   plugin, niet uit Elementor, dus geen :has()-trucs nodig.
   ========================================================== */
/* --- filterknoppen --- */
.tm-proj-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px}
.tm-proj-fbtn{font-family:var(--tm-font-display);font-weight:700;font-size:14px;color:var(--tm-text);
  background:transparent;border:1.5px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 18px;
  cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.tm-proj-fbtn:hover{color:var(--tm-white);border-color:rgba(255,255,255,.45)}
.tm-proj-fbtn.is-actief{color:var(--tm-white);border-color:transparent;
  background:linear-gradient(var(--tm-surface),var(--tm-surface)) padding-box,var(--tm-gradient) border-box;
  border:1.5px solid transparent}

/* --- raster --- */
.tm-proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.tm-proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tm-proj-grid{grid-template-columns:1fr;gap:16px}}
.tm-proj-card[hidden]{display:none!important}

/* --- kaart --- */
.tm-proj-card{display:flex;flex-direction:column;background:var(--tm-surface);border:1px solid var(--tm-line);
  border-radius:16px;overflow:hidden;text-decoration:none;height:100%;
  transition:transform .45s var(--tm-ease),border-color .45s,background .45s}
.tm-proj-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.16);background:var(--tm-surface-2)}
.tm-proj-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--tm-black-2)}
.tm-proj-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--tm-ease)}
.tm-proj-card:hover .tm-proj-media img{transform:scale(1.05)}
.tm-proj-media--leeg{display:flex;align-items:center;justify-content:center;height:100%;font-size:44px;
  background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.5}
.tm-proj-label{position:absolute;left:12px;top:12px;font-family:var(--tm-font-display);font-weight:700;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tm-white);
  background:rgba(15,12,14,.82);backdrop-filter:blur(6px);border:1px solid var(--tm-line);
  border-radius:10px;padding:6px 10px}
.tm-proj-body{display:flex;flex-direction:column;gap:8px;padding:22px 20px;flex:1 1 auto}
.tm-proj-titel{font-family:var(--tm-font-display);font-weight:800;font-size:19px;line-height:1.3;color:var(--tm-white)}
.tm-proj-meta{font-size:13px;color:var(--tm-text-dim)}
.tm-proj-tekst{font-size:14.5px;line-height:1.6;color:var(--tm-text)}
.tm-proj-link{margin-top:auto;padding-top:6px;font-family:var(--tm-font-display);font-weight:700;font-size:14.5px;
  background:var(--tm-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tm-proj-leeg{color:var(--tm-text);border:1px dashed rgba(255,255,255,.2);border-radius:16px;padding:24px;text-align:center}

/* --- projectpagina --- */
.tm-proj-single{background:var(--tm-black);color:var(--tm-text)}
.tm-proj-wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
.tm-proj-hero{padding:72px 0 28px;position:relative;overflow:hidden}
.tm-proj-hero::before{content:"";position:absolute;top:-220px;right:-160px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,98,190,.22),transparent 70%);pointer-events:none}
.tm-proj-hero > *{position:relative;z-index:1}
.tm-proj-hero .tm-crumb{margin-bottom:18px!important}
.tm-proj-hero .tm-eyebrow{margin-bottom:8px}
.tm-proj-hero .tm-h1{margin:0}
.tm-proj-meta--groot{font-size:15px;margin-top:12px}
.tm-proj-beeld{padding:8px 0 0}
.tm-proj-beeld img{width:100%;height:auto;border-radius:16px;border:1px solid var(--tm-line);display:block}
.tm-proj-inhoud{padding:36px 0 8px}
.tm-proj-tekstblok{max-width:820px;font-size:17px;line-height:1.75}
.tm-proj-tekstblok h2{font-family:var(--tm-font-display);font-weight:800;font-size:28px;color:var(--tm-white);margin:32px 0 12px}
.tm-proj-tekstblok h3{font-family:var(--tm-font-display);font-weight:700;font-size:21px;color:var(--tm-white);margin:26px 0 10px}
.tm-proj-tekstblok p{margin:0 0 18px}
.tm-proj-tekstblok img{border-radius:14px;border:1px solid var(--tm-line);height:auto}
.tm-proj-tekstblok .wp-block-gallery{gap:14px!important}
.tm-proj-tekstblok figure{margin:0 0 18px}
.tm-proj-tekstblok a{color:var(--tm-white);text-decoration:underline}
.tm-proj-cta{padding:44px 0}
.tm-proj-ctapaneel{border:1px solid var(--tm-blue);border-radius:16px;padding:56px 32px;text-align:center}
.tm-proj-ctapaneel .tm-h2{margin:10px 0 12px}
.tm-proj-ctapaneel p{max-width:560px;margin:0 auto 22px}
.tm-proj-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tm-proj-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--tm-font-display);font-weight:700;
  font-size:15px;color:var(--tm-white)!important;text-decoration:none!important;border-radius:16px;padding:14px 26px;
  transition:transform .35s,box-shadow .35s,background .35s}
.tm-proj-btn--solid{background:var(--tm-gradient);background-size:160% 100%;border:none}
.tm-proj-btn--solid:hover{transform:translateY(-2px);background-position:80% 0;box-shadow:0 10px 36px rgba(224,64,56,.35)}
.tm-proj-btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.22)}
.tm-proj-btn--ghost:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.tm-proj-meer{padding:20px 0 72px}
.tm-proj-meer .tm-h2{margin:10px 0 26px}
@media(max-width:767px){
  .tm-proj-hero{padding:36px 0 20px}
  .tm-proj-inhoud{padding:28px 0 4px}
  .tm-proj-tekstblok{font-size:16px}
  .tm-proj-cta{padding:32px 0}
  .tm-proj-ctapaneel{padding:36px 12px}
  /* twee knoppen moeten samen op 375px passen */
  .tm-proj-knoppen{gap:8px}
  .tm-proj-btn{padding:11px 12px;font-size:12.5px;gap:6px}
  .tm-proj-meer{padding:12px 0 40px}
  .tm-proj-filter{margin-bottom:20px}
}

/* ==========================================================
   KNOPPEN NAAST ELKAAR (klantfeedback aug 2026)
   build-page wikkelt elke knop in een eigen kolom van 50%;
   samen met de tussenruimte past dat net niet, dus wrapte de rij
   (o.a. de hero van de dienstpagina's). Kolommen die ALLEEN een
   knop bevatten krimpen nu naar de knopbreedte. De :not()-guards
   beschermen gewone kolommen zoals de hero-kolom met kop en tekst.
   ========================================================== */
.e-con:has(> .tm-btn):not(:has(> .e-con)):not(:has(> .elementor-widget:not(.tm-btn))),
.e-con:has(> .e-con-inner > .tm-btn):not(:has(> .e-con-inner > .e-con)):not(:has(> .e-con-inner > .elementor-widget:not(.tm-btn))){
  width:auto!important;max-width:none!important;flex:0 0 auto!important}

/* ==========================================================
   HERO DIENSTPAGINA'S, ALLES OP ÉÉN KANTLIJN
   De kolom stond op align-items:center, waardoor elk element
   naar zijn eigen inhoud kromp en gecentreerd werd: kruimelpad,
   kop, tekst, vinkjes en knoppen begonnen alle vier op een
   andere x (130/150/228/279). Nu stretch + de standaard 10px
   zijmarges van de knoppenrij en knopkolommen eraf.
   Herkend aan .tm-checks, dus de bewust gecentreerde hero's
   (o.a. /projecten/) blijven ongemoeid.
   ========================================================== */
.e-con:has(> .e-con-inner > .tm-checks) > .e-con-inner,
.e-con:has(> .tm-checks):not(:has(> .e-con-inner)){align-items:stretch!important}
.e-con:has(> .e-con-inner > .tm-checks) > .e-con-inner > .e-con,
.e-con:has(> .e-con-inner > .tm-checks) > .e-con-inner > .e-con > .e-con-inner > .e-con{
  padding-left:0!important;padding-right:0!important}

/* ==========================================================
   CONTACTPAGINA, ICOONGROOTTE
   De icon-box-widgets kwamen standaard op 50px binnen, terwijl
   de tekst 16px is. Teruggebracht naar de maatvoering die de
   rest van de site aanhoudt (USP-balk 22px, vinkjes 15px).
   ========================================================== */
.tm-cinfo-row .elementor-icon{font-size:22px!important;width:22px!important;height:22px!important}
.tm-cinfo-row .elementor-icon svg,.tm-cinfo-row .elementor-icon i{width:22px!important;height:22px!important}
.tm-trust-item .elementor-icon{font-size:24px!important;width:24px!important;height:24px!important}
.tm-trust-item .elementor-icon svg,.tm-trust-item .elementor-icon i{width:24px!important;height:24px!important}

/* ==========================================================
   HUISSTIJL-FONTS IN DE HEADER
   Het hoofdmenu stond nog op Varela Round en het telefoonnummer
   op Montserrat, allebei uit het oude thema. Nu op Sora/Manrope,
   zodat die twee lettertypefamilies helemaal niet meer geladen
   hoeven te worden (zie functions.php).
   ========================================================== */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu--dropdown .elementor-item{
  font-family:var(--tm-font-display)!important;font-weight:600!important}
.elementor-element-74b69b51 .elementor-icon-list-text,
.elementor-element-74b69b51 .elementor-icon-list-text a{
  font-family:var(--tm-font-display)!important;font-weight:600!important}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}