:root { --mk-scrim: 40, 48, 18; }
.mk-hero { position: relative; min-height: 88svh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--olive-900); color: var(--white); }
.mk-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--mk-scrim), 0.6) 0%, rgba(var(--mk-scrim), 0) 26%), linear-gradient(to top, rgba(var(--mk-scrim), 0.88) 0%, rgba(var(--mk-scrim), 0.5) 42%, rgba(var(--mk-scrim), 0.08) 78%); }
.mk-hero .crumbs, .mk-hero-copy { position: relative; z-index: 1; }
.mk-hero .crumbs { color: var(--cream-70); }
.mk-hero .crumbs a { color: var(--cream); }
.mk-hero .crumbs [aria-current] { color: var(--white); }
.mk-hero .crumbs li + li::before { color: var(--cream-70); }
.mk-hero-copy { align-self: end; padding-block: 48px clamp(48px, 8vw, 96px); }
.mk-hero h1 { font-size: clamp(40px, 28px + 3.2vw, 78px); line-height: 0.97; letter-spacing: -0.01em; max-width: 17ch; }
.mk-hero .mk-lede { margin-top: 22px; max-width: 44ch; font-size: clamp(16px, 0.95rem + 0.3vw, 19px); color: var(--cream); }
.mk-acts { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .mk-hero-copy > * { animation: mk-rise 0.9s var(--ease-out) both; }
  .mk-hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .mk-hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .mk-hero > img { animation: mk-settle 1.6s var(--ease-out) both; }
}
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes mk-settle { from { transform: scale(1.04); } }
.mk-src { margin-top: 10px; font-size: var(--small); color: var(--olive-600); }
.mk-voice { padding-block: clamp(80px, 10vw, 140px); }
.mk-voice figure { margin: 0 0 0 clamp(0px, 14vw, 260px); }
.mk-voice blockquote { margin: 0; font-size: clamp(22px, 1rem + 1.2vw, 34px); line-height: 1.2; letter-spacing: -0.01em; color: var(--olive-800); max-width: 34ch; }
.mk-voice figcaption { margin-top: 28px; display: grid; gap: 2px; font-size: 15px; color: var(--olive-600); }
.mk-voice .mk-who { font-size: var(--h3); color: var(--olive-900); }
.mk-end { background: var(--olive-900); color: var(--cream); padding-block: clamp(80px, 10vw, 140px); }
.mk-end-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px var(--gutter); align-items: end; }
.mk-end h2 { font-size: clamp(34px, 1.6rem + 2.6vw, 64px); line-height: 0.98; letter-spacing: -0.01em; max-width: 17ch; color: var(--white); }
.mk-end p { color: var(--cream-70); max-width: 38ch; }
.mk-end p + p { margin-top: 10px; }
.mk-end .mk-others { font-size: 15px; }
.mk-end a:not(.btn) { color: var(--cream); }
@media (max-width: 900px) {
  .mk-end-grid { grid-template-columns: 1fr; }
  .mk-voice figure { margin-inline-start: 0; }
}

