:root{
  --steel-950:#06141d; --steel-900:#0b1f2a; --steel-800:#123041; --steel-700:#17475e;
  --steel-100:#e7f0f4; --steel-050:#f5f9fb; --accent:#00a0c6; --accent-dark:#007b99;
  --green:#4f8a5b; --warning:#f4b23f; --ink:#12202a; --muted:#637987; --line:#dce8ed;
  --surface:#ffffff; --shadow:0 18px 50px rgba(6,20,29,.12); --radius:22px; --radius-sm:14px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--steel-050);line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none;color:var(--accent-dark)}
img,svg{max-width:100%;height:auto}.skip-link{position:absolute;left:-999px;top:8px;background:#fff;padding:.75rem 1rem;z-index:999}.skip-link:focus{left:8px}
.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}.narrow{width:min(860px,calc(100% - 32px));margin:0 auto}.section{padding:72px 0}.section-tight{padding:42px 0}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--accent-dark)}
h1,h2,h3{line-height:1.08;margin:0 0 16px}h1{font-size:clamp(2.25rem,5vw,5.15rem);letter-spacing:-.065em}h2{font-size:clamp(1.9rem,3.3vw,3.35rem);letter-spacing:-.04em}h3{font-size:1.28rem;letter-spacing:-.02em}p{margin:0 0 1rem}.lead{font-size:clamp(1.05rem,1.45vw,1.28rem);color:#dcebf0;max-width:760px}.muted{color:var(--muted)}.small{font-size:.88rem}.center{text-align:center}.grid{display:grid;gap:22px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.topbar{background:var(--steel-950);color:#d6e8ef;font-size:.88rem}.topbar .container{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:9px 0}.topbar a{color:#e8f5f8}.topbar .contact-row{display:flex;gap:16px;flex-wrap:wrap}.topbar .pill-mini{display:inline-flex;align-items:center;gap:6px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,232,237,.88)}.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em;color:var(--steel-950)}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--steel-900),var(--steel-700));display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.14)}.brand small{display:block;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-3px}.nav{display:flex;align-items:center;gap:4px}.nav a{font-weight:750;color:#20313b;padding:12px 10px;border-radius:12px}.nav a[aria-current="page"],.nav a:hover{background:var(--steel-100);color:var(--steel-950)}.header-actions{display:flex;align-items:center;gap:9px}.icon-button,.menu-button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;font-weight:800;color:var(--steel-900);display:inline-flex;align-items:center;gap:8px;cursor:pointer}.quote-count{min-width:22px;height:22px;border-radius:99px;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-size:.75rem;font-weight:900}.menu-button{display:none}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 12%,rgba(0,160,198,.28),transparent 26%),linear-gradient(135deg,var(--steel-950),var(--steel-800) 52%,#0d3346);color:#fff}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent)}.hero-inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center;padding:96px 0 88px}.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.hero-search{background:white;border-radius:20px;padding:10px;display:flex;gap:10px;box-shadow:0 22px 56px rgba(0,0,0,.24);margin-top:28px}.hero-search input{flex:1;border:0;padding:16px 18px;font-size:1.05rem;outline:0}.hero-search button{white-space:nowrap}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.stat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px}.stat b{font-size:1.45rem;display:block}.tray-visual{position:relative;min-height:360px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 28px 80px rgba(0,0,0,.24)}.tray-wire{position:absolute;left:9%;right:9%;height:12px;border-radius:999px;background:linear-gradient(90deg,#dbe7ec,#fff,#aac2cc);box-shadow:0 10px 22px rgba(0,0,0,.22)}.tray-wire:nth-child(1){top:26%;transform:skewY(-8deg)}.tray-wire:nth-child(2){top:38%;transform:skewY(-8deg)}.tray-wire:nth-child(3){top:50%;transform:skewY(-8deg)}.tray-wire:nth-child(4){top:62%;transform:skewY(-8deg)}.tray-wire:nth-child(5){top:74%;transform:skewY(-8deg)}.tray-rib{position:absolute;top:18%;bottom:14%;width:10px;border-radius:99px;background:linear-gradient(#fff,#b9cdd5);transform:rotate(18deg);box-shadow:0 8px 16px rgba(0,0,0,.15)}.tray-rib.r1{left:20%}.tray-rib.r2{left:38%}.tray-rib.r3{left:56%}.tray-rib.r4{left:74%}.floating-label{position:absolute;right:22px;bottom:22px;background:#fff;color:var(--steel-900);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);font-weight:850}.floating-label small{display:block;color:var(--muted);font-weight:650}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:15px;padding:13px 18px;font-weight:850;cursor:pointer;text-decoration:none}.btn-primary{background:var(--accent);color:white;box-shadow:0 12px 28px rgba(0,160,198,.25)}.btn-primary:hover{background:var(--accent-dark);color:white}.btn-dark{background:var(--steel-900);color:white}.btn-dark:hover{background:var(--steel-800);color:white}.btn-light{background:white;color:var(--steel-900)}.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--steel-900)}.btn-small{padding:9px 12px;border-radius:12px;font-size:.9rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 8px 28px rgba(6,20,29,.06)}.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);transition:.22s ease}.feature-icon{width:46px;height:46px;border-radius:14px;background:var(--steel-100);display:grid;place-items:center;color:var(--accent-dark);font-weight:900;margin-bottom:16px}.category-card{display:flex;flex-direction:column;min-height:235px}.category-card .meta{margin-top:auto;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-weight:800}.taglist{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.tag{font-size:.78rem;font-weight:800;color:var(--steel-700);background:var(--steel-100);border-radius:999px;padding:5px 9px}.dark-band{background:var(--steel-900);color:#fff}.dark-band .muted{color:#b8ccd5}.dark-band .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}.logos{display:flex;gap:12px;flex-wrap:wrap}.cert{border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:10px 12px;font-weight:900;background:rgba(255,255,255,.08)}
.page-hero{background:linear-gradient(135deg,var(--steel-900),var(--steel-700));color:#fff;padding:74px 0 58px}.breadcrumbs{font-size:.9rem;color:#b9d0da;margin-bottom:18px}.breadcrumbs a{color:#fff}.page-hero p{color:#dcebf0;max-width:780px}.split{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}.filters{position:sticky;top:96px}.filter-group{margin-bottom:18px}.filter-group label{display:block;font-weight:850;margin-bottom:7px}.input,select,textarea{width:100%;border:1px solid var(--line);background:white;border-radius:14px;padding:13px 14px;font:inherit;color:var(--ink)}.input:focus,select:focus,textarea:focus{outline:3px solid rgba(0,160,198,.18);border-color:var(--accent)}.product-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.product-card{background:white;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:286px}.product-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);transition:.2s}.product-code{display:inline-flex;width:max-content;background:var(--steel-900);color:white;border-radius:11px;padding:5px 9px;font-weight:900;letter-spacing:.02em}.product-visual{height:76px;border-radius:16px;background:linear-gradient(135deg,#f7fbfc,#dbe7ec);position:relative;overflow:hidden;border:1px solid var(--line)}.product-visual:before,.product-visual:after{content:"";position:absolute;left:12px;right:12px;height:7px;border-radius:99px;background:#a8bdc7;box-shadow:0 18px 0 #c4d4dc,0 36px 0 #b4c8d1;top:14px;transform:skewY(-7deg)}.product-visual:after{width:7px;height:58px;left:24%;right:auto;top:8px;transform:rotate(18deg);box-shadow:58px -1px 0 #c7d6dd,116px -2px 0 #adbfca,174px -1px 0 #d3dfe5}.product-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{background:var(--steel-050);border:1px solid var(--line);border-radius:12px;padding:8px}.metric small{display:block;color:var(--muted);font-weight:750}.empty-state{background:white;border:1px dashed var(--line);border-radius:20px;padding:28px;text-align:center}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px}.spec-table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden;border:1px solid var(--line)}.spec-table th,.spec-table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}.spec-table th{width:38%;background:var(--steel-050);font-weight:900}.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}.quote-list{display:grid;gap:12px}.quote-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.notice{border-left:4px solid var(--accent);background:#f1fbfd;border-radius:14px;padding:14px 16px}.warning{border-left-color:var(--warning);background:#fff7e7}.contact-card strong{display:block}.map-placeholder{min-height:260px;border-radius:22px;background:linear-gradient(135deg,#d9e8ee,#ffffff);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-weight:800}.timeline{border-left:3px solid var(--line);padding-left:22px}.timeline-item{position:relative;margin-bottom:24px}.timeline-item:before{content:"";position:absolute;left:-32px;top:4px;width:15px;height:15px;border-radius:99px;background:var(--accent);border:4px solid #fff;box-shadow:0 0 0 1px var(--line)}.download-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.video-card{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center}.play{width:70px;height:52px;border-radius:14px;background:var(--steel-900);color:#fff;display:grid;place-items:center;font-weight:900}
.search-overlay{position:fixed;inset:0;background:rgba(6,20,29,.72);backdrop-filter:blur(8px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:84px 16px}.search-overlay.is-open{display:flex}.search-panel{width:min(820px,100%);background:white;border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.35);overflow:hidden}.search-panel-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line)}.search-panel-header input{border:0;font-size:1.22rem;outline:0;flex:1}.search-results{max-height:min(62vh,620px);overflow:auto;padding:14px}.search-result{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:16px}.search-result:hover,.search-result[aria-selected="true"]{background:var(--steel-050)}.kbd{font-family:'Inter', ui-sans-serif, system-ui, sans-serif;border:1px solid var(--line);background:#fff;border-bottom-width:2px;border-radius:7px;padding:1px 6px;font-size:.8rem;color:var(--muted)}.quick-search-note{padding:0 18px 16px;color:var(--muted);font-size:.9rem}.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;background:var(--steel-950);color:white;border-radius:18px;padding:16px;box-shadow:var(--shadow);display:none}.cookie.is-visible{display:block}.cookie .container{display:flex;gap:14px;align-items:center;justify-content:space-between}.footer{background:var(--steel-950);color:#dcebf0;padding:54px 0 22px}.footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px}.footer h3{font-size:1rem}.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:28px;color:#a9c1cc;font-size:.9rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:980px){.nav{display:none;position:absolute;top:78px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:12px;flex-direction:column;align-items:stretch}.nav.is-open{display:flex}.menu-button{display:inline-flex}.hero-inner,.two,.three,.four,.split,.detail-layout,.footer-grid{grid-template-columns:1fr}.filters{position:static}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-inner{padding:72px 0}.tray-visual{min-height:260px}.topbar .container{align-items:flex-start;flex-direction:column}.cookie .container{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){.container,.narrow{width:min(100% - 22px,var(--container))}.header-inner{height:68px}.brand small{display:none}.icon-button span:not(.quote-count),.menu-button span{display:none}.hero-search{flex-direction:column}.hero-stats{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.product-toolbar{align-items:flex-start;flex-direction:column}.download-card{grid-template-columns:1fr}.footer-bottom{display:block}.search-result{grid-template-columns:1fr}.section{padding:50px 0}.page-hero{padding:54px 0 44px}}
.product-visual.has-photo{height:170px;background:#fff;display:block;padding:8px}
.product-visual.has-photo:before,.product-visual.has-photo:after{content:none;display:none}
.product-visual.has-photo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;border-radius:14px;transition:transform .35s ease}
.product-card:hover .product-visual.has-photo img{transform:scale(1.05)}
.product-visual-hero.has-photo{height:360px;background:linear-gradient(160deg,#f5f9fb,#dbe7ec)}
.product-visual-hero.has-photo img{object-fit:contain;padding:14px}
@media (max-width:720px){.product-visual-hero.has-photo{height:240px}}

/* ===== v2 polish: brand-aligned look inspired by silteckabelgoten.nl ===== */
:root{
  --brand:#0b3a4e;          /* deep Siltec steel-blue */
  --brand-700:#0f4c66;
  --brand-500:#1a6b8c;
  --accent-2:#ffb43a;        /* amber CTA accent */
  --ink-2:#0b1d28;
  --soft:#eef4f7;
  --hairline:#dde7ec;
  --radius-2:24px;
  --shadow-2:0 26px 60px rgba(11,58,78,.16);
  --shadow-card:0 8px 24px rgba(11,58,78,.08);
  --max:1240px;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
body{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:var(--ink-2);font-feature-settings:"ss01","cv11"}
.container{width:min(var(--max),calc(100% - 36px))}
h1,h2,h3{letter-spacing:-.02em}
h1{font-weight:900;letter-spacing:-.035em}
h2{font-weight:850}
.eyebrow{color:var(--brand-500);letter-spacing:.18em}

/* Top utility bar */
.topbar{background:var(--brand);color:#cfe1ea;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar a{color:#fff}
.topbar .pill-mini{opacity:.92}
.topbar .pill-mini:hover{opacity:1;text-decoration:underline}

/* Header */
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--hairline)}
.header-inner{height:84px}
.brand{gap:14px;font-weight:900;font-size:1.05rem;color:var(--ink-2)}
.brand small{color:var(--brand-500);font-weight:700}
.brand-mark{
  width:46px;height:46px;border-radius:13px;
  background:#fff url("../img/brand/siltec-logo.png") center/78% no-repeat;
  box-shadow:0 0 0 1px var(--hairline), 0 6px 16px rgba(11,58,78,.10);
  font-size:0;
}
.nav a{color:#1a2c39;font-weight:600}
.nav a[aria-current="page"],.nav a:hover{background:var(--soft);color:var(--brand)}
.icon-button,.menu-button{border-radius:12px;border-color:var(--hairline);font-weight:700}
.icon-button:hover,.menu-button:hover{border-color:var(--brand-500);color:var(--brand)}
.quote-count{background:var(--accent-2);color:#1a1a1a}

/* Buttons */
.btn{border-radius:14px;font-weight:700;letter-spacing:.005em;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,#1a83a7,#0f6f94);box-shadow:0 14px 28px rgba(15,111,148,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:linear-gradient(180deg,#1f93b9,#0d617f);color:#fff}
.btn-amber{background:linear-gradient(180deg,#ffc154,#f59e0b);color:#231a08;box-shadow:0 14px 28px rgba(245,158,11,.28)}
.btn-amber:hover{filter:brightness(1.04);color:#231a08}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-700);color:#fff}
.btn-light{background:#fff;color:var(--brand);border:1px solid #fff}
.btn-light:hover{color:var(--brand-700)}
.btn-ghost{border-color:var(--hairline);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--brand-500);color:var(--brand)}

/* Hero — real photo on the right, dark teal gradient on the left */
.hero{
  background:
    radial-gradient(ellipse at 90% -10%, rgba(26,131,167,.45), transparent 55%),
    linear-gradient(135deg, #082636 0%, #0b3a4e 55%, #0e4f6a 100%);
}
.hero:before{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.6;
}
.hero-inner{padding:86px 0 96px;gap:60px;grid-template-columns:1.05fr .95fr}
.hero h1{font-size:clamp(2.4rem,4.8vw,4.6rem);letter-spacing:-.04em}
.hero .lead{color:#cfe1ea;font-size:clamp(1.05rem,1.35vw,1.22rem)}
.hero-search{border-radius:18px;padding:8px;box-shadow:0 30px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.hero-search input{padding:18px 20px;font-size:1.06rem}
.hero-stats{margin-top:30px;gap:12px}
.stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);border-radius:14px;padding:14px 16px}
.stat b{font-weight:900;letter-spacing:-.02em;font-size:1.55rem}
.stat span{color:#aac4d0;font-size:.84rem;font-weight:600}

/* Replace abstract tray-visual with a real photo card */
.tray-visual{
  min-height:auto;height:520px;border-radius:28px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 100%),
    url("../img/brand/hero-photo.jpg") center/cover no-repeat,
    linear-gradient(160deg,#11506a,#082636);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  position:relative;
}
.tray-visual .tray-wire,.tray-visual .tray-rib{display:none}
.tray-visual .floating-label{
  left:22px;right:auto;bottom:22px;background:rgba(255,255,255,.96);
  border-radius:16px;padding:14px 18px;backdrop-filter:blur(6px);
  box-shadow:0 18px 40px rgba(0,0,0,.18)
}

/* Trust strip below hero */
.trust-strip{background:#fff;border-bottom:1px solid var(--hairline)}
.trust-strip .container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:22px 0}
.trust-item{display:flex;gap:14px;align-items:center;font-weight:600;color:#1a2c39}
.trust-item .ic{
  width:42px;height:42px;border-radius:12px;background:var(--soft);
  color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:1.15rem;flex:0 0 42px
}
.trust-item small{display:block;color:var(--brand-500);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem}

/* Sections */
.section{padding:84px 0}
.section h2{color:var(--ink-2)}

/* Category cards with image */
.category-card{padding:0;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);box-shadow:var(--shadow-card);transition:transform .25s ease, box-shadow .25s ease}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.category-card .cat-banner{
  aspect-ratio:16/10;background:#fff center/contain no-repeat;
  border-bottom:1px solid var(--hairline);position:relative;padding:14px;
}
.category-card .cat-banner:after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,38,54,.28))
}
.category-card .cat-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.category-card h3{margin:0;font-size:1.18rem;color:var(--ink-2)}
.category-card .meta{margin-top:auto;color:var(--muted);font-weight:700}
.category-card .meta a{color:var(--brand);font-weight:800}
.category-card .taglist{margin:6px 0 0}
.category-card .tag{background:var(--soft);color:var(--brand-700)}

/* Product cards */
.product-card{border-radius:18px;border:1px solid var(--hairline);box-shadow:var(--shadow-card);transition:transform .2s ease, box-shadow .2s ease;overflow:hidden;padding:14px 16px 18px}
.product-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.product-card .product-code{background:var(--brand);letter-spacing:.04em}
.product-card h3{font-size:1.05rem;margin:2px 0 0}
.product-card .metric{background:var(--soft);border-color:var(--hairline);border-radius:10px}
.product-card .metric small{font-weight:700;color:var(--brand-500);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem}

/* Page hero (sub-pages) */
.page-hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 60%,#0c5874 100%);padding:64px 0 52px}
.page-hero p{color:#cfe1ea}

/* Forms */
.input,select,textarea{border-radius:12px;border-color:var(--hairline)}
.input:focus,select:focus,textarea:focus{outline:3px solid rgba(26,131,167,.18);border-color:var(--brand-500)}

/* Notice */
.notice{border-left-color:var(--brand-500);background:#f1f8fb}
.warning{border-left-color:var(--accent-2);background:#fff7e7}

/* Product code chip generally */
.product-code{background:var(--brand);border-radius:9px;padding:5px 10px}

/* Footer */
.footer{background:linear-gradient(180deg,#06212f,#031622);padding:64px 0 22px}
.footer .brand{color:#fff}
.footer .brand-mark{background-color:#fff}
.footer-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer h3{color:#fff;font-weight:800;letter-spacing:.02em;margin-bottom:14px}
.footer ul li{color:#aac4d0}
.footer a:hover{color:var(--accent-2)}
.cert{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);font-weight:700}
.cert.cert-img{padding:6px 10px;display:inline-flex;align-items:center;gap:8px}
.cert.cert-img img{height:28px;width:auto;display:block;filter:brightness(1.05)}
.footer-bottom{color:#88a3b0}
.footer-legal-row{color:#88a3b0;font-size:13px;line-height:1.5;padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.08);margin-top:18px}
.footer-legal-row strong{color:#cfdde4;font-weight:700}

/* Trust banner — site-wide thin band under header */
.trust-banner{background:#f0f7f9;border-bottom:1px solid #d8e6ea;font-size:13px;color:#2d4f5d;padding:9px 0;line-height:1.4}
.trust-banner-inner{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.trust-banner-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.trust-banner-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#1a8b46;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
@media (max-width:700px){.trust-banner{font-size:12px;padding:7px 0}.trust-banner-inner{gap:14px}.trust-banner-icon{width:16px;height:16px;font-size:10px}}

/* Search overlay */
.search-overlay{background:rgba(8,38,54,.78)}
.search-panel{border-radius:22px}
.search-result{transition:background .15s ease}
.search-result:hover{background:var(--soft)}

/* Cookie */
.cookie{background:#0b3a4e;border-radius:16px;border:1px solid rgba(255,255,255,.1)}

/* Section variants */
.section.alt{background:var(--soft)}
.section.dark-band{background:linear-gradient(135deg,var(--brand) 0%,#0a2a3a 100%);color:#fff}
.section.dark-band .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.section.dark-band .card .feature-icon{background:rgba(255,255,255,.1);color:#fff}

/* USP icons row inside dark band */
.usp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.usp{display:flex;gap:14px;align-items:flex-start}
.usp .ic{width:50px;height:50px;flex:0 0 50px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));display:grid;place-items:center;font-size:1.5rem;color:#fff;border:1px solid rgba(255,255,255,.16)}
.usp h4{margin:0 0 4px;color:#fff;font-size:1.02rem;font-weight:800}
.usp p{margin:0;color:#aac4d0;font-size:.93rem}

/* Quote chip */
.actions .btn-amber{box-shadow:0 14px 28px rgba(245,158,11,.32)}

/* Mobile */
@media (max-width:980px){
  .hero-inner{padding:60px 0 70px;gap:36px}
  .tray-visual{height:320px}
  .trust-strip .container{grid-template-columns:repeat(2,1fr)}
  .usp-row{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .product-grid{grid-template-columns:1fr}
  .trust-strip .container{grid-template-columns:1fr}
  .usp-row{grid-template-columns:1fr}
}

/* ===== Detail page rich blocks ===== */
.ean-table th{background:var(--soft);color:var(--brand);font-weight:800}
.ean-table .ean{font-family:'Inter', ui-sans-serif, system-ui, sans-serif;font-weight:700;letter-spacing:.03em;color:var(--ink-2);background:#fff;border:1px solid var(--hairline);padding:3px 8px;border-radius:8px;display:inline-block}
.dim-matrix-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:14px;margin-top:8px}
.dim-matrix{width:auto;min-width:100%;border-radius:0;border:0;font-size:.93rem}
.dim-matrix th,.dim-matrix td{padding:9px 12px;text-align:center;white-space:nowrap}
.dim-matrix thead th{background:var(--brand);color:#fff;font-weight:800;letter-spacing:.04em;border-bottom:0;font-size:.85rem}
.dim-matrix tbody th{background:var(--soft);color:var(--brand-700);font-weight:800;text-align:left;border-right:1px solid var(--hairline)}
.dim-matrix th.hl{background:var(--accent-2);color:#1a1a1a}
.dim-matrix td.hl{background:#fff7e0;font-weight:800;color:var(--brand-700)}
.dim-matrix tr:nth-child(even) td{background:#fafcfd}
.dim-matrix tr:nth-child(even) td.hl{background:#fff2cc}

.acc-sections{display:grid;gap:18px;margin-top:10px}
.acc-section{background:var(--soft);border:1px solid var(--hairline);border-radius:16px;padding:18px}
.acc-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:1.05rem;color:var(--brand-700)}
.acc-ic{width:32px;height:32px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:.95rem;border:1px solid var(--hairline)}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.acc-item{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:12px;transition:border-color .15s ease, transform .15s ease, box-shadow .2s ease}
.acc-item:hover{border-color:var(--brand-500);transform:translateY(-1px);box-shadow:0 8px 18px rgba(13,42,58,.08)}
.acc-img{
  width:100%;aspect-ratio:1;background:var(--paper);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid var(--hairline);
}
.acc-img img{
  max-width:80%;max-height:80%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
}
.acc-img-empty{
  font-family:'Inter',sans-serif;font-weight:800;color:#94a8b3;
  font-size:.78rem;letter-spacing:.04em;
  background:linear-gradient(135deg,#eef4f7,#f7fafc);
}
.acc-code{font-weight:900;color:var(--brand);letter-spacing:.02em;font-size:.92rem;margin-top:2px}
.acc-desc{color:var(--muted);font-size:.78rem;line-height:1.35}
.acc-price{
  margin-top:auto;padding-top:6px;
  font-family:var(--serif,'Playfair Display', Georgia, serif);
  font-weight:600;color:var(--navy);font-size:1.04rem;
  letter-spacing:-.005em;line-height:1;
}
.acc-price small{
  font-family:'Inter',sans-serif;font-weight:600;color:#94a8b3;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  margin-left:4px;
}
.acc-item{position:relative}
.acc-add{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:50%;border:0;
  background:var(--cyan);color:#fff;font-size:1rem;font-weight:900;
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(30,143,196,.32);
  transition:transform .15s,background .15s,box-shadow .15s;
  opacity:0;
}
.acc-item:hover .acc-add,.acc-add:focus{opacity:1}
.acc-add:hover{background:var(--cyan-700);transform:scale(1.08);box-shadow:0 6px 14px rgba(30,143,196,.45)}

/* On touch devices the + is always visible */
@media (hover:none){.acc-add{opacity:1}}

/* Offerte cart — accessory items + divider */
.qi-divider{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;
  margin:18px 0 10px;padding-top:14px;border-top:1px dashed var(--rule);
}

/* Rich quote item (with photo + specs) */
.qi-rich{
  display:grid;grid-template-columns:88px 1fr;gap:14px;
  padding:14px;background:#fff;border:1px solid var(--rule);border-radius:12px;
  margin-bottom:10px;
  box-shadow:0 4px 14px rgba(13,42,58,.04);
  transition:border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.qi-rich:hover{
  border-color:#cfdde6;
  box-shadow:0 10px 22px rgba(13,42,58,.09);
}
.qi-thumb{
  width:88px;height:88px;background:#fff;border:1px solid var(--rule);
  border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:6px;
}
.qi-thumb img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  transition:transform .25s ease;
}
.qi-thumb-link{
  cursor:pointer;text-decoration:none;
  transition:border-color .15s ease;
}
.qi-thumb-link:hover{border-color:var(--cyan,#1e8fc4)}
.qi-thumb-link:hover img{transform:scale(1.04)}
.qi-thumb-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.qi-code-link{
  text-decoration:none;cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.qi-code-link:hover{background:var(--cyan,#1e8fc4) !important;color:#fff;transform:translateY(-1px)}
.qi-code-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.qi-thumb-empty{
  font-family:'Inter',sans-serif;font-weight:800;color:#94a8b3;
  font-size:.78rem;letter-spacing:.04em;
}
.qi-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.qi-top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.qi-rich .qi-code{
  background:var(--navy);color:#fff;padding:4px 9px;border-radius:5px;
  font-family:'Inter',sans-serif;font-weight:800;letter-spacing:.04em;font-size:.78rem;
}
.qi-rich .qi-code-acc{background:var(--cyan)}
.qi-rich .qi-title{
  flex:1;color:#1a2c39;font-weight:700;font-size:.96rem;
  text-decoration:none;line-height:1.3;
}
.qi-rich a.qi-title:hover{color:var(--cyan)}
.qi-remove{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:transparent;border:1px solid var(--rule);color:#6b7c87;
  font-size:1rem;font-weight:700;cursor:pointer;line-height:1;
  display:grid;place-items:center;
  transition:border-color .15s,color .15s,background .15s;
}
.qi-remove:hover{border-color:#d6663b;color:#d6663b;background:#fff5f0}
.qi-specs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
  font-size:.82rem;
}
.qi-specs li{display:flex;flex-direction:column;gap:1px}
.qi-specs li.qi-spec-wide{grid-column:1 / -1}
.qi-specs span{
  font-size:.66rem;letter-spacing:.10em;text-transform:uppercase;
  color:#94a8b3;font-weight:700;
}
.qi-specs strong{color:#1a2c39;font-weight:700;font-size:.86rem}
.qi-specs code{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;font-weight:700;
  color:var(--navy);font-size:.78rem;letter-spacing:.02em;
  background:var(--paper);padding:2px 7px;border-radius:4px;
  align-self:flex-start;
}
.qi-price{
  margin-top:2px;font-family:var(--serif);font-weight:600;
  color:var(--navy);font-size:1.15rem;letter-spacing:-.005em;
}
.qi-price small{
  font-family:'Inter',sans-serif;font-weight:600;color:#94a8b3;
  font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;
  vertical-align:middle;opacity:.85;
}
.qi-rich-acc{background:var(--paper);border-style:dashed}

/* Quantity row inside a quote item */
.qi-qty-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:4px;padding:8px 10px;
  background:var(--paper,#f4f8fb);border:1px solid var(--rule);
  border-radius:10px;
}
.qi-qty{
  display:inline-flex;align-items:center;gap:0;
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;
}
.qi-qty-btn{
  appearance:none;-webkit-appearance:none;
  width:32px;height:34px;border:0;background:#fff;
  color:var(--navy,#0d2a3a);font-size:1.15rem;font-weight:800;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background .15s, color .15s;
}
.qi-qty-btn:hover{background:var(--cyan,#1e8fc4);color:#fff}
.qi-qty-btn:active{background:#0d6a92;color:#fff}
.qi-qty-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.qi-qty-input{
  width:48px;height:34px;border:0;border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
  text-align:center;font:inherit;font-weight:800;
  color:var(--navy,#0d2a3a);background:#fff;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;padding:0;
}
.qi-qty-input::-webkit-outer-spin-button,
.qi-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qi-qty-input:focus{outline:2px solid var(--cyan);outline-offset:-2px}
.qi-qty-unit{
  margin-left:8px;font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#5a6c78;
}
.qi-qty-meta{
  display:flex;flex-direction:column;gap:1px;font-size:.78rem;
  flex:1;min-width:0;
}
.qi-qty-conv{color:#1a2c39;font-weight:700;font-size:.86rem}
.qi-qty-conv strong{color:var(--cyan,#1e8fc4);font-weight:900}
.qi-qty-hint{
  font-size:.7rem;color:#94a8b3;font-weight:600;letter-spacing:.02em;
}

/* Price + subtotal row sit side-by-side under the qty row */
.qi-price-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:6px;
}
.qi-subtotal{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  text-align:right;
}
.qi-subtotal span{
  font-size:.66rem;letter-spacing:.10em;text-transform:uppercase;
  color:#94a8b3;font-weight:700;
}
.qi-subtotal strong{
  font-family:var(--serif);font-weight:600;color:var(--cyan,#1e8fc4);
  font-size:1.18rem;letter-spacing:-.005em;
}

/* Grand-total summary block */
.qi-grand{
  margin-top:14px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(135deg,#0d2a3a 0%,#163a4f 100%);
  color:#fff;box-shadow:0 14px 30px rgba(13,42,58,.16);
}
.qi-grand-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:6px 0;
}
.qi-grand-row + .qi-grand-row{border-top:1px solid rgba(255,255,255,.12)}
.qi-grand-row span{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:#bdd2dd;font-weight:700;
}
.qi-grand-row strong{
  font-family:var(--serif);font-weight:600;font-size:1.15rem;color:#fff;
  font-variant-numeric:tabular-nums;
}
.qi-grand-row strong small{
  font-family:'Inter',sans-serif;font-weight:700;color:#7ed3ee;
  font-size:.55rem;letter-spacing:.08em;margin-left:6px;
  text-transform:uppercase;vertical-align:middle;opacity:.85;
}
.qi-grand-total strong{font-size:1.45rem;color:#7ed3ee}
.qi-grand-note{
  margin:8px 0 0;font-size:.75rem;color:#bdd2dd;line-height:1.45;
}

@media (max-width:520px){
  .qi-rich{grid-template-columns:64px 1fr;padding:10px}
  .qi-thumb{width:64px;height:64px}
  .qi-specs{grid-template-columns:1fr}
  .qi-qty-row{gap:8px}
  .qi-qty-meta{flex-basis:100%}
  .qi-price-row{flex-direction:column;align-items:flex-start;gap:6px}
  .qi-subtotal{align-items:flex-start;text-align:left}
}

.detail-side h3{font-size:.95rem;color:var(--brand-700);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}

/* Make detail layout sticky-side on desktop */
@media (min-width:981px){
  .detail-side{position:sticky;top:104px;align-self:start}
}

/* =========================================================================
   v3 redesign — editorial Siltec look
   Serif headings, light hero, cyan CTA, green offerte pill, photo feature row
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap");

:root{
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --navy:#23527c;          /* serif heading colour */
  --navy-700:#1d4467;
  --cyan:#1e8fc4;          /* primary CTA */
  --cyan-700:#1374a3;
  --green:#33a05a;         /* offerte pill */
  --green-700:#2a8849;
  --paper:#fafbfc;
  --rule:#dbe5ec;
}

body{background:#fff;color:#27343d}

/* Headings → serif, navy */
h1, h2, .hero h1, .hero h2,
.section h1, .section h2,
.detail-layout h1, .detail-layout h2{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--navy);
}
.hero h1{font-weight:700}
h1{font-size:clamp(2.4rem,4.4vw,3.8rem)}
h2{font-size:clamp(1.8rem,2.6vw,2.6rem)}
h3{font-family:'Inter',sans-serif;font-weight:800;color:#1a2c39}
.dark-band h2, .footer h3, .hero h1, .page-hero h1{color:#fff}

/* Editorial section title with rule below */
.title-rule{text-align:center;margin:0 auto 32px;max-width:880px}
.title-rule h2,.title-rule h1{margin-bottom:18px}
.title-rule:after{content:"";display:block;width:100%;max-width:780px;height:1px;background:var(--rule);margin:0 auto}

/* Topbar — quieter */
.topbar{background:#0d2a3a;color:#aac4d0;font-size:.82rem}

/* Header */
.site-header{border-bottom:1px solid var(--rule);background:#fff}
.header-inner{height:88px}
.brand{gap:0;color:var(--navy)}
.brand-mark{
  width:118px;height:60px;
  background:url("../img/brand/siltec-logo.png") left center/contain no-repeat;
  border-radius:0;box-shadow:none;font-size:0;flex:0 0 auto;padding:0;
}
.brand > span:not(.brand-mark){display:none}    /* hide text "SILTEC / Kabelgoten Nederland" — wordmark is in the image */
/* Footer brand panel — give the logo a white plate so it's visible on dark bg */
.footer .brand-mark{background-color:#fff;padding:6px 10px;border-radius:6px;width:130px;height:54px;background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nav{gap:0}
.nav a{padding:14px 16px;font-weight:600;color:#1a2c39;border-radius:0;border-bottom:3px solid transparent;border-top:3px solid transparent;background:transparent}
.nav a:hover{color:var(--cyan);background:transparent}
.nav a[aria-current="page"]{background:transparent;color:#1a2c39;border-bottom-color:var(--cyan)}

/* Header right side — keep search but rebrand offerte as green pill */
.header-actions{gap:12px}
.icon-button{border:0;background:transparent;color:#1a2c39;font-weight:700;padding:8px 10px}
.icon-button:hover{color:var(--cyan)}
a.icon-button[href="offerte.html"]{
  background:var(--green);color:#fff;border-radius:999px;
  padding:11px 22px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(51,160,90,.28)
}
a.icon-button[href="offerte.html"]:hover{background:var(--green-700);color:#fff}
a.icon-button[href="offerte.html"] .quote-count{background:#fff;color:var(--green-700)}

/* Buttons */
.btn-primary{
  background:linear-gradient(180deg,#22a4d8,#1583b3);
  color:#fff;border-radius:999px;
  padding:13px 24px;letter-spacing:.04em;text-transform:uppercase;font-size:.86rem;font-weight:800;
  box-shadow:0 12px 24px rgba(20,131,179,.28),inset 0 1px 0 rgba(255,255,255,.3)
}
.btn-primary:hover{background:linear-gradient(180deg,#27b0e6,#117096);color:#fff}
.btn-amber{background:var(--green);color:#fff;border-radius:999px;padding:13px 24px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.86rem}
.btn-amber:hover{background:var(--green-700);color:#fff}
.btn-light{background:#fff;color:var(--cyan);border:1px solid var(--cyan);border-radius:999px}
.btn-light:hover{background:var(--cyan);color:#fff}
.btn-dark{border-radius:999px}
.btn-ghost{border-radius:999px}

/* HERO — editorial: white, centered serif, then 3-col block */
.hero{
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  color:#27343d;border-bottom:1px solid var(--rule);
}
.hero:before{display:none}
.hero-inner{
  display:block;padding:64px 0 16px;
}
.hero .eyebrow{display:none}
.hero h1{
  text-align:center;color:var(--navy);
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:600;letter-spacing:-.005em;
  margin:0 auto 26px;max-width:900px;
}
.hero h1 + p,
.hero p.lead{display:none}                       /* hide old lead under big title */
.hero-search,.hero-stats,.hero .actions{display:none}
.hero:after{
  content:"";display:block;width:min(880px, 86%);
  margin:0 auto;height:1px;background:var(--rule);
}

/* The 3-col 'Kwaliteit' block right under the hero title */
.section.lead-block{padding:46px 0 60px;background:var(--paper);border-bottom:1px solid var(--rule)}
.lead-grid{
  display:grid;grid-template-columns:1.05fr 1fr .55fr;gap:34px;align-items:center;
  max-width:1200px;margin:0 auto
}
.lead-photo{
  aspect-ratio:4/3;border-radius:6px;
  background:#0d2a3a center/cover no-repeat;
  background-image:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.18)),url("../img/brand/hero-photo.jpg");
  box-shadow:0 14px 40px rgba(13,42,58,.18);
}
.lead-text h2{font-size:clamp(1.5rem,2.1vw,2rem);font-weight:600;color:var(--cyan);margin-bottom:14px}
.lead-text p{color:#3a4a55;font-size:1rem;line-height:1.65}
.lead-text ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.lead-text ul li{display:flex;align-items:center;gap:12px;font-weight:700;color:#1a2c39}
.lead-text ul li:before{
  content:"»";color:var(--cyan);font-weight:900;font-size:1.4rem;line-height:1
}
.lead-certs{display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center}
.lead-certs img{width:130px;height:auto;display:block;filter:none}
.lead-certs .cert-fallback{width:130px;text-align:center;color:var(--navy);font-weight:800;font-family:var(--serif);font-size:1rem;letter-spacing:.04em}

/* Three feature cards with photo + dark overlay + cyan CTA */
.section.features-row{padding:0;background:#fff}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.feature-tile{
  position:relative;min-height:340px;color:#fff;
  background:#0d2a3a center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px 32px 32px;text-align:center;
  overflow:hidden;
}
.feature-tile:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(8,38,54,.55) 0%,rgba(8,38,54,.78) 100%);
  z-index:1;transition:background .25s ease
}
.feature-tile:hover:before{background:linear-gradient(160deg,rgba(8,38,54,.4),rgba(8,38,54,.62))}
.feature-tile > *{position:relative;z-index:2}
.feature-tile h3{font-family:var(--serif);color:#fff;font-weight:600;font-size:1.7rem;margin:0 0 8px;letter-spacing:-.005em}
.feature-tile p{color:#dde9ef;margin:0 0 22px}
.feature-tile .btn{align-self:center;position:relative;z-index:5}
/* Bold cyan CTA on the dark photo tiles — sits above the bottom white fade */
.feature-tile .btn-primary{
  background:linear-gradient(180deg,#22a4d8 0%,#1583b3 100%);
  color:#fff;
  padding:16px 32px;
  font-size:.86rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 18px 36px rgba(8,38,54,.55),
             0 0 0 4px rgba(34,164,216,.15),
             inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .15s,box-shadow .2s,background .2s;
  position:relative;z-index:5;
}
.feature-tile .btn-primary:hover{
  background:linear-gradient(180deg,#27b0e6 0%,#117096 100%);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 22px 44px rgba(8,38,54,.6),
             0 0 0 5px rgba(34,164,216,.25),
             inset 0 1px 0 rgba(255,255,255,.35);
}
/* Make sure the bottom white-fade overlay sits BELOW the buttons */
.section.features-row::after{z-index:1 !important}
.section.features-row::before{z-index:1 !important}
.feature-tile.t-1{background-image:url("../img/feature/tile-aansluiten.jpg")}
.feature-tile.t-2{background-image:url("../img/feature/tile-mogelijkheden.jpg")}
.feature-tile.t-3{background-image:url("../img/feature/tile-vragen.jpg")}

/* Section spacing */
.section{padding:74px 0}
.section.alt{background:var(--paper)}
.section.dark-band{background:linear-gradient(135deg,#173a55 0%,#0d2a3a 100%);color:#fff}
.section.dark-band h2{color:#fff}

/* Category cards: cleaner editorial */
.category-card{border-radius:6px;border:1px solid var(--rule);box-shadow:0 6px 18px rgba(13,42,58,.06)}
.category-card .cat-banner{aspect-ratio:5/3}
.category-card h3{font-family:var(--serif);color:var(--navy);font-weight:600;font-size:1.25rem}
.category-card .cat-body{padding:20px 22px 22px}
.category-card .meta a{color:var(--cyan);font-weight:700}
.category-card .tag{background:#eaf3f8;color:var(--navy-700);font-weight:700;border-radius:4px;padding:4px 8px}

/* Product cards on /kabelgoten.html */
.product-card{border-radius:6px}
.product-card h3{font-family:'Inter',sans-serif}
.product-card .product-code{background:var(--navy);border-radius:4px;letter-spacing:.04em}

/* Detail page side */
.detail-side h3{color:var(--navy)}
.acc-title{color:var(--navy-700);font-family:'Inter',sans-serif;font-weight:800}
.acc-code{color:var(--navy)}
.dim-matrix thead th{background:var(--navy)}
.dim-matrix tbody th{color:var(--navy-700)}

/* Page hero (sub-pages) */
.page-hero{background:linear-gradient(135deg,#173a55 0%,#0d2a3a 100%)}
.page-hero h1{color:#fff;text-align:left}

/* Trust strip — keep but soften */
.trust-strip .ic{background:#eaf3f8;color:var(--cyan)}
.trust-item small{color:var(--cyan);text-transform:uppercase}

/* Mobile */
@media (max-width:980px){
  .lead-grid{grid-template-columns:1fr;gap:24px}
  .lead-certs{flex-direction:row;justify-content:center}
  .lead-certs img{width:90px}
  .feature-row{grid-template-columns:1fr}
  .feature-tile{min-height:260px}
  .nav a{padding:12px 12px}
  .brand-mark{padding-right:0;height:38px;min-width:140px}
}

/* ================================================================
   v4 hero — editorial with prominent search, photo card & cert badges
   ================================================================ */
.hero.hero-v4{
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(30,143,196,.10), transparent 65%),
    radial-gradient(600px 300px at 0% 100%, rgba(30,143,196,.06), transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  padding:72px 0 92px;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.hero.hero-v4:before,.hero.hero-v4:after{content:none;display:none}
.hero-v4 .hero-inner{display:none}
.hero-v4-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
}
.hero-v4-text .hero-eyebrow{
  display:inline-block;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);font-weight:800;margin-bottom:18px;
  padding:6px 12px;border:1px solid rgba(30,143,196,.25);border-radius:999px;
  background:rgba(30,143,196,.06);
}
.hero-v4-text h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  color:var(--navy);letter-spacing:-.012em;line-height:1.05;
  margin:0 0 18px;text-align:left;
}
.hero-sub{
  color:#4a5862;font-size:1.06rem;line-height:1.65;
  max-width:560px;margin:0 0 26px;
}
.hero-v4-search{
  background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:7px 7px 7px 22px;display:flex;align-items:center;gap:12px;
  box-shadow:0 22px 50px rgba(13,42,58,.10),0 4px 12px rgba(13,42,58,.05);
  transition:box-shadow .2s ease,border-color .2s ease;
  max-width:580px;
}
.hero-v4-search:focus-within{
  border-color:var(--cyan);
  box-shadow:0 22px 50px rgba(30,143,196,.18),0 0 0 4px rgba(30,143,196,.10);
}
.hero-v4-search .hs-icon{color:var(--cyan);font-size:1.4rem;line-height:1;flex:0 0 auto}
.hero-v4-search input{
  flex:1;border:0;outline:0;font-size:1.04rem;padding:14px 0;
  background:transparent;color:#1a2c39;font-family:inherit;
}
.hero-v4-search input::placeholder{color:#8aa0ad}
.hero-v4-search .btn-primary{padding:13px 26px;font-size:.85rem}
.hero-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 28px}
.hero-chip-label{font-size:.86rem;color:#6b7c87;font-weight:600;margin-right:4px}
.hero-chip{
  border:1px solid var(--rule);background:#fff;border-radius:999px;
  padding:7px 14px;font-size:.86rem;font-weight:700;
  color:var(--navy-700);cursor:pointer;font-family:inherit;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.hero-chip:hover{background:var(--cyan);color:#fff;border-color:var(--cyan);transform:translateY(-1px)}
.hero-meta{
  display:grid;grid-template-columns:repeat(3,auto);gap:32px;
  margin-top:8px;padding-top:24px;border-top:1px solid var(--rule);
  max-width:560px;
}
.hero-meta > div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.55rem;line-height:1;
}
.hero-meta span{font-size:.84rem;color:#6b7c87;font-weight:600}

/* Visual side */
.hero-v4-visual{position:relative}
.hero-photo-frame{
  position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;
  background:url("../img/brand/hero-photo.jpg") center/cover no-repeat,
             linear-gradient(160deg,#11506a,#082636);
  box-shadow:0 30px 80px rgba(13,42,58,.22),0 0 0 1px rgba(13,42,58,.05);
}
.hero-photo-frame:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,42,58,0) 60%,rgba(13,42,58,.32) 100%);
}
.hero-floating{
  position:absolute;left:-32px;bottom:36px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border:1px solid var(--rule);border-radius:14px;
  padding:14px 16px;display:grid;gap:8px;min-width:240px;
  box-shadow:0 22px 50px rgba(13,42,58,.18);
}
.hf-row{display:flex;align-items:center;gap:10px;font-size:.88rem}
.hf-code{
  background:var(--navy);color:#fff;padding:3px 8px;border-radius:4px;
  font-weight:800;letter-spacing:.04em;font-size:.78rem;font-family:'Inter',sans-serif;
}
.hf-desc{color:#4a5862;font-weight:500}
.hero-cert-pair{
  position:absolute;top:-12px;right:-12px;
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1px solid var(--rule);
  padding:10px;border-radius:14px;box-shadow:0 14px 30px rgba(13,42,58,.12);
}
.hero-cert-pair img{width:64px;height:64px;display:block;object-fit:contain}

/* Adjust the lead-block now that hero has cert badges; make it 2-col */
.lead-grid-2col{grid-template-columns:1fr 1fr;gap:50px}
.lead-grid-2col .lead-text{padding-right:20px}
.lead-grid-2col .lead-text h2{color:var(--navy);font-size:clamp(1.7rem,2.4vw,2.4rem);margin-top:8px}
.lead-grid-2col .lead-text .eyebrow{color:var(--cyan);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.lead-grid-2col .lead-photo{aspect-ratio:5/4}

@media (max-width:980px){
  .hero-v4-grid{grid-template-columns:1fr;gap:40px}
  .hero-v4-text h1{font-size:clamp(2rem,7vw,2.8rem)}
  .hero-v4-search{flex-wrap:wrap}
  .hero-v4-search .btn-primary{flex:1}
  .hero-photo-frame{aspect-ratio:5/4}
  .hero-floating{position:static;margin-top:-30px}
  .hero-cert-pair{position:static;flex-direction:row;margin-top:14px;justify-content:center}
  .lead-grid-2col{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:520px){
  .hero-meta{grid-template-columns:1fr 1fr;gap:14px}
  .hero-meta > div:last-child{grid-column:1 / -1}
}

/* ================================================================
   Team section
   ================================================================ */
.team-section{padding:84px 0 96px;background:#fff;border-top:1px solid var(--rule)}
.team-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  max-width:1080px;margin:0 auto;
}
.team-member{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.team-photo{
  width:230px;height:230px;border-radius:50%;
  background:#f1f5f8 center/cover no-repeat;
  filter:grayscale(100%);
  box-shadow:0 12px 30px rgba(13,42,58,.10),0 0 0 1px var(--rule);
  transition:filter .35s ease,transform .35s ease;
}
.team-member:hover .team-photo{filter:grayscale(0);transform:translateY(-3px)}
.team-name{
  font-family:var(--serif);font-weight:600;font-size:1.55rem;
  color:#1a2c39;margin:0;letter-spacing:-.005em;
}
.team-role{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;margin:-6px 0 0;
}
.team-bio{color:#4a5862;font-size:1rem;line-height:1.65;max-width:440px;margin:0}
.team-contact{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;
  font-weight:700;color:#1a2c39;font-size:.95rem;
}
.team-contact a{display:inline-flex;align-items:center;gap:8px;color:#1a2c39}
.team-contact a:hover{color:var(--cyan)}
.team-contact .ic{width:28px;height:28px;border-radius:50%;background:#eaf3f8;color:var(--cyan);display:inline-grid;place-items:center;font-size:.85rem;flex:0 0 28px}
.team-region{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:#eaf3f8;color:var(--navy-700);font-weight:700;
  font-size:.82rem;
}

@media (max-width:800px){
  .team-grid{grid-template-columns:1fr;gap:48px}
  .team-photo{width:190px;height:190px}
}

/* ================================================================
   Offerte page redesign
   ================================================================ */
.offerte-hero{
  background:linear-gradient(135deg,#173a55 0%,#0d2a3a 100%);
  color:#fff;padding:64px 0 56px;border-bottom:1px solid rgba(255,255,255,.06);
}
.offerte-hero h1{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(2rem,3.6vw,3.2rem);margin:0 0 12px;letter-spacing:-.005em;
}
.offerte-hero p{color:#cfe1ea;max-width:720px;font-size:1.06rem;margin:0}
.offerte-hero .breadcrumbs{color:#aac4d0}
.offerte-hero .breadcrumbs a{color:#fff}

.offerte-layout{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;
  margin-top:-40px;position:relative;z-index:2;
}
.offerte-form-card,.offerte-cart-card{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:32px;box-shadow:0 24px 50px rgba(13,42,58,.10);
}
.offerte-section{margin-bottom:28px}
.offerte-section:last-child{margin-bottom:0}
.offerte-section-title{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.offerte-section-title:before{
  content:"";flex:0 0 28px;height:2px;background:var(--cyan);border-radius:2px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;color:#1a2c39;font-size:.92rem}
.field label .req{color:#d6663b;font-weight:900;margin-left:2px}
.field input,.field textarea,.field select{
  border:1px solid var(--rule);background:#fff;border-radius:10px;
  padding:13px 14px;font:inherit;color:#1a2c39;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(30,143,196,.12);
}
.field textarea{resize:vertical;min-height:130px}
.help{font-size:.85rem;color:#6b7c87}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:#4a5862}
.consent input{margin-top:3px;accent-color:var(--cyan)}

.offerte-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.offerte-actions .btn{padding:14px 28px}

.offerte-cart-card{position:sticky;top:104px;align-self:start}
.offerte-cart-card h3{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.4rem;margin:0 0 6px;
}
.offerte-cart-card .help{margin-bottom:18px}
.offerte-cart-empty{
  border:1px dashed var(--rule);border-radius:12px;
  padding:22px;text-align:center;color:#6b7c87;background:var(--paper);
}
.offerte-cart-empty .ic{
  font-size:1.6rem;color:var(--cyan);margin-bottom:6px;display:block;
}
.quote-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px;border:1px solid var(--rule);border-radius:10px;background:#fff;
  margin-bottom:10px;
}
.quote-item .qi-code{
  background:var(--navy);color:#fff;padding:4px 8px;border-radius:4px;
  font-weight:800;letter-spacing:.04em;font-size:.78rem;font-family:'Inter',sans-serif;
}
.quote-item .qi-info{display:flex;flex-direction:column;gap:2px}
.quote-item .qi-info strong{color:#1a2c39}
.quote-item .qi-info small{color:#6b7c87;font-size:.82rem}
.quote-item .btn-small{padding:6px 10px;font-size:.78rem;border-radius:8px}

.offerte-aside-bottom{
  border-top:1px solid var(--rule);margin-top:18px;padding-top:18px;
  display:flex;flex-direction:column;gap:12px;font-size:.92rem;color:#4a5862;
}
.offerte-aside-bottom strong{color:#1a2c39}

@media (max-width:980px){
  .offerte-layout{grid-template-columns:1fr;gap:24px;margin-top:-30px}
  .offerte-cart-card{position:static}
  .field-row{grid-template-columns:1fr}
}

/* ================================================================
   v5 — refined hero with prominent search + new "Waarom Siltec"
   ================================================================ */

/* HERO refinements */
.hero.hero-v4{padding:88px 0 110px}
.hero.hero-v4:after{
  content:"";position:absolute;left:50%;top:38%;width:520px;height:520px;
  background:radial-gradient(circle, rgba(30,143,196,.18), transparent 65%);
  filter:blur(40px);transform:translate(-30%,-30%);pointer-events:none;z-index:0;
}
.hero-v4 > .container{position:relative;z-index:1}
.hero-v4-grid{gap:72px}
.hero-v4-text h1{font-size:clamp(2.3rem,4.4vw,4rem);line-height:1.04;margin-bottom:22px}
.hero-sub{font-size:1.1rem;margin-bottom:34px;max-width:540px}

/* Bigger, more prominent search bar */
.hero-v4-search{
  padding:9px 9px 9px 26px;border-radius:999px;
  box-shadow:0 30px 60px rgba(13,42,58,.12),0 6px 18px rgba(13,42,58,.06);
  border-color:#e3ecf2;
  max-width:600px;
}
.hero-v4-search:hover{box-shadow:0 36px 70px rgba(30,143,196,.16),0 6px 18px rgba(13,42,58,.08)}
.hero-v4-search:focus-within{
  border-color:var(--cyan);
  box-shadow:0 36px 70px rgba(30,143,196,.22),0 0 0 5px rgba(30,143,196,.10);
  transform:translateY(-1px);
}
.hero-v4-search .hs-icon{
  font-size:1.55rem;color:var(--cyan);
  display:inline-grid;place-items:center;width:28px;height:28px;
}
.hero-v4-search input{font-size:1.08rem;padding:16px 0;font-weight:500}
.hero-v4-search input::placeholder{color:#94a8b3;font-weight:400}
.hero-v4-search .btn-primary{
  padding:15px 30px;font-size:.86rem;letter-spacing:.06em;font-weight:800;
}

/* Below-search hint link */
.hero-search-hint{
  display:block;margin:14px 4px 0;font-size:.9rem;color:#6b7c87;
}
.hero-search-hint a{color:var(--cyan);font-weight:700}
.hero-search-hint a:hover{text-decoration:underline}

.hero-chips{margin:20px 0 32px}
.hero-chip-label{font-size:.84rem;color:#7c8d97;letter-spacing:.04em}
.hero-chip{
  font-size:.84rem;padding:8px 16px;border-color:#e3ecf2;
  box-shadow:0 2px 6px rgba(13,42,58,.04);
}
.hero-chip:hover{
  background:var(--cyan);color:#fff;border-color:var(--cyan);
  box-shadow:0 8px 18px rgba(30,143,196,.22);transform:translateY(-2px);
}

.hero-meta{
  margin-top:6px;padding-top:28px;gap:36px;
  border-top:1px solid #e3ecf2;max-width:600px;
}
.hero-meta b{font-size:1.7rem;font-weight:600;color:var(--navy)}
.hero-meta span{font-size:.8rem;letter-spacing:.04em;color:#7c8d97}

/* Right photo card — refined */
.hero-photo-frame{
  aspect-ratio:4/5;border-radius:10px;
  box-shadow:0 40px 90px rgba(13,42,58,.24),0 0 0 1px rgba(13,42,58,.06);
  transform:rotate(-1deg);transition:transform .35s ease,box-shadow .35s ease;
}
.hero-v4-visual:hover .hero-photo-frame{transform:rotate(0);box-shadow:0 50px 100px rgba(13,42,58,.30)}
.hero-photo-frame:before{
  content:"";position:absolute;inset:auto -22px -22px auto;
  width:55%;height:55%;border-radius:10px;
  background:linear-gradient(135deg,rgba(30,143,196,.18),rgba(30,143,196,.06));
  z-index:-1;transform:rotate(3deg);
}

.hero-floating{
  background:rgba(255,255,255,.97);border-radius:14px;padding:14px 18px;
  min-width:260px;
  box-shadow:0 28px 60px rgba(13,42,58,.20),0 0 0 1px rgba(13,42,58,.04);
  transform:rotate(1deg);
}
.hero-floating:hover{transform:rotate(0)}
.hf-row{padding:5px 0;border-bottom:1px solid #f0f4f7}
.hf-row:last-child{border-bottom:0}
.hf-code{background:var(--navy);font-size:.75rem;padding:4px 9px}
.hf-desc{font-size:.86rem;color:#4a5862;font-weight:500}

.hero-cert-pair{
  background:#fff;border-radius:14px;padding:10px;
  box-shadow:0 18px 40px rgba(13,42,58,.16),0 0 0 1px rgba(13,42,58,.04);
  transform:rotate(2deg);transition:transform .35s ease;
}
.hero-cert-pair:hover{transform:rotate(0)}
.hero-cert-pair img{width:60px;height:60px}

/* ===========================================================
   New "Waarom Siltec" section — light editorial premium
   =========================================================== */
.section.why-section{
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(30,143,196,.08), transparent 60%),
    linear-gradient(180deg,var(--paper) 0%,#fff 100%);
  padding:96px 0 104px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.why-grid{
  display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start;
}
.why-intro{position:sticky;top:104px;align-self:start}
.why-intro .eyebrow{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;
  display:inline-flex;align-items:center;gap:10px;
}
.why-intro .eyebrow:before{
  content:"";width:32px;height:2px;background:var(--cyan);border-radius:2px;
}
.why-intro h2{
  font-family:var(--serif);color:var(--navy);
  font-size:clamp(2rem,3.2vw,3rem);font-weight:600;
  line-height:1.08;margin:18px 0 24px;letter-spacing:-.012em;
}
.why-intro p{color:#4a5862;font-size:1.06rem;line-height:1.7;margin-bottom:28px}
.why-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;
  padding:22px;background:#fff;border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 10px 30px rgba(13,42,58,.06);
}
.why-stat b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:1.8rem;color:var(--navy);line-height:1;
}
.why-stat span{font-size:.84rem;color:#6b7c87;font-weight:600;display:block;margin-top:6px}

.why-features{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--rule);border-radius:14px;background:#fff;
  box-shadow:0 14px 40px rgba(13,42,58,.06);overflow:hidden;
}
.why-feature{
  padding:32px 30px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:background .2s ease;
}
.why-feature:nth-child(2n){border-right:0}
.why-feature:nth-last-child(-n+2){border-bottom:0}
.why-feature:hover{background:linear-gradient(180deg,rgba(30,143,196,.04),transparent 60%)}
.why-num{
  font-family:var(--serif);font-weight:600;font-size:2.2rem;
  color:var(--cyan);line-height:1;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:8px;
}
.why-num small{font-size:.7rem;color:#94a8b3;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.why-feature h3{
  font-family:var(--serif);font-weight:600;font-size:1.3rem;
  color:var(--navy);margin:6px 0 4px;letter-spacing:-.005em;
}
.why-feature p{color:#4a5862;font-size:.95rem;line-height:1.6;margin:0}

@media (max-width:980px){
  .why-grid{grid-template-columns:1fr;gap:40px}
  .why-intro{position:static}
  .why-features{grid-template-columns:1fr}
  .why-feature{border-right:0;border-bottom:1px solid var(--rule)}
  .why-feature:nth-last-child(2){border-bottom:1px solid var(--rule)}
  .why-feature:last-child{border-bottom:0}
  .hero.hero-v4{padding:64px 0 80px}
  .hero-photo-frame{transform:none}
  .hero-floating,.hero-cert-pair{transform:none}
}

/* ============================================================
   Cinematic hero — full-bleed photo with overlapping search card
   ============================================================ */
.hero.hero-cinema{
  background:#fff;padding:0;border:0;overflow:visible;
}
.hero.hero-cinema:before,.hero.hero-cinema:after{display:none;content:none}
.hero-cinema .container{padding-top:0;padding-bottom:0}

.cinema-photo{
  position:relative;width:100%;height:520px;overflow:hidden;
  background:#0d2a3a;
}
.cinema-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);
}
.cinema-photo:after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,38,54,0) 50%, rgba(8,38,54,.55) 100%),
    linear-gradient(110deg, rgba(8,38,54,.30) 0%, rgba(8,38,54,0) 45%);
}
.cinema-badge{
  position:absolute;top:28px;right:28px;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-radius:999px;padding:10px 20px 10px 12px;
  box-shadow:0 14px 30px rgba(0,0,0,.20),0 0 0 1px rgba(255,255,255,.6);
}
.cinema-badge img{height:30px;width:30px;object-fit:contain;display:block}
.cinema-badge span{
  font-size:.78rem;font-weight:800;color:var(--navy);
  letter-spacing:.04em;
}

.cinema-container{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.cinema-card{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  margin-top:-160px;position:relative;z-index:3;
  padding:56px 72px 56px;width:min(960px,calc(100% - 36px));
  box-shadow:0 50px 100px rgba(13,42,58,.20),0 14px 30px rgba(13,42,58,.10);
}
.cinema-card .hero-eyebrow{
  display:inline-block;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);font-weight:800;
  padding:6px 14px;border:1px solid rgba(30,143,196,.25);border-radius:999px;
  background:rgba(30,143,196,.06);
}
.cinema-card h1{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.05;
  margin:18px 0 30px;letter-spacing:-.012em;
}
.cinema-search{
  max-width:100%;width:100%;
  padding:9px 9px 9px 24px;border-radius:999px;
  background:#fff;border:1px solid var(--rule);
  box-shadow:0 14px 28px rgba(13,42,58,.06);
  display:flex;align-items:center;gap:12px;
  transition:box-shadow .2s,border-color .2s,transform .12s;
}
.cinema-search:hover{box-shadow:0 18px 36px rgba(30,143,196,.10);border-color:#cfe1ea}
.cinema-search:focus-within{
  border-color:var(--cyan);
  box-shadow:0 18px 36px rgba(30,143,196,.18),0 0 0 5px rgba(30,143,196,.10);
  transform:translateY(-1px);
}
.cinema-search .hs-icon{color:var(--cyan);font-size:1.45rem;line-height:1;flex:0 0 auto}
.cinema-search input{
  flex:1;border:0;outline:0;font-size:1.06rem;padding:16px 0;
  background:transparent;color:#1a2c39;font-family:inherit;
}
.cinema-search input::placeholder{color:#94a8b3}
.cinema-search .btn-primary{padding:14px 28px;font-size:.84rem}
.cinema-card .hero-chips{margin:18px 0 0}
.cinema-card .hero-chip{font-size:.84rem;padding:7px 14px}

.cinema-stats{
  width:min(960px,calc(100% - 36px));margin:36px auto 0;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:30px 8px 56px;
}
.cinema-stats > div{display:flex;align-items:baseline;gap:12px}
.cinema-stats b{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.65rem;letter-spacing:-.01em;line-height:1;
}
.cinema-stats span{color:#6b7c87;font-size:.92rem;font-weight:500}
.cs-sep{
  display:inline-block;width:1px;height:18px;background:var(--rule);
}

@media (max-width:980px){
  .cinema-photo{height:380px}
  .cinema-card{padding:36px 28px 36px;margin-top:-120px;border-radius:10px}
  .cinema-card h1{font-size:clamp(1.8rem,6vw,2.4rem);margin:14px 0 22px}
  .cinema-search{flex-wrap:wrap;padding-left:18px}
  .cinema-search .btn-primary{flex:1;min-width:120px}
  .cinema-badge{top:14px;right:14px;padding:8px 14px 8px 10px}
  .cinema-badge img{height:24px;width:24px}
  .cinema-stats{padding:22px 8px 40px;gap:16px;justify-content:flex-start}
  .cs-sep{display:none}
}

/* The old hero-v4 styles still exist but are unused on this page now.
   Keep them for /offerte and other pages that don't use cinema. */

/* ============================================================
   v6 — restored dark two-column hero (no photo, CSS tray-visual)
   ============================================================ */
.hero.hero-dark{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(ellipse 800px 500px at 92% -10%, rgba(30,143,196,.32), transparent 55%),
    radial-gradient(ellipse 600px 400px at 0% 100%, rgba(30,143,196,.18), transparent 60%),
    linear-gradient(135deg, #082636 0%, #0b3a4e 50%, #0e4f6a 100%);
  border:0;padding:0;
}
.hero.hero-dark:before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  pointer-events:none;
}
.hero.hero-dark:after{display:none;content:none}
.hero-dark .hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
  padding:96px 0 100px;
}

/* Left column */
.hero-dark .hero-eyebrow{
  display:inline-block;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:#a8e0f3;font-weight:800;
  padding:6px 14px;border:1px solid rgba(168,224,243,.30);border-radius:999px;
  background:rgba(30,143,196,.14);margin-bottom:20px;
}
.hero-dark h1{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.05;letter-spacing:-.012em;
  margin:0 0 18px;text-align:left;
}
.hero-dark .hero-lead{
  color:#cfe1ea;font-size:1.06rem;line-height:1.65;
  max-width:560px;margin:0 0 30px;
}
.hero-dark-search{
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:999px;
  padding:9px 9px 9px 24px;max-width:580px;
  box-shadow:0 24px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.5);
  transition:box-shadow .2s,transform .12s;
}
.hero-dark-search:focus-within{
  box-shadow:0 24px 60px rgba(30,143,196,.45),0 0 0 5px rgba(30,143,196,.22);
  transform:translateY(-1px);
}
.hero-dark-search .hs-icon{color:var(--cyan);font-size:1.45rem;flex:0 0 auto;line-height:1}
.hero-dark-search input{
  flex:1;border:0;outline:0;font-size:1.04rem;padding:16px 0;
  background:transparent;color:#1a2c39;font-family:inherit;
}
.hero-dark-search input::placeholder{color:#94a8b3}
.hero-dark-search .btn-primary{padding:14px 28px;font-size:.84rem}

.hero-dark .hero-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.hero-dark .hero-chip-label{font-size:.84rem;color:#aac4d0;font-weight:600}
.hero-dark .hero-chip{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#e7f2f7;font-weight:700;font-size:.84rem;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  font-family:inherit;
  transition:background .15s,border-color .15s,transform .12s;
}
.hero-dark .hero-chip:hover{
  background:var(--cyan);border-color:var(--cyan);color:#fff;
  transform:translateY(-1px);
}

.hero-dark .hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:30px 0 0;max-width:580px;
}
.hero-dark .stat{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(6px);
}
.hero-dark .stat b{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:1.55rem;line-height:1.05;display:block;
}
.hero-dark .stat span{color:#a8c0cc;font-size:.82rem;font-weight:600}

.hero-dark .actions{margin-top:28px;gap:12px}
.hero-dark .btn-amber{
  background:var(--green);color:#fff;border-radius:999px;
  padding:14px 26px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;font-size:.86rem;
  box-shadow:0 14px 28px rgba(51,160,90,.30);
}
.hero-dark .btn-amber:hover{background:var(--green-700);color:#fff}
.hero-dark .btn-light{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.30);
  border-radius:999px;padding:14px 26px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-size:.86rem;
}
.hero-dark .btn-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}

/* Right column — CSS tray-visual + floating chips */
.hero-dark .hero-visual{
  position:relative;min-height:480px;
  border-radius:24px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(168,224,243,.18), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 80px rgba(0,0,0,.36);
}
.hero-dark .tray-wire{
  position:absolute;left:9%;right:9%;height:11px;border-radius:999px;
  background:linear-gradient(90deg,#dbe7ec,#fff,#aac2cc);
  box-shadow:0 10px 22px rgba(0,0,0,.30);
}
.hero-dark .tray-wire:nth-of-type(1){top:24%;transform:skewY(-8deg)}
.hero-dark .tray-wire:nth-of-type(2){top:36%;transform:skewY(-8deg)}
.hero-dark .tray-wire:nth-of-type(3){top:48%;transform:skewY(-8deg)}
.hero-dark .tray-wire:nth-of-type(4){top:60%;transform:skewY(-8deg)}
.hero-dark .tray-wire:nth-of-type(5){top:72%;transform:skewY(-8deg)}
.hero-dark .tray-rib{
  position:absolute;top:14%;bottom:14%;width:9px;border-radius:99px;
  background:linear-gradient(#fff,#b9cdd5);transform:rotate(18deg);
  box-shadow:0 8px 16px rgba(0,0,0,.20);
}
.hero-dark .tray-rib.r1{left:18%}
.hero-dark .tray-rib.r2{left:38%}
.hero-dark .tray-rib.r3{left:58%}
.hero-dark .tray-rib.r4{left:78%}

.hero-dark .floating-label{
  position:absolute;top:24px;right:24px;left:auto;bottom:auto;
  background:#fff;color:var(--navy);
  border-radius:14px;padding:14px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.30);font-weight:800;
  max-width:240px;
}
.hero-dark .floating-label small{
  display:block;color:var(--cyan);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;
}

.hero-dark .floating-codes{
  position:absolute;bottom:24px;left:24px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
  min-width:240px;
}
.hero-dark .fc-row{
  display:flex;align-items:center;gap:10px;font-size:.85rem;
  padding:5px 0;border-bottom:1px solid rgba(13,42,58,.08);
}
.hero-dark .fc-row:last-child{border-bottom:0}
.hero-dark .fc-code{
  background:var(--navy);color:#fff;padding:3px 9px;border-radius:4px;
  font-weight:800;letter-spacing:.04em;font-size:.74rem;font-family:'Inter',sans-serif;
}
.hero-dark .fc-desc{color:#4a5862;font-weight:600}

@media (max-width:980px){
  .hero-dark .hero-inner{grid-template-columns:1fr;gap:38px;padding:64px 0 72px}
  .hero-dark .hero-visual{min-height:340px}
  .hero-dark .hero-stats{grid-template-columns:1fr 1fr}
  .hero-dark .hero-stats .stat:last-child{grid-column:1 / -1}
  .hero-dark-search{flex-wrap:wrap}
  .hero-dark-search .btn-primary{flex:1}
}

/* ============================================================
   v7 — smooth section transitions (no hard color edges)
   ============================================================ */

/* HERO → ASSORTIMENT (light paper) — soft fade-down to paper colour
   so the dark hero melts seamlessly into the next light section. */
.hero.hero-dark{position:relative;isolation:isolate}
.hero.hero-dark::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:140px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,
    rgba(238,244,247,0) 0%,
    rgba(238,244,247,.05) 30%,
    rgba(238,244,247,.35) 65%,
    rgba(238,244,247,.95) 100%);
}

/* FEATURES-ROW: now sits between Assortiment (light) and Why-section (light).
   Soft dark gradient at top + bottom so the dark photo tiles don't slam in
   against the surrounding light sections. */
.section.features-row{
  position:relative;background:#082636;isolation:isolate;
}
.section.features-row::before{
  content:"";position:absolute;left:0;right:0;top:-1px;
  height:80px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(238,244,247,.45) 45%,
    rgba(238,244,247,0) 100%);
}
.section.features-row::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:120px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,1) 100%);
}
/* Slightly stronger overlay at the top of each tile for visual
   continuity with the hero's dark fade. */
.feature-tile:before{
  background:linear-gradient(180deg,
    rgba(8,38,54,.62) 0%,
    rgba(8,38,54,.45) 38%,
    rgba(8,38,54,.78) 100%) !important;
}
.feature-tile:hover:before{
  background:linear-gradient(180deg,
    rgba(8,38,54,.45) 0%,
    rgba(8,38,54,.30) 40%,
    rgba(8,38,54,.65) 100%) !important;
}

/* SECTION.ALT (categories): smooth top-to-bottom paper gradient,
   meeting the features-row fade at the top and the why-section
   gradient at the bottom. */
.section.alt{
  background:linear-gradient(180deg,
    rgba(238,244,247,1) 0%,
    rgba(238,244,247,.7) 50%,
    #fff 100%) !important;
}

/* WHY-SECTION: subtle warmer gradient that fades back to white
   so the team section flows seamlessly. */
.section.why-section{
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(30,143,196,.06), transparent 60%),
    linear-gradient(180deg,
      #fff 0%,
      rgba(238,244,247,.55) 35%,
      rgba(238,244,247,.55) 70%,
      #fff 100%) !important;
  border-top:0;border-bottom:0;
}

/* TEAM-SECTION: white fading down to a hint of paper before the
   footer takes over. */
.team-section{
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(238,244,247,.5) 75%,
    rgba(238,244,247,.85) 100%);
  border-top:0;
}

/* FOOTER: soft fade-in at the top so the dark/light transition
   feels gradual, not slammed-in. */
.footer{position:relative;isolation:isolate}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:-40px;height:80px;
  background:linear-gradient(180deg,
    rgba(238,244,247,0) 0%,
    rgba(238,244,247,.6) 30%,
    rgba(6,33,47,.0) 60%,
    rgba(6,33,47,.5) 100%);
  pointer-events:none;z-index:1;
}

/* Reduce the previously sharp .features-row top/bottom edges */
.section.features-row{padding:0;margin:0}

/* ============================================================
   Shop layout (CCNed-inspired) — kabelgoten.html
   ============================================================ */
.shop-hero{
  background:linear-gradient(180deg,#fff 0%, var(--paper) 100%);
  border-bottom:1px solid var(--rule);padding:36px 0 32px;
}
.shop-hero .breadcrumbs{
  font-size:.86rem;color:#6b7c87;margin-bottom:10px;
}
.shop-hero .breadcrumbs a{color:var(--cyan);font-weight:600}
.shop-hero h1{
  font-family:var(--serif);color:var(--navy);font-weight:600;
  font-size:clamp(1.9rem,3vw,2.6rem);margin:0 0 8px;letter-spacing:-.01em;
}
.shop-hero p{color:#4a5862;max-width:700px;margin:0;font-size:.98rem}

.shop-section{padding:32px 0 96px;background:var(--paper)}
.shop-layout{
  display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;
}

/* Sidebar */
.shop-sidebar{
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:18px 20px;position:sticky;top:96px;align-self:start;
  box-shadow:0 4px 14px rgba(13,42,58,.04);
}
.shop-search{
  position:relative;display:flex;align-items:center;gap:10px;
  border:1px solid var(--rule);border-radius:8px;padding:0 14px;
  margin-bottom:18px;background:var(--paper);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.shop-search:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(30,143,196,.12);background:#fff;
}
.shop-search .hs-icon{color:var(--cyan);font-size:1.15rem;flex:0 0 auto}
.shop-search input{
  border:0;background:transparent;flex:1;padding:11px 0;
  font:inherit;color:#1a2c39;outline:0;
}
.shop-search input::placeholder{color:#94a8b3}

.filter-block{
  border-bottom:1px solid var(--rule);padding:14px 0;
}
.filter-block:last-of-type{border-bottom:0}
.filter-block summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;color:var(--navy);font-size:.96rem;
  padding:2px 0;user-select:none;
}
.filter-block summary::-webkit-details-marker{display:none}
.filter-block .caret{
  color:#6b7c87;transition:transform .2s ease;font-size:1rem;
}
.filter-block[open] .caret{transform:rotate(90deg);color:var(--cyan)}
.filter-list{
  display:flex;flex-direction:column;gap:2px;margin-top:10px;
  max-height:260px;overflow-y:auto;
}
.filter-list::-webkit-scrollbar{width:4px}
.filter-list::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
.filter-opt{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:6px 4px;border-radius:6px;font-size:.9rem;color:#3a4a55;
  transition:background .12s ease,color .12s ease;
}
.filter-opt:hover{background:var(--paper);color:var(--navy)}
.filter-opt input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;border:1.5px solid #b9c8d1;border-radius:50%;
  flex:0 0 16px;position:relative;background:#fff;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.filter-opt input[type="radio"]:checked{
  border-color:var(--cyan);background:var(--cyan);
  box-shadow:inset 0 0 0 3px #fff;
}
.filter-opt span{flex:1}
.filter-opt em{
  font-style:normal;color:#94a8b3;font-size:.78rem;font-weight:700;
}

.btn-reset{
  margin-top:18px;width:100%;padding:10px 14px;
  background:transparent;border:1px solid var(--rule);
  color:var(--navy);font-weight:700;font-size:.86rem;
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:border-color .15s,color .15s;
}
.btn-reset:hover{border-color:var(--cyan);color:var(--cyan)}

/* Toolbar */
.shop-main{min-width:0}
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  padding:14px 18px;margin-bottom:20px;
  box-shadow:0 4px 14px rgba(13,42,58,.04);
}
.shop-toolbar #resultCount{
  font-weight:800;color:var(--navy);font-size:.95rem;
}
.shop-sort{display:flex;align-items:center;gap:10px}
.shop-sort label{
  font-size:.86rem;color:#6b7c87;font-weight:600;
}
.shop-sort select{
  border:1px solid var(--rule);border-radius:8px;padding:8px 32px 8px 12px;
  background:#fff;font:inherit;color:#1a2c39;cursor:pointer;
}
.shop-sort select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(30,143,196,.12)}

/* Grid + cards */
.shop-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}

.pc-card{
  background:#fff;border:1px solid var(--rule);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .15s ease,box-shadow .2s ease,transform .15s ease;
}
.pc-card:hover{
  border-color:#cfe1ea;
  box-shadow:0 16px 32px rgba(13,42,58,.10);
  transform:translateY(-2px);
}
.pc-imgwrap{
  position:relative;display:block;background:#fff;
  aspect-ratio:5/4;overflow:hidden;
}
.pc-brand{
  position:absolute;bottom:12px;right:14px;z-index:2;
  height:26px;width:auto;opacity:.85;
}
.pc-img{
  position:absolute;inset:0;width:100%;height:100%;
  padding:6px 0 6px 6px;background:#fff;overflow:hidden;
}
.pc-img img{
  width:100%;height:100%;
  object-fit:contain;object-position:top right;
  display:block;
  transition:transform .35s ease;
}
.pc-card:hover .pc-img img{transform:scale(1.03)}
.pc-card:hover .pc-img img{transform:scale(1.04)}
.pc-img-empty{background:linear-gradient(135deg,var(--paper),#fff)}

.pc-body{
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;flex:1;
  border-top:1px solid var(--rule);
}
.pc-code{
  display:inline-flex;width:max-content;
  background:var(--navy);color:#fff;border-radius:4px;
  padding:3px 9px;font-weight:800;letter-spacing:.04em;font-size:.74rem;
  font-family:'Inter',sans-serif;
}
.pc-title{
  font-family:'Inter',sans-serif;font-weight:700;font-size:1rem;
  color:#1a2c39;margin:4px 0 0;line-height:1.3;letter-spacing:0;
}
.pc-title a{color:inherit}
.pc-title a:hover{color:var(--cyan)}
.pc-cat{
  margin:0;color:#6b7c87;font-size:.82rem;font-weight:600;
}
/* Matchende-accessoire chip op de product-kaart, alleen zichtbaar als
   de zoekquery een bevestiging/accessoire matcht (bv. "Plafondpendel"). */
.pc-acc-matches{
  display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 4px;
}
.pc-acc-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#e8f7ee,#d3eedc);
  color:#0e6b34;border:1px solid #b8ddc6;
  padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;
  line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-acc-chip strong{color:#06441f;font-weight:800;font-size:.74rem}
.pc-acc-chip .pc-acc-ic{font-size:.7rem;line-height:1;opacity:.85}
.pc-price{
  margin-top:auto;padding-top:14px;
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.45rem;letter-spacing:-.005em;line-height:1.1;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
}
.pc-unit{
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:600;
  color:#6b7c87;letter-spacing:0;
}
.pc-tax{
  display:block;width:100%;font-family:'Inter',sans-serif;
  font-weight:600;font-size:.58rem;color:#94a8b3;
  letter-spacing:.07em;text-transform:uppercase;margin-top:2px;
  opacity:.85;
}
.pc-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:14px;
}
.btn-pc-detail{
  font-weight:700;color:var(--cyan);font-size:.88rem;
}
.btn-pc-detail:hover{color:var(--cyan-700);text-decoration:underline}
.btn-pc-add{
  width:36px;height:36px;border-radius:50%;border:0;
  background:var(--cyan);color:#fff;font-size:1.3rem;font-weight:800;
  cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,transform .15s ease;
  box-shadow:0 8px 18px rgba(30,143,196,.30);
}
.btn-pc-add:hover{background:var(--cyan-700);transform:scale(1.06)}

@media (max-width:1100px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:840px){
  .shop-layout{grid-template-columns:1fr}
  .shop-sidebar{position:static;order:0}
  .shop-main{order:1}
}
@media (max-width:520px){.shop-grid{grid-template-columns:1fr}}

/* ============================================================
   v8 — material picker, side-price, header search-pill, vanaf-label
   ============================================================ */

/* Image wrapper now needs position:relative for absolute .pc-img */
.pc-imgwrap{position:relative}
.pc-from{font-size:.75rem;font-weight:600;color:#6b7c87;letter-spacing:.04em;text-transform:uppercase;margin-right:4px;font-family:'Inter',sans-serif;vertical-align:baseline}

/* Material picker on detail page */
.mat-picker{
  display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 28px;
  padding:10px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;
}
.mat-pill{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:10px 16px;border-radius:10px;
  border:1px solid var(--rule);background:#fff;
  text-decoration:none;color:#1a2c39;
  transition:border-color .15s,box-shadow .15s,transform .12s;
  min-width:140px;
}
.mat-pill:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,143,196,.12)}
.mat-pill .mp-label{font-weight:700;font-size:.92rem;color:#1a2c39}
.mat-pill .mp-price{font-size:.84rem;color:#6b7c87;font-weight:600}
.mat-pill.is-active{
  background:var(--navy);border-color:var(--navy);
  box-shadow:0 8px 16px rgba(11,58,78,.18);
}
.mat-pill.is-active .mp-label{color:#fff}
.mat-pill.is-active .mp-price{color:#9bc4d2}

/* H1 material annotation */
.h1-mat{
  display:inline-block;font-family:var(--serif);
  font-style:italic;color:var(--cyan);font-weight:500;
  font-size:.55em;margin-left:8px;letter-spacing:0;
}

/* Side price block on detail page */
.side-price{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color:#fff;border-radius:12px;padding:18px 20px;
  display:flex;flex-direction:column;gap:4px;margin:0 0 6px;
}
.sp-label{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9bc4d2;font-weight:800;
}
.sp-amount{
  font-family:var(--serif);font-weight:600;font-size:2.2rem;line-height:1.05;
  letter-spacing:-.01em;color:#fff;margin-top:4px;
}
.sp-amount-sm{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:#fff;margin-top:4px}
.sp-unit{font-size:.85rem;color:#cfe1ea;font-weight:600;margin-top:2px}
.sp-unit small{color:#9bc4d2;font-weight:500}

/* Header search trigger — clearly visible pill-style */
.header-search-trigger{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 12px 9px 14px;
  background:#fff;border:1px solid var(--rule);border-radius:999px;
  color:#6b7c87;font:inherit;font-size:.92rem;cursor:pointer;
  min-width:280px;font-family:'Inter',sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.header-search-trigger:hover{
  border-color:var(--cyan);color:var(--navy);
  box-shadow:0 4px 14px rgba(30,143,196,.12);
}
.header-search-trigger .hst-icon{
  color:var(--cyan);font-size:1.1rem;line-height:1;flex:0 0 auto;
}
.header-search-trigger .hst-text{
  flex:1;text-align:left;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-search-trigger .hst-kbd{
  display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
}
.header-search-trigger kbd{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;font-size:.7rem;font-weight:700;
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:1px 6px;color:#6b7c87;border-bottom-width:1.5px;
}

@media (max-width:1100px){
  .header-search-trigger .hst-kbd{display:none}
  .header-search-trigger{min-width:auto;padding:9px 14px}
  .header-search-trigger .hst-text{display:none}
}

/* Hide the top contact bar (email/phone) globally */
.topbar{display:none !important}

/* ============================================================
   Downloads page — brochure cover cards
   ============================================================ */
.dl-section{padding:36px 0 64px;background:var(--paper)}
.dl-group{margin-bottom:54px}
.dl-group:last-child{margin-bottom:0}
.dl-group-head{margin:0 0 22px}
.dl-group-head h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(1.55rem,2.4vw,2.1rem);margin:0 0 6px;letter-spacing:-.005em;
}
.dl-group-head p{color:#6b7c87;margin:0;font-size:.95rem}

.dl-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px;
  padding:8px 0 28px; /* room for the page-stack/shadow on the right + bottom */
}
@media (max-width:1100px){.dl-grid{grid-template-columns:repeat(3,1fr);gap:30px 26px}}
@media (max-width:780px){.dl-grid{grid-template-columns:repeat(2,1fr);gap:30px 24px}}
@media (max-width:520px){.dl-grid{grid-template-columns:1fr;gap:30px}}

/* ==========================================================
   BOOK CARD — realistic 3D book look
   ========================================================== */
.dl-card{
  position:relative;background:#fff;
  border-radius:3px 10px 10px 3px;
  display:flex;flex-direction:column;gap:0;overflow:visible;
  margin:6px 14px 14px 6px;     /* breathing room for spine + page-stack + shadow */
  transform:perspective(1400px) rotateY(-4deg);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease;
  /* Layered shadow — ground shadow + ambient depth */
  box-shadow:
    /* page-stack on right edge */
    1px 0 0 #f7faec00,
    /* ground shadow */
    8px 14px 22px rgba(13,42,58,.20),
    16px 26px 38px rgba(13,42,58,.10),
    0 2px 4px rgba(0,0,0,.06);
}
.dl-card:hover{
  transform:perspective(1400px) rotateY(-1deg) translateY(-4px);
  box-shadow:
    8px 14px 22px rgba(13,42,58,.20),
    20px 32px 56px rgba(30,143,196,.26),
    0 2px 4px rgba(0,0,0,.08);
}

/* ----- COVER (front of book) ----- */
.dl-cover-link{display:block;position:relative;overflow:hidden;border-radius:3px 10px 0 0}
.dl-cover{
  aspect-ratio:450/636;background:#eef4f7;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--rule);overflow:hidden;
  position:relative;
}
.dl-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.dl-card:hover .dl-cover img{transform:scale(1.03)}

/* SPINE — wide dark binding strip + raised stitching ridge */
.dl-cover::before{
  content:"";position:absolute;top:0;bottom:0;left:0;
  width:22px;z-index:3;pointer-events:none;
  background:
    /* the bind groove (thin dark line right where the pages enter the spine) */
    linear-gradient(90deg, transparent 16px, rgba(0,0,0,.45) 16px, rgba(0,0,0,.45) 17px, transparent 18px),
    /* main spine darkening */
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.30) 25%,
      rgba(0,0,0,.10) 60%,
      rgba(0,0,0,.02) 90%,
      transparent 100%);
}
/* Spine sheen catching the light — bright vertical stripe near the binding */
.dl-cover::after{
  content:"";position:absolute;top:0;bottom:0;left:18px;
  width:2px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 8%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.25) 92%,
    rgba(255,255,255,0) 100%);
  filter:blur(.4px);
}

/* ----- PAGE EDGES on the right side (visible stack) ----- */
.dl-card .dl-body{position:relative}
/* Top + bottom striped page-edge effect spanning full card height */
.dl-card:before{
  content:"";position:absolute;top:2px;bottom:2px;right:-9px;
  width:9px;z-index:1;pointer-events:none;border-radius:0 4px 4px 0;
  background:
    repeating-linear-gradient(180deg,
      #ffffff 0px,#ffffff 2px,
      #ecf0f3 2px,#ecf0f3 3px,
      #d8dfe4 3px,#d8dfe4 4px),
    linear-gradient(90deg,#fff,#e1e7eb 50%,#c4cdd3);
  background-blend-mode:multiply;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.6),
    inset 0 -2px 1px rgba(0,0,0,.08),
    2px 4px 6px rgba(0,0,0,.10);
  transform:skewY(-1deg);
}
/* Subtle bottom shadow (like the book sitting on a soft surface) */
.dl-card:after{
  content:"";position:absolute;left:6%;right:-3%;bottom:-12px;
  height:14px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center top,
    rgba(13,42,58,.22), transparent 70%);
  filter:blur(2px);
}

/* Cover gloss — a faint diagonal sheen across the cover */
.dl-cover-link{position:relative}
.dl-cover-link:before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 35%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 65%);
  border-radius:3px 10px 0 0;
}
.dl-cover-empty{
  background:linear-gradient(135deg,#1a6b8c,#0b3a4e);color:#cfe1ea;
  font-family:var(--serif);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;text-align:center;padding:20px;
}

.dl-body{
  padding:18px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;
}
.dl-type{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
}
.dl-title{
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:1.02rem;color:#1a2c39;margin:2px 0 0;line-height:1.3;
}
.dl-title a{color:inherit}
.dl-title a:hover{color:var(--cyan)}
.dl-sub{
  font-size:.84rem;color:#6b7c87;margin:0;line-height:1.4;
}
.dl-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.dl-tag{
  background:var(--paper);color:var(--navy-700);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:4px;
}
.dl-btn{
  margin-top:auto;padding-top:14px;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cyan);font-weight:800;font-size:.86rem;
}
.dl-btn span{
  display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--cyan);color:#fff;font-size:.75rem;
}
.dl-btn:hover{color:var(--cyan-700)}

/* ============================================================
   STP-files login banner (under Documentatie)
   ============================================================ */
.stp-login{margin-top:46px}
.stp-head{margin:0 0 22px}
.stp-eyebrow{
  display:inline-block;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:6px;
}
.stp-head h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(1.55rem,2.4vw,2.1rem);margin:0 0 6px;letter-spacing:-.005em;
}
.stp-head p{color:#6b7c87;margin:0;font-size:.95rem}

.stp-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
@media (max-width:780px){.stp-grid{grid-template-columns:1fr}}

.stp-card{
  display:flex;flex-direction:column;gap:10px;
  padding:32px 32px 28px;border-radius:14px;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.stp-card:hover{transform:translateY(-3px)}
.stp-card .stp-ic{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;font-size:1.5rem;font-weight:900;
  margin-bottom:8px;
}
.stp-card .stp-title{
  font-family:var(--serif);font-weight:600;font-size:1.45rem;
  letter-spacing:-.005em;line-height:1.15;
}
.stp-card p{margin:0;font-size:.95rem;line-height:1.55}
.stp-card .stp-btn{
  margin-top:auto;padding-top:18px;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;
}

/* Primary card — solid navy with cyan accent */
.stp-card-primary{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-700) 100%);
  color:#fff;
  box-shadow:0 14px 30px rgba(11,58,78,.22);
}
.stp-card-primary:hover{
  color:#fff;
  box-shadow:0 22px 44px rgba(11,58,78,.32);
}
.stp-card-primary .stp-ic{background:rgba(255,255,255,.15);color:#fff}
.stp-card-primary .stp-title{color:#fff}
.stp-card-primary p{color:#cfe1ea}
.stp-card-primary .stp-btn{color:#fff}
.stp-card-primary:after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,143,196,.32),transparent 70%);
  pointer-events:none;
}

/* Secondary card — light, calls to offerte */
.stp-card-secondary{
  background:#fff;border:1px solid var(--rule);color:#1a2c39;
  box-shadow:0 8px 24px rgba(13,42,58,.06);
}
.stp-card-secondary:hover{
  border-color:var(--cyan);color:#1a2c39;
  box-shadow:0 18px 36px rgba(30,143,196,.16);
}
.stp-card-secondary .stp-ic{background:var(--paper);color:var(--cyan)}
.stp-card-secondary .stp-title{color:var(--navy)}
.stp-card-secondary p{color:#4a5862}
.stp-card-secondary .stp-btn-light{color:var(--cyan)}

/* ============================================================
   PDP — modern product detail page
   ============================================================ */
.pdp{max-width:1200px;margin:0 auto;padding:0 8px}
.pdp-crumbs{font-size:.86rem;color:#6b7c87;margin:24px 0 18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pdp-crumbs a{color:var(--cyan);font-weight:600}
.pdp-crumbs span{color:#b9c8d1}
.pdp-crumbs strong{color:var(--navy);font-weight:800}
.pdp-crumbs em{font-style:normal;color:var(--cyan)}

/* Title bar (full width) */
.pdp-titlebar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:18px 0 28px;
  padding-bottom:22px;border-bottom:1px solid var(--rule);
}
.pdp-code-chip{
  display:inline-block;background:var(--navy);color:#fff;
  padding:5px 12px;border-radius:5px;font-weight:800;letter-spacing:.04em;
  font-size:.84rem;font-family:'Inter',sans-serif;margin-bottom:10px;
}
.pdp-titlebar h1.pdp-title{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;
  letter-spacing:-.012em;margin:0;
}
.pdp-titlebar .pdp-dim{
  color:#6b7c87;font-family:'Inter',sans-serif;font-style:normal;
  font-weight:600;font-size:1rem;margin:6px 0 0;
}
.pdp-titleprice{display:flex;flex-direction:column;text-align:right;gap:2px}
.pdp-titleprice small{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#6b7c87;font-weight:700;
}
.pdp-titleprice strong{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:2rem;line-height:1;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:6px;justify-content:flex-end;
}
.pdp-titleprice strong span{font-family:'Inter',sans-serif;font-weight:600;font-size:.85rem;color:#6b7c87;letter-spacing:0}

/* Hero: 2-col — photo top-left, info+buy top-right */
.pdp-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:34px;align-items:start;margin-bottom:32px;
}
.pdp-gallery-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.pdp-photo{
  position:relative;background:#fff;margin:0;
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:0 8px 24px rgba(13,42,58,.06);
}
.pdp-photo-img{
  width:100%;height:100%;object-fit:contain;
  padding:18px;display:block;
}
/* When showing the original blue-background render, fill the frame edge-to-edge */
.pdp-photo-blue{
  background:linear-gradient(180deg,#cfe6ef,#5b9dc7);
  border-color:rgba(13,42,58,.10);
  padding:0;
}
.pdp-photo-blue .pdp-photo-img{
  padding:0;width:100%;height:100%;object-fit:cover;
}
.pdp-photo-blue .pdp-badge,
.pdp-photo-blue .pdp-brand{display:none}
/* Lead description under title */
.pdp-lead{
  color:#4a5862;font-size:1.05rem;line-height:1.6;
  max-width:840px;margin:0 0 28px;
}

/* Tech drawing card */
.pdp-tech{margin:0;display:flex;flex-direction:column;gap:10px}
.pdp-tech-frame{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  aspect-ratio:5/4;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:18px;box-shadow:0 8px 24px rgba(13,42,58,.06);
}
.pdp-tech-frame img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
}
.pdp-tech figcaption{
  font-size:.85rem;color:#6b7c87;font-weight:600;
  text-align:center;letter-spacing:.04em;
}
/* Solo tech drawing inside the hero left column */
.pdp-tech-solo{margin:0}
.pdp-tech-solo .pdp-tech-frame{
  aspect-ratio:5/4;padding:22px;
  background:linear-gradient(180deg,#fff 0%, #f7fafc 100%);
}

/* Materials + Dimensions side-by-side, full-width row under the hero */
.pdp-data{margin:0 0 32px}
.pdp-data-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:18px;align-items:start;
}
.pdp-data-block{
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:18px 20px;box-shadow:0 4px 12px rgba(13,42,58,.04);
}
.pdp-data-block .pdp-h2{margin:0 0 14px;font-size:1.05rem;font-weight:700;
  font-family:'Inter',sans-serif;color:var(--navy);letter-spacing:.04em;
  text-transform:uppercase;
}
.pdp-data-h3{
  font-family:'Inter',sans-serif;font-weight:800;color:var(--navy);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px;display:flex;align-items:baseline;gap:8px;
}
.pdp-data-h3 small{
  font-weight:600;color:#94a8b3;letter-spacing:.04em;font-size:.74rem;
  text-transform:none;
}

/* Compact materials/EAN table */
.pdp-mat-table-sm{font-size:.84rem}
.pdp-mat-table-sm thead th{padding:8px 12px;font-size:.78rem}
.pdp-mat-table-sm tbody td{padding:8px 12px;font-size:.86rem}
.pdp-mat-table-sm tbody td code{font-size:.8rem;padding:2px 6px}

/* Compact dimensions matrix */
.pdp-dim-sm .dim-matrix{font-size:.82rem}
.pdp-dim-sm .dim-matrix th,.pdp-dim-sm .dim-matrix td{padding:6px 8px;font-size:.78rem}
.pdp-dim-sm .dim-matrix thead th{font-size:.74rem}
.pdp-dim-sm .dim-matrix-wrap{margin:0;border-radius:10px}

@media (max-width:980px){.pdp-data-grid{grid-template-columns:1fr;gap:16px}}

/* Buy strip — material picker + price + CTA, full width card under data */
.pdp-buy-strip{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:22px 26px;margin:0 auto 48px;max-width:920px;
  box-shadow:0 8px 24px rgba(13,42,58,.06);
}
.pdp-buy-mats{margin-bottom:20px}
.pdp-buy-mats .pdp-mat-label{
  display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:800;margin-bottom:10px;
}
.pdp-buy-mats .pdp-mat-label em{color:var(--cyan);font-style:normal;font-weight:700;letter-spacing:.04em}
.pdp-buy-mats .mat-picker{margin:0;background:transparent;border:0;padding:0}

.pdp-buy-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;
  align-items:center;padding:18px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pdp-buy-price{display:flex;flex-direction:column;gap:4px}
.pdp-buy-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pdp-buy-strip .pdp-trust{
  display:flex;flex-wrap:wrap;gap:18px;list-style:none;padding:14px 0 0;margin:0;
  font-size:.84rem;color:#4a5862;font-weight:600;border-top:0;
}
.pdp-buy-strip .pdp-trust li{flex:1 1 220px}

@media (max-width:760px){
  .pdp-buy-row{grid-template-columns:1fr}
  .pdp-buy-cta{justify-content:flex-start}
  .pdp-buy-cta .btn-pdp-add{flex:1}
}

/* Side-blocks (legacy — only used in right column if needed) */
.pdp-side-block{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:18px 20px;margin-top:16px;
  box-shadow:0 4px 14px rgba(13,42,58,.04);
}
.pdp-side-title{
  font-family:'Inter',sans-serif;font-weight:800;color:var(--navy);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px;display:flex;align-items:baseline;gap:10px;
}
.pdp-side-title small{
  font-weight:600;color:#94a8b3;letter-spacing:.04em;font-size:.74rem;
  text-transform:none;
}
.pdp-side-foot{
  margin:8px 0 0;font-size:.8rem;color:#6b7c87;
}
.pdp-side-mark{
  background:var(--accent-2);color:#1a1a1a;padding:2px 7px;border-radius:4px;
  font-family:'Inter',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.04em;
}
.pdp-mat-table{width:100%;border-collapse:collapse}
.pdp-mat-table thead th{
  background:var(--paper);color:var(--navy);font-weight:800;
  text-align:left;padding:10px 14px;font-size:.86rem;
  border-bottom:1px solid var(--rule);
}
.pdp-mat-table tbody td{
  padding:12px 14px;border-bottom:1px solid var(--rule);font-size:.92rem;
}
.pdp-mat-table tbody tr:last-child td{border-bottom:0}
.pdp-mat-table tbody td strong{color:#1a2c39;font-weight:700}
.pdp-mat-table tbody td code{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;font-weight:700;
  color:var(--navy);font-size:.88rem;letter-spacing:.03em;
  background:var(--paper);padding:3px 8px;border-radius:5px;
}
.pdp-data-block .dim-matrix-wrap{margin:0}

@media (max-width:980px){
  .pdp-titlebar{flex-direction:column;align-items:stretch}
  .pdp-titleprice{text-align:left}
  .pdp-titleprice strong{justify-content:flex-start}
  .pdp-gallery-grid{grid-template-columns:1fr}
  .pdp-data-grid{grid-template-columns:1fr;gap:16px}
}
.pdp-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--navy);color:#fff;padding:5px 11px;border-radius:5px;
  font-weight:800;letter-spacing:.04em;font-size:.78rem;font-family:'Inter',sans-serif;
}
.pdp-brand{
  position:absolute;bottom:12px;right:14px;z-index:2;
  height:26px;width:auto;opacity:.9;
}
.pdp-meta-row{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:11px 14px;background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;
  font-size:.78rem;color:#4a5862;
}
.pdp-meta-row strong{color:var(--navy);font-weight:800;letter-spacing:.04em}

/* Info column */
.pdp-info{display:flex;flex-direction:column;gap:14px}
.pdp-family{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:800;
}
.pdp-title{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;
  letter-spacing:-.012em;margin:0;
}
.pdp-dim{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:#1a2c39;font-size:1.4rem;margin:0;letter-spacing:-.005em;
}
.pdp-dia{color:var(--cyan);font-style:normal;font-weight:600;letter-spacing:.04em}
.pdp-desc{color:#4a5862;font-size:1rem;line-height:1.6;margin:6px 0 12px;max-width:540px}

.pdp-mat-section{
  border-top:1px solid var(--rule);padding-top:18px;margin-top:6px;
}
.pdp-mat-label{
  display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:800;margin-bottom:10px;
}
.pdp-mat-label em{color:var(--cyan);font-style:normal;font-weight:700;letter-spacing:.04em}
.pdp-mat-section .mat-picker{margin-top:0;background:transparent;border:0;padding:0}

/* Buy block */
.pdp-buy{
  background:linear-gradient(180deg,#fff 0%, var(--paper) 100%);
  border:1px solid var(--rule);border-radius:16px;
  padding:24px;margin-top:8px;
  box-shadow:0 14px 30px rgba(13,42,58,.06);
}
.pdp-price-block{display:flex;flex-direction:column;gap:6px}
.pdp-price-label{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#6b7c87;font-weight:700;
}
.pdp-price-label strong{color:var(--navy);font-weight:800}
.pdp-price-amount{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:8px;
}
.pdp-price-amount small{
  font-family:'Inter',sans-serif;font-size:.95rem;color:#6b7c87;
  font-weight:600;letter-spacing:0;
}
.pdp-price-onreq{
  font-family:var(--serif);font-weight:600;color:var(--cyan);
  font-size:1.7rem;line-height:1;
}
.pdp-price-tax{
  font-size:.6rem;color:#94a8b3;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  opacity:.85;
}
.pdp-ean{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:.85rem;
}
.pdp-ean small{
  background:var(--paper);border:1px solid var(--rule);
  padding:3px 8px;border-radius:5px;color:#6b7c87;font-weight:800;
  font-size:.7rem;letter-spacing:.08em;
}
.pdp-ean code{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;color:var(--navy);
  font-weight:700;letter-spacing:.03em;font-size:.92rem;
}

/* Quantity stepper — sits between price-block and action buttons on the PDP */
.pdp-qty{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:20px;padding:14px 16px;
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.pdp-qty-label{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#6b7c87;font-weight:700;
  display:inline-flex;align-items:baseline;gap:6px;
}
.pdp-qty-label em{
  font-style:normal;color:var(--cyan);font-weight:800;letter-spacing:.04em;
  text-transform:lowercase;
}
.pdp-qty-stepper{
  display:inline-flex;align-items:stretch;
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(13,42,58,.04);
}
.pdp-qty-btn{
  width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  font-size:1.2rem;font-weight:900;color:var(--navy);font-family:inherit;
  display:grid;place-items:center;line-height:1;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.pdp-qty-btn:hover{background:#fff;color:var(--cyan)}
.pdp-qty-btn:active{transform:scale(.94)}
.pdp-qty-input{
  width:64px;height:42px;border:0;background:#fff;
  text-align:center;font-weight:800;color:var(--navy);font-size:1rem;
  font-family:inherit;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  -moz-appearance:textfield;appearance:textfield;
  outline:none;
}
.pdp-qty-input:focus{box-shadow:inset 0 0 0 2px rgba(34,164,216,.35)}
.pdp-qty-input:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

/* Live conversion + total — pieces × 3 m and running subtotal */
.pdp-qty-summary{
  margin-top:10px;padding:14px 16px;
  background:linear-gradient(180deg, rgba(34,164,216,.06) 0%, rgba(34,164,216,.02) 100%);
  border:1px solid rgba(34,164,216,.22);border-radius:12px;
  display:flex;flex-direction:column;gap:10px;
}
.pdp-qty-conv{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.92rem;color:#4a5862;
}
.pdp-qty-conv .pqs-ic{
  width:22px;height:22px;border-radius:6px;
  background:rgba(34,164,216,.16);color:var(--cyan);
  display:grid;place-items:center;font-size:.85rem;font-weight:900;
  flex-shrink:0;
}
.pdp-qty-conv .pqs-eq{font-weight:600;color:#6b7c87}
.pdp-qty-conv strong{
  font-weight:800;color:var(--navy);font-size:1.02rem;letter-spacing:-.01em;
}
.pdp-qty-conv .pqs-hint{
  margin-left:auto;font-size:.74rem;color:#94a8b3;
  letter-spacing:.04em;font-weight:500;font-style:italic;
}
.pdp-qty-total{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid rgba(34,164,216,.18);
}
.pdp-qty-total .pqs-lbl{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6b7c87;font-weight:800;
}
.pdp-qty-total strong{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.6rem;line-height:1;letter-spacing:-.015em;
  margin-left:auto;
}
.pdp-qty-total small{
  font-size:.66rem;color:#94a8b3;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
@media (max-width:520px){
  .pdp-qty-conv .pqs-hint{display:none}
  .pdp-qty-total strong{font-size:1.35rem}
}

.pdp-actions{
  display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;
}
.btn-pdp-add{
  flex:1;min-width:200px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;border-radius:12px;border:0;
  background:linear-gradient(180deg,#22a4d8,#1583b3);color:#fff;
  font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;
  letter-spacing:.02em;
  box-shadow:0 12px 24px rgba(20,131,179,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s,box-shadow .15s;
}
.btn-pdp-add:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(20,131,179,.42)}
.btn-pdp-add .bpa-plus{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:1.1rem;font-weight:900;
}
.btn-pdp-contact{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 22px;border-radius:12px;
  background:#fff;border:1px solid var(--rule);color:var(--navy);
  font-weight:700;font-size:.95rem;
  transition:border-color .15s,color .15s;
}
.btn-pdp-contact:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-pdp-contact .bpc-ic{color:var(--cyan);font-size:1.1rem}

.pdp-trust{
  list-style:none;padding:18px 0 0;margin:18px 0 0;
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:6px;
  font-size:.85rem;color:#4a5862;font-weight:600;
}

/* Tabs */
.pdp-tabs{
  display:flex;gap:8px;padding:8px;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;margin:24px 0;
  overflow-x:auto;scrollbar-width:none;
}
.pdp-tabs::-webkit-scrollbar{display:none}
.pdp-tab{
  flex:0 0 auto;padding:10px 18px;border-radius:9px;
  color:#4a5862;font-weight:700;font-size:.92rem;white-space:nowrap;
  transition:background .15s,color .15s;
}
.pdp-tab:hover{background:#fff;color:var(--navy)}
.pdp-tab.is-active{background:#fff;color:var(--navy);box-shadow:0 4px 10px rgba(13,42,58,.08)}

.pdp-section{margin:36px 0 48px;scroll-margin-top:96px}
.pdp-h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(1.6rem,2.4vw,2.1rem);margin:0 0 24px;letter-spacing:-.005em;
}

/* Specs grid */
.pdp-specs-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 16px rgba(13,42,58,.04);
}
.pdp-spec{
  display:flex;flex-direction:column;gap:4px;padding:18px 22px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pdp-spec:nth-child(2n){border-right:0}
.pdp-spec span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#6b7c87;font-weight:700}
.pdp-spec strong{font-weight:700;color:var(--navy);font-size:1rem}
.pdp-spec strong a{color:var(--cyan)}
.pdp-spec-ean{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;color:var(--navy);
  font-weight:700;font-size:.92rem;
}
.pdp-spec-wide{grid-column:1 / -1;border-right:0}
.pdp-spec-wide .taglist{margin-top:4px}

/* Docs grid */
.pdp-docs-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.pdp-doc-card{
  display:flex;flex-direction:column;gap:6px;
  padding:22px;background:#fff;border:1px solid var(--rule);border-radius:14px;
  color:#1a2c39;transition:border-color .15s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(13,42,58,.04);
}
.pdp-doc-card:hover{
  border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(30,143,196,.12);color:#1a2c39;
}
.pdp-doc-ic{font-size:1.7rem;color:var(--cyan);margin-bottom:6px}
.pdp-doc-card strong{color:var(--navy);font-size:1.05rem}
.pdp-doc-card small{color:#6b7c87;font-size:.85rem;line-height:1.45}

@media (max-width:980px){
  .pdp-hero{grid-template-columns:1fr;gap:24px}
  .pdp-specs-grid{grid-template-columns:1fr}
  .pdp-spec{border-right:0}
  .pdp-docs-grid{grid-template-columns:1fr}
  .pdp-meta-row{font-size:.78rem;gap:12px}
}

@media print{.topbar,.site-header,.search-overlay,.cookie,.footer,.actions,.filters{display:none!important}body{background:#fff}.card,.product-card{box-shadow:none}}

/* ===================================================================
   Montage page — instructievideo's (lite-youtube embed pattern)
=================================================================== */
.vid-section{
  background:linear-gradient(180deg,#f4f8fb 0%,#ffffff 70%);
  padding:54px 0 78px;
}
.vid-intro{
  max-width:780px;margin:0 auto 34px;text-align:center;
}
.vid-intro .eyebrow{
  display:inline-block;color:var(--cyan,#1e8fc4);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:900;margin-bottom:12px;
}
.vid-intro h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.7rem,2.4vw,2.2rem);
  margin:0 0 10px;color:var(--navy,#0d2a3a);line-height:1.15;
}
.vid-intro .muted{color:#5a6c78;font-size:1.02rem;line-height:1.55}

.vid-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;margin-bottom:48px;
}
.vid-card{
  background:#fff;border:1px solid var(--line,#e3eaef);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 4px 16px rgba(13,42,58,.05);
  transition:transform .18s ease, box-shadow .25s ease, border-color .15s ease;
}
.vid-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(13,42,58,.13);
  border-color:#cfdde6;
}
.vid-thumb{
  appearance:none;-webkit-appearance:none;border:0;padding:0;cursor:pointer;
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:#0d2a3a;overflow:hidden;
}
.vid-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease, filter .25s ease;
}
.vid-thumb:hover img{transform:scale(1.04);filter:brightness(.88)}
.vid-thumb:focus-visible{outline:3px solid var(--cyan,#1e8fc4);outline-offset:3px}
.vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:52px;display:grid;place-items:center;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));
  transition:transform .2s ease, filter .2s ease;
  pointer-events:none;
}
.vid-play svg{width:100%;height:100%;display:block}
.vid-thumb:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-duration{
  position:absolute;right:10px;bottom:10px;
  background:rgba(13,28,40,.86);color:#fff;
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
  padding:4px 8px;border-radius:8px;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.vid-frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
}
.vid-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.vid-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.vid-topic{
  display:inline-block;align-self:flex-start;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan,#1e8fc4);font-weight:900;
  background:rgba(30,143,196,.09);border-radius:99px;
  padding:4px 10px;
}
.vid-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.18rem;line-height:1.25;color:var(--navy,#0d2a3a);
  margin:2px 0 0;font-weight:700;
}
.vid-desc{color:#5a6c78;font-size:.94rem;line-height:1.55;margin:2px 0 0}

.vid-help{
  display:grid;grid-template-columns:1.4fr auto;gap:24px;align-items:center;
  background:linear-gradient(135deg,#0d2a3a 0%,#163a4f 100%);
  color:#fff;border-radius:22px;padding:30px 34px;
  box-shadow:0 18px 40px rgba(13,42,58,.18);
}
.vid-help .eyebrow{
  color:#7ed3ee;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:900;
}
.vid-help h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;margin:6px 0 6px;line-height:1.2;color:#fff;
}
.vid-help .muted{color:#bdd2dd;line-height:1.55;margin:0;max-width:540px}
.vid-help-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.vid-help .btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);
}
.vid-help .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

@media (max-width:780px){
  .vid-grid{grid-template-columns:1fr;gap:16px}
  .vid-help{grid-template-columns:1fr;padding:24px;text-align:left}
  .vid-help-cta{justify-content:flex-start}
}

/* ===================================================================
   Header polish — refined navigation + offerte CTA + scroll shadow
=================================================================== */

/* Sticky header with scroll-aware shadow + slightly tighter height */
.site-header{
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 22px rgba(13,42,58,.07);
  border-bottom-color: #dfe9ed;
}
.header-inner{ height: 78px; }

/* Sliding underline on nav items — feels more polished than a flat
   border-bottom flicking on/off */
.nav a{
  position: relative;
  border-bottom: 0 !important;       /* remove old flat underline */
  border-top: 0 !important;
  padding: 14px 14px;
  transition: color .15s ease;
}
.nav a::after{
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  width: 0; height: 2px;
  background: var(--cyan, #1e8fc4);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after,
.nav a:focus-visible::after{ width: calc(100% - 24px); }
.nav a[aria-current="page"]{
  color: var(--navy, #0d2a3a);
}
.nav a[aria-current="page"]::after{
  width: calc(100% - 24px);
  background: var(--cyan, #1e8fc4);
}

/* Search trigger — refined hover state with subtle cyan ring */
.header-search-trigger{
  background: var(--paper, #f4f8fb);
  border-color: transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, color .15s ease;
}
.header-search-trigger:hover{
  background: #fff;
  border-color: rgba(30,143,196,.35);
  box-shadow: 0 0 0 4px rgba(30,143,196,.08), 0 4px 14px rgba(30,143,196,.10);
}
.header-search-trigger:focus-visible{
  outline: 2px solid var(--cyan, #1e8fc4);
  outline-offset: 2px;
}

/* === Offerte CTA — refined green pill with icon + count badge === */
a.icon-button.btn-quote{
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #34a85e 0%, #2a8e4f 100%);
  color: #fff;
  border: 0; border-radius: 999px;
  padding: 9px 18px 9px 14px;
  font-weight: 800; font-size: .95rem; letter-spacing: .005em;
  box-shadow:
    0 6px 18px rgba(46,141,80,.30),
    0 1px 2px rgba(46,141,80,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
  position: relative;
}
a.icon-button.btn-quote:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #3bb568 0%, #2f9b56 100%);
  box-shadow:
    0 12px 28px rgba(46,141,80,.36),
    0 2px 4px rgba(46,141,80,.20),
    inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff;
}
a.icon-button.btn-quote:active{ transform: translateY(0); }
a.icon-button.btn-quote:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(52,168,94,.4),
    0 6px 18px rgba(46,141,80,.30);
}

/* Tiny clipboard icon */
.btn-quote .bq-ic{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #fff; opacity: .94;
  flex: 0 0 auto;
}
.btn-quote .bq-ic svg{ width: 100%; height: 100%; display: block; }
.btn-quote .bq-label{ display: inline; }

/* Refined count badge — looks more like a notification pip */
a.icon-button.btn-quote .quote-count{
  background: rgba(255,255,255,.96);
  color: #1d6e3e;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  font-size: .76rem; font-weight: 900;
  letter-spacing: .02em;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.04);
}

/* Mobile tweaks */
@media (max-width: 980px){
  .header-inner{ height: 70px; }
  .nav a{ padding: 12px 14px; }
  a.icon-button.btn-quote{ padding: 9px 14px 9px 12px; gap: 8px; }
}
@media (max-width: 640px){
  .btn-quote .bq-label{ display: none; }
  a.icon-button.btn-quote{ padding: 9px 12px; }
  /* count badge stays visible so user sees how many products are queued */
  a.icon-button.btn-quote .quote-count{ display: inline-grid; }
}

/* ===================================================================
   Klantregistratie — wordt-klant pagina + uitvouwbare sectie op offerte
=================================================================== */

/* Single-column variant of the offerte layout for wordt-klant page */
.offerte-layout-single{ grid-template-columns: 1.6fr 1fr; }
@media (max-width: 980px){
  .offerte-layout-single{ grid-template-columns: 1fr; }
}

/* 3-column field row (postcode/stad/land) */
.field-row-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px){
  .field-row-3{ grid-template-columns: 1fr; }
}

/* Toggle card on offerte page — invites user to also register as customer */
.reg-toggle-card{
  display: flex; align-items: center; gap: 18px;
  margin: 22px 0 18px; padding: 18px 22px;
  background: linear-gradient(135deg, #eff7fb 0%, #f7fbfc 100%);
  border: 1px dashed rgba(30,143,196,.45);
  border-radius: 16px;
  flex-wrap: wrap;
}
.reg-toggle-head{ flex: 1; min-width: 0; }
.reg-toggle-eyebrow{
  display: inline-block; color: var(--cyan, #1e8fc4);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 900; margin-bottom: 4px;
}
.reg-toggle-title{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; line-height: 1.25; color: var(--navy, #0d2a3a);
  margin: 0 0 4px;
}
.reg-toggle-text-help{
  margin: 0; color: #5a6c78; font-size: .92rem; line-height: 1.4;
}
.reg-toggle-btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--navy);
  border: 1.5px solid var(--cyan, #1e8fc4) !important;
  font-weight: 800;
  flex: 0 0 auto; white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
}
.reg-toggle-btn:hover{
  background: var(--cyan, #1e8fc4); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(30,143,196,.22);
}
.reg-toggle-plus{
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,143,196,.14); color: var(--cyan, #1e8fc4);
  font-weight: 900; font-size: 1rem; line-height: 1;
  transition: background .15s ease, color .15s ease, transform .25s ease;
}
.reg-toggle-btn:hover .reg-toggle-plus{
  background: rgba(255,255,255,.25); color: #fff;
}
[aria-expanded="true"] .reg-toggle-plus{ transform: rotate(45deg); }

/* Hidden by default; shown when toggle button activates .is-open */
.reg-section[hidden-on-init]{ display: none; }
.reg-section.is-open{
  display: block;
  animation: reg-slide-in .35s cubic-bezier(.4,0,.2,1);
}
@keyframes reg-slide-in{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reg-subhead{
  font-family: 'Inter', sans-serif;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan, #1e8fc4); font-weight: 900;
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(30,143,196,.18);
}

/* Steps panel on wordt-klant aside */
.register-steps{
  list-style: none; counter-reset: step;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.register-steps li{
  position: relative; counter-increment: step;
  padding: 12px 14px 12px 50px;
  background: var(--paper, #f4f8fb);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.register-steps li::before{
  content: counter(step);
  position: absolute; left: 12px; top: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cyan, #1e8fc4); color: #fff;
  display: grid; place-items: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 10px rgba(30,143,196,.32);
}
.register-steps li strong{
  color: var(--navy, #0d2a3a); font-size: .96rem; font-weight: 700;
}
.register-steps li .help{
  color: #5a6c78; font-size: .82rem; line-height: 1.4;
}

@media (max-width: 640px){
  .reg-toggle-card{ padding: 16px; gap: 12px; }
  .reg-toggle-btn{ width: 100%; justify-content: center; }
}

/* ===================================================================
   Page hero — light editorial hero with the Siltec leaf as 3D star
   Reference: green-on-white hero with big leaf, accent green title word
=================================================================== */
.page-hero,
.offerte-hero{
  position: relative;
  background:
    radial-gradient(900px 600px at 75% 60%, rgba(58,167,90,.10), transparent 60%),
    radial-gradient(700px 500px at 95% 10%, rgba(126,217,140,.18), transparent 55%),
    linear-gradient(180deg, #f4faf6 0%, #ffffff 70%);
  color: #1a2c39;
  padding: 110px 0 100px;
  border-bottom: 1px solid rgba(45,138,74,.08);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle dotted texture in the background */
.page-hero::before,
.offerte-hero::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(45,138,74,.16) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, transparent 30%, #000 95%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, transparent 30%, #000 95%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* The Siltec leaf as a subtle hero accent — HQ photo-realistic v5 PNG.
   Aanzienlijk kleiner gemaakt zodat hij niet langer domineert in de hero
   (homepage hero gebruikt .home-v4-leaf en is niet aangepast). */
.page-hero::after,
.offerte-hero::after{
  content: '';
  position: absolute;
  right: clamp(20px, 4vw, 90px);
  top: 50%;
  width: clamp(220px, 30vw, 420px);
  aspect-ratio: 1397 / 1012;
  height: auto;
  background: url("../img/brand/siltec-leaf-hq-v5.png?v=20260501ttt") center/contain no-repeat;
  transform: translateY(-50%) rotate(-7deg);
  transform-origin: center;
  animation: leaf-float 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  filter:
    drop-shadow(0 14px 26px rgba(22,163,74,.20))
    drop-shadow(0 5px 9px rgba(6,35,51,.10));
}
@keyframes leaf-float{
  0%, 100% { transform: translateY(-50%) rotate(-7deg); }
  50%      { transform: translateY(calc(-50% - 12px)) rotate(-5.6deg); }
}

/* Eyebrow leaf accent removed per design request — keep clean text */
.page-hero-eyebrow::after{
  content: none !important;
  display: none !important;
}

.page-hero .container,
.offerte-hero .container{
  position: relative; z-index: 2;
  max-width: var(--container);
}

/* Constrain text to the left half so the leaf has room on the right */
.page-hero .container > .breadcrumbs,
.page-hero .container > .page-hero-eyebrow,
.page-hero .container > h1,
.page-hero .container > p,
.offerte-hero .container > .breadcrumbs,
.offerte-hero .container > .page-hero-eyebrow,
.offerte-hero .container > h1,
.offerte-hero .container > p{
  max-width: 58%;
}

/* Green accent eyebrow with leading bar */
.page-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  color: #2d8a4a;
  font-family: 'Inter', sans-serif;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 800;
  margin: 4px 0 18px;
}
.page-hero-eyebrow::before{
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, #2d8a4a, rgba(45,138,74,0));
  border-radius: 2px;
}

/* Breadcrumbs */
.page-hero .breadcrumbs,
.offerte-hero .breadcrumbs{
  font-size: .85rem;
  color: #5a6c78;
  margin-bottom: 24px;
  letter-spacing: .005em;
}
.page-hero .breadcrumbs a,
.offerte-hero .breadcrumbs a{
  color: #1a2c39; text-decoration: none;
  border-bottom: 1px solid rgba(45,138,74,.35);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.page-hero .breadcrumbs a:hover,
.offerte-hero .breadcrumbs a:hover{
  color: #2d8a4a; border-bottom-color: #2d8a4a;
}

/* Editorial title — bigger, tighter, refined; dark navy */
.page-hero h1,
.offerte-hero h1{
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 22px;
  color: #0d2a3a;
  text-align: left;
}
/* Green accent word/phrase inside the title */
.page-hero h1 .hl,
.offerte-hero h1 .hl{
  color: #2d8a4a;
  background: linear-gradient(180deg, #3aa75a 0%, #2d8a4a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description text */
.page-hero p,
.offerte-hero p{
  color: #4a5965;
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 0 0 4px;
}

/* Optional CTA button row in the hero */
.page-hero-ctas,
.offerte-hero-ctas{
  display: inline-flex; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; max-width: 58%;
}
.page-hero-ctas .btn,
.offerte-hero-ctas .btn{
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: 0;
}
.page-hero-ctas .btn-primary,
.offerte-hero-ctas .btn-primary{
  background: linear-gradient(135deg, #3aa75a 0%, #2d8a4a 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 12px 24px rgba(45,138,74,.28);
}
.page-hero-ctas .btn-primary:hover,
.offerte-hero-ctas .btn-primary:hover{
  background: linear-gradient(135deg, #43b765 0%, #339d54 100%);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(45,138,74,.34);
}
.page-hero-ctas .btn-ghost,
.offerte-hero-ctas .btn-ghost{
  background: #fff; color: #1a2c39;
  border: 1.5px solid rgba(45,138,74,.25);
}
.page-hero-ctas .btn-ghost:hover,
.offerte-hero-ctas .btn-ghost:hover{
  border-color: #2d8a4a; color: #2d8a4a;
  transform: translateY(-1px);
}

/* Soft fade-in on first paint */
.page-hero h1, .page-hero p, .page-hero-eyebrow, .page-hero .breadcrumbs, .page-hero-ctas,
.offerte-hero h1, .offerte-hero p, .offerte-hero .breadcrumbs, .offerte-hero-ctas{
  animation: hero-fade .6s cubic-bezier(.4,0,.2,1) both;
}
.page-hero .breadcrumbs, .offerte-hero .breadcrumbs{ animation-delay: .02s; }
.page-hero-eyebrow{ animation-delay: .10s; }
.page-hero h1, .offerte-hero h1{ animation-delay: .18s; }
.page-hero p, .offerte-hero p{ animation-delay: .26s; }
.page-hero-ctas, .offerte-hero-ctas{ animation-delay: .34s; }
@keyframes hero-fade{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px){
  .page-hero::after, .offerte-hero::after{
    right: 16px; width: 340px; height: auto;
  }
  .page-hero .container > .breadcrumbs,
  .page-hero .container > .page-hero-eyebrow,
  .page-hero .container > h1,
  .page-hero .container > p,
  .offerte-hero .container > .breadcrumbs,
  .offerte-hero .container > .page-hero-eyebrow,
  .offerte-hero .container > h1,
  .offerte-hero .container > p{ max-width: 64%; }
}
@media (max-width: 980px){
  .page-hero, .offerte-hero{ padding: 80px 0 70px; }
  .page-hero::after, .offerte-hero::after{
    right: 8px; width: 290px; height: auto; opacity: .55;
  }
  .page-hero .container > *,
  .offerte-hero .container > *{ max-width: 100% !important; }
}
@media (max-width: 640px){
  .page-hero, .offerte-hero{ padding: 60px 0 52px; }
  .page-hero::after, .offerte-hero::after{ display: none; }
  .page-hero h1, .offerte-hero h1{ font-size: 2.05rem; line-height: 1.1; }
  .page-hero-eyebrow{ font-size: .68rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-hero::after, .offerte-hero::after{ animation: none; }
  .page-hero h1, .page-hero p, .page-hero-eyebrow, .page-hero .breadcrumbs, .page-hero-ctas,
  .offerte-hero h1, .offerte-hero p, .offerte-hero .breadcrumbs, .offerte-hero-ctas{ animation: none; }
}

/* ===================================================================
   Header navigation — dropdowns + special "Wordt klant" CTA
=================================================================== */

/* Dropdown parent wrapper */
.nav-has-dropdown{
  position: relative;
  display: inline-flex;
}

/* Top-level button styled exactly like a regular nav <a> */
.nav-toplink{
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  color: #1a2c39; font: inherit; font-weight: 600;
  padding: 14px 14px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; line-height: 1;
  position: relative;
  transition: color .15s ease;
}
.nav-toplink::after{
  /* Reuse the sliding cyan underline animation from regular nav links */
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  width: 0; height: 2px;
  background: var(--cyan, #1e8fc4);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav-has-dropdown:hover .nav-toplink,
.nav-has-dropdown:focus-within .nav-toplink,
.nav-has-dropdown.is-open .nav-toplink{
  color: var(--cyan, #1e8fc4);
}
.nav-has-dropdown:hover .nav-toplink::after,
.nav-has-dropdown:focus-within .nav-toplink::after,
.nav-has-dropdown.is-open .nav-toplink::after,
.nav-has-dropdown.nav-active .nav-toplink::after{
  width: calc(100% - 28px);
}

/* Caret */
.nav-caret{
  width: 10px; height: 10px;
  display: inline-block;
  position: relative;
  margin-left: 2px;
  transition: transform .25s ease;
}
.nav-caret::before{
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-22%) rotate(45deg);
}
.nav-has-dropdown.is-open .nav-caret,
.nav-has-dropdown:hover .nav-caret{
  transform: rotate(180deg);
}

/* The dropdown panel */
.nav-dropdown{
  position: absolute;
  top: calc(100% - 4px); left: -8px;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--rule, #e3eaef);
  border-radius: 16px;
  padding: 10px;
  box-shadow:
    0 24px 48px rgba(13,42,58,.14),
    0 4px 10px rgba(13,42,58,.06);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
  z-index: 60;
}

/* Show on desktop (mouse devices) when hovered/focused, on any device when explicitly open */
@media (hover: hover){
  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown:focus-within .nav-dropdown{
    opacity: 1; visibility: visible;
    transform: translateY(0);
  }
}
.nav-has-dropdown.is-open .nav-dropdown{
  opacity: 1; visibility: visible;
  transform: translateY(0);
}

/* Dropdown items — rich, two-line cards */
.nav-dropdown a{
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #1a2c39;
  border: 0 !important;          /* override the underline-style nav <a> rules */
  background: transparent !important;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{
  background: var(--paper, #f4f8fb) !important;
  color: var(--cyan, #1e8fc4);
}
.nav-dropdown a[aria-current="page"]{
  background: rgba(30,143,196,.08) !important;
  color: var(--cyan, #1e8fc4);
}
.ndd-ic{
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: var(--paper, #f4f8fb);
  color: var(--cyan, #1e8fc4);
  font-size: .9rem; flex: 0 0 auto;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover .ndd-ic,
.nav-dropdown a[aria-current="page"] .ndd-ic{
  background: var(--cyan, #1e8fc4); color: #fff;
}
.ndd-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ndd-text strong{ font-weight: 700; font-size: .96rem; color: inherit; line-height: 1.2; }
.ndd-text small{ font-size: .78rem; color: #6b7c87; line-height: 1.35; font-weight: 500; }

/* === Special "Wordt klant" button — secondary CTA next to Offerte === */
a.icon-button.btn-wkl{
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  color: var(--cyan, #1e8fc4);
  border: 1.5px solid rgba(30,143,196,.5);
  border-radius: 999px;
  padding: 8px 16px 8px 13px;
  font-weight: 800; font-size: .92rem;
  letter-spacing: 0;
  white-space: nowrap;          /* never wrap the label onto two lines */
  flex-shrink: 0;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .15s ease, box-shadow .25s ease;
}
.btn-wkl .bw-label{ white-space: nowrap; }
a.icon-button.btn-wkl:hover{
  background: var(--cyan, #1e8fc4);
  color: #fff;
  border-color: var(--cyan, #1e8fc4);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30,143,196,.26);
}
a.icon-button.btn-wkl:focus-visible{
  outline: 2px solid var(--cyan, #1e8fc4);
  outline-offset: 2px;
}
a.icon-button.btn-wkl[aria-current="page"]{
  background: var(--cyan, #1e8fc4);
  color: #fff;
  border-color: var(--cyan, #1e8fc4);
}
.btn-wkl .bw-ic{
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.btn-wkl .bw-ic svg{ width: 100%; height: 100%; display: block; }
.btn-wkl .bw-label{ display: inline; }

/* === Mobile nav adaptations === */
@media (max-width: 980px){
  /* When the off-canvas nav is open, dropdowns become accordions */
  .nav-has-dropdown{ display: block; width: 100%; }
  .nav-toplink{
    width: 100%; justify-content: space-between;
    padding: 12px 14px; border-radius: 10px;
  }
  .nav-toplink::after{ display: none; }
  .nav-dropdown{
    position: static;
    box-shadow: none; border: 0;
    background: var(--paper, #f4f8fb);
    border-radius: 12px;
    margin: 4px 0 8px;
    padding: 6px;
    opacity: 1; visibility: hidden;
    transform: none;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
    min-width: 0;
  }
  .nav-has-dropdown.is-open .nav-dropdown{
    visibility: visible;
    max-height: 320px;
    transition: max-height .3s ease;
  }
}

/* Hide Wordt klant text on small screens (icon-only) */
@media (max-width: 640px){
  .btn-wkl .bw-label{ display: none; }
  a.icon-button.btn-wkl{ padding: 8px 12px; }
}

/* ===================================================================
   Toepassingen — sector showcase (alternating photo/text + niche grid)
=================================================================== */

/* === Stats strip === */
.tp-stats{
  background: linear-gradient(180deg, #f4faf6 0%, #fff 100%);
  border-bottom: 1px solid rgba(45,138,74,.10);
  padding: 28px 0;
}
.tp-stats-row{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  text-align: center;
}
.tp-stat strong{
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: #2d8a4a;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  font-feature-settings: "tnum";
}
.tp-stat span{
  color: #5a6c78;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 720px){
  .tp-stats-row{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* === Big alternating sector blocks === */
.tp-sector{
  padding: 80px 0;
  position: relative;
}
.tp-sector-alt{
  background: linear-gradient(180deg, #f9fcfa 0%, #ffffff 100%);
}
.tp-sector + .tp-sector{
  border-top: 1px solid rgba(45,138,74,.06);
}
.tp-sector-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.tp-sector-flip{ direction: rtl; }
.tp-sector-flip > *{ direction: ltr; }

.tp-sector-text{
  max-width: 540px;
}
.tp-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  color: #2d8a4a;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 14px;
}
.tp-eyebrow::before{
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #2d8a4a, rgba(45,138,74,0));
  border-radius: 2px;
}
.tp-sector-text h2{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #0d2a3a;
  margin: 0 0 16px;
}
.tp-sector-text > p{
  color: #4a5965;
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 0 0 22px;
}

/* Feature checklist */
.tp-features{
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.tp-features li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .96rem;
  line-height: 1.5;
  color: #1a2c39;
}
.tp-features strong{ font-weight: 700; }
.tp-check{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(45,138,74,.12);
  color: #2d8a4a;
  display: inline-grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 900;
  flex: 0 0 auto;
}

/* Action buttons */
.tp-actions{
  display: flex; gap: 12px; flex-wrap: wrap;
}
.tp-actions .btn{
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  font-size: .94rem;
}
.tp-actions .btn-primary{
  background: linear-gradient(135deg, #3aa75a 0%, #2d8a4a 100%);
  color: #fff; border: 0;
  box-shadow: 0 8px 18px rgba(45,138,74,.22);
  transition: transform .15s ease, box-shadow .25s ease;
}
.tp-actions .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(45,138,74,.30);
  color: #fff;
}
.tp-actions .btn-ghost{
  background: #fff;
  color: #1a2c39;
  border: 1.5px solid rgba(45,138,74,.30);
  transition: border-color .15s, color .15s, transform .15s;
}
.tp-actions .btn-ghost:hover{
  border-color: #2d8a4a;
  color: #2d8a4a;
  transform: translateY(-1px);
}

/* Photo block */
.tp-sector-img{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 24px 56px rgba(13,42,58,.12),
    0 4px 12px rgba(13,42,58,.06);
  aspect-ratio: 4 / 3;
  background: #f4faf6;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.tp-sector-img:hover{
  transform: translateY(-4px);
  box-shadow:
    0 32px 72px rgba(13,42,58,.18),
    0 6px 16px rgba(13,42,58,.10);
}
.tp-sector-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.tp-sector-img:hover img{
  transform: scale(1.04);
}
.tp-img-tag{
  position: absolute;
  left: 18px; bottom: 18px;
  background: rgba(13,42,58,.92);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(13,42,58,.20);
}

/* Mobile stack */
@media (max-width: 880px){
  .tp-sector{ padding: 56px 0; }
  .tp-sector-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tp-sector-flip{ direction: ltr; }
  .tp-sector-flip .tp-sector-img{ order: -1; }
  .tp-sector-text{ max-width: none; }
}

/* === Niche cards section === */
.tp-niche{
  padding: 80px 0;
  background: linear-gradient(180deg, #f4faf6 0%, #fff 100%);
}
.tp-niche-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.tp-niche-head .page-hero-eyebrow{
  margin: 0 0 12px;
  justify-content: center;
}
.tp-niche-head h2{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: #0d2a3a;
}
.tp-niche-head p{
  color: #5a6c78;
  font-size: 1rem;
  margin: 0;
}

.tp-niche-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tp-niche-card{
  background: #fff;
  border: 1px solid rgba(45,138,74,.10);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(13,42,58,.04);
  transition: transform .2s ease, box-shadow .25s ease, border-color .15s ease;
}
.tp-niche-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(13,42,58,.10);
  border-color: rgba(45,138,74,.30);
}
.tp-niche-img{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f4faf6;
  overflow: hidden;
}
.tp-niche-img img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.tp-niche-card:hover .tp-niche-img img{
  transform: scale(1.06);
}
.tp-niche-body{
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tp-niche-tag{
  display: inline-block; align-self: flex-start;
  background: rgba(45,138,74,.10);
  color: #2d8a4a;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tp-niche-body h3{
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 2px 0 0;
  color: #0d2a3a;
}
.tp-niche-body p{
  color: #5a6c78;
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
}
.tp-niche-link{
  font-weight: 800;
  font-size: .9rem;
  color: #2d8a4a;
  text-decoration: none;
  letter-spacing: .01em;
  display: inline-block;
  transition: color .15s ease, transform .2s ease;
}
.tp-niche-link:hover{
  color: #1d6e3e;
  transform: translateX(3px);
}

@media (max-width: 880px){
  .tp-niche{ padding: 56px 0; }
  .tp-niche-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* === Help/CTA section at the bottom === */
.tp-help{
  padding: 60px 0 80px;
}
.tp-help-card{
  background: linear-gradient(135deg, #0d2a3a 0%, #163a4f 60%, #1c4f5e 100%);
  color: #fff;
  border-radius: 26px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(13,42,58,.18);
}
.tp-help-card::after{
  /* Floating leaf decoration */
  content: '';
  position: absolute;
  right: -120px; top: 50%;
  width: 360px; height: 360px;
  background: url("../img/brand/siltec-leaf-cyan.svg") center/contain no-repeat;
  opacity: .08;
  transform: translateY(-50%) rotate(12deg);
  pointer-events: none;
}
.tp-help-text{
  position: relative; z-index: 1;
}
.tp-help-text .page-hero-eyebrow{
  color: #7ed3ee;
  margin: 0 0 12px;
}
.tp-help-text .page-hero-eyebrow::before{
  background: linear-gradient(90deg, #7ed3ee, rgba(126,211,238,0));
}
.tp-help-text .page-hero-eyebrow::after{
  background-color: #7ed3ee;
}
.tp-help-text h2{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: #fff;
}
.tp-help-text h2 .hl{
  color: #7ed3ee;
  background: linear-gradient(180deg, #9ae5f5 0%, #7ed3ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tp-help-text p{
  color: #cfe1ea;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}
.tp-help-actions{
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative; z-index: 1;
}
.tp-help-actions .btn{
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: .98rem;
  text-align: center;
  white-space: nowrap;
}
.tp-help-actions .btn-primary{
  background: #7ed3ee;
  color: #0d2a3a;
  border: 0;
  transition: background .15s, transform .15s;
}
.tp-help-actions .btn-primary:hover{
  background: #9ae5f5;
  color: #0d2a3a;
  transform: translateY(-1px);
}
.tp-help-actions .btn-ghost{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.tp-help-actions .btn-ghost:hover{
  border-color: #fff;
  background: rgba(255,255,255,.08);
}

@media (max-width: 880px){
  .tp-help{ padding: 40px 0 60px; }
  .tp-help-card{
    padding: 32px 28px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tp-help-actions{ flex-direction: row; flex-wrap: wrap; }
  .tp-help-actions .btn{ flex: 1; min-width: 140px; }
}

/* ===================================================================
   Homepage hero — premium light design with big Siltec leaf
   Reference: siltec-hero-mapje (preserves heroSearchForm + .hero-chip)
=================================================================== */
.hero.hero-light{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 42%, rgba(22,163,74,.20), transparent 36%),
    radial-gradient(circle at 74% 88%, rgba(74,179,255,.10), transparent 32%),
    linear-gradient(115deg, #ffffff 0%, #fbfdfe 43%, #edf9f1 100%);
  color: #062333;
  isolation: isolate;
}
/* Disable the inherited dark grid + amber etc. from .hero rules */
.hero.hero-light::before{ content: none; display: none; }
.hero.hero-light::after{ content: none; display: none; }

/* Subtle dot pattern that fades in on the right side */
.hero.hero-light .hero-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 51%, rgba(22,163,74,.10) 0 1px, transparent 1px 100%);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 60%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 60%, #000 95%, transparent 100%);
  opacity: .85;
  z-index: 0;
}

.hero.hero-light .hero-inner{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  gap: clamp(28px, 5vw, 78px);
  padding: clamp(50px, 6vw, 96px) 0 clamp(48px, 7vw, 108px);
  align-items: center;
}

/* === Hero text column === */
.hero.hero-light .hero-text{
  max-width: 720px;
}
.hero.hero-light .hero-eyebrow{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #11813b;
  background: transparent !important;
  padding: 0 !important;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero.hero-light .hero-eyebrow svg{ width: 20px; height: 20px; flex: 0 0 auto; }

.hero.hero-light h1{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: #062333;
  margin: 0 0 26px;
  text-wrap: balance;
  font-weight: 600;
}
.hero.hero-light h1 .dot{ color: #16a34a; }

.hero.hero-light .hero-lead{
  max-width: 620px;
  margin: 0 0 28px;
  color: #536577;
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.65;
  font-weight: 500;
}

/* === Big hero search === */
.hero.hero-light .hero-light-search{
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: min(720px, 100%);
  height: 76px;
  padding: 8px 10px 8px 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dde8ec;
  box-shadow: 0 18px 42px rgba(6,35,51,.10);
  margin: 0 0 18px;
}
.hero.hero-light .hs-icon{
  display: inline-flex;
  width: 22px; height: 22px;
  color: #062333;
  flex: 0 0 auto;
}
.hero.hero-light .hs-icon svg{ width: 100%; height: 100%; display: block; }
.hero.hero-light .hero-light-search input{
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  color: #062333;
  font: inherit;
  font-size: 17px;
  padding: 0;
  height: 100%;
}
.hero.hero-light .hero-light-search input::placeholder{ color: #8fa0ad; }
.hero.hero-light .hero-light-search input:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }
.hero.hero-light .hl-search-btn{
  flex: 0 0 auto;
  height: 60px;
  min-width: 140px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #22b65a, #11813b) !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(22,163,74,.28) !important;
  transition: transform .15s ease, box-shadow .25s ease;
}
.hero.hero-light .hl-search-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(22,163,74,.36) !important;
}

/* === Popular chips — light version === */
.hero.hero-light .hero-chips{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  color: #536577;
  font-size: .9rem;
}
.hero.hero-light .hero-chip-label{
  font-weight: 800;
  color: #536577;
  margin-right: 4px;
}
.hero.hero-light .hero-chip{
  appearance: none; -webkit-appearance: none;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(22,163,74,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #11813b;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: .88rem;
  box-shadow: 0 4px 12px rgba(6,35,51,.04);
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.hero.hero-light .hero-chip:hover{
  background: #11813b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(22,163,74,.28);
}

/* === Hero stat cards === */
.hero.hero-light .hero-stats{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0;
}
.hero.hero-light .stat-card{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(221,232,236,.94);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(6,35,51,.06);
  overflow: hidden;
}
.hero.hero-light .stat-card::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #16a34a, transparent);
}
.hero.hero-light .stat-ic{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #16a34a;
  flex: 0 0 auto;
}
.hero.hero-light .stat-ic svg{ width: 100%; height: 100%; display: block; }
.hero.hero-light .stat-card b{
  display: block;
  color: #062333;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 3px;
}
.hero.hero-light .stat-card span{
  color: #15394a;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
}

/* === Right column — leaf visual === */
.hero.hero-light .hero-visual-leaf{
  position: relative;
  min-height: 580px;
  align-self: center;
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero.hero-light .hero-visual-leaf::before{
  /* Soft green/white halo glow behind the leaf */
  content: '';
  position: absolute;
  inset: 8% -10% 0 -2%;
  z-index: -3;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(22,163,74,.24), transparent 56%),
    radial-gradient(circle at 76% 36%, rgba(255,255,255,.95), transparent 0 16%, transparent 28%);
  filter: blur(8px);
}
.hero.hero-light .hero-visual-leaf::after{
  /* Concentric ring outline behind the leaf */
  content: '';
  position: absolute;
  right: -10%; top: 6%;
  width: 76%; aspect-ratio: 1;
  z-index: -2;
  border: 1px solid rgba(22,163,74,.22);
  border-radius: 50%;
  opacity: .65;
  box-shadow:
    inset 0 0 0 80px rgba(255,255,255,.06),
    inset 0 0 0 130px rgba(22,163,74,.04);
}

/* Tech orbit — small circular tech graphic */
.hero.hero-light .hl-orbit{
  position: absolute;
  right: 4%; bottom: 4%;
  width: 220px; aspect-ratio: 1;
  border-radius: 50%;
  opacity: .55;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.9) 34% 35%, transparent 35% 100%),
    conic-gradient(from 45deg, transparent 0 18%, rgba(255,255,255,.9) 18% 20%, transparent 20% 34%, rgba(22,163,74,.40) 34% 36%, transparent 36% 100%);
  pointer-events: none;
  z-index: 0;
}

/* Stack of three leaf images for depth (shadow + depth + main) */
.hero.hero-light .hl-leaf-stack{
  position: absolute;
  inset: 2% -8% auto auto;
  width: min(820px, 56vw);
  aspect-ratio: 8 / 5;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
}
.hero.hero-light .hl-leaf{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero.hero-light .hl-leaf-shadow{
  transform: translate(36px, 56px) scale(.98);
  opacity: .18;
  filter: blur(18px) brightness(0) saturate(100%);
}
.hero.hero-light .hl-leaf-depth{
  transform: translate(18px, 24px) scale(.995);
  opacity: .68;
  filter: brightness(.55) saturate(1.5) hue-rotate(-4deg) blur(.2px);
}
.hero.hero-light .hl-leaf-main{
  filter:
    drop-shadow(0 42px 70px rgba(22,163,74,.26))
    drop-shadow(0 18px 32px rgba(6,35,51,.16));
  animation: hl-leaf-float 12s ease-in-out infinite;
}
@keyframes hl-leaf-float{
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -10px); }
}

/* Floating spec card */
.hero.hero-light .hl-floating-card{
  position: absolute;
  right: clamp(10px, 4vw, 60px);
  bottom: clamp(20px, 6vw, 70px);
  width: min(310px, 80vw);
  padding: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(221,232,236,.9);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(6,35,51,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 3;
  animation: hl-card-float 9s ease-in-out infinite;
}
@keyframes hl-card-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hero.hero-light .hl-fc-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(221,232,236,.9);
}
.hero.hero-light .hl-fc-ic{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 9px;
  background: #ecfdf3;
  color: #16a34a;
  border-radius: 50%;
  flex: 0 0 auto;
}
.hero.hero-light .hl-fc-ic svg{ width: 100%; height: 100%; }
.hero.hero-light .hl-floating-card strong{
  display: block;
  color: #062333;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
}
.hero.hero-light .hl-fc-head span{
  display: block;
  margin-top: 3px;
  color: #15394a;
  font-size: .9rem;
}
.hero.hero-light .hl-floating-card ul{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #15394a;
  font-size: .88rem;
  font-weight: 600;
}
.hero.hero-light .hl-floating-card li{
  position: relative;
  padding-left: 26px;
}
.hero.hero-light .hl-floating-card li::before{
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

/* Disable old dark hero search (in case .hero-search rules try to claim our search) */
.hero.hero-light .hero-light-search{ display: flex !important; }
.hero.hero-light .hero-stats{ display: grid !important; }
.hero.hero-light .hero-chips{ display: flex !important; }

/* Hide the legacy .actions row on the homepage hero (Bekijk assortiment / Offerte buttons)
   — the new hero relies on the search + chips + stats CTAs instead */
.hero.hero-light .actions{ display: none; }

/* Tablet */
@media (max-width: 1100px){
  .hero.hero-light .hero-inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero.hero-light .hero-visual-leaf{
    min-height: 460px;
    order: 2;
  }
  .hero.hero-light .hl-leaf-stack{
    right: 2%;
    width: min(720px, 88vw);
  }
}

/* Mobile */
@media (max-width: 760px){
  .hero.hero-light .hero-inner{ padding: 40px 0 56px; }
  .hero.hero-light h1{ font-size: clamp(2rem, 11vw, 3rem); }
  .hero.hero-light .hero-eyebrow{ font-size: .72rem; letter-spacing: .12em; }
  .hero.hero-light .hero-light-search{
    flex-wrap: wrap;
    height: auto; min-height: 64px;
    border-radius: 22px;
    padding: 14px 16px;
    gap: 10px;
  }
  .hero.hero-light .hero-light-search input{ width: 100%; padding: 6px 4px; font-size: 16px; }
  .hero.hero-light .hl-search-btn{ width: 100%; min-width: 0; height: 52px; }
  .hero.hero-light .hero-stats{ grid-template-columns: 1fr; }
  .hero.hero-light .hero-visual-leaf{ min-height: 380px; }
  .hero.hero-light .hl-leaf-stack{
    width: 110vw;
    right: -28vw;
    top: 5%;
  }
  .hero.hero-light .hl-floating-card{
    left: 0; right: auto; bottom: 0;
    width: min(280px, 88vw);
  }
  .hero.hero-light .hl-orbit{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .hero.hero-light .hl-leaf-main,
  .hero.hero-light .hl-floating-card{ animation: none; }
}

/* ===================================================================
   Header — final polish (tighter spacing, no-wrap CTAs, white footer logo)
=================================================================== */

/* Header layout polish */
.header-inner{ gap: 16px; }
.header-actions{ gap: 8px; flex-shrink: 0; }
.header-actions > *{ flex-shrink: 0; }

/* Search trigger doesn't claim too much horizontal space at small-medium widths */
@media (max-width: 1280px){
  .header-search-trigger{ min-width: 220px; }
}
@media (max-width: 1180px){
  .header-search-trigger{ min-width: 200px; }
  .header-search-trigger .hst-text{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 140px;
  }
}
@media (max-width: 1080px){
  .header-search-trigger .hst-kbd{ display: none; }
  .header-search-trigger{ min-width: 160px; padding: 9px 14px; }
}

/* Quote button must never wrap either */
a.icon-button.btn-quote{
  white-space: nowrap; flex-shrink: 0; line-height: 1;
}
.btn-quote .bq-label{ white-space: nowrap; }

/* Slightly tighter nav padding to give room to header-actions */
.nav a{ padding: 14px 12px; }
.nav-toplink{ padding: 14px 12px; }

/* === Footer brand: clean white logo, no white box === */
.footer{ position: relative; }

/* Drop the white panel — replace with a clean white wordmark */
.footer .brand{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer .brand-mark{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  background-image: url("../img/brand/siltec-leaf-hero.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 4px 10px rgba(22,163,74,.32));
  font-size: 0;
  flex: 0 0 auto;
}
/* Show the SILTEC wordmark next to the leaf in white */
.footer .brand > span:not(.brand-mark){
  display: inline-flex !important;
  flex-direction: column;
  gap: 2px;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
}
.footer .brand small{
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #aac2cc !important;
  margin-top: 0;
}

/* ===================================================================
   Legal / privacy / terms — long-form readable layout
=================================================================== */
.legal-section{
  padding: 80px 0 100px;
  background: #fff;
}
.legal-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

/* Sticky inhoudsopgave */
.legal-toc{
  position: sticky;
  top: 110px;
  align-self: start;
  background: linear-gradient(180deg, #f4faf6 0%, #ffffff 100%);
  border: 1px solid rgba(45,138,74,.14);
  border-radius: 18px;
  padding: 22px 22px 18px;
}
.legal-toc-title{
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: #2d8a4a;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(45,138,74,.14);
}
.legal-toc ol{
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: legal-toc;
  display: flex; flex-direction: column;
  gap: 4px;
}
.legal-toc ol li{
  counter-increment: legal-toc;
}
.legal-toc ol a{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: .9rem;
  color: #1a2c39;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}
.legal-toc ol a::before{
  content: counter(legal-toc);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #2d8a4a;
  font-size: .82rem;
  text-align: right;
  padding-right: 4px;
  border-right: 1px solid rgba(45,138,74,.18);
}
.legal-toc ol a:hover,
.legal-toc ol a:focus-visible{
  background: rgba(45,138,74,.08);
  color: #2d8a4a;
}
.legal-toc-contact{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(45,138,74,.14);
  display: flex; flex-direction: column;
  gap: 8px;
  font-size: .85rem;
}
.legal-toc-contact strong{
  color: #1a2c39;
  font-weight: 700;
}
.legal-mail{
  color: #2d8a4a;
  font-weight: 800;
  text-decoration: none;
  word-break: break-all;
}
.legal-mail:hover{ color: #1d6e3e; }

/* Hoofdinhoud */
.legal-article{
  max-width: 760px;
  font-family: 'Inter', sans-serif;
  color: #1a2c39;
}
.legal-intro{
  font-size: 1.12rem;
  line-height: 1.65;
  color: #36495a;
  margin: 0 0 38px;
  padding: 22px 26px;
  background: linear-gradient(180deg, #f4faf6 0%, #ffffff 100%);
  border-left: 4px solid #2d8a4a;
  border-radius: 0 14px 14px 0;
}

.legal-block{
  margin-bottom: 44px;
  scroll-margin-top: 110px;
}
.legal-block h2{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: #0d2a3a;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(45,138,74,.14);
}
.legal-subhead{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0d2a3a;
  margin: 28px 0 14px;
  padding-left: 12px;
  border-left: 3px solid #2d8a4a;
}
.legal-block p{
  font-size: 1rem;
  line-height: 1.7;
  color: #36495a;
  margin: 0 0 14px;
}
.legal-block p:last-child{ margin-bottom: 0; }

.legal-block a{
  color: #2d8a4a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(45,138,74,.4);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.legal-block a:hover{
  color: #1d6e3e;
  text-decoration-color: #1d6e3e;
}

/* Lists */
.legal-list{
  margin: 8px 0 18px;
  padding-left: 20px;
  display: flex; flex-direction: column;
  gap: 8px;
  color: #36495a;
  line-height: 1.65;
}
.legal-list-bullets{ list-style: none; padding-left: 0; }
.legal-list-bullets li{
  position: relative;
  padding-left: 26px;
}
.legal-list-bullets li::before{
  content: '';
  position: absolute;
  left: 4px; top: .65em;
  width: 8px; height: 8px;
  background: #2d8a4a;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Two-column glossary grid */
.legal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 8px;
}
.legal-item{
  background: #f4faf6;
  border: 1px solid rgba(45,138,74,.12);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-item strong{
  color: #0d2a3a;
  font-size: .96rem;
  font-weight: 800;
}
.legal-item span{
  color: #5a6c78;
  font-size: .9rem;
  line-height: 1.5;
}

/* Verwerkers-tabel */
.legal-table{
  margin: 18px 0 22px;
  border: 1px solid rgba(45,138,74,.16);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.legal-table-row{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 14px 18px;
  font-size: .92rem;
  line-height: 1.55;
  align-items: start;
}
.legal-table-row + .legal-table-row{
  border-top: 1px solid rgba(45,138,74,.10);
}
.legal-table-head{
  background: linear-gradient(180deg, #f4faf6 0%, #fff 100%);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: #2d8a4a;
}
.legal-table-row strong{ color: #0d2a3a; }

/* Footer block */
.legal-footer{
  margin-top: 56px;
  padding: 24px 26px;
  background: linear-gradient(135deg, #0d2a3a 0%, #163a4f 100%);
  color: #cfe1ea;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.6;
}
.legal-footer p{ color: #cfe1ea; margin: 0 0 8px; font-size: .9rem; }
.legal-footer p:last-child{ margin: 0; }
.legal-footer strong{ color: #fff; font-weight: 700; }
.legal-footer a{
  color: #7ed3ee;
  text-decoration-color: rgba(126,211,238,.5);
}
.legal-footer a:hover{ color: #9ae5f5; }

/* Mobile — TOC stacks above article */
@media (max-width: 980px){
  .legal-section{ padding: 50px 0 70px; }
  .legal-layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .legal-toc{
    position: static;
    padding: 18px 18px 14px;
  }
  .legal-toc ol{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .legal-grid{ grid-template-columns: 1fr; }
  .legal-table-row{ grid-template-columns: 1fr; gap: 6px; }
  .legal-table-head{ display: none; }
}
@media (max-width: 560px){
  .legal-toc ol{ grid-template-columns: 1fr; }
  .legal-block h2{ font-size: 1.25rem; }
}

/* ===================================================================
   Homepage hero — FIX v2 (overrides earlier .hero.hero-light rules)
   Reference: siltec-hero-fix-v2/dropin/siltec-hero-exact.css
   - Headline left-aligned, smaller (~4 lines, 54-76px)
   - Premium 3D leaf right side, large with green drop-shadow
   - Compact stat cards (94px) so all stats stay visible
   - Lighter cleaner background, premium feel
   Preserves: #heroSearchForm, #heroSearchInput, .hero-chip[data-q]
=================================================================== */

/* Background — lighter, cleaner, more white */
.hero.hero-light{
  background:
    radial-gradient(circle at 77% 48%, rgba(22,163,74,.16), transparent 33%),
    radial-gradient(circle at 90% 86%, rgba(92,197,255,.10), transparent 31%),
    linear-gradient(112deg, #ffffff 0%, #fbfdfe 46%, #eefaf2 100%) !important;
}

/* Subtle dot grid + concentric ring background pattern (replaces .hero-bg) */
.hero.hero-light .hero-bg{
  background:
    radial-gradient(circle at center, rgba(22,163,74,.13) 0 1px, transparent 1.2px),
    radial-gradient(circle at 72% 58%, transparent 0 39%, rgba(22,163,74,.16) 39.1% 39.4%, transparent 39.5% 100%),
    radial-gradient(circle at 73% 58%, transparent 0 49%, rgba(255,255,255,.95) 49.1% 49.4%, transparent 49.5% 100%);
  background-size: 18px 18px, auto, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 60%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 60%, #000 100%);
  opacity: .72;
}

/* Hero grid — keep container, but tighter columns matching the spec */
.hero.hero-light .hero-inner{
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(36px, 5vw, 72px) !important;
  padding: clamp(44px, 5vw, 70px) 0 clamp(36px, 5vw, 60px) !important;
  align-items: center !important;
}

/* Headline: left-aligned, smaller, ~4 lines */
.hero.hero-light .hero-text{ max-width: 720px !important; text-align: left !important; }
.hero.hero-light .hero-eyebrow{
  margin-bottom: clamp(18px, 2vw, 24px) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  color: #11813b !important;
}
.hero.hero-light h1{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(54px, 4.35vw, 76px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  max-width: 720px !important;
  text-align: left !important;
  margin: 0 0 clamp(20px, 2.2vw, 26px) !important;
  color: #062333 !important;
  font-weight: 600 !important;
}
.hero.hero-light h1 .dot{ color: #16a34a !important; }

.hero.hero-light .hero-lead{
  max-width: 620px !important;
  margin: 0 0 clamp(22px, 2.4vw, 28px) !important;
  font-size: clamp(16px, 1vw, 18px) !important;
  font-weight: 540 !important;
  line-height: 1.65 !important;
  color: #536577 !important;
}

/* Hero search — narrower (640px) and shorter (68px) */
.hero.hero-light .hero-light-search{
  width: min(640px, 100%) !important;
  height: 68px !important;
  gap: 14px !important;
  padding: 8px 9px 8px 24px !important;
  border-radius: 999px !important;
  border: 1px solid #dde8ec !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 15px 36px rgba(6,35,51,.075) !important;
  margin: 0 0 16px !important;
}
.hero.hero-light .hero-light-search input{ font-size: 17px !important; }
.hero.hero-light .hl-search-btn{
  height: 52px !important;
  min-width: 132px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #22b65a, #11813b) !important;
  box-shadow: 0 13px 26px rgba(22,163,74,.24) !important;
}

/* Chips — slightly tighter, lighter */
.hero.hero-light .hero-chips{
  gap: 11px !important;
  margin: 0 0 24px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #536577 !important;
}
.hero.hero-light .hero-chip{
  min-height: 32px !important;
  padding: 0 17px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(22,163,74,.24) !important;
  color: #11813b !important;
  box-shadow: 0 7px 18px rgba(6,35,51,.035) !important;
}
.hero.hero-light .hero-chip:hover{
  background: #11813b !important;
  color: #fff !important;
}

/* Stat cards — compact, all visible (94px not 120px+) */
.hero.hero-light .hero-stats{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 640px !important;
  margin: 0 !important;
}
.hero.hero-light .stat-card{
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 13px !important;
  min-height: 94px !important;
  padding: 18px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(221,232,236,.94) !important;
  box-shadow: 0 16px 44px rgba(6,35,51,.065) !important;
}
.hero.hero-light .stat-ic{
  width: 38px !important;
  height: 38px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  background: #ecfdf3 !important;
  color: #16a34a !important;
}
.hero.hero-light .stat-ic svg{ width: 22px; height: 22px; }
.hero.hero-light .stat-card b{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: 29px !important;
  line-height: .9 !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
}
.hero.hero-light .stat-card span{
  color: #123548 !important;
  font-size: 13.5px !important;
  font-weight: 780 !important;
  line-height: 1.22 !important;
}

/* === Premium leaf — single high-quality 3D image === */
.hero.hero-light .hero-visual-leaf{
  min-height: min(610px, calc(100svh - 150px)) !important;
  align-self: stretch !important;
  isolation: isolate !important;
}
.hero.hero-light .hero-visual-leaf::before{
  content: '';
  position: absolute;
  inset: 3% -20% -8% -7%;
  z-index: -3;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(22,163,74,.24), transparent 56%),
    radial-gradient(circle at 74% 36%, rgba(255,255,255,.95), transparent 0 18%, transparent 28%);
  filter: blur(10px);
}
.hero.hero-light .hero-visual-leaf::after{
  content: '';
  position: absolute;
  right: -16%; top: 7%;
  width: 82%; aspect-ratio: 1;
  z-index: -2;
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 50%;
  opacity: .7;
  box-shadow:
    inset 0 0 0 78px rgba(255,255,255,.07),
    inset 0 0 0 128px rgba(22,163,74,.035);
}

.hero.hero-light .hl-leaf-premium{
  position: absolute;
  right: -11%;
  top: 3%;
  width: min(860px, 55vw);
  max-width: none;
  height: auto;
  transform: rotate(-7deg) translate(4%, -1%);
  transform-origin: center;
  filter:
    drop-shadow(0 34px 62px rgba(22,163,74,.28))
    drop-shadow(0 14px 28px rgba(6,35,51,.14));
  pointer-events: none;
  z-index: 1;
  animation: hl-leaf-float 14s ease-in-out infinite;
}
@keyframes hl-leaf-float{
  0%, 100% { transform: rotate(-7deg) translate(4%, -1%); }
  50%      { transform: rotate(-6deg) translate(4%, -2.5%); }
}

/* Hide leaf-stack remnants (in case any are still rendered) */
.hero.hero-light .hl-leaf-stack{ display: none !important; }

/* Tech orbit — slightly more refined */
.hero.hero-light .hl-orbit{
  right: 8% !important;
  bottom: 5% !important;
  width: 210px !important;
  opacity: .48 !important;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.88) 34% 35%, transparent 35% 100%),
    conic-gradient(from 45deg, transparent 0 18%, rgba(255,255,255,.9) 18% 20%, transparent 20% 34%, rgba(22,163,74,.40) 34% 36%, transparent 36% 100%) !important;
  z-index: 2 !important;
}

/* Floating card — refined per spec */
.hero.hero-light .hl-floating-card{
  right: clamp(4px, 4vw, 50px) !important;
  bottom: clamp(18px, 6vw, 56px) !important;
  width: min(310px, 80vw) !important;
  padding: 22px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(221,232,236,.92) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(6,35,51,.10) !important;
}
.hero.hero-light .hl-fc-head{ gap: 15px !important; padding-bottom: 16px !important; }
.hero.hero-light .hl-fc-ic{
  width: 46px !important; height: 46px !important;
  padding: 11px !important;
  background: #ecfdf3 !important;
  color: #16a34a !important;
}
.hero.hero-light .hl-floating-card strong{ font-size: 21px !important; font-weight: 950 !important; }
.hero.hero-light .hl-fc-head span{ font-size: 16px !important; color: #123548 !important; }
.hero.hero-light .hl-floating-card ul{
  gap: 11px !important;
  margin-top: 16px !important;
  font-size: 14.5px !important;
  font-weight: 760 !important;
  color: #123548 !important;
}
.hero.hero-light .hl-floating-card li{ padding-left: 27px !important; }
.hero.hero-light .hl-floating-card li::before{
  width: 18px !important; height: 18px !important;
  font-size: 12px !important;
}

/* Tablet */
@media (max-width: 1320px){
  .hero.hero-light .hero-inner{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 36px !important;
  }
  .hero.hero-light .hero-text{ max-width: 760px !important; }
  .hero.hero-light .hero-visual-leaf{ min-height: 500px !important; }
  .hero.hero-light .hl-leaf-premium{
    right: 4%;
    width: min(820px, 88vw);
    transform: rotate(-7deg) translate(0, 0);
  }
  @keyframes hl-leaf-float{
    0%, 100% { transform: rotate(-7deg) translate(0, 0); }
    50%      { transform: rotate(-6deg) translate(0, -1.5%); }
  }
}

/* Mobile */
@media (max-width: 820px){
  .hero.hero-light .hero-inner{ padding: 36px 0 56px !important; }
  .hero.hero-light .hero-eyebrow{ font-size: 11px !important; letter-spacing: .12em !important; }
  .hero.hero-light h1{ font-size: clamp(42px, 12vw, 62px) !important; }
  .hero.hero-light .hero-light-search{
    height: auto !important;
    min-height: 66px !important;
    border-radius: 28px !important;
    flex-wrap: wrap !important;
    padding: 15px !important;
  }
  .hero.hero-light .hl-search-btn{ width: 100% !important; }
  .hero.hero-light .hero-stats{ grid-template-columns: 1fr !important; }
  .hero.hero-light .hero-visual-leaf{ min-height: 420px !important; }
  .hero.hero-light .hl-leaf-premium{
    right: -36%;
    top: 7%;
    width: 118vw;
  }
  .hero.hero-light .hl-floating-card{
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
  }
}

/* ===================================================================
   Homepage hero — PRO version (matches ChatGPT reference exactly)
   Clean white BG, big premium 3D leaf, 2 CTAs, 3 feature pills,
   floating green pill bottom-right.
   Search/chips moved to .hero-search-strip below (handlers preserved).
=================================================================== */

.hero.hero-pro{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  color: #062333;
  border-bottom: 1px solid rgba(221,232,236,.6);
}

/* Layered background — soft green/blue glow on the right side */
.hero.hero-pro .hp-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 50%, rgba(22,163,74,.14), transparent 50%),
    radial-gradient(circle at 95% 18%, rgba(22,163,74,.08), transparent 36%),
    radial-gradient(circle at 92% 92%, rgba(74,179,255,.06), transparent 35%),
    linear-gradient(110deg, #ffffff 0%, #fbfdfe 55%, #f1faf3 100%);
  z-index: 0;
}

/* Subtle dot grid pattern, masked to the right side only */
.hero.hero-pro .hp-dots{
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(22,163,74,.18) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 78% 60%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 65% 55% at 78% 60%, #000 30%, transparent 80%);
  opacity: .85;
  z-index: 0;
}

.hero.hero-pro .hp-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(56px, 6vw, 92px) 0 clamp(56px, 6vw, 92px);
  min-height: clamp(620px, 78vh, 780px);
}

/* ====== Left text column ====== */
.hp-text{ max-width: 620px; position: relative; z-index: 3; }

.hp-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 26px;
  color: #11813b;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hp-eyebrow-line{
  display: inline-block;
  width: 30px; height: 2px;
  background: #16a34a;
  border-radius: 2px;
}

.hp-title{
  margin: 0 0 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: #062333;
  text-wrap: balance;
}
.hp-title-hl{
  color: #16a34a;
  display: inline-block;
}
.hp-dot{ color: #16a34a; }

.hp-intro{
  margin: 0 0 36px;
  max-width: 520px;
  color: #536577;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  font-weight: 500;
}

/* ====== CTAs ====== */
.hp-ctas{
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0 0 48px;
}
.hp-cta{
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, color .15s ease, border-color .15s ease;
}
.hp-cta-primary{
  background: linear-gradient(135deg, #20b65a 0%, #11813b 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 14px 32px rgba(22,163,74,.32), 0 2px 4px rgba(22,163,74,.18);
}
.hp-cta-primary:hover{
  transform: translateY(-1.5px);
  box-shadow: 0 20px 42px rgba(22,163,74,.40), 0 3px 6px rgba(22,163,74,.22);
  color: #fff;
}
.hp-cta-primary .hp-arrow{
  width: 18px; height: 18px;
  transition: transform .25s ease;
}
.hp-cta-primary:hover .hp-arrow{ transform: translateX(3px); }

.hp-cta-ghost{
  background: rgba(255,255,255,.85);
  color: #062333;
  border: 1.5px solid rgba(22,163,74,.22);
  backdrop-filter: blur(8px);
}
.hp-cta-ghost:hover{
  border-color: #16a34a;
  color: #11813b;
  background: #fff;
  transform: translateY(-1.5px);
  box-shadow: 0 12px 24px rgba(22,163,74,.14);
}
.hp-play{
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  color: #16a34a;
}
.hp-play svg{ width: 100%; height: 100%; display: block; }

/* ====== 3 feature items ====== */
.hp-features{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 600px;
}
.hp-feature{
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
}
.hp-fic{
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(22,163,74,.32);
  color: #16a34a;
  background: #fff;
  flex: 0 0 auto;
}
.hp-fic svg{ width: 18px; height: 18px; display: block; }
.hp-feature strong{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #062333;
  line-height: 1.2;
  margin-bottom: 2px;
}
.hp-feature span{
  display: block;
  color: #536577;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

/* ====== Right visual column (leaf + floating tag) ====== */
.hp-visual{
  position: relative;
  align-self: stretch;
  min-height: 540px;
  isolation: isolate;
}

/* Soft halo behind leaf */
.hp-visual::before{
  content: '';
  position: absolute;
  inset: 4% -10% 0 -2%;
  z-index: -3;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(22,163,74,.18), transparent 56%),
    radial-gradient(circle at 70% 36%, rgba(255,255,255,.95), transparent 0 22%);
  filter: blur(8px);
}

/* Tech orbit ring decoration in bottom-right */
.hp-orbit{
  position: absolute;
  right: 6%;
  bottom: 4%;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .55;
  background:
    radial-gradient(circle, transparent 0 36%, rgba(255,255,255,.85) 36% 37%, transparent 37% 100%),
    conic-gradient(from 45deg, transparent 0 18%, rgba(255,255,255,.85) 18% 20%, transparent 20% 36%, rgba(22,163,74,.45) 36% 38%, transparent 38% 100%);
  pointer-events: none;
  z-index: 0;
}

/* The big premium 3D leaf */
.hp-leaf{
  position: absolute;
  right: -8%;
  top: 50%;
  width: min(720px, 60vw);
  height: auto;
  max-width: none;
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: center;
  filter:
    drop-shadow(0 38px 70px rgba(22,163,74,.30))
    drop-shadow(0 18px 36px rgba(22,163,74,.18))
    drop-shadow(0 4px 10px rgba(6,35,51,.10));
  pointer-events: none;
  z-index: 1;
  animation: hp-leaf-float 13s ease-in-out infinite;
}
@keyframes hp-leaf-float{
  0%, 100% { transform: translateY(-50%) rotate(-8deg); }
  50%      { transform: translateY(calc(-50% - 12px)) rotate(-6deg); }
}

/* Floating green pill bottom-right */
.hp-tag{
  position: absolute;
  right: clamp(8px, 3vw, 32px);
  bottom: clamp(12px, 4vw, 40px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(22,163,74,.16);
  border-radius: 999px;
  box-shadow:
    0 14px 36px rgba(6,35,51,.10),
    0 4px 10px rgba(22,163,74,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  max-width: 320px;
  animation: hp-tag-float 9s ease-in-out infinite;
}
@keyframes hp-tag-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.hp-tag-ic{
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #16a34a;
  flex: 0 0 auto;
}
.hp-tag-ic svg{ width: 20px; height: 20px; display: block; }
.hp-tag-text{
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #536577;
  font-weight: 600;
  line-height: 1.3;
}
.hp-tag-text strong{
  color: #11813b;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.25;
  margin-top: 1px;
}

/* ===================================================================
   Search strip — clean band right below the hero
   Preserves #heroSearchForm + #heroSearchInput + .hero-chip handlers
=================================================================== */
.hero-search-strip{
  background: linear-gradient(180deg, #f4faf6 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(221,232,236,.6);
  padding: 22px 0;
  position: relative;
  z-index: 5;
}
.hss-inner{
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.hss-label{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #11813b;
  white-space: nowrap;
}
.hss-form{
  display: flex; align-items: center;
  gap: 10px;
  height: 52px;
  padding: 6px 6px 6px 18px;
  background: #fff;
  border: 1px solid #dde8ec;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(6,35,51,.06);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.hss-form:focus-within{
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 0 0 3px rgba(22,163,74,.10), 0 8px 22px rgba(6,35,51,.08);
}
.hss-ic{
  width: 18px; height: 18px;
  color: #062333;
  flex: 0 0 auto;
  display: inline-flex;
}
.hss-ic svg{ width: 100%; height: 100%; display: block; }
.hss-form input{
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  color: #062333;
  font: inherit;
  font-size: 15px;
  padding: 0;
  height: 100%;
}
.hss-form input::placeholder{ color: #8fa0ad; }
.hss-btn{
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #20b65a, #11813b);
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(22,163,74,.28);
  transition: transform .15s ease, box-shadow .2s ease;
}
.hss-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(22,163,74,.36);
}

.hss-chips{
  display: flex; align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hss-chip-label{
  font-size: 12px;
  font-weight: 800;
  color: #536577;
  letter-spacing: .02em;
  margin-right: 2px;
}
.hero-search-strip .hero-chip{
  appearance: none; -webkit-appearance: none;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(22,163,74,.22);
  border-radius: 999px;
  background: #fff;
  color: #11813b;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.hero-search-strip .hero-chip:hover{
  background: #11813b;
  color: #fff;
  border-color: #11813b;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(22,163,74,.24);
}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1280px){
  .hero.hero-pro .hp-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  }
  .hp-leaf{ width: min(640px, 70vw); right: -12%; }
}

@media (max-width: 1080px){
  .hero.hero-pro .hp-grid{
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 0 80px;
    min-height: auto;
  }
  .hp-text{ max-width: none; order: 1; }
  .hp-visual{
    order: 2;
    min-height: 460px;
  }
  .hp-leaf{
    right: -8%;
    width: min(640px, 88vw);
  }

  .hss-inner{
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }
  .hss-chips{ justify-content: flex-start; }
}

@media (max-width: 720px){
  .hero.hero-pro .hp-grid{ padding: 40px 0 56px; }
  .hp-title{ font-size: clamp(34px, 9vw, 48px); }
  .hp-features{ grid-template-columns: 1fr; gap: 14px; max-width: none; }
  .hp-ctas{ flex-direction: column; align-items: stretch; }
  .hp-ctas .hp-cta{ justify-content: center; }
  .hp-visual{ min-height: 360px; }
  .hp-leaf{
    right: -28%;
    width: 130vw;
  }
  .hp-tag{
    left: 8px; right: 8px;
    bottom: 0;
    max-width: none;
  }

  .hero-search-strip{ padding: 18px 0; }
  .hss-form{ height: 50px; padding: 6px 6px 6px 16px; }
  .hss-btn{ padding: 0 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .hp-leaf, .hp-tag{ animation: none; }
}

/* ===================================================================
   HOME V4 — premium Siltec leaf hero with integrated catalog search
   Added by ChatGPT. Keeps #heroSearchForm, #heroSearchInput and
   .hero-chip selectors so the existing JS search functionality remains.
=================================================================== */
.hero.hero-home-v4{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff !important;
  color: #062333;
  border-bottom: 1px solid rgba(221,232,236,.72);
}
.hero.hero-home-v4::before{ content: none !important; }
.hero-home-v4 .container{
  width: min(1360px, calc(100% - 64px));
}
.home-v4-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 47%, rgba(22,163,74,.20), transparent 44%),
    radial-gradient(circle at 92% 18%, rgba(0,160,198,.08), transparent 36%),
    radial-gradient(circle at 98% 90%, rgba(22,163,74,.12), transparent 38%),
    linear-gradient(108deg, #ffffff 0%, #fbfdfe 49%, #eefaf2 100%);
}
.home-v4-tech{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .72;
  background-image:
    radial-gradient(rgba(22,163,74,.18) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 62%, rgba(22,163,74,.16) 62.1%, transparent 62.25%),
    linear-gradient(155deg, transparent 0 69%, rgba(0,160,198,.10) 69.1%, transparent 69.25%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 65% 62% at 78% 56%, #000 22%, transparent 78%);
          mask-image: radial-gradient(ellipse 65% 62% at 78% 56%, #000 22%, transparent 78%);
}
.home-v4-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(440px, .92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(30px, 5vw, 82px);
  min-height: min(760px, calc(100svh - 78px));
  padding: clamp(42px, 5.4vw, 78px) 0 clamp(42px, 5.4vw, 76px);
}
.home-v4-copy{
  position: relative;
  z-index: 5;
  max-width: 650px;
  text-align: left !important;
}
.home-v4-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: #11813b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.1;
  text-transform: uppercase;
}
.home-v4-leaf-dot{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #16a34a;
  font-size: 18px;
  transform: rotate(-25deg);
}
.home-v4-title{
  margin: 0 0 20px !important;
  max-width: 690px;
  color: #062333 !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(43px, 4.05vw, 64px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.058em;
  text-align: left !important;
  text-wrap: balance;
}
.home-v4-green-dot{ color: #16a34a; }
.home-v4-intro{
  max-width: 610px;
  margin: 0 0 23px;
  color: #536577;
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 520;
  line-height: 1.62;
}
.home-v4-search{
  width: min(100%, 620px);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 23px;
  margin: 0 0 15px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dde8ec;
  border-radius: 999px;
  box-shadow:
    0 22px 42px rgba(6,35,51,.08),
    0 2px 4px rgba(6,35,51,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .18s ease, box-shadow .25s ease, transform .18s ease;
}
.home-v4-search:focus-within{
  border-color: rgba(22,163,74,.55);
  box-shadow:
    0 0 0 4px rgba(22,163,74,.10),
    0 24px 48px rgba(6,35,51,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.home-v4-search-icon{
  width: 21px;
  height: 21px;
  display: inline-flex;
  color: #062333;
  flex: 0 0 auto;
}
.home-v4-search-icon svg{ width: 100%; height: 100%; display: block; }
.home-v4-search input{
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #062333;
  font: inherit;
  font-size: 15.5px;
  font-weight: 540;
}
.home-v4-search input::placeholder{ color: #8da0ad; }
.home-v4-search button{
  height: 52px;
  min-width: 132px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #20b65a 0%, #11813b 100%);
  color: #fff;
  cursor: pointer;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    0 12px 24px rgba(22,163,74,.34),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.home-v4-search button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(22,163,74,.42), inset 0 1px 0 rgba(255,255,255,.25);
}
.home-v4-popular{
  width: min(100%, 620px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.home-v4-popular > span{
  margin-right: 2px;
  color: #536577;
  font-size: 13px;
  font-weight: 850;
}
.home-v4-popular .hero-chip{
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 15px;
  border: 1px solid rgba(22,163,74,.26);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #11813b;
  cursor: pointer;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 860;
  box-shadow: 0 6px 14px rgba(6,35,51,.035);
  transition: transform .15s ease, box-shadow .2s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.home-v4-popular .hero-chip:hover{
  background: #11813b;
  border-color: #11813b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(22,163,74,.22);
}
.home-v4-stats{
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-v4-stat-card{
  min-height: 92px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 17px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(221,232,236,.92);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(6,35,51,.065);
  position: relative;
  overflow: hidden;
}
.home-v4-stat-card::after{
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, rgba(22,163,74,.9), rgba(22,163,74,.22));
}
.home-v4-stat-icon{
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #ecfdf3;
  color: #16a34a;
}
.home-v4-stat-icon svg{ width: 25px; height: 25px; display: block; }
.home-v4-stat-card strong{
  display: block;
  align-self: end;
  color: #062333;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.03em;
}
.home-v4-stat-card small{
  display: block;
  align-self: start;
  margin-top: 4px;
  color: #536577;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.22;
}
.home-v4-stat-card-wide strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: -.04em;
}
.home-v4-visual{
  position: relative;
  min-height: clamp(520px, 46vw, 650px);
  align-self: stretch;
  z-index: 3;
  pointer-events: none;
}
.home-v4-visual-halo{
  position: absolute;
  inset: 6% -16% 4% -8%;
  border-radius: 50%;
  z-index: -3;
  background:
    radial-gradient(circle at 52% 50%, rgba(22,163,74,.22), transparent 0 43%),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.96), transparent 0 19%),
    radial-gradient(circle at 62% 61%, rgba(0,160,198,.10), transparent 0 57%);
  filter: blur(10px);
}
.home-v4-orbit{
  position: absolute;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.075);
  opacity: .72;
}
.home-v4-orbit-one{
  width: min(620px, 46vw);
  aspect-ratio: 1;
  right: -3%;
  top: 11%;
}
.home-v4-orbit-two{
  width: min(220px, 18vw);
  aspect-ratio: 1;
  right: 21%;
  bottom: 7%;
  border-style: dashed;
  opacity: .58;
}
.home-v4-leaf{
  position: absolute;
  width: min(860px, 66vw);
  max-width: none;
  height: auto;
  right: clamp(-230px, -14vw, -90px);
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  transform-origin: center;
  z-index: 2;
  filter:
    drop-shadow(0 46px 72px rgba(22,163,74,.30))
    drop-shadow(0 19px 34px rgba(22,163,74,.22))
    drop-shadow(0 8px 16px rgba(6,35,51,.12));
  animation: home-v4-leaf-float 12s ease-in-out infinite;
}
@keyframes home-v4-leaf-float{
  0%, 100% { transform: translateY(-50%) rotate(-7deg); }
  50% { transform: translateY(calc(-50% - 10px)) rotate(-5.8deg); }
}
.home-v4-floating-card{
  position: absolute;
  right: clamp(10px, 3.4vw, 48px);
  bottom: clamp(26px, 7vw, 92px);
  width: min(306px, 76%);
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 20px 22px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(221,232,236,.88);
  box-shadow:
    0 24px 52px rgba(6,35,51,.14),
    0 3px 8px rgba(22,163,74,.08),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 5;
  animation: home-v4-card-float 8s ease-in-out infinite;
}
@keyframes home-v4-card-float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.home-v4-card-icon{
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #11813b;
}
.home-v4-card-icon svg{ width: 23px; height: 23px; display: block; }
.home-v4-floating-card strong{
  display: block;
  color: #062333;
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.home-v4-floating-card span{
  display: block;
  margin-top: 3px;
  color: #536577;
  font-size: 14px;
  font-weight: 680;
}
.home-v4-floating-card ul{
  grid-column: 1 / -1;
  margin: 13px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #e5edf0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: #253f4e;
  font-size: 13.2px;
  font-weight: 760;
}
.home-v4-floating-card li{
  display: flex;
  align-items: center;
  gap: 9px;
}
.home-v4-floating-card li::before{
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  flex: 0 0 auto;
}
@media (max-width: 1180px){
  .hero-home-v4 .container{ width: min(100% - 42px, 1180px); }
  .home-v4-grid{
    grid-template-columns: minmax(390px, .98fr) minmax(430px, 1.02fr);
    gap: 28px;
  }
  .home-v4-title{ font-size: clamp(42px, 4.5vw, 58px); }
  .home-v4-leaf{ width: min(760px, 69vw); right: clamp(-220px, -17vw, -92px); }
  .home-v4-stats{ gap: 11px; }
  .home-v4-stat-card{ padding: 14px; }
}
@media (max-width: 980px){
  .home-v4-grid{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 46px 0 64px;
  }
  .home-v4-copy{ max-width: 720px; }
  .home-v4-title{ font-size: clamp(42px, 8vw, 66px); }
  .home-v4-visual{
    min-height: 430px;
    margin-top: -18px;
  }
  .home-v4-leaf{
    width: min(780px, 105vw);
    right: -16%;
  }
  .home-v4-floating-card{ right: 4%; bottom: 10%; }
  .home-v4-orbit-one{ width: 74vw; right: 2%; }
}
@media (max-width: 720px){
  .hero-home-v4 .container{ width: min(100% - 24px, 1180px); }
  .home-v4-grid{ padding: 34px 0 46px; gap: 22px; }
  .home-v4-eyebrow{ font-size: 11px; letter-spacing: .12em; margin-bottom: 15px; }
  .home-v4-title{ font-size: clamp(37px, 11vw, 52px); line-height: .98; letter-spacing: -.052em; }
  .home-v4-intro{ font-size: 15px; margin-bottom: 18px; }
  .home-v4-search{
    height: auto;
    min-height: 60px;
    padding: 8px;
    gap: 8px;
    border-radius: 28px;
    flex-wrap: wrap;
  }
  .home-v4-search-icon{ margin-left: 8px; }
  .home-v4-search input{ flex-basis: calc(100% - 46px); height: 42px; font-size: 15px; }
  .home-v4-search button{ width: 100%; height: 46px; }
  .home-v4-popular{ margin-bottom: 18px; }
  .home-v4-stats{ grid-template-columns: 1fr; }
  .home-v4-stat-card{ min-height: 78px; }
  .home-v4-visual{ min-height: 360px; }
  .home-v4-leaf{
    width: 132vw;
    right: -42%;
  }
  .home-v4-floating-card{
    width: auto;
    left: 10px;
    right: 10px;
    bottom: 2px;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-v4-leaf,
  .home-v4-floating-card{ animation: none !important; }
}


/* ===================================================================
   HOME EXACT TARGET - final overrides based on preferred mockup
   Keeps existing IDs/classes for catalog search functionality.
=================================================================== */
.topbar{display:none!important}
.site-header{position:sticky;top:0;z-index:80;background:#fff!important;border-bottom:1px solid #dfe9ed!important;box-shadow:0 1px 0 rgba(6,35,51,.02)!important}
.header-inner{height:96px!important;width:min(1460px,calc(100% - 110px))!important;gap:30px!important}
.brand{min-width:190px!important;gap:10px!important;text-decoration:none!important;color:#063446!important;font-size:34px!important;font-weight:900!important;letter-spacing:-.05em!important;line-height:1!important}
.brand-mark{width:54px!important;height:54px!important;min-width:54px!important;border-radius:0!important;padding:0!important;background:url("../img/brand/siltec-leaf.svg") center/contain no-repeat!important;box-shadow:none!important;color:transparent!important}
.brand > span:not(.brand-mark){display:inline!important}
.brand-word{display:inline!important;color:#063446!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;text-transform:none!important}
.brand small{display:none!important}
.nav{gap:18px!important;flex:1 1 auto!important;justify-content:flex-start!important}
.nav a,.nav-toplink{font-size:16px!important;font-weight:850!important;color:#132836!important;background:transparent!important;border-radius:0!important;padding:10px 0!important;line-height:1.1!important}
.nav a[aria-current="page"]{color:#11813b!important;border-bottom:2px solid #18a34a!important;background:transparent!important}
.nav a:hover,.nav-toplink:hover{color:#11813b!important;background:transparent!important}
.header-actions{gap:12px!important;flex:0 0 auto!important}
.header-search-trigger{height:44px!important;min-width:300px!important;border-radius:999px!important;background:#fff!important;border:1px solid #dde8ec!important;box-shadow:0 8px 22px rgba(6,35,51,.035)!important;color:#7a8d9c!important}
.hst-icon{color:#159fce!important;font-size:18px!important}.hst-text{font-size:14px!important;font-weight:650!important}.hst-kbd kbd{background:#f7fafb!important;border:1px solid #dbe6eb!important;color:#8aa0ad!important;border-radius:7px!important}
.icon-button{height:48px!important;border-radius:999px!important;font-size:15px!important;font-weight:900!important;box-shadow:none!important}
.btn-wkl{padding:0 20px!important;border:1px solid #8fcbf1!important;color:#1385c4!important;background:#fff!important}.btn-wkl .bw-label{display:inline!important}.btn-wkl .bw-ic{display:inline-flex!important}
.btn-quote{padding:0 14px 0 20px!important;background:linear-gradient(135deg,#22b05a,#14833e)!important;color:#fff!important;border:0!important;box-shadow:0 10px 26px rgba(22,163,74,.28)!important}.btn-quote .quote-count{background:#fff!important;color:#14833e!important;min-width:26px!important;height:26px!important;margin-left:2px!important}.btn-quote .bq-label{display:inline!important}.btn-quote .bq-ic{display:inline-flex!important}

.hero.hero-home-v4{min-height:calc(100vh - 96px)!important;background:#fff!important;border-bottom:0!important;overflow:hidden!important}
.hero-home-v4 .container{width:min(1480px,calc(100% - 112px))!important}
.home-v4-bg{background:radial-gradient(circle at 86% 50%,rgba(22,163,74,.23),transparent 0 38%),radial-gradient(circle at 74% 60%,rgba(18,156,84,.13),transparent 0 45%),radial-gradient(circle at 96% 28%,rgba(255,255,255,.85),transparent 0 18%),linear-gradient(104deg,#fff 0%,#fff 39%,#f7fcfa 55%,#eaf8ef 100%)!important}
.home-v4-tech{opacity:.62!important;background-image:radial-gradient(rgba(22,163,74,.12) 1px,transparent 1px),radial-gradient(circle at 80% 50%,transparent 0 27%,rgba(255,255,255,.85) 27.2% 27.35%,transparent 27.55% 32%,rgba(255,255,255,.78) 32.15% 32.3%,transparent 32.5%),linear-gradient(125deg,transparent 0 60%,rgba(255,255,255,.65) 60.1%,transparent 60.3%)!important;background-size:20px 20px,100% 100%,100% 100%!important;mask-image:radial-gradient(ellipse 66% 72% at 78% 52%,#000 18%,transparent 74%)!important;-webkit-mask-image:radial-gradient(ellipse 66% 72% at 78% 52%,#000 18%,transparent 74%)!important}
.home-v4-grid{grid-template-columns:minmax(560px,0.47fr) minmax(620px,0.53fr)!important;gap:clamp(38px,4vw,76px)!important;min-height:calc(100vh - 96px)!important;padding:clamp(56px,7vh,88px) 0 56px!important;align-items:center!important}
.home-v4-copy{max-width:650px!important;align-self:center!important;padding-top:2px!important}
.home-v4-eyebrow{font-size:12px!important;letter-spacing:.20em!important;margin:0 0 26px!important;color:#11883f!important}.home-v4-leaf-dot{font-size:15px!important;width:18px!important;height:18px!important}
.home-v4-title{font-size:clamp(50px,4.05vw,68px)!important;line-height:1.03!important;letter-spacing:-.055em!important;max-width:780px!important;margin:0 0 24px!important;color:#062333!important;font-family:'Playfair Display', Georgia, 'Times New Roman', serif!important;text-wrap:auto!important}
.home-v4-intro{max-width:600px!important;font-size:16px!important;line-height:1.55!important;margin:0 0 26px!important;color:#536577!important;font-weight:520!important}
.home-v4-search{width:650px!important;max-width:100%!important;height:64px!important;margin-bottom:15px!important;padding:7px 8px 7px 24px!important;border:1px solid #dce8ed!important;box-shadow:0 18px 40px rgba(6,35,51,.075),inset 0 1px 0 rgba(255,255,255,.95)!important}
.home-v4-search button{height:50px!important;min-width:138px!important;font-size:13px!important;background:linear-gradient(135deg,#21b65a 0%,#0f823a 100%)!important;box-shadow:0 13px 24px rgba(22,163,74,.32)!important}
.home-v4-popular{width:650px!important;max-width:100%!important;margin-bottom:25px!important;gap:9px!important}.home-v4-popular>span{font-size:13px!important}.home-v4-popular .hero-chip{height:30px!important;padding:0 16px!important;font-size:13px!important;background:rgba(255,255,255,.86)!important}
.home-v4-stats{width:650px!important;max-width:100%!important;gap:14px!important}.home-v4-stat-card{min-height:102px!important;border-radius:16px!important;padding:17px 18px!important;background:rgba(255,255,255,.90)!important;box-shadow:0 15px 34px rgba(6,35,51,.075)!important}.home-v4-stat-card strong{font-size:30px!important}.home-v4-stat-card small{font-size:12.5px!important}.home-v4-stat-card-wide strong{font-size:30px!important}
.home-v4-visual{min-height:calc(100vh - 110px)!important;align-self:stretch!important}.home-v4-visual-halo{inset:7% -18% 2% -12%!important;background:radial-gradient(circle at 56% 52%,rgba(22,163,74,.20),transparent 0 43%),radial-gradient(circle at 73% 23%,rgba(255,255,255,.92),transparent 0 16%),radial-gradient(circle at 62% 62%,rgba(20,150,120,.10),transparent 0 58%)!important;filter:blur(8px)!important}.home-v4-orbit-one{width:min(720px,48vw)!important;right:-4%!important;top:13%!important}.home-v4-orbit-two{width:min(230px,16vw)!important;right:22%!important;bottom:7%!important}
.home-v4-leaf{width:min(960px,64vw)!important;right:clamp(-255px,-14vw,-120px)!important;top:50%!important;transform:translateY(-48%) rotate(-7deg)!important;filter:drop-shadow(0 48px 74px rgba(22,163,74,.29)) drop-shadow(0 20px 34px rgba(22,163,74,.19)) drop-shadow(0 8px 16px rgba(6,35,51,.14))!important;animation:none!important}.home-v4-floating-card{right:clamp(14px,4.5vw,78px)!important;bottom:clamp(48px,12vh,116px)!important;width:318px!important;padding:20px 22px 18px!important;border-radius:22px!important;box-shadow:0 24px 56px rgba(6,35,51,.14),inset 0 1px 0 rgba(255,255,255,.98)!important;animation:none!important}.home-v4-floating-card strong{font-size:18px!important}.home-v4-floating-card ul{font-size:13.2px!important}
@media(max-width:1280px){.header-inner{width:min(100% - 56px,1280px)!important}.hero-home-v4 .container{width:min(100% - 56px,1280px)!important}.home-v4-grid{grid-template-columns:minmax(500px,.48fr) minmax(520px,.52fr)!important}.home-v4-title{font-size:clamp(47px,4.3vw,60px)!important}.home-v4-search,.home-v4-popular,.home-v4-stats{width:600px!important}.home-v4-leaf{width:min(870px,68vw)!important;right:-230px!important}.home-v4-floating-card{right:22px!important}}
@media(max-width:1040px){.header-inner{height:82px!important}.nav{gap:12px!important}.header-search-trigger{min-width:240px!important}.home-v4-grid{grid-template-columns:1fr!important;min-height:auto!important;padding:54px 0 68px!important}.home-v4-title{font-size:clamp(44px,7vw,62px)!important}.home-v4-visual{min-height:440px!important}.home-v4-leaf{width:min(850px,105vw)!important;right:-18%!important}.home-v4-floating-card{right:5%!important;bottom:12%!important}}
@media(max-width:720px){.header-inner{width:min(100% - 24px,1180px)!important}.brand{font-size:28px!important;min-width:0!important}.brand-mark{width:42px!important;height:42px!important;min-width:42px!important}.hero-home-v4 .container{width:min(100% - 24px,1180px)!important}.home-v4-title{font-size:clamp(38px,11vw,52px)!important}.home-v4-search,.home-v4-popular,.home-v4-stats{width:100%!important}.home-v4-stats{grid-template-columns:1fr!important}.home-v4-leaf{width:128vw!important;right:-40%!important}.home-v4-floating-card{width:auto!important;left:10px!important;right:10px!important;bottom:4px!important}}

/* ===================================================================
   Brand logo fix — restore working header logo
   The previous override pointed to siltec-leaf.svg which uses
   stroke="currentColor"; that doesn't render when used as a CSS
   background-image (color falls through), so the leaf was invisible.
   Use the premium 3D green PNG instead — already a real green color.
=================================================================== */
.site-header .brand-mark{
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  background:
    url("../img/brand/siltec-leaf-premium.png") center/contain no-repeat !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: drop-shadow(0 6px 12px rgba(22,163,74,.18));
  flex: 0 0 auto;
}

/* Ensure the SILTEC wordmark next to the leaf is visible + nicely styled */
.site-header .brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #062333 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.site-header .brand > span:not(.brand-mark){
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: 26px !important;
  color: #062333 !important;
  text-transform: none !important;
}
.site-header .brand small{
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  margin: 0 !important;
}

@media (max-width: 720px){
  .site-header .brand-mark{ width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .site-header .brand > span:not(.brand-mark){ font-size: 22px !important; }
  .site-header .brand small{ display: none !important; }
}

/* ===================================================================
   FINAL Siltec logo — combined leaf + SILTEC NETHERLANDS wordmark
   Uses one PNG with transparent background for both header + footer.
   Hides the separate text spans since the wordmark is in the image.
=================================================================== */

/* Header */
.site-header .brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.site-header .brand-mark{
  display: block !important;
  width: 144px !important;
  height: 60px !important;
  min-width: 144px !important;
  background: url("../img/brand/siltec-nl-logo.png") left center / contain no-repeat !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 0 !important;
  color: transparent !important;
  flex: 0 0 auto;
}
/* Hide the separate "SILTEC / Kabelgoten Nederland" text since it's already in the logo */
.site-header .brand > span:not(.brand-mark){
  display: none !important;
}

@media (max-width: 720px){
  .site-header .brand-mark{
    width: 110px !important;
    height: 46px !important;
    min-width: 110px !important;
  }
}

/* Footer — same logo, slightly larger so it reads well on dark navy bg */
.footer .brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.footer .brand-mark{
  display: block !important;
  width: 180px !important;
  height: 76px !important;
  min-width: 180px !important;
  background: url("../img/brand/siltec-nl-logo.png") left center / contain no-repeat !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.32)) brightness(1.05);
  font-size: 0 !important;
  color: transparent !important;
}
.footer .brand > span:not(.brand-mark){
  display: none !important;
}

/* ===================================================================
   Hero certificering badges — vervangt het oude stat-cards blok
=================================================================== */
.home-v4-certs{
  width: 650px;
  max-width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-v4-certs-label{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #11813b;
}
.home-v4-certs-row{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.home-v4-cert{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 20px 12px 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid #dde8ec;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(6,35,51,.06);
  transition: transform .18s ease, box-shadow .25s ease, border-color .15s ease;
}
.home-v4-cert:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(6,35,51,.10);
  border-color: rgba(22,163,74,.30);
}
.home-v4-cert img{
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}
.home-v4-cert figcaption{
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #536577;
  line-height: 1.35;
}
.home-v4-cert figcaption strong{
  display: block;
  margin-top: 2px;
  color: #062333;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.005em;
}

@media (max-width: 1280px){
  .home-v4-certs{ width: 600px; }
}
@media (max-width: 720px){
  .home-v4-certs{ width: 100%; }
  .home-v4-certs-row{ gap: 12px; }
  .home-v4-cert{ flex: 1 1 calc(50% - 12px); padding: 10px 14px 10px 10px; }
  .home-v4-cert img{ width: 54px; height: 54px; }
  .home-v4-cert figcaption{ font-size: 10.5px; }
  .home-v4-cert figcaption strong{ font-size: 11.5px; }
}

/* ===================================================================
   Hero text refinements + simplified circular cert badges
=================================================================== */

/* Override old cert-card styling so only the two round logos show */
.home-v4-certs{
  display: inline-flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin-top: 18px !important;
  width: auto !important;
  max-width: none !important;
  flex-direction: row !important;
}
.home-v4-cert-logo{
  width: 80px !important;
  height: 80px !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(6,35,51,.10));
  transition: transform .2s ease, filter .25s ease;
}
.home-v4-cert-logo:hover{
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 10px 22px rgba(6,35,51,.18));
}

/* Hide any leftover from the old cert-cards */
.home-v4-certs-label,
.home-v4-certs-row,
.home-v4-cert{
  display: none !important;
}

/* === Polished, smaller hero text (above search bar) === */
.home-v4-eyebrow{
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  margin: 0 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.home-v4-eyebrow::before{
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #16a34a 0%, rgba(22,163,74,0) 100%);
  border-radius: 2px;
}
.home-v4-leaf-dot{
  display: none !important;
}

.home-v4-title{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(36px, 3.2vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -.028em !important;
  color: #062333 !important;
  margin: 0 0 20px !important;
  max-width: 580px !important;
  text-wrap: balance !important;
}
.home-v4-green-dot{
  color: #16a34a !important;
  font-weight: 800;
}

.home-v4-intro{
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  color: #5a6c78 !important;
  max-width: 540px !important;
  margin: 0 0 28px !important;
  letter-spacing: -.005em !important;
}

@media (max-width: 1280px){
  .home-v4-title{ font-size: clamp(34px, 3vw, 46px) !important; }
}
@media (max-width: 720px){
  .home-v4-title{ font-size: clamp(30px, 8vw, 40px) !important; }
  .home-v4-intro{ font-size: 14.5px !important; }
  .home-v4-certs{ gap: 18px !important; }
  .home-v4-cert-logo{ width: 64px !important; height: 64px !important; }
}

/* ===================================================================
   Hero text — editorial polish (eyebrow pill + balanced title + intro)
=================================================================== */

/* Eyebrow as a refined two-part pill */
.home-v4-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  background: transparent !important;
}
.home-v4-eyebrow-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.22);
  border-radius: 999px;
  color: #11813b;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.home-v4-eyebrow-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
  flex: 0 0 auto;
  animation: cert-pulse 2.6s ease-in-out infinite;
}
@keyframes cert-pulse{
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(22,163,74,.08); }
}
.home-v4-eyebrow-divider{
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(6,35,51,.22);
}
.home-v4-eyebrow-text{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #5a6c78;
}

/* Hide the old leaf-dot (no longer used in markup but might still be cached) */
.home-v4-leaf-dot{ display: none !important; }

/* Editorial title — natural wrap, mixed sans + serif accent for visual rhythm */
.home-v4-title{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 3.1vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em !important;
  color: #062333 !important;
  margin: 0 0 22px !important;
  max-width: 600px !important;
  text-wrap: balance !important;
  -webkit-font-smoothing: antialiased;
}
.home-v4-title-hl{
  display: inline;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  font-style: italic;
  background: linear-gradient(135deg, #16a34a 0%, #11813b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.012em;
}
.home-v4-green-dot{
  -webkit-text-fill-color: #16a34a !important;
  color: #16a34a !important;
  font-style: normal !important;
}

/* Intro — refined leading with a subtle accent rule on the left */
.home-v4-intro{
  font-family: 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  color: #4a5965 !important;
  max-width: 530px !important;
  margin: 0 0 30px !important;
  letter-spacing: -.005em !important;
  position: relative;
  padding-left: 16px;
  border-left: 2px solid rgba(22,163,74,.30);
}

/* Responsive */
@media (max-width: 1280px){
  .home-v4-title{ font-size: clamp(32px, 3vw, 44px) !important; }
}
@media (max-width: 720px){
  .home-v4-title{ font-size: clamp(28px, 7.5vw, 38px) !important; }
  .home-v4-intro{ font-size: 14.5px !important; padding-left: 12px; }
  .home-v4-eyebrow-text{ display: none; }
  .home-v4-eyebrow-divider{ display: none; }
}

/* ===================================================================
   Hero text — final polish (original wording, premium typography)
=================================================================== */

/* Eyebrow — minimal cyan-green pill with leading accent line */
.home-v4-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  line-height: 1 !important;
}
.home-v4-eyebrow-line{
  display: inline-block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #16a34a 0%, rgba(22,163,74,0) 100%);
  border-radius: 2px;
  flex: 0 0 auto;
}
/* Hide the old pill/dot/divider markup if any cached version still references them */
.home-v4-eyebrow-pill,
.home-v4-eyebrow-dot,
.home-v4-eyebrow-divider,
.home-v4-eyebrow-text,
.home-v4-leaf-dot{
  display: none !important;
}

/* Headline — premium serif with subtle warmth, balanced wrap, no hard breaks */
.home-v4-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  font-size: clamp(40px, 3.8vw, 60px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
  color: #062333 !important;
  margin: 0 0 24px !important;
  max-width: 640px !important;
  text-wrap: balance !important;
  -webkit-font-smoothing: antialiased;
}

/* Reset any old highlight wrappers that might still wrap fragments */
.home-v4-title .home-v4-title-hl{
  display: inline !important;
  font-family: inherit !important;
  font-style: normal !important;
  background: none !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* Green period — single accent of color */
.home-v4-green-dot{
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
  font-style: normal !important;
}

/* Intro — refined body, no decorative elements, just readable */
.home-v4-intro{
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  color: #4f6271 !important;
  max-width: 540px !important;
  margin: 0 0 30px !important;
  letter-spacing: -.005em !important;
  /* Drop any leftover left-border accent from previous attempt */
  padding-left: 0 !important;
  border-left: 0 !important;
  position: static;
}

/* Responsive */
@media (max-width: 1280px){
  .home-v4-title{ font-size: clamp(36px, 3.4vw, 52px) !important; }
}
@media (max-width: 720px){
  .home-v4-title{ font-size: clamp(30px, 8vw, 42px) !important; max-width: 100% !important; }
  .home-v4-intro{ font-size: 15px !important; max-width: 100% !important; }
  .home-v4-eyebrow{ font-size: 11px !important; letter-spacing: .18em !important; }
  .home-v4-eyebrow-line{ width: 24px; }
}

/* ===================================================================
   Hero — global compact scale (everything 12-18% smaller)
   Same composition, just more breathing room on a laptop screen.
=================================================================== */

/* Hero shell — less vertical room */
.hero.hero-home-v4{
  min-height: auto !important;
}
.home-v4-grid{
  min-height: auto !important;
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(36px, 4.5vh, 56px) !important;
  gap: clamp(28px, 3.5vw, 56px) !important;
}

/* Header — slightly slimmer too */
.header-inner{ height: 78px !important; }

/* Eyebrow — a touch tighter */
.home-v4-eyebrow{
  font-size: 11px !important;
  letter-spacing: .22em !important;
  margin: 0 0 18px !important;
  gap: 10px !important;
}
.home-v4-eyebrow-line{
  width: 28px !important;
  height: 2px !important;
}

/* Headline — smaller, still impactful */
.home-v4-title{
  font-size: clamp(32px, 2.9vw, 46px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 18px !important;
  max-width: 560px !important;
}

/* Intro — compact body */
.home-v4-intro{
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
  max-width: 500px !important;
}

/* Search bar — shorter */
.home-v4-search{
  height: 56px !important;
  width: min(560px, 100%) !important;
  padding: 6px 6px 6px 20px !important;
  margin-bottom: 12px !important;
  border-radius: 999px !important;
}
.home-v4-search input{
  font-size: 15px !important;
}
.home-v4-search button{
  height: 44px !important;
  min-width: 116px !important;
  font-size: 12px !important;
  padding: 0 22px !important;
}
.home-v4-search-icon{
  width: 18px !important;
  height: 18px !important;
}

/* Popular chips — compact */
.home-v4-popular{
  width: 560px !important;
  max-width: 100% !important;
  margin-bottom: 18px !important;
  gap: 8px !important;
}
.home-v4-popular > span{
  font-size: 12px !important;
}
.home-v4-popular .hero-chip{
  height: 28px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

/* Cert logos — smaller round badges */
.home-v4-certs{
  gap: 22px !important;
  margin-top: 4px !important;
}
.home-v4-cert-logo{
  width: 64px !important;
  height: 64px !important;
}

/* Visual — smaller premium leaf */
.home-v4-visual{
  min-height: clamp(420px, 60vh, 540px) !important;
}
.home-v4-leaf{
  width: min(740px, 56vw) !important;
  right: clamp(-180px, -10vw, -90px) !important;
  filter:
    drop-shadow(0 30px 50px rgba(22,163,74,.24))
    drop-shadow(0 14px 26px rgba(22,163,74,.16))
    drop-shadow(0 4px 10px rgba(6,35,51,.10)) !important;
}
.home-v4-orbit-one{ width: min(540px, 38vw) !important; }
.home-v4-orbit-two{ width: min(180px, 14vw) !important; }

/* Floating card — smaller too */
.home-v4-floating-card{
  width: 268px !important;
  padding: 16px 18px 14px !important;
  bottom: clamp(36px, 8vh, 88px) !important;
  right: clamp(10px, 3.5vw, 56px) !important;
}
.home-v4-floating-card strong{ font-size: 16px !important; }
.home-v4-floating-card ul{ font-size: 12.5px !important; }
.home-v4-card-icon svg{ width: 22px !important; height: 22px !important; }

/* Responsive */
@media (max-width: 1280px){
  .home-v4-title{ font-size: clamp(30px, 2.8vw, 42px) !important; }
  .home-v4-search,
  .home-v4-popular{ width: 520px !important; }
}
@media (max-width: 1040px){
  .home-v4-grid{ padding: 32px 0 48px !important; }
  .home-v4-visual{ min-height: 360px !important; }
  .home-v4-leaf{ width: min(640px, 90vw) !important; right: -14% !important; }
}
@media (max-width: 720px){
  .home-v4-title{ font-size: clamp(26px, 7vw, 34px) !important; max-width: 100% !important; }
  .home-v4-intro{ font-size: 13.5px !important; max-width: 100% !important; }
  .home-v4-search,
  .home-v4-popular,
  .home-v4-certs{ width: 100% !important; }
  .home-v4-cert-logo{ width: 54px !important; height: 54px !important; }
}

/* ===================================================================
   Smooth hero → families transition + editorial section header
=================================================================== */

/* Section background — warm white to soft mint, picks up the hero's tone */
.families-section{
  position: relative;
  background:
    radial-gradient(circle at 8% 30%, rgba(22,163,74,.05), transparent 28%),
    linear-gradient(180deg, #f7faf8 0%, #f1f8f3 60%, #ecf6ef 100%) !important;
  padding-top: clamp(48px, 6vw, 88px) !important;
  padding-bottom: clamp(48px, 6vw, 84px) !important;
}

/* Subtle organic divider that bridges the hero (white) → families (mint) */
.families-divider{
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(22,163,74,.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, transparent 100%);
  z-index: 1;
}
.families-divider::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(22,163,74,.18) 50%, transparent 100%);
}

/* Editorial section header — same language as hero */
.families-head{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.families-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #11813b;
  margin: 0;
  line-height: 1;
}
.families-eyebrow-line{
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, #16a34a 50%, transparent 100%);
}
.families-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: #062333;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.families-lead{
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: #5a6c78;
  max-width: 580px;
  margin: 0 auto;
}
.families-link-all{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 22px;
  background: #fff;
  color: #11813b;
  border: 1.5px solid rgba(22,163,74,.30);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .25s ease;
}
.families-link-all:hover{
  background: #11813b;
  color: #fff;
  border-color: #11813b;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22,163,74,.26);
}
.families-link-all svg{
  width: 16px; height: 16px;
  transition: transform .25s ease;
}
.families-link-all:hover svg{ transform: translateX(3px); }

/* Polish the category cards inside this section */
.families-section .grid.four{
  position: relative;
  z-index: 2;
}
.families-section .cat-card{
  background: #fff !important;
  border: 1px solid rgba(22,163,74,.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(13,42,58,.04) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .15s ease;
}
.families-section .cat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(13,42,58,.10) !important;
  border-color: rgba(22,163,74,.30) !important;
}

@media (max-width: 720px){
  .families-section{ padding-top: 36px !important; padding-bottom: 48px !important; }
  .families-divider{ height: 50px; }
  .families-title{ font-size: clamp(24px, 6.5vw, 32px); }
  .families-lead{ font-size: 14px; }
}

/* ===================================================================
   Diagonal hero → families transition (slanted ribbon)
   Hero ends with a diagonal cut, families section "wedges up" into it.
=================================================================== */

/* Clip the hero so its bottom edge slants down from upper-right to lower-left.
   This makes the right side of the hero shorter than the left. */
.hero.hero-home-v4{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%) !important;
  margin-bottom: -1px !important;  /* prevent any sub-pixel gap */
}

/* Families section: pull up so its diagonal top edge slots into the hero's slope */
.families-section{
  position: relative;
  margin-top: -60px !important;
  padding-top: clamp(96px, 9vw, 140px) !important;
  z-index: 1;
}

/* The matching diagonal lid sits on top of the families section and is
   colored like the families bg, so the seam is invisible. */
.families-section .families-divider{
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 80px;
  background:
    radial-gradient(ellipse 70% 100% at 30% 100%, rgba(22,163,74,.08), transparent 75%),
    linear-gradient(180deg, #f7faf8 0%, #f1f8f3 100%);
  /* Diagonal: top-left starts at 60px from top (no overlap into hero),
     top-right at 0 (sticks up into hero). Mirror of the hero's clip. */
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Subtle accent line along the diagonal seam */
.families-section .families-divider::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,163,74,.18) 0 1px, transparent 1px 100%);
  clip-path: polygon(0 60px, 100% 0, 100% 1.5px, 0 calc(60px + 1.5px));
  opacity: .9;
}

/* Mobile: gentler slope so it doesn't eat too much space */
@media (max-width: 720px){
  .hero.hero-home-v4{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%) !important;
  }
  .families-section{
    margin-top: -30px !important;
    padding-top: 64px !important;
  }
  .families-section .families-divider{
    height: 50px;
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
  }
}

/* Reduced motion: keep the slant but no anim */
@media (prefers-reduced-motion: reduce){
  .families-section .families-divider{ transition: none; }
}

/* ===================================================================
   FINAL: Hero → families flow — no clip-path, no gap, single canvas
   The hero's background continues seamlessly into families with a
   tiny green accent line as the only visual marker between them.
=================================================================== */

/* Remove all the diagonal stuff — it created an awkward empty gap */
.hero.hero-home-v4{
  clip-path: none !important;
  margin-bottom: 0 !important;
  padding-bottom: clamp(24px, 3.5vw, 56px) !important;
}

.families-section{
  margin-top: 0 !important;
  padding-top: clamp(32px, 4vw, 56px) !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
  /* Continuation of the hero's bg — NOT a flat block of new color */
  background:
    radial-gradient(circle at 12% 20%, rgba(22,163,74,.06), transparent 30%),
    linear-gradient(180deg, #f7faf8 0%, #f1f8f3 100%) !important;
  position: relative;
}

/* Hide the whole divider — no clip-path, no slab, no overlap */
.families-divider{
  display: none !important;
}

/* Single thin green accent line as the only visual seam */
.families-section::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 18vw, 240px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22,163,74,.50) 50%,
    transparent 100%);
  opacity: .9;
}

/* Tighten the families header — title should sit close to the seam */
.families-head{
  margin: 0 auto clamp(28px, 3.5vw, 44px) !important;
  gap: 10px !important;
}
.families-eyebrow{
  margin: 0 0 4px !important;
}
.families-title{
  font-size: clamp(26px, 2.4vw, 38px) !important;
  margin: 0 !important;
}
.families-lead{
  font-size: 14.5px !important;
  margin: 4px auto 6px !important;
  max-width: 540px;
}
.families-link-all{
  margin-top: 4px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
}

@media (max-width: 720px){
  .hero.hero-home-v4{ padding-bottom: 24px !important; }
  .families-section{
    padding-top: 28px !important;
    padding-bottom: 44px !important;
  }
  .families-section::before{ width: 100px; }
  .families-title{ font-size: clamp(22px, 6vw, 28px) !important; }
}

/* ===================================================================
   Hero → families: Elementor "tilt" SVG shape divider
   Exact replica of silteckabelgoten.nl's transition.
   Reference path: M0,6V0h1000v100L0,6z
=================================================================== */

/* Reset everything from previous attempts */
.hero.hero-home-v4{
  position: relative !important;
  clip-path: none !important;
  margin-bottom: 0 !important;
  padding-bottom: clamp(40px, 5vw, 80px) !important;
}
.families-section{
  margin-top: 0 !important;
  padding-top: clamp(48px, 5.5vw, 80px) !important;
}
.families-divider,
.families-section::before{ display: none !important; }

/* The tilt divider sits absolutely at the bottom of the hero, full width.
   The SVG path is filled with the families-section bg color, so it visually
   "wedges up" into the hero from the right and almost nothing on the left. */
.hero-tilt-divider{
  position: absolute;
  left: 0; right: 0; bottom: -1px;          /* -1 prevents sub-pixel hairline */
  width: 100%;
  height: clamp(80px, 8vw, 130px);
  pointer-events: none;
  overflow: hidden;
  line-height: 0;
  z-index: 5;
}
.hero-tilt-divider svg{
  display: block;
  width: 100%;
  height: 100%;
}
.hero-tilt-fill{
  fill: #f1f8f3;                             /* matches families-section bg */
  filter: drop-shadow(0 -2px 4px rgba(22,163,74,.05));
}

/* Mobile: shorter slope so it doesn't dominate */
@media (max-width: 720px){
  .hero-tilt-divider{ height: 50px; }
}

/* ===================================================================
   FIX: visible diagonal + minimal whitespace
   - Families bg gets a clearly different shade so the wedge is VISIBLE
   - All extra padding stripped so the title sits right under the slope
   - Thin green accent line along the diagonal seam for definition
=================================================================== */

/* Hero — almost no padding-bottom, the divider takes over visually */
.hero.hero-home-v4{
  padding-bottom: 0 !important;
}

/* Make sure hero content above doesn't sit too tight on top of the divider */
.home-v4-grid{
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(60px, 8vw, 120px) !important;
}

/* Divider — taller + more dramatic so the slope is felt */
.hero-tilt-divider{
  height: clamp(100px, 11vw, 170px) !important;
  bottom: -1px !important;
}

/* Visibly different families background so the diagonal SHOWS up */
.hero-tilt-fill{
  fill: #e3eedf !important;       /* a slightly darker mint-sage */
  filter: none !important;
}

.families-section{
  background:
    radial-gradient(circle at 12% 20%, rgba(22,163,74,.05), transparent 30%),
    linear-gradient(180deg, #e3eedf 0%, #ecf3e7 60%, #f3f7ef 100%) !important;
  padding-top: clamp(8px, 1vw, 16px) !important;     /* near-zero — divider already lifts the visual */
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
  margin-top: 0 !important;
}

/* Thin green accent line tracing the diagonal — gives it definition */
.hero-tilt-divider::after{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(to top right,
      transparent 0%,
      transparent calc(50% - 0.6px),
      rgba(22,163,74,.30) 50%,
      transparent calc(50% + 0.6px),
      transparent 100%);
  /* This is a fallback that sometimes mis-aligns; rely on SVG stroke instead */
  display: none;
}

/* Better: stroke the actual SVG diagonal */
.hero-tilt-fill{
  stroke: rgba(22,163,74,.32);
  stroke-width: 1.5;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* Tighten families header so title sits right under the slope */
.families-head{
  margin: clamp(6px, 1vw, 14px) auto clamp(28px, 3.5vw, 42px) !important;
}

@media (max-width: 720px){
  .hero-tilt-divider{ height: 50px !important; }
  .home-v4-grid{ padding-bottom: 50px !important; }
  .families-section{ padding-top: 4px !important; padding-bottom: 36px !important; }
}

/* ===================================================================
   FIX: kill the leftover viewport-height min-height on the hero
   That was creating an empty white band BELOW the content but ABOVE
   the SVG divider — the divider sits at the hero's bottom, but the
   hero was forced to be a full viewport tall.
=================================================================== */

.hero.hero-home-v4{
  min-height: 0 !important;
  height: auto !important;
}
.home-v4-grid{
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(20px, 2.5vw, 40px) !important;
}

/* Visual column should also not stretch past content */
.home-v4-visual{
  min-height: clamp(380px, 56vh, 540px) !important;
  align-self: center !important;
}

/* Position divider precisely at the bottom edge so hero content + divider stack tight */
.hero-tilt-divider{
  height: clamp(80px, 9vw, 130px) !important;
  bottom: -1px !important;
}

/* Families starts where divider ends — zero extra padding above */
.families-section{
  padding-top: 0 !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
  margin-top: 0 !important;
}
.families-head{
  padding-top: clamp(20px, 3vw, 40px) !important;
  margin: 0 auto clamp(28px, 3.5vw, 42px) !important;
}

@media (max-width: 720px){
  .home-v4-grid{ padding-bottom: 16px !important; }
  .home-v4-visual{ min-height: 360px !important; }
  .hero-tilt-divider{ height: 50px !important; }
  .families-head{ padding-top: 16px !important; }
}

/* ===================================================================
   FINAL FINAL: clean clip-path diagonal — no SVG, no overlap on content
   The families-section pulls up under the hero with a clip-path that
   creates a sharp diagonal top edge (right side wedges higher).
=================================================================== */

/* Reset hero — natural height, modest bottom padding so content sits
   well above the diagonal cut */
.hero.hero-home-v4{
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: clamp(28px, 3.5vw, 56px) !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  clip-path: none !important;
}
.home-v4-grid{
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(20px, 2.5vw, 40px) !important;
}
.home-v4-visual{
  min-height: clamp(380px, 56vh, 540px) !important;
  align-self: center !important;
}

/* Move floating card up so it never sits in the diagonal overlap zone */
.home-v4-floating-card{
  bottom: clamp(60px, 11vh, 120px) !important;
}

/* Old SVG divider rule — DISABLED in v15 (we want it visible now) */
/* .hero-tilt-divider{ display: none !important; } */

/* THE DIAGONAL: families-section pulls up 80px and clips its top corner.
   The clip-path makes the top-LEFT cut by 80px (so families starts at hero's
   natural bottom there) while top-RIGHT stays at 0 (extends 80px into hero). */
.families-section{
  position: relative !important;
  z-index: 2 !important;
  margin-top: -80px !important;
  padding-top: clamp(110px, 11vw, 150px) !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
  background:
    radial-gradient(circle at 12% 30%, rgba(22,163,74,.08), transparent 35%),
    linear-gradient(180deg, #e3eedf 0%, #ecf3e7 55%, #f3f7ef 100%) !important;
  /* Diagonal: top-LEFT 80px down (families starts later on left), top-RIGHT 0 (extends up) */
  clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%) !important;
}

/* Subtle green accent stroke along the diagonal seam */
.families-section::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(22,163,74,.30) 50%,
    transparent calc(50% + 1px)
  );
  display: none;  /* Disabled — the color contrast itself is enough */
}

/* Tighten the families header */
.families-head{
  padding-top: 0 !important;
  margin: 0 auto clamp(28px, 3.5vw, 42px) !important;
}

/* Mobile — gentler slope so it doesn't waste space */
@media (max-width: 720px){
  .families-section{
    margin-top: -40px !important;
    padding-top: 60px !important;
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%) !important;
  }
  .home-v4-grid{ padding-bottom: 16px !important; }
  .home-v4-floating-card{ bottom: 60px !important; }
  .home-v4-visual{ min-height: 360px !important; }
}

/* ===================================================================
   FAMILY CARDS — professional polish (cards in the families-section)
=================================================================== */

/* Card container — refined shadow stack, smoother hover */
.families-section .category-card{
  background: #ffffff !important;
  border: 1px solid rgba(22,163,74,.08) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  box-shadow:
    0 1px 2px rgba(6,35,51,.04),
    0 8px 24px rgba(6,35,51,.05) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease,
              border-color .2s ease !important;
  position: relative;
}
.families-section .category-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(22,163,74,.28) !important;
  box-shadow:
    0 4px 8px rgba(6,35,51,.05),
    0 24px 48px rgba(6,35,51,.10),
    0 4px 16px rgba(22,163,74,.10) !important;
}

/* Photo banner — subtle gradient overlay for depth, hover zoom */
.families-section .cat-banner{
  display: block !important;
  aspect-ratio: 5 / 3.4 !important;
  background-color: #f7faf8 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(22,163,74,.08) !important;
  position: relative;
  overflow: hidden !important;
  transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
}
.families-section .cat-banner::before{
  /* Subtle radial vignette for premium photo feel */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(22,163,74,.05), transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(255,255,255,.6) 100%);
  pointer-events: none;
}
.families-section .cat-banner::after{
  /* Top accent strip — barely visible green line */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #22b65a, #11813b);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.families-section .category-card:hover .cat-banner{
  transform: scale(1.02);
}
.families-section .category-card:hover .cat-banner::after{
  width: 100%;
}

/* Body — better spacing, refined typography */
.families-section .cat-body{
  padding: 22px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1 !important;
}
.families-section .cat-body h3{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
  color: #062333 !important;
  margin: 0 !important;
  text-transform: none !important;
}
.families-section .cat-body p.muted{
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: #5a6c78 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* Tag list — green-themed, premium pills */
.families-section .taglist{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
}
.families-section .taglist .tag{
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(22,163,74,.20) !important;
  background: rgba(22,163,74,.06) !important;
  color: #11813b !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
}

/* Bottom meta row — product count + arrow CTA */
.families-section .cat-body .meta{
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(22,163,74,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Product count — small, structured */
.families-section .cat-body .meta > span{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #5a6c78 !important;
  letter-spacing: -.005em !important;
}
.families-section .cat-body .meta > span::before{
  content: attr(data-count);  /* unused fallback */
}
/* Make the number visually heavier */
.families-section .cat-body .meta > span{
  font-variant-numeric: tabular-nums !important;
}

/* Bekijk → link as a refined green CTA chip */
.families-section .cat-body .meta a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  color: #11813b !important;
  text-decoration: none !important;
  letter-spacing: -.005em !important;
  padding: 6px 12px !important;
  background: rgba(22,163,74,.08) !important;
  border: 1px solid rgba(22,163,74,.18) !important;
  border-radius: 999px !important;
  transition: all .18s ease !important;
}
.families-section .cat-body .meta a:hover{
  background: #11813b !important;
  color: #fff !important;
  border-color: #11813b !important;
  transform: translateX(2px);
  box-shadow: 0 6px 14px rgba(22,163,74,.28) !important;
}

@media (max-width: 720px){
  .families-section .cat-banner{ aspect-ratio: 16/10 !important; }
  .families-section .cat-body{ padding: 18px !important; gap: 10px !important; }
  .families-section .cat-body h3{ font-size: 1.08rem !important; }
}

/* ===================================================================
   FAMILIES HEADER — premium editorial polish
=================================================================== */

.families-head{
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto clamp(40px, 4.5vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  padding-top: clamp(20px, 3vw, 36px) !important;
}

/* Eyebrow with TWO accent lines flanking the text */
.families-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  line-height: 1 !important;
}
.families-eyebrow-line{
  display: inline-block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, #16a34a 50%, transparent 100%);
}

/* Title — bigger, with italic serif accent on the second part */
.families-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.038em !important;
  color: #062333 !important;
  margin: 0 !important;
  max-width: 720px !important;
  text-wrap: balance !important;
  -webkit-font-smoothing: antialiased;
}
.families-title-accent{
  display: inline-block;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #16a34a 0%, #11813b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.families-title-accent .home-v4-green-dot{
  -webkit-text-fill-color: #16a34a !important;
  color: #16a34a !important;
  font-style: normal !important;
}

/* Lead — refined body with italic emphasis */
.families-lead{
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  color: #4f6271 !important;
  margin: 4px auto 0 !important;
  max-width: 580px !important;
  letter-spacing: -.005em !important;
}
.families-lead em{
  font-style: italic;
  font-weight: 600;
  color: #11813b;
  background: linear-gradient(transparent 60%, rgba(22,163,74,.18) 60%);
  padding: 0 2px;
}

/* Mini stats strip with separators */
.families-meta{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin: 14px 0 6px;
  padding: 14px 24px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(22,163,74,.14);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(6,35,51,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.families-meta-stat{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5a6c78;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.families-meta-stat strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: #11813b;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.families-meta-divider{
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(22,163,74,.22);
}

/* "Bekijk alle producten →" — refined CTA chip with icon */
.families-link-all{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 26px !important;
  background: linear-gradient(135deg, #22b65a 0%, #11813b 100%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: -.005em !important;
  margin-top: 8px !important;
  box-shadow:
    0 8px 22px rgba(22,163,74,.30),
    0 1px 2px rgba(22,163,74,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease !important;
}
.families-link-all:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #28c161 0%, #14913f 100%) !important;
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(22,163,74,.40),
    0 2px 4px rgba(22,163,74,.20),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.families-link-all svg{
  width: 16px !important;
  height: 16px !important;
  transition: transform .25s ease;
}
.families-link-all:hover svg{
  transform: translateX(4px);
}

@media (max-width: 720px){
  .families-head{ gap: 14px !important; padding-top: 12px !important; }
  .families-eyebrow{ font-size: 10.5px !important; letter-spacing: .18em !important; gap: 10px !important; }
  .families-eyebrow-line{ width: 24px !important; }
  .families-title{ font-size: clamp(24px, 7vw, 32px) !important; }
  .families-meta{
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
  }
  .families-meta-divider{ display: none; }
}

/* ===================================================================
   WHY-V2 — premium feature showcase (replaces old why-section)
   Editorial header + 4 horizontal pillars + glass stats footer
=================================================================== */
.section.why-v2{
  background:
    radial-gradient(circle at 92% 12%, rgba(22,163,74,.07), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(22,163,74,.05), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f6faf7 100%) !important;
  padding: clamp(64px, 7vw, 110px) 0 clamp(64px, 7vw, 110px) !important;
  position: relative;
  overflow: hidden;
}
.why-v2-container{
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.5vw, 64px);
  position: relative;
  z-index: 1;
}

/* === Editorial header === */
.why-v2-head{
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.why-v2-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #11813b;
  line-height: 1;
}
.why-v2-eyebrow-line{
  display: inline-block;
  width: 36px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, #16a34a 50%, transparent 100%);
}
.why-v2-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(34px, 3.5vw, 56px);
  line-height: 1.06;
  letter-spacing: -.04em;
  color: #062333;
  margin: 0;
  max-width: 780px;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}
.why-v2-title-accent{
  display: inline-block;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #16a34a 0%, #11813b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.why-v2-title-accent .home-v4-green-dot{
  -webkit-text-fill-color: #16a34a !important;
  color: #16a34a !important;
  font-style: normal !important;
}
.why-v2-lead{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: #4f6271;
  max-width: 660px;
  margin: 4px auto 0;
  letter-spacing: -.005em;
}
.why-v2-lead em{
  font-style: italic;
  font-weight: 600;
  color: #11813b;
  background: linear-gradient(transparent 60%, rgba(22,163,74,.18) 60%);
  padding: 0 2px;
}

/* === 4 feature pillars in a row === */
.why-v2-pillars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.why-v2-pillar{
  background: #fff;
  border: 1px solid rgba(22,163,74,.10);
  border-radius: 18px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(6,35,51,.04), 0 6px 18px rgba(6,35,51,.04);
  transition: transform .25s ease, box-shadow .3s ease, border-color .2s ease;
}
.why-v2-pillar::before{
  /* Subtle top-left green accent that grows on hover */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #22b65a, #11813b);
  border-radius: 0 0 3px 3px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.why-v2-pillar:hover{
  transform: translateY(-5px);
  border-color: rgba(22,163,74,.28);
  box-shadow:
    0 4px 8px rgba(6,35,51,.04),
    0 18px 38px rgba(6,35,51,.10),
    0 4px 14px rgba(22,163,74,.10);
}
.why-v2-pillar:hover::before{ width: 100%; }
.why-v2-pillar-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.why-v2-num{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: #11813b;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.why-v2-pill{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  color: #11813b;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.why-v2-pillar-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: #062333;
  margin: 0;
}
.why-v2-pillar-text{
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: #5a6c78;
  margin: 0;
  font-weight: 500;
}

/* === Glass stats footer + CTAs === */
.why-v2-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(22,163,74,.16);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(6,35,51,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.why-v2-stats{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.why-v2-stat{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5a6c78;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.why-v2-stat strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: #11813b;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.why-v2-stat-divider{
  display: inline-block;
  width: 1px; height: 18px;
  background: rgba(22,163,74,.22);
}

.why-v2-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.why-v2-cta-primary{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #22b65a, #11813b);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.005em;
  box-shadow:
    0 8px 20px rgba(22,163,74,.28),
    0 1px 2px rgba(22,163,74,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.why-v2-cta-primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #28c161, #14913f);
  color: #fff;
  box-shadow:
    0 14px 28px rgba(22,163,74,.36),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.why-v2-cta-primary svg{
  width: 16px; height: 16px;
  transition: transform .25s ease;
}
.why-v2-cta-primary:hover svg{ transform: translateX(3px); }

.why-v2-cta-ghost{
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: #fff;
  color: #11813b;
  border: 1.5px solid rgba(22,163,74,.30);
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.005em;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.why-v2-cta-ghost:hover{
  background: #11813b;
  color: #fff;
  border-color: #11813b;
  transform: translateY(-1px);
}

/* Hide the old why-section's leftover CSS spillover */
.section.why-v2 .why-grid,
.section.why-v2 .why-intro,
.section.why-v2 .why-features,
.section.why-v2 .why-feature{ display: none !important; }

/* Responsive */
@media (max-width: 1100px){
  .why-v2-pillars{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .section.why-v2{ padding: 48px 0 56px !important; }
  .why-v2-eyebrow{ font-size: 10.5px; letter-spacing: .18em; gap: 10px; }
  .why-v2-eyebrow-line{ width: 24px; }
  .why-v2-title{ font-size: clamp(24px, 7vw, 34px); }
  .why-v2-pillars{ grid-template-columns: 1fr; gap: 12px; }
  .why-v2-pillar{ padding: 22px 20px 24px; }
  .why-v2-foot{
    flex-direction: column;
    align-items: stretch;
    padding: 18px 18px;
    gap: 16px;
  }
  .why-v2-stats{ justify-content: center; gap: 16px; }
  .why-v2-stat-divider{ display: none; }
  .why-v2-actions{ justify-content: center; flex-wrap: wrap; }
  .why-v2-cta-primary, .why-v2-cta-ghost{ flex: 1; justify-content: center; min-width: 140px; }
}

/* ===================================================================
   HOMEPAGE UNIFIED RHYTHM — alternating bg + consistent spacing
   Order: hero (white→mint) → families (mint) → quick-links (white) →
          why-v2 (mint) → team-v2 (white)
=================================================================== */

/* Tighten how the diagonal flows into mint families */
.families-section{
  background:
    radial-gradient(circle at 12% 30%, rgba(22,163,74,.06), transparent 35%),
    linear-gradient(180deg, #e8f1e8 0%, #eef5ec 60%, #f3f8f1 100%) !important;
}

/* QUICK-LINKS — clean white strip with 3 accent cards */
.section.quick-links{
  background: #ffffff !important;
  padding: clamp(48px, 5vw, 80px) 0 !important;
  border-top: 1px solid rgba(22,163,74,.08);
  border-bottom: 1px solid rgba(22,163,74,.08);
}
.quick-links-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.quick-link{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: rgba(232,241,232,.4);
  border: 1px solid rgba(22,163,74,.12);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .3s ease, border-color .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.quick-link:hover{
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(22,163,74,.30);
  box-shadow: 0 14px 32px rgba(6,35,51,.08), 0 4px 12px rgba(22,163,74,.08);
  color: inherit;
}
.ql-ic{
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(22,163,74,.10);
  color: #11813b;
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, transform .25s ease;
}
.ql-ic svg{ width: 24px; height: 24px; display: block; }
.quick-link:hover .ql-ic{
  background: linear-gradient(135deg, #22b65a, #11813b);
  color: #fff;
  transform: scale(1.05);
}
.ql-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ql-text strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #062333;
}
.ql-text span{
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  line-height: 1.45;
  color: #5a6c78;
  font-weight: 500;
}
.ql-arrow{
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(22,163,74,.10);
  color: #11813b;
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, transform .25s ease;
}
.ql-arrow svg{ width: 14px; height: 14px; }
.quick-link:hover .ql-arrow{
  background: #11813b;
  color: #fff;
  transform: translateX(3px);
}

/* Why-v2 → mint background to alternate after white quick-links */
.section.why-v2{
  background:
    radial-gradient(circle at 88% 18%, rgba(22,163,74,.07), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(22,163,74,.05), transparent 30%),
    linear-gradient(180deg, #e8f1e8 0%, #eef5ec 60%, #f3f8f1 100%) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.why-v2-pillar{
  background: #ffffff !important;        /* white cards on mint bg */
}

/* TEAM-V2 → white again to close the rhythm */
.team-section.team-v2{
  background: #ffffff !important;
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(56px, 6vw, 90px) !important;
  position: relative;
}
.team-section.team-v2::before{
  /* Subtle top accent line marking the boundary with why-v2 */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 22vw, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(22,163,74,.32) 50%, transparent 100%);
}

/* Team header — editorial */
.team-v2-head{
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(40px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.team-v2-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #11813b;
  line-height: 1;
}
.team-v2-eyebrow-line{
  display: inline-block;
  width: 36px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, #16a34a 50%, transparent 100%);
}
.team-v2-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -.038em;
  color: #062333;
  margin: 0;
  max-width: 700px;
  text-wrap: balance;
}
.team-v2-title-accent{
  display: inline-block;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #16a34a 0%, #11813b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.team-v2-title-accent .home-v4-green-dot{
  -webkit-text-fill-color: #16a34a !important;
  color: #16a34a !important;
  font-style: normal !important;
}
.team-v2-lead{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: #4f6271;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: -.005em;
}
.team-v2-lead em{
  font-style: italic;
  font-weight: 600;
  color: #11813b;
  background: linear-gradient(transparent 60%, rgba(22,163,74,.18) 60%);
  padding: 0 2px;
}

/* Polish team cards */
.team-v2 .team-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 980px;
  margin: 0 auto;
}
.team-v2 .team-member{
  background: linear-gradient(180deg, #f7faf8 0%, #ffffff 60%) !important;
  border: 1px solid rgba(22,163,74,.12) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 1px 2px rgba(6,35,51,.04), 0 8px 24px rgba(6,35,51,.05) !important;
  transition: transform .25s ease, box-shadow .3s ease, border-color .2s ease !important;
}
.team-v2 .team-member:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(22,163,74,.28) !important;
  box-shadow: 0 4px 8px rgba(6,35,51,.04), 0 18px 36px rgba(6,35,51,.10), 0 4px 14px rgba(22,163,74,.10) !important;
}
.team-v2 .team-photo{
  width: 88px !important; height: 88px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  margin: 0 0 10px !important;
  box-shadow: 0 4px 12px rgba(6,35,51,.10);
  border: 3px solid #fff;
  outline: 1px solid rgba(22,163,74,.20);
}
.team-v2 .team-role{
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  margin: 0 !important;
}
.team-v2 .team-name{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: #062333 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}
.team-v2 .team-region{
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #5a6c78 !important;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 999px;
  padding: 4px 12px;
  align-self: flex-start;
  margin: 4px 0 6px !important;
}
.team-v2 .team-bio{
  font-family: 'Inter', sans-serif !important;
  font-size: .94rem !important;
  line-height: 1.6 !important;
  color: #4f6271 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
.team-v2 .team-contact{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(22,163,74,.12);
}
.team-v2 .team-contact a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #062333 !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.team-v2 .team-contact a:hover{ color: #11813b !important; }
.team-v2 .team-contact .ic{
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(22,163,74,.10);
  color: #11813b;
  font-size: 12px;
}

/* Mobile */
@media (max-width: 980px){
  .quick-links-grid{ grid-template-columns: 1fr; }
  .team-v2 .team-grid{ grid-template-columns: 1fr !important; max-width: 540px; }
}
@media (max-width: 720px){
  .section.quick-links{ padding: 36px 0 !important; }
  .quick-link{ padding: 18px; gap: 14px; }
  .ql-ic{ width: 40px; height: 40px; }
  .ql-ic svg{ width: 20px; height: 20px; }
  .team-v2 .team-photo{ width: 72px !important; height: 72px !important; }
  .team-v2-eyebrow-line{ width: 24px; }
}

/* ===================================================================
   SECTION-DIFFERENTIATION — each section has its OWN visual identity
   so scrolling feels like reading a magazine, not the same block 3×.

   Section pattern legend:
   - HERO            : asymmetric (text+leaf)
   - FAMILIES        : centered editorial header + product grid
   - QUICK-LINKS     : horizontal action strip
   - WHY-V2 (new)    : SPLIT 2-column (header LEFT, pillars RIGHT 2×2)
   - TEAM-V3 (new)   : MAGAZINE quote header + horizontal cards
=================================================================== */

/* === WHY-V2 SPLIT — left header column, right 2x2 pillar grid === */
.section.why-v2.why-v2-split{
  padding: clamp(64px, 7vw, 100px) 0 clamp(64px, 7vw, 100px) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(22,163,74,.08), transparent 32%),
    linear-gradient(180deg, #e8f1e8 0%, #eef5ec 60%, #f3f8f1 100%) !important;
}
.why-v2-split .why-v2-container{
  display: block !important;
  gap: 0 !important;
}
.why-v2-grid-2col{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* LEFT column: vertical, left-aligned (NOT centered) */
.why-v2-head-left{
  text-align: left !important;
  align-items: flex-start !important;
  max-width: 480px !important;
  position: sticky;
  top: 110px;
}
.why-v2-eyebrow-left{
  letter-spacing: .14em !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 14px 6px 12px !important;
  background: rgba(22,163,74,.08) !important;
  border: 1px solid rgba(22,163,74,.18) !important;
  border-radius: 999px !important;
  color: #11813b !important;
}
.why-v2-eyebrow-bar{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
.why-v2-split .why-v2-title{
  font-size: clamp(32px, 3.2vw, 48px) !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: 460px !important;
}
.why-v2-title-bold{
  display: block;
  color: #11813b;
  font-style: normal !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important;
}
.why-v2-split .why-v2-lead{
  text-align: left !important;
  margin: 0 !important;
  max-width: 440px !important;
  font-size: 15px !important;
}

/* Trust mini-stats stacked vertically (left column) */
.why-v2-trust{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding: 16px 20px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(22,163,74,.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  align-self: flex-start;
}
.why-v2-trust-stat{
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5a6c78;
}
.why-v2-trust-stat strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  color: #11813b;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.why-v2-trust-stat strong::after{
  /* tiny separator dot */
  content: '·';
  margin-left: 8px;
  color: rgba(22,163,74,.32);
}

/* RIGHT column: 2x2 pillar grid (smaller cards) */
.why-v2-pillars-2col{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}
.why-v2-pillars-2col .why-v2-pillar{
  padding: 22px 22px 24px !important;
}
.why-v2-pillars-2col .why-v2-num{
  font-size: 26px !important;
}
.why-v2-pillars-2col .why-v2-pillar-title{
  font-size: 1.05rem !important;
}
.why-v2-pillars-2col .why-v2-pillar-text{
  font-size: .85rem !important;
}

/* CTA bar at bottom (full width, centered) */
.why-v2-actions-bottom{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(22,163,74,.16);
}

/* ===================================================================
   TEAM-V3 — magazine-style quote header + horizontal team cards
=================================================================== */
.team-section.team-v3{
  background: #ffffff !important;
  padding: clamp(72px, 8vw, 110px) 0 clamp(64px, 7vw, 96px) !important;
  position: relative;
}
.team-section.team-v3::before{
  /* Big subtle leaf watermark in the background */
  content: '';
  position: absolute;
  right: -8%; top: 5%;
  width: clamp(280px, 32vw, 480px);
  height: clamp(280px, 32vw, 480px);
  background: url("../img/brand/siltec-leaf-premium.png") center/contain no-repeat;
  opacity: .04;
  pointer-events: none;
  transform: rotate(-12deg);
  z-index: 0;
}
.team-section.team-v3 > .container{
  position: relative;
  z-index: 1;
}

/* Quote header */
.team-v3-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.team-v3-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #11813b;
}
.team-v3-tag::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
.team-v3-quote{
  position: relative;
  margin: 0;
  padding: 0 24px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.32;
  letter-spacing: -.018em;
  color: #062333;
  text-wrap: balance;
}
.team-v3-quote em{
  font-style: italic;
  color: #11813b;
  background: linear-gradient(transparent 60%, rgba(22,163,74,.18) 60%);
  padding: 0 4px;
  font-weight: 600;
}
.team-v3-quote-mark{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(60px, 6vw, 100px);
  line-height: 0;
  color: rgba(22,163,74,.22);
  position: absolute;
  left: -18px; top: 22px;
  font-weight: 700;
}
.team-v3-attribution{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #5a6c78;
  margin: 0;
  text-transform: uppercase;
}

/* HORIZONTAL team cards (photo left, content right) */
.team-section.team-v3 .team-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 1080px;
  margin: 0 auto;
}
.team-section.team-v3 .team-member{
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid rgba(22,163,74,.12) !important;
  border-radius: 22px !important;
  padding: 26px !important;
  box-shadow: 0 1px 2px rgba(6,35,51,.04), 0 8px 24px rgba(6,35,51,.05) !important;
  transition: transform .25s ease, box-shadow .3s ease, border-color .2s ease !important;
}
.team-section.team-v3 .team-member:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(22,163,74,.30) !important;
  box-shadow:
    0 4px 8px rgba(6,35,51,.04),
    0 18px 36px rgba(6,35,51,.10),
    0 4px 14px rgba(22,163,74,.10) !important;
}
.team-section.team-v3 .team-photo{
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  margin: 0 !important;
  box-shadow: 0 6px 16px rgba(6,35,51,.12);
  border: 4px solid #fff;
  outline: 1px solid rgba(22,163,74,.20);
  flex: 0 0 auto;
  align-self: center;
}
.team-section.team-v3 .team-member > *:not(.team-photo){
  /* Stack everything else into the right column */
  grid-column: 2;
}
.team-section.team-v3 .team-photo{
  grid-column: 1;
  grid-row: 1 / span 6;
}
.team-section.team-v3 .team-role{
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  margin: 0 0 4px !important;
}
.team-section.team-v3 .team-name{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: 1.55rem !important;
  font-weight: 600 !important;
  letter-spacing: -.022em !important;
  color: #062333 !important;
  margin: 0 0 6px !important;
  line-height: 1.1 !important;
}
.team-section.team-v3 .team-region{
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #5a6c78 !important;
  background: rgba(22,163,74,.06) !important;
  border: 1px solid rgba(22,163,74,.16) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  align-self: flex-start;
  margin: 0 0 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.team-section.team-v3 .team-bio{
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: #4f6271 !important;
  margin: 0 0 14px !important;
  font-weight: 500 !important;
}
.team-section.team-v3 .team-contact{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(22,163,74,.12) !important;
}
.team-section.team-v3 .team-contact a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: #062333 !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.team-section.team-v3 .team-contact a:hover{ color: #11813b !important; }
.team-section.team-v3 .team-contact .ic{
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(22,163,74,.10);
  color: #11813b;
  font-size: 11px;
}

/* ===================================================================
   SECTION TRANSITIONS — subtle gradient bridges between sections
=================================================================== */
.section.quick-links{
  background: linear-gradient(180deg, #f7faf8 0%, #ffffff 50%, #f7faf8 100%) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.section.why-v2.why-v2-split{
  position: relative;
}
.section.why-v2.why-v2-split::before{
  /* tiny green seam line at the top */
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 22vw, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(22,163,74,.32) 50%, transparent 100%);
}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1080px){
  .why-v2-grid-2col{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .why-v2-head-left{
    position: static !important;
    text-align: center !important;
    align-items: center !important;
    max-width: none !important;
  }
  .why-v2-split .why-v2-title,
  .why-v2-split .why-v2-lead{
    text-align: center !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .why-v2-trust{ align-self: center; }
  .why-v2-pillars-2col{ grid-template-columns: repeat(2, 1fr) !important; }

  .team-section.team-v3 .team-grid{ grid-template-columns: 1fr !important; max-width: 600px; }
}
@media (max-width: 720px){
  .why-v2-pillars-2col{ grid-template-columns: 1fr !important; }
  .team-section.team-v3 .team-member{
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: 24px !important;
  }
  .team-section.team-v3 .team-photo{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 auto !important;
    width: 100px !important;
    height: 100px !important;
  }
  .team-section.team-v3 .team-member > *:not(.team-photo){
    grid-column: 1 !important;
  }
  .team-section.team-v3 .team-region,
  .team-section.team-v3 .team-contact a{
    align-self: center !important;
  }
  .team-v3-quote-mark{ display: none; }
  .team-v3-quote{ font-size: clamp(20px, 6vw, 26px); padding: 0; }
}

/* ===================================================================
   ONE COHESIVE CANVAS
   The whole homepage is now one continuous gradient canvas.
   No more hard color edges between sections — only soft green glows
   positioned at strategic vertical points create gentle visual zones.
   Sections are now differentiated by their LAYOUT, not their bg color.
=================================================================== */

/* The main element becomes the single canvas everything sits on */
main#main{
  position: relative;
  background:
    /* Top: subtle warm-white-to-faint-mint */
    radial-gradient(ellipse 1400px 700px at 88% 6%, rgba(22,163,74,.08), transparent 55%),
    /* Mid-upper: zachte groene gloed bij families */
    radial-gradient(ellipse 1200px 500px at 12% 26%, rgba(22,163,74,.05), transparent 55%),
    /* Mid: subtiele warmte rond quick-links */
    radial-gradient(ellipse 900px 500px at 92% 50%, rgba(22,163,74,.04), transparent 60%),
    /* Mid-lower: gloed in why-v2 */
    radial-gradient(ellipse 1300px 600px at 8% 72%, rgba(22,163,74,.06), transparent 60%),
    /* Lower: gloed bij team */
    radial-gradient(ellipse 1100px 500px at 92% 90%, rgba(22,163,74,.05), transparent 60%),
    /* Base */
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 50%, #f7faf8 100%);
  overflow: hidden;
}

/* Remove ALL per-section backgrounds — let the canvas show through */
main#main .hero.hero-home-v4,
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2,
main#main .section.why-v2.why-v2-split,
main#main .team-section,
main#main .team-section.team-v3{
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Hero keeps its own subtle bg layer (the one with the dotted pattern + leaf-side glow) */
main#main .hero.hero-home-v4 .home-v4-bg{
  background:
    radial-gradient(circle at 86% 50%, rgba(22,163,74,.18), transparent 0 38%),
    radial-gradient(circle at 96% 28%, rgba(255,255,255,.85), transparent 0 18%) !important;
  opacity: .9;
}

/* Remove the diagonal clip-path — it created hard edges. Use natural padding. */
main#main .families-section{
  margin-top: 0 !important;
  clip-path: none !important;
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}
main#main .families-section::before{ display: none !important; }

/* Consistent section rhythm — same padding everywhere for that flowing feel */
main#main .section.quick-links{
  padding: clamp(40px, 5vw, 72px) 0 !important;
}
main#main .section.why-v2.why-v2-split{
  padding: clamp(56px, 6vw, 88px) 0 !important;
}
main#main .section.why-v2.why-v2-split::before{ display: none !important; }

main#main .team-section.team-v3{
  padding: clamp(56px, 6vw, 88px) 0 clamp(56px, 6vw, 88px) !important;
}
main#main .team-section.team-v3::before{ display: none !important; }
main#main .team-section.team-v2::before{ display: none !important; }

/* Hero shape divider — RE-ENABLED in v15 */
/* main#main .hero-tilt-divider{ display: none !important; } */

/* === Subtle section markers — tiny center accents that punctuate sections
   without creating heavy visual breaks === */

/* Hero leaf watermark continues to work */

/* Above each non-hero section: a small centered accent dot */
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2.why-v2-split,
main#main .team-section.team-v3{
  position: relative;
}
main#main .families-section::after,
main#main .section.quick-links::after,
main#main .section.why-v2.why-v2-split::after,
main#main .team-section.team-v3::after{
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(22,163,74,.12),
    0 0 0 8px rgba(22,163,74,.06);
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}

/* Cards now have a slightly softer shadow since the canvas is uniform */
main#main .families-section .category-card,
main#main .quick-link,
main#main .why-v2-pillar,
main#main .team-section.team-v3 .team-member{
  background: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(6,35,51,.04),
    0 6px 22px rgba(6,35,51,.06),
    0 2px 8px rgba(22,163,74,.04) !important;
}
main#main .families-section .category-card:hover,
main#main .quick-link:hover,
main#main .why-v2-pillar:hover,
main#main .team-section.team-v3 .team-member:hover{
  box-shadow:
    0 4px 8px rgba(6,35,51,.04),
    0 22px 48px rgba(6,35,51,.10),
    0 6px 18px rgba(22,163,74,.10) !important;
}

/* Trust-card in why-v2 — also matches */
main#main .why-v2-trust{
  background: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(6,35,51,.04),
    0 6px 18px rgba(6,35,51,.05) !important;
}

/* Hero floating card */
main#main .home-v4-floating-card{
  background: rgba(255,255,255,.94) !important;
  box-shadow:
    0 1px 2px rgba(6,35,51,.04),
    0 18px 44px rgba(6,35,51,.10),
    0 4px 12px rgba(22,163,74,.06) !important;
}

/* Footer keeps its own dark bg, unchanged */

/* Mobile: turn off the section accent dots so they don't crowd a narrow screen */
@media (max-width: 720px){
  main#main .families-section::after,
  main#main .section.quick-links::after,
  main#main .section.why-v2.why-v2-split::after,
  main#main .team-section.team-v3::after{
    display: none;
  }
}

/* ===================================================================
   PREMIUM POLISH PASS — typography, depth, micro-details, animation
=================================================================== */

/* === Force the new Google Fonts everywhere serif/sans is used === */
main#main .home-v4-title,
main#main .families-title,
main#main .families-title-accent,
main#main .why-v2-title,
main#main .why-v2-title-bold,
main#main .team-v2-title,
main#main .team-v2-title-accent,
main#main .team-v3-quote,
main#main .families-meta-stat strong,
main#main .why-v2-trust-stat strong,
main#main .why-v2-stat strong,
main#main .why-v2-num,
main#main .families-section .cat-body h3,
main#main .why-v2-pillar-title,
main#main .team-section.team-v3 .team-name,
main#main .team-v2 .team-name{
  font-family: 'Playfair Display', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}

/* Slight optical adjustments for Playfair (it's a different metric than Georgia) */
main#main .home-v4-title{ letter-spacing: -.025em !important; line-height: 1.04 !important; }
main#main .families-title,
main#main .why-v2-title,
main#main .team-v2-title,
main#main .team-v3-quote{ letter-spacing: -.025em !important; line-height: 1.06 !important; }

/* === Subtle global texture: noise grain over the canvas for depth === */
main#main::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .55;
  mix-blend-mode: multiply;
}
main#main > *{ position: relative; z-index: 1; }

/* === Subtle decorative leaf motifs in section backgrounds === */
main#main .families-section,
main#main .section.why-v2.why-v2-split,
main#main .team-section.team-v3{
  position: relative;
}
main#main .families-section::before{
  content: '';
  position: absolute;
  left: -120px; top: 50px;
  width: 320px; height: 320px;
  background: url("../img/brand/siltec-leaf-premium.png") center/contain no-repeat;
  opacity: .035;
  transform: rotate(28deg);
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
main#main .section.why-v2.why-v2-split::before{
  content: '';
  position: absolute;
  right: -100px; bottom: 0;
  width: 380px; height: 380px;
  background: url("../img/brand/siltec-leaf-premium.png") center/contain no-repeat;
  opacity: .035;
  transform: rotate(-18deg) scaleX(-1);
  pointer-events: none;
  z-index: 0;
  display: block !important;
}

/* === Premium section accent — replace the dot with a refined leaf icon === */
main#main .families-section::after,
main#main .section.quick-links::after,
main#main .section.why-v2.why-v2-split::after,
main#main .team-section.team-v3::after{
  content: '';
  width: 28px; height: 28px;
  top: -14px;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: url("../img/brand/siltec-leaf.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;          /* hidden by default — uncomment if you want them visible */
}

/* === Heading text-rendering and antialiasing for crisper Playfair === */
main#main h1, main#main h2, main#main h3,
main#main .home-v4-title,
main#main .families-title,
main#main .why-v2-title,
main#main .team-v2-title,
main#main .team-v3-quote,
main#main .team-section.team-v3 .team-name,
main#main .families-section .cat-body h3,
main#main .why-v2-pillar-title{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* === Refined card details — top inner highlight + softer multi-layer shadows === */
main#main .families-section .category-card,
main#main .quick-link,
main#main .why-v2-pillar,
main#main .team-section.team-v3 .team-member,
main#main .home-v4-floating-card,
main#main .why-v2-trust{
  position: relative;
  border: 1px solid rgba(22,163,74,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,254,253,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(6,35,51,.04),
    0 8px 24px rgba(6,35,51,.06),
    0 2px 12px rgba(22,163,74,.04) !important;
}
main#main .families-section .category-card:hover,
main#main .quick-link:hover,
main#main .why-v2-pillar:hover,
main#main .team-section.team-v3 .team-member:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 8px rgba(6,35,51,.04),
    0 24px 48px rgba(6,35,51,.10),
    0 6px 18px rgba(22,163,74,.10) !important;
}

/* === Premium hero-leaf glow refinement === */
main#main .home-v4-leaf{
  filter:
    drop-shadow(0 50px 80px rgba(22,163,74,.32))
    drop-shadow(0 24px 40px rgba(22,163,74,.20))
    drop-shadow(0 8px 16px rgba(6,35,51,.14)) !important;
}

/* === Section dot accent (was tiny dot, now a refined leaf glyph in a halo) === */
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2.why-v2-split,
main#main .team-section.team-v3{
  position: relative;
}

/* Replace the basic green dot with a refined "✦" mark (renders consistently across browsers) */
main#main .families-section::after{
  content: '';
}

/* === Scroll-reveal: fade-in + rise as section enters viewport === */
@keyframes reveal-rise{
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  main#main .families-head,
  main#main .families-section #homeCategories > *,
  main#main .quick-link,
  main#main .why-v2-head-left,
  main#main .why-v2-pillar,
  main#main .why-v2-trust,
  main#main .team-v3-head,
  main#main .team-section.team-v3 .team-member{
    opacity: 0;
    animation: reveal-rise .6s cubic-bezier(.22,.61,.36,1) forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  /* Stagger the family cards */
  main#main #homeCategories > *:nth-child(1){ animation-delay: 0s; }
  main#main #homeCategories > *:nth-child(2){ animation-delay: .06s; }
  main#main #homeCategories > *:nth-child(3){ animation-delay: .12s; }
  main#main #homeCategories > *:nth-child(4){ animation-delay: .18s; }
  main#main #homeCategories > *:nth-child(5){ animation-delay: .04s; }
  main#main #homeCategories > *:nth-child(6){ animation-delay: .10s; }
  main#main #homeCategories > *:nth-child(7){ animation-delay: .16s; }
  main#main #homeCategories > *:nth-child(8){ animation-delay: .22s; }
  main#main .quick-link:nth-child(2){ animation-delay: .08s; }
  main#main .quick-link:nth-child(3){ animation-delay: .16s; }
  main#main .why-v2-pillar:nth-child(1){ animation-delay: 0s; }
  main#main .why-v2-pillar:nth-child(2){ animation-delay: .08s; }
  main#main .why-v2-pillar:nth-child(3){ animation-delay: .16s; }
  main#main .why-v2-pillar:nth-child(4){ animation-delay: .24s; }
  main#main .team-section.team-v3 .team-member:nth-child(2){ animation-delay: .12s; }
}

/* Fallback for browsers without animation-timeline (Safari currently): show everything immediately */
@supports not (animation-timeline: view()){
  main#main .families-head,
  main#main .families-section #homeCategories > *,
  main#main .quick-link,
  main#main .why-v2-head-left,
  main#main .why-v2-pillar,
  main#main .why-v2-trust,
  main#main .team-v3-head,
  main#main .team-section.team-v3 .team-member{
    opacity: 1;
    animation: none;
  }
}

/* === Premium quote section enhancement — bigger, more elegant === */
main#main .team-v3-quote{
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.32 !important;
  font-weight: 500 !important;
}
main#main .team-v3-quote-mark{
  font-size: clamp(80px, 8vw, 130px) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic;
  font-weight: 700 !important;
  color: rgba(22,163,74,.18) !important;
  top: 28px !important;
}

/* === Improve italic accent treatment with Playfair === */
main#main .families-title-accent,
main#main .team-v2-title-accent{
  font-style: italic !important;
  font-weight: 600 !important;  /* Playfair italic 600 has more weight than 500 */
}
main#main .home-v4-intro em,
main#main .families-lead em,
main#main .why-v2-lead em,
main#main .team-v2-lead em,
main#main .team-v3-quote em{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1.05em;
}

/* === Refined input field on hero === */
main#main .home-v4-search{
  border: 1px solid rgba(22,163,74,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(6,35,51,.04),
    0 18px 42px rgba(6,35,51,.08),
    0 2px 12px rgba(22,163,74,.06) !important;
}
main#main .home-v4-search:focus-within{
  border-color: rgba(22,163,74,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 4px rgba(22,163,74,.08),
    0 18px 42px rgba(6,35,51,.10),
    0 4px 16px rgba(22,163,74,.10) !important;
}

/* === Body intro paragraphs — better line-height for premium reading === */
main#main .families-lead,
main#main .why-v2-lead,
main#main .team-v2-lead{
  line-height: 1.72 !important;
  letter-spacing: -.005em !important;
}

/* === Subtle floating animations on quiet decorative elements === */
@keyframes drift-slow{
  0%, 100% { transform: rotate(28deg) translate(0, 0); }
  50%      { transform: rotate(30deg) translate(0, -8px); }
}
@media (prefers-reduced-motion: no-preference){
  main#main .families-section::before{
    animation: drift-slow 18s ease-in-out infinite;
  }
}

/* ===================================================================
   FINAL: each section its own VIBE + smooth gradient bridges between them
   No noise texture, no scroll-reveals, no big leaf watermarks.
=================================================================== */

/* Strip the over-the-top global texture and reveal animations */
main#main::before{ display: none !important; }
main#main .families-section::before,
main#main .section.why-v2.why-v2-split::before,
main#main .team-section.team-v3::before{
  display: none !important;
}
main#main .families-section::after,
main#main .section.quick-links::after,
main#main .section.why-v2.why-v2-split::after,
main#main .team-section.team-v3::after{
  display: none !important;
}
@media (prefers-reduced-motion: no-preference){
  main#main .families-head,
  main#main .families-section #homeCategories > *,
  main#main .quick-link,
  main#main .why-v2-head-left,
  main#main .why-v2-pillar,
  main#main .why-v2-trust,
  main#main .team-v3-head,
  main#main .team-section.team-v3 .team-member{
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Drop the unified canvas — each section gets its own bg again */
main#main{
  background: transparent !important;
  overflow: visible !important;
}

/* === Per-section backgrounds with matching edges so they flow ===
   Color palette progression as you scroll:
   white → pale mint → mint → cream → rich mint → soft white
================================================================ */

/* SECTION 1: HERO — airy white with a soft mint glow at the bottom */
main#main .hero.hero-home-v4{
  background:
    radial-gradient(circle at 86% 50%, rgba(22,163,74,.16), transparent 0 38%),
    radial-gradient(circle at 96% 28%, rgba(255,255,255,.85), transparent 0 18%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 75%, #f3f8f1 100%) !important;
}

/* SECTION 2: FAMILIES — pale mint, warm and clean */
main#main .families-section{
  background:
    radial-gradient(ellipse 900px 500px at 88% 30%, rgba(22,163,74,.07), transparent 60%),
    linear-gradient(180deg, #f3f8f1 0%, #eaf2e7 50%, #e0ebdd 100%) !important;
}

/* SECTION 3: QUICK-LINKS — warm cream/beige (very different vibe) */
main#main .section.quick-links{
  background:
    radial-gradient(ellipse 800px 400px at 12% 50%, rgba(244,200,120,.10), transparent 60%),
    linear-gradient(180deg, #e0ebdd 0%, #f0ecde 50%, #f7f1e1 100%) !important;
}

/* SECTION 4: WHY-V2 — rich mint, deeper editorial vibe */
main#main .section.why-v2.why-v2-split{
  background:
    radial-gradient(ellipse 1200px 600px at 92% 80%, rgba(22,163,74,.10), transparent 60%),
    linear-gradient(180deg, #f7f1e1 0%, #e8efe1 35%, #d9e7d3 100%) !important;
}

/* SECTION 5: TEAM-V3 — warm soft white (back to clean, personal) */
main#main .team-section.team-v3{
  background:
    radial-gradient(ellipse 900px 500px at 8% 30%, rgba(22,163,74,.05), transparent 60%),
    linear-gradient(180deg, #d9e7d3 0%, #ecf2e6 35%, #fbfdfb 100%) !important;
}

/* === SMOOTH GRADIENT BRIDGES between sections ===
   Each bridge is a thin invisible band that softens the seam.
================================================================ */
main#main .families-section{
  position: relative;
  margin-top: 0 !important;
}
main#main .families-section::before{
  content: '';
  position: absolute;
  top: -32px;
  left: 0; right: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(243,248,241,.6) 50%, rgba(243,248,241,1) 100%);
  z-index: 1;
  display: block !important;
}

main#main .section.quick-links{ position: relative; }
main#main .section.quick-links::before{
  content: '';
  position: absolute;
  top: -32px;
  left: 0; right: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(224,235,221,.6) 50%, rgba(224,235,221,1) 100%);
  z-index: 1;
  display: block !important;
}

main#main .section.why-v2.why-v2-split{ position: relative; }
main#main .section.why-v2.why-v2-split::before{
  content: '';
  position: absolute;
  top: -32px;
  left: 0; right: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(247,241,225,.6) 50%, rgba(247,241,225,1) 100%);
  z-index: 1;
  display: block !important;
}

main#main .team-section.team-v3{ position: relative; }
main#main .team-section.team-v3::before{
  content: '';
  position: absolute;
  top: -32px;
  left: 0; right: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(217,231,211,.6) 50%, rgba(217,231,211,1) 100%);
  z-index: 1;
  display: block !important;
}

/* Reset families clip-path / margin (in case still active) */
main#main .families-section{
  clip-path: none !important;
  margin-top: 0 !important;
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
}

/* === Section-specific small flourish so each feels distinct === */
/* Quick-links: slightly warmer card tint that picks up the cream bg */
main#main .quick-link{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(252,250,242,.95) 100%) !important;
  border-color: rgba(180,140,80,.16) !important;
}
main#main .quick-link:hover{
  border-color: rgba(22,163,74,.32) !important;
  background: #fff !important;
}

/* Why-v2: cards on the rich mint look pure white & crisp */
main#main .why-v2-pillar{
  background: #ffffff !important;
  border-color: rgba(22,163,74,.12) !important;
}

/* Team-v3: cards have a softer warm-white tint */
main#main .team-section.team-v3 .team-member{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%) !important;
}

/* Slim down the leaf in hero-text-side (no parallax, no animation drift) */
@keyframes hp-leaf-float-mild{
  0%, 100% { transform: translateY(-50%) rotate(-7deg); }
  50%      { transform: translateY(calc(-50% - 8px)) rotate(-6deg); }
}
main#main .home-v4-leaf{
  animation: hp-leaf-float-mild 12s ease-in-out infinite !important;
}

/* Disable the family-section drift watermark animation we added earlier */
@keyframes drift-slow-disabled{
  0%, 100% { transform: rotate(28deg); }
}

/* Make sure section content stays above the bridge gradients */
main#main section > .container,
main#main .families-section .container,
main#main .section.quick-links .container,
main#main .section.why-v2.why-v2-split .container,
main#main .team-section.team-v3 .container{
  position: relative;
  z-index: 2;
}

/* Mobile fine-tune */
@media (max-width: 720px){
  main#main .families-section::before,
  main#main .section.quick-links::before,
  main#main .section.why-v2.why-v2-split::before,
  main#main .team-section.team-v3::before{
    top: -24px;
    height: 48px;
  }
}

/* ===================================================================
   ZAKELIJKE STIJL — clean, businesslike, like silteckabelgoten.nl
   Strip italic accents, gradient text, fancy bridges, decorative leaves.
   Clean white sections with subtle grey alternation.
=================================================================== */

/* Reset all the previous overlay/bridge stuff */
main#main::before,
main#main .families-section::before,
main#main .section.quick-links::before,
main#main .section.why-v2.why-v2-split::before,
main#main .team-section.team-v3::before,
main#main .families-section::after,
main#main .section.quick-links::after,
main#main .section.why-v2.why-v2-split::after,
main#main .team-section.team-v3::after{
  display: none !important;
  content: none !important;
}

/* Simple section background pattern: white → light grey alternation */
main#main{ background: transparent !important; overflow: visible !important; }

main#main .hero.hero-home-v4{
  background:
    radial-gradient(circle at 86% 50%, rgba(22,163,74,.14), transparent 0 40%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e6ebef !important;
}

main#main .families-section{
  background: #f4f7f9 !important;       /* light grey-blue, like Siltec's bg */
  margin-top: 0 !important;
  clip-path: none !important;
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(56px, 6vw, 88px) !important;
  border-bottom: 1px solid #dde6ec !important;
}

main#main .section.quick-links{
  background: #ffffff !important;
  padding: clamp(48px, 5vw, 72px) 0 !important;
  border-bottom: 1px solid #e6ebef !important;
}

main#main .section.why-v2.why-v2-split{
  background: #f4f7f9 !important;
  padding: clamp(56px, 6vw, 88px) 0 !important;
  border-bottom: 1px solid #dde6ec !important;
}

main#main .team-section.team-v3{
  background: #ffffff !important;
  padding: clamp(56px, 6vw, 88px) 0 !important;
}

/* === SIMPLER HEADERS — drop italic accents, gradient text, dramatic stuff === */

/* Families header: clean centered, navy title, no italic gradient */
main#main .families-title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  letter-spacing: -.02em !important;
  color: #062333 !important;
}
main#main .families-title-accent{
  color: #11813b !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #11813b !important;
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  display: inline !important;
}
main#main .families-title-accent br{ display: none; }
main#main .home-v4-green-dot{
  -webkit-text-fill-color: #11813b !important;
  color: #11813b !important;
  font-style: normal !important;
}
main#main .families-lead em{
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  color: #11813b !important;
  background: none !important;
  padding: 0 !important;
}

/* Why-v2 header: same clean treatment */
main#main .why-v2-title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  letter-spacing: -.02em !important;
  color: #062333 !important;
}
main#main .why-v2-title-bold{
  color: #11813b !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
main#main .why-v2-lead em{
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  color: #11813b !important;
  background: none !important;
  padding: 0 !important;
}

/* Team-v3: drop the magazine quote, clean centered title instead */
main#main .team-v3-quote{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: #062333 !important;
  padding: 0 !important;
  text-align: center;
}
main#main .team-v3-quote em{
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  color: #11813b !important;
  background: none !important;
  padding: 0 !important;
  font-size: 1em !important;
}
main#main .team-v3-quote-mark{ display: none !important; }
main#main .team-v3-attribution{ display: none !important; }

/* Lead text — clean grey, no special em treatment */
main#main .families-lead,
main#main .why-v2-lead,
main#main .team-v2-lead{
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: #4a5965 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Eyebrows: simple uppercase pill, no double accent lines on each side */
main#main .families-eyebrow,
main#main .why-v2-eyebrow-left,
main#main .team-v3-tag{
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #11813b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
main#main .families-eyebrow-line,
main#main .why-v2-eyebrow-bar{
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: #11813b !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Hide the right-side accent lines (we keep the left-side one only) */
main#main .families-eyebrow .families-eyebrow-line:last-child,
main#main .team-v2-eyebrow .team-v2-eyebrow-line:last-child{
  display: none !important;
}
main#main .team-v3-tag::before{
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: #11813b;
  box-shadow: none !important;
  border-radius: 0;
  animation: none !important;
}

/* Cards: clean white with simple shadow, no gradient bg, no inner highlights */
main#main .families-section .category-card,
main#main .quick-link,
main#main .why-v2-pillar,
main#main .team-section.team-v3 .team-member,
main#main .why-v2-trust,
main#main .home-v4-floating-card{
  background: #ffffff !important;
  border: 1px solid #dde6ec !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(6,35,51,.06), 0 4px 12px rgba(6,35,51,.04) !important;
}
main#main .families-section .category-card:hover,
main#main .quick-link:hover,
main#main .why-v2-pillar:hover,
main#main .team-section.team-v3 .team-member:hover{
  border-color: #11813b !important;
  box-shadow: 0 2px 4px rgba(6,35,51,.06), 0 12px 28px rgba(6,35,51,.10) !important;
  transform: translateY(-2px) !important;
}

/* Family card titles — clean, no serif italic */
main#main .families-section .cat-body h3{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -.012em !important;
  color: #062333 !important;
}

main#main .why-v2-pillar-title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
main#main .why-v2-num{
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #11813b !important;
}
main#main .why-v2-pill{
  background: #ffffff !important;
  border: 1px solid #dde6ec !important;
  color: #4a5965 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

/* Team names — clean */
main#main .team-section.team-v3 .team-name,
main#main .team-v2 .team-name{
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -.02em !important;
}
main#main .team-section.team-v3 .team-region{
  background: #f4f7f9 !important;
  border-color: #dde6ec !important;
  color: #4a5965 !important;
}

/* Hero title — keep navy serif feel but simpler */
main#main .home-v4-title{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

/* Search bar with leaf icon */
main#main .home-v4-search-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
}
main#main .home-v4-search-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
main#main .home-v4-search{
  border: 1px solid #dde6ec !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(6,35,51,.06) !important;
}

/* Hero leaf — calmer, no fancy multi-shadow */
main#main .home-v4-leaf{
  filter:
    drop-shadow(0 24px 48px rgba(22,163,74,.22))
    drop-shadow(0 8px 16px rgba(6,35,51,.10)) !important;
}

/* CTAs — keep simple solid green */
main#main .families-link-all,
main#main .why-v2-cta-primary{
  background: #16a34a !important;
  box-shadow: 0 4px 12px rgba(22,163,74,.20) !important;
  font-weight: 700 !important;
  letter-spacing: .005em !important;
}
main#main .families-link-all:hover,
main#main .why-v2-cta-primary:hover{
  background: #11813b !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.30) !important;
  transform: translateY(-1px) !important;
}

main#main .why-v2-cta-ghost{
  background: #ffffff !important;
  border: 1px solid #dde6ec !important;
  color: #062333 !important;
  font-weight: 700 !important;
}
main#main .why-v2-cta-ghost:hover{
  border-color: #11813b !important;
  color: #11813b !important;
  background: #ffffff !important;
}

/* Photo banner in family cards — simpler, less fancy */
main#main .families-section .cat-banner::before,
main#main .families-section .cat-banner::after{
  display: none !important;
}
main#main .families-section .cat-banner{
  background-color: #f4f7f9 !important;
  border-bottom: 1px solid #dde6ec !important;
}

/* Tags inside family cards */
main#main .families-section .taglist .tag{
  background: #f4f7f9 !important;
  border-color: #dde6ec !important;
  color: #4a5965 !important;
  font-weight: 600 !important;
}

/* Bekijk → link inside family card */
main#main .families-section .cat-body .meta a{
  background: transparent !important;
  border: 0 !important;
  color: #11813b !important;
  padding: 0 !important;
  font-weight: 700 !important;
}
main#main .families-section .cat-body .meta a:hover{
  color: #062333 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Quick-link card — keep clean */
main#main .quick-link{
  background: #ffffff !important;
}
main#main .ql-ic{
  background: #ecf6e7 !important;
  color: #11813b !important;
  border-radius: 8px !important;
}
main#main .ql-text strong{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #062333 !important;
}
main#main .ql-arrow{
  background: transparent !important;
  color: #11813b !important;
}

/* Disable any leftover scroll-reveal animations */
main#main *{
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
@keyframes hp-leaf-float-mild{ 0%, 100% { transform: translateY(-50%) rotate(-7deg); } }
main#main .home-v4-leaf{
  animation: hp-leaf-float-mild 18s ease-in-out infinite !important;
}


/* =====================================================================
   EXACT CODEX HERO — final winning rules (1:1 replica)
   ---------------------------------------------------------------------
   Codex's final design uses the all-in-one scene image
   (siltec-hero-scene-reference.png) which already contains the leaf,
   the floating spec card, the white concentric arcs and the dotted
   accent texture as a single rendered bitmap. To match Codex pixel-for-
   pixel:
     1. The hero element keeps a soft white-to-mint diagonal gradient
        and the .home-v4-bg radial-glow stack so the LEFT side of the
        hero (where the headline sits) has the green wash Codex uses.
     2. The .home-v4-tech overlay is hidden — the dots / arcs Codex
        shows are baked into the scene image, so a CSS overlay would
        duplicate them.
     3. The .home-v4-visual block is taken out of the grid and placed
        absolutely against the right-edge of the viewport (offset to
        match the container's gutter math) so the leaf can extend all
        the way to the edge — that's what makes Codex's leaf so big
        and dominant.
     4. The .home-v4-leaf img fills the visual block edge-to-edge with
        object-fit:cover and a soft left-edge linear mask that blends
        into the page background.
     5. The modular floating card, halo and orbits are hidden — the
        scene image already shows the spec card + atmosphere baked in.
     6. .home-v4-copy is placed above the absolute visual via z-index:3
        so the headline / search / CTAs aren't covered.
   ===================================================================== */

/* Hero element: white base + isolation + crop + tall enough for the leaf */
main#main .hero.hero-home-v4{
  position: relative !important;
  background: #ffffff !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: clamp(720px, calc(100vh - 96px), 920px) !important;
}

/* Grid takes the full hero height so the absolute visual has a tall pane */
main#main .hero.hero-home-v4 .home-v4-grid{
  min-height: clamp(720px, calc(100vh - 96px), 920px) !important;
  align-items: center !important;
  padding: clamp(56px, 7vh, 88px) 0 56px !important;
}

/* Soft white→mint base gradient with radial green glows on the right
   so the LEFT half stays clean white for legibility while the RIGHT half
   gets the lush atmosphere behind the leaf */
main#main .hero.hero-home-v4 .home-v4-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  display: block !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(22,163,74,.26), transparent 0 40%),
    radial-gradient(circle at 88% 30%, rgba(0,160,198,.10), transparent 0 26%),
    radial-gradient(circle at 96% 78%, rgba(22,163,74,.12), transparent 0 30%),
    radial-gradient(circle at 96% 22%, rgba(255,255,255,.94), transparent 0 14%),
    linear-gradient(104deg, #ffffff 0%, #ffffff 36%, #f7fcfa 56%, #eaf8ef 100%) !important;
}

/* Hide the CSS-rendered tech overlay — its dots / arcs are baked
   into the scene image, so we'd be duplicating them otherwise */
main#main .hero.hero-home-v4 .home-v4-tech{
  display: none !important;
}

/* Hide the modular halo / orbits — those are baked into the scene image */
main#main .hero.hero-home-v4 .home-v4-visual-halo,
main#main .hero.hero-home-v4 .home-v4-orbit{
  display: none !important;
}

/* Lift the grid above the bg layer */
main#main .hero.hero-home-v4 .home-v4-grid{
  position: relative !important;
  z-index: 2 !important;
}

/* Copy column stays in flow, sits above the absolute visual block */
main#main .hero.hero-home-v4 .home-v4-copy{
  position: relative !important;
  z-index: 3 !important;
}

/* Visual block — taken out of grid flow and placed absolutely against
   the right edge of the viewport. The right offset uses the container
   math so the visual lines up with the hero's outer margin. */
main#main .hero.hero-home-v4 .home-v4-visual{
  position: absolute !important;
  top: 50% !important;
  /* breathing room — fit fully inside viewport with safe right margin */
  right: clamp(20px, 2.4vw, 40px) !important;
  bottom: auto !important;
  width: min(720px, 46vw) !important;
  /* aspect matches siltec-leaf-hq-v5.png (1397x1012) — user's HQ leaf
     with perfect transparency + natural baked-in shadow already present */
  aspect-ratio: 1397 / 1012 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100% - 24px) !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
  align-self: center !important;
  display: block !important;
}

/* Leaf img — clean cutout from siltec-leaf-reference.png (857x565):
   only the leaf body, no baked-in UI panels, no missing chunks. A
   stacked drop-shadow filter casts a soft green shadow underneath so
   the leaf is grounded in the hero atmosphere (rings, dot grid, halo). */
main#main .hero.hero-home-v4 .home-v4-leaf{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  transform: none !important;
  /* The PNG has its own baked-in soft shadow, so no CSS drop-shadow
     needed here — adding one would create a double-shadow halo. */
  filter: none !important;
  animation: none !important;
}

/* Tablet/mobile: the visual block goes back into flow as a full-width
   row below the copy */
@media (max-width: 1120px){
  main#main .hero.hero-home-v4 .home-v4-visual{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    margin-top: 12px !important;
  }
}
@media (max-width: 720px){
  main#main .hero.hero-home-v4 .home-v4-visual{
    height: 360px !important;
    min-height: 360px !important;
  }
}

/* =====================================================================
   ATMOSPHERIC TECH BACKGROUND — subtle Codex-style ambience repeated
   across non-hero sections so the entire site shares the same look.
   ---------------------------------------------------------------------
   The hero has the FULL atmosphere baked into the leaf scene image.
   For the rest of the site we use a much lighter version: a soft
   green corner-wash + a low-opacity dot grid + (optional) a single
   concentric-arc whisper. Each section gets its own variant so it
   doesn't feel mechanically copy-pasted.

   All effects sit in a ::before pseudo at z-index 0 and are pointer-
   events:none so they never interfere with content.
   ===================================================================== */

/* Common plumbing — make sure each section can host an absolute layer */
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2,
main#main .section.why-v2.why-v2-split,
main#main .team-section,
main#main .team-section.team-v3{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Lift the inner content above the atmospheric layer */
main#main .families-section > *,
main#main .section.quick-links > *,
main#main .section.why-v2 > *,
main#main .section.why-v2.why-v2-split > *,
main#main .team-section > *,
main#main .team-section.team-v3 > *{
  position: relative;
  z-index: 1;
}

/* FAMILIES — soft green wash from left-bottom + dotted whisper */
main#main .families-section{
  background:
    radial-gradient(circle at 8% 88%, rgba(22,163,74,.10), transparent 0 36%),
    radial-gradient(circle at 96% 14%, rgba(22,163,74,.08), transparent 0 30%),
    linear-gradient(180deg, #ffffff 0%, #fafdfb 60%, #f5fbf7 100%) !important;
}
main#main .families-section::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-image:
    /* a single soft arc whisper at top-right */
    radial-gradient(circle at 92% 10%,
      transparent 0 18%,
      rgba(22,163,74,.14) 18.0% 18.4%,
      transparent 18.7% 24%,
      rgba(22,163,74,.10) 24.05% 24.35%,
      transparent 24.6%),
    /* a dotted whisper across the section */
    radial-gradient(rgba(22,163,74,.22) 1.2px, transparent 1.6px) !important;
  background-size: 100% 100%, 22px 22px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, 50% 50% !important;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 88% 35%, #000 12%, rgba(0,0,0,.4) 50%, transparent 82%) !important;
          mask-image: radial-gradient(ellipse 60% 90% at 88% 35%, #000 12%, rgba(0,0,0,.4) 50%, transparent 82%) !important;
  opacity: 1 !important;
  display: block !important;
}

/* QUICK-LINKS — alternating panel: cool grey-green wash + minimal dots */
main#main .section.quick-links{
  background:
    radial-gradient(circle at 84% 30%, rgba(22,163,74,.08), transparent 0 32%),
    radial-gradient(circle at 14% 80%, rgba(0,160,198,.06), transparent 0 28%),
    linear-gradient(180deg, #f7faf9 0%, #f0f6f3 50%, #f7faf9 100%) !important;
}
main#main .section.quick-links::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(rgba(22,163,74,.20) 1.1px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
  background-repeat: repeat !important;
  background-position: center !important;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 78% 50%, #000 12%, rgba(0,0,0,.4) 50%, transparent 82%) !important;
          mask-image: radial-gradient(ellipse 60% 90% at 78% 50%, #000 12%, rgba(0,0,0,.4) 50%, transparent 82%) !important;
  opacity: 1 !important;
  display: block !important;
}

/* WHY-V2 — wide arc echo + green wash from the left */
main#main .section.why-v2,
main#main .section.why-v2.why-v2-split{
  background:
    radial-gradient(circle at 6% 50%, rgba(22,163,74,.10), transparent 0 38%),
    radial-gradient(circle at 92% 88%, rgba(22,163,74,.08), transparent 0 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 50%, #f3f9f5 100%) !important;
}
main#main .section.why-v2::before,
main#main .section.why-v2.why-v2-split::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-image:
    /* a single subtle concentric ring on the left side */
    radial-gradient(circle at 4% 50%,
      transparent 0 26%,
      rgba(22,163,74,.14) 26.0% 26.4%,
      transparent 26.7% 32%,
      rgba(22,163,74,.10) 32.05% 32.35%,
      transparent 32.65% 38%,
      rgba(22,163,74,.07) 38.05% 38.3%,
      transparent 38.55%),
    /* dotted whisper across the section */
    radial-gradient(rgba(22,163,74,.20) 1.0px, transparent 1.3px) !important;
  background-size: 100% 100%, 24px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, 50% 50% !important;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 12% 50%, #000 12%, rgba(0,0,0,.45) 55%, transparent 84%) !important;
          mask-image: radial-gradient(ellipse 60% 90% at 12% 50%, #000 12%, rgba(0,0,0,.45) 55%, transparent 84%) !important;
  opacity: 1 !important;
  display: block !important;
}

/* TEAM — the same airy mint, biased toward bottom + dot whisper */
main#main .team-section,
main#main .team-section.team-v3{
  background:
    radial-gradient(circle at 50% 100%, rgba(22,163,74,.12), transparent 0 38%),
    radial-gradient(circle at 90% 12%, rgba(22,163,74,.07), transparent 0 26%),
    linear-gradient(180deg, #f5fbf7 0%, #ffffff 60%, #f0f7f3 100%) !important;
}
main#main .team-section::before,
main#main .team-section.team-v3::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 50% 110%,
      transparent 0 22%,
      rgba(22,163,74,.14) 22.0% 22.4%,
      transparent 22.7% 30%,
      rgba(22,163,74,.10) 30.05% 30.35%,
      transparent 30.65%),
    radial-gradient(rgba(22,163,74,.20) 1.0px, transparent 1.3px) !important;
  background-size: 100% 100%, 22px 22px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, 50% 50% !important;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 60%, transparent 95%) !important;
          mask-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 60%, transparent 95%) !important;
  opacity: 1 !important;
  display: block !important;
}

/* Re-assert that interactive cards still sit ABOVE the atmosphere */
main#main .families-section .category-card,
main#main .families-section .cat,
main#main .quick-link,
main#main .why-v2-pillar,
main#main .why-v2-trust,
main#main .team-section .team-member{
  position: relative;
  z-index: 2;
}

/* Inner section title bars stay above as well */
main#main .families-section .section-head,
main#main .section.quick-links .section-head,
main#main .section.why-v2 .section-head,
main#main .team-section .section-head{
  position: relative;
  z-index: 2;
}

/* Mobile: dial down the atmosphere so it never competes with content */
@media (max-width: 720px){
  main#main .families-section::before,
  main#main .section.quick-links::before,
  main#main .section.why-v2::before,
  main#main .section.why-v2.why-v2-split::before,
  main#main .team-section::before,
  main#main .team-section.team-v3::before{
    opacity: .5 !important;
  }
}

/* =====================================================================
   NEW HERO FLOATING CARD — "30 jaar ervaring" with 4 checked bullets
   ---------------------------------------------------------------------
   The baked-in spec card from the scene image is faded out via a mask
   on .home-v4-leaf (see above). This rule re-enables and styles the
   modular .home-v4-floating-card so it sits over that area with fresh
   content. Big, opaque, drop-shadowed — fully covers the baked card
   in case the mask leaves any residue.
   ===================================================================== */
main#main .hero.hero-home-v4 .home-v4-floating-card{
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-areas:
    "icon title"
    "list list" !important;
  align-items: start !important;
  gap: 6px 14px !important;
  position: absolute !important;
  right: clamp(18px, 3vw, 56px) !important;
  bottom: clamp(36px, 7vh, 88px) !important;
  left: auto !important;
  top: auto !important;
  width: clamp(280px, 24vw, 340px) !important;
  padding: 18px 20px 18px !important;
  background: #ffffff !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 56px rgba(6,35,51,.16),
    0 6px 18px rgba(22,163,74,.10),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  animation: none !important;
  transform: none !important;
}

main#main .hero.hero-home-v4 .home-v4-floating-card .home-v4-card-icon{
  grid-area: icon !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #ecf6e7 !important;
  color: #11813b !important;
}
main#main .hero.hero-home-v4 .home-v4-floating-card .home-v4-card-icon svg{
  width: 22px !important;
  height: 22px !important;
}

main#main .hero.hero-home-v4 .home-v4-floating-card > div{
  grid-area: title !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
main#main .hero.hero-home-v4 .home-v4-floating-card strong{
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #062333 !important;
  letter-spacing: -0.005em !important;
}
main#main .hero.hero-home-v4 .home-v4-floating-card span{
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #4a5965 !important;
  line-height: 1.3 !important;
}

main#main .hero.hero-home-v4 .home-v4-floating-card ul{
  grid-area: list !important;
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 6px !important;
  border-top: 1px solid #eef2f4 !important;
  padding-top: 10px !important;
}
main#main .hero.hero-home-v4 .home-v4-floating-card li{
  position: relative !important;
  padding-left: 22px !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #062333 !important;
  line-height: 1.4 !important;
}
main#main .hero.hero-home-v4 .home-v4-floating-card li::before{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.4 6.7 11 12 5.6' fill='none' stroke='%2311813b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
    #ecf6e7 !important;
}

/* Mobile: card spans full width below the leaf */
@media (max-width: 1120px){
  main#main .hero.hero-home-v4 .home-v4-floating-card{
    right: 12px !important;
    bottom: 12px !important;
    width: clamp(240px, 90%, 320px) !important;
  }
}
@media (max-width: 720px){
  main#main .hero.hero-home-v4 .home-v4-floating-card{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    bottom: 8px !important;
  }
}

/* =====================================================================
   GLOBAL CONTINUOUS ATMOSPHERE — large arcs + dot grid that span the
   entire page so the Codex-style scene flows across section boundaries
   instead of restarting in every section.
   ---------------------------------------------------------------------
   We attach this to <main> so it sits behind ALL sections at z-index:0
   with pointer-events:none. Sections then run with semi-transparent
   backgrounds so this layer shows through.
   ===================================================================== */
main#main{
  position: relative !important;
  isolation: isolate !important;
}
main#main::before{
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    /* TOP COVER — solid white over hero (0–24%), smoothly fades to
       transparent by 30% so the hero stays calm/clean while the arcs
       below begin flowing in from families onwards. */
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 23%,
      rgba(255,255,255,0) 30%),
    /* "Cleanroom calm" — only TWO quiet arc clusters, both pushed
       off-canvas so only outer arc tails enter the page. Three thin
       feathered rings each, very low alpha. Reads as a tonal whisper. */
    /* Cluster A: primary anchor, off-canvas top-right */
    radial-gradient(circle 1600px at 110% 38%,
      transparent 0 30%,
      rgba(22,163,74,0) 30.0% 30.5%,
      rgba(22,163,74,.16) 31.0% 31.6%,
      rgba(22,163,74,0) 32.5% 47%,
      rgba(22,163,74,0) 47.0% 47.5%,
      rgba(22,163,74,.10) 48.0% 48.6%,
      rgba(22,163,74,0) 49.5% 64%,
      rgba(22,163,74,0) 64.0% 64.5%,
      rgba(22,163,74,.06) 65.0% 65.6%,
      rgba(22,163,74,0) 66.5%),
    /* Cluster B: counter-balance, off-canvas bottom-left */
    radial-gradient(circle 1400px at -10% 78%,
      transparent 0 30%,
      rgba(22,163,74,0) 30.0% 30.5%,
      rgba(22,163,74,.12) 31.0% 31.6%,
      rgba(22,163,74,0) 32.5% 47%,
      rgba(22,163,74,0) 47.0% 47.5%,
      rgba(22,163,74,.08) 48.0% 48.6%,
      rgba(22,163,74,0) 49.5% 64%,
      rgba(22,163,74,0) 64.0% 64.5%,
      rgba(22,163,74,.05) 65.0% 65.6%,
      rgba(22,163,74,0) 66.5%),
    /* Quiet base wash — closer to pure white so arcs are the only chromatic event */
    linear-gradient(180deg,
      #ffffff 0%,
      #fdfefb 30%,
      #fbfdfa 50%,
      #fdfefb 70%,
      #ffffff 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: scroll !important;
  opacity: 1 !important;
}

/* Dot-grid layer DISABLED — at the cleanroom-calm register the dots
   compete with the quiet arcs. Removed entirely for premium feel. */
main#main::after{
  display: none !important;
  background-image: none !important;
}

/* Sections must be transparent (or low-opacity) so the global layer shows */
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2,
main#main .section.why-v2.why-v2-split,
main#main .team-section,
main#main .team-section.team-v3{
  background: transparent !important;
}

/* HIDE all per-section ::before atmosphere — the GLOBAL main::before is
   the single continuous source so arcs flow uninterrupted across
   section boundaries. */
main#main .hero.hero-home-v4::before,
main#main .families-section::before,
main#main .section.quick-links::before,
main#main .section.why-v2::before,
main#main .section.why-v2.why-v2-split::before,
main#main .team-section::before,
main#main .team-section.team-v3::before{
  display: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  opacity: 0 !important;
  border: 0 !important;
}

/* Sections + hero get FULLY TRANSPARENT backgrounds so the global
   atmosphere on main::before flows through them without breaks. */
main#main .hero.hero-home-v4,
main#main .families-section,
main#main .section.quick-links,
main#main .section.why-v2,
main#main .section.why-v2.why-v2-split,
main#main .team-section,
main#main .team-section.team-v3{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* Hero gets a RICH atmospheric background that EXTENDS the codex 3D
   leaf scene's baked-in style across the entire hero — concentric
   tech rings, dot grids at varying densities, soft halos and the
   precise pale-mint gradient palette of the codex render. The leaf
   img uses mix-blend-mode below so its built-in halo becomes
   transparent and merges into this atmosphere — no rectangular
   photo boundary visible anywhere. */
main#main .hero.hero-home-v4 .home-v4-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background-image:
    /* CONCENTRIC RINGS — thin tech arcs emanating from the right,
       matching the subtle circular guidelines visible in the codex
       image around the leaf */
    radial-gradient(circle 1400px at 105% 55%,
      transparent 0 28%,
      rgba(22,163,74,.10) 28.0% 28.35%,
      transparent 28.55% 41%,
      rgba(22,163,74,.075) 41.0% 41.30%,
      transparent 41.50% 54%,
      rgba(22,163,74,.055) 54.0% 54.28%,
      transparent 54.48% 67%,
      rgba(22,163,74,.040) 67.0% 67.26%,
      transparent 67.46% 80%,
      rgba(22,163,74,.028) 80.0% 80.24%,
      transparent 80.44%),
    /* DENSE DOT CLUSTER — bottom-right matches the codex dense dot
       cluster bottom-right of the leaf */
    radial-gradient(circle at 1px 1px, rgba(22,163,74,.22) 1px, transparent 1.4px),
    /* SPARSE DOT WASH — fainter dots tiled across the whole hero */
    radial-gradient(circle at 1px 1px, rgba(22,163,74,.10) 1px, transparent 1.4px),
    /* SOFT GREEN HALO — radiates around the leaf area (mid-right) */
    radial-gradient(ellipse 60% 75% at 72% 52%, rgba(143,211,160,.30), transparent 72%),
    /* HIGHLIGHT upper-right — codex bright spot */
    radial-gradient(circle at 90% 18%, rgba(255,255,255,.95), transparent 26%),
    /* BASE pale-mint gradient — exactly matches the codex tonal palette,
       lighter top-left → richer mint bottom-right */
    linear-gradient(122deg,
      #ffffff 0%,
      #f8fcf4 24%,
      #eef7e6 52%,
      #e2eed7 88%,
      #d8e9cb 100%) !important;
  background-size:
    100% 100%,           /* rings — full hero */
    14px 14px,           /* dense dots tile */
    24px 24px,           /* sparse dots tile */
    100% 100%,           /* halo */
    100% 100%,           /* highlight */
    100% 100% !important;/* base */
  background-position:
    0 0,
    0 0,
    7px 7px,             /* offset sparse dots so they don't overlap dense */
    0 0,
    0 0,
    0 0 !important;
  background-repeat:
    no-repeat,           /* rings */
    repeat,              /* dense dots tile across whole hero */
    repeat,              /* sparse dots tile across whole hero */
    no-repeat,
    no-repeat,
    no-repeat !important;
  /* Mask the dense dots to fade in toward the right — matches the
     codex which has more dots on the right, fewer on the left */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,1) 100%) !important;
          mask-image: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,1) 100%) !important;
}

/* Hero must establish a stacking context above main::before so its own
   atmospheric background renders above the global top-cover */
main#main .hero.hero-home-v4{
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

/* Kill any divider elements between sections (hero-tilt-divider RE-ENABLED in v15) */
main#main .families-divider,
main#main .section-divider{
  display: none !important;
}

/* The hero stays opaque so the leaf scene is the "anchor" of the atmosphere */
main#main .hero.hero-home-v4{
  z-index: 1 !important;
}

/* =====================================================================
   FINAL KILL-SWITCH for hero leaf (placed last so it always wins) —
   locks the leaf into its visual block at 720px max, no rotation, no
   negative right offset, no extra filter (PNG has baked-in shadow).
   Mirrored in @media so smaller viewports also stay clean.
   ===================================================================== */
html body main#main .hero.hero-home-v4 .home-v4-visual{
  position: absolute !important;
  top: 50% !important;
  right: clamp(40px, 5vw, 96px) !important;
  bottom: auto !important;
  left: auto !important;
  width: min(680px, 44vw) !important;
  aspect-ratio: 1397 / 1012 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100% - 24px) !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 1 !important;
}
/* Floating spec card — anchored to bottom-right, sits OUTSIDE the leaf
   so the full leaf shape stays visible. Card is opaque white with soft
   shadow, no overlap with leaf body. */
html body main#main .hero.hero-home-v4 .home-v4-floating-card{
  display: grid !important;
  position: absolute !important;
  right: clamp(40px, 5vw, 96px) !important;
  bottom: clamp(48px, 8vh, 96px) !important;
  top: auto !important;
  left: auto !important;
  width: clamp(280px, 22vw, 320px) !important;
  z-index: 6 !important;
  transform: none !important;
  animation: none !important;
}
html body main#main .hero.hero-home-v4 .home-v4-leaf{
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  /* High-quality scaling for the 1374px PNG \u2192 ~680px display.
     NO transform on the img itself: forcing a GPU layer re-rasterizes
     and softens edges in Safari. */
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  will-change: auto !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  filter: none !important;
  animation: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 1120px){
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin-top: 12px !important;
  }
}

/* =====================================================================
   PHOTO QUICK-LINKS — 3-column photo cards in Siltec green palette.
   Boxed inside container, rounded corners, soft shadow, breathing room.
   Hover lifts each card with deeper shadow + slightly darker overlay.
   ===================================================================== */
html body main#main .section.quick-links-photo{
  padding: clamp(40px, 5vw, 72px) 0 !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(22,163,74,.06), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f6faf6 100%) !important;
  border: 0 !important;
}
html body main#main .section.quick-links-photo .qlp-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
  width: min(1200px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html body main#main .qlp-card{
  position: relative !important;
  display: block !important;
  min-height: clamp(300px, 30vw, 380px) !important;
  background-color: #11813b !important; /* fallback brand-green if image fails */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
  color: #fff !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 28px rgba(6, 35, 51, .12),
    0 4px 10px rgba(22, 163, 74, .06) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease !important;
}
html body main#main .qlp-card:hover{
  transform: translateY(-4px) !important;
  box-shadow:
    0 22px 44px rgba(6, 35, 51, .18),
    0 8px 18px rgba(22, 163, 74, .12) !important;
}
html body main#main .qlp-overlay{
  position: absolute !important;
  inset: 0 !important;
  /* very light overlay — photos clearly visible, text stays readable via strong shadow + bottom darkening */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 30, 15, .15) 40%,
    rgba(13, 70, 35, .55) 100%) !important;
  z-index: 1 !important;
  transition: background .35s ease !important;
}
html body main#main .qlp-overlay-blue{
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(17, 129, 59, .15) 40%,
    rgba(11, 90, 42, .55) 100%) !important;
}
html body main#main .qlp-overlay-warm{
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(15, 90, 45, .15) 40%,
    rgba(11, 70, 35, .55) 100%) !important;
}
html body main#main .qlp-card:hover .qlp-overlay{
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .05) 0%,
    rgba(13, 70, 35, .70) 100%) !important;
}
html body main#main .qlp-card:hover .qlp-overlay-blue{
  background: linear-gradient(180deg,
    rgba(34, 182, 90, .10) 0%,
    rgba(11, 90, 42, .68) 100%) !important;
}
html body main#main .qlp-card:hover .qlp-overlay-warm{
  background: linear-gradient(180deg,
    rgba(20, 75, 40, .10) 0%,
    rgba(11, 70, 35, .70) 100%) !important;
}
html body main#main .qlp-content{
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  min-height: clamp(300px, 30vw, 380px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 32px 28px !important;
  text-align: center !important;
}
html body main#main .qlp-title{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1.35rem, 1.85vw, 1.7rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  max-width: 22ch !important;
  text-shadow: 0 2px 16px rgba(0, 30, 12, .45) !important;
}
html body main#main .qlp-sub{
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(.92rem, 1.05vw, 1rem) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, .94) !important;
  margin: 0 0 6px !important;
  text-shadow: 0 1px 8px rgba(0, 30, 12, .35) !important;
}
html body main#main .qlp-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 11px 22px !important;
  background: #ffffff !important;
  color: #11813b !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: 0 6px 18px rgba(0, 30, 12, .20) !important;
  transition: background .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease !important;
}
html body main#main .qlp-btn svg{
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
/* Variant: solid green pill on the lighter sprouts overlay for pop */
html body main#main .qlp-btn-light{
  background: linear-gradient(135deg, #22b65a, #11813b) !important;
  color: #ffffff !important;
}
html body main#main .qlp-card:hover .qlp-btn{
  background: linear-gradient(135deg, #22b65a, #11813b) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(17, 129, 59, .35) !important;
}
html body main#main .qlp-card:hover .qlp-btn-light{
  background: #ffffff !important;
  color: #11813b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0, 30, 12, .25) !important;
}

/* Tablet/mobile → stack to 1 column */
@media (max-width: 900px){
  html body main#main .section.quick-links-photo .qlp-grid{
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
  }
  html body main#main .qlp-card{
    min-height: 240px !important;
  }
  html body main#main .qlp-content{
    min-height: 240px !important;
  }
}

/* =====================================================================
   "VIER PIJLERS" UPGRADE — icons + watermark number + animated arrow
   Replaces the plain top-row (number + pill) with a richer header.
   ===================================================================== */
html body main#main .why-v2-pillar{
  padding: 28px 26px 30px !important;
  border: 1px solid rgba(22,163,74,.12) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafffb 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
html body main#main .why-v2-watermark{
  position: absolute !important;
  top: -8px !important;
  right: 14px !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: 110px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(22, 163, 74, .14) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: color .35s ease, -webkit-text-stroke-color .35s ease,
              transform .35s cubic-bezier(.2,.8,.2,1) !important;
}
html body main#main .why-v2-pillar:hover .why-v2-watermark{
  -webkit-text-stroke: 1.5px rgba(22, 163, 74, .28) !important;
  transform: scale(1.04) translateY(-2px) !important;
}
html body main#main .why-v2-pillar-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(34,182,90,.12), rgba(17,129,59,.18)) !important;
  color: #11813b !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background .3s ease, color .3s ease, transform .3s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 10px rgba(17,129,59,.08) !important;
}
html body main#main .why-v2-pillar-icon svg{
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}
html body main#main .why-v2-pillar:hover .why-v2-pillar-icon{
  background: linear-gradient(135deg, #22b65a, #11813b) !important;
  color: #ffffff !important;
  transform: scale(1.04) rotate(-2deg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 20px rgba(17,129,59,.30) !important;
}
/* Hide the old .why-v2-pillar-top wrapper since we now place children directly */
html body main#main .why-v2-pillar-top{
  display: none !important;
}
/* Re-show the pill — it was inside .why-v2-pillar-top before */
html body main#main .why-v2-pillar > .why-v2-pill{
  position: relative !important;
  z-index: 1 !important;
  align-self: flex-start !important;
  margin-bottom: 8px !important;
}
html body main#main .why-v2-pillar-title{
  position: relative !important;
  z-index: 1 !important;
  font-size: 1.22rem !important;
  margin-top: 4px !important;
}
html body main#main .why-v2-pillar-text{
  position: relative !important;
  z-index: 1 !important;
}
/* Subtle bottom arrow — reveals on hover */
html body main#main .why-v2-pillar::after{
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0 !important;
  background: linear-gradient(90deg, #22b65a, #11813b) !important;
  border-radius: 0 0 3px 3px !important;
  transition: width .45s cubic-bezier(.4,0,.2,1) !important;
  z-index: 2 !important;
}
html body main#main .why-v2-pillar:hover::after{
  width: 100% !important;
}
html body main#main .why-v2-pillar:hover{
  border-color: rgba(22,163,74,.32) !important;
  box-shadow:
    0 4px 8px rgba(6,35,51,.05),
    0 22px 44px rgba(6,35,51,.10),
    0 6px 16px rgba(22,163,74,.14) !important;
  transform: translateY(-5px) !important;
}

/* Trust badges (left side: 1993 / Hygiëne / NL) — refined card */
html body main#main .why-v2-trust{
  margin-top: 28px !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafffb 100%) !important;
  border: 1px solid rgba(22,163,74,.16) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(6,35,51,.04),
    0 10px 24px rgba(6,35,51,.06) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
html body main#main .why-v2-trust-stat{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative !important;
}
html body main#main .why-v2-trust-stat:not(:last-child)::after{
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  right: -7px !important;
  width: 1px !important;
  height: calc(100% - 8px) !important;
  background: rgba(22,163,74,.18) !important;
}
html body main#main .why-v2-trust-stat strong{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #11813b !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}
html body main#main .why-v2-trust-stat{
  font-family: 'Inter', sans-serif !important;
  font-size: .78rem !important;
  color: #5a6c78 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* ===================================================================
   SMOOTH HERO → FAMILIES TRANSITION (uuu)
   Vervangt de harde clip-path diagonal door een zachte gradient-fade.
   1. Hero visual mag korter (zo zien we minder lege ruimte links)
   2. Hero krijgt een soft "white wash" gradient onderin die het groen
      laat fade-en naar de families-bg
   3. Families-section pulled up harder + zonder zichtbare harde rand
=================================================================== */

/* Hero visual — laat 'm korter zijn als de copy korter is */
html body main#main .hero.hero-home-v4 .home-v4-visual{
  min-height: clamp(340px, 44vh, 460px) !important;
}

/* Hero — relatieve positionering voor de fade-overlay, padding-bottom kleiner */
html body main#main .hero.hero-home-v4{
  position: relative !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

/* Hero grid — minder bottom padding zodat de fade direct na content komt */
html body main#main .hero.hero-home-v4 .home-v4-grid{
  padding: clamp(36px, 4.5vh, 60px) 0 clamp(40px, 5vw, 70px) !important;
}

/* SOFT FADE OVERLAY: zacht witte gradient onderin de hero die naar de
   families-bg toe loopt. Geen harde rand meer. */
html body main#main .hero.hero-home-v4::after{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: clamp(220px, 24vh, 320px) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  background: linear-gradient(180deg,
    rgba(246, 250, 243, 0) 0%,
    rgba(246, 250, 243, 0.30) 30%,
    rgba(246, 250, 243, 0.65) 55%,
    rgba(246, 250, 243, 0.90) 80%,
    rgba(246, 250, 243, 1) 100%) !important;
}

/* Floating card moet boven de fade blijven, niet erin verdwijnen */
html body main#main .hero.hero-home-v4 .home-v4-floating-card{
  z-index: 6 !important;
  bottom: clamp(40px, 7vh, 80px) !important;
}

/* FAMILIES SECTION — start exact bij de kleur waar de hero-fade eindigt
   (#f6faf3) en gaat zachtjes naar lichter wit. Geen zichtbare seam. */
html body main#main .families-section{
  position: relative !important;
  z-index: 3 !important;
  margin-top: 0 !important;
  padding-top: clamp(28px, 3.2vw, 48px) !important;
  padding-bottom: clamp(48px, 5.5vw, 80px) !important;
  background: linear-gradient(180deg,
    #f6faf3 0%,
    #f9fcf6 35%,
    #fbfdf9 100%) !important;
  clip-path: none !important;
}

/* Verberg de oude diagonal accent line */
html body main#main .families-section::before{
  display: none !important;
}

/* Mobile fine-tune */
@media (max-width: 720px){
  html body main#main .hero.hero-home-v4::after{
    height: clamp(120px, 16vh, 180px) !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    min-height: 320px !important;
  }
  html body main#main .families-section{
    padding-top: 16px !important;
  }
}

/* ===================================================================
   PREMIUM CTA BUTTONS — "Bekijk toepassingen" + "Vraag offerte aan"
   Beats earlier main#main overrides via html body main#main chain.
=================================================================== */

/* Container — meer ademruimte tussen de knoppen */
html body main#main .why-v2-actions-bottom{
  gap: 16px !important;
  padding-top: clamp(28px, 3.5vw, 44px) !important;
  margin-top: clamp(28px, 3.5vw, 44px) !important;
  border-top: 1px solid rgba(22,163,74,.14) !important;
}

/* PRIMARY — "Bekijk toepassingen": grotere, glanzende green pill met glow */
html body main#main .why-v2-cta-primary{
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, #22b65a 0%, #16a34a 50%, #11813b 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
  text-decoration: none !important;
  box-shadow:
    0 12px 28px rgba(22,163,74,.32),
    0 3px 6px rgba(22,163,74,.18),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .28s ease,
              background .25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Subtle "shine" sweep on hover */
html body main#main .why-v2-cta-primary::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,.32) 50%,
    transparent 65%,
    transparent 100%) !important;
  transform: translateX(-100%) !important;
  transition: transform .65s cubic-bezier(.4,0,.2,1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
html body main#main .why-v2-cta-primary:hover::before{
  transform: translateX(100%) !important;
}

html body main#main .why-v2-cta-primary > *{
  position: relative !important;
  z-index: 2 !important;
}

html body main#main .why-v2-cta-primary:hover{
  background: linear-gradient(135deg, #28c161 0%, #1cb154 50%, #14913f 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 36px rgba(22,163,74,.42),
    0 5px 10px rgba(22,163,74,.24),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
}

html body main#main .why-v2-cta-primary svg{
  width: 17px !important;
  height: 17px !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}
html body main#main .why-v2-cta-primary:hover svg{
  transform: translateX(4px) !important;
}

/* GHOST — "Vraag offerte aan": echte button met groene outline + icon */
html body main#main .why-v2-cta-ghost{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 15px 28px !important;
  background: rgba(255,255,255,.85) !important;
  color: #11813b !important;
  border: 1.5px solid rgba(22,163,74,.45) !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
  text-decoration: none !important;
  box-shadow:
    0 6px 16px rgba(22,163,74,.10),
    0 1px 2px rgba(6,35,51,.04),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .28s ease,
              background .22s ease,
              border-color .22s ease,
              color .22s ease !important;
  position: relative !important;
}

html body main#main .why-v2-cta-ghost svg{
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

html body main#main .why-v2-cta-ghost:hover{
  background: linear-gradient(135deg, #16a34a, #11813b) !important;
  color: #ffffff !important;
  border-color: #11813b !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 28px rgba(22,163,74,.30),
    0 4px 8px rgba(22,163,74,.18),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html body main#main .why-v2-cta-ghost:hover svg{
  transform: translateY(-2px) rotate(-6deg) !important;
}

@media (max-width: 720px){
  html body main#main .why-v2-cta-primary,
  html body main#main .why-v2-cta-ghost{
    padding: 14px 24px !important;
    font-size: 13.5px !important;
  }
}


/* ===================================================================
   MOBILE-FRIENDLY MASTER OVERRIDE — fixes ALL pages on phones
   Single source of truth for mobile/tablet behavior.
   Overrides earlier conflicting rules via html body specificity.
=================================================================== */

/* --- Anti-overflow safety net: nothing escapes the viewport --- */
html, body{
  overflow-x: clip !important;
  max-width: 100vw !important;
}
html{ width: 100%; }
body{
  width: 100%;
  position: relative;
}

/* ===== TABLET & MOBILE (≤980px) ===== */
@media (max-width: 980px){

  /* Hide desktop nav, ensure hamburger shows */
  html body .site-header .nav{ display: none !important; }
  html body .site-header .nav.is-open{
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    right: 12px !important;
    margin-top: 8px !important;
    background: #fff !important;
    border: 1px solid #dde6ec !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 38px rgba(6,35,51,.14) !important;
    padding: 10px !important;
    z-index: 100 !important;
    gap: 4px !important;
  }
  html body .site-header .nav.is-open > a,
  html body .site-header .nav.is-open .nav-toplink{
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
    font-size: 15px !important;
  }
  html body .site-header .nav.is-open .nav-dropdown{
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
  }
  html body .menu-button{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    border: 1px solid #dde6ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }
  html body .site-header{ position: relative !important; }
  html body .header-inner{
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  /* Hide search-trigger text + Wordt klant on phones — keep just icons */
  html body .header-search-trigger .hst-text,
  html body .header-search-trigger .hst-kbd{ display: none !important; }
  html body .header-search-trigger{
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
  }
  html body .icon-button .bw-label,
  html body .icon-button .bq-label{ display: none !important; }
  html body .icon-button{
    padding: 9px 11px !important;
    min-width: 40px !important;
  }
  /* Hide topbar contact-rows on mobile to save space */
  html body .topbar{ display: none !important; }
}

/* ===== PHONE (≤640px) ===== */
@media (max-width: 640px){

  /* All containers respect 16px side gutter */
  html body .container,
  html body main#main .container{
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* All grids → single column on phone */
  html body main#main .grid.four,
  html body main#main .grid.three,
  html body main#main .grid.two,
  html body main#main .families-section .grid.four,
  html body main#main .families-section .grid,
  html body main#main #homeCategories,
  html body main#main .why-v2-pillars,
  html body main#main .why-v2-pillars-2col,
  html body main#main .qlp-grid,
  html body main#main .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* HERO (homepage) — stack vertically, leaf becomes accent */
  html body main#main .hero.hero-home-v4{
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body main#main .home-v4-grid{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 24px 0 32px !important;
    gap: 24px !important;
  }
  html body main#main .home-v4-copy{
    max-width: 100% !important;
    text-align: left !important;
  }
  html body main#main .home-v4-title{
    font-size: clamp(28px, 8.5vw, 38px) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }
  html body main#main .home-v4-intro{
    font-size: 14.5px !important;
    margin-bottom: 16px !important;
  }
  /* Hero search bar — input + button stacked or compact */
  html body main#main .home-v4-search{
    width: 100% !important;
    height: 56px !important;
    padding: 5px 6px 5px 16px !important;
    gap: 8px !important;
  }
  html body main#main .home-v4-search input{
    font-size: 14px !important;
    min-width: 0 !important;
  }
  html body main#main .home-v4-search button{
    padding: 0 16px !important;
    height: 44px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  html body main#main .home-v4-popular{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body main#main .home-v4-popular > span{ font-size: 12px !important; }
  html body main#main .home-v4-popular .hero-chip{
    font-size: 12px !important;
    padding: 5px 11px !important;
  }
  /* Hero leaf-visual: smaller, contained, not absolutely overflowing */
  html body main#main .home-v4-visual{
    position: relative !important;
    min-height: 280px !important;
    height: 280px !important;
    width: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }
  html body main#main .home-v4-leaf{
    width: 110% !important;
    right: -18% !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(-7deg) !important;
  }
  html body main#main .home-v4-floating-card{
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 16px !important;
    grid-template-columns: 40px 1fr !important;
    padding: 14px 16px !important;
  }
  html body main#main .home-v4-orbit-one,
  html body main#main .home-v4-orbit-two,
  html body main#main .home-v4-visual-halo{ display: none !important; }
  html body main#main .home-v4-tech{ opacity: .35 !important; }

  /* Families section title */
  html body main#main .families-title{
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  html body main#main .families-lead{
    font-size: 14px !important;
    padding: 0 4px !important;
  }
  html body main#main .families-head{
    text-align: center !important;
    padding: 0 !important;
  }
  /* Family cards — image less tall, content tightened */
  html body main#main .families-section .category-card,
  html body main#main .families-section .cat-card{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body main#main .families-section .cat-banner{
    aspect-ratio: 16 / 10 !important;
  }
  html body main#main .families-section .cat-body{
    padding: 16px !important;
    gap: 10px !important;
  }
  html body main#main .families-section .cat-body h3{
    font-size: 1.08rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  html body main#main .families-section .cat-body p{
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  html body main#main .families-section .taglist{
    gap: 5px !important;
  }
  html body main#main .families-section .taglist .tag{
    font-size: .68rem !important;
    height: 22px !important;
    padding: 0 8px !important;
  }
  html body main#main .families-section .cat-body .meta{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Quick-link photo cards */
  html body main#main .qlp-grid{
    padding: 0 !important;
  }
  html body main#main .qlp-card{
    min-height: 200px !important;
    aspect-ratio: auto !important;
  }
  html body main#main .qlp-title{
    font-size: 1.1rem !important;
  }

  /* Vier pijlers section */
  html body main#main .section.why-v2{
    padding: 48px 0 !important;
  }
  html body main#main .why-v2-grid,
  html body main#main .why-v2-grid-split{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  html body main#main .why-v2-title{
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.1 !important;
  }
  html body main#main .why-v2-pillar{
    padding: 22px 18px 24px !important;
  }
  html body main#main .why-v2-pillar-text{
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  html body main#main .why-v2-watermark{
    font-size: 78px !important;
    top: -4px !important;
    right: 10px !important;
  }
  /* Trust badges → vertical stack on phone (no clipping) */
  html body main#main .why-v2-trust{
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 14px 12px !important;
    gap: 8px !important;
  }
  html body main#main .why-v2-trust-stat{
    font-size: .68rem !important;
    padding: 0 4px !important;
  }
  html body main#main .why-v2-trust-stat strong{
    font-size: 1.1rem !important;
  }
  html body main#main .why-v2-trust-stat:not(:last-child)::after{
    right: -4px !important;
  }
  /* CTA actions row */
  html body main#main .why-v2-actions-bottom{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body main#main .why-v2-cta-primary,
  html body main#main .why-v2-cta-ghost{
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Cookie banner — stay above content but compact
     Force both edges so width auto-fills viewport */
  html body div.cookie,
  html body .cookie#cookieBanner,
  html body div#cookieBanner.cookie{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  html body .cookie .container{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .cookie p,
  html body .cookie span,
  html body .cookie div{
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  /* Page hero (sub-pages) — leaf smaller, content readable */
  html body main#main .page-hero{
    padding: 36px 0 32px !important;
  }
  html body main#main .page-hero h1{
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.05 !important;
  }
  html body main#main .page-hero p{
    font-size: 14.5px !important;
    max-width: 100% !important;
  }
  html body main#main .page-hero::after,
  html body main#main .offerte-hero::after{
    width: 180px !important;
    right: 6px !important;
    opacity: .55 !important;
  }

  /* Footer stacked */
  html body .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  html body .footer-bottom{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ===== TINY PHONE (≤380px) — extra tightening ===== */
@media (max-width: 380px){
  html body main#main .container,
  html body .container{
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }
  html body main#main .home-v4-title{
    font-size: 26px !important;
  }
  html body main#main .families-title,
  html body main#main .why-v2-title{
    font-size: 22px !important;
  }
  html body main#main .home-v4-search button{
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}

/* ===================================================================
   MOBILE FINAL — beats line 5891-5893 minified rules
   NOTE: NO hyphens:auto — Dutch breaks ugly ("wis kabels" / "om vingen")
=================================================================== */
@media (max-width: 640px){
  /* Force families title to wrap & fit */
  html body main#main .families-title,
  html body main#main h2.families-title{
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.18 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    text-wrap: balance !important;
    padding: 0 4px !important;
    max-width: 100% !important;
  }
  html body main#main .families-title br{ display: none !important; }

  /* Why-v2 title same fix */
  html body main#main .why-v2-title,
  html body main#main h2.why-v2-title{
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.12 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    max-width: 100% !important;
  }

  /* Hero title — no awkward br on mobile */
  html body main#main .home-v4-title{
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.06 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }

  /* Floating card — absolutely force below leaf, NOT overlapping */
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body main#main .home-v4-leaf{
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: rotate(-7deg) !important;
    display: block !important;
    height: auto !important;
  }
  html body main#main .home-v4-floating-card,
  html body main#main .home-v4-floating-card-v2{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Anything that uses .container — strict 16px gutter */
  html body .container{
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Body-level safety: clip any straggler */
  html, body{
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
}

/* ===================================================================
   MOBILE NUCLEAR — extreme specificity for tiny screens
   NO hyphens:auto — natural Dutch word wrapping only
=================================================================== */
@media (max-width: 640px){
  html body main#main h2.families-title,
  html body main#main .families-head h2.families-title,
  html body main#main .families-section .families-title{
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  html body main#main h2.families-title br{ display: none !important; }

  html body main#main .families-section .cat-card,
  html body main#main .families-section .category-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Card body text — natural wrap, NO ugly hyphenation */
  html body main#main .families-section .cat-body p,
  html body main#main .families-section .cat-body p.muted,
  html body main#main .families-section .cat-card p,
  html body main#main .cat-card p{
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    max-width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  /* Globally kill auto-hyphenation on mobile */
  html body, html body p, html body h1, html body h2, html body h3, html body h4,
  html body main#main, html body main#main p, html body main#main h1,
  html body main#main h2, html body main#main h3, html body main#main h4,
  html body main#main span, html body main#main li, html body main#main a{
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }
}

@media (max-width: 420px){
  html body main#main h2.families-title{
    font-size: 19px !important;
  }
  html body main#main .why-v2-title{
    font-size: 21px !important;
  }
  html body main#main .home-v4-title{
    font-size: 24px !important;
  }
  html body main#main .families-section .cat-body{
    padding: 14px !important;
  }
  html body main#main .families-section .cat-body h3{
    font-size: 1rem !important;
  }
  html body main#main .families-section .cat-body p{
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ===================================================================
   SHOP PAGE MOBILE — kabelgoten.html overflow fixes
   - brand shrink (was 34px font + 190px min-width → too big)
   - shop-search input proper width
   - shop-toolbar wrap on narrow
   - shop-sort full-width on tiny screens
=================================================================== */
@media (max-width: 980px){
  /* Brand: tighter on tablet/mobile so header items fit */
  html body .site-header .brand{
    min-width: 0 !important;
    font-size: 22px !important;
    gap: 8px !important;
  }
  html body .site-header .brand-mark{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

@media (max-width: 640px){
  /* Even tighter brand for phones */
  html body .site-header .brand{
    font-size: 18px !important;
    gap: 6px !important;
  }
  html body .site-header .brand-mark{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  /* Hide brand wordmark text on tiny screens — leaf logo speaks for itself */
  html body .site-header .brand .brand-word{
    font-size: 16px !important;
  }

  /* Shop hero — proper container gutter + readable text */
  html body main#main .shop-hero{
    padding: 24px 0 20px !important;
  }
  html body main#main .shop-hero h1{
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  html body main#main .shop-hero p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Shop layout — sidebar on top, main below, both full-width */
  html body main#main .shop-section{
    padding: 20px 0 60px !important;
  }
  html body main#main .shop-layout{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body main#main .shop-sidebar{
    position: static !important;
    padding: 14px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body main#main .shop-sidebar .shop-search{
    margin-bottom: 14px !important;
    padding: 0 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body main#main .shop-sidebar .shop-search input{
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    padding: 9px 0 !important;
    font-size: 14px !important;
  }

  /* Shop toolbar — wrap items so they don't push off-screen */
  html body main#main .shop-toolbar{
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  html body main#main .shop-toolbar #resultCount{
    font-size: .9rem !important;
  }
  html body main#main .shop-sort{
    width: 100% !important;
    justify-content: space-between !important;
  }
  html body main#main .shop-sort select{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 220px !important;
    padding: 8px 28px 8px 10px !important;
    font-size: 13.5px !important;
  }

  /* Shop grid → single column */
  html body main#main .shop-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body main#main .pc-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Filter blocks: prevent any inner element from blowing out width */
  html body main#main .filter-block,
  html body main#main .filter-list,
  html body main#main .filter-opt{
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===================================================================
   PAGE-HERO (toepassingen / offerte / contact / etc.) MOBILE
   - tighter padding + ensure leaf doesn't push viewport wider
=================================================================== */
@media (max-width: 640px){
  html body main#main .page-hero,
  html body main#main .offerte-hero{
    padding: 28px 0 24px !important;
    overflow: hidden !important;
  }
  html body main#main .page-hero::after,
  html body main#main .offerte-hero::after{
    width: clamp(150px, 44vw, 230px) !important;
    right: 0 !important;
    opacity: .55 !important;
  }
  html body main#main .page-hero h1,
  html body main#main .offerte-hero h1{
    font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
  }
  html body main#main .page-hero p,
  html body main#main .offerte-hero p{
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }
}

/* ===================================================================
   MOBILE COMPACT — INDEX HERO (round 2026-05-02)
   Goal: hero + search + popular chips + visual fit in <1 phone screen
   so the "Acht productfamilies" section is visible on first scroll.
=================================================================== */
@media (max-width: 640px){
  /* Tighter outer container — use HIGH specificity to override
     existing main#main .hero.hero-home-v4 .home-v4-grid rules */
  html body main#main .hero.hero-home-v4{
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body main#main .hero.hero-home-v4::after{
    /* Kill the soft-fade overlay at hero bottom — wastes space on mobile */
    display: none !important;
  }
  html body .hero-home-v4 .container{
    width: min(100% - 24px, 1180px) !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-grid{
    padding: 14px 0 16px !important;
    gap: 12px !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  html body main#main .home-v4-copy{
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Eyebrow much smaller, less margin */
  html body .home-v4-eyebrow{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin-bottom: 8px !important;
  }
  /* H1 — clean, smaller, fits in 2-3 lines */
  html body .home-v4-title{
    font-size: clamp(26px, 7.4vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    margin: 0 0 10px !important;
  }
  /* Intro — shorter line height + smaller */
  html body .home-v4-intro{
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
  }
  /* Search bar — compact pill, single row, smaller icon + button so
     placeholder "Zoek S115, 55 × 200…" krijgt genoeg ruimte.
     HOGE specificiteit (html body main#main .hero.hero-home-v4 .X)
     zodat we boven `html body main#main .home-v4-search` (regel 11032)
     uitkomen. */
  html body main#main .hero.hero-home-v4 .home-v4-search{
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
    gap: 4px !important;
    border-radius: 22px !important;
    flex-wrap: nowrap !important;
    margin: 0 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-search-icon{
    width: 18px !important;
    height: 18px !important;
    margin-left: 8px !important;
    margin-right: 2px !important;
    flex: 0 0 18px !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-search-icon img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-search input{
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
    border-radius: 0 !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-search input::placeholder{
    font-size: 12.5px !important;
    color: #8da0ad !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-search button{
    width: auto !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    border-radius: 18px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  /* Popular chips — wrap tight, 1 row preferred */
  html body .home-v4-popular{
    margin: 0 0 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    font-size: 12px !important;
  }
  html body .home-v4-popular > span{
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }
  html body .home-v4-popular .hero-chip{
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
  }
  /* Certs row — small */
  html body .home-v4-certs{
    margin-top: 0 !important;
    gap: 14px !important;
  }
  html body .home-v4-cert-logo{
    height: 26px !important;
    max-height: 26px !important;
    width: auto !important;
  }
  /* Visual block — collapsed completely on mobile to save space.
     Leaf + floating card hidden so families section starts higher up.
     Higher specificity (matches existing main#main .hero.hero-home-v4 ...). */
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-leaf,
  html body main#main .hero.hero-home-v4 .home-v4-orbit,
  html body main#main .hero.hero-home-v4 .home-v4-floating-card,
  html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
    display: none !important;
  }
  /* Background gradient — keep but lighter so transition into families is clean */
  html body .home-v4-bg{
    opacity: .75 !important;
  }
  html body .home-v4-tech{
    opacity: .35 !important;
  }

  /* FAMILIES section — start tighter so it appears sooner */
  html body main#main .families-section{
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }
  html body main#main .families-head{
    margin-bottom: 16px !important;
  }
  html body main#main .families-eyebrow{
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 8px !important;
  }
  html body main#main .families-title{
    font-size: clamp(22px, 6.8vw, 28px) !important;
    line-height: 1.12 !important;
    margin: 0 0 8px !important;
  }
  html body main#main .families-lead{
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
  }
}

/* ===================================================================
   MOBILE — KABELGOTEN: search top, collapsible filters, 2-col grid
=================================================================== */
@media (max-width: 640px){
  /* Search bar at the top of the sidebar — prominent, full width */
  html body main#main .shop-sidebar{
    padding: 12px !important;
    border-radius: 12px !important;
  }
  html body main#main .shop-sidebar .shop-search{
    margin-bottom: 0 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1.5px solid #cfe1ea !important;
    height: 48px !important;
    box-shadow: 0 2px 8px rgba(13,42,58,.06) !important;
  }
  html body main#main .shop-sidebar .shop-search .hs-icon{
    color: var(--cyan, #1e8fc4) !important;
    font-size: 18px !important;
  }
  html body main#main .shop-sidebar .shop-search input{
    height: 42px !important;
    font-size: 15px !important;
    padding: 0 4px !important;
  }

  /* Mobile filter toggle wrapper — uses <details class="mobile-filter-collapse">
     Hidden by default until user opens it. On desktop the wrapper expands. */
  html body main#main .mobile-filter-collapse{
    margin-top: 10px !important;
  }
  html body main#main .mobile-filter-collapse > summary{
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #1e8fc4, #11608a) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: .03em !important;
    box-shadow: 0 6px 14px rgba(30,143,196,.25) !important;
    user-select: none !important;
  }
  html body main#main .mobile-filter-collapse > summary::-webkit-details-marker{
    display: none !important;
  }
  html body main#main .mobile-filter-collapse > summary::marker{
    display: none !important;
  }
  html body main#main .mobile-filter-collapse > summary .mfc-caret{
    transition: transform .2s ease !important;
    font-size: 18px !important;
  }
  html body main#main .mobile-filter-collapse[open] > summary .mfc-caret{
    transform: rotate(90deg) !important;
  }
  html body main#main .mobile-filter-collapse > summary .mfc-icon{
    margin-right: 8px !important;
  }
  html body main#main .mobile-filter-collapse .mfc-content{
    padding-top: 12px !important;
  }
  /* Each filter-block more compact on mobile */
  html body main#main .mobile-filter-collapse .filter-block{
    padding: 10px 0 !important;
    border-top: 1px solid #e6eef2 !important;
  }
  html body main#main .mobile-filter-collapse .filter-block:first-of-type{
    border-top: 0 !important;
  }
  html body main#main .mobile-filter-collapse .filter-block summary{
    font-size: 14px !important;
    padding: 6px 0 !important;
  }
  html body main#main .mobile-filter-collapse .filter-list{
    gap: 4px !important;
  }
  html body main#main .mobile-filter-collapse .filter-opt{
    padding: 8px 8px !important;
    font-size: 14px !important;
  }
  html body main#main .mobile-filter-collapse .filter-opt:hover{
    background: #f7fafb !important;
    border-radius: 6px !important;
  }
  html body main#main .mobile-filter-collapse .btn-reset{
    margin-top: 12px !important;
    width: 100% !important;
    padding: 10px !important;
  }

  /* Product grid — 2 columns on mobile (override single-column) */
  html body main#main .shop-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body main#main .pc-card{
    border-radius: 10px !important;
  }
  html body main#main .pc-imgwrap{
    aspect-ratio: 4/3 !important;
  }
  html body main#main .pc-img{
    padding: 4px !important;
  }
  html body main#main .pc-brand{
    height: 18px !important;
    bottom: 6px !important;
    right: 8px !important;
  }
  html body main#main .pc-body{
    padding: 10px 10px 12px !important;
    gap: 4px !important;
  }
  html body main#main .pc-code{
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  html body main#main .pc-title{
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    /* Truncate long titles to 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  html body main#main .pc-cat{
    font-size: 11px !important;
    /* Truncate to 1 line */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body main#main .pc-price{
    font-size: 18px !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    gap: 4px !important;
  }
  html body main#main .pc-unit{
    font-size: 11px !important;
  }
  html body main#main .pc-tax{
    font-size: 9px !important;
    letter-spacing: .04em !important;
  }
  html body main#main .pc-actions{
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body main#main .btn-pc-detail{
    font-size: 12px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body main#main .btn-pc-add{
    width: 30px !important;
    height: 30px !important;
    font-size: 1.1rem !important;
    flex: 0 0 30px !important;
  }

  /* Toolbar — keep tight */
  html body main#main .shop-toolbar{
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  html body main#main .shop-toolbar #resultCount{
    font-size: .82rem !important;
  }
  html body main#main .shop-sort label{
    font-size: 12px !important;
  }
  html body main#main .shop-sort select{
    font-size: 12.5px !important;
    padding: 7px 24px 7px 8px !important;
  }
}

/* Desktop: the mobile-filter-collapse wrapper must look transparent —
   no summary visible, content always shown */
@media (min-width: 641px){
  html body main#main .mobile-filter-collapse > summary{
    display: none !important;
  }
  html body main#main .mobile-filter-collapse > *:not(summary){
    display: block !important;
  }
  html body main#main .mobile-filter-collapse .mfc-content{
    display: block !important;
  }
}

/* ===================================================================
   MOBILE COMPACT — OFFERTE PAGE
=================================================================== */
@media (max-width: 640px){
  /* Hero — much tighter */
  html body main#main .offerte-hero{
    padding: 18px 0 14px !important;
  }
  html body main#main .offerte-hero h1{
    font-size: clamp(24px, 7vw, 30px) !important;
    margin: 4px 0 6px !important;
    line-height: 1.1 !important;
  }
  html body main#main .offerte-hero p{
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
  html body main#main .offerte-hero .page-hero-eyebrow{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    padding: 3px 10px !important;
  }

  /* Layout — pull form up close to hero */
  html body main#main .offerte-layout{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: -16px !important;
  }
  /* Form card — smaller padding everywhere */
  html body main#main .offerte-form-card,
  html body main#main .offerte-cart-card{
    padding: 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(13,42,58,.08) !important;
  }
  html body main#main .offerte-section{
    margin-bottom: 18px !important;
  }
  html body main#main .offerte-section-title{
    font-size: 11px !important;
    letter-spacing: .14em !important;
    margin: 0 0 10px !important;
    gap: 8px !important;
  }
  html body main#main .offerte-section-title:before{
    flex: 0 0 18px !important;
    height: 2px !important;
  }
  html body main#main .field-row,
  html body main#main .field-row-3{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body main#main .field{
    gap: 4px !important;
  }
  html body main#main .field label{
    font-size: 13px !important;
  }
  html body main#main .field input,
  html body main#main .field textarea,
  html body main#main .field select{
    padding: 9px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  html body main#main .field textarea{
    min-height: 92px !important;
  }
  html body main#main .help{
    font-size: 12px !important;
    margin: 4px 0 0 !important;
  }
  html body main#main .consent{
    font-size: 12.5px !important;
    gap: 8px !important;
  }
  html body main#main .offerte-actions{
    margin-top: 10px !important;
    gap: 8px !important;
  }
  html body main#main .offerte-actions .btn{
    padding: 11px 18px !important;
    font-size: 14px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Reg-toggle card more compact */
  html body main#main .reg-toggle-card{
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  html body main#main .reg-toggle-eyebrow{
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 4px !important;
  }
  html body main#main .reg-toggle-title{
    font-size: 14px !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
  }
  html body main#main .reg-toggle-text-help{
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
  html body main#main .reg-toggle-btn{
    padding: 10px 14px !important;
    font-size: 13px !important;
    width: 100% !important;
  }
  html body main#main .reg-subhead{
    font-size: 13px !important;
    margin: 14px 0 8px !important;
  }

  /* Cart card slim */
  html body main#main .offerte-cart-card h3{
    font-size: 18px !important;
    margin: 0 0 4px !important;
  }
  html body main#main .offerte-cart-empty{
    padding: 14px !important;
    font-size: 13px !important;
  }
  html body main#main .offerte-aside-bottom{
    margin-top: 14px !important;
    padding-top: 14px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }
}

/* ===================================================================
   FINAL HEADER OVERRIDE — solid white, no glass/blur, met echte rand
   en zichtbare shadow zodat hij niet "doorzichtig" voelt op homepage.
   Hoogste specificiteit + !important wint van alles wat eerder kwam.
=================================================================== */
html body header.site-header,
html body header.site-header.is-scrolled{
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e3edf2 !important;
  box-shadow: 0 4px 18px rgba(13,42,58,.06) !important;
}
html body header.site-header::before,
html body header.site-header::after{
  /* prevent stray gradient/overlay pseudo's from making it look glass-y */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===================================================================
   CONTACT — "Vraag stellen" formulier — premium look
=================================================================== */
.form-card{
  margin-top: 28px;
  padding: 36px 36px 32px !important;
  border-radius: 22px !important;
  border: 1px solid #e3edf2 !important;
  background:
    radial-gradient(1200px 280px at 50% -10%, rgba(33,182,90,.08), transparent 60%),
    #ffffff !important;
  box-shadow: 0 18px 38px rgba(13,42,58,.07) !important;
}
.form-eyebrow{
  color: #16a34a !important;
  font-size: .72rem !important;
  margin-bottom: 10px !important;
  display: block;
}
.form-title{
  font-size: clamp(1.6rem, 2.4vw, 2.05rem) !important;
  line-height: 1.15;
  margin: 0 0 10px !important;
  color: #062333;
  letter-spacing: -.02em;
}
.form-title .hl{ color: #16a34a; }
.form-lead{
  color: #4f6573;
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 60ch;
}
.contact-form{
  display: grid;
  gap: 18px;
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form-field label{
  font-size: 13px;
  font-weight: 800;
  color: #062333;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-field .req{
  color: #16a34a;
  font-weight: 900;
}
.contact-form .input,
.contact-form input,
.contact-form textarea{
  width: 100% !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  border: 1.5px solid #dce8ed !important;
  background: #fafcfd !important;
  font-size: 15px !important;
  color: #062333 !important;
  font-family: inherit !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.contact-form textarea{
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.contact-form .input:hover,
.contact-form input:hover,
.contact-form textarea:hover{
  border-color: #c4d4dc !important;
  background: #ffffff !important;
}
.contact-form .input:focus,
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none !important;
  border-color: #16a34a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.14) !important;
}
.contact-form .input::placeholder,
.contact-form textarea::placeholder{
  color: #94a8b2;
}
.form-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid #eef3f6;
}
.form-submit{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 26px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  background: linear-gradient(135deg, #21b65a 0%, #0f823a 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 26px rgba(22,163,74,.30) !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.form-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 32px rgba(22,163,74,.36) !important;
}
.form-submit:active{
  transform: translateY(0);
  filter: brightness(.97);
}
.form-submit svg{
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.form-submit:hover svg{
  transform: translateX(3px);
}
.form-note{
  color: #6b7c87;
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}
.form-note a{
  color: #11608a;
  font-weight: 700;
  text-decoration: none;
}
.form-note a:hover{
  color: #0d4a6b;
  text-decoration: underline;
}
@media (max-width: 640px){
  .form-card{ padding: 26px 22px !important; border-radius: 18px !important; }
  .form-row{ grid-template-columns: 1fr; gap: 14px; }
  .form-footer{ flex-direction: column; align-items: stretch; gap: 14px; }
  .form-submit{ justify-content: center; width: 100%; }
  .form-note{ text-align: center; }
}

/* ===================================================================
   CONTACT — Person cards (Berend & Michael) with portrait photos
=================================================================== */
.person-card{
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 22px;
  align-items: stretch;
  padding: 22px !important;
  border-radius: 20px !important;
  border: 1px solid #e3edf2 !important;
  background: #ffffff !important;
  box-shadow: 0 14px 32px rgba(13,42,58,.06) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.person-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(13,42,58,.10) !important;
}
.person-photo{
  width: 116px;
  height: 116px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #effaf3, #d3eedc);
  border: 1px solid #c9e6d4;
  position: relative;
  flex-shrink: 0;
}
.person-photo::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  pointer-events: none;
}
.person-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.person-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.person-body .eyebrow{
  color: #16a34a;
  margin: 2px 0 4px;
  font-size: .72rem;
}
.person-name{
  font-size: 1.55rem !important;
  line-height: 1.15;
  margin: 0 0 6px !important;
  color: #062333;
  letter-spacing: -.015em;
}
.person-row{
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.person-row strong{
  color: #062333;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.person-row a{
  color: #11608a;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  line-height: 1.4;
  word-break: break-word;
}
.person-row a + a{
  font-size: 14px;
  font-weight: 600;
  color: #4f6573;
}
.person-row a:hover{
  color: #0d4a6b;
  text-decoration: underline;
}
@media (max-width: 640px){
  .person-card{
    grid-template-columns: 84px 1fr;
    gap: 16px;
    padding: 18px !important;
  }
  .person-photo{
    width: 84px;
    height: 84px;
    border-radius: 14px;
  }
  .person-name{ font-size: 1.3rem !important; }
}

/* ===================================================================
   CONTACT — Hoofdkantoor / Headquarters section
   Premium 2-column layout: address card + embedded Google Maps.
=================================================================== */
.hq-section-wrap{
  background: linear-gradient(180deg, #f5fbf8 0%, #ffffff 60%);
  padding: 64px 0 88px;
}
.hq-grid{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: stretch;
}
.hq-info{
  background: #ffffff;
  border: 1px solid #e3edf2;
  border-radius: 22px;
  padding: 36px 34px;
  box-shadow: 0 18px 38px rgba(13,42,58,.06);
  display: flex;
  flex-direction: column;
}
.hq-info .eyebrow{
  color: #16a34a;
  margin-bottom: 14px;
}
.hq-title{
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  line-height: 1.15;
  margin: 0 0 14px;
  color: #062333;
  letter-spacing: -.02em;
}
.hq-title .hl{
  color: #16a34a;
}
.hq-lead{
  color: #4f6573;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 52ch;
}
.hq-list{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.hq-list li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  background: #f7fbf9;
  border: 1px solid #e3edf2;
  border-radius: 14px;
}
.hq-list li:hover{
  background: #effaf3;
  border-color: #c9e6d4;
  transition: .2s;
}
.hq-ic{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #21b65a 0%, #0f823a 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(22,163,74,.28);
}
.hq-ic svg{
  width: 22px;
  height: 22px;
}
.hq-list strong{
  display: block;
  color: #062333;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 2px;
}
.hq-list span,
.hq-list a{
  display: block;
  color: #4f6573;
  font-size: 14.5px;
  line-height: 1.5;
}
.hq-list a{
  color: #11608a;
  font-weight: 700;
  text-decoration: none;
}
.hq-list a:hover{
  color: #0d4a6b;
  text-decoration: underline;
}
.hq-route{
  align-self: flex-start;
  margin-top: auto;
}
.hq-map{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e3edf2;
  box-shadow: 0 18px 38px rgba(13,42,58,.10);
  min-height: 460px;
}
.hq-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hq-map-caption{
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(6,35,51,.06);
  box-shadow: 0 6px 18px rgba(13,42,58,.12);
  display: grid;
  gap: 2px;
  max-width: calc(100% - 32px);
  z-index: 2;
}
.hq-map-caption strong{
  color: #062333;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.hq-map-caption span{
  color: #4f6573;
  font-size: 12.5px;
}

@media (max-width: 980px){
  .hq-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hq-info{ padding: 28px 22px; }
  .hq-map{ min-height: 360px; }
}
@media (max-width: 640px){
  .hq-section-wrap{ padding: 40px 0 56px; }
  .hq-info{ padding: 24px 18px; border-radius: 18px; }
  .hq-list li{ padding: 10px 12px; }
  .hq-map{ min-height: 300px; border-radius: 18px; }
  .hq-route{ width: 100%; text-align: center; }
}

/* ===================================================================
   HERO → DIAGONAL "KNIFE CUT" → FAMILIES
   Style inspired by silteckabelgoten.nl — the hero ends with a strong
   diagonal slope. The families section overlaps upward so the
   "ONS ASSORTIMENT" title sits PROMINENTLY in the angled white wedge.
   Bonus: a subtle green accent stripe traces the diagonal edge.
=================================================================== */

/* Hero — overflow visible so the SVG tilt divider isn't clipped.
   z-index HIGHER than families so the divider (inside hero's stacking
   context) paints OVER the families-section background.
   Also: shrink the visual container so the leaf doesn't dominate the page. */
html body main#main .hero.hero-home-v4{
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
}
html body main#main .hero.hero-home-v4::after{
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
}

/* LEAF DOWNSIZED — smaller visual container, leaf anchored bottom-right
   so it sits LOWER in the column instead of dominating from the top */
html body main#main .hero.hero-home-v4 .home-v4-visual{
  min-height: clamp(280px, 36vh, 380px) !important;
  align-self: end !important;
}
html body main#main .hero.hero-home-v4 .home-v4-leaf{
  object-position: center bottom !important;
  max-width: clamp(360px, 42vw, 520px) !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 0 0 auto !important;
  inset: auto 0 0 auto !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  left: auto !important;
}

/* THE TILT DIVIDER — Elementor-style SVG shape (same as silteckabelgoten.nl).
   Path "M0,6V0h1000v100L0,6z" creates a quadrilateral filled white that
   covers the hero's bottom-RIGHT triangle, leaving the bottom-LEFT
   triangle of hero visible. Result: a strong diagonal slope. */
html body main#main .hero-tilt-divider{
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  pointer-events: none !important;
  line-height: 0 !important;
  z-index: 6 !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body main#main .hero-tilt-divider svg{
  display: block !important;
  width: 100% !important;
  height: clamp(80px, 9vw, 140px) !important;
}
html body main#main .hero-tilt-divider svg path{
  fill: #ffffff !important;
}

/* Families — NO stacking context (no z-index) so the eyebrow inside can
   promote ITSELF to a higher z-index than the divider and float ON the cut */
html body main#main .families-section.diagonal-section,
html body main#main .families-section{
  background:
    radial-gradient(800px 280px at 50% -8%, rgba(22, 163, 74, .07), transparent 65%),
    #ffffff !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  z-index: auto !important;
}
html body main#main .families-section::before{ display: none !important; }
html body main#main .families-divider{ display: none !important; }

/* Hero content above the divider */
html body main#main .hero.hero-home-v4 .home-v4-grid,
html body main#main .hero.hero-home-v4 .home-v4-copy,
html body main#main .hero.hero-home-v4 .home-v4-visual{
  position: relative !important;
  z-index: 2 !important;
}

/* Families head — wrapper, NO stacking context here so the eyebrow can
   escape and float above the divider in the global root context */
html body main#main .families-section .families-head{
  position: relative !important;
  z-index: auto !important;
  text-align: center !important;
  padding-top: clamp(36px, 4.5vw, 70px) !important;
  margin: 0 auto clamp(36px, 4vw, 56px) !important;
}
/* Eyebrow container — positioned absolute at the TOP of families,
   pulled UP into the diagonal cut zone. High z-index escapes everything. */
html body main#main .families-section .families-eyebrow-wrap{
  position: absolute !important;
  top: clamp(-65px, -5.5vw, -42px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  pointer-events: none !important;
}
/* Eyebrow pill — green bg with white border so it stands out on
   BOTH the green hero AND the white SVG wedge */
html body main#main .families-section .families-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #16a34a 0%, #0f823a 100%) !important;
  border: 3px solid #ffffff !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  box-shadow: 0 20px 44px rgba(22,163,74,.32), 0 6px 14px rgba(13,42,58,.10) !important;
  position: relative !important;
  z-index: 100 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
html body main#main .families-section .families-eyebrow .families-eyebrow-line{
  display: none !important;
}
html body main#main .families-section .families-title{
  margin-top: 18px !important;
  letter-spacing: -0.02em !important;
}

/* Tablet: still chunky divider */
@media (max-width: 980px){
  html body main#main .hero-tilt-divider svg{
    height: clamp(70px, 8vw, 110px) !important;
  }
}

/* Mobile: keep the divider visible — not too shallow */
@media (max-width: 600px){
  html body main#main .hero-tilt-divider svg{
    height: 65px !important;
  }
}

/* =====================================================================
   ⬇️ NEW TRANSITION (replaces SVG diagonal)
   "ONS ASSORTIMENT" GREEN BANNER BAND
   A bold full-width green band that sits between hero and families.
   The band IS the section break + the eyebrow at once.
   ===================================================================== */

/* Kill the old SVG divider entirely + ALL old eyebrow renderings inside families
   (the green BAND above is now the eyebrow) */
html body main#main .hero-tilt-divider{ display: none !important; }
html body main#main .families-section .families-eyebrow-wrap{ display: none !important; }
html body main#main .families-section .families-head .families-eyebrow{ display: none !important; }

/* Hero — back to overflow:hidden, no positioning hacks needed */
html body main#main .hero.hero-home-v4{
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* The BAND — full-width, dark green, with subtle pattern + bold typography */
html body main#main .ons-assortiment-band{
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(28px, 3.6vw, 56px) 0 !important;
  background:
    /* Subtle radial highlight in the middle */
    radial-gradient(ellipse 900px 200px at 50% 50%, rgba(255,255,255,.10), transparent 65%),
    /* Tiny dotted brand pattern overlay */
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.08) 1px, transparent 1.5px),
    /* Base green gradient */
    linear-gradient(180deg, #11883f 0%, #0f7a37 50%, #0d6c30 100%) !important;
  background-size:
    auto auto,
    16px 16px,
    auto auto !important;
  box-shadow:
    /* Top inner highlight */
    inset 0 1px 0 rgba(255,255,255,.18),
    /* Bottom inner shadow */
    inset 0 -1px 0 rgba(0,0,0,.12),
    /* Drop shadow under the band */
    0 24px 50px -12px rgba(13,42,58,.18),
    0 8px 16px -6px rgba(22,163,74,.18) !important;
  z-index: 3 !important;
  isolation: isolate !important;
}

/* Decorative top + bottom hairlines on the band — gives it a "stamped" feel */
html body main#main .ons-assortiment-band::before{
  content: '' !important;
  position: absolute !important;
  top: 8px !important; left: 0; right: 0;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 30%, rgba(255,255,255,.32) 70%, transparent 100%) !important;
  pointer-events: none !important;
}
html body main#main .ons-assortiment-band::after{
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important; left: 0; right: 0;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent 100%) !important;
  pointer-events: none !important;
}

/* Band content — flex centered with horizontal rule decorations */
html body main#main .ons-assortiment-band-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
  width: min(1480px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative !important;
}

/* The big serif "Ons assortiment" text — the actual eyebrow */
html body main#main .ons-assortiment-band-text{
  color: #ffffff !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  white-space: nowrap !important;
}

/* Small icon flanking the text (a hexagonal cube — fits the cable-tray theme) */
html body main#main .ons-assortiment-band-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(22px, 2.4vw, 32px) !important;
  height: clamp(22px, 2.4vw, 32px) !important;
  flex: 0 0 auto !important;
}
html body main#main .ons-assortiment-band-icon svg{
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)) !important;
}

/* Horizontal rule decorations on the outer edges */
html body main#main .ons-assortiment-band-rule{
  flex: 1 1 auto !important;
  height: 1px !important;
  max-width: clamp(80px, 14vw, 240px) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
}

/* Tablet: tighter band */
@media (max-width: 980px){
  html body main#main .ons-assortiment-band{
    padding: clamp(22px, 3vw, 36px) 0 !important;
  }
  html body main#main .ons-assortiment-band-rule{
    max-width: clamp(60px, 10vw, 120px) !important;
  }
}

/* Mobile: even tighter, hide the rules to save space */
@media (max-width: 600px){
  html body main#main .ons-assortiment-band{
    padding: 18px 0 !important;
  }
  html body main#main .ons-assortiment-band-inner{
    gap: 10px !important;
    padding: 0 16px !important;
  }
  html body main#main .ons-assortiment-band-text{
    font-size: 1rem !important;
    letter-spacing: 0.14em !important;
  }
  html body main#main .ons-assortiment-band-icon{
    width: 18px !important;
    height: 18px !important;
  }
  html body main#main .ons-assortiment-band-rule{
    display: none !important;
  }
}

/* Families section — clean white, no padding-top hacks needed (band handles transition) */
html body main#main .families-section.diagonal-section,
html body main#main .families-section{
  background: #ffffff !important;
  margin-top: 0 !important;
  padding-top: clamp(48px, 5vw, 80px) !important;
  position: relative !important;
  z-index: 1 !important;
}
html body main#main .families-section .families-head{
  padding-top: 0 !important;
  margin: 0 auto clamp(36px, 4vw, 56px) !important;
}

/* =====================================================================
   PERSONAL QUOTES on team-member cards (index.html team section)
   + person-card cards (contact.html)
   Magazine-style pull-quote with green accent bar + italic serif
   ===================================================================== */

/* INDEX HOMEPAGE — quote inside .team-member articles */
html body main#main .team-member .team-quote{
  position: relative !important;
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(18px, 2vw, 26px) !important;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px) clamp(28px, 3vw, 38px) !important;
  background: linear-gradient(135deg, rgba(22,163,74,.05) 0%, rgba(22,163,74,.02) 100%) !important;
  border-left: 3px solid #16a34a !important;
  border-radius: 0 12px 12px 0 !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: clamp(0.92rem, 0.96vw, 1rem) !important;
  line-height: 1.6 !important;
  color: #2a3742 !important;
  quotes: none !important;
}
html body main#main .team-member .team-quote::before,
html body main#main .team-member .team-quote::after{ content: none !important; }
html body main#main .team-member .team-quote-mark{
  position: absolute !important;
  top: 2px !important;
  left: clamp(8px, 1vw, 14px) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.4rem, 3.6vw, 3rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: rgba(22,163,74,.42) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* CONTACT PAGE — quote inside .person-card */
html body main#main .person-card .person-quote{
  position: relative !important;
  margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px) clamp(28px, 3vw, 38px) !important;
  background: linear-gradient(135deg, rgba(22,163,74,.05) 0%, rgba(22,163,74,.02) 100%) !important;
  border-left: 3px solid #16a34a !important;
  border-radius: 0 12px 12px 0 !important;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: clamp(0.92rem, 0.96vw, 1rem) !important;
  line-height: 1.6 !important;
  color: #2a3742 !important;
  quotes: none !important;
}
html body main#main .person-card .person-quote::before,
html body main#main .person-card .person-quote::after{ content: none !important; }
html body main#main .person-card .person-quote-mark{
  position: absolute !important;
  top: 2px !important;
  left: clamp(8px, 1vw, 14px) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.4rem, 3.6vw, 3rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: rgba(22,163,74,.42) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Mobile: a touch tighter on padding/font */
@media (max-width: 600px){
  html body main#main .team-member .team-quote,
  html body main#main .person-card .person-quote{
    padding: 14px 16px 14px 26px !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  html body main#main .team-member .team-quote-mark,
  html body main#main .person-card .person-quote-mark{
    font-size: 2.2rem !important;
    left: 8px !important;
  }
}

/* =====================================================================
   HERO LEAF — POSITIONED NEXT TO SEARCH BAR
   The leaf sits in the right column, vertically aligned with the search bar
   in the left column. Uses absolute positioning relative to the HERO so the
   leaf's vertical center matches the search bar's vertical center.
   Across viewports, the search bar lands at ~51% of the hero's height, so
   the leaf is positioned at the same percentage with translateY(-50%).
   ===================================================================== */
html body main#main .hero.hero-home-v4{
  min-height: 100vh !important;
  height: auto !important;
  position: relative !important;        /* containing block for the leaf */
}
html body main#main .hero.hero-home-v4 .home-v4-grid{
  align-items: stretch !important;
  padding-top: 80px !important;
  padding-bottom: 60px !important;
  min-height: calc(100vh - 96px) !important;
}
html body main#main .hero.hero-home-v4 .home-v4-copy{
  align-self: center !important;
}
/* IMPORTANT: visual is position:static AND transform:none so the leaf
   positions vs the HERO (transform creates containing block even on static). */
html body main#main .hero.hero-home-v4 .home-v4-visual{
  position: static !important;
  min-height: calc(100vh - 200px) !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  aspect-ratio: auto !important;
}
/* BLAD: vertically aligned with the search bar.
   Containing block is .home-v4-grid (position:relative). Search center sits
   at ~55% of grid height across viewports. Leaf uses top:55% + translateY(-50%)
   so its vertical center matches the search bar. */
html body main#main .hero.hero-home-v4 .home-v4-leaf{
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  max-width: min(680px, 52vw) !important;
  max-height: 580px !important;
  right: clamp(80px, 8vw, 180px) !important;
  top: 55% !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  inset: 55% clamp(80px, 8vw, 180px) auto auto !important;
  object-fit: contain !important;
  object-position: right center !important;
  transform: translateY(-50%) rotate(-4deg) !important;
  transform-origin: 50% 50% !important;
  z-index: 4 !important;
  filter:
    drop-shadow(0 30px 50px rgba(13, 60, 30, .22))
    drop-shadow(0 12px 22px rgba(22, 163, 74, .18)) !important;
  animation: home-v4-leaf-search-float 14s ease-in-out infinite !important;
}
@keyframes home-v4-leaf-search-float{
  0%, 100% { transform: translateY(-50%) rotate(-4deg); }
  50%      { transform: translateY(calc(-50% - 8px)) rotate(-4deg); }
}
/* Floating card — sits ON TOP of the leaf, anchored to the lower-right.
   Positioned so it clearly overlaps the leaf body (not just the tip),
   creating a polished layered composition. */
html body main#main .hero.hero-home-v4 .home-v4-floating-card,
html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
  position: absolute !important;
  right: clamp(30px, 3vw, 70px) !important;
  bottom: clamp(140px, 22vh, 280px) !important;
  top: auto !important;
  left: auto !important;
  inset: auto clamp(30px, 3vw, 70px) clamp(140px, 22vh, 280px) auto !important;
  z-index: 8 !important;
}
@keyframes home-v4-leaf-bottom-float{
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-8px); }
}
@keyframes home-v4-leaf-float-sm{
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-8px); }
}

/* Tablet: pull the leaf in slightly */
@media (max-width: 1280px){
  html body main#main .hero.hero-home-v4 .home-v4-leaf{
    max-width: clamp(420px, 50vw, 540px) !important;
    max-height: 440px !important;
    right: clamp(20px, 3vw, 60px) !important;
  }
}
/* Stacked layout: leaf goes BELOW copy, contained nicely */
@media (max-width: 1040px){
  html body main#main .hero.hero-home-v4{
    min-height: auto !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-grid{
    min-height: auto !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    position: relative !important;
    min-height: clamp(360px, 56vw, 480px) !important;
    align-self: stretch !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-leaf{
    position: absolute !important;
    max-width: min(640px, 92vw) !important;
    max-height: 520px !important;
    right: -2vw !important;
    top: 50% !important;
    bottom: auto !important;
    inset: 50% -2vw auto auto !important;
    transform: translateY(-50%) rotate(-4deg) !important;
  }
  @keyframes home-v4-leaf-search-float{
    0%, 100% { transform: translateY(-50%) rotate(-4deg); }
    50%      { transform: translateY(calc(-50% - 6px)) rotate(-4deg); }
  }
}
@media (max-width: 600px){
  html body main#main .hero.hero-home-v4 .home-v4-visual{
    min-height: clamp(260px, 70vw, 360px) !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-leaf{
    max-width: 110vw !important;
    max-height: 360px !important;
    right: -8vw !important;
    transform: translateY(-50%) rotate(-3deg) !important;
    animation: none !important;
  }
}

/* =====================================================================
   FLOATING CARD — POLISHED "Al 30 jaar ervaring"
   Larger, with refined typography, bigger icon, soft gradient backing,
   and a green accent strip on the left. Sits clearly on top of the leaf.
   ===================================================================== */
html body main#main .hero.hero-home-v4 .home-v4-floating-card,
html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  grid-template-areas:
    "icon  title"
    "list  list" !important;
  align-items: center !important;
  gap: 4px 16px !important;
  position: absolute !important;
  right: clamp(30px, 3vw, 70px) !important;
  bottom: clamp(140px, 22vh, 280px) !important;
  left: auto !important;
  top: auto !important;
  inset: auto clamp(30px, 3vw, 70px) clamp(140px, 22vh, 280px) auto !important;
  width: clamp(300px, 26vw, 360px) !important;
  padding: 22px 24px 22px 26px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%) !important;
  border: 1px solid rgba(22, 163, 74, .10) !important;
  border-radius: 22px !important;
  box-shadow:
    0 30px 70px -10px rgba(6, 35, 51, .20),
    0 12px 28px -8px rgba(22, 163, 74, .14),
    0 2px 6px rgba(6, 35, 51, .06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 4px 0 0 #16a34a !important;
  z-index: 8 !important;
  pointer-events: auto !important;
  animation: home-v4-card-float 9s ease-in-out infinite !important;
  transform: none !important;
  backdrop-filter: blur(2px) !important;
}
@keyframes home-v4-card-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

html body main#main .hero.hero-home-v4 .home-v4-floating-card .home-v4-card-icon{
  grid-area: icon !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ecf6e7 0%, #d8edd1 100%) !important;
  color: #11813b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 10px rgba(22, 163, 74, .15) !important;
}
html body main#main .hero.hero-home-v4 .home-v4-floating-card .home-v4-card-icon svg{
  width: 24px !important;
  height: 24px !important;
}

html body main#main .hero.hero-home-v4 .home-v4-floating-card > div{
  grid-area: title !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
html body main#main .hero.hero-home-v4 .home-v4-floating-card strong{
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #062333 !important;
  letter-spacing: -0.01em !important;
}
html body main#main .hero.hero-home-v4 .home-v4-floating-card span{
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #4a5965 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
}

html body main#main .hero.hero-home-v4 .home-v4-floating-card ul{
  grid-area: list !important;
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  display: grid !important;
  gap: 8px !important;
  border-top: 1px solid #eef2f4 !important;
}
html body main#main .hero.hero-home-v4 .home-v4-floating-card li{
  position: relative !important;
  padding-left: 26px !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a2a36 !important;
  line-height: 1.35 !important;
}
html body main#main .hero.hero-home-v4 .home-v4-floating-card li::before{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.4 6.7 11 12 5.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
    linear-gradient(135deg, #16a34a 0%, #11813b 100%) !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, .25) !important;
}

/* Tablet: smaller card, tucked tighter */
@media (max-width: 1280px){
  html body main#main .hero.hero-home-v4 .home-v4-floating-card,
  html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
    width: clamp(280px, 30vw, 320px) !important;
    right: 16px !important;
    bottom: 24px !important;
    padding: 18px 20px !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-floating-card strong{
    font-size: 15px !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-floating-card li{
    font-size: 12.5px !important;
  }
}
/* Stacked: card spans wider below */
@media (max-width: 1040px){
  html body main#main .hero.hero-home-v4 .home-v4-floating-card,
  html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
    right: 16px !important;
    bottom: 16px !important;
    width: clamp(260px, 80%, 340px) !important;
  }
}
@media (max-width: 720px){
  html body main#main .hero.hero-home-v4 .home-v4-floating-card,
  html body main#main .hero.hero-home-v4 .home-v4-floating-card-v2{
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    bottom: 12px !important;
    padding: 16px 18px !important;
    animation: none !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-floating-card strong{
    font-size: 15px !important;
  }
  html body main#main .hero.hero-home-v4 .home-v4-floating-card span{
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   OVER-SILTEC PAGE  ·  v20  (over-siltec.html)
   ════════════════════════════════════════════════════════════════ */

/* ---------- shared eyebrow / section heads ---------- */
.os-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;
  font-weight:800;color:var(--brand-500);margin-bottom:14px;
}
.os-eyebrow-light{color:#9fc8d8}
.os-section-head{max-width:760px;margin-bottom:38px}
.os-section-head-center{margin-left:auto;margin-right:auto;text-align:center}
.os-section-head h2{
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 14px;color:var(--brand)
}
.os-section-head p{color:var(--muted);font-size:1.05rem;margin:0;max-width:680px}
.os-section-head-center p{margin-left:auto;margin-right:auto}

/* ---------- HERO ---------- */
.os-hero{
  position:relative;overflow:hidden;color:#fff;
  min-height:min(640px,82vh);
  display:flex;align-items:center;
  padding:120px 0 110px;
}
.os-hero-bg{position:absolute;inset:0;z-index:0}
.os-hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  filter:saturate(.9) contrast(1.05);
}
.os-hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(0,160,198,.22), transparent 55%),
    linear-gradient(120deg, rgba(8,28,42,.92) 0%, rgba(8,28,42,.78) 45%, rgba(8,28,42,.55) 100%);
}
.os-hero-grain{
  position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.os-hero-inner{position:relative;z-index:2;max-width:920px}
.os-hero-inner .breadcrumbs{color:#b9d0da;margin-bottom:22px}
.os-hero-inner .breadcrumbs a{color:#fff}
.os-hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:99px;padding:8px 14px;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#e7f4f9;backdrop-filter:blur(8px);margin-bottom:22px;
}
.os-hero-dot{
  width:8px;height:8px;border-radius:99px;
  background:#5fe6a4;box-shadow:0 0 0 3px rgba(95,230,164,.22);
  animation:os-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes os-dot-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(95,230,164,.22)}
  50%{box-shadow:0 0 0 7px rgba(95,230,164,.05)}
}
.os-hero h1{
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.06;letter-spacing:-.025em;color:#fff;
  margin:0 0 22px;font-weight:900;
}
.os-hero h1 .hl{
  background:linear-gradient(120deg,#5fe6a4 0%, #00cfff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.os-hero-lede{
  font-size:clamp(1.02rem,1.2vw,1.15rem);
  color:#dceaf0;max-width:700px;line-height:1.6;margin:0 0 30px;
}
.os-hero-pillars{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 32px;
}
.os-pillar{
  display:inline-flex;align-items:baseline;gap:8px;
  font-weight:850;letter-spacing:-.01em;color:#fff;
}
.os-pillar-num{
  font-size:.72rem;color:#7ec3d4;letter-spacing:.14em;font-weight:700;
}
.os-pillar-text{font-size:1.05rem}
.os-pillar-sep{color:rgba(255,255,255,.3);font-weight:900}
.os-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn-ghost-light{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  color:#fff;backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff;
}
.os-hero-scroll{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:24px;height:38px;border-radius:99px;
  border:1.5px solid rgba(255,255,255,.32);z-index:2;
}
.os-hero-scroll span{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:3px;height:8px;border-radius:2px;background:#fff;opacity:.85;
  animation:os-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes os-scroll-dot{
  0%{transform:translate(-50%,0);opacity:.85}
  60%{transform:translate(-50%,12px);opacity:0}
  100%{transform:translate(-50%,0);opacity:0}
}

/* ---------- STAT STRIP ---------- */
.os-stats{
  background:#fff;border-bottom:1px solid var(--line);
  padding:34px 0;
}
.os-stats-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.os-stat{
  display:flex;flex-direction:column;gap:4px;
  padding:6px 0;border-left:3px solid var(--accent);padding-left:18px;
}
.os-stat strong{
  font-size:clamp(1.2rem,1.5vw,1.55rem);
  color:var(--brand);letter-spacing:-.01em;font-weight:900;
}
.os-stat span{color:var(--muted);font-weight:700;font-size:.92rem}
@media (max-width:880px){
  .os-stats-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .os-stats-row{grid-template-columns:1fr}
}

/* ---------- STORY ---------- */
.os-story{padding:90px 0;background:var(--steel-050)}
.os-story-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center;
}
.os-story-media{
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 60px rgba(11,58,78,.16),0 8px 18px rgba(11,58,78,.08);
  aspect-ratio:5/4;background:#0b3a4e;
}
.os-story-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .8s ease;
}
.os-story-media:hover img{transform:scale(1.08)}
.os-story-badge{
  position:absolute;left:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:14px;
  background:#fff;border-radius:18px;padding:14px 18px 14px 14px;
  box-shadow:0 18px 40px rgba(11,58,78,.22);
}
.os-story-badge-num{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  color:#fff;display:grid;place-items:center;
  font-weight:900;font-size:1.05rem;letter-spacing:-.02em;
}
.os-story-badge-text strong{display:block;color:var(--brand);font-size:.95rem}
.os-story-badge-text small{display:block;color:var(--muted);font-weight:700;font-size:.8rem;margin-top:1px}
.os-story-text h2{
  font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 18px;color:var(--brand);
}
.os-lede{font-size:1.08rem;color:var(--ink-2);line-height:1.65;margin:0 0 16px}
.os-lede em{color:var(--brand-500);font-style:normal;font-weight:700}
.os-story-text p{color:var(--muted);line-height:1.7;margin:0 0 16px}
.os-quote{
  margin-top:22px;padding:20px 22px;border-radius:18px;
  background:#fff;border-left:4px solid var(--accent);
  font-size:1rem;color:var(--ink-2);font-style:italic;line-height:1.55;
  box-shadow:0 8px 22px rgba(11,58,78,.06);
}
.os-quote cite{
  display:block;margin-top:10px;font-style:normal;font-weight:800;
  font-size:.85rem;color:var(--muted);letter-spacing:.02em;
}

/* ---------- VALUES ---------- */
.os-values{padding:90px 0;background:#fff}
.os-values-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
}
.os-value-card{
  position:relative;background:#fff;
  border:1px solid var(--line);border-radius:22px;
  padding:34px 30px 28px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.os-value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(11,58,78,.12);
  border-color:rgba(0,160,198,.35);
}
.os-value-num{
  position:absolute;top:22px;right:26px;
  font-size:2.4rem;font-weight:900;color:rgba(11,58,78,.07);
  letter-spacing:-.04em;line-height:1;
}
.os-value-ic{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg, rgba(0,160,198,.14), rgba(0,160,198,.04));
  color:var(--brand);
  display:grid;place-items:center;margin-bottom:18px;
  border:1px solid rgba(0,160,198,.18);
}
.os-value-ic svg{width:26px;height:26px}
.os-value-card h3{
  font-size:1.35rem;letter-spacing:-.015em;color:var(--brand);
  margin:0 0 10px;font-weight:900;
}
.os-value-card > p{color:var(--muted);line-height:1.6;margin:0 0 16px}
.os-value-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.os-value-list li{
  position:relative;padding-left:24px;
  color:var(--ink-2);font-weight:600;font-size:.94rem;line-height:1.5;
}
.os-value-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:14px;height:2px;background:var(--accent);border-radius:2px;
}
@media (max-width:780px){
  .os-values-grid{grid-template-columns:1fr}
}

/* ---------- FACTORY ---------- */
.os-factory{
  padding:100px 0;color:#fff;
  background:linear-gradient(135deg,#0a2c3e 0%, #0b3a4e 50%, #0e4a64 100%);
  position:relative;overflow:hidden;
}
.os-factory::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 70% 30%, #000, transparent 80%);
}
.os-factory-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center;
}
.os-factory-text h2{
  color:#fff;font-size:clamp(1.8rem,2.6vw,2.4rem);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 18px;
}
.os-factory-text > p{color:#cfe1ea;line-height:1.7;margin:0 0 24px;font-size:1.02rem}
.os-factory-facts{
  list-style:none;padding:0;margin:0;display:grid;gap:0;
  border-top:1px solid rgba(255,255,255,.12);
}
.os-factory-facts li{
  display:grid;grid-template-columns:130px 1fr;gap:18px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);
  align-items:start;
}
.os-fact-key{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7fc3d8;font-weight:800;padding-top:2px;
}
.os-fact-val{color:#fff;font-weight:700;line-height:1.5}
.os-fact-val a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.os-fact-val a:hover{color:#5fe6a4;border-color:#5fe6a4}
.os-factory-media{
  position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.os-factory-media img{width:100%;height:100%;object-fit:cover;display:block}
.os-factory-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 26px 26px;
  background:linear-gradient(0deg, rgba(8,28,42,.96) 0%, rgba(8,28,42,.7) 60%, transparent 100%);
}
.os-factory-tag{
  display:inline-block;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7fc3d8;font-weight:800;margin-bottom:8px;
}
.os-factory-overlay h3{
  color:#fff;font-size:1.25rem;letter-spacing:-.015em;
  line-height:1.3;margin:0;font-weight:800;
}
@media (max-width:880px){
  .os-factory-grid{grid-template-columns:1fr;gap:36px}
}

/* ---------- CERTS ---------- */
.os-certs{padding:90px 0;background:var(--steel-050)}
.os-certs-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  align-items:stretch;
}
.os-cert-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:28px;display:flex;flex-direction:column;gap:20px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;position:relative;
}
.os-cert-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.os-cert-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(11,58,78,.14);
  border-color:rgba(0,160,198,.35);
}
.os-cert-img{
  height:160px;border-radius:16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,160,198,.18), transparent 60%),
    linear-gradient(135deg, #0b3a4e 0%, #1a6b8c 100%);
  display:grid;place-items:center;
  border:1px solid rgba(11,58,78,.25);
  padding:18px;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.os-cert-img::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 110%, rgba(255,255,255,.08), transparent 60%);
}
.os-cert-img img{
  width:108px;height:108px;max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  background:#fff;border-radius:50%;padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.12);
  position:relative;z-index:1;
}
.os-cert-img-mat{
  /* same dark frame — chip handles its own styling */
}
.os-mat-chip{
  display:inline-grid;place-items:center;
  width:108px;height:108px;border-radius:50%;
  background:linear-gradient(135deg,#ffffff 0%,#e7f0f4 100%);
  color:var(--brand);font-weight:900;font-size:2.1rem;letter-spacing:-.04em;
  box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.12),
             inset 0 -2px 0 rgba(11,58,78,.08);
  position:relative;z-index:1;
  font-variant-numeric:tabular-nums;
}
.os-cert-tag{
  display:inline-block;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);font-weight:800;
}
.os-cert-body{display:flex;flex-direction:column;flex:1}
.os-cert-body h3{
  font-size:1.2rem;color:var(--brand);margin:6px 0 8px;
  letter-spacing:-.015em;font-weight:900;
}
.os-cert-body p{color:var(--muted);line-height:1.6;margin:0;font-size:.96rem}
@media (max-width:880px){
  .os-certs-grid{grid-template-columns:1fr}
}

/* ---------- TIMELINE ---------- */
.os-timeline{padding:90px 0;background:#fff}
.os-tl{list-style:none;padding:0;margin:0;position:relative;max-width:840px;margin-inline:auto}
.os-tl::before{
  content:"";position:absolute;left:74px;top:8px;bottom:8px;
  width:2px;background:linear-gradient(180deg, var(--line) 0%, var(--accent) 50%, var(--line) 100%);
}
.os-tl-item{
  position:relative;display:grid;grid-template-columns:120px 1fr;gap:30px;
  margin-bottom:24px;align-items:start;
}
.os-tl-marker{
  width:88px;height:88px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;font-weight:900;
  color:var(--brand);font-size:1rem;letter-spacing:-.01em;
  position:relative;z-index:2;
  box-shadow:0 8px 20px rgba(11,58,78,.08);
}
.os-tl-marker span{padding:0 6px;text-align:center}
.os-tl-item-now .os-tl-marker{
  background:linear-gradient(135deg,var(--accent),#00cfff);color:#fff;border-color:transparent;
  box-shadow:0 12px 28px rgba(0,160,198,.35);
}
.os-tl-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 26px;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.os-tl-item:hover .os-tl-card{
  border-color:rgba(0,160,198,.35);
  box-shadow:0 16px 36px rgba(11,58,78,.1);
  transform:translateX(4px);
}
.os-tl-card h3{
  font-size:1.15rem;color:var(--brand);
  margin:0 0 8px;letter-spacing:-.015em;font-weight:900;
}
.os-tl-card p{color:var(--muted);line-height:1.6;margin:0;font-size:.96rem}
@media (max-width:680px){
  .os-tl::before{left:34px}
  .os-tl-item{grid-template-columns:68px 1fr;gap:18px}
  .os-tl-marker{width:68px;height:68px;font-size:.85rem}
}

/* ---------- TEAM ---------- */
.os-team{padding:90px 0;background:var(--steel-050);position:relative}
.os-team-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
  max-width:1140px;margin:0 auto;
}
.os-team-card{
  position:relative;
  display:flex;align-items:center;gap:30px;
  padding:34px 34px 30px;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 1px 2px rgba(11,58,78,.04), 0 10px 28px rgba(11,58,78,.06);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
.os-team-card::after{
  /* small accent corner mark, top-right */
  content:"";position:absolute;top:18px;right:18px;
  width:34px;height:34px;border-top:2px solid rgba(0,160,198,.55);border-right:2px solid rgba(0,160,198,.55);
  border-radius:0 6px 0 0;
  opacity:0;transform:translate(-4px,4px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.os-team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(11,58,78,.06), 0 34px 64px rgba(11,58,78,.18);
  border-color:rgba(0,160,198,.4);
}
.os-team-card:hover::after{opacity:1;transform:translate(0,0)}

/* ROUND PORTRAIT — circular avatar with gradient ring */
.os-team-photo{
  position:relative;flex-shrink:0;
  width:170px;height:170px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--brand) 100%);
  padding:4px;
  box-shadow:0 12px 28px rgba(11,58,78,.18), inset 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.os-team-photo::before{
  /* white inner ring between gradient and photo */
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:#fff;z-index:1;
}
.os-team-photo img{
  position:relative;z-index:2;
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:center 18%;display:block;
  filter:saturate(1.06) contrast(1.05);
  transition:filter .4s ease;
}
.os-team-card:hover .os-team-photo{
  transform:scale(1.04) rotate(-1deg);
  box-shadow:0 18px 40px rgba(0,160,198,.28), inset 0 0 0 1px rgba(255,255,255,.5);
}
.os-team-card:hover .os-team-photo img{filter:saturate(1.12) contrast(1.08)}

/* BODY — all info next to the round photo */
.os-team-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
}
.os-team-role{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-dark);font-weight:800;
  display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;margin-bottom:6px;
}
.os-team-role::before{
  content:"";width:22px;height:1.5px;background:currentColor;opacity:.7;
  display:inline-block;flex-shrink:0;
}
.os-team-body h3{
  font-size:1.5rem;color:var(--brand);margin:0 0 8px;
  letter-spacing:-.025em;font-weight:900;line-height:1.1;
}
.os-team-body p{
  color:var(--muted);line-height:1.55;margin:0 0 14px;font-size:.93rem;
}
.os-team-links{
  display:flex;flex-direction:column;gap:2px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.os-team-link{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;color:var(--brand);font-size:.94rem;
  padding:7px 0;letter-spacing:-.005em;
  transition:color .2s ease;
}
.os-team-link + .os-team-link{
  border-top:1px dashed rgba(11,58,78,.08);
}
.os-team-link span{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg, rgba(0,160,198,.14), rgba(0,160,198,.06));
  color:var(--accent-dark);
  display:grid;place-items:center;font-size:.95rem;
  flex-shrink:0;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.os-team-link:hover{color:var(--accent-dark)}
.os-team-link:hover span{
  background:var(--accent-dark);color:#fff;transform:scale(1.06);
}

/* RESPONSIVE */
@media (max-width:1080px){
  .os-team-photo{width:150px;height:150px}
  .os-team-card{gap:24px;padding:30px 28px 26px}
}
@media (max-width:880px){
  .os-team-grid{grid-template-columns:1fr;gap:22px;max-width:600px}
  .os-team-photo{width:160px;height:160px}
}
@media (max-width:480px){
  .os-team-card{
    flex-direction:column;text-align:center;align-items:center;gap:20px;
    padding:28px 24px 24px;
  }
  .os-team-role{justify-content:center}
  .os-team-links{align-self:stretch}
  .os-team-link{justify-content:flex-start}
}

/* ---------- SUSTAIN ---------- */
.os-sustain{padding:90px 0;background:#fff}
.os-sustain-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;
}
.os-sustain-text h2{
  font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 16px;color:var(--brand);
}
.os-sustain-text > p{color:var(--muted);line-height:1.7;margin:0 0 22px;font-size:1.02rem}
.os-sustain-bullets{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.os-sustain-bullets li{
  position:relative;padding:14px 18px 14px 50px;
  background:linear-gradient(135deg,#f5f9fb,#fff);
  border:1px solid var(--line);border-radius:14px;
  color:var(--ink-2);line-height:1.5;
}
.os-sustain-bullets li::before{
  content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:99px;
  background:radial-gradient(circle, #5fe6a4 0%, #1ea96b 100%);
  box-shadow:0 0 0 4px rgba(95,230,164,.18);
}
.os-sustain-bullets strong{color:var(--brand);font-weight:800}
.os-sustain-media{
  border-radius:24px;overflow:hidden;aspect-ratio:5/4;
  box-shadow:0 30px 60px rgba(11,58,78,.18);
}
.os-sustain-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:880px){
  .os-sustain-grid{grid-template-columns:1fr;gap:36px}
}

/* ---------- CTA ---------- */
.os-cta{padding:90px 0;background:var(--steel-050)}
.os-cta-card{
  background:linear-gradient(135deg,#0b3a4e 0%, #0e4a64 60%, #1a6b8c 100%);
  border-radius:28px;padding:54px 60px;color:#fff;
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(11,58,78,.22);
}
.os-cta-card::before{
  content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 80% 20%, #000, transparent 70%);
}
.os-cta-card::after{
  content:"";position:absolute;right:-80px;top:-60px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(95,230,164,.22) 0%, transparent 65%);
  pointer-events:none;
}
.os-cta-text{position:relative;z-index:2}
.os-cta-text h2{
  color:#fff;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 12px;
}
.os-cta-text h2 .hl{
  background:linear-gradient(120deg,#5fe6a4 0%, #00cfff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.os-cta-text > p{color:#cfe1ea;line-height:1.65;margin:0;max-width:520px}
.os-cta-actions{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.os-cta-actions .btn{min-width:240px;justify-content:center}
@media (max-width:780px){
  .os-cta-card{grid-template-columns:1fr;padding:36px 28px;gap:24px}
  .os-cta-actions{align-items:stretch}
}

/* ---------- HERO MOBILE ---------- */
@media (max-width:780px){
  .os-hero{padding:84px 0 80px;min-height:auto}
  .os-hero h1{font-size:2rem}
  .os-hero-pillars{gap:8px}
  .os-pillar-text{font-size:.95rem}
  .os-hero-scroll{display:none}
  .os-story{padding:64px 0}
  .os-story-grid{grid-template-columns:1fr;gap:32px}
  .os-values{padding:64px 0}
  .os-factory{padding:64px 0}
  .os-certs{padding:64px 0}
  .os-timeline{padding:64px 0}
  .os-team{padding:64px 0}
  .os-sustain{padding:64px 0}
  .os-cta{padding:64px 0}
}

/* ============== LANGUAGE SWITCHER ============== */
.lang-switch{
  display:inline-flex;align-items:center;gap:0;
  background:rgba(15,42,55,.06);
  border:1px solid rgba(15,42,55,.16);
  border-radius:999px;
  padding:3px;
  font-family:var(--font-display, "Inter", system-ui, sans-serif);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  user-select:none;
}
.lang-switch .lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:24px;padding:0 9px;
  border:0;background:transparent;color:#5b6e77;cursor:pointer;
  border-radius:999px;
  transition:background .15s ease,color .15s ease;
}
.lang-switch .lang-opt:hover{color:#0f2a37}
.lang-switch .lang-opt.is-active{
  background:#0f2a37;color:#fff;
}
.lang-switch .lang-sep{display:none}
.topbar .lang-switch{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.topbar .lang-switch .lang-opt{color:rgba(255,255,255,.78)}
.topbar .lang-switch .lang-opt:hover{color:#fff}
.topbar .lang-switch .lang-opt.is-active{
  background:#fff;color:#0f2a37;
}
@media (max-width:780px){
  .lang-switch{font-size:.72rem}
  .lang-switch .lang-opt{min-width:28px;height:22px;padding:0 7px}
}

/* Place language switch on the right side of the topbar */
.topbar > .container{position:relative}
.topbar-langwrap{
  position:absolute;
  right:18px;top:50%;
  transform:translateY(-50%);
  z-index:5;
}
@media (max-width:780px){
  .topbar-langwrap{right:10px}
}

/* Language switcher inside .header-actions (visible header).
   Uses higher specificity + !important to win over the
   header-actions overrides further up in the file. */
.site-header .header-actions .lang-switch.lang-switch-header{
  display:inline-flex !important;
  align-items:center;
  gap:0;
  background:#fff;
  border:1px solid #dde8ec;
  border-radius:999px;
  padding:3px;
  height:38px;
  box-shadow:0 4px 14px rgba(6,35,51,.04);
  flex-shrink:0;
  margin-right:4px;
}
.site-header .header-actions .lang-switch.lang-switch-header .lang-opt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:30px;
  padding:0 10px;
  border:0;
  background:transparent;
  color:#5b6e77;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.05em;
  cursor:pointer;
  border-radius:999px;
  transition:background .15s ease,color .15s ease;
}
.site-header .header-actions .lang-switch.lang-switch-header .lang-opt:hover{
  color:#0f2a37;
  background:rgba(15,42,55,.05);
}
.site-header .header-actions .lang-switch.lang-switch-header .lang-opt.is-active{
  background:#0f2a37;
  color:#fff;
}
.site-header .header-actions .lang-switch.lang-switch-header .lang-sep{display:none}

@media (max-width:980px){
  .site-header .header-actions .lang-switch.lang-switch-header{
    height:34px;
    margin-right:0;
  }
  .site-header .header-actions .lang-switch.lang-switch-header .lang-opt{
    min-width:30px;height:26px;padding:0 8px;font-size:.72rem;
  }
}

/* ============== HEADER FIT-FIX ==============
   Final layout:
     [Logo]  [Home  Cable trays  Downloads  Mounting  Contact]   [NL|EN] [🔍] [Become a client] [Quote 23]
     ↑ left  ↑ directly next to logo                              ↑ pushed to the right edge

   Decisions:
   - Header search is ICON-ONLY at all sizes. The big hero search
     on the home page and the ⌘K shortcut handle the bulk of
     searching; the header icon is a quick-access trigger.
   - Nav is natural-width + margin-right:auto so it sits next to
     the logo and the action block is anchored to the right.
   - Lang switcher gets a thin vertical divider before it for a
     clean visual break from the Contact dropdown. */
html body .site-header .nav > a,
html body .site-header .nav .nav-toplink,
html body .site-header .nav .nav-toplink span{
  white-space:nowrap !important;
}
html body .site-header .header-inner{
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:24px !important;
}
html body .site-header .nav{
  gap:6px !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  margin-right:auto !important;
}
html body .site-header .nav > a,
html body .site-header .nav .nav-toplink{
  padding-left:10px !important;
  padding-right:10px !important;
}
html body .site-header .header-actions{
  gap:12px !important;
  flex:0 0 auto !important;
  min-width:0 !important;
}

/* Header search: icon-only round button at all sizes. */
html body .site-header .header-search-trigger{
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  height:46px !important;
  padding:0 !important;
  border-radius:999px !important;
  justify-content:center !important;
  flex:0 0 46px !important;
}
html body .site-header .header-search-trigger .hst-text,
html body .site-header .header-search-trigger .hst-kbd{display:none !important}
html body .site-header .header-search-trigger .hst-icon{
  font-size:20px !important;
  color:#159fce !important;
  margin:0 !important;
}

/* Become-client / Quote pill buttons: don't shrink, never wrap */
html body .site-header .icon-button{flex:0 0 auto !important;white-space:nowrap !important}

/* Lang switcher: clear separator from the Contact dropdown via
   left/right margin + a thin vertical divider before it. */
html body .site-header .header-actions .lang-switch.lang-switch-header{
  height:36px !important;
  margin:0 6px 0 4px !important;
  position:relative !important;
}
html body .site-header .header-actions .lang-switch.lang-switch-header::before{
  content:"";
  position:absolute;
  left:-10px;top:50%;
  width:1px;height:22px;
  background:rgba(15,42,55,.16);
  transform:translateY(-50%);
  pointer-events:none;
}
html body .site-header .header-actions .lang-switch.lang-switch-header .lang-opt{
  min-width:30px !important;
  height:28px !important;
  padding:0 9px !important;
  font-size:.74rem !important;
}

/* Below ~1080px: drop the "Become a client" label to icon-only so
   everything still fits on one row. */
@media (max-width: 1080px){
  html body .site-header .icon-button.btn-wkl .bw-label{display:none !important}
  html body .site-header .icon-button.btn-wkl{padding:9px 12px !important}
}

/* Below ~980px: tighten the switcher further; mobile menu kicks in. */
@media (max-width: 980px){
  html body .site-header .header-actions .lang-switch.lang-switch-header{
    height:32px !important;
    margin:0 2px !important;
  }
  html body .site-header .header-actions .lang-switch.lang-switch-header::before{display:none !important}
  html body .site-header .header-actions .lang-switch.lang-switch-header .lang-opt{
    min-width:26px !important;height:24px !important;padding:0 7px !important;font-size:.7rem !important;
  }
}

/* ===========================================================
   FAQ section (SEO + featured snippets)
   =========================================================== */
.faq-section{
  background: linear-gradient(180deg, #f7faf8 0%, #ffffff 100%);
  padding: 96px 0 120px;
  position: relative;
}
.faq-container{
  max-width: 920px;
}
.faq-head{
  text-align: center;
  margin-bottom: 56px;
}
.faq-eyebrow{
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #16a34a;
  margin-bottom: 16px;
  position: relative;
  padding: 0 18px;
}
.faq-eyebrow::before,
.faq-eyebrow::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #16a34a, rgba(22,163,74,0));
}
.faq-eyebrow::before{ left: -28px; }
.faq-eyebrow::after{ right: -28px; transform: scaleX(-1); }
.faq-title{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #0a2540;
  margin: 0 0 16px;
}
.faq-lead{
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  color: #4a5b6b;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}
.faq-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item{
  background: #ffffff;
  border: 1px solid #e2e8ec;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover{
  border-color: #16a34a;
  box-shadow: 0 6px 18px rgba(22,163,74,.08);
}
.faq-item[open]{
  border-color: #16a34a;
  box-shadow: 0 8px 22px rgba(10,37,64,.06);
}
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 22px 56px 22px 26px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0a2540;
  position: relative;
  line-height: 1.4;
  user-select: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f7f3;
  color: #16a34a;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  transition: transform .25s ease, background .25s ease;
}
.faq-item[open] summary::after{
  content: '−';
  background: #16a34a;
  color: #ffffff;
  transform: translateY(-50%) rotate(180deg);
}
.faq-answer{
  padding: 0 26px 24px;
  animation: faq-fade .3s ease;
}
.faq-answer p{
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  color: #4a5b6b;
  line-height: 1.65;
}
.faq-answer a{
  color: #16a34a;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(22,163,74,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.faq-answer a:hover{
  text-decoration-color: #16a34a;
}
@keyframes faq-fade{
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px){
  .faq-section{ padding: 64px 0 80px; }
  .faq-head{ margin-bottom: 40px; }
  .faq-item summary{ padding: 18px 50px 18px 20px; font-size: .96rem; }
  .faq-item summary::after{ right: 16px; }
  .faq-answer{ padding: 0 20px 20px; }
}

/* ===================================================================
   Visually-hidden utility — content is read by screen-readers but
   not visible. Used for proper input labelling without changing layout.
   =================================================================== */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===================================================================
   Tight kerning for green-dot accent — eliminate optical gap caused by
   gradient text + bold span inheritance. Pulls the period flush to the
   preceding character so it never reads as " ." in the rendered output.
   =================================================================== */
.home-v4-green-dot,
.families-title-accent .home-v4-green-dot,
.why-v2-title-accent .home-v4-green-dot,
.team-v2-title-accent .home-v4-green-dot,
.faq-title .home-v4-green-dot,
main#main .home-v4-green-dot{
  margin-left: -0.06em !important;
  letter-spacing: 0 !important;
  display: inline !important;
}

/* ===================================================================
   Form submission UI — Web3Forms async POST states
   =================================================================== */
.form-status{
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.5;
  font-weight: 500;
  display: none;
  border: 1px solid transparent;
  transition: opacity .2s ease;
}
.form-status[data-state]{ display: block; }
.form-status[data-state="sending"]{
  background: rgba(56, 130, 200, 0.08);
  border-color: rgba(56, 130, 200, 0.25);
  color: #1f4f7a;
}
.form-status[data-state="sending"]::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(31, 79, 122, .3);
  border-top-color: #1f4f7a;
  border-radius: 50%;
  animation: form-spin .8s linear infinite;
}
@keyframes form-spin{ to{ transform: rotate(360deg); } }
.form-status[data-state="success"]{
  background: rgba(34, 139, 80, 0.10);
  border-color: rgba(34, 139, 80, 0.30);
  color: #1d6b3f;
  font-size: 1rem;
}
.form-status[data-state="success"]::before{
  content: "✓";
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
  font-size: 1.1em;
}
.form-status[data-state="error"]{
  background: rgba(200, 50, 50, 0.08);
  border-color: rgba(200, 50, 50, 0.30);
  color: #a02828;
}
.form-status[data-state="error"]::before{
  content: "⚠";
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
}

/* When form is in success state, hide everything except the status box +
   any required hidden inputs, so the user only sees the confirmation.
   Use BOTH direct-child (correct case) and descendant (defensive fallback)
   selectors so a misplaced .form-status stays visible no matter what. */
form.form-submitted > *:not(.form-status){
  display: none !important;
}
form.form-submitted .form-status,
form.form-submitted .form-status[data-state]{
  display: block !important;
  margin-top: 0;
  font-size: 1.05rem;
  padding: 22px 24px;
}
/* Make sure .form-status itself is always visible when a state is set,
   regardless of any ancestor display:none — the success message must
   reach the user. */
.form-status[data-state="success"],
.form-status[data-state="error"],
.form-status[data-state="sending"]{
  display: block !important;
}

/* ===================================================================
   ============================================================
   FONT SYSTEM — Single source of truth (added 2026-05-04)
   STRICT 2-FONT RULE for the entire site:
     • Body, UI, paragraphs, navigation, buttons, forms,
       inputs, tables, footers, SKUs, EAN codes  →  Inter
     • Major headings (h1, h2) and display titles  →  Playfair Display
   This block is the FINAL override — it wins the cascade.
   ============================================================
   =================================================================== */
:root,
html,
body{
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* 1) Universal default → Inter on every element + pseudo */
*,
*::before,
*::after{
  font-family: var(--font-body) !important;
  font-feature-settings: "ss01","cv11","tnum";
}

/* 2) Major headings + display titles → Playfair Display
      (higher specificity than `*`, so this wins for headings)
      NOTE: .home-v4-title is intentionally Inter (editorial style with
      a Playfair italic accent inside `.home-v4-title-hl`) — not in this list. */
h1, h2,
.h1, .h2,
.hero-title,
.section-title,
.display-title,
.feature-tile h3,
.category-card h3,
.lead-certs .cert-fallback,
.home-v4-title-hl,
blockquote,
.brand-tagline,
.serif-title{
  font-family: var(--font-display) !important;
  font-feature-settings: normal;
}

/* 3) Small UI bits inside headings stay Inter */
h1 small, h2 small,
h1 .eyebrow, h2 .eyebrow,
h1 sup, h1 sub, h2 sup, h2 sub,
h1 .pill, h2 .pill,
h1 .badge, h2 .badge,
.brand-word,
.pdp-titleprice strong span,
.pc-from{
  font-family: var(--font-body) !important;
}

/* 4) SKU / EAN / numeric codes — Inter with tabular-nums (was monospace before) */
.ean-table .ean,
.sku, .code,
.product-code,
.tabular,
[data-numeric]{
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum","lnum";
  letter-spacing: .02em;
}


/* ====================================================================== */
/* PRINT STYLESHEET — added 2026-05-04 audit                              */
/* Optimaliseert het printen van productpagina's, datasheets en offertes  */
/* ====================================================================== */
@media print {
  /* Reset basis */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
    font-family: "Inter", Arial, sans-serif;
  }

  /* Verberg interactie & navigatie */
  .topbar,
  .site-header,
  .menu-button,
  .nav,
  .header-actions,
  .footer,
  .cookie,
  .search-overlay,
  .lang-switch,
  .skip-link,
  .actions,
  .filters,
  .filter-bar,
  .pagination,
  .quote-bar,
  .quote-count,
  .ndd-ic,
  button:not([type="submit"]),
  .nav-caret,
  .modal,
  video,
  iframe,
  .video-thumb,
  .scroll-top,
  .float-cta {
    display: none !important;
  }

  /* Layout terug naar volledige breedte */
  .container,
  main,
  .section {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Page breaks */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  p, blockquote, li {
    orphans: 3;
    widows: 3;
  }
  pre, blockquote, table, figure, .product-card, .pdp, .spec-block {
    page-break-inside: avoid;
  }

  /* Headings */
  h1 { font-size: 22pt; margin: 0 0 12pt 0; }
  h2 { font-size: 16pt; margin: 16pt 0 8pt 0; }
  h3 { font-size: 13pt; margin: 12pt 0 6pt 0; }
  h4 { font-size: 11pt; margin: 10pt 0 4pt 0; }

  /* Links - toon URL achter de link */
  a, a:visited {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-wrap: break-word;
  }
  /* Maar niet voor anchor-links of relatieve links naar binnen */
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href^="mailto:"]:after,
  a[href^="tel:"]:after {
    content: "";
  }

  /* Afbeeldingen */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    border: 1px solid #ddd;
  }

  /* Tabellen — productspecificaties */
  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: auto;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; }
  th, td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt;
    text-align: left;
  }
  th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Product cards (catalogus afdrukken) */
  .product-card,
  .pdp-card,
  .spec-block {
    border: 1px solid #999 !important;
    padding: 8pt;
    margin: 0 0 8pt 0;
    page-break-inside: avoid;
  }

  /* Product code badges */
  .product-code,
  .pcode,
  .badge {
    border: 1px solid #000;
    padding: 1pt 4pt;
    font-weight: 700;
  }

  /* Voettekst per pagina (optioneel - werkt niet alle browsers) */
  @page {
    margin: 1.5cm 1.2cm;
  }

  /* Sectie-printing */
  section {
    page-break-after: auto;
  }

  /* Brand-mark voor zichtbaarheid op print */
  .brand,
  .brand-mark {
    display: inline-block !important;
    font-weight: 800;
  }
}