/* ============================================================
   TATA 1MG CASE STUDY — Merged CSS
   Tokens + Components + Layout
   ============================================================ */

/* ============================================================
   TOKENS — Bound to Cosmos Design System
   ============================================================ */
:root {
  --font-primary: 'Gilroy Light', 'Gilroy-Light', 'Gilroy', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Gilroy ExtraBold', 'Gilroy-ExtraBold', 'Gilroy-Bold', 'Gilroy', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', 'Gilroy Light', 'Gilroy-Light', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --ink: var(--bg-primary, #0A0A0C);
  --paper: var(--text-primary, #FFFFFF);
  --paper-80: var(--text-primary, #FFFFFF);
  --paper-62: var(--text-secondary, rgba(255, 255, 255, .70));
  --paper-44: var(--text-tertiary, rgba(255, 255, 255, .48));
  --paper-28: var(--text-tertiary, rgba(255, 255, 255, .32));
  --rule: var(--border, rgba(255, 255, 255, .12));
  --rule-soft: var(--border, rgba(255, 255, 255, .08));
  --dcp: var(--color-airtel-red, #e61f25);
  --dcp-lift: var(--color-accent-cyan, #00b0ff);
  --sans: var(--font-primary);
  --serif: var(--font-primary);
  --heading-font: var(--font-display);
  --mono: var(--font-mono);
  --wrap: 1290px;
  --gutter: clamp(20px, 5vw, 68px);
  --prose: min(646px, 100%);
  --sec-y: clamp(64px, 8vw, 120px);
  --r: 0px;
}

body.light-theme,
body.cs-light-theme,
html.light-theme,
html.cs-light-theme {
  --ink: #ffffff;
  --paper: #0f172a;
  --paper-80: #1e293b;
  --paper-62: #334155;
  --paper-44: #64748b;
  --paper-28: #94a3b8;
  --rule: rgba(15, 23, 42, 0.15);
  --rule-soft: rgba(15, 23, 42, 0.08);
  --dcp-lift: #0284c7;
}

.prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  background: var(--dcp);
  width: 0
}

@media(max-width:820px) {}

/* ============================================================
   HERO  — editorial split, photographic, no product UI
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(104px, 15vh, 150px) clamp(40px, 7vh, 80px);
  position: relative;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -18%;
  width: min(680px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(174, 58, 110, .24), transparent 66%);
  filter: blur(30px);
  pointer-events: none
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  position: relative;
  width: 100%
}

/* --- left: the photograph --- */
.hero-visual {
  position: relative
}

.hero-shot {
  position: relative
}

.hero-shot img {
  width: 100%;
  border-radius: 0 !important;
  border: 1px solid var(--rule)
}

.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0 !important;
  background: linear-gradient(to bottom, transparent 56%, rgba(10, 10, 12, .55) 100%)
}

.hero-shot .tick {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--dcp);
  z-index: 2
}

.hero-cap {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-28);
  line-height: 1.85;
  margin: 1rem 0 0;
  max-width: 52ch
}

.hero-cap b {
  color: var(--paper-44);
  font-weight: 400
}

.hero-clip {
  background: #fff;
  padding: clamp(9px, 1.1vw, 13px) clamp(11px, 1.3vw, 16px);
  border-radius: 0 !important;
  margin-top: clamp(16px, 2.4vw, 24px);
  max-width: min(100%, 430px)
}

.hero-clip img {
  width: 100%
}

.hero-clip .cl {
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: .55rem 0 0
}

.hero-clipnote {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-28);
  line-height: 1.8;
  margin: .75rem 0 0;
  max-width: 44ch
}

/* --- right: the type --- */
.hero-kicker {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-44);
  margin: 0 0 clamp(1.3rem, 2.6vw, 1.9rem);
  display: flex;
  gap: .85rem;
  flex-wrap: wrap
}

.hero-kicker b {
  color: var(--dcp-lift);
  font-weight: 400
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  letter-spacing: -.05em;
  line-height: .94;
  font-weight: 600;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.7rem);
  max-width: 14ch
}

.hero h1 em {
  font-style: normal;
  color: var(--dcp-lift)
}

.hero-q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.08rem, 1.65vw, 1.38rem);
  line-height: 1.45;
  color: var(--paper-80);
  letter-spacing: -.01em;
  max-width: 36ch;
  margin: 0 0 clamp(1.7rem, 3vw, 2.3rem)
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin: 0
}

.hero-meta div {
  padding: .85rem 1.2rem .85rem 0;
  border-bottom: 1px solid var(--rule-soft)
}

.hero-meta div:nth-child(even) {
  padding-left: 1.2rem;
  padding-right: 0;
  border-left: 1px solid var(--rule-soft)
}

.hero-meta dt {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-bottom: .3rem
}

.hero-meta dd {
  margin: 0;
  font-size: .9375rem;
  color: var(--paper-80);
  line-height: 1.35
}

@media(max-width:900px) {
  .hero {
    min-height: 0;
    align-items: flex-start
  }

  .hero-split {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .hero-type {
    order: -1
  }

  .hero h1 {
    font-size: clamp(2.5rem, 8vw, 3.6rem);
    max-width: 16ch
  }

  .hero-clip {
    max-width: 100%
  }
}

@media(max-width:520px) {
  .hero-meta {
    grid-template-columns: 1fr
  }

  .hero-meta div:nth-child(even) {
    padding-left: 0;
    border-left: 0
  }
}

/* ---------- marquee ---------- */
.marq {
  border-block: 1px solid var(--rule-soft);
  overflow: hidden;
  padding-block: .95rem;
  margin-top: clamp(34px, 5vw, 58px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.marq-t {
  display: flex;
  width: max-content;
  animation: slide 48s linear infinite
}

.marq span {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  padding-inline: 1.5rem;
  white-space: nowrap
}

.marq span i {
  font-style: normal;
  color: var(--dcp)
}

@keyframes slide {
  to {
    transform: translateX(-50%)
  }
}

/* ============================================================
   SHARED
   ============================================================ */
.two {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start
}

@media(max-width:880px) {
  .two {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

.defs {
  border-top: 1px solid var(--rule)
}

.defs>div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
  border-bottom: 1px solid var(--rule-soft)
}

.defs dt {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  padding-top: .3rem
}

.defs dd {
  margin: 0
}

.defs h4 {
  margin-bottom: .5rem
}

.defs p {
  color: var(--paper-62);
  font-size: 1rem;
  margin: 0;
  max-width: 58ch
}

@media(max-width:620px) {
  .defs>div {
    grid-template-columns: 1fr;
    gap: .6rem
  }
}

.figs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border: none !important;
  margin-block: clamp(36px, 5vw, 58px);
}

.figs div {
  padding: 0 !important;
  border: none !important;
}

.figs div+div {
  border-left: none !important;
  padding-left: 0 !important;
}

.figs .v {
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .55rem;
  font-variant-numeric: tabular-nums
}

.figs .k {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-44);
  line-height: 1.65;
  margin: 0
}

@media(max-width:620px) {
  .figs div+div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-soft)
  }
}

.callout {
  border-left: none !important;
  padding-left: 1.5rem;
  margin-block: clamp(28px, 4vw, 44px);
  max-width: var(--prose)
}

.callout p {
  color: var(--paper-80);
  font-size: 1.05rem
}

.callout strong {
  color: var(--paper);
  font-weight: 500
}

.callout em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.07em
}

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.8vw, 1.1rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--paper);

  margin: 0
}

figure {
  margin: 0
}

.cap {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-28);
  line-height: 1.8;
  margin: .85rem 0 0
}

.cap b {
  color: var(--paper-44);
  font-weight: 400
}

.zoom {
  cursor: zoom-in;
  transition: opacity .25s
}

.zoom:hover {
  opacity: .86
}

.flow {
  display: flex;
  gap: clamp(10px, 1.5vw, 18px);
  overflow-x: auto;
  padding-bottom: .6rem;
  scroll-snap-type: x proximity
}

.flow::-webkit-scrollbar {
  height: 3px
}

.flow::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 0 !important;
  min-width: 150px;
  max-width: 250px;
  scroll-snap-align: start
}

.flow img {
  border-radius: 0 !important;
  border: 1px solid var(--rule);
  background: #fff
}

.flow .cap {
  margin-top: .65rem;
  font-size: .5625rem;
  letter-spacing: .1em
}

.flow .step {
  color: var(--dcp-lift)
}

.flow.lg figure {
  max-width: 300px;
  min-width: 190px
}

@media(max-width:700px) {
  .flow figure {
    min-width: 164px
  }
}

.board img {
  border-radius: 0 !important;
  border: 1px solid var(--rule);
  background: #fff
}

/* ============================================================
   RESEARCH PHOTOS
   ============================================================ */
.photo-pair {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(12px, 2vw, 20px);
  align-items: start
}

.photo-pair img {
  border-radius: 0 !important;
  border: 1px solid var(--rule);
  filter: saturate(.9) contrast(1.04)
}

