/*
Theme Name:  Koolen Bedrijfswagens
Theme URI:   https://koolen-bedrijfswagens.nl
Description: Maatwerkthema voor Koolen Bedrijfswagens Tilburg. Inclusief Gutenberg-blokken.
Version:     3.0
Author:      Studio
Text Domain: koolen
*/

/* ============================================================
   DESIGN SYSTEM — Bebas Neue (koppen) + DM Sans (body)
   Brand #1478C8 | Navy #0C1E45 | Amber #F0A500
   Gouden snede φ = 1.618 in sleutelproporties
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --brand:#1478C8; --brand-d:#0F5FA0;
  --navy:#0C1E45;
  --amber:#F0A500; --amber-d:#C4850A;
  --ink:#0F0F0F; --gray:#6B6B6B;
  --border:#E4E1DB; --surface:#F5F3EE; --white:#FFFFFF;
  --font-h:'Bebas Neue','Impact',sans-serif;
  --font:'DM Sans',system-ui,sans-serif;
  --max:1200px; --pad:40px; --rad:14px;
  --sec:96px; --sec-sm:60px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.c{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.s{padding:var(--sec) 0}
.s--sm{padding:var(--sec-sm) 0}
.s--surf{background:var(--surface)}
.s--navy{background:var(--navy)}

/* TYPOGRAFIE */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--brand);flex-shrink:0}
.eyebrow--white{color:rgba(255,255,255,.6)}
.eyebrow--white::before{background:var(--amber)}
.display{font-family:var(--font-h);font-size:clamp(56px,7.5vw,112px);font-weight:400;line-height:.97;letter-spacing:.02em;color:var(--ink)}
.display--white{color:#fff}
.heading{font-family:var(--font-h);font-size:clamp(38px,5vw,72px);font-weight:400;line-height:1.0;letter-spacing:.02em;color:var(--ink)}
.heading--white{color:#fff}
.subheading{font-family:var(--font-h);font-size:clamp(24px,3vw,40px);font-weight:400;line-height:1.05;letter-spacing:.02em;color:var(--ink)}
.lead{font-family:var(--font);font-size:18px;line-height:1.68;color:var(--gray)}
.lead--white{color:rgba(255,255,255,.62)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;font-family:var(--font);font-size:15px;font-weight:600;border-radius:10px;border:none;cursor:pointer;transition:all .15s;line-height:1}
.btn--amber{background:var(--amber);color:var(--ink)}.btn--amber:hover{background:var(--amber-d);transform:translateY(-2px)}
.btn--brand{background:var(--brand);color:#fff}.btn--brand:hover{background:var(--brand-d);transform:translateY(-2px)}
.btn--navy{background:var(--navy);color:#fff}.btn--navy:hover{background:#162d5e;transform:translateY(-2px)}
.btn--outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}.btn--outline:hover{border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.btn--outline-d{background:transparent;color:var(--ink);border:1.5px solid var(--border)}.btn--outline-d:hover{border-color:var(--ink);transform:translateY(-2px)}
.text-link{font-family:var(--font);font-size:14px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .14s;white-space:nowrap}
.text-link:hover{color:var(--brand-d)}
.flex-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}.mb-28{margin-bottom:28px}.mb-40{margin-bottom:40px}
.mb-52{margin-bottom:52px}.text-center{text-align:center}

/* NAVIGATIE */
.nav{position:sticky;top:0;z-index:500;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center}
.nav__logo{flex-shrink:0;margin-right:auto}
.nav__logo img{height:44px;width:auto;object-fit:contain;display:block;border-radius:4px}
.nav__logo-fallback{display:none}
.nav__logo-fallback .t1{font-family:var(--font-h);font-size:26px;color:#fff;letter-spacing:.06em}
.nav__logo-fallback .t2{font-family:var(--font);font-size:7.5px;color:rgba(255,255,255,.35);letter-spacing:.22em;text-transform:uppercase}
.nav__links{display:flex;list-style:none;gap:2px}
.nav__links a{display:block;padding:9px 13px;font-family:var(--font);font-size:14px;font-weight:500;color:rgba(255,255,255,.6);border-radius:7px;transition:color .14s,background .14s}
.nav__links a:hover,.nav__links a.current-menu-item,.nav__links a.active{color:#fff;background:rgba(255,255,255,.08)}
/* Taal-pill */
.nav__lang{position:relative;margin:0 18px}
.lang-trigger{display:flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:20px;cursor:pointer;color:rgba(255,255,255,.82);font-family:var(--font);font-size:13px;font-weight:600;transition:background .14s;white-space:nowrap}
.lang-trigger:hover{background:rgba(255,255,255,.14)}
.lang-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;display:block;flex-shrink:0}
.lang-chevron{width:10px;height:10px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex-shrink:0}
.nav__lang.is-open .lang-chevron{transform:rotate(180deg)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:6px;min-width:160px;box-shadow:0 12px 40px rgba(12,30,69,.18);z-index:300}
.nav__lang.is-open .lang-dropdown{display:block;animation:dropIn .18s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:none;border-radius:8px;font-family:var(--font);font-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:background .14s}
.lang-opt:hover{background:var(--surface)}
.lang-opt.is-active{background:var(--surface);font-weight:600}
.lang-opt img{width:22px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__phone{display:flex;align-items:center;gap:7px;font-family:var(--font);font-size:13.5px;color:rgba(255,255,255,.62);transition:color .14s}
.nav__phone:hover{color:#fff}
.nav__phone svg{width:15px;height:15px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav__wa{display:flex;align-items:center;gap:8px;padding:9px 18px;background:var(--amber);color:var(--ink);font-family:var(--font);font-size:13px;font-weight:700;border-radius:8px;transition:background .14s}
.nav__wa:hover{background:var(--amber-d)}
.nav__wa svg{width:15px;height:15px;fill:var(--ink)}

/* VEHICLE CARD */
.vc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vc-grid--4{grid-template-columns:repeat(4,1fr)}
.vc{background:var(--white);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;transition:transform .22s,box-shadow .22s}
.vc:hover{transform:translateY(-5px);box-shadow:0 20px 56px rgba(12,30,69,.10)}
.vc__photo{aspect-ratio:16/10;background:var(--surface);overflow:hidden;position:relative}
.vc__photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vc:hover .vc__photo img{transform:scale(1.05)}
.vc__badge{position:absolute;top:12px;left:12px;background:var(--amber);color:var(--ink);font-family:var(--font);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.vc__body{padding:20px 20px 22px}
.vc__make{font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:5px}
.vc__model{font-family:var(--font-h);font-size:20px;font-weight:400;line-height:1.15;color:var(--navy);margin-bottom:14px;letter-spacing:.02em}
.vc__specs{display:flex;margin-bottom:18px}
.vc__spec{flex:1}
.vc__spec:not(:last-child){border-right:1px solid var(--border);margin-right:14px;padding-right:14px}
.vc__spec-label{font-family:var(--font);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-bottom:3px}
.vc__spec-val{font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink)}
.vc__foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.vc__price-main{font-family:var(--font-h);font-size:26px;font-weight:400;color:var(--navy);letter-spacing:.02em;line-height:1;margin-bottom:3px}
.vc__price-lease{font-family:var(--font);font-size:11px;color:var(--gray)}
.vc__btn{padding:9px 18px;background:var(--navy);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;border-radius:8px;transition:background .14s}
.vc__btn:hover{background:var(--brand)}

/* DIENST CARD */
.dc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dc{display:flex;gap:22px;background:var(--white);border:1px solid var(--border);border-radius:var(--rad);padding:26px;transition:transform .2s,box-shadow .2s}
.dc:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(12,30,69,.07)}
.dc__img{width:100px;height:100px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface)}
.dc__img img{width:100%;height:100%;object-fit:cover}
.dc__title{font-family:var(--font-h);font-size:22px;font-weight:400;color:var(--navy);margin-bottom:7px;letter-spacing:.02em}
.dc__text{font-family:var(--font);font-size:14px;color:var(--gray);line-height:1.65;margin-bottom:14px}
.dc__link{font-family:var(--font);font-size:13px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
.dc__link:hover{gap:9px}

/* PAGE HEADER */
.ph{background:var(--navy);padding:56px 0 52px}

/* FILTER BAR */
.filter-bar{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:72px;z-index:100}
.filter-bar__inner{max-width:var(--max);margin:0 auto;padding:14px var(--pad);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.filter-select{padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:var(--font);color:var(--ink);background:var(--white);appearance:none;cursor:pointer;transition:border-color .14s}
.filter-select:focus{outline:none;border-color:var(--brand)}
.filter-btn-reset{padding:10px 16px;background:none;border:none;font-size:13px;font-family:var(--font);color:var(--gray);cursor:pointer;margin-left:auto;transition:color .14s}

/* FORM */
.form-group{margin-bottom:18px}
.form-label{display:block;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.form-control{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:9px;font-size:15px;font-family:var(--font);color:var(--ink);background:var(--white);appearance:none;transition:border-color .14s}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,120,200,.10)}
textarea.form-control{min-height:130px;resize:vertical;line-height:1.55}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

/* CONTACT INFO */
.ci{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ci svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.ci__label{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.ci__val{font-family:var(--font);font-size:15px;color:var(--ink);font-weight:500;line-height:1.4}
.hours-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-family:var(--font);font-size:14px}
.hours-row:last-child{border-bottom:none}
.hours-row .day{color:var(--gray)}
.hours-row .time{font-weight:700;color:var(--ink)}

/* STATS */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06)}
.stat-item{padding:36px 28px;text-align:center}
.stat-num{font-family:var(--font-h);font-size:clamp(48px,5.5vw,72px);font-weight:400;line-height:1;letter-spacing:.02em;color:#fff;margin-bottom:6px}
.stat-num--dark{color:var(--navy)}
.stat-lbl{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.45)}
.stat-lbl--dark{color:var(--gray)}

/* TEAM */
.tc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.tc__photo{aspect-ratio:3/4;border-radius:18px;overflow:hidden;margin-bottom:16px;background:var(--surface)}
.tc__photo img{width:100%;height:100%;object-fit:cover}
.tc__name{font-family:var(--font-h);font-size:26px;font-weight:400;letter-spacing:.03em;color:var(--navy);margin-bottom:4px}
.tc__role{font-family:var(--font);font-size:13px;color:var(--gray)}
.tc__contact{display:flex;gap:10px;margin-top:12px}
.tc__cta{padding:8px 16px;background:var(--surface);border-radius:7px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--navy);transition:background .14s}
.tc__cta:hover{background:var(--border)}

/* FOOTER */
.footer{background:var(--navy)}
.footer__main{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 48px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.flogo__name{font-family:var(--font-h);font-size:22px;color:#fff;letter-spacing:.06em;display:block;margin-bottom:1px}
.flogo__sub{font-family:var(--font);font-size:7.5px;color:rgba(255,255,255,.28);letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:14px}
.flogo__tag{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.38);line-height:1.55;margin-bottom:16px}
.fsocials{display:flex;gap:8px}
.fsocial{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .14s}
.fsocial:hover{background:rgba(255,255,255,.14)}
.fsocial svg{width:15px;height:15px;fill:rgba(255,255,255,.5)}
.fcol__title{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:18px}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fcol a{font-family:var(--font);font-size:14px;color:rgba(255,255,255,.52);transition:color .14s}
.fcol a:hover{color:#fff}
.fci{display:flex;align-items:flex-start;gap:10px;font-family:var(--font);font-size:13.5px;color:rgba(255,255,255,.52);line-height:1.45;margin-bottom:12px}
.fci svg{width:16px;height:16px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px}
.footer__cert{border-top:1px solid rgba(255,255,255,.06)}
.footer__cert-inner{max-width:var(--max);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:14px}
.fcert-lbl{font-family:var(--font);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-right:4px}
.fcert{display:flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;font-family:var(--font);font-size:11px;font-weight:700;color:rgba(255,255,255,.36);letter-spacing:.04em}
.fcert svg{width:12px;height:12px;stroke:var(--amber);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.footer__bottom{background:#060F24}
.footer__bottom-inner{max-width:var(--max);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer__copy{font-family:var(--font);font-size:12px;color:rgba(255,255,255,.18)}
.footer__legal{display:flex;gap:20px}
.footer__legal a{font-family:var(--font);font-size:12px;color:rgba(255,255,255,.22);transition:color .14s}
.footer__legal a:hover{color:rgba(255,255,255,.55)}

/* PAGINERING */
.pagination{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:48px}
.pagination a,.pagination span{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:600;border:1.5px solid var(--border);color:var(--gray);transition:all .14s}
.pagination a:hover{border-color:var(--navy);color:var(--navy)}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* GALLERIJ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px}

/* MAP */
.map-wrap{border-radius:var(--rad);overflow:hidden;height:300px;background:var(--surface)}
.map-wrap iframe{width:100%;height:100%;border:none}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.breadcrumb a{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.45);transition:color .14s}
.breadcrumb a:hover{color:rgba(255,255,255,.8)}
.breadcrumb span{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.25)}
.breadcrumb .current{color:rgba(255,255,255,.65)}

/* TIJDLIJN */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--border)}
.tl-item{position:relative;margin-bottom:36px}
.tl-item::before{content:'';position:absolute;left:-36px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid var(--white);box-shadow:0 0 0 2px var(--brand)}
.tl-year{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.tl-title{font-family:var(--font-h);font-size:20px;color:var(--ink);margin-bottom:4px;letter-spacing:.02em}
.tl-text{font-family:var(--font);font-size:15px;color:var(--gray);line-height:1.65}

/* DIENST SECTION */
.dienst-section{padding:72px 0}
.dienst-section:nth-child(even){background:var(--surface)}
.dienst-section__inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:8fr 5fr;gap:72px;align-items:center}
.dienst-section:nth-child(even) .dienst-section__inner{grid-template-columns:5fr 8fr}
.dienst-section__img{border-radius:20px;overflow:hidden;height:440px}
.dienst-section__img img{width:100%;height:100%;object-fit:cover}
.dienst-section__body p{font-family:var(--font);font-size:16px;color:var(--gray);line-height:1.75;margin-top:16px;margin-bottom:28px}

/* BLOCK EDITOR PREVIEWS */
.koolen-block-preview{background:#f0f4ff;border:2px dashed #1478C8;border-radius:8px;padding:24px;text-align:center;color:#1478C8;font-family:sans-serif}
.koolen-block-preview h3{font-size:14px;font-weight:700;margin-bottom:6px}
.koolen-block-preview p{font-size:12px;opacity:.7}

/* =========================================================
   PAGINA-SPECIFIEKE STIJLEN (uit HTML-prototype)
   ========================================================= */

/* ── FRONT-PAGE ── */

/* ── HERO ── */
.hero { position:relative; height:100vh; min-height:660px; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:url('https://www.koolen-bedrijfswagens.nl/upload/page/header_images_0_1700688872765803965.jpg') center 55%/cover no-repeat; animation:zoom 9s ease forwards; }
@keyframes zoom { from{transform:scale(1.08)} to{transform:scale(1)} }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(108deg, rgba(12,30,69,.94) 0%, rgba(12,30,69,.78) 50%, rgba(12,30,69,.15) 100%); }
.hero__content {
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center;
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  /* Gouden snede: tekst 62%, widget 38% */
  gap: 48px;
}
.hero__text { flex: 1.618; min-width: 0; }
.hero__h1 { font-family:var(--font-h); font-size:clamp(60px,8.5vw,118px); font-weight:400; line-height:0.95; letter-spacing:.02em; color:#fff; margin-bottom:22px; animation:up .6s .3s both; }
.hero__h1 em { font-style:normal; color:var(--amber); }
.hero__eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; animation:up .6s .15s both; }
.hero__eyebrow::before { content:''; width:22px; height:2px; background:var(--amber); }
.hero__lead { font-family:var(--font); font-size:18px; color:rgba(255,255,255,.62); line-height:1.68; margin-bottom:36px; max-width:440px; animation:up .6s .45s both; }
.hero__btns { display:flex; gap:14px; animation:up .6s .6s both; }
@keyframes up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* Zoek-widget — gouden snede: breedte ≈ 1/φ van tekstblok */
.hero__search { flex: 1; max-width:360px; background:#fff; border-radius:20px; padding:28px; flex-shrink:0; animation:up .6s .5s both; box-shadow:0 24px 64px rgba(12,30,69,.3); }
.hs-title { font-family:var(--font-h); font-size:22px; font-weight:400; color:var(--navy); margin-bottom:18px; letter-spacing:.03em; }
.hs-row { margin-bottom:10px; }
.hs-label { display:block; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); margin-bottom:5px; }
.hs-control { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:9px; font-size:14px; font-family:var(--font); color:var(--ink); background:#fff; appearance:none; transition:border-color .14s; }
.hs-control:focus { outline:none; border-color:var(--brand); }
.hs-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--gray); font-family:var(--font); font-size:11px; }
.hs-divider::before,.hs-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.hs-submit { width:100%; margin-top:14px; padding:13px; background:var(--navy); color:#fff; font-family:var(--font); font-size:14px; font-weight:700; border:none; border-radius:9px; cursor:pointer; transition:background .14s; }
.hs-submit:hover { background:var(--brand); }

/* USP strip */
.strip { background:var(--navy); border-bottom:1px solid rgba(255,255,255,.07); }
.strip__inner { max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); }
.strip__item { display:flex; align-items:center; gap:16px; padding:28px 0; }
.strip__item:not(:last-child) { border-right:1px solid rgba(255,255,255,.08); padding-right:32px; margin-right:32px; }
.strip__icon { width:44px; height:44px; background:rgba(20,120,200,.18); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.strip__icon svg { width:22px; height:22px; stroke:var(--amber); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.strip__title { font-family:var(--font); font-size:15px; font-weight:700; color:#fff; margin-bottom:2px; }
.strip__sub { font-family:var(--font); font-size:13px; color:rgba(255,255,255,.42); }

/* Over ons teaser — gouden snede: foto 5fr tekst 8fr */
.over-split { display:grid; grid-template-columns:5fr 8fr; gap:72px; align-items:center; }
.over-photo { border-radius:22px; overflow:hidden; height:560px; position:relative; }
.over-photo img { width:100%; height:100%; object-fit:cover; }
.over-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(12,30,69,.35)); }
.over-tag { position:absolute; bottom:28px; left:28px; z-index:2; background:rgba(12,30,69,.88); backdrop-filter:blur(10px); color:#fff; padding:14px 20px; border-radius:12px; }
.over-tag strong { display:block; font-family:var(--font-h); font-size:28px; font-weight:400; letter-spacing:.03em; margin-bottom:2px; }
.over-tag span { font-family:var(--font); font-size:13px; color:rgba(255,255,255,.55); }
/* Gouden snede stats: 2×2 grid, elk ratio 1.618:1 breedte:hoogte */
.over-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.over-stat { background:var(--surface); border-radius:12px; padding:22px; }
.over-stat .num { font-family:var(--font-h); font-size:44px; font-weight:400; color:var(--navy); letter-spacing:.02em; line-height:1; margin-bottom:5px; }
.over-stat .lbl { font-family:var(--font); font-size:12px; color:var(--gray); }
.over-body { font-family:var(--font); font-size:16px; color:#444; line-height:1.78; margin:16px 0 28px; }

/* Contact CTA */
.cta-strip { background:var(--navy); }
.cta-strip__inner { max-width:var(--max); margin:0 auto; padding:80px var(--pad); display:grid; grid-template-columns:8fr 5fr; gap:60px; align-items:center; }
.cta-h { font-family:var(--font-h); font-size:clamp(36px,4.5vw,62px); font-weight:400; color:#fff; letter-spacing:.02em; line-height:1.0; margin-bottom:10px; }
.cta-sub { font-family:var(--font); font-size:16px; color:rgba(255,255,255,.5); }
.cta-btns { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.wa-btn { display:flex; align-items:center; gap:10px; padding:14px 24px; background:#25D366; color:#fff; font-family:var(--font); font-size:15px; font-weight:700; border-radius:10px; transition:background .14s; white-space:nowrap; }
.wa-btn:hover { background:#1db954; }
.wa-btn svg { width:18px; height:18px; fill:#fff; }


/* ── PAGE-OVER-ONS ── */

.story-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.story-img { border-radius:20px; overflow:hidden; height:500px; }
.story-img img { width:100%; height:100%; object-fit:cover; }


/* ── PAGE-CONTACT ── */

.contact-layout { display:grid; grid-template-columns:1fr 380px; gap:72px; align-items:start; }
.contact-form-card { background:var(--white); border:1px solid var(--border); border-radius:20px; padding:40px; }
.contact-form-title { font-size:22px; font-weight:800; color:var(--navy); margin-bottom:6px; letter-spacing:-.02em; }
.contact-form-sub { font-size:14px; color:var(--gray); margin-bottom:28px; }
.contact-sidebar { display:flex; flex-direction:column; gap:20px; }
.sidebar-block { background:var(--surface); border-radius:var(--rad); padding:28px; }
.sidebar-block-title { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:18px; }
.wa-big { display:flex; align-items:center; gap:12px; padding:16px 22px; background:#25D366; color:#fff; font-size:16px; font-weight:700; border-radius:12px; transition:background .14s; }
.wa-big:hover { background:#1db954; }
.wa-big svg { width:22px; height:22px; fill:#fff; flex-shrink:0; }
.submit-btn { width:100%; padding:15px; background:var(--navy); color:#fff; font-size:16px; font-weight:700; border:none; border-radius:10px; cursor:pointer; font-family:var(--font); transition:background .14s; margin-top:8px; }
.submit-btn:hover { background:var(--blue); }

/* ── HOMEPAGE SPECIFIEK ── */
.hero { position:relative; height:100vh; min-height:640px; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background-position:center 55%; background-size:cover; background-repeat:no-repeat; animation:koolen-zoom 9s ease forwards; }
@keyframes koolen-zoom { from{transform:scale(1.08)} to{transform:scale(1)} }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(108deg, rgba(12,30,69,.94) 0%, rgba(12,30,69,.78) 50%, rgba(12,30,69,.15) 100%); }
.hero__content { position:relative; z-index:2; height:100%; display:flex; align-items:center; max-width:var(--max); margin:0 auto; padding:0 var(--pad); gap:48px; }
.hero__text { flex:1.618; min-width:0; }
.hero__h1 { font-family:var(--font-h); font-size:clamp(60px,8.5vw,118px); font-weight:400; line-height:.95; letter-spacing:.02em; color:#fff; margin-bottom:22px; animation:koolen-up .6s .3s both; }
.hero__h1 em { font-style:normal; color:var(--amber); }
.hero__eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; animation:koolen-up .6s .15s both; }
.hero__eyebrow::before { content:''; width:22px; height:2px; background:var(--amber); }
.hero__lead { font-family:var(--font); font-size:18px; color:rgba(255,255,255,.62); line-height:1.68; margin-bottom:36px; max-width:440px; animation:koolen-up .6s .45s both; }
.hero__btns { display:flex; gap:14px; animation:koolen-up .6s .6s both; }
@keyframes koolen-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.hero__search { flex:1; max-width:360px; background:#fff; border-radius:20px; padding:28px; flex-shrink:0; animation:koolen-up .6s .5s both; box-shadow:0 24px 64px rgba(12,30,69,.3); }
.hs-title { font-family:var(--font-h); font-size:22px; font-weight:400; color:var(--navy); margin-bottom:18px; letter-spacing:.03em; }
.hs-row { margin-bottom:10px; }
.hs-label { display:block; font-family:var(--font); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); margin-bottom:5px; }
.hs-control { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:9px; font-size:14px; font-family:var(--font); color:var(--ink); background:#fff; appearance:none; }
.hs-control:focus { outline:none; border-color:var(--brand); }
.hs-submit { width:100%; margin-top:14px; padding:13px; background:var(--navy); color:#fff; font-family:var(--font); font-size:14px; font-weight:700; border:none; border-radius:9px; cursor:pointer; transition:background .14s; }
.hs-submit:hover { background:var(--brand); }
.strip { background:var(--navy); border-bottom:1px solid rgba(255,255,255,.07); }
.strip__inner { max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); }
.strip__item { display:flex; align-items:center; gap:16px; padding:28px 0; }
.strip__item:not(:last-child) { border-right:1px solid rgba(255,255,255,.08); padding-right:32px; margin-right:32px; }
.strip__icon { width:44px; height:44px; background:rgba(20,120,200,.18); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.strip__icon svg { width:22px; height:22px; stroke:var(--amber); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.strip__title { font-family:var(--font); font-size:15px; font-weight:700; color:#fff; margin-bottom:2px; }
.strip__sub { font-family:var(--font); font-size:13px; color:rgba(255,255,255,.42); }
.over-split { display:grid; grid-template-columns:5fr 8fr; gap:72px; align-items:center; }
.over-photo { border-radius:22px; overflow:hidden; height:560px; position:relative; }
.over-photo img { width:100%; height:100%; object-fit:cover; }
.over-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%,rgba(12,30,69,.35)); }
.over-tag { position:absolute; bottom:28px; left:28px; z-index:2; background:rgba(12,30,69,.88); backdrop-filter:blur(10px); color:#fff; padding:14px 20px; border-radius:12px; }
.over-tag strong { display:block; font-family:var(--font-h); font-size:28px; font-weight:400; letter-spacing:.03em; margin-bottom:2px; }
.over-tag span { font-family:var(--font); font-size:13px; color:rgba(255,255,255,.55); }
.over-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.over-stat { background:var(--surface); border-radius:12px; padding:22px; }
.over-stat .num { font-family:var(--font-h); font-size:44px; font-weight:400; color:var(--navy); letter-spacing:.02em; line-height:1; margin-bottom:5px; }
.over-stat .lbl { font-family:var(--font); font-size:12px; color:var(--gray); }
.over-body { font-family:var(--font); font-size:16px; color:#444; line-height:1.78; margin:16px 0 28px; }
.cta-strip { background:var(--navy); }
.cta-strip__inner { max-width:var(--max); margin:0 auto; padding:80px var(--pad); display:grid; grid-template-columns:8fr 5fr; gap:60px; align-items:center; }
.cta-h { font-family:var(--font-h); font-size:clamp(36px,4.5vw,62px); font-weight:400; color:#fff; letter-spacing:.02em; line-height:1; margin-bottom:10px; }
.cta-sub { font-family:var(--font); font-size:16px; color:rgba(255,255,255,.5); }
.cta-btns { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.wa-btn { display:flex; align-items:center; gap:10px; padding:14px 24px; background:#25D366; color:#fff; font-family:var(--font); font-size:15px; font-weight:700; border-radius:10px; transition:background .14s; white-space:nowrap; }
.wa-btn:hover { background:#1db954; }

/* ── CONTACT SPECIFIEK ── */
.contact-layout { display:grid; grid-template-columns:1fr 380px; gap:72px; align-items:start; }
.contact-form-card { background:var(--white); border:1px solid var(--border); border-radius:20px; padding:40px; }
.contact-form-title { font-family:var(--font-h); font-size:26px; font-weight:400; color:var(--navy); margin-bottom:6px; letter-spacing:.02em; }
.contact-form-sub { font-family:var(--font); font-size:14px; color:var(--gray); margin-bottom:28px; }
.contact-sidebar { display:flex; flex-direction:column; gap:20px; }
.sidebar-block { background:var(--surface); border-radius:var(--rad); padding:28px; }
.sidebar-block-title { font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:18px; }
.wa-big { display:flex; align-items:center; gap:12px; padding:16px 22px; background:#25D366; color:#fff; font-family:var(--font); font-size:16px; font-weight:700; border-radius:12px; transition:background .14s; }
.wa-big:hover { background:#1db954; }
.submit-btn { width:100%; padding:15px; background:var(--navy); color:#fff; font-family:var(--font); font-size:16px; font-weight:700; border:none; border-radius:10px; cursor:pointer; font-family:var(--font); transition:background .14s; }
.submit-btn:hover { background:var(--brand); }

/* ── OVER ONS SPECIFIEK ── */
.story-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.story-img { border-radius:20px; overflow:hidden; height:500px; }
.story-img img { width:100%; height:100%; object-fit:cover; }