@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

.mk {
  --mk-white: #ffffff;
  --mk-fog: #f4f5f8;
  --mk-ink: #0b0b0f;
  --mk-muted: #5b6070;
  --mk-line: #e2e5ec;
  --mk-electric: #0b6bff;
  --mk-navy: #0a1f8f;
  --mk-volt: #d4ff32;
  --mk-sun: #ffc72c;
  --mk-display: "Poppins", system-ui, sans-serif;
  background: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-display);
  -webkit-font-smoothing: antialiased;
}
.mk ::selection { background: var(--mk-volt); color: var(--mk-ink); }

/* ---------- nav ---------- */
.mk-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem clamp(0.9rem, 3vw, 2.4rem);
  background: var(--mk-white); border-bottom: 1px solid var(--mk-line);
}
.mk-mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; }
.mk-mark-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 8px; background: var(--mk-ink);
}
.mk-mark-glyph { width: 30px; height: 30px; display: block; }
.mk-wordmark {
  font-weight: 800; font-size: 0.86rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mk-ink); line-height: 1;
}
.mk-wordmark small {
  display: block; font-size: 0.48rem; letter-spacing: 0.44em;
  color: var(--mk-muted); margin-top: 0.3rem; font-weight: 500;
}
.mk-nav-links { display: none; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); margin-left: auto; }
@media (min-width: 1040px) { .mk-nav-links { display: flex; } }
.mk-nav-link {
  font-weight: 600; font-size: 0.9rem; color: var(--mk-ink);
  text-decoration: none; padding: 0.3rem 0; position: relative; white-space: nowrap;
}
.mk-nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--mk-ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-nav-link:hover::after, .mk-nav-link[data-current="true"]::after { transform: scaleX(1); }
.mk-nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
@media (min-width: 1040px) { .mk-nav-right { margin-left: 1.4rem; } }
.mk-nav-tile {
  width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--mk-ink); color: var(--mk-white);
  border: 0; cursor: pointer; transition: background 0.25s ease;
}
.mk-nav-tile:hover { background: var(--mk-electric); }
.mk-nav-tile svg { width: 17px; height: 17px; }
.mk-nav-sheet {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.6rem clamp(0.9rem, 3vw, 2.4rem) 1rem;
  border-bottom: 1px solid var(--mk-line); background: var(--mk-white);
}
@media (min-width: 1040px) { .mk-nav-sheet { display: none; } }
.mk-nav-sheet .mk-nav-link { font-size: 1rem; padding: 0.55rem 0; }

/* ---------- CTA garments ---------- */
.mk-cta-solid {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--mk-display); font-weight: 700; font-size: 0.82rem;
  color: var(--mk-white); background: var(--mk-ink);
  padding: 0.72rem 1.25rem; transition: background 0.25s ease;
  white-space: nowrap;
}
.mk-cta-solid:hover { background: var(--mk-electric); }
.mk-cta-outline {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: 0.9rem; color: var(--mk-ink);
  background: transparent; border: 1px solid var(--mk-ink);
  padding: 1rem 1.9rem; position: relative; overflow: hidden;
}
.mk-cta-outline::before {
  content: ""; position: absolute; inset: 0; background: var(--mk-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-cta-outline span { position: relative; transition: color 0.3s ease; }
.mk-cta-outline:hover::before { transform: scaleX(1); }
.mk-cta-outline:hover span { color: var(--mk-white); }
.mk-cta-electric {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--mk-display); font-weight: 700; font-size: 0.95rem;
  color: var(--mk-white); background: var(--mk-electric);
  padding: 1rem 2.1rem; transition: background 0.25s ease, transform 0.25s ease;
}
.mk-cta-electric:hover { background: var(--mk-navy); transform: translateY(-2px); }
.mk-cta-electric:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---------- shared chrome ---------- */
.mk-section { padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 4vw, 3rem); position: relative; }
.mk-shell { max-width: 1240px; margin: 0 auto; }
.mk-eyebrow {
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--mk-electric); margin: 0 0 1.2rem;
}
.mk-h1 {
  font-weight: 800; font-size: clamp(2.8rem, 9vw, 6.4rem); line-height: 0.94;
  letter-spacing: -0.045em; margin: 0; color: var(--mk-ink);
}
.mk-h2 {
  font-weight: 800; font-size: clamp(2rem, 5.4vw, 4rem); line-height: 0.98;
  letter-spacing: -0.04em; margin: 0; color: var(--mk-ink);
}
.mk-h2-outline {
  font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1;
  letter-spacing: -0.035em; margin: 0; color: transparent;
  -webkit-text-stroke: 1.4px currentColor; paint-order: stroke fill;
}
.mk-lede { font-size: clamp(0.98rem, 1.4vw, 1.1rem); line-height: 1.7; color: var(--mk-muted); max-width: 52ch; margin: 1.4rem 0 0; }
.mk-p { font-size: 0.95rem; line-height: 1.7; color: var(--mk-muted); margin: 0; }
.mk-caps { font-weight: 500; font-size: 0.86rem; line-height: 1.75; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mk-muted); }

