/* kleurvariabelen voor de hele pagina */
:root{--blue:#17289B;--blue-dark:#0E1C6E;--cyan:#3BA6D3;--ink:#1A1D2E;--muted:#5A607A;--surface:#F4F6FB;--band:#111436;--line:rgba(23,40,155,.13);--warn:#B07A12;--alert:#C2410C;--alert-dark:#9A3412;--alert-soft:#FFF3EC;}

/* ─────────────────────────────────────────────────────────────
   Homepage.

   Zelfde tokens en dezelfde dr-klassen als de contactpagina, maar met wat
   meer durf: een verloop in de hero, kaarten die reageren, en een blok dat
   half over de rand valt. De homepage mag opvallen; de rest van de site
   hoeft dat niet.
   ───────────────────────────────────────────────────────────── */

.dr-hero,
.dr-section,
.dr-homecta { --blue:#17289B; --blue-dark:#0E1C6E; --cyan:#3BA6D3;
  --ink:#1A1D2E; --muted:#5A607A; --surface:#F4F6FB; --band:#111436;
  --line:rgba(23,40,155,.13); --warn:#B07A12;
  --alert:#C2410C; --alert-dark:#9A3412; --alert-soft:#FFF3EC; }

/* ── hero ────────────────────────────────────────────────── */
/*
   GEEN overflow:hidden hier. De beloftebalk steekt met translateY(34px) onder
   de hero uit, en daar knipte dit hem af - vandaar dat 'twee werkdagen' half
   wegviel.

   De cyaan gloed die dit moest inperken zit nu op .dr-hero__bg, en die heeft
   zijn eigen overflow:hidden. De twee verlooplagen staan op inset:0 en kunnen
   dus sowieso niet uitsteken.
*/
.dr-hero{position:relative;color:#fff;
  /* Zelfde kleuren als het stappenblok: #0E1C6E naar #17289B naar #1E33BC.
     Dat maakt de twee donkere blokken op de pagina één familie. */
  background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%)}
/* De cyaan gloed zit nu op het beeld zelf, want ::after is de tweede
   verloopslaag geworden. */
.dr-hero__bg::after{content:"";position:absolute;right:-8%;top:-32%;width:54%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.2),transparent 68%);
  pointer-events:none}
.dr-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.dr-hero__inner{max-width:1180px;margin:0 auto;padding:66px 40px 0;position:relative;z-index:2}
.dr-hero__eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 20px}
.dr-hero__title{font-family:'Archivo','Syne',sans-serif;font-weight:800;letter-spacing:-.037em;
  font-size:clamp(34px,5.4vw,60px);line-height:1.02;margin:0 0 20px;max-width:17ch;color:#fff;
  text-shadow:0 2px 22px rgba(6,10,32,.55)}
.dr-hero__sub{font-size:19px;line-height:1.6;color:#D6DEF6;max-width:56ch;margin:0 0 32px;
  text-shadow:0 1px 14px rgba(6,10,32,.5)}
.dr-hero__eyebrow{text-shadow:0 1px 10px rgba(6,10,32,.5)}
.dr-hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}

.dr-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Syne',sans-serif;font-weight:600;
  font-size:15px;padding:14px 26px;border-radius:12px;text-decoration:none;
  background:var(--blue);color:#fff;border:1px solid var(--blue);transition:.16s}
.dr-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.dr-btn--white{background:#fff;color:var(--blue,#17289B);border-color:#fff}
.dr-btn--white:hover{background:#EEF1FA;color:var(--blue-dark,#0E1C6E)}
.dr-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);flex-direction:column;
  align-items:flex-start;gap:2px;padding:10px 22px}
