/* -- TOKENS -------------------------------------------------- */
:root {
  --bg:           #0F0F0E;
  --surface:      #1A1A18;
  --border:       rgba(255, 255, 255, 0.1);
  --border-sec:   #fff;
  --text:         #FFFFFF;
  --muted:        #FFFFFF;
  --dim:          #FFFFFF;
  --mint:         #25C47E;
  --mint-line:    rgba(37, 196, 126, 0.3);

  --font-serif:   'DM Sans', system-ui, sans-serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Sans', system-ui, sans-serif;

  --type-h1:      clamp(36px, 4vw, 56px);
  --type-h2:      36px;
  --type-body:    20px;
  --type-caption: 13px;

  --pad:          64px;
  --max:          1440px;
  --col:          1312px;
}

/* -- RESET --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* -- LAYOUT -------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 calc(var(--pad) + 5%);
}

/* -- NAV ----------------------------------------------------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  background: #0F0F0E;
  border-bottom: none;
  z-index: 100;
  transition: transform 0.3s ease;
}

nav.nav-hidden {
  transform: translateY(-100%);
}

.nav-logo {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-body);
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 64px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--mint); }

.nav-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -- NAV RETURN ---------------------------------------------- */
.nav-return {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.nav-return:hover {
  opacity: 0.7;
}

.back-arrow {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
  flex-direction: row-reverse;
}

.back-arrow::before {
  content: '';
  flex: 1;
  height: 1.5px;
  background: currentColor;
}

.back-arrow::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid currentColor;
  flex-shrink: 0;
}

/* -- SECTIONS WRAPPER ---------------------------------------- */
.sections-wrapper {
  position: relative;
  z-index: 1;
  margin-top: 100svh;
  background: var(--bg);
}

.section-panel {
  position: relative;
  background: var(--bg);
}

.section-panel--media {
  padding-top: 32px;
  padding-bottom: 96px;
}

/* -- HERO ---------------------------------------------------- */
.hero-datum {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: var(--mint-line);
  margin-bottom: 0;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h1);
  line-height: 1.1;
  color: var(--text);
  margin: 28px 0 32px;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 60px;
}

.hero-subtitle p + p {
  margin-top: 16px;
}

/* -- COVER IMAGE FULL WIDTH ---------------------------------- */
.cover-image-full {
  width: 100%;
  margin-top: 0;
  overflow: hidden;
}

.cover-image-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* -- COVER IMAGE (constrained, used inside sections) --------- */
.cover-image {
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0;
}

.cover-image img {
  width: 100%;
  height: auto;
  display: block;
}

.cover-image .placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
}

/* -- HERO INTRO ---------------------------------------------- */
.hero-intro-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  background: var(--bg);
}

.hero-intro {
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.hero-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-project-logo {
  width: 100%;
  max-width: 384px;
  height: auto;
  display: block;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-para {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--muted);
  line-height: 1.4;
}

/* -- CASE INFO TABLE ----------------------------------------- */
.case-info-table {
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
}

.case-info-row {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.case-info-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  display: block;
  letter-spacing: 0;
  text-align: left;
  padding: 12px 0 4px;
  border-bottom: 2px solid #fff;
  margin-bottom: 0;
}

.case-info-value {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-body);
  line-height: 1.25;
  color: var(--text);
  text-align: left;
  padding: 12px 0;
}

/* -- SECTIONS ------------------------------------------------ */
.section {
  padding-top: 112px;
  padding-bottom: 40px;
}

.context-section {
  padding-bottom: 40px;
}

.sections-wrapper .section-panel:last-child {
  min-height: auto;
  padding-bottom: 200px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  letter-spacing: 0.01em;
  display: block;
  line-height: 1;
  margin-bottom: -4px;
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  align-items: start;
}

.section-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.2;
  color: var(--text);
}

.section-heading.full {
  margin-bottom: 32px;
}

.section-body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--muted);
  line-height: 1.7;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Inline links inside body copy — mint, underlined for discoverability
   in a paragraph, unlike the nav/footer links which stand alone. */
