/* ============================================================
   Meer rendement — "Wat we doen": de klantreis (.mrk)
   ------------------------------------------------------------
   Bron: Claude Design-export "Meer rendement (4).html". Daar staan
   twee CSS-blokken voor deze sectie: eerst de basis (tijdlijn op een
   blauwe band met stippenpatroon), daarna een tweede blok dat de
   tijdlijn in één wit canvas zet en het stippenpatroon van de sectie
   naar dat canvas verplaatst. Hieronder staat het EINDRESULTAAT van
   die twee lagen, niet allebei de lagen achter elkaar.

   AFWIJKING VAN DE BRON, BEWUST: de bron zet de sectie op #EEF1F8.
   Op deze pagina is dat de beurt van de witte band (de reeks is
   hero wit → "waar het rendement ontstaat" blauw → hier wit →
   aanpak blauw → …, gelijk aan /leadgeneratie/). Het witte canvas
   zou op een witte band zijn omlijning verliezen, dus de zachte
   blauw/magenta gloed uit de bron-achtergrond blijft wél staan —
   die is licht genoeg om als witte band te lezen en geeft het
   canvas net genoeg ondergrond om op te liggen.

   HET RASTER IS VAST: 20 kolommen, kaart 1..5 op eigen posities,
   en de streepjes/bolletjes op de rail staan op percentages die
   onder die kaarten uitkomen. Verplaats je een kaart, dan moet de
   tijdlijn mee. Zie ook de kop van class-mr-journey-widget.php.
   ============================================================ */

.mrk {
  position: relative; overflow: hidden;
  padding: var(--space-9) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(0,122,255,.05), transparent 62%),
    radial-gradient(720px 340px at 0% 100%, rgba(170,2,142,.045), transparent 62%),
    var(--c-white);
}
.mrk > .container { position: relative; z-index: 1; width: 100%; max-width: var(--container, 1520px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

.mrk-head { max-width: 780px; margin: 0 auto var(--space-7); text-align: center; }
.mrk-head .eyebrow { justify-content: center; margin-bottom: 14px; }
.mrk-head .au-h2 { margin: 0 0 18px; }
.mrk-head .au-lead { font-size: 17px; color: var(--c-text-muted); margin: 0 auto; max-width: 48em; line-height: 1.6; }

/* ---- het canvas waarin de hele klantreis staat ---------------- */
.mrk-canvas {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1200px; margin: 0 auto;
  background: var(--c-white);
  border: 1px solid #E5E0F5;
  border-radius: 26px;
  padding: 48px 40px;
  box-shadow:
    0 1.5px 4px rgba(20,20,100,.05),
    0 22px 54px -18px rgba(20,20,100,.10),
    0 34px 90px -34px rgba(168,2,144,.14);
}
/* stippenpatroon alleen binnen het canvas, uitdovend naar de rand */
.mrk-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(20,20,100,.055) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 40%, transparent 82%);
          mask-image: radial-gradient(circle at 50% 42%, #000 40%, transparent 82%);
}
/* twee nauwelijks zichtbare fasezones: links prospect (blauw), rechts klant
   (paars); de overgang ligt onder de scharnier-pil (~35%) */
.mrk-canvas::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,122,255,.05) 0%, rgba(0,122,255,.035) 28%,
    rgba(168,2,144,.028) 42%, rgba(168,2,144,.05) 100%);
}
.mrk-canvas-head { text-align: center; margin-bottom: 36px; }
.mrk-canvas-title {
  margin: 0 0 4px; font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: 20px; letter-spacing: -0.015em; color: var(--c-navy);
}
.mrk-canvas-sub { margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--c-text-soft); }

.mrk-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: auto auto 96px auto auto;
}

/* ---- kaarten -------------------------------------------------- */
.mrk-card {
  margin: 0 8px;
  background: var(--c-white);
  border: 1px solid #E7EAF3;
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.mrk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.mrk-card h3 {
  font-family: var(--font-head); font-size: 17px; font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; line-height: 1.35; color: var(--c-navy); margin: 0 0 8px;
}
.mrk-card p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }

.mrk-c1 { grid-column: 1 / 6;   grid-row: 2; align-self: end; }
.mrk-c2 { grid-column: 10 / 15; grid-row: 2; align-self: end; }
.mrk-c3 { grid-column: 16 / 21; grid-row: 2; align-self: end; }
.mrk-c4 { grid-column: 2 / 10;  grid-row: 4; align-self: start; }
.mrk-c5 { grid-column: 11 / 19; grid-row: 4; align-self: start; }

/* ---- scharnier: waar AI stopt en het team overneemt ----------- */
.mrk-hinge { grid-column: 6 / 10; grid-row: 2; align-self: end; display: flex; justify-content: center; min-width: 0; }
.mrk-hinge-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--c-navy); color: #fff; border-radius: 16px; padding: 12px 18px;
  width: max-content; max-width: 250px;
  font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.35;
  box-shadow: 0 6px 18px rgba(20,20,100,.18);
}
.mrk-hinge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-success); flex: none; }

