/* ============================================================================
   BPM marketing — loose / editorial layout.
   Deliberately spacious and distinct from the dense app-shell (data + Intel).
   Tokens (--red, --ink, --paper, --serif, --cjk, --sans, --mono…) come from app.css :root.
   ============================================================================ */

.mk{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.62;-webkit-font-smoothing:antialiased}
.mk a{color:inherit;text-decoration:none}
.mk ::selection{background:var(--red-tint)}

/* ---------- nav ---------- */
.mk-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:18px clamp(20px,5vw,68px);background:rgba(245,241,234,.8);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule)}
.mk-brand{display:inline-flex;align-items:center;gap:10px}
.mk-brand .wm{font-weight:800;font-size:23px;letter-spacing:-.04em;color:var(--ink);line-height:1}
.mk-brand .tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--red);display:inline-block;margin-left:-4px;transform:translateY(-6px)}
.mk-brand .sub{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-left:2px}
.mk-links{margin-left:auto;display:flex;align-items:center;gap:2px}
.mk-links a{font-size:13.5px;font-weight:500;color:var(--ink-3);padding:8px 15px;border-radius:999px;transition:color .15s}
.mk-links a:hover{color:var(--ink)}
.mk-links a.active{color:var(--ink)}
.mk-links a.cta{background:var(--red);color:var(--paper);padding:9px 18px;margin-left:8px}
.mk-links a.cta:hover{background:var(--red-hover)}
.mk-navtog{display:none;background:none;border:0;color:var(--ink);cursor:pointer;margin-left:auto}

/* ---------- layout ---------- */
.mk-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,68px)}
.mk-wrap.narrow{max-width:880px}
.mk-section{padding:clamp(60px,9vw,124px) 0}
.mk-section.tight{padding:clamp(40px,6vw,76px) 0}
.mk-hr{border-top:1px solid var(--rule)}
.mk-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 18px}

/* ---------- hero ---------- */
.mk-hero{padding:clamp(56px,8vw,116px) 0 clamp(40px,6vw,84px)}
.mk-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,80px);align-items:center}
.mk-h1{font-family:var(--cjk);font-weight:600;font-size:clamp(33px,4.8vw,58px);line-height:1.14;letter-spacing:-.012em;margin:0}
.mk-h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--red)}
.mk-sub{font-family:var(--serif);font-size:clamp(16px,1.7vw,20px);line-height:1.62;color:var(--ink-2);margin:24px 0 0;max-width:46ch}
.mk-kicker{margin-top:18px;font-size:13px;color:var(--ink-3);letter-spacing:.01em}
.mk-hero-actions{margin-top:34px;display:flex;gap:13px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.mk-btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;padding:13px 24px;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.mk-btn-primary{background:var(--red);color:var(--paper)}
.mk-btn-primary:hover{background:var(--red-hover)}
.mk-btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.mk-btn-ghost:hover{border-color:var(--ink);background:var(--ink-03)}
.mk-textlink{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--red)}
.mk-textlink:hover{gap:9px;transition:gap .15s}

/* ---------- type blocks ---------- */
.mk-h2{font-family:var(--cjk);font-weight:600;font-size:clamp(25px,3.2vw,38px);line-height:1.22;letter-spacing:-.006em;margin:0;max-width:24ch}
.mk-h2 .en{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.46em;color:var(--ink-4);margin-top:12px;letter-spacing:0}
.mk-lead{font-family:var(--serif);font-size:clamp(18px,2.1vw,24px);line-height:1.58;color:var(--ink-2);max-width:30ch;margin:0}
.mk-body-lg{font-size:clamp(16px,1.5vw,18px);line-height:1.74;color:var(--ink-2);max-width:60ch}
.mk-body-lg b{color:var(--ink);font-weight:600}
.mk-headrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:820px){.mk-headrow{grid-template-columns:1fr;gap:20px}}

/* ---------- feature trio ---------- */
.mk-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,54px);margin-top:clamp(44px,5vw,72px)}
.mk-feat .ic{height:44px;width:44px;color:var(--red)}
.mk-feat h3{font-family:var(--cjk);font-weight:600;font-size:19px;line-height:1.4;margin:18px 0 0}
.mk-feat .en{font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.12em;margin-top:5px}
.mk-feat p{font-size:14.5px;color:var(--ink-3);line-height:1.72;margin:11px 0 0;max-width:34ch}

/* ---------- split (text + visual) ---------- */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.mk-split.flip .mk-split-visual{order:-1}

