/* ────────────────────────────────────────────────────────────────────────────
   hanebalk.nl · design system "Het Keurmerk"
   Brand green from the company's own logo and van; the red/white safety
   stripe from their test-weight box; keurmerk yellow from the Aboma sticker;
   Amsterdam gable silhouettes. System fonts only: zero webfonts, zero
   cookies, zero third-party anything (the anti-bloat statement).
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --groen: #2e8b50;
  --groen-diep: #1e6238;
  --groen-nacht: #143f25;
  --inkt: #20261f;
  --soft: #57604f;
  --paper: #f7f5ec;
  --card: #fffdf6;
  --geel: #f2c230;
  --lijn: #e2ddca;
  --rood: #b3372b;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }  /* the korverbv lesson: survives any display: rule */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { font-family: var(--sans); color: var(--inkt); background: var(--paper); line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen-diep); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--geel); color: var(--inkt);
        padding: 10px 18px; font-weight: 700; z-index: 99; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; }

/* the safety stripe: from the company's own test-weight box */
.stripe { height: 8px;
  background: repeating-linear-gradient(-45deg, var(--rood) 0 14px, #fdfaf2 14px 28px); }

/* ── wordmark ── */
.wm { font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1; }
.wm-hane { color: var(--inkt); }
.wm-balk { color: var(--groen); }
.site-footer .wm-hane { color: var(--paper); }

/* ── header ── */
.site-header { display: flex; align-items: center; gap: .8rem 1.4rem; flex-wrap: wrap;
  padding: .9rem clamp(1rem, 3vw, 2.6rem); background: var(--card);
  border-bottom: 1px solid var(--lijn); }
/* desktop: pin the header so the offerte-CTA stays in reach on long pages;
   mobile stays static (the wrapped header would eat a quarter of the screen) */
@media (min-width: 861px) {
  html { scroll-padding-top: 96px; }
  .site-header { position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 14px rgba(32, 38, 31, .07); }
}
.brand { text-decoration: none; display: flex; flex-direction: column; gap: .1rem; }
.brand-sub { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); }
.site-nav { display: flex; gap: clamp(.7rem, 1.6vw, 1.4rem); margin-left: auto; flex-wrap: nowrap; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .95rem;
  border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap; }
.site-nav a:hover, .site-nav a.is-active { color: var(--groen-diep); border-bottom-color: var(--geel); }
.header-cta { white-space: nowrap; }
@media (max-width: 860px) {
  .site-header { justify-content: space-between; gap: .5rem .6rem; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; gap: .6rem;
    overflow-x: auto; scrollbar-width: none; padding-top: .3rem; }
  .site-nav a { font-size: .86rem; }
  .header-cta { padding: .45rem .8rem; font-size: .85rem; }
  .wm { font-size: 1.35rem; }
  .brand-sub { font-size: .56rem; }
}
@media (max-width: 480px) {
  .brand-sub { display: none; }
}

/* ── buttons ── */
.btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: .97rem;
  padding: .65rem 1.3rem; border-radius: 5px; border: 2px solid transparent; cursor: pointer;
  font-family: var(--sans); }
.btn-green { background: var(--groen-diep); color: #fff; box-shadow: 0 3px 0 var(--groen-nacht); }
.btn-green:hover { background: var(--groen); }
.btn-ghost { background: transparent; color: var(--groen-diep); border-color: var(--groen-diep); }
.btn-ghost:hover { background: var(--groen-diep); color: #fff; }
.btn-paper { background: var(--paper); color: var(--groen-diep); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.btn-yellow { background: var(--geel); color: var(--inkt); box-shadow: 0 3px 0 #b8901a; }
.btn-yellow:hover { filter: brightness(1.05); }
.text-link { font-weight: 700; color: var(--groen-diep); }

.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--groen-diep); }
.center { text-align: center; }

/* ── hero ── */
.hero { position: relative; background: var(--groen-nacht); }
.hero-img { width: 100%; height: clamp(260px, 44vw, 520px); object-fit: cover; opacity: .92; }
.hero-panel { position: relative; background: var(--card); border-top: 6px solid var(--groen);
  margin: -70px clamp(1rem, 4vw, 3rem) 0; padding: 1.8rem clamp(1.2rem, 3vw, 2.4rem) 1.6rem;
  max-width: 46rem; box-shadow: 0 14px 40px rgba(20, 30, 22, .18); }
.hero-panel h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08; margin: .35rem 0 .7rem;
  letter-spacing: -.015em; }
.hero-sub { color: var(--soft); max-width: 40rem; }
.hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
@media (max-width: 600px) {
  .hero-panel { margin: -50px .8rem 0; }
  .hero-ctas .btn { flex: 1 1 0; text-align: center; white-space: nowrap;
    font-size: .85rem; padding: .55rem .5rem; }
}

/* ── trust strip ── */
.trust { padding: 1.4rem clamp(1rem, 4vw, 3rem) .6rem; }
.trust-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 72rem; margin: 0 auto; }
.trust-item { background: var(--card); border: 1px solid var(--lijn); border-radius: 6px;
  padding: .75rem 1rem; display: flex; flex-direction: column; }
