/* Nubivio, core styles. Source of truth: Nubivio Brand Identity Manual + goedgekeurde Design-Canvas mockup. */

/* ---------- Fonts (self-hosted, /assets/fonts) ---------- */
@font-face { font-family:"Montserrat"; font-weight:400; font-display:swap; src:url("../fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family:"Montserrat"; font-weight:500; font-display:swap; src:url("../fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family:"Montserrat"; font-weight:600; font-display:swap; src:url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Montserrat"; font-weight:700; font-display:swap; src:url("../fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family:"Montserrat"; font-weight:800; font-display:swap; src:url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Nunito"; font-weight:700; font-display:swap; src:url("../fonts/Nunito-Bold.ttf") format("truetype"); }
@font-face { font-family:"Nunito"; font-weight:800; font-display:swap; src:url("../fonts/Nunito-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Nunito"; font-weight:900; font-display:swap; src:url("../fonts/Nunito-Black.ttf") format("truetype"); }

/* ---------- Design tokens (uit mockup) ---------- */
:root{
  --nub-primary:#044172; --nub-primary-80:#36678E; --nub-primary-50:#82A0B9; --nub-primary-30:#B4C6D6; --nub-primary-15:#D9E2EB;
  --nub-secondary-navy:#13274C; --nub-secondary-ink:#231F20; --nub-secondary-mist:#E6E7E8;
  --nub-logo-cyan:#22C9F5; --nub-logo-blue:#2292F3; --nub-logo-indigo:#224AF1;
  --nub-gradient-logo:linear-gradient(135deg,#22C9F5 0%,#2292F3 50%,#224AF1 100%);
  --nub-primary-darker:#033054; --nub-primary-deepest:#01233F;
  --nub-white:#FFFFFF; --nub-paper:#F4F6F8; --nub-gray-100:#E6E7E8; --nub-gray-200:#C9CBCF; --nub-gray-300:#A1A4AB; --nub-gray-400:#6F727A; --nub-gray-500:#4A4D55; --nub-gray-600:#2F3138; --nub-gray-700:#231F20; --nub-black:#0E0F11;
  --bg-1:#FFFFFF; --bg-2:#F4F6F8; --bg-3:#E6E7E8; --fg-1:#231F20; --fg-2:#4A4D55; --fg-3:#6F727A; --fg-muted:#A1A4AB;
  --border-1:#E6E7E8; --border-2:#C9CBCF; --accent:#044172; --accent-hover:#033054; --accent-press:#01233F;
  --dark-bg-1:#13274C; --dark-bg-2:#01233F; --dark-bg-3:#1B315C; --dark-fg-1:#FFFFFF; --dark-fg-2:#B4C6D6; --dark-fg-3:#82A0B9;
  --dark-border-1:rgba(255,255,255,0.10); --dark-border-2:rgba(255,255,255,0.18);
  --status-success:#1FB57A; --status-success-bg:#E5F7EE;
  --status-danger:#E04A4A; --status-danger-bg:#FBE5E5; --status-warning:#E8A33A; --status-warning-bg:#FCF1DD;
  --font-display:"Nunito","Montserrat",ui-sans-serif,sans-serif;
  --font-sans:"Montserrat",ui-sans-serif,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shadow-1:0 1px 2px rgba(4,65,114,0.06),0 1px 1px rgba(4,65,114,0.04);
  --shadow-2:0 4px 12px rgba(4,65,114,0.08),0 1px 2px rgba(4,65,114,0.04);
  --shadow-3:0 12px 28px rgba(4,65,114,0.14),0 2px 4px rgba(4,65,114,0.06);
  --shadow-4:0 24px 56px rgba(4,65,114,0.20),0 4px 8px rgba(4,65,114,0.08);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:var(--font-sans); color:var(--fg-1); background:var(--bg-1); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }
img{ max-width:100%; height:auto; }

/* ---------- Animations ---------- */
@keyframes nubUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
@keyframes nubFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes nubPulse{ 0%,100%{ opacity:.5;} 50%{ opacity:.85;} }
@keyframes nubPan{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes nubSpin{ to{ transform:rotate(360deg);} }
@keyframes nubDash{ to{ stroke-dashoffset:-120;} }

/* ---------- Layout / global rhythm ---------- */
.nub-main{ flex:1 1 0%; }
.nub-app{ position:relative; overflow-x:clip; min-height:100vh; display:flex; flex-direction:column; background:var(--bg-1); }
.nub-container{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* ---------- Header ---------- */
.nub-header{ position:sticky; top:0; z-index:100; height:72px;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border-1); }
.nub-header__inner{ position:relative; max-width:none; margin:0; padding:0 clamp(16px,4vw,40px); height:100%; display:flex; align-items:center; }
/* Logo op originele grootte, links van Home zodat er ruimte overblijft. */
.nub-header__logo{ display:flex; align-items:center; flex:0 0 auto; margin-left:12px; transition:transform 200ms var(--ease-out); }
.nub-header__logo:hover{ transform:translateY(-1px); }
.nub-header__logo img{ height:48px; width:auto; display:block; max-width:200px; object-fit:contain; object-position:left; }
/* Nav 'Home' lijnt uit met begin eyebrow-tekst.
   Op grote viewports gebruikt hij calc(50% - 600px + padding); op kleinere schuift hij minstens 210px in zodat het originele logo (160px breed vanaf 40px links) niet overlapt. */
.nub-nav{ position:absolute; top:50%; transform:translateY(-50%);
  left:max(250px, calc(50% - 600px + clamp(16px,4vw,40px)));
  display:flex; gap:28px; align-items:center; }
@media (max-width:900px){ .nub-nav{ position:static; transform:none; left:auto; } }
.nub-nav a{ font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--fg-1); padding:8px 0; border-bottom:2px solid transparent; white-space:nowrap; transition:color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.nub-nav a:hover{ color:var(--accent); transform:translateY(-1px); }
.nub-nav a.is-active{ font-weight:700; color:var(--accent); border-bottom-color:var(--accent); }
.nub-header__right{ position:absolute; top:50%; transform:translateY(-50%);
  right:max(clamp(16px,4vw,40px), calc(50% - 600px + clamp(16px,4vw,40px)));
  display:flex; align-items:center; gap:18px; }
@media (max-width:900px){ .nub-header__right{ position:static; transform:none; right:auto; } }
.nub-header__login{ font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--fg-1); transition:color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.nub-header__login:hover{ color:var(--accent); transform:translateY(-1px); }
.nub-cta{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:var(--r-md); border:none; cursor:pointer; background:var(--accent); color:#fff;
  box-shadow:0 4px 12px rgba(4,65,114,.18); white-space:nowrap; text-decoration:none; display:inline-block;
  transition:background 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.nub-cta:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 8px 22px rgba(4,65,114,.28); color:#fff; }
.nub-cta--gradient{ background:var(--nub-gradient-logo); box-shadow:0 8px 24px rgba(34,201,245,.32); }
.nub-cta--gradient:hover{ background:var(--nub-gradient-logo); box-shadow:0 12px 32px rgba(34,201,245,.45); transform:translateY(-1px); }
.nub-cta--outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.30); box-shadow:none; }
.nub-cta--outline:hover{ background:rgba(255,255,255,.06); border-color:#fff; color:#fff; transform:translateY(-1px); }
.nub-cta--secondary{ background:#fff; color:var(--accent); border:1.5px solid var(--border-2); box-shadow:none; }
.nub-cta--secondary:hover{ background:rgba(4,65,114,.04); border-color:var(--accent); transform:translateY(-1px); }

/* ---------- Universele bounce/hover voor knoppen en interactieve kaarten ---------- */
/* Elke <button> en anchor die niet nub-cta gebruikt (bijv. inline-styled hero buttons) krijgt toch een lift. */
.nub-main button,
.nub-main a[style*="border-radius"],
.nub-main a[href][class*="nub-cta"]{
	transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), filter 200ms var(--ease-out);
}
.nub-main button:hover,
.nub-main a[style*="border-radius"]:hover{
	transform:translateY(-1px);
	filter:brightness(1.03);
	box-shadow:0 10px 24px rgba(4,65,114,.18);
}
.nub-main button:active,
.nub-main a[style*="border-radius"]:active{ transform:translateY(0); filter:brightness(.98); }

/* Kaarten met inline card-styling (achtergrond wit + border-radius) krijgen lift on hover. */
.nub-main div[style*="border-radius: var(--r-lg)"],
.nub-main div[style*="border-radius:var(--r-lg)"]{
	transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.nub-main div[style*="border-radius: var(--r-lg)"]:hover,
.nub-main div[style*="border-radius:var(--r-lg)"]:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-3);
}

/* Mobile menu toggle */
.nub-hamburger{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--fg-1); padding:8px; display:none; }
.nub-drawer{ position:sticky; top:72px; z-index:99; background:#fff; border-bottom:1px solid var(--border-1);
  padding:12px clamp(16px,4vw,40px); display:none; flex-direction:column; gap:4px; box-shadow:var(--shadow-2); }
.nub-drawer.is-open{ display:flex; }
.nub-drawer a{ padding:12px 4px; font-weight:600; color:var(--fg-1); border-bottom:1px solid var(--border-1); }
.nub-drawer a:last-of-type{ border-bottom:none; }
.nub-drawer .nub-cta{ margin-top:8px; padding:14px; text-align:center; }

@media (max-width:900px){
  .nub-nav, .nub-header__right{ display:none; }
  .nub-hamburger{ display:flex; }
}

/* ---------- Footer ---------- */
.nub-footer{ background:var(--dark-bg-1); color:var(--dark-fg-2); padding:clamp(56px,7vh,80px) clamp(16px,4vw,40px) 32px; }
.nub-footer__grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:40px; }
.nub-footer h4{ font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.nub-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.nub-footer a{ color:var(--dark-fg-2); font-size:14px; }
.nub-footer a:hover{ color:#fff; }
.nub-footer__bottom{ max-width:1200px; margin:48px auto 0; padding-top:24px; border-top:1px solid var(--dark-border-1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:13px; color:var(--dark-fg-3); }
.nub-footer__social a{ width:36px; height:36px; border-radius:9px; border:1px solid var(--dark-border-1); display:inline-flex; align-items:center; justify-content:center; color:var(--dark-fg-2); }
.nub-footer__social a:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* ---------- Forms ---------- */
.nub-input, .nub-textarea, .nub-select{ width:100%; padding:14px 16px; border:1px solid var(--border-2); border-radius:var(--r-md);
  font-family:var(--font-sans); font-size:15px; color:var(--fg-1); background:#fff; outline:none;
  transition:border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.nub-input:focus, .nub-textarea:focus, .nub-select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(4,65,114,.12); }
.nub-textarea{ min-height:120px; resize:vertical; }
.nub-label{ display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin:0 0 6px; }
.nub-form-msg{ padding:14px 18px; border-radius:var(--r-md); font-size:14px; margin-top:16px; }
.nub-form-msg--ok{ background:var(--status-success-bg); color:var(--status-success); }
.nub-form-msg--err{ background:var(--status-danger-bg); color:var(--status-danger); }

/* ---------- Gravity Forms, aligned to Nubivio look ---------- */
/* Reset GF theme framework binnen onze form-card zodat het formulier oogt als de eigen inputs. */
.nub-contact-form .gform_wrapper,
.gform_wrapper.nub-gform{ font-family:var(--font-sans); color:var(--fg-1); }
.nub-contact-form .gform_wrapper form,
.gform_wrapper.nub-gform form{ display:flex; flex-direction:column; gap:14px; }
.nub-contact-form .gform_fields{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:12px 14px !important; list-style:none !important; padding:0 !important; margin:0 !important; }
.nub-contact-form .gform_fields > .gfield{ grid-column:span 1 !important; margin:0 !important; padding:0 !important; }
.nub-contact-form .gform_fields > .gfield--type-textarea{ grid-column:1 / -1 !important; }
@media (max-width:640px){
  .nub-contact-form .gform_fields{ grid-template-columns:1fr !important; }
}
/* Labels */
.nub-contact-form .gfield_label,
.gform_wrapper.nub-gform .gfield_label{ display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin:0 0 6px; }
.nub-contact-form .gfield_required,
.gform_wrapper.nub-gform .gfield_required{ color:var(--accent); margin-left:2px; }
/* Inputs */
.nub-contact-form .ginput_container input[type="text"],
.nub-contact-form .ginput_container input[type="email"],
.nub-contact-form .ginput_container input[type="tel"],
.nub-contact-form .ginput_container input[type="url"],
.nub-contact-form .ginput_container input[type="number"],
.nub-contact-form .ginput_container select,
.nub-contact-form .ginput_container textarea,
.gform_wrapper.nub-gform input[type="text"],
.gform_wrapper.nub-gform input[type="email"],
.gform_wrapper.nub-gform input[type="tel"],
.gform_wrapper.nub-gform select,
.gform_wrapper.nub-gform textarea{
  width:100%; padding:14px 16px; border:1px solid var(--border-2); border-radius:var(--r-md);
  font-family:var(--font-sans); font-size:15px; color:var(--fg-1); background:#fff; outline:none;
  transition:border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.nub-contact-form .ginput_container input:focus,
.nub-contact-form .ginput_container select:focus,
.nub-contact-form .ginput_container textarea:focus,
.gform_wrapper.nub-gform input:focus,
.gform_wrapper.nub-gform select:focus,
.gform_wrapper.nub-gform textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(4,65,114,.12); }
.nub-contact-form .ginput_container textarea,
.gform_wrapper.nub-gform textarea{ min-height:140px; resize:vertical; }
/* Verborgen velden hard verstoppen, GF laat ze soms als visibility:hidden zichtbaar staan */
.nub-contact-form .gfield--type-hidden,
.nub-contact-form .gfield_visibility_hidden,
.gform_wrapper.nub-gform .gfield--type-hidden,
.gform_wrapper.nub-gform .gfield_visibility_hidden{ display:none !important; }
/* Submit button = matches .nub-cta */
.nub-contact-form .gform_footer,
.gform_wrapper.nub-gform .gform_footer{ padding:0; margin:6px 0 0; }
.nub-contact-form .gform_footer input[type="submit"],
.nub-contact-form .gform_button,
.gform_wrapper.nub-gform .gform_footer input[type="submit"]{
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:14px 28px; border:none; border-radius:var(--r-md); cursor:pointer;
  background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(4,65,114,.22);
  transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}
.nub-contact-form .gform_footer input[type="submit"]:hover,
.gform_wrapper.nub-gform .gform_footer input[type="submit"]:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 10px 26px rgba(4,65,114,.28); }
/* Error/validation states */
.nub-contact-form .gfield_error input,
.nub-contact-form .gfield_error textarea,
.nub-contact-form .gfield_error select,
.gform_wrapper.nub-gform .gfield_error input,
.gform_wrapper.nub-gform .gfield_error textarea{ border-color:var(--status-danger); box-shadow:0 0 0 4px rgba(214,49,49,.10); }
.nub-contact-form .gfield_validation_message,
.nub-contact-form .validation_message,
.gform_wrapper.nub-gform .validation_message,
.gform_wrapper.nub-gform .gfield_validation_message{ font-size:12px; color:var(--status-danger); margin-top:4px; }
.nub-contact-form .gform_validation_errors,
.gform_wrapper.nub-gform .gform_validation_errors{ background:var(--status-danger-bg); border:1px solid var(--status-danger); border-radius:var(--r-md); padding:12px 14px; color:var(--status-danger); margin-bottom:14px; }
.nub-contact-form .gform_validation_errors > h2{ font-size:14px; margin:0 0 4px; color:var(--status-danger); }
/* Confirmation message */
.nub-contact-form .gform_confirmation_message,
.gform_wrapper.nub-gform .gform_confirmation_message{ background:var(--status-success-bg); border:1px solid var(--status-success); border-radius:var(--r-md); padding:16px 18px; color:var(--status-success); font-weight:600; }
/* Description + sublabels */
.nub-contact-form .gfield_description,
.gform_wrapper.nub-gform .gfield_description{ font-size:12px; color:var(--fg-3); margin-top:4px; }

/* Nieuwsbrief inline op donkere sectie (home audit CTA) */
.nub-newsletter-inline .gform_wrapper form{ display:flex; flex-direction:column; gap:10px; max-width:520px; margin:0 auto 14px; }
.nub-newsletter-inline .gform_fields{ display:flex; flex-direction:column; gap:10px; }
.nub-newsletter-inline .gfield_label{ color:rgba(255,255,255,.85); font-size:12px; font-weight:600; margin:0 0 4px; text-align:left; }
.nub-newsletter-inline .ginput_container input[type="text"],
.nub-newsletter-inline .ginput_container input[type="email"]{
  width:100%; padding:14px 18px; border-radius:var(--r-md);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff;
  font-family:inherit; font-size:15px; outline:none;
}
.nub-newsletter-inline .ginput_container input::placeholder{ color:rgba(255,255,255,.55); }
.nub-newsletter-inline .ginput_container input:focus{ border-color:var(--nub-logo-cyan); box-shadow:0 0 0 3px rgba(34,201,245,.22); }
.nub-newsletter-inline .gfield--type-hidden,
.nub-newsletter-inline .gfield_visibility_hidden{ display:none !important; }
.nub-newsletter-inline .gform_footer{ padding:0; margin:2px 0 0; text-align:center; }
.nub-newsletter-inline .gform_footer input[type="submit"]{
  font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 30px; border:none; border-radius:var(--r-md); cursor:pointer;
  background:var(--nub-gradient-logo); color:#fff; box-shadow:0 8px 24px rgba(34,201,245,.32);
}
.nub-newsletter-inline .gform_footer input[type="submit"]:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(34,201,245,.42); }
.nub-newsletter-inline .gform_confirmation_message{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); color:#fff; padding:14px 18px; border-radius:var(--r-md); text-align:center; }
.nub-newsletter-inline .gform_validation_errors{ background:rgba(255,255,255,.10); border:1px solid rgba(255,120,120,.6); color:#fff; padding:10px 14px; border-radius:var(--r-md); }
.nub-newsletter-inline .validation_message,
.nub-newsletter-inline .gfield_validation_message{ font-size:12px; color:#ffd0d0; margin-top:2px; }

/* ---------- Utility ---------- */
.nub-entrance{ animation:nubUp 400ms var(--ease-out) both; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Force hidden attribute to win over inline display styles (feedback fix) */
[hidden]{ display:none !important; }

/* ---------- Responsive helpers ---------- */
@media (max-width:1100px){ .nub-hide-md{ display:none !important; } }
@media (max-width:700px){ .nub-hide-sm{ display:none !important; } .nub-stack-sm{ flex-direction:column !important; } }

/* ---------- Compat: preserve arbitrary inline styles from templates ---------- */
/* Alle mockup-elementen dragen hun eigen inline styles zoals in de brand-mockup; deze stylesheet
   voegt alleen thema-brede tokens, layout en interactieve widget-styling toe. */

/* ============================================================
   v2.0.0, Widget-styles voor scan-ring, AI-picker, download,
   video-hero. Toegevoegd bij herbouw van interactieve widgets.
   ============================================================ */

/* ---------- Hero video (item 8) ---------- */
.nub-hero{ position:relative; overflow:hidden; }
.nub-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.nub-hero-video--tint{ opacity:.45; }
.nub-hero-content{ position:relative; z-index:1; }
.nub-hero-overlay{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(1,35,63,0.85), rgba(19,39,76,0.65)); z-index:0; pointer-events:none; }

/* ---------- Zelfscan-widget ---------- */
.nub-scan-panel{ background:#fff; border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-3); }
.nub-scan-eyebrow{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--nub-logo-cyan); }
.nub-scan-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,36px); line-height:1.15; color:var(--fg-1); margin:12px 0 10px; }
.nub-scan-lead{ font-size:17px; line-height:1.6; color:var(--fg-2); margin:0 0 24px; }
.nub-scan-fine{ text-align:center; font-size:12px; color:var(--fg-3); margin:14px 0 0; }
.nub-scan-start{ width:100%; padding:17px 28px; }
.nub-scan-progress-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.nub-scan-step{ font-size:13px; font-weight:600; color:var(--fg-3); }
.nub-scan-bar{ height:6px; background:var(--nub-primary-15); border-radius:var(--r-pill); overflow:hidden; margin-bottom:22px; }
.nub-scan-bar-fill{ height:100%; background:var(--nub-gradient-logo); transition:width .4s var(--ease-out); }
.nub-scan-question{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1.3; color:var(--fg-1); margin:0 0 22px; }
.nub-scan-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.nub-scan-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font-family:var(--font-sans); font-weight:600; font-size:15px; color:var(--fg-1); padding:16px 20px; border-radius:var(--r-md); border:1.5px solid var(--border-2); background:#fff; cursor:pointer; transition:all .15s var(--ease-out); }
.nub-scan-opt:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.nub-scan-opt-yes:hover{ border-color:var(--status-success); background:var(--status-success-bg); }
.nub-scan-opt-deels:hover{ border-color:var(--status-warning); background:var(--status-warning-bg); }
.nub-scan-opt-nee:hover{ border-color:var(--status-danger); background:var(--status-danger-bg); }
.nub-scan-mark{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex:0 0 auto; }
.nub-scan-mark-yes{ border:2px solid var(--status-success); color:var(--status-success); }
.nub-scan-mark-deels{ border:2px solid var(--status-warning); color:var(--status-warning); }
.nub-scan-mark-nee{ border:2px solid var(--status-danger); color:var(--status-danger); }
.nub-scan-restart{ display:inline-block; font-size:13px; font-weight:600; color:var(--fg-3); cursor:pointer; margin-top:8px; }
.nub-scan-restart:hover{ color:var(--accent); }

/* ---------- Zelfscan-result (score-ring) ---------- */
.nub-scan-result{ background:#fff; border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-3); }
.nub-scan-result-head{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-bottom:32px; }
.nub-scan-ring-wrap{ position:relative; flex:0 0 auto; width:200px; height:200px; }
.nub-scan-ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nub-scan-ring-num{ font-family:var(--font-display); font-weight:800; font-size:52px; line-height:1; color:var(--fg-1); }
.nub-scan-ring-max{ font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--fg-3); margin-top:2px; }
.nub-scan-result-copy{ flex:1 1 300px; }
.nub-scan-recs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-bottom:26px; }
.nub-rec-card{ background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--r-lg); padding:20px; }
.nub-rec-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--fg-1); margin-bottom:6px; }
.nub-rec-desc{ font-size:14px; line-height:1.5; color:var(--fg-2); margin-bottom:12px; }
.nub-rec-meta{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--accent); }
.nub-scan-email{ background:var(--bg-2); border-radius:var(--r-lg); padding:24px; }
.nub-scan-email-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.nub-scan-email-head strong{ font-family:var(--font-display); font-size:17px; color:var(--fg-1); }
.nub-scan-email-head span{ font-size:13px; color:var(--fg-3); }
.nub-scan-email-fields{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-bottom:14px; }
.nub-scan-email-fields input{ width:100%; padding:12px 14px; border:1px solid var(--border-2); border-radius:var(--r-md); font-family:var(--font-sans); font-size:14px; background:#fff; }
.nub-scan-consent{ display:flex; gap:8px; font-size:13px; color:var(--fg-2); margin-bottom:14px; align-items:flex-start; }
.nub-scan-consent input{ margin-top:3px; }
.nub-scan-link{ color:var(--accent); font-weight:700; }
.nub-scan-thanks{ text-align:center; color:var(--fg-1); }
.nub-scan-thanks h2{ font-family:var(--font-display); font-size:26px; color:var(--fg-1); margin:0 0 12px; }
.nub-scan-thanks p{ color:var(--fg-2); font-size:16px; line-height:1.6; margin:0; }
.nub-scan-thanks a, .nub-scan-thanks .nub-scan-link{ color:var(--accent); font-weight:700; text-decoration:none; }
.nub-scan-thanks a:hover, .nub-scan-thanks .nub-scan-link:hover{ text-decoration:underline; }

/* ---------- AI-picker (item 5) ---------- */
.nub-ai-group{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
/* Picker-buttons zitten binnen data-nub-widget="ai" en dragen data-nub-ai-val.
   Voorheen richtte deze selector op de wrapper (data-nub-ai-group), dat is de
   div die de knoppen bevat. Door op [data-nub-ai-val] te styleren pakken we de
   knoppen zelf en werken hover + active state op de juiste elementen. */
[data-nub-widget="ai"] [data-nub-ai-val]{ transition:all .15s var(--ease-out) !important; cursor:pointer; }
[data-nub-widget="ai"] [data-nub-ai-val]:hover{ border-color:var(--nub-logo-cyan) !important; color:#fff !important; background:rgba(34,201,245,0.10) !important; }
[data-nub-widget="ai"] [data-nub-ai-val].is-active{ background:var(--nub-logo-cyan) !important; border-color:var(--nub-logo-cyan) !important; color:#0e2e46 !important; font-weight:700 !important; box-shadow:0 6px 20px rgba(34,201,245,0.30) !important; }
.nub-ai-policy{ background:linear-gradient(160deg,var(--nub-secondary-navy),var(--nub-primary-deepest)); color:#fff; border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); margin-top:28px; }
.nub-ai-policy-title{ font-family:var(--font-display); font-weight:800; font-size:22px; margin-bottom:14px; color:#fff; }
.nub-ai-policy-list{ list-style:none; padding:0; margin:0 0 16px; }
.nub-ai-policy-list li{ padding:10px 0; border-bottom:1px solid var(--dark-border-1); font-size:15px; line-height:1.5; color:var(--dark-fg-2); }
.nub-ai-policy-list li:last-child{ border-bottom:none; }
.nub-ai-policy-note{ font-size:13px; color:var(--dark-fg-3); margin:0; }

/* ---------- Download-widget (kennisbank, item 6) ---------- */
[data-nub-dl-pick]{ transition:all .15s var(--ease-out); }
[data-nub-dl-pick]:hover{ border-color:var(--nub-logo-cyan) !important; color:#fff !important; background:rgba(34,201,245,.08) !important; }
[data-nub-dl-pick].is-active{ background:var(--nub-logo-cyan) !important; color:#0e2e46 !important; border-color:var(--nub-logo-cyan) !important; font-weight:700 !important; }
[data-nub-dl="pass"][data-copied="1"]::after{ content:" (gekopieerd)"; color:var(--nub-logo-cyan); font-size:12px; }

/* ---------- Kennisbank artikelen-grid (item 6, klikbaar) ---------- */
[data-nub-article]{ cursor:pointer; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
[data-nub-article]:hover{ transform:translateY(-3px); box-shadow:var(--shadow-3); }

/* ---------- Oplossingen (klikbare cards die naar contact leiden) ---------- */
[data-nub-solution]{ cursor:pointer; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
[data-nub-solution]:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--accent); }

/* ---------- Prefer-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- v2.3.1 fixes ---------- */

/* Hamburger drawer CTA, tekst wit ipv erven van .nub-drawer a. */
.nub-drawer .nub-cta,
.nub-drawer a.nub-cta{ color:#fff !important; }
.nub-drawer .nub-cta:hover,
.nub-drawer a.nub-cta:hover{ color:#fff !important; }

/* Kennisbank Download-gratis knop, display-font ipv system sans. */
[data-nub-dl-pick]{ font-family:var(--font-sans) !important; }

/* Header stat 'vast aanspreekpunt' verbergen op mobiel, te lang op smalle schermen. */
@media (max-width:640px){
  .nub-hero-stat--aanspreekpunt{ display:none !important; }
}

/* Contact-pagina, mobiel: formulier boven contactgegevens, alles onder elkaar. */
@media (max-width:820px){
  .nub-contact-grid{ grid-template-columns:1fr !important; gap:32px !important; }
  .nub-contact-grid .nub-contact-form{ order:1; }
  .nub-contact-grid .nub-contact-info{ order:2; }
}

/* ---------- v2.4.1 icon-card mobiel: icon links, tekst rechts ---------- */
/* Reference: uploaded IMG_7698.jpeg. Toegepast op de zelfscan "wat je krijgt"
   cards. Terug te rollen door dit blok te verwijderen \u00e9n eventueel de
   .nub-icon-card* classes uit page-zelfscan.php te strippen. */
@media (max-width:640px){
  .nub-icon-cards{ gap:14px !important; }
  .nub-icon-card{
    display:grid !important;
    grid-template-columns:64px 1fr !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:6px 24px !important; /* row / column, overriden inline gap:8px */
    padding:20px 18px !important;
    position:relative !important;
  }
  .nub-icon-card::after{
    content:"";
    position:absolute;
    top:20px; bottom:20px;
    left:calc(18px + 64px + 12px); /* padding-left + icon-w + halve gap */
    width:1px;
    background:var(--border-1);
    pointer-events:none;
  }
  .nub-icon-card__icon{
    width:64px !important;
    height:64px !important;
    border-radius:16px !important;
    margin-bottom:0 !important;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:center;
  }
  .nub-icon-card__icon svg{ width:30px !important; height:30px !important; }
  .nub-icon-card__title{
    grid-column:2;
    grid-row:1;
    font-size:17px !important;
    margin-bottom:0 !important;
    line-height:1.25 !important;
    text-align:left !important;
    align-self:end;
  }
  .nub-icon-card__body{
    grid-column:2;
    grid-row:2;
    font-size:14px !important;
    line-height:1.5 !important;
    text-align:left !important;
    align-self:start;
  }
}

/* ---------- v2.4.2 icon-card mobiel: site-brede standaard ---------- */
/* Automatische opt-in via body.nub-iconcards-global (in functions.php).
   Targets elke inline-styled card met een direct-child icon-vak
   (border-radius:12px + width:40-56px) gevolgd door tekst.
   Werkt op alle bestaande cards zonder templates te wijzigen.
   Rollback: verwijder dit blok OF zet .nub-iconcards-global body-class uit. */
@media (max-width:640px){

  /* Card zelf: 2-koloms grid met icon links */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]){
    display:grid !important;
    grid-template-columns:64px 1fr !important;
    align-items:center !important;
    gap:6px 24px !important; /* row / column, override inline gap */
    padding:20px 18px !important;
  }

  /* Icon-vak = eerste child met border-radius:12px */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > div[style*="border-radius: 12px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > div[style*="border-radius: 11px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > div[style*="border-radius: 14px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > div[style*="border-radius: 12px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > div[style*="border-radius: 11px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > div[style*="border-radius: 14px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > div[style*="border-radius: 12px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > div[style*="border-radius: 11px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > div[style*="border-radius: 14px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > div[style*="border-radius: 12px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > div[style*="border-radius: 11px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > div[style*="border-radius: 14px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > div[style*="border-radius: 11px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > div[style*="border-radius: 14px"]:first-child,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > div[style*="border-radius: 12px"]:first-child{
    width:64px !important;
    height:64px !important;
    border-radius:16px !important;
    margin-bottom:0 !important;
    grid-column:1 !important;
    grid-row:1 / -1 !important;
    align-self:center !important;
    position:relative !important;
    flex:0 0 auto !important;
  }

  /* Icon-SVG binnenin iets groter */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > div[style*="border-radius: 12px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > div[style*="border-radius: 11px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > div[style*="border-radius: 14px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > div[style*="border-radius: 12px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > div[style*="border-radius: 11px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > div[style*="border-radius: 14px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > div[style*="border-radius: 12px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > div[style*="border-radius: 11px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > div[style*="border-radius: 14px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > div[style*="border-radius: 12px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > div[style*="border-radius: 11px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > div[style*="border-radius: 14px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > div[style*="border-radius: 11px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > div[style*="border-radius: 14px"]:first-child > svg,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > div[style*="border-radius: 12px"]:first-child > svg{
    width:28px !important;
    height:28px !important;
  }

  /* Verticale scheidingslijn: op de card ::after, niet op het icon.
     Voorkomt overlap met titel-tekst. */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]){
    position:relative !important;
  }
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"])::after,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"])::after{
    content:"";
    position:absolute;
    top:20px; bottom:20px;
    left:calc(18px + 64px + 12px); /* padding-left + icon-w + halve gap(24) */
    width:1px;
    background:var(--border-1);
    pointer-events:none;
  }

  /* Alle overige direct-children in kolom 2 */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > *:not(:first-child),
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > *:not(:first-child){
    grid-column:2 !important;
    max-width:100% !important;
  }

  /* Titel iets rustiger op mobiel */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > h2,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > h3,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > h4,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > h4{
    font-size:16px !important;
    line-height:1.25 !important;
    margin:0 !important;
  }

  /* Body-p iets kleiner */
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 40"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 40"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 40"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 42"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 42"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 42"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 44"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 44"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 44"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 48"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 48"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 48"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 11px"][style*="width: 56"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 14px"][style*="width: 56"]) > p,
  body.nub-iconcards-global div[style*="border-radius: var(--r-lg)"]:has(> div[style*="border-radius: 12px"][style*="width: 56"]) > p{
    font-size:14px !important;
    line-height:1.5 !important;
    margin:0 !important;
  }

  /* Grid-container: kolommen ineenvloeien op smalle schermen zodat
     iedere card volle breedte krijgt */
  body.nub-iconcards-global [style*="grid-template-columns: repeat"]{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   FOOTER CONTACT - v2.8.1
   ============================================================ */
.nub-footer__contact{
  font-size:14px;
  color:var(--dark-fg-2);
  list-style:none;
  padding:0;
  margin:0;
}
.nub-footer__contact li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  line-height:1.4;
}
.nub-footer__contact a{
  color:var(--dark-fg-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nub-footer__contact a:hover,
.nub-footer__contact a:focus{
  color:var(--nub-logo-cyan, #22C9F5);
  border-bottom-color:currentColor;
}
.nub-footer__icon{
  flex-shrink:0;
  color:var(--dark-fg-3);
  opacity:.9;
}
.nub-footer__contact-note{
  color:var(--dark-fg-3);
  margin-top:4px;
  padding-left:26px; /* uitlijnen met tekst achter icoon */
  font-size:13px;
}


/* FAQ op single blog-posts: <dl><dt><strong>vraag</strong></dt><dd>antwoord</dd></dl>
   Statisch open. Elke dt+dd is samen 1 kaart: witte achtergrond, zachte schaduw,
   gradient-accent streepje links. Past bij Nubivio kaartenstijl.

   Structuur: <dl> is een gewone block-container. dt en dd zijn broers zonder
   ruimte ertussen (dt = kaart-header, dd = kaart-body). Ruimte tussen kaarten
   komt van margin-top op elke dt behalve de eerste. */

body.single-post article dl {
  margin:40px 0 8px;
  padding:0;
  border:0;
  list-style:none;
  display:block;
}

/* Vraag = kaart-header, naadloos boven op de dd eronder */
body.single-post article dl > dt {
  position:relative;
  margin:16px 0 0 0;
  padding:22px 26px 6px 30px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.35;
  color:var(--fg-1);
  background:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
body.single-post article dl > dt:first-child {
  margin-top:0;
}
body.single-post article dl > dt strong {
  font-weight:inherit;
}

/* Antwoord = kaart-body. Schaduw hoort bij dd en steekt onder de dt door,
   waardoor het optisch 1 kaart is. */
body.single-post article dl > dd {
  position:relative;
  margin:0;
  padding:8px 26px 24px 30px;
  font-family:var(--font-sans);
  font-size:15.5px;
  line-height:1.7;
  color:var(--fg-2);
  background:#fff;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--shadow-2);
}

/* Gradient-accent 4px links, apart op dt en dd zodat de streep doorloopt.
   Hoekjes matchen bij de kaartranden. */
body.single-post article dl > dt::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--nub-gradient-logo);
  border-top-left-radius:var(--r-lg);
}
body.single-post article dl > dd::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--nub-gradient-logo);
  border-bottom-left-radius:var(--r-lg);
}

/* Reset margin op eerste/laatste kind binnen dd */
body.single-post article dl > dd > :first-child { margin-top:0; }
body.single-post article dl > dd > :last-child { margin-bottom:0; }

/* Links binnen antwoorden */
body.single-post article dl > dd a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  transition:color .15s ease, text-decoration-thickness .15s ease;
}
body.single-post article dl > dd a:hover {
  color:var(--accent-hover);
  text-decoration-thickness:2px;
}

/* Mobiel: minder padding zodat vragen ademen */
@media (max-width:640px) {
  body.single-post article dl {
    margin:32px 0 8px;
  }
  body.single-post article dl > dt {
    margin-top:14px;
    padding:18px 20px 6px 24px;
    font-size:16.5px;
  }
  body.single-post article dl > dd {
    padding:8px 20px 20px 24px;
    font-size:15px;
  }
}