/* ---------- serve cards ---------- */
.mk-serve{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);margin-top:clamp(40px,5vw,64px)}
.mk-serve-card{border:1px solid var(--rule);background:var(--bone);border-radius:4px;padding:30px 28px}
.mk-serve-card .en{font-size:11px;color:var(--red);text-transform:uppercase;letter-spacing:.12em}
.mk-serve-card h3{font-family:var(--cjk);font-weight:600;font-size:20px;margin:10px 0 0}
.mk-serve-card p{font-size:14.5px;color:var(--ink-3);line-height:1.72;margin:12px 0 0}

/* ---------- numbered steps (high-level "how we work") ---------- */
.mk-steps{margin-top:clamp(36px,4vw,52px)}
.mk-step{display:grid;grid-template-columns:88px 1fr;gap:clamp(20px,3vw,48px);padding:clamp(22px,2.8vw,34px) 0;align-items:baseline}
.mk-step + .mk-step{border-top:1px solid var(--rule)}
.mk-step .n{font-family:var(--serif);font-size:clamp(32px,3.6vw,46px);color:var(--rule-2);line-height:1}
.mk-step h3{font-family:var(--cjk);font-weight:600;font-size:clamp(19px,2vw,24px);margin:0}
.mk-step .en{font-size:12px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.1em;margin:6px 0 0}
.mk-step p{font-size:15px;color:var(--ink-3);line-height:1.74;margin:14px 0 0;max-width:62ch}

/* ---------- shift rows ---------- */
.mk-shifts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;margin-top:clamp(36px,4vw,52px)}
.mk-shift{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--rule);border-radius:6px;background:var(--bone);font-size:16px}
.mk-shift .from{color:var(--ink-4)}
.mk-shift .ar{color:var(--red);font-weight:600}
.mk-shift .to{color:var(--ink);font-weight:600;font-family:var(--cjk)}

/* ---------- pillars (platform) ---------- */
.mk-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,28px);margin-top:clamp(40px,5vw,60px)}
.mk-pillar{border:1px solid var(--rule);background:var(--bone);border-radius:4px;padding:30px 30px 28px}
.mk-pillar .ab{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:3px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;letter-spacing:.02em}
.mk-pillar h3{font-family:var(--cjk);font-weight:600;font-size:19px;margin:16px 0 0}
.mk-pillar .tl{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-4);margin-top:4px}
.mk-pillar ul{margin:16px 0 0;padding:0;list-style:none}
.mk-pillar li{font-size:14px;color:var(--ink-3);padding:7px 0 7px 18px;position:relative;line-height:1.5}
.mk-pillar li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:999px;background:var(--red)}

/* ---------- CTA band ---------- */
.mk-cta{background:var(--ink);color:var(--bone);border-radius:6px;padding:clamp(40px,6vw,76px) clamp(28px,5vw,72px);text-align:center}
.mk-cta .eb{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-3)}
.mk-cta h2{font-family:var(--cjk);font-weight:600;font-size:clamp(24px,3.2vw,38px);line-height:1.24;margin:16px auto 0;max-width:20ch;color:var(--bone)}
.mk-cta p{font-size:16px;color:var(--c-3);margin:16px auto 0;max-width:52ch;line-height:1.7}
.mk-cta .mk-btn-primary{margin-top:30px}

/* ---------- contact form ---------- */
.mk-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,88px);align-items:start}
.mk-form{display:grid;gap:18px}
.mk-field{display:grid;gap:7px}
.mk-field label{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.mk-field label .opt{color:var(--ink-4);font-weight:400}
.mk-field input,.mk-field select,.mk-field textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--bone);border:1px solid var(--rule-2);border-radius:3px;padding:12px 14px;width:100%;box-sizing:border-box}
.mk-field input:focus,.mk-field select:focus,.mk-field textarea:focus{outline:none;border-color:var(--red);background:var(--bone)}
.mk-field textarea{resize:vertical;min-height:130px;line-height:1.6}
.mk-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mk-form .mk-btn{justify-content:center;margin-top:4px}
.mk-form-note{font-size:12.5px;color:var(--ink-4);line-height:1.6;margin:2px 0 0}
.mk-cinfo{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,40px)}
.mk-cinfo .row{padding:16px 0;border-bottom:1px solid var(--rule)}
.mk-cinfo .row:first-child{padding-top:0}
.mk-cinfo .l{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4)}
.mk-cinfo .v{font-size:15.5px;color:var(--ink);margin-top:5px}
.mk-cinfo .v a{color:var(--red)}

/* ---------- visuals ---------- */
.mk-visual{width:100%;height:auto;display:block;border-radius:6px;overflow:hidden}
.mk-visual-frame{background:linear-gradient(160deg,var(--paper-2),var(--bone));border:1px solid var(--rule);border-radius:6px;padding:8px}

