/* discreteverkoop.be — gedeelde stijl */
/* ==========================================================
   Kleuren & typografie — pas hier aan
   ========================================================== */
:root {
  --dv-paper: #F6E4D6;        /* zalmroze achtergrond */
  --dv-paper-deep: #EDCDB7;   /* diepere zalmtint (contact, gevel) */
  --dv-ink: #15202E;          /* marineblauw-zwart */
  --dv-ink-2: #243244;
  --dv-text: #3A3F48;
  --dv-muted: #545863;
  --dv-line: #E3C2AC;
  --dv-line-strong: #D6AE94;
  --dv-input-border: #C79E86;
  --dv-accent: #A8432A;       /* terracotta */
  --dv-accent-light: #F0A07C; /* accent op donkere achtergrond */
  --dv-dark-line: #2F3B4C;
  --dv-dark-muted: #B4B9C2;
  --dv-dark-text: #DCDFE4;

  --dv-serif: 'Instrument Serif', Georgia, serif;
  --dv-sans: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg: var(--dv-paper);
  --bs-body-color: var(--dv-ink);
  --bs-body-font-family: var(--dv-sans);
  --bs-link-color-rgb: 21, 32, 46;
  --bs-link-hover-color-rgb: 168, 67, 42;
  --bs-border-color: var(--dv-line);
}

html { scroll-behavior: smooth; }
body { font-family: var(--dv-sans); -webkit-font-smoothing: antialiased; }

.container-dv { max-width: 1248px; padding-left: 24px; padding-right: 24px; }

.font-serif { font-family: var(--dv-serif); font-weight: 400; }
.text-accent { color: var(--dv-accent) !important; }
.text-muted-dv { color: var(--dv-muted) !important; }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dv-accent); margin-bottom: 1.25rem;
}

.display-dv {
  font-family: var(--dv-serif); font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 6.5rem); line-height: .98; letter-spacing: -.025em;
  text-wrap: balance;
}
.h2-dv {
  font-family: var(--dv-serif); font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.03; letter-spacing: -.02em;
}
.lead-dv { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--dv-text); }

section { scroll-margin-top: 90px; }
.section-pad { padding-top: clamp(5rem, 10vw, 9.5rem); padding-bottom: clamp(4.5rem, 9vw, 9.5rem); }

/* Buttons */
.btn-dv {
  --bs-btn-bg: var(--dv-ink); --bs-btn-color: var(--dv-paper);
  --bs-btn-hover-bg: var(--dv-accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--dv-accent); --bs-btn-active-color: #fff;
  --bs-btn-border-width: 0; --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 500; --bs-btn-padding-x: 2rem; --bs-btn-padding-y: 1.05rem;
  --bs-btn-focus-shadow-rgb: 168, 67, 42;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem; font-size: 1.0625rem;
}
.btn-outline-dv {
  --bs-btn-color: var(--dv-ink); --bs-btn-border-color: var(--dv-ink);
  --bs-btn-hover-bg: var(--dv-ink); --bs-btn-hover-color: var(--dv-paper); --bs-btn-hover-border-color: var(--dv-ink);
  --bs-btn-border-radius: 999px; --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .6rem;
}
.link-underline-dv { font-weight: 500; text-underline-offset: 6px; color: var(--dv-ink); }
.link-underline-dv:hover { color: var(--dv-accent); }

/* Navbar */
.navbar-dv { background: var(--dv-paper); border-bottom: 1px solid var(--dv-line); padding: 1.25rem 0; }
.navbar-dv .navbar-brand { font-family: var(--dv-serif); font-size: 1.875rem; color: var(--dv-ink); letter-spacing: -.01em; }
.navbar-dv .navbar-brand small { font-family: var(--dv-sans); font-size: .9375rem; color: var(--dv-muted); }
.navbar-dv .nav-link { color: var(--dv-ink); font-size: .9375rem; }
.navbar-dv .nav-link:hover { color: var(--dv-accent); }
.navbar-dv .navbar-toggler { border: 1px solid var(--dv-ink); border-radius: 999px; width: 44px; height: 44px; padding: 0; }
.navbar-dv .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(168, 67, 42, .3); }