@media(max-width:760px) {
  .photo-pair {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   ITERATION SPINE
   ============================================================ */
.scrub {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  z-index: 90;
  background: rgba(10, 10, 12, .84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s, visibility .3s, transform .3s
}

.scrub.on {
  opacity: 1;
  visibility: visible;
  transform: none
}

.scrub-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: .9rem
}

.scrub-lab {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-28);
  flex: none
}

.scrub-dots {
  display: flex;
  gap: .35rem;
  flex: 1;
  overflow: hidden
}

.scrub-dots a {
  flex: 1;
  min-width: 0;
  height: 26px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--paper-28);
  border-top: 2px solid var(--rule);
  transition: color .25s, border-color .25s
}

.scrub-dots a:hover {
  color: var(--paper-62)
}

.scrub-dots a.seen {
  border-color: rgba(174, 58, 110, .55);
  color: var(--paper-44)
}

.scrub-dots a.here {
  border-color: var(--dcp-lift);
  color: var(--dcp-lift)
}

@media(max-width:640px) {
  .scrub-lab {
    display: none
  }
}

.round {
  padding-block: clamp(50px, 7vw, 86px);
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 118px
}

.round:first-of-type {
  border-top: 0
}

.round-head {
  margin-bottom: clamp(24px, 3.5vw, 36px);
}

.round-n {
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  font-variant-numeric: tabular-nums;
  transition: -webkit-text-stroke-color .55s, color .55s
}

.round.lit .round-n {
  -webkit-text-stroke-color: var(--dcp);
  color: rgba(174, 58, 110, .11)
}

.round-t .sub {
  margin-bottom: .7rem
}

.round-t h3 {
  margin-bottom: .8rem;
  max-width: 20ch
}

.round-t .q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--paper-80);
  max-width: 48ch;
  margin: 0
}

@media(max-width:640px) {
  .round-head {
    grid-template-columns: 1fr;
    gap: 12px
  }
}

.round-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 40px)
}

@media(max-width:640px) {
  .round-body {
    grid-template-columns: 1fr
  }

  .round-body>.spacer {
    display: none
  }
}

/* the round's reasoning, as a stepped sequence rather than a card grid */
.steps {
  margin-top: clamp(24px, 3.5vw, 34px);
  border-top: 1px solid var(--rule)
}

.steps>div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: clamp(14px, 2.4vw, 32px);
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline
}

.steps dt {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift)
}

.steps dd {
  margin: 0;
  font-size: .9688rem;
  line-height: 1.62;
  color: var(--paper-62);
  max-width: 64ch
}

.steps dd b {
  color: var(--paper);
  font-weight: 500
}

@media(max-width:560px) {
  .steps>div {
    grid-template-columns: 1fr;
    gap: .35rem
  }
}

.quotes {
  display: grid;
  gap: .9rem;
  margin-top: clamp(22px, 3vw, 30px)
}

.quotes blockquote {
  margin: 0;
  padding-left: 1.15rem;
  border-left: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--paper-80)
}

.quotes cite {
  display: block;
  margin-top: .4rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .5625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--paper-28)
}

.evid {
  margin-top: clamp(22px, 3vw, 30px)
}

/* ============================================================
   INSIGHT CHAINS — evidence → insight → response → result
   ============================================================ */
.chain {
  border-top: 1px solid var(--rule);
  padding-top: clamp(26px, 4vw, 40px);
  margin-top: clamp(44px, 6vw, 74px)
}

.chain-h {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 32px)
}

.chain-h .ix {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28)
}

.chain-h h3 {
  max-width: 26ch
}

.chain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch
}

.link {
  position: relative;
  padding: 0 clamp(14px, 1.8vw, 26px)
}

.link:first-child {
  padding-left: 0
}

.link:last-child {
  padding-right: 0
}

.link+.link {
  border-left: 1px solid var(--rule-soft)
}

.link .lab {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.link .lab s {
  text-decoration: none;
  color: var(--paper-28)
}

.link p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--paper-62);
  margin: 0
}

.link .say {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--paper-80)
}

.link .who {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-top: .5rem
}

.link .shot {
  margin-bottom: .85rem
}

.link .shot img {
  border-radius: 0 !important;
  border: 1px solid var(--rule);
  background: #fff
}

.link.win p {
  color: var(--paper);
  font-weight: 500
}

.link .big {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--dcp-lift);
  margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums
}

@media(max-width:900px) {
  .chain-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 3vw, 30px) 0
  }

  .link:nth-child(3) {
    padding-left: 0;
    border-left: 0
  }

  .link:nth-child(2) {
    padding-right: 0
  }
}

@media(max-width:560px) {
  .chain-grid {
    grid-template-columns: 1fr;
    gap: 0
  }

  .link {
    padding: 1.3rem 0;
    border-left: 0 !important;
    border-top: 1px solid var(--rule-soft)
  }

  .link:first-child {
    border-top: 0;
    padding-top: 0
  }
}

/* ============================================================
   ARCHITECTURE DECISION
   ============================================================ */
.arch {
  border-top: 1px solid var(--rule);
  margin-top: clamp(36px, 5vw, 56px)
}

.arch-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1.45fr);
  gap: clamp(14px, 2.6vw, 38px);
  padding-block: clamp(1.5rem, 2.6vw, 2.15rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start
}

.arch-rank {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  padding-top: .35rem
}

.arch-row.out .arch-rank {
  color: var(--paper-28)
}

.arch-row h4 {
  margin-bottom: .45rem
}

.arch-row.out h4 {
  color: var(--paper-44)
}

.arch-why {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0
}

.arch-row p.reason {
  color: var(--paper-62);
  font-size: 1rem;
  margin: 0;
  max-width: 56ch
}

.arch-row.out p.reason {
  color: var(--paper-44)
}

@media(max-width:720px) {
  .arch-row {
    grid-template-columns: 1fr;
    gap: .6rem
  }
}

/* ============================================================
   FINAL SOLUTION SURFACES
   ============================================================ */
.surface {
  padding-block: clamp(42px, 6vw, 70px);
  border-top: 1px solid var(--rule-soft)
}

.surface:first-child {
  border-top: 0;
  padding-top: 0
}

.surface-h {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem
}

.surface-h .tag {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  border: 1px solid rgba(174, 58, 110, .42);
  padding: .28rem .6rem;
  border-radius: 0 !important;
  color: var(--paper-62);
  margin-bottom: clamp(22px, 3vw, 32px)
}

.surface>p strong {
  color: var(--paper);
  font-weight: 500
}

.trace {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  line-height: 2
}

.trace b {
  color: var(--dcp-lift);
  font-weight: 400
}

/* ============================================================
   OUTCOME DATA VIZ
   ============================================================ */
.viz {
  margin-top: clamp(40px, 5vw, 64px)
}

.viz-frame {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(30px, 4.5vw, 52px)
}

.viz-plot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  min-height: clamp(190px, 26vw, 290px);
  position: relative
}

.viz-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative
}

.viz-bar {
  background: var(--dcp);
  width: 100%;
  max-width: 340px
}

.viz-bar.now {
  background: linear-gradient(to top, var(--dcp), #D2528B)
}

.viz-num {
  font-size: clamp(1.8rem, 5.4vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0 0 .55rem;
  font-variant-numeric: tabular-nums
}

.viz-col.then .viz-num {
  color: var(--paper-44);
  font-size: clamp(1.4rem, 3vw, 2.2rem)
}

.viz-lab {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-44);
  margin: .9rem 0 0;
  line-height: 1.7
}

.viz-gap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none
}

.viz-mult {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2
}

.viz-mult .m {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--dcp-lift);
  line-height: 1
}

.viz-mult .t {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-top: .5rem
}

.viz-dash {
  border-top: 1px dashed rgba(255, 255, 255, .22);
  position: absolute;
  left: 12%;
  right: 12%;
  top: calc(8% + 62px)
}

.viz-note {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-28);
  line-height: 1.9;
  margin: clamp(22px, 3vw, 30px) 0 0;
  max-width: 66ch
}

@media(max-width:620px) {
  .viz-plot {
    min-height: 150px;
    gap: 20px
  }

  .viz-mult {
    position: static;
    transform: none;
    text-align: left;
    margin-bottom: 1.2rem
  }

  .viz-dash {
    display: none
  }
}

.viz-second {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 4vw, 44px)
}

.viz-3x {
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .85;
  color: var(--dcp-lift);
  font-variant-numeric: tabular-nums
}

.viz-3x sup {
  font-family: var(--mono);
  font-size: .16em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-44);
  vertical-align: super;
  margin-right: .35em;
  font-weight: 400
}

.viz-second p {
  margin: 0;
  color: var(--paper-62);
  max-width: 46ch
}

.viz-second strong {
  color: var(--paper);
  font-weight: 500
}

@media(max-width:620px) {
  .viz-second {
    grid-template-columns: 1fr;
    gap: 14px
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(52px, 7vw, 88px)
}

.foot-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 70px)
}

.foot-nav a {
  text-decoration: none;
  display: block
}

.foot-nav .sub {
  margin-bottom: .45rem
}

.foot-nav strong {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -.035em;
  transition: color .25s
}

.foot-nav a:hover strong {
  color: var(--dcp-lift)
}

.foot-end {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.4rem
}

.foot-end p {
  margin: 0
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(26px, 4vw, 40px)
}

.tags span {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-44);
  border: 1px solid var(--rule);
  border-radius: 0 !important;
  padding: .42rem .85rem
}

