:root {
  --ink: #171a1d;
  --ink-2: #20252a;
  --paper: #f5f1e8;
  --panel: #fffaf1;
  --muted: #6f746f;
  --line: rgba(75, 69, 58, 0.18);
  --copper: #b9813c;
  --gold: #d3ad63;
  --teal: #0f6d68;
  --shadow: 0 18px 48px rgba(19, 22, 24, 0.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; }
a { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px clamp(18px, 3vw, 42px); background: rgba(23,26,29,.94); color: #fff; border-bottom: 1px solid rgba(211,173,99,.35); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 260px; }
.brand span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, var(--copper), var(--gold)); color: #171a1d; font-weight: 900; }
.brand strong { font-size: 14px; }
.topbar nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.topbar nav a { text-decoration: none; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #ece7dd; }
.topbar nav a.active, .topbar nav a:hover { background: var(--gold); color: #171a1d; border-color: var(--gold); }
.hero { min-height: 88vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: end; gap: 28px; padding: clamp(26px, 5vw, 74px); color: #fff; background-image: linear-gradient(90deg, rgba(18,21,23,.92), rgba(18,21,23,.62), rgba(18,21,23,.18)), var(--hero-image); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat, no-repeat; }
.hero-content { max-width: 900px; }
.kicker { margin: 0 0 10px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 850; }
h1, h2, h3 { line-height: 1.1; }
h1 { margin: 0; font-size: clamp(44px, 7vw, 88px); max-width: 1000px; }
h2 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 46px); }
h3 { margin: 0 0 8px; }
.lead { font-size: 21px; color: #ebe5d9; max-width: 760px; }
.project-meta { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin-top: 24px; max-width: 720px; }
.project-meta dt { color: #d7c6a1; font-weight: 800; }
.project-meta dd { margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--copper)); color: #171a1d; text-decoration: none; font-weight: 900; box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.hero-cta.secondary { border: 1px solid rgba(220,180,92,.42); color: #f7f1e7; background: rgba(20,22,24,.68); }
.hero-cta:hover { filter: brightness(1.06); }
.hero-stats { display: grid; gap: 10px; }
.hero-stats article, .status-grid article, .concept-grid article, .discipline-card, .route-card, .finance-grid article, .delivery-grid article { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,250,241,.92); box-shadow: var(--shadow); padding: 18px; }
.hero-stats article { background: rgba(255,250,241,.13); border-color: rgba(255,255,255,.2); }
.hero-stats span, .finance-grid span, .status-grid span, .delivery-grid span { display: block; color: var(--gold); text-transform: uppercase; font-size: 12px; font-weight: 850; }
.hero-stats strong, .finance-grid strong { display: block; margin-top: 5px; font-size: 25px; }
.band { padding: 64px clamp(18px, 4vw, 64px); border-bottom: 1px solid var(--line); }
.band.dark { background: var(--ink); color: #f7f0e5; }
.band.dark p, .band.dark li { color: #d8d0c3; }
.section-head { max-width: 940px; margin-bottom: 24px; }
.section-head p { color: var(--muted); }
.status-grid, .concept-grid, .discipline-grid, .route-grid, .finance-grid, .delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.discipline-grid { grid-template-columns: repeat(5, minmax(190px, 1fr)); }
.discipline-card span { color: var(--copper); font-weight: 900; }
.route-grid { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.route-card { display: grid; gap: 10px; text-decoration: none; min-height: 185px; }
.route-card span { color: var(--copper); font-weight: 900; font-size: 20px; }
.route-card strong { color: var(--teal); }
.visual-grid, .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 14px; }
.visual-grid.compact { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.visual-tile, .gallery-card { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.visual-open { display: block; border: 0; padding: 0; margin: 0; width: 100%; cursor: pointer; background: transparent; }
.visual-open img, .visual-tile img, .gallery-card img, .slide figure img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.visual-tile figcaption { padding: 10px; font-weight: 750; color: var(--muted); }
.page-hero { padding: 72px clamp(18px, 4vw, 64px); color: #fff; background: radial-gradient(circle at 15% 10%, rgba(185,129,60,.28), transparent 30%), linear-gradient(135deg, #171a1d, #2a2420); }
.page-hero.slim h1 { font-size: clamp(38px, 5vw, 68px); }
.deck { background: #101315; }
.slide { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1fr); gap: 24px; align-items: center; padding: clamp(24px, 5vw, 74px); color: #fff; border-bottom: 1px solid rgba(211,173,99,.25); }
.slide-copy p { color: #e4ddd2; font-size: 20px; }
.slide figure { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.14); }
.speaker-note { grid-column: 1 / -1; border-left: 4px solid var(--gold); background: rgba(255,250,241,.08); padding: 16px 18px; border-radius: 8px; }
.speaker-note p { color: #efe7da; margin-bottom: 0; }
.chapter { margin-bottom: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); }
.chapter h3 { padding: 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin: 0; }
.chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); }
.chapter-grid section { padding: 16px; background: #20252a; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #efe2c7; color: #30261b; text-transform: uppercase; font-size: 12px; }
.pill { display: inline-block; border: 1px solid rgba(185,129,60,.35); border-radius: 999px; padding: 3px 8px; background: #fff4de; color: #684411; font-weight: 750; }
.drawing-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
input[type=search] { min-width: min(430px, 100%); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font: inherit; background: #fffaf1; }
.gallery-card { display: grid; grid-template-rows: auto 1fr; }
.gallery-card div { padding: 14px; }
.gallery-card span { color: var(--copper); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.gallery-card dl { display: grid; grid-template-columns: 70px 1fr; gap: 4px 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.gallery-card dt { font-weight: 800; color: var(--ink); }
.gallery-card dd { margin: 0; }
.delivery-grid { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
.check-list { display: grid; gap: 10px; max-width: 920px; }
.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px clamp(18px, 3vw, 42px); background: #101315; color: #d9d0c2; }
.lightbox { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; padding: 24px; background: rgba(10,12,14,.92); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 94vw; max-height: 82vh; background: #fff; border-radius: 8px; }
#lightbox-close { position: absolute; top: 16px; right: 16px; border: 0; border-radius: 8px; padding: 10px 13px; font-weight: 800; cursor: pointer; }
#lightbox-caption { color: #fff; }
@media (max-width: 1100px) { .hero, .slide { grid-template-columns: 1fr; } .discipline-grid, .route-grid, .visual-grid, .gallery-grid, .delivery-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .chapter-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 720px) { .topbar { position: static; } .brand { min-width: 0; } .hero { min-height: auto; } .status-grid, .concept-grid, .discipline-grid, .route-grid, .finance-grid, .visual-grid, .gallery-grid, .delivery-grid, .chapter-grid { grid-template-columns: 1fr; } .project-meta { grid-template-columns: 1fr; } }

.slide-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 32px;
  margin-bottom: 18px;
  border: 1px solid rgba(211,173,99,.55);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}
.slide-callout {
  margin-top: 22px;
  display: grid;
  gap: 5px;
  max-width: 640px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255,250,241,.10);
}
.slide-callout strong { color: var(--gold); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.slide-callout span { color: #fff; font-weight: 800; }
.chapter-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}
.chapter-nav a, .filter-button {
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 11px 12px;
  font-weight: 800;
  color: var(--ink);
}
.chapter-nav a:hover, .filter-button:hover, .filter-button.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--gold);
}
.calculation-breakdown {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  gap: 18px;
  align-items: start;
}
.summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}
.summary-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 16px;
  margin: 0;
}
.summary-card dt { color: var(--muted); font-weight: 800; }
.summary-card dd { margin: 0; font-weight: 900; }
.summary-card .total-line {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--teal);
  font-size: 20px;
}
.status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.status-badge, .visual-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(185,129,60,.32);
  background: #fff1d6;
  color: #704914;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 850;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.filter-button {
  cursor: pointer;
  font: inherit;
}
.legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.legend article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}
.legend strong { display: block; color: var(--copper); }
.gallery-card[data-kind="prompt"] .visual-open,
.placeholder-visual {
  min-height: 170px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #262b2f, #5d4b2d);
  color: #fff;
  font-weight: 900;
}
.test-matrix, .rest-list {
  margin-top: 18px;
}
.delivery-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 14px;
}
.delivery-section article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
}
.delivery-section strong {
  display: block;
  color: var(--copper);
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  .chapter-nav, .legend, .delivery-section, .calculation-breakdown { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 720px) {
  .chapter-nav, .legend, .delivery-section, .calculation-breakdown { grid-template-columns: 1fr; }
}

.calc-hero { background: linear-gradient(135deg, #15191d, #35291f); }
.calc-subnav { position: sticky; top: 62px; z-index: 15; display: flex; gap: 8px; flex-wrap: wrap; padding: 10px clamp(18px, 4vw, 64px); background: rgba(245,241,232,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.calc-subnav a { text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); font-size: 13px; font-weight: 850; }
.calc-total-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 12px; }
.calc-total-grid article, .calc-room-card { border: 1px solid rgba(211,173,99,.28); border-radius: 8px; background: rgba(255,250,241,.10); padding: 16px; }
.calc-total-grid span, .calc-room-card span { display: block; color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 900; }
.calc-total-grid strong, .calc-room-card strong { display: block; margin-top: 4px; font-size: 24px; }
.calc-total-final { grid-column: span 3; background: rgba(211,173,99,.18) !important; }
.calc-kpis { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.calc-room-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; }
.calc-room-card { background: rgba(255,250,241,.12); color: #fff; }
.calc-room-card p, .calc-room-card small { color: #e4d9ca; }
.calc-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(160px, 220px)); gap: 10px; margin-bottom: 14px; }
.calc-toolbar input, .calc-toolbar select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fffaf1; color: var(--ink); font: inherit; }
.calc-status-grid { margin-bottom: 14px; }
.calc-status-grid article { background: rgba(255,250,241,.10); border-color: rgba(255,255,255,.16); }
.calc-status-grid strong { color: #fff; font-size: 22px; }
tr.calc-hidden { display: none; }
@media (max-width: 1000px) { .calc-total-grid, .calc-kpis, .calc-room-grid, .calc-toolbar { grid-template-columns: 1fr 1fr; } .calc-total-final { grid-column: span 2; } }
@media (max-width: 680px) { .calc-total-grid, .calc-kpis, .calc-room-grid, .calc-toolbar { grid-template-columns: 1fr; } .calc-total-final { grid-column: span 1; } .calc-subnav { top: 56px; overflow-x: auto; flex-wrap: nowrap; } }
@media print { .calc-subnav, .calc-toolbar { display: none !important; } tr.calc-hidden { display: table-row; } .calc-total-grid, .calc-room-grid { grid-template-columns: repeat(2, 1fr); } }