/*
 * Novatore – expertisepagina's (Theme Builder-template).
 * Dezelfde tokens als novatore-expertise-template.html.
 */

:root{
  --nv-teal:#00535B;
  --nv-teal-dark:#003F46;
  --nv-teal-mid:#356F78;
  --nv-teal-soft:#E6EFEF;
  --nv-cream:#FAF9F5;
  --nv-grey:#EEF0F0;
  --nv-text:#222;
  --nv-muted:#5F6869;
  --nv-line:#DCE2E2;
  --nv-wrap:1200px;
}

.nv-xhero,.nv-subnav,.nv-sec,.nv-xcta{
  font-family:Raleway,Helvetica,Arial,sans-serif;
  color:var(--nv-text);
  font-size:18px;
  line-height:1.7;
}
.nv-xhero img,.nv-xcta img{max-width:100%;height:auto;display:block}
.nv-x-empty{color:var(--nv-muted);font-size:15px}

/* Label boven een kop (zelfde als nov-kicker van de site, voor de dark vlakken) */
.nv-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--nv-teal);margin:0}
.nv-eyebrow .elementor-heading-title::before{content:"";width:18px;height:2px;background:currentColor}

/* Tekstblokken uit de velden */
.nv-text p{margin:0 0 20px}
.nv-text p:last-child{margin-bottom:0}
.nv-text ul{list-style:none;margin:0 0 20px;padding:0}
.nv-text li{position:relative;padding-left:28px;margin-bottom:12px}
.nv-text li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:8px;background:var(--nv-teal)}
.nv-text h3{font-size:22px;line-height:1.3;font-weight:700;color:var(--nv-teal);margin:28px 0 10px}

