/* ==========================================================================
   Draagmuur Verwijderen Tilburg - huisstijl
   Alle tekst/achtergrond-combinaties zijn getoetst op minimaal 4.5:1.
   ========================================================================== */

:root{
	--ink:#12202B;
	--slate:#1B2A38;
	--body:#3A4A57;
	--muted:#5A6B78;
	--line:#DCE4EA;
	--soft:#F4F7F9;
	--tint:#FFF4EC;
	--white:#fff;
	--accent:#F0872B;
	--accent-dark:#B8400A;
	--accent-link:#A83B08;
	--accent-light:#FFB07A;
	--ok:#0F7A4F;
	--err:#B3261E;
	--radius:14px;
	--radius-sm:10px;
	--shadow:0 1px 2px rgba(18,32,43,.06),0 8px 24px rgba(18,32,43,.08);
	--shadow-lg:0 2px 6px rgba(18,32,43,.08),0 20px 48px rgba(18,32,43,.14);
	--maxw:1200px;
	--font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
	margin:0;
	font-family:var(--font);
	font-size:17px;
	line-height:1.65;
	color:var(--body);
	background:var(--white);
	-webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto}
img{display:block}
svg{flex:none}

h1,h2,h3,h4{color:var(--ink);line-height:1.22;margin:0 0 .5em;font-weight:750;letter-spacing:-.015em;overflow-wrap:break-word}
h1{font-size:clamp(1.75rem,1.15rem + 2.6vw,3.05rem);letter-spacing:-.025em}
@media (max-width:560px){h1,h2{hyphens:auto}}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem)}
h4{font-size:1.05rem}
p,li,td,th,figcaption,dd,dt,a{overflow-wrap:break-word}
p{margin:0 0 1.1em}
.mt0{margin-top:0}
strong,b{font-weight:700;color:var(--ink)}

