/* ==========================================================================
   360Bounce — homepage ("Marketing in motion")
   Loaded on the homepage only.

   Layout system: every section is .mk-sec > .mk-wrap. .mk-wrap is the one
   container (max 1440 px of content, shared gutters); inside it a 12-column
   grid (8 on tablet, 1 on phones) sets every column. 3D appears only inside
   .mk-visual slots: the WebGL layer renders into each slot's rectangle and
   nowhere else, so it can never cover text.
   ========================================================================== */

.mk-sec { position: relative; padding-block: var(--space-section); }
.mk-sec:not(.hero-cinematic) { background: var(--background); }
.mk-sec--surface { background: var(--surface); }
.mk-sec--soft { background: var(--surface-soft); }
.mk-wrap {
  width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
}
.mk-wrap > * { grid-column: 1 / -1; min-width: 0; }

/* the WebGL layer sits above the page but draws only inside .mk-visual slots */
.mk-scene { z-index: 40; background: none; }
.mk-visual { position: relative; min-width: 0; }
.mk-visual .mk-fb { visibility: visible; }
.has-webgl .mk-visual .mk-fb { visibility: hidden; }
/* loading state: the fallback art stays up while the 3D studio downloads, with a small status mark */
.webgl-loading .mk-visual::after {
  content: ""; position: absolute; right: 18px; bottom: 18px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-lime); box-shadow: 0 0 0 1px var(--border-strong); animation: mk-loading 1s ease-in-out infinite;
}
@keyframes mk-loading { 50% { opacity: 0.25; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .webgl-loading .mk-visual::after { animation: none; } }

/* shared type */
.mk-title {
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); max-width: 14ch; text-wrap: balance;
}
.mk-body { font-size: var(--fs-m); line-height: 1.5; color: var(--text-secondary); max-width: 44ch; }
.mk-body strong { color: var(--text-primary); }
.mk-mark { background: linear-gradient(var(--accent-lime), var(--accent-lime)) 0 88% / 100% 0.3em no-repeat; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mk-btn { min-width: 220px; justify-content: center; }

/* section header: title (7 cols) + aside (4 cols), same everywhere */
.mk-head { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: end; row-gap: var(--space-stack); margin-bottom: var(--space-block); }
.mk-head-main { grid-column: 1 / span 7; display: grid; gap: var(--space-stack); }
.mk-head-aside { grid-column: 9 / span 4; display: grid; gap: var(--space-stack); justify-items: start; }

/* split: copy + visual slot */
.mk-split { align-items: center; row-gap: var(--space-block); }
.mk-split > :first-child { grid-column: 1 / span 6; }
.mk-split > :last-child { grid-column: 7 / span 6; }
.mk-split--reverse > :first-child { grid-column: 1 / span 6; }
.mk-split--reverse > :last-child { grid-column: 8 / span 5; }

/* CSS stand-in for the 3D billboard (no WebGL / no JavaScript) */
.mk-fb {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-58%); aspect-ratio: 16 / 9; background: #fff; padding: 5% 6%;
  display: grid; align-content: space-between; box-shadow: 0 0 0 1px var(--border), 0 40px 70px -40px rgba(23, 23, 23, 0.35);
}
.mk-fb-kicker, .mk-fb-foot { font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.68rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); }
.mk-fb-foot { border-top: 2px solid var(--text-primary); padding-top: 8px; color: var(--text-primary); }
.mk-fb-head { font-size: clamp(1.4rem, 3.4vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--text-primary); }
.mk-fb-head span { background: linear-gradient(var(--accent-lime), var(--accent-lime)) 0 88% / 100% 0.16em no-repeat; }
.mk-fb-dot { position: absolute; right: 7%; top: 22%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-lime); }

/* ------------------------------------------------------- 01 HERO: the strategist */
/* Copy on the left (real HTML), the 3D strategist and her campaign on the right. The canvas fills
   only the figure column; without WebGL the still render of the same scene stands in. */
