/* ==========================================================
   Website mockups + device frames
   All sizes derive from --px (1 design pixel at a 1200px-wide
   desktop, or at a 390px-wide phone for .mk--m), so a mockup
   scales perfectly at any display size.
   ========================================================== */

.mkc { container-type: inline-size; width: 100%; }
.mk {
  --k: 1;
  --px: calc(0.08333cqw * var(--k));
  --r: calc(var(--px) * 6);
  position: relative; overflow: hidden; isolation: isolate; pointer-events: none; user-select: none;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: calc(var(--px) * 15); line-height: 1.4;
  text-align: left;
}
.mk--serif { --r: 999px; font-family: var(--font-sans); }
.mk--serif .mk-h1, .mk--serif .mk-h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mk--m { --k: 3.077; }
.mk * { box-sizing: border-box; }
.mk .mk-h1, .mk .mk-h2, .mk .mk-h3, .mk p, .mk ul { margin: 0; padding: 0; }
.mk ul { list-style: none; }
.mk img { display: block; max-width: none; }

/* ---------- nav ---------- */
.mk-nav {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--px) * 22) calc(var(--px) * 48); gap: calc(var(--px) * 24);
}
.mk--overlay .mk-nav { position: absolute; inset: 0 0 auto 0; }
.mk-logo { font-weight: 800; font-size: calc(var(--px) * 21); letter-spacing: -0.02em; white-space: nowrap; }
.mk--serif .mk-logo { font-family: var(--font-serif); font-weight: 400; font-size: calc(var(--px) * 30); letter-spacing: 0.01em; }
.mk-links { display: flex; gap: calc(var(--px) * 34); font-size: calc(var(--px) * 14); font-weight: 500; opacity: 0.86; margin-left: auto; margin-right: calc(var(--px) * 12); }
.mk-navright { display: flex; align-items: center; gap: calc(var(--px) * 12); }
.mk-burger { display: none; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--ac); color: var(--on); border-radius: var(--r); font-weight: 700;
  padding: calc(var(--px) * 15) calc(var(--px) * 26); font-size: calc(var(--px) * 15);
}
.mk-btn--sm { padding: calc(var(--px) * 10) calc(var(--px) * 18); font-size: calc(var(--px) * 13.5); }
.mk-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 calc(var(--px) * 1.5) color-mix(in srgb, var(--ink) 38%, transparent); }
.mk-btn--inv { background: var(--on); color: var(--ac); }

/* ---------- hero (shared) ---------- */
.mk-hero { position: relative; min-height: calc(var(--px) * 742); display: flex; align-items: center; }
.mk-hero__body { position: relative; z-index: 3; padding: 0 calc(var(--px) * 48); }
.mk-eyebrow { font-size: calc(var(--px) * 13); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac); margin-bottom: calc(var(--px) * 20); }
.mk-hero .mk-h1 { font-weight: 800; font-size: calc(var(--px) * 78); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.mk-sub { margin-top: calc(var(--px) * 24); font-size: calc(var(--px) * 18.5); line-height: 1.5; color: var(--muted); max-width: 30em; }
.mk-actions { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 12); margin-top: calc(var(--px) * 34); }

/* overlay hero (full-bleed image) */
.mk--overlay .mk-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.mk--overlay .mk-hero__media img { position: absolute; top: 0; left: 18%; width: 100%; height: 100%; object-fit: cover; }
.mk--overlay .mk-hero__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--bg) 22%, color-mix(in srgb, var(--bg) 78%, transparent) 44%, color-mix(in srgb, var(--bg) 8%, transparent) 78%); }
.mk--overlay .mk-hero__body { max-width: calc(var(--px) * 760); padding-top: calc(var(--px) * 56); }
.mk--overlay .mk-hero .mk-h1 { text-transform: none; }