.section-body a {
  color: var(--mint);
  text-decoration: none;
  border-bottom: 1px solid var(--mint-line);
  transition: border-color 0.2s ease;
}

.section-body a:hover { border-bottom-color: var(--mint); }


.section-body--two-col {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.col-center {
  text-align: left;
}

.col-right {
  justify-self: end;
}

@media (max-width: 900px) {
  .section-body--two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .col-right { justify-self: start; }
}

/* -- WIDE TEXT SECTION ---------------------------------------
   The second arrangement for a text section. .section-split puts a narrow
   heading against a single column of body copy; when two text sections sit
   back to back that silhouette repeats and the page flattens. This one runs
   the heading full width, carries the statement in a lead paragraph, and
   splits the qualifications into two labelled columns underneath. */
.section-wide .section-lead {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.5;
  color: var(--text);
  max-width: 46ch;
  margin: 0 0 64px;
}

.section-wide .section-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.section-wide .section-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* .section-label is drawn to sit tight above a heading; above body copy it
   needs its own space back. */
.section-wide .section-col .section-label { margin-bottom: 0; }

.section-wide .section-col p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--muted);
}

/* -- DOCUMENT DOWNLOAD ---------------------------------------
   The source document behind a case, offered at the end. Weight and
   page count go in the label: a multi-megabyte download that starts
   without warning is a bad surprise on a phone. */
.doc-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.doc-download-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 52ch;
}

.doc-download-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--text);
}

.doc-download-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: 0.01em;
  color: var(--mint);
}

.doc-download-note {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.75;
}

.doc-download-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--mint);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--mint);
  transition: filter 0.2s ease;
}

.doc-download-btn:hover { filter: brightness(1.12); }

/* Down arrow, drawn rather than shipped as an icon file. */
.doc-download-btn::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* -- IMAGE PLACEHOLDERS -------------------------------------- */
.img-placeholder {
  background: var(--surface);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-placeholder .placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  position: absolute;
}

.img-full {
  width: 100%;
}

.img-half {
  width: 100%;
}

.img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
}

.img-full-width {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.h-form-step {
  min-height: 0;
  background: transparent;
  padding: 0;
  display: block;
}

.h-form-step img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* -- BRAND VARIANTS ------------------------------------------ */
.brand-variants {
  background: var(--bg);
  color: var(--text);
}

.brand-group-title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin-bottom: 64px;
}

.brand-card-grid {
  display: grid;
  gap: 28px;
}

.brand-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-card {
  min-height: 280px;
}

.brand-card {
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  overflow: hidden;
}

.brand-card--lilac {
  background: #EDEEFF;
}

.brand-card--blue {
  background: #005895;
  border-color: #005895;
  color: #FFFFFF;
}

.brand-card--magenta {
  background: #AA3290;
  border-color: #AA3290;
  color: #FFFFFF;
}

.brand-card--black {
  background: #111719;
  border-color: #111719;
  color: #FFFFFF;
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  background: rgba(0, 88, 149, 0.08);
}

.brand-chip--magenta {
  color: var(--mint);
  background: rgba(170, 50, 144, 0.08);
}

.brand-chip--dark {
  color: var(--mint);
  background: rgba(255, 255, 255, 0.14);
}

.brand-logo {
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 16px;
}

.brand-logo img {
  display: block;
  max-width: 90%;
  max-height: 104px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-card p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--muted);
}

.brand-card--blue p,
.brand-card--magenta p,
.brand-card--black p {
  color: rgba(255, 255, 255, 0.72);
}

/* -- USER FLOW DIAGRAM ---------------------------------------- */
.flow-diagram {
  background: var(--bg);
  color: var(--text);
}

.flow-title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 28px;
}

/* Entry sources bar */
.flow-canvas {
  display: flex;
  flex-direction: column;
}

.flow-entry {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  margin-bottom: 18px;
}

.flow-entry-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  white-space: nowrap;
  flex-shrink: 0;
}

.flow-entry-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-chip {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Drop-off branch — aligns under steps 02–03 */
.flow-branch {
  margin-top: 18px;
  margin-left: calc((100% - 72px) / 5 + 18px);
  width: calc(2 * ((100% - 72px) / 5) + 18px);
  position: relative;
}

/* Vertical connector: line + arrowhead from step 02 down into the branch */
.flow-branch::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 27px;
  width: 2px;
  height: 10px;
  background: var(--mint);
}

