/* =========================================================
   Brunsman Vloeren — stylesheet
   Kleuren: grijs #4F4D4D, goud #cdab51, wit #ffffff
   Signature element: het visgraat-motief uit het logo,
   verwerkt als lijnenpatroon in hero, dividers en kaarten.
   ========================================================= */

:root{
  --grijs: #4F4D4D;
  --grijs-donker: #363535;
  --grijs-licht: #7a7878;
  --goud: #cdab51;
  --goud-licht: #e2cc8f;
  --goud-donker: #a9863a;
  --wit: #ffffff;
  --crème: #f7f5f0;
  --crème-donker: #efeae0;
  --lijn: #e4e0d6;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", Arial, sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow-soft: 0 10px 30px -12px rgba(54,53,53,.25);
  --shadow-soft-lg: 0 24px 60px -20px rgba(54,53,53,.35);
  --container: 1180px;

  --visgraat-patroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cdefs%3E%3Cpattern id='hb' width='48' height='48' patternUnits='userSpaceOnUse'%3E%3Crect x='-24' y='-6' width='48' height='12' transform='translate(12,12) rotate(45)' fill='none' stroke='%23cdab51' stroke-width='1.6'/%3E%3Crect x='-24' y='-6' width='48' height='12' transform='translate(36,36) rotate(-45)' fill='none' stroke='%23cdab51' stroke-width='1.6'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='48' height='48' fill='url(%23hb)'/%3E%3C/svg%3E");

  --visgraat-vloer-patroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3Cpattern id='hbv' width='72' height='72' patternUnits='userSpaceOnUse'%3E%3Crect x='-36' y='-9' width='72' height='18' transform='translate(18,18) rotate(45)' fill='%23a9814d' stroke='%236b4e2c' stroke-width='1.5'/%3E%3Crect x='-36' y='-9' width='72' height='18' transform='translate(54,54) rotate(-45)' fill='%238a6a41' stroke='%236b4e2c' stroke-width='1.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='72' height='72' fill='url(%23hbv)'/%3E%3C/svg%3E");
}

/* Visgraatpatroon (CSS-only, doorlopend) — toegepast op .hero::before en .cta-band::before hieronder */

/* -------------------- Reset -------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--grijs-donker);
  background:var(--wit);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--grijs-donker);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{ font-size:clamp(2.2rem, 4.4vw, 3.6rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
section{ padding:80px 0; }
.section--tight{ padding:56px 0; }
.section--creme{ background:var(--crème); }
.section--grijs{ background:var(--grijs); color:#eee; }
.section--grijs h2, .section--grijs h3{ color:var(--wit); }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--goud-donker);
  font-weight:600;
  margin-bottom:.6em;
}
.section--grijs .eyebrow{ color:var(--goud-licht); }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head p{ color:var(--grijs-licht); }
.section--grijs .section-head p{ color:#cfcccc; }

.section-head .section-accent {
  margin: 8px 0 0;
  font-family: "Parisienne", cursive;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--goud-donker);
}

/* Visgraat divider — het signature-element */
.visgraat-divider{
  width:100%;
  height:26px;
  background-image: repeating-linear-gradient(45deg, var(--goud) 0 3px, transparent 3px 22px),
                     repeating-linear-gradient(-45deg, var(--goud) 0 3px, transparent 3px 22px);
  background-size: 44px 26px;
  background-repeat: repeat-x;
  background-position: center;
  opacity:.55;
  mask-image: linear-gradient(to bottom, black, transparent);
}
.divider-simple{
  width:64px; height:3px; background:var(--goud); margin:0 auto 28px;
}
.section-head .divider-simple{ margin:0 auto 20px; }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:15px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:3px solid var(--goud-donker); outline-offset:2px; }
.btn-goud{
  background:var(--goud);
  color:var(--grijs-donker);
  box-shadow:var(--shadow-soft);
}
.btn-goud:hover{ background:var(--goud-donker); color:var(--wit); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  color:var(--wit);
  border-color:rgba(255,255,255,.55);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--wit); transform:translateY(-2px); }
