/* ==========================================================================
   KIN MARKETING, company-surface layer. Cinematic where product is calm.
   Extends Kin Partners Core. Defines no new tokens and no new hues.
   ========================================================================== */
.m-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s7); height: 72px; padding: 0 var(--s6); background: color-mix(in oklab, var(--void) 82%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.m-nav a.m-link { font-size: 14px; font-weight: 600; color: color-mix(in oklab, var(--sand) 74%, var(--sage)); transition: color var(--d-ui) var(--e-out); }
.m-nav a.m-link:hover { color: var(--sand); }
.m-nav-mark { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.m-drop { display: grid; gap: 2px; padding: var(--s3); width: 330px; background: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--lift-hi); }
.m-drop a { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: start; padding: var(--s3); border-radius: var(--r-ctl); transition: background var(--d-ui) var(--e-out); }
.m-drop a:hover { background: var(--hover); }
.m-drop b { font-size: 14.5px; font-weight: 600; }
.m-drop span { font-size: 12.5px; color: var(--sage); line-height: 1.45; }

.m-sec { padding: var(--s9) var(--s6); }
.m-wrap { width: 100%; max-width: 1180px; margin: 0 auto; }
.m-eyebrow { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); }
.m-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--olive); }
.m-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.028em; margin: 0; }
.m-hero-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5.2vw, 78px); line-height: 0.96; letter-spacing: -0.035em; margin: 0; }
.m-sub { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; color: color-mix(in oklab, var(--sand) 78%, var(--sage)); max-width: 56ch; margin: 0; }
.m-card { display: grid; gap: var(--s4); padding: var(--s6); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); position: relative; overflow: hidden; transition: border-color var(--d-ui) var(--e-out), background var(--d-ui) var(--e-out); }
.m-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--bevel); }
.m-card:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--ink) 92%, var(--sand)); }
.m-card-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--void); border: 1px solid var(--line-strong); display: grid; place-items: center; }
.m-stage { background: var(--void); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; position: relative; }
.m-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px var(--s5); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--carbon) 70%, transparent); }
.m-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.24; letter-spacing: -0.02em; margin: 0; }
.m-stat { display: grid; gap: 6px; }
.m-stat b { font-family: var(--font-mono); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-stat span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.m-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.m-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: start; }
.m-step-n { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--sage); }
.m-step[data-on] .m-step-n { border-color: var(--olive-lift); color: var(--olive-lift); }
.m-social { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.m-social-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); }
.m-env { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.m-env canvas { display: block; }
.m-hero-layer { position: relative; z-index: 2; }
@media (max-width: 900px) { .m-sec { padding: var(--s8) var(--s5); } }