.flow-branch::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 23px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--mint);
}

.flow-branch-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.flow-branch-card {
  border: 1px solid rgba(37, 196, 126, 0.18);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.flow-branch-card .flow-kicker {
  margin-bottom: 40px;
}

.flow-branch-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.flow-branch-card p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
}

/* Horizontal connector between branch cards: line + arrowhead */
.flow-branch-card:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -16px;
  width: 10px;
  height: 2px;
  background: var(--mint);
  transform: translateY(-50%);
}

.flow-branch-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--mint);
  transform: translateY(-50%);
  background: none;
}

/* One equal column per step, whatever the count. This was repeat(5, …)
   because every case written until now happened to have exactly five
   steps; a four-step diagram left an empty track and read as though it
   were left-aligned against the full-width diagrams around it. */
.flow-steps {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
  counter-reset: flow;
}

.flow-step {
  min-height: 280px;
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -16px;
  width: 10px;
  height: 2px;
  background: var(--mint);
  transform: translateY(-50%);
}

.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--mint);
  transform: translateY(-50%);
  background: none;
}

.flow-kicker {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  margin-bottom: 40px;
}

.flow-step strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.flow-step p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
  transition: color 0.2s ease;
}


/* -- STAKEHOLDER DIAGRAM -------------------------------------- */
.stakeholder-diagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.stakeholder-card {
  min-height: 280px;
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.stakeholder-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: rgba(10, 122, 80, 0.45);
}

.stakeholder-logo {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.stakeholder-logo img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.stakeholder-role {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  margin-bottom: 16px;
}

.stakeholder-card h3 {
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 18px;
}

.stakeholder-card p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
}

.stakeholder-card--impact {
  border-color: rgba(10, 122, 80, 0.42);
}

/* -- KPI DIAGRAM ---------------------------------------------- */
.kpi-diagram {
  background: var(--bg);
  color: var(--text);
}

.kpi-title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 48px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.kpi-card {
  min-height: 260px;
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.kpi-index {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  margin-bottom: 40px;
}

.kpi-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.kpi-card p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
  transition: color 0.2s ease;
}


/* -- KPI STAT (outcomes diagram) ----------------------------- */
.kpi-stat {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.kpi-card--highlight {
  border-color: rgba(37, 196, 126, 0.42);
}

/* -- LOGO TRIO ----------------------------------------------- */
.logo-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}

.context-section .logo-trio {
  gap: 56px;
  padding: 48px 32px 0;
  margin-bottom: 0;
}

.logo-trio img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.media-spaced {
  margin-top: 48px;
}

.diagram-spaced {
  margin-top: 40px;
}

/* -- BROWSER MOCKUP ------------------------------------------ */
.browser-mockup {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  overflow: hidden;
}

.browser-chrome {
  background: #E8E8E8;
  border-radius: 2px 2px 0 0;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  position: relative;
  flex-shrink: 0;
}

