/*
Theme Name: Mastbos NL Multidiensten
Theme URI: https://mastbos-multidiensten.nl
Author: Mastbos NL Multidiensten
Description: Professioneel thema - teal/blauw kleurenschema
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: mastbos
*/

:root {
  --teal:        #06B6D4;
  --teal-dark:   #0891B2;
  --teal-light:  #ECFEFF;
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-light:  #EFF6FF;
  --grad:        linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  --grad-rev:    linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
  --dark:        #1E293B;
  --dark2:       #334155;
  --bg:          #F0F9FF;
  --bg2:         #F8FAFC;
  --white:       #FFFFFF;
  --border:      #E2E8F0;
  --muted:       #64748B;
  --orange:      #F97316;
  --orange-hov:  #EA6D0E;
  --radius:      10px;
  --radius-lg:   18px;
  --shadow:      0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-lg:   0 8px 32px rgba(6,182,212,.15);
  --font:        'Inter','Segoe UI',system-ui,sans-serif;
  --header-h:    120px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--dark); background:var(--white); line-height:1.65; font-size:16px; padding-top:var(--header-h); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--teal-dark); text-decoration:none; transition:color .2s; }
a:hover { color:var(--blue); }
ul { list-style:none; }
h1,h2,h3,h4 { color:var(--dark); line-height:1.2; font-weight:700; }

