/* Service page + Case study + FAQ + scaffold-shared styles */
.page-pad { padding-top: 120px; }
.breadcrumb { color: var(--mv-dust); margin-bottom: 40px; display: flex; gap: 12px; }
.breadcrumb a:hover { color: var(--mv-lime); }

/* Service hero */
.svc-hero { padding: 140px var(--gutter) 80px; }
.svc-hero .h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(56px, 8vw, 144px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 24px 0 28px; text-wrap: balance;
}
.svc-hero .lede { max-width: 44ch; color: var(--mv-dust); }
.svc-hero .ctas { margin-top: 40px; display: flex; gap: 14px; }

/* Practice mini cards */
.mini-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.mini-card {
  border: 1px solid var(--mv-line);
  background: var(--mv-char);
  padding: 28px 24px 24px;
  min-height: 220px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  transition: border-color 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}
.mini-card:hover { border-color: var(--mv-lime); transform: translateY(-2px); }
.mini-card .n { color: var(--mv-dust); }
.mini-card h3 {
  font-family: var(--ff-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  margin: 0;
}
.mini-card p { color: var(--mv-dust); margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .mini-cards { grid-template-columns: 1fr; } }

/* Engagement timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mv-line);
  border-bottom: 1px solid var(--mv-line);
}
.tl-step {
  padding: 32px 28px;
  border-right: 1px solid var(--mv-line);
  display: grid; gap: 16px; align-content: start;
  position: relative;
}
.tl-step:last-child { border-right: 0; }
.tl-step .num { color: var(--mv-lime); }
.tl-step h3 { font-family: var(--ff-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.tl-step p { color: var(--mv-dust); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; }
  .tl-step { border-right: 0; border-bottom: 1px solid var(--mv-line); }
  .tl-step:last-child { border-bottom: 0; }
}

/* FAQ */
.faq { border-top: 1px solid var(--mv-line); }
.faq-item { border-bottom: 1px solid var(--mv-line); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; text-align: left;
  padding: 28px 0;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.015em;
  color: inherit;
}
.faq-toggle {
  font-family: var(--ff-mono);
  font-size: 24px; font-weight: 400;
  transition: transform 220ms var(--ease-out-quart), color 220ms;
  color: var(--mv-dust);
}
.faq-item.open .faq-toggle { transform: rotate(45deg); color: var(--mv-lime); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--ease-out-quart), opacity 220ms;
  opacity: 0;
}
.faq-item.open .faq-a { max-height: 400px; opacity: 1; padding-bottom: 28px; }
.faq-a p { color: var(--mv-dust); max-width: 72ch; margin: 0; line-height: 1.55; font-size: 17px; }

/* CTA band */
.cta-band {
  padding: 96px var(--gutter);
  display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
  border-top: 1px solid var(--mv-line);
}
.cta-band h3 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.03em; line-height: 1;
  margin: 0; text-wrap: balance;
}
@media (max-width: 720px) { .cta-band { grid-template-columns: 1fr; } }

/* Case study */
.case-hero {
  padding: 140px var(--gutter) 80px;
  border-bottom: 1px solid var(--mv-line);
}
.case-hero .name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(64px, 10vw, 180px); line-height: 0.9; letter-spacing: -0.04em;
  margin: 32px 0 40px; text-wrap: balance;
}
.case-hero .tagline { font-size: var(--fs-lede); color: var(--mv-dust); max-width: 52ch; line-height: 1.35; }

.case-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mv-line); border-bottom: 1px solid var(--mv-line);
}
.cf { padding: 28px var(--gutter); border-right: 1px solid var(--mv-line); }
.cf:last-child { border-right: 0; }
.cf .k { color: var(--mv-dust); margin-bottom: 8px; }
.cf .v { font-family: var(--ff-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.015em; }

.case-body {
  max-width: 70ch;
  margin: 0 auto;
  padding: 80px var(--gutter);
  font-size: 19px; line-height: 1.65;
}
.case-body p { margin: 0 0 1.5em; }
.case-body p:first-child::first-letter {
  font-family: var(--ff-display); font-weight: 700; float: left;
  font-size: 5.2em; line-height: 0.85; padding: 4px 14px 0 0; color: var(--mv-lime);
}
.case-body .pull {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(32px, 3.4vw, 52px); line-height: 1.1; letter-spacing: -0.025em;
  margin: 48px -40px; text-wrap: balance; color: var(--mv-cream);
}
.case-body h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px,2.6vw, 40px); letter-spacing: -0.02em; margin: 48px 0 16px; }
.case-body ol, .case-body ul { margin: 0 0 1.5em; padding: 0; list-style: none; }
.case-body ol { counter-reset: ci; }
.case-body ol li { counter-increment: ci; position: relative; padding-left: 46px; margin: 0 0 16px; }
.case-body ol li::before {
  content: counter(ci, decimal-leading-zero);
  position: absolute; left: 0; top: 4px;
  font-family: var(--ff-mono); font-size: 13px; color: var(--mv-lime);
}
/* Answer-first standfirst under a section heading; inherits section text color. */
.case-section-lead { max-width: 62ch; margin: 0 0 40px; font-size: 18px; line-height: 1.6; }

