:root{--green:#009966;--green-dark:#006f4a;--green-soft:#e7f6f1;--ink:#18211d;--muted:#66706b;--line:#dfe6e2;--paper:#fff;--soft:#f5f7f5;--page-beige:#f6f0e7;--max:1220px;--shadow:0 20px 55px rgba(14,49,36,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:17px/1.65 "DM Sans",Arial,sans-serif;background:#fff}img{max-width:100%;display:block}a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}h1,h2,h3{font-family:"Manrope",Arial,sans-serif;line-height:1.04;letter-spacing:-.045em;margin:0 0 20px}h1{font-size:clamp(3rem,7vw,6.2rem)}h2{font-size:clamp(2rem,4vw,3.8rem)}p{margin:0 0 18px;color:var(--muted)}.container{width:min(calc(100% - 40px),var(--max));margin:auto}.skip{position:fixed;top:-60px;left:12px;z-index:999;background:#111;color:#fff;padding:10px}.skip:focus{top:12px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.07)}.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand img{width:57px;height:57px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:1.15}.brand b{font:800 1.08rem "Manrope"}.brand small{color:var(--green);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.055em;margin-top:5px}.main-nav{display:flex;align-items:center;gap:22px}.main-nav>a{text-decoration:none;text-transform:uppercase;font-weight:800;font-size:.72rem;letter-spacing:.04em;padding:12px 0;border-bottom:2px solid transparent}.main-nav>a:hover,.main-nav>a.active{color:var(--green);border-color:var(--green)}.main-nav .nav-cta{background:var(--green);color:#fff!important;border:0;padding:13px 18px;border-radius:999px}.menu-toggle{display:none;border:0;background:none}.hero{position:relative;min-height:390px;display:grid;align-items:center;overflow:hidden;color:#fff}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%;transform:none}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,20,.91) 0%,rgba(5,39,27,.67) 42%,rgba(0,0,0,.10) 76%)}.hero-copy{position:relative;z-index:1;padding:58px 0;max-width:760px}.hero h1{max-width:760px;font-size:clamp(2.65rem,5.2vw,4.65rem)}.lead{font-size:clamp(1rem,1.45vw,1.22rem);color:rgba(255,255,255,.9);max-width:660px;margin-bottom:10px}.kicker{text-transform:uppercase;letter-spacing:.095em;font-size:.76rem;font-weight:800;color:#bde7d8;margin-bottom:14px}.kicker.green{color:var(--green)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.button{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border:1px solid var(--green);background:var(--green);color:#fff;padding:14px 22px;min-height:50px;border-radius:3px;font-weight:800;text-transform:uppercase;font-size:.76rem;letter-spacing:.035em}.button:hover{background:var(--green-dark)}.button.ghost{background:transparent;border-color:rgba(255,255,255,.8)}.button.ghost:hover{background:#fff;color:var(--ink)}.button.outline-dark{background:transparent;color:var(--ink)}.button.light{background:#fff;color:var(--green-dark);border-color:#fff}.trust{border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust article{padding:34px 28px}.trust article+article{border-left:1px solid var(--line)}.trust b,.trust span{display:block}.trust b{font-family:"Manrope"}.trust span{font-size:.87rem;color:var(--muted);margin-top:6px}.section{padding:100px 0}.soft{background:var(--soft)}.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(50px,9vw,130px)}.prose p{font-size:1.08rem}.text-link{color:var(--green-dark);font-weight:800;text-decoration:none;text-transform:uppercase;font-size:.78rem}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.featured-projects{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.project-tile,.reference-card{border:0;padding:0;text-align:left;background:#fff;overflow:hidden;box-shadow:var(--shadow);position:relative}.project-tile img{height:350px;width:100%;object-fit:cover}.project-tile span{position:absolute;left:0;right:0;bottom:0;padding:55px 18px 18px;color:#fff;font-weight:800;background:linear-gradient(transparent,rgba(0,0,0,.82))}.advice-block{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}.advice-block>img{width:100%;height:470px;object-fit:cover;box-shadow:var(--shadow)}.page-hero{padding:110px 0;background:linear-gradient(135deg,#043f2b,#009966);color:#fff}.page-hero h1{font-size:clamp(3.4rem,7vw,6.5rem)}.page-hero p{color:#d9f2e9;max-width:760px;font-size:1.08rem}.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.reference-card img{width:100%;height:270px;object-fit:cover}.reference-card span{display:block;padding:19px;font-weight:800;font-family:"Manrope"}.catalog-section{padding:55px 0 95px;background:var(--page-beige)}.catalog-toolbar{position:sticky;top:105px;z-index:10;background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(0,0,0,.08);padding:18px;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:14px}.catalog-toolbar label{display:grid;gap:5px}.catalog-toolbar span{font-size:.7rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em;color:var(--muted)}.catalog-toolbar input,.catalog-toolbar select{width:100%;padding:12px;border:1px solid var(--line);background:#fff}.results-line{display:flex;justify-content:space-between;align-items:center;padding:27px 0 15px}.results-line button{border:0;background:none;color:var(--green);font-weight:800}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}.product-card button{border:0;padding:0;background:none}.product-card img{width:100%;height:180px;object-fit:cover}.product-info{padding:17px;display:flex;flex-direction:column;flex:1}.product-meta{display:flex;justify-content:space-between;gap:10px;color:var(--green);font-weight:800;font-size:.74rem}.product-card h2{font-size:1rem;letter-spacing:-.015em;line-height:1.35;margin:10px 0}.product-tags{margin-top:auto;display:flex;gap:5px;flex-wrap:wrap}.product-tags span{font-size:.68rem;padding:4px 7px;background:var(--green-soft);color:var(--green-dark)}.load-wrap{text-align:center;margin-top:35px}.catalog-cta{background:var(--green);color:#fff;padding:60px 0}.catalog-cta .container{display:flex;align-items:center;justify-content:space-between;gap:30px}.catalog-cta h2{margin:0}.catalog-cta .kicker{color:#d6f3e9}.format-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.table-card{box-shadow:var(--shadow);padding:20px 32px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:17px;border-bottom:1px solid var(--line)}th{color:var(--green-dark)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-details{border-left:4px solid var(--green);padding-left:24px;margin:30px 0}.contact-details a{color:var(--green-dark)}.contact-images{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-images img{width:100%;height:100%;min-height:410px;object-fit:cover}.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.route-grid article{background:var(--soft);padding:30px;border-top:5px solid var(--green)}.route-grid h2{font-size:1.45rem}.route-action{text-align:center;margin-top:35px}.site-footer{background:#10251d;color:#fff;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:70px}.footer-grid>div{display:flex;flex-direction:column;gap:7px}.footer-grid img{width:58px;margin-bottom:8px}.footer-grid p,.footer-grid span,.footer-grid a{color:#aebdb6;text-decoration:none}.footer-bottom{margin-top:45px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);color:#86978f;font-size:.84rem}dialog{border:0;padding:0;max-width:min(92vw,1100px);background:#111;color:#fff;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#000c}dialog img{max-height:80vh;max-width:90vw}dialog button{position:absolute;right:8px;top:2px;border:0;background:#fff;color:#000;width:38px;height:38px;font-size:1.6rem}dialog p{padding:14px 18px;margin:0;color:#fff}
@media(max-width:1100px){.menu-toggle{display:block}.menu-toggle span{display:block;width:28px;height:2px;background:var(--ink);margin:6px}.menu-toggle i{font-style:normal;font-size:.65rem}.main-nav{position:fixed;right:0;top:0;width:min(87vw,410px);height:100vh;background:#fff;padding:110px 35px 40px;flex-direction:column;align-items:stretch;transform:translateX(105%);transition:.25s;box-shadow:-20px 0 50px #0002}.main-nav.open{transform:none}.main-nav>a{font-size:.95rem;border-bottom:1px solid var(--line)}.trust-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.trust article:nth-child(3){border-left:0;border-top:1px solid var(--line)}.trust article:nth-child(4){border-top:1px solid var(--line)}.featured-projects{grid-template-columns:repeat(2,1fr)}.reference-grid{grid-template-columns:repeat(2,1fr)}.catalog-toolbar{top:90px;grid-template-columns:1fr 1fr}.route-grid{grid-template-columns:1fr}}
@media(max-width:720px){body{font-size:16px}.container{width:min(calc(100% - 28px),var(--max))}.header-inner{min-height:76px}.brand img{width:44px;height:44px}.brand b{font-size:.92rem}.brand small{font-size:.58rem}.hero{min-height:410px}.hero-copy{padding:52px 0}.hero h1{font-size:clamp(2.45rem,12vw,3.65rem)}.hero>img{object-position:60% center}.actions{flex-direction:column}.actions .button{width:100%}.trust-grid,.intro-grid,.advice-block,.format-layout,.contact-grid,.footer-grid{grid-template-columns:1fr}.trust article+article{border-left:0;border-top:1px solid var(--line)}.section{padding:70px 0}.section-head{align-items:start;flex-direction:column}.featured-projects,.reference-grid,.product-grid{grid-template-columns:1fr}.project-tile img,.reference-card img{height:330px}.advice-block{gap:35px}.catalog-toolbar{position:static;grid-template-columns:1fr}.product-card img{height:230px}.catalog-cta .container{align-items:flex-start;flex-direction:column}.contact-images img{min-height:280px}.contact-images{grid-template-columns:1fr}.page-hero{padding:75px 0}}

/* Homepage-banner: subtiele moderne afwerking, met behoud van de originele huizen */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,153,102,.14) 0%,rgba(0,153,102,.04) 42%,rgba(0,0,0,.03) 100%),
    radial-gradient(ellipse at center,transparent 50%,rgba(3,24,16,.16) 100%);
  mix-blend-mode:multiply;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.03) 0%,transparent 52%,rgba(0,0,0,.14) 100%);
}
.hero>img{
  filter:contrast(1.08) saturate(1.06) brightness(1.035);
  transform:scale(1.015);
  animation:bclHeroDrift 16s ease-out both;
  will-change:transform;
}
.hero-shade{z-index:2}
.hero-copy{z-index:3}
@keyframes bclHeroDrift{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.055) translate3d(-.35%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero>img{animation:none;transform:scale(1.025)}
}
@media(max-width:720px){
  .hero>img{animation-duration:18s}
  .hero::before{background:linear-gradient(90deg,rgba(0,153,102,.12),rgba(0,0,0,.05)),radial-gradient(ellipse at center,transparent 55%,rgba(3,24,16,.13) 100%)}
}

