/* ============================================================
   THE GRAND HO TRAM STRIP — ACQUISITION DECK
   1920×1080. Type scale: title 64 / subtitle 44 / body 34 / small 28
   Spacing: paddingTop 100 / paddingBottom 80 / paddingX 100 /
            titleGap 52 / itemGap 28
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --navy:       #0B1A2C;
  --navy-deep:  #060F1B;
  --ink:        #0A1320;
  --gold:       #C9A961;
  --gold-soft:  #D4B675;
  --gold-pale:  #E8D5A8;
  --paper:      #F4EFE6;
  --paper-warm: #EFE6D4;
  --slate:      #6B7686;
  --slate-2:    #98A2AF;
  --wine:       #5C1A2B;
  --rule:       rgba(201, 169, 97, 0.45);
  --rule-soft:  rgba(201, 169, 97, 0.22);
}

html, body { margin: 0; padding: 0; background: #000; }

deck-stage section {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--paper);
  background: var(--navy);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* --------- common chrome (slide # + wordmark in corners) --------- */
.chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.chrome .slug,
.chrome .mark {
  position: absolute;
  bottom: 48px;
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.chrome .slug   { left: 100px; font-size: 24px; }
.chrome .mark   { right: 100px; font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.18em; font-size: 24px; }
.chrome .mark .credit { font-family:'Inter', sans-serif; font-style:normal; font-size:24px; letter-spacing:0.18em; text-transform:none; opacity:0.7; margin-left:14px; padding-left:14px; border-left:1px solid currentColor; }
.chrome.on-image .slug,
.chrome.on-image .mark { color: var(--gold-pale); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }

/* --------- typography primitives --------- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow-rule {
  display: flex; align-items: center; gap: 22px;
}
.eyebrow-rule::after {
  content: ''; flex: 1 0 80px; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}
h1.display, h2.display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--paper);
}
h2.title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--paper);
}
.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.18;
  color: var(--gold-soft);
  margin: 0;
}
.body  { font-size: 28px; line-height: 1.45; color: rgba(244,239,230,0.86); font-weight: 300; }
.body-lg { font-size: 32px; line-height: 1.42; color: rgba(244,239,230,0.92); font-weight: 300; }
.small { font-size: 24px; line-height: 1.4; color: var(--slate-2); font-weight: 400; letter-spacing: 0.02em; }
.cap   { font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
em.italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; color: var(--gold-soft); font-size: 1.05em; }

/* --------- paper variant (light slides) --------- */
.paper {
  background: var(--paper) !important;
  color: var(--ink);
}
.paper h1.display, .paper h2.display, .paper h2.title { color: var(--ink); }
.paper .body { color: rgba(10,19,32,0.78); }
.paper .body-lg { color: rgba(10,19,32,0.86); }
.paper .small { color: #6B7686; }
.paper .eyebrow { color: var(--wine); }
.paper .chrome .slug, .paper .chrome .mark { color: var(--wine); }

/* --------- ink variant (deepest navy / cover) --------- */
.ink { background: var(--ink); }

/* --------- frame (default slide content area) --------- */
.frame {
  position: absolute; inset: 0;
  padding: 100px 100px 160px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.frame--center { justify-content: center; }
.frame--end    { justify-content: flex-end; }

/* --------- decorative gold ornament --------- */
.ornament {
  display: inline-block; width: 72px; height: 1px;
  background: var(--gold);
  position: relative;
  vertical-align: middle;
}
.ornament::before, .ornament::after {
  content: ''; position: absolute; top: 50%;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.ornament::before { left: -2px; }
.ornament::after  { right: -2px; }

/* --------- full-bleed image cover --------- */
.bleed-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bleed-img.dim     { filter: brightness(0.62); }
.bleed-img.dim-hi  { filter: brightness(0.45); }
.bleed-img.warm    { filter: brightness(0.7) saturate(1.05); }

/* dark gradient overlay for on-image text */
.scrim-bottom {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,26,44,0.05) 0%, rgba(6,15,27,0.0) 38%, rgba(6,15,27,0.78) 100%);
}
.scrim-left {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,15,27,0.85) 0%, rgba(6,15,27,0.55) 38%, rgba(6,15,27,0) 70%);
}
.scrim-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(6,15,27,0) 30%, rgba(6,15,27,0.7) 100%);
}

