:root {
  --lapis: #0f3051;
  --sodalite: #0b243c;
  --moldavite: #90af3d;
  --peridot: #7a913a;
  --white: #f7fbff;
  --muted: #a8b8cc;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.2);
  --maxw: 1120px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Avenir Next", "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--white);
  background: radial-gradient(circle at top, #153c62 0%, #08192a 45%, #040d16 100%);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  backdrop-filter: blur(6px);
  background: rgba(5, 17, 28, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  font-weight: 700;
  letter-spacing: 0.11em;
}

.topbar-actions {
  display: flex;
  gap: 0.6rem;
}

.btn {
  border: 1px solid rgba(144, 175, 61, 0.7);
  color: var(--white);
  background: rgba(144, 175, 61, 0.2);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.83rem;
  cursor: pointer;
}

.btn.ghost {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}

.progress-rail {
  position: fixed;
  right: 2.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 44vh;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 40;
}

.progress-fill {
  width: 100%;
  height: 5%;
  border-radius: 999px;
  background: linear-gradient(180deg, #9dc250 0%, #6a8430 100%);
  transition: height 260ms ease;
}

.chapter-label {
  position: absolute;
  top: -2.1rem;
  left: -3rem;
  right: auto;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  min-width: 2.6rem;
}

.deck {
  scroll-behavior: smooth;
}

.slide {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6.2rem 1.2rem 3rem;
  overflow: hidden;
}

.slide.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(5, 16, 27, 0.8), rgba(5, 16, 27, 0.88)),
    var(--bg-image);
  background-size: cover;
  background-position: var(--bg-pos, center);
  transform: scale(1.03);
  opacity: 0.28;
  pointer-events: none;
}

.slide.active.has-bg::before {
  transform: scale(1.08);
  transition: transform 800ms ease;
}

.content {
  width: min(var(--maxw), 100%);
  z-index: 2;
  transform: translateY(24px) scale(0.98);
  opacity: 0.4;
  transition: transform 700ms ease, opacity 700ms ease;
}

.slide.active .content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.hero .content {
  text-align: left;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2rem, 8vw, 6rem);
  letter-spacing: 0.02em;
}

h2 {
  margin-top: 0.55rem;
  font-size: clamp(1.1rem, 3.6vw, 2rem);
  color: #d5e4f2;
}

h3 {
  font-size: clamp(1.65rem, 4.5vw, 3.35rem);
  margin: 0.35rem 0 1.2rem;
  max-width: 17ch;
}

h4 {
  margin: 0 0 0.65rem;
  color: #e7f2ff;
  font-size: 1rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--moldavite);
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  font-weight: 700;
}

.short {
  max-width: 62ch;
  color: #cfdeeb;
  line-height: 1.55;
}

.small {
  color: var(--muted);
  font-size: 0.9rem;
}

.tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.tag-assumption {
  background: rgba(255, 199, 87, 0.16);
  border-color: rgba(255, 199, 87, 0.5);
  color: #ffd585;
}

.tag-target {
  background: rgba(144, 175, 61, 0.18);
  border-color: rgba(144, 175, 61, 0.6);
  color: #dbefaa;
}

.tag-discussion {
  background: rgba(126, 176, 82, 0.2);
  border-color: rgba(126, 176, 82, 0.62);
  color: #d8efb2;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  padding: 1rem 1rem 0.85rem;
}

.panel ul {
  margin: 0;
  padding-left: 1rem;
  color: #d7e5f4;
  display: grid;
  gap: 0.45rem;
}

.reference-figure {
  margin: 1rem 0 0;
}

.reference-image {
  width: 100%;
  max-width: 620px;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  display: block;
}

.reference-figure figcaption {
  margin-top: 0.45rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
}

.panel + .three-up {
  margin-top: 1.15rem;
}

.kpi-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.kpi-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.kpi-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.kpi-card {
  border: 1px solid rgba(144, 175, 61, 0.55);
  background: rgba(10, 24, 39, 0.75);
  border-radius: 1rem;
  padding: 0.9rem;
}

.flow-arrow {
  margin: 0.1rem 0 0.15rem;
  color: #b8d968;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-align: left;
}