.btn-outline-donker{
  background:transparent;
  color:var(--grijs-donker);
  border-color:var(--grijs-donker);
}
.btn-outline-donker:hover{ background:var(--grijs-donker); color:var(--wit); transform:translateY(-2px); }
.btn-whatsapp{
  background:transparent;
  color:#FFF;
  border-color:#25D366;
}
.btn-whatsappeffen{
  background:#25D366;
  color:#FFF;
  border-color:#25D366;
}
.btn-whatsappeffen:hover{background:#1ebc59; transform:translateY(-2px); }
.btn-whatsapp:hover{ background:#1ebc59; transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.85rem; }

/* -------------------- Header -------------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 24px -14px rgba(0,0,0,.25); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:14px clamp(20px, 3vw, 48px);
  width:100%;
  margin:0 auto;
}
.logo-link{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.logo-link img{
  height:76px; width:auto;
  transition:transform .25s ease;
}
.logo-link:hover img, .logo-link:focus-visible img{ transform:scale(1.30); }

.main-nav{ display:flex; }
.main-nav-list{ display:flex; align-items:center; gap:22px; flex-wrap:nowrap; margin:0; padding:0; list-style:none; }
.main-nav a{
  font-size:.94rem; font-weight:500; color:var(--grijs-donker);
  position:relative; padding:6px 2px;
  white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--goud); transition:width .2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ width:100%; }
.main-nav a[aria-current="page"]{ color:var(--goud-donker); }

.header-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.hamburger{
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px; padding:0;
}
.hamburger span{ width:24px; height:2px; background:var(--grijs-donker); display:block; }

@media (max-width: 1080px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(320px,84vw);
    background:var(--wit);
    padding:100px 32px 32px;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.2);
  }
  .main-nav-list{ flex-direction:column; align-items:stretch; gap:4px; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{
    font-size:1.1rem; display:flex; align-items:center;
    min-height:48px; padding:6px 4px;
    border-bottom:1px solid var(--lijn);
  }
  .hamburger{ display:flex; }
  .header-cta .btn-sm-desktop{ display:none; }
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--grijs-donker);
  color:var(--wit);
  padding:60px 0 76px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  --s: 130px;
  --c1: var(--goud);
  --c2: var(--grijs-donker);
  --l1: #0000 48%, var(--c1) 0 52%, #0000 0;
  --l2: #0000 1.3%, var(--c2) 0 32%, #0000 0;
  background:
    linear-gradient(-45deg, var(--l2)),
    linear-gradient( 45deg, var(--l1)),
    linear-gradient( 45deg, var(--l2)) calc(var(--s)/2) calc(var(--s)/2),
    linear-gradient(-45deg, var(--l1)) var(--c2);
  background-size: calc(2*var(--s)) var(--s), var(--s) var(--s);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(54,53,53,.92) 10%, rgba(54,53,53,.55) 60%, rgba(54,53,53,.15));
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
}
.hero-content .eyebrow{ color:var(--goud-licht); }
.hero h1{ font-size:clamp(1.85rem, 5.2vw + 1rem, 3.2rem); color:var(--wit); margin-bottom:.4em; }
.hero-lead{ font-size:1.15rem; color:#e7e4e0; max-width:52ch; margin-bottom:1.8em; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.hero-trust li{ font-size:.85rem; color:#d8d5d0; display:flex; align-items:center; gap:8px; }
.hero-trust li::before{ content:"✓"; color:var(--goud); font-weight:700; }
.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft-lg);
  aspect-ratio: 4 / 5;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.img-placeholder{
  width:100%; height:100%;
  display:flex; align-items:flex-end; justify-content:center;
  background-color:#8a6a41;
  background-image: var(--visgraat-vloer-patroon);
  background-size: 72px 72px;
  color:var(--wit); text-align:center; padding:22px; font-size:.88rem;
  position:relative;
}
.img-placeholder::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(54,53,53,0) 45%, rgba(30,28,26,.72) 100%);
}
.img-placeholder span{ position:relative; z-index:1; max-width:280px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.img-placeholder.klein{ aspect-ratio:1/1; }

@media (max-width: 860px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:4; aspect-ratio:16/9; }
}

/* ---- Mobiele conversie-optimalisatie: CTA's direct in beeld ----
   Op kleine schermen tonen we eerst titel + knoppen, dan de vertrouwens-
   badges, en pas daarna de sfeerfoto en de langere toelichtende tekst.
   Zo hoeft een bezoeker niet te scrollen om een actie te kunnen nemen. */
@media (max-width: 640px){
  .site-header{ }
  .header-inner{ padding:10px clamp(16px, 4vw, 32px); }
  .logo-link img{ height:52px; }

  .hero{ padding:22px 0 40px; }
  .hero-inner{ gap:28px; }
  .hero-content{ display:flex; flex-direction:column; }
  .hero-content .eyebrow{ order:1; margin-bottom:.5em; }
  .hero-content h1{ order:2; font-size:clamp(1.7rem, 7vw, 2.1rem); margin-bottom:.5em; }
  .hero-content .hero-cta-row{ order:3; margin-bottom:22px; }
  .hero-content .hero-trust{ order:4; margin-top:0; margin-bottom:4px; gap:10px 20px; }
  .hero-content .hero-lead{ order:5; font-size:1rem; margin-top:22px; margin-bottom:0; }

  .hero-cta-row{ flex-direction:column; gap:12px; }
  .hero-cta-row .btn{ width:100%; }

  .hero-visual{ order:6; aspect-ratio:16/10; }
}

/* -------------------- Breadcrumbs -------------------- */
.breadcrumbs{ padding:16px 0; font-size:.82rem; color:var(--grijs-licht); background:var(--crème); }
.breadcrumbs a{ color:var(--grijs-licht); }
.breadcrumbs a:hover{ color:var(--goud-donker); }
.breadcrumbs .sep{ margin:0 6px; }

/* -------------- Contactgedeelte in index ------------ */
.contact-image-wrapper {
  width: 100%;
  aspect-ratio: 1279 / 768;
  overflow: hidden;
  border-radius: 16px;
}

.contact-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Op kleinere schermen blijft de afbeelding netjes responsive */
@media (max-width: 768px) {
  .contact-image-wrapper {
    margin-top: 24px;
    border-radius: 12px;
  }
}

/* -------------------- Page hero (sub pages) -------------------- */
.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--grijs-donker);
  color:var(--wit);
  padding:64px 0 56px;
}