/* --------- key/value rows --------- */
.kv-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k { font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.kv-row .v { font-size: 28px; color: var(--paper); font-weight: 300; line-height: 1.4; }
.paper .kv-row .v { color: var(--ink); }
.paper .kv-row { border-bottom-color: rgba(10,19,32,0.12); }

/* --------- big number stat --------- */
.stat {
  display: flex; flex-direction: column; gap: 12px;
}
.stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 120px;
  line-height: 0.95;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.stat .num.huge { font-size: 168px; }
.stat .label {
  font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper); font-weight: 600;
}
.stat .sub { font-size: 24px; color: var(--slate-2); font-weight: 300; line-height: 1.4; }
.paper .stat .num { color: var(--wine); }
.paper .stat .label { color: var(--ink); }
.paper .stat .sub { color: var(--slate); }

/* --------- bullets (no dots) --------- */
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean > li {
  font-size: 28px; font-weight: 300; line-height: 1.45;
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
  color: rgba(244,239,230,0.92);
}
.list-clean > li:last-child { border-bottom: none; }
.list-clean > li .lead {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; color: var(--gold-soft); font-style: italic;
  margin-bottom: 4px; font-weight: 400;
}
.paper .list-clean > li { color: var(--ink); border-bottom-color: rgba(10,19,32,0.12); }
.paper .list-clean > li .lead { color: var(--wine); }

/* --------- card (used on data slides) --------- */
.card {
  background: rgba(244,239,230,0.04);
  border: 1px solid var(--rule-soft);
  padding: 36px 38px;
  display: flex; flex-direction: column; gap: 18px;
}
.paper .card { background: rgba(10,19,32,0.03); border-color: rgba(10,19,32,0.10); }

/* --------- image grid --------- */
.img-grid {
  display: grid; gap: 12px;
  width: 100%; height: 100%;
}
.img-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------- header band (used on section openers) --------- */
.hairline {
  height: 1px; background: var(--gold); width: 120px;
}

/* --------- section roman numeral big --------- */
.roman {
  font-family: 'Cormorant Garamond', serif;
  font-size: 320px; line-height: 0.85;
  color: rgba(201,169,97,0.10);
  font-weight: 300;
  position: absolute;
  letter-spacing: -0.02em;
}

/* --------- callout urgency band --------- */
.urgency-band {
  background: var(--wine);
  color: var(--paper);
  padding: 20px 32px;
  display: inline-block;
  font-size: 24px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  border-left: 3px solid var(--gold);
}

/* --------- price comparison bar --------- */
.bar-row { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.bar-row .blabel { width: 320px; font-size: 24px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.bar-row .btrack { flex: 1; height: 22px; background: rgba(244,239,230,0.06); position: relative; }
.bar-row .bfill  { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.bar-row .bfill.muted { background: rgba(201,169,97,0.35); }
.bar-row .bvalue { width: 240px; text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 44px; color: var(--paper); font-weight: 400; }

/* --------- tiny brand wordmark for cover --------- */
.wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wordmark .top { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 24px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.wordmark .name { font-family: 'Cormorant Garamond', serif; font-size: 92px; font-weight: 500; line-height: 0.96; letter-spacing: 0.04em; color: var(--paper); text-align: center; }
.wordmark .sub { font-family: 'Inter', sans-serif; font-size: 24px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

/* --------- 4-up stat strip --------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-strip > div {
  background: var(--navy);
  padding: 36px 28px 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.stat-strip .n { font-family: 'Cormorant Garamond', serif; font-size: 72px; line-height: 1; color: var(--gold); font-weight: 400; }
.stat-strip .l { font-size: 24px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); font-weight: 600; }
.stat-strip .s { font-size: 24px; color: var(--slate-2); font-weight: 300; }

/* --------- hairline divider w/ diamonds (deco) --------- */
.deco-rule {
  display: flex; align-items: center; gap: 14px;
  color: var(--gold);
}
.deco-rule::before, .deco-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--gold);
}
.deco-rule .diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* utility */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-sm { gap: 16px; } .gap-md { gap: 28px; } .gap-lg { gap: 52px; } .gap-xl { gap: 72px; }
.grow { flex: 1; }
.center { justify-content: center; align-items: center; }
.between { justify-content: space-between; }
.text-gold { color: var(--gold); }
.text-paper { color: var(--paper); }
.text-ink { color: var(--ink); }
.text-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; }