/* split hero */
.mk--split .mk-hero { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: calc(var(--px) * 40); padding-right: calc(var(--px) * 48); }
.mk--split .mk-hero__body { padding-right: 0; order: 1; }
.mk--split .mk-hero__media { order: 2; position: relative; height: calc(var(--px) * 590); border-radius: calc(var(--px) * 10); overflow: hidden; }
.mk--split .mk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mk--split .mk-hero .mk-h1 { font-size: calc(var(--px) * 68); }
.mk--split .mk-hero__shade { display: none; }

/* arch hero */
.mk--arch .mk-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: calc(var(--px) * 30); padding-right: calc(var(--px) * 64); }
.mk--arch .mk-hero__body { padding-right: 0; }
.mk--arch .mk-hero__media { position: relative; height: calc(var(--px) * 640); order: 2; border-radius: 999px 999px 0 0; overflow: hidden; margin-top: calc(var(--px) * 30); }
.mk--arch .mk-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; transform: scale(1.18); }
.mk--arch .mk-hero .mk-h1 { font-size: calc(var(--px) * 118); line-height: 0.92; }
.mk--arch .mk-eyebrow { color: var(--muted); letter-spacing: 0.22em; }
.mk--arch .mk-hero__shade { display: none; }
.mk--arch .mk-btn--ghost { color: var(--ink); }

.mk-float {
  position: absolute; z-index: 4; left: calc(var(--px) * 22); bottom: calc(var(--px) * 22);
  background: var(--panel); color: var(--ink); padding: calc(var(--px) * 14) calc(var(--px) * 18);
  border-radius: calc(var(--px) * 8); box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 30) rgba(0, 0, 0, 0.18);
  display: grid; gap: calc(var(--px) * 3); font-size: calc(var(--px) * 12.5);
}
.mk-float b { font-size: calc(var(--px) * 16); }
.mk-float span { color: var(--muted); }
.mk--arch .mk-float { left: 50%; transform: translateX(-50%); bottom: calc(var(--px) * 40); border-radius: 999px; text-align: center; padding: calc(var(--px) * 12) calc(var(--px) * 22); }

/* ---------- full-page sections ---------- */
.mk-strip { display: flex; justify-content: space-between; gap: calc(var(--px) * 16); padding: calc(var(--px) * 24) calc(var(--px) * 48); border-block: 1px solid var(--line); font-size: calc(var(--px) * 13); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk-services { padding: calc(var(--px) * 110) calc(var(--px) * 48) calc(var(--px) * 70); }
.mk-services .mk-h2 { font-size: calc(var(--px) * 52); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; max-width: 14em; text-wrap: balance; }
.mk-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 32); margin-top: calc(var(--px) * 56); }
.mk-svc > div { border-top: 1px solid var(--line); padding-top: calc(var(--px) * 20); }
.mk-svc small { font-size: calc(var(--px) * 12); color: var(--ac); font-weight: 700; letter-spacing: 0.1em; }
.mk-svc .mk-h3 { font-size: calc(var(--px) * 24); margin-top: calc(var(--px) * 22); letter-spacing: -0.02em; }
.mk--serif .mk-svc .mk-h3 { font-family: var(--font-serif); font-weight: 400; font-size: calc(var(--px) * 30); }
.mk-svc p { margin-top: calc(var(--px) * 10); color: var(--muted); font-size: calc(var(--px) * 15.5); line-height: 1.55; }
.mk-about { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 64); align-items: center; padding: calc(var(--px) * 70) calc(var(--px) * 48) calc(var(--px) * 110); }
.mk-about__img { aspect-ratio: 5 / 4; overflow: hidden; border-radius: calc(var(--px) * 8); }
.mk--arch .mk-about__img { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; max-width: 90%; }
.mk-about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.mk-about .mk-h2 { font-size: calc(var(--px) * 46); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
.mk-about p { margin-top: calc(var(--px) * 18); color: var(--muted); font-size: calc(var(--px) * 17); line-height: 1.55; max-width: 28em; }
.mk-about ul { margin-top: calc(var(--px) * 26); }
.mk-about li { padding: calc(var(--px) * 13) 0; border-top: 1px solid var(--line); font-weight: 600; font-size: calc(var(--px) * 15.5); }
.mk-about li:last-child { border-bottom: 1px solid var(--line); }
.mk-cta { background: var(--ac); color: var(--on); padding: calc(var(--px) * 90) calc(var(--px) * 48); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--px) * 32); }
.mk-cta .mk-h2 { font-size: calc(var(--px) * 54); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; max-width: 13em; text-wrap: balance; }
.mk-foot { display: flex; justify-content: space-between; gap: calc(var(--px) * 20); padding: calc(var(--px) * 34) calc(var(--px) * 48); font-size: calc(var(--px) * 13); color: var(--muted); border-top: 1px solid var(--line); }
.mk-foot b { color: var(--ink); }

