/* InspiredWorkx Diagnostic report: A4, print first. Same type and colour as the site.
   Conventions borrowed from consulting reports: the answer first, action titles that state
   the finding, numbered exhibits with a source line under each, running header and footer. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --navy: #101722;
  --white: #fff;
  --magenta: #c2378b;
  --magenta-deep: #a70762;
  --violet: #5c42b8;
  --ink-2: #585d64;
  --hair: #d4d6d7;
  --frame: #f4f5f5;
  --tint: #faf3f7;
  --display: "Bricolage Grotesque", Arial, sans-serif;
  --body: "Poppins", Arial, sans-serif;
  --pad-x: 20mm;
  --pad-top: 18mm;
  --pad-bottom: 18mm;
}
@page {
  size: A4;
  margin: 0;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body {
  background: #d9dbdd;
  font-family: var(--body);
  color: var(--navy);
  font-size: 9.5pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.report {
  display: grid;
  gap: 10mm;
  justify-content: center;
  padding: 10mm 0;
}
.page {
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: var(--white);
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-shadow: 0 2mm 8mm rgb(16 23 34 / 0.18);
  display: flex;
  flex-direction: column;
}
@media print {
  body {
    background: none;
  }
  .report {
    display: block;
    padding: 0;
  }
  .page {
    box-shadow: none;
    break-after: page;
  }
}
@media screen and (max-width: 840px) {
  .report {
    zoom: 0.45;
  }
}

/* Running header and footer */
.run {
  position: absolute;
  top: 9mm;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  font-size: 7pt;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.foot {
  position: absolute;
  bottom: 9mm;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  font-size: 7pt;
  color: var(--ink-2);
  border-top: 0.5pt solid var(--hair);
  padding-top: 2.5mm;
}
.foot span:last-child {
  font-weight: 600;
  color: var(--navy);
}
.sample-tag {
  color: var(--magenta-deep);
  font-weight: 600;
}

/* Type */
.eyebrow {
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-deep);
}
.eyebrow--gap {
  margin-top: 7mm;
}
.action {
  margin-top: 2.5mm;
  font-family: var(--display);
  font-weight: 620;
  font-size: 19pt;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 160mm;
  text-wrap: balance;
}
.action--sm {
  font-size: 16pt;
}
.lede {
  margin-top: 5mm;
  font-size: 11pt;
  line-height: 1.5;
  max-width: 150mm;
  color: var(--navy);
}
.prose {
  margin-top: 5mm;
  display: grid;
  gap: 2.5mm;
  max-width: 150mm;
}
.minor {
  font-family: var(--display);
  font-weight: 620;
  font-size: 10.5pt;
  letter-spacing: -0.005em;
  padding-bottom: 2mm;
  border-bottom: 0.75pt solid var(--navy);
  margin-bottom: 3mm;
}
.minor--gap {
  margin-top: 6mm;
}
.note {
  margin-top: 2mm;
  font-size: 7.5pt;
  color: var(--ink-2);
}
strong {
  font-weight: 600;
}

/* Cover */
.cover {
  background: var(--navy);
  color: var(--white);
  padding: 22mm var(--pad-x) 16mm;
}
.cover__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cover__logo svg {
  width: 46mm;
  height: auto;
  display: block;
  color: var(--white);
}
.cover__kind {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b7b9bd;
}
.cover__thread {
  position: absolute;
  left: 0;
  top: 52mm;
  width: 100%;
  height: auto;
}
.cover__thread path {
  fill: none;
  stroke: var(--magenta);
  stroke-width: 3;
  stroke-linecap: round;
}
.cover__thread circle {
  fill: var(--navy);
  stroke: var(--magenta);
  stroke-width: 3;
}
.cover__body {
  margin-top: auto;
}
.cover__client {
  font-size: 10pt;
  font-weight: 600;
  color: #b7b9bd;
}
.cover__title {
  margin-top: 4mm;
  font-family: var(--display);
  font-weight: 640;
  font-size: 30pt;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 160mm;
  text-wrap: balance;
}
.cover__sub {
  margin-top: 5mm;
  font-size: 11pt;
  color: #b7b9bd;
  max-width: 130mm;
}
.cover__meta {
  margin-top: 12mm;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5mm;
  border-top: 0.75pt solid #363c45;
  padding-top: 4mm;
}
.cover__meta dt {
  font-size: 7pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b7b9bd;
}
.cover__meta dd {
  margin-top: 1mm;
  font-size: 8.5pt;
  line-height: 1.4;
}
.cover__foot {
  margin-top: 10mm;
  display: grid;
  gap: 2mm;
  font-size: 7pt;
  color: #b7b9bd;
}
.sample-flag {
  display: inline-block;
  justify-self: start;
  padding: 1.5mm 3mm;
  border-radius: 1mm;
  background: var(--magenta);
  color: var(--white);
  font-weight: 600;
  font-size: 7.5pt;
}
.sample-flag--light {
  background: var(--tint);
  color: var(--magenta-deep);
}