/* ---------- page hero (non-scrub pages) ---------- */
.mk-page-hero { padding-top: clamp(6rem, 9vw, 8rem); background: var(--mk-fog); border-bottom: 1px solid var(--mk-line); }
.mk-hero-film { position: relative; overflow: hidden; background: var(--mk-ink); }
.mk-hero-film video { width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; display: block; }
.mk-hero-film-copy {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.4rem, 4vw, 3.2rem);
  background: linear-gradient(to top, rgba(11, 11, 15, 0.82), rgba(11, 11, 15, 0));
}
.mk-hero-film-copy h1 { color: var(--mk-white); font-weight: 800; font-size: clamp(2rem, 6vw, 4.2rem); letter-spacing: -0.04em; line-height: 1; margin: 0; }
.mk-hero-film-copy p { color: var(--mk-white); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.74rem; font-weight: 600; margin: 0.9rem 0 0; opacity: 0.86; }

/* ---------- stat measure bar ---------- */
.mk-stats { background: var(--mk-fog); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-stat-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mk-stat-row { grid-template-columns: repeat(3, 1fr); } }
.mk-stat { padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1rem, 3vw, 2.2rem); }
@media (min-width: 760px) { .mk-stat + .mk-stat { border-left: 1px solid var(--mk-line); } }
@media (max-width: 759px) { .mk-stat + .mk-stat { border-top: 1px solid var(--mk-line); } }
.mk-stat-fig { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 6.6vw, 4.2rem); line-height: 1; letter-spacing: -0.05em; color: var(--mk-ink); margin: 0; }
.mk-stat-fig em { font-style: normal; color: var(--mk-electric); }
.mk-stat-label { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-muted); margin: 0.8rem 0 0; }
.mk-stat-bar { height: 3px; background: var(--mk-line); margin-top: 1.3rem; position: relative; overflow: hidden; }
.mk-stat-bar i { position: absolute; inset: 0 auto 0 0; background: var(--mk-electric); }

/* ---------- statement block ---------- */
.mk-statement-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 960px) { .mk-statement-grid { grid-template-columns: 7fr 4fr; } }
.mk-badge {
  display: block; border-radius: 20px; background: var(--mk-electric);
  color: var(--mk-white); padding: clamp(1.6rem, 3.4vw, 2.4rem);
}
.mk-badge strong { font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 0.95; letter-spacing: -0.05em; display: block; }
.mk-badge span { display: block; margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; }

/* ---------- numbered service grid on navy ---------- */
.mk-grid-navy { background: var(--mk-navy); color: var(--mk-white); }
.mk-grid-navy .mk-h2, .mk-grid-navy .mk-h2-outline { color: var(--mk-white); }
.mk-grid-navy .mk-eyebrow { color: var(--mk-volt); }
.mk-grid-navy .mk-lede { color: rgba(255, 255, 255, 0.76); }
.mk-numgrid { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); }
@media (min-width: 720px) { .mk-numgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mk-numgrid { grid-template-columns: repeat(3, 1fr); } }
.mk-numitem { display: block; text-decoration: none; color: inherit; }
.mk-numitem b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2.1rem; letter-spacing: -0.04em; color: var(--mk-white); }
.mk-numrule { height: 2px; background: rgba(255, 255, 255, 0.34); margin: 0.5rem 0 0.9rem; position: relative; overflow: hidden; }
.mk-numrule i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--mk-volt); transform: scaleX(0); transform-origin: left; transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk-numitem:hover .mk-numrule i { transform: scaleX(1); }
.mk-numitem h3 { font-weight: 700; font-size: 1.06rem; margin: 0 0 0.5rem; color: var(--mk-white); }
.mk-numitem p { font-size: 0.9rem; line-height: 1.65; color: rgba(255, 255, 255, 0.68); margin: 0; }

/* ---------- diagonal wedge + values row ---------- */
.mk-wedge { background: var(--mk-navy); height: clamp(90px, 12vw, 170px); clip-path: polygon(0 0, 100% 0, 100% 0, 50% 100%, 0 0); }
.mk-values { display: grid; gap: clamp(1.8rem, 4vw, 3rem); text-align: center; }
@media (min-width: 700px) { .mk-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mk-values { grid-template-columns: repeat(4, 1fr); } }
.mk-value h3 { font-weight: 800; font-size: 1.24rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--mk-ink); }

/* ---------- service rail (services page) ---------- */
.mk-rail-blue { background: var(--mk-electric); color: var(--mk-white); }
.mk-rail-blue .mk-h2, .mk-rail-blue .mk-h2-outline { color: var(--mk-white); }
.mk-rail-blue .mk-eyebrow { color: var(--mk-volt); }
.mk-svc { display: grid; gap: 1.2rem 2.4rem; padding: clamp(2rem, 4vw, 3.2rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) { .mk-svc { grid-template-columns: 5rem 1fr 1fr; align-items: start; } }
.mk-svc-no { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); }
.mk-svc p { font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.84); margin: 0; }
.mk-svc ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.mk-svc li { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); padding-left: 1.1rem; position: relative; margin-top: 0.5rem; }
.mk-svc li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 6px; height: 6px; background: var(--mk-volt); }