/* ---------- mobile layout (designed at 390px) ---------- */
.mk--m { font-size: calc(var(--px) * 15); }
.mk--m .mk-nav { padding: calc(var(--px) * 14) calc(var(--px) * 18); }
.mk--m .mk-links { display: none; }
.mk--m .mk-logo { font-size: calc(var(--px) * 18); }
.mk--serif.mk--m .mk-logo { font-size: calc(var(--px) * 26); }
.mk--m .mk-btn--sm { padding: calc(var(--px) * 8) calc(var(--px) * 12); font-size: calc(var(--px) * 12); }
.mk--m .mk-burger { display: grid; gap: calc(var(--px) * 5); width: calc(var(--px) * 22); }
.mk--m .mk-burger i { display: block; height: calc(var(--px) * 2); background: var(--ink); border-radius: 2px; }
.mk--m .mk-hero { min-height: calc(var(--px) * 760); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 0; gap: 0; }
.mk--m .mk-hero__body { padding: 0 calc(var(--px) * 22) calc(var(--px) * 30); max-width: none; }
.mk--m .mk-hero .mk-h1 { font-size: calc(var(--px) * 41); line-height: 1; letter-spacing: -0.03em; }
.mk--m .mk-sub { font-size: calc(var(--px) * 15.5); margin-top: calc(var(--px) * 14); }
.mk--m .mk-eyebrow { font-size: calc(var(--px) * 11); margin-bottom: calc(var(--px) * 12); }
.mk--m .mk-actions { margin-top: calc(var(--px) * 22); }
.mk--m .mk-btn { padding: calc(var(--px) * 14) calc(var(--px) * 20); font-size: calc(var(--px) * 14.5); }
.mk--m .mk-btn--sm { padding: calc(var(--px) * 8) calc(var(--px) * 12); font-size: calc(var(--px) * 12); }
.mk--m.mk--overlay .mk-hero__media { inset: 0 0 auto 0; height: calc(var(--px) * 470); }
.mk--m.mk--overlay .mk-hero__media img { left: -18%; width: 150%; }
.mk--m.mk--overlay .mk-hero__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0, transparent 22%, var(--bg) 64%); }
.mk--m.mk--split .mk-hero__body { order: 2; padding-top: calc(var(--px) * 10); }
.mk--m.mk--split .mk-hero__media { order: 1; height: calc(var(--px) * 300); margin: calc(var(--px) * 6) calc(var(--px) * 18) 0; border-radius: calc(var(--px) * 10); }
.mk--m.mk--split .mk-hero .mk-h1 { font-size: calc(var(--px) * 38); }
.mk--m.mk--arch .mk-hero__media { order: 1; height: calc(var(--px) * 420); width: 70%; margin: calc(var(--px) * 4) auto 0; }
.mk--m.mk--arch .mk-hero__body { order: 2; padding-top: calc(var(--px) * 26); text-align: center; }
.mk--m.mk--arch .mk-sub { margin-inline: auto; }
.mk--m.mk--arch .mk-actions { justify-content: center; }
.mk--m.mk--arch .mk-hero .mk-h1 { font-size: calc(var(--px) * 62); }
.mk--m .mk-float { left: calc(var(--px) * 12); bottom: calc(var(--px) * 12); padding: calc(var(--px) * 10) calc(var(--px) * 12); font-size: calc(var(--px) * 11); }
.mk--m .mk-float b { font-size: calc(var(--px) * 13); }
.mk--m.mk--arch .mk-float { bottom: calc(var(--px) * 24); }
.mk--m .mk-strip { flex-wrap: wrap; padding: calc(var(--px) * 18) calc(var(--px) * 22); font-size: calc(var(--px) * 11); gap: calc(var(--px) * 10) calc(var(--px) * 18); justify-content: flex-start; }
.mk--m .mk-services { padding: calc(var(--px) * 56) calc(var(--px) * 22) calc(var(--px) * 30); }
.mk--m .mk-services .mk-h2, .mk--m .mk-about .mk-h2, .mk--m .mk-cta .mk-h2 { font-size: calc(var(--px) * 32); }
.mk--m .mk-svc { grid-template-columns: 1fr; gap: calc(var(--px) * 22); margin-top: calc(var(--px) * 28); }
.mk--m .mk-svc .mk-h3 { font-size: calc(var(--px) * 20); margin-top: calc(var(--px) * 12); }
.mk--m .mk-svc p { font-size: calc(var(--px) * 14.5); }
.mk--m .mk-about { grid-template-columns: 1fr; gap: calc(var(--px) * 26); padding: calc(var(--px) * 30) calc(var(--px) * 22) calc(var(--px) * 56); }
.mk--m .mk-about p { font-size: calc(var(--px) * 15); }
.mk--m .mk-cta { flex-direction: column; align-items: flex-start; padding: calc(var(--px) * 48) calc(var(--px) * 22); }
.mk--m .mk-foot { flex-direction: column; padding: calc(var(--px) * 24) calc(var(--px) * 22); font-size: calc(var(--px) * 12); }