.case-full {
  padding: 40px var(--gutter);
  background: var(--mv-char);
}
.case-full .frame {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2A1A3D 0%, #4A2C5F 100%);
  display: grid; place-items: center;
  color: var(--mv-cream);
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 120px); letter-spacing: -0.03em;
  max-width: var(--maxw); margin: 0 auto;
}

.outcome-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--mv-line); border-bottom: 1px solid var(--mv-line);
}
.outcome { padding: 40px 28px; border-right: 1px solid var(--mv-line); }
.outcome:last-child { border-right: 0; }
.outcome .n { font-family: var(--ff-display); font-weight: 700; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.03em; }
.outcome .l { color: var(--mv-dust); margin-top: 8px; font-size: 14px; }
@media (max-width: 900px) { .outcome-grid { grid-template-columns: repeat(2, 1fr); } .outcome:nth-child(2) { border-right: 0; } }

/* Scaffold pages */
.scaffold {
  padding: 140px var(--gutter) 120px;
}
.scaffold .h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(56px, 9vw, 144px); line-height: 0.9; letter-spacing: -0.04em;
  margin: 24px 0 28px; text-wrap: balance;
}
.scaffold .lede { font-size: var(--fs-lede); color: var(--mv-dust); max-width: 56ch; line-height: 1.4; margin-bottom: 64px; }

.scaffold-list { display: grid; gap: 0; border-top: 1px solid var(--mv-line); }
.scaffold-row {
  display: grid; grid-template-columns: 80px 1fr 180px 120px;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--mv-line);
  align-items: center;
  transition: background 200ms, padding 200ms;
}
.scaffold-row:hover { background: rgba(184,242,48,0.04); padding-left: 16px; padding-right: 16px; }
.scaffold-row .num { color: var(--mv-dust); }
.scaffold-row .title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.02em; }
.scaffold-row .role { color: var(--mv-dust); }
.scaffold-row .arrow { color: var(--mv-lime); justify-self: end; }
@media (max-width: 720px) {
  .scaffold-row { grid-template-columns: 1fr; gap: 6px; }
  .scaffold-row .arrow { justify-self: start; }
}

/* Sub-page nav variant — dark translucent with lime CTA */
body.subpage .nav {
  background: rgba(10, 11, 10, 0.72);
  color: var(--mv-cream);
  border-bottom: 1px solid var(--mv-line);
  backdrop-filter: blur(10px);
}
body.subpage .nav .nav-cta { border-color: var(--mv-lime); color: var(--mv-lime); }
body.subpage .nav .nav-cta:hover { background: var(--mv-lime); color: var(--mv-ink); }

/* Dark-on-black practice tiles in sub-pages */
body.subpage section.black .practice-tile { background: var(--mv-char); color: var(--mv-cream); }
body.subpage section.black .practice-tile .pt-line { color: #b8b8b2; }
body.subpage section.black .practices-grid { background: var(--mv-line); border-color: var(--mv-line); }
body.subpage section.black .practice-tile:hover { background: var(--mv-black); }
body.subpage section.black .practice-tile:hover .pt-num { color: var(--mv-lime); }

/* About headshots */
.headshot {
  aspect-ratio: 4 / 5;
  background: var(--mv-char);
  border: 1px solid var(--mv-line);
  display: grid;
  place-items: end start;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.headshot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(184, 242, 48, 0.15), transparent 60%);
}
.headshot .nm { font-family: var(--ff-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; position: relative; }
.headshot .rl { position: relative; color: var(--mv-dust); }

/* Insights sub-page — cream variant */
body.subpage.cream-page { background: var(--mv-cream); color: var(--mv-ink); }
body.subpage.cream-page .nav {
  background: rgba(245, 241, 232, 0.92);
  color: var(--mv-ink);
  border-bottom: 1px solid var(--mv-bone);
}
body.subpage.cream-page .nav .nav-cta { border-color: var(--mv-ink); color: var(--mv-ink); }
body.subpage.cream-page .nav .nav-cta:hover { background: var(--mv-ink); color: var(--mv-cream); }
body.subpage.cream-page .scaffold .h,
body.subpage.cream-page .scaffold .lede { color: var(--mv-ink); }
body.subpage.cream-page .scaffold .lede { color: #4a4b44; }
body.subpage.cream-page .scaffold-list,
body.subpage.cream-page .scaffold-row { border-color: var(--mv-bone); }
body.subpage.cream-page .scaffold-row:hover { background: rgba(184, 242, 48, 0.1); }
body.subpage.cream-page .scaffold-row .num,
body.subpage.cream-page .scaffold-row .role { color: #6a6b63; }
body.subpage.cream-page .scaffold-row .arrow { color: #2b3a0d; }

/* Case study — Ezekiel: gallery / interview / CEO */

/* Four-column case facts (add class `cols-4` to the .case-facts div) */
.case-facts.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 1) Photo gallery — section.black */
.case-gallery-section { padding: 80px var(--gutter); }
.case-gallery-head {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 48px; text-wrap: balance;
}
.case-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: var(--maxw); margin: 0 auto;
}
.case-shot { margin: 0; }
.case-shot-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mv-char);
  border: 1px solid var(--mv-line);
}
.case-shot-frame img,
.case-shot-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.case-shot-empty {
  display: none;
  position: absolute; inset: 0;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed var(--mv-line);
  color: var(--mv-dust);
}
.case-shot.is-empty .case-shot-frame img { display: none; }
.case-shot.is-empty .case-shot-empty { display: grid; }
.case-shot figcaption {
  font-family: var(--ff-mono);
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--mv-dust);
  margin-top: 14px;
}

