/* ============================================================
   SINGLE CASE STUDY — case-study.css
   Matches finadvantage_case_study_example.html
   ============================================================ */

:root {
  --mb:#0A0A56; --mb2:#15156D; --mb3:#312CA1; --mb-soft:#EEF0F7;
  --vi:#6617FF; --vi2:#9B54FF; --vi-soft:#F4EEFF;
  --mg:#FFBB4E; --mg2:#FFC776; --mg-soft:#FFF6E5;
  --ink:#0B0B1E; --ink2:#2A2A3C; --muted:#6B6B7B;
  --line:#E5E5EC; --line-2:#EFEFF4;
  --bg:#FFFFFF; --bg-soft:#F7F7FA; --bg-tint:#FAFAFC; --wh:#FFFFFF;
}

/* ── Reading progress bar ── */
.read-prog {
  position:fixed; top:0; left:0; height:3px;
  background:var(--mg); z-index:60; width:0;
  transition:width 0.05s linear;
}

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.cs-hero {
  background:linear-gradient(180deg,#FAFAFC 0%,#FFFFFF 100%);
  padding:90px 67px 56px;
  border-bottom:1px solid var(--line-2);
  position:relative; overflow:hidden;
}
.cs-hero-inner {  margin:0 auto; position:relative; z-index:2; }

/* Breadcrumb */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted);
  margin-bottom:28px; letter-spacing:0.04em; flex-wrap:wrap;
}
.breadcrumb a { color:var(--muted); transition:color 0.15s; text-decoration:none; }
.breadcrumb a:hover { color:var(--mb); }
.breadcrumb .sep { color:var(--line); }
.breadcrumb .cur { color:var(--mb); font-weight:500; }

/* Pills */
.cs-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.cs-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; padding:6px 14px; border-radius:30px;
}
.cs-pill.type-cs { background:var(--mg-soft); color:var(--mb); }
.cs-pill.type-cs .pdot { width:5px; height:5px; background:var(--mg); border-radius:50%; }
.cs-pill.industry { background:var(--vi-soft); color:var(--vi); }
.cs-pill.industry .pdot { width:5px; height:5px; background:var(--vi); border-radius:50%; }

/* Title & deck */
.cs-hero h1 {
  font-family:'Archivo',sans-serif;
  font-size:44px; font-weight:700; color:var(--mb);
  line-height:1.1; letter-spacing:-0.02em;
  margin-bottom:20px; max-width:980px;
}
.cs-deck {
  font-size:20px; color:var(--vi);
  line-height:1.55; font-weight:400; font-style:italic;
  max-width:880px;
}

/* ══════════════════════════════════
   SNAPSHOT BAND (dark navy)
══════════════════════════════════ */
.cs-snapshot {
  background:var(--mb);
  padding:0 32px;
  position:relative; overflow:hidden;
}
.cs-snapshot::before {
  content:''; position:absolute; top:-100px; right:-50px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(102,23,255,0.22) 0%,transparent 60%);
  pointer-events:none;
}
.cs-snapshot::after {
  content:''; position:absolute; bottom:-120px; left:-40px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,78,0.1) 0%,transparent 60%);
  pointer-events:none;
}
.snap-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:60px 60px; pointer-events:none;
}
.cs-snapshot-inner {
  max-width:1240px; margin:0 auto;
  padding:54px 0; position:relative; z-index:2;
}

/* Snapshot label */
.snap-label {
  font-size:13px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mg); font-weight:700;
  margin-bottom:32px; display:flex; align-items:center; gap:10px;
}
.sl-bar { width:32px; height:2px; background:var(--mg); }

/* Three-col info row */
.snap-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,0.15);
  border-bottom:1px solid rgba(255,255,255,0.15);
  padding:28px 0;
}
.snap-col { padding:0 36px; border-left:1px solid rgba(255,255,255,0.1); }
.snap-col:first-child { border-left:none; padding-left:0; }
.snap-col:last-child { padding-right:0; }
.snap-key {
  font-family:'Roboto',sans-serif; font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mg); font-weight:700; margin-bottom:10px;
}
.snap-val {
  font-family:'Archivo',sans-serif; font-size:19px;
  font-weight:600; color:var(--wh);
  line-height:1.4; letter-spacing:-0.005em;
}
.snap-val .sub {
  font-family:'Roboto',sans-serif; font-size:15px;
  font-weight:400; color:rgba(255,255,255,0.6);
  display:block; margin-top:4px; letter-spacing:0;
}