.dr-btn--ghost span{font-family:'DM Sans',sans-serif;font-weight:400;font-size:12px;color:#9FB2E8}
.dr-btn--ghost b{font-family:'IBM Plex Mono',monospace;font-size:16px;letter-spacing:.02em}
.dr-btn--ghost:hover{border-color:#fff;color:#fff}

/* de vier beloftes, half over de rand */
.dr-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:18px;overflow:visible;transform:translateY(34px);
  box-shadow:0 20px 52px rgba(6,10,32,.32)}
.dr-promise__item{background:#fff;padding:24px 24px 26px;display:flex;flex-direction:column;gap:5px}
.dr-promise__item b{font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;
  color:var(--ink);line-height:1.25}
.dr-promise__item span{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ── secties ─────────────────────────────────────────────── */
.dr-section{padding-block:64px}
.dr-section--after-promise{padding-top:92px}
.dr-section--white{background:#fff}
.dr-section--surface{background:var(--surface)}
.dr-section--ink{background:var(--band);color:#fff}
.dr-section__inner{max-width:1180px;margin:0 auto;padding-inline:40px}
.dr-section__label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin:0 0 6px}
.dr-section--ink .dr-section__label{color:#8FA0C8}
.dr-section__title{font-family:'Archivo','Syne',sans-serif;font-weight:700;letter-spacing:-.026em;
  font-size:clamp(25px,3vw,35px);margin:0 0 10px;color:inherit}
.dr-section__lead{font-size:17.5px;color:var(--muted);max-width:64ch;margin:0 0 32px;line-height:1.6}
.dr-section--ink .dr-section__lead{color:#C7D2F0}

/* ── triage ──────────────────────────────────────────────── */
.dr-triage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dr-triage__card{position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--blue);border-radius:16px;padding:26px 26px 22px;
  text-decoration:none;color:inherit;transition:.16s}
.dr-triage__card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,16,40,.11);
  border-color:var(--blue);color:inherit}
.dr-triage__card b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  margin-bottom:7px;letter-spacing:-.01em}
/*
   Let op: dit was .dr-triage__card > span en dat trof ook de spoedvlag, want
   die is óók een direct kind. Met 0,2,0 tegen 0,1,0 won deze regel, en de vlag
   kreeg de grijsblauwe tekstkleur in plaats van wit.

   Vandaar de :not() - en de vlag krijgt hieronder bovendien genoeg gewicht om
   het nooit meer te verliezen.
*/
.dr-triage__card > span:not(.dr-triage__flag){display:block;font-size:15px;
  color:var(--muted);line-height:1.6}
.dr-triage__go{display:block;margin-top:16px;font-family:'Syne',sans-serif;font-weight:600;
  font-size:13.5px;font-style:normal;color:var(--blue);opacity:0;transform:translateX(-4px);transition:.16s}
.dr-triage__card:hover .dr-triage__go{opacity:1;transform:none}
.dr-triage__card--urgent{border-top:4px solid var(--alert,#C2410C);
  background:linear-gradient(180deg,#FFF3EC 0%,#fff 58%)}
.dr-triage__card--urgent:hover{border-color:var(--alert,#C2410C)}
.dr-triage__card--urgent .dr-triage__go{color:var(--alert-dark,#9A3412)}
/*
   Fel oranje met wit, en genoeg gewicht in de selector om te winnen van de
   kaartregel hierboven. Wit op #C2410C haalt 5,9:1; bij 14 pixels vetgedrukt
   is dat ruim boven de norm voor grote tekst (3:1) en ook boven die voor
   gewone tekst (4,5:1).

   De schaduw eronder is donker en niet oranje - een gekleurde schaduw onder
   een gekleurde vlag maakt de rand wazig en dat leest slechter.
*/
.dr-triage__card .dr-triage__flag,
.dr-triage__flag{position:absolute;top:-13px;right:16px;display:inline-flex;align-items:center;gap:7px;
  font-family:'Syne',sans-serif;font-weight:800;font-size:14px;letter-spacing:.005em;
  background:var(--alert,#C2410C);color:#fff;line-height:1;
  padding:9px 16px 9px 13px;border-radius:99px;
  text-shadow:0 1px 2px rgba(90,28,8,.45);
  box-shadow:0 3px 9px rgba(60,20,6,.32), 0 0 0 3px #fff}
.dr-triage__flag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;
  flex:none;animation:drPulse 1.8s ease-in-out infinite}
@keyframes drPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

/* ── waarom ──────────────────────────────────────────────── */
.dr-why{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dr-why__item{border:1px solid rgba(255,255,255,.15);border-left:3px solid var(--cyan);
  border-radius:0 16px 16px 0;padding:24px 28px;background:rgba(255,255,255,.04)}
.dr-why__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  color:#fff;margin-bottom:6px}
.dr-why__item span{font-size:15px;color:#B9C4E0;line-height:1.6}

/* ── stappen ─────────────────────────────────────────────── */
.dr-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border-radius:16px;overflow:hidden}
.dr-step{background:#fff;padding:26px 22px}
.dr-step b{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  color:var(--blue);margin-bottom:12px}
.dr-step p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}

/* ── afleverpunten ───────────────────────────────────────── */
.dr-spots{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.dr-spots__act{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.dr-spots__or{font-size:14.5px;color:var(--muted)}
.dr-spots__or b{color:var(--ink);font-weight:500}
.dr-spots__map{aspect-ratio:4/3;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(148deg,var(--surface),#E4E9F6);border:1px solid var(--line)}
.dr-spots__map span{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(60px,9vw,120px);
  color:rgba(23,40,155,.13);letter-spacing:-.05em}

/* ── merken ──────────────────────────────────────────────── */
.dr-brandlinks{display:flex;flex-wrap:wrap;gap:12px}
.dr-brandlinks a{font-family:'Syne',sans-serif;font-weight:600;font-size:15px;padding:12px 22px;
  border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.dr-brandlinks a:hover{border-color:var(--blue);color:var(--blue)}





/* ── slot ────────────────────────────────────────────────── */
.dr-homecta{background:var(--blue);color:#fff}
.dr-homecta__inner{max-width:1180px;margin:0 auto;padding:52px 40px;display:flex;flex-wrap:wrap;
  align-items:center;gap:26px}
.dr-homecta h2{flex:1 1 340px;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.026em;
  font-size:clamp(24px,3vw,33px);margin:0;color:#fff}
.dr-homecta p{margin:8px 0 0;color:#C7D2F0;font-size:15.5px;max-width:52ch}
.dr-homecta__act{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1000px){
  .dr-hero__inner,.dr-section__inner,.dr-homecta__inner{padding-inline:20px}
  .dr-promise{grid-template-columns:1fr 1fr}
  .dr-triage{grid-template-columns:1fr 1fr}
  .dr-why,.dr-spots{grid-template-columns:1fr}
  .dr-steps{grid-template-columns:1fr 1fr}
  .dr-spots__map{display:none}
}
@media (max-width:640px){
  .dr-promise,.dr-triage,.dr-steps{grid-template-columns:1fr}
  .dr-hero__act{flex-direction:column;align-items:stretch}
  .dr-btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dr-triage__card,.dr-triage__go,
  .dr-triage__card:hover{transform:none}
}


/* ── foto in de hero ─────────────────────────────────────── */
.dr-hero__bg{position:absolute;inset:0;z-index:0}
.dr-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  opacity:.62;filter:saturate(.86)}

/*
   Dezelfde kleuren als het blok eronder, maar met een doorzichtigheid die van
   links naar rechts wegloopt.

   Links dekt het bijna volledig - daar staat de tekst, en die moet leesbaar
   blijven ongeacht wat er toevallig op de foto staat. Rechts loopt het weg tot
   niets, zodat het beeld daar ademt.

   Het is dus één kleurverloop met een tweede verloop in de dekking, en niet
   vier verschillende kleuren zoals eerder.
*/
.dr-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%);
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.44) 66%,transparent 100%);
          mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.44) 66%,transparent 100%)}

/* Een tweede, verticale laag: donker aan de onderkant zodat de beloftekaarten
   loskomen van het beeld, en licht aan de bovenkant. */
.dr-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,40,.32) 0%,transparent 34%,rgba(10,14,40,.5) 100%)}

/* ── de bewegende stappen ────────────────────────────────── */
.dr-flow{background:linear-gradient(148deg,#0E1C6E 0%,var(--blue,#17289B) 54%,#1E33BC 100%);
  color:#fff;position:relative;overflow:hidden;padding-block:66px}
.dr-flow::after{content:"";position:absolute;right:-10%;bottom:-30%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.2),transparent 66%)}
.dr-flow__inner{max-width:1180px;margin:0 auto;padding-inline:40px;position:relative;z-index:2}
.dr-flow .dr-section__label{color:#9FB2E8}
.dr-flow .dr-section__title{color:#fff}
.dr-flow .dr-section__lead{color:#C7D2F0}

.dr-flow__stage{position:relative;min-height:320px;margin-top:14px}
.dr-flow__scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  gap:30px;align-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease}
.dr-flow__scene.is-on{opacity:1;visibility:visible}
.dr-flow__no{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.16em;
  color:var(--cyan,#3BA6D3);margin:0 0 16px}
.dr-flow__txt h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3.6vw,40px);line-height:1.08;margin:0;color:#fff;max-width:20ch}
.dr-flow__art{display:grid;place-items:center}
.dr-flow__art svg{width:100%;max-width:330px;height:auto;overflow:visible}

.dr-flow__art .d{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:640;stroke-dashoffset:640}
.dr-flow__scene.is-on .d{animation:drDraw .9s ease forwards}
.dr-flow__scene.is-on .d2{animation-delay:.2s}
.dr-flow__scene.is-on .d3{animation-delay:.4s}
.dr-flow__scene.is-on .d4{animation-delay:.6s}
@keyframes drDraw{to{stroke-dashoffset:0}}
.dr-flow__art .acc{stroke:var(--cyan,#3BA6D3)}
.dr-flow__art .fill{fill:var(--cyan,#3BA6D3);stroke:none;opacity:0}
.dr-flow__art .fill.ok{fill:#2FBF6B}
.dr-flow__scene.is-on .fill{animation:drPop .5s ease .8s forwards}
@keyframes drPop{to{opacity:1}}
.dr-flow__art .spin{transform-origin:center;animation:drSpin 4.5s linear infinite}
@keyframes drSpin{to{transform:rotate(360deg)}}

.dr-flow__bar{display:flex;gap:3px;margin-top:26px}
.dr-flow__bar button{flex:1;height:5px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.dr-flow__bar button i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dr-flow__bar button.is-done i{transform:scaleX(1)}
.dr-flow__bar button.is-now i{animation:drFill 6.5s linear forwards}
@keyframes drFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── waarschuwing bij het afleveren ──────────────────────── */
/*
   Het bruin was te braaf voor iets dat 'lees dit eerst' moet zeggen. Nu een
   verzadigd oranjerood met een gekleurde kopbalk erboven: dat springt eruit
   zonder op een foutmelding te lijken.

   Contrast: #7C2D12 op #FFF3EC haalt ruim 9:1, ver boven de norm van 4,5.
   De kopbalk is wit op #C2410C en haalt 5,9:1.
*/
.dr-notice{background:#FFF3EC;border:1px solid #F5B896;
  border-left:5px solid var(--alert,#C2410C);border-radius:0 14px 14px 0;
  margin-bottom:28px;overflow:hidden;box-shadow:0 3px 14px rgba(194,65,12,.1)}
.dr-notice__head{display:flex;gap:12px;align-items:center;background:var(--alert,#C2410C);
  color:#fff;padding:14px 24px}
.dr-notice__head b{text-shadow:0 1px 2px rgba(90,28,8,.4)}
.dr-notice__mark{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;
  color:var(--alert,#C2410C);display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;line-height:1}
.dr-notice__head b{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:#fff}
.dr-notice__body{padding:20px 24px 22px}
.dr-notice__body p{margin:0;font-size:16px;color:#7C2D12;line-height:1.62;max-width:72ch;font-weight:500}

.dr-dropflow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.dr-dropflow__step{background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:3px solid var(--blue,#17289B);border-radius:16px;padding:24px 26px}
.dr-dropflow__no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(23,40,155,.09);color:var(--blue,#17289B);font-family:'IBM Plex Mono',monospace;
  font-size:14px;margin-bottom:14px}
.dr-dropflow__step b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  margin-bottom:5px}
.dr-dropflow__step > span:last-child{font-size:14.5px;color:var(--muted,#5A607A);line-height:1.55}

.dr-btn--line{background:#fff;color:var(--blue,#17289B);border-color:var(--line,rgba(23,40,155,.13))}
.dr-btn--line:hover{background:var(--surface,#F4F6FB);border-color:var(--blue,#17289B);color:var(--blue,#17289B)}

/* ── ervaringen ──────────────────────────────────────────── */
.dr-refs{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start}
.dr-score{background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:3px solid var(--blue,#17289B);border-radius:18px;padding:28px}
.dr-score__val{font-family:'Archivo',sans-serif;font-weight:800;font-size:58px;line-height:1;
  letter-spacing:-.04em;color:var(--blue,#17289B)}
.dr-score__of{font-size:14px;color:var(--muted,#5A607A);margin-top:2px}
.dr-score__n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted,#5A607A);
  margin-top:10px;padding-bottom:18px;border-bottom:1px solid var(--line,rgba(23,40,155,.13))}
.dr-bars{display:grid;gap:8px;margin-top:18px}
.dr-bar{display:grid;grid-template-columns:30px 1fr 38px;gap:9px;align-items:center;font-size:12.5px}
.dr-bar__lbl{font-family:'IBM Plex Mono',monospace;color:var(--muted,#5A607A)}
.dr-bar__track{height:7px;border-radius:99px;background:var(--surface,#F4F6FB);overflow:hidden}
.dr-bar__fill{display:block;height:100%;background:var(--blue,#17289B);border-radius:99px}
.dr-bar__cnt{font-family:'IBM Plex Mono',monospace;color:var(--muted,#5A607A);text-align:right}
.dr-refs__note{font-size:13.5px;color:var(--muted,#5A607A);margin:18px 0 16px;line-height:1.5}

.dr-quotes{display:grid;gap:16px}
.dr-quote{margin:0;background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-left:3px solid var(--cyan,#3BA6D3);border-radius:0 16px 16px 0;padding:24px 28px}
.dr-quote blockquote{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink,#1A1D2E)}
.dr-quote figcaption{font-size:14px;color:var(--muted,#5A607A);display:flex;gap:10px;align-items:center}
.dr-quote__stars{color:#E8A317;letter-spacing:.08em}
.dr-quotes__empty{display:grid;place-items:center;padding:40px;background:#fff;
  border:1px dashed var(--line,rgba(23,40,155,.13));border-radius:16px}

@media (max-width:1000px){
  .dr-flow__inner{padding-inline:20px}
  .dr-flow__scene{grid-template-columns:1fr;gap:14px}
  .dr-flow__art{order:-1}
  .dr-flow__art svg{max-width:190px}
  .dr-flow__stage{min-height:420px}
  .dr-dropflow{grid-template-columns:1fr}
  .dr-refs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .dr-flow__art .d{stroke-dashoffset:0!important;animation:none!important}
  .dr-flow__art .fill{opacity:1!important;animation:none!important}
  .dr-flow__art .spin{animation:none!important}
  .dr-flow__bar button.is-now i{animation:none;transform:scaleX(1)}
  .dr-flow__scene{transition:none}
}


/* ── röntgeninspectie ────────────────────────────────────── */
.dr-xray__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center}
.dr-xray__art{background:#0A0E28;border-radius:18px;padding:26px;display:grid;place-items:center;
  position:relative;overflow:hidden}
.dr-xray__art::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,166,211,.85),transparent);
  animation:drScan 4.5s ease-in-out infinite}
@keyframes drScan{0%,100%{top:12%}50%{top:88%}}
.dr-xray__art svg{width:100%;max-width:300px;height:auto}
.dr-xray__art .x-board{fill:none;stroke:rgba(159,178,232,.28);stroke-width:1.6}
.dr-xray__art .x-chip{fill:rgba(159,178,232,.14);stroke:rgba(159,178,232,.6);stroke-width:1.6}
.dr-xray__art .x-pin{stroke:rgba(159,178,232,.5);stroke-width:1.6;stroke-linecap:round}
.dr-xray__art .x-flaw{fill:rgba(194,65,12,.85)}
.dr-xray__art .x-ring{fill:none;stroke:var(--alert,#C2410C);stroke-width:1.6;opacity:.75;
  animation:drRing 2.6s ease-out infinite}
@keyframes drRing{0%{r:14;opacity:.9}100%{r:34;opacity:0}}

.dr-xray__list{display:grid;gap:16px}
.dr-xray__item{border:1px solid var(--line,rgba(23,40,155,.13));
  border-left:3px solid var(--blue,#17289B);border-radius:0 14px 14px 0;padding:20px 24px;background:#fff}
.dr-xray__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  margin-bottom:5px}
.dr-xray__item span{font-size:15px;color:var(--muted,#5A607A);line-height:1.6}

.dr-xray__note{margin-top:26px;padding:20px 26px;border-radius:14px;
  background:rgba(23,40,155,.05);border-left:3px solid var(--blue,#17289B);
  font-size:16px;line-height:1.62;color:var(--ink,#1A1D2E);max-width:80ch}

@media (max-width:1000px){ .dr-xray__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .dr-xray__art::after,.dr-xray__art .x-ring,.dr-triage__flag::before{animation:none}
}


/* ── tweede mening ───────────────────────────────────────── */
/*
   Donker, met de kostenkaart apart gemarkeerd. Dat laatste is met opzet: die
   80 euro hoort niet weggemoffeld te worden onderaan, want dan voelt het
   achteraf als een verrassing.
*/
.dr-second{background:linear-gradient(150deg,#111436 0%,#0E1C6E 62%,#17289B 100%);
  color:#fff;position:relative;overflow:hidden;padding-block:62px}
.dr-second::after{content:"";position:absolute;left:-8%;bottom:-34%;width:46%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(59,166,211,.16),transparent 68%)}
.dr-second__inner{max-width:1180px;margin:0 auto;padding-inline:40px;position:relative;z-index:2;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.dr-second .dr-section__label{color:#9FB2E8}
.dr-second .dr-section__title{color:#fff;max-width:16ch}
.dr-second .dr-section__lead{color:#C7D2F0;margin-bottom:26px}

.dr-second__grid{display:grid;gap:14px}
.dr-second__item{border:1px solid rgba(255,255,255,.15);border-left:3px solid var(--cyan,#3BA6D3);
  border-radius:0 14px 14px 0;padding:20px 24px;background:rgba(255,255,255,.05)}
.dr-second__item b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  color:#fff;margin-bottom:5px}
.dr-second__item span{font-size:15px;color:#B9C4E0;line-height:1.6}

/* De kosten apart: eerlijk vooraan in plaats van in de kleine lettertjes. */
.dr-second__item--cost{border-left-color:#F0A87C;background:rgba(194,65,12,.16);
  border-color:rgba(240,168,124,.3)}
.dr-second__item--cost span{color:#FBD9C6}

@media (max-width:1000px){
  .dr-second__inner{grid-template-columns:1fr;padding-inline:20px}
}

/* ── datavernietiging op de homepage ─────────────────────── */
.dr-destruct__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.dr-destruct__punten{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dr-destruct__punten li{position:relative;padding:16px 20px 16px 48px;background:var(--surface);
  border-radius:12px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.dr-destruct__punten li::before{content:"";position:absolute;left:19px;top:21px;width:11px;height:11px;
  border-radius:50%;background:var(--cyan)}
.dr-destruct .dr-btn{margin-top:8px}

@media (max-width:900px){ .dr-destruct__grid{grid-template-columns:1fr;gap:26px} }

/* ── partnerlogo's ───────────────────────────────────────── */
/*
   Elk logo houdt zijn eigen breedte; de hoogte volgt de verhouding. Het vak
   eromheen houdt de rij recht, zodat een breed logo de andere niet omhoog
   duwt.
*/
.dr-partners{display:flex;flex-wrap:wrap;align-items:center;gap:34px 46px;margin-top:34px}
.dr-partners__vak{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.dr-partners picture{display:block;line-height:0}
.dr-partners img{height:auto;max-width:100%;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.dr-partners img:hover{filter:grayscale(0);opacity:1}

@media (max-width:700px){ .dr-partners{gap:26px 32px} }


/*
   De oude kopstrook uit style.css: 368px hoog met hero.jpg als achtergrond.
   Op de homepage neemt .dr-hero dat over, dus hier moet die weg - anders
   staat dezelfde foto twee keer onder elkaar.
*/
.dr-home header.normal,
.dr-home header.normal.regular,
.dr-home header.normal.webp,
.dr-home header.normal.avif{height:auto;min-height:0;background:#fff;border-bottom:none}

/*
   De vier beloftekaarten waren ongelijk hoog, waardoor de langste tekst
   werd afgeknipt door de overflow op de balk. Met align-items:stretch en
   height:100% vullen ze allemaal de hoogte van de langste - en dan valt er
   niets meer weg.
*/

/* De oude kopstrook uit style.css, 368px met hero.jpg. Op de homepage
   neemt .dr-hero dat over. */

.dr-home #elheader{height:auto;min-height:0;background:#fff;border-bottom:none}

/*
   De balk moet meegroeien met de langste kaart. overflow:hidden op de balk
   knipt anders af wat eruit steekt - en dat is precies wat er gebeurde bij
   "binnen twee werkdagen".
*/
.dr-promise{align-items:stretch;overflow:visible;border-radius:0}
.dr-promise__item{height:auto}
.dr-promise__item:first-child{border-radius:18px 0 0 18px}
.dr-promise__item:last-child{border-radius:0 18px 18px 0}

/*
   De preview begon met *{box-sizing:border-box}. Hier kan dat niet, want dat
   zou de hele site raken. Daarom alleen voor de dr-onderdelen: zonder dit
   telt de padding van elke kaart bij de kolombreedte op, en wringt de tekst
   in vier regels waar er twee horen te staan.
*/
[class^="dr-"],[class*=" dr-"],[class^="dr-"] *,[class*=" dr-"] *{box-sizing:border-box}

/*
   datarecup-modern.css regel 277 zet .dr-hero__inner op een tweekoloms
   raster. Dat is een overblijfsel van een eerdere opzet: de hero-inhoud
   hoort onder elkaar te staan, niet naast elkaar. Daardoor viel de
   beloftebalk in een halve kolom en wrong de tekst.
*/
.dr-hero__inner{display:block;grid-template-columns:none;gap:0}

/* De beloftebalk steekt 34px onder de hero uit. Niets in die keten mag
   dat afknippen. */
.dr-hero{overflow:visible}
.dr-hero__inner{overflow:visible}

/* ── vier klassen die nog niet bestonden ─────────────────── */
/* dr-btn--primary werd gebruikt maar nergens gedefinieerd: hij viel terug
   op de basisknop, wat toevallig goed oogde. */
.dr-btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.dr-btn--primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}

/* De linkerkolom van de tweede mening; het raster staat op de inner. */
.dr-second__lead{display:block}

/* De rontgensectie en de foto erin. */
.dr-xray{}
.dr-xray__photo{width:100%;border-radius:10px;overflow:hidden}
.dr-xray__photo img{width:100%;height:auto;display:block;filter:contrast(1.12) brightness(1.04)}

/* ── het sectielabel groter ───────────────────────────────────
   Stond op 11 a 12px: goed voor een nummer of een kort woord, te klein
   voor een naam die het blok aanduidt. "KMO's, bedrijven en overheden"
   is geen bijschrift maar de kop van die sectie.

   Achteraan toegevoegd zodat deze regel wint van de twee eerdere
   (home.css regel 76 en modern.css regel 268).
   ───────────────────────────────────────────────────────────── */
.dr-section__label{
    font-family: 'Archivo', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--blue, #17289B);
    margin: 0 0 10px;
}

/* Op een donkere achtergrond lichter, anders valt hij weg. */
.dr-section--ink .dr-section__label,
.dr-flow .dr-section__label,
.dr-second .dr-section__label{ color: #9FB2E8; }

/* Korte hero (alle pagina's behalve de homepage): geen beloftebalk eronder,
   dus alles wat buiten de hero valt (de decoratieve cirkel) wordt afgeknipt. */
.dr-hero.dr-hero--kort{overflow:hidden}
.dr-hero--kort .dr-hero__inner{overflow:visible}
.dr-hero .dr-hero__eyebrow{color:rgba(255,255,255,.92)}