/* ---- fasekoppen ----------------------------------------------- */
.mrk-phase { text-align: center; }
.mrk-phase--2 { grid-column: 10 / 21; grid-row: 1; margin: 0 8px 20px; }
.mrk-phase--1 { grid-column: 2 / 10;  grid-row: 5; margin: 20px 8px 0; }
.mrk-phase-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.mrk-phase-badge {
  display: inline-flex; background: var(--gradient-brand); color: #fff; border-radius: var(--radius-pill);
  padding: 4px 11px; font-family: var(--font-head); font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase;
}
.mrk-phase-name { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-navy); }
.mrk-phase-p { margin: 0 auto; max-width: 520px; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--c-text-soft); }
.mrk-phase--2 .mrk-phase-p { margin-bottom: 12px; }

.mrk-bracket { display: flex; }
.mrk-bracket i { width: 1px; height: 9px; background: #C9D0E0; }
.mrk-bracket b { flex: 1; height: 1px; background: #C9D0E0; }
.mrk-bracket--down { align-items: flex-start; }
.mrk-bracket--up { align-items: flex-end; margin-bottom: 12px; }

/* ---- de tijdlijn zelf ----------------------------------------- */
.mrk-line { grid-column: 1 / 21; grid-row: 3; position: relative; height: 96px; }
.mrk-rail { position: absolute; left: 0; right: 0; top: 46px; height: 4px; border-radius: var(--radius-pill); background: var(--gradient-brand); }
.mrk-tick { position: absolute; left: calc(var(--x) - 1px); top: var(--top); height: var(--h); width: 2px; background: rgba(20,20,100,.18); }
/* de ring om dot en node heeft de kleur van het CANVAS, niet van de sectie */
.mrk-dot {
  position: absolute; left: calc(var(--x) - 8px); top: 40px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gradient-brand); box-shadow: 0 0 0 5px #fff;
}
.mrk-node {
  position: absolute; left: calc(var(--x) - 19px); top: 29px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-navy); box-sizing: border-box;
  display: grid; place-items: center; box-shadow: 0 0 0 5px #fff;
}
.mrk-node i { width: 11px; height: 11px; border-radius: 50%; background: var(--c-success); }

/* ---- afsluiter onder het canvas -------------------------------- */
.mrk-slot { margin-top: 44px; text-align: center; }
/* `.mrk-slot p` hieronder is 0,1,1 en zou deze kop op 15px zetten; daarom de
   sectie-prefix erbij (0,2,0). Zelfde volgorde-val als in de bron. */
.mrk-slot .mrk-slot-title {
  font-family: var(--font-head); font-weight: var(--fw-semibold); color: var(--c-navy);
  font-size: clamp(19px, 2vw, 24px); line-height: 1.3; letter-spacing: -0.015em;
  max-width: 26em; margin: 0 auto 10px; text-wrap: balance;
}
.mrk-slot p { margin: 0 auto; max-width: 640px; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--c-text-muted); text-wrap: balance; }
.mrk-slot-actions { margin-top: 28px; display: flex; justify-content: center; }

/* ---- gestapeld: raster wordt een kolom, tijdlijn verdwijnt ----- */
@media (max-width: 1080px) {
  .mrk-canvas { padding: 32px 24px; }
  .mrk-grid { display: flex; flex-direction: column; gap: 16px; }
  .mrk-line, .mrk-bracket { display: none; }
  .mrk-card { margin: 0; }
  .mrk-hinge { margin: 8px auto; }
  .mrk-phase { margin: 8px 0; text-align: left; }
  .mrk-phase-p { margin-left: 0; }
  .mrk-card[data-mo="2"] { order: 2; } .mrk-card[data-mo="3"] { order: 3; }
  .mrk-hinge[data-mo="4"] { order: 4; }
  .mrk-phase[data-mo="1"] { order: 1; } .mrk-phase[data-mo="5"] { order: 5; }
  .mrk-card[data-mo="6"] { order: 6; } .mrk-card[data-mo="7"] { order: 7; } .mrk-card[data-mo="8"] { order: 8; }
}
@media (max-width: 768px) { .mrk { padding: var(--space-7) 0; } }
@media (max-width: 520px) { .mrk { padding: var(--space-6) 0; } .mrk-canvas { padding: 28px 18px; border-radius: 20px; } }

/* ============================================================
   Elementor-context + HARDENING tegen theme-resets.
   ============================================================ */
.elementor-widget-bconnect_mr_journey { margin: 0 !important; }
.elementor-widget-bconnect_mr_journey .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
.elementor-widget-bconnect_mr_journey .mrk-phase-badge,
.elementor-widget-bconnect_mr_journey .mrk-rail,
.elementor-widget-bconnect_mr_journey .mrk-dot {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
}
.elementor-widget-bconnect_mr_journey .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_journey .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}