/* Subtiel halfsteensverband en extra diepte in de grote groene vlakken */
.page-hero,
.catalog-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--green);
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.18), rgba(255,255,255,.05) 48%, rgba(0,0,0,.10)),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAxMDggNTQiPgo8ZyBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj4KICA8cGF0aCBkPSJNMCAxSDEwOCBNMCAyOEgxMDggTTAgNTNIMTA4IE0xIDFWMjggTTU1IDFWMjggTTEwNyAxVjI4IE0yOCAyOFY1MyBNODIgMjhWNTMiIHN0cm9rZT0iIzAwNGYzNSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTMiIHN0cm9rZS13aWR0aD0iMSIvPgogIDxwYXRoIGQ9Ik0wIDBIMTA4IE0wIDI3SDEwOCBNMCA1MkgxMDggTTAgMFYyNyBNNTQgMFYyNyBNMTA4IDBWMjcgTTI3IDI3VjUyIE04MSAyN1Y1MiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wNjUiIHN0cm9rZS13aWR0aD0iMSIvPgo8L2c+PC9zdmc+");
  background-size: auto, 108px 54px;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -24px 50px rgba(0,0,0,.10);
}

.page-hero::before,
.catalog-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(105deg, rgba(0,72,48,.30), transparent 46%, rgba(255,255,255,.035));
}

.page-hero > .container,
.catalog-cta > .container {
  position: relative;
  z-index: 1;
}

