/*
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.0
*/

/* ==========================================================
   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:has(> .e-con-inner > .tm-seal-box),
.e-con:has(> .e-con-inner > .tm-stat-num),
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box):hover,
.e-con:has(> .e-con-inner > .tm-stat-num):hover,
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box + .tm-seal-box) > .e-con-inner,
.e-con:has(> .e-con-inner > .tm-usp + .tm-usp) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important}
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box + .tm-seal-box) > .e-con-inner{gap:20px!important}
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .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 */
@media(max-width:880px){
  .e-con:has(> .e-con-inner > .tm-usp) > .e-con-inner{flex-wrap:wrap!important}
  .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){.tm-usp{flex:1 1 100%!important;border-left:none!important;border-top:1px solid var(--tm-line)!important}.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:has(> .e-con-inner > .e-con > .e-con-inner > .tm-seal-box) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
#diensten .e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-stat-num) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-step-num) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:has(> .e-con-inner > .tm-step-num){flex:1 1 220px!important;max-width:none!important;width:auto!important}

@media(max-width:880px){
  #diensten .e-con:has(> .e-con-inner > .tm-seal-box),
  .e-con:has(> .e-con-inner > .tm-stat-num),
  .e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-cinfo-row),
.e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-form-dark) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;gap:28px!important}
.e-con:has(> .e-con-inner > .tm-cinfo-row){flex:1 1 340px!important}
.e-con:has(> .e-con-inner > .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(> .e-con-inner > .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}
.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:has(> .e-con-inner > .tm-cinfo-row),.e-con:has(> .e-con-inner > .tm-form-dark){flex:1 1 100%!important}
}

/*
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.1
*/

/* ==========================================================
   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:has(> .e-con-inner > .tm-seal-box),
.e-con:has(> .e-con-inner > .tm-stat-num),
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box):hover,
.e-con:has(> .e-con-inner > .tm-stat-num):hover,
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box + .tm-seal-box) > .e-con-inner,
.e-con:has(> .e-con-inner > .tm-usp + .tm-usp) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important}
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-seal-box + .tm-seal-box) > .e-con-inner{gap:20px!important}
.e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .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:has(> .e-con-inner > .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 */
@media(max-width:880px){
  .e-con:has(> .e-con-inner > .tm-usp) > .e-con-inner{flex-wrap:wrap!important}
  .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){.tm-usp{flex:1 1 100%!important;border-left:none!important;border-top:1px solid var(--tm-line)!important}.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:has(> .e-con-inner > .e-con > .e-con-inner > .tm-seal-box) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
#diensten .e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-stat-num) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-step-num) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important}
.e-con:has(> .e-con-inner > .tm-step-num){flex:1 1 220px!important;max-width:none!important;width:auto!important}

@media(max-width:880px){
  #diensten .e-con:has(> .e-con-inner > .tm-seal-box),
  .e-con:has(> .e-con-inner > .tm-stat-num),
  .e-con:has(> .e-con-inner > .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:has(> .e-con-inner > .tm-cinfo-row),
.e-con:has(> .e-con-inner > .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-inner > .e-con > .e-con-inner > .tm-form-dark) > .e-con-inner{
  flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;gap:28px!important}
.e-con:has(> .e-con-inner > .tm-cinfo-row){flex:1 1 340px!important}
.e-con:has(> .e-con-inner > .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(> .e-con-inner > .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}
.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:has(> .e-con-inner > .tm-cinfo-row),.e-con:has(> .e-con-inner > .tm-form-dark){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}

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