/*
Theme Name: Draagmuur Verwijderen Breda
Theme URI: https://draagmuurverwijderenbreda.nl
Author: Sloopbedrijf Brabant B.V.
Description: Licht, snel en conversiegericht maatwerkthema voor draagmuur verwijderen in Breda. Geoptimaliseerd voor Core Web Vitals, leesbaarheid en lokale SEO. Onderdeel van Sloopbedrijf Brabant B.V.
Version: 1.9.3
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: draagmuurbreda
*/

/* ==========================================================================
   DRAAGMUUR VERWIJDEREN BREDA — gedeelde stylesheet
   Stijl: strak & professioneel · slate + bouworanje · veel witruimte
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:      #14202e;
  --ink-2:    #45566a;
  --ink-3:    #7c8ba0;
  --bg:       #ffffff;
  --bg-soft:  #f4f7fb;
  --line:     #e4eaf1;
  --accent:   #ec6a1e;   /* bouworanje */
  --accent-d: #cf560f;
  --accent-soft:#fdefe4;
  --navy:     #14202e;
  --green:    #1a9e5f;
  --radius:   16px;
  --shadow:   0 10px 30px -12px rgba(20,32,46,.14);
  --shadow-lg:0 24px 60px -20px rgba(20,32,46,.22);
  --maxw:     1140px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink-2);background:var(--bg);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,46px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:20px}
p{margin:0 0 16px}
strong{color:var(--ink);font-weight:700}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container-narrow{max-width:820px}
.section{padding:76px 0}
.section-soft{background:var(--bg-soft)}
.section-head{max-width:680px;margin:0 auto 46px;text-align:center}
.section-head.left{text-align:left;margin-left:0}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 14px;border-radius:99px;margin-bottom:14px}
.section-head p{font-size:17px;color:var(--ink-2)}
.lead{font-size:18px;color:var(--ink-2)}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,box-shadow .18s,color .18s;line-height:1}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(236,106,30,.6)}
.btn-primary:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{background:#fff;color:var(--accent-d);transform:translateY(-2px)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.logo:hover{color:var(--ink)}
.logo .brand-accent{color:var(--accent)}
.logo-mark{flex:0 0 auto}
.main-nav{display:flex;gap:26px;align-items:center}
.main-nav a{color:var(--ink);font-weight:600;font-size:15px}
.main-nav a:hover{color:var(--accent)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:16px;white-space:nowrap}
.header-phone .ico{color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* Hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:70px 0 84px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:22px;box-shadow:var(--shadow)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero h1{margin-bottom:16px}
.hero .lead{margin-bottom:26px;max-width:540px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-usps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.hero-usps li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--ink)}
.hero-usps .check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
.hero-float{position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)}
.hero-float .num{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.hero-float .lbl{font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.3}

/* Trust strip */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:22px 24px;border-top:1px solid var(--line)}
.trust-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.trust-item .ico{color:var(--accent)}

/* USP-cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:15px}

/* Kostentabel */
.kosten-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:15.5px}
.kosten-table th,.kosten-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
.kosten-table thead th{background:var(--navy);color:#fff;font-weight:700}
.kosten-table td:last-child,.kosten-table th:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink)}
.kosten-table tbody tr:last-child td{border-bottom:0}
.kosten-table tbody tr:nth-child(even){background:var(--bg-soft)}
.kosten-table .totaal td{background:var(--accent-soft);font-weight:800;color:var(--ink)}
.kosten-note{font-size:13.5px;color:var(--ink-3);margin-top:14px}

/* Proces stappen */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px 22px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 6px 14px -4px rgba(236,106,30,.6)}
.step h3{font-size:16px;margin:10px 0 6px}
.step p{font-size:14px;margin:0}

/* Projecten */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project-card .body{padding:20px 22px}
.project-card .tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:8px;margin-bottom:10px}
.project-card h3{font-size:17px;margin-bottom:8px}
.project-card p{font-size:14.5px;margin:0}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.checklist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.checklist li{display:flex;align-items:flex-start;gap:11px;color:var(--ink)}
.checklist .check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px}