.mk-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-h) + 2vh) clamp(24px, 4vh, 48px); overflow: hidden; }
.mk-hero-grid { position: relative; z-index: 2; align-items: center; row-gap: 24px; }
.mk-hero-copy { grid-column: 1 / span 6; grid-row: 1; display: grid; gap: clamp(18px, 3vh, 30px); justify-items: start; align-content: center; position: relative; z-index: 3; }
.mk-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.mk-hero-title {
  /* scales with width and height so headline, text and buttons fit one laptop screen */
  font-size: clamp(2.6rem, min(5.6vw, 10vh), 5.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; color: var(--text-primary); max-width: 100%;
}
.mk-hero-title .line { display: block; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-cinematic .mk-mark { background: none; color: var(--brand-lime); }
.mk-hero-text { font-size: var(--fs-m); line-height: 1.55; color: var(--text-secondary); max-width: 44ch; }
.mk-hero-figure { grid-column: 6 / -1; grid-row: 1; margin: 0; position: relative; align-self: stretch; display: grid; align-content: center; min-width: 0; }
.mk-hero-stage { position: relative; width: 100%; height: min(80svh, 820px); min-height: 440px; }
.mk-hero-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.mk-hero-still { position: absolute; inset: 0; display: block; }
.mk-hero-still img { width: 100%; height: 100%; object-fit: contain; object-position: 60% 50%; }
.hero-3d .mk-hero-still { display: none; }
.mk-hero-label { margin-top: 6px; color: var(--text-secondary); text-align: right; }

/* ------------------------------------------------------------------ 02 MANIFESTO */
.mk-manifesto-copy { display: grid; gap: var(--space-block); }
.mk-manifesto-title {
  font-size: clamp(2.4rem, 5vw, 4.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); perspective: 900px; perspective-origin: 20% 50%;
}
.mk-kin { display: block; transform-style: preserve-3d; }
.mk-kin-w { display: inline-block; will-change: transform; transform-origin: 0 60%; }
.mk-manifesto-foot { display: grid; gap: var(--space-stack); border-top: 1px solid var(--border-strong); padding-top: var(--space-stack); }
.mk-beliefs { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--text-primary); }
.mk-beliefs li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--text-primary); vertical-align: middle; }
.mk-manifesto-visual { min-height: clamp(380px, 64vh, 680px); }

/* ---------------------------------------------------------------- 03 MARKETING IN MOTION */
/* Chapters scroll in the left column; the 3D stage is a sticky panel on the right. No pinning,
   so it works at every viewport height. */
