/* =========================================================
   ALPHA case-study shared design system.
   Same visual family as the flagship BlackRock case study.
   Theme per page with:  <main class="cs" data-theme="openfinance">
   Themes: openfinance (indigo), market76 (aubergine), alpha (neutral).
   Pair with /assets/fonts.css + /assets/alpha-nav.(js|css).
   ========================================================= */
.cs *{box-sizing:border-box;margin:0;padding:0}
/* These pages only load case-study.css, so it owns the page background and
   clips the horizontal overflow created by full-bleed (100vw) sections. */
html{background:#F2EDE3}
body{margin:0;padding:0;background:#F2EDE3;overflow-x:clip}
.cs{
  --bg:#F2EDE3; --bg-card:#F8F4EB; --bone:#F5F0E6; --ink:#1A1A1A; --ink-soft:#2A2826;
  --ink-muted:#6B6660; --ink-faint:#A19B92; --rule:rgba(26,26,26,0.10); --rule-strong:rgba(26,26,26,0.18);
  --cognac:#8C5B3F; --brass:#B89968; --linen:#C9C1B2;
  --serif:'Canela','Cormorant Garamond',Georgia,serif; --sans:'Söhne','Inter',-apple-system,sans-serif;
  --mono:'Söhne',ui-monospace,'SF Mono',Menlo,monospace; --container:1180px;
  /* default (openfinance) accent */
  --cs-accent:#2E5476; --cs-deep:#152838; --cs-glow:#5E86AA; --cs-mint:#AEC8DE; --cs-eyebrow:#8C5B3F;
  display:block; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
}
.cs[data-theme="openfinance"]{--cs-accent:#2E5476;--cs-deep:#152838;--cs-glow:#5E86AA;--cs-mint:#AEC8DE;--cs-eyebrow:#2E5476;}
.cs[data-theme="market76"]{--cs-accent:#3A2A52;--cs-deep:#2A1E3C;--cs-glow:#7E5AA8;--cs-mint:#C8AEE4;--cs-eyebrow:#8C5B3F;}
.cs[data-theme="alpha"]{--cs-accent:#3A2A52;--cs-deep:#2A1E3C;--cs-glow:#7E5AA8;--cs-mint:#C8AEE4;--cs-eyebrow:#8C5B3F;}
.cs[data-theme="science"]{--cs-accent:#1B3628;--cs-deep:#14291F;--cs-glow:#4E7A5E;--cs-mint:#B4CBBC;--cs-eyebrow:#8C5B3F;}

.cs a{color:inherit;text-decoration:none}
.cs .wrap{max-width:var(--container);margin:0 auto;padding:0 56px}
.cs .eyebrow{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--cs-eyebrow);font-weight:400}

/* Section separator — cognac role label (left), study name (right), hairline under. Site-wide standard. */
.cs .plate-header{display:flex;align-items:baseline;gap:24px;margin-bottom:56px;padding-bottom:18px;border-bottom:1px solid var(--rule-strong)}
.cs .plate-header .plate-num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--cognac);letter-spacing:0.02em}
.cs .plate-header .plate-num .label{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;color:var(--cognac)}
.cs .plate-header .plate-title{font-family:var(--sans);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);font-weight:400;margin-left:auto}
/* When a section leads with a plate-header, collapse the eyebrow/body split
   so the header spans full width and the body flows beneath it (matches the
   site-wide separator layout). */
.cs .split:has(> .plate-header){display:block}
.cs .split > .plate-header{grid-column:1/-1}
/* Dark sections (results dashboard, closing band) */
.cs-results .plate-header,.cs-closing.cs-dark .plate-header{border-bottom-color:rgba(245,240,230,0.22)}
.cs-results .plate-header .plate-num,.cs-results .plate-header .plate-num .label,.cs-closing.cs-dark .plate-header .plate-num,.cs-closing.cs-dark .plate-header .plate-num .label{color:rgba(245,240,230,0.62)}
.cs-results .plate-header .plate-title,.cs-closing.cs-dark .plate-header .plate-title{color:var(--bone)}

/* HERO */
.cs-hero{padding:88px 0 68px}
.cs-hero .crumb{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:34px}
.cs-hero .crumb .bar{width:1px;height:12px;background:var(--linen)}
.cs-hero .crumb .here{color:var(--ink)}
.cs-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.6vw,82px);line-height:1.03;letter-spacing:-0.016em;max-width:16ch;margin-bottom:26px}
.cs-hero h1 em{font-style:italic;color:var(--cs-accent)}
.cs-hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.42;color:var(--ink-muted);max-width:46ch}
.cs-hero .cobrand{font-family:var(--sans);font-size:13px;letter-spacing:0.04em;color:var(--ink-faint);margin-top:30px}
.cs-hero .cobrand strong{color:var(--ink);font-weight:500}