/* ---------- contact ---------- */
.mk-form { display: grid; gap: 1rem; max-width: 34rem; margin-top: 2rem; }
.mk-field { display: grid; gap: 0.45rem; }
.mk-field span { font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-field input, .mk-field textarea {
  font-family: var(--mk-display); font-size: 0.98rem; color: var(--mk-ink);
  background: var(--mk-white); border: 1px solid var(--mk-line);
  padding: 0.85rem 0.95rem; width: 100%;
}
.mk-field input:focus, .mk-field textarea:focus { outline: 2px solid var(--mk-electric); outline-offset: -2px; }
.mk-field textarea { min-height: 8rem; resize: vertical; }
.mk-form-note { font-size: 0.88rem; color: var(--mk-muted); margin: 0; }
.mk-form-ok { font-size: 0.95rem; font-weight: 600; color: var(--mk-electric); margin: 0; }
.mk-contact-cards { display: grid; gap: 1px; background: var(--mk-line); border: 1px solid var(--mk-line); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 800px) { .mk-contact-cards { grid-template-columns: repeat(3, 1fr); } }
.mk-contact-card { background: var(--mk-white); padding: clamp(1.4rem, 3vw, 2rem); }
.mk-contact-card h3 { font-weight: 700; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mk-muted); margin: 0 0 0.7rem; }
.mk-contact-card a, .mk-contact-card p { font-weight: 600; font-size: 1rem; color: var(--mk-ink); text-decoration: none; margin: 0; }
.mk-contact-card a:hover { color: var(--mk-electric); }

/* ---------- footer ---------- */
.mk-footer { border-top: 1px solid var(--mk-line); padding: 2.4rem clamp(1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; background: var(--mk-white); }
.mk-footer .mk-mark-chip { width: 34px; height: 34px; }
.mk-footer .mk-mark-glyph { width: 26px; height: 26px; }
.mk-footer p { font-size: 0.8rem; color: var(--mk-muted); margin: 0; }
.mk-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.mk-footer nav a { font-size: 0.8rem; font-weight: 600; color: var(--mk-ink); text-decoration: none; }
.mk-footer nav a:hover { color: var(--mk-electric); }

/* ---------- entrance motion ---------- */
.mk-rise { animation: mk-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes mk-rise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk-rise { animation: none; }
  .mk-cta-solid, .mk-cta-outline::before, .mk-cta-electric, .mk-nav-link::after,
  .mk-numrule i, .mk-nav-tile { transition: none; }
}

.mk-rail-blue .mk-lede { color: rgba(255, 255, 255, 0.82); }
.mk-svc-title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; margin: 0; }

.mk-footer-contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-left: auto; }
.mk-footer-contact a { font-size: 0.8rem; font-weight: 600; color: var(--mk-ink); text-decoration: none; }
.mk-footer-contact a:hover { color: var(--mk-electric); }

/* ================= scroll journey (static port of the scrub engine) ======= */
.mk-journey { position: relative; }
.mk-journey__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: var(--mk-ink);
}
.mk-journey__stage video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mk-journey__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, 0.2);
}
.mk-journey__progress i {
  display: block; height: 100%; width: 100%; background: var(--mk-electric);
  transform: scaleX(0); transform-origin: left;
}
.mk-journey__chapters { position: relative; margin-top: -100vh; }
.mk-chapter {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(4rem, 10vh, 8rem) clamp(1.1rem, 5vw, 4.5rem);
}
.mk-chapter[data-align="right"] { justify-content: flex-end; }
.mk-chapter__copy { max-width: 38rem; color: #fff; }
.mk-chapter__kicker {
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.18em; color: var(--mk-volt);
  margin: 0 0 0.9rem; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 3px 18px rgba(0,0,0,.7);
}
.mk-chapter__title {
  font-weight: 800; font-size: clamp(2.4rem, 6.6vw, 5rem); line-height: 0.95;
  letter-spacing: -0.045em; margin: 0; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 4px 26px rgba(0,0,0,.7), 0 12px 60px rgba(0,0,0,.5);
}
.mk-chapter__body {
  font-size: clamp(0.98rem, 1.45vw, 1.1rem); line-height: 1.68; max-width: 34rem;
  color: rgba(255,255,255,.93); margin: 1.4rem 0 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 3px 20px rgba(0,0,0,.7);
}
.mk-chapter__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.mk-chapter__tags span {
  font-size: 0.78rem; font-weight: 600; color: #fff; padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.1);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) {
  .mk-journey__stage { position: relative; height: auto; }
  .mk-journey__stage video { height: auto; }
  .mk-journey__chapters { margin-top: 0; }
  .mk-chapter { min-height: 0; background: var(--mk-ink); }
}