.mk-journey-head { margin-bottom: var(--space-block); }
.mk-journey-grid { align-items: start; }
.mk-chapters { grid-column: 1 / span 5; display: grid; }
.mk-ch { display: grid; gap: 14px; align-content: center; min-height: min(78svh, 760px); padding-block: 6vh; border-top: 1px solid var(--border); transition: opacity 0.5s var(--ease-out); }
.mk-ch:first-child { border-top: 0; }
.has-journey-3d .mk-ch { opacity: 0.38; }
.has-journey-3d .mk-ch.is-active { opacity: 1; }
.mk-ch-index { display: flex; align-items: baseline; gap: 10px; color: var(--text-secondary); }
.mk-ch-num { font-weight: 800; font-size: 0.95rem; color: var(--text-primary); }
.mk-ch-name { font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; color: var(--text-primary); }
.mk-ch-summary { font-size: var(--fs-m); line-height: 1.5; color: var(--text-primary); max-width: 36ch; }
.mk-ch-detail { color: var(--text-secondary); max-width: 46ch; }
.mk-ch-shows { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-secondary); font-size: 0.92rem; font-weight: 600; }
.mk-ch-shows li { display: inline-flex; align-items: center; gap: 8px; }
.mk-ch-shows li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lime); box-shadow: 0 0 0 1px var(--border-strong); }
.mk-journey-aside { grid-column: 6 / -1; align-self: stretch; }
.mk-journey-stage {
  position: sticky; top: calc(var(--header-h) + 8px); height: calc(100svh - var(--header-h) - 24px); max-height: 860px; min-height: 420px;
  border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 55% 40%, var(--brand-white), var(--bg-soft) 78%);
  border: 1px solid var(--border-light);
}
.mk-journey-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.mk-journey-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.mk-journey-stage.is-webgl .mk-journey-fallback { display: none; }
.mk-jnav { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mk-jnav li { display: grid; gap: 6px; color: var(--text-secondary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; transition: color 0.4s; }
.mk-jnav li::before { content: ""; height: 2px; border-radius: 2px; background: var(--border-strong); transition: background-color 0.4s; }
.mk-jnav li.is-done::before { background: var(--text-primary); }
.mk-jnav li.is-active { color: var(--text-primary); }
.mk-jnav li.is-active::before { background: var(--accent-lime); }
.mk-jnav .meta { display: none; }
.mk-jnav-name { line-height: 1.2; }

/* ---------------------------------------------------------- 04 MARKETING SERVICES */
.mk-svc-list { border-top: 1px solid var(--text-primary); }
.mk-svc { border-bottom: 1px solid var(--border); }
.mk-svc-link {
  position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center;
  padding: clamp(18px, 2.2vw, 28px) 0; text-decoration: none; color: inherit;
}
.mk-svc-list, .mk-svc { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.mk-svc-num { grid-column: 1; color: var(--text-secondary); }
.mk-svc-name { grid-column: 2 / span 5; font-size: clamp(1.4rem, 2.3vw, 2.25rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); transition: transform 0.6s var(--ease-out); }
.mk-svc-line { grid-column: 7 / span 3; color: var(--text-secondary); }
.mk-svc-preview { grid-column: 10 / span 2; justify-self: end; }
.mk-svc-arrow { grid-column: 12; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); transition: background-color 0.4s, border-color 0.4s, transform 0.6s var(--ease-out); }
.mk-svc-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mk-svc-link::before { content: ""; position: absolute; inset: 0 calc(var(--col-gap) * -0.5); z-index: -1; background: var(--surface); opacity: 0; transition: opacity 0.4s; }
.mk-svc-link:hover::before, .mk-svc-link:focus-visible::before { opacity: 1; }
.mk-svc-link:hover .mk-svc-name, .mk-svc-link:focus-visible .mk-svc-name { transform: translateX(10px); }
.mk-svc-link:hover .mk-svc-arrow, .mk-svc-link:focus-visible .mk-svc-arrow { background: var(--accent-lime); border-color: var(--text-primary); transform: rotate(-45deg); }
.mk-svc-link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; box-shadow: none; }

/* campaign previews: tiny live mock-ups of each discipline */
.pv { position: relative; display: block; width: 132px; height: 80px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); overflow: hidden; }
.pv i, .pv b { position: absolute; display: block; }
.pv i { background: #E8E8E8; height: 6px; border-radius: 3px; }
.pv b { background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-black); }
.pv-plan i { left: 12px; height: 8px; border-radius: 2px; transition: width 0.8s var(--ease-out); }
.pv-plan i:nth-of-type(1) { top: 14px; width: 40px; }
.pv-plan i:nth-of-type(2) { top: 32px; left: 40px; width: 50px; }
.pv-plan i:nth-of-type(3) { top: 50px; left: 72px; width: 44px; }
.pv-plan b { width: 10px; height: 10px; border-radius: 50%; right: 10px; top: 60px; }
.pv-brand em { position: absolute; left: 10px; top: 6px; font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 34px; background: none; padding: 0; letter-spacing: -0.04em; }
.pv-brand i { width: 22px; height: 22px; border-radius: 3px; top: 48px; }
.pv-brand i:nth-of-type(1) { left: 10px; background: var(--color-black); }
.pv-brand i:nth-of-type(2) { left: 38px; background: var(--color-accent); }
.pv-brand i:nth-of-type(3) { left: 66px; background: var(--color-accent-blue); }
.pv-brand i:nth-of-type(4) { left: 94px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-silver); }
.pv-content b { left: 10px; top: 10px; width: 46px; height: 60px; background: var(--color-accent-blue); box-shadow: none; }
.pv-content i { left: 64px; right: 10px; }
.pv-content i:nth-of-type(1) { top: 14px; height: 10px; background: var(--color-black); }
.pv-content i:nth-of-type(2) { top: 34px; }
.pv-content i:nth-of-type(3) { top: 48px; right: 30px; }
.pv-search i:nth-of-type(1) { left: 10px; right: 10px; top: 10px; height: 14px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-silver); }
.pv-search b { left: 10px; top: 34px; width: 80px; height: 8px; border-radius: 2px; background: #171717; box-shadow: none; }
.pv-search i:nth-of-type(2) { left: 10px; top: 50px; width: 100px; }
.pv-search i:nth-of-type(3) { left: 10px; top: 62px; width: 70px; }
.pv-ad small { position: absolute; left: 10px; top: 8px; font-family: var(--f-mono); font-size: 9px; color: var(--color-text-secondary); }
.pv-ad i:nth-of-type(1) { left: 10px; top: 26px; width: 90px; height: 10px; background: var(--color-black); }
.pv-ad i:nth-of-type(2) { left: 10px; top: 44px; width: 70px; }
.pv-ad b { right: 10px; bottom: 10px; width: 40px; height: 16px; border-radius: 8px; }
.pv-test > span { position: absolute; top: 10px; bottom: 10px; width: 52px; background: var(--color-surface); }
.pv-test > span:first-child { left: 10px; }
.pv-test > span:last-child { right: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-black); }
.pv-test > span i:nth-of-type(1) { left: 6px; right: 6px; top: 8px; }
.pv-test > span i:nth-of-type(2) { left: 6px; right: 16px; top: 20px; }
.pv-test > span b { left: 6px; bottom: 6px; width: 20px; height: 10px; border-radius: 5px; }
.pv-chart i { bottom: 10px; width: 12px; border-radius: 1px; background: var(--color-silver); height: var(--h); transition: height 0.8s var(--ease-out); }
.pv-chart i:nth-of-type(1) { left: 12px; --h: 18px; }
.pv-chart i:nth-of-type(2) { left: 30px; --h: 28px; }
.pv-chart i:nth-of-type(3) { left: 48px; --h: 22px; }
.pv-chart i:nth-of-type(4) { left: 66px; --h: 38px; }
.pv-chart i:nth-of-type(5) { left: 84px; --h: 46px; }
.pv-chart b { left: 102px; bottom: 10px; width: 12px; height: 60px; border-radius: 1px; }
.mk-svc-link:hover .pv-plan i:nth-of-type(1) { width: 64px; }
.mk-svc-link:hover .pv-plan i:nth-of-type(2) { width: 70px; }
.mk-svc-link:hover .pv-chart i { height: calc(var(--h) + 12px); }
.mk-svc-link:hover .pv-test > span:last-child { background: var(--color-accent); }
.mk-svc-link:hover .pv-brand em { color: var(--color-black); transform: scale(1.06); }
.mk-svc-link:hover .pv-search b { width: 100px; transition: width 0.6s var(--ease-out); }
.mk-svc-link:hover .pv-ad b { width: 52px; transition: width 0.6s var(--ease-out); }
.mk-svc-link:hover .pv-content b { background: var(--color-accent); transition: background-color 0.4s; }