/* FULL-BLEED EDITORIAL PHOTO */
.cs-media{margin:0}
.cs-media img{width:100vw;position:relative;left:50%;margin-left:-50vw;height:clamp(340px,50vh,600px);object-fit:cover;object-position:center 24%;filter:grayscale(1) contrast(1.04) brightness(0.95);display:block}
.cs-media figcaption{padding-top:14px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-faint)}

/* AT A GLANCE — spec strip */
.cs-glance{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.cs-glance .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cs-gcell{padding:30px 30px 28px;border-right:1px solid var(--rule)}
.cs-gcell:first-child{padding-left:0}
.cs-gcell:last-child{border-right:none;padding-right:0}
.cs-gcell .k{font-family:var(--sans);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.cs-gcell .v{font-family:var(--serif);font-size:21px;line-height:1.28;color:var(--ink)}
.cs-gcell .v small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-muted);margin-top:6px;line-height:1.5}

/* SECTIONS */
.cs-section{padding:62px 0}
.cs-section:first-of-type{border-top:none}
.cs-section .eyebrow{margin-bottom:26px}
.cs .lede{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.24;letter-spacing:-0.01em;color:var(--ink);max-width:24ch;margin-bottom:34px}
.cs .lede em{font-style:italic;color:var(--cs-accent)}
.cs .body{font-size:17px;line-height:1.72;color:var(--ink-soft);max-width:62ch}
.cs .body p+p{margin-top:20px}
.cs .body strong{font-weight:500;color:var(--ink)}
.cs .split{display:grid;grid-template-columns:1fr 2.1fr;gap:56px;align-items:start}

/* CHALLENGE / APPROACH two-up */
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.cs-duo .col{padding:56px 0}
.cs-duo .col:first-child{padding-right:56px;border-right:1px solid var(--rule)}
.cs-duo .col:last-child{padding-left:56px}
.cs-duo h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;color:var(--ink);margin-bottom:20px}
.cs-duo ul{list-style:none}
.cs-duo li{position:relative;padding-left:20px;font-size:16px;line-height:1.6;color:var(--ink-soft);margin-bottom:14px}
.cs-duo li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--cs-accent)}
@media (max-width:760px){.cs-duo{grid-template-columns:1fr}.cs-duo .col:first-child{padding-right:0;border-right:none;border-bottom:1px solid var(--rule)}.cs-duo .col:last-child{padding-left:0}}

/* RESULTS DASHBOARD (dark, full-bleed) */
.cs-results{background:var(--cs-deep);color:var(--bone);width:100vw;position:relative;left:50%;margin-left:-50vw;padding:96px 0}
.cs-results .wrap{position:relative}
.cs-results .eyebrow{color:var(--cs-mint);margin-bottom:14px}
.cs-results h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,50px);line-height:1.08;color:var(--bone);letter-spacing:-0.01em;max-width:22ch;margin-bottom:52px}
.cs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(245,240,230,0.20)}
.cs-metric{padding:34px 28px 30px;border-right:1px solid rgba(245,240,230,0.12)}
.cs-metric:first-child{padding-left:0}
.cs-metric:last-child{border-right:none;padding-right:0}
.cs-metric .n{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,58px);line-height:1;color:var(--bone);letter-spacing:-0.02em}
.cs-metric .l{font-family:var(--sans);font-size:13px;line-height:1.5;color:rgba(245,240,230,0.62);margin-top:15px;max-width:22ch}
.cs-bars{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:52px 72px}
.cs-bar .bt{font-family:var(--sans);font-size:14px;color:rgba(245,240,230,0.9);margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cs-bar .bt .mult{font-family:var(--serif);font-size:26px;color:var(--bone)}
.cs-bar-track{height:8px;background:rgba(245,240,230,0.12);overflow:hidden}
.cs-bar-fill{height:100%;background:linear-gradient(90deg,var(--cs-accent),var(--cs-glow))}
.cs-bar .bc{font-family:var(--sans);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:rgba(245,240,230,0.5);margin-top:10px}
.cs-note-dark{margin-top:60px;padding-top:28px;border-top:1px solid rgba(245,240,230,0.16);font-size:14px;line-height:1.7;color:rgba(245,240,230,0.6);max-width:74ch}

/* CAPABILITY MAPPING — which ALPHA functions did the work */
.cs-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.cs-cap{background:var(--bg-card);padding:30px 32px}
.cs-cap .ck{font-family:var(--sans);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cs-accent);margin-bottom:12px}
.cs-cap h4{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink);margin-bottom:9px}
.cs-cap p{font-size:14.5px;line-height:1.6;color:var(--ink-muted);margin:0}
@media (max-width:700px){.cs-caps{grid-template-columns:1fr}}