/* ============================================================
   PARTICIPANT GROUPS
   ============================================================ */
.who {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: stretch;
  margin-top: clamp(34px, 5vw, 54px)
}

.who-col {
  border-top: 2px solid var(--dcp);
  padding-top: 1.4rem
}

.who-col .ix {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .8rem
}

.who-col h4 {
  margin-bottom: .6rem
}

.who-col p {
  color: var(--paper-62);
  font-size: .9688rem;
  margin: 0 0 1rem;
  max-width: 44ch
}

.who-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft)
}

.who-col li {
  font-size: .9063rem;
  color: var(--paper-62);
  padding: .6rem 0 .6rem 1.1rem;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.55
}

.who-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 5px;
  height: 1px;
  background: var(--dcp-lift)
}

.who-plus {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--paper-28);
  font-weight: 400;
  padding-top: 2rem
}

.who-out {
  border-top: 1px solid var(--rule);
  margin-top: clamp(24px, 3.4vw, 34px);
  padding-top: 1.3rem;
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: baseline;
  flex-wrap: wrap
}

.who-out .ar {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  flex: none
}

.who-out p {
  margin: 0;
  color: var(--paper-80);
  font-size: 1.05rem;
  max-width: 60ch
}

body.cs-light-theme .qmap-q,
body.cs-light-theme .who-col {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.cs-light-theme .qmap-q:hover,
body.cs-light-theme .who-col:hover {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

body.cs-light-theme .qmap-q .qn,
body.cs-light-theme .who-col .ix {
  background: rgba(0, 176, 255, 0.1) !important;
  color: #0284c7 !important;
  border-color: rgba(0, 176, 255, 0.2) !important;
}

body.cs-light-theme .qmap-q .qt,
body.cs-light-theme .who-col h4 {
  color: #0f172a !important;
}

body.cs-light-theme .who-col p,
body.cs-light-theme .who-col li {
  color: #334155 !important;
}

body.cs-light-theme .who-col ul,
body.cs-light-theme .who-col li {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

body.cs-light-theme .who-plus {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #64748b !important;
}

body.cs-light-theme .who-out {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

body.cs-light-theme .who-out p {
  color: #0f172a !important;
}

@media(max-width:800px) {
  .who {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .who-plus {
    display: none
  }
}

/* ============================================================
   HERO CARD INSIGHT SYSTEM (redesigned 2019 artifact)
   ============================================================ */
.sys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(32px, 4.5vw, 50px)
}

.sys>div {
  padding: clamp(1.6rem, 2.8vw, 2.3rem) clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.6rem, 2.8vw, 2.3rem) 0;
  border-bottom: 1px solid var(--rule-soft)
}

.sys>div:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(1.4rem, 2.4vw, 2.2rem);
  border-left: 1px solid var(--rule-soft)
}

.sys .n {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .2em;
  color: var(--dcp-lift);
  margin: 0 0 .9rem
}

.sys h4 {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  letter-spacing: -.022em;
  margin-bottom: .9rem;
  text-transform: uppercase;
  letter-spacing: .02em
}

.sys .obs {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--paper-80);
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule)
}

.sys .resp {
  margin: 0;
  font-size: .9375rem;
  color: var(--paper-62);
  line-height: 1.6
}

.sys .resp b {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  font-weight: 400;
  display: block;
  margin-bottom: .4rem
}

@media(max-width:720px) {
  .sys {
    grid-template-columns: 1fr
  }

  .sys>div,
  .sys>div:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-left: 0
  }
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testi {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(38px, 5.5vw, 66px);
  margin-top: clamp(38px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.testi blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--paper);
  position: relative
}

.testi blockquote::before {
  content: "“";
  position: absolute;
  left: -.5em;
  top: -.08em;
  color: var(--dcp);
  font-size: 2.2em;
  line-height: 1;
  opacity: .55
}

.testi .attr {
  margin: 1.6rem 0 0;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-44);
  line-height: 2
}

.testi .attr b {
  color: var(--paper);
  font-weight: 400
}

.testi figure img {
  border: 1px solid var(--rule);
  border-radius: 0 !important;
  gap: 28px
}

/* ============================================================
   EXECUTIVE BRIEF (COSMOS DESIGN SYSTEM ENHANCED)
   ============================================================ */
.brief {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  border-top: none;
  margin-top: clamp(34px, 4.6vw, 52px);
}

.brief>div {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.brief>div:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.brief>div+div {
  padding-left: 1.6rem;
}

.brief dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 176, 255, 0.08);
  border: 1px solid rgba(0, 176, 255, 0.15);
  border-radius: 0 !important;
}

.brief dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--paper-62);
}

.brief dd b {
  color: var(--paper);
  font-weight: 600;
}

body.cs-light-theme .brief>div {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.cs-light-theme .brief>div:hover {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

body.cs-light-theme .brief dt {
  background: rgba(0, 176, 255, 0.1) !important;
  color: #0284c7 !important;
  border-color: rgba(0, 176, 255, 0.2) !important;
}

body.cs-light-theme .brief dd {
  color: #334155 !important;
}

body.cs-light-theme .brief dd b {
  color: #0f172a !important;
}

@media(max-width:900px) {
  .brief {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .brief {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .brief>div,
  .brief>div+div {
    padding: 1.25rem 1.25rem;
  }
}

/* ============================================================
   OWNERSHIP LEDGER
   ============================================================ */
.own {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(30px, 4vw, 46px)
}

.own>div {
  padding: clamp(1.5rem, 2.5vw, 2.1rem) clamp(1.4rem, 2.2vw, 2rem) clamp(1.5rem, 2.5vw, 2.1rem) 0
}

.own>div+div {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1.4rem, 2.2vw, 2rem);
  padding-right: 0
}

.own .hd {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 1.1rem
}

.own .mine .hd {
  color: var(--dcp-lift)
}

.own .not .hd {
  color: var(--paper-28)
}

.own ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.own li {
  font-size: .9375rem;
  line-height: 1.5;
  padding: .55rem 0 .55rem 1.3rem;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--paper-80)
}

.own li:last-child {
  border-bottom: 0
}

.own .not li {
  color: var(--paper-44)
}

.own .mine li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  background: var(--dcp);
  border-radius: 0 !important;
  position: absolute;
  left: 0;
  top: 1.28rem;
  width: 6px;
  height: 1px;
  background: var(--paper-28)
}

@media(max-width:720px) {
  .own {
    grid-template-columns: 1fr
  }

  .own>div+div {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-left: 0
  }
}

/* ============================================================
   PHASE TIMELINE  (synthesis of the ten rounds)
   ============================================================ */
.phases {
  margin-top: clamp(38px, 5vw, 60px)
}

.phase-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 32px)
}

.phase {
  border-top: 2px solid var(--rule);
  padding-top: 1.2rem;
  transition: border-color .4s
}

.phase.a {
  border-top-color: var(--dcp)
}

.phase .rng {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .7rem
}

.phase h4 {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  margin-bottom: .6rem
}

.phase p {
  margin: 0;
  font-size: .9063rem;
  line-height: 1.55;
  color: var(--paper-62);
  max-width: 38ch
}

.phase .shift {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-28);
  line-height: 1.8;
  border-top: 1px solid var(--rule-soft);
  padding-top: .8rem
}

.phase .shift b {
  color: var(--paper-62);
  font-weight: 400
}

@media(max-width:820px) {
  .phase-track {
    grid-template-columns: 1fr;
    gap: 22px
  }
}

.ticks {
  display: flex;
  gap: 3px;
  margin-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem
}

.ticks a {
  flex: 1;
  text-decoration: none;
  text-align: center;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  color: var(--paper-28);
  padding-top: .55rem;
  border-top: 2px solid var(--rule);
  transition: color .25s, border-color .25s
}

.ticks a:hover {
  color: var(--dcp-lift);
  border-top-color: var(--dcp-lift)
}

.ticks a.p1 {
  border-top-color: rgba(174, 58, 110, .35)
}

.ticks a.p2 {
  border-top-color: rgba(174, 58, 110, .62)
}

.ticks a.p3 {
  border-top-color: var(--dcp)
}

/* ============================================================
   JUDGMENT BLOCK  (major decisions)
   ============================================================ */
.judg {
  border: 1px solid var(--rule);
  border-left: none !important;
  margin-top: clamp(26px, 3.6vw, 38px)
}

.judg .jh {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  padding: 1rem clamp(1.2rem, 2vw, 1.7rem);
  border-bottom: 1px solid var(--rule-soft);
  margin: 0
}

.judg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr))
}

.judg-grid>div {
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.7rem);
  border-top: 0
}

.judg-grid>div+div {
  border-left: 1px solid var(--rule-soft)
}

.judg dt {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-bottom: .7rem
}

.judg dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--paper-62)
}

.judg dd b {
  color: var(--paper);
  font-weight: 500
}

.judg .tradeoff dt {
  color: var(--dcp-lift)
}

@media(max-width:700px) {
  .judg-grid>div+div {
    border-left: 0;
    border-top: 1px solid var(--rule-soft)
  }
}

/* ============================================================
   DECISION MAP
   ============================================================ */