/* --------------------------------------------------------------------- 05 WHY */
.mk-why-copy { display: grid; gap: var(--space-stack); align-content: center; }
.mk-why-visual { min-height: clamp(380px, 62vh, 660px); }
.mk-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--text-primary); margin-top: 8px; }
.mk-pillar { display: grid; gap: 8px; align-content: start; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--border-strong); }
.mk-pillar:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--border-strong); }
.mk-pillar-num { color: var(--text-secondary); }
.mk-pillar-name { font-size: clamp(1.3rem, 1.9vw, 1.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); }
.mk-pillar p { color: var(--text-secondary); }

/* ------------------------------------------------------------ 06 CAPABILITIES */
.mk-caps-grid { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: var(--col-gap); }
.mk-cap-main {
  grid-column: 1 / span 7; position: relative; display: grid; gap: var(--space-stack); align-content: end; min-height: clamp(400px, 40vw, 560px);
  padding: clamp(28px, 3.6vw, 52px); background: var(--accent-lime-soft); text-decoration: none; color: inherit;
  transition: background-color 0.5s;
}
.mk-cap-main::before { content: ""; position: absolute; top: clamp(28px, 3.6vw, 52px); right: clamp(28px, 3.6vw, 52px); width: 18px; height: 18px; border-radius: 50%; background: var(--accent-lime); box-shadow: 0 0 0 1px var(--text-primary); }
.mk-cap-num { color: var(--text-secondary); }
.mk-cap-name { font-size: clamp(2.6rem, 5.6vw, 5.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); }
.mk-cap-text { font-size: var(--fs-m); line-height: 1.45; max-width: 40ch; color: var(--text-primary); }
.mk-cap-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-cap-list li { padding: 6px 12px; border: 1px solid rgba(23, 23, 23, 0.18); border-radius: 999px; color: var(--text-primary); background: rgba(255, 255, 255, 0.6); }
.mk-cap-cta { justify-self: start; }
.mk-cap-main:hover, .mk-cap-main:focus-visible { background: #C6F36B; }
.mk-cap-side { grid-column: 9 / span 4; display: grid; align-content: start; gap: 16px; }
.mk-cap-side-title { color: var(--text-secondary); }
.mk-support-list { border-top: 1px solid var(--text-primary); }
.mk-support {
  display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.mk-support-num { color: var(--text-secondary); grid-row: 1 / span 2; }
.mk-support-icon { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); }
.mk-support-icon svg { width: 26px; height: 26px; }
.mk-support-name { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.mk-support-text { grid-column: 3; color: var(--text-secondary); font-size: 0.95rem; }
.mk-support-arrow { grid-column: 4; grid-row: 1 / span 2; transition: transform 0.5s var(--ease-out); }
.mk-support:hover .mk-support-arrow, .mk-support:focus-visible .mk-support-arrow { transform: translateX(6px); }
.mk-support:hover .mk-support-name { text-decoration: underline; text-decoration-color: var(--accent-lime); text-decoration-thickness: 2px; text-underline-offset: 0.14em; }

/* --------------------------------------------------------- 07 CAMPAIGN SHOWCASE */
.mk-campaigns { display: grid; gap: var(--space-block); }
.mk-camp {
  /* its own 12-column grid: the parent list has a single column, so "subgrid" collapsed the
     placement and the mirrored entry put its copy on top of its image */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); grid-column: 1 / -1;
  align-items: center; row-gap: var(--space-stack);
}
.mk-camp-media {
  grid-column: 1 / span 7; position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--background);
  box-shadow: 0 0 0 1px var(--border);
  transform: perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}
