/* ==========================================================================
   Klusbedrijf Valmonde
   Palet ontleend aan de Zaanstreek: Zaans groen houtwerk, warm steigerhout,
   gebroken wit. Het smeedijzeren krulmotief uit het bestaande logo keert
   terug als scheidingsteken.
   ========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/archivo-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/archivo-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --green-950:#0d1913;
  --green-900:#14261c;
  --green-800:#1c3728;
  --green-700:#265039;
  --green-600:#33684a;
  --green-050:#e7efe9;
  --timber:#b8762b;
  --timber-dark:#8a5716;
  --timber-050:#f6ecdd;
  --cream:#f5f2ec;
  --paper:#fffdfa;
  --ink:#161d18;
  --ink-soft:#4c5a51;
  --line:#ded7ca;
  --line-soft:#ece6db;

  --shadow-sm:0 1px 2px rgba(13,25,19,.06),0 2px 8px rgba(13,25,19,.05);
  --shadow-md:0 4px 10px rgba(13,25,19,.08),0 14px 34px rgba(13,25,19,.10);
  --radius:4px;
  --radius-lg:8px;
  --wrap:1160px;
  --gutter:clamp(1rem,4vw,2rem);
  --step:clamp(3.25rem,7vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  font-synthesis-weight:none;
}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;letter-spacing:-.018em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.5rem + 2.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,1.28rem + 1.5vw,2.35rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.05em;max-width:66ch}
ul,ol{margin:0 0 1.05em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:600}
img{max-width:100%;height:auto;display:block}

a{color:var(--green-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--timber-dark)}

:focus-visible{outline:3px solid var(--timber);outline-offset:2px;border-radius:2px}

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.narrow{width:min(100%,72ch)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--timber-dark);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Sierlijk smeedijzer, het herkenningsteken uit het logo ---------------- */
.ornament{display:block;width:210px;max-width:60%;height:auto;color:var(--timber);margin:0 0 1.1rem}
.ornament--center{margin-inline:auto}
.ornament--light{color:rgba(255,255,255,.55)}

