/* ─────────────────────────────────────────────────────────────
   Shared project header, used by the pop-ups on the hiring page
   and, through tags.js, by the five case-study pages when a visitor
   arrives from the hiring page. Also recolours those pages so the
   two halves of the site read as one.
   ───────────────────────────────────────────────────────────── */

/* ── Case-study pages: same paper, ink and nav as the hiring page ── */
html.mz-case {
  --c-paper: #f7f6f3; --c-ink: #17171a; --c-body: #45464a; --c-soft: #85868c;
  --c-line: rgba(23, 23, 26, 0.13); --paper-2: #efeeea;
  --paper: #f7f6f3; --ink: #17171a; --ink-mid: #45464a; --ink-soft: #85868c; --rule: rgba(23, 23, 26, 0.13);
  --accent: #2f45d0; --stage: #17171a;
}
html.mz-case, html.mz-case body { background: #f7f6f3; }
/* Menu: the same small centred pill as the hiring page */
html.mz-case nav#nav, html.mz-case nav#nav.is-scrolled { top: 16px; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; justify-content: center; pointer-events: none; }
html.mz-case nav#nav .nav-inner {
  pointer-events: auto; display: flex !important; align-items: center; gap: 4px; width: auto; max-width: none; margin: 0;
  padding: 5px 6px 5px 14px; border-radius: 999px; background: rgba(247, 246, 243, 0.84); border: 1px solid rgba(23, 23, 26, 0.13);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1;
}
html.mz-case nav#nav .nav-mark { font-size: 15px; font-weight: 500; letter-spacing: -0.04em; margin: 0 10px 0 0; color: #17171a; }
html.mz-case nav#nav .nav-center { margin: 0; justify-self: auto; }
html.mz-case nav#nav .nav-links { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; justify-self: auto; }
html.mz-case nav#nav .nav-center a, html.mz-case nav#nav .nav-links a { display: inline-block; padding: 8px 11px; border-radius: 999px; font-size: 13px; color: #85868c; text-decoration: none; transition: color 0.2s, background 0.2s; }
html.mz-case nav#nav .nav-center a:hover, html.mz-case nav#nav .nav-links a:hover { color: #17171a; background: rgba(23, 23, 26, 0.05); }
html.mz-case nav#nav .nav-links li.mz-hide { display: none; }
html.mz-case ::selection { background: #2f45d0; color: #f7f6f3; }
/* the old header and Challenge / Idea table are replaced by the card header below */
html.mz-case .page-head, html.mz-case section.brief { display: none; }
/* Touch devices: no focus rings or tap flashes while scrolling and tapping */
html.mz-case, html.mz-case * { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) { html.mz-case :focus, html.mz-case :focus-visible { outline: none !important; box-shadow: none !important; } }
html.mz-case :focus:not(:focus-visible) { outline: none; }
html.mz-case .page-head + .reel-section, html.mz-case .mzh + .reel-section { padding-top: 0; }

/* ── The header ── */
.mzh { max-width: 1280px; margin: 0 auto; padding: clamp(120px, 17vh, 170px) 24px 0; color: var(--c-ink, #17171a); }
.pm .mzh { padding-top: 0; }
.mzh-top { max-width: 880px; margin: 0 auto; text-align: center; }
.mzh-no { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #2f45d0; margin: 0 0 18px; }
.mzh h1, .mzh h2.mzh-title { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.03em; margin: 0; color: var(--c-ink, #17171a); }
.mzh-lead { margin: 20px auto 0; max-width: 32em; font-size: 17px; line-height: 1.5; color: var(--c-ink, #17171a); }

/* Cards in rows: every card in a row is the same height, so the block reads as one grid */
.mzh-row { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; }
/* Same gap under the title whichever row comes first; 16px between rows */
.mzh-top + .mzh-row { margin-top: 56px; }
.mzh-row + .mzh-row { margin-top: 16px; }
.mzh-row + .mzh-stats { margin-top: 16px; }
.mzh-card { background: var(--paper-2, #efeeea); border-radius: 14px; padding: 24px 26px 26px; }
.mzh-card h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: var(--c-soft, #85868c); margin: 0 0 10px; }
/* One text style for every card: 16px, ink. Labels are the only grey. */
.mzh-card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-ink, #17171a); }

/* Numbers, only where there are real ones */
.mzh-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.mzh-stat { padding: 0 26px; }
.mzh-stats { padding-top: 32px; }
.mzh-stats.one { text-align: center; }
@font-face { font-family: 'Nothing You Could Do'; src: url('./fonts/NothingYouCouldDo.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.mzh-stat .n { font-family: 'Nothing You Could Do', 'Bradley Hand', 'Segoe Print', cursive; font-weight: 400; font-size: clamp(48px, 5vw, 72px); letter-spacing: 0; line-height: 0.95; margin: 0 0 12px; color: #2f45d0; }
.mzh-stat .l { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-ink, #17171a); }

.mzh + * { margin-top: 0; }
html.mz-case .mzh { margin-bottom: clamp(72px, 9vh, 112px); }

@media (max-width: 900px) {
  .mzh-top + .mzh-row { margin-top: 44px; }
  .mzh-row.think { grid-template-columns: 1fr; }
  .mzh-row.det { grid-template-columns: 1fr 1fr; }
  .mzh-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mzh { padding-left: 18px; padding-right: 18px; }
  .mzh-row.det, .mzh-stats { grid-template-columns: 1fr; }
  .mzh-card { padding: 20px 20px 22px; }
  .mzh-stat { padding: 0 20px; }
}

/* ── Ending, identical to the hiring page ── */
html.mz-case .mz-end { text-align: center; padding: clamp(160px, 22vh, 260px) 24px 48px; background: #f7f6f3; color: #17171a; font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html.mz-case .mz-end .mz-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #2f45d0; margin: 0 0 18px; }
html.mz-case .mz-end h2 { font-weight: 500; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.1; letter-spacing: -0.03em; max-width: 18em; margin: 0 auto; color: #17171a; text-transform: none; }
html.mz-case .mz-end h2::before { content: none; }
html.mz-case .mz-end .mz-mail { display: inline-block; margin-top: 32px; font-size: clamp(18px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: #17171a; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color 0.3s; }
html.mz-case .mz-end .mz-mail:hover { color: #2f45d0; }
html.mz-case .mz-foot { display: block; max-width: none; margin: 0; padding: 56px 24px 0; text-align: center; font-size: 13px; line-height: 1.7; color: #85868c; background: #f7f6f3; border: 0; grid-template-columns: none; }
html.mz-case .mz-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(23,23,26,0.35); }
html.mz-case .mz-foot a:hover { text-decoration-color: currentColor; }
html.mz-case .mz-illo { width: 100%; margin: clamp(56px, 8vh, 96px) 0 0; line-height: 0; background: #f7f6f3; }
html.mz-case .mz-illo img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; opacity: 0.9; border-radius: 0; }
@media (max-width: 640px) { html.mz-case .mz-end { padding-left: 18px; padding-right: 18px; } }


/* ── One frame for every image on the case pages: an inset hairline, never a solid border ── */
html.mz-case .cs-site .frame, html.mz-case .cs-social .slide, html.mz-case .cs-social .organic, html.mz-case .cs-social .square, html.mz-case .bb-viewport, html.mz-case .ad .frame,
html.mz-case .cs-ba .ba-shot, html.mz-case .wide-img, html.mz-case .pair figure, html.mz-case .slide,
html.mz-case .photo-grid figure { position: relative; border: 0 !important; }
html.mz-case .cs-site .frame::after, html.mz-case .cs-social .slide::after, html.mz-case .cs-social .organic::after, html.mz-case .cs-social .square::after, html.mz-case .bb-viewport::after, html.mz-case .ad .frame::after,
html.mz-case .cs-ba .ba-shot::after, html.mz-case .wide-img::after, html.mz-case .pair figure::after, html.mz-case .slide::after,
html.mz-case .photo-grid figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(23, 23, 26, 0.08);
}

/* ── Selected ads: every ad keeps its own shape; tags.js groups same-shaped ads into the same rows ── */
html.mz-case .reel { align-items: start; }

/* Credits live in the header's Team card; the blocks under the work are hidden */
html.mz-case .cs-credits, html.mz-case .shoot-credits { display: none !important; }