/* ── case-studies.css ─────────────────────────────────────────────────────────
   Loaded by all four case study detail pages after main.css.
   Load order: main.css → case-studies.css → case-study-nav.css → [page].css

   Universal rules (nav, sec-hdr, section-inner, lead-band, callout-gold,
   callout-corner, browser, btn) come from main.css and are used directly.

   This file holds:
     ── UNIVERSAL: patterns shared by all 4 case study pages ─────────────────
     ── Per-page blocks (Dashboard, MonitoringHub, Varanasi, TouchConfig) ─────
   ─────────────────────────────────────────────────────────────────────────── */


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  UNIVERSAL — all 4 case study detail pages  STARTS BELOW               ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */


/* ── Page header ─────────────────────────────────────────────────────────────
   Uses universal page-hdr from main.css with the --white modifier.
   Each page applies its own background image via an extra page class.      */
/* page-hdr page-hdr--white → defined in main.css  */


/* ── META STRIP ──────────────────────────────────────────────────────────────
   Executive snapshot (4 cards) + supporting meta grid (6 items).           */

.cs-meta { background: var(--surface); }

/* section-inner handles max-width + padding */

.cs-exec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  padding: 0 0 50px;
}
.cs-exec-item {
  background: var(--accent-soft-solid);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  border: 1px solid var(--hairline);
  border-top:  3px solid var(--accent);
}
.cs-exec-label {
  font-family: var(--mono);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-exec-value {
  font-family: var(--serif);
  font-size: var(--text-prose);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.cs-exec-value em { color: var(--accent); font-weight: 600; font-style: italic; letter-spacing: 1px; }

.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 64px;
  row-gap: 32px;
}
.cs-meta-item    { display: flex; flex-direction: column; gap: 5px; }
.cs-meta-label {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-meta-value {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cs-meta-value em { color: var(--accent); font-weight: 600; font-style: italic; letter-spacing: 1px; }


/* ── Meta expand / collapse ─────────────────────────────────────────────────
   Wraps the 6-item cs-meta-grid below the 4-item exec snapshot.
   Toggle: full-width hairline-divider with centred mono label + chevron icon.
   Consistent with the editorial language of the section headers.
   Reused identically on all 4 case study pages — CSS lives here only.     */

.cs-meta-expand { list-style: none; }

.cs-meta-expand-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--ink-3);
  transition: color 0.15s ease;
}
.cs-meta-expand-toggle::-webkit-details-marker { display: none; }
.cs-meta-expand-toggle:hover { color: var(--accent); }

/* Hairlines extending to both container edges */
.cs-meta-expand-toggle::before,
.cs-meta-expand-toggle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
  transition: background 0.15s ease;
}
.cs-meta-expand-toggle:hover::before,
.cs-meta-expand-toggle:hover::after { background: var(--accent-line); }

/* Label + icon spans — display flex so text and icon align inline */
.cs-meta-expand-more,
.cs-meta-expand-less {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Text swap — accessible, no JS needed */
.cs-meta-expand-less { display: none; }
.cs-meta-expand[open] .cs-meta-expand-more { display: none; }
.cs-meta-expand[open] .cs-meta-expand-less { display: flex; }

/* Meta grid gets a top gap when revealed */
.cs-meta-expand .cs-meta-grid { padding-top: 40px; }

/* Smooth expand */
.cs-meta-expand::details-content {
  overflow: clip;
  block-size: 0;
  opacity: 0;
  transition:
    block-size 0.35s var(--ease-spring),
    opacity 0.28s ease,
    content-visibility 0.35s allow-discrete;
}
.cs-meta-expand[open]::details-content { block-size: auto; opacity: 1; }


/* ── TWO-COLUMN LAYOUT ───────────────────────────────────────────────────────
   Left: scrolling prose. Right: sticky callout/aside.                      */

.cs-col-two {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: var(--col-two-gap-md);
  align-items: start;
}
/* Shared sticky-column pattern — applied to cs-col-right, cs-col-left,
   cs-phase-aside and mh-quotes-right. All have identical sticky behaviour. */
.cs-col-right,
.cs-col-left,
.cs-phase-aside,
.mh-quotes-right {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}




/* ── SUB-SECTION PATTERN ─────────────────────────────────────────────────────
   cs-sub wraps an h4 + one or more cs-sub-text paragraphs.                */

.cs-sub {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
}
.cs-sub:last-child { margin-bottom: 0; }

.cs-h4 {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
}
.cs-h4 em { font-style: italic; color: var(--highlight); }

.cs-sub-text {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 920px;
}
.cs-sub-text:last-child { margin-bottom: 0; }


/* ── KEY DECISIONS ───────────────────────────────────────────────────────────
   Numbered list: large faded number left, title + body right.
   Block repeats on every case study page.                                  */

.cs-decisions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

.cs-decision-row {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 30px;
  border-bottom: 1px solid var(--accent-line);
  padding: 0 10px 30px;
}
.cs-decision-row:last-child { border-bottom: 0; padding-bottom: 0; }

.cs-decision-num {
  font-family: var(--serif);
  font-size: var(--text-display-sm);
  line-height: 0.9;
  color: rgba(35, 91, 150, 0.28);
}

.cs-decision-content { max-width: 860px; }

.cs-decision-title {
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: var(--text-prose-lg);
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}

.cs-decision-text {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-2);
}


