/* ============================================================
   BOUWBEDRIJF CASMOND — casmond.nl (redesign 2026, dicht bij origineel)
   Palet uit het logo: casmond-blauw + groen; licht/zakelijk zoals de oude site.
   Signatuur: de bouw-strip (nieuwbouw ◦ verbouw ◦ …) + het groene logo-boogje.
   ============================================================ */
:root{
  --blauw:#2456A0; --blauw-d:#1B4076; --groen:#5CB245; --groen-d:#37722A;
  --lucht:#EEF3F6; --wit:#FFFFFF; --inkt:#1E2A38; --grijs:#54626F;
  --lijn:rgba(30,42,56,.12);
  --schaduw-s:0 1px 2px rgba(30,42,56,.05),0 4px 14px rgba(30,42,56,.08);
  --schaduw-m:0 2px 6px rgba(30,42,56,.06),0 14px 34px rgba(30,42,56,.13);
  --schaduw-g:0 6px 16px rgba(30,42,56,.08),0 30px 70px rgba(36,86,160,.18);
  --disp:"Inter Tight",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --rond:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--inkt);background:var(--wit);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blauw)}
.skip{position:absolute;left:-9999px;top:0;background:var(--blauw);color:#fff;padding:10px 18px;z-index:200}
.skip:focus{left:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.center{text-align:center}

h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;color:var(--inkt);letter-spacing:-.02em}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px;font-weight:700}
h1 em,h2 em{font-style:normal;color:var(--blauw)}
.micro{font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--groen-d);margin-bottom:10px}
.micro-licht{color:#A9D89C}
.lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--grijs)}

/* header */
.kop{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;gap:26px;height:80px}
.brand img{height:46px;width:auto}
.nav-hoofd{display:flex;gap:24px;margin-left:auto}
.nav-hoofd a{text-decoration:none;color:var(--inkt);font-weight:600;font-size:15px;position:relative;padding:6px 0}
.nav-hoofd a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:3px;background:var(--groen);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav-hoofd a:hover::after,.nav-hoofd a[aria-current]::after{transform:scaleX(1)}
.kop-cta{margin-left:6px}
.menu-knop{display:none;border:0;background:transparent;cursor:pointer;padding:12px;flex-direction:column;gap:5px}
.menu-knop span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--inkt)}
.m-menu{display:none}
.m-menu.open{display:block;position:fixed;inset:80px 0 0 0;background:var(--wit);z-index:55;padding:28px;overflow:auto}
.m-menu a{display:block;font-family:var(--disp);font-weight:700;font-size:24px;color:var(--inkt);text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--lijn)}

/* bouw-strip — signatuur uit het origineel */
.strip{background:var(--blauw);color:#DCE7F5;overflow:hidden;padding:9px 0;border-bottom:3px solid var(--groen)}
.strip-baan{display:flex;gap:26px;white-space:nowrap;width:max-content;animation:strip 46s linear infinite}
.strip-baan span{font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase}
.strip-baan i{font-style:normal;color:var(--groen)}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;border:0;cursor:pointer;font-family:var(--body);font-weight:700;font-size:15px;border-radius:10px;padding:14px 26px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-groen{background:linear-gradient(160deg,var(--groen),var(--groen-d));color:#fff;box-shadow:0 4px 14px rgba(92,178,69,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-groen:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(92,178,69,.5)}
.btn-blauw{background:var(--blauw);color:#fff;box-shadow:0 4px 14px rgba(36,86,160,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-blauw:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(36,86,160,.45);background:var(--blauw-d)}
.btn-blauw-ghost{background:var(--wit);color:var(--blauw);box-shadow:inset 0 0 0 1.5px var(--blauw),var(--schaduw-s)}
.btn-blauw-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--blauw-d),var(--schaduw-m)}
.btn.groot{padding:17px 32px;font-size:16.5px}
.kop-cta{padding:11px 20px;font-size:14px}

/* hero */
.hero{position:relative;min-height:clamp(480px,68vh,680px);display:flex;align-items:center}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,32,48,.55) 0%,rgba(20,32,48,.18) 55%,rgba(20,32,48,0) 80%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(40px,7vh,70px)}
.hero-kaart{max-width:620px;background:rgba(255,255,255,.96);border-radius:18px;padding:clamp(26px,4vw,44px);box-shadow:var(--schaduw-g);border-top:4px solid var(--groen)}
.hero-kaart h1{margin-bottom:14px}
.hero-kaart .lede{margin-bottom:24px}
.cta-rij{display:flex;gap:12px;flex-wrap:wrap}

/* secties */
.sectie{padding:clamp(52px,7vw,92px) 0}
.sectie-lucht{background:var(--lucht)}
.sectie-kop{margin-bottom:34px}
.sectie-kop h2{margin-top:2px}

