/*
Theme Name: Bouwbedrijf SAP
Theme URI: https://bouwbedrijf-sap.nl
Author: Bouwbedrijf SAP
Description: Moderne, soepele showcase-website voor Bouwbedrijf SAP. Eenpagina-opzet met projectenoverzicht (met filter en lichtbak), korte omschrijving met oplopende kengetallen en een contactformulier. Strakke, moderne vormgeving in grijs, wit en zwart met een warme koperen accentkleur (instelbaar via de Customizer). In de header tekent een woning met aanbouw zichzelf als blauwdruk-animatie.
Version: 5.7
License: GNU General Public License v2 or later
Text Domain: bouwbedrijf-sap
*/

/* -------------------------------------------------
   1. Variabelen & basis
-------------------------------------------------- */
:root{
  --c-black:    #0e0e0e;
  --c-charcoal: #1b1b1d;
  --c-graphite: #3b3b3e;
  --c-steel:    #8b8b90;
  --c-mist:     #dcdbd8;
  --c-white:    #e7e6e3;
  --c-accent:   #b8722c;            /* wordt overschreven via Customizer */
  --c-accent-soft: rgba(184,114,44,.14);
  --c-card:     #f3f2f0;   /* kaarten: iets lichter dan de achtergrond */
  --c-line:     #d0cfcb;   /* zachte randen */

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --ease-flow: cubic-bezier(.22,.8,.28,1);
  --radius: 10px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--c-charcoal);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition: color .3s var(--ease-flow); }
ul{ list-style:none; }
h1,h2,h3{ font-family: var(--font-display); line-height:1.15; font-weight:600; letter-spacing:-.02em; }

.container{ width:min(var(--maxw), 92%); margin-inline:auto; }
.section{ padding: 6rem 0; position:relative; }
.section-label{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--c-steel); margin-bottom:1.1rem;
}
.section-label::before{
  content:""; width:34px; height:2px; background: var(--c-accent);
  border-radius:2px;
}
.section-title{ font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom:1.2rem; }

/* -------------------------------------------------
   2. Scroll-voortgangsbalk
-------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #fff));
  z-index:1200; pointer-events:none;
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* -------------------------------------------------
   3. Header & navigatie
-------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding: 1.2rem 0;
  transition: padding .4s var(--ease-flow), background .4s var(--ease-flow), box-shadow .4s var(--ease-flow);
}
.site-header.is-scrolled{
  padding:.55rem 0;
  background: #0e0e0e;
  box-shadow: 0 6px 30px rgba(0,0,0,.25);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-branding{ display:flex; align-items:center; gap:.8rem; color: var(--c-white); }
.site-branding img{ max-height:65px; width:auto; }
.site-title{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; letter-spacing:.02em; color:var(--c-white); }
.site-title span{ color: var(--c-accent); }

.main-navigation ul{ display:flex; gap:2rem; }
.main-navigation a{
  position:relative; color: var(--c-mist); font-size:.95rem; font-weight:500; padding:.3rem 0;
}
.main-navigation a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: var(--c-accent); border-radius:2px;
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-flow);
}
.main-navigation a:hover{ color: var(--c-white); }
.main-navigation a:hover::after,
.main-navigation a.is-active::after{ transform: scaleX(1); }

.menu-toggle{
  display:none; background:none; border:0; cursor:pointer; z-index:1100;
  width:44px; height:44px; position:relative;
}
.menu-toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--c-white);
  border-radius:2px; transition: transform .35s var(--ease-flow), opacity .3s, top .35s var(--ease-flow);
}
.menu-toggle span:nth-child(1){ top:15px; }
.menu-toggle span:nth-child(2){ top:21px; }
.menu-toggle span:nth-child(3){ top:27px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* -------------------------------------------------
   4. Hero
-------------------------------------------------- */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(1200px 600px at 85% -10%, rgba(184,114,44,.10), transparent 60%),
    linear-gradient(160deg, var(--c-black) 0%, var(--c-charcoal) 45%, var(--c-graphite) 100%);
  color: var(--c-white);
  overflow:hidden;
  padding: 6rem 0 4.5rem;
}
.hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero-logo{ margin-bottom:1.4rem; }
.hero-logo img{ width:400px; height:auto; max-width:100%; object-fit:contain; object-position:left; display:block; }
.hero-eyebrow{
  display:inline-block; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--c-accent); margin-bottom:1.1rem; font-weight:600;
}
.hero h1{ font-size: clamp(2.4rem, 5.4vw, 3.9rem); font-weight:700; margin-bottom:1.3rem; }
.hero h1 em{ font-style:normal; color: var(--c-accent); }
.hero p{ color: var(--c-steel); max-width: 34rem; font-size:1.08rem; margin-bottom:2.2rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.8rem; border-radius:8px;
  font-weight:600; font-size:.98rem; cursor:pointer; border:0;
  transition: transform .3s var(--ease-flow), box-shadow .3s var(--ease-flow), background .3s;
  will-change: transform;
}
.btn-accent{
  background: var(--c-accent); color: var(--c-white);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--c-accent) 70%, transparent);
}
.btn-accent:hover{ transform: translateY(-3px); box-shadow: 0 16px 38px -10px color-mix(in srgb, var(--c-accent) 80%, transparent); }
.btn-ghost{
  background:transparent; color:var(--c-mist);
  border:1px solid rgba(255,255,255,.28);
}
.btn-ghost:hover{ border-color: var(--c-accent); color: var(--c-white); transform: translateY(-3px); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-visual{ position:relative; }
.hero-visual .hero-photo{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.5);
}
.hero-visual.has-photo::before{
  content:""; position:absolute; inset:auto -26px -26px auto;
  width:56%; height:56%;
  border:2px solid var(--c-accent);
  border-radius: var(--radius);
  opacity:.55; z-index:-1;
}