/* ── IMPACT SECTION ──────────────────────────────────────────────────────────
   2-col: metric rows left, callout (sticky) right.
   callout-gold from main.css sits in the right column.                     */

.cs-impact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* matches mh-quotes-grid ratio */
  gap: var(--col-two-gap-md);
  align-items: start;
}

.cs-impact-metrics { display: flex; flex-direction: column; }

.cs-impact-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 24px 8px;
  align-items: center;
}
.cs-impact-row:not(:first-child) { border-top: 1px solid var(--hairline); }

.cs-impact-num {
  font-family: var(--serif);
  font-size: var(--text-display-sm);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.cs-impact-num small {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--highlight);
  font-style: italic;
}

.cs-impact-label {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.cs-impact-sub {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-2);
}


/* ── BEFORE / AFTER  ─────────────────────────────────────────────────────────
   Structural comparison table.
   All colours neutral/hairline — matches the editorial palette, not tech-blue. */

.cs-changed {
  border-top: 2px solid var(--hairline-strong);   /* neutral, same as pagenav divider */
}

.cs-changed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.cs-changed-header {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 25px 15px 30px;
  background: var(--surface);                     /* subtle grey, not accent-blue */
  border-bottom: 1px solid var(--hairline);
}
.cs-changed-header--before { color: var(--ink-3); border-right: 1px solid var(--hairline); }
.cs-changed-header--after  { color: var(--ink); font-size: var(--text-meta); }

.cs-changed-before,
.cs-changed-after {
  padding: 30px 34px;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.1rem;
  line-height: 2;
}
.cs-changed-before {
  color: var(--ink-3);
  border-right: 1px solid var(--hairline);
  font-style: italic;
}
.cs-changed-after { color: var(--ink); font-weight: 500; }


/* ── REFLECTIONS ─────────────────────────────────────────────────────────────
   Alternating two-column items: serif title left, body right.
   Block repeats identically on every case study page.                      */

.cs-reflections-body { display: flex; flex-direction: column; }

.cs-reflection {
  padding: 28px 15px;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 50px;
  align-items: start;
}
.cs-reflection:not(:first-child) { border-top: 1px solid var(--hairline); }
.cs-reflection:first-child { padding-top: 0; }
.cs-reflection:last-child  { padding-bottom: 0; }

.cs-reflection-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.4;
  font-weight: normal;
  color: var(--ink);
  margin: 0;
}
.cs-reflection-title em { font-style: italic; color: var(--highlight); }

.cs-reflection-text {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}


/* ── IMAGE ROW ───────────────────────────────────────────────────────────────
   Side-by-side: browser frame left, text/stat panel right.
   Uses universal .browser from main.css. Images expand to natural height —
   no fixed aspect-ratio so tall diagrams are not cropped.                  */

.cs-img-row {
  display: grid;
  grid-template-columns: 1.5fr 380px;
  gap: 40px;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}