.flow-stack {
  display: grid;
  gap: 0.55rem;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flow-step .metric {
  margin: 0;
}

.kpi-label {
  margin: 0;
  color: #c4d4e6;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.kpi-value {
  margin: 0.32rem 0 0;
  color: #fff;
  font-size: clamp(1.05rem, 3vw, 1.8rem);
  font-weight: 650;
}

.metric {
  font-size: clamp(1.2rem, 4vw, 2.4rem);
  color: #edf7dd;
  margin: 0.2rem 0;
}

.chart-block {
  display: grid;
  gap: 0.8rem;
  margin: 1.1rem 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.bar-row span {
  color: #d2dfef;
  font-size: 0.9rem;
}

.bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9ec856, #6f8b34);
  transition: width 300ms ease;
}

.bar-row strong {
  color: #f2fbff;
  font-size: 0.95rem;
}

.inline-list {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.inline-list li {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 0.46rem 0.8rem;
  font-size: 0.86rem;
}

.media {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1.05);
  transition: transform 850ms ease;
  opacity: 0.34;
}

.slide.active .media {
  transform: scale(1.12);
}

.media-hero {
  background:
    linear-gradient(180deg, rgba(5, 12, 20, 0.52), rgba(5, 12, 20, 0.82)),
    url("./assets/visual-forest-road-hero.png"),
    linear-gradient(120deg, #123555 0%, #091f34 40%, #050f1a 100%);
  background-size: cover;
  background-position: center;
}

.media-site {
  background:
    linear-gradient(180deg, rgba(4, 8, 12, 0.56), rgba(4, 8, 12, 0.75)),
    url("./assets/tc-property-026.png"),
    linear-gradient(150deg, #0f3051 0%, #0a2238 44%, #071522 100%);
  background-size: cover;
  background-position: center;
}

.media-expand {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7)),
    url("./assets/tc-property-034.png"),
    linear-gradient(120deg, #132f4c 0%, #081728 50%, #050d16 100%);
  background-size: cover;
  background-position: center;
}

.media-farm {
  background:
    linear-gradient(180deg, rgba(6, 14, 22, 0.56), rgba(6, 14, 22, 0.82)),
    url("./assets/farm-greenhouse.png"),
    linear-gradient(132deg, #103454 0%, #0a2740 46%, #061624 100%);
  background-size: cover;
  background-position: center;
}

.bg-a { --bg-image: url("./assets/visual-mountain-outlook.png"); --bg-pos: center center; }   /* Vision */
.bg-b { --bg-image: url("./assets/visual-hands-seed.png"); --bg-pos: center center; } /* Problem */
.bg-c { --bg-image: url("./assets/tc-property-030.png"); --bg-pos: right top; }   /* Site overview */
.bg-d { --bg-image: url("./assets/visual-construction-team.png"); --bg-pos: center center; }   /* Land structure */
.bg-e { --bg-image: url("./assets/visual-greenhouse-cgi.png"); --bg-pos: center center; } /* Technology */
.bg-f { --bg-image: url("./assets/visual-lettuce-field-wide.png"); --bg-pos: center center; } /* Crop strategy */
.bg-g { --bg-image: url("./assets/farm-greenhouse.png"); --bg-pos: center center; }   /* Production model */
.bg-h { --bg-image: url("./assets/visual-market-tomatoes.png"); --bg-pos: center center; } /* Market demand */
.bg-i { --bg-image: url("./assets/visual-tinyhome-exterior.png"); --bg-pos: center center; } /* Housing concept */
.bg-j { --bg-image: url("./assets/visual-tinyhome-interior.png"); --bg-pos: center center; } /* Housing financials */
.bg-k { --bg-image: url("./assets/tc-property-046.png"); --bg-pos: right center; }   /* Scenario model */
.bg-l { --bg-image: url("./assets/tc-property-050.png"); --bg-pos: center center; }   /* Timeline */
.bg-m { --bg-image: url("./assets/tc-property-042.png"); --bg-pos: center center; }   /* Investor returns */
.bg-n { --bg-image: url("./assets/tc-property-054.png"); --bg-pos: center center; }   /* Demand evidence */
.bg-o { --bg-image: url("./assets/tc-property-026.png"); --bg-pos: right center; }   /* Risks */
.bg-p { --bg-image: url("./assets/tc-property-022.png"); --bg-pos: center center; }   /* Governance */

.detail-note {
  margin-top: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 0.8rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
}

.doc-link {
  color: #d7ebb0;
}

.doc-link:hover {
  color: #effbcf;
}

.snapshot-status .status-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem;
}

.snapshot-status .status-label {
  color: #d7e5f4;
}

.snapshot-status .status-wrap .tag {
  margin-left: 0;
}

.detail-note ul {
  margin: 0;
  padding-left: 1rem;
  color: #c6d8ea;
}

@media (max-width: 980px) {
  .two-col,
  .three-up {
    grid-template-columns: 1fr;
  }

  .kpi-grid,
  .kpi-grid.four,
  .kpi-grid.three {
    grid-template-columns: repeat(2, 1fr);
  }

  .progress-rail {
    display: none;
  }
}

@media (max-width: 620px) {
  .kpi-grid,
  .kpi-grid.four,
  .kpi-grid.three {
    grid-template-columns: 1fr;
  }
}