.browser-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green  { background: #28C840; }

.browser-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  background: #D4D4D4;
  padding: 3px 13px;
  border-radius: 2px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.browser-viewport {
  height: 540px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.browser-viewport::-webkit-scrollbar {
  display: none;
}

.browser-viewport img {
  width: 100%;
  height: auto;
  display: block;
}

/* -- SPECIFIC SECTION HEIGHTS -------------------------------- */
.cover-image        { min-height: 400px; }
.h-homepage         { min-height: 420px; }
.h-form-pair        { min-height: 320px; }
.h-diagram          { min-height: 180px; }
.h-score            { min-height: 380px; }
.h-modules          { min-height: 260px; }
.h-outcomes         { min-height: 320px; }
.h-brand-pair       { min-height: 280px; }

/* -- IMAGE TRIO ---------------------------------------------- */
.img-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

.img-trio-item {
  height: 380px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.img-trio-item img {
  width: 100%;
  height: auto;
  display: block;
}

.img-trio-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--mint);
  margin-top: 14px;
}

@media (max-width: 768px) {
  .img-trio {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* -- BROWSER MOCKUP TRIO ------------------------------------- */
.browser-mockup-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

.browser-mockup-trio .browser-mockup {
  max-width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.browser-mockup-trio .browser-viewport {
  height: 380px;
}

@media (max-width: 768px) {
  .browser-mockup-trio {
    grid-template-columns: 1fr;
    gap: 20px;
  }

.browser-mockup-trio .browser-viewport {
    height: 320px;
  }
}

/* -- SECTION INDEX ------------------------------------------- */
.section-index {
  padding-top: 0;
  padding-bottom: 72px;
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.section-index-label {
  font-family: var(--font-mono);
  font-size: var(--type-h2);
  color: var(--text);
  margin-bottom: 24px;
  display: block;
  line-height: 1.2;
}

.section-index-list {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section-index-list li {
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
}

.section-index-list span:first-child {
  font-family: var(--font-mono);
  font-size: var(--type-body);
  color: var(--muted);
}

.section-index-list span:last-child {
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: 1.2;
  color: var(--text);
}

/* -- FOOTER -------------------------------------------------- */
footer {
  border-top: 1px solid var(--border);
  padding: 28px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
  background: var(--bg);
}

footer .nav-inner {
  padding: 0;
  max-width: none;
  margin: 0;
}

.footer-name,
.footer-links {
  font-family: var(--font-mono);
  font-size: var(--type-body);
  color: var(--muted);
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--text); }

/* -- LIGHTBOX ------------------------------------------------ */
.js-lightbox { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(12, 12, 10, 0.95);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 2px;
}

.lightbox.lightbox-wide .lightbox-inner {
  max-width: 96vw;
}

.lightbox.lightbox-wide .lightbox-img {
  max-width: none;
  max-height: none;
  width: min(120vw, 1200px);
}

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 210;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--type-h2);
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}

.lightbox-close:hover { color: #fff; }

/* -- FADE IN ON SCROLL --------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.hero-title.reveal {
  transition-delay: 0.16s;
}

/* -- RESPONSIVE ---------------------------------------------- */
@media (max-width: 900px) {
  :root { --pad: 28px; }

  .case-info-table {
    flex-wrap: wrap;
  }
  .case-info-row {
    flex: 0 0 50%;
  }
  .hero-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .section-split { grid-template-columns: 1fr; gap: 16px; }
  .section-wide .section-cols { grid-template-columns: 1fr; gap: 40px; }
  .doc-download { padding: 28px; gap: 24px; }
  .doc-download-btn { width: 100%; justify-content: center; }
  .section-wide .section-lead { font-size: 22px; margin-bottom: 40px; }
  .section-body { max-width: 100%; }
  .context-section .logo-trio {
    gap: 32px;
    padding: 32px 0 0;
  }
  .brand-card-grid--three {
    grid-template-columns: 1fr 1fr;
  }
  .brand-group-title,
  .flow-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* The desktop rule lays steps out as auto columns; stacking them needs
     the flow reset, not just a single-column template. */
  .flow-steps {
    grid-auto-flow: row;
  }
  .flow-step {
    min-height: 0;
  }
  .flow-step:not(:last-child)::before {
    top: auto; right: auto;
    left: 27px; bottom: -14px;
    width: 2px; height: 9px;
    transform: none;
  }
  .flow-step:not(:last-child)::after {
    top: auto; right: auto;
    left: 23px; bottom: -7px;
    border-top: 7px solid var(--mint);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: none;
    transform: none;
  }
  .flow-kicker {
    margin-bottom: 24px;
  }
  .flow-branch {
    margin-left: 0;
    width: 100%;
  }
  .flow-branch::before,
  .flow-branch::after { display: none; }
  .flow-branch-steps { grid-template-columns: 1fr; }
  .flow-branch-card:not(:last-child)::before {
    top: auto; right: auto;
    left: 27px; bottom: -14px;
    width: 2px; height: 9px;
    transform: none;
  }
  .flow-branch-card:not(:last-child)::after {
    top: auto; right: auto;
    left: 23px; bottom: -7px;
    border-top: 7px solid var(--mint);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: none;
    transform: none;
  }

  .stakeholder-diagram {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stakeholder-card {
    min-height: 0;
  }
  .stakeholder-card:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 28px;
    bottom: -16px;
    width: 1px;
    height: 16px;
  }
  .stakeholder-logo {
    justify-content: flex-start;
    min-height: 96px;
    margin-bottom: 28px;
  }
  .stakeholder-logo img {
    max-width: 330px;
    max-height: 120px;
  }
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .section-index-list li {
    grid-template-columns: 56px 1fr;
  }
  .img-pair { grid-template-columns: 1fr; gap: 24px; }

  /* The hero is pinned and the sections slide up over it. That only works
     while the hero fits in one screen, and stacked to one column it doesn't:
     a phone's visible height with the browser bars showing is ~660px and
     the hero needs up to 715px, so its last rows sat under the first
     section and could never be scrolled to. Here it scrolls with the page. */
  .hero-intro-fixed { position: relative; height: auto; }
  .sections-wrapper { margin-top: 0; }
  .hero-intro { height: auto; padding-top: 152px; padding-bottom: 0; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .case-info-table { flex-direction: column; }
  .brand-card-grid--three {
    grid-template-columns: 1fr;
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* -- DECISION MAP -------------------------------------------- */
.decision-map {
  display: flex;
  flex-direction: column;
}

.decision-findings,
.decision-outputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.decision-card {
  border: 1px solid rgba(10, 122, 80, 0.16);
  border-radius: 2px;
  padding: 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.decision-card--source {
  border-color: rgba(10, 122, 80, 0.42);
}

.decision-tag {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  margin-bottom: 40px;
}

.decision-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.decision-card p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
}

.decision-arrows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.decision-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  position: relative;
}

.decision-arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 10px);
  background: var(--mint);
}

.decision-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--mint);
}

/* -- USER PROFILE CARD --------------------------------------- */
.profile-card {
  --pb: rgba(255, 255, 255, 0.25);
  border: 2px solid var(--pb);
  border-radius: 2px;
  overflow: hidden;
}

.profile-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  padding: 28px;
  border-bottom: 2px solid var(--pb);
  align-items: start;
}

.profile-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  padding-top: 3px;
}