/* Kleine groene elementen krijgen alleen een zachte materiaalglans */
.main-nav .nav-cta,
.button:not(.ghost):not(.outline-dark):not(.light) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.08), transparent 45%, rgba(0,0,0,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(0,111,74,.13);
}


/* Verfijning: duidelijker halfsteensverband en elegantere, compactere koppen */
.page-hero,
.catalog-cta {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.20), rgba(255,255,255,.065) 48%, rgba(0,0,0,.12)),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAxMDggNTQiPgo8ZyBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj4KICA8cGF0aCBkPSJNMCAxSDEwOCBNMCAyOEgxMDggTTAgNTNIMTA4IE0xIDFWMjggTTU1IDFWMjggTTEwNyAxVjI4IE0yOCAyOFY1MyBNODIgMjhWNTMiIHN0cm9rZT0iIzAwM2YyYSIgc3Ryb2tlLW9wYWNpdHk9IjAuMjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+CiAgPHBhdGggZD0iTTAgMEgxMDggTTAgMjdIMTA4IE0wIDUySDEwOCBNMCAwVjI3IE01NCAwVjI3IE0xMDggMFYyNyBNMjcgMjdWNTIgTTgxIDI3VjUyIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjEyIiBzdHJva2Utd2lkdGg9IjAuOSIvPgo8L2c+PC9zdmc+");
  background-size: auto, 108px 54px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -30px 60px rgba(0,0,0,.13),
    0 10px 28px rgba(0,87,58,.08);
}

/* Grote koppen: minder massief, meer architectonisch karakter */
h1,
.section h2,
.page-hero h1,
.catalog-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .98;
}

h1 { font-size: clamp(2.65rem, 5.4vw, 4.9rem); }
h2 { font-size: clamp(1.85rem, 3.2vw, 3.05rem); }
.hero h1 {
  max-width: 690px;
  font-size: clamp(2.6rem, 4.6vw, 4.35rem);
  letter-spacing: -.03em;
}
.page-hero h1 { font-size: clamp(2.9rem, 5.5vw, 5.1rem); }
.catalog-cta h2 { font-size: clamp(2rem, 3.2vw, 3.15rem); }

/* Kleine kaart- en informatietitels blijven helder en zakelijk */
.product-card h2,
.route-grid h2,
.reference-card span,
.trust b,
.brand b {
  font-family: "Manrope", Arial, sans-serif;
  letter-spacing: -.015em;
}

/* Meer rust rondom de koppen */
.section-head { margin-bottom: 36px; }
.section h2 { margin-bottom: 16px; }
.kicker { letter-spacing: .12em; }

@media(max-width:720px){
  .hero h1{font-size:clamp(2.4rem,10.8vw,3.45rem)}
  .page-hero h1{font-size:clamp(2.7rem,12vw,4rem)}
  .section h2{font-size:clamp(2rem,9vw,2.8rem)}
}

/* Laatste verfijning: vertrouwde typografie, compactere sticky homepage-banner */
h1,
h2,
.section h2,
.page-hero h1,
.catalog-cta h2,
.hero h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.04;
}

/* De kleinere kopgroottes uit de vorige versie blijven behouden */
h1 { font-size: clamp(2.65rem, 5.4vw, 4.9rem); }
h2 { font-size: clamp(1.85rem, 3.2vw, 3.05rem); }
.hero h1 {
  max-width: 690px;
  font-size: clamp(2.45rem, 4.25vw, 4rem);
}
.page-hero h1 { font-size: clamp(2.9rem, 5.5vw, 5.1rem); }
.catalog-cta h2 { font-size: clamp(2rem, 3.2vw, 3.15rem); }

/* Alleen de homepage-banner blijft compact in beeld tijdens het scrollen */
.hero {
  position: sticky;
  top: 88px;
  z-index: 20;
  min-height: 315px;
  height: 315px;
  box-shadow: 0 14px 34px rgba(6, 42, 29, .16);
}
.hero-copy {
  padding: 34px 0;
}
.hero .lead {
  font-size: clamp(.96rem, 1.25vw, 1.12rem);
  line-height: 1.55;
}
.hero .actions {
  margin-top: 15px;
}
.hero .button {
  min-height: 46px;
  padding: 11px 19px;
}

@media(max-width:1100px){
  .hero {
    top: 88px;
    min-height: 290px;
    height: 290px;
  }
  .hero-copy { padding: 28px 0; }
  .hero h1 { font-size: clamp(2.2rem, 6vw, 3.35rem); margin-bottom: 12px; }
  .hero .lead { margin-bottom: 6px; }
}

@media(max-width:720px){
  .hero {
    top: 76px;
    min-height: 245px;
    height: 245px;
  }
  .hero-copy { padding: 20px 0; }
  .hero h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.55rem);
    margin-bottom: 8px;
  }
  .hero .kicker { margin-bottom: 7px; font-size: .65rem; }
  .hero .lead { font-size: .86rem; line-height: 1.42; margin-bottom: 3px; }
  .hero .actions { flex-direction: row; margin-top: 9px; gap: 7px; }
  .hero .actions .button { width: auto; min-height: 40px; padding: 8px 12px; font-size: .64rem; }
  .hero>img { object-position: 62% center; }
}

/* Correctie: homepage-banner terug naar vorige formaat; groene paginatitels compact en sticky */
.hero {
  position: relative;
  top: auto;
  z-index: auto;
  min-height: 390px;
  height: auto;
  box-shadow: none;
}
.hero-copy { padding: 58px 0; }
.hero .lead {
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.65;
}
.hero .actions { margin-top: 20px; }
.hero .button {
  min-height: 50px;
  padding: 14px 22px;
}

/* Compact groen titelvlak op alle binnenpagina's */
.page-hero {
  position: sticky;
  top: 88px;
  z-index: 24;
  padding: 28px 0 25px;
  min-height: 0;
  box-shadow: 0 12px 26px rgba(4, 63, 43, .18);
}
.page-hero .kicker { margin-bottom: 6px; }
.page-hero h1 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.06;
  margin-bottom: 8px;
}
.page-hero p {
  max-width: 820px;
  margin-bottom: 0;
  font-size: .96rem;
  line-height: 1.45;
}