.map {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(34px, 5vw, 58px);
  margin-top: clamp(34px, 4.6vw, 52px)
}

.map-top {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 32px)
}

.map-top .src-node {
  display: inline-block;
  border: 1px solid var(--dcp);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .7rem 1.3rem
}

.map-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  position: relative
}

.map-branches::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(22px, 3vw, 32px) + 2px);
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--rule)
}

.branch {
  border-top: 2px solid var(--dcp);
  padding-top: 1.2rem
}

.branch .bn {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .55rem
}

.branch h4 {
  margin-bottom: .5rem
}

.branch .job {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.08rem;
  color: var(--paper-80);
  margin: 0 0 .8rem
}

.branch p.d {
  margin: 0;
  font-size: .9063rem;
  line-height: 1.55;
  color: var(--paper-62)
}

.map-out {
  border: 1px dashed rgba(255, 255, 255, .18);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  margin-top: clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center
}

.map-out .x {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  white-space: nowrap
}

.map-out p {
  margin: 0;
  font-size: .9375rem;
  color: var(--paper-44);
  line-height: 1.55
}

.map-foot {
  text-align: center;
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28)
}

@media(max-width:700px) {
  .map-branches {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .map-branches::before {
    display: none
  }

  .map-out {
    grid-template-columns: 1fr;
    gap: .5rem
  }
}

/* ============================================================
   OUTCOME SPLIT
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(34px, 4.6vw, 52px)
}

.split>div {
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.2vw, 2rem) clamp(1.5rem, 2.6vw, 2.2rem) 0
}

.split>div+div {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1.4rem, 2.2vw, 2rem);
  padding-right: 0
}

.split .hd {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 1rem
}

.split .programme .hd {
  color: var(--paper-28)
}

.split .mine .hd {
  color: var(--dcp-lift)
}

.split p {
  margin: 0;
  color: var(--paper-62);
  font-size: .9688rem;
  line-height: 1.62;
  max-width: 44ch
}

.split p+p {
  margin-top: .9rem
}

.split strong {
  color: var(--paper);
  font-weight: 500
}

@media(max-width:720px) {
  .split {
    grid-template-columns: 1fr
  }

  .split>div+div {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-left: 0
  }
}

/* ============================================================
   SOLE DESIGNER STATEMENT
   ============================================================ */
.sole {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.sole .badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 0.85rem;
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 176, 255, 0.08);
  border: 1px solid rgba(0, 176, 255, 0.15);
  border-radius: 0 !important;
}

.sole p.stmt {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--paper-80);
  margin: 0;
  max-width: 100%;
}

.sole p.stmt b {
  color: var(--paper);
  font-weight: 600;
}

body.cs-light-theme .sole {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.cs-light-theme .sole .badge {
  background: rgba(0, 176, 255, 0.1) !important;
  color: #0284c7 !important;
  border-color: rgba(0, 176, 255, 0.2) !important;
}

body.cs-light-theme .sole p.stmt {
  color: #334155 !important;
}

body.cs-light-theme .sole p.stmt b {
  color: #0f172a !important;
}

/* ---- process spine ---- */
.spine {
  margin-top: clamp(32px, 4.4vw, 50px);
  border-top: 1px solid var(--rule)
}

.spine-h {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 1.1rem 0 1.4rem
}

.spine-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft)
}

.spine-track>div {
  background: var(--ink);
  padding: 1.15rem 1.05rem;
  position: relative
}

.spine-track .sn {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  color: var(--dcp-lift);
  margin: 0 0 .55rem
}

.spine-track h5 {
  margin: 0 0 .4rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--paper)
}

.spine-track p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--paper-44)
}

/* ---- collaboration model ---- */
.collab {
  margin-top: clamp(32px, 4.4vw, 50px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 2.6vw, 2.1rem)
}

.collab-core {
  border: 1px solid var(--dcp);
  padding: 1.1rem 1.4rem;
  display: inline-block;
  margin-bottom: 1.4rem
}

.collab-core .r {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .4rem
}

.collab-core .n {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-soft)
}

.collab-grid>div {
  padding: 1.2rem 1.3rem 1.2rem 0;
  border-bottom: 1px solid var(--rule-soft)
}

.collab-grid>div+div {
  border-left: 1px solid var(--rule-soft);
  padding-left: 1.3rem
}

.collab-grid dt {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-bottom: .55rem
}

.collab-grid dd {
  margin: 0;
  font-size: .9063rem;
  line-height: 1.55;
  color: var(--paper-62)
}

.collab-grid dd b {
  color: var(--paper);
  font-weight: 500;
  display: block;
  margin-bottom: .25rem
}

@media(max-width:660px) {

  .collab-grid>div,
  .collab-grid>div+div {
    border-left: 0;
    padding-left: 0;
    padding-right: 0
  }
}

/* ============================================================
   COLLABORATION DIAGRAM
   ============================================================ */
.cdia {
  margin-top: clamp(30px, 4.2vw, 48px)
}

.cdia-me {
  text-align: center;
  margin-bottom: clamp(26px, 3.4vw, 38px);
  position: relative
}

.cdia-me .box {
  display: inline-block;
  border: 1px solid var(--dcp);
  padding: .95rem 1.6rem;
  background: var(--ink);
  position: relative;
  z-index: 2
}

.cdia-me .r {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .35rem
}

.cdia-me .n {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.cdia-me::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(26px, 3.4vw, 38px) / 2);
  width: 1px;
  height: clamp(13px, 1.7vw, 19px);
  background: var(--rule)
}

.cdia-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  position: relative
}

.cdia-cols::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(26px, 3.4vw, 38px) / 2);
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: var(--rule)
}

.cdia-col {
  border-top: 2px solid var(--rule);
  padding-top: 1.1rem
}

.cdia-col .fn {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 .5rem
}

.cdia-col h5 {
  margin: 0 0 .45rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--paper)
}

.cdia-col p {
  margin: 0;
  font-size: .8438rem;
  line-height: 1.5;
  color: var(--paper-44)
}

.cdia-over {
  border-top: 2px solid var(--dcp);
  padding: 1.25rem 1.75rem !important;
  margin-top: clamp(16px, 2.2vw, 24px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(12px, 2vw, 26px);
  align-items: center;
}

.cdia-over .fn {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0;
  white-space: nowrap
}

.cdia-over p {
  margin: 0;
  font-size: .875rem;
  color: var(--paper-62);
  line-height: 1.55
}

.cdia-over p b {
  color: var(--paper);
  font-weight: 500
}

@media(max-width:700px) {
  .cdia-cols {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .cdia-cols::before,
  .cdia-me::after {
    display: none
  }

  .cdia-over {
    grid-template-columns: 1fr;
    gap: .4rem
  }
}

/* ============================================================
   PROBLEM MODEL
   ============================================================ */
.model {
  display: grid;
  grid-template-columns: 1.25fr auto 1fr auto 1fr;
  gap: clamp(12px, 2vw, 22px);
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 4.2vw, 48px);
  margin-top: clamp(32px, 4.4vw, 50px)
}

.model-set {
  border-left: none !important;
  padding-left: 1.1rem
}

.model-set p {
  margin: 0;
  font-size: .9063rem;
  color: var(--paper-80);
  line-height: 1.5;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule-soft)
}

.model-set p:last-child {
  border-bottom: 0
}

.model-set .lab {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: .5rem
}

.model-arrow {
  color: var(--dcp);
  font-size: 1.1rem;
  text-align: center;
  margin: 0
}

.model-node {
  border: 1px solid var(--rule);
  padding: 1rem 1.2rem;
  text-align: center
}

.model-node .lab {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 .4rem
}

.model-node .v {
  margin: 0;
  font-size: .9688rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.3
}

.model-node.fail {
  border-color: rgba(174, 58, 110, .5)
}

.model-node.fail .v {
  color: var(--dcp-lift)
}

@media(max-width:820px) {
  .model {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left
  }

  .model-arrow {
    text-align: left;
    transform: rotate(90deg);
    width: 1.2rem
  }
}

/* ============================================================
   FINAL SYSTEM DIAGRAM
   ============================================================ */
.sys-dia {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(30px, 4.4vw, 52px);
  margin-bottom: clamp(38px, 5vw, 62px)
}

.sys-dia-h {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 clamp(20px, 3vw, 28px)
}

.sys-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 40px)
}

.sys-node {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--dcp);
  padding: clamp(1.2rem, 2.2vw, 1.7rem)
}

.sys-node .tier {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 .5rem
}

.sys-node h4 {
  margin-bottom: .9rem;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem)
}

.sys-node ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  border-top: 1px solid var(--rule-soft)
}

.sys-node li {
  counter-increment: s;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--paper-62);
  padding: .6rem 0 .6rem 1.9rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative
}

.sys-node li::before {
  content: "0" counter(s);
  position: absolute;
  left: 0;
  top: .62rem;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  color: var(--paper-28)
}

.sys-node .job {
  margin: 1rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--paper)
}

@media(max-width:760px) {
  .sys-cols {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

/* ============================================================
   THESIS
   ============================================================ */
.thesis {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(70px, 9vw, 120px);
  position: relative;
  overflow: hidden
}

.thesis::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -12%;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(174, 58, 110, .20), transparent 66%);
  filter: blur(30px);
  pointer-events: none
}