/* Executive summary */
.findings {
  list-style: none;
  margin-top: 8mm;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.75pt solid var(--navy);
}
.findings li {
  padding: 4mm 5mm 0 0;
}
.findings li + li {
  padding-left: 5mm;
  border-left: 0.5pt solid var(--hair);
}
.findings__fig {
  font-family: var(--display);
  font-weight: 640;
  font-size: 30pt;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--magenta-deep);
}
.findings__fig span {
  font-size: 10pt;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--navy);
}
.findings__what {
  margin-top: 3mm;
  font-size: 8.5pt;
}
.findings__what strong {
  display: block;
}
.two {
  margin-top: 9mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
}
.steps {
  padding-left: 4.5mm;
  display: grid;
  gap: 2.5mm;
  font-size: 8.5pt;
}
.steps li::marker {
  font-weight: 600;
  color: var(--magenta-deep);
}
.kpi {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
}
.kpi th,
.kpi td {
  text-align: left;
  padding: 1.8mm 0;
  border-bottom: 0.5pt solid var(--hair);
}
.kpi thead th {
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
}
.kpi tbody th {
  font-weight: 400;
}
.kpi td {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* Exhibits */
.exhibit {
  margin-top: 7mm;
}
.exhibit figcaption {
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5pt;
  line-height: 1.3;
  padding-bottom: 2.5mm;
  border-bottom: 0.75pt solid var(--navy);
  margin-bottom: 4mm;
}
.exhibit__no {
  display: block;
  font-family: var(--body);
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta-deep);
  margin-bottom: 1mm;
}
.source {
  margin-top: 3mm;
  font-size: 7pt;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 165mm;
}
.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
}
.data th,
.data td {
  text-align: left;
  padding: 2mm 3mm 2mm 0;
  border-bottom: 0.5pt solid var(--hair);
  vertical-align: top;
}
.data thead th {
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
}
.data tbody th {
  font-weight: 600;
  width: 38%;
}
.data td.num {
  font-weight: 600;
  white-space: nowrap;
}
.data--accounts tbody th {
  width: 26%;
}

/* Exhibit 1: process flow */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2mm;
  counter-reset: s;
}
.flow__step {
  position: relative;
  padding: 3mm;
  min-height: 24mm;
  border-radius: 1.5mm;
  background: var(--frame);
  display: grid;
  align-content: start;
  gap: 1mm;
}
.flow__step b {
  font-size: 8.5pt;
}
.flow__step i {
  font-style: normal;
  font-size: 7.5pt;
  color: var(--ink-2);
  line-height: 1.35;
}
.flow__step em {
  position: absolute;
  left: 3mm;
  bottom: 2.5mm;
  font-style: normal;
  font-size: 6.5pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta-deep);
}
.flow__step--loss {
  background: var(--tint);
  box-shadow: inset 0 0 0 0.75pt var(--magenta);
}
.flow__step + .flow__step::before {
  content: "";
  position: absolute;
  left: -2mm;
  top: 50%;
  width: 2mm;
  height: 0.75pt;
  background: var(--navy);
}

/* Charts */
.chart {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--body);
}
.chart .lab {
  font-size: 11px;
  text-anchor: end;
  fill: var(--navy);
}
.chart .val {
  font-size: 12px;
  font-weight: 600;
  fill: var(--navy);
}
.chart .sm {
  font-size: 10px;
  fill: var(--ink-2);
}
.chart__axis line {
  stroke: var(--navy);
  stroke-width: 1;
}
.chart .ticks text {
  font-size: 10px;
  fill: var(--ink-2);
  text-anchor: middle;
}
.bar {
  fill: #c9ccd0;
}
.bar--warn {
  fill: #e3a6c9;
}
.bar--loss {
  fill: var(--magenta);
}
.chart__brace path {
  fill: none;
  stroke: var(--magenta-deep);
  stroke-width: 1.25;
}
.chart__brace text {
  font-size: 12px;
  font-weight: 600;
  fill: var(--magenta-deep);
}
.chart__brace text.sm {
  font-weight: 400;
  fill: var(--ink-2);
  font-size: 10px;
}
.median {
  stroke: var(--navy);
  stroke-dasharray: 3 3;
}
.zone {
  fill: var(--tint);
}
.zone__t {
  fill: var(--magenta-deep);
  font-weight: 600;
}
.dot {
  stroke-width: 2;
}
.dot--won {
  fill: var(--navy);
  stroke: var(--navy);
}
.dot--lost {
  fill: var(--magenta);
  stroke: var(--magenta);
}
.dot--open {
  fill: var(--white);
  stroke: var(--navy);
}
.legend {
  list-style: none;
  display: flex;
  gap: 6mm;
  margin-top: 2mm;
  font-size: 7.5pt;
  color: var(--ink-2);
}
.legend li {
  display: flex;
  align-items: center;
  gap: 1.5mm;
}
.legend i {
  width: 3mm;
  height: 3mm;
  border-radius: 50%;
  border: 1.5pt solid;
  display: inline-block;
}
.legend .dot--won {
  background: var(--navy);
  border-color: var(--navy);
}
.legend .dot--lost {
  background: var(--magenta);
  border-color: var(--magenta);
}
.legend .dot--open {
  background: var(--white);
  border-color: var(--navy);
}
.three-losses {
  margin-top: 7mm;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5mm;
  font-size: 8.5pt;
  padding-top: 4mm;
  border-top: 0.75pt solid var(--navy);
}
.three-losses strong {
  display: block;
}