/* Visgraatpatroon */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;

  --s:130px;
  --c1:var(--goud);
  --c2:var(--grijs-donker);

  --l1:#0000 48%, var(--c1) 0 52%, #0000 0;
  --l2:#0000 1.3%, var(--c2) 0 32%, #0000 0;

  background:
    linear-gradient(-45deg,var(--l2)),
    linear-gradient(45deg,var(--l1)),
    linear-gradient(45deg,var(--l2))
      calc(var(--s)/2)
      calc(var(--s)/2),
    linear-gradient(-45deg,var(--l1))
      var(--c2);

  background-size:
    calc(2*var(--s)) var(--s),
    var(--s) var(--s);
}

/* Dezelfde gradient als de hero */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    120deg,
    rgba(54,53,53,.92) 10%,
    rgba(54,53,53,.55) 60%,
    rgba(54,53,53,.15)
  );
}

.page-hero .container{
  position:relative;
  z-index:2;
}

.page-hero h1{
  color:var(--wit);
  margin-bottom:.3em;
}

.page-hero p{
  color:#dad7d2;
  max-width:60ch;
}
/* -------------------- Cards -------------------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr;} }

.card{
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.card-body{ padding:26px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ margin-bottom:.35em; }
.card-body p{ color:var(--grijs-licht); font-size:.95rem; flex:1; }
.card-link{ margin-top:14px; font-weight:600; color:var(--goud-donker); display:inline-flex; align-items:center; gap:6px; }
.card-link::after{ content:"→"; transition:transform .18s ease; }
.card:hover .card-link::after{ transform:translateX(4px); }
.card .img-placeholder{ aspect-ratio:4/3; height:auto; }

.service-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--crème-donker); display:flex; align-items:center; justify-content:center;
  color:var(--goud-donker); font-size:1.3rem; margin-bottom:16px; flex-shrink:0;
}

/* Werkwijze steps */
.steps{ counter-reset:stap; }
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:900px){ .steps-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .steps-grid{ grid-template-columns:1fr;} }
.step{ position:relative; padding-top:14px; }
.step-num{
  font-family:var(--font-display); font-size:2.4rem; color:var(--goud);
  opacity:.85; line-height:1; margin-bottom:.3em; display:block;
}
.step h3{ margin-bottom:.25em; font-size:1.1rem; }
.step p{ color:var(--grijs-licht); font-size:.92rem; }

.steps-lijst{ counter-reset:stap; display:grid; gap:22px; }
.steps-lijst li{
  display:grid; grid-template-columns:56px 1fr; gap:18px;
  padding:20px; background:var(--wit); border:1px solid var(--lijn); border-radius:var(--radius-lg);
}
.steps-lijst li::before{
  counter-increment:stap; content:counter(stap);
  width:44px; height:44px; border-radius:50%;
  background:var(--goud); color:var(--grijs-donker);
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
}
.steps-lijst h3{ margin-bottom:.25em; font-size:1.05rem; }
.steps-lijst p{ color:var(--grijs-licht); margin:0; font-size:.94rem; }

/* -------------------- Waarom / USP's -------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

.usp {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 30px 28px 28px;
  text-align: left;

  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-lg);

  box-shadow: 0 8px 24px -22px rgba(54, 53, 53, 0.55);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* Gouden lijn als subtiele visuele aanwijzing */