/* 1. Hero */
.nv-xhero{background:var(--nv-cream);border-bottom:1px solid var(--nv-line)}
.nv-xhero .nv-crumbs{font-size:13px;color:var(--nv-muted);margin:0 0 48px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nv-xhero .nv-crumbs a{color:var(--nv-muted);text-decoration:none}
.nv-xhero .nv-crumbs a:hover{color:var(--nv-teal)}
.nv-xhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.nv-xhero h1,.nv-xhero-title .elementor-heading-title{font-size:clamp(34px,4.2vw,56px)!important;line-height:1.08!important;font-weight:800!important;letter-spacing:-.025em;color:var(--nv-teal);margin:18px 0 22px;text-wrap:balance}
.nv-xhero-sub{font-size:21px;line-height:1.55;color:#33373D;margin:0 0 36px;max-width:520px}
.nv-xhero-sub p{margin:0;font-size:inherit;line-height:inherit;color:inherit;max-width:inherit}
.nv-xhero .elementor-widget-button{display:inline-block}
.nv-xhero-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nv-xhero-media{margin:0;position:relative}
.nv-xhero-media::after{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--nv-schaduw,var(--nv-teal))}
.nv-xhero-media .elementor-widget-image{position:relative;z-index:1;background:#fff;border:1px solid var(--nv-line);aspect-ratio:16/9;display:grid;place-items:center;padding:24px;overflow:hidden}
.nv-xhero-media .elementor-widget-image .elementor-widget-container{display:grid;place-items:center;width:100%;height:100%}
.nv-xhero-media img{max-height:100%;width:auto;object-fit:contain}

/* 2. Sticky subnavigatie (plakt onder de vaste site-header) */
.nv-subnav.nv-subnav{position:sticky;top:79px;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--nv-line)}
.nv-subnav-inner{display:flex;align-items:center;gap:4px;max-width:var(--nv-wrap);margin:0 auto;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.nv-subnav-inner::-webkit-scrollbar{display:none}
.nv-subnav a{flex-shrink:0;padding:18px 16px;font-size:14px;font-weight:600;color:var(--nv-muted);text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:.2s}
.nv-subnav a:hover,.nv-subnav a.is-active,.nv-subnav a:focus-visible{color:var(--nv-teal)}
.nv-subnav a:focus-visible{outline:2px solid var(--nv-teal);outline-offset:-2px}
.nv-subnav .elementor-icon-list-item{flex-shrink:0;list-style:none}
.nv-subnav .elementor-icon-list-icon{display:none}
.nv-subnav .elementor-icon-list-text{transition:inherit;color:inherit}
.nv-subnav .nv-subnav-cta{margin-left:auto;flex-shrink:0}
.nv-subnav .nv-subnav-cta .elementor-button{background:var(--nv-teal);border-color:var(--nv-teal);color:#fff}
.nv-subnav .nv-subnav-cta .elementor-button:hover,.nv-subnav .nv-subnav-cta .elementor-button:focus-visible{background:var(--nv-teal-dark);border-color:var(--nv-teal-dark);color:#fff}

/* 3. Secties */
.nv-sec{padding:72px 0;scroll-margin-top:60px}
.nv-sec--cream{background:var(--nv-cream)}
.nv-h2 .elementor-heading-title{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--nv-teal);margin:0}
.nv-split.nv-split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:80px;align-items:start}
.nv-split-head{align-self:start;position:static}
.nv-split-head .nv-h2 .elementor-heading-title{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;word-break:normal}

/* Kruimelpad */
.nv-crumbs{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.nv-xhero .nv-crumbs{margin:0 !important}
.nv-crumbs .elementor-widget-text-editor p,.nv-crumbs .elementor-heading-title{margin:0;font:inherit;color:var(--nv-muted)}

/* Introductie */
.nv-intro .nv-text{font-size:19px}
.nv-intro .nv-text p:first-child{font-size:21px;line-height:1.6;font-weight:500;color:#1b1b1b}

/* Grip + ervaring naast elkaar */
.nv-duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--nv-line)}
.nv-duo>div{padding:44px}
.nv-duo .nv-duo-h2 .elementor-heading-title{font-size:28px;line-height:1.2;font-weight:800;color:var(--nv-teal);margin:14px 0 24px}
.nv-grip{background:#fff}
.nv-erv{background:var(--nv-teal);color:#fff}
.nv-erv .nv-kicker,.nv-erv .nv-kicker .elementor-heading-title{color:#fff;opacity:.75}
.nv-erv .nv-duo-h2 .elementor-heading-title{color:#fff!important}
.nv-erv .nv-text{color:rgba(255,255,255,.88)}
.nv-erv .elementor-widget-text-editor,.nv-erv .elementor-widget-text-editor p{color:rgba(255,255,255,.88)!important}
.nv-erv .nv-text li::before{background:#fff}
.nv-erv .nv-text h3{color:#fff!important}

/* Aanpak */
.nv-steps{margin-top:16px;border-top:1px solid var(--nv-line)}
.nv-step.nv-step{display:grid!important;grid-template-columns:72px minmax(0,340px) minmax(0,1fr)!important;gap:32px!important;align-items:start;padding:32px 0!important;border-bottom:1px solid var(--nv-line)!important}
/* Stap-iconen: Elementor Icon-widget met klasse nv-step-icon. Vorm en kleur staan alleen hier. */
.nv-step-num{width:48px;height:48px;margin:8px 0 0;background-color:var(--e-global-color-primary,var(--nv-teal))}
.nv-step .nv-step-icon.elementor-widget-icon{display:flex;align-items:center;justify-content:center;line-height:0}
.nv-step .nv-step-icon > .elementor-widget-container,.nv-step .nv-step-icon .elementor-icon-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0}
.nv-step .nv-step-icon .elementor-icon{display:flex;align-items:center;justify-content:center;font-size:26px!important;line-height:1;color:#fff!important;fill:#fff!important;border:0!important;background:none!important;padding:0!important}
.nv-step .nv-step-icon .elementor-icon svg{width:26px!important;height:26px!important;fill:#fff!important;color:#fff}
.nv-step .nv-step-icon .elementor-icon svg [fill]:not([fill="none"]){fill:#fff!important}
.nv-step .nv-step-icon .elementor-icon svg [stroke]:not([stroke="none"]){stroke:#fff!important}
.nv-step .nv-step-icon .elementor-icon i{font-size:24px;color:#fff!important}
.nv-step .nv-step-h .elementor-heading-title{font-size:22px;line-height:1.3;font-weight:700;color:var(--nv-teal);margin:8px 0 0}
.nv-step .nv-text{font-size:17px}
.nv-aanpak-prose{margin-top:40px;columns:2;column-gap:56px;font-size:17px}
.nv-aanpak-prose p{break-inside:avoid}
.nv-aanpak-lead{max-width:760px;margin:16px 0 0;font-size:17px}

/* Andere expertises */
.nv-xintro-p{max-width:760px;margin:8px 0 0}
.nv-xgrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid var(--nv-line);border-left:1px solid var(--nv-line)}
.nv-xcard{position:relative;display:flex;flex-direction:column;min-height:240px;padding:28px 26px;border-right:1px solid var(--nv-line);border-bottom:1px solid var(--nv-line);text-decoration:none;color:inherit;background:#fff;transition:.25s}
.nv-xcard small{font-size:12px;font-weight:800;color:var(--nv-teal-mid);letter-spacing:.05em}
.nv-xgrid .nv-xcard h3{font-size:19px;line-height:1.3;color:var(--nv-teal);margin:12px 0 10px;min-height:2.6em}
.nv-xcard p{font-size:15px;line-height:1.55;color:var(--nv-muted);margin:0 0 20px}
.nv-xcard svg{margin-top:auto;width:22px;height:22px;stroke:var(--nv-teal);fill:none;stroke-width:2;transition:transform .2s}
.nv-xcard:hover,.nv-xcard:focus-visible{background:var(--nv-teal)}
.nv-xcard:hover small,.nv-xcard:hover h3,.nv-xcard:hover p,
.nv-xcard:focus-visible small,.nv-xcard:focus-visible h3,.nv-xcard:focus-visible p{color:#fff}
.nv-xcard:hover svg,.nv-xcard:focus-visible svg{stroke:#fff;transform:translateX(6px)}
.nv-xcard:focus-visible{outline:2px solid var(--nv-teal-dark);outline-offset:-2px}
.nv-xcard.is-current{background:var(--nv-teal-soft);pointer-events:none}
.nv-xcard.is-current svg{display:none}
.nv-xcard.is-current::after{content:"Je bekijkt nu";margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-teal)}

/* Contact */
.nv-xcta{background:var(--nv-teal-dark);color:#fff}
.nv-xcta .nv-xcta-h2 .elementor-heading-title{font-size:clamp(30px,3.6vw,46px);line-height:1.1;margin:12px 0 10px;color:#fff}
.nv-xcta .nv-kicker,.nv-xcta .nv-kicker .elementor-heading-title{color:#fff;opacity:.75}
.nv-xcta p{margin:0;opacity:.85;color:#fff}

/* ---------- Mobiel ---------- */
@media (max-width:1024px){
  .nv-split.nv-split{grid-template-columns:1fr;gap:24px}
  .nv-split-head{position:static}
  .nv-step.nv-step{grid-template-columns:56px minmax(0,1fr)!important;gap:8px 20px!important}
  .nv-step .nv-step-h,.nv-step .nv-text{grid-column:2}
  .nv-xgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nv-subnav.nv-subnav{top:71px;overflow:visible}
  .nv-xhero .e-con:not(.nv-xhero-copy):not(.nv-xhero-grid),.nv-xhero .e-con-inner{row-gap:0!important}
  .nv-xhero-copy{row-gap:8px!important}
  .nv-xhero .nv-xhero-grid{row-gap:32px!important}
  .nv-xhero-media{margin-top:8px}
  .nv-xhero-grid{grid-template-columns:1fr;gap:40px 0}
  .nv-xhero .nv-crumbs{margin:0 0 12px !important}
  .nv-xhero-title .elementor-heading-title{margin:0 0 10px}
  .nv-xhero h1{margin:12px 0 10px}
  .nv-xhero-sub{font-size:19px;margin:0 0 20px!important}
  .nv-subnav .e-con-inner{overflow:visible;min-width:0}
  .nv-subnav .nv-subnav-links{min-width:0;max-width:100%}
  .nv-subnav .elementor-icon-list-items{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    width:100%;
    margin:0;
  }
  .nv-subnav .elementor-icon-list-items::-webkit-scrollbar{display:none}
  .nv-subnav .elementor-icon-list-item{flex:0 0 auto!important;width:auto!important;margin:0!important}
  .nv-subnav .nv-subnav-links a{white-space:nowrap;padding:16px 18px;display:inline-flex}
  .nv-subnav .nv-subnav-cta{display:none}
  .nv-sec{padding:44px 0}
  .nv-intro .nv-text p:first-child{font-size:20px}
  .nv-duo{grid-template-columns:1fr}
  .nv-duo>div{padding:32px 24px}
  .nv-step.nv-step{grid-template-columns:48px minmax(0,1fr)!important;gap:10px 16px!important;padding:20px 0!important}
  .nv-step .nv-step-h,.nv-step .nv-text{grid-column:2}
  .nv-step .nv-step-h .elementor-heading-title{margin:0 0 6px}
  .nv-step-num{margin:0}
  .nv-aanpak-prose{columns:1}
  .nv-xgrid{grid-template-columns:repeat(2,1fr)}
  .nv-xcard{min-height:0;min-width:0;padding:18px 14px;overflow-wrap:break-word}
  .nv-xgrid .nv-xcard h3{font-size:13px;margin:8px 0 6px}
  .nv-xcard p{font-size:13px;line-height:1.5;margin:0 0 12px}
  .nv-xcard svg{width:18px;height:18px}
  .nv-xcard.is-current::after{font-size:10px}
  .nv-xcta,.nv-xcta .nv-xcta-row{text-align:left}
  .nv-xcta .nv-xcta-row{flex-direction:column;align-items:flex-start}
  .nv-xcta .nv-xcta-row>.e-con{width:100%!important}
  .nv-xcta .nv-xcta-row>.e-con:last-child{align-items:flex-start}
  .nv-xcta .nv-xcta-h2 .elementor-heading-title{margin:0 0 10px}
}

/* nv-subnav-top-fix: subnav sluit aan op de vaste header (80px desktop, 72px tablet/mobiel); expertise.js zet de exacte waarde */
@media (max-width:1024px){.nv-subnav.nv-subnav{top:71px}}