/* Marketingcirkel: gedeeld blok, gemount door /assets/marketingcirkel.js.
   Staat los van Tailwind en van de pagina-CSS, zodat het op elke pagina hetzelfde oogt. */
.mk-section{--mk-ink:#0a0a0a;--mk-honey:#f9a125;--mk-honey-dark:#d87d00;--mk-cream:#fff8ec;position:relative;overflow:hidden;background:var(--mk-ink);color:#fff;padding:5rem 0}
.mk-comb{position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path fill='none' stroke='%23f9a125' stroke-width='1.2' d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z'/></svg>");background-size:56px 64px}
.mk-inner{position:relative;max-width:1240px;margin:0 auto;padding:0 1.25rem}
.mk-display{font-family:'Cooper BT','Fraunces',Georgia,serif;letter-spacing:-0.01em;font-weight:700}

.mk-intro{max-width:720px;margin:0 auto 3rem;text-align:center}
.mk-eyebrow{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 0 1rem}
.mk-eyebrow-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.2em;color:var(--mk-honey)}
.mk-title{font-size:36px;line-height:1.05;margin:0;text-wrap:balance}
.mk-title em{display:block;font-style:italic;color:var(--mk-honey)}
.mk-lead{color:rgba(255,255,255,.75);font-size:16px;line-height:1.625;margin:1.25rem 0 0}

.mk-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.75rem}
.mk-step{position:relative;background:var(--mk-cream);color:var(--mk-ink);border-radius:20px;padding:1.4rem 1.4rem 1.5rem}
.mk-step:not(:last-of-type)::after{content:"";position:absolute;left:50%;bottom:-2.15rem;width:14px;height:14px;margin-left:-7px;border-right:3px solid var(--mk-honey);border-bottom:3px solid var(--mk-honey);transform:rotate(45deg)}
.mk-step-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.mk-hex{width:40px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--mk-honey);color:#1a1200;font-size:1.05rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mk-step h3{font-size:20px;line-height:1.25;margin:0}
.mk-step p{color:#4f473d;font-size:14.5px;line-height:1.625;margin:0}
.mk-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.mk-chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;line-height:1;padding:.42rem .6rem;border-radius:9999px;background:#fff;border:1px solid #efe4cf;color:#6b4300}

.mk-ring{display:none}
.mk-orbit{transform-origin:220px 220px;animation:mk-orbit 24s linear infinite}
@keyframes mk-orbit{to{transform:rotate(360deg)}}
.mk-loop{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1.5rem 0 0;color:var(--mk-honey);font-size:14.5px;font-weight:500}

.mk-outro{margin-top:3rem;text-align:center}
.mk-outro p{color:rgba(255,255,255,.75);font-size:16px;line-height:1.625;max-width:56ch;margin:0 auto 1.75rem}
.mk-btn{display:inline-flex;align-items:center;gap:.6rem;padding:1.05rem 1.35rem;border-radius:9999px;font-size:1rem;font-weight:600;background:var(--mk-honey);color:#1a1200;box-shadow:0 6px 0 0 var(--mk-honey-dark);text-decoration:none;transition:all .18s ease}
.mk-btn:hover{transform:translateY(-2px);background:var(--mk-honey-dark);color:#fff;box-shadow:0 3px 0 0 #1a1200}

.mk-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.mk-reveal.mk-in{opacity:1;transform:none}

.mk-fallback{max-width:720px;margin:0 auto;padding:3rem 1.25rem;line-height:1.625}

/* Ruimte vasthouden tot de JS gemount heeft, zodat de pagina niet verspringt */
@media (scripting:enabled){
  [data-marketingcirkel]:not([data-mk-mounted]){min-height:1800px;background:#0a0a0a}
}

@media (min-width:640px){
  .mk-btn{padding:1.15rem 2rem;font-size:1.125rem}
}
@media (min-width:768px){
  .mk-section{padding:7rem 0}
  .mk-inner{padding:0 2rem}
  .mk-title{font-size:56px}
  .mk-lead{font-size:17px}
  .mk-step h3{font-size:22px}
}
@media (min-width:1024px){
  .mk-intro{margin-bottom:3.5rem}
  .mk-circle{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,36vw,460px) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:1.5rem 1.75rem}
  .mk-steps{display:contents}
  .mk-step::after{display:none}
  .mk-step:nth-of-type(1){grid-area:1/1}
  .mk-step:nth-of-type(2){grid-area:1/3}
  .mk-step:nth-of-type(3){grid-area:2/3}
  .mk-step:nth-of-type(4){grid-area:2/1}
  .mk-ring{display:block;grid-area:1/2/3/3;align-self:center;width:100%;height:auto;overflow:visible}
  .mk-loop{display:none}
  .mk-outro{margin-top:3.5rem}
}
@media (min-width:1024px) and (max-width:1199px){.mk-step h3{font-size:18px}}
@media (min-width:1024px) and (scripting:enabled){
  [data-marketingcirkel]:not([data-mk-mounted]){min-height:1300px}
}
@media (prefers-reduced-motion:reduce){
  .mk-orbit{animation:none;transform:rotate(-90deg)}
  .mk-reveal{opacity:1;transform:none;transition:none}
}