/* placeholder als er nog geen foto is */
.ph{
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--c-steel); border-radius: var(--radius);
  color: var(--c-steel); font-size:.9rem; text-align:center;
  min-height: 320px; background: rgba(255,255,255,.03); padding:1rem;
}
.project-card .ph{ min-height: 260px; border-color:#c3c1b8; }

/* -------------------------------------------------
   4b. Blauwdruk-animatie: woning met aanbouw
-------------------------------------------------- */
.hero-house{ padding: 1rem 0; }
.hero-house svg{ width:100%; height:auto; display:block; }
.hero-house .st-accent{ stroke: var(--c-accent); }
.hero-house .hh-glass{ fill: var(--c-accent); fill-opacity:.16; }
.hero-house .hh-text{
  fill:#9a9aa0; font-family: var(--font-body);
  font-size:9px; letter-spacing:.07em; font-weight:500;
}
.hero-house .hh-text--accent{ fill: var(--c-accent); font-weight:700; }

/* lijnen tekenen zichzelf eenmalig, daarna staat alles stil */
.hh-draw{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hh-draw 1s var(--ease-flow) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes hh-draw{ to{ stroke-dashoffset: 0; } }

.hh-fade{
  opacity: 0;
  animation: hh-fade .9s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes hh-fade{ to{ opacity: 1; } }

/* -------------------------------------------------
   5. Over ons + tellers
-------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:center; }
.about-photo img, .hero-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo{ border-radius:var(--radius); overflow:hidden; box-shadow: 0 16px 40px -24px rgba(0,0,0,.5); }
.about-text p{ color: var(--c-steel); margin-bottom:1rem; }
.about .section-title{ color: var(--c-white); }

/* -------------------------------------------------
   5b. Diensten
-------------------------------------------------- */
/* Diensten + Over ons op een middendonkere tint: verschilt van de
   (bijna zwarte) header en het verlopende contactblok. */
.services{ background: var(--c-graphite); padding-top: 5rem; }
.about{ background: #2f2f33; }
.services .section-title{ color: var(--c-white); }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.service-card{
  position:relative; background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  padding:1.9rem 1.5rem 1.7rem;
  transition: transform .35s var(--ease-flow), box-shadow .35s var(--ease-flow), border-color .35s, background .35s;
  overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--c-accent);
  transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease-flow);
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.5);
}
.service-card:hover::before{ transform: scaleX(1); }
.service-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:8px;
  background: var(--c-accent-soft); color: var(--c-accent);
  margin-bottom:1.15rem;
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{ font-size:1.08rem; margin-bottom:.5rem; color: var(--c-white); }
.service-card p{ font-size:.93rem; color: var(--c-steel); line-height:1.6; }

/* -------------------------------------------------
   6. Projecten: filter, grid, lichtbak
-------------------------------------------------- */
.projects{ background: var(--c-mist); }

.project-filter{ display:flex; gap:.6rem; flex-wrap:wrap; margin: 0 0 2.4rem; }
.filter-btn{
  padding:.55rem 1.25rem; border-radius:8px; border:1px solid var(--c-line);
  background: var(--c-card); color:var(--c-graphite); font-size:.9rem; font-weight:500;
  cursor:pointer; transition: all .3s var(--ease-flow);
}
.filter-btn:hover{ border-color: var(--c-accent); color: var(--c-accent); }
.filter-btn.is-active{
  background: var(--c-accent); border-color: var(--c-accent); color:#fff;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--c-accent) 70%, transparent);
}

.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.project-card{
  position:relative; border-radius: var(--radius); overflow:hidden;
  background: var(--c-card); cursor:pointer;
  box-shadow: 0 6px 22px -14px rgba(0,0,0,.22);
  transition: transform .45s var(--ease-flow), box-shadow .45s var(--ease-flow), opacity .4s, scale .4s;
}
.project-card:hover{ transform: translateY(-5px); box-shadow: 0 14px 34px -18px rgba(0,0,0,.3); }
.project-card.is-hidden{ display:none; }
.project-card img{ width:100%; aspect-ratio: 4/3; object-fit:cover; transition: transform .8s var(--ease-flow); }
.project-card:hover img{ transform: scale(1.06); }
.project-info{
  position:absolute; inset:auto 0 0 0; padding:2.4rem 1.3rem 1.1rem;
  background: linear-gradient(transparent, rgba(14,14,14,.85));
  color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:.8rem;
  transform: translateY(8px); opacity:.95;
  transition: transform .45s var(--ease-flow);
}
.project-card:hover .project-info{ transform: translateY(0); }
.project-info h3{ font-size:1.05rem; font-weight:600; }
.project-tag{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  background: var(--c-accent); color:#fff; padding:.28rem .7rem; border-radius:4px;
  white-space:nowrap;
}

/* lichtbak */
.lightbox{
  position:fixed; inset:0; z-index:1300;
  background: rgba(10,10,10,.92); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease-flow);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox figure{
  max-width: 1000px; width:100%; transform: scale(.96);
  transition: transform .35s var(--ease-flow);
}
.lightbox.is-open figure{ transform: scale(1); }
.lightbox img{ width:100%; max-height:78vh; object-fit:contain; border-radius:8px; }
.lightbox figcaption{
  color: var(--c-mist); text-align:center; margin-top:1rem; font-size:.95rem;
}
.lightbox figcaption .project-tag{ margin-left:.6rem; }
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--c-accent); border-color: var(--c-accent); }
.lightbox-close{ top:20px; right:22px; }
.lightbox-nav.prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:18px; top:50%; transform:translateY(-50%); }