.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5.5vw, 80px);
  align-items: center;
  position: relative
}

.thesis h2 {
  margin-bottom: 1.1rem
}

.thesis .sub-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.08rem, 1.9vw, 1.4rem);
  line-height: 1.45;
  color: var(--paper-80);
  margin: 0 0 1.3rem;
  max-width: 34ch
}

.thesis p.desc {
  color: var(--paper-62);
  font-size: 1rem;
  margin: 0 0 1.6rem;
  max-width: 46ch
}

.thesis .facts {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.9rem;
  flex-wrap: wrap
}

.thesis .facts div {
  padding: .9rem 1.4rem .9rem 0
}

.thesis .facts div+div {
  border-left: 1px solid var(--rule-soft);
  padding-left: 1.4rem
}

.thesis .facts dt {
  font-family: var(--mono);
  font-size: .5313rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-bottom: .3rem
}

.thesis .facts dd {
  margin: 0;
  font-size: .9375rem;
  color: var(--paper-80)
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--dcp);
  color: var(--paper);
  text-decoration: none;
  padding: .95rem 1.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .28s, color .28s
}

.cta:hover {
  background: var(--dcp);
  color: #fff
}

.cta .ar {
  transition: transform .28s
}

.cta:hover .ar {
  transform: translateX(4px)
}

.thesis .note {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 1rem 0 0
}

.stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  align-items: end
}

.stack .lead {
  grid-column: 1/-1;
  justify-self: start;
  width: min(58%, 300px);
  margin-bottom: clamp(10px, 1.6vw, 18px)
}

.stack img {
  border: 1px solid var(--rule);
  border-radius: 0 !important;
  background: #fff
}

.stack figcaption {
  font-family: var(--mono);
  font-size: .5313rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin-top: .6rem
}

@media(max-width:900px) {
  .thesis-grid {
    grid-template-columns: 1fr;
    gap: 38px
  }

  .stack .lead {
    max-width: 52%
  }
}

/* ============================================================
   VALUE ARITHMETIC
   ============================================================ */
.value {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 4.2vw, 48px);
  margin-top: clamp(32px, 4.4vw, 50px)
}

.value-in {
  border-left: none !important;
  padding-left: clamp(1rem, 1.8vw, 1.4rem)
}

.value-in .vlab {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 .5rem
}

.value-in .vfig {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
  font-variant-numeric: tabular-nums
}

.value-in .vsub {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-44);
  margin: .6rem 0 0
}

.value-eq {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0
}

.value-out {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft)
}

.value-out li {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: clamp(10px, 1.6vw, 18px);
  align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9375rem;
  color: var(--paper-62);
  line-height: 1.45
}

.value-out li span {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--paper);
  font-weight: 500
}

@media(max-width:760px) {
  .value {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .value-eq {
    transform: rotate(90deg);
    width: 2rem
  }
}

/* ============================================================
   RESEARCH QUESTION MAP & PARTICIPANT GROUPS (ENHANCED)
   ============================================================ */
.qmap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.qmap-q {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.6rem 1.8rem;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.qmap-q:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.qmap-q .qn {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 0.65rem;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 176, 255, 0.08);
  border-radius: 0 !important;
  border: 1px solid rgba(0, 176, 255, 0.15);
}

.qmap-q .qt {
  margin: 0;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: var(--paper);
  max-width: 100%;
}

.qmap-arrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-44);
  margin: clamp(24px, 3.5vw, 36px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.qmap-arrow::before,
.qmap-arrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--rule-soft), transparent);
}

.who {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

.who-col {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.who-col:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.who-col .ix {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin: 0 0 0.65rem;
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 176, 255, 0.08);
  border-radius: 0 !important;
  border: 1px solid rgba(0, 176, 255, 0.15);
}

.who-col h4 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}

.who-col p {
  color: var(--paper-62);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.2rem;
  max-width: 100%;
}

.who-col ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}

.who-col li {
  font-size: 0.9rem;
  color: var(--paper-80);
  padding: 0.7rem 0 0.7rem 1.25rem;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.5;
}

.who-col li:last-child {
  border-bottom: none;
}

.who-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  border-radius: 0 !important;
  background: var(--dcp-lift);
  box-shadow: 0 0 6px rgba(0, 176, 255, 0.5);
}

.who-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--paper-44);
  font-weight: 500;
  width: 36px;
  height: 36px;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rule-soft);
  align-self: center;
}

.who-out {
  background: linear-gradient(135deg, rgba(0, 176, 255, 0.05), rgba(230, 31, 37, 0.04));
  border: 1px solid rgba(0, 176, 255, 0.2);
  border-radius: 0 !important;
  margin-top: clamp(24px, 3.4vw, 36px);
  padding: 1.4rem 1.8rem;
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.who-out .ar {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  flex: none;
  padding: 0.25rem 0.65rem;
  background: rgba(0, 176, 255, 0.12);
  border-radius: 0 !important;
  border: 1px solid rgba(0, 176, 255, 0.25);
}

.who-out p {
  margin: 0;
  color: var(--paper-80);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 100%;
}

@media(max-width:800px) {
  .qmap {
    grid-template-columns: 1fr;
    gap: 22px
  }
}

/* ============================================================
   ROUND LOOP
   ============================================================ */
.loop {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 4.2vw, 46px);
  margin-top: clamp(40px, 5.4vw, 64px)
}

.loop-h {
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-28);
  margin: 0 0 clamp(20px, 3vw, 28px)
}

.loop-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft)
}

.loop-track .loop-step {
  background: var(--ink);
  padding: 1.1rem 1rem
}

.loop-track .ln {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  color: var(--dcp-lift);
  margin: 0 0 .5rem
}

.loop-track h5 {
  margin: 0 0 .4rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--paper)
}

.loop-track p:not(.ln) {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--paper-44)
}

.loop-back {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: .5938rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dcp-lift)
}

@media(max-width:900px) {
  .loop-track {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:560px) {
  .loop-track {
    grid-template-columns: repeat(2, 1fr)
  }

  .loop-back {
    text-align: left
  }
}

/* ============================================================
   DISCOVERY CHART & OUTCOMES CARD (COSMOS DESIGN SYSTEM ENHANCED)
   ============================================================ */
.disc-card-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.disc {
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.disc-row {
  display: grid;
  grid-template-columns: 36px 1fr 58px;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  transition: all 0.25s ease;
}

.disc-row:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.15);
}

.disc-row .dr {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin: 0;
}

.dbar {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
}

.dbar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.18);
  transition: width 0.6s var(--ease-out-expo);
}

.disc-row.hit {
  background: rgba(230, 31, 37, 0.04);
  border-color: rgba(230, 31, 37, 0.3);
}