.profile-tagline {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--muted);
}

.profile-data {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-datum {
  padding: 20px 28px;
  border-right: 2px solid var(--pb);
  border-bottom: 2px solid var(--pb);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-datum:nth-child(4n)        { border-right: none; }
.profile-datum:nth-last-child(-n+4) { border-bottom: none; }

.profile-datum-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
}

.profile-datum-value {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
}

/* -- SCORING LOGIC ------------------------------------------- */
.scoring-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scoring-diagram {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.scoring-mechanism {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scoring-cell {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.scoring-cell:last-child { border-right: none; }

.scoring-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
}

.scoring-cell .scoring-label {
  min-height: 36px;
}

.scoring-value {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.scoring-note {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--muted);
  line-height: 1.45;
}

.scoring-band-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scoring-band-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scoring-band-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.scoring-band--low  .scoring-band-dot { background: rgba(255, 255, 255, 0.22); }
.scoring-band--mid  .scoring-band-dot { background: rgba(255, 255, 255, 0.55); }
.scoring-band--high .scoring-band-dot { background: var(--mint); }

.scoring-band-name {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.scoring-band-range {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  opacity: 1;
}

.scoring-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.scoring-pillar {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
}
.scoring-pillar:last-child { border-right: none; }

.scoring-pillar-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scoring-pillar-header strong {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

.scoring-modules {
  padding: 16px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.scoring-module {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--mint);
  line-height: 1.35;
  opacity: 1;
}

.scoring-footer {
  padding: 14px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.scoring-footer p {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--mint);
  line-height: 1.5;
}

#score-pillars .scoring-diagram {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--muted);
}

#score-pillars .scoring-pillar-header strong,
#score-pillars .scoring-module {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--muted);
  opacity: 1;
}

#score-pillars .scoring-label,
#score-pillars .scoring-footer p {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--mint);
  opacity: 1;
}

/* -- DIAGRAMS · RESPONSIVE ----------------------------------
   These collapses used to live in the RESPONSIVE block, which sits above
   the decision map, profile card and scoring definitions. Same
   specificity, earlier in the file: the base rules won, and phones got the
   desktop grids at 74px a column. They must stay below those components. */
@media (max-width: 900px) {
  .profile-header { grid-template-columns: 1fr; gap: 12px; }
  .profile-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-datum:nth-child(4n)        { border-right: 2px solid var(--pb); }
  .profile-datum:nth-child(2n)        { border-right: none; }
  .profile-datum:nth-last-child(-n+4) { border-bottom: 2px solid var(--pb); }
  .profile-datum:nth-last-child(-n+2) { border-bottom: none; }

  /* Stacked row by row, the map printed every finding, then a run of
     arrows, then every decision, and the column that tied each finding to
     its decision was gone. Flatten the three rows into one sequence and
     interleave them: finding, arrow, decision, then the next pair. */
  .decision-findings,
  .decision-arrows,
  .decision-outputs { display: contents; }
  .decision-findings > :nth-child(1) { order: 1; }
  .decision-arrows   > :nth-child(1) { order: 2; }
  .decision-outputs  > :nth-child(1) { order: 3; }
  .decision-findings > :nth-child(2) { order: 4; }
  .decision-arrows   > :nth-child(2) { order: 5; }
  .decision-outputs  > :nth-child(2) { order: 6; }
  .decision-findings > :nth-child(3) { order: 7; }
  .decision-arrows   > :nth-child(3) { order: 8; }
  .decision-outputs  > :nth-child(3) { order: 9; }
  .decision-findings > :nth-child(4) { order: 10; }
  .decision-arrows   > :nth-child(4) { order: 11; }
  .decision-outputs  > :nth-child(4) { order: 12; }
  .decision-outputs > :not(:last-child) { margin-bottom: 40px; }
}

@media (max-width: 560px) {
  .profile-data { grid-template-columns: 1fr; }
  .profile-datum:nth-last-child(-n+2) { border-bottom: 2px solid var(--pb); }
  .profile-datum:nth-child(n)         { border-right: none; }
  .profile-datum:last-child           { border-bottom: none; }

  .scoring-mechanism                  { grid-template-columns: 1fr; }
  .scoring-cell                       { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .scoring-cell:last-child            { border-bottom: none; }
  .scoring-pillars                    { grid-template-columns: 1fr; }
  .scoring-pillar                     { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .scoring-pillar:last-child          { border-bottom: none; }
}

/* -- DARK CARD SYSTEM ---------------------------------------- */
.section-panel--media {
  padding-top: 32px;
  padding-bottom: 96px;
}

#kpi-section,
#outcomes-diagram {
  padding-top: 32px;
}

#user-profile  { padding-top: 32px; }
#decision-map  { padding-top: 32px; }
#scoring-logic  { padding-top: 32px; }
#score-pillars  { padding-top: 32px; padding-bottom: 20px; }
.score-page-shot--dashboard { padding-top: 20px; padding-bottom: 20px; }
.score-page-shot--result { padding-top: 20px; }
.profile-card { --pb: rgba(255, 255, 255, 0.25); }

.decision-card {
  background: #2A2A28;
  border-color: rgba(255, 255, 255, 0.08);
}
.decision-card--source { border-color: rgba(37, 196, 126, 0.4); }
.decision-card strong,
.decision-card p { color: #FFFFFF; }

.sections-wrapper .section-panel:last-child {
  padding-bottom: 48px;
}

.stakeholder-card {
  min-height: 0;
  background: #2A2A28;
  border-color: rgba(255, 255, 255, 0.1);
}

.stakeholder-card--impact { border-color: rgba(37, 196, 126, 0.4); }

.stakeholder-card h3,
.stakeholder-card p { color: #FFFFFF; }

.stakeholder-role { color: #25C47E; }

.stakeholder-card:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.2);
}

.flow-step,
.kpi-card,
.flow-branch-card {
  background: #2A2A28;
  border-color: rgba(255, 255, 255, 0.08);
}

.flow-entry {
  border-color: rgba(255, 255, 255, 0.08);
}

.flow-chip {
  border-color: rgba(255, 255, 255, 0.12);
}

.kpi-card--highlight {
  border-color: rgba(37, 196, 126, 0.4);
}


.flow-step strong,
.flow-step p,
.kpi-card strong,
.kpi-card p {
  color: #FFFFFF;
}

.flow-kicker,
.kpi-index {
  color: #25C47E;
}


.brand-card {
  background: #F5F4F0;
  border-color: rgba(10, 122, 80, 0.16);
}
.brand-card p { color: #1A1A18; }

.brand-card--lilac { background: #EDEEFF; border-color: rgba(10, 122, 80, 0.16); }

.brand-card--blue    { background: #005895; border-color: #005895; color: #FFFFFF; }
.brand-card--magenta { background: #AA3290; border-color: #AA3290; color: #FFFFFF; }
.brand-card--black   { background: #111719; border-color: #111719; color: #FFFFFF; }

.brand-card--blue p,
.brand-card--magenta p,
.brand-card--black p { color: rgba(255, 255, 255, 0.72); }

/* -- MOBILE (≤ 600px) ---------------------------------------- */
@media (max-width: 600px) {

  /* Tokens */
  :root { --pad: 20px; }

  /* Nav */
  nav {
    height: 64px;
    padding: 0 20px;
  }
  .nav-logo  { font-size: 16px; }
  .nav-links { gap: 24px; }
  .nav-links a { font-size: 16px; }

  /* Wrap — flat padding on phones */
  .wrap { padding: 0 20px; }

  /* Nav return */
  .nav-return { font-size: 15px; }

  /* Hero intro */
  .hero-intro {
    padding-top: 104px;
    padding-bottom: 0;
  }
  .hero-intro-grid { gap: 20px; }
  .hero-project-logo { max-width: 100px; }

  .hero-title {
    font-size: 26px;
    margin: 12px 0 16px;
  }
  .hero-para {
    font-size: 16px;
    line-height: 1.5;
  }
  .hero-content { gap: 20px; }

  /* Case info table */
  .case-info-table  { flex-direction: column; }
  .case-info-row    { flex: none; }
  .case-info-label  { font-size: 13px; padding: 8px 0 4px; }
  .case-info-value  { font-size: 15px; padding: 8px 0; }

  /* Text sections */
  .section {
    padding-top: 64px;
    padding-bottom: 28px;
  }
  .section-panel--media {
    padding-top: 28px;
    padding-bottom: 64px;
  }
  #score-pillars { padding-bottom: 16px; }
  .score-page-shot--dashboard { padding-top: 16px; padding-bottom: 16px; }
  .score-page-shot--result { padding-top: 16px; }
  .section-heading {
    font-size: 22px;
    line-height: 1.25;
  }
  .section-body {
    font-size: 16px;
    line-height: 1.6;
    gap: 16px;
  }
  #score-pillars .scoring-diagram {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Diagrams & cards */
  .flow-title,
  .kpi-title,
  .brand-group-title {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .flow-step strong,
  .flow-branch-card strong,
  .decision-card strong,
  .kpi-card strong,
  .stakeholder-card h3 { font-size: 18px; }
  .flow-step p,
  .flow-branch-card p,
  .decision-card p,
  .kpi-card p,
  .stakeholder-card p,
  .brand-card p { font-size: 15px; }
  /* One column wide, the desktop min-height only opens an empty band
     between the figure and its caption. */
  .kpi-card { min-height: 0; }
  .kpi-index,
  .decision-tag,
  .flow-branch-card .flow-kicker { margin-bottom: 24px; }
  #score-pillars .scoring-pillar-header strong,
  #score-pillars .scoring-module {
    font-size: 16px;
    line-height: 1.6;
  }
  .section-wide .section-col p {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Images. A fixed 220px box cut phone screenshots off at their first
     heading and left an empty band under wide ones. Follow the image,
     capped near the square crop the desktop trio shows. */
  .img-trio-item { height: auto; max-height: 360px; }
  .img-pair { gap: 16px; }

  /* Footer */
  footer { padding: 20px; }
  .footer-name,
  .footer-links { font-size: 14px; }
}


/* ============================================================
   LIGHT CASE VARIANT  ·  body.case-light
   ------------------------------------------------------------
   Used by cases/refugios-temporales.html. The 2016 thesis is
   documentation-led work — studio photography, exploded views
   and technical drawings, all authored on white. On the dark
   ground every one of those reads as a floating white box, so
   this case inverts instead of fighting it.

   --bg is pure #FFFFFF on purpose: it matches the studio
   backgrounds of the prototype shots, so the image rectangles
   disappear into the page instead of showing as brighter panels.

   Scoped entirely to .case-light — the other four case studies
   are untouched.
   ============================================================ */

body.case-light {
  --bg:         #FFFFFF;
  --surface:    #F2F1EE;
  --border:     rgba(15, 15, 14, 0.14);
  --border-sec: #0F0F0E;
  --text:       #0F0F0E;
  --muted:      #0F0F0E;
  --dim:        #0F0F0E;
  /* Darker than the dark-theme mint (#25C47E scores 2.26:1 on
     white). #0A7A50 clears AA on both --bg and --surface. */
  --mint:       #0A7A50;
  --mint-line:  rgba(10, 122, 80, 0.35);
}

/* Chrome that hardcodes the dark ground */
body.case-light nav            { background: #FFFFFF; }
body.case-light .case-info-label { border-bottom-color: #0F0F0E; }

/* -- Card system, inverted ----------------------------------- */
body.case-light .decision-card,
body.case-light .stakeholder-card,
body.case-light .flow-step,
body.case-light .kpi-card,
body.case-light .flow-branch-card {
  background: var(--surface);
  border-color: rgba(15, 15, 14, 0.12);
}

body.case-light .decision-card--source,
body.case-light .stakeholder-card--impact,
body.case-light .kpi-card--highlight {
  border-color: rgba(10, 122, 80, 0.45);
}

body.case-light .decision-card strong,
body.case-light .decision-card p,
body.case-light .stakeholder-card h3,
body.case-light .stakeholder-card p,
body.case-light .flow-step strong,
body.case-light .flow-step p,
body.case-light .kpi-card strong,
body.case-light .kpi-card p { color: #0F0F0E; }

body.case-light .stakeholder-role,
body.case-light .flow-kicker,
body.case-light .kpi-index { color: var(--mint); }

body.case-light .stakeholder-card:not(:last-child)::after {
  background: rgba(15, 15, 14, 0.2);
}

body.case-light .flow-entry  { border-color: rgba(15, 15, 14, 0.12); }
body.case-light .flow-chip   { border-color: rgba(15, 15, 14, 0.18); }

/* -- Lightbox stays dark: it is an overlay, not the page ------ */
body.case-light .lightbox { background: rgba(15, 15, 14, 0.94); }

/* -- Spec table ---------------------------------------------- */
/* Token-driven, so it renders correctly in either theme. */
.spec-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.spec-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 16px;
  color: var(--text);
}

.spec-table caption {
  text-align: left;
  padding: 20px 24px 0;
  font-size: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
}

.spec-table th,
.spec-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.spec-table thead th {
  font-size: var(--type-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.spec-table tbody tr + tr td { border-top: 1px solid var(--border); }

.spec-table .num { text-align: right; white-space: nowrap; }

.spec-table tfoot td {
  border-top: 2px solid var(--border-sec);
  font-weight: 700;
  white-space: nowrap;
}

.spec-table-note {
  padding: 16px 24px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.75;
}

@media (max-width: 600px) {
  .spec-table { font-size: 15px; min-width: 620px; }
  .spec-table th,
  .spec-table td { padding: 10px 12px; }
}

/* The trio's drop shadow reads as a frame on the dark ground, but on white
   it outlines an empty box below each photo (the item is 380px tall and the
   studio shots are shorter). Drop the shadow and centre the image instead,
   so the objects sit directly on the page. */
body.case-light .img-trio-item {
  background: #FFFFFF;
  box-shadow: none;
}

body.case-light .img-trio-item img {
  height: 100%;
  object-fit: contain;
}