/* Homepage — hero, galerij, FAQ */
/* ---- Hero slideshow (5 beelden) ---- */
.hero{padding:0;position:relative;height:100vh;overflow:hidden}
.hero .slides{position:absolute;inset:0}
.hero .slide{position:absolute;inset:0;max-width:none;background-size:cover;background-position:center;opacity:0;animation:heroFade 30s infinite;transition:opacity 1.4s ease;pointer-events:none}
.hero .slide.actief{opacity:1;pointer-events:auto}
@keyframes heroFade{0%{opacity:0}4.67%{opacity:1}16.67%{opacity:1}21.33%{opacity:0}100%{opacity:0}}
.hero .slides .slide:nth-child(1){animation-delay:0s}
.hero .slides .slide:nth-child(2){animation-delay:5s}
.hero .slides .slide:nth-child(3){animation-delay:10s}
.hero .slides .slide:nth-child(4){animation-delay:15s}
.hero .slides .slide:nth-child(5){animation-delay:20s}
.hero .slides .slide:nth-child(6){animation-delay:25s}
.hero.js .slide{animation:none !important}

/* Alleen het eerste herobeeld hoort meteen binnengehaald te worden. De andere
   vijf zijn de eerste seconden onzichtbaar, maar de browser laadde ze wel al
   en nam daarmee bandbreedte af van juist het beeld dat de bezoeker ziet.
   Samen ruim een megabyte, voor beelden die pas na vijf tot vijfentwintig
   seconden aan de beurt komen. Bij display:none haalt de browser een
   achtergrond niet op; hero.js zet ze terug zodra de pagina geladen is, ruim
   voor de eerste wissel. Zonder JavaScript gebeurt dat niet en blijft het bij
   het eerste beeld: nog altijd een nette homepage. */
.js .hero .slides .slide:not(.actief){display:none}
.js .hero.beelden-klaar .slides .slide{display:block}
/* Wie in zijn systeem beperkte beweging heeft ingesteld, hoort ook zonder
   JavaScript geen automatisch wisselende beelden te krijgen. Het script zet
   de wissel dan al stil; deze regel doet hetzelfde voor de opmaak zelf, zodat
   het ook klopt als het script niet draait. */
@media (prefers-reduced-motion: reduce){
  .hero .slide{animation:none !important;transition:none !important}
  .hero .slide:not(.actief){opacity:0}
  .hero-punten .punt{animation:none !important}
}

/* Eén dia wordt aan de bovenkant verankerd in plaats van in het midden. De
   foto blijft beeldvullend, maar bij het bijsnijden gaat er onderaan iets weg
   in plaats van bovenaan, zodat de schoorsteen op elk schermformaat volledig
   in beeld blijft. */
.hero .slides .slide.dia-volledig{background-position:center top}
/* Op een staande telefoon is het beeldkader zo smal dat er links en rechts
   veel van de foto wegvalt. Bij deze dia schuiven we het kader iets naar
   links, zodat de natuurstenen schoorsteen volledig in beeld blijft. */
@media (max-width:860px) and (orientation:portrait){
  .hero .slides .slide.dia-volledig{background-position:38% top}
}

