:root { --blue:#1f497d; --blue-deep:#112e4f; --green:#97ce9b; --green-strong:#69a971; --ink:#202c39; --muted:#647180; --paper:#fff; --soft:#f3f6f8; --line:#dbe2e8; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body { max-width:100%; margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
.header-inner>*,.intro-grid>*,.section-heading>*,.quote-grid>*,.contact-grid>*,.footer-main>* { min-width:0; }
.contact-card a,.footer-contact a { overflow-wrap:anywhere; }
.wrap { width:min(1180px,calc(100% - 44px)); margin-inline:auto; }
.section { padding:100px 0; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:10px 16px; color:#fff; background:var(--blue); }
.skip-link:focus { top:16px; }
.topbar { color:#fff; background:var(--blue-deep); font-size:.88rem; }
.topbar-inner { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.topbar-inner div { display:flex; gap:28px; }
.topbar a { text-decoration:none; }
.topbar a:hover { text-decoration:underline; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.97); border-bottom:1px solid rgba(20,48,77,.12); backdrop-filter:blur(10px); }
.header-inner { position:relative; min-height:102px; display:flex; align-items:center; gap:38px; }
.brand { width:276px; flex:0 0 auto; text-decoration:none; }
.brand img { width:100%; height:78px; object-fit:contain; object-position:left center; }
nav { display:flex; align-items:center; gap:30px; margin-left:auto; }
nav a { position:relative; color:#243547; font-weight:700; text-decoration:none; }
nav a::after { content:""; position:absolute; right:0; bottom:-7px; left:0; height:2px; background:var(--green-strong); transform:scaleX(0); transition:transform .18s ease; }
nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); }
.menu-toggle { display:none; width:46px; height:46px; flex:0 0 46px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; color:var(--blue); background:#fff; border:2px solid var(--blue); border-radius:3px; cursor:pointer; }
.menu-toggle span { width:20px; height:2px; background:currentColor; transition:transform .18s ease,opacity .18s ease; }
.menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity:0; }
.menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.menu-toggle:hover { color:#fff; background:var(--blue-deep); border-color:var(--blue-deep); }
.menu-toggle:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 22px; border:2px solid var(--blue); border-radius:3px; color:#fff; background:var(--blue); font-weight:800; text-decoration:none; transition:background .18s ease,color .18s ease,transform .18s ease; }
.button:hover { background:var(--blue-deep); border-color:var(--blue-deep); transform:translateY(-1px); }
.header-cta { color:var(--blue); min-height:48px; padding-inline:20px; background:var(--green); border-color:var(--green); }
.header-cta:hover { color:#fff; background:var(--blue); border-color:var(--blue); }
a:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.hero { position:relative; min-height:660px; overflow:hidden; display:grid; align-items:center; color:#fff; background:var(--blue-deep); }
.hero-slides,.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:58% center; }
.hero-slide { opacity:0; transition:opacity 1.15s ease-in-out; }
.hero-slide-glass { transform:scaleX(-1); }
.hero-slide.is-active { opacity:1; }
.hero-slide-erker { object-position:center top; }
.hero-slide-house { object-position:center center; }
.hero-image.hero-slide-windows { background:var(--blue-deep); }
.hero-slide-windows img { width:100%; height:100%; object-fit:cover; object-position:inherit; }
.hero-slide-kunststof img { width:100%; height:100%; object-fit:cover; object-position:center top; }
@media (max-width:650px) {
  .hero-slide-kunststof { background:var(--blue-deep); }
  .hero-slide-kunststof img { object-fit:contain; }
}
@media (min-width:1280px) {
  .hero-slide-kunststof img { object-position:right center; }
}
@media (min-width:981px) {
  .hero { min-height:max(660px,33.334vw); }
  .hero-slide-windows img { object-fit:cover; object-position:48% center; }
}
.hero-shade { background:linear-gradient(90deg,rgba(9,28,49,.92) 0%,rgba(14,41,69,.78) 42%,rgba(14,41,69,.22) 76%,rgba(14,41,69,.08) 100%); }
.hero::after { content:""; position:absolute; bottom:0; left:0; width:38%; height:8px; background:var(--green); }
.hero-content { position:relative; z-index:2; padding-top:74px; padding-bottom:78px; }
.kicker,.eyebrow { margin:0 0 18px; color:var(--green-strong); font-size:.8rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.kicker { color:var(--green); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:24px; font-size:clamp(3.25rem,6vw,5.7rem); line-height:.99; letter-spacing:-.045em; }
.hero-content>p:not(.kicker) { max-width:660px; margin-bottom:31px; color:#edf4f8; font-size:1.2rem; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }
.button-green { color:#123052; background:var(--green); border-color:var(--green); }
.button-green:hover { color:#fff; background:var(--green-strong); border-color:var(--green-strong); }
.button-ghost { background:rgba(10,34,59,.25); border-color:rgba(255,255,255,.75); }
.button-ghost:hover { background:#fff; border-color:#fff; color:var(--blue); }
.promise-bar { position:relative; z-index:4; color:#fff; background:var(--blue); }
.promise-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.promise-grid div { min-height:108px; display:flex; justify-content:center; flex-direction:column; padding:20px 34px; border-left:1px solid rgba(255,255,255,.18); }
.promise-grid div:last-child { border-right:1px solid rgba(255,255,255,.18); }
.promise-grid strong { font-size:1.02rem; }
.promise-grid span { color:#cbd8e5; font-size:.9rem; }
.intro-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:84px; align-items:center; }
h2 { margin-bottom:24px; font-size:clamp(2.35rem,4.1vw,3.85rem); line-height:1.08; letter-spacing:-.04em; }
.lead { color:var(--blue); font-size:1.22rem; font-weight:700; }
.intro-copy p:not(.eyebrow) { max-width:650px; }
.intro-copy p:last-of-type { color:var(--muted); }
.arrow-link { display:inline-block; margin-top:10px; color:var(--blue); font-weight:850; text-decoration-thickness:2px; text-underline-offset:6px; transition:color .18s ease; }
.arrow-link:hover, .arrow-link:focus-visible { color:var(--green-strong); }
.brand-panel { position:relative; min-height:390px; display:grid; place-items:center; padding:58px; overflow:hidden; background:#eef5f0; border-left:8px solid var(--green); }
.brand-panel::before { content:""; position:absolute; right:-100px; bottom:-100px; width:280px; height:280px; border:1px solid rgba(31,73,125,.14); transform:rotate(26deg); }
.local-brand-panel::before { display:none; }
.brand-panel img { position:relative; width:100%; mix-blend-mode:multiply; }
.brand-note { position:absolute; right:0; bottom:0; min-width:250px; padding:13px 22px; color:#fff; background:var(--blue); }
.brand-note strong { display:block; }
.services { background:var(--soft); border-top:1px solid var(--line); }
.services-intro { display:grid; grid-template-columns:1.05fr .95fr; gap:84px; align-items:center; margin-bottom:50px; }
.section-heading { display:grid; grid-template-columns:1fr; gap:10px; align-items:start; margin-bottom:50px; }
.services-intro .section-heading { margin-bottom:0; }
.section-heading h2 { margin-bottom:0; }
.section-heading>p { max-width:470px; margin-bottom:6px; color:var(--muted); font-size:1.08rem; }
.service-brand-panel { min-height:390px; padding:0; }
.service-brand-panel img { width:100%; height:390px; object-fit:cover; mix-blend-mode:normal; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { display:grid; grid-template-columns:55px minmax(0,1fr); column-gap:16px; row-gap:8px; align-content:start; min-height:0; padding:28px 24px; background:#fff; border:1px solid var(--line); border-top:4px solid transparent; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.service-card:hover { transform:translateY(-4px); border-top-color:var(--green-strong); box-shadow:0 18px 38px rgba(19,47,77,.1); }
.service-card.primary { color:#fff; background:var(--blue); border-color:var(--blue); }
.service-icon { display:grid; place-items:center; grid-column:1; grid-row:1 / span 2; width:55px; height:55px; margin-bottom:0; color:var(--blue); background:#eaf4ec; font-size:1.25rem; font-weight:900; }
.primary .service-icon { color:var(--blue); background:var(--green); }
.service-card h3 { grid-column:2; min-width:0; margin-bottom:0; font-size:1.28rem; }
.service-card p { grid-column:2; min-width:0; margin-bottom:0; color:var(--muted); }
.service-card.primary p { color:#d6e2ec; }
.services-extra { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:18px; padding:27px 30px; color:#fff; background:var(--blue-deep); }
.process { color:#fff; background:var(--blue-deep); }
.eyebrow.light { color:var(--green); }
.process-intro { display:grid; grid-template-columns:1.05fr .95fr; gap:84px; align-items:center; margin-bottom:48px; }
.process-title { max-width:720px; }
.process-title h2 { margin-bottom:0; }
.process-brand-panel { height:390px; min-height:390px; padding:0; }
.process-brand-panel img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:normal; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.2); }
.steps li { min-height:250px; padding:31px 27px 20px 0; border-right:1px solid rgba(255,255,255,.2); }
.steps li:not(:first-child) { padding-left:27px; }
.steps li:last-child { border-right:0; }
.steps li>span { display:block; margin-bottom:46px; color:var(--green); font-size:.88rem; font-weight:900; letter-spacing:.13em; }
.steps h3 { margin-bottom:9px; font-size:1.25rem; }
.steps p { margin-bottom:0; color:#c7d4df; }
.quote { background:#eef5f0; border-bottom:1px solid var(--line); }
.quote-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:84px; align-items:center; }
.quote-main { min-width:0; }
.quote-copy h2 { margin-bottom:18px; }
.quote-copy>p:last-child { max-width:720px; margin-bottom:0; color:var(--muted); font-size:1.08rem; }
.quote-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; margin-top:28px; }
.quote-brand-panel { min-height:390px; padding:0; }
.quote-brand-panel img { width:100%; height:390px; object-fit:cover; mix-blend-mode:normal; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:start; }
.contact-copy>p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:1.12rem; }
.contact-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.button-outline { color:var(--blue); background:#fff; }
.button-outline:hover { color:#fff; }
.contact-card { padding:39px; color:#fff; background:var(--blue); border-bottom:7px solid var(--green); font-style:normal; box-shadow:0 18px 45px rgba(31,73,125,.16); }
.contact-card h3 { margin-bottom:24px; font-size:1.55rem; }
.contact-card dl { margin:0; }
.contact-card dl div { display:grid; grid-template-columns:130px 1fr; gap:15px; padding:16px 0; border-top:1px solid rgba(255,255,255,.2); }
.contact-card dt { color:#b9cad9; font-size:.84rem; }
.contact-card dd { margin:0; font-weight:700; }
.contact-card a { text-decoration-thickness:1px; text-underline-offset:4px; }
footer { color:#d7e1e9; background:#0b2239; }
.footer-main { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:60px; align-items:center; padding-top:50px; padding-bottom:45px; }
.footer-brand { position:relative; z-index:1; }
.footer-brand img { width:auto; max-width:100%; height:92px; padding:6px 8px; object-fit:contain; object-position:left center; background:#fff; border-radius:3px; filter:none; opacity:1; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.footer-brand p { margin:5px 0 0; color:#9fb1c0; font-size:.9rem; }
.footer-links,.footer-contact { display:grid; gap:8px; }
.footer-links a,.footer-contact a { text-decoration:none; }
.footer-links a:hover,.footer-contact a:hover { color:var(--green); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:8px 0; padding-top:18px; padding-bottom:24px; color:#879bac; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; }
.footer-copyright { margin-left:auto; }
.legal-hero { padding:28px 0 30px; color:#fff; background:var(--blue-deep); border-bottom:8px solid var(--green); }
.legal-hero .eyebrow { margin-bottom:8px; color:var(--green); }
.legal-hero h1 { max-width:none; margin-bottom:10px; font-size:clamp(2.7rem,5vw,4.6rem); }
.legal-hero p:last-child { max-width:720px; margin-bottom:0; color:#d7e3ec; font-size:1rem; }
.legal { padding:76px 0 100px; }
.legal-content { max-width:860px; }
.legal-content h2 { margin-top:54px; margin-bottom:16px; font-size:clamp(1.65rem,3vw,2.35rem); letter-spacing:-.025em; }
.legal-content h2:first-child { margin-top:0; }
.legal-content h3 { margin-top:30px; margin-bottom:10px; font-size:1.15rem; }
.legal-content p,.legal-content li { color:#465568; }
.legal-content ul { padding-left:1.45rem; list-style:none; }
.legal-content ul li { position:relative; }
.legal-content ul li::before { content:"♦"; position:absolute; top:.5em; left:-1.35rem; color:var(--green-strong); font-size:.72em; line-height:1; }
.legal-content li+li { margin-top:6px; }
.legal-contact { margin:28px 0 12px; padding:26px 28px; background:var(--soft); border-left:5px solid var(--green-strong); }
.legal-contact strong { display:block; margin-bottom:5px; color:var(--blue); }
.legal-contact p { margin:0; }
.legal-content a { color:var(--blue); font-weight:700; text-underline-offset:4px; }
.back-link { display:inline-flex; margin-top:46px; color:var(--blue); font-weight:800; text-underline-offset:5px; }
@media (min-width:981px) {
  .footer-main { grid-template-columns:minmax(180px,.8fr) minmax(0,2fr) minmax(180px,.8fr); gap:24px; }
  .footer-links { grid-template-columns:repeat(3,max-content) minmax(0,1fr); grid-template-rows:repeat(2,auto); grid-auto-flow:column; column-gap:20px; }
  .footer-terms { grid-column:4; grid-row:1; }
}
@media (max-width:980px) {
  .header-inner { min-height:88px; } .brand { width:220px; } .brand img { height:68px; } .main-nav { position:absolute; z-index:30; top:100%; right:0; left:0; display:none; align-items:stretch; flex-direction:column; gap:0; width:100%; margin:0; padding:10px 0; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 16px 30px rgba(17,46,79,.16); } .main-nav.is-open { display:flex; } .main-nav a { padding:12px 22px; } .main-nav a::after { display:none; } .header-cta { margin-left:auto; } .menu-toggle { display:inline-flex; }
  .hero { min-height:610px; } .hero-image { object-position:66% center; } .hero-slide-erker { object-position:60% top; } .hero-shade { background:linear-gradient(90deg,rgba(9,28,49,.93),rgba(14,41,69,.64) 72%,rgba(14,41,69,.3)); }
  .intro-grid,.services-intro,.process-intro,.quote-grid,.contact-grid { grid-template-columns:1fr; gap:58px; } .quote-actions { justify-content:flex-start; } .section-heading { grid-template-columns:1fr; gap:10px; } .service-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); } .steps li:nth-child(2) { border-right:0; } .steps li:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.2); }
  .footer-main { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1 / -1; }
}
@media (max-width:650px) {
  .wrap { width:min(100% - 28px,1180px); } .section { padding:76px 0; } .topbar-inner>span { display:none; } .topbar-inner { min-height:40px; justify-content:center; font-size:clamp(.6875rem,3.55vw,.875rem); } .topbar-inner div { flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(4px,1.5vw,10px); white-space:nowrap; } .topbar-inner div>span { flex-basis:auto; text-align:center; }
  .brand { width:138px; } .brand img { height:58px; } .header-inner { min-height:76px; gap:8px; } .header-cta { min-height:42px; padding:8px 10px; font-size:.76rem; white-space:nowrap; } .menu-toggle { width:42px; height:42px; flex-basis:42px; } .main-nav a { padding-inline:14px; }
  .hero { min-height:580px; align-items:end; } .hero-image { object-position:64% center; } .hero-slide-erker { object-position:64% top; } .hero-shade { background:linear-gradient(0deg,rgba(9,28,49,.98) 0%,rgba(9,28,49,.82) 54%,rgba(9,28,49,.3) 100%); }
  .hero-content { padding-top:120px; padding-bottom:62px; } h1 { font-size:clamp(3rem,14vw,4.35rem); } .hero-content>p:not(.kicker) { font-size:1.03rem; } .hero-actions { align-items:stretch; flex-direction:column; }
  .promise-grid { grid-template-columns:1fr; padding-block:8px; } .promise-grid div { min-height:auto; padding:16px 4px; border-left:0; border-bottom:1px solid rgba(255,255,255,.15); } .promise-grid div:last-child { border-right:0; border-bottom:0; }
  .brand-panel { min-height:300px; padding:34px; } .service-brand-panel,.quote-brand-panel { padding:0; } .process-brand-panel { height:300px; min-height:300px; padding:0; } .service-brand-panel img,.quote-brand-panel img { height:300px; } .process-brand-panel img { width:100%; height:100%; } .service-grid { grid-template-columns:1fr; gap:12px; } .service-card { grid-template-columns:44px minmax(0,1fr); column-gap:12px; padding:20px 18px; } .service-icon { width:44px; height:44px; } .services-extra { align-items:flex-start; flex-direction:column; }
  .steps { grid-template-columns:1fr; } .steps li,.steps li:not(:first-child) { min-height:auto; padding:28px 0; border-right:0; border-top:1px solid rgba(255,255,255,.2); } .steps li:first-child { border-top:0; } .steps li>span { margin-bottom:20px; }
  .quote-actions,.contact-buttons { align-items:stretch; flex-direction:column; } .contact-card { padding:29px 24px; } .contact-card dl div { grid-template-columns:1fr; gap:2px; }
  .footer-main { grid-template-columns:1fr; gap:30px; } .footer-brand { grid-column:auto; } .footer-copyright { margin-left:0; }
  .legal-hero { padding:28px 0 30px; } .legal { padding:56px 0 72px; } .legal-content h2 { margin-top:42px; } .legal-contact { padding:22px 20px; }
}
@media (max-width:380px) {
  .brand { width:104px; } .header-cta { padding-inline:7px; font-size:.68rem; } .menu-toggle { width:40px; height:40px; flex-basis:40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }

/* Fotoblokken onder kunststof kozijnen en schuifpuien. */
.kozijnen-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.kozijnen-photo { min-width:0; overflow:hidden; border-left:8px solid var(--green); }
.kozijnen-photo:nth-child(2) { border-left-color:var(--blue); }
.kozijnen-photo img { display:block; width:100%; height:auto; }
@media (max-width:650px) {
  .kozijnen-gallery { grid-template-columns:minmax(0,1fr); }
}

/* Klantbeoordelingen en de uitgebreide navigatie. */
@media (min-width:981px) {
  .header-inner { gap:22px; }
  .brand { width:230px; }
  .main-nav { gap:18px; }
  .main-nav a { white-space:nowrap; }
  .footer-links { grid-template-columns:repeat(4,max-content); column-gap:18px; }
  .footer-terms { grid-column:4; grid-row:2; }
}
@media (min-width:981px) and (max-width:1100px) {
  .header-inner { gap:16px; }
  .brand { width:180px; }
  .main-nav { gap:14px; font-size:.9rem; }
  .header-cta { padding-inline:16px; }
  .footer-main { grid-template-columns:160px minmax(0,1fr); }
  .footer-contact { grid-column:2; }
}
.main-nav a[aria-current="page"]::after { transform:scaleX(1); }
.reviews-hero h1 { font-size:clamp(2rem,6vw,4.6rem); overflow-wrap:break-word; }
.reviews-section { background:var(--soft); }
.reviews-summary { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:32px; padding:30px 34px; color:#fff; background:var(--blue); border-left:8px solid var(--green); }
.reviews-score { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.reviews-score strong { font-size:3.3rem; line-height:1; }
.reviews-score p { margin:4px 0 0; }
.review-stars { color:#f5b400; font-size:1.35rem; letter-spacing:.1em; line-height:1.2; }
.reviews-summary .button { flex-shrink:0; }
.reviews-heading { margin-bottom:24px; font-size:clamp(1.6rem,3vw,2.4rem); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.review-card { min-width:0; display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid var(--line); border-left:6px solid var(--green); }
.review-card h3 { margin:0 0 12px; font-size:1.13rem; }
.review-card blockquote { margin:22px 0; }
.review-card blockquote p { margin:0; }
.review-no-text { margin:22px 0; color:var(--muted); font-style:italic; }
.review-source { display:block; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--blue); font-size:.86rem; font-weight:700; text-underline-offset:4px; }
.reviews-note { margin:24px 0 0; color:var(--muted); font-size:.85rem; }
.reviews-contact { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:42px; padding:32px; background:#eaf4ec; }
.reviews-contact h2 { margin:0 0 8px; font-size:1.75rem; }
.reviews-contact p { margin:0; }
.reviews-contact .button { flex-shrink:0; }
@media (max-width:980px) { .reviews-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
  .reviews-hero h1 { font-size:clamp(1.8rem,8.6vw,3rem); }
  .reviews-section { padding:36px 0 48px; }
  .reviews-summary,.reviews-contact { align-items:stretch; flex-direction:column; gap:22px; padding:24px 20px; }
  .reviews-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .review-card { padding:22px; }
  .reviews-contact { margin-top:28px; }
}

/* Mobiel: klantbeoordelingen voor de offerte, met een lege regel rond de offerte. */
@media (max-width:650px) {
  .footer-links .footer-reviews { grid-row:5; }
  .footer-links .footer-quote { grid-row:6; margin-block:1.62em; }
}

/* Google-score en sterren, gecentreerd tussen logo en navigatie. */
.header-rating { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:#f5b400; font-size:1.35rem; letter-spacing:.1em; line-height:1; text-decoration:none; white-space:nowrap; }
.header-rating:hover { color:#d69b00; }
.header-rating-score { display:inline-flex; align-items:baseline; gap:.25em; color:var(--blue); font-size:.9rem; font-weight:700; letter-spacing:0; }
.header-rating-value { font-size:1.5em; line-height:1; }
@media (min-width:981px) {
  .header-inner { gap:18px; }
  .brand { width:132px; }
  .header-rating { flex:1 1 0; min-width:max-content; }
  .main-nav { margin-left:0; flex-shrink:0; }
}
@media (min-width:981px) and (max-width:1100px) {
  .header-inner { gap:8px; }
  .header-rating { gap:6px; font-size:1rem; }
  .header-rating-score { font-size:.8rem; }
}
@media (min-width:651px) and (max-width:980px) {
  .header-inner { gap:16px; }
  .brand { width:144px; }
}
@media (max-width:650px) {
  .header-inner { min-height:90px; }
  .brand { padding-bottom:16px; }
  .header-rating { position:absolute; left:0; bottom:2px; width:138px; min-height:28px; gap:5px; font-size:.9rem; letter-spacing:.03em; }
  .header-rating-score { font-size:.72rem; }
}
@media (max-width:380px) {
  .header-rating { left:-12px; width:128px; gap:4px; font-size:.76rem; letter-spacing:0; }
  .header-rating-score { font-size:.65rem; }
}

/* Kunststof kozijnen: grotere desktoptitel en groene contactstrook. */
@media (min-width:981px) {
  .services-extra strong { font-size:2rem; line-height:1.3; }
}
.kozijnen-contact { display:flex; justify-content:flex-end; align-items:center; margin-top:18px; padding:27px 30px; background:var(--green); text-align:right; }
.kozijnen-contact a { color:var(--blue); font-weight:800; text-underline-offset:5px; transition:color .18s ease; }
.kozijnen-contact a:hover, .kozijnen-contact a:focus-visible { color:#fff; }
@media (max-width:650px) {
  .kozijnen-contact { padding:20px 18px; }
}

/* Kunststof kozijnen: mobiele titel gelijk aan de dienstentitels. */
@media (max-width:650px) {
  .services-extra strong { font-size:1.28rem; }
}

/* Vaste mobiele maat voor de halfgevulde cirkel, onafhankelijk van het lettertype. */
@media (max-width:650px) {
  .service-icon-sun > span { display:none; }
  .service-icon-sun::before { content:""; width:17px; height:17px; box-sizing:border-box; border:1.5px solid currentColor; border-radius:50%; background:linear-gradient(to right,currentColor 50%,transparent 50%); }
}

/* Klikbare diensten en inhoudelijke dienstenpagina’s. */
a.service-card { text-decoration:none; color:inherit; }
a.service-card.primary { color:#fff; }
a.service-card h3::after { content:" →"; display:inline; color:var(--green-strong); white-space:nowrap; }
a.service-card.primary h3::after { color:var(--green); }
a.service-card:focus-visible { outline:3px solid var(--green-strong); outline-offset:4px; }
.service-page-hero .breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; color:#d7e3ec; font-size:.9rem; }
.breadcrumbs a { text-underline-offset:4px; }
.breadcrumbs a:hover { color:var(--green); }
.service-hero-layout { display:block; }
.service-hero-heading { display:flex; align-items:center; justify-content:flex-start; gap:24px; margin-bottom:10px; }
.service-page-hero .service-hero-heading h1 { flex:0 1 auto; min-width:0; margin-bottom:0; }
.service-hero-layout > div { min-width:0; }
.service-page-hero .service-hero-layout p:last-child { max-width:none; }
.service-page-hero h1 { font-size:clamp(2.2rem,5vw,4.6rem); overflow-wrap:break-word; }
.service-page-hero .service-icon { flex:0 0 100px; grid-column:auto; grid-row:auto; width:100px; height:100px; color:var(--blue); background:var(--green); font-size:2.5rem; border-radius:0; }
.service-page-hero .service-icon-sun::before { content:""; display:block; width:1em; height:1em; box-sizing:border-box; border:.055em solid currentColor; border-radius:50%; background:linear-gradient(to right,currentColor 50%,transparent 50%); }
.service-page-hero .service-icon-sun > span { display:none; }
.service-page-section { padding:64px 0 76px; }
.service-page-layout { display:grid; grid-template-columns:minmax(0,780px) minmax(230px,1fr); gap:64px; align-items:start; }
.service-copy { min-width:0; }
.service-copy section+section { margin-top:38px; }
.service-copy h2 { margin-bottom:18px; font-size:clamp(1.55rem,2.8vw,2.15rem); line-height:1.2; letter-spacing:-.025em; }
.service-copy p { color:#465568; margin-bottom:18px; }
.service-sidebar { min-width:0; padding:26px; background:var(--soft); border-left:6px solid var(--green); }
.service-sidebar h2 { margin-bottom:14px; font-size:1.25rem; letter-spacing:0; }
.service-sidebar p { color:var(--muted); font-size:.95rem; }
.service-sidebar .button { width:100%; margin-top:10px; }
.service-sidebar .sidebar-mail { display:block; margin-top:15px; font-size:.9rem; font-weight:700; color:var(--blue); overflow-wrap:anywhere; text-underline-offset:4px; }
.service-list { display:grid; gap:0; margin:28px 0 0; padding:0; list-style:none; }
.service-list li { border-top:1px solid var(--line); }
.service-list a { display:block; padding:10px 0; text-decoration:none; color:var(--blue); font-weight:700; }
.service-list a:hover,.service-list a:focus-visible { color:var(--green-strong); }
.service-list a[aria-current="page"] { color:var(--ink); font-weight:900; }
.service-faq { margin-top:46px; }
.service-faq details { border-top:1px solid var(--line); padding:16px 0; }
.service-faq details:last-child { border-bottom:1px solid var(--line); }
.service-faq summary { cursor:pointer; color:var(--blue); font-weight:700; }
.service-faq summary:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.service-faq details p { margin:12px 0 0; }
.service-contact-band { padding:36px; margin-top:46px; background:#eaf4ec; border-left:6px solid var(--green-strong); }
.service-contact-band h2 { margin-bottom:12px; }
.service-contact-band p { margin-bottom:0; }
.service-contact-band .contact-buttons { margin-top:22px; }
.service-related { padding:46px 0; background:var(--soft); border-top:1px solid var(--line); }
.service-related h2 { font-size:1.6rem; letter-spacing:-.025em; }
.service-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:980px) {
 .service-page-layout { grid-template-columns:minmax(0,1fr); gap:38px; }
 .service-sidebar { padding:24px; }
 .service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
}
@media (max-width:650px) {
 .legal-hero { padding:20px 0 24px; }
 .service-hero-heading { gap:16px; }
 .service-page-hero .service-icon { display:grid; flex-basis:58px; width:58px; height:58px; font-size:1.8rem; }
 .service-page-hero .service-icon-sun::before { width:.75em; height:.75em; }
 .service-page-hero .breadcrumbs { margin-bottom:10px; font-size:.82rem; }
 .service-page-section { padding:36px 0 46px; }
 .service-copy section+section { margin-top:30px; }
 .service-contact-band { padding:24px 20px; margin-top:32px; }
 .service-list { grid-template-columns:minmax(0,1fr); }
 .service-related { padding:32px 0; }
 .service-related-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
}


/* Submenu onder Diensten, met dezelfde navigatie op iedere pagina. */
.nav-dropdown { position:relative; }
.nav-services-toggle { display:flex; align-items:center; gap:7px; padding:0; border:0; background:transparent; color:#243547; font:inherit; font-weight:700; line-height:inherit; cursor:pointer; white-space:nowrap; }
.nav-services-toggle:hover,.nav-services-toggle[aria-expanded="true"] { color:var(--green-strong); }
.nav-services-toggle:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.nav-chevron { width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .18s ease; }
.nav-services-toggle[aria-expanded="true"] .nav-chevron { transform:rotate(225deg); }
.services-submenu { position:absolute; z-index:40; top:100%; left:0; min-width:260px; max-height:calc(100dvh - 160px); overflow-y:auto; margin:0; padding:8px 0; list-style:none; background:#fff; border-top:4px solid var(--green); box-shadow:0 12px 28px rgba(17,46,79,.18); }
.services-submenu[hidden] { display:none; }
.main-nav .services-submenu a { display:block; padding:9px 18px; color:var(--blue); font-size:.94rem; font-weight:700; line-height:1.4; }
.main-nav .services-submenu a::after { display:none; }
.main-nav .services-submenu a:hover,.main-nav .services-submenu a:focus-visible,.main-nav .services-submenu a[aria-current="page"] { color:var(--blue-deep); background:#eaf4ec; }
@media (max-width:980px) {
 .main-nav { max-height:calc(100dvh - 128px); overflow-y:auto; }
 .nav-services-toggle { width:100%; justify-content:space-between; padding:12px 22px; text-align:left; }
 .services-submenu { position:static; min-width:0; max-height:none; overflow:visible; margin:0 22px 10px; padding:0; border-top:0; border-left:3px solid var(--green); box-shadow:none; }
 .main-nav .services-submenu a { padding:10px 14px; white-space:normal; }
}
@media (max-width:650px) {
 .nav-services-toggle { padding-inline:14px; }
 .services-submenu { margin-inline:14px; }
}

/* Dienstenoverzicht en ruimte voor het extra menu-item. */
.duties-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.duties-layout { margin-top:52px; }
.duties-layout section[id] { scroll-margin-top:160px; }
.duties-steps { padding-left:20px; margin-bottom:16px; color:var(--muted); }
.duties-steps li { margin-bottom:8px; }
@media (min-width:1101px) and (max-width:1279px) {
 .main-nav { gap:12px; font-size:.93rem; }
 .header-inner { gap:12px; }
 .header-cta { padding-inline:14px; font-size:.93rem; }
}
@media (min-width:981px) and (max-width:1100px) {
 .main-nav { gap:10px; font-size:.82rem; }
 .header-inner { gap:8px; }
 .brand { width:110px; }
 .header-rating { font-size:.85rem; gap:4px; }
 .header-rating-score { font-size:.72rem; }
 .header-cta { padding-inline:12px; font-size:.82rem; }
}
@media (max-width:650px) {
 .duties-grid { grid-template-columns:minmax(0,1fr); }
 .duties-layout { margin-top:32px; }
 .footer-links .footer-reviews { grid-row:6; }
 .footer-links .footer-quote { grid-row:7; }
}

/* Desktop: beoordeling midden in de ruimte tussen werkgebied en contact. */
.topbar-rating { display:none; }
@media (min-width:981px) {
 .topbar-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; }
 .topbar-inner > span,.topbar-inner > div { white-space:nowrap; }
 .topbar .topbar-rating {
  display:inline-flex; position:static; width:100%; min-width:0; min-height:40px;
  justify-content:center; gap:6px; margin:0;
  font-size:1rem; letter-spacing:.03em;
 }
 .topbar-rating .header-rating-score { color:#fff; font-size:.78rem; }
 .topbar-rating .header-rating-value { font-size:1.2375em; }
 .header-inner {
  --header-brand-width:132px;
  display:grid;
  grid-template-columns:var(--header-brand-width) minmax(0,1fr) auto;
  grid-template-rows:auto;
  padding-block:6px;
 }
 .header-inner > .brand { grid-column:1; grid-row:1; width:100%; }
 .header-inner > .brand img { width:100%; height:auto; }
 .header-inner > .header-rating { display:none; }
 .header-inner > .main-nav { grid-column:2; grid-row:1; justify-self:end; }
 .header-inner > .header-cta { grid-column:3; grid-row:1; }
}
@media (min-width:981px) and (max-width:1100px) {
 .header-inner { --header-brand-width:110px; }
 .topbar-inner { gap:12px; }
 .topbar-inner > div { gap:16px; }
}

/* Subsidie: leesbare bedragen en bronverwijzingen. */
.subsidy-copy section[id] { scroll-margin-top:155px; }
.subsidy-copy ul,.subsidy-copy ol { padding-left:22px; color:#465568; }
.subsidy-copy li { margin-bottom:10px; }
.subsidy-updated,.subsidy-copy .subsidy-source { color:var(--muted); font-size:.85rem; }
.subsidy-copy .subsidy-source a { color:var(--blue); text-underline-offset:3px; }
.subsidy-table-scroll { max-width:100%; overflow-x:auto; margin:24px 0; }
.subsidy-table-scroll:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.subsidy-table { width:100%; min-width:440px; border-collapse:collapse; text-align:left; font-size:.95rem; }
.subsidy-table caption { text-align:left; font-weight:700; margin-bottom:12px; color:var(--blue); }
.subsidy-table th,.subsidy-table td { padding:15px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.subsidy-table thead { color:#fff; background:var(--blue); }
.subsidy-table tbody tr:nth-child(even) { background:var(--soft); }
.subsidy-notice { padding:24px; border-left:6px solid var(--green-strong); background:#eaf4ec; }
.subsidy-notice strong { display:block; color:var(--blue); margin-bottom:12px; }
.subsidy-notice p:last-child { margin-bottom:0; }
@media (max-width:650px) {
 .footer-links .footer-reviews { grid-row:7; }
 .footer-links .footer-quote { grid-row:8; }
 .subsidy-notice { padding:20px 18px; }
}

/* Projectfoto en bronverwijzingen bij asbest klasse 1. */
.asbest-copy section[id] { scroll-margin-top:155px; }
.asbest-project { padding:28px; background:var(--soft); border-left:6px solid var(--green); }
.asbest-project-layout { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1fr); gap:26px; align-items:start; }
.asbest-project figure { margin:0; min-width:0; }
.asbest-project img { width:100%; height:auto; }
.asbest-project figcaption { margin-top:10px; color:var(--muted); font-size:.82rem; line-height:1.5; }
.asbest-project-layout > div p:last-child { margin-bottom:0; }
.asbest-copy .asbest-source { font-size:.83rem; color:var(--muted); line-height:1.5; }
.asbest-source a,.asbest-copy p > a { color:var(--blue); text-underline-offset:3px; }
@media (max-width:650px) {
 .asbest-project { padding:22px 18px; }
 .asbest-project-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
}

/* Optimalisatie: bereikbare ankers, voldoende contrast en duidelijke bediening. */
:root { --anchor-offset:130px; --green-text:#356c3e; }
[id] { scroll-margin-top:var(--anchor-offset); }
main:focus { outline:none; }
.eyebrow { color:var(--green-text); }
.eyebrow.light,.legal-hero .eyebrow { color:var(--green); }
.arrow-link:hover,.arrow-link:focus-visible,.service-list a:hover,.nav-services-toggle:hover,.nav-services-toggle[aria-expanded="true"] { color:var(--green-text); }
.button-green:hover { color:#fff; background:var(--blue-deep); border-color:var(--blue-deep); }
.kozijnen-contact a:hover,.kozijnen-contact a:focus-visible { color:#fff; background:var(--blue); outline-offset:4px; }
.service-copy p>a:not(.button) { color:var(--blue); text-underline-offset:3px; }
button:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.hero button:focus-visible { outline-color:#fff; }
.slideshow-controls { position:absolute; right:max(22px,calc((100vw - 1180px)/2)); bottom:20px; z-index:3; display:flex; gap:8px; }
.slideshow-controls[hidden] { display:none; }
.slideshow-control { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #fff; border-radius:0; background:var(--blue-deep); color:#fff; cursor:pointer; }
.slideshow-control:hover { background:var(--blue); }
.slideshow-control svg { display:block; pointer-events:none; }
.fallback-nav { display:flex; flex-wrap:wrap; gap:24px; padding-block:14px; }
.service-card,.service-related-grid>* { min-width:0; }
@media (max-width:980px) {
 .main-nav { overscroll-behavior:contain; }
 .main-nav a,.nav-services-toggle,.service-list a { min-height:44px; }
}
@media (max-width:650px) {
 :root { --anchor-offset:110px; }
 .topbar-inner div a { padding-block:10px; }
 .hero-content { padding-bottom:90px; }
 .slideshow-controls { right:14px; bottom:18px; }
 .footer-links a,.footer-contact a { min-height:44px; display:flex; align-items:center; }
 .service-hero-heading h1 { hyphens:auto; }
 .service-related-grid,.asbest-project-layout { min-width:0; }
 .fallback-nav { font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce) { .hero-slide { transition:none; } }

/* Contactpictogrammen in de desktop-bovenbalk. */
.topbar-contact-icon { display:none; }
@media (min-width:981px) {
 .topbar-contact-item { display:inline-flex; align-items:center; gap:6px; }
 .topbar-contact-icon { display:block; flex:0 0 16px; width:16px; height:16px; }
 .topbar-person-icon { flex-basis:14px; width:14px; height:14px; }
 .topbar-contact-item[href^="tel:"] .topbar-contact-icon { flex-basis:14px; width:14px; height:14px; }
}

/* Ingekleurd pictogram van Ramen vervangen bij het werkgebied. */
.topbar-region-icon { display:none; }
@media (min-width:981px) {
 .topbar-region { display:block; }
 .topbar-region-icon { display:inline-block; width:18px; height:.72em; margin-right:7px; vertical-align:baseline; color:#fff; }
}

/* Voorkom tekstselectie; houd invoervelden bruikbaar. */
body {
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Houd het aantal beoordelingen leesbaar op de witte mobiele header. */
@media (max-width:980px) {
  .header-inner .header-rating-count { color:var(--blue) !important; }
}
@media (max-width:650px) {
  .header-inner .header-rating { width:max-content; justify-content:flex-start; }
}