/* Gedeelde stijlen voor alle pagina's, één bron van waarheid */
:root { --bg:#F4F2EE; --fg:#0A0A0A; --muted:#6B6B6B; --secondary:#E8E6E2; --line:rgba(10,10,10,.12); }
.theme-dark { --bg:#0A0A0A; --fg:#F5F5F5; --muted:#A3A3A3; --secondary:#1A1A1A; --line:rgba(245,245,245,.12); }

html { scroll-behavior: smooth; }
/* ankersprong naar #reviews: de sticky header mag de kop niet afdekken */
#reviews { scroll-margin-top: 5rem; }
@media (min-width: 768px) { #reviews { scroll-margin-top: 6rem; } }
body { background: var(--bg); color: var(--fg); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Playfair Display', ui-serif, Georgia, serif; }
.font-tight { font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; }

.hero { min-height:85vh; }
@media (min-width:768px) { .hero { min-height:90vh; } }

.label-accent { font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#9B1B22; }

.btn-gradient { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:9999px; padding:.875rem 1.75rem; font-size:.75rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:#F5F5F5;
  background:linear-gradient(135deg,#9B1B22,#600E13); box-shadow:0 0 20px rgba(155,27,34,.3);
  transition:transform .2s ease, box-shadow .2s ease; }
.btn-gradient:hover { transform:translateY(-1px); box-shadow:0 0 30px rgba(155,27,34,.45); }
.btn-gradient-lg { padding:1rem 2.25rem; }

.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:9999px; border:1px solid currentColor; background:transparent;
  padding:1rem 1.5rem; font-size:.75rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn-outline-sm { padding:.85rem 1.5rem; }   /* raakvlak minimaal 44px hoog, ook op tablet */
.btn-outline:hover { background:#9B1B22; border-color:#9B1B22; color:#F5F5F5; }


.zoom img { transition: transform 1.2s ease-out; }
.zoom:hover img { transform: scale(1.03); }
.zoom-soft img { transition: transform 1.2s ease-out; }
.zoom-soft:hover img { transform: scale(1.02); }

.link-underline { border-bottom:1px solid rgba(155,27,34,.4); padding-bottom:.25rem; transition:border-color .2s ease; }
.link-underline:hover, a:hover > .link-underline { border-color:#9B1B22; }

/* Google-score. Google rondt af op halve sterren en toont bij 4,9 vijf volle sterren;
   het exacte cijfer staat ernaast. Daarom vullen we alleen heel, half of leeg: een ster
   op een willekeurig percentage afknippen levert een afgehakte punt op. */
.sterren { display:inline-flex; align-items:center; gap:.3em; }
.ster { position:relative; display:inline-block; color:var(--muted); }
.ster > span { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:#9B1B22; }


/* Accentrood is overal exact #9B1B22 (klant-spec Lovable), ook op donker; Robins keuze 30-7 */

.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.js .reveal.is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* Reviews: lange teksten afkappen op acht regels */
.clamp-8 { display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }

.lbl { display:block; font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.hint { margin-top:.5rem; font-size:.8125rem; line-height:1.6; color:var(--muted); }
.input { width:100%; margin-top:.625rem; border:1px solid var(--line); background:var(--secondary);
  color:var(--fg); padding:.75rem 1rem; font-size:.9375rem; font-family:inherit; }
.input:focus { outline:none; border-color:#9B1B22; }
.input::placeholder { color:#9a9a94; }

/* Huidtint-dropdown: alleen tinten tonen, geen namen (klantwens 3-8) */
.tint-select { position:relative; }
.tint-trigger { display:flex; align-items:center; gap:.75rem; width:100%; border:1px solid var(--line);
  background:var(--secondary); padding:.5rem .75rem; cursor:pointer; font-family:inherit; text-align:left; }
.tint-trigger:focus-visible { outline:2px solid #9B1B22; outline-offset:2px; }
.tint-placeholder { flex:1; font-size:.9375rem; color:#9a9a94; padding:.4375rem .25rem; }
.tint-current { flex:1; display:none; height:2.25rem; border:1px solid var(--line); }
.tint-select.has-tint .tint-current { display:block; }
.tint-select.has-tint .tint-placeholder { display:none; }
.tint-chevron { flex:none; color:var(--muted); transition:transform .2s ease; }
.tint-select.open .tint-chevron { transform:rotate(180deg); }
.tint-menu { position:absolute; left:0; right:0; top:calc(100% + .375rem); z-index:30;
  border:1px solid var(--line); background:var(--bg); box-shadow:0 12px 32px rgba(10,10,10,.15); }
.tint-option { display:block; cursor:pointer; }
.tint-bar { display:block; height:2.5rem; }
.tint-option:hover .tint-bar,
.tint-option input:focus-visible ~ .tint-bar,
.tint-option input:checked ~ .tint-bar { box-shadow:inset 0 0 0 2px #9B1B22; }

.budget { cursor:pointer; }
.budget span { display:inline-block; border:1px solid var(--line); border-radius:9999px;
  padding:.625rem 1.25rem; font-size:.8125rem; transition:.2s ease; }
.budget input:checked + span { border-color:#9B1B22; background:rgba(155,27,34,.1); color:#9B1B22; font-weight:600; }

.dropzone { display:flex; flex-direction:column; gap:.25rem; margin-top:.75rem; cursor:pointer;
  border:1px dashed var(--line); background:var(--secondary); padding:1.25rem 1.25rem; transition:.2s ease; }
.dropzone:hover { border-color:#9B1B22; }
.dz-title { font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.dz-sub { font-size:.75rem; color:var(--muted); }

.previews { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.75rem; }
.preview { position:relative; width:5rem; height:5rem; overflow:hidden; background:var(--secondary); }
.preview img { width:100%; height:100%; object-fit:cover; }
.preview-del { position:absolute; top:0; right:0; width:1.5rem; height:1.5rem; line-height:1;
  font-size:1rem; color:#F5F5F5; background:rgba(10,10,10,.65); }
.preview-del:hover { background:#9B1B22; }
.preview-size { position:absolute; left:0; bottom:0; right:0; font-size:.5625rem; text-align:center;
  color:#F5F5F5; background:rgba(10,10,10,.6); padding:.1rem 0; }

.notice { border:1px solid var(--line); background:var(--secondary); padding:1.25rem;
  font-size:.875rem; line-height:1.65; color:var(--fg); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.acc-body { display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .3s ease-out, opacity .3s ease-out; }
.acc-body > div { overflow:hidden; }
details[open] .acc-body, .acc-open .acc-body { grid-template-rows:1fr; opacity:1; }


/* Accentrood haalt op donker maar 2,4:1, daar een lichtere tint gebruiken */