/* ===================================================================
   Westland Verhuisgroep - stijl voor alle subpagina's (30-08-2026)
   Zelfde huisstijl als de nieuwe homepage: navy #21303f, groen #27964b,
   goud #FFD25A, Montserrat koppen, Inter tekst, radius 10/16.
   =================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font: 400 16px/1.6 'Inter', system-ui, sans-serif; color: #21303f; background: #f6f8fa; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(70% 60% at 50% 45%, rgba(39,150,75,.1), transparent 75%),
  radial-gradient(60% 50% at 12% 8%, rgba(15,118,54,.05), transparent 70%),
  radial-gradient(50% 45% at 88% 92%, rgba(33,48,63,.06), transparent 70%),
  #f6f8fa; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.skip { position: fixed; left: -999px; top: 8px; z-index: 100; background: #27964b; color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; }
.skip:focus { left: 8px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* ---------- navigatie (nieuwe tweedelige balk) ---------- */
nav[aria-label="Hoofdnavigatie"], nav[aria-label="Main navigation"] { position: relative; background: #21303f; border-bottom: 1px solid rgba(247,249,251,.14); }
nav .topstrook { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 7px 56px; border-bottom: 1px solid rgba(247,249,251,.1); font-size: 13px; font-weight: 500; color: #dbe3ea; }
nav .topstrook b { font-weight: 600; color: #f7f9fb; }
nav .taal { display: inline-flex; border: 1px solid rgba(247,249,251,.3); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 600; }
nav .taal a { display: inline-block; padding: 3px 11px; color: #dbe3ea; }
nav .taal a[aria-current="true"] { background: #27964b; color: #fff; }
nav .hoofdbalk { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 12px 56px; }
nav .merk { display: flex; align-items: flex-end; gap: 14px; }
nav .merk img { height: 58px; width: auto; }
nav .merk .naam { display: flex; flex-direction: column; line-height: 1.25; margin-bottom: 3px; }
nav .merk .naam b { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .05em; color: #f7f9fb; white-space: nowrap; }
nav .merk .naam span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .22em; color: #3DBE74; text-transform: uppercase; white-space: nowrap; }
nav .links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
nav .links a { color: #f7f9fb; }
.btn-groen { background: #27964b; color: #fff; border-radius: 10px; padding: 10px 20px; font-size: 14.5px; font-weight: 600; display: inline-block; }

/* ---------- tijdelijke actie (aan/uit via /actie.json) ---------- */
.actiebalk { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; padding: 11px 56px; cursor: pointer;
  background: linear-gradient(100deg, #1F7A44, #27964b 55%, #1F7A44); border-bottom: 1px solid rgba(247,249,251,.18); }
.actiebalk .a-kicker { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .16em;
  color: #21303f; background: #FFD25A; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.actiebalk .a-tekst { font-size: 15px; font-weight: 500; color: #f7f9fb; }
.actiebalk .a-tekst b { font-weight: 700; }
.actiebalk .a-tekst em { font-style: normal; color: #d3f2e0; font-size: 13.5px; }
.actiebalk .a-prijs { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; color: #FFD25A; padding: 0 2px; }
.actiebalk .a-cta { font-weight: 600; font-size: 14px; color: #fff; border-bottom: 1.5px solid rgba(255,255,255,.55); white-space: nowrap; }
.actiebalk:hover .a-cta { border-bottom-color: #fff; }

/* ---------- subpagina-hero ---------- */
.sub-hero { position: relative; background: linear-gradient(180deg, rgba(33,48,63,.88), rgba(33,48,63,.72)), var(--hero) center/cover no-repeat, #21303f; padding: 64px 0 56px; }
.sub-hero .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #8fa4b5; margin-bottom: 18px; }
.sub-hero .crumbs a { color: #8fd8ab; }
.sub-hero .crumbs [aria-current] { color: #dbe3ea; }
.sub-hero .kicker { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: #3DBE74; text-transform: uppercase; }
.sub-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; color: #fff; margin: 10px 0 16px; }
.sub-hero .lead { font-size: 16.5px; line-height: 1.65; color: #dbe3ea; max-width: 780px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-block; border-radius: 10px; padding: 13px 24px; font-size: 15px; font-weight: 600; }
.btn-primary { background: #27964b; color: #fff; }
.btn-primary:hover { background: #3DBE74; }
.btn-ghost-light { border: 1.5px solid rgba(247,249,251,.55); color: #f7f9fb; }
.btn-ghost-dark { border: 1.5px solid #27964b; color: #0c5f2c; }

/* ---------- secties en inhoud ---------- */
.sec { padding: 56px 0; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.sub-content h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 23px; line-height: 1.25; color: #21303f; margin: 26px 0 12px; padding-top: 6px; }
.sub-content h2:first-child { margin-top: 0; }
.sub-content p { margin-bottom: 14px; color: #46586a; }
.sub-content a { color: #0c5f2c; text-decoration: underline; text-decoration-color: rgba(39,150,75,.4); }
.sub-content ul { list-style: none; margin: 12px 0 16px; }
.sub-content ul li { position: relative; padding-left: 28px; margin-bottom: 8px; color: #46586a; }
.sub-content ul li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(15,118,54,.14) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10.5 8.5 14 15 6.5" fill="none" stroke="%230c5f2c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/11px no-repeat; }

/* ---------- zijkolom ---------- */
.sub-aside { display: flex; flex-direction: column; gap: 20px; }
.aside-card { background: #fff; border: 1px solid #d5dce2; border-radius: 16px; padding: 22px 24px; box-shadow: 0 10px 26px rgba(33,48,63,.06); }
.aside-card .kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #0c5f2c; text-transform: uppercase; margin-bottom: 12px; }
.aside-card .lijn { padding: 7px 0; font-size: 14.5px; color: #21303f; border-bottom: 1px solid #eef1f4; }
.aside-card .lijn:last-of-type { border-bottom: 0; }
.aside-card .lijn .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #7a8896; text-transform: uppercase; }
.aside-card .lijn a { color: #0c5f2c; font-weight: 600; }
.aside-card .btn { display: block; text-align: center; margin-top: 12px; }
.aside-card ul { list-style: none; }
.aside-card ul li { padding: 5px 0; font-size: 14.5px; }
.aside-card ul a { color: #21303f; }
.aside-card ul a:hover { color: #0c5f2c; }

/* ---------- usp-band ---------- */
.sub-usps { background: #21303f; padding: 44px 0; }
.sub-usps .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sub-usps .item { display: flex; gap: 12px; align-items: flex-start; }
.sub-usps .tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  background: rgba(61,190,116,.18) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10.5 8.5 14 15 6.5" fill="none" stroke="%233DBE74" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/13px no-repeat; }
.sub-usps b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 3px; }
.sub-usps .item span + div span, .sub-usps .item > div > span { font-size: 13.5px; line-height: 1.55; color: #b9c6d1; }

/* ---------- veelgestelde vragen ---------- */
.sec-head { margin-bottom: 26px; }
.sec-head .kicker { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: #0c5f2c; text-transform: uppercase; }
.sec-head h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 32px); color: #21303f; margin-top: 8px; }
.faq-list { background: #fff; border: 1px solid #d5dce2; border-radius: 16px; padding: 6px 30px; max-width: 860px; }
.faq + .faq { border-top: 1px solid #e3e8ed; }
.faq button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  background: none; border: none; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 16px; color: #21303f; padding: 19px 4px; cursor: pointer; }
.faq .plus { flex: none; position: relative; width: 16px; height: 16px; top: 2px; }
.faq .plus::before, .faq .plus::after { content: ''; position: absolute; background: #27964b; border-radius: 2px; transition: transform .35s ease; }
.faq .plus::before { left: 0; top: 7px; width: 16px; height: 2.5px; }
.faq .plus::after { left: 7px; top: 0; width: 2.5px; height: 16px; }
.faq[data-open="true"] .plus::after { transform: scaleY(0); }
.faq .body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq .body p { font-size: 15px; line-height: 1.65; color: #46586a; padding: 0 40px 18px 4px; }

/* ---------- verder lezen ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: block; background: #fff; border: 1px solid #d5dce2; border-radius: 16px; padding: 22px 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); border-color: #27964b; box-shadow: 0 14px 30px rgba(33,48,63,.1); }
.card h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16.5px; color: #21303f; margin-bottom: 8px; }
.card p { font-size: 14px; line-height: 1.55; color: #5a6a78; margin-bottom: 12px; }
.card .meer { font-size: 14px; font-weight: 600; color: #0c5f2c; }

/* ---------- cta-band ---------- */
.cta-band { background: #21303f; padding: 56px 0; text-align: center; }
.cta-band h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 34px); color: #fff; margin-bottom: 10px; }
.cta-band p { color: #dbe3ea; max-width: 640px; margin: 0 auto; }
.cta-band .cta-row { justify-content: center; }

/* ---------- juridische pagina's ---------- */
.av-leden { list-style: none; margin: 10px 0 18px; }
.av-leden li { position: relative; padding-left: 24px; margin-bottom: 8px; color: #46586a; }
.av-leden li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #27964b; }

/* ---------- voettekst (nieuwe stijl) ---------- */
footer.site { background: #1b2836; border-top: 1px solid rgba(247,249,251,.1); padding: 64px 56px 28px; color: #b9c6d1; }
footer.site .raster { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1.4fr; gap: 48px; }
footer.site .merkvoet { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
footer.site .merkvoet img { height: 46px; width: auto; }
footer.site .merkvoet .naam { display: flex; flex-direction: column; line-height: 1.25; margin-bottom: 2px; }
footer.site .merkvoet .naam b { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .05em; color: #f7f9fb; white-space: nowrap; }
footer.site .merkvoet .naam span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .22em; color: #3DBE74; text-transform: uppercase; white-space: nowrap; }
footer.site .tagline { font-size: 14.5px; line-height: 1.65; color: #b9c6d1; }
footer.site .kop { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; color: #f7f9fb; margin-bottom: 14px; }
footer.site .kop + ul + .kop { margin-top: 26px; }
footer.site ul { list-style: none; }
footer.site li { font-size: 14px; line-height: 1.55; color: #b9c6d1; padding: 4px 0; }
footer.site li a { color: #b9c6d1; }
footer.site li a:hover { color: #8fd8ab; }
footer.site .onder { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(247,249,251,.1); margin-top: 48px; padding-top: 22px; font-size: 13px; color: #8fa4b5; }
footer.site .onder a { color: #b9c6d1; }

/* ---------- responsief ---------- */
@media (max-width: 980px) {
  nav .links { display: none; }
  nav .topstrook { padding: 6px 20px; gap: 16px; }
  nav .topstrook a[href^="mailto"] { display: none; }
  nav .hoofdbalk { padding: 10px 20px; gap: 14px; }
  nav .merk { gap: 10px; }
  nav .merk img { height: 40px; }
  nav .merk .naam b { font-size: 14.5px; letter-spacing: .04em; }
  nav .merk .naam span { font-size: 8px; letter-spacing: .18em; }
  nav .btn-groen, .btn-groen { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  .actiebalk { padding: 10px 20px; gap: 10px; }
  .actiebalk .a-tekst { font-size: 13.5px; text-align: center; }
  .actiebalk .a-tekst em { display: block; font-size: 12px; }
  .actiebalk .a-cta { font-size: 13px; }
  .sub-grid { grid-template-columns: 1fr; gap: 32px; }
  .sub-usps .row { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  footer.site { padding: 48px 20px 24px; }
  footer.site .raster { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  nav .topstrook { padding: 5px 14px; }
  nav .hoofdbalk { padding: 10px 14px; gap: 10px; }
  nav .merk { gap: 8px; }
  nav .merk img { height: 38px; }
  nav .merk .naam span { display: none; }
  nav .merk .naam b { font-size: 12px; letter-spacing: .06em; white-space: normal; width: min-content; line-height: 1.25; }
  nav .btn-groen { padding: 8px 11px; font-size: 12.5px; }
  .sub-hero { padding: 44px 0 40px; }
  .sub-usps .row { grid-template-columns: 1fr; }
  .faq-list { padding: 2px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .faq .plus::before, .faq .plus::after, .faq .body { transition: none; }
}