@keyframes puntActief{0%{background-color:#fff}16.67%{background-color:#fff}16.68%{background-color:rgba(255,255,255,.5)}100%{background-color:rgba(255,255,255,.5)}}
.hero-punten .punt{animation:puntActief 30s infinite}
.hero-punten .punt:nth-child(1){animation-delay:0s}
.hero-punten .punt:nth-child(2){animation-delay:5s}
.hero-punten .punt:nth-child(3){animation-delay:10s}
.hero-punten .punt:nth-child(4){animation-delay:15s}
.hero-punten .punt:nth-child(5){animation-delay:20s}
.hero-punten .punt:nth-child(6){animation-delay:25s}
.hero.js .punt{animation:none !important}
/* Verduistering (scrim) achter de herotekst — bewust licht gehouden, precies
   zoals in de goedgekeurde ontwerppagina: een zacht verloop van onderaf plus
   een heel lichte veeg vanaf links, zodat de foto zelf onaangetast blijft.
   Zie de opmerking over contrast in LEESMIJ.txt. */
.hero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,11,9,.225) 0%,rgba(12,11,9,.185) 18%,rgba(12,11,9,.13) 33%,rgba(12,11,9,.04) 50%,rgba(12,11,9,0) 66%),linear-gradient(to right,rgba(12,11,9,.15) 0%,rgba(12,11,9,.065) 38%,rgba(12,11,9,0) 60%);pointer-events:none}
.slide-tekst{position:absolute;left:0;right:0;bottom:12vh;z-index:2}
.slide-tekst .wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.k-hero{display:block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#f4e8cd;margin-bottom:16px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.slide-titel{font-family:Georgia,'Times New Roman',serif;font-weight:300;font-size:clamp(1.8rem,4vw,3rem);line-height:1.14;color:#fff;max-width:19ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero-controls{position:absolute;left:0;right:0;bottom:34px;z-index:3;display:flex;align-items:center;gap:20px;justify-content:center}
.hero-punten{display:flex;gap:12px}
.punt{width:26px;height:24px;border:0;padding:11px 0;background-color:rgba(255,255,255,.5);background-clip:content-box;cursor:pointer;transition:background-color .3s}
.punt.actief{background-color:#fff}
.punt:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-pauze{display:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.22);border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:#fff;transition:background .3s;padding:0}
/* De knop verschijnt pas als hero.js draait; anders zou er een knop staan
   die niets doet. Zie de opmerking bij WCAG 2.2.2 in hero.js. */
.hero.js .hero-pauze{display:flex}
.hero-pauze:hover{background:rgba(0,0,0,.42)}
.hero-pauze:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-pauze .ic-play{display:none}
.hero-pauze.gepauzeerd .ic-pause{display:none}
.hero-pauze.gepauzeerd .ic-play{display:block}
@media (prefers-reduced-motion: no-preference){
  .hero.js .slide .k-hero{opacity:0;transform:translateY(14px);transition:opacity .9s ease .25s,transform .9s ease .25s}
  .hero.js .slide .slide-titel{opacity:0;transform:translateY(18px);transition:opacity .9s ease .4s,transform .9s ease .4s}
  .hero.js .slide.actief .k-hero,.hero.js .slide.actief .slide-titel{opacity:1;transform:none}
}
.herotekst{text-align:center;padding:72px 32px 90px}
.herotekst h1{font-weight:250;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.01em;line-height:1.15;color:#1c1b18;max-width:20ch;margin:0 auto}
.herotekst h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--goud)}
.herotekst p{color:var(--zacht);max-width:52ch;margin:22px auto 0}

.rule{width:1px;height:70px;background:var(--goudzacht);margin:0 auto}

/* Vier punten in twee rijen: verticaal iets minder ruimte dan horizontaal,
   anders vallen de twee rijen visueel uit elkaar. */
.twee{display:grid;grid-template-columns:1fr 1fr;gap:54px 70px;margin-top:50px;text-align:left}
.twee h3{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst);margin-bottom:14px;font-weight:600}
.twee h3::before{content:"";display:block;width:38px;height:1px;background:var(--goud);margin-bottom:16px}
.twee p{font-size:.95rem}

/* Projecten als collectie */
.stuk{margin:0 auto 130px;max-width:1000px;padding:0 32px}
.stuk:last-child{margin-bottom:0}
.stuk .lijst{display:block;text-decoration:none;color:inherit}
.stuk .foto{aspect-ratio:16/10;background-size:cover;background-position:center;
  box-shadow:0 30px 70px -30px rgba(43,42,38,.35);transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.stuk:hover .foto{transform:scale(1.012)}
.stuk .onder{display:flex;justify-content:space-between;align-items:baseline;padding-top:26px;border-bottom:1px solid var(--lijn);padding-bottom:26px}
.stuk .naam{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;font-size:1.5rem;color:#1c1b18;letter-spacing:.02em}
.stuk .plaats{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--goud)}
.alles{display:block;text-align:center;color:var(--goud);text-decoration:none;font-family:Helvetica,Arial,sans-serif;
  font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;margin-top:14px;padding:6px 0}

/* Diensten */
.vierrij{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:60px;text-align:left}
.vierrij h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tekst);margin:14px 0 10px;font-weight:600}
.vierrij .nr{font-weight:200;font-size:1.1rem;color:var(--goud);font-family:Helvetica,Arial,sans-serif}
.vierrij p{font-size:.88rem}

/* Architect / Wie we zijn */
.architect{background:rgba(234,227,211,.92);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.architect .duo{display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:start}
.architect img{width:100%;height:auto;display:block;filter:saturate(.92)}

/* Citaat */

/* FAQ */
details{border-bottom:1px solid var(--lijn);max-width:820px;margin:0 auto}
details:first-of-type{border-top:1px solid var(--lijn)}
summary{cursor:pointer;list-style:none;padding:24px 44px 24px 4px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:500;font-size:.95rem;letter-spacing:.04em;color:#1c1b18;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--goud)}
details[open] summary::after{content:"\2013"}
details p{padding:0 4px 26px;font-size:.93rem;max-width:66ch}

@media(max-width:860px){
  .twee,.vierrij,.architect .duo{grid-template-columns:1fr}
  .hero{height:80vh}
  .slide-tekst{bottom:15vh}
  .hero-controls{bottom:26px}
}

/* ---- Liggende (landscape) telefoon: hero schermvullend, tekst kleiner/lager ---- */
@media (orientation:landscape) and (max-height:550px){
  .hero{height:100vh;height:100svh}
  .slide-tekst{bottom:10%}
  .k-hero{font-size:.6rem;letter-spacing:.28em;margin-bottom:6px}
  .slide-titel{font-size:clamp(1.15rem,3.4vw,1.7rem);line-height:1.14;max-width:32ch}
  .hero-controls{bottom:12px}
}