.mk-camp-num { position: absolute; left: 18px; bottom: 10px; font-family: var(--f-mono); font-size: 0.75rem; color: var(--text-secondary); background: var(--background); padding: 4px 8px; }
.mk-camp-copy { grid-column: 9 / span 4; display: grid; gap: 14px; align-content: center; }
.mk-camp--1 .mk-camp-media { grid-column: 6 / span 7; grid-row: 1; }
.mk-camp--1 .mk-camp-copy { grid-column: 1 / span 4; grid-row: 1; }
.mk-camp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-secondary); }
.mk-camp-title { font-size: var(--fs-xl); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.mk-camp-title a { color: var(--text-primary); text-decoration: none; background: linear-gradient(var(--accent-lime), var(--accent-lime)) 0 90% / 0 0.14em no-repeat; transition: background-size 0.7s var(--ease-out); }
.mk-camp-title a:hover, .mk-camp-title a:focus-visible { background-size: 100% 0.14em; }
.mk-camp-summary { color: var(--text-primary); }
.mk-camp-facts { display: grid; gap: 12px; border-top: 1px solid var(--border-strong); padding-top: 14px; }
.mk-camp-facts div { display: grid; gap: 4px; }
.mk-camp-facts dt { color: var(--text-secondary); }
.mk-camp-facts dd { margin: 0; font-size: 0.95rem; color: var(--text-secondary); }
.mk-camp-link { justify-self: start; }
.mk-camp:hover .mk-camp-media { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-float); }
.mk-camp:hover .feature-media-inner { --ms: 1.04; }
.feature-media-inner { position: absolute; inset: -6%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1)); transition: transform 1.1s var(--ease-out); }
.feature-media-inner picture, .feature-media-inner img, .feature-media-inner .art { width: 100%; height: 100%; }
.feature-media-inner img { object-fit: cover; }

