/* Projects page v3 — the mjcxstudio.com (live site) design rules applied to
   the v2 projects content. Loaded on /projects only, scoped under .pjv3.
   Leonard 2026-09-27: "the original website rules — the fonts, the sizes …
   something in between" — v2 content, live-site calm.

   Rules taken from the live stylesheet (www.mjcxstudio.com/css/styles.css):
   - Fonts: the HOUSE fonts (ground rules, Leonard 2026-09-27) — Futura for
     headings and UI (Medium; Bold only for h2/h3), Georgia for reading text
     and never bold (emphasis = colour), Consolas labels at 12px (the
     'Consolas Text' alias in styles.css scales them ~15% more).
   - Type scale — 8 sizes only: 12 label · 14 small/UI · 16 body ·
     19 subtitle · 22 case title · 26 quote · 42 h2 · 56 h1.
   - Color: the HOUSE palette, unchanged (Leonard 2026-09-27: "keep the
     colour") — text tokens, bronze signal accent, house hairlines.
   - Space over boxes: hairline dividers instead of tinted cards, pills and
     nested panels; 1100px column; 100px section rhythm. */

.pjv3 {
  /* house colours (styles.css :root) — only the aliases live here */
  --x-ink: var(--text);
  --x-2: var(--text-2);
  --x-3: var(--text-3);
  --x-4: var(--text-4);
  --x-5: var(--line-strong);
  --x-line: var(--line);
  --x-line-soft: var(--line-soft);
  --x-bg-subtle: var(--bg-subtle);
  --x-accent: var(--signal-deep);
  --x-sans: var(--font-display);
  --x-serif: var(--font-body);
  --x-mono: var(--font-mono);
  --x-shadow: var(--sh-md);
  font-family: var(--x-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--x-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- layout */
.pjv3 .wrap { max-width: 1100px; padding: 0 40px }
.pjv3 .pj-herohead { padding: 120px 0 0 }
.pjv3 .pj-service,
.pjv3 .pj-body,
.pjv3 .pj-know { padding: 100px 0 0 }
.pjv3 .faq { padding: 100px 0 120px }

/* ------------------------------------------------------------ typography */
.pjv3 h1, .pjv3 h2, .pjv3 h3 {
  font-family: var(--x-sans); font-weight: 600; color: var(--x-ink);
  letter-spacing: -0.03em;
}
.pjv3 h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500 }
.pjv3 h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08 }
.pjv3 h3 { font-size: 22px; line-height: 1.25 }
.pjv3 .lede,
.pjv3 .section-sub {
  font-family: var(--x-serif); font-size: 19px; line-height: 1.6;
  color: var(--x-2); max-width: 620px;
}
.pjv3 p { font-family: var(--x-serif) }
/* ground rule: no bold Georgia — emphasis is colour; Futura spots stay Medium */
.pjv3 strong, .pjv3 b { color: var(--x-ink); font-weight: 400 }

/* one label style everywhere (the live .label) */
.pjv3 .pj-sec__body h4,
.pjv3 .pj-industry__label,
.pjv3 .phb__wk,
.pjv3 .phb__tlab,
.pjv3 .pcy__cadlab,
.pjv3 .know-card__eyebrow,
.pjv3 .pj-tag {
  font: 400 12px/1.4 var(--x-mono); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--x-4);
}

/* ------------------------------------------------- section 2: phase blocks */
.pjv3 .phb { gap: 0 16px; margin-top: 40px }
.pjv3 .phb__b,
.pjv3 .phb__b--prep, .pjv3 .phb__b--exec, .pjv3 .phb__b--long {
  background: #fff; border: 1px solid var(--x-line); border-radius: 10px;
  padding: 0;  /* the rows carry their own padding (old mobile rule doubled it) */
}
.pjv3 .phb__name { padding: 24px 24px 0 }
.pjv3 .phb__name b { font: 500 14px/1.4 var(--x-sans); color: var(--x-3); letter-spacing: 0 }
.pjv3 .phb__title {
  padding: 8px 24px 20px; font: 500 22px/1.25 var(--x-sans);
  letter-spacing: -0.03em; color: var(--x-ink);
}
.pjv3 .phb__list { padding: 0 24px 24px }
.pjv3 .phb__list li,
.pjv3 .phb__pay li {
  font: 400 14px/1.55 var(--x-sans); color: var(--x-2); padding-left: 14px;
}
.pjv3 .phb__list li+li { margin-top: 8px }
.pjv3 .phb__list li::before,
.pjv3 .phb__pay li::before {
  width: 4px; height: 4px; border-radius: 50%; top: .6em;
  background: var(--x-5); opacity: 1;
}
.pjv3 .phb__cat { font: 400 14px/1.55 var(--x-sans); color: var(--x-4) }
.pjv3 .phb__pay { padding: 20px 24px; border-top: 1px solid var(--x-line-soft) }
.pjv3 .phb__price { font: 500 17px/1.4 var(--x-sans); color: var(--x-ink); letter-spacing: -0.01em }
.pjv3 .phb__pricesub { font: 400 14px/1.5 var(--x-sans); color: var(--x-3) }
.pjv3 .phb__pay ul { margin-top: 10px }
.pjv3 .phb__pay li { color: var(--x-3) }
.pjv3 .phb__pay li+li { margin-top: 6px }
.pjv3 .phb__when {
  padding: 20px 24px 24px; border-top: 1px solid var(--x-line-soft);
  font: 400 14px/1.55 var(--x-sans); color: var(--x-3);
}
.pjv3 .phb__tlab { margin-bottom: 8px }