/* Reviews */
.reviews-wrap{max-width:960px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2px 22px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--accent);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 0 20px;color:var(--ink-2);font-size:15.5px}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy),#243a52);border-radius:24px;padding:56px 44px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 26px;font-size:17px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-phone{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:19px}

/* Contactformulier */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:14.5px}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent)}
.form-row textarea{min-height:120px;resize:vertical}
.hp-field{position:absolute;left:-9999px;top:-9999px}
.form-note{font-size:13px;color:var(--ink-3);margin-top:4px}
.lbl-opt{font-weight:500;color:var(--ink-3);font-size:13.5px}
.form-row input[type=file]{padding:10px 12px;cursor:pointer;font-size:14.5px;color:var(--ink-2)}
.form-row input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg-soft);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.form-row input[type=file]:hover::file-selector-button{border-color:var(--accent);background:var(--accent-soft)}
.field-hint{margin:6px 0 0;font-size:13px;color:var(--ink-3);line-height:1.55}
.upload-msg{margin:8px 0 0;font-size:13.5px;font-weight:600;line-height:1.5}
.upload-msg.err{color:#c0392b}
.upload-msg.ok{color:var(--green)}
.form-alert{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-weight:600;font-size:15px}
.form-alert.ok{background:#e6f7ef;color:#0f7a49;border:1px solid #b6e6cf}
.form-alert.err{background:#fdecec;color:#c0392b;border:1px solid #f4c4c0}
.form-alert.warn{background:#fff6e6;color:#9a6206;border:1px solid #f3ddb0}
.form-alert.warn a{color:#9a6206;text-decoration:underline}
.contact-info .info-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-info .info-item:last-child{border-bottom:0}
.contact-info .ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.contact-info .info-item strong{display:block;color:var(--ink);margin-bottom:2px}
.contact-info .info-item a{color:var(--ink-2)}
.contact-info .info-item a:hover{color:var(--accent)}

/* Artikel/pagina */
.page-article{padding:60px 0}
.entry-content h2{margin-top:36px}
.entry-content ul{margin:0 0 16px 20px}
.entry-content li{margin-bottom:7px}

/* Footer */
.site-footer{background:var(--navy);color:#c3cedd;padding:60px 0 26px;font-size:14.5px}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
.site-footer a{color:#c3cedd}
.site-footer a:hover{color:#fff}
.footer-brand .logo{color:#fff;margin-bottom:14px}
.footer-brand .logo .brand-accent{color:var(--accent)}
.footer-brand p{max-width:340px}
.footer-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start}
.footer-contact .ico{color:var(--accent);flex:0 0 auto;margin-top:2px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#8ea0b5}
.footer-bottom a{color:#8ea0b5}

/* Zwevende belknop */
.call-float{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:14px 20px;border-radius:99px;font-weight:800;box-shadow:0 12px 28px -6px rgba(236,106,30,.6)}
.call-float:hover{color:#fff;background:var(--accent-d);transform:translateY(-2px)}

/* Responsive */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:48px 0 60px}
  .hero-visual{order:-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .split,.contact-grid{grid-template-columns:1fr;gap:32px}
  .split .split-media{order:-1}
  .project-grid{grid-template-columns:1fr 1fr}
  .footer-main{grid-template-columns:1fr;gap:28px}
}
@media(max-width:680px){
  .section{padding:52px 0}
  .main-nav,.header-phone{display:none}
  .nav-toggle{display:flex}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;box-shadow:var(--shadow)}
  .grid-4,.grid-2,.project-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cta-band{padding:40px 24px}
  .call-float{padding:12px 16px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   SEO-pagina's (template-seo.php)
   ========================================================================== */

/* Kruimelpad */
.breadcrumb{border-bottom:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--ink-3)}
.breadcrumb .container{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;padding-bottom:12px}
.breadcrumb a{color:var(--ink-2);font-weight:600}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-hidden]{color:var(--ink-3)}

/* Pagina-hero */
.page-hero{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);padding:56px 0 60px}
.page-hero h1{margin-bottom:14px}
.page-hero .lead{max-width:760px;margin-bottom:0}

/* Lopende tekst */
.prose{max-width:820px}
.prose h2{margin-bottom:16px}
.prose p{font-size:16.5px}
.prose p:last-child{margin-bottom:0}
.prose .checklist{margin-top:22px}

/* Feitenkader */
.factbox{background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:32px 34px;box-shadow:var(--shadow);max-width:900px}
.factbox h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:14px}
.factbox p{font-size:16px}
.factbox p:last-child{margin-bottom:0}
.factbox .checklist{margin-top:20px}

/* Tabel: horizontaal scrollbaar op mobiel */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.table-wrap .kosten-table{min-width:560px}

/* Lees verder */
.related-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.rc-title{font-weight:700;color:var(--ink);font-size:16px;line-height:1.35}
.related-card:hover .rc-title{color:var(--accent)}
.rc-arrow{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800}

/* Stappen: flexibel aantal kolommen */
.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Werkgebied-links */
.regio-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.regio-links a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-weight:600;font-size:14.5px;color:var(--ink)}
.regio-links a:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:960px){
  .steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
}
@media(max-width:680px){
  .page-hero{padding:38px 0 44px}
  .factbox{padding:26px 22px}
  .steps{grid-template-columns:1fr}
}

/* Dropdown in hoofdmenu */
.has-sub{position:relative}
.sub-toggle{background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sub-toggle:hover,.has-sub:hover .sub-toggle{color:var(--accent)}
.sub-toggle .caret{font-size:11px;transition:transform .18s}
.sub-menu{position:absolute;top:100%;left:-14px;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;display:none;flex-direction:column;gap:2px;margin-top:12px}
.sub-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink)}
.sub-menu a:hover{background:var(--bg-soft);color:var(--accent)}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.sub-menu.open{display:flex}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}

@media(max-width:680px){
  .has-sub{width:100%}
  .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:4px 0 4px 12px;margin-top:6px;min-width:0;border-left:2px solid var(--line);border-radius:0}
  .sub-toggle{width:100%;justify-content:space-between}
}

/* Footer met 4 kolommen */
.footer-main-4{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:960px){.footer-main-4{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.footer-main-4{grid-template-columns:1fr}}

/* ==========================================================================
   Mobiel: geen horizontale scroll (out-of-scroll fix)
   ========================================================================== */

/* Vangnet: niets mag buiten de viewport uitsteken (clip breekt position:sticky niet) */
body{overflow-x:clip;max-width:100%}
img,video,svg,iframe,table,pre{max-width:100%}
img,video{height:auto}
.container,.container-narrow{max-width:100%}

/* Compacte CTA-label voor smalle schermen */
.cta-short{display:none}

@media(max-width:680px){
  .header-inner{gap:10px;padding:12px 16px}
  .logo{font-size:15.5px;line-height:1.18;gap:9px;min-width:0}
  .logo .logo-text{overflow-wrap:anywhere}
  .logo-mark{width:34px;height:34px}
  .header-cta{gap:8px;flex:0 0 auto}
  .header-cta .btn{padding:11px 14px;font-size:14px;white-space:nowrap}
  .cta-full{display:none}
  .cta-short{display:inline}
  .nav-toggle{padding:6px;flex:0 0 auto}
  .container{padding-left:18px;padding-right:18px}
  .kosten-table th,.kosten-table td{padding:12px 12px;font-size:14.5px}
  .breadcrumb .container{padding-top:10px;padding-bottom:10px}
  .regio-links a{font-size:13.5px;padding:8px 14px}
  .related-card{padding:18px 18px;gap:12px}
  .rc-title{font-size:15px}
  .prose h2{overflow-wrap:break-word}
  .hero-badge{max-width:100%}
  /* badge niet half buiten beeld hangen op mobiel */
  .hero-float{left:10px;bottom:-14px;padding:12px 15px}
  .hero-float .num{font-size:22px}
}

@media(max-width:420px){
  .logo{font-size:14px}
  .logo-mark{width:30px;height:30px}
  .header-cta .btn{padding:10px 12px;font-size:13.5px}
  .call-float{padding:11px 14px;font-size:13.5px}
}

/* Projectkaart: technische kenmerken */
.project-meta{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #e6eaef;display:grid;gap:7px}
.project-meta li{display:flex;gap:10px;font-size:14px;line-height:1.45}
.project-meta .pm-k{flex:0 0 108px;color:#6b7684;font-weight:600}
.project-meta .pm-v{color:#14202e;font-weight:600}
@media(max-width:420px){
  .project-meta li{flex-direction:column;gap:1px}
  .project-meta .pm-k{flex:none}
}

/* Contactformulier: mag krimpen op zeer smalle schermen (geen afgeknelde velden) */
.contact-grid > *{min-width:0}
.form-card{min-width:0}
.form-card form{min-width:0}
.form-row{min-width:0}
.form-row input,.form-row textarea,.form-row select{min-width:0;max-width:100%}
.hp-field{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;left:auto;top:auto}
@media(max-width:520px){
  .form-card{padding:22px 18px}
}

/* ==========================================================================
   Mobiel, laatste restjes op 320px
   Op de smalste telefoons zijn twee dingen breder dan hun kolom: een enkel
   lang woord in de H1 en het volledige e-mailadres. Afbreken alleen helpt
   niet als de kolom zelf op zijn min-content meegroeit, dus zetten we daar
   ook min-width en overflow-wrap: anywhere op.
   ========================================================================== */

h1,h2,h3,h4{overflow-wrap:break-word}

.contact-grid,.contact-info,.info-item,.info-item > div,
.factbox,.checklist li,.checklist li > span:not(.check){min-width:0}

.checklist{grid-template-columns:minmax(0,1fr)}

.info-item a,.info-item strong,
.checklist li > span:not(.check),
.footer-contact a,
a[href^="mailto:"]{overflow-wrap:anywhere}

@media(max-width:400px){
  h1{font-size:25px;line-height:1.22}
}

/* ==========================================================================
   Tablet en liggende telefoon: hamburger tot 1080px
   Het volledige menu past pas vanaf ongeveer 1085px naast het logo en de
   knop. Daaronder werd de hele kopregel breder dan het scherm, waardoor de
   pagina op tablets opzij te schuiven was.
   ========================================================================== */
@media(max-width:1080px){
  .main-nav,.header-phone{display:none}
  .nav-toggle{display:flex}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;box-shadow:var(--shadow);z-index:60}
  .has-sub{width:100%}
  .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:4px 0 4px 12px;margin-top:6px;min-width:0;border-left:2px solid var(--line);border-radius:0}
  .sub-toggle{width:100%;justify-content:space-between}
}

/* Hero: zelfde zijmarge als de rest van de pagina.
   .hero-grid zette met de padding-korthand de linker en rechter marge op nul,
   waardoor de hero op tablets tegen de schermrand plakte. */
.container.hero-grid{padding-left:24px;padding-right:24px}
@media(max-width:680px){
  .container.hero-grid{padding-left:18px;padding-right:18px}
}

/* Uitgeklapt menu links uitlijnen. In kolomrichting zorgde align-items:center
   ervoor dat de hoofditems gecentreerd stonden en de subitems links. */
.main-nav.open{align-items:stretch;text-align:left}

/* Lange woorden, e-mailadressen en URL's mogen afbreken i.p.v. buiten beeld lopen */
p,li,dd,dt,a,span,strong,em,b,i,h1,h2,h3,h4,h5,figcaption,label,blockquote{overflow-wrap:anywhere}
.checklist li,.checklist li > span,.factbox li,.prose li{min-width:0}
.checklist li > span:not(.check){min-width:0;flex:1 1 auto}
.contact-item,.contact-item > div,.contact-item a{min-width:0}
.table-wrap{max-width:100%}

/* ==========================================================================
   Out-of-scroll definitief onmogelijk
   overflow-x:clip op html EN body. clip maakt geen scroll-container, dus
   position:sticky van de header blijft gewoon werken.
   ========================================================================== */
html{overflow-x:clip}
html,body{max-width:100%}
body.nav-open{overflow-y:hidden}

/* ==========================================================================
   Mobiel menu: echte accordeon, scrollbaar, met CTA onderin
   Het submenu stond onder 1080px hard op display:flex, waardoor alle 18
   links altijd open stonden en het paneel langer werd dan het scherm.
   ========================================================================== */
@media(max-width:1080px){
  .main-nav.open{padding:10px 18px 18px;gap:0;align-items:stretch;text-align:left;box-shadow:var(--shadow-lg);
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .main-nav.open > a{display:block;padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line)}
  .has-sub{width:100%;border-bottom:1px solid var(--line)}
  .has-sub::after{display:none}
  .sub-toggle{width:100%;justify-content:space-between;padding:14px 2px;font-size:16px}
  .sub-toggle .caret{transition:transform .18s}
  .sub-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .sub-menu{display:none;padding:0 0 10px 14px;margin:0 0 4px;gap:0;background:transparent}
  .has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{display:none}
  .sub-menu.open,.has-sub:hover .sub-menu.open,.has-sub:focus-within .sub-menu.open{display:flex}
  .sub-menu a{padding:11px 10px;font-size:15px}
  .main-nav.open .nav-mobile-cta{display:flex;gap:10px;margin-top:16px}
  .main-nav.open .nav-mobile-cta .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:13px 10px;font-size:14.5px}
  .nav-toggle span{transition:transform .2s,opacity .2s}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.nav-mobile-cta{display:none}
@media(max-width:380px){
  .main-nav.open .nav-mobile-cta{flex-direction:column}
}


/* ==========================================================================
   Prijstabellen op mobiel
   Op smalle schermen moest je vroeger horizontaal scrollen om de prijs te
   zien — dat ziet lang niet iedereen. Onder 680px wordt daarom elke rij een
   kaartje: onderwerp als donkere kop, daaronder label/waarde-paren.
   Geen zijwaartse scroll meer nodig.
   ========================================================================== */
@media(max-width:680px){
  .table-wrap{overflow-x:visible;border-radius:0}
  .table-wrap .kosten-table{min-width:0}
  .kosten-table{display:block;width:100%;background:transparent;box-shadow:none;border-radius:0;font-size:15px}
  /* koprij visueel verbergen maar wel leesbaar houden voor screenreaders */
  .kosten-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .kosten-table tbody,.kosten-table tr,.kosten-table td{display:block;width:auto}
  .kosten-table tbody tr,
  .kosten-table tbody tr:nth-child(even){
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);margin:0 0 14px;overflow:hidden;
  }
  .kosten-table tbody tr:last-child{margin-bottom:0}
  .kosten-table td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:11px 16px;border-bottom:1px solid var(--line);text-align:left;
    white-space:normal;font-size:15px;
  }
  .kosten-table td::before{
    content:attr(data-label);flex:0 0 40%;min-width:0;
    font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-3);line-height:1.6;
  }
  .kosten-table td[data-label=""]::before,
  .kosten-table td:not([data-label])::before{display:none}
  .kosten-table td:first-child{
    display:block;background:var(--navy);color:#fff;font-weight:700;
    padding:13px 16px;border-bottom:0;font-size:15.5px;
  }
  .kosten-table td:first-child::before{display:none}
  .kosten-table td:last-child{border-bottom:0;text-align:right;font-weight:800;color:var(--ink)}
  .kosten-table .totaal td{background:var(--accent-soft)}
  .kosten-table .totaal td:first-child{background:var(--accent);color:#fff}
  .kosten-table td strong{font-weight:800}
}