/* --------------------------------------------------------------- 08 INSIGHTS */
.mk-insights .st-insights-grid { grid-column: 1 / -1; }
.st-insights-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.insight-lead-link, .insight-item-link { display: grid; text-decoration: none; color: inherit; }
.insight-lead-link { gap: 28px; }
.insight-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-surface); border: 1px solid var(--color-border); transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out); }
.insight-media img { width: 100%; height: 100%; object-fit: cover; }
.insight-media picture { width: 100%; height: 100%; }
.insight-flag { position: absolute; left: 16px; top: 16px; padding: 6px 12px; background: var(--color-white); border: 1px solid var(--color-black); border-radius: 999px; color: var(--color-black); }
.insight-lead-copy { display: grid; gap: 16px; }
.insight-lead-title { font-size: clamp(1.9rem, 3.4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--color-black); max-width: 22ch; }
.insight-summary { color: var(--color-text-secondary); max-width: 56ch; }
.insight-cta { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; color: var(--color-black); }
.insight-cta .arrow { transition: transform 0.6s var(--ease-out); }
.insight-lead-link:hover .insight-media { box-shadow: var(--shadow-float); }
.insight-lead-link:hover .feature-media-inner { --ms: 1.04; }
.insight-lead-link:hover .insight-cta .arrow, .insight-item-link:hover .insight-cta .arrow { transform: translateX(6px); }
.insight-lead-link:hover .insight-lead-title, .insight-item-link:hover .insight-item-title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 0.12em; }
.st-insights-list { display: grid; border-top: 1px solid var(--color-black); }
.insight-item { border-bottom: 1px solid var(--color-border); }
.insight-item-link { grid-template-columns: auto minmax(0, 1fr) clamp(88px, 9vw, 150px); gap: 20px; padding: 28px 16px; align-items: start; }
.insight-num { font-family: var(--f-mono); font-size: 0.78rem; color: var(--color-text-secondary); padding-top: 4px; }
.insight-item-copy { display: grid; gap: 12px; }
.insight-item-title { font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-black); }
.insight-thumb { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.insight-thumb picture, .insight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.insight-item-link:hover .insight-thumb img { transform: scale(1.08); }
.insight-item-link:focus-visible, .insight-lead-link:focus-visible { outline: 2px solid var(--color-black); outline-offset: 4px; box-shadow: none; }
.feature-media-inner { position: absolute; inset: -6%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1)); transition: transform 1.1s var(--ease-out); }
.feature-media-inner picture, .feature-media-inner img, .feature-media-inner .art { width: 100%; height: 100%; }
.feature-media-inner img { object-fit: cover; }