/* ------------------------------------------------------- case studies */
.pjv3 .pj-reporthead .section-sub { max-width: 620px }
.pjv3 .pj-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 56px }
.pjv3 .pj-side__nav { top: 96px; border-left: 1px solid var(--x-line) }
.pjv3 .pj-side__link {
  font: 400 14px/1.4 var(--x-sans); color: var(--x-3);
  padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent;
}
.pjv3 .pj-side__link:hover { color: var(--x-ink) }
.pjv3 .pj-side__nav .pj-side__link { white-space: nowrap }
.pjv3 .pj-side__link.is-active { color: var(--x-ink); font-weight: 500; border-left-color: var(--x-ink) }

.pjv3 .pj-industry { margin: 120px 0 0; padding-top: 16px; border-top: 1px solid var(--x-line) }
.pjv3 .pj-main .pj-industry:first-child { margin-top: 0 }
.pjv3 .pj-sec { margin-top: 0 }
.pjv3 .pj-sec__head { gap: 8px 12px; margin-top: 24px }
.pjv3 .pj-sec__num { font: 400 15px/1.25 var(--x-mono); color: var(--x-accent) }
.pjv3 .pj-case .pj-sec__head h3 { max-width: 30ch }
/* tags → one quiet meta line, no pills */
.pjv3 .pj-tags { gap: 0; margin-top: 4px }
.pjv3 .pj-tag { border: 0; border-radius: 0; padding: 0 }
.pjv3 .pj-tag + .pj-tag::before { content: "\00B7"; margin: 0 10px; color: var(--x-5) }
.pjv3 .pj-hero { margin-top: 28px }
.pjv3 .pj-hero img { border-radius: 10px; border: 0; background: var(--x-bg-subtle) }

.pjv3 .pj-need {
  margin: 40px 0 0; max-width: 30ch;
  font: italic 400 26px/1.4 var(--x-serif); letter-spacing: -0.01em; color: var(--x-ink);
}
.pjv3 .pj-sec__body { max-width: 640px }
.pjv3 .pj-sec__body h4 { margin: 48px 0 12px }
.pjv3 .pj-sec__body p { font-size: 16px; line-height: 1.7; color: var(--x-2); margin-top: 12px }
.pjv3 .pj-sec__body > h4 + p { margin-top: 0 }

/* modules: hairline rows, no panel / tint / left bar */
.pjv3 .pj-cs { border: 0; border-radius: 0; background: none; margin: 0; overflow: visible }
.pjv3 .pj-cs .pj-mod {
  background: none; border: 0; border-top: 1px solid var(--x-line); border-radius: 0;
}
.pjv3 .pj-cs .pj-mod:last-child { border-bottom: 1px solid var(--x-line) }
.pjv3 .pj-mod__head { padding: 16px 40px 16px 0 }
.pjv3 .pj-mod__head:hover { background: none }
.pjv3 .pj-mod__head:hover .pj-mod__name { color: var(--x-accent) }
.pjv3 .pj-mod__name {
  display: inline; font: 500 17px/1.4 var(--x-sans); letter-spacing: -0.01em;
  color: var(--x-ink); transition: color .2s;
}
.pjv3 .pj-mod__cat { display: inline; margin-left: 6px; font: 400 14px/1.4 var(--x-sans); color: var(--x-4) }
.pjv3 .pj-mod__covers { margin-top: 4px; font: 400 14px/1.55 var(--x-sans); color: var(--x-3) }
.pjv3 .pj-mod__coverslab { font-weight: 500; color: var(--x-3) }
.pjv3 .pj-mod__x { top: 19px; right: 0; width: 14px; height: 14px }
.pjv3 .pj-mod__x::before { width: 12px; height: 1.5px; left: 1px; top: 6px; background: var(--x-4) }
.pjv3 .pj-mod__x::after { width: 1.5px; height: 12px; left: 6.25px; top: 1px; background: var(--x-4) }
.pjv3 .pj-mod__body { padding: 0 0 20px; border-top: 0 }
.pjv3 .pj-mod__body .pcy__list li {
  font: 400 14px/1.6 var(--x-sans); color: var(--x-2); padding-left: 14px;
}
.pjv3 .pj-mod__body .pcy__list li+li { margin-top: 8px }
.pjv3 .pj-mod__body .pcy__list li::before {
  width: 4px; height: 4px; border-radius: 50%; top: .65em; background: var(--x-5); opacity: 1;
}
.pjv3 .pj-mod__when { margin-top: 16px; padding: 0 }
.pjv3 .pj-mod__when p { font: 400 14px/1.55 var(--x-sans); color: var(--x-3); margin-top: 6px }