/* ---------- footer ---------- */
.mk-foot{border-top:1px solid var(--rule);background:var(--bone);padding:clamp(40px,5vw,64px) 0}
.mk-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
.mk-foot .col h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);margin:0 0 14px}
.mk-foot .col a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0}
.mk-foot .col a:hover{color:var(--red)}
.mk-foot .blurb{font-size:13.5px;color:var(--ink-3);line-height:1.7;margin:14px 0 0;max-width:38ch}
.mk-foot-bar{border-top:1px solid var(--rule);margin-top:36px;padding-top:22px;display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--ink-4)}
.mk-foot-bar .sep{margin-left:auto}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .mk-hero-grid,.mk-split{grid-template-columns:1fr;gap:36px}
  .mk-split.flip .mk-split-visual{order:0}
  .mk-feats,.mk-serve{grid-template-columns:1fr 1fr;gap:28px}
  .mk-pillars{grid-template-columns:1fr}
  .mk-contact{grid-template-columns:1fr;gap:40px}
  .mk-cinfo{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:24px}
  .mk-foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .mk-links{display:none}
  .mk-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bone);border-bottom:1px solid var(--rule);padding:10px 20px 16px;gap:2px}
  .mk-links.open a{padding:11px 8px}
  .mk-navtog{display:inline-flex}
  .mk-feats,.mk-serve,.mk-shifts,.mk-form-row,.mk-foot-grid{grid-template-columns:1fr}
  .mk-step{grid-template-columns:1fr;gap:8px}
  .mk-step .n{font-size:30px}
}

/* ============================================================================
   Loose body INSIDE the app-shell content column.
   The chrome (topbar + left sidebar) stays identical to the Intel/data pages;
   only the content in <main class="app-main mkt"> is loosened.
   ============================================================================ */
.app-main.mkt{padding:0}
/* fill the whole content column (no narrow centered cap), with generous padding */
.app-main.mkt .mk-wrap{max-width:none;padding:0 clamp(28px,4.5vw,88px)}
.app-main.mkt .mk-section{padding:clamp(52px,6.5vw,100px) 0}
.app-main.mkt .mk-section.mk-hero{padding:clamp(34px,5vw,64px) 0 clamp(28px,4vw,52px)}
/* open up the layout so it breathes across the width */
.app-main.mkt .mk-hero-grid{gap:clamp(40px,5vw,108px)}
.app-main.mkt .mk-headrow{max-width:1200px;gap:clamp(32px,4vw,76px)}
.app-main.mkt .mk-feats{gap:clamp(32px,3.4vw,72px)}
.app-main.mkt .mk-serve{gap:clamp(22px,2.2vw,42px)}
.app-main.mkt .mk-pillars{gap:clamp(22px,2.4vw,38px)}
.app-main.mkt .mk-h1{font-size:clamp(32px,4.2vw,54px)}
/* keep text columns readable even when the container is full-width */
.app-main.mkt .mk-body-lg{max-width:64ch}
.app-main.mkt .mk-lead{max-width:34ch}
.app-main.mkt .mk-step p{max-width:82ch}
/* let the hero headline + sub use the wider left column comfortably */
.app-main.mkt .mk-sub{max-width:52ch}
/* serve-card icons + hover polish across cards */
.mk-serve-card .ic{color:var(--red);height:34px;margin-bottom:13px}
.mk-serve-card .ic svg{width:34px;height:34px}
.mk-serve-card{transition:border-color .16s,transform .16s,box-shadow .16s}
.mk-serve-card:hover{border-color:var(--rule-2);transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(11,11,12,.3)}
.mk-pillar{transition:border-color .16s,transform .16s}
.mk-pillar:hover{border-color:var(--rule-2);transform:translateY(-2px)}
.mk-shift{transition:border-color .16s,transform .16s}
.mk-shift:hover{border-color:var(--rule-2);transform:translateY(-2px)}
/* side-by-side: list + visual, without cramping the list */
.app-main.mkt .mk-split{align-items:center}
.app-main.mkt .mk-split .mk-steps{margin-top:0}
.app-main.mkt .mk-split .mk-step{grid-template-columns:52px 1fr;gap:18px;padding:15px 0}
.app-main.mkt .mk-split .mk-step .n{font-size:28px}
.app-main.mkt .mk-split .mk-step p{max-width:none}
.app-main.mkt .mk-split .mk-shifts{grid-template-columns:1fr;gap:12px;margin-top:0}