/* ==========================================================
   Device frames
   ========================================================== */
.bw {
  position: relative; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(10, 12, 18, 0.14), 0 2px 4px rgba(10, 12, 18, 0.08), 0 30px 70px -20px rgba(10, 12, 18, 0.45);
}
.bw__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eceae5; border-bottom: 1px solid rgba(10, 12, 18, 0.1); }
.bw__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c6bf; flex: none; }
.bw__bar i:nth-child(1) { background: #ec6a5e; } .bw__bar i:nth-child(2) { background: #f4bf4f; } .bw__bar i:nth-child(3) { background: #61c554; }
.bw__url { flex: 1; max-width: 55%; margin: 0 auto; transform: translateX(-26px); height: 18px; line-height: 18px; text-align: center; font: 500 10px/18px var(--font-mono); letter-spacing: 0; color: #6c6a64; background: #fff; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.bw__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.bw__shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bw--scroll .bw__screen { aspect-ratio: auto; height: 100%; overflow: auto; }
.bw--scroll .mk { pointer-events: auto; }
.bw--scroll { display: flex; flex-direction: column; height: 100%; }
.bw--scroll .bw__bar { flex: none; }
.bw--scroll .bw__screen { flex: 1; min-height: 0; overscroll-behavior: contain; }

.ph {
  position: relative; background: #0a0b0f; border-radius: 13% / 6.4%; padding: 2.4%;
  box-shadow: 0 0 0 1.5px #2a2d36, 0 0 0 3px #0a0b0f, 0 30px 60px -18px rgba(10, 12, 18, 0.55);
}
.ph__screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 11.2% / 5.2%; background: #fff; }
.ph__island { position: absolute; z-index: 5; top: 2.8%; left: 50%; width: 27%; height: 2.5%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.ph--scroll { height: 100%; display: flex; }
.ph--scroll .ph__screen { aspect-ratio: auto; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ph--scroll .ph__screen::-webkit-scrollbar { display: none; }
.ph--scroll .mk { pointer-events: auto; }

/* fill helpers (comparison + device screens) */
.cmp__layer .mkc, .cmp__layer .mk { height: 100%; }
.ph .mk--m .mk-nav { padding-top: calc(var(--px) * 34); }