/* Op de productpagina blijft de filterbalk netjes onder de sticky titelbalk */
.catalog-toolbar { top: 225px; }

@media(max-width:1100px){
  .hero {
    min-height: 390px;
    height: auto;
  }
  .hero-copy { padding: 52px 0; }
  .hero h1 { font-size: clamp(2.45rem, 5.2vw, 4.1rem); margin-bottom: 20px; }
  .page-hero { top: 88px; padding: 25px 0 22px; }
  .catalog-toolbar { top: 215px; }
}

@media(max-width:720px){
  .hero {
    min-height: 410px;
    height: auto;
  }
  .hero-copy { padding: 52px 0; }
  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.65rem);
    margin-bottom: 20px;
  }
  .hero .kicker { margin-bottom: 14px; font-size: .76rem; }
  .hero .lead { font-size: 1rem; line-height: 1.55; margin-bottom: 10px; }
  .hero .actions { flex-direction: column; margin-top: 20px; gap: 12px; }
  .hero .actions .button { width: 100%; min-height: 50px; padding: 14px 22px; font-size: .76rem; }
  .page-hero {
    top: 76px;
    padding: 18px 0 16px;
  }
  .page-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    margin-bottom: 5px;
  }
  .page-hero p {
    font-size: .82rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .catalog-toolbar { position: static; }
}

/* Titelvlakken exact gelijk aan de contentbreedte */
.page-hero {
  width: min(calc(100% - 40px), var(--max));
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  overflow: hidden;
}
.page-hero > .container {
  width: 100%;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}

@media(max-width:720px){
  .page-hero {
    width: min(calc(100% - 28px), var(--max));
    border-radius: 6px;
  }
  .page-hero > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Variant: echte baksteenfoto in de groene titelvlakken */
.page-hero,
.catalog-cta {
  background-color: var(--green-dark);
  background-image:
    linear-gradient(105deg, rgba(0, 91, 61, .91), rgba(0, 153, 102, .78) 48%, rgba(0, 84, 56, .90)),
    url("assets/images/brand/page-hero-brick.jpg");
  background-size: cover, cover;
  background-position: center, center 48%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -26px 55px rgba(0,0,0,.16),
    0 12px 30px rgba(0,87,58,.11);
}

.page-hero::before,
.catalog-cta::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.14), transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.13));
}

/* Iets rustiger op kleine schermen zodat de tekst leesbaar blijft */
@media(max-width:720px){
  .page-hero,
  .catalog-cta {
    background-image:
      linear-gradient(105deg, rgba(0, 91, 61, .94), rgba(0, 153, 102, .84), rgba(0, 84, 56, .93)),
      url("assets/images/brand/page-hero-brick.jpg");
    background-position: center, center;
  }
}

/* Variant: natuurlijke baksteen, stijlvol groen kader, geen groene waas */
.page-hero,
.catalog-cta {
  position: sticky;
  background-color: #5a4038;
  background-image: url("assets/images/brand/page-hero-brick.jpg");
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
  border: 4px solid var(--green);
  outline: 1px solid rgba(255,255,255,.55);
  outline-offset: -8px;
  box-shadow:
    0 14px 34px rgba(24, 31, 27, .16),
    inset 0 0 0 1px rgba(0,0,0,.10);
  isolation: isolate;
}

/* Geen gekleurde overlay over de stenen */
.page-hero::before,
.catalog-cta::before {
  content: none !important;
  display: none !important;
}

/* Leesbaarheid zonder de baksteenfoto te verkleuren */
.page-hero > .container,
.catalog-cta > .container {
  position: relative;
  z-index: 1;
}

.page-hero h1,
.page-hero p,
.page-hero .kicker,
.catalog-cta h2,
.catalog-cta p {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.75),
    0 3px 14px rgba(0,0,0,.45);
}

/* Een klein, neutraal tekstpaneel in plaats van een waas over het hele vlak */
.page-hero > .container::before,
.catalog-cta > .container::before {
  content: "";
  position: absolute;
  inset: -10px auto -10px -14px;
  width: min(860px, calc(100% + 28px));
  z-index: -1;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(18,18,18,.47), rgba(18,18,18,.18) 72%, transparent);
  pointer-events: none;
}

@media(max-width:720px){
  .page-hero,
  .catalog-cta {
    border-width: 3px;
    outline-offset: -6px;
    background-position: center;
  }
  .page-hero > .container::before,
  .catalog-cta > .container::before {
    inset: -8px -8px;
    width: auto;
    background: rgba(18,18,18,.38);
  }
}

/* Premium paginabanner: rustige studio-opstelling met echte materiaalbeleving */
.page-hero {
  background-color: #231f1b;
  background-image:
    linear-gradient(90deg,
      rgba(13, 19, 16, .92) 0%,
      rgba(13, 19, 16, .77) 32%,
      rgba(13, 19, 16, .33) 62%,
      rgba(13, 19, 16, .08) 100%),
    url("assets/images/brand/page-hero-premium.jpg");
  background-size: cover, cover;
  background-position: center, center 52%;
  background-repeat: no-repeat;
  border: 2px solid var(--green);
  outline: none;
  box-shadow:
    0 16px 42px rgba(18, 35, 28, .16),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28);
  overflow: hidden;
}

.page-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
}

.page-hero > .container::before {
  content: none !important;
  display: none !important;
}

.page-hero h1,
.page-hero p,
.page-hero .kicker {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.52);
}

.page-hero .kicker {
  color: #bde7d8;
}

@media(max-width:720px){
  .page-hero {
    background-position: center, 68% center;
    border-width: 2px;
  }
}