/* Score table */
.score {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
}
.score th,
.score td {
  padding: 2.2mm 1.5mm;
  border-bottom: 0.5pt solid var(--hair);
  text-align: center;
  vertical-align: middle;
}
.score thead th {
  font-size: 6.5pt;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.3;
}
.score thead th:nth-child(1),
.score thead th:nth-child(2) {
  text-align: left;
}
.score tbody th {
  text-align: left;
  font-weight: 600;
  width: 27%;
}
.score td:nth-child(2) {
  text-align: left;
  color: var(--ink-2);
  width: 24%;
}
.s2 {
  background: #f3d9e8;
  font-weight: 600;
}
.s1 {
  background: #faf0f5;
}
.s0 {
  background: var(--white);
  color: var(--ink-2);
}
.tot {
  font-family: var(--display);
  font-weight: 640;
  font-size: 12pt;
  color: var(--magenta-deep);
}
.key {
  margin-top: 8mm;
}
.key dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm 8mm;
  font-size: 8pt;
}
.key dt {
  font-weight: 600;
}
.key dd {
  color: var(--ink-2);
}

/* Verdict and plan */
.verdict {
  margin-top: 3mm;
  padding: 6mm;
  border-radius: 2mm;
  background: var(--navy);
  color: var(--white);
}
.verdict__label {
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7b9bd;
}
.verdict__answer {
  font-family: var(--display);
  font-weight: 640;
  font-size: 22pt;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 1mm;
}
.verdict ul {
  margin-top: 3mm;
  padding-left: 4mm;
  font-size: 8.5pt;
  display: grid;
  gap: 1mm;
}
.verdict ul li::marker {
  color: var(--magenta);
}
.verdict__cond {
  margin-top: 4mm;
  padding-top: 3mm;
  border-top: 0.5pt solid #363c45;
  font-size: 8.5pt;
}
.plan {
  list-style: none;
  margin-top: 3mm;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  font-size: 8.5pt;
}
.plan li {
  display: grid;
  gap: 2mm;
  align-content: start;
  padding-top: 3mm;
  border-top: 0.75pt solid var(--navy);
}
.plan span {
  width: 6mm;
  height: 6mm;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 7.5pt;
}
.plan strong {
  display: block;
}
.data--accounts {
  margin-top: 2mm;
}
.next {
  margin-top: 2mm;
  font-size: 11pt;
  max-width: 150mm;
}

/* Appendix */
.method {
  padding-left: 4.5mm;
  display: grid;
  gap: 2mm;
  font-size: 8.5pt;
}
.method li::marker {
  font-weight: 600;
  color: var(--magenta-deep);
}
.plain {
  padding-left: 4mm;
  display: grid;
  gap: 1.5mm;
  font-size: 8.5pt;
}
.plain li::marker {
  color: var(--magenta);
}
.signoff {
  margin-top: 8mm;
  padding-top: 5mm;
  border-top: 0.75pt solid var(--navy);
  display: grid;
  gap: 3mm;
  font-size: 8.5pt;
  margin-bottom: 6mm;
}

/* Contents */
.toc {
  margin-top: auto;
  margin-bottom: 8mm;
  padding-top: 4mm;
  border-top: 0.75pt solid var(--navy);
}
.toc__h {
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.toc ol {
  list-style: none;
  margin-top: 2mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10mm;
  font-size: 8.5pt;
}
.toc li {
  display: grid;
  grid-template-columns: 6mm 1fr auto;
  padding: 1.6mm 0;
  border-bottom: 0.5pt solid var(--hair);
}
.toc li span {
  font-weight: 600;
  color: var(--magenta-deep);
}
.toc li i {
  font-style: normal;
  font-weight: 600;
}
/* What is already working */
.working {
  margin-top: 7mm;
  padding: 5mm;
  border-radius: 2mm;
  background: var(--frame);
}
.working__h {
  font-family: var(--display);
  font-weight: 620;
  font-size: 10.5pt;
}
.working ul {
  margin-top: 2.5mm;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5mm;
  font-size: 8.5pt;
}
.working strong {
  display: block;
}
/* The summary stands alone: it names the firm, the author and the evidence at its head */
.summary-id {
  font-size: 7.5pt;
  line-height: 1.45;
  color: var(--ink-2);
  padding-bottom: 3mm;
  margin-bottom: 4mm;
  border-bottom: 0.5pt solid var(--hair);
}

#page-2 .two {
  margin-bottom: 7mm;
}
#page-2 .findings {
  margin-top: 6mm;
}
#page-2 .two {
  margin-top: 6mm;
}
#page-2 .toc {
  margin-bottom: 6mm;
}