.mk-say { padding-block: clamp(80px, 11vw, 160px); }
.mk-say-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr); }
.mk-say-grid > div { grid-column: 2; }
.mk-say .h2 { max-width: 22ch; }
.mk-say p.mk-follow { margin-top: 28px; max-width: 46ch; margin-inline-start: clamp(0px, 8vw, 140px); }
.mk-org { background: var(--olive-900); color: var(--cream); padding-block: clamp(80px, 10vw, 150px); }
.mk-org-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--gutter); align-items: start; }
.mk-org .h2 { color: var(--cream); font-size: clamp(32px, 1.5rem + 2.4vw, 54px); line-height: 1; max-width: 19ch; }
.mk-org dl { margin: 0; display: grid; gap: 26px; }
.mk-org dt { font-size: 15px; color: var(--cream-70); }
.mk-org dd { margin: 4px 0 0; font-size: clamp(18px, 1rem + 0.4vw, 22px); line-height: 1.35; color: var(--cream); }
.mk-org .mk-org-note { margin-top: 32px; color: var(--cream-70); max-width: 44ch; }
.mk-org .mk-org-follow { margin-top: 18px; color: var(--cream); max-width: 44ch; }
.mk-req { padding-block: clamp(72px, 9vw, 130px) clamp(40px, 5vw, 64px); }
.mk-req h2 { color: var(--olive-900); max-width: 18ch; }
.mk-req-grid { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 110px); }
.mk-req-grid h3 { font-size: 15px; font-weight: 500; color: var(--olive-600); margin-bottom: 12px; }
.mk-req-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-req-grid li, .mk-req-grid .mk-big { font-size: clamp(22px, 1rem + 1vw, 32px); line-height: 1.15; color: var(--olive-900); }
.mk-req-grid p + p { margin-top: 12px; }
.mk-req-grid .mk-small { font-size: var(--body); color: var(--ink); max-width: 46ch; }
.mk-req-grid h3.mk-sub { margin-top: 36px; }
.mk-checks { padding-block: clamp(40px, 5vw, 64px) clamp(72px, 9vw, 130px); }
.mk-checks-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 110px); align-items: start; }
.mk-checks h2 { font-size: clamp(26px, 1.2rem + 1.2vw, 38px); line-height: 1.05; color: var(--olive-900); max-width: 16ch; }
.mk-checks .mk-rule { margin-top: 20px; max-width: 40ch; }
.mk-checks .ref-table { min-width: 0; }
.mk-checks .ref-table td { color: var(--ink); }
.mk-checks .ref-table a { color: var(--olive-800); text-underline-offset: 3px; }
.mk-checks .mk-one { font-size: clamp(22px, 1rem + 1vw, 32px); line-height: 1.2; color: var(--olive-900); max-width: 26ch; }
.mk-checks .mk-one + p { margin-top: 18px; max-width: 52ch; }
.mk-checks .mk-more { margin-top: 24px; }
.mk-docs { background: var(--white); padding-block: clamp(72px, 9vw, 130px); border-top: 1px solid var(--line); }
.mk-docs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 110px); }
.mk-docs h2 { color: var(--olive-900); max-width: 14ch; }
.mk-docs h3 { font-size: 15px; font-weight: 500; color: var(--olive-600); margin-bottom: 12px; }
.mk-docs .mk-added { margin-top: 28px; }
.mk-docs .mk-added li { font-size: clamp(20px, 1rem + 0.8vw, 28px); line-height: 1.2; color: var(--olive-900); }
.mk-docs .mk-added li + li { margin-top: 10px; }
.mk-docs ul { list-style: none; margin: 0; padding: 0; }
.mk-docs .mk-base { columns: 2; column-gap: 32px; }
.mk-docs .mk-base li { break-inside: avoid; padding-block: 6px; color: var(--ink); }
.mk-docs .mk-after { margin-top: 32px; max-width: 52ch; }
.mk-prods { padding-block: clamp(72px, 9vw, 130px) clamp(40px, 5vw, 72px); }
.mk-prods h2 { color: var(--olive-900); max-width: 20ch; }
.mk-prods .mk-intro { margin-top: 18px; max-width: 48ch; }
.mk-row { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: clamp(16px, 2vw, 28px); align-items: start; }
.mk-row.n2 { grid-template-columns: 7fr 5fr; }
.mk-row.n3 { grid-template-columns: 6fr 4fr 5fr; }
.mk-row.n4 { grid-template-columns: 5fr 3fr 4fr 3fr; }
.mk-row.many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.mk-row.many .mk-prod { flex: 0 0 clamp(220px, 24vw, 340px); scroll-snap-align: start; }
.mk-row.many .mk-prod:nth-child(3n+1) { flex-basis: clamp(260px, 32vw, 460px); }
.mk-row:not(.many) .mk-prod:nth-child(even) { margin-top: clamp(24px, 5vw, 80px); }
.mk-prod { display: block; text-decoration: none; color: inherit; }
.mk-prod figure { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); }
.mk-row.many .mk-prod:nth-child(3n+1) figure { aspect-ratio: 5 / 4; }
.mk-prod img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.mk-prod:hover img { transform: scale(1.03); }
.mk-prod h3 { margin-top: 16px; }
.mk-prod p { margin-top: 4px; font-size: var(--small); color: var(--ink); max-width: 34ch; }
.mk-note { margin-top: clamp(40px, 5vw, 64px); padding-inline-start: 18px; border-inline-start: 2px solid var(--olive-400); max-width: 60ch; color: var(--olive-900); }
@media (max-width: 900px) {
  .mk-say-grid > div { grid-column: 1 / -1; }
  .mk-say p.mk-follow { margin-inline-start: 0; }
  .mk-org-grid, .mk-req-grid, .mk-checks-grid, .mk-docs-grid { grid-template-columns: 1fr; }
  .mk-row.n2, .mk-row.n3, .mk-row.n4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .mk-row .mk-prod { flex: 0 0 72vw; scroll-snap-align: start; margin-top: 0 !important; }
  .mk-row.many .mk-prod:nth-child(3n+1) { flex-basis: 80vw; }
}
@media (max-width: 560px) { .mk-docs .mk-base { columns: 1; } }