/* HARMONIZED / DATA STRIP */
.cs-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.cs-tag{font-family:var(--sans);font-size:12.5px;letter-spacing:0.02em;color:var(--ink-muted);border:1px solid var(--rule-strong);border-radius:100px;padding:7px 14px}
.cs a.cs-tag{transition:border-color .2s,color .2s}
.cs a.cs-tag:hover{border-color:var(--cs-accent);color:var(--cs-accent)}
/* Keywords (metadata, non-interactive spans) read as a quiet dotted list —
   distinct from the interactive, bordered product pills of the ALPHA-stack row. */
.cs-tags span.cs-tag{border:none;border-radius:0;padding:0;font-size:12px;color:var(--ink-faint)}
.cs-tags span.cs-tag:not(:last-child)::after{content:"·";margin-left:9px;color:var(--ink-faint);opacity:.65}

/* CLOSING */
.cs-closing{padding:62px 0 40px}
.cs-closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-0.01em;max-width:18ch;margin-bottom:30px}
.cs-closing h2 em{font-style:italic;color:var(--cs-accent)}
.cs-closing-links{display:flex;flex-wrap:wrap;gap:20px 40px}
.cs-closing-link{font-size:14px;letter-spacing:0.04em;color:var(--ink);border-bottom:1px solid var(--cs-accent);padding-bottom:4px;transition:gap .2s}
.cs-closing-link:hover{color:var(--cs-accent)}
.contact-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-style:normal;font-size:15px;letter-spacing:0.04em;color:#3A2A52;text-decoration:none;border-bottom:1.5px solid #8C5B3F;padding-bottom:4px;transition:gap .2s,border-color .2s}
.contact-cta:hover{gap:13px;border-bottom-color:#A56A45}
.contact-cta .arrow{margin-left:0;color:#8C5B3F}

/* FOOTNOTE */
.cs-foot{padding:20px 0 88px}
.cs-foot .wrap p{font-size:12.5px;line-height:1.7;color:var(--ink-faint);max-width:76ch;padding-top:24px;border-top:1px solid var(--rule)}

@media (max-width:760px){
  .cs .wrap{padding:0 28px}
  .cs-glance .wrap{grid-template-columns:1fr 1fr}
  .cs-gcell{border-right:none;border-bottom:1px solid var(--rule);padding:22px 0}
  .cs-gcell:nth-child(odd){padding-right:20px}
  .cs-metrics{grid-template-columns:1fr 1fr}
  .cs-metric{border-right:none;border-bottom:1px solid rgba(245,240,230,0.12);padding:24px 0}
  .cs-bars{grid-template-columns:1fr;gap:34px}
  .cs .split{grid-template-columns:1fr;gap:24px}
}

/* PHONE (<600) — collapse spec/metric strips to one column, tighten gutters,
   and cap the keyword strip so it doesn't wrap into a wall. */
@media (max-width:600px){
  .cs .wrap{padding:0 22px}
  .cs-hero{padding:64px 0 52px}
  .cs-glance .wrap{grid-template-columns:1fr}
  .cs-gcell,.cs-gcell:nth-child(odd){padding:18px 0;border-right:none}
  .cs-metrics{grid-template-columns:1fr}
  .cs-metric{padding:22px 0}
  .cs-tags span.cs-tag:nth-child(n+6){display:none}
  .cs-tags span.cs-tag:nth-child(5)::after{content:none}
}

/* 3-UP VARIANTS — for glance/metrics bands that carry only three cells.
   Use these classes instead of an inline `style="grid-template-columns:repeat(3,1fr)"`:
   an inline style outranks the responsive @media collapse (media queries add no
   specificity), so an inline 3-col grid stays 3 columns on phones and crowds.
   These rules live after the base media blocks, so the collapse below wins. */
.cs-glance--3 .wrap{grid-template-columns:repeat(3,1fr)}
.cs-metrics--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){
  .cs-glance--3 .wrap{grid-template-columns:1fr 1fr}
  .cs-metrics--3{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cs-glance--3 .wrap{grid-template-columns:1fr}
  .cs-metrics--3{grid-template-columns:1fr}
}