/* ─────────────────────────────────────────────────────────────
   Aanvullingen op datarecup-modern.css voor de contactpagina.

   Alles onder .dr-page of .dr-dial gescoopt: style.css bevat selectors als
   .form input die anders zwaarder wegen dan een losse .dr-input.
   ───────────────────────────────────────────────────────────── */

/* Archivo voor KOPPEN. Knoppen houden Syne, zoals dr-row1__cta en
   dr-row2__cta in de header: een handeling hoort er overal hetzelfde uit
   te zien, en die stijl lag al vast. */
.dr-page .dr-section__title,
.dr-page .dr-loc-card__title,
.dr-page .dr-hours-label,
.dr-page .dr-sidebar-cta h3,
.dr-page .dr-score__val,
.dr-dial .dr-dial__title    { font-family: 'Archivo', 'Syne', sans-serif; }


/* ── bereikbaarheidsuitlezing ──────────────────────────────── */
.dr-dial                    { background: #111436; color: #fff; }
.dr-dial .dr-dial__inner    { max-width: 1200px; margin: 0 auto; padding: 46px 40px 52px; }
.dr-dial .dr-dial__eyebrow  { font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
                              color: var(--dr-blue-light); margin: 0 0 20px; }
.dr-dial .dr-dial__title    { font-weight: 800; letter-spacing: -.035em; color: #fff;
                              font-size: clamp(34px, 5vw, 54px); line-height: 1.02;
                              margin: 0 0 36px; max-width: 15ch; }
.dr-dial .dr-dial__row      { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; }
.dr-dial .dr-dial__tel      { text-decoration: none; color: #fff; display: block; }
.dr-dial .dr-dial__label    { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
                              color: var(--dr-blue-light); margin: 0 0 8px; }
.dr-dial .dr-dial__num      { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-weight: 500; font-size: clamp(30px, 4.6vw, 52px);
                              letter-spacing: -.03em; line-height: 1; }
.dr-dial .dr-dial__tel--small .dr-dial__num { font-size: clamp(20px, 2.4vw, 28px); }
.dr-dial .dr-dial__tel:hover .dr-dial__num  { color: var(--dr-blue-light); }

.dr-dial .dr-dial__state    { padding-bottom: 6px; margin: 0; }
.dr-dial .dr-dial__dot      { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
                              margin-right: 9px; background: #1F8A4C; box-shadow: 0 0 0 4px rgba(31,138,76,.22); }
.dr-dial .dr-dial__state--shut .dr-dial__dot { background: #8C93A3; box-shadow: 0 0 0 4px rgba(140,147,163,.2); }
.dr-dial .dr-dial__state b  { font-weight: 600; font-size: 15px; }
.dr-dial .dr-dial__state small { display: block; margin: 3px 0 0 18px; font-size: 13px; color: var(--dr-blue-light); }

/* ── spec-lijst: mono-label links, waarde rechts ───────────── */
.dr-page .dr-spec           { margin: 0; border-top: 1px solid rgba(23,40,155,.12); }
.dr-page .dr-spec > div     { display: flex; gap: 18px; padding: 12px 0;
                              border-bottom: 1px solid rgba(23,40,155,.12); }
.dr-page .dr-spec dt        { flex: none; width: 118px; margin: 0; padding-top: 3px;
                              font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                              color: var(--dr-muted); }
.dr-page .dr-spec dd        { margin: 0; font-size: 15px; line-height: 1.6; }
.dr-page .dr-spec a         { text-decoration: none; border-bottom: 1px solid rgba(23,40,155,.25); color: inherit; }
.dr-page .dr-spec a:hover   { color: var(--dr-blue); border-color: var(--dr-blue); }

/* ── hoofdkantoor naast de openingsuren ────────────────────── */
.dr-page .dr-hours-row      { display: grid; grid-template-columns: 1.35fr .95fr; gap: 32px;
                              align-items: start; margin-bottom: 0; }
.dr-page .dr-loc-card       { border-radius: 16px; }
.dr-page .dr-loc-card--wide .dr-loc-card__img { height: auto; aspect-ratio: 16 / 9; }
.dr-page .dr-loc-card__sub  { font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                              color: var(--dr-muted); margin: 0 0 18px; }
.dr-page .dr-loc-card__title { font-size: 20px; margin: 0 0 4px; }

.dr-page .dr-hours-panel    { border: 1px solid rgba(23,40,155,.12); border-radius: 16px;
                              padding: 26px; background: #fff; }
.dr-page .dr-hours-table    { width: 100%; }
.dr-page .dr-hours-table td { padding: 9px 0; }
.dr-page .dr-hours-table td:last-child { text-align: right; }
.dr-page .dr-hours-table tr.dr-today td { color: var(--dr-blue); font-weight: 600; }
.dr-page .dr-hours-table tr.dr-today td:first-child::before { content: "\25B8\00a0"; color: var(--dr-blue); }
.dr-page .dr-hours-after    { margin: 18px 0 0; padding-top: 16px; font-size: 14px; color: var(--dr-muted);
                              border-top: 1px solid rgba(23,40,155,.12); }
.dr-page .dr-hours-after a  { display: block; margin-top: 4px; text-decoration: none; color: var(--dr-text);
                              font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 17px; }

.dr-page .dr-loc-grid--two  { grid-template-columns: 1fr 1fr; margin-bottom: 0; }

/* ── klantscore ────────────────────────────────────────────── */
.dr-page .dr-trust__inner   { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.dr-page .dr-score          { text-align: center; }
.dr-page .dr-score__val     { font-weight: 800; font-size: clamp(48px, 7vw, 76px); line-height: 1;
                              letter-spacing: -.05em; color: var(--dr-blue); }
.dr-page .dr-score__of,
.dr-page .dr-score__n       { font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 12px; color: var(--dr-muted); }
.dr-page .dr-score__n       { margin-top: 8px; letter-spacing: .06em; }
.dr-page .dr-bars           { display: grid; gap: 8px; max-width: 460px; }
.dr-page .dr-bar            { display: grid; grid-template-columns: 30px 1fr 46px; gap: 12px; align-items: center;
                              font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--dr-muted); }
.dr-page .dr-bar__track     { height: 7px; background: rgba(23,40,155,.13); border-radius: 4px; overflow: hidden; }
.dr-page .dr-bar__fill      { display: block; height: 100%; background: var(--dr-blue); border-radius: 4px; }
.dr-page .dr-bar__cnt       { text-align: right; }

/* ── formulier ─────────────────────────────────────────────── */
.dr-page .dr-form-row       { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.dr-page .dr-form__grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 0; padding: 0; margin: 0; }
.dr-page .dr-form__full     { grid-column: 1 / -1; }
.dr-page .dr-label          { display: block; margin: 0 0 7px;
                              font-family: 'IBM Plex Mono', ui-monospace, monospace;
                              font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-muted); }
.dr-page .dr-form .dr-input { width: 100%; padding: 12px 14px; font-size: 15px;
                              border: 1px solid rgba(23,40,155,.15); border-radius: 8px;
                              background: #fff; color: var(--dr-text); margin: 0; float: none; }
.dr-page .dr-form textarea.dr-input { min-height: 150px; resize: vertical; }
.dr-page .dr-form .dr-submit { width: auto; min-width: 220px; padding: 14px 26px; }

.dr-page .dr-sidebar-cta    { border: 1px solid rgba(23,40,155,.14); border-left: 3px solid var(--dr-blue);
                              border-radius: 0 16px 16px 0; padding: 30px; background: #fff; }
.dr-page .dr-sidebar-cta h3 { font-size: 21px; margin: 0 0 10px; }
.dr-page .dr-sidebar-cta p  { font-size: 15px; color: var(--dr-muted); margin: 0 0 20px; }
.dr-page .dr-sidebar-cta__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.dr-page .dr-sidebar-cta__list li { display: flex; gap: 10px; }
.dr-page .dr-sidebar-cta__list li::before { content: "—"; color: var(--dr-blue); }

@media (max-width: 900px) {
  .dr-dial .dr-dial__inner  { padding: 30px 20px 34px; }
  .dr-page .dr-hours-row,
  .dr-page .dr-form-row,
  .dr-page .dr-loc-grid--two,
  .dr-page .dr-trust__inner,
  .dr-page .dr-form__grid   { grid-template-columns: 1fr; }
  .dr-page .dr-spec > div   { flex-direction: column; gap: 4px; }
  .dr-page .dr-spec dt      { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-page .dr-loc-card       { transition: none; }
  .dr-page .dr-loc-card:hover { transform: none; }
}