.trust-item strong { font-size: .95rem; }
.trust-item span { font-size: .82rem; color: var(--soft); }

/* ── sections ── */
main section { padding: clamp(2.4rem, 6vw, 4.2rem) clamp(1rem, 4vw, 3rem); }
.section-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.section-head h1, .section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.15;
  margin-bottom: .5rem; letter-spacing: -.015em; }
.section-head p { color: var(--soft); }
.section-head-left { text-align: left; margin: 0 0 1.6rem; }

/* gable silhouettes divider */
.gables { line-height: 0; text-align: center; color: #d8d2bc; padding: 0; }
.gables svg { height: 34px; width: min(680px, 86vw); }
.gables-footer { background: var(--paper); line-height: 0; text-align: center; color: var(--inkt); }
.gables-footer svg { height: 40px; width: 100%; max-width: none; display: block; margin: 0 auto; }

/* services */
.services { background: var(--card); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.service-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 66rem; margin: 0 auto; }
.service-card { background: var(--paper); border: 1px solid var(--lijn); border-top: 5px solid var(--groen);
  border-radius: 6px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.service-card h3 { font-size: 1.2rem; }
.service-card p { font-size: .95rem; color: var(--soft); flex: 1; }

/* steps */
.steps { background: var(--groen-nacht); color: var(--paper); }
.steps-inner { display: grid; gap: 2.4rem; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr);
  max-width: 66rem; margin: 0 auto; align-items: start; }
.steps-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .7rem; }
.steps-text p { color: #cfdcc9; margin-bottom: 1rem; }
.steps-list { list-style: none; counter-reset: step; display: grid; gap: .7rem; }
.steps-list li { counter-increment: step; background: rgba(255, 253, 246, .06);
  border: 1px solid rgba(255, 253, 246, .14); border-radius: 6px; padding: .8rem 1rem .8rem 3.4rem;
  position: relative; }
.steps-list li::before { content: counter(step); position: absolute; left: .9rem; top: .85rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--geel); color: var(--inkt);
  font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.steps-list strong { display: block; }
.steps-list span { font-size: .88rem; color: #cfdcc9; }
@media (max-width: 760px) { .steps-inner { grid-template-columns: 1fr; } }

.hero-tel { margin-top: .8rem; font-size: .92rem; color: var(--soft); }
.hero-tel a { font-weight: 700; }

/* photo strip: the keuring in beeld */
.photostrip { background: var(--paper); }
.photostrip-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 66rem; margin: 0 auto; }
.photostrip-grid figure { background: var(--card); border: 1px solid var(--lijn); border-radius: 6px;
  overflow: hidden; }
.photostrip-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.photostrip-grid figcaption { font-size: .82rem; color: var(--soft); padding: .6rem .8rem; }

/* in-article photos */
.prose-img { margin: 0 0 1.2rem; }
.prose-img img { border-radius: 6px; border: 1px solid var(--lijn); }
.prose-img figcaption { font-size: .82rem; color: var(--soft); margin-top: .4rem; }
.contact-van { margin-top: 1.4rem; max-width: 26rem; }

/* press band */
.pressband { background: var(--inkt); color: var(--paper); text-align: center; }
.pressband blockquote { font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem); line-height: 1.25; max-width: 44rem; margin: 0 auto .6rem; }
.pressband-src { color: #c9c4b2; font-size: .92rem; }
.pressband-logos { margin-top: 1.2rem; font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #a8a494; }
.pressband-logos a { color: var(--geel); letter-spacing: normal; text-transform: none; font-weight: 600; }
.pressband-video { max-width: 44rem; margin: 1.8rem auto 0; }
.pressband-video video { width: 100%; height: auto; border-radius: 6px; display: block;
  border-top: 6px solid var(--geel); background: #000; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.pressband-videocap { font-size: .85rem; color: #c9c4b2; margin-top: .6rem; }
.pers-video { width: 100%; height: auto; border-radius: 6px; display: block; background: #000;
  border: 1px solid var(--lijn); margin-top: 1rem; }

/* projects */
.project-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 66rem; margin: 0 auto 1.6rem; }
.project-card { background: var(--card); border: 1px solid var(--lijn); border-radius: 6px;
  overflow: hidden; text-decoration: none; color: var(--inkt); }
.project-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.project-card h3 { font-size: 1.02rem; padding: .8rem 1rem; }
.project-block { max-width: 46rem; margin: 0 auto 2.6rem; }
.project-block h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.project-block > p { color: var(--soft); margin-bottom: 1rem; }
.project-photo { border-radius: 6px; border: 1px solid var(--lijn); max-height: 560px; object-fit: cover; }
.project-gallery { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.project-gallery img { border-radius: 5px; border: 1px solid var(--lijn); aspect-ratio: 4 / 3; object-fit: cover; }

/* kennis */
.kennis-teaser { background: var(--card); border-top: 1px solid var(--lijn); }
.kennis-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 66rem; margin: 0 auto 1.4rem; }
.kennis-card { background: var(--paper); border: 1px solid var(--lijn); border-left: 5px solid var(--geel);
  border-radius: 6px; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--inkt);
  display: flex; flex-direction: column; gap: .45rem; }
.kennis-card:hover { border-left-color: var(--groen); }
.kennis-card h3 { font-size: 1.05rem; line-height: 1.3; }
.kennis-card p { font-size: .88rem; color: var(--soft); flex: 1; }
.kennis-grid-page { margin: 0 auto; max-width: 60rem; }

/* faq */
.faq-list { max-width: 46rem; margin: 0 auto; }
.faq-item { background: var(--card); border: 1px solid var(--lijn); border-radius: 6px;
  margin-bottom: .55rem; overflow: hidden; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: .8rem 2.6rem .8rem 1.1rem;
  list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); color: var(--groen-diep); font-size: 1.3rem; font-weight: 800; }