/* Hero — gevel-illustratie */
.facade {
  position: relative; aspect-ratio: 11 / 13; background: var(--dv-paper-deep);
  border: 1px solid #DDB79E;
  display: flex; flex-direction: column; justify-content: space-between;
}
.facade-windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.facade-windows span { display: block; aspect-ratio: 1 / 1.2; background: var(--dv-ink-2); }
.facade-windows span.dim { opacity: .35; }
.facade-ground { display: flex; align-items: flex-end; justify-content: space-between; }
.facade-ground .win { width: 36%; aspect-ratio: 1.2 / 1; background: var(--dv-ink-2); }
.facade-ground .win.small { width: 26%; }
.facade-ground .door { width: 26%; aspect-ratio: 1 / 1.7; background: var(--dv-ink); border-radius: 999px 999px 0 0; }
.facade-sign {
  position: absolute; left: 9.5%; right: 9.5%; top: 40%; height: 21%;
  border: 1.5px dashed var(--dv-accent); background: rgba(246, 228, 214, .86);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem;
  font-family: var(--dv-serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.625rem);
}

/* "Geen …"-balk */
.no-strip { border-top: 1px solid var(--dv-line); border-bottom: 1px solid var(--dv-line); }
.no-strip .col { font-family: var(--dv-serif); font-size: clamp(1.3rem, 2vw, 1.75rem); padding-top: 1.6rem; padding-bottom: 1.6rem; }
@media (min-width: 768px) {
  .no-strip .col + .col { border-left: 1px solid var(--dv-line); padding-left: 2rem; }
}
@media (max-width: 767.98px) {
  .no-strip .col { flex: 0 0 50%; border-bottom: 1px solid var(--dv-line); padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .no-strip .col:nth-child(even) { border-left: 1px solid var(--dv-line); padding-left: 1rem; }
  .no-strip .col:nth-child(n+3) { border-bottom: 0; }
}

/* Waarom discreet */
.benefit { border-top: 1px solid var(--dv-ink); padding-top: 1.75rem; height: 100%; }
.benefit .num { font-family: var(--dv-serif); font-size: 1.375rem; color: var(--dv-accent); margin-bottom: 1rem; }
.benefit h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; }
.benefit p { color: var(--dv-muted); line-height: 1.6; margin: 0; }

/* Wat we zoeken (donker) */
.section-dark { background: var(--dv-ink); color: var(--dv-paper); }
.section-dark .eyebrow { color: var(--dv-accent-light); }
.section-dark .lead-dark { color: var(--dv-dark-muted); font-size: 1.0625rem; line-height: 1.6; }
.search-card { border: 1px solid var(--dv-dark-line); padding: 2.5rem; height: 100%; }
.search-card h3 { font-family: var(--dv-serif); font-weight: 400; font-size: 2.5rem; margin-bottom: 1.75rem; }
.search-card ul { list-style: none; padding: 0; margin: 0; color: var(--dv-dark-text); font-size: 1.0625rem; }
.search-card li { padding: .875rem 0; border-bottom: 1px solid var(--dv-dark-line); }
.search-card li:first-child { padding-top: 0; }
.search-card li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Werkwijze */
.steps { list-style: none; padding: 0; margin: 0; }
.step .num { font-family: var(--dv-serif); font-size: 5.5rem; line-height: 1; color: var(--dv-accent); margin-bottom: 1.25rem; }
.step h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; }
.step p { color: var(--dv-muted); line-height: 1.6; margin: 0; }
@media (min-width: 992px) {
  .step { padding: 0 2rem; }
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
  .step + .step { border-left: 1px solid var(--dv-line); }
}
@media (max-width: 991.98px) {
  .step { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--dv-line); }
  .step:last-child { border-bottom: 1px solid var(--dv-line); }
  .step .num { font-size: 3.25rem; line-height: .9; width: 2.5rem; flex-shrink: 0; margin: 0; }
}