/* ── HEADER ── */
.site-header {
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(6,182,212,0.15);
  z-index:9999; transition:box-shadow .3s;
}
.site-header.scrolled { box-shadow:0 4px 24px rgba(6,182,212,0.12); }
.header-inner { max-width: 1240px; margin: 0 auto; padding: 0 14px; height: 100%; display: flex; align-items: center; gap: 20px; }
.site-logo a { display:flex; align-items:center; gap:10px; }
.site-logo img { height: 110px; width: auto; }
.logo-text { line-height:1.1; }
.logo-text .name { font-size:18px; font-weight:800; color:var(--dark); letter-spacing:-.3px; }
.logo-text .name span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-text .sub { font-size:10px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:1.2px; }
.site-nav { flex:1; }
.site-nav ul { display:flex; align-items:center; gap:2px; }
.site-nav ul li a { display:block; padding:7px 13px; font-size:14px; font-weight:500; color:var(--dark); border-radius:7px; transition:all .18s; position:relative; }
.site-nav ul li a::after { content:''; position:absolute; bottom:2px; left:13px; right:13px; height:2px; background:var(--grad); border-radius:2px; transform:scaleX(0); transition:transform .2s; }
.site-nav ul li a:hover { color:var(--teal-dark); background:var(--teal-light); }
.site-nav ul li a:hover::after, .site-nav ul li.current-menu-item a::after { transform:scaleX(1); }
.site-nav ul li.current-menu-item a { color:var(--teal-dark); }
.header-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-phone { font-size:14px; font-weight:600; color:var(--dark); white-space:nowrap; }
.header-phone svg { width:15px; height:15px; display:inline; vertical-align:-2px; margin-right:5px; color:var(--teal); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; border-radius:8px; font-size:14px; font-weight:600; border:none; cursor:pointer; text-decoration:none; transition:all .2s; white-space:nowrap; overflow:hidden; max-height:56px; }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn-grad { background:var(--grad); color:#fff; }
.btn-grad:hover { background:var(--grad-rev); color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(6,182,212,.4); }
.btn-orange { background:var(--orange); color:#fff; }
.btn-orange:hover { background:var(--orange-hov); color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(249,115,22,.35); }
.btn-outline-dark { background:transparent; color:var(--dark); border:1.5px solid var(--border); }
.btn-outline-dark:hover { border-color:var(--teal); color:var(--teal-dark); background:var(--teal-light); }
.btn-outline-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-outline-white:hover { background:rgba(255,255,255,.15); color:#fff; border-color:#fff; }
.btn-white { background:#fff; color:var(--teal-dark); font-weight:700; }
.btn-white:hover { background:var(--teal-light); color:var(--blue-dark); }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-dark); color:#fff; transform:translateY(-1px); }
.btn-lg { padding:13px 28px; font-size:15px; border-radius:9px; line-height:1; }
.btn-full { width:100%; justify-content:center; max-height:52px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:all .3s; }

/* ── HERO ── */
.hero { background:var(--grad); position:relative; overflow:hidden; padding:88px 28px 80px; }
.hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 15% 50%, rgba(255,255,255,.12) 0%, transparent 50%), radial-gradient(circle at 85% 15%, rgba(255,255,255,.08) 0%, transparent 45%); pointer-events:none; }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:56px 56px; pointer-events:none; }
.hero-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; position:relative; z-index:1; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.38); color:#fff; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:20px; }
.hero-eyebrow::before { content:''; width:7px; height:7px; background:#FCD34D; border-radius:50%; display:block; }
.hero h1 { font-size:50px; color:#fff; margin-bottom:20px; line-height:1.1; letter-spacing:-.5px; }
.hero h1 .hl { color:#FCD34D; }
.hero-desc { color:rgba(255,255,255,.88); font-size:17px; line-height:1.75; margin-bottom:34px; max-width:480px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:22px; margin-top:40px; flex-wrap:wrap; }
.trust-pill { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.82); font-size:13px; font-weight:500; }
.trust-pill svg { width:15px; height:15px; color:#FCD34D; flex-shrink:0; }
.hero-visual { position:relative; }
.hero-card { background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); border-radius:var(--radius-lg); padding:30px; backdrop-filter:blur(10px); }
.hero-card-title { color:#fff; font-size:15px; font-weight:700; margin-bottom:18px; }
.hero-service-list { display:flex; flex-direction:column; gap:10px; }
.hero-service-item { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:11px 15px; color:#fff; font-size:13px; font-weight:500; transition:all .2s; }
.hero-service-item:hover { background:rgba(255,255,255,.28); }
.hero-service-dot { width:7px; height:7px; background:#FCD34D; border-radius:50%; flex-shrink:0; }
.hero-badge { position:absolute; top:-14px; right:-10px; background:var(--orange); color:#fff; padding:7px 15px; border-radius:100px; font-size:12px; font-weight:700; box-shadow:0 4px 14px rgba(249,115,22,.4); }

/* ── TRUST BAR ── */
.trust-bar { background:#fff; border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(6,182,212,.08); }
.trust-bar-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { padding:20px 26px; border-right:1px solid var(--border); display:flex; align-items:center; gap:14px; }
.trust-item:last-child { border-right:none; }
.trust-icon { width:42px; height:42px; background:var(--teal-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-icon svg { width:21px; height:21px; color:var(--teal-dark); }
.trust-text strong { display:block; font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.trust-text span { font-size:12px; color:var(--muted); }

/* ── SECTIONS ── */
.section { padding:86px 28px; }
.section-inner { max-width:1240px; margin:0 auto; }
.section-bg { background:var(--bg); }
.section-bg2 { background:var(--bg2); }
.section-dark { background:var(--grad); }
.section-header { text-align:center; margin-bottom:54px; }
.eyebrow { display:inline-block; color:var(--teal-dark); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.section-dark .eyebrow { color:rgba(255,255,255,.8); }
.section-title { font-size:35px; font-weight:800; letter-spacing:-.4px; }
.section-dark .section-title { color:#fff; }
.section-sub { margin-top:13px; font-size:16px; color:var(--muted); max-width:520px; margin-left:auto; margin-right:auto; }

/* ── SERVICE CARDS ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; transition:all .22s; position:relative; overflow:hidden; }
.svc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); transform:scaleY(0); transform-origin:bottom; transition:transform .22s; }
.svc-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--teal); }
.svc-card:hover::before { transform:scaleY(1); }
.svc-num { font-size:11px; font-weight:700; color:var(--teal-dark); letter-spacing:1.5px; margin-bottom:12px; opacity:.7; }
.svc-icon { width:46px; height:46px; background:var(--teal-light); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.svc-icon svg { width:22px; height:22px; color:var(--teal-dark); }
.svc-card h3 { font-size:14px; margin-bottom:8px; font-weight:700; }
.svc-card p { font-size:13px; color:var(--muted); line-height:1.65; }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-img-wrap { position:relative; }
.about-img-wrap img { width:100%; height:480px; object-fit:cover; border-radius:var(--radius-lg); }
.about-img-placeholder { width:100%; height:480px; background:var(--bg); border-radius:var(--radius-lg); border:2px dashed var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:14px; }
.about-img-placeholder svg { width:48px; height:48px; opacity:.35; }
.about-stat-card { position:absolute; bottom:-18px; right:-18px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); min-width:140px; text-align:center; }
.about-stat-num { font-size:32px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.about-stat-lbl { font-size:12px; color:var(--muted); margin-top:4px; }
.about-text .eyebrow { margin-bottom:10px; }
.about-text h2 { font-size:32px; font-weight:800; margin-bottom:16px; letter-spacing:-.3px; }
.about-text p { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:14px; }
.check-list { margin:22px 0; display:flex; flex-direction:column; gap:10px; }
.check-list li { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--dark); }
.check-dot { width:22px; height:22px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.check-dot svg { width:12px; height:12px; color:#fff; }

/* ── VALUES ── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.val-card { background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.38); border-radius:var(--radius-lg); padding:32px 26px; }
.val-icon { width:50px; height:50px; background:rgba(255,255,255,.25); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.val-icon svg { width:24px; height:24px; color:#fff; }
.val-card h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:10px; }
.val-card p { font-size:14px; color:rgba(255,255,255,.85); line-height:1.7; }

/* ── PROCESS ── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.process-grid::before { content:''; position:absolute; top:27px; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--teal-light),var(--teal)); z-index:0; }
.process-step { position:relative; z-index:1; text-align:center; padding:0 8px; }
.step-num { width:54px; height:54px; border-radius:50%; background:var(--grad); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; border:4px solid var(--white); box-shadow:0 0 0 2px var(--teal); }
.process-step h3 { font-size:14px; font-weight:700; margin-bottom:8px; }
.process-step p { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── CTA BANNER ── */
.cta-banner { background:var(--grad); padding:70px 28px; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.12) 0%,transparent 60%); }
.cta-banner h2 { color:#fff; font-size:34px; margin-bottom:12px; position:relative; }
.cta-banner p { color:rgba(255,255,255,.88); font-size:17px; margin-bottom:30px; position:relative; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ── CONTACT ── */
.contact-wrap { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start; }
.contact-side .eyebrow { margin-bottom:10px; }
.contact-side h2 { font-size:28px; font-weight:800; margin-bottom:14px; }
.contact-side > p { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:28px; }
.cinfo { display:flex; gap:14px; align-items:flex-start; padding:15px; background:var(--bg); border-radius:10px; margin-bottom:10px; }
.cinfo-icon { width:40px; height:40px; background:var(--teal-light); border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-icon svg { width:19px; height:19px; color:var(--teal-dark); }
.cinfo strong { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:3px; }
.cinfo span { font-size:14px; color:var(--dark); font-weight:600; }
.form-box { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow); }
.form-box .eyebrow { margin-bottom:6px; }
.form-box h3 { font-size:21px; font-weight:800; margin-bottom:26px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.fg input,.fg select,.fg textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--font); color:var(--dark); background:var(--white); outline:none; transition:border-color .2s; appearance:none; }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(6,182,212,.1); }
.fg textarea { resize:vertical; min-height:120px; }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note { font-size:12px; color:var(--muted); text-align:center; margin-top:12px; }

/* ── PAGE HEADER ── */
.page-hdr { background:var(--grad); padding:62px 28px; text-align:center; position:relative; overflow:hidden; }
.page-hdr::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.1) 0%,transparent 55%); }
.page-hdr .inner { position:relative; z-index:1; }
.breadcrumb { margin-bottom:14px; }
.breadcrumb a { color:rgba(255,255,255,.65); font-size:13px; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { color:rgba(255,255,255,.3); margin:0 8px; }
.breadcrumb .curr { color:rgba(255,255,255,.88); font-size:13px; }
.page-hdr h1 { color:#fff; font-size:38px; font-weight:800; margin-bottom:12px; letter-spacing:-.4px; }
.page-hdr p { color:rgba(255,255,255,.85); font-size:16px; max-width:500px; margin:0 auto; }

/* ── STATS ── */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:60px; }
.stat-card { background:var(--bg); border-radius:var(--radius); padding:32px 22px; text-align:center; border:1px solid var(--border); }
.stat-n { font-size:44px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-l { font-size:14px; color:var(--muted); margin-top:8px; }

/* ── DIENSTEN ── */
.diensten-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.dienst-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; display:flex; gap:18px; align-items:flex-start; transition:all .2s; }
.dienst-card:hover { box-shadow:var(--shadow-lg); border-color:var(--teal); transform:translateY(-2px); }
.dienst-icon { width:52px; height:52px; background:var(--teal-light); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dienst-icon svg { width:26px; height:26px; color:var(--teal-dark); }
.dienst-content h3 { font-size:15px; font-weight:700; margin-bottom:8px; }
.dienst-content p { font-size:13px; color:var(--muted); line-height:1.7; }

/* ── FOOTER ── */
.site-footer { background:var(--dark); color:rgba(255,255,255,.65); padding:68px 28px 0; }
.footer-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:52px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { font-size:20px; font-weight:800; color:#fff; margin-bottom:14px; }
.footer-logo span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-desc { font-size:14px; line-height:1.8; margin-bottom:22px; }
.fcontact { display:flex; gap:9px; align-items:center; font-size:13px; margin-bottom:9px; }
.fcontact svg { width:15px; height:15px; color:var(--teal); flex-shrink:0; }
.footer-col h4 { color:#fff; font-size:12px; font-weight:700; margin-bottom:18px; text-transform:uppercase; letter-spacing:1.2px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:rgba(255,255,255,.55); font-size:14px; transition:color .2s; }
.footer-col ul li a:hover { color:#fff; }
.footer-bottom { max-width:1240px; margin:0 auto; padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; }
.footer-bottom .copy { color:rgba(255,255,255,.45); }
.footer-bottom .kvk { color:rgba(255,255,255,.3); font-size:12px; }

/* ── MISC ── */
.alert-success { background:#F0FDF4; border:1px solid #86EFAC; color:#166534; padding:15px 18px; border-radius:9px; margin-bottom:20px; font-size:14px; font-weight:600; }
.mobile-menu { display:none; position:fixed; top:var(--header-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:9998; padding:20px 28px; }
.mobile-menu.open { display:block; }
.mobile-menu ul { display:flex; flex-direction:column; gap:4px; }
.mobile-menu ul li a { display:block; padding:11px 14px; font-size:15px; font-weight:500; color:var(--dark); border-radius:8px; }
.mobile-menu ul li a:hover { background:var(--teal-light); color:var(--teal-dark); }
.mobile-menu .mobile-cta { margin-top:16px; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .site-logo img { height: 78px !important; }
  .header-inner { padding: 0 14px !important; gap: 8px !important; }
  :root { --header-h: 88px !important; }
  .header-right .btn { padding: 7px 12px !important; font-size: 11px !important; gap: 4px !important; }
  .header-right .btn svg { width: 13px !important; height: 13px !important; }
}
@media (max-width:1024px) { .hero h1 { font-size:40px; } .hero-inner { gap:40px; } }
@media (max-width:900px) {
  .site-nav { display:none; } .hamburger { display:flex; } .header-phone { display:none; }
  .hero-inner { grid-template-columns:1fr; } .hero h1 { font-size:34px; } .hero-visual { display:none; }
  .trust-bar-inner { grid-template-columns:repeat(2,1fr); } .services-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; } .about-stat-card { display:none; }
  .values-grid { grid-template-columns:1fr; } .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid::before { display:none; } .contact-wrap { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:30px; } .stats-row { grid-template-columns:1fr; }
  .diensten-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; }
  .form-row2 { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .services-grid { grid-template-columns:1fr; } .hero h1 { font-size:28px; }
  .section-title { font-size:26px; } .trust-bar-inner { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr; } .hero-btns { flex-direction:column; }
}