/* ============================================================
   WOUWR — extra's bovenop de originele site
   (marquee, diensten, langere projectvlakken, contact-layout)
   ============================================================ */

/* ---------- Bewegende rode balk ---------- */
.wx-marquee{
  background:var(--c-brand);
  color:#fff;
  overflow:hidden;
  padding:.85rem 0;
  display:flex;
  align-items:center;
}
.wx-marquee-track{
  display:flex;flex-shrink:0;gap:2.4rem;align-items:center;
  padding-left:2.4rem;
  white-space:nowrap;
  animation:wx-marquee 26s linear infinite;
  font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.02em;
}
.wx-marquee:hover .wx-marquee-track{animation-play-state:paused}
.wx-marquee-track .wx-star{color:#fff;opacity:.75;font-style:normal}
@keyframes wx-marquee{to{transform:translateX(-50%)}}

/* ---------- Sectiekop: pill + streep ---------- */
.wx-pill{
  display:inline-block;
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(.9rem,1.8vw,1.05rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--c-brand);
  border:2.5px solid var(--c-brand);
  border-radius:10px;
  padding:.3em 1.1em;
  white-space:nowrap;
}
.wx-head{
  display:flex;align-items:center;gap:1.2rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.wx-head .wx-rule{flex:1;height:3px;background:var(--c-ink);border-radius:2px;opacity:.85}

/* ---------- Diensten ---------- */
.wx-serv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
.wx-serv{
  display:flex;flex-direction:column;
  border-radius:7px;
  padding:1.4rem 1.5rem;
  background:var(--c-ice);
  box-shadow:var(--shadow);
  cursor:pointer;
  align-self:start;
  transition:transform .2s ease,box-shadow .2s ease;
}
.wx-serv:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.wx-serv-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wx-serv-title{
  font-family:var(--font-title);
  font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--c-ink);line-height:1.05;
}
.wx-serv-rule{height:2px;background:var(--c-ink);opacity:.85;margin:.8rem 0 0;border-radius:2px}
.wx-serv p{
  font-size:.92rem;color:var(--c-ink);line-height:1.5;
  max-height:0;overflow:hidden;opacity:0;margin:0;
  transition:max-height .35s ease,opacity .3s ease,margin .3s ease;
}
.wx-serv.is-open p{max-height:420px;opacity:1;margin-top:.9rem}
.wx-serv-plus{
  font-size:1.7rem;font-weight:800;line-height:1;color:var(--c-brand);flex-shrink:0;
  transition:transform .3s ease;
}
.wx-serv.is-open .wx-serv-plus{transform:rotate(45deg)}
@media(max-width:720px){.wx-serv-grid{grid-template-columns:1fr}}

/* ---------- Langere projectvlakken ---------- */
.card-media[data-astro-cid-wkx7uqji]{aspect-ratio:3 / 4 !important}

/* ============================================================
   CONTACT — kaart met beeld + info links, formulier rechts
   ============================================================ */
.wx-contact-head{text-align:center;max-width:820px;margin:0 auto clamp(2.5rem,6vw,4rem)}
.wx-contact-head h1{
  font-size:clamp(2.1rem,6vw,4.4rem);
  font-style:italic;font-weight:800;color:var(--c-brand);
  line-height:1;margin-bottom:1.1rem;text-transform:uppercase;
  overflow-wrap:break-word;
}
.wx-contact-head p{font-size:clamp(1.02rem,2.1vw,1.25rem);color:var(--c-ink);line-height:1.55}
.wx-contact-card{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.2rem,2.6vw,2rem);
  background:var(--c-ice);
  border-radius:12px;
  padding:clamp(1.2rem,2.6vw,2rem);
  box-shadow:var(--shadow);
}
.wx-contact-left{display:flex;flex-direction:column;gap:1rem;min-width:0}
.wx-contact-photo{
  margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/5;background:#fff;flex:1;min-height:220px;
}
.wx-contact-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wx-contact-photo.is-logo{background:var(--c-ice)}
.wx-contact-photo.is-logo img{object-fit:contain;padding:clamp(1.5rem,5vw,2.8rem)}
.wx-contact-item{
  display:flex;align-items:center;gap:1rem;
  background:#fff;border-radius:7px;padding:1rem 1.2rem;
  transition:transform .18s ease;
}
.wx-contact-item:hover{transform:translateY(-3px)}
.wx-contact-ico{
  width:46px;height:46px;flex-shrink:0;border-radius:6px;
  display:grid;place-items:center;font-size:1.25rem;
  background:var(--c-brand);color:#fff;
}
.wx-contact-item .lbl{display:block;font-size:.95rem;font-weight:700;color:var(--c-ink)}
.wx-contact-item .val{display:block;font-size:.88rem;color:var(--c-muted)}
.wx-contact-form{
  background:#fff;border-radius:8px;min-width:0;
  padding:clamp(1.6rem,3.5vw,2.6rem);
  display:flex;flex-direction:column;gap:1.05rem;
}
.wx-contact-form h2{
  font-size:clamp(1.35rem,3vw,1.9rem);font-style:italic;color:var(--c-ink);
  margin-bottom:.3rem;
}
.wx-contact-form label{display:flex;flex-direction:column;gap:.45rem;font-weight:600;font-size:.95rem;color:var(--c-ink);min-width:0}
.wx-contact-form input,
.wx-contact-form textarea{
  font:inherit;font-weight:400;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  padding:.85em 1.05em;border-radius:6px;
  border:2px solid transparent;background:var(--c-ice);
  transition:border-color .18s ease,background .18s ease;
}
.wx-contact-form input:focus,
.wx-contact-form textarea:focus{outline:none;border-color:var(--c-brand);background:#fff}
.wx-contact-form textarea{resize:none}
.wx-contact-form button{margin-top:.5rem;justify-content:center;width:100%}
.wx-contact-note{color:var(--c-brand);font-weight:600;font-size:.9rem}
@media(max-width:760px){
  .wx-contact-card{grid-template-columns:1fr}
}

/* pill + streep op rode achtergrond (blue-zone) */
.blue-zone .wx-pill{color:#fff;border-color:#fff}
.blue-zone .wx-head .wx-rule{background:#fff;opacity:.9}
/* rode projecten-blok als losstaande, volledig afgeronde kaart met witruimte opzij */
.blue-zone{
  border-radius:14px;
  margin-inline:clamp(1rem,4vw,2.5rem);
}

/* over-pagina: grijs 'Wie ben ik'-vlak als afgeronde kaart met witruimte opzij */
.who{
  border-radius:14px;
  margin-inline:clamp(1rem,4vw,2.5rem);
}
/* over-pagina: 'Wat is WOUWR' naast 'Waarom WOUWR' */
.over-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.over-two p{margin-bottom:1rem;font-size:1.05rem;line-height:1.7}
.over-two .pull{margin-top:.4rem}
.over-card{background:var(--c-ice);border-radius:9px;padding:clamp(1.6rem,3vw,2.4rem)}
@media(max-width:760px){.over-two{grid-template-columns:1fr}}

/* ============================================================
   PROJECT-PAGINA template (wireframe) — zonder fotogrid rechtsboven
   ============================================================ */
.wx-case{padding-block:clamp(3rem,7vw,6rem)}
.wx-case-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.wx-case-tag{
  font-family:var(--font-title);font-style:italic;font-weight:600;
  color:var(--c-ink);opacity:.75;font-size:clamp(1rem,2.4vw,1.5rem);
  transform:rotate(-4deg);white-space:nowrap;
}
.wx-case-back{
  font-weight:600;color:var(--c-brand);font-size:.9rem;white-space:nowrap;
}
.wx-case-back:hover{text-decoration:underline}
.wx-case-intro{max-width:70ch;margin-bottom:clamp(3.5rem,8vw,6rem)}
.wx-case-intro .lead{
  font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:500;color:var(--c-ink);
  line-height:1.45;margin-bottom:1.6rem;
}
.wx-case-intro p{margin-bottom:1.4rem;color:var(--c-ink);line-height:1.75}
.wx-case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 0}
.wx-case-tags li{
  font-weight:600;font-size:.8rem;padding:.4em .9em;border-radius:10px;
  border:2px solid var(--c-brand);color:var(--c-brand);
}
/* drie beelden naast elkaar, tegen elkaar (vervangt de brede foto) */
.wx-case-trio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:0 0 clamp(3.5rem,8vw,6rem);
  border-radius:8px;overflow:hidden;background:var(--c-ice);
}
.wx-case-trio figure{margin:0;aspect-ratio:3/4;overflow:hidden}
.wx-case-trio img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.wx-case-trio{grid-template-columns:1fr}.wx-case-trio figure{aspect-ratio:4/3}}