/* Volledig zichtbare premium banner, zonder groene rand */
.page-hero {
  background-color: #211d19;
  background-image: url("assets/images/brand/page-hero-premium-wide.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 14px 36px rgba(18, 28, 23, .16);
}
.page-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,18,14,.78) 0%, rgba(7,18,14,.48) 34%, rgba(7,18,14,.10) 62%, transparent 78%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }

/* Dezelfde materiaalbanner op de homepage */
.hero > img {
  object-fit: cover;
  object-position: center;
  filter: contrast(1.03) saturate(1.02);
}
.hero-shade {
  background: linear-gradient(90deg, rgba(7,18,14,.91) 0%, rgba(7,18,14,.72) 33%, rgba(7,18,14,.24) 60%, rgba(7,18,14,.04) 80%);
}

@media(max-width:720px){
  .page-hero {
    background-position: 62% center;
  }
  .hero > img {
    object-position: 64% center;
  }
}

/* Definitieve warme showroom-banner, zonder donkere of gekleurde waas */
.page-hero {
  width: min(calc(100% - 40px), var(--max));
  min-height: 350px;
  margin: 24px auto 0;
  padding: 56px 0;
  display: grid;
  align-items: center;
  position: relative;
  top: auto;
  background: #f1dfc5 url("assets/images/brand/premium-showroom-banner.jpg") center center / cover no-repeat;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 4px;
  box-shadow: 0 16px 42px rgba(80, 58, 35, .13);
  overflow: hidden;
}
.page-hero::before,
.page-hero > .container::before {
  content: none !important;
  display: none !important;
}
.page-hero > .container {
  width: 100%;
  max-width: none;
  padding: 0 38px;
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  max-width: 650px;
  margin-bottom: 15px;
  color: #123f31;
  font-size: clamp(2.55rem, 5vw, 4.55rem);
  text-shadow: none;
}
.page-hero p {
  max-width: 600px;
  margin-bottom: 0;
  color: #3f423e;
  font-size: 1rem;
  text-shadow: none;
}
.page-hero .kicker {
  color: #7e6136;
  text-shadow: none;
}

/* Dezelfde warme materiaalcompositie op de homepage */
.hero {
  min-height: 390px;
  color: #153d31;
  background: #f1dfc5;
}
.hero > img {
  object-fit: cover;
  object-position: center center;
  filter: none;
  transform: none;
  animation: none;
}
.hero::before,
.hero::after,
.hero-shade {
  content: none !important;
  display: none !important;
  background: none !important;
}
.hero-copy {
  max-width: 650px;
  padding: 58px 0;
}
.hero h1 {
  color: #123f31;
  text-shadow: none;
}
.hero .lead {
  max-width: 570px;
  color: #3f423e;
}
.hero .kicker {
  color: #7e6136;
}
.hero .button.ghost {
  color: #123f31;
  border-color: rgba(18,63,49,.55);
  background: rgba(255,255,255,.35);
}
.hero .button.ghost:hover {
  background: #fff;
}

@media(max-width:720px){
  .page-hero {
    width: min(calc(100% - 28px), var(--max));
    min-height: 330px;
    padding: 42px 0;
    background-position: 63% center;
  }
  .page-hero > .container { padding: 0 20px; }
  .page-hero h1 { font-size: clamp(2.35rem, 11vw, 3.55rem); max-width: 78%; }
  .page-hero p { max-width: 70%; font-size: .92rem; }
  .hero { min-height: 410px; }
  .hero > img { object-position: 63% center; }
  .hero-copy { max-width: 76%; padding: 44px 0; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.45rem); }
  .hero .lead { font-size: .95rem; }
}

/* 2026-07: tekstkolommen in de showroombanners vast links uitlijnen */
/* De homepagekop gebruikt weer de volledige sitecontainer, zodat de linkerzijde
   exact gelijk loopt met het logo en de blokken onder de banner. */
.hero-copy {
  width: min(calc(100% - 40px), var(--max));
  max-width: var(--max);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
.hero-copy > .kicker,
.hero-copy > h1,
.hero-copy > .lead,
.hero-copy > .actions {
  width: min(100%, 540px);
  max-width: 540px;
}
.hero-copy > h1 {
  max-width: 540px;
}
.hero-copy > .lead {
  max-width: 500px;
}

/* Binnenpagina's: korte, vaste tekstkolom aan de linkerzijde van de banner.
   Hierdoor blijft de materiaalopstelling rechts altijd vrij. */
.page-hero > .container {
  width: 100%;
  max-width: none;
  padding-left: 38px;
  padding-right: 38px;
  margin: 0;
}
.page-hero h1,
.page-hero .kicker,
.page-hero p {
  width: min(100%, 500px);
  max-width: 500px;
}
.page-hero p {
  max-width: 470px;
  line-height: 1.55;
}

/* Op middelgrote schermen blijft de tekst in het rustige linkerdeel. */
@media (max-width: 1000px) {
  .hero-copy > .kicker,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .actions {
    width: min(48vw, 500px);
    max-width: min(48vw, 500px);
  }
  .hero h1 {
    font-size: clamp(2.15rem, 5vw, 3.45rem);
  }
  .page-hero h1,
  .page-hero .kicker,
  .page-hero p {
    width: min(46%, 470px);
    max-width: min(46%, 470px);
  }
  .page-hero h1 {
    font-size: clamp(2.25rem, 5.4vw, 3.8rem);
  }
}

/* Mobiel: tekst blijft links, met een rustige warme basis erachter.
   Zo kan de tekst nooit over de stenen heen lopen. */
@media (max-width: 720px) {
  .hero-copy {
    width: min(calc(100% - 28px), var(--max));
  }
  .hero-copy > .kicker,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .actions {
    width: min(78%, 430px);
    max-width: min(78%, 430px);
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 20px auto 20px -14px;
    width: min(84vw, 470px);
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, rgba(246,240,231,.98) 0%, rgba(246,240,231,.92) 76%, rgba(246,240,231,0) 100%);
    pointer-events: none;
  }
  .page-hero > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-hero h1,
  .page-hero .kicker,
  .page-hero p {
    width: min(72%, 390px);
    max-width: min(72%, 390px);
  }
  .page-hero p {
    font-size: .9rem;
  }
}


