html { scroll-behavior: smooth; }
body { margin: 0; background: #0e0f12; overflow-x: hidden; }

/* De opmaak in de templates staat in style-attributen. Die winnen altijd van
   een stylesheet, dus de responsive overrides hieronder hebben !important
   nodig. Zonder dat gebeurt er niets. */
img, video { max-width: 100%; }
::selection { background: #4f8bf0; color: #0e0f12; }
a { color: #7aa8f5; text-decoration: none; }
a:hover { color: #a9c6fa; }

/* Marquee homepagina. De band bevat twee identieke helften; de animatie schuift
   precies de helft op, waarna copy 2 op de plek van copy 1 staat en het opnieuw
   begint. Dat is alleen naadloos als beide helften even breed zijn: de tussen-
   ruimte tussen de helften zit daarom als padding-right IN de helft en niet als
   gap op de band. Met een gap op de band is 50% een halve gap te weinig en zie
   je bij elke ronde een sprongetje. */
@keyframes macmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes macpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Uitfaden aan beide randen, zodat woorden niet hard tegen de schermrand
   afgekapt worden maar oplossen in de achtergrond. */
.mac-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
/* Stilzetten bij hover: geeft de bezoeker de kans om te lezen. */
.mac-marquee:hover > div { animation-play-state: paused; }

/* Bezoekers die bewegende beelden hebben uitgezet (of er misselijk van worden)
   krijgen een stilstaande band te zien. */
@media (prefers-reduced-motion: reduce) {
  .mac-marquee > div { animation: none !important; }
}

input, textarea, select { font-family: 'Archivo', sans-serif; }
input::placeholder, textarea::placeholder { color: #6c727c; }

/* Hero-achtergrond homepagina. De jpg-regel is de fallback; browsers die
   image-set kennen pakken de webp (380 KB i.p.v. 484 KB). Bron:
   assets/images/projecten/familie-hendriks/1.png, verkleind naar 1920px. */
.mac-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/hero.jpg");
  background-image: image-set(url("../images/hero.webp") type("image/webp"),
                              url("../images/hero.jpg") type("image/jpeg"));
  background-position: 68% center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Verloop over de hero: links donker zodat de tekst leesbaar blijft, rechts
   open zodat het beeld te zien is. */
.mac-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14,15,18,.96) 0%, rgba(14,15,18,.86) 42%,
                                     rgba(14,15,18,.55) 72%, rgba(14,15,18,.35) 100%);
}

/* Op smalle schermen loopt de tekst over de volle breedte. Het huis schuift
   dan naar het midden en het verloop gaat van links-naar-rechts naar
   boven-naar-onder, anders staat de tekst op een lichte lucht. */
@media (max-width: 860px) {
  .mac-hero-bg { background-position: 60% center; }
  .mac-hero-overlay {
    background: linear-gradient(180deg, rgba(14,15,18,.92) 0%, rgba(14,15,18,.86) 55%,
                                        rgba(14,15,18,.6) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Breekpunten: 1080 tablet · 860 grote telefoon / kleine tablet · 560 telefoon
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mac-wrap { padding-left: 24px !important; padding-right: 24px !important; }

  /* drie kolommen wordt twee, de laatste kaart pakt de volle breedte */
  .mac-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .mac-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* bento: 6 kolommen wordt 3, spans halveren zodat er geen gaten vallen */
  .mac-grid-bento { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 240px !important; }
  .mac-grid-bento > * { grid-column: span 3 !important; }

  .mac-cta-box { padding: 44px 32px !important; }
}

/* ── grote telefoon / kleine tablet ─────────────────────────────────────── */
@media (max-width: 860px) {
  /* Header blijft één regel: logo links, hamburger rechts. De links zelf
     staan in het schermvullende menu (zie assets/js/nav.js). */
  .mac-nav { display: none !important; }
  .mac-logo-sub { display: none !important; }
  .mac-header-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .mac-header-inner img { width: 34px !important; height: 34px !important; }

  /* alles onder elkaar */
  .mac-grid-2,
  .mac-grid-3,
  .mac-grid-4,
  .mac-grid-stap { grid-template-columns: 1fr !important; gap: 20px !important; }
  .mac-grid-bento { grid-template-columns: 1fr !important; grid-auto-rows: 230px !important; }
  .mac-grid-bento > * { grid-column: span 1 !important; }

  /* de verticale ruimte tussen secties is op desktop 120px, dat is hier te veel.
     Header en footer hebben hun eigen, kleinere waarden. */
  .mac-wrap:not(.mac-header-inner):not(.mac-footer-inner):not(.mac-footer-powered) {
    padding-top: 56px !important;
    padding-bottom: 32px !important;
  }

  /* De footerbalk is op desktop een grid van 1fr auto 1fr, zodat de tagline
     precies in het midden staat. Hier wordt dat één kolom, alles links.
     De justify-self in de style-attributen van de drie items moet daarvoor
     overruled worden — vandaar de losse regel eronder. */
  .mac-footer-inner {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 14px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .mac-footer-inner > * { justify-self: start !important; text-align: left !important; }
  .mac-cta-box { padding: 34px 22px !important; }
  .mac-form-card { padding: 24px 20px !important; }

  /* lightbox: minder marge, kleinere pijlen en thumbnails */
  .mac-lightbox-kop { padding: 14px 18px !important; gap: 12px !important; }
  .mac-lightbox-beeld { padding: 14px 12px !important; }
  .mac-lightbox-pijl { width: 42px !important; height: 42px !important; }
  .mac-lightbox-thumbs { padding: 12px 18px 16px !important; gap: 8px !important; }
  .mac-lightbox-thumbs img { width: 68px !important; height: 48px !important; }
}

/* ── telefoon ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .mac-wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .mac-wrap:not(.mac-header-inner):not(.mac-footer-inner):not(.mac-footer-powered) { padding-top: 44px !important; }
  .mac-grid-bento { grid-auto-rows: 200px !important; }

  /* iOS zoomt automatisch in op velden met een tekstgrootte onder 16px */
  input, textarea, select { font-size: 16px !important; }

  .mac-cta-box { padding: 28px 18px !important; }
  .mac-lightbox-thumbs img { width: 56px !important; height: 40px !important; }
}

/* De offerte-knop in de vaste balk is te breed voor een telefoon; daar staat
   een kortere tekst. Beide varianten staan in de HTML, CSS kiest er een. */
.mac-cta-kort { display: none; }
@media (max-width: 620px) {
  .mac-cta-vol { display: none; }
  .mac-cta-kort { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HAMBURGER + SCHERMVULLEND MENU  (markup komt uit assets/js/nav.js)
   ══════════════════════════════════════════════════════════════════════════ */

.mac-ham {
  display: none;                 /* alleen zichtbaar onder 860px */
  flex: 0 0 auto;                /* staat gewoon in de balk, naast het logo */
  width: 46px;
  height: 46px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(20, 22, 28, .82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mac-ham:focus-visible { outline: 2px solid #4f8bf0; outline-offset: 3px; }

.mac-ham-balk {
  display: block;
  width: 20px;
  height: 2px;
  background: #f2f3f5;
  border-radius: 2px;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
/* drie streepjes worden een kruis */
.mac-ham.is-open .mac-ham-balk:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mac-ham.is-open .mac-ham-balk:nth-child(2) { opacity: 0; }
.mac-ham.is-open .mac-ham-balk:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* achtergrondpagina niet laten meescrollen zolang het menu open is */
html.mac-menu-open, html.mac-menu-open body { overflow: hidden; }

/* Met het menu open moet de balk erboven liggen, anders is de knop niet meer
   aan te tikken om te sluiten. De balk zelf wordt doorzichtig zodat hij in de
   overlay opgaat en het logo gewoon zichtbaar blijft. */
html.mac-menu-open .mac-header {
  z-index: 130 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

.mac-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 96px 28px 40px;
  background: rgba(10, 11, 14, .97);
  backdrop-filter: blur(16px);
  /* zelfde sfeer als de rest van de site */
  background-image: radial-gradient(900px 500px at 78% 0%, rgba(79,139,240,.20), transparent 62%),
                    radial-gradient(700px 420px at 8% 100%, rgba(79,139,240,.12), transparent 60%);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s;
}
.mac-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.mac-menu-lijst { display: flex; flex-direction: column; }

.mac-menu-lijst a {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 11vw, 52px);
  line-height: 1.06;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #f2f3f5;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  /* startpositie van de opkomst */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1), color .2s;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.mac-menu.is-open .mac-menu-lijst a { opacity: 1; transform: none; }
.mac-menu-lijst a:hover,
.mac-menu-lijst a:focus-visible { color: #7aa8f5; }
.mac-menu-lijst a.is-actief { color: #4f8bf0; }
.mac-menu-lijst a.is-knop { color: #4f8bf0; }

.mac-menu-voet {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6c727c;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.mac-menu.is-open .mac-menu-voet { opacity: 1; transform: none; }

/* Wie in het systeem bewegingen heeft uitgezet, krijgt alleen een fade. */
@media (prefers-reduced-motion: reduce) {
  .mac-menu, .mac-menu-lijst a, .mac-menu-voet, .mac-ham-balk {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
}

/* Staat bewust onderaan: de basisregel .mac-ham{display:none} hierboven zou
   anders winnen omdat hij later in het bestand komt. */
@media (max-width: 860px) {
  .mac-ham { display: flex; }
}