.faq-item[open] summary::after { content: '·'; }
.faq-item[open] summary { color: var(--groen-diep); }
.faq-item p { padding: 0 1.1rem .95rem; color: var(--soft); }

/* cta band */
.ctaband { background: var(--groen-diep); color: #fff; text-align: center; }
.ctaband h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .4rem; }
.ctaband p { color: #cfdcc9; margin-bottom: 1.2rem; }
.ctaband-alt { display: block; margin-top: .9rem; font-size: .92rem; color: #cfdcc9; }
.ctaband-alt a { color: #fff; font-weight: 700; text-decoration-color: var(--geel); }

/* ── subpages ── */
.page { max-width: 72rem; margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.6rem) clamp(1rem, 4vw, 3rem) 3rem; }
.breadcrumb { font-size: .85rem; color: var(--soft); margin-bottom: 1.4rem; }
.breadcrumb span { opacity: .5; margin: 0 .3rem; }
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.015em;
  margin: .3rem 0 .8rem; }
.prose .intro { font-size: 1.12rem; color: var(--soft); margin-bottom: 1rem; }
.prose h2 { font-size: 1.4rem; margin: 1.8rem 0 .6rem; }
.prose p { margin-bottom: 1rem; }
.prose .gables { text-align: left; margin-bottom: 1.2rem; }
.prose .gables svg { width: min(340px, 70vw); height: 26px; }
.page-kennis { display: grid; gap: 3rem; grid-template-columns: minmax(0, 46rem) minmax(200px, 15rem); }
.page-kennis .breadcrumb { grid-column: 1 / -1; }
.related { border-left: 2px solid var(--lijn); padding-left: 1.4rem; align-self: start;
  position: sticky; top: 1.4rem; }
.related h2 { font-size: 1.05rem; margin-bottom: .7rem; }
.related ul { list-style: none; }
.related li { margin-bottom: .55rem; font-size: .93rem; }
@media (max-width: 900px) {
  .page-kennis { grid-template-columns: 1fr; gap: 1.6rem; }
  .related { border-left: none; padding: 1.2rem 0 0; border-top: 2px solid var(--lijn); position: static; }
}

/* pers: 2x2 on desktop, 1 column on mobile; every card the same build:
   text on top, a uniform 16:10 media well pinned to the bottom */
.pers-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 66rem; }
@media (max-width: 800px) { .pers-grid { grid-template-columns: 1fr; } }
.pers-block { background: var(--card); border: 1px solid var(--lijn); border-top: 5px solid var(--groen);
  border-radius: 6px; padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; }