/* Contact */
.section-contact { background: var(--dv-paper-deep); }
.contact-direct { border-top: 1px solid var(--dv-line-strong); padding-top: 1.5rem; }
.contact-direct .phone { font-family: var(--dv-serif); font-size: 2.5rem; text-decoration: none; color: var(--dv-ink); }
.contact-direct .phone:hover { color: var(--dv-accent); }
.form-card { background: var(--dv-paper); padding: clamp(1.5rem, 4vw, 3rem); }
.form-card .form-label { font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.form-card .form-control,
.form-card .form-select {
  min-height: 52px; border: 1px solid var(--dv-input-border); border-radius: 4px;
  background-color: #fff; font-size: 1rem; color: var(--dv-ink);
}
.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card .form-check-input:focus { border-color: var(--dv-accent); box-shadow: 0 0 0 .2rem rgba(168, 67, 42, .2); }
.form-card .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; border-color: var(--dv-input-border); }
.form-card .form-check-input:checked { background-color: var(--dv-ink); border-color: var(--dv-ink); }
.form-card .form-check-label { font-size: .875rem; line-height: 1.5; color: var(--dv-text); padding-left: .35rem; }

/* Footer */
.footer-dv { background: var(--dv-ink); color: var(--dv-dark-muted); font-size: .875rem; padding: 3rem 0; }
.footer-dv .brand { font-family: var(--dv-serif); font-size: 1.5rem; color: var(--dv-paper); }
.footer-dv a { color: var(--dv-dark-text); }
.footer-dv a:hover { color: var(--dv-accent-light); }

/* ==========================================================
   Juridische pagina's (privacy, cookies)
   ========================================================== */
.legal-header { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--dv-line); }
.legal-header .display-dv { font-size: clamp(2.75rem, 6vw, 5.25rem); }
.legal-meta { color: var(--dv-muted); font-size: .9375rem; }

.legal-toc { position: sticky; top: 110px; }
.legal-toc .toc-title { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-accent); margin-bottom: 1rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; border-top: 1px solid var(--dv-line); }
.legal-toc li:last-child { border-bottom: 1px solid var(--dv-line); }
.legal-toc a { display: flex; gap: .75rem; padding: .7rem 0; text-decoration: none; color: var(--dv-ink); font-size: .9375rem; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--dv-serif); color: var(--dv-accent); min-width: 1.5rem; }
.legal-toc a:hover { color: var(--dv-accent); }

.legal-body { max-width: 44rem; counter-reset: sec; }
.legal-body section { padding-top: 2.75rem; scroll-margin-top: 100px; }
.legal-body section:first-child { padding-top: 0; }
.legal-body h2 { counter-increment: sec; font-family: var(--dv-serif); font-weight: 400; font-size: clamp(1.875rem, 3vw, 2.375rem); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 1.25rem; display: flex; gap: 1rem; align-items: baseline; }
.legal-body h2::before { content: counter(sec, decimal-leading-zero); font-size: 1.25rem; color: var(--dv-accent); }
.legal-body h3 { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 .6rem; }
.legal-body p, .legal-body li { font-size: 1.0625rem; line-height: 1.7; color: var(--dv-text); }
.legal-body ul { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.legal-body li { margin-bottom: .4rem; }
.legal-body li::marker { color: var(--dv-accent); }
.legal-body strong { color: var(--dv-ink); font-weight: 600; }
.legal-body a { color: var(--dv-ink); text-underline-offset: 4px; }
.legal-body a:hover { color: var(--dv-accent); }

.legal-card { background: var(--dv-paper-deep); padding: 1.75rem 2rem; margin: 1.25rem 0; }
.legal-card p { margin-bottom: .25rem; }
.legal-card p:last-child { margin-bottom: 0; }

.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9875rem; }
.legal-table th { text-align: left; font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-muted); padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--dv-ink); }
.legal-table td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--dv-line); vertical-align: top; color: var(--dv-text); line-height: 1.55; }
.legal-table td:first-child { color: var(--dv-ink); font-weight: 500; }
.tag { display: inline-block; font-size: .8125rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tag-on { color: var(--dv-ink); }
.tag-off { color: var(--dv-muted); }

.legal-cta { background: var(--dv-ink); color: var(--dv-paper); padding: clamp(2rem, 4vw, 3rem); margin-top: 3.5rem; }
.legal-cta p { color: var(--dv-dark-muted); margin: 0; }
.legal-cta .btn-dv { --bs-btn-bg: var(--dv-paper); --bs-btn-color: var(--dv-ink); }