/* -------------------------------------------------
   7. Contact
-------------------------------------------------- */
.contact{
  background: linear-gradient(180deg, var(--c-charcoal) 0%, var(--c-black) 100%);
  color: var(--c-mist);
}
.contact .section-title{ color: var(--c-white); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; }
.contact-details li{ display:flex; gap:.9rem; margin-bottom:1.2rem; align-items:flex-start; }
.contact-address{ display:flex; flex-direction:column; line-height:1.5; }
.contact-address strong{ color: var(--c-white); font-weight:600; margin-bottom:.15rem; }
.contact-details .ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.contact-details a:hover{ color: var(--c-accent); }

.contact-form{ display:grid; gap:1.1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-field{ position:relative; }
.form-select{
  width:100%; padding:.95rem 2.6rem .95rem 1.1rem;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px; color: var(--c-white);
  font: inherit; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8722c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1.1rem center;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.form-select:focus{
  outline:none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  background-color: rgba(255,255,255,.08);
}
.form-select option{ color:#111; }
.form-field input, .form-field textarea{
  width:100%; padding: .95rem 1.1rem;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px; color: var(--c-white);
  font: inherit;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  background: rgba(255,255,255,.08);
}
.form-field.is-invalid input, .form-field.is-invalid textarea{ border-color:#d05a4e; }
.field-error{ color:#e59288; font-size:.82rem; margin-top:.35rem; display:none; }
.form-field.is-invalid .field-error{ display:block; }
.form-field textarea{ min-height:150px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

.form-note{ font-size:.85rem; color:var(--c-steel); }
.form-feedback{
  border-radius:8px; padding:1rem 1.2rem; font-size:.95rem; display:none;
}
.form-feedback.is-visible{ display:block; animation: feedback-in .5s var(--ease-flow); }
.form-feedback.success{ background: rgba(88,160,98,.15); border:1px solid rgba(88,160,98,.4); color:#9fd3a8; }
.form-feedback.error{ background: rgba(208,90,78,.14); border:1px solid rgba(208,90,78,.4); color:#e59288; }
@keyframes feedback-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* -------------------------------------------------
   8. Footer & terug-naar-boven
-------------------------------------------------- */
.site-footer{
  background: var(--c-black); color: var(--c-steel);
  padding: 2.4rem 0; font-size:.88rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-nav ul{ display:flex; gap:1.6rem; }
.footer-nav a:hover{ color: var(--c-accent); }
.footer-credit{ font-size:.66rem; color: var(--c-steel); opacity:.6; }
.footer-credit a{ color: var(--c-accent); font-weight:500; }
.footer-credit a:hover{ text-decoration:underline; }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:1100;
  width:48px; height:48px; border-radius:12px; border:0; cursor:pointer;
  background: var(--c-accent); color:#fff; font-size:1.1rem;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--c-accent) 80%, transparent);
  opacity:0; transform: translateY(14px); pointer-events:none;
  transition: opacity .4s var(--ease-flow), transform .4s var(--ease-flow), background .3s;
  display:flex; align-items:center; justify-content:center;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background: var(--c-charcoal); }

/* -------------------------------------------------
   9. Reveal on scroll
-------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease-flow), transform .9s var(--ease-flow); transition-delay: var(--rd, 0s); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* -------------------------------------------------
   9b. Projectpagina & archief
-------------------------------------------------- */
.project-single, .project-archive{ padding: 8rem 0 5rem; background: var(--c-graphite); color: var(--c-mist); }
.project-single > .container, .project-archive > .container{ margin-bottom: 2.2rem; }

.project-back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.92rem; font-weight:500; color: var(--c-steel);
  margin-bottom: 2rem; transition: gap .3s var(--ease-flow), color .3s;
}
.project-back span{ transition: transform .3s var(--ease-flow); }
.project-back:hover{ color: var(--c-accent); gap:.7rem; }
.project-back:hover span{ transform: translateX(-3px); }

.project-head{
  display:grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items:end;
  padding-bottom: 2rem; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:.5rem;
}
.project-cat{
  display:inline-block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--c-accent); font-weight:600; margin-bottom:.7rem;
}
.project-head h1{ font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--c-white); }
.project-lead{ color: var(--c-steel); margin-top:.9rem; font-size:1.05rem; }

.project-facts{ display:grid; gap:.9rem; }
.project-facts li{ display:flex; flex-direction:column; gap:.1rem; padding-left:1rem; border-left:3px solid var(--c-accent); }
.project-facts span{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-steel); }
.project-facts strong{ font-family: var(--font-display); font-size:1.05rem; color: var(--c-white); font-weight:600; }

/* Carousel */
.project-gallery{ position:relative; border-radius: var(--radius); overflow:hidden; background: var(--c-charcoal); }
.gallery-track{ position:relative; width:100%; aspect-ratio: 16/10; }
.gallery-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition: opacity .5s var(--ease-flow);
}
.gallery-slide[data-active]{ opacity:1; visibility:visible; }
.gallery-open{
  display:block; width:100%; height:100%; padding:0; border:0; cursor: zoom-in;
  background:none; position:relative;
}
.gallery-open img{ width:100%; height:100%; object-fit:cover; }
.gallery-zoom{
  position:absolute; right:16px; bottom:16px;
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(14,14,14,.55); color:#fff; font-size:1.1rem;
  backdrop-filter: blur(4px);
  opacity:0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.gallery-open:hover .gallery-zoom{ opacity:1; transform: translateY(0); }

.gallery-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background: rgba(255,255,255,.9); border:0; color: var(--c-black); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: background .3s, color .3s;
  z-index:2;
}
.gallery-nav:hover{ background: var(--c-accent); color:#fff; }
.gallery-nav.prev{ left:16px; }
.gallery-nav.next{ right:16px; }

.gallery-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:2;
  display:flex; justify-content:center; gap:.5rem;
}
.gallery-dot{
  width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background: rgba(255,255,255,.5); transition: background .3s, transform .3s;
}
.gallery-dot.is-active{ background: var(--c-accent); transform: scale(1.25); }
.project-gallery.is-single .gallery-track{ aspect-ratio: 16/9; }

/* Body: tekst + CTA */
.project-body{ display:grid; grid-template-columns: 1.7fr 1fr; gap: 3rem; margin-top: 2.6rem; align-items:start; }
.project-content{ color: var(--c-mist); line-height:1.75; }
.project-content h2, .project-content h3{ color: var(--c-white); margin:1.6rem 0 .7rem; }
.project-content p{ margin-bottom:1rem; }
.project-content a{ color: var(--c-accent); }
.project-content img{ border-radius: var(--radius); margin:1.2rem 0; }

.project-cta{
  position: sticky; top: 100px;
  background: rgba(255,255,255,.05); color: var(--c-mist);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 2rem 1.8rem;
}
.project-cta h3{ color: var(--c-white); font-size:1.3rem; margin-bottom:.7rem; }
.project-cta p{ font-size:.95rem; color: var(--c-steel); margin-bottom:1.4rem; }
.project-cta .btn{ width:100%; justify-content:center; }

.archive-head{ margin-bottom: 2rem; }
.archive-head .section-title{ color: var(--c-white); }
.archive-pagination{ margin-top: 2.5rem; }
.archive-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 .6rem; margin:0 .2rem;
  border:1px solid rgba(255,255,255,.16); border-radius:8px; color: var(--c-mist);
}
.archive-pagination .page-numbers.current{ background: var(--c-accent); border-color: var(--c-accent); color:#fff; }
.archive-pagination .page-numbers:hover{ border-color: var(--c-accent); color: var(--c-accent); }
.archive-pagination .page-numbers.current:hover{ color:#fff; }
.projects-empty{ color: var(--c-steel); padding: 2rem 0; }

.lightbox figure{ max-width:1100px; width:100%; }

/* -------------------------------------------------
   10. Standaard pagina's / blog
-------------------------------------------------- */
.page-plain{ padding: 9rem 0 5rem; }
.page-plain h1{ font-size:2.2rem; margin-bottom:1.4rem; }
.page-plain .entry-content p{ margin-bottom:1rem; }

/* Algemene voorwaarden */
.page-terms{ padding: 8rem 0 5rem; background: var(--c-graphite); color: var(--c-mist); }
.container-narrow{ width:min(760px, 92%); margin-inline:auto; }
.terms-head{ margin: 1.5rem 0 2rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.12); }
.terms-head h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top:.6rem; color: var(--c-white); }
.terms-content{ color: var(--c-mist); line-height:1.75; }
.terms-content h2{
  font-size:1.25rem; color: var(--c-white);
  margin:2rem 0 .7rem; padding-left:.9rem;
  border-left:3px solid var(--c-accent);
}
.terms-content p{ margin-bottom:.9rem; }
.terms-content a{ color: var(--c-accent); }
.terms-intro{ font-size:1.08rem; color: var(--c-steel); }
.terms-back-bottom{ margin-top:2.5rem; }

/* -------------------------------------------------
   11. Responsief
-------------------------------------------------- */
@media (max-width: 900px){
  .hero-inner, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:repeat(2,1fr); }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .project-head{ grid-template-columns:1fr; gap:1.6rem; align-items:start; }
  .project-body{ grid-template-columns:1fr; gap:2rem; }
  .project-cta{ position:static; }
  .hero{ padding-top:6rem; min-height:auto; }

  /* Hero-logo gecentreerd tonen op mobiel */
  .hero-copy{ text-align:center; }
  .hero-logo{ margin-left:auto; margin-right:auto; }
  .hero-logo img{ width:260px; height:auto; margin-inline:auto; object-position:center; }
  .hero-eyebrow, .hero h1, .hero-copy p{ text-align:center; }
  .hero-actions{ justify-content:center; }

  /* Logo in de bovenbalk verbergen op mobiel */
  .site-branding{ display:none; }
  .header-inner{ justify-content:flex-end; }

  .menu-toggle{ display:block; }
  .main-navigation{
    position:fixed; inset:0; background: rgba(14,14,14,.96); backdrop-filter: blur(10px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .35s var(--ease-flow);
  }
  .main-navigation.is-open{ opacity:1; pointer-events:auto; }
  .main-navigation ul{ flex-direction:column; text-align:center; gap:1.6rem; }
  .main-navigation a{ font-size:1.3rem; }

  /* Vaste balk op mobiel semi-transparant, vaag doorkijkend */
  .site-header.is-scrolled{
    background: rgba(14,14,14,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Footer op mobiel: sectielinks verbergen, alles centreren */
  .footer-inner{ flex-direction:column; text-align:center; gap:.7rem; }
  .footer-section-link{ display:none; }
  .footer-nav ul{ justify-content:center; flex-wrap:wrap; gap:1.2rem; order:1; }
  .footer-credit{ order:3; font-size:.58rem; opacity:.55; }
  .site-footer > .footer-inner > div:first-child{ order:2; font-size:.82rem; }
}
@media (max-width: 560px){
  .project-grid{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .section{ padding:4.2rem 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .project-card img, .project-card, .btn{ transition:none; }
  .scroll-progress{ display:none; }
  .hh-draw{ animation:none; stroke-dashoffset:0; }
  .hh-fade{ animation:none; opacity:1; }
  .gallery-slide{ transition:none; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}