/* Variable-height browser inside image rows */
.cs-img-row .browser-body,
.cs-img-row .desktop-body {
  aspect-ratio: auto;
  height: auto;
}
.cs-img-row .browser-body img,
.cs-img-row .desktop-body img {
  width: 100%;
  height: auto;
  object-fit: initial;
}
/* Remove the default box-shadow on browser/desktop frames inside image rows */
.cs-img-row .browser,
.cs-img-row .desktop { box-shadow: none; }

.cs-img-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
.cs-img-visual img {
  width:100%;
  display:block;
}
.cs-img-visual .browser { margin-top: 0; }

.cs-img-caption {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 0 0;
  border-top: 1px solid var(--hairline);
  margin-top: 10px;
  display: block;
}

.cs-img-text {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cs-img-text-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 6px;
}
.cs-img-text-body {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.cs-img-text-body em { font-style: italic; color: var(--highlight); }

.cs-img-stat { margin-top: 12px; }
.cs-img-stat-num {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.cs-img-stat-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}


/* ── Context note ────────────────────────────────────────────────────────────
   Neutral factual callout — market context, competitive signals, external data.
   Pure typography, no borders, no background. Spacing is handled per-context
   via the parent section override (e.g. #mh-market .cs-note).              */

.cs-note-label {
  font-family: var(--mono);
  font-size: var(--text-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.cs-note-text {
  font-family: var(--serif);
  font-size: var(--text-heading);   /* 32px — large, fills the section */
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 20px;
}
.cs-note-text em { font-style: italic; color: var(--highlight); }

.cs-note-detail {
  font-size: var(--text-md);        /* 17px — readable supporting detail */
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 720px;
}


/* ── PAGE NAV ────────────────────────────────────────────────────────────────
   Section wrapper carries the full-width top border.
   Nav grid is contained within the standard gutter so it clears the sidenav
   and aligns with the rest of the page content.                            */

/* Contained grid — same max-width + gutter as every other section */
.cs-pagenav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Keyframes for title nudge on hover — prev slides left, next slides right */
@keyframes cs-pagenav-left {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}
@keyframes cs-pagenav-right {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

.cs-pagenav-cell {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
.cs-pagenav-cell:first-child  { padding-right: 32px; border-right: 1px solid var(--hairline); }
.cs-pagenav-cell--next        { padding-left: 32px; align-items: flex-end; text-align: right; }

/* Title nudges in the direction of travel while the cursor is present */
.cs-pagenav-cell:first-child:hover .cs-pagenav-title {
  animation: cs-pagenav-left 0.7s var(--ease-smooth) infinite;
}
.cs-pagenav-cell--next:hover .cs-pagenav-title {
  animation: cs-pagenav-right 0.7s var(--ease-smooth) infinite;
}

/* Subtle colour hint on hover */
.cs-pagenav-cell:hover .cs-pagenav-title { color: var(--accent); }
.cs-pagenav-cell:hover .cs-pagenav-dir   { color: var(--ink-2); }

.cs-pagenav-dir {
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-pagenav-title {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.cs-pagenav-hook {
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  UNIVERSAL — all 4 case study detail pages  ENDS ABOVE                 ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */




/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  DASHBOARD (case-study-dashboard.html)  STARTS BELOW                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ── Evolution section — sec-hdr needs extra bottom margin here ── */
#db-evolution .sec-intro { margin-bottom: 40px; }

/* ── Timeline grid with connecting line ──
   The ::before creates the horizontal rail that passes behind the circles.
   left: 24px = centre of first circle (48px wide, half = 24px).
   right: 300px stops just before the last circle (calculated for max container).
   Gradient: 75% accent (phases 1–3 complete) → hairline (phase 4 current).  */
.cs-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}
.cs-timeline-grid::before {
  content: '';
  position: absolute;
  top: 24px;       /* vertical centre of the 48px marker circles */
  left: 24px;
  right: 300px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--accent)          0%,
    var(--accent)         75%,
    var(--hairline-strong) 100%
  );
  z-index: 0;
}

/* Each stop sits on top of the line via z-index */
.cs-timeline-stop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cs-timeline-stop.t-hidden { opacity: 0; transform: translateY(16px); }

/* ── Circle marker ──
   border: 3px solid var(--surface) creates the "floating on line" illusion —
   the surface-coloured ring masks the line behind the circle.                */
.cs-timeline-marker {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--text-14);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--surface);   /* must match the section background */
  transition: transform 0.2s ease;
}
/* Phase 4 marker — current / live — highlighted */
.cs-timeline-stop:last-child .cs-timeline-marker {
  background: var(--highlight-dark);
  box-shadow: 0 0 0 3px var(--highlight);
}
.cs-timeline-stop:hover .cs-timeline-marker { transform: scale(1.1); }

.cs-timeline-period {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
.cs-timeline-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* Mono uppercase label for what each phase proved */
.cs-timeline-diagnosis {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--highlight-dark);
  max-width: 240px;
  margin-bottom: 4px;
}
/* Italic note on what each phase couldn't do */
.cs-timeline-ceiling {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
  max-width: 240px;
}


/* ── Phase sections ── */
.cs-phase {
  padding-top: 80px;
  padding-bottom: 80px;
}
.cs-phase:first-of-type  { padding-top: 0; }
.cs-phase:last-of-type   { padding-bottom: 0; }
/* Separator between phases */
.cs-phase:not(:last-child) { border-bottom: 1px solid var(--hairline); }

.cs-phase-container {
  display: grid;
  grid-template-columns: 100px 1fr;   /* narrow aside, wide content */
  gap: 35px;
  align-items: start;
  overflow: visible;
}


/* Phase number — italic serif, accent colour, transitions on phase hover */
.cs-phase-number {
  font-family: var(--serif);
  font-size: 50px;
  line-height: 0.9;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}
.cs-phase:hover .cs-phase-number { color: var(--accent-strong); }

.cs-phase-name {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
/* cs-phase-period and cs-phase-year share 4 identical properties */
.cs-phase-period,
.cs-phase-year {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.cs-phase-year { margin-top: 8px; }   /* only differs here */

/* Phase headline — h3 inside each phase, universal for case study pages */
.cs-phase-headline {
  font-family: var(--serif);
  font-size: 35px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
}
.cs-phase-headline em { font-style: italic; color: var(--highlight); }


/* ── Phase at-a-glance (3-col open strip between separator lines) ── */
.cs-phase-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 50px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cs-phase-glance-item {
  padding: 5px 15px;
  position: relative;
  transition: background 0.2s ease;
}

.cs-phase-glance-item:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px; /* half of gap */
  width: 1px;
  height: 100%;
  background: var(--hairline);
}
.cs-phase-glance-label {
  font-family: var(--mono);
  font-size: var(--text-9);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-phase-glance-value {
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--ink-2);
}


/* ── Two-column variant inside phases 2 + 4 ── */
.cs-col-two-phases {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--col-two-gap-md);
  align-items: start;
  margin-bottom: 50px;
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  DASHBOARD  ENDS ABOVE                                                  ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  MONITORINGHUB (case-study-monitoringhub.html)  STARTS BELOW           ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ── Field research findings (3-col card grid) ── */
.mh-findings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0px 0px 50px;
}

.mh-finding {
  background: var(--surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;  
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}
.mh-finding:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(35, 91, 150, 0.10);
}

.mh-finding-num {
    font-family: var(--mono);
    font-size: var(--text-2xl);
    font-weight: 300;
    letter-spacing: -0.04em;
    color: var(--hairline-strong);
    line-height: 1;
    display: block;
}

.mh-finding-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.mh-finding-body {
  font-size: var(--text-md);   /* 17px — user requested increase from text-body-sm */
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  flex-grow: 1;
}

.mh-finding-implication {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}


/* ── Published client outcomes (2-col: quotes left, callout-gold right) ── */
.mh-quotes-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* content-heavy left, callout right */
  gap: var(--col-two-gap-md);
  align-items: start;
}

.mh-client-quotes {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* Client quote cards — short 48px highlight bar via ::before, no full-width border */
.mh-client-quote {
  background: var(--surface);
  border: none;
  border-radius: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
}
.mh-client-quote::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 3px;
  background: var(--highlight);
}

.mh-client-quote-text {
  font-family: var(--serif);
  font-size: var(--text-prose-lg);
  line-height: 1.8;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  flex-grow: 1;
}

.mh-client-quote-attr {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}


/* ── MH context-specific overrides ── */

/* Overview: callout-gold sits between two prose blocks, needs top breathing room */
#mh-overview .callout-gold { margin: 50px 0px; }

/* Market context: cs-note is the only item — give it comfortable vertical space */
#mh-market .cs-note { padding: 40px 0 60px; }

/* Key decisions gallery: one swappable panel instead of 3 stacked image rows.
   Deliberately its own class, not .cs-img-row — .browser-body here keeps its
   default fixed aspect-ratio (main.css) so the panel height never changes
   between tabs, since .cs-img-row would force aspect-ratio:auto/height:auto. */
.cs-gallery-main {
  display: grid;
  grid-template-columns: 1.5fr 380px;
  gap: 40px;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.cs-gallery-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.cs-gallery-tab {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
}
.cs-gallery-tab:hover { border-color: var(--hairline-strong); }
.cs-gallery-tab.is-active { border-color: var(--accent); color: var(--accent-strong); }


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  MONITORINGHUB  ENDS ABOVE                                              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  VARANASI (case-study-varanasi.html)  STARTS BELOW                     ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ── Eight modules grid ──
   4-col with 1px hairline dividers creating a clean editorial grid.        */
.vn-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.vn-module {
  background: var(--surface);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  transition: background 0.2s ease;
}
.vn-module:hover { background: var(--surface-2); }

.vn-module-num {
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  text-transform: uppercase;
}
.vn-module-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.vn-module-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.vn-module-metric {
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid transparent;
  transition: border-color 0.2s ease;
  line-height: 1;
}
.vn-module-metric em { font-style: normal; color: var(--highlight-strong); font-size: var(--text-meta); font-weight: 500; }
.vn-module:hover .vn-module-metric { border-top-color: var(--hairline); }


/* ── Waste collection evolution — 3-stage horizontal flow ──
   Three distinct backgrounds signal the progression: rejected / adopted / evolved. */
.vr-waste-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  padding: 40px 0 50px;
}

.vr-waste-stage {
  padding: 28px 24px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vr-waste-stage--rejected {
  background: rgba(96,120,140,0.08);
  border: 1px solid var(--hairline);
}
.vr-waste-stage--adopted {
  background: var(--accent-soft-solid);
  border: 1px solid var(--accent-line);
}
.vr-waste-stage--evolved {
  background: rgba(244,198,69,0.10);
  border: 1px solid rgba(244,198,69,0.35);
}

.vr-waste-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--ink-3);
  font-size: var(--text-subhead-sm);
}

/* Stage badge — status pill indicating outcome of each approach */
.vr-waste-badge {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 100px;
  width: fit-content;
}
.vr-waste-stage--rejected .vr-waste-badge { background: var(--hairline);                 color: var(--ink-3); }
.vr-waste-stage--adopted  .vr-waste-badge { background: var(--accent-soft-solid);         color: var(--accent-strong); }
.vr-waste-stage--evolved  .vr-waste-badge { background: rgba(244,198,69,0.22);            color: var(--ink); }

.vr-waste-title {
  font-family: var(--serif);
  font-size: var(--text-subhead-sm);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.vr-waste-body {
  font-size: var(--text-14);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}


/* ── What stayed beyond Varanasi — progressive flow ──────────────────────────
   Pattern → Standard → Multiplied. Three columns, one hairline, escalating nodes.

   The hairline lives on .vr-stayed-grid::before (NOT on the connector).
   Putting hairlines as pseudo-elements on a flex container is unreliable —
   browsers sometimes still treat them as flex items even with position:absolute,
   which breaks justify-content centering. One hairline on the grid parent
   sidesteps the problem entirely.

   Hairline vertical position: scale(24px) + scale-margin(12px) + connector-half(15px) = 51px.
   Hairline horizontal extent: node-1-centre → node-3-centre.
     Node centre = column-width / 2 = (100% − 2×gap) / 6 = 100%/6 − 40px/3
   ──────────────────────────────────────────────────────────────────────────── */

.vr-stayed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 20px;
  position: relative;   /* anchor for the ::before hairline */
}

/* Single connecting hairline — from node 1 centre to node 3 centre */
.vr-stayed-grid::before {
  content: '';
  position: absolute;
  top: 51px;                         /* scale(24) + scale-margin(12) + connector-half(15) */
  left:  calc(100% / 6 - 40px / 3); /* trims to node 1 centre */
  right: calc(100% / 6 - 40px / 3); /* trims to node 3 centre */
  height: 1px;
  background: var(--hairline-strong);
  pointer-events: none;
}

.vr-stayed-item {
  display: flex;
  flex-direction: column;
}

/* Scale label — centred above the node */
.vr-stayed-scale {
  display: block;
  height: 24px;       /* fixed height keeps hairline top value reliable */
  line-height: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* Connector zone — clean flex box, node only, no pseudo-elements.
   margin-bottom: 0 so the node hovers just above the card's top border.
   The ~6–8px natural gap (connector height minus node radius) is enough
   breathing room without losing the visual bond. */
.vr-stayed-connector {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

/* Node — above the grid hairline via z-index */
.vr-stayed-node {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Pattern: hollow outlined circle */
.vr-stayed-item:nth-child(1) .vr-stayed-node {
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  background: var(--surface);   /* matches section--surface background */
}

/* Standard: solid filled */
.vr-stayed-item:nth-child(2) .vr-stayed-node {
  width: 13px;
  height: 13px;
  background: var(--accent);
}

/* Multiplied: larger, stronger colour, outer ring */
.vr-stayed-item:nth-child(3) .vr-stayed-node {
  width: 17px;
  height: 17px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 4px var(--accent-line);
}

/* Card — wraps title + body; accent-top border echoes the node colour above.
   flex: 1 makes all three cards the same height (grid row equalization).
   Visual chain: mono label → node (accent) → card top border (accent) → content. */
.vr-stayed-card {
  flex: 1;
  padding: 20px 22px 24px;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--accent);  /* matches node 1 + node 2 colour */
  background: var(--bg);
  border-radius: var(--radius);
}

/* Multiplied card: top border in accent-strong — matches node 3 colour + glow */
.vr-stayed-item--multiplied .vr-stayed-card {
  border-top-color: var(--accent-strong);
}

/* Title — serif for presence */
.vr-stayed-title {
  font-family: var(--serif);
  font-size: var(--text-subhead-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Multiplied: title in accent-strong as the payoff signal */
.vr-stayed-item--multiplied .vr-stayed-title {
  color: var(--accent-strong);
}

/* Body */
.vr-stayed-body {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}


/* ── Varanasi context-specific overrides ── */

/* Corridor: callout-gold sits between prose blocks */
#vr-corridor .callout-gold { margin-top: 40px; }

/* Integration layer: cs-note is the only content — give it space */
#vr-integration .cs-note { padding: 40px 0 60px; }


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  VARANASI  ENDS ABOVE                                                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  TOUCHCONFIG (case-study-touchconfig.html)  STARTS BELOW               ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ── Three layout types — the defining architectural decision ──
   3-col card grid. Each card has a 64px accent bar top-left,
   a large italic number, and a "uses" count at the bottom.      */
.tc-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 50px;
}

.tc-type {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}
.tc-type:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(12,26,39,0.08);
}
/* 64px accent bar top-left */
.tc-type::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 64px; height: 4px;
  background: var(--accent);
}

/* Large italic number — highlight colour, transitions to accent on hover */
.tc-type-num {
  font-family: var(--mono);
  font-size: 52px;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 12px 0 0;
  transition: color 0.2s ease;
}
.tc-type:hover .tc-type-num { color: var(--highlight); }

/* Mono label above the big number */
.tc-type-name {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0;
}

.tc-type-title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}

.tc-type-desc {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* The structural constraint for each type */
.tc-type-constraint {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 4px 0;
}

/* Screen count — bottom of card, auto margin pushes it down */
.tc-type-uses {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.tc-type-uses em { font-style: normal; color: var(--ink); font-weight: 500; }


/* ── TouchConfig context-specific overrides ── */

/* Overview: callout-gold between two prose blocks */
#tc-overview .callout-gold { margin-top: 40px; }


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  TOUCHCONFIG  ENDS ABOVE                                                ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* Reflections group labels (What I'd do again / differently) — shared across case studies */
.cs-reflection-grouplabel{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#5a6b7a;margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid var(--hairline);}
.cs-reflection-grouplabel:not(:first-child){margin-top:40px;}
.cs-reflection-grouplabel--diff{color:#235B96;}
.cs-reflection-grouplabel + .cs-reflection{border-top:none;padding-top:0;}


/* ── TouchConfig diagrams — convergence + staged flows ─────────────────────────
   Three coded diagrams, built only from universal tokens (no new colours):
     T1  tc-converge  — the three layout types resolving into one outcome
     T2  tc-flow      — problem → workaround → rebuild
     T3  tc-flow      — scale → performance, degradation then recovery
   Mirrors the .vr-waste-flow idiom (stage cards + arrows). Tone variants are
   purely visual: neutral / gold / accent. Collapses to one column at 767px,
   matching the other flow components.                                          */

.tc-dgm { margin: 0px 0 50px; }

.tc-dgm-cap {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

/* Staged horizontal flow (T2, T3) — 3 stages, 2 arrows */
.tc-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}

.tc-flow-stage {
  padding: 24px 22px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.tc-flow-stage--neutral { background: rgba(96,120,140,0.08);  border: 1px solid var(--hairline); }
.tc-flow-stage--gold    { background: rgba(244,198,69,0.10);  border: 1px solid rgba(244,198,69,0.35); }
.tc-flow-stage--accent  { background: var(--accent-soft-solid); border: 1px solid var(--accent-line); }

.tc-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--ink-3);
  font-size: var(--text-subhead-sm);
}

.tc-flow-badge {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 100px;
  width: fit-content;
}
.tc-flow-stage--neutral .tc-flow-badge { background: var(--hairline);          color: var(--ink-3); }
.tc-flow-stage--gold    .tc-flow-badge { background: rgba(244,198,69,0.22);    color: var(--ink); }
.tc-flow-stage--accent  .tc-flow-badge { background: var(--accent-soft-solid); color: var(--accent-strong); }

.tc-flow-t {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tc-flow-d {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Convergence band (T1) — three types resolve into one dark outcome node.
   .tc-converge-rule draws the actual connector: one drop per .tc-type card
   above (3-column grid mirrors .tc-types so each drop sits centred under its
   card), merging into one stem + dot before the dark band. At ≤1199px (where
   .tc-types itself stacks to one column — see responsive.css) the bar is
   hidden and the 3 drops simply stack into one continuous line, so nothing
   crosses regardless of viewport width. */
.tc-converge-rule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px; /* must match .tc-types' gap so column centers line up exactly */
  position: relative;
  height: 98px;
}
.tc-converge-drop {
  width: 3px;
  height: 63px;
  background: var(--hairline-strong);
  justify-self: center;
}
.tc-converge-bar {
  position: absolute;
  top: 60px;
  left: 16%;
  right: 16%;
  height: 3px;
  background: var(--hairline-strong);
}
.tc-converge-stem {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 3px;
  height: 39px;
  background: var(--accent);
  transform: translateX(-50%);
}
.tc-converge-dot {
  position: absolute;
  top: 61px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--highlight);
  transform: translate(-50%, -50%);
}
.tc-converge-out {
  background: var(--dark);
  border-radius: var(--radius);
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}
.tc-converge-lead {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dark-text);
}
.tc-converge-lead em { color: var(--highlight); font-style: italic; }
.tc-converge-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.tc-converge-stat { display: flex; flex-direction: column; gap: 3px; }
.tc-converge-num {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--dark-text);
}
.tc-converge-lbl {
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-text-2);
}

/* Collapse to single column at 767px — matches .vr-waste-flow / .tc-types */
@media (max-width: 767px) {
  .tc-flow { grid-template-columns: 1fr; }
  .tc-flow-arrow { transform: rotate(90deg); padding: 12px 0; }
  .tc-converge-out { grid-template-columns: 1fr; gap: 22px; }
}