/* rode hero-band bovenaan projectpagina */
.wx-case-red{padding-top:0}
.wx-case-hero{
  background:var(--c-brand);color:#fff;
  padding-block:clamp(3rem,7vw,6rem);
  border-bottom-left-radius:22px;border-bottom-right-radius:22px;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.wx-case-hero .wx-case-intro{margin-bottom:0}
.wx-case-hero .wx-pill{color:#fff;border-color:#fff}
.wx-case-hero .wx-case-back{color:#fff}
.wx-case-hero .wx-case-intro .lead{color:#fff}
.wx-case-hero .wx-case-intro p{color:#ffffffe6}
.wx-case-hero .wx-case-tags li{border-color:#fff;color:#fff}
.wx-case-split{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);
  align-items:start;margin-bottom:clamp(3.5rem,8vw,6rem);
}
.wx-case-portrait{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:var(--c-ice)}
.wx-case-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.wx-case-split-text h2{
  font-size:clamp(1.5rem,3vw,2.2rem);font-style:italic;color:var(--c-ink);
  margin-bottom:1.2rem;line-height:1.1;
}
.wx-case-split-text p{color:var(--c-ink);line-height:1.75;margin-bottom:1.4rem}
.wx-case-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
.wx-case-duo figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--c-ice)}
.wx-case-duo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.wx-case-split{grid-template-columns:1fr}.wx-case-portrait{max-width:360px}}
.wx-case-galtitle{font-size:clamp(1.6rem,4vw,2.4rem);font-style:italic;color:var(--c-ink);margin:0 0 2.2rem}
/* Alleen deze ene kop groot, op vraag. */
.wx-case-galtitle--groot{
  font-size:clamp(2.4rem,10.5vw,8rem);line-height:.95;
  letter-spacing:-.035em;margin-bottom:clamp(1.8rem,4vw,3rem);
}
/* galerij: originele verhoudingen behouden (masonry) */
.wx-case-gallery{columns:3 260px;column-gap:1.2rem}
.wx-case-gallery figure{margin:0 0 1.2rem;break-inside:avoid;border-radius:6px;overflow:hidden;background:var(--c-ice)}
.wx-case-gallery img{width:100%;height:auto;display:block}
/* gebalanceerde galerij: vaste kolommen, handmatig verdeeld op hoogte */
.wx-galcols{display:flex;gap:1.2rem;align-items:flex-start}
.wx-galcol{flex:1;display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.wx-galcol figure{margin:0;border-radius:6px;overflow:hidden;background:var(--c-ice)}
.wx-galcol img{width:100%;height:auto;display:block}
@media(max-width:760px){.wx-galcols{gap:.9rem}}
@media(max-width:520px){.wx-galcols{flex-direction:column}}
.wx-case-actions{margin:clamp(3.5rem,8vw,5rem) 0 0;display:flex;flex-wrap:wrap;gap:.9rem}
.wx-case .project-nav{margin-top:clamp(3.5rem,8vw,5rem)}

/* ---------- Intro / splash logo-animatie ----------
   NIET MEER IN GEBRUIK sinds het herontwerp van 2026-09-01.
   Zet .wx-splash niet terug in index.html zonder de basis-CSS te
   repareren: brandbook-blitzkrieg.css bevat
   @media(prefers-reduced-motion:reduce){*{animation:none!important}}
   en dat !important wint van wx-splash-out hieronder. Gevolg: de
   overlay verdwijnt nooit en dekt de hele site af voor iedereen met
   "Verminder beweging" aan. */
.wx-splash{
  position:fixed;inset:0;z-index:9999;background:#fff;
  display:grid;place-items:center;
  animation:wx-splash-out .55s ease 1.45s forwards;
}
.wx-splash img{
  width:min(46vw,320px);height:auto;
  animation:wx-splash-pop .85s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes wx-splash-pop{
  0%{opacity:0;transform:scale(.72) translateY(14px)}
  55%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes wx-splash-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){
  .wx-splash{animation:wx-splash-out .3s ease .2s forwards}
  .wx-splash img{animation:none}
}

/* ---------- Contact CTA-card onderaan homepage (Pongo-stijl) ---------- */
.wx-contact-cta{background:#fff}
.wx-cta{
  position:relative;
  max-width:1000px;margin-inline:auto;
  background:linear-gradient(135deg,var(--c-brand-light) 0%,var(--c-brand) 45%,var(--c-brand-dark) 100%);
  border-radius:16px;
  padding:clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,3rem);
  text-align:center;color:#fff;
  box-shadow:0 40px 90px -30px rgba(245,55,42,.6);
}
.wx-cta-title{font-size:clamp(2.2rem,5.5vw,4rem);font-style:italic;color:#fff;line-height:1.02;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.wx-cta-sub{font-size:clamp(1rem,2.2vw,1.25rem);color:#ffffffe6;max-width:56ch;margin:0 auto 2.2rem;line-height:1.6}
.wx-cta-btn{
  display:inline-block;background:#fff;color:var(--c-brand);
  font-weight:700;padding:.95em 2.4em;border-radius:10px;font-size:1.05rem;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wx-cta-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(0,0,0,.35)}
.wx-cta-socials{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.wx-cta-socials a{color:#fff;font-weight:600;font-size:.9rem;opacity:.9;border-bottom:1px solid #ffffff66;padding-bottom:2px;transition:opacity .15s ease}
.wx-cta-socials a:hover{opacity:1}

/* tekstblok zonder groot beeld (bv. KVC-pagina) */
.wx-case-solo{max-width:820px;margin-bottom:clamp(3.5rem,8vw,6rem)}

/* takenlijst "Wat ik concreet deed" */
.wx-tasklist{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin:.5rem 0 1.8rem}
.wx-tasklist li{position:relative;padding-left:1.9rem;color:var(--c-ink);font-weight:600;line-height:1.4}
.wx-tasklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c-brand);font-weight:800}

/* ===== Mobiel hamburgermenu ===== */
.wx-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;z-index:200}
.wx-burger span{display:block;height:2.5px;width:100%;background:var(--c-ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
body.wx-nav-open .wx-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.wx-nav-open .wx-burger span:nth-child(2){opacity:0}
body.wx-nav-open .wx-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:540px){
  .wx-burger{display:flex}
  .site-header[data-astro-cid-3ef6ksr2] .header-inner[data-astro-cid-3ef6ksr2]{position:relative}
  .nav[data-astro-cid-3ef6ksr2]{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:#fff;border-bottom:2px solid var(--c-sky);
    padding:.8rem clamp(1.2rem,4vw,2.5rem) 1.4rem;
    box-shadow:var(--shadow);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
  }
  body.wx-nav-open .nav[data-astro-cid-3ef6ksr2]{transform:none;opacity:1;pointer-events:auto}
  body.wx-nav-open .nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:not(.nav-cta){display:block}
  .nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:not(.nav-cta){padding:.75rem .2rem;font-size:1.15rem;border-bottom:1px solid var(--c-line)}
  .nav[data-astro-cid-3ef6ksr2] .nav-cta[data-astro-cid-3ef6ksr2]{margin-top:.7rem;justify-content:center;font-size:1.05rem}
}


/* Twee knoppen naast elkaar in het slotblok */
.wx-cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.wx-cta-btn--open{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.wx-cta-btn--open:hover{background:#fff;color:var(--c-brand)}

/* Projectensectie zonder gekleurde achtergrond */
.werk-zone{background:transparent;color:inherit}
.werk-zone .wx-pill{color:var(--c-brand);border-color:var(--c-brand)}
.werk-zone .wx-head .wx-rule{background:var(--c-brand);opacity:.35}

/* ============ Aanpassingen ronde 2 ============ */

/* Knoppen weer volledig afgerond */
.btn,.wx-cta-btn,.wx-pill,.card-cat,.nav a,.wx-case-back{border-radius:999px}

/* Projecten onder elkaar, één per rij */
#werk .grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:clamp(1.6rem,3vw,2.6rem)}

/* Titel van de projectensectie in het merkrood */
.werk-zone .section-title{color:var(--c-brand)}

/* Diensten: rode kaders met witte tekst, altijd open */
.wx-serv{background:var(--c-brand);cursor:default;color:#fff}
.wx-serv:hover{transform:none;box-shadow:var(--shadow)}
.wx-serv-title{color:#fff}
.wx-serv-rule{background:#fff;opacity:.55}
.wx-serv p{max-height:none;overflow:visible;opacity:1;margin-top:.9rem;color:#fff}

/* Leestekst zwart op witte ondergrond */
body,p,li,.lead{color:var(--c-ink)}
.wx-serv p,.wx-serv li,.blue-zone p,.blue-zone .lead,.wx-cta p,.wx-cta .lead{color:#fff}

/* ============ Titels: Goodland ============ */
/* Bestanden uit ~/Downloads/Goodland. Controleer de licentie voor publiek, commercieel gebruik. */
@font-face{font-family:'Goodland';src:url('/fonts/Goodland-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Goodland';src:url('/fonts/Goodland-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}

:root{--font-title:'Goodland','Poppins',system-ui,sans-serif}

h1,h2,h3,.section-title,.card-title,.wx-serv-title,.wx-cta-title,.hero-title{
  font-family:var(--font-title);font-weight:700;font-style:italic;
}

/* Projectkaarten: kleinere, liggende afbeelding en geen categorielabel */
#werk .card-media{aspect-ratio:16/9!important;max-height:230px}
#werk .card-cat{display:none}
#werk .card-title{margin-top:0}

/* ============ Kop van een projectpagina ============ */
.wx-case-hero{
  background:transparent;color:inherit;
  padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,8vw,6rem);
  border-radius:0;margin-bottom:0;
}
.wx-case-hero .wx-case-back{color:var(--c-brand)}
.wx-case-head{margin-bottom:clamp(3rem,9vw,6rem)}
.wx-case-title{
  font-family:var(--font-title);font-weight:700;font-style:italic;
  color:var(--c-brand);
  font-size:clamp(2.6rem,8vw,6rem);line-height:.95;margin:0;
}
.wx-case-cover{margin:0 0 clamp(2.5rem,6vw,4rem);border-radius:8px;overflow:hidden}
.wx-case-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ============ Correcties ============ */

/* Titels in hoofdletters */
h1,h2,h3,.section-title,.card-title,.wx-case-title,.wx-cta-title{text-transform:uppercase}

/* Projectkaart: enkel de afbeelding, gecentreerd, geen wit vlak ernaast */
#werk .grid{justify-items:center}
#werk .card{max-width:820px;width:100%}
#werk .card-media{aspect-ratio:16/9!important;max-height:none}
#werk .card-body{text-align:center}

/* Coverfoto op een projectpagina niet tegen de bovenrand */
.wx-case-cover{margin-top:clamp(1.5rem,4vw,3rem)}

/* ============ Correcties ronde 3 ============ */

/* Goodland strakker gespatieerd (kerning -30) */
h1,h2,h3,.section-title,.card-title,.wx-case-title,.wx-cta-title,.wx-serv-title{letter-spacing:-.03em}

/* Projectkaarten nog wat kleiner */
#werk .card{max-width:640px}

/* Dienstensectie: rode achtergrond, bordeaux kaders, witte tekst */
#diensten{background:var(--c-brand);border-radius:8px;padding-block:clamp(3rem,7vw,5rem)}
#diensten .section-title,#diensten .lead{color:#fff}
.wx-serv{background:#8c1d13;color:#fff}
.wx-serv strong{font-weight:800;color:#fff}

/* Extra kader: uurtarief, in het blauw */
.wx-serv--rate{background:#84c3e4}
.wx-serv--rate .wx-serv-title,
.wx-serv--rate p,
.wx-serv--rate strong{color:#fff}
.wx-serv--rate .wx-serv-rule{background:#fff;opacity:.85}
.wx-serv--rate p.wx-rate{
  font-family:var(--font-title);
  font-weight:700;font-style:italic;
  font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1;letter-spacing:-.03em;
  color:#fff;margin-top:.9rem;
}
/* p-animatie van de klapkaarten mag hier niet gelden */
.wx-serv--rate p{max-height:none;overflow:visible;opacity:1;margin-top:.9rem}

/* Dienstentitels groter */
.wx-serv-title{font-size:clamp(1.5rem,3.2vw,2.3rem)}

/* Diensten in een 2x2-raster met gelijke hoogtes per rij */
.wx-serv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wx-serv-grid .wx-serv{align-self:stretch}
@media(max-width:720px){.wx-serv-grid{grid-template-columns:1fr}}

/* Kaart 'coming soon': niet klikbaar */
.card--soon{cursor:default}
.card--soon:hover{transform:none}
.card-soon-tag{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  background:#fff;color:var(--c-brand);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;
}

/* Label boven de diensten: wit, want de sectie is nu rood */
#diensten .wx-pill{color:#fff;border-color:#fff}
#diensten .wx-head{margin-bottom:clamp(1.6rem,4vw,2.6rem)}

/* Knoppen onder de introtekst */
.intro-acties{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.intro-acties .btn-ghost{border:2px solid var(--c-brand);background:transparent}
.intro-acties .btn-ghost:hover{background:var(--c-brand);color:#fff}

/* Verhaaltekst op de Over-pagina: twee kolommen over de volle breedte */
.verhaal-tekst .block-title{margin-bottom:1.4rem}
.verhaal-kolommen{columns:2;column-gap:clamp(2rem,5vw,4rem)}
/* alinea's nooit over twee kolommen splitsen */
.verhaal-kolommen p{break-inside:avoid;-webkit-column-break-inside:avoid}
@media(max-width:820px){.verhaal-kolommen{columns:1}}
.verhaal-tekst p{margin-bottom:1.25rem;font-size:1.06rem;line-height:1.75}
.verhaal-tekst p:last-child{margin-bottom:0}
/* eerste alinea iets groter als aanloop */
.verhaal-tekst .verhaal-lead{font-size:1.22rem;line-height:1.6;font-weight:500}
/* slotzin met een rood streepje ervoor */
.verhaal-tekst .pull{margin-top:2rem;padding-left:1.1rem;border-left:3px solid var(--c-brand)}

/* Opleidingstijdlijn op de Over-pagina */
.opl-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,5vw,4rem);align-items:center}
.opl-lijst .block-title{margin-bottom:1.6rem}
.opl-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
@media(max-width:860px){.opl-grid{grid-template-columns:1fr}.opl-foto img{aspect-ratio:4/3}}
.opl{list-style:none;margin:0;padding:0}
.opl>li{position:relative;padding:0 0 1.7rem 1.9rem}
.opl>li:last-child{padding-bottom:0}
/* bolletje: 16px breed op x=0..16, dus hartlijn op x=8 */
.opl>li::before{content:"";position:absolute;left:0;top:.1em;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--c-brand);box-sizing:border-box;z-index:1}
/* streep: 2px op x=7..9, dus dezelfde hartlijn; loopt van bolletje tot bolletje */
.opl>li::after{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--c-line)}
.opl>li:first-child::after{top:.6em}
.opl>li:last-child::after{bottom:auto;height:.6em}
.opl .jaar{display:block;font-weight:700;font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-brand);margin-bottom:.15rem}
.opl .wat{display:block;font-weight:700;font-size:1.1rem;line-height:1.35}
.opl .waar{display:block;font-size:.98rem;opacity:.72;margin-top:.1rem}
.opl .sub{list-style:none;margin:1.1rem 0 0;padding:0}
.opl .sub li{position:relative;padding-left:1.6rem}
.opl .sub li::before{content:"";position:absolute;left:1px;top:.2em;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--c-sky-dark);box-sizing:border-box}
.opl .sub .jaar{color:var(--c-sky-dark)}
.opl .sub .wat{font-size:1rem}
@media(max-width:520px){.opl>li{padding-left:1.6rem}.opl .sub li{padding-left:1.4rem}}

/* Rood vlak rond de opleidingstijdlijn */
.opl-zone,.rood-vak{background:var(--c-brand);border-radius:16px;color:#fff;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,4vw,3rem)}
/* alles binnen het rode vlak volledig wit */
.opl-zone .block-title[data-astro-cid-ih4euyy6],
.rood-vak .block-title[data-astro-cid-ih4euyy6],
.rood-vak p[data-astro-cid-ih4euyy6],
.rood-vak p,
.opl-zone p,
.opl-zone .opl .jaar,
.opl-zone .opl .sub .jaar,
.opl-zone .opl .wat,
.opl-zone .opl .waar{color:#fff;opacity:1}
.opl-zone .opl>li::before{background:var(--c-brand);border-color:#fff}
.opl-zone .opl>li::after{background:rgba(255,255,255,.4)}
.opl-zone .opl .sub li::before{background:var(--c-brand);border-color:rgba(255,255,255,.75)}

/* Projecten-blok op de homepage: label dichter bij de titel */
.werk-zone .wx-head{margin-bottom:clamp(.7rem,1.6vw,1.1rem)}
.werk-zone #werk{padding-top:clamp(2rem,5vw,3.5rem)}


/* De projectkop is niet meer rood maar wit, dus de introtekst mag niet wit blijven */
.wx-case-hero .wx-case-intro .lead,
.wx-case-hero .wx-case-intro p{color:var(--c-ink)}
.wx-case-hero .wx-case-intro{margin-top:clamp(1.2rem,3vw,2rem);max-width:56ch}

/* Beide galerijkolommen even hoog laten eindigen:
   de kolommen rekken tot dezelfde hoogte en de laatste foto vult het restje op. */
.wx-galcols{align-items:stretch}
.wx-galcol figure:last-child{flex:1;min-height:0}
.wx-galcol figure:last-child img{height:100%;object-fit:cover}
@media(max-width:520px){
  .wx-galcol figure:last-child{flex:0 0 auto}
  .wx-galcol figure:last-child img{height:auto;object-fit:fill}
}

/* Ademruimte tussen de blokken op een projectpagina */
.wx-case-galtitle.wx-blok{margin-top:clamp(3rem,7vw,5rem)}
.wx-blok-intro{max-width:60ch;margin:-1.4rem 0 clamp(1.6rem,3.5vw,2.4rem);line-height:1.7}

/* Twee publicaties naast elkaar */
.wx-pubs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.8rem)}
.wx-pub{display:block;border-radius:8px;overflow:hidden;background:var(--c-ice);
        transition:transform .2s ease,box-shadow .2s ease}
.wx-pub:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.wx-pub img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.wx-pub-tekst{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.1rem 1.1rem}
.wx-pub-tekst strong{font-weight:700;color:var(--c-ink)}
.wx-pub-tekst small{font-size:.86rem;color:var(--c-muted)}
@media(max-width:640px){.wx-pubs{grid-template-columns:1fr}}

/* Galerijbeelden wat kleiner: smallere kolommen, gecentreerd */
.wx-galcols{max-width:900px;margin-inline:auto}

/* ============================================================
   FEEDBACK / TESTIMONIALS op de homepage
   ============================================================ */
/* groot aanhalingsteken als accent */
/* plaatshouder zolang er nog geen echte reactie is */

/* Sterrenscore in een feedbackkaart */

/* Feedbacksectie op rode achtergrond, kaarten in bordeaux — zoals Diensten */
/* Reviews staan op een licht vlak: bij een citaat van dit formaat
   doet de typografie het werk, niet de achtergrondkleur. */
#feedback{background:var(--c-ice);padding-block:clamp(4rem,9vw,7rem)}

/* ---------- Contactpagina zonder formulier ---------- */
.wx-contact-card--simpel{
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
}
.wx-contact-card--simpel .wx-contact-photo{aspect-ratio:1/1;min-height:0}
.wx-contact-lijst{display:flex;flex-direction:column;gap:1rem;min-width:0}
.wx-contact-rij{display:flex;align-items:stretch;gap:.7rem;min-width:0}
.wx-contact-rij .wx-contact-item{flex:1;min-width:0}
.wx-kopieer{
  flex:none;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
  padding:0 1.15em;border-radius:7px;
  border:2px solid var(--c-brand);background:#fff;color:var(--c-brand);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.wx-kopieer:hover{background:var(--c-brand);color:#fff;transform:translateY(-2px)}
.wx-kopieer.is-gelukt{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
@media(max-width:760px){
  .wx-contact-card--simpel{grid-template-columns:1fr}
  .wx-contact-photo{max-width:320px;margin-inline:auto}
}

/* Dienstenkaartjes: zachtjes groeien bij hover (ease-in-out) */
.wx-serv{
  transition:transform .32s cubic-bezier(.4,0,.2,1),
             box-shadow .32s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
  will-change:transform;
}
.wx-serv:hover,
.wx-serv:focus-within{
  transform:scale(1.045);
  box-shadow:var(--shadow-hover);
}
@media (prefers-reduced-motion:reduce){
  .wx-serv,.wx-serv:hover{transition:none;transform:none}
}

/* ============================================================
   Juridische pagina's (privacyverklaring)
   ============================================================ */
.wx-legal{max-width:74ch}
.wx-legal .lead{max-width:none}
.wx-legal-datum{margin-top:.8rem;font-size:.92rem;color:var(--c-muted)}
.wx-legal h2{
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--c-brand);
  margin-top:2.8rem;margin-bottom:.9rem;
}
.wx-legal h3{
  font-size:1.1rem;font-weight:700;font-style:normal;
  color:var(--c-ink);margin-top:1.7rem;margin-bottom:.5rem;
}
.wx-legal p{margin-bottom:1rem;line-height:1.7}
.wx-legal ul{margin:0 0 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.wx-legal li{line-height:1.6}
.wx-legal a{color:var(--c-brand);text-decoration:underline;text-underline-offset:3px}
.wx-legal a:hover{text-decoration-thickness:2px}
/* nog aan te vullen door Stan — valt bewust op */
.wx-invullen{background:#ffe680;color:#5a4200;padding:.05em .4em;border-radius:4px;font-weight:600}

/* ============================================================
   PROJECTPAGINA — voor/na-vergelijking en schermenraster
   Gebruikt op /projecten/praktijk-het-riet
   ============================================================ */
.wx-ba{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);
  margin:0 0 clamp(3.5rem,8vw,6rem);
}
.wx-ba figure{
  margin:0;position:relative;border-radius:8px;overflow:hidden;
  background:var(--c-ice);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.wx-ba img{width:100%;height:auto;object-fit:contain;display:block;aspect-ratio:16/10;padding:clamp(1rem,3vw,2.4rem);background:#fff}
.wx-ba--shot img{object-fit:cover;padding:0}
.wx-ba-label{
  position:absolute;top:.8rem;left:.8rem;z-index:2;
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:#fff;color:var(--c-ink);padding:.45em 1em;border-radius:99px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.wx-ba figure:last-child .wx-ba-label{background:var(--c-brand);color:#fff}
@media(max-width:720px){.wx-ba{grid-template-columns:1fr}}

.wx-shots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);margin:0 0 clamp(3.5rem,8vw,6rem);
}
.wx-shots figure{margin:0;border-radius:6px;overflow:hidden;background:var(--c-ice);box-shadow:var(--shadow)}
.wx-shots img{width:100%;height:auto;display:block}

.wx-case-sub{
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem);color:var(--c-ink);margin:0 0 .6rem;
}
.wx-case-note{color:var(--c-ink);opacity:.75;line-height:1.7;max-width:62ch;margin:0 0 1.8rem}

/* De projectkop is wit (zie hierboven), dus labels in de kop krijgen de merkkleur
   in plaats van wit — anders zijn ze onzichtbaar. */
.wx-case-hero .wx-case-tags li{border-color:var(--c-brand);color:var(--c-brand)}

/* Flyer: de binnenzijde is liggend, de buitenpagina's staand.
   Daarom een raster met eigen verhoudingen in plaats van een vaste bijsnede. */
.wx-flyer{
  display:grid;grid-template-columns:1fr 2fr 1fr;
  gap:clamp(.8rem,1.6vw,1.2rem);align-items:start;
  margin:0 0 clamp(3.5rem,8vw,6rem);
}
.wx-flyer figure{margin:0;border-radius:6px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.wx-flyer img{width:100%;height:auto;display:block}
@media(max-width:720px){.wx-flyer{grid-template-columns:1fr}}

/* Beeld over de volle breedte met eigen verhouding (geen 16/9-bijsnede) */
.wx-full{margin:0 0 clamp(3.5rem,8vw,6rem);border-radius:8px;overflow:hidden;background:var(--c-ice)}
.wx-full img{width:100%;height:auto;display:block}

/* Briefing van de klant, als uitgelichte quote */
.wx-brief{
  margin:0 0 clamp(2rem,4vw,3rem);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);
  border-left:5px solid var(--c-brand);background:var(--c-ice);border-radius:0 8px 8px 0;
}
.wx-brief-label{
  font-family:var(--font-title);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.1em;color:var(--c-brand);margin:0 0 .6rem;
}
.wx-brief p:last-child{
  margin:0;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;color:var(--c-ink);
}
.wx-brief strong{font-weight:700}

/* Bijschriften onder beelden */
.wx-shots figcaption,.wx-ba figcaption{
  padding:.75rem 1rem .9rem;background:#fff;border-top:1px solid rgba(0,0,0,.07);
  font-size:.82rem;line-height:1.55;color:var(--c-ink);text-align:center;
}
.wx-shots figcaption{opacity:.8}
.wx-ba figcaption strong{display:block;font-weight:700;margin-bottom:.15rem}

/* Het eindresultaat in de procesreeks duidelijk aanduiden */
.wx-shots figure.wx-final{
  position:relative;
  box-shadow:0 0 0 3px var(--c-brand),var(--shadow);
}
.wx-final-label{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--c-brand);color:#fff;padding:.45em 1em;border-radius:99px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.wx-shots figure.wx-final figcaption{
  background:var(--c-brand);color:#fff;opacity:1;border-top:none;font-weight:600;
}

/* Gespiegelde splitsectie: tekst links, beeld rechts (afwisseling in het ritme) */
.wx-case-split.wx-flip{grid-template-columns:1.15fr .85fr}
.wx-case-split.wx-flip .wx-case-portrait{order:2}
.wx-case-split.wx-flip .wx-case-split-text{order:1}
@media(max-width:820px){
  .wx-case-split.wx-flip{grid-template-columns:1fr}
  .wx-case-split.wx-flip .wx-case-portrait{order:1}
  .wx-case-split.wx-flip .wx-case-split-text{order:2}
}

/* Uitgelichte quote, groot en centraal */
.wx-pull{
  margin:0 0 clamp(3.5rem,8vw,6rem);text-align:center;
  background:var(--c-brand);border-radius:8px;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
}
.wx-pull p{
  font-family:var(--font-title);font-weight:700;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.1;color:#fff;
  margin:0 auto .9rem;max-width:min(100%,40rem);
}
.wx-pull cite{font-style:normal;font-size:.9rem;color:#ffffffcc}

/* Fotogalerij in vier kolommen (metselverband, verhoudingen blijven behouden).
   De browser zakt vanzelf naar minder kolommen op smallere schermen. */
.wx-gal4{columns:4 200px;column-gap:clamp(.8rem,1.6vw,1.2rem);margin:0 0 clamp(3.5rem,8vw,6rem)}
.wx-gal4 figure{
  margin:0 0 clamp(.8rem,1.6vw,1.2rem);break-inside:avoid;
  border-radius:6px;overflow:hidden;background:var(--c-ice);
}
.wx-gal4 img{width:100%;height:auto;display:block}

/* Knop meteen onder de projecttitel */
.wx-case-actions--top{margin:clamp(1.4rem,3vw,2.2rem) 0 0}

/* ============================================================
   HOMEPAGE HERONTWERP — 2026-09-01
   Werk eerst, splash weg, ritme en motion herzien.
   Merk-tokens (kleur, Goodland/Poppins, logo) ongewijzigd.
   ============================================================ */

:root{
  /* Sterke curves. De ingebouwde ease-out is te slap voor UI. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* ---------- Toegankelijkheid ---------- */
.wx-skip{
  position:absolute;left:.6rem;top:-4rem;z-index:400;
  background:var(--c-brand);color:#fff;font-weight:600;
  padding:.7em 1.2em;border-radius:10px;
  transition:top .18s var(--ease-out);
}
.wx-skip:focus{top:.6rem}

:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--c-sky-dark);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Hero ---------- */
.wx-hero{
  padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem);
  background:#fff;
}
.wx-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.wx-hero-title{
  font-family:var(--font-title);font-style:italic;font-weight:700;
  color:var(--c-brand);
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  line-height:.95;letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
  margin-bottom:clamp(1.1rem,2.4vw,1.6rem);
}
.wx-hero-sub{
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  line-height:1.55;color:var(--c-ink);
  max-width:34ch;
  margin-bottom:clamp(1.8rem,3.5vw,2.6rem);
}
.wx-hero-acties{display:flex;flex-wrap:wrap;gap:.9rem}
.wx-hero-beeld{justify-self:center;width:100%}
.wx-hero-beeld img{width:min(100%,460px);height:auto;margin-inline:auto}

@media(max-width:860px){
  .wx-hero-grid{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,2.6rem)}
  .wx-hero-beeld{order:-1}
  .wx-hero-beeld img{width:min(74%,320px)}
  .wx-hero-sub{max-width:none}
}

/* ---------- Projecten: 1 groot + 2 ---------- */
.wx-werk-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.1rem,2.4vw,1.8rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.wx-proj{
  display:block;background:var(--c-ice);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}

/* Leadproject: over de volle breedte, beeld naast tekst */
.wx-proj--lead{grid-column:1 / -1}

@media (hover:hover) and (pointer:fine){
  .wx-proj:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
}
.wx-proj:active{transform:translateY(-1px)}

@media(max-width:620px){
  .wx-werk-grid{grid-template-columns:1fr}
}

/* ---------- Diensten: genummerde lijst i.p.v. vier gelijke kaarten ---------- */


/* Uurtarief als eigen uitspraak, geen vierde dienstkaart */
.wx-tarief{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.2rem,3.5vw,3rem);align-items:center;
  background:var(--c-sky-soft);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.6vw,2.6rem);
}
.wx-tarief-bedrag{
  font-family:var(--font-title);font-style:italic;font-weight:700;
  font-size:clamp(2.2rem,5.5vw,3.6rem);color:var(--c-brand);
  line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.wx-tarief p{max-width:52ch;line-height:1.6;margin:0}
@media(max-width:620px){.wx-tarief{grid-template-columns:1fr;gap:.8rem}}

/* ---------- Gestaffelde scroll-reveal ---------- */
.reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity 1.25s var(--ease-out),transform 1.25s var(--ease-out);
  transition-delay:var(--wx-delay,0ms);
}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Verminderde beweging ----------
   De basis-CSS zet hier *{animation:none!important;transition:none!important}.
   Dat sloopte de splash (die bleef staan) en haalt alle hover-feedback weg.
   Beweging weg, maar opacity en kleur blijven: zachter, niet nul. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .wx-marquee-track{animation:none!important;transform:none!important}
  .wx-proj,.btn,.wx-skip{
    transition:background-color .15s ease!important,color .15s ease!important,
               box-shadow .15s ease!important,opacity .15s ease!important;
  }
  .wx-proj:hover,.btn:hover,.wx-proj:active{transform:none!important}
  .wx-proj:hover .wx-proj-img{transform:none!important}
}

/* Eén echte reactie: geen raster van drie, maar één citaat dat telt. */

/* Hero komt op via CSS, niet via JS: geen leeg scherm als JS traag is
   of uit staat, en de LCP wacht nergens op. */
@keyframes wx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.wx-hero-tekst{animation:wx-rise .6s var(--ease-out) both}
.wx-hero-beeld{animation:wx-rise .6s var(--ease-out) .09s both}

/* #diensten staat op het rode merkvlak (regel 423). Het oude .wx-serv-blok
   had daar witte tekst; de nieuwe lijst heeft diezelfde overrides nodig,
   anders is het donkergrijs en rood op rood. */
/* Het tarief is een lichte kaart op het rode vlak: tekst blijft daar donker. */
#diensten .wx-tarief p,#diensten .wx-tarief strong{color:var(--c-ink)}

/* Hero sluit strakker aan op het werk eronder. */
.wx-hero{padding-bottom:clamp(1.5rem,3.5vw,2.75rem)}

/* ============================================================
   RONDE 2 — hero is alleen het merk, en meer blauw
   ============================================================ */

/* De vis groot en gecentreerd als eerste beeld. Geen volledig
   schermvullend blok: de projecten mogen er net onder al aanzetten. */
/* Het eerste scherm toont alleen het merk: geen projecten die
   al meekijken onderaan. */
.wx-hero{
  min-height:calc(100dvh - var(--header-h));
  display:grid;place-items:center;
  padding-block:clamp(2rem,5vw,4rem);
  background:#fff;
}
.wx-hero-merk{
  margin:0;display:flex;justify-content:center;
  animation:wx-rise .7s var(--ease-out) both;
}
.wx-hero-merk img{width:min(74vw,660px);height:auto}
@media(max-width:620px){.wx-hero-merk img{width:min(84vw,420px)}}

/* Blauwe knop als tweede stem naast het rood. */
.btn-blue{background:var(--c-sky-dark);color:#fff;border-color:var(--c-sky-dark)}
.btn-blue:hover{background:#3589b3;border-color:#3589b3}
@media (hover:hover) and (pointer:fine){
  .btn-blue:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(63,159,207,.6)}
}

/* "Bekijk het project" in blauw: het rood blijft zo voorbehouden
   aan de echte call to action. */

/* Over-sectie op een zacht blauw vlak. Dat breekt de rode blokken
   (diensten en feedback) en geeft de foto lucht. */
/* Over blijft wit: het blauwe vlak eronder is voor de reviews, en
   twee bijna identieke lichtblauwe banden naast elkaar lezen als
   één vlek met een naad. */
#over{background:#fff}

/* ============================================================
   MENUBALK — pill-groep met meeglijdende indicator
   Techniek uit de animate-recipe "tab indicator": twee identieke
   lagen, de bovenste in actieve opmaak en geknipt met clip-path.
   Achtergrond en tekstkleur bewegen zo als één element, en er
   wordt geen width geanimeerd.
   ============================================================ */
.wx-tabs{position:relative;display:flex;isolation:isolate}
.wx-tabs-laag{
  display:flex;align-items:center;gap:.15rem;
  padding:.25rem;border-radius:999px;
  border:1.6px solid #dfe3f0;background:var(--c-ice);
}
.wx-tab{
  display:flex;align-items:center;gap:.5em;
  padding:.5em .95em;border-radius:999px;
  font-weight:600;font-size:.95rem;color:var(--c-ink);
  white-space:nowrap;line-height:1.2;
  transition:color .2s ease;
}
.wx-tab-ic{width:18px;height:18px;flex:none}
@media (hover:hover) and (pointer:fine){
  .wx-tabs-laag:not(.wx-tabs-laag--actief) .wx-tab:hover{color:var(--c-sky-dark)}
}

/* De actieve laag ligt exact op de eerste en wordt weggeknipt op
   alles behalve de actieve tab. */
.wx-tabs-laag--actief{
  position:absolute;inset:0;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .26s var(--ease-in-out);
}
.wx-tabs-laag--actief .wx-tab{
  background:#fff;color:var(--c-brand);font-weight:700;
  box-shadow:0 1px 2px rgba(62,61,64,.14),0 0 0 1px #ffffff;
}
/* De eerste plaatsing mag niet meeglijden vanaf de rand. */
.wx-tabs.is-init .wx-tabs-laag--actief{transition:none}

/* Icoon in de contactknop */
.nav-cta .wx-tab-ic{width:17px;height:17px;margin-right:.15em}
.nav-cta{display:inline-flex;align-items:center;gap:.45em}

@media(max-width:900px){
  .wx-tab{padding:.5em .7em;font-size:.9rem}
  .wx-tab span{display:none}
  .nav-cta .wx-tab-ic{display:none}
}

/* Mobiel: het uitklapmenu is een lijst, geen pill-groep. */
@media(max-width:540px){
  .wx-tabs{width:100%}
  .wx-tabs-laag{
    flex-direction:column;align-items:stretch;gap:0;
    border:0;background:transparent;padding:0;border-radius:0;
  }
  .wx-tabs-laag--actief{display:none}
  .wx-tab{
    padding:.75rem .2rem;font-size:1.1rem;border-radius:0;
    border-bottom:1px solid var(--c-line);
  }
  .wx-tab span{display:inline}
  .wx-tab-ic{width:20px;height:20px;color:var(--c-sky-dark)}
  .nav-cta .wx-tab-ic{display:inline-block}
}

@media(prefers-reduced-motion:reduce){
  .wx-tabs-laag--actief{transition:none!important}
}

/* ============================================================
   PROJECTKAARTEN — beeld over de hele kaart, tekst erover
   Elke cover is anders belicht, dus een verloop bovenaan zorgt
   dat de witte tekst overal leesbaar blijft, niet alleen toevallig.
   ============================================================ */
.wx-proj{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--c-ink);
  aspect-ratio:4/3;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.wx-proj--lead{grid-column:1 / -1;aspect-ratio:8/5}

.wx-proj-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .5s var(--ease-out);
}
/* Verloop alleen bovenaan: het beeld zelf blijft grotendeels vrij. */
.wx-proj::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,16,16,.66) 0%,
    rgba(18,16,16,.38) 30%,
    rgba(18,16,16,0) 62%);
}
.wx-proj-tekst{
  position:absolute;top:0;left:0;right:0;z-index:1;
  padding:clamp(1.25rem,2.8vw,2.1rem) clamp(1.25rem,2.8vw,2.1rem) 0;
}
.wx-proj-cat{
  display:block;margin-bottom:.5em;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.88);
}
.wx-proj-titel{
  color:#fff;line-height:1.02;max-width:16ch;
  font-size:clamp(1.5rem,3vw,2.3rem);
  text-wrap:balance;
}
.wx-proj--lead .wx-proj-titel{font-size:clamp(1.8rem,3.6vw,3rem);max-width:14ch}

@media (hover:hover) and (pointer:fine){
  .wx-proj:hover .wx-proj-img{transform:scale(1.035)}
}

@media(max-width:820px){
  .wx-proj--lead{aspect-ratio:3/2}
}
@media(max-width:620px){
  .wx-proj,.wx-proj--lead{aspect-ratio:4/3}
}

/* ============================================================
   DIENSTEN — dienstnamen links, tags en tekst rechts
   Echte tablist: pijltjestoetsen werken, en de tekst hoort
   hoorbaar bij de gekozen dienst.
   ============================================================ */
.wx-dnst{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);
  margin-top:clamp(2rem,4vw,3.2rem);
  align-items:start;
}

.wx-dnst-lijst{display:flex;flex-direction:column}
.wx-dnst-knop{
  display:flex;align-items:baseline;gap:.6rem;
  width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid #ffffff4d;
  padding:clamp(1rem,2.4vw,1.5rem) 0;
  font-family:var(--font-title);font-style:italic;font-weight:700;
  font-size:clamp(1.45rem,3.2vw,2.4rem);line-height:1.05;
  letter-spacing:-.03em;text-transform:uppercase;
  color:#ffffff8a;
  transition:color .22s var(--ease-out);
}
.wx-dnst-knop.is-actief{color:#fff}
@media (hover:hover) and (pointer:fine){
  .wx-dnst-knop:hover{color:#ffffffd4}
  .wx-dnst-knop.is-actief:hover{color:#fff}
}
/* De stip markeert de actieve dienst, zoals in de referentie. */
.wx-dnst-dot{
  width:.42em;height:.42em;border-radius:50%;
  background:currentColor;flex:none;
  opacity:0;transform:scale(.4);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
}
.wx-dnst-knop.is-actief .wx-dnst-dot{opacity:1;transform:none}

.wx-dnst-panelen{position:relative;padding-top:.4rem}
.wx-dnst-paneel{display:none}
.wx-dnst-paneel.is-actief{
  display:block;
  animation:wx-dnst-in .26s var(--ease-out) both;
}
@keyframes wx-dnst-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wx-dnst-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 clamp(1.4rem,3vw,2rem);padding:0;
}
.wx-dnst-tags li{
  border:1.5px solid #ffffff7a;border-radius:8px;
  padding:.42em .95em;font-size:.88rem;font-weight:600;
  color:#fff;line-height:1.2;
}
.wx-dnst-paneel p{color:#fff;line-height:1.7;max-width:56ch;font-size:1.02rem}
.wx-dnst-paneel strong{color:#fff}

/* Zonder JS staan alle panelen open: liever alles leesbaar dan
   twee diensten die onbereikbaar zijn. */
.wx-dnst-paneel + .wx-dnst-paneel{margin-top:1.6rem}
.js .wx-dnst-paneel + .wx-dnst-paneel{margin-top:0}

@media(max-width:820px){
  .wx-dnst{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2rem)}
  .wx-dnst-panelen{padding-top:0}
}

@media(prefers-reduced-motion:reduce){
  .wx-dnst-paneel.is-actief{animation:none!important}
  .wx-dnst-dot{transition:opacity .15s ease!important;transform:none!important}
  .wx-dnst-knop.is-actief .wx-dnst-dot{transform:none!important}
}

/* ============================================================
   FEEDBACK — klein label links, het citaat groot rechts
   ============================================================ */
.wx-quote{
  display:grid;grid-template-columns:minmax(110px,1fr) 3.4fr;
  gap:clamp(1.4rem,5vw,4rem);align-items:start;
}
/* Bewust niet Goodland: de globale h2-regel zet titels in italic
   kapitaal, en dat is precies wat dit label niet mag zijn. */
.wx-quote-label{
  grid-column:1;
  font-family:var(--font);font-style:normal;font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);margin:0;line-height:1.4;padding-top:.55em;
}
/* Alle citaten in de rechterkolom, ook als er later meer bijkomen. */
.wx-quote-body{grid-column:2;margin:0}
.wx-quote-body + .wx-quote-body{margin-top:clamp(2.4rem,5vw,3.6rem)}
.wx-quote blockquote{
  margin:0;color:var(--c-ink);text-wrap:balance;
  font-family:var(--font);font-style:normal;font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1.15;letter-spacing:-.02em;
}
.wx-quote figcaption{
  margin-top:clamp(1.3rem,3vw,2.1rem);
  display:flex;flex-direction:column;gap:.15rem;
}
.wx-quote-naam{font-weight:700;color:var(--c-brand)}
.wx-quote-rol{font-size:.92rem;color:var(--c-muted)}

/* Vanaf drie reacties wordt het citaat kleiner, anders rekt de
   sectie uit tot een scherm of drie. */
.wx-quote--meer blockquote{font-size:clamp(1.2rem,2.4vw,1.85rem);line-height:1.25}

@media(max-width:760px){
  .wx-quote{grid-template-columns:1fr;gap:.9rem}
  .wx-quote-label,.wx-quote-body{grid-column:1}
  .wx-quote-label{padding-top:0}
}

/* ============================================================
   PROJECTPAGINA — volledige hero met de titel over het beeld,
   daaronder de feiten links en de omschrijving rechts.
   ============================================================ */
.wx-case{padding-top:0}

.wx-case-hero-vol{
  position:relative;display:grid;place-items:center;
  min-height:min(86vh,880px);
  background:var(--c-ink);overflow:hidden;
  margin-bottom:0;
}
.wx-case-hero-vol > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Verloop boven en onder, zodat titel, jaartal en tags leesbaar
   blijven op eender welke cover. */
.wx-case-hero-vol::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(16,14,14,.62) 0%, rgba(16,14,14,.12) 26%, rgba(16,14,14,0) 45%),
    linear-gradient(to top,    rgba(16,14,14,.62) 0%, rgba(16,14,14,.12) 24%, rgba(16,14,14,0) 42%),
    rgba(16,14,14,.18);
}
.wx-case-hero-titel{
  position:relative;z-index:2;margin:0;text-align:center;
  color:#fff;padding-inline:clamp(1.2rem,4vw,2.5rem);
  font-size:clamp(2.4rem,8.5vw,6.6rem);
  line-height:.94;letter-spacing:-.03em;text-wrap:balance;
}
.wx-case-hero-boven,.wx-case-hero-onder{
  position:absolute;left:0;right:0;z-index:2;
}
.wx-case-hero-boven{top:0;padding-top:clamp(1.2rem,3vw,2rem)}
.wx-case-hero-onder{bottom:0;padding-bottom:clamp(1.2rem,3vw,2rem)}
.wx-case-hero-onder-rij{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.wx-case-hero-vol .wx-case-back{color:#fff;opacity:.9}
.wx-case-hero-vol .wx-case-back:hover{opacity:1}
.wx-case-jaar{
  color:#ffffffbf;font-size:.82rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.wx-case-hero-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;
}
.wx-case-hero-tags li{
  border:1px solid #ffffff85;color:#fff;border-radius:8px;
  padding:.5em 1.05em;font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
}

/* ---- Feiten links, omschrijving rechts ---- */
.wx-case-meta{
  background:#fff;
  padding-block:clamp(2.8rem,7vw,5.5rem);
}
.wx-case-meta-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:clamp(1.8rem,6vw,5rem);align-items:start;
}
.wx-case-feiten{margin:0}
.wx-case-feiten dt{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);
}
.wx-case-feiten dd{
  margin:.4rem 0 clamp(1.4rem,3vw,2rem);
  font-weight:600;color:var(--c-ink);line-height:1.4;
}
.wx-case-feiten dd:last-child{margin-bottom:0}
.wx-case-cats{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;
  margin:.15rem 0 0;padding:0;
}
.wx-case-cats li{
  border:1.5px solid var(--c-line);color:var(--c-ink);border-radius:8px;
  padding:.42em .9em;font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
}
.wx-case-omschrijving p{
  margin:0;color:var(--c-ink);max-width:44ch;
  font-size:clamp(1.1rem,2.1vw,1.5rem);
  line-height:1.45;letter-spacing:-.01em;
}
.wx-case-omschrijving-actie{margin-top:clamp(1.4rem,3vw,2rem)}

@media(max-width:820px){
  .wx-case-hero-vol{min-height:min(70vh,620px)}
  .wx-case-meta-grid{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:560px){
  .wx-case-hero-onder-rij{flex-direction:column;align-items:flex-start;gap:.7rem}
}

/* ============================================================
   KNOPPEN — schuine baan die wegschuift op hover
   Naar het Uiverse-effect van BHARGAVPATEL1244.

   Niet met een pseudo-element: dat moet door overflow:hidden tegen
   de afgeronde padding-box geknipt worden, en die afronding valt
   subpixelgewijs net niet samen met de achtergrond eronder. Gevolg
   is een haarlijn van de kleur eronder langs de bochten, in rust of
   bij hover. De baan is nu een achtergrondlaag van de knop zelf, dus
   exact dezelfde afronding knipt beide. Geen naad meer mogelijk.

   Dit animeert background-position in plaats van transform. Dat is
   paint-only, geen layout, en op een knop van deze grootte
   verwaarloosbaar. Een zichtbare rand weegt zwaarder dan de regel.
   ============================================================ */
.btn-primary,.btn-blue,.btn-ghost{
  position:relative;
  /* .btn heeft border:2px solid transparent. Zonder deze twee regels
     schildert background-color tot de border-box en het verloop maar
     tot de padding-box: dan blijft er een 2px ring van de kleur
     eronder zichtbaar rond de zwarte baan. */
  background-clip:padding-box;
  background-origin:padding-box;
  background-repeat:no-repeat;
  background-size:240% 100%;
  background-position:100% 0;
  transition:background-position .4s cubic-bezier(.3,1,.8,1),
             color .4s cubic-bezier(.3,1,.8,1);
}

/* Gevulde knoppen: zwart bedekt in rust, schuift weg en laat de
   merkkleur zien. */
.btn-primary{
  color:#fff;border-color:transparent;
  background-color:var(--c-brand);
  background-image:linear-gradient(105deg,transparent 0 50%,#141112 50% 100%);
}
.btn-blue{
  color:#fff;border-color:transparent;
  background-color:var(--c-sky-dark);
  background-image:linear-gradient(105deg,transparent 0 50%,#141112 50% 100%);
}

/* Omlijnde knop: leeg in rust, de kleur schuift juist binnen. */
.btn-ghost{
  background-color:transparent;
  background-image:linear-gradient(105deg,transparent 0 50%,var(--c-brand) 50% 100%);
  background-position:0% 0;
}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.btn-blue:hover{background-position:0% 0}
  .btn-ghost:hover{background-position:100% 0;color:#fff}
  .btn-primary:hover,.btn-blue:hover,.btn-ghost:hover{transform:none;box-shadow:none}
}
.btn-primary:active,.btn-blue:active,.btn-ghost:active{transform:scale(.98)}

/* Zonder beweging: geen baan, gewoon een kleurwissel. */
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-blue,.btn-ghost{background-image:none;transition:background-color .15s ease!important}
  .btn-primary,.btn-blue{background:#141112!important}
  .btn-primary:hover{background:var(--c-brand)!important}
  .btn-blue:hover{background:var(--c-sky-dark)!important}
  .btn-ghost:hover{background:var(--c-brand)!important;color:#fff}
  .btn-primary:active,.btn-blue:active,.btn-ghost:active{transform:none!important}
}


/* De projectkaarten zijn groot; die mogen rustiger binnenkomen dan
   de rest van de pagina. */
.wx-proj.reveal{
  transition-duration:1.7s;
  transform:translateY(18px);
}
.wx-proj.reveal.is-visible{transform:none}

/* ============================================================
   CONTACTPAGINA — donker en gecentreerd
   Dezelfde grond als de footer, zodat de pagina daar naadloos in
   overloopt in plaats van er met een rand tegenaan te botsen.
   ============================================================ */
.wx-kontakt{
  background:#141112;color:#fff;
  padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5rem);
}
.wx-kontakt-inner{max-width:720px;text-align:center}

.wx-kontakt-pill{
  display:inline-block;margin:0 0 clamp(1.2rem,3vw,1.8rem);
  padding:.5em 1.2em;border-radius:999px;
  background:#ffffff14;color:#ffffffc7;
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.wx-kontakt-titel{
  margin:0 0 clamp(1rem,2.5vw,1.5rem);color:#fff;
  font-size:clamp(2.2rem,6.5vw,4.4rem);line-height:1;
  letter-spacing:-.03em;text-wrap:balance;
}
.wx-kontakt-sub{
  margin:0 auto clamp(2.4rem,6vw,4rem);max-width:48ch;
  color:#ffffffa8;font-size:clamp(1rem,2vw,1.2rem);line-height:1.6;
}

/* ---- Kaart ---- */
.wx-kontakt-kaart{
  background:#1c191a;border:1px solid #ffffff1f;
  border-radius:20px;text-align:left;
  padding:clamp(1.5rem,4vw,2.6rem);
}
.wx-veld{margin-bottom:clamp(1.1rem,2.5vw,1.5rem)}
.wx-veld label{
  display:block;margin-bottom:.55rem;
  color:#fff;font-weight:600;font-size:.95rem;
}
.wx-invoer{position:relative;display:block}
.wx-invoer svg{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#ffffff70;pointer-events:none;
}
.wx-form input,.wx-form textarea{
  width:100%;font:inherit;color:#fff;
  background:#141112;border:1px solid #ffffff26;border-radius:12px;
  padding:.95em 1.1em;
  transition:border-color .18s ease,background-color .18s ease;
}
.wx-form input{padding-left:2.9rem}
.wx-form textarea{resize:vertical;min-height:9rem;line-height:1.6}
.wx-form input::placeholder,.wx-form textarea::placeholder{color:#ffffff5c}
.wx-form input:focus,.wx-form textarea:focus{
  outline:none;border-color:var(--c-sky-dark);background:#171415;
}
.wx-form input.is-fout,.wx-form textarea.is-fout{border-color:#ff8b7f}
.wx-fout{margin:.45rem 0 0;font-size:.85rem;color:#ff9c92;min-height:0}
.wx-fout:empty{display:none}

/* ---- Verzendknop: rood in rust, wit bij hover ---- */
.wx-form-knop{
  display:block;width:100%;cursor:pointer;
  position:relative;isolation:isolate;overflow:hidden;
  border:0;border-radius:999px;
  padding:1em 1.6em;font:inherit;font-weight:700;font-size:1.02rem;
  color:#fff;
  background-color:#fff;
  background-image:linear-gradient(105deg,transparent 0 50%,var(--c-brand) 50% 100%);
  background-repeat:no-repeat;background-size:240% 100%;background-position:100% 0;
  transition:background-position .4s cubic-bezier(.3,1,.8,1),
             color .4s cubic-bezier(.3,1,.8,1);
}
@media (hover:hover) and (pointer:fine){
  .wx-form-knop:hover{background-position:0% 0;color:#141112}
}
.wx-form-knop:active{transform:scale(.99)}
.wx-form-knop:disabled{opacity:.6;cursor:default}

.wx-form-status{margin:1rem 0 0;font-size:.92rem;line-height:1.5;color:#ffffffa8}
.wx-form-status.is-gelukt{color:#8ee6a8}
.wx-form-status.is-fout{color:#ff9c92}
.wx-form-status:empty{display:none}

/* ---- Rechtstreeks bellen of mailen ---- */
.wx-kontakt-direct{
  margin-top:clamp(2rem,5vw,3rem);
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;text-align:left;
}
.wx-kontakt-direct .wx-contact-rij{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:#1c191a;border:1px solid #ffffff1f;border-radius:14px;
  padding:.9rem 1.1rem;
}
.wx-kontakt-direct .wx-contact-item{display:flex;align-items:center;gap:.75rem;color:#fff}
.wx-kontakt-direct .wx-contact-ico{font-size:1.1rem}
.wx-kontakt-direct .lbl{display:block;font-size:.78rem;color:#ffffff8f;letter-spacing:.08em;text-transform:uppercase}
.wx-kontakt-direct .val{display:block;font-weight:600}
.wx-kontakt-direct .wx-kopieer{
  flex:none;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;
  color:#ffffffc7;background:#ffffff14;border:0;border-radius:999px;padding:.5em 1em;
  transition:background-color .18s ease,color .18s ease;
}
.wx-kontakt-direct .wx-kopieer:hover{background:#ffffff26;color:#fff}
.wx-kontakt-direct .wx-kopieer.is-gelukt{background:#2f6b3f;color:#fff}

@media(max-width:640px){
  .wx-kontakt-direct{grid-template-columns:1fr}
}

/* De oude contactitems hadden een witte kaart met een rood icoonvlak.
   Op de donkere pagina moet dat weg, anders zitten er twee kaarten
   in elkaar. Specifieker gezet dan de oude regels. */
.wx-kontakt-direct .wx-contact-item{
  background:transparent;border-radius:0;padding:0;flex:1;min-width:0;
}
.wx-kontakt-direct .wx-contact-item:hover{transform:none}
.wx-kontakt-direct .wx-contact-ico{
  width:38px;height:38px;border-radius:10px;
  background:#ffffff14;color:#fff;font-size:1rem;
}
.wx-kontakt-direct .wx-contact-item .lbl{
  font-size:.72rem;font-weight:600;color:#ffffff8f;
  letter-spacing:.1em;text-transform:uppercase;
}
.wx-kontakt-direct .wx-contact-item .val{
  font-size:.95rem;font-weight:600;color:#fff;
}

/* ============================================================
   Menubalk transparanter
   Sterkere blur compenseert de lagere dekking, anders wordt tekst
   die eronder doorscrollt onrustig.
   ============================================================ */
.site-header[data-astro-cid-3ef6ksr2]{
  background:#ffffff8c;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* Op de donkere contactpagina wordt die witte waas grijs en valt de
   zwarte contactknop weg. Daar dus een donkere glasbalk, met een
   dunne lichte rand om de knop zichtbaar te houden. */
body.wx-donker .site-header[data-astro-cid-3ef6ksr2]{background:#141112a6}
body.wx-donker .header-inner[data-astro-cid-3ef6ksr2]{border-bottom-color:#ffffff2e}
body.wx-donker .nav-cta{box-shadow:inset 0 0 0 1px #ffffff42}

/* De donkere grond moet ook achter de sticky header doorlopen,
   anders staat de doorschijnende balk boven het witte .page-frame
   en wordt hij grijs in plaats van donker glas. */
body.wx-donker,
body.wx-donker .page-frame{background:#141112}

/* De foto in de Over-sectie loopt mee met de tekst: van de kop tot
   onder de knoppen, in plaats van een vaste 4:5-verhouding. */
@media(min-width:761px){
  .intro-grid[data-astro-cid-u43ozx4m]{align-items:stretch}
  .intro-photo[data-astro-cid-u43ozx4m]{aspect-ratio:auto;height:100%}
}