/* diensten-grid met het logo-boogje als signatuur */
.dienst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dienst-grid.drie{grid-template-columns:repeat(3,1fr)}
.dienst{position:relative;display:block;text-decoration:none;color:var(--inkt);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);padding:26px 24px 24px;box-shadow:var(--schaduw-s);transition:transform .24s,box-shadow .24s,border-color .24s;overflow:hidden}
.dienst:hover{transform:translateY(-5px);box-shadow:var(--schaduw-g);border-color:transparent}
.dienst h3{margin:14px 0 8px}
.dienst p{font-size:14.5px;color:var(--grijs)}
.d-boog{display:block;width:44px;height:22px;position:relative}
.d-boog::before,.d-boog::after{content:"";position:absolute;border-radius:99px}
.d-boog::before{left:0;top:0;width:34px;height:9px;background:var(--groen);transform:rotate(-8deg)}
.d-boog::after{left:10px;bottom:0;width:34px;height:9px;background:var(--blauw);transform:rotate(-8deg)}
.dienst:hover .d-boog::before{background:var(--groen-d)}

/* projecten */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project{position:relative;display:block;text-decoration:none;color:var(--inkt);border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw-m);background:var(--wit);transition:transform .24s,box-shadow .24s}
.project:hover{transform:translateY(-5px);box-shadow:var(--schaduw-g)}
.project img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .5s}
.project:hover img{transform:scale(1.04)}
.project .p-info{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.95);border-radius:10px;padding:12px 16px;box-shadow:var(--schaduw-s);display:flex;flex-direction:column;gap:2px}
.project .p-info b{font-family:var(--disp);font-weight:700}
.project .p-info span{font-size:13px;color:var(--grijs)}
.project.kaart{display:flex;flex-direction:column}
.project.kaart img{aspect-ratio:3/2}
.project.kaart .p-body{padding:18px 20px 22px}
.project.kaart .p-body h3{margin:2px 0 8px}
.project.kaart .p-body p{font-size:14.5px;color:var(--grijs)}
.project.kaart .p-body .micro{margin-bottom:0}

/* duo-layout */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.duo-foto{border-radius:var(--rond);overflow:hidden;box-shadow:var(--schaduw-g)}
.duo-foto img{width:100%;height:100%;object-fit:cover}
.vink{list-style:none;margin-top:12px}
.vink li{padding:7px 0 7px 32px;position:relative}
.vink li::before{content:"";position:absolute;left:0;top:.72em;width:18px;height:9px;border-left:3px solid var(--groen);border-bottom:3px solid var(--groen);transform:rotate(-45deg) translateY(-2px)}

/* blauwe band */
.band{background:linear-gradient(120deg,var(--blauw-d),var(--blauw));color:#E5EDF8;padding:clamp(44px,6vw,70px) 0;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;border:44px solid rgba(92,178,69,.25)}
.band h2{color:#fff}
.band p{max-width:56ch}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;z-index:2}

/* logos */
.logos-sectie{padding-block:clamp(34px,4vw,54px)}
.logo-rij{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;align-items:center}
.logo-rij span{font-family:var(--disp);font-weight:700;font-size:clamp(17px,2vw,22px);color:#64788C;letter-spacing:.02em;transition:color .2s}
.logo-rij span:hover{color:var(--blauw)}

/* pagina-kop */
.pagina-kop{padding:clamp(40px,5.5vw,70px) 0 12px;background:linear-gradient(180deg,var(--lucht),rgba(238,243,246,0));}
.pagina-kop h1{margin-bottom:12px}

/* contact */
.adres-kaart{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--groen);border-radius:var(--rond);padding:20px 24px;box-shadow:var(--schaduw-s);margin-bottom:16px}
.offerte-form{background:var(--lucht);border-radius:var(--rond);padding:clamp(20px,3vw,30px);box-shadow:var(--schaduw-s);margin-top:22px}
.offerte-form label{display:block;font-weight:600;font-size:14px;margin-bottom:14px}
.offerte-form input,.offerte-form textarea{display:block;width:100%;margin-top:6px;font-family:var(--body);font-size:15.5px;padding:12px 14px;border:1px solid var(--lijn);border-radius:10px;background:var(--wit);outline:none;transition:border-color .2s,box-shadow .2s}
.offerte-form input:focus,.offerte-form textarea:focus{border-color:var(--groen);box-shadow:0 0 0 3px rgba(92,178,69,.18)}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-notitie{font-size:12.5px;color:var(--grijs);margin-top:10px;text-align:center}
.kaart-vast{align-self:stretch}

/* footer */
.voet{background:#25313E;color:#B9C4CE;padding:clamp(44px,6vw,66px) 0 30px;margin-top:0}
.voet a{color:#D7DEE5;text-decoration:none}
.voet a:hover{color:#fff}
.voet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.voet-h{font-family:var(--disp);font-weight:700;color:#fff;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.voet p{font-size:14px;line-height:1.75}
.voet-onder{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#9FACB8;letter-spacing:.14em;text-transform:uppercase}

/* reveals */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.4,.05,.2,1)}
.reveal.in,.reveal.in-beeld{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .strip-baan{animation:none}
}

/* responsive */
@media(max-width:1000px){
  .dienst-grid,.dienst-grid.drie{grid-template-columns:repeat(2,1fr)}
  .project-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .nav-hoofd,.kop-cta{display:none}
  .menu-knop{display:flex}
  .duo{grid-template-columns:1fr}
  .voet-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:0}
  .hero-kaart{margin-top:40px}
  .kaart-vast iframe{height:380px}
}
@media(max-width:560px){
  .dienst-grid,.dienst-grid.drie,.project-grid{grid-template-columns:1fr}
  .form-rij{grid-template-columns:1fr}
  .brand img{height:38px}
  .band-in{flex-direction:column;align-items:flex-start}
}