/* solution slider: frames stay (they are the content), chrome goes quiet */
.pjv3 .pj-prj { margin-top: 4px }
.pjv3 .pj-prj__frame--mac, .pjv3 .pj-prj__frame--phone { box-shadow: var(--x-shadow) }
.pjv3 .pj-prj__bar { gap: 16px; margin-top: 20px }
.pjv3 .pj-prj__arr {
  width: 36px; height: 36px; border: 1px solid var(--x-line); border-radius: 6px;
  font: 400 14px/1 var(--x-sans); color: var(--x-3); background: #fff;
}
.pjv3 .pj-prj__arr:hover { border-color: var(--x-ink); color: var(--x-ink) }
.pjv3 .pj-prj__seg i,
.pjv3 .pj-prj__seg.is-on i { height: 2px; border-radius: 1px }
.pjv3 .pj-prj__seg i { background: var(--x-line) }
.pjv3 .pj-prj__seg.is-on i { background: var(--x-ink) }
.pjv3 .pj-sec__body .pj-prj__cap { font: 400 14px/1.55 var(--x-sans); color: var(--x-3); margin-top: 12px }

/* full-report link → the live site's ghost button */
.pjv3 .pj-fullreport { margin-top: 32px }
.pjv3 .pj-fullreport a {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
  border: 1px solid var(--x-line); border-radius: 6px; background: #fff;
  font: 500 14px/1 var(--x-sans); letter-spacing: 0; color: var(--x-ink);
  text-decoration: none; transition: border-color .2s, color .2s;
}
.pjv3 .pj-fullreport a:hover { border-color: var(--x-ink) }

/* --------------------------------------------------- know + FAQ + CTA */
.pjv3 .know__row { gap: 64px }
.pjv3 .know-card {
  gap: 12px; padding: 24px; border: 1px solid var(--x-line); border-radius: 10px;
  box-shadow: none; transform: none;
}
.pjv3 .know-card:hover { border-color: var(--x-ink); box-shadow: none; transform: none }
.pjv3 .know-card__title { font: 500 17px/1.4 var(--x-sans); color: var(--x-ink); letter-spacing: -0.01em }
.pjv3 .know-card__go { font: 500 14px/1 var(--x-sans); color: var(--x-accent) }

.pjv3 .faq .sec-head { max-width: 760px }
.pjv3 .faq__list { max-width: 760px; gap: 0 }
.pjv3 .faq__item {
  background: none; border: 0; border-top: 1px solid var(--x-line); border-radius: 0;
}
.pjv3 .faq__item:last-child { border-bottom: 1px solid var(--x-line) }
.pjv3 .faq__item:hover { box-shadow: none }
.pjv3 .faq__item summary {
  padding: 22px 0; font: 500 17px/1.4 var(--x-sans); letter-spacing: -0.01em; color: var(--x-ink);
}
.pjv3 .faq__item summary:hover { color: var(--x-accent) }
.pjv3 .faq__item summary i { width: 14px; height: 14px }
.pjv3 .faq__item summary i::before { width: 12px; height: 1.5px; left: 1px; top: 6px; background: var(--x-4) }
.pjv3 .faq__item summary i::after { width: 1.5px; height: 12px; left: 6.25px; top: 1px; background: var(--x-4) }
.pjv3 .faq__a { padding: 0 0 24px }
.pjv3 .faq__a p,
.pjv3 .faq__a ul { font: 400 16px/1.7 var(--x-serif); color: var(--x-2); max-width: 640px }
.pjv3 .faq__a .faq__sa { font-weight: 400; color: var(--x-ink) }
.pjv3 .faq__table { font: 400 14px/1.55 var(--x-sans) }
.pjv3 .faq__table th { font-weight: 600; color: var(--x-ink) }
.pjv3 .faq__table td { color: var(--x-2) }
.pjv3 .faq__a a { text-decoration-color: var(--x-accent) }