/* ------------------------------------------------------------------ 09 FINAL */
.mk-final-copy { display: grid; gap: var(--space-stack); justify-items: start; }
.mk-final-title { max-width: 11ch; }
.mk-final-visual { min-height: clamp(380px, 62vh, 660px); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .mk-svc-name { grid-column: 2 / span 6; }
  .mk-svc-line { grid-column: 2 / span 6; grid-row: 2; }
  .mk-svc-preview { grid-column: 8 / span 3; grid-row: 1 / span 2; }
  .mk-svc-arrow { grid-row: 1 / span 2; }
}
/* tablet: 8 columns */
@media (max-width: 1024px) {
  .mk-wrap { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mk-head-main { grid-column: 1 / -1; }
  .mk-head-aside { grid-column: 1 / span 6; }
  .mk-split > :first-child, .mk-split > :last-child, .mk-split--reverse > :first-child, .mk-split--reverse > :last-child { grid-column: 1 / -1; }
  .mk-split > .mk-visual { order: -1; }
  .mk-hero { align-items: start; }
  .mk-hero-copy { grid-column: 1 / -1; }
  .mk-hero-figure { grid-column: 1 / -1; grid-row: 2; }
  .mk-hero-stage { height: min(64vh, 92vw); min-height: 340px; }
  .mk-hero-label { position: static; text-align: left; margin-top: 8px; }
  .mk-manifesto-visual, .mk-why-visual, .mk-final-visual { min-height: 46vh; }
  /* tablet and phones: the stage sticks to the top, the chapters scroll beneath it */
  .mk-journey-aside { grid-column: 1 / -1; grid-row: 1; position: sticky; top: calc(var(--header-h) + 4px); z-index: 2; }
  .mk-journey-stage { position: relative; top: 0; height: 42svh; min-height: 260px; }
  .mk-chapters { grid-column: 1 / -1; grid-row: 2; }
  .mk-ch { min-height: 62svh; padding-block: 4vh; }
  .mk-jnav-name { display: none; }
  .mk-svc-num { grid-column: 1; }
  .mk-svc-name { grid-column: 2 / span 6; }
  .mk-svc-line { grid-column: 2 / span 6; }
  .mk-svc-preview { display: none; }
  .mk-svc-arrow { grid-column: 8; }
  .mk-cap-main, .mk-cap-side { grid-column: 1 / -1; }
  .mk-camp-media, .mk-camp--1 .mk-camp-media, .mk-camp-copy, .mk-camp--1 .mk-camp-copy { grid-column: 1 / -1; grid-row: auto; transform: none; }
  .st-insights-grid { grid-template-columns: minmax(0, 1fr); }
  .insight-media { transform: none; }
}
/* phones: one column */
@media (max-width: 640px) {
  .mk-wrap { grid-template-columns: minmax(0, 1fr); }
  .mk-head-aside { grid-column: 1; }
  .mk-hero { padding-bottom: 24px; }
  .mk-hero-title { font-size: clamp(2.25rem, 10.5vw, 2.75rem); line-height: 1.04; }
  .mk-hero-text { font-size: var(--fs-s, 1rem); }
  .mk-btn { width: 100%; min-width: 0; white-space: normal; text-align: center; }
  .mk-pillars { grid-template-columns: minmax(0, 1fr); }
  .mk-pillar:nth-child(even) { padding-left: 0; border-left: 0; }
  .mk-svc-list, .mk-svc, .mk-svc-link { grid-template-columns: 34px minmax(0, 1fr) 40px; }
  .mk-svc-link { column-gap: 12px; }
  .mk-svc-num { grid-column: 1; grid-row: 1; }
  .mk-svc-name, .mk-svc-line { grid-column: 2; }
  .mk-svc-arrow { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .insight-item-link { grid-template-columns: minmax(0, 1fr) 76px; }
  .insight-num { display: none; }
  .mk-fb-head { font-size: clamp(1.2rem, 7vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-camp-media, .feature-media-inner, .insight-media { transition: none; transform: none; }
}
/* hero foot: description beside the buttons on wide screens (overrides the inherited three-column .hero-bottom) */
.mk-hero .mk-eyebrow { border-top: 0; padding-top: 0; justify-content: flex-start; }