.usp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--goud);
  transform: scaleX(0.24);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.usp .service-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  border: 1px solid rgba(205, 171, 81, 0.3);
  border-radius: 50%;

  background: rgba(205, 171, 81, 0.15);
  color: var(--goud-donker);

  font-size: 1.35rem;
  line-height: 1;
}

.usp h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.usp p {
  margin: 0;
  color: var(--grijs-licht);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Belangrijkste voordeel bovenaan iedere tekst */
.usp p strong {
  display: block;
  margin-bottom: 4px;

  color: var(--grijs-donker);
  font-weight: 600;
}

/* Hover alleen toepassen op apparaten met een muis */
@media (hover: hover) {
  .usp:hover {
    transform: translateY(-4px);
    border-color: var(--goud-licht);
    box-shadow: var(--shadow-soft);
  }

  .usp:hover::before {
    transform: scaleX(1);
  }
}

@media (max-width: 900px) {
  .usp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .usp-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .usp {
    padding: 26px 24px;
  }
}
/* voor het plaatsen van foto woonkamer met donkere vloer */

.woonkamer-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.woonkamer-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Werkgebied */
.werkgebied-list{ display:flex; flex-wrap:wrap; gap:10px; }
.werkgebied-list li{
  padding:8px 16px; background:var(--wit); border:1px solid var(--lijn); border-radius:999px;
  font-size:.88rem; color:var(--grijs-donker);
}
.werkgebied-list li strong{ color:var(--goud-donker); }

/* Reviews */
.review-card{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--radius-lg); padding:26px; }
.review-stars{ color:var(--goud); letter-spacing:2px; margin-bottom:10px; font-size:1rem; }
.review-quote{ font-style:italic; color:var(--grijs-donker); margin-bottom:16px; }
.review-auteur{ font-size:.85rem; color:var(--grijs-licht); font-weight:600; }
.review-placeholder-tag{
  display:inline-block; margin-top:10px; font-size:.72rem; letter-spacing:.06em;
  color:var(--goud-donker); text-transform:uppercase; background:rgba(205,171,81,.14);
  padding:3px 10px; border-radius:999px;
}

/* FAQ accordion */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--lijn); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font-display); font-size:1.08rem; color:var(--grijs-donker);
}
.faq-question .icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:2px solid var(--goud);
  color:var(--goud-donker); display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:transform .25s ease;
}
.faq-item[data-open="true"] .icon{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  color:var(--grijs-licht); font-size:.96rem;
}
.faq-answer-inner{ padding:0 4px 22px; max-width:70ch; }
.faq-item[data-open="true"] .faq-answer{ max-height:600px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-list{ display:grid; gap:14px; margin:24px 0 30px; }
.contact-info-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; }
.contact-info-list .label{ color:var(--grijs-licht); min-width:110px; display:inline-block; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; padding-top:2px;}
.map-placeholder{
  margin-top:26px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--lijn);
  aspect-ratio:16/9; background:var(--crème-donker); display:flex; align-items:center; justify-content:center;
  color:var(--grijs-licht); text-align:center; padding:20px;
}

form{ display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.85rem; font-weight:600; color:var(--grijs-donker); }
.field .hint{ font-size:.78rem; color:var(--grijs-licht); }
input, select, textarea{
  font-family:var(--font-body); font-size:1rem; padding:13px 14px;
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--wit); color:var(--grijs-donker);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--goud); box-shadow:0 0 0 3px rgba(205,171,81,.28);
}
textarea{ resize:vertical; min-height:120px; }
.field-check{ flex-direction:row; align-items:flex-start; gap:10px; }
.field-check input{ width:18px; height:18px; margin-top:3px; flex-shrink:0; }
.field-check label{ font-weight:400; font-size:.9rem; }
.form-msg{ padding:14px 16px; border-radius:var(--radius); font-size:.9rem; display:none; }
.form-msg.success{ background:#eaf6ec; color:#2a6b34; display:block; }
.form-msg.error{ background:#faeceb; color:#a4342a; display:block; }
.veld-fout{ border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.18) !important; }

/* CTA band */
.cta-band{
  background:var(--grijs-donker);
  color:var(--wit);
  padding:56px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-band::before{
  content:"";
  position:absolute;
  inset:0;

  --s:90px;
  --c1:var(--goud);
  --c2:var(--grijs-donker);

  --l1:#0000 48%, var(--c1) 0 52%, #0000 0;
  --l2:#0000 1.3%, var(--c2) 0 32%, #0000 0;

  background:
    linear-gradient(-45deg,var(--l2)),
    linear-gradient(45deg,var(--l1)),
    linear-gradient(45deg,var(--l2))
      calc(var(--s)/2)
      calc(var(--s)/2),
    linear-gradient(-45deg,var(--l1))
      var(--c2);

  background-size:
    calc(2*var(--s)) var(--s),
    var(--s) var(--s);
}

.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(54,53,53,.80) 10%,
    rgba(54,53,53,.68) 60%,
    rgba(54,53,53,.45) 85%,
	rgba(54,53,53,.10)
  );
}