/* band keeps the house dark + house buttons (colours untouched); only the
   glow goes and the type joins the scale */
.pjv3 .cta-band { padding: 120px 0 }
.pjv3 .cta-band::before { display: none }
.pjv3 .cta-band h2 { max-width: 20ch; color: #fff }  /* .pjv3 h2 ink would win otherwise */
.pjv3 .cta-band p { font: 400 19px/1.6 var(--x-serif); color: var(--on-dark-2) }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .pjv3 .pj-herohead { padding-top: 96px }
  .pjv3 .pj-service, .pjv3 .pj-body, .pjv3 .pj-know { padding-top: 72px }
  .pjv3 .faq { padding: 72px 0 96px }
  .pjv3 .pj-layout { gap: 40px }
}
@media (max-width: 900px) {
  .pjv3 .pj-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px }
  .pjv3 .pj-side__nav { top: 58px; border-left: 0; border-bottom: 1px solid var(--x-line) }
  .pjv3 .pj-side__link {
    border: 1px solid var(--x-line); border-radius: 999px; margin-left: 0;
    padding: 6px 14px; font-size: 14px;
  }
  .pjv3 .pj-side__link.is-active { border-color: var(--x-ink) }
  .pjv3 .pj-industry { margin-top: 88px }
  .pjv3 .phb { gap: 12px }
}
@media (max-width: 768px) {
  .pjv3 .wrap { padding: 0 20px }
  .pjv3 .pj-herohead { padding-top: 72px }
  .pjv3 .pj-service, .pjv3 .pj-body, .pjv3 .pj-know { padding-top: 56px }
  .pjv3 .faq { padding: 56px 0 72px }
  .pjv3 .lede, .pjv3 .section-sub, .pjv3 .cta-band p { font-size: 17px }
  .pjv3 .pj-need { font-size: 21px }
  .pjv3 .cta-band { padding: 88px 0 }
}

/* ----------------------------------------- case-study pages (2026-09-29)
   /projects/powerline, narahome, borderless-hr, cooljek — the live-site
   stories in the v3 look. Hero spans the 1100 column; the story reads in
   the 640 column (.pj-sec__body) with the /projects slider for screens. */
.pjv3 .rp-body { padding-bottom: 120px }
.pjv3 .rp-hero { margin: 0; position: relative }
.pjv3 .rp-hero img {
  display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
}
.pjv3 .rp-note {
  margin-top: 10px; font: 400 12px/1.4 var(--x-mono); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--x-4);
}
.pjv3 .rp { margin: 0 auto }
.pjv3 .pj-tags.rp-tags { margin-top: 28px }
.pjv3 .rp h2 {
  margin: 72px 0 12px; font: 400 12px/1.4 var(--x-mono); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--x-4);
}
.pjv3 .rp h2 + p { margin-top: 0 }
.pjv3 .rp-fig { margin: 32px 0 0 }
.pjv3 .rp-fig img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: var(--x-bg-subtle);
}
.pjv3 .rp-fig--tall img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto }
.pjv3 .rp-fig--tall figcaption { text-align: center }
.pjv3 .rp-fig figcaption,
.pjv3 .rp .pj-prj__cap { font: 400 14px/1.55 var(--x-sans); color: var(--x-3); margin-top: 12px }
.pjv3 .rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px }
.pjv3 .rp-pair img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; background: var(--x-bg-subtle);
}
.pjv3 .rp .pj-prj { margin-top: 40px }
/* "where they started" gauges: label · hairline track · value */
.pjv3 .rp-bars { margin-top: 32px; border-top: 1px solid var(--x-line) }
.pjv3 .rp-bar {
  display: grid; grid-template-columns: 180px 1fr 64px; align-items: center;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--x-line);
}
.pjv3 .rp-bar__label { font: 400 14px/1.4 var(--x-sans); color: var(--x-2) }
.pjv3 .rp-bar__track { height: 2px; background: var(--x-line); position: relative }
.pjv3 .rp-bar__track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--x-accent) }
.pjv3 .rp-bar__value { font: 400 12px/1.4 var(--x-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--x-3); text-align: right }
.pjv3 .rp-back { margin-top: 64px }
@media (max-width: 768px) {
  .pjv3 .rp-hero img { aspect-ratio: 4 / 3 }
  .pjv3 .rp h2 { margin-top: 56px }
  .pjv3 .rp-pair { grid-template-columns: 1fr }
  .pjv3 .rp-bar { grid-template-columns: 1fr 56px; gap: 8px 12px }
  .pjv3 .rp-bar__track { grid-column: 1 / -1; grid-row: 2 }
}