/* 2) Interview — section.cream (light / ink) */
.case-interview-section { padding: 80px var(--gutter); }
.case-interview-head {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 16px; color: var(--mv-ink); text-wrap: balance;
}
.case-interview-byline {
  color: #6a6b63;
  margin: 0 0 48px;
}
.case-interview {
  display: grid; gap: 48px;
  max-width: 70ch;
}
.qa {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start;
}
.qa-num {
  font-family: var(--ff-mono);
  font-size: 14px; letter-spacing: 0.04em;
  color: #6a6b63;
  padding-top: 4px;
}
.qa-q {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -0.015em;
  color: var(--mv-ink);
  margin: 0 0 14px;
}
.qa-a {
  font-family: var(--ff-body);
  font-size: 19px; line-height: 1.6;
  color: #4a4b44;
  margin: 0;
}
.qa-a.is-await {
  color: var(--mv-dust);
  font-style: italic;
}

/* 3) CEO quote — section.char (dark) */
.case-ceo-section { padding: 96px var(--gutter); }
.case-ceo {
  max-width: 1000px; margin: 0 auto;
}
.case-ceo-quote {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--mv-cream);
  margin: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 3px solid var(--mv-lime);
  text-wrap: balance;
}
.case-ceo-quote.is-await {
  color: var(--mv-dust);
  font-style: italic;
}
.case-ceo-attr {
  font-family: var(--ff-mono);
  font-size: 14px; letter-spacing: 0.03em;
  color: var(--mv-dust);
  margin-top: 28px;
  padding-left: clamp(20px, 3vw, 40px);
}
.case-ceo-attr a { color: var(--mv-lime); border-bottom: 1px solid transparent; }
.case-ceo-attr a:hover { border-bottom-color: var(--mv-lime); }

/* 4) Feature video inside the article body (full-bleed within case-body) */
.case-feature-shot {
  margin: 56px 0;
  padding: 0;
}
.case-feature-video {
  width: 100%;
  max-height: 80vh;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--mv-char);
  border: 1px solid var(--mv-line);
}
.case-feature-img {
  width: 100%;
  max-height: 78vh;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  background: var(--mv-char);
  border: 1px solid var(--mv-line);
}
.case-feature-shot figcaption {
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mv-dust);
  margin-top: 14px;
}

/* 5) Founder band — section.char (dark), logo + bio side by side */
.case-founder-section { padding: 96px var(--gutter); }
.case-founder {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: 1200px; margin: 0 auto;
}
.case-founder-logo {
  display: grid; place-items: center;
  padding: clamp(32px, 5vw, 64px);
  background: var(--mv-black);
  border: 1px solid var(--mv-line);
}
.case-founder-logo img {
  width: 100%; max-width: 320px; height: auto; display: block;
}
.case-founder-head {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.025em;
  margin: 16px 0 20px; color: var(--mv-cream); text-wrap: balance;
}
.case-founder-body > p {
  font-size: 18px; line-height: 1.6; color: #c9c9c2; margin: 0 0 28px; max-width: 60ch;
}
.case-founder-body .case-ceo-quote {
  font-size: clamp(22px, 2.4vw, 32px);
}

/* Responsive */
@media (max-width: 980px) {
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .case-founder { grid-template-columns: 1fr; gap: 28px; }
  .case-founder-logo { padding: 40px; }
  .case-founder-logo img { max-width: 240px; }
}
@media (max-width: 720px) {
  .case-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .case-facts.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .case-facts.cols-4 .cf:nth-child(2n) { border-right: 0; }
  .qa { grid-template-columns: 1fr; gap: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .case-shot-frame img { transition: none; }
}