.cta-band .container{
  position:relative;
  z-index:2;
}

.cta-band h2{
  color:var(--wit);
  margin-bottom:.3em;
}

.cta-band p{
  color:#dcd9d4;
  margin-bottom:28px;
}

.cta-band .hero-cta-row{
  justify-content:center;
}

/* -------------------- Footer -------------------- */
.site-footer{ background:var(--grijs-donker); color:#c9c6c1; padding:64px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:44px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:44px; }
.footer-brand strong{ font-family:var(--font-display); color:var(--wit); font-size:1.1rem; }
.site-footer p{ color:#aaa7a2; font-size:.92rem; }
.site-footer h4{ color:var(--goud-licht); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.site-footer ul{ display:grid; gap:10px; }
.site-footer a{ color:#c9c6c1; font-size:.92rem; }
.site-footer a:hover{ color:var(--goud-licht); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:#8f8c88;
}
.footer-bottom a{ color:#8f8c88; }
.footer-bottom a:hover{ color:var(--goud-licht); }

/* -------------------- Floating WhatsApp -------------------- */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.4);
  font-size:1.6rem; transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }

.call-float{
  position:fixed; bottom:22px; right:94px; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:var(--wit); color:var(--grijs-donker);
  border:1px solid var(--lijn);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.3);
  font-size:1.5rem; transition:transform .2s ease;
}
.call-float:hover{ transform:scale(1.08); }
@media (max-width:480px){
  .call-float{ right:auto; left:22px; bottom:22px; }
}

/* -------------------- Mobiele sticky actiebalk --------------------
   Op telefoons is dit de belangrijkste conversie-plek: altijd in beeld,
   ongeacht scrollpositie, met duidelijke tekst op de knoppen (converteert
   beter dan losse ronde iconen). Vervangt de zwevende ronde knoppen op
   kleine schermen; die blijven zichtbaar vanaf tablet-breedte. */
.mobile-cta-bar{ display:none; }
@media (max-width:640px){
  .whatsapp-float, .call-float{ display:none; }

  .mobile-cta-bar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:950;
    background:var(--wit);
    border-top:1px solid var(--lijn);
    box-shadow:0 -8px 24px -10px rgba(0,0,0,.25);
    padding:10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    gap:10px;
  }
  .mobile-cta-bar a{
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:48px;
    border-radius:999px;
    font-weight:600; font-size:.92rem;
    padding:0 12px;
  }
  .mobile-cta-bar .bar-bel{
    background:var(--crème); color:var(--grijs-donker);
    border:1px solid var(--lijn);
  }
  .mobile-cta-bar .bar-offerte{
    background:var(--goud); color:var(--grijs-donker);
    box-shadow:var(--shadow-soft);
  }

  /* ruimte reserveren zodat de vaste actiebalk geen inhoud bedekt */
  body{ padding-bottom:72px; }
}

/* -------------------- Utility -------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.tag{
  display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(205,171,81,.14); color:var(--goud-donker); padding:4px 12px; border-radius:999px;
  margin-bottom:10px; font-weight:600;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
.two-col.reverse .col-visual{ order:-1; }
@media (max-width:860px){ .two-col.reverse .col-visual{ order:0; } }
.col-visual .img-placeholder{
  aspect-ratio:4/3; height:auto;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
}
.col-visual .img-placeholder.klein{ aspect-ratio:1/1; }

.badge-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.badge{
  display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--grijs-donker);
  background:var(--crème); border:1px solid var(--lijn); padding:8px 14px; border-radius:999px;
}
.badge::before{ content:"✓"; color:var(--goud-donker); font-weight:700; }

.pagina-content{ max-width:820px; margin:0 auto; }
.pagina-content h2{ margin-top:2em; }
.pagina-content h3{ margin-top:1.5em; }
.pagina-content ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; }
.pagina-content li{ margin-bottom:.4em; }

/* Scroll animatie */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Focus states voor toetsenbord */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--goud-donker);
  outline-offset:2px;
}