.disc-row.hit .dbar span {
  background: var(--color-airtel-red, #e61f25);
  box-shadow: 0 0 10px rgba(230, 31, 37, 0.5);
}

.disc-row.hit .dr,
.disc-row.hit .dv {
  color: var(--color-airtel-red, #e61f25);
  font-weight: 700;
}

.disc-row .dv {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.disc-note {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  background: rgba(0, 176, 255, 0.06);
  border: 1px solid rgba(0, 176, 255, 0.18);
  border-radius: 0 !important;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.5;
}

.disc-note b {
  color: var(--dcp-lift);
  font-weight: 600;
}

body.cs-light-theme .disc-card-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.cs-light-theme .disc-row {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.cs-light-theme .disc-row .dr {
  color: #64748b !important;
}

body.cs-light-theme .disc-row .dv {
  color: #334155 !important;
}

body.cs-light-theme .dbar {
  background: rgba(15, 23, 42, 0.08) !important;
}

body.cs-light-theme .dbar span {
  background: rgba(15, 23, 42, 0.2) !important;
}

body.cs-light-theme .disc-row.hit {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

body.cs-light-theme .disc-row.hit .dr,
body.cs-light-theme .disc-row.hit .dv {
  color: #dc2626 !important;
}

body.cs-light-theme .disc-row.hit .dbar span {
  background: #dc2626 !important;
}

body.cs-light-theme .disc-note {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #334155 !important;
}

body.cs-light-theme .disc-note b {
  color: #0284c7 !important;
}

/* ============================================================
   TRADE-OFFS TABLE
   ============================================================ */
.tradeoffs {
  border-top: 1px solid var(--rule);
  margin-top: clamp(38px, 5vw, 60px)
}

.trow {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: clamp(14px, 2.6vw, 36px);
  padding-block: clamp(1.2rem, 2.2vw, 1.7rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start
}

.trow p {
  margin: 0;
  font-size: .9063rem;
  line-height: 1.55
}

.trow b {
  display: block;
  font-family: var(--mono);
  font-size: .5313rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: .45rem
}

.trow .gain {
  color: var(--paper-80)
}

.trow .gain b {
  color: var(--dcp-lift)
}

.trow .cost {
  color: var(--paper-44)
}

.trow .cost b {
  color: var(--paper-28)
}

.trow .call {
  color: var(--paper);
  border-left: none !important;
  padding-left: 1.1rem
}

.trow .call b {
  color: var(--paper-44)
}

@media(max-width:760px) {
  .trow {
    grid-template-columns: 1fr;
    gap: .9rem
  }

  .trow .call {
    padding-left: .9rem
  }
}

/* shared node beneath the two system surfaces */
.sys-shared {
  grid-column: 1/-1;
  border: 1px dashed rgba(255, 255, 255, .18);
  padding: clamp(1rem, 1.9vw, 1.4rem);
  margin-top: clamp(14px, 2.4vw, 20px);
  text-align: center;
  font-size: .9375rem;
  color: var(--paper-62);
  line-height: 1.55
}

.sys-shared b {
  color: var(--paper);
  font-weight: 500
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 6, 8, .96);
  backdrop-filter: blur(8px);
  display: none;
  place-items: center;
  padding: clamp(20px, 4vw, 56px)
}

.lb.open {
  display: grid
}

.lb img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  border-radius: 0 !important;
  background: #fff
}

.lb figcaption {
  margin: 1rem auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-44);
  max-width: 62ch;
  line-height: 1.85
}

.lb-x {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 42px;
  height: 42px;
  border-radius: 0 !important;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  font-size: 1.15rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s, color .2s
}

.lb-x:hover {
  border-color: var(--dcp-lift);
  color: var(--dcp-lift)
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}

html.js-loaded .rv {
  opacity: 0;
  transform: translateY(20px);
}

html.js-loaded .rv.in,
.rv.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  .rv {
    opacity: 1;
    transform: none
  }

  .marq-t {
    animation: none
  }
}

/* ============================================================
   PORTFOLIO NAVIGATION HEADER (Design System Alignment)
   ============================================================ */
.cs-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dcp, #AE3A6E);
  z-index: 1002;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* ============================================================
   TATA 1MG LIGHT THEME SYSTEM & COMPONENT POLISH
   ============================================================ */
body.cs-light-theme,
body.light-theme {
  .cs-metrics-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }

  @media (max-width: 768px) {
    .cs-metrics-row {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 1.25rem !important;
    }
  }

  .cs-metric {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .cs-metric-value {
    color: #0f172a !important;
    font-size: clamp(2.4rem, 4.5vw, 3.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin: 0 0 0.45rem 0 !important;
  }

  .cs-metric-label {
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .cs-metric-sub {
    color: #059669 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
  }

  .value {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 1.75rem 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .value-in {
    border-left-color: rgba(15, 23, 42, 0.12) !important;
  }

  .value-in .vlab {
    color: #64748b !important;
  }

  .value-in .vfig {
    color: #0f172a !important;
  }

  .value-in .vsub {
    color: #475569 !important;
  }

  .value-eq {
    color: #0284c7 !important;
  }

  .value-out {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
  }

  .value-out li {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
    color: #334155 !important;
  }

  .value-out li span {
    color: #0f172a !important;
  }

  .model {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 1.75rem 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .model-set {
    border-left-color: rgba(15, 23, 42, 0.12) !important;
  }

  .model-set p {
    color: #334155 !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .model-set .lab {
    color: #0284c7 !important;
  }

  .model-arrow {
    color: var(--dcp) !important;
  }

  .model-node {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    color: #0f172a !important;
  }

  .model-node .lab {
    color: #64748b !important;
  }

  .model-node .v {
    color: #0f172a !important;
  }

  .model-node.fail {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
  }

  .model-node.fail .lab {
    color: #dc2626 !important;
  }

  .model-node.fail .v {
    color: #dc2626 !important;
  }

  .cdia {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 1.75rem 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .cdia-me .box {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 0 !important;
  }

  .cdia-me .r {
    color: #0284c7 !important;
  }

  .cdia-me .n {
    color: #0f172a !important;
  }

  .cdia-col {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
    padding: 1.2rem !important;
  }

  .cdia-col .fn {
    color: #0284c7 !important;
  }

  .cdia-col h5 {
    color: #0f172a !important;
  }

  .cdia-col p {
    color: #334155 !important;
  }

  .cdia-over {
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 1.25rem 1.75rem !important;
    align-items: center !important;
  }

  .cdia-over .fn {
    color: #ae3a6e !important;
  }

  .cdia-over p {
    color: #0f172a !important;
  }

  .spine {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .spine-h {
    color: #64748b !important;
  }

  .spine-track {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    overflow: hidden;
  }

  .spine-track>div {
    background: #ffffff !important;
  }

  .spine-track .sn {
    color: #0284c7 !important;
  }

  .spine-track h5 {
    color: #0f172a !important;
  }

  .spine-track p {
    color: #475569 !important;
  }

  .own {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 1.75rem 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .own>div+div {
    border-left-color: rgba(15, 23, 42, 0.08) !important;
  }

  .own .mine .hd {
    color: #0284c7 !important;
  }

  .own .not .hd {
    color: #64748b !important;
  }

  .own li {
    color: #334155 !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .own .not li {
    color: #64748b !important;
  }

  .testi {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .testi blockquote {
    color: #0f172a !important;
  }

  .testi .attr {
    color: #64748b !important;
  }

  .testi .attr b {
    color: #0f172a !important;
  }

  .figs {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 1.5rem 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .figs .v {
    color: #0f172a !important;
  }

  .figs .k {
    color: #475569 !important;
  }

  /* Anatomy of One Round - 3-Column Dashed Divider Layout (Reference Match) */
  .loop {
    border-top: none !important;
    border-bottom: none !important;
    padding-block: 1rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }

  .loop-h {
    font-family: var(--font-mono, monospace), sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #0284c7 !important;
    margin: 0 0 1.75rem 0 !important;
  }

  .loop-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .loop-track .loop-step {
    background: transparent !important;
    border: none !important;
    border-right: 1px dashed rgba(148, 163, 184, 0.4) !important;
    padding: 0 2rem 0 0 !important;
    margin-right: 2rem !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .loop-track .loop-step:nth-child(3n) {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .loop-step-head {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  .loop-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
  }

  .loop-track h5 {
    font-family: 'Gilroy ExtraBold', 'Plus Jakarta Sans', var(--font-sans, sans-serif), sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
  }

  .loop-track p:not(.ln) {
    font-family: 'Plus Jakarta Sans', var(--font-sans, sans-serif), sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  .loop-back {
    margin-top: 2rem !important;
    text-align: right !important;
    font-family: var(--font-mono, monospace), sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #0284c7 !important;
  }

  @media (max-width: 900px) {
    .loop-track {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 2rem 0 !important;
    }

    .loop-track .loop-step {
      border-right: 1px dashed rgba(148, 163, 184, 0.4) !important;
      padding-right: 1.5rem !important;
      margin-right: 1.5rem !important;
    }

    .loop-track .loop-step:nth-child(3n) {
      border-right: 1px dashed rgba(148, 163, 184, 0.4) !important;
      padding-right: 1.5rem !important;
      margin-right: 1.5rem !important;
    }

    .loop-track .loop-step:nth-child(2n) {
      border-right: none !important;
      padding-right: 0 !important;
      margin-right: 0 !important;
    }
  }

  @media (max-width: 600px) {
    .loop-track {
      grid-template-columns: 1fr !important;
      gap: 1.75rem !important;
    }

    .loop-track .loop-step {
      border-right: none !important;
      padding-right: 0 !important;
      margin-right: 0 !important;
    }
  }

  .cs-callout-card,
  .callout {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 1.5rem 1.75rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }

  .cs-callout-card+.cs-callout-card,
  .callout+.callout,
  .cs-callout-card+.callout,
  .callout+.cs-callout-card {
    margin-top: 1.5rem !important;
  }

  .cs-callout-card p,
  .callout p,
  .pull {
    color: #0f172a !important;
  }

  .phase-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }

  @media (max-width: 820px) {
    .phase-track {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
    }
  }

  .phase {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 2rem 1.75rem 1.75rem 1.75rem !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .phase:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  }

  .phase .rng {
    font-family: var(--font-mono, monospace), sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #0284c7 !important;
    margin: 0 0 0.85rem 0 !important;
  }

  .phase h4 {
    font-family: 'Gilroy ExtraBold', 'Plus Jakarta Sans', var(--font-sans, sans-serif), sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    margin: 0 0 0.85rem 0 !important;
    letter-spacing: -0.01em !important;
  }

  .phase p {
    font-family: 'Plus Jakarta Sans', var(--font-sans, sans-serif), sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin: 0 0 1.75rem 0 !important;
    max-width: none !important;
    flex-grow: 1 !important;
  }

  .phase .shift {
    margin-top: auto !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 1.1rem !important;
    font-family: var(--font-mono, monospace), sans-serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
  }

  .phase .shift b,
  .phase .shift strong {
    color: #64748b !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  .ticks a {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    color: #475569 !important;
  }

  .ticks a:hover,
  .ticks a.here {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
  }

  .round {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .round-n {
    -webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.2) !important;
    color: transparent !important;
  }

  .round.lit .round-n {
    -webkit-text-stroke: 1.5px #ae3a6e !important;
    color: rgba(174, 58, 110, 0.12) !important;
  }

  .steps {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .steps>div {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .steps dt {
    color: #0284c7 !important;
  }

  .steps dd {
    color: #334155 !important;
  }

  .steps dd b {
    color: #0f172a !important;
  }

  .quotes blockquote {
    border-left-color: rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
  }

  .quotes cite {
    color: #64748b !important;
  }

  .judg {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .judg .jh {
    color: #0284c7 !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .judg-grid>div+div {
    border-left-color: rgba(15, 23, 42, 0.08) !important;
  }

  .judg dt {
    color: #64748b !important;
  }

  .judg dd {
    color: #334155 !important;
  }

  .judg dd b {
    color: #0f172a !important;
  }

  .judg .tradeoff dt {
    color: #0284c7 !important;
  }

  .chain {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .chain-h .ix {
    color: #64748b !important;
  }

  .link+.link {
    border-left-color: rgba(15, 23, 42, 0.12) !important;
  }

  .link .lab {
    color: #0284c7 !important;
  }

  .link p {
    color: #334155 !important;
  }

  .link .say {
    color: #0f172a !important;
  }

  .link .who {
    color: #64748b !important;
  }

  .link.win {
    background: #f0f9ff !important;
    border-radius: 0 !important;
    padding: 1.25rem !important;
  }

  .link.win p {
    color: #0f172a !important;
  }

  .link .big {
    color: #0284c7 !important;
  }

  .sys>div {
    background: #ffffff !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .sys>div:nth-child(even) {
    border-left-color: rgba(15, 23, 42, 0.08) !important;
  }

  .sys .n {
    color: #0284c7 !important;
  }

  .sys h4 {
    color: #0f172a !important;
  }

  .sys .obs {
    color: #0f172a !important;
    border-left-color: rgba(15, 23, 42, 0.2) !important;
  }

  .sys .resp {
    color: #334155 !important;
  }

  .sys .resp b {
    color: #64748b !important;
  }

  .map {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .map-top .src-node {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
  }

  .branch {
    border-top-color: var(--dcp) !important;
  }

  .branch .bn {
    color: #0284c7 !important;
  }

  .branch h4 {
    color: #0f172a !important;
  }

  .branch .job {
    color: #0f172a !important;
  }

  .branch p.d {
    color: #334155 !important;
  }

  .map-out {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
  }

  .map-out .x {
    color: #64748b !important;
  }

  .map-out p {
    color: #334155 !important;
  }

  .map-foot {
    color: #64748b !important;
  }

  .arch {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .arch-row {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .arch-rank {
    color: #0284c7 !important;
  }

  .arch-row.out .arch-rank {
    color: #64748b !important;
  }

  .arch-row h4 {
    color: #0f172a !important;
  }

  .arch-row.out h4 {
    color: #64748b !important;
  }

  .arch-why {
    color: #64748b !important;
  }

  .arch-row p.reason {
    color: #334155 !important;
  }

  .tradeoffs {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .trow {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  .trow .gain {
    color: #0f172a !important;
  }

  .trow .gain b {
    color: #0284c7 !important;
  }

  .trow .cost {
    color: #475569 !important;
  }

  .trow .cost b {
    color: #64748b !important;
  }

  .trow .call {
    color: #0f172a !important;
    border-left-color: rgba(15, 23, 42, 0.12) !important;
  }

  .sys-dia {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .sys-dia-h {
    color: #64748b !important;
  }

  .sys-node {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-top: 3px solid var(--dcp) !important;
    border-radius: 0 !important;
  }

  .sys-node .tier {
    color: #0284c7 !important;
  }

  .sys-node h4 {
    color: #0f172a !important;
  }

  .sys-node ol {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
  }

  .sys-node li {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
    color: #334155 !important;
  }

  .sys-node li::before {
    color: #64748b !important;
  }

  .sys-node .job {
    color: #0f172a !important;
  }

  .sys-shared {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #334155 !important;
    border-radius: 0 !important;
  }

  .sys-shared b {
    color: #0f172a !important;
  }

  .surface {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .surface-h .tag {
    background: rgba(0, 176, 255, 0.1) !important;
    border-color: rgba(0, 176, 255, 0.25) !important;
    color: #0284c7 !important;
  }

  .surface>p {
    color: #334155 !important;
  }

  .surface>p strong {
    color: #0f172a !important;
  }

  .trace {
    color: #64748b !important;
  }

  .trace b {
    color: #0284c7 !important;
  }

  .viz-frame {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .viz-col.then .viz-num {
    color: #64748b !important;
  }

  .viz-num {
    color: #0f172a !important;
  }

  .viz-lab {
    color: #475569 !important;
  }

  .viz-mult .m {
    color: #0284c7 !important;
  }

  .viz-mult .t {
    color: #64748b !important;
  }

  .viz-dash {
    border-top-color: rgba(15, 23, 42, 0.2) !important;
  }

  .viz-note {
    color: #64748b !important;
  }

  .viz-second {
    border-bottom-color: rgba(15, 23, 42, 0.12) !important;
  }

  .viz-3x {
    color: #0284c7 !important;
  }

  .viz-3x sup {
    color: #64748b !important;
  }

  .viz-second p {
    color: #334155 !important;
  }

  .viz-second strong {
    color: #0f172a !important;
  }

  .split {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .split>div+div {
    border-left-color: rgba(15, 23, 42, 0.08) !important;
  }

  .split .programme .hd {
    color: #64748b !important;
  }

  .split .mine .hd {
    color: #0284c7 !important;
  }

  .split p {
    color: #334155 !important;
  }

  .split strong {
    color: #0f172a !important;
  }

  .tags span {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
  }

  .thesis {
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
  }

  .thesis .eyebrow {
    color: #0284c7 !important;
  }

  .thesis h2 {
    color: #0f172a !important;
  }

  .thesis .sub-line {
    color: #334155 !important;
  }

  .thesis .desc {
    color: #475569 !important;
  }

  .thesis .facts dt {
    color: #64748b !important;
  }

  .thesis .facts dd {
    color: #0f172a !important;
  }

  /* 05 Three Questions Section Light Theme */
  .cs-q-section {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  .cs-q-heading {
    color: #0f172a !important;
  }

  .cs-q-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .cs-q-card:hover {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  .cs-q-badge {
    background: rgba(0, 176, 255, 0.1) !important;
    color: #0284c7 !important;
    border-color: rgba(0, 176, 255, 0.2) !important;
  }

  .cs-q-card h4 {
    color: #0f172a !important;
  }

  .cs-q-card p {
    color: #334155 !important;
  }
}

/* ============================================================
   THREE QUESTIONS CARDS SECTION (.cs-q-section)
   ============================================================ */
.cs-q-section {
  margin-top: clamp(38px, 5vw, 60px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(24px, 4vw, 40px);
}

.cs-q-heading {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: clamp(20px, 3vw, 32px);
  letter-spacing: -0.02em;
}

.cs-q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.cs-q-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule-soft);
  border-radius: 0 !important;
  padding: 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.cs-q-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.cs-q-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dcp-lift);
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 176, 255, 0.08);
  border: 1px solid rgba(0, 176, 255, 0.15);
  border-radius: 0 !important;
}

.cs-q-card h4 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.cs-q-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--paper-62);
  margin: 0;
}

@media (max-width: 840px) {
  .cs-q-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================================
   ASPECT RATIO & IMAGE DISTORTION FIXES
   ============================================================ */
.flow figure {
  flex: 0 0 auto !important;
  width: clamp(180px, 22vw, 240px) !important;
  min-width: 170px !important;
  max-width: 260px !important;
  scroll-snap-align: start;
}

.flow.lg figure {
  width: clamp(220px, 26vw, 290px) !important;
  min-width: 210px !important;
  max-width: 310px !important;
}

.flow img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

.photo-pair img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.board img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

/* ============================================================
   THESIS BANNER CALLOUT CARD (.cs-thesis-banner)
   ============================================================ */
.cs-thesis-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1200px !important;
  margin-inline: auto !important;
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 60%, #f0f9ff 100%) !important;
  border: 1px solid rgba(174, 58, 110, 0.2) !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 1.8rem 2.2rem !important;
  box-shadow: 0 8px 30px rgba(174, 58, 110, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  margin-block: 2.5rem !important;
  transition: all 0.3s ease !important;
}

.cs-thesis-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(174, 58, 110, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(174, 58, 110, 0.35) !important;
}

.cs-thesis-banner-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cs-thesis-banner-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ae3a6e !important;
  background: rgba(174, 58, 110, 0.08) !important;
  border: 1px solid rgba(174, 58, 110, 0.2) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cs-thesis-banner-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

.cs-thesis-banner-stat-lbl {
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.cs-thesis-banner-btn {
  background: var(--dcp, #ae3a6e) !important;
  color: #ffffff !important;
  padding: 0.85rem 1.6rem !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  box-shadow: 0 4px 14px rgba(174, 58, 110, 0.25) !important;
  transition: all 0.25s ease !important;
}

.cs-thesis-banner-btn:hover {
  background: #962f5d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(174, 58, 110, 0.35) !important;
  color: #ffffff !important;
}

.cs-thesis-banner-btn:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* ============================================================
   ROUND HEAD 2-COLUMN RESTORATION & HIGH CONTRAST NUMERALS
   ============================================================ */
.round-head {
  display: grid !important;
  grid-template-columns: clamp(60px, 7vw, 96px) 1fr !important;
  gap: clamp(16px, 2.5vw, 36px) !important;
  align-items: start !important;
  margin-bottom: clamp(24px, 3.5vw, 36px) !important;
}

.round-n {
  font-family: var(--mono) !important;
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  color: var(--dcp, #ae3a6e) !important;
  -webkit-text-stroke: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

body.cs-light-theme,
body.light-theme {
  .round-n {
    color: var(--dcp, #ae3a6e) !important;
    -webkit-text-stroke: 0 !important;
  }

  .round-t .sub {
    color: #0284c7 !important;
    font-family: var(--mono) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
  }

  .round-t h3 {
    color: #0f172a !important;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
  }

  .round-t .q {
    font-family: var(--sans) !important;
    font-style: normal !important;
    font-size: clamp(0.98rem, 1.5vw, 1.15rem) !important;
    color: #334155 !important;
    line-height: 1.55 !important;
  }
}

@media(max-width: 640px) {
  .round-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ============================================================
   INSIGHT CHAINS IMAGE ASPECT RATIO FIX
   ============================================================ */
.chain figure {
  margin: 0 !important;
  width: 100% !important;
}

.chain .link img,
.chain figure img,
.chain img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

/* ============================================================
   JUMP LINK TICKS BUTTONS & PHASES SPACING
   ============================================================ */
.ticks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.ticks a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 34px !important;
  padding: 0 0.6rem !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  color: #475569 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

.ticks a:hover,
.ticks a.here {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
}

/* ============================================================
   CARD SUB-TEXT & SOURCE NOTES SPACING (Generous Gap Below Cards)
   ============================================================ */
p.src,
.src,
p.note,
.note,
p.cap,
.cap,
figcaption,
p.disc-note,
p.map-foot,
.cs-values-grid+p,
.cs-callout-card+p,
.cs-card+p,
.card+p,
.value+p,
.model+p,
.cdia+p,
.sys+p,
.map+p,
.spine-track+p,
.own+p,
.testi+p,
.round+p,
.cs-showcase+p,
.cs-metrics-row+p,
figure+p,
dl+p,
div[class*="grid"]+p,
div[class*="card"]+p,
div[class*="banner"]+p,
div[class*="visual"]+p {
  margin-top: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
}

.phases p.src {
  margin-top: 1.5rem !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
}

/* ============================================================
   UNIVERSAL RESPONSIVE IMAGE SYSTEM FOR ALL VIEWPORTS
   ============================================================ */
img,
figure img,
.cs-shell img,
img.zoom {
  max-width: 100% !important;
  height: auto !important;
}

/* Panoramic Banner Photos (e.g. img_006.jpg) */
figure img[src*="img_006"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1900 / 489 !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  figure img[src*="img_006"] {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    height: auto !important;
  }

  .flow figure {
    width: 200px !important;
    min-width: 180px !important;
  }

}

/* ============================================================
   RESPONSIVE FLOW & BOARD SYSTEM (NO DESKTOP OVERFLOW SCROLLBARS)
   ============================================================ */
.flow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  overflow: visible !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.flow figure {
  flex: 1 1 200px !important;
  min-width: 180px !important;
  max-width: 260px !important;
  width: auto !important;
}

.flow.lg figure {
  flex: 1 1 240px !important;
  min-width: 210px !important;
  max-width: 300px !important;
  width: auto !important;
}

.flow img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
}

/* Hide scrollbars globally on flow and board elements */
.flow::-webkit-scrollbar,
figure.board::-webkit-scrollbar,
.board::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Desktop Participant Board */
figure.board,
.board {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 1.75rem !important;
  margin-bottom: 2rem !important;
  border-radius: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

figure.board img,
.board img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Mobile & Small Screen Touch Overflow Rules */
@media (max-width: 768px) {
  .flow {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    padding-bottom: 6px !important;
  }

  .flow figure {
    flex: 0 0 auto !important;
    width: clamp(200px, 65vw, 250px) !important;
    min-width: 180px !important;
    scroll-snap-align: start !important;
  }

  .flow.lg figure {
    width: clamp(230px, 72vw, 290px) !important;
    min-width: 200px !important;
  }

  .flow img {
    max-width: none !important;
  }

  figure.board,
  .board {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  figure.board img,
  .board img {
    min-width: 680px !important;
    width: 680px !important;
    max-width: none !important;
  }
}

/* ============================================================
   EYEBROW & SECTION NUMBERS (Airtel Design System Match)
   ============================================================ */
.eyebrow,
.cs-section-num {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #0284c7 !important;
  margin-bottom: 0.6rem !important;
}

.eyebrow .n {
  color: var(--dcp, #ae3a6e) !important;
  font-weight: 800 !important;
  margin-right: 0.35rem !important;
}

body.cs-light-theme,
body.light-theme {

  .eyebrow,
  .cs-section-num {
    color: #0284c7 !important;
  }

  .eyebrow .n {
    color: #ae3a6e !important;
  }
}

/* ============================================================
   CS VALUES GRID & THREE-COLUMN STRATEGY GRID
   ============================================================ */
.cs-values-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  margin-block: 2.5rem !important;
}

.cs-values-grid>div {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 0 !important;
  padding: 1.6rem 1.6rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.cs-values-grid dt {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0284c7 !important;
  margin-bottom: 0.6rem !important;
}

.cs-values-grid h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.35 !important;
}

.cs-values-grid p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 !important;
}

@media (max-width: 840px) {
  .cs-values-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* ============================================================
   STRICT SHARP CARDS SYSTEM (0 BORDER-RADIUS)
   ============================================================ */
:root {
  --r: 0px !important;
}

.cs-metrics-row,
.cs-metric,
.value,
.value-in,
.model,
.model-node,
.cdia,
.cdia-me .box,
.cdia-col,
.cdia-over,
.spine-track,
.spine-track>div,
.own,
.testi,
.figs,
.cs-callout-card,
.callout,
.ticks a,
.judg,
.link.win,
.sys>div,
.map,
.sys-dia,
.sys-node,
.sys-shared,
.surface,
.viz-frame,
.split,
.tags span,
.thesis,
.cs-q-card,
.cs-q-badge,
.cs-thesis-banner,
.phase,
.cs-thesis-banner-tag,
.cs-thesis-banner-btn,
.cs-values-grid>div,
.cs-decision-card,
.cs-constraint-card,
.cs-showcase img,
figure img,
.cs-iteration-card,
.cs-iteration-visual,
.cs-iteration-visual img,
.round,
.round-head,
.round-body,
.cs-header-stacked,
.cs-decision,
.cs-card,
.card,
.cs-box,
div[class*="card"],
div[class*="box"],
div[class*="banner"],
div[class*="visual"],
div[class*="grid"]>div {
  border-radius: 0 !important;
}

/* ============================================
   Iteration Grid Component (Matching Reference UI)
   ============================================ */
.cs-iterations-section {
  margin: 4rem 0;
}

.cs-iterations-header {
  margin-bottom: 2.5rem;
}

.cs-iterations-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
  margin-bottom: 0.75rem !important;
}

body:not(.cs-light-theme) .cs-iterations-title {
  color: #ffffff !important;
}

.cs-iterations-lede {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  max-width: 780px !important;
  margin: 0 !important;
}

body:not(.cs-light-theme) .cs-iterations-lede {
  color: rgba(255, 255, 255, 0.7) !important;
}

.cs-iterations-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 3rem 2.25rem !important;
}

@media (max-width: 860px) {
  .cs-iterations-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

.cs-iteration-card {
  display: flex !important;
  flex-direction: column !important;
}

.cs-iteration-visual {
  width: 100% !important;
  height: 480px !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1.5rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body:not(.cs-light-theme) .cs-iteration-visual {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.cs-iteration-card:hover .cs-iteration-visual {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12) !important;
}

body:not(.cs-light-theme) .cs-iteration-card:hover .cs-iteration-visual {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4) !important;
}

.cs-iteration-visual img {
  max-height: 92% !important;
  max-width: 90% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.3s ease !important;
}

.cs-iteration-card:hover .cs-iteration-visual img {
  transform: scale(1.03) !important;
}

.cs-iteration-meta {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #e61f25 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.4rem !important;
}

.cs-iteration-meta--win {
  color: #10b981 !important;
}

.cs-iteration-meta--breakthrough {
  color: #3b82f6 !important;
}

.cs-iteration-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: #0f172a !important;
  margin: 0 0 0.5rem 0 !important;
}

body:not(.cs-light-theme) .cs-iteration-card-title {
  color: #ffffff !important;
}

.cs-iteration-desc {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 !important;
}

body:not(.cs-light-theme) .cs-iteration-desc {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================================
   REMOVE THICK RED LEFT BORDERS FROM ALL CARDS & CALLOUTS
   ============================================================ */
.cdia-over,
.cs-callout-card,
.cs-thesis-banner,
.cs-q-card,
.value-in,
.model-set,
.cs-decision,
div[class*="card"],
div[class*="over"],
div[class*="banner"] {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: rgba(15, 23, 42, 0.12) !important;
}

body.cs-light-theme .cdia-over,
body.light-theme .cdia-over {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: #fbcfe8 !important;
}

.round {
  border-left: none !important;
}