/* Productpagina verfijning: CTA verwijderd en filters strak onder de header */
.catalog-toolbar {
  top: 88px;
  z-index: 46;
  margin-top: 0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 30px rgba(18, 35, 28, .12);
}

/* Voorkom dat productkaarten visueel door de sticky filterbalk heen komen */
.catalog-section {
  position: relative;
  isolation: isolate;
}
.catalog-toolbar::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -14px;
  height: 14px;
  background: #fff;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .catalog-toolbar { top: 88px; }
}

@media (max-width: 720px) {
  .catalog-toolbar {
    position: sticky;
    top: 76px;
    border-radius: 0 0 6px 6px;
  }
}

/* 2026-07 mobiele verfijning: lichter, luchtiger en zonder beeldwaas */
html { color-scheme: only light; }

@media (max-width: 720px) {
  html, body {
    overflow-x: hidden;
    background: #fff !important;
    color: var(--ink) !important;
  }

  /* Rustige mobiele header met witte logovariant */
  .site-header {
    background: #10251d !important;
    border-bottom-color: rgba(255,255,255,.10);
    backdrop-filter: none;
  }
  .header-inner {
    min-height: 84px;
    padding-block: 8px;
  }
  .brand img {
    content: url("assets/images/brand/footer-logo.png");
    width: 48px;
    height: 48px;
  }
  .brand b { color: #fff; font-size: .94rem; }
  .brand small { color: #86dbc0; font-size: .57rem; }
  .menu-toggle { color: #fff; padding: 4px 0 0 12px; }
  .menu-toggle span { background: #fff; opacity: .82; }
  .menu-toggle i { color: #fff; font-size: .72rem; }

  /* Homepage: foto en tekst staan los van elkaar, zonder waas of overlay */
  .hero {
    position: relative !important;
    top: auto !important;
    z-index: auto;
    display: block;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 215px;
    overflow: hidden;
    background: #f6f0e7 !important;
    box-shadow: none;
  }
  .hero > img {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 215px;
    object-fit: cover;
    object-position: 68% center;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  .hero::before,
  .hero::after,
  .hero-shade,
  .hero-copy::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  .hero-copy {
    position: relative;
    width: min(calc(100% - 40px), var(--max));
    max-width: none;
    margin: 0 auto;
    padding: 30px 0 36px;
    color: #123f31;
  }
  .hero-copy > .kicker,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .actions {
    width: 100%;
    max-width: 100%;
  }
  .hero .kicker {
    margin-bottom: 11px;
    color: #8b6838;
    font-size: .68rem;
    line-height: 1.45;
  }
  .hero h1 {
    margin-bottom: 18px;
    color: #123f31;
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.04em;
  }
  .hero .lead {
    margin-bottom: 0;
    color: #4d514d;
    font-size: .98rem;
    line-height: 1.65;
  }
  .hero .actions {
    gap: 12px;
    margin-top: 26px;
  }
  .hero .button {
    min-height: 52px;
  }
  .hero .button.ghost {
    color: #123f31;
    border-color: rgba(18,63,49,.30);
    background: rgba(255,255,255,.65);
  }

  /* Binnenpagina's: beeld boven, tekst eronder. Geen tekst meer over stenen. */
  .page-hero {
    width: min(calc(100% - 28px), var(--max));
    min-height: 0 !important;
    margin: 16px auto 0;
    padding: 200px 0 0 !important;
    display: block;
    background: #f6f0e7 !important;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(80,58,35,.10);
    overflow: hidden;
  }
  .page-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 200px;
    background: url("assets/images/brand/premium-showroom-banner.jpg") 68% center / cover no-repeat !important;
    pointer-events: none;
  }
  .page-hero > .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 27px 24px 31px;
    background: #f6f0e7;
  }
  .page-hero h1,
  .page-hero .kicker,
  .page-hero p {
    width: 100%;
    max-width: 100%;
  }
  .page-hero .kicker {
    margin-bottom: 8px;
    color: #8b6838;
    font-size: .67rem;
  }
  .page-hero h1 {
    margin-bottom: 13px;
    color: #123f31;
    font-size: clamp(2.05rem, 9vw, 2.8rem);
    line-height: 1.06;
  }
  .page-hero p {
    color: #555851;
    font-size: .94rem;
    line-height: 1.6;
  }

  /* Meer ademruimte tussen de hoofdonderdelen */
  .trust article { padding: 30px 20px; }
  .section { padding: 62px 0; }
  .section-head { gap: 12px; margin-bottom: 26px; }
  .intro-grid,
  .advice-block,
  .contact-grid,
  .format-layout { gap: 34px; }

  /* Productfilters blijven handig sticky, maar als compacte horizontale balk */
  .catalog-section { padding-top: 24px; }
  .catalog-toolbar {
    position: sticky;
    top: 84px;
    z-index: 46;
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 0;
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(18,35,28,.10);
    background: rgba(255,255,255,.98) !important;
  }
  .catalog-toolbar::before { display: none; }
  .catalog-toolbar label {
    flex: 0 0 184px;
    min-width: 184px;
    gap: 4px;
  }
  .catalog-toolbar label.search {
    flex-basis: 265px;
    min-width: 265px;
  }
  .catalog-toolbar input,
  .catalog-toolbar select {
    min-height: 48px;
    padding: 11px 12px;
    background: #fff !important;
    color: var(--ink) !important;
  }
  .results-line { padding-top: 25px; }
  .product-grid { gap: 22px; }
  .product-card { border-radius: 10px; }

  /* Voorkom automatische donkere herkleuring van belangrijke vlakken */
  .trust,
  .section,
  .soft,
  .catalog-section,
  .product-card,
  .reference-card,
  .table-card,
  .contact-details {
    color-scheme: light;
  }
}

/* 2026-07: volledige begeleidende bannertekst op mobiele schermen */
@media (max-width: 720px) {
  .page-hero,
  .page-hero > .container,
  .hero,
  .hero-copy {
    height: auto !important;
    max-height: none !important;
  }

  .page-hero p,
  .page-hero .lead,
  .hero .lead,
  .hero-copy > .lead {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    line-clamp: unset !important;
  }

  .page-hero > .container {
    padding-bottom: 34px !important;
  }
}

/* 2026-07 harde mobiele bannerfix: oud img-element volledig uitschakelen */
@media (max-width: 720px) {
  .hero {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 215px !important;
    overflow: hidden !important;
    background: #f6f0e7 !important;
  }

  .hero > img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 215px !important;
    z-index: 0 !important;
    background-image: url("assets/images/brand/premium-showroom-banner-mobile.webp?v=5") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  .hero::after,
  .hero-shade {
    content: none !important;
    display: none !important;
  }

  .hero-copy {
    position: relative !important;
    z-index: 1 !important;
  }

  .page-hero {
    position: relative !important;
    background-image: none !important;
    padding-top: 200px !important;
  }

  .page-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 200px !important;
    background-image: url("assets/images/brand/premium-showroom-banner-mobile.webp?v=5") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }
}



/* Definitieve mobiele bannerfix: echte HTML-afbeeldingen */
.hero-media,
.page-hero-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-media img,
.page-hero-media img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero > img {
  display: none !important;
}

.hero-copy,
.page-hero > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .hero {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 215px !important;
    background: #f6f0e7 !important;
    overflow: hidden !important;
  }

  .hero-media {
    height: 215px !important;
    bottom: auto !important;
  }

  .hero-media img {
    object-position: center center !important;
  }

  .hero::before,
  .hero::after,
  .hero-shade {
    content: none !important;
    display: none !important;
  }

  .page-hero {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 200px 0 0 !important;
    background: #f6f0e7 !important;
    overflow: hidden !important;
  }

  .page-hero-media {
    height: 200px !important;
    bottom: auto !important;
  }

  .page-hero-media img {
    object-position: center center !important;
  }

  .page-hero::before {
    content: none !important;
    display: none !important;
  }
}


/* Mobiele banner: verwijder lege ruimte boven de afbeelding */
@media (max-width: 720px) {
  .hero {
    padding-top: 0 !important;
  }

  .hero-media {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .hero-media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 18 / 10 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Artikelen */
.article-overview{background:var(--page-beige)}.section-heading{max-width:800px;margin-bottom:34px}.publication-heading{margin-top:72px}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.article-grid-featured{grid-template-columns:minmax(0,570px)}.article-card{background:#fff;border:1px solid rgba(31,50,41,.12);border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(32,35,30,.08);transition:.22s}.article-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(32,35,30,.13)}.article-card-image{display:block;aspect-ratio:3/2;overflow:hidden;background:#e8dfd1}.article-card-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}.article-card:hover .article-card-image img{transform:scale(1.025)}.article-card-body{padding:26px}.article-label{display:inline-block;margin-bottom:12px;color:#067d58;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.article-card h3{margin:0 0 12px;font-size:clamp(1.55rem,2.2vw,2.05rem);line-height:1.08}.article-card h3 a{color:inherit;text-decoration:none}.article-card p{margin:0;color:#4a514c}.article-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:24px}.text-link{color:#087a57;font-weight:800;text-underline-offset:4px}.article-detail{background:var(--page-beige)}.article-detail-header{padding:clamp(42px,7vw,86px) 0;background:#ece3d6;border-bottom:1px solid rgba(31,50,41,.12)}.article-detail-head-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,80px);align-items:center}.article-detail-head-grid h1{max-width:800px;margin:10px 0 20px;font-size:clamp(2.65rem,6vw,5.7rem);line-height:.96}.article-detail-head-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:0 22px 60px rgba(32,35,30,.18)}.back-link{display:inline-block;margin-bottom:28px;color:#37433d;font-weight:700;text-decoration:none}.article-intro{max-width:720px;font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.7}.article-author{margin-top:24px;font-weight:800;color:#087a57}.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,300px);gap:clamp(46px,8vw,110px);align-items:start;padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(60px,8vw,110px)}.article-content section{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid rgba(31,50,41,.13)}.article-content h2{margin-bottom:14px;font-size:clamp(1.75rem,3vw,2.55rem)}.article-content p{font-size:1.06rem;line-height:1.78;color:#3e4742}.article-note{padding:18px 20px;background:#e8dfd1;border-left:4px solid #087a57;border-radius:0 10px 10px 0}.article-download{padding:30px;margin-top:42px;background:#17231d;color:#fff;border-radius:18px}.article-download h2{color:#fff;margin:0 0 10px}.article-download p{color:rgba(255,255,255,.76)}.article-aside{position:sticky;top:118px;padding:24px;background:#fff;border:1px solid rgba(31,50,41,.12);border-radius:16px}.article-aside strong{display:block;margin-bottom:14px;font-size:1.05rem}.article-aside ul{margin:0 0 22px;padding-left:20px;color:#505852}.article-aside li+li{margin-top:10px}
@media(max-width:850px){.article-grid,.article-grid-featured{grid-template-columns:1fr}.article-detail-head-grid,.article-layout{grid-template-columns:1fr}.article-detail-head-grid img{order:-1}.article-aside{position:static}}
@media(max-width:720px){.publication-heading{margin-top:52px}.article-card-body{padding:22px}.article-detail-header{padding-top:28px}.article-detail-head-grid h1{font-size:clamp(2.5rem,13vw,4rem)}.article-layout{padding-top:44px}}


/* Vereenvoudigde Artikelen-pagina: rustig leesvoer */
.reading-list-section {
  background: var(--page-beige);
}

.reading-list {
  display: grid;
  gap: 28px;
}

.reading-item {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 58px);
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  background: #fff;
  border: 1px solid rgba(31, 50, 41, .12);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(32, 35, 30, .07);
}

.reading-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: #e8dfd1;
}

.reading-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reading-copy h2 {
  margin: 6px 0 14px;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.05;
}

.reading-copy p {
  max-width: 720px;
  margin: 0 0 24px;
  color: #4a514c;
  font-size: 1.05rem;
  line-height: 1.72;
}

@media (max-width: 720px) {
  .reading-item {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .reading-cover {
    aspect-ratio: 4 / 3;
  }
}


/* Gelijke achtergrondkleur voor binnenpagina's */
.catalog-section,
.article-overview,
.article-detail,
.reading-list-section {
  background-color: var(--page-beige) !important;
}


/* Producten en Artikelen in lijn met Referenties en Contact */
.catalog-section,
.article-overview,
.article-detail,
.reading-list-section {
  background: #fff !important;
  background-color: #fff !important;
}


/* Producten: mobiele paginabanner altijd zichtbaar */
@media (max-width: 720px) {
  .product-hero .page-hero-media {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 200px !important;
  }

  .product-hero .page-hero-media img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Footerlogo: op alle pagina's de witte logovariant gebruiken */
.site-footer .footer-grid img {
  content: url("assets/images/brand/footer-logo.png");
}


/* Homepage concept 2 — personal expertise, concise proof and clear progression */
.home-v2 .home-hero{min-height:510px}
.home-v2 .home-hero .hero-copy{max-width:820px;padding:72px 0}
.home-v2 .home-hero h1{font-size:clamp(3rem,5.6vw,5.4rem);max-width:850px}
.home-v2 .home-hero .lead{max-width:760px;font-size:clamp(1.05rem,1.5vw,1.28rem)}
.home-v2 .home-trust{background:#fff}
.home-v2 .home-trust .trust-grid{align-items:stretch}
.home-v2 .home-trust article{padding:27px 24px;min-height:132px}
.home-v2 .home-trust b{font-size:1.03rem}
.home-v2 .home-trust span{font-size:.9rem;line-height:1.5}
.home-v2 .paul-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:80px;align-items:center}
.home-v2 .paul-portrait{position:relative}
.home-v2 .paul-portrait:after{content:none!important;display:none!important}
.home-v2 .paul-portrait img{width:100%;height:520px;object-fit:cover;object-position:center top;box-shadow:var(--shadow)}
.home-v2 .paul-copy{max-width:680px}
.home-v2 .paul-copy .intro-lead{font-size:1.16rem;color:var(--ink)}
.home-v2 .experience-head{display:grid;grid-template-columns:1fr .85fr;gap:60px;align-items:end}
.home-v2 .career-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.home-v2 .career-timeline article{background:#fff;padding:32px;border-top:5px solid var(--green);box-shadow:0 14px 34px rgba(14,49,36,.08)}
.home-v2 .career-timeline span{display:block;color:var(--green);font:800 .78rem "Manrope";text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.home-v2 .career-timeline h3{font-size:1.28rem;letter-spacing:-.025em;margin-bottom:12px}
.home-v2 .career-timeline p{font-size:.94rem;margin:0}
.home-v2 .presentation-block{gap:72px}
.home-v2 .presentation-block>img{height:500px}
.home-v2 .small-note{font-size:.88rem;border-left:3px solid var(--green);padding-left:14px;margin:25px 0;color:var(--ink)}
.home-v2 .home-final-cta{background:linear-gradient(135deg,#043f2b,#009966);color:#fff;padding:72px 0}
.home-v2 .final-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}
.home-v2 .final-cta-inner h2{font-size:clamp(2.1rem,3.7vw,3.8rem);margin-bottom:12px}
.home-v2 .final-cta-inner p{color:#d9f2e9;margin-bottom:0;max-width:720px}
.home-v2 .final-cta-inner .button{flex:0 0 auto}
@media(max-width:1000px){
  .home-v2 .paul-grid{grid-template-columns:.8fr 1.2fr;gap:45px}
  .home-v2 .paul-portrait img{height:460px}
  .home-v2 .career-timeline{grid-template-columns:1fr}
}
@media(max-width:720px){
  .home-v2 .home-hero{min-height:500px}
  .home-v2 .home-hero .hero-copy{padding:56px 0}
  .home-v2 .home-hero h1{font-size:clamp(2.55rem,12vw,3.75rem)}
  .home-v2 .paul-grid,.home-v2 .experience-head{grid-template-columns:1fr;gap:34px}
  .home-v2 .paul-portrait{max-width:460px}
  .home-v2 .paul-portrait img{height:auto;max-height:520px}
  .home-v2 .career-timeline{margin-top:26px}
  .home-v2 .presentation-block{gap:34px}
  .home-v2 .presentation-block>img{height:340px}
  .home-v2 .final-cta-inner{align-items:flex-start;flex-direction:column}
  .home-v2 .final-cta-inner .button{width:100%}
}


/* Homepage concept 2 — verfijning: oorspronkelijke bannerverhoudingen en compactere opbouw */
.home-v2 .home-hero{min-height:390px}
.home-v2 .home-hero .hero-copy{max-width:760px;padding:58px 0}
.home-v2 .home-hero h1{font-size:clamp(2.65rem,5.2vw,4.65rem);max-width:760px}
.home-v2 .home-hero .lead{max-width:660px;font-size:clamp(1rem,1.45vw,1.22rem)}
.home-v2 .section{padding:78px 0}
.home-v2 .experience-head{gap:44px}
.home-v2 .career-timeline{margin-top:30px}
.home-v2 .career-timeline article{padding:27px}
.home-v2 .presentation-block{gap:56px}
.home-v2 .presentation-block>img{height:455px}
.home-v2 .home-final-cta{padding:58px 0}
@media(max-width:720px){
  .home-v2 .home-hero{min-height:410px}
  .home-v2 .home-hero .hero-copy{padding:52px 0}
  .home-v2 .home-hero h1{font-size:clamp(2.45rem,12vw,3.65rem)}
  .home-v2 .section{padding:58px 0}
  .home-v2 .career-timeline{margin-top:22px}
  .home-v2 .presentation-block>img{height:320px}
  .home-v2 .home-final-cta{padding:50px 0}
}