/* 404 / bedankt */
.status-page{ padding:120px 0; text-align:center; }
.status-page .status-num{ font-family:var(--font-display); font-size:6rem; color:var(--goud); line-height:1; margin-bottom:.1em; }
.status-page .status-icon{ font-size:3.4rem; margin-bottom:.3em; }
.status-actions{ display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* -------------------- Prijscalculator -------------------- */
.calculator{
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--radius-lg);
  padding:36px; box-shadow:var(--shadow-soft); max-width:760px; margin:0 auto;
}
.calculator .field{ margin-bottom:20px; }
.calculator .form-row{ margin-bottom:0; }
.calc-range{ display:flex; align-items:center; gap:16px; }
.calc-range input[type="range"]{
  flex:1; accent-color:var(--goud-donker); height:6px; padding:0;
}
.calc-range .calc-range-value{
  min-width:86px; text-align:right; font-weight:600; color:var(--grijs-donker);
  font-family:var(--font-display); font-size:1.1rem;
}
.calc-result{
  margin-top:28px; padding:26px; border-radius:var(--radius-lg);
  background:var(--grijs-donker); color:var(--wit); text-align:center;
}
.calc-result .calc-bedrag{
  font-family:var(--font-display); font-size:2.6rem; color:var(--goud-licht);
  line-height:1; margin:.2em 0;
}
.calc-result p{ color:#d8d5d0; margin:0; font-size:.88rem; }
.calc-breakdown{ margin-top:18px; display:grid; gap:8px; font-size:.88rem; color:#d8d5d0; text-align:left; max-width:360px; margin-left:auto; margin-right:auto; }
.calc-breakdown li{ display:flex; justify-content:space-between; }
.calc-disclaimer{
  margin-top:22px; font-size:.82rem; color:var(--grijs-licht); text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Afbeeldingen bij de diensten */
.service-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--crème-donker);
}

.service-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Homepage: afbeeldingen in het diensten-grid
   Deze selectors zijn bewust beperkt tot .home-services-grid,
   zodat andere afbeeldingen, zoals .woonkamer-image, niet worden beïnvloed. */
.home-services-grid .home-service-card {
  min-width: 0;
}

.home-services-grid .home-service-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--crème-donker);
}

.home-services-grid .home-service-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* =========================================================
   Eerste livegang — conversie, formulier, footer en mobiel
   ========================================================= */

/* Kerninhoud mag nooit afhankelijk zijn van JavaScript. */
.reveal,
.reveal.is-visible{
  opacity:1;
  transform:none;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:2000;
  padding:12px 18px;
  border-radius:999px;
  background:var(--grijs-donker);
  color:var(--wit);
  font-weight:700;
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

/* Mobiel menu blijft binnen de viewport; zo ontstaat geen horizontale scroll. */
@media (max-width:1080px){
  .main-nav{
    right:0;
    transform:none;
    clip-path:inset(0 0 0 100%);
    visibility:hidden;
    pointer-events:none;
    z-index:1002;
    overflow-y:auto;
    overscroll-behavior:contain;
    transition:clip-path .3s ease, visibility 0s linear .3s;
  }
  .main-nav.is-open{
    transform:none;
    clip-path:inset(0);
    visibility:visible;
    pointer-events:auto;
    transition:clip-path .3s ease;
  }
  .hamburger{ position:relative; z-index:1003; }
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1001;
    background:rgba(25,24,24,.5);
    backdrop-filter:blur(2px);
  }
}