/* Key outcomes grid */
.snap-outcomes { margin-top:36px; }
.snap-outcomes-label {
  font-size:13px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mg); font-weight:700; margin-bottom:22px;
}
.snap-out-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; overflow:hidden;
}
.snap-out { padding:24px 22px; border-left:1px solid rgba(255,255,255,0.1); }
.snap-out:first-child { border-left:none; }
.snap-out-num {
  font-family:'Archivo',sans-serif;
  font-size:32px; font-weight:700; color:var(--wh);
  letter-spacing:-0.02em; line-height:1; margin-bottom:10px;
}
.snap-out-num em { font-style:normal; color:var(--mg); font-weight:700; }
.snap-out-lbl {
  font-size:13px; color:rgba(255,255,255,0.7);
  letter-spacing:0.08em; line-height:1.5;
  text-transform:uppercase; font-weight:500;
}

/* ══════════════════════════════════
   BODY LAYOUT (TOC + article)
══════════════════════════════════ */
.cs-body-wrap { background:var(--wh); }
.cs-layout {
  max-width:1240px; margin:0 auto;
  padding:64px 32px 80px;
  display:grid; grid-template-columns:240px 1fr;
  gap:64px; align-items:start;
}

/* TOC sidebar */
.toc { position:sticky; top:96px; }
.toc-label {
  font-size:12px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.toc-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.toc-list a {
  display:block; font-size:14px; color:var(--muted);
  padding:8px 0 8px 14px; text-decoration:none;
  border-left:2px solid var(--line);
  transition:all 0.2s; line-height:1.5;
}
.toc-list a:hover { color:var(--mb); border-left-color:var(--mb3); }
.toc-list a.active { color:var(--mb); border-left-color:var(--mg); font-weight:600; }

/* ── Article prose ── */
.cs-article {
  max-width:720px;
  font-size:18px; line-height:1.78; color:var(--ink2);
}
.cs-article p { margin-bottom:18px; }
.cs-article p:last-child { margin-bottom:0; }
.cs-article p strong { color:var(--ink); font-weight:600; }
.cs-article h2 {
  font-family:'Archivo',sans-serif;
  font-size:24px; font-weight:700; color:var(--mb);
  letter-spacing:-0.015em;
  margin:40px 0 18px; line-height:1.25;
  scroll-margin-top:96px;
}
.cs-article h3 {
  font-family:'Archivo',sans-serif;
  font-size:18px; font-weight:700; color:var(--mb);
  margin:28px 0 12px; line-height:1.3;
}

/* Numbered & bullet lists */
.cs-article ol,
.cs-article ul {
  margin:0 0 18px 0; padding:0;
  list-style:none; counter-reset:csnum;
}
.cs-article ol li,
.cs-article ul li {
  position:relative; padding:0 0 14px 36px;
  line-height:1.7; color:var(--ink2);
}
.cs-article ol li:last-child,
.cs-article ul li:last-child { padding-bottom:0; }
.cs-article ol li { counter-increment:csnum; }
.cs-article ol li::before {
  content:counter(csnum, decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:'Archivo',sans-serif; font-size:14px;
  font-weight:700; color:var(--mb); letter-spacing:0.04em;
}
.cs-article ul li::before {
  content:''; position:absolute; left:8px; top:13px;
  width:6px; height:6px; border-radius:50%; background:var(--mg);
}
.cs-article li strong { color:var(--ink); font-weight:600; }

/* Blockquote */
.cs-article blockquote {
  margin:40px 0; padding:28px 32px;
  background:var(--bg-soft);
  border-left:4px solid var(--mg);
  border-radius:0 10px 10px 0;
  font-family:'Archivo',sans-serif;
  font-size:18px; font-weight:500; color:var(--mb); line-height:1.4;
}
.cs-article blockquote cite {
  display:block; margin-top:12px;
  font-family:'Roboto',sans-serif; font-size:15px;
  font-weight:400; color:var(--muted);
  letter-spacing:0.05em; text-transform:uppercase; font-style:normal;
}

/* ── Closing CTA box ── */
.cs-cta-wrap {
  margin-top:48px; padding-top:36px;
  border-top:1px solid var(--line);
}
.cs-cta-box {
  background:linear-gradient(135deg,var(--mb-soft) 0%,#F4F4FA 100%);
  border:1px solid var(--line); border-radius:14px;
  padding:28px 32px;
  display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cs-cta-box .cta-text { flex:1; min-width:220px; }
.cs-cta-box .cta-text h4 {
  font-family:'Archivo',sans-serif;
  font-size:19px; font-weight:700; color:var(--mb);
  margin-bottom:4px; letter-spacing:-0.01em; line-height:1.3;
}
.cs-cta-box .cta-text p {
  font-size:15px; color:var(--muted); line-height:1.55; margin:0;
}
.btn-primary {
  background:var(--mb); color:var(--wh);
  font-family:'Roboto',sans-serif; font-size:15px; font-weight:600;
  padding:13px 26px; border:none; border-radius:30px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:all 0.2s; letter-spacing:0.02em; flex-shrink:0;
  text-decoration:none;
}
.btn-primary:hover {
  background:var(--mb2); transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(10,10,86,0.4);
}
.btn-primary svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ══════════════════════════════════
   SERVICES DELIVERED
══════════════════════════════════ */
.services-delivered {
  background:var(--bg-soft); padding:64px 32px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.services-delivered-inner { max-width:880px; margin:0 auto; }
.sd-eyebrow {
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mb); font-weight:600;
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eb { width:28px; height:2px; background:var(--mg); }
.sd-h2 {
  font-family:'Archivo',sans-serif;
  font-size:26px; font-weight:700; color:var(--mb);
  line-height:1.18; letter-spacing:-0.015em; margin-bottom:28px;
}
.sd-block { margin-bottom:26px; }
.sd-block:last-child { margin-bottom:0; }
.sd-label {
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:12px;
}
.sd-tags { display:flex; flex-wrap:wrap; gap:8px; }
.sd-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--wh); border:1px solid var(--line);
  color:var(--mb); font-family:'Roboto',sans-serif;
  font-size:14px; font-weight:500; padding:9px 16px;
  border-radius:30px; cursor:pointer;
  transition:all 0.2s; text-decoration:none;
}
.sd-tag:hover {
  background:var(--mb) !important; color:var(--wh); border-color:var(--mb);
  transform:translateY(-1px);
  box-shadow:0 8px 18px -6px rgba(10,10,86,0.3);
}
.sd-tag .sd-dot {
  width:5px; height:5px; background:var(--mg);
  border-radius:50%; transition:background 0.2s; flex-shrink:0;
}
.sd-tag:hover .sd-dot { background:var(--wh) !important; }
.sd-tag svg {
  width:11px; height:11px; stroke:currentColor; fill:none;
  stroke-width:2; opacity:0.6; transition:opacity 0.2s;
}
.sd-tag:hover svg { opacity:1; }
.sd-tag.sub { background:transparent; border-color:var(--line); }
.sd-tag.sub .sd-dot { background:var(--vi); }

/* ══════════════════════════════════
   RELATED CASE STUDIES
══════════════════════════════════ */
.related {
  background:var(--wh); padding:64px 32px;
  border-top:1px solid var(--line-2);
}
.related-inner { max-width:1320px; margin:0 auto; }
.sec-head {
  margin-bottom:28px; display:flex;
  justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.sec-h {
  font-family:'Archivo',sans-serif; font-size:15px; font-weight:600;
  color:var(--mb); text-transform:uppercase; letter-spacing:0.15em;
}
.sec-see {
  font-size:14px; color:var(--vi); font-weight:600;
  display:flex; align-items:center; gap:5px; text-decoration:none;
}
.sec-see svg { width:12px; height:12px; stroke:var(--vi); fill:none; stroke-width:2; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rel-card {
  background:var(--wh); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:all 0.25s; display:flex; flex-direction:column;
}
.rel-card:hover {
  border-color:var(--mb3); transform:translateY(-3px);
  box-shadow:0 18px 40px -12px rgba(10,10,86,0.12);
}
.rel-visual {
  aspect-ratio:25/10; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  justify-content:space-between; padding:20px; color:var(--wh);
}
.rel-visual::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:26px 26px;
}
.rel-visual > * { position:relative; z-index:2; }
.rel-visual.r1 { background:linear-gradient(135deg,#15156D 0%,#6617FF 100%); }
.rel-visual.r2 { background:linear-gradient(135deg,#0A0A56 0%,#312CA1 100%); }
.rel-visual.r3 { background:linear-gradient(135deg,#312CA1 0%,#9B54FF 100%); }
.rel-ind {
  background:rgba(255,255,255,0.14); backdrop-filter:blur(6px);
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:30px;
  border:1px solid rgba(255,255,255,0.22); align-self:flex-start;
}
.rel-stat { display:flex; flex-direction:column; gap:4px; }
.rel-stat .n {
  font-family:'Archivo',sans-serif; font-size:32px; font-weight:700;
  color:var(--wh); letter-spacing:-0.02em; line-height:1;
}
.rel-stat .n em { font-style:normal; color:var(--wh); font-weight:700; }
.rel-stat .l { font-size:12px; color:rgba(255,255,255,0.75); letter-spacing:0.06em; line-height:1.4; }
.rel-body { padding:20px; }
.rel-meta {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.1em; font-weight:500; flex-wrap:wrap;
}
.rel-meta .dot { width:3px; height:3px; background:var(--muted); border-radius:50%; }
.type-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:30px;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
}
.type-badge.cs { background:var(--mg-soft); color:var(--mb); }
.type-badge .tb-dot { width:4px; height:4px; border-radius:50%; }
.type-badge.cs .tb-dot { background:var(--mg); }
.rel-card h3 {
  font-family:'Archivo',sans-serif; font-size:17px; font-weight:700;
  color:var(--mb); line-height:1.3; margin-bottom:10px;
}
.rel-link { font-size:13px; color:var(--vi); font-weight:600; }

/* ══════════════════════════════════
   SUBSCRIBE
══════════════════════════════════ */
.subscribe {
  background:var(--mb2); padding:80px 32px;
  position:relative; overflow:hidden;
}
.subscribe::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(102,23,255,0.25) 0%,transparent 60%);
}
.subscribe::after {
  content:''; position:absolute; bottom:-150px; left:-50px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,78,0.12) 0%,transparent 60%);
}
.subscribe-inner {
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center; position:relative; z-index:2;
}
.eyebrow {
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mg); font-weight:600;
  margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.ey-bar { width:28px; height:2px; background:var(--mg); }
.sub-left h2 {
  font-family:'Archivo',sans-serif; font-size:44px; font-weight:700;
  color:var(--wh); line-height:1.1; letter-spacing:-0.02em; margin-bottom:20px;
}
.sub-left h2 em { font-style:normal; color:var(--mg); }
.sub-left p { font-size:18px; color:rgba(255,255,255,0.72); line-height:1.7; max-width:500px; }
.sub-form {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:36px;
}
.sub-form-label {
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mg); font-weight:600; margin-bottom:14px;
}
.sub-form-row { display:flex; gap:10px; margin-bottom:16px; }
.sub-form input {
  flex:1; font-family:'Roboto',sans-serif; font-size:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:30px; padding:15px 22px; color:var(--wh);
  outline:none; transition:all 0.2s;
}
.sub-form input::placeholder { color:rgba(255,255,255,0.45); }
.sub-form input:focus { border-color:var(--mg); background:rgba(255,255,255,0.12); }
.sub-form button {
  background:var(--mg); color:var(--mb);
  font-family:'Roboto',sans-serif; font-size:15px; font-weight:600;
  padding:15px 30px; border:none; border-radius:30px;
  cursor:pointer; white-space:nowrap; transition:all 0.2s;
}
.sub-form button:hover { background:var(--mg2); }
.sub-form-note {
  font-size:13px; color:rgba(255,255,255,0.5);
  line-height:1.6; display:flex; align-items:flex-start; gap:8px;
}
.sub-form-note svg {
  width:13px; height:13px; stroke:rgba(255,255,255,0.5);
  flex-shrink:0; margin-top:1px; fill:none; stroke-width:2;
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1024px) {
  .cs-hero h1 { font-size:34px; }
  .cs-deck { font-size:18px; }
  .snap-row { grid-template-columns:repeat(2,1fr); gap:24px; }
  .snap-col { border-left:none; padding:16px 0; border-top:1px solid rgba(255,255,255,0.1); }
  .snap-col:first-child { border-top:none; padding-top:0; }
  .snap-col:last-child { grid-column:span 2; }
  .snap-out-grid { grid-template-columns:repeat(2,1fr) !important; }
  .snap-out { border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
  .snap-out:first-child { border-top:none; }
  .snap-out:nth-child(even) { border-left:1px solid rgba(255,255,255,0.1); }
  .cs-layout { grid-template-columns:1fr; gap:32px; padding:48px 32px 64px; }
  .toc { position:static; display:none; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
  .subscribe-inner { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:680px) {
  .cs-hero { padding:36px 20px 40px; }
  .cs-hero h1 { font-size:26px; }
  .cs-deck { font-size:17px; }
  .cs-snapshot { padding:0 20px; }
  .cs-snapshot-inner { padding:40px 0; }
  .snap-row { grid-template-columns:1fr; padding:18px 0; }
  .snap-col { padding:14px 0; border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
  .snap-col:first-child { border-top:none; padding-top:0; }
  .snap-col:last-child { grid-column:auto; }
  .snap-out-grid { grid-template-columns:1fr !important; }
  .snap-out:nth-child(even) { border-left:none; }
  .snap-out-num { font-size:26px; }
  .cs-layout { padding:36px 20px; }
  .cs-article { font-size:17px; }
  .cs-article h2 { font-size:21px; }
  .cs-cta-box { flex-direction:column; align-items:flex-start; padding:24px 22px; gap:16px; }
  .btn-primary { width:100%; justify-content:center; }
  .services-delivered { padding:48px 20px; }
  .related { padding:48px 20px; }
  .related-grid { grid-template-columns:1fr; }
  .subscribe { padding:48px 20px; }
  .sub-left h2 { font-size:28px; }
  .sub-form-row { flex-direction:column; }
  .sub-form { padding:24px; }
}