/* Case-study visual system derived directly from the user-supplied HFM case-study page. */
:root {   --navy: #0c1b2a;   --gold: #c7a037;   --paper: #fffdf8;   --muted: #637083;   --line: #e3ded2;   --soft: #f5efe2;   --soft-2: #ede3cf;   --white: #ffffff; }  * { box-sizing: border-box; }  html { scroll-behavior: smooth; }  body {   margin: 0;   background: var(--paper);   color: var(--navy);   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }  body.high-contrast {   --navy: #fff;   --gold: #ffd84d;   --paper: #000;   --muted: #fff;   --line: #fff;   --soft: #111;   --soft-2: #222;   --white: #000;   background: #000;   color: #fff; }  a { color: inherit; }  .skip-link {   position: absolute;   left: -9999px;   top: 0; }  .skip-link:focus {   left: 16px;   top: 16px;   z-index: 100;   background: var(--paper);   color: var(--navy);   border: 2px solid var(--gold);   padding: 10px 14px; }  .sr-only {   position: absolute;   width: 1px;   height: 1px;   padding: 0;   margin: -1px;   overflow: hidden;   clip: rect(0, 0, 0, 0);   white-space: nowrap;   border: 0; }  .container {   max-width: 1080px;   margin: 0 auto;   padding: 48px 24px 80px; }  .toolbar {   display: flex;   justify-content: flex-end;   gap: 12px;   flex-wrap: wrap;   margin-bottom: 48px; }  button, .cta {   border: 1px solid var(--gold);   border-radius: 999px;   padding: 10px 16px;   background: transparent;   color: inherit;   cursor: pointer;   font-size: 14px;   font-weight: 700;   text-decoration: none; }  button.primary, .cta.primary {   background: var(--gold);   color: #0c1b2a; }  button:focus-visible, .cta:focus-visible, a:focus-visible {   outline: 3px solid var(--gold);   outline-offset: 3px; }  .brand {   color: var(--gold);   text-transform: uppercase;   letter-spacing: .30em;   font-size: 13px;   font-weight: 700;   margin-bottom: 56px; }  .eyebrow {   color: var(--gold);   text-transform: uppercase;   letter-spacing: .14em;   font-size: 13px;   font-weight: 800;   margin-bottom: 14px; }  h1 {   font-size: clamp(48px, 8vw, 92px);   line-height: .95;   letter-spacing: -.04em;   margin: 0 0 32px;   max-width: 960px; }  h2 {   font-size: 18px;   letter-spacing: .12em;   text-transform: uppercase;   margin: 0 0 32px; }  h3 {   font-size: clamp(28px, 4vw, 42px);   line-height: 1.05;   letter-spacing: -.03em;   margin: 0 0 18px; }  h4 {   font-size: 24px;   line-height: 1.15;   margin: 0 0 12px; }  .arrow { color: var(--gold); }  .lead {   font-size: clamp(22px, 3vw, 32px);   line-height: 1.3;   max-width: 900px;   margin: 0 0 72px; }  .rule {   width: 72px;   height: 3px;   background: var(--gold);   margin-bottom: 24px; }  section { margin-bottom: 88px; }  .note {   font-size: 18px;   line-height: 1.5;   color: var(--muted);   max-width: 840px;   margin: -12px 0 32px; }  .route {   display: inline-flex;   flex-wrap: wrap;   align-items: center;   gap: 10px;   color: var(--muted);   font-weight: 750;   margin: 0 0 72px; }  .route span[aria-hidden="true"] {   color: var(--gold); }  .before-after {   display: grid;   grid-template-columns: 1fr 1fr;   gap: 18px; }  .card {   background: var(--soft);   border: 1px solid var(--line);   border-radius: 22px;   padding: 28px; }  .before-after p {   font-size: clamp(21px, 2.4vw, 28px);   line-height: 1.28;   margin: 0; }  .quote {   border-left: 4px solid var(--gold);   padding: 8px 0 8px 28px;   max-width: 860px; }  .quote blockquote {   margin: 0;   font-size: clamp(28px, 4vw, 46px);   line-height: 1.12;   letter-spacing: -.025em; }  .quote cite {   display: block;   margin-top: 18px;   color: var(--muted);   font-style: normal;   font-weight: 700; }  .three-up {   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 18px; }  .three-up p {   margin: 0;   font-size: 18px;   line-height: 1.48;   color: var(--muted); }  .artifact-shell {   border: 1px solid var(--line);   border-radius: 30px;   overflow: hidden;   background: var(--white);   box-shadow: 0 24px 70px rgba(12, 27, 42, .08); }  body.high-contrast .artifact-shell {   box-shadow: none; }  .artifact-header {   padding: clamp(28px, 6vw, 64px);   background: var(--paper);   border-bottom: 1px solid var(--line); }  .artifact-header .lead {   margin-bottom: 0;   max-width: 860px; }  .artifact-body {   padding: clamp(28px, 6vw, 64px);   background: var(--paper); }  .grid {   display: grid;   grid-template-columns: repeat(4, 1fr);   gap: 18px; }  .kpi-label {   color: var(--muted);   font-size: 13px;   text-transform: uppercase;   letter-spacing: .12em;   font-weight: 700;   margin-bottom: 10px; }  .kpi-value {   font-size: clamp(28px, 4vw, 44px);   line-height: 1;   letter-spacing: -.03em;   font-weight: 800; }  .argument-grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 18px; }  .argument-card {   background: var(--soft);   border: 1px solid var(--line);   border-radius: 22px;   padding: 26px; }  .argument-card strong {   display: block;   font-size: 13px;   text-transform: uppercase;   letter-spacing: .12em;   color: var(--muted);   margin-bottom: 12px; }  .argument-card p {   margin: 0;   font-size: 19px;   line-height: 1.42; }  .table-wrap { overflow-x: auto; }  table {   width: 100%;   border-collapse: collapse;   min-width: 620px; }  th {   text-align: left;   padding: 0 14px 14px 0;   border-bottom: 1px solid var(--line);   color: var(--muted);   font-size: 13px;   text-transform: uppercase;   letter-spacing: .10em; }  td {   padding: 16px 14px 16px 0;   border-bottom: 1px solid var(--line);   vertical-align: middle; }  .mono {   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;   font-weight: 700; }  .bar-cell { min-width: 260px; }  .index-number {   margin-bottom: 8px;   font-weight: 800; }  .bar-track {   height: 12px;   background: var(--soft-2);   border-radius: 999px;   overflow: hidden; }  .bar-fill {   height: 100%;   background: var(--gold);   border-radius: 999px; }  .steps {   counter-reset: step;   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 18px; }  .step {   counter-increment: step;   border-top: 3px solid var(--gold);   padding-top: 18px; }  .step::before {   content: "0" counter(step);   display: block;   color: var(--gold);   font-weight: 800;   letter-spacing: .14em;   margin-bottom: 18px; }  .step p {   font-size: 18px;   line-height: 1.5;   color: var(--muted);   margin: 0; }  .cta-panel {   background: var(--navy);   color: var(--paper);   border-radius: 28px;   padding: clamp(30px, 6vw, 64px); }  body.high-contrast .cta-panel {   border: 1px solid var(--line); }  .cta-panel p {   max-width: 800px;   font-size: 20px;   line-height: 1.5;   margin: 0 0 28px; }  .cta-panel .cta {   display: inline-block; }  .disclosure {   margin-top: 18px;   color: var(--muted);   font-size: 14px;   line-height: 1.45; }  footer {   border-top: 1px solid var(--line);   padding-top: 28px;   display: flex;   justify-content: space-between;   gap: 24px;   align-items: center;   flex-wrap: wrap; }  .tagline {   color: var(--gold);   text-transform: uppercase;   letter-spacing: .20em;   font-size: 14px;   font-weight: 700; }  .footer-link {   color: inherit;   font-weight: 700; }  @media (max-width: 840px) {   .grid,   .three-up,   .argument-grid,   .steps {     grid-template-columns: 1fr 1fr;   } }  @media (max-width: 640px) {   .grid,   .three-up,   .argument-grid,   .steps,   .before-after {     grid-template-columns: 1fr;   }    .container {     padding: 28px 18px 56px;   }    .toolbar {     justify-content: flex-start;     margin-bottom: 38px;   }    .artifact-header,   .artifact-body {     padding: 28px 20px;   } }  @media print {   .toolbar { display: none; }   .container { max-width: 100%; padding: 0; }   body { background: white; color: black; }   section { break-inside: avoid; margin-bottom: 48px; }   .card,   .argument-card {     border-color: #ccc;     background: white;   }   .artifact-shell { box-shadow: none; }   .bar-fill { background: #000; }   .cta-panel {     background: white;     color: black;     border: 1px solid #ccc;   }   .cta { display: none !important; } }







/* v5.5 single case-study navigation */
.fm-case-nav{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.fm-case-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1;
}
.fm-case-breadcrumb a{
  color:var(--navy);
  text-decoration:none;
}
.fm-case-breadcrumb a:first-child{
  color:var(--gold);
}
.fm-case-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}
.fm-case-actions button{
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--gold);
  border-radius:999px;
  background:transparent;
  color:var(--navy);
  font:800 12px/1 inherit;
  cursor:pointer;
}
.fm-case-actions button:last-child{
  background:var(--gold);
}
body.dark-mode{
  background:var(--navy);
  color:var(--paper);
}
body.dark-mode .fm-case-breadcrumb a,
body.dark-mode .fm-case-actions button:first-child{
  color:var(--paper);
}
@media (max-width:760px){
  .fm-case-nav{
    width:min(100% - 32px, 1180px);
    padding:20px 0 36px;
    flex-direction:column;
    align-items:flex-start;
  }
}