/* Offerteformulier */
.contact-section{ background:var(--crème); }
.contact-grid{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:56px;
}
.contact-direct,
.contact-form-panel{ min-width:0; }
.contact-form-panel{
  padding:34px;
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.contact-form-panel > p{ color:var(--grijs-licht); }
.contact-direct-actions{
  display:grid;
  gap:12px;
  margin-bottom:26px;
}
.response-promise{
  display:grid;
  gap:3px;
  margin:24px 0 26px;
  padding:16px 18px;
  border-left:4px solid var(--goud);
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--crème);
  font-size:.92rem;
}
.response-promise strong{ color:var(--grijs-donker); }
.response-promise span{ color:var(--grijs-licht); }
.service-area-card{
  margin-top:26px;
  padding:24px;
  border:1px solid var(--lijn);
  border-radius:var(--radius-lg);
  background:var(--wit);
}
.service-area-card h3{ margin-bottom:.35em; }
.service-area-card p{ color:var(--grijs-licht); }
.service-area-card .service-area-examples{ margin-bottom:0; font-size:.9rem; }
.contact-method-group{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.contact-method-group legend{
  padding:0;
  margin-bottom:2px;
  font-size:.85rem;
  font-weight:600;
  color:var(--grijs-donker);
}
.contact-method-group > .hint{
  display:block;
  margin:0 0 10px;
  color:var(--grijs-licht);
  font-size:.78rem;
}
.field-error{
  margin:8px 0 0;
  color:#a4342a;
  font-size:.82rem;
  font-weight:600;
}
.field-error[hidden]{ display:none; }
.form-privacy{
  margin:0;
  color:var(--grijs-licht);
  font-size:.8rem;
  line-height:1.55;
  text-align:center;
}
.form-privacy a{
  color:var(--goud-donker);
  text-decoration:underline;
  text-underline-offset:2px;
}
input[type="file"]{
  width:100%;
  padding:10px;
  background:var(--crème);
}
input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:10px 14px;
  border:0;
  border-radius:999px;
  background:var(--grijs-donker);
  color:var(--wit);
  font-family:var(--font-body);
  font-weight:600;
  cursor:pointer;
}
.hp-field{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
button[disabled]{ opacity:.68; cursor:wait; transform:none !important; }

/* Nieuwe footer: compacte routes naar dienst, vertrouwen en contact. */
.site-footer{ padding:64px 0 24px; }
.footer-grid{
  grid-template-columns:1.45fr 1fr 1fr 1.25fr;
  gap:44px;
  align-items:start;
}
.footer-intro p{ max-width:42ch; }
.footer-brand{ width:max-content; }
.footer-brand img{ width:52px; height:52px; }
.footer-brand strong{ font-size:1.2rem; }
.footer-heading{
  margin:0 0 18px;
  color:var(--goud-licht);
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-offerte-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:var(--goud-licht) !important;
  font-weight:700;
}
.footer-offerte-link span{ transition:transform .2s ease; }
.footer-offerte-link:hover span{ transform:translateX(4px); }
.footer-column ul{ gap:11px; }
.footer-contact{ font-style:normal; }
.footer-contact li > a,
.footer-contact-static{ display:grid; gap:1px; }
.footer-contact li span:first-child{
  color:#8f8c88;
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.footer-contact strong{
  color:#d8d5d0;
  font-size:.9rem;
  font-weight:500;
  overflow-wrap:anywhere;
}
.footer-contact a:hover strong{ color:var(--goud-licht); }
.footer-bottom{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:12px 24px;
}
.footer-legal{ justify-self:end; }

/* Zwevende acties op desktop en een vaste actiebalk op telefoon. */
.floating-action svg,
.mobile-cta-bar svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.call-float{ right:94px; left:auto; }
.whatsapp-float{ right:22px; }
.mobile-cta-bar .bar-whatsapp{ background:#25D366; color:#fff; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 42px; }
  .footer-bottom{ grid-template-columns:1fr 1fr; }
  .footer-legal{ justify-self:start; grid-column:1 / -1; }
}

@media (max-width:640px){
  .container{ padding-left:18px; padding-right:18px; }
  section{ padding:56px 0; }
  .section--tight{ padding:42px 0; }
  .section-head{ margin-bottom:32px; }
  .grid{ gap:18px; }
  .card-body{ padding:22px; }

  .header-inner{ padding:8px 16px; }
  .logo-link img{ height:50px; width:50px; }
  .logo-link:hover img,
  .logo-link:focus-visible img{ transform:scale(1.06); }
  .main-nav{ width:min(340px,90vw); padding:82px 24px 28px; }
  .main-nav a{ min-height:52px; font-size:1rem; }

  .breadcrumbs{
    padding:10px 0;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .page-hero{ padding:44px 0 40px; }
  .page-hero h1{ font-size:clamp(2rem,10vw,2.7rem); }
  .page-hero p{ font-size:.98rem; }
  .hero{ padding-top:24px; }
  .hero-visual{ box-shadow:0 18px 40px -22px rgba(0,0,0,.55); }

  .btn{
    min-height:48px;
    padding:13px 20px;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }
  input,
  select,
  textarea{
    min-height:48px;
    font-size:16px;
  }
  textarea{ min-height:132px; }
  .form-row{ gap:14px; }
  form{ gap:16px; }

  .contact-grid{ gap:38px; }
  .contact-form-panel{ padding:24px 18px; }
  .contact-info-list li{
    display:grid;
    grid-template-columns:minmax(92px,auto) minmax(0,1fr);
    gap:10px;
  }
  .contact-info-list .label{ min-width:0; }
  .contact-info-list a{ overflow-wrap:anywhere; }
  .response-promise{ margin:20px 0 22px; }

  .site-footer{ padding:48px 0 32px; }
  .footer-grid{ grid-template-columns:1fr; gap:0; margin-bottom:34px; }
  .footer-intro,
  .footer-column{
    padding:26px 0;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .footer-intro{ padding-top:0; border-top:0; }
  .footer-heading{ margin-bottom:14px; }
  .footer-bottom{ grid-template-columns:1fr; gap:8px; }
  .footer-legal{ grid-column:auto; }

  .mobile-cta-bar{
    min-height:72px;
    padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    gap:7px;
  }
  .mobile-cta-bar a{
    min-width:0;
    min-height:54px;
    flex-direction:column;
    gap:2px;
    padding:6px 5px;
    border-radius:12px;
    font-size:.76rem;
    line-height:1.1;
  }
  .mobile-cta-bar svg{ width:19px; height:19px; }
  body{ padding-bottom:78px; }

  .status-page{ padding:72px 0; }
  .status-page .status-num{ font-size:4.8rem; }
  .status-actions{ flex-direction:column; }
  .status-actions .btn{ width:100%; }
}

@media (max-width:380px){
  .mobile-cta-bar a{ font-size:.71rem; }
  .mobile-cta-bar svg{ width:18px; height:18px; }
  .contact-form-panel{ padding-left:15px; padding-right:15px; }
}
.form-msg.pending{
  display:block;
  background:#f3efe3;
  color:var(--grijs-donker);
}

/* De lange plaatsnamenlijst blijft beschikbaar zonder de mobiele homepage te verlengen. */
.werkgebied-more{ margin-top:18px; }
.werkgebied-more summary{
  width:max-content;
  max-width:100%;
  cursor:pointer;
  color:var(--goud-donker);
  font-weight:700;
  list-style:none;
}
.werkgebied-more summary::-webkit-details-marker{ display:none; }
.werkgebied-more summary::after{ content:" +"; }
.werkgebied-more[open] summary::after{ content:" −"; }
.werkgebied-more .werkgebied-list{ margin-top:18px; }
@media (max-width:640px){
  .werkgebied-list{ gap:8px; }
  .werkgebied-list li{ padding:7px 12px; font-size:.82rem; }
}

/* Het geopende menu moet boven de donkere pagina-overlay blijven. */
@media (max-width:1080px){
  body.nav-open .site-header{ z-index:1004; }
  body.nav-open .main-nav{ z-index:1005; }
  body.nav-open .hamburger{ z-index:1006; }
  .main-nav-list{ width:100%; }
}
body.nav-open{ overflow:hidden; }
#contactformulier,
section[id],
h2[id]{ scroll-margin-top:96px; }

/* -------------------- Instagram header button -------------------- */
/* CSS Custom Properties for light mode (defaults) */
:root  {
  --btn-text-color: #ffffff;
  --btn-icon-color: #ffffff;
  --btn-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --btn-width: 45px;
  --btn-height: 45px;
  --btn-hover-width: 110px;
  --btn-border-radius: 50%;
  --btn-hover-border-radius: 30px;
  --btn-transition: 0.4s;
  --btn-icon-transition: 0.3s;
  --btn-font-weight: 600;
  --btn-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Base button styles */
.Btn  {
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: var(--btn-width);
  height: var(--btn-height);
  border-radius: var(--btn-border-radius);
  background: var(--btn-bg);
  transition: width var(--btn-transition), border-radius var(--btn-transition);
  padding: 0;
  box-sizing: border-box;
}

/* Icon styling */
.svgIcon  {
  transition: opacity var(--btn-icon-transition);
  display: block;
}

.svgIcon path  {
  fill: var(--btn-icon-color);
}

/* Text styling */
.text  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--btn-text-color);
  font-weight: var(--btn-font-weight);
  font-family: var(--btn-font-family);
  opacity: 0;
  transition: opacity var(--btn-transition);
  white-space: nowrap;
  pointer-events: none;
  margin: 0;
}

/* Hover state */
.Btn:hover  {
  width: var(--btn-hover-width);
  border-radius: var(--btn-hover-border-radius);
}

.Btn:hover .svgIcon  {
  opacity: 0;
}

.Btn:hover .text  {
  opacity: 1;
}

/* Dark mode via .dark class on parent */
.dark .Btn,
.dark:root .Btn,
:root.dark .Btn  {
  --btn-text-color: #ffffff;
  --btn-icon-color: #ffffff;
  --btn-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --btn-hover-width: 110px;
  --btn-width: 45px;
  --btn-height: 45px;
  --btn-border-radius: 50%;
  --btn-hover-border-radius: 30px;
}

/* Dark mode via system preference */
@media (prefers-color-scheme: dark)  {
  :root  {
    --btn-text-color: #ffffff;
    --btn-icon-color: #ffffff;
    --btn-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --btn-hover-width: 110px;
    --btn-width: 45px;
    --btn-height: 45px;
    --btn-border-radius: 50%;
    --btn-hover-border-radius: 30px;
  }
}

/* Afbeeldingen op de pagina Over Brunsman */
.over-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--crème-donker);
}

.over-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}