.pers-block h2 { font-size: 1.25rem; margin: .15rem 0 .5rem; }
.pers-block > p { color: var(--soft); font-size: .95rem; margin-bottom: 1rem; }
.pers-media { margin-top: auto; display: block; position: relative; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: 5px; border: 1px solid var(--lijn); background: #000; }
.pers-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pers-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pers-media-hint { position: absolute; left: 0; right: 0; bottom: 0; font-size: .78rem;
  font-weight: 700; color: #fff; background: linear-gradient(rgba(32,38,31,0), rgba(32,38,31,.75));
  padding: 1.6rem .9rem .55rem; opacity: 0; transition: opacity .15s ease; }
a.pers-media:hover .pers-media-hint, a.pers-media:focus-visible .pers-media-hint { opacity: 1; }

/* contact */
.contact-grid { display: grid; gap: 2.6rem; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.15fr);
  align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-details { margin-bottom: 1.2rem; line-height: 1.9; }
.contact-form { background: var(--card); border: 1px solid var(--lijn); border-top: 5px solid var(--groen);
  border-radius: 6px; padding: 1.5rem 1.5rem 1.3rem; }
.contact-form label { display: block; font-weight: 700; font-size: .9rem; margin: .9rem 0 .25rem; }
.contact-form label:first-child { margin-top: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%;
  padding: .55rem .7rem; border: 1.5px solid var(--lijn); border-radius: 5px; font: inherit;
  background: #fff; color: var(--inkt); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--groen); outline: none; }
.contact-form .btn { margin-top: 1.1rem; width: 100%; }
.form-note { font-size: .85rem; color: var(--soft); margin-top: .6rem; text-align: center; }
.form-hint { font-size: .82rem; color: var(--soft); margin-top: .3rem; }
.form-thanks { text-align: center; padding: 1.4rem 0; }
.form-thanks h2 { color: var(--groen-diep); margin-bottom: .4rem; }

/* file upload control — FormHandler upgrades div.fileControl to a '+' add button
   with per-file previews (items); .working carries the upload progress fill */
.contact-form .fileControl { display: flex; flex-wrap: wrap; gap: .55rem; align-items: flex-start; }
.contact-form .fileControl input[type="file"] { display: none; }
.contact-form .fileControl label { flex: 1 0 100%; order: -1; margin-bottom: 0; }
.fileControl .addButton { width: 84px; height: 84px; cursor: pointer; user-select: none;
  border: 2px dashed var(--groen); border-radius: 6px; background-color: #fff;
  display: grid; place-items: center; }
.fileControl .addButton.ready::before { content: '+'; font-size: 2.4rem; font-weight: 700;
  color: var(--groen); line-height: 1; }
.fileControl .addButton.working { border-style: solid;
  background-image: linear-gradient(rgba(242, 194, 48, .6), rgba(242, 194, 48, .6)); }
.fileControl .item { position: relative; width: 84px; height: 84px; cursor: pointer;
  border: 1.5px solid var(--lijn); border-radius: 6px; background: #fff; overflow: hidden; }
.fileControl .item.image { background-size: cover; background-position: center; }
.fileControl .item.file { display: grid; place-items: center; }
.fileControl .fileExtension { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  background: var(--groen-diep); color: #fff; padding: 2px 6px; border-radius: 3px; }
.fileControl .confirmDelete { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(179, 55, 43, .9); color: #fff; font-size: .72rem; font-weight: 700;
  text-align: center; }

/* ── footer ── */
.site-footer { background: var(--inkt); color: var(--paper); }
.footer-inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 66rem; margin: 0 auto; padding: 2.4rem clamp(1rem, 4vw, 3rem) 1.6rem; }
.footer-brand p { font-size: .88rem; color: #b9b5a4; margin-top: .7rem; }
.footer-col h3 { font-size: .95rem; color: var(--geel); margin-bottom: .6rem; }
.footer-col p { font-size: .92rem; color: #d8d4c4; margin-bottom: .8rem; }
.footer-col a { display: block; color: var(--paper); text-decoration: none; font-size: .92rem;
  margin-bottom: .4rem; }
.footer-col a:hover { color: var(--geel); }
.footer-col p a { display: inline; }
.footer-legal { border-top: 1px solid #3a4036; padding: 1rem clamp(1rem, 4vw, 3rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: #b9b5a4; max-width: 66rem; margin: 0 auto; }
.credit a { color: var(--paper); }