/* --- Topbalk -------------------------------------------------------------- */
.topbar{background:var(--green-950);color:#cfe0d5;font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:center;justify-content:space-between;padding:.5rem 0}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--timber)}
.topbar-links{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center}
.topbar-note{display:flex;align-items:center;gap:.45rem}

/* --- Header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--green-900);color:#fff;border-bottom:3px solid var(--timber)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:74px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:#fff;line-height:1;margin-right:auto;padding:.55rem 0}
.brand small{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--timber);font-weight:600}
.brand span{font-size:1.42rem;font-weight:700;letter-spacing:.06em;margin-top:.28rem}
.brand:hover span{color:var(--timber)}

.nav-toggle{display:none;align-items:center;gap:.5rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32);border-radius:var(--radius);padding:.55rem .8rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.nav-toggle-bars{display:block;width:18px;height:2px;background:currentColor;position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}

.site-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.6rem .72rem;color:#e3ece6;text-decoration:none;font-size:.94rem;font-weight:500;border-radius:var(--radius)}
.site-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.site-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--timber)}
.site-nav .nav-cta{margin-left:.5rem}

/* --- Knoppen -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:var(--radius);font-weight:600;font-size:1rem;line-height:1.25;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn svg{flex:none}
.btn-primary{background:var(--timber-dark);color:#fff;border-color:var(--timber-dark)}
.btn-primary:hover{background:#6f450f;border-color:#6f450f;color:#fff}
.btn-dark{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.btn-dark:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}
.btn-outline{background:transparent;color:var(--green-800);border-color:var(--green-800)}
.btn-outline:hover{background:var(--green-800);color:#fff}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--green-900);border-color:#fff}
.btn-sm{padding:.55rem .95rem;font-size:.92rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}

/* --- Secties -------------------------------------------------------------- */
section{padding:var(--step) 0}
.sec-dark{background:var(--green-900);color:#eaf1ec}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark a{color:#f0dcc0}
.sec-cream{background:var(--cream)}
.sec-tight{padding-block:calc(var(--step) * .62)}

.eyebrow{display:block;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--timber-dark);margin:0 0 .7rem}
.sec-dark .eyebrow{color:var(--timber)}
.lead{font-size:clamp(1.06rem,1rem + .4vw,1.25rem);color:var(--ink-soft);max-width:60ch}
.sec-dark .lead{color:#c9d8ce}
.sec-head{max-width:62ch;margin-bottom:2.4rem}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--green-950);color:#fff;padding:0;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,var(--green-950) 8%,rgba(13,25,19,.86) 46%,rgba(13,25,19,.5) 100%)}
.hero .wrap{position:relative;z-index:2;padding:clamp(3.2rem,8vw,6rem) 0 clamp(2.6rem,6vw,4rem)}
.hero h1{color:#fff;max-width:19ch}
.hero .lead{color:#d5e2d9;max-width:52ch;font-size:clamp(1.08rem,1rem + .5vw,1.32rem)}
.hero-where{display:inline-flex;align-items:center;gap:.5rem;background:rgba(184,118,43,.18);border:1px solid rgba(184,118,43,.55);color:#f2dcbc;border-radius:999px;padding:.35rem .95rem;font-size:.85rem;font-weight:600;margin-bottom:1.3rem}
.hero-usps{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.55rem}
.hero-usps li{display:flex;gap:.6rem;align-items:flex-start;color:#dbe6de;font-size:.98rem}
.hero-usps svg{flex:none;margin-top:.28rem;color:var(--timber)}

/* --- Vertrouwensbalk ------------------------------------------------------ */
.trustbar{background:var(--green-800);color:#dfeae2;padding:1.15rem 0}
.trustbar ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.trustbar li{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;line-height:1.45}
.trustbar svg{flex:none;margin-top:.2rem;color:var(--timber)}
.trustbar strong{color:#fff;display:block;font-weight:600}

/* --- Rasters -------------------------------------------------------------- */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

/* --- Kaarten -------------------------------------------------------------- */
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-media{aspect-ratio:16/9;background:var(--green-800);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.45rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card:hover h3 a{color:var(--timber-dark)}
.card p{font-size:.96rem;color:var(--ink-soft);margin-bottom:1rem}
.card-more{margin-top:auto;font-weight:600;font-size:.94rem;color:var(--timber-dark);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.card:hover .card-more{gap:.65rem}
.card-count{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem;display:block}

.panel{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--timber);border-radius:var(--radius-lg);padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.sec-dark .panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);border-left-color:var(--timber);color:#e6efe9}

/* --- Stappen -------------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));counter-reset:step}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.35rem 1.4rem}
.sec-dark .steps li,.sec-cream .steps li{background:var(--paper)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:-.85rem;left:1.3rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;background:var(--timber-dark);color:#fff;border-radius:50%;font-weight:700;font-size:1rem}
.steps h3{margin:.65rem 0 .4rem;font-size:1.1rem}
.steps p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* --- Fotogalerij ---------------------------------------------------------- */
.gallery{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));margin:0;padding:0;list-style:none}
.gallery li{margin:0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}
.gallery figcaption{font-size:.84rem;color:var(--ink-soft);margin-top:.4rem}

/* --- Citaat --------------------------------------------------------------- */
.quote{border-left:4px solid var(--timber);padding:.2rem 0 .2rem 1.5rem;margin:0}
.quote p{font-size:clamp(1.1rem,1rem + .55vw,1.38rem);line-height:1.5;font-weight:500;color:var(--ink)}
.sec-dark .quote p{color:#fff}
.quote footer{font-size:.92rem;color:var(--ink-soft)}
.sec-dark .quote footer{color:#bccdc2}

/* --- Contactroutes -------------------------------------------------------- */
.routes{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));list-style:none;margin:0;padding:0}
.route{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.route-ico{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--timber-050);color:var(--timber-dark);display:grid;place-items:center;margin-bottom:.9rem}
.route h3{font-size:1.12rem;margin-bottom:.35rem}
.route p{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.1rem}
.route .btn{margin-top:auto}

/* --- NAP / contactblok ---------------------------------------------------- */
.nap{font-style:normal;line-height:1.75}
.nap dt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-top:.9rem}
.nap dd{margin:0;font-size:1.05rem}
.nap dd a{font-weight:600}
.sec-dark .nap dt{color:#a8bdb0}
.map-link{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);max-width:640px}
.map-link img{width:100%;height:auto}
.map-link span{display:block;padding:.75rem 1rem;font-weight:600;color:var(--green-700)}
.map-link:hover span{color:var(--timber-dark)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:.25rem 0}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;font-weight:600;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.45rem;width:.62rem;height:.62rem;border-right:2px solid var(--timber-dark);border-bottom:2px solid var(--timber-dark);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 1.05rem;color:var(--ink-soft)}

/* --- Kruimelpad ----------------------------------------------------------- */
.crumbs{background:var(--cream);border-bottom:1px solid var(--line-soft);font-size:.86rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:.8rem 0}
.crumbs li::after{content:"›";margin-left:.35rem;color:var(--ink-soft)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-soft)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* --- Pagina-intro --------------------------------------------------------- */
.page-head{background:var(--green-900);color:#fff;padding:clamp(2.4rem,5vw,3.6rem) 0}
.page-head h1{color:#fff;margin-bottom:.55rem}
.page-head .lead{color:#cddbd2;margin-bottom:0}

/* --- Slot-CTA ------------------------------------------------------------- */
.cta-strip{background:var(--green-800);color:#fff}
.cta-strip .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.cta-strip h2{margin-bottom:.35rem;color:#fff}
.cta-strip p{color:#c9d8ce;margin:0;max-width:52ch}
.cta-strip .btn-row{margin-top:0}

/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--green-950);color:#b7c8bd;padding:var(--step) 0 0;font-size:.95rem}
.site-footer h2,.site-footer h3{color:#fff;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.site-footer a{color:#e2ece5;text-decoration:none}
.site-footer a:hover{color:var(--timber);text-decoration:underline}
.footer-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.footer-brand span{display:block;font-size:1.3rem;font-weight:700;letter-spacing:.06em;color:#fff}
.footer-brand small{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--timber);font-weight:600}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--step);padding:1.3rem 0;font-size:.86rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* --- Mobiele belbalk ------------------------------------------------------ */
.callbar{display:none}

/* --- Tabellen ------------------------------------------------------------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.96rem;margin-bottom:1.2rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
th{background:var(--cream);font-weight:600}

/* --- Responsief ----------------------------------------------------------- */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--green-900);border-bottom:3px solid var(--timber);padding:.5rem var(--gutter) 1.1rem;box-shadow:var(--shadow-md)}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav a{padding:.85rem .3rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .site-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--timber);padding-left:.8rem}
  .site-nav .nav-cta{margin:.9rem 0 0}
  .site-nav .nav-cta a{border-bottom:0;text-align:center;padding:.85rem 1rem}
  .site-header .wrap{position:relative}
}
@media (max-width:640px){
  .topbar-links{display:none}
  body{padding-bottom:64px}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--green-900);border-top:2px solid var(--timber)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:1rem .5rem;color:#fff;font-weight:600;font-size:.98rem;text-decoration:none}
  .callbar a + a{border-left:1px solid rgba(255,255,255,.18);background:var(--timber-dark)}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .cta-strip .btn-row{width:100%}
}

@media print{
  .site-header,.topbar,.callbar,.cta-strip,.crumbs{display:none}
  body{color:#000;background:#fff}
}