a{color:var(--accent-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
	outline:3px solid var(--accent-dark);outline-offset:2px;border-radius:4px
}

.container{width:min(100% - 34px,var(--maxw));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:12px 20px;border-radius:var(--radius-sm);border:2px solid transparent;
	font-weight:700;font-size:.98rem;line-height:1.2;text-decoration:none;cursor:pointer;
	transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
	white-space:nowrap
}
.btn svg{width:19px;height:19px}
.btn:hover{transform:translateY(-1px)}
.btn--cta{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.btn--cta:hover{background:#8F3207;border-color:#8F3207;color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--soft)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:#0A1620;color:#fff}
.btn--white{background:#fff;color:var(--ink);border-color:#fff}
.btn--white:hover{background:var(--tint);color:var(--ink)}
.btn--phone{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--phone:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn--lg{padding:15px 26px;font-size:1.05rem}
.btn--full{width:100%}
/* Op smalle schermen mag een knoplabel afbreken; anders duwt hij de pagina breder. */
@media (max-width:460px){
	.btn{white-space:normal;text-align:center;max-width:100%}
	.btn--lg{padding:14px 20px;font-size:1rem}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--line)}
.topbar{background:var(--ink);color:#E7EDF2;font-size:.86rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px}
.topbar svg{width:17px;height:17px;opacity:.9}
.tb-item{display:inline-flex;align-items:center;gap:7px;color:#E7EDF2;text-decoration:none}
a.tb-item:hover{color:#fff;text-decoration:underline}
.tb-right{display:flex;align-items:center;gap:20px}

.header-main .container{display:flex;align-items:center;gap:22px;min-height:78px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{display:flex}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.09rem;color:var(--ink);letter-spacing:-.02em}
.brand-text small{font-size:.78rem;color:var(--muted);font-weight:600}

.nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.nav a{
	padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;
	font-weight:650;font-size:.96rem;white-space:nowrap
}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent-link);background:var(--tint)}

.header-cta{display:flex;align-items:center;gap:9px;flex:none}
.nav-toggle{display:none;width:46px;height:44px;border:2px solid var(--line);background:#fff;border-radius:10px;padding:11px 10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1220px){
	.nav{
		position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
		background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow);
		padding:10px 17px 18px;gap:2px;display:none
	}
	.nav.is-open{display:flex}
	.nav a{padding:13px 10px;font-size:1.02rem;border-bottom:1px solid var(--line)}
	.header-main .container{position:relative}
	.nav-toggle{display:flex}
	.header-cta .btn--ghost{display:none}
	/* De uitklapper hoort aan de rechterrand, niet tegen het logo aan.
	   De nav zweeft hier absoluut, dus die duwt niets meer opzij. */
	.header-cta{margin-left:auto}
}
@media (max-width:640px){
	.tb-mail{display:none}
	.topbar .tb-left{display:none}
	.topbar .container{justify-content:center}
	.header-cta .btn--cta{display:none}
	.header-main .container{min-height:66px}
	.brand-text strong{font-size:1rem}
}
@media (max-width:420px){
	.header-main .container{gap:12px}
	.brand{flex:1 1 auto;min-width:0}
	.brand-text{min-width:0}
	.brand-text strong{font-size:.94rem}
	.brand-text small{font-size:.72rem}
}

/* ---------- Hero ---------- */
.hero{background:var(--ink);color:#E7EDF2;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(240,135,43,.16),transparent 46%);pointer-events:none}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:58px 0 62px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .eyebrow{
	display:inline-flex;align-items:center;gap:8px;background:rgba(240,135,43,.16);
	color:var(--accent-light);border:1px solid rgba(240,135,43,.4);
	padding:6px 13px;border-radius:999px;font-size:.83rem;font-weight:700;margin-bottom:16px
}
.hero .eyebrow svg{width:16px;height:16px}
.hero .lead{font-size:1.13rem;color:#D3DDE5;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 22px}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
.hero-badge{
	position:absolute;left:-14px;bottom:-16px;background:#fff;color:var(--ink);
	border-radius:12px;box-shadow:var(--shadow-lg);padding:13px 17px;max-width:250px
}
.hero-badge strong{display:block;font-size:1.28rem;line-height:1.1}
.hero-badge span{font-size:.83rem;color:var(--muted);font-weight:600}

.usps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 24px}
.usps li{display:flex;align-items:center;gap:9px;font-size:.96rem;font-weight:650;color:#E7EDF2}
.usps svg{width:20px;height:20px;color:var(--accent-light)}
.section .usps li{color:var(--body)}
.section .usps svg{color:var(--accent-dark)}

@media (max-width:960px){
	.hero .container{grid-template-columns:1fr;gap:30px;padding:40px 0 46px}
	.hero-badge{left:auto;right:12px;bottom:-14px}
}

/* ---------- Trustbar ---------- */
.trustbar{background:var(--soft);border-bottom:1px solid var(--line)}
.trustbar .container{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center;padding:15px 0}
.trustbar span{display:inline-flex;align-items:center;gap:8px;font-size:.93rem;font-weight:650;color:var(--body)}
.trustbar svg{width:19px;height:19px;color:var(--accent-dark)}

/* ---------- Kruimelpad ---------- */
.crumbs{background:var(--soft);border-bottom:1px solid var(--line);font-size:.87rem}
.crumbs .container{padding:11px 0;color:var(--muted)}
.crumbs a{color:var(--accent-link)}
.crumbs .sep{margin:0 7px;color:var(--muted)}

/* ---------- Secties ---------- */
.section{padding:62px 0}
.section--soft{background:var(--soft)}
.section--tint{background:var(--tint)}
.section--dark{background:var(--slate);color:#E7EDF2}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#D3DDE5}
.section--tight{padding:44px 0}
.section-h{margin-bottom:.35em}
.section-sub{color:var(--muted);max-width:66ch;margin-bottom:34px}
.section-sub.center{margin-inline:auto}

.page-hero{background:var(--ink);color:#E7EDF2;padding:52px 0 46px}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lead{font-size:1.1rem;color:#D3DDE5;max-width:62ch;margin-bottom:0}
.page-hero .eyebrow{
	display:inline-block;background:rgba(240,135,43,.16);color:var(--accent-light);
	border:1px solid rgba(240,135,43,.4);padding:5px 12px;border-radius:999px;
	font-size:.82rem;font-weight:700;margin-bottom:14px
}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:44px;align-items:start;padding:56px 0}
.prose{max-width:74ch;min-width:0}
.prose h2{margin-top:1.7em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.25em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent-dark)}
.sidebar{position:sticky;top:132px;display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:1024px){
	.layout{grid-template-columns:minmax(0,1fr);gap:34px;padding:40px 0}
	.sidebar{position:static}
}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}
.card,.step{min-width:0}
.card p,.card h3,.step p,.step h3{overflow-wrap:anywhere}

.card{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	padding:24px 22px;text-decoration:none;color:var(--body);display:block;
	transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}
a.card:hover{border-color:var(--accent-dark);box-shadow:var(--shadow);transform:translateY(-2px)}
.card h3{margin:12px 0 8px}
.card p{margin:0;font-size:.97rem}
.card .ico{
	width:46px;height:46px;border-radius:11px;background:var(--tint);color:var(--accent-dark);
	display:flex;align-items:center;justify-content:center
}
.card .ico svg{width:24px;height:24px}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--accent-link);font-weight:700;font-size:.95rem}
.card-link svg{width:17px;height:17px}
.section--soft .card{background:#fff}

.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative}
.step .num{
	position:absolute;top:-13px;left:22px;width:30px;height:30px;border-radius:8px;
	background:var(--accent-dark);color:#fff;display:flex;align-items:center;justify-content:center;
	font-weight:800;font-size:.92rem
}
.step h3{margin:12px 0 8px;font-size:1.1rem}
.step p{margin:0;font-size:.97rem}

/* ---------- Prijstabel ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.table-wrap:focus-visible{outline:3px solid var(--accent-dark);outline-offset:2px}
.ptable{width:100%;border-collapse:collapse;font-size:.97rem;min-width:560px}
.ptable th,.ptable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{background:var(--soft);color:var(--ink);font-weight:750;font-size:.9rem;letter-spacing:.01em}
.ptable tbody th{font-weight:650;color:var(--ink)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable .price{font-weight:800;color:var(--accent-link);white-space:nowrap}

/* ---------- Callouts ---------- */
.callout{border:1px solid var(--line);border-left:4px solid var(--accent-dark);background:var(--tint);border-radius:var(--radius-sm);padding:18px 20px;margin:1.6em 0}
.callout p:last-child{margin-bottom:0}
.callout--ok{background:#E9F6F0;border-left-color:var(--ok);border-color:#C4E5D6}
.callout--err{background:#FBECEB;border-left-color:var(--err);border-color:#F0CFCC}

.checklist{list-style:none;margin:0 0 1.3em;padding:0}
.checklist li{position:relative;padding-left:31px;margin-bottom:.62em}
.checklist li::before{
	content:"";position:absolute;left:0;top:.34em;width:19px;height:19px;border-radius:50%;
	background:var(--accent-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4 4 10-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat
}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq-item+.faq-item{border-top:1px solid var(--line)}
.faq-q{
	width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
	background:#fff;border:0;padding:18px 20px;text-align:left;cursor:pointer;
	font:inherit;font-weight:700;color:var(--ink);font-size:1.02rem
}
.faq-q:hover{background:var(--soft)}
.faq-q .chev{width:21px;height:21px;color:var(--accent-dark);transition:transform .2s ease}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 19px}
.faq-a p{margin:0}
.faq-q[aria-expanded="true"]+.faq-a{display:block}

/* ---------- Formulier ---------- */
.lead-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow)}
.lead-form h2{font-size:1.32rem}
.form-note{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.form-note--after{margin:12px 0 0;text-align:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{
	font:inherit;font-size:1rem;padding:11px 13px;border:2px solid var(--line);
	border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%
}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B9C6D0}
.field-err{
	margin:0;font-size:.85rem;font-weight:650;line-height:1.35;color:var(--err);
	display:flex;gap:6px;align-items:flex-start
}
.field-err::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--err);color:#fff;font-size:.72rem;font-weight:800}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--err);background:#FDF6F5}
.field.has-err label{color:var(--err)}
/* Bijlagen: foto of pdf meesturen */
.field .upload-input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.upload{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.field .upload-btn{
	display:inline-flex;align-items:center;gap:8px;cursor:pointer;line-height:1.2;
	font-size:.92rem;font-weight:700;color:var(--ink);padding:10px 15px;
	border:2px dashed var(--line);border-radius:var(--radius-sm);background:var(--soft)
}
.field .upload-btn svg{width:20px;height:20px;flex:none;color:var(--accent-dark)}
.field .upload-btn:hover{border-color:var(--accent-light);background:var(--tint)}
.upload-input:focus+.upload-btn,.upload-input:focus-visible+.upload-btn{
	border-style:solid;border-color:var(--accent-dark);outline:3px solid rgba(240,135,43,.35);outline-offset:2px
}
.upload-list{font-size:.86rem;color:var(--muted);line-height:1.4;min-width:0;overflow-wrap:anywhere}
.upload-list.has-files{color:var(--body);font-weight:650}
.form-hint{margin:0;font-size:.82rem;color:var(--muted);line-height:1.4}
.field.has-err .upload-btn{border-color:var(--err);background:#FDF6F5}
[hidden]{display:none !important}
@media (max-width:520px){.form-grid{grid-template-columns:1fr}}

/* ---------- CTA-band ---------- */
.ctaband{
	background:var(--ink);color:#E7EDF2;border-radius:var(--radius);
	padding:40px 32px;text-align:center;margin:0
}
.ctaband h2{color:#fff}
.ctaband .lead{color:#D3DDE5;max-width:62ch;margin:0 auto}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}

/* ---------- Projecten ---------- */
.project{border-top:1px solid var(--line);padding-top:44px;margin-top:44px}
.project:first-of-type{border-top:0;padding-top:0;margin-top:0}
.project-head{max-width:74ch}
.project-sub{color:var(--muted);font-weight:650;margin:-.3em 0 1em}
.facts{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.facts li{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px}
.facts dt,.facts .k{display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:750;margin-bottom:3px}
.facts .v{font-weight:700;color:var(--ink);font-size:.97rem;line-height:1.35}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0}
.gallery.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery figure{margin:0}
.gallery img{border-radius:var(--radius);border:1px solid var(--line);width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:.85rem;color:var(--muted);margin-top:7px}
@media (max-width:760px){.gallery,.gallery.g2{grid-template-columns:1fr}}

/* ---------- Sidebar-blokken ---------- */
.aside-box{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.aside-box h2,.aside-box h3{font-size:1.08rem;margin-top:0}
.aside-box p:last-child,.aside-box ul:last-child{margin-bottom:0}
.aside-box ul{margin:0;padding-left:1.1em}
.aside-contact{display:flex;flex-direction:column;gap:10px;margin-top:14px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#C3CFD9;padding:54px 0 26px;margin-top:0;font-size:.96rem}
.site-footer h2{color:#fff;font-size:1.03rem;margin-bottom:.8em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55em}
.site-footer a{color:#C3CFD9;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer p{color:#C3CFD9}
.footer-grid{display:grid;grid-template-columns:1.35fr .9fr .9fr .95fr 1.05fr;gap:30px}
@media (max-width:1180px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.footer-grid > *{min-width:0}
.footer-brand .brand{margin-bottom:14px}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{color:var(--accent-light)}
.footer-parent strong{color:#fff}
.footer-contact li{display:flex;gap:9px;align-items:flex-start;min-width:0}
.footer-contact a{min-width:0;overflow-wrap:anywhere}
.footer-contact svg{width:19px;height:19px;color:var(--accent-light);margin-top:2px}
.footer-contact a{display:flex;gap:9px;align-items:center}
.footer-bottom{
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
	border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px;font-size:.87rem
}
.footer-bottom p{margin:0}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (max-width:560px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Mobiele actiebalk ---------- */
.mobilebar{display:none}
@media (max-width:760px){
	.mobilebar{
		display:grid;grid-template-columns:1fr 1fr;gap:9px;position:fixed;left:0;right:0;bottom:0;
		background:#fff;border-top:1px solid var(--line);padding:9px 12px;z-index:70;
		box-shadow:0 -4px 18px rgba(18,32,43,.1)
	}
	.mobilebar .btn{width:100%;padding:13px 10px}
	body{padding-bottom:74px}
	.section{padding:44px 0}
	.ctaband{padding:32px 20px}
}

/* ---------- 404 ---------- */
.err-page{padding:76px 0;text-align:center}
.err-page .code{font-size:3.4rem;font-weight:800;color:var(--accent-dark);line-height:1;margin-bottom:10px}

/* ==========================================================================
   Koptekstbalk op laptopbreedtes
   Merk, menu en knoppen vroegen samen ongeveer 1392px terwijl de container
   maximaal 1200px breed is. Daardoor stak de balk op 1200 en 1440 pixels
   buiten het scherm en kon de hele pagina opzij geschoven worden.
   ========================================================================== */
@media (min-width:1221px){
	.header-main .container{gap:16px}
	.nav{gap:3px}
	.nav a{padding:9px 9px;font-size:.9rem}
	/* Het telefoonnummer staat ook in de balk erboven, dus die knop kan hier weg. */
	.header-cta .btn--ghost{display:none}
}

/* Het telefoonnummer in de bovenbalk mag nooit midden in het getal afbreken.
   De zin links mag wel over twee regels lopen, die heeft de ruimte. */
.tb-right .tb-item{white-space:nowrap}
.tb-left{min-width:0}