/* ═══════════════════════════════════════════════════════════════
   CAMPKING — ISOLATED STYLESHEET
   Palette  : Antique Ivory
   Fonts    : Playfair Display 400/500 (display) + Urbanist 200/300/400 (body/UI)
   Scoped under .ck-scope to prevent WordPress/WooCommerce/Flatsome
   overrides. Load via plugin shortcode only.
═══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Urbanist:wght@200;300;400;500&display=swap');

/* ── DESIGN TOKENS — ANTIQUE IVORY ── */
.ck-scope {
  --bg:         #F7F3EC;
  --bg-alt:     #EFE9DF;
  --bg-deep:    #E6DDD0;
  --sur:        #FDFAF5;
  --lichen:     #C2B8A8;
  --flint:      #8A7A68;
  --peat:       #4E4030;
  --bark:       #1C1614;
  --gold:       #A87C5A;
  --gold-lt:    #C8B496;
  --gold-pale:  rgba(168,124,90,0.10);
  --gold-pale2: rgba(168,124,90,0.18);
  --line:       rgba(28,22,20,0.08);
  --line-md:    rgba(28,22,20,0.15);
  --text:       #1C1614;
  --text-mid:   #3A2E24;
  --text-soft:  #5A4838;
  --text-mute:  #9A8A78;
  --f-d: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', sans-serif;
  --f-l: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Plus Jakarta Sans', sans-serif;
  --f-b: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Plus Jakarta Sans', sans-serif;
  --f-s: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Plus Jakarta Sans', sans-serif;
  --max:  1600px;
  --pad:  clamp(20px, 4.5vw, 88px);
  --r:    16px;
  --r-sm: 10px;
  --r-xs: 6px;
  --sh:  0 2px 1px rgba(28, 22, 20, 0.06);
  --sh2: 0 2px 1px rgb(158 158 158 / 12%);
}

/* ── RESET (scoped) ── */
.ck-scope *, .ck-scope *::before, .ck-scope *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

.ck-scope {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-b);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

/* ── LAYOUT ── */
.ck-scope .wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.ck-scope .btn {
  display: inline-block;
  font-family: var(--f-b);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.28s ease;
  border-radius: var(--r-xs);
}
.ck-scope .btn-dark { background: var(--bark); color: var(--sur); box-shadow: var(--sh); }
.ck-scope .btn-dark:hover { background: var(--peat); transform: translateY(-1px); box-shadow: var(--sh2); }
.ck-scope .btn-outline { border: 1px solid rgba(253,250,245,0.34); color: rgba(253,250,245,0.88); background: transparent; }
.ck-scope .btn-outline:hover { border-color: var(--gold-lt); color: var(--gold-lt); background: rgba(200,180,150,0.06); }
.ck-scope .btn-earth { border: 1px solid var(--line-md); color: var(--text-mid); background: transparent; }
.ck-scope .btn-earth:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-pale); }
.ck-scope .btn-cream {
  background: var(--sur); color: var(--bark);
  font-family: var(--f-b); font-weight: 400; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 32px; text-decoration: none; display: inline-block;
  transition: all 0.28s; border-radius: var(--r-xs); border: none; cursor: pointer;
  box-shadow: var(--sh);
}
.ck-scope .btn-cream:hover { background: var(--bg-alt); transform: translateY(-1px); }
.ck-scope .btn-ghost-light {
  border: 1px solid rgba(253,250,245,0.20); color: rgba(253,250,245,0.58);
  font-family: var(--f-b); font-weight: 400; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 30px; text-decoration: none; display: inline-block;
  transition: all 0.28s; border-radius: var(--r-xs); background: transparent;
}
.ck-scope .btn-ghost-light:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* ── SECTIONS ── */
.ck-scope .sec      { padding: clamp(1px, 9.5vw, 1px) 0; }
.ck-scope .sec-alt  { background: var(--bg-alt); }
.ck-scope .sec-deep { background: var(--bg-deep); }
.ck-scope .sec-bark { background: var(--bark); }

/* ── EYEBROW ── */
.ck-scope .ew { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ck-scope .ew-bar { width: 26px; height: 1px; background: var(--gold); border-radius: 1px; }
.ck-scope .ew-t {
  font-family: var(--f-b); font-weight: 400;
  font-size: 0.58rem; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--gold);
}
.ck-scope .ew-light .ew-t  { color: var(--gold-lt); }
.ck-scope .ew-light .ew-bar { background: var(--gold-lt); }

/* ── HEADINGS ── */
.ck-scope .h2 {
  font-family: var(--f-d); font-size: clamp(2.0rem, 3.4vw, 3.0rem);
  font-weight: 400; color: var(--bark); line-height: 1.10; letter-spacing: -0.01em;
}
.ck-scope .h2 em { font-style: normal; font-weight: 400; color: var(--gold); }
.ck-scope .h2-light    { color: rgba(253,250,245,0.96); }
.ck-scope .h2-light em { color: var(--gold-lt); }
.ck-scope .lead {
  font-family: var(--f-b); font-weight: 300; font-size: 0.90rem;
  line-height: 1.88; color: var(--text-soft); max-width: 52ch; margin-top: 16px;
}
.ck-scope .lead-light { color: rgba(253,250,245,0.44); }

/* ── REVEAL ANIMATIONS ── */
.ck-scope .rv {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.75s ease, transform 0.75s ease;
  will-change: opacity, transform; backface-visibility: hidden;
}
.ck-scope .rv.in { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }
.ck-scope .rv-d1 { transition-delay: .08s; }
.ck-scope .rv-d2 { transition-delay: .16s; }
.ck-scope .rv-d3 { transition-delay: .24s; }
.ck-scope .rv-d4 { transition-delay: .32s; }
.ck-scope .rv-scale {
  opacity: 0; transform: scale3d(0.97, 0.97, 1);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform; backface-visibility: hidden;
}
.ck-scope .rv-scale.in { opacity: 1; transform: scale3d(1, 1, 1); will-change: auto; }

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.ck-scope .hero {
  position: relative; width: 100%; max-width: var(--max); margin: 0 auto;
  aspect-ratio: 21/9; min-height: 320px; overflow: hidden;
  margin-bottom: clamp(32px, 4vw, 56px); border-radius: var(--r);
}
.ck-scope .hero-slides { position: absolute; inset: 0; }
.ck-scope .hero-slide {
  position: absolute; inset: 0; background: var(--bg-deep);
  opacity: 0; transform: translateZ(0); will-change: opacity;
  backface-visibility: hidden; transition: opacity 1.2s ease;
}
.ck-scope .hero-slide.active { opacity: 1; z-index: 1; }
.ck-scope .hero-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translateZ(0); backface-visibility: hidden;
}
.ck-scope .hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom,
    rgba(28,22,20,0.04) 0%, rgba(28,22,20,0.04) 30%,
    rgba(28,22,20,0.52) 68%, rgba(28,22,20,0.88) 100%);
}
.ck-scope .hero-texts { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; }
.ck-scope .hero-text-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(28px,4vw,52px) clamp(24px,4.5vw,88px) clamp(40px,5vw,68px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; opacity: 0;
  transition: opacity 0.7s ease; pointer-events: none;
}
.ck-scope .hero-text-panel.active { opacity: 1; pointer-events: auto; }
.ck-scope .hero-left-content { flex: 1; min-width: 0; }
.ck-scope .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ck-scope .hero-ew-bar { width: 28px; height: 1px; background: var(--gold-lt); border-radius: 1px; }
.ck-scope .hero-ew-t {
  font-family: var(--f-b); font-weight: 400; font-size: 0.56rem;
  letter-spacing: 0.44em; text-transform: uppercase; color: var(--gold-lt);
}
.ck-scope .hero-h1 {
  font-family: var(--f-d); font-size: clamp(2.2rem, 3.8vw, 4.8rem);
  font-weight: 400; line-height: 1.06; color: #fff;
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.ck-scope .hero-h1 em { font-style: normal; font-weight: 400; color: var(--gold-lt); display: block; }
.ck-scope .hero-sub {
  font-family: var(--f-b); font-weight: 300;
  font-size: clamp(0.86rem, 1.1vw, 1.02rem);
  color: rgba(253,250,245,0.52); margin-bottom: 30px; letter-spacing: 0.04em;
}
.ck-scope .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ck-scope .hero-stats-bar {
  position: absolute; top: clamp(20px, 3vw, 36px); right: clamp(24px, 4.5vw, 88px);
  z-index: 4; display: flex; gap: 0;
  border: 1px solid rgba(253,250,245,0.12); border-radius: var(--r-sm);
  overflow: hidden; backdrop-filter: blur(16px); background: rgba(28,22,20,0.28);
}
.ck-scope .hero-stat { padding: 16px 22px; border-right: 1px solid rgba(253,250,245,0.09); text-align: center; }
.ck-scope .hero-stat:last-child { border-right: none; }
.ck-scope .hero-stat-n {
  font-family: var(--f-d); font-size: 1.5rem; font-weight: 400;
  color: #fff; line-height: 1; display: block;
}
.ck-scope .hero-stat-l {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(253,250,245,0.38); display: block; margin-top: 4px;
}
.ck-scope .hero-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); z-index: 5;
  display: flex; gap: 7px; align-items: center;
}
.ck-scope .hero-dot {
  display: inline-block !important;
  width: 5px !important; height: 5px !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: 5px !important; max-height: 5px !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1 !important; font-size: 0 !important;
  border: none !important; border-radius: 50% !important;
  background: rgba(253,250,245,0.28) !important;
  cursor: pointer; flex-shrink: 0;
  box-shadow: none !important; outline: none !important;
  appearance: none !important; -webkit-appearance: none !important;
  overflow: hidden; vertical-align: middle;
  transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}
.ck-scope .hero-dot.active {
  width: 20px !important; max-width: 20px !important;
  border-radius: 3px !important; background: var(--gold-lt) !important;
}
@media (max-width: 1600px) {
  .ck-scope .hero { border-radius: 0; margin-bottom: 0; margin-top: 0; }
  .ck-scope .ba-slider-wrap { border-radius: 0; }
}
@media (max-width: 1024px) { .ck-scope .hero-stats-bar-desktop { display: none !important; } }
@media (max-width: 768px) {
  .ck-scope .hero { aspect-ratio: unset; min-height: 100svh; border-radius: 0; margin-bottom: 0; }
  .ck-scope .hero-text-panel { flex-direction: column; align-items: flex-start; padding: 20px 20px 64px; }
  .ck-scope .hero-stats-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: static; border: none; border-radius: 0;
    border-top: 1px solid rgba(253,250,245,0.09);
    background: rgba(28,22,20,0.44); width: 100%; margin-top: 22px;
    backdrop-filter: blur(10px);
  }
  .ck-scope .hero-stat { border-right: none; border-bottom: 1px solid rgba(253,250,245,0.07); }
  .ck-scope .hero-stat:nth-child(odd) { border-right: 1px solid rgba(253,250,245,0.07); }
  .ck-scope .hero-stat:nth-child(3), .ck-scope .hero-stat:nth-child(4) { border-bottom: none; }
  .ck-scope .hero-h1 { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .ck-scope .hero-stats-bar-desktop { display: none; }
  .ck-scope #ck-mob-stats { display: none !important; }
}

/* ═══════════════════════════════════
   TICKER
═══════════════════════════════════ */
.ck-scope .ticker-wrap { background: var(--bark); height: 44px; display: flex; align-items: center; overflow: hidden; }
.ck-scope .ticker-track { display: flex; width: max-content; animation: ck-tkr 38s linear infinite; align-items: center; }
.ck-scope .ticker-track:hover { animation-play-state: paused; }
@keyframes ck-tkr { to { transform: translateX(-50%); } }
.ck-scope .ti {
  font-family: var(--f-b); font-weight: 300; font-size: 0.58rem;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(253,250,245,0.40); padding: 0 28px; white-space: nowrap;
}
.ck-scope .td { color: var(--gold); opacity: 0.55; font-size: 0.46rem; }

/* ═══════════════════════════════════
   BEFORE / AFTER
═══════════════════════════════════ */
.ck-scope .ba-section { background: var(--bg-alt); padding: 0; padding-bottom: clamp(16px,3vw,40px); }
.ck-scope .ba-section-text { padding: clamp(56px,7vw,100px) var(--pad) clamp(30px,5vw,40px); }
.ck-scope .ba-section-text .h2 { max-width: 720px; }
.ck-scope .ba-text-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px,5vw,72px); margin-top: 52px; align-items: start;
}
.ck-scope .ba-text-row .prob-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.ck-scope .pli {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
  background: rgba(253,250,245,0.72); transition: background 0.22s;
}
.ck-scope .pli:last-child { border-bottom: none; }
.ck-scope .pli:hover { background: var(--gold-pale); }
.ck-scope .pli-icon {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  background: var(--gold-pale); border: 1px solid var(--gold-pale2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ck-scope .pli-icon svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-scope .pli-t { font-family: var(--f-b); font-weight: 500; font-size: 0.86rem; color: var(--bark); margin-bottom: 3px; }
.ck-scope .pli-b { font-family: var(--f-b); font-weight: 300; font-size: 0.74rem; color: var(--text-soft); line-height: 1.68; }
.ck-scope .ba-slider-wrap { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; overflow: hidden; border-radius: 0; }
@media (min-width: 1601px) { .ck-scope .ba-slider-wrap { border-radius: var(--r); } }
.ck-scope .ba-slider { position: relative; user-select: none; touch-action: pan-y; width: 100%; aspect-ratio: 21/9; min-height: 260px; }
@media (max-width: 768px) { .ck-scope .ba-slider { touch-action: pan-y; aspect-ratio: 4/3; min-height: 280px; } }
.ck-scope .ba-before-img, .ck-scope .ba-after-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-scope .ba-before-img { position: relative; }
.ck-scope .ba-after-wrap { position: absolute; inset: 0; overflow: hidden; }
.ck-scope .ba-after-wrap .ba-after-img { position: absolute; inset: 0; }
.ck-scope .ba-div { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(253,250,245,0.92); cursor: ew-resize; z-index: 3; transform: translateX(-50%); }
.ck-scope .ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sur); border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh2); cursor: ew-resize;
}
.ck-scope .ba-handle svg { width: 22px; height: 10px; fill: var(--gold); }
.ck-scope .ba-lbl {
  position: absolute; top: 18px;
  font-family: var(--f-b); font-weight: 400; font-size: 0.56rem;
  letter-spacing: 0.20em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px;
}
.ck-scope .ba-lbl.bf { left: 18px; background: rgba(253,250,245,0.90); color: var(--text-mid); }
.ck-scope .ba-lbl.af { right: 18px; background: rgba(168,124,90,0.92); color: var(--sur); }
.ck-scope .ba-caption {
  background: var(--bark); padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ck-scope .ba-cap-t { font-family: var(--f-d); font-size: 1.0rem; font-weight: 400; color: rgba(253,250,245,0.92); }
.ck-scope .ba-cap-s { font-family: var(--f-b); font-weight: 300; font-size: 0.68rem; color: rgba(253,250,245,0.36); letter-spacing: 0.08em; }

/* ═══════════════════════════════════
   ROI CALCULATOR
═══════════════════════════════════ */
.ck-scope .roi-full { max-width: var(--max); margin: 56px auto 0; }

.ck-scope .roi-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: stretch;        /* ← both columns same height */
}
@media (max-width: 900px) { .ck-scope .roi-inner-grid { grid-template-columns: 1fr; } }

/* ── Calculator shell ── */
.ck-scope .calc-shell {
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh2);
  display: flex;
  flex-direction: column;
}
.ck-scope .calc-head { background: var(--bark); padding: 26px 34px; flex-shrink: 0; }
.ck-scope .calc-head-t { font-family: var(--f-d); font-size: 1.2rem; font-weight: 400; color: var(--sur); }
.ck-scope .calc-head-s { font-family: var(--f-b); font-weight: 300; font-size: 0.66rem; letter-spacing: 0.10em; color: rgba(253,250,245,0.36); margin-top: 5px; }

.ck-scope .calc-inputs { padding: 28px 34px 28px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.ck-scope .ci-row { display: flex; flex-direction: column; gap: 7px; }
.ck-scope .ci-label { font-family: var(--f-b); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }
.ck-scope .ci-label strong { color: var(--gold); font-weight: 500; }
.ck-scope .ci-range-vals { display: flex; justify-content: space-between; font-family: var(--f-b); font-size: 0.62rem; color: var(--text-mute); }
.ck-scope input[type=range] { width: 100%; accent-color: var(--gold); cursor: pointer; height: 3px; }
.ck-scope .ci-iw { display: flex; align-items: center; gap: 9px; }
.ck-scope .ci-pre, .ck-scope .ci-suf { font-family: var(--f-b); font-weight: 300; font-size: 0.86rem; color: var(--text-mid); flex-shrink: 0; }
.ck-scope .ci-in {
  border: 1px solid var(--line); background: var(--bg-alt);
  border-radius: var(--r-xs); padding: 11px 16px;
  font-family: var(--f-b); font-size: 0.86rem; font-weight: 300;
  color: var(--bark); width: 100%; outline: none; transition: border-color 0.22s;
}
.ck-scope .ci-in:focus { border-color: var(--gold); }

/* Investment field — distinct gold-tinted box */
.ck-scope .ci-row-invest {
  background: var(--gold-pale);
  border: 1px solid var(--gold-pale2);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.ck-scope .ci-row-invest .ci-label {
  color: var(--gold);
  display: flex; align-items: center; gap: 8px;
}
.ck-scope .ci-row-invest .ci-label::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0; display: inline-block;
}
.ck-scope .ci-row-invest .ci-in { background: var(--sur); border-color: rgba(168,124,90,0.22); }
.ck-scope .ci-row-invest .ci-in:focus { border-color: var(--gold); }

/* Total investment line */
.ck-scope .ci-total-line {
  font-family: var(--f-b); font-weight: 300;
  font-size: 0.68rem; color: var(--text-mute);
  letter-spacing: 0.04em; margin-top: 8px;
}
.ck-scope .ci-total-line strong { color: var(--gold); font-weight: 400; }

/* Thin divider between regular inputs and investment field */
.ck-scope .calc-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ── Result panel — dark gradient at bottom of calculator ── */
.ck-scope .calc-result-panel {
  background: linear-gradient(140deg, var(--bark) 0%, #2C1E10 100%);
  padding: 28px 34px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ck-scope .calc-result-panel::before {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(168,124,90,0.09); pointer-events: none;
}

/* Monthly headline */
.ck-scope .cr-primary-label {
  font-family: var(--f-b); font-weight: 300; font-size: 0.56rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(253,250,245,0.44); display: block; margin-bottom: 6px;
}
.ck-scope .cr-primary-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.ck-scope .cr-primary-num {
  font-family: var(--f-d); font-size: clamp(2.0rem, 3vw, 2.6rem);
  font-weight: 400; color: var(--sur); line-height: 1; letter-spacing: -0.02em;
}
.ck-scope .cr-primary-period {
  font-family: var(--f-b); font-weight: 300; font-size: 0.72rem;
  color: rgba(253,250,245,0.38); letter-spacing: 0.06em;
}

/* 2×2 metric grid */
.ck-scope .cr-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: rgba(253,250,245,0.08);
  border-radius: 8px; overflow: hidden;
  position: relative; z-index: 1; margin-bottom: 16px;
}
.ck-scope .cr-metric { background: rgba(253,250,245,0.04); padding: 13px 14px; text-align: center; transition: background 0.2s; }
.ck-scope .cr-metric:hover { background: rgba(253,250,245,0.07); }
.ck-scope .cr-metric-label {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(253,250,245,0.34); display: block; margin-bottom: 5px;
}
.ck-scope .cr-metric-value {
  font-family: var(--f-d); font-size: 1.0rem; font-weight: 400;
  color: rgba(253,250,245,0.92); display: block; letter-spacing: -0.01em;
}
.ck-scope .cr-metric-value.cr-highlight { color: var(--gold-lt); }

/* Break-even badge */
.ck-scope .cr-breakeven-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(168,124,90,0.26);
  border-radius: 8px; background: rgba(168,124,90,0.08);
  position: relative; z-index: 1;
}
.ck-scope .cr-be-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(168,124,90,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ck-scope .cr-be-icon svg { width: 14px; height: 14px; stroke: var(--gold-lt); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-scope .cr-be-label {
  font-family: var(--f-b); font-weight: 300; font-size: 0.52rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(253,250,245,0.38); display: block; margin-bottom: 2px;
}
.ck-scope .cr-be-val {
  font-family: var(--f-d); font-size: 1.05rem; font-weight: 400;
  color: var(--gold-lt); display: block;
}

/* ── Feature column (right side) ── */
.ck-scope .feat-col {
  display: flex; flex-direction: column;
  background: var(--sur); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh2);
}
.ck-scope .feat-col-head { background: var(--bg-deep); padding: 26px 34px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ck-scope .feat-col-head-t { font-family: var(--f-d); font-size: 1.2rem; font-weight: 400; color: var(--bark); margin-bottom: 4px; }
.ck-scope .feat-col-head-s { font-family: var(--f-b); font-weight: 300; font-size: 0.66rem; color: var(--text-mute); letter-spacing: 0.06em; }

.ck-scope .feat-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 34px; border-bottom: 1px solid var(--line);
  transition: background 0.22s; flex: 1;
}
.ck-scope .feat-item:last-of-type { border-bottom: none; }
.ck-scope .feat-item:hover { background: var(--gold-pale); }

.ck-scope .feat-icon-wrap {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--gold-pale); border: 1px solid var(--gold-pale2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.22s, border-color 0.22s;
}
.ck-scope .feat-item:hover .feat-icon-wrap { background: rgba(168,124,90,0.16); border-color: rgba(168,124,90,0.32); }
.ck-scope .feat-icon-wrap svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.ck-scope .feat-kicker {
  font-family: var(--f-b); font-weight: 300; font-size: 0.52rem;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 5px;
}
.ck-scope .feat-title { font-family: var(--f-d); font-size: 1.0rem; font-weight: 400; color: var(--bark); margin-bottom: 8px; line-height: 1.18; }
.ck-scope .feat-body { font-family: var(--f-b); font-weight: 300; font-size: 0.76rem; line-height: 1.80; color: var(--text-soft); }

/* Stat strip at bottom of feature col */
.ck-scope .feat-stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);border: 1px solid var(--line); 
  background: var(--bg-deep); flex-shrink: 0;
}
.ck-scope .feat-stat { padding: 18px 14px; text-align: center; border-right: 1px solid var(--line); }
.ck-scope .feat-stat:last-child { border-right: none; }
.ck-scope .feat-stat-n {
  font-family: var(--f-d); font-size: 1.4rem; font-weight: 400;
  color: var(--bark); display: block; line-height: 1; margin-bottom: 4px; letter-spacing: -0.01em;
}
.ck-scope .feat-stat-l {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-mute); display: block;
}

/* ── Legacy roi-pts-col (kept for backward compat) ── */
.ck-scope .roi-pts-col { display: flex; flex-direction: column; gap: 14px; }
.ck-scope .roi-pt { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 24px 28px; box-shadow: var(--sh); }
.ck-scope .roi-pt-icon { width: 36px; height: 36px; border-radius: var(--r-xs); background: var(--gold-pale); border: 1px solid var(--gold-pale2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ck-scope .roi-pt-icon svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-scope .roi-pt-t { font-family: var(--f-b); font-weight: 500; font-size: 0.84rem; color: var(--bark); margin-bottom: 5px; }
.ck-scope .roi-pt-b { font-family: var(--f-b); font-weight: 300; font-size: 0.72rem; line-height: 1.72; color: var(--text-soft); }

/* ═══════════════════════════════════
   PRODUCT CAROUSELS
═══════════════════════════════════ */
.ck-scope .prod-section { padding: clamp(80px,9vw,136px) 0; }
.ck-scope .prod-cat-block { margin-top: 44px; }
.ck-scope .prod-cat-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.ck-scope .prod-cat-label-wrap { display: flex; align-items: center; gap: 14px; }
.ck-scope .prod-cat-bar { width: 20px; height: 1px; border-radius: 1px; }
.ck-scope .prod-cat-name { font-family: var(--f-b); font-weight: 400; font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase; }
.ck-scope .cat-tents .prod-cat-bar  { background: var(--gold); }
.ck-scope .cat-tents .prod-cat-name { color: var(--gold); }
.ck-scope .cat-pods .prod-cat-bar   { background: var(--flint); }
.ck-scope .cat-pods .prod-cat-name  { color: var(--flint); }
.ck-scope .cat-amenities .prod-cat-bar  { background: var(--peat); }
.ck-scope .cat-amenities .prod-cat-name { color: var(--peat); }
.ck-scope .carousel-vp { overflow: hidden; border-radius: var(--r); cursor: grab; transform: translateZ(0); contain: layout style; }
.ck-scope .carousel-vp:active { cursor: grabbing; }
.ck-scope .carousel-track { display: flex; gap: 16px; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.ck-scope .prod-cat-block-inner { padding: 0 var(--pad) clamp(56px,7vw,100px); max-width: var(--max); margin: 0 auto; width: 100%; }
.ck-scope .prod-card {
  flex: 0 0 calc(22.2% - 7px); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh); transition: box-shadow 0.32s, transform 0.32s;
  position: relative; aspect-ratio: 416/605; min-height: 0;
}
.ck-scope .prod-card:hover { box-shadow: var(--sh2); transform: translateY(-5px); }
.ck-scope .prod-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.58s ease; display: block; }
.ck-scope .prod-card:hover img { transform: scale(1.06); }
.ck-scope .prod-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,22,20,0.92) 0%, rgba(28,22,20,0.18) 52%, transparent 80%);
  transition: background 0.35s;
}
.ck-scope .prod-card:hover .prod-card-overlay { background: linear-gradient(to top, rgba(28,22,20,0.96) 0%, rgba(28,22,20,0.40) 62%, rgba(28,22,20,0.08) 100%); }
.ck-scope .prod-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px 22px; z-index: 2; }
.ck-scope .prod-tag { display: inline-block; font-family: var(--f-b); font-weight: 400; font-size: 0.50rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; margin-bottom: 8px; }
.ck-scope .cat-tents .prod-tag    { background: rgba(168,124,90,0.24); color: var(--gold-lt); border: 1px solid rgba(168,124,90,0.36); }
.ck-scope .cat-pods .prod-tag     { background: rgba(138,122,104,0.24); color: rgba(220,205,185,0.92); border: 1px solid rgba(138,122,104,0.30); }
.ck-scope .cat-amenities .prod-tag { background: rgba(78,64,48,0.30); color: rgba(225,213,196,0.92); border: 1px solid rgba(78,64,48,0.40); }
.ck-scope .prod-name { font-family: var(--f-d); font-size: 1.0rem; font-weight: 400; color: #fff; margin-bottom: 5px; line-height: 1.22; }
.ck-scope .prod-meta { font-family: var(--f-b); font-weight: 300; font-size: 0.64rem; color: rgba(253,250,245,0.46); }
.ck-scope .prod-badge { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--f-b); font-weight: 400; font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; background: rgba(253,250,245,0.90); color: var(--bark); }
.ck-scope .prod-enquire {
  display: block; margin-top: 12px; font-family: var(--f-b); font-weight: 400;
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sur);
  text-decoration: none; border: 1px solid rgba(253,250,245,0.28);
  padding: 9px 14px; border-radius: var(--r-xs); text-align: center;
  transition: background 0.22s, border-color 0.22s;
}
.ck-scope .prod-enquire:hover { background: rgba(253,250,245,0.10); border-color: rgba(253,250,245,0.50); }
.ck-scope .cat-tents .prod-card    { background: var(--bg-deep); }
.ck-scope .cat-pods .prod-card     { background: var(--peat); }
.ck-scope .cat-amenities .prod-card { background: var(--bark); }
.ck-scope .car-nav { display: flex; align-items: center; gap: 8px; margin-top: 20px; justify-content: flex-end; }
.ck-scope .car-dots { display: flex; gap: 6px; align-items: center; margin-right: auto; }
.ck-scope .car-dot {
  display: inline-block !important;
  width: 6px !important; height: 6px !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: 6px !important; max-height: 6px !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1 !important; font-size: 0 !important;
  border: none !important; border-radius: 50% !important;
  background: var(--lichen) !important;
  cursor: pointer; flex-shrink: 0;
  box-shadow: none !important; outline: none !important;
  appearance: none !important; -webkit-appearance: none !important;
  overflow: hidden; vertical-align: middle;
  transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}
.ck-scope .car-dot.active { width: 20px !important; max-width: 20px !important; border-radius: 3px !important; background: var(--gold) !important; }
.ck-scope .car-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-md); background: var(--sur); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.24s; box-shadow: var(--sh); }
.ck-scope .car-btn:hover { background: var(--bark); border-color: var(--bark); }
.ck-scope .car-btn:hover svg { stroke: var(--sur); }
.ck-scope .car-btn svg { width: 14px; height: 14px; stroke: var(--text-mid); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.22s; }
@media (max-width: 1200px) { .ck-scope .prod-card { flex: 0 0 calc(29% - 7px); } }
@media (max-width: 900px)  { .ck-scope .prod-card { flex: 0 0 calc(41% - 7px); } }
@media (max-width: 600px) {
  .ck-scope .prod-card { flex: 0 0 58vw; aspect-ratio: 416/605; }
  .ck-scope .carousel-track { gap: 10px; }
  .ck-scope .prod-card-body { padding: 14px 12px; }
  .ck-scope .prod-name { font-size: 0.84rem; }
  .ck-scope .prod-meta { font-size: 0.58rem; }
  .ck-scope .prod-enquire { padding: 7px 10px; font-size: 0.50rem; margin-top: 8px; }
  .ck-scope .prod-tag { padding: 2px 7px; font-size: 0.44rem; }
}
@media (max-width: 420px) { .ck-scope .prod-card { flex: 0 0 66vw; } }
.ck-scope .cat-tents     { background: transparent; }
.ck-scope .cat-pods      { background: transparent; padding-top: clamp(5px,3vw,5px); }
.ck-scope .cat-amenities { background: transparent; padding-top: clamp(5px,3vw,5px); }

/* ═══════════════════════════════════
   MARKET GRAPHS
═══════════════════════════════════ */
.ck-scope .market-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 44px; margin-bottom: 44px; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.ck-scope .ms { 
  background: var(--sur); 
  padding: clamp(18px,2.5vw,32px) clamp(14px,2vw,28px); 
  text-align: center; 
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* remove right border only on last column */
.ck-scope .ms:nth-child(4n) {
  border-right: none;
}

/* remove bottom border only for last row (desktop) */
@media (min-width: 601px) {
  .ck-scope .ms:nth-last-child(-n+4) {
    border-bottom: none;
  }
}

/* fix for mobile (2 columns layout) */
@media (max-width: 600px) {
  .ck-scope .ms:nth-child(2n) {
    border-right: none;
  }

  .ck-scope .ms:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
.ck-scope .ms-n { font-family: var(--f-d); font-size: clamp(1.7rem, 3.5vw, 2.7rem); font-weight: 400; color: var(--bark); display: block; line-height: 1; margin-bottom: 7px; letter-spacing: -0.01em; }
.ck-scope .ms-n sup { font-size: 0.52em; color: var(--gold); vertical-align: super; }
.ck-scope .ms-l { font-family: var(--f-b); font-weight: 300; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute); display: block; }
.ck-scope .market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2.5vw,32px); }
.ck-scope .graph-card { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px,2.5vw,30px); box-shadow: var(--sh); overflow: hidden; min-width: 0; }
.ck-scope .graph-title { font-family: var(--f-d); font-size: clamp(0.90rem,1.4vw,1.02rem); font-weight: 400; color: var(--bark); margin-bottom: 4px; }
.ck-scope .graph-sub { font-family: var(--f-b); font-weight: 300; font-size: 0.68rem; color: var(--text-mute); margin-bottom: 22px; }
.ck-scope .bar-graph { display: flex; flex-direction: column; gap: 14px; }
.ck-scope .bg-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ck-scope .bg-label { font-family: var(--f-b); font-weight: 300; font-size: clamp(0.58rem,1vw,0.66rem); color: var(--text-mid); width: clamp(50px,8vw,72px); flex-shrink: 0; text-align: right; }
.ck-scope .bg-track { flex: 1; height: 8px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; min-width: 0; }
.ck-scope .bg-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-lt), var(--gold)); width: 0%; transition: width 1.3s cubic-bezier(0.34,1.2,0.64,1); }
.ck-scope .bg-val { font-family: var(--f-b); font-weight: 400; font-size: clamp(0.58rem,1vw,0.64rem); color: var(--bark); min-width: 56px; white-space: nowrap; }
.ck-scope .chart-canvas-wrap { position: relative; height: 170px; width: 100%; overflow: hidden; }
.ck-scope canvas.line-chart { display: block; width: 100%!important; height: 100%!important; }

/* ═══════════════════════════════════
   WHY GRID
═══════════════════════════════════ */
.ck-scope .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 52px; }
.ck-scope .wc { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh); background: var(--sur); border: 1px solid var(--line); transition: box-shadow 0.32s, transform 0.32s; }
.ck-scope .wc:hover { box-shadow: var(--sh2); transform: translateY(-4px); }
.ck-scope .wc-img { width: 100%; height: 204px; object-fit: cover; display: block; border-radius: var(--r) var(--r) 0 0; transition: transform 0.58s; }
.ck-scope .wc:hover .wc-img { transform: scale(1.04); }
.ck-scope .wc-body { padding: 22px 24px 26px; }
.ck-scope .wc-num { font-family: var(--f-b); font-weight: 300; font-size: 0.50rem; letter-spacing: 0.34em; color: var(--gold); margin-bottom: 9px; display: block; text-transform: uppercase; }
.ck-scope .wc-t { font-family: var(--f-d); font-size: 1.02rem; font-weight: 400; color: var(--bark); margin-bottom: 7px; line-height: 1.22; }
.ck-scope .wc-b { font-family: var(--f-b); font-weight: 300; font-size: 0.74rem; line-height: 1.72; color: var(--text-soft); }

/* ═══════════════════════════════════
   PROCESS TIMELINE
═══════════════════════════════════ */
.ck-scope .tl-section { padding: clamp(12px,9vw,12px) 0; }
.ck-scope .tl-track { margin-top: 64px; position: relative; }
.ck-scope .tl-track::before { content: ''; position: absolute; top: clamp(20px,2.5vw,27px); left: clamp(20px,2.5vw,27px); right: clamp(20px,2.5vw,27px); height: 1px; background: var(--line-md); z-index: 0; }
.ck-scope .tl-progress-fill { position: absolute; top: clamp(20px,2.5vw,27px); left: clamp(20px,2.5vw,27px); height: 1px; background: var(--gold); z-index: 1; width: 0%; transition: width 0.5s ease; }
.ck-scope .tl-steps-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; position: relative; z-index: 2; }
.ck-scope .tl-step-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; padding: 0 4px; background: none; border: none; transition: none; }
.ck-scope .tl-step-circle { width: clamp(40px,4vw,52px); height: clamp(40px,4vw,52px); border-radius: 50%; background: var(--sur); border: 1px solid var(--line-md); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh); transition: all 0.35s; flex-shrink: 0; }
.ck-scope .tl-step-btn.active .tl-step-circle,
.ck-scope .tl-step-btn:hover .tl-step-circle { background: var(--bark); border-color: var(--bark); box-shadow: 0 4px 18px rgba(28,22,20,0.22); }
.ck-scope .tl-step-circle-n { font-family: var(--f-b); font-weight: 300; font-size: 0.62rem; letter-spacing: 0.10em; color: var(--gold); transition: color 0.3s; }
.ck-scope .tl-step-btn.active .tl-step-circle-n,
.ck-scope .tl-step-btn:hover .tl-step-circle-n { color: var(--sur); }
.ck-scope .tl-step-label { font-family: var(--f-b); font-weight: 400; font-size: clamp(0.62rem,0.88vw,0.76rem); color: var(--text-mid); text-align: center; line-height: 1.3; transition: color 0.3s; }
.ck-scope .tl-step-btn.active .tl-step-label { color: var(--gold); }
.ck-scope .tl-step-week { font-family: var(--f-b); font-weight: 300; font-size: 0.56rem; color: var(--text-mute); letter-spacing: 0.10em; text-align: center; }
.ck-scope .tl-panel-wrap { margin-top: 34px; }
.ck-scope .tl-panel { display: none; background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px,3.5vw,50px); box-shadow: var(--sh2); animation: ck-tlPanelIn 0.38s ease both; }
.ck-scope .tl-panel.active { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,4vw,56px); align-items: center; }
@keyframes ck-tlPanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ck-scope .tl-panel-phase { font-family: var(--f-b); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; display: block; }
.ck-scope .tl-panel-t { font-family: var(--f-d); font-size: clamp(1.6rem,2.4vw,2.2rem); font-weight: 400; color: var(--bark); line-height: 1.10; margin-bottom: 14px; }
.ck-scope .tl-panel-dur { display: inline-flex; align-items: center; background: var(--gold-pale); border: 1px solid var(--gold-pale2); border-radius: 3px; padding: 5px 14px; margin-bottom: 18px; }
.ck-scope .tl-panel-dur span { font-family: var(--f-b); font-weight: 400; font-size: 0.58rem; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold); }
.ck-scope .tl-panel-b { font-family: var(--f-b); font-weight: 300; font-size: 0.84rem; line-height: 1.88; color: var(--text-soft); }
.ck-scope .tl-panel-img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; }
.ck-scope .tl-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-scope .tl-mobile { display: none; margin-top: 44px; flex-direction: column; gap: 0; }
.ck-scope .tl-mob-item { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 10px; background: var(--sur); }
.ck-scope .tl-mob-hdr { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; background: var(--sur); border: none; width: 100%; text-align: left; transition: background 0.22s; }
.ck-scope .tl-mob-hdr:hover { background: var(--gold-pale); }
.ck-scope .tl-mob-item.open .tl-mob-hdr { background: var(--sur); border-left: 2px solid var(--gold); }
.ck-scope .tl-mob-num { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--f-b); font-size: 0.60rem; font-weight: 300; color: var(--gold); transition: all 0.3s; }
.ck-scope .tl-mob-item.open .tl-mob-num { background: var(--bark); border-color: var(--bark); color: var(--sur); }
.ck-scope .tl-mob-title-wrap { flex: 1; }
.ck-scope .tl-mob-phase { font-family: var(--f-b); font-weight: 400; font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 2px; }
.ck-scope .tl-mob-t { font-family: var(--f-d); font-size: 1.05rem; font-weight: 400; color: var(--bark); }
.ck-scope .tl-mob-week { font-family: var(--f-b); font-weight: 300; font-size: 0.60rem; color: var(--text-mute); flex-shrink: 0; padding-right: 4px; }
.ck-scope .tl-mob-icon { color: var(--gold); font-size: 1.1rem; font-weight: 300; transition: transform 0.3s; flex-shrink: 0; }
.ck-scope .tl-mob-item.open .tl-mob-icon { transform: rotate(45deg); }
.ck-scope .tl-mob-body { max-height: 0; overflow: hidden; transition: max-height 0.38s ease, padding 0.38s ease; padding: 0 22px; }
.ck-scope .tl-mob-item.open .tl-mob-body { max-height: 300px; padding: 0 22px 22px; }
.ck-scope .tl-mob-b { font-family: var(--f-b); font-weight: 300; font-size: 0.78rem; line-height: 1.88; color: var(--text-soft); }
@media (max-width: 900px) {
  .ck-scope .tl-track { display: none; }
  .ck-scope .tl-mobile { display: flex; }
  .ck-scope .tl-panel.active { grid-template-columns: 1fr; }
  .ck-scope .tl-panel-img { display: none; }
}

/* ═══════════════════════════════════
   FORBES / QUOTE BANNER
═══════════════════════════════════ */
.ck-scope .forbes-banner {
  background: var(--bark); border-radius: var(--r);
  padding: clamp(28px,4vw,54px);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(20px,4vw,48px); align-items: center;
  position: relative; overflow: hidden; margin-top: 40px;
}
.ck-scope .forbes-banner::before { content: ''; position: absolute; top: -40%; right: -8%; width: 360px; height: 360px; border-radius: 50%; background: rgba(168,124,90,0.08); pointer-events: none; }
.ck-scope .fb-mark { font-family: var(--f-d); font-size: clamp(2rem,4vw,3.2rem); font-weight: 400; color: var(--gold-lt); border-right: 1px solid rgba(253,250,245,0.10); padding-right: clamp(20px,4vw,48px); }
.ck-scope .fb-q { font-family: var(--f-d); font-size: clamp(1rem,1.7vw,1.4rem); font-weight: 400; color: rgba(253,250,245,0.90); line-height: 1.42; margin-bottom: 9px; }
.ck-scope .fb-sub { font-family: var(--f-b); font-weight: 300; font-size: 0.74rem; color: rgba(253,250,245,0.36); line-height: 1.78; margin-bottom: 18px; }
.ck-scope .fb-cta { display: inline-block; font-family: var(--f-b); font-weight: 400; font-size: 0.60rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(253,250,245,0.52); border: 1px solid rgba(253,250,245,0.14); padding: 9px 18px; text-decoration: none; border-radius: var(--r-xs); transition: all 0.26s; }
.ck-scope .fb-cta:hover { border-color: var(--gold-lt); color: var(--gold-lt); }
.ck-scope .fb-badge { display: flex; flex-direction: column; align-items: center; gap: 7px; background: rgba(253,250,245,0.04); border: 1px solid rgba(253,250,245,0.08); border-radius: var(--r-sm); padding: 18px 20px; }
.ck-scope .fb-badge svg { width: 26px; height: 26px; stroke: var(--gold-lt); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.ck-scope .fb-badge-t { font-family: var(--f-b); font-weight: 300; font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(253,250,245,0.38); text-align: center; }

/* ═══════════════════════════════════
   SERVICES
═══════════════════════════════════ */
.ck-scope .svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 52px; }
.ck-scope .svc-card { border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 4/3; box-shadow: var(--sh2); transition: transform 0.32s; }
.ck-scope .svc-card:hover { transform: translateY(-5px); }
.ck-scope .svc-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.58s; }
.ck-scope .svc-card:hover img { transform: scale(1.05); }
.ck-scope .svc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,22,20,0.94) 0%, rgba(28,22,20,0.18) 62%, transparent 100%); }
.ck-scope .svc-chip { position: absolute; top: 14px; right: 14px; background: rgba(168,124,90,0.90); color: var(--sur); font-family: var(--f-b); font-weight: 400; font-size: 0.50rem; letter-spacing: 0.20em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-xs); }
.ck-scope .svc-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 24px 26px; }
.ck-scope .svc-t { font-family: var(--f-d); font-size: 1.1rem; font-weight: 400; color: #fff; margin-bottom: 7px; }
.ck-scope .svc-b { font-family: var(--f-b); font-weight: 300; font-size: 0.74rem; line-height: 1.72; color: rgba(253,250,245,0.58); }

/* ═══════════════════════════════════
   EXPERIENCE CENTER
═══════════════════════════════════ */
.ck-scope .exp-banner { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh2); margin-top: 52px; }
@media (max-width: 1100px) {
  .ck-scope .exp-banner { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .ck-scope .exp-media { order: 1; min-height: 280px; }
  .ck-scope .exp-content { order: 2; }
}
.ck-scope .exp-content { padding: clamp(28px,4vw,54px); background: var(--sur); display: flex; flex-direction: column; justify-content: center; }
.ck-scope .exp-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.ck-scope .exp-chip span { font-family: var(--f-b); font-weight: 400; font-size: 0.54rem; letter-spacing: 0.30em; text-transform: uppercase; color: var(--gold); }
.ck-scope .exp-t { font-family: var(--f-d); font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight: 400; color: var(--bark); margin-bottom: 12px; line-height: 1.16; }
.ck-scope .exp-b { font-family: var(--f-b); font-weight: 300; font-size: 0.80rem; line-height: 1.88; color: var(--text-mid); margin-bottom: 26px; max-width: 40ch; }
.ck-scope .exp-rows { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; }
.ck-scope .exp-r { display: flex; gap: 11px; align-items: flex-start; }
.ck-scope .exp-r-ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ck-scope .exp-r-ico svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-scope .exp-r-t { font-family: var(--f-b); font-weight: 300; font-size: 0.78rem; color: var(--text-mid); line-height: 1.55; }
.ck-scope .exp-media { position: relative; overflow: hidden; min-height: 360px; }
.ck-scope .exp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════
   LEAD MAGNET
═══════════════════════════════════ */
.ck-scope .magnet-link { display: block; text-decoration: none; cursor: pointer; }
.ck-scope .magnet-card {
  background: var(--bark); border-radius: var(--r);
  padding: clamp(36px,5vw,68px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px,4vw,60px); align-items: center;
  box-shadow: var(--sh2); position: relative; overflow: hidden; transition: transform 0.3s;
}
.ck-scope .magnet-card:hover { transform: translateY(-2px); }
.ck-scope .magnet-card::before { content: ''; position: absolute; top: -30%; right: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(168,124,90,0.08); pointer-events: none; }
.ck-scope .mag-t { font-family: var(--f-d); font-size: clamp(1.5rem,2.3vw,2.0rem); font-weight: 400; color: rgba(253,250,245,0.96); margin-bottom: 12px; line-height: 1.14; position: relative; z-index: 1; }
.ck-scope .mag-t em { font-style: normal; font-weight: 400; color: var(--gold-lt); }
.ck-scope .mag-b { font-family: var(--f-b); font-weight: 300; font-size: 0.80rem; line-height: 1.88; color: rgba(253,250,245,0.38); max-width: 44ch; position: relative; z-index: 1; }
.ck-scope .mag-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ck-scope .mag-cta-note { font-family: var(--f-b); font-weight: 300; font-size: 0.66rem; color: rgba(253,250,245,0.32); letter-spacing: 0.06em; margin-top: 4px; }

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
.ck-scope .faq-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 52px; box-shadow: var(--sh); }
.ck-scope .fi { border-bottom: 1px solid var(--line); }
.ck-scope .fi:last-child { border-bottom: none; }
.ck-scope .fi-q { padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: var(--sur); border: none; width: 100%; text-align: left; transition: background 0.22s; gap: 16px; }
.ck-scope .fi-q:hover { background: var(--gold-pale); }
.ck-scope .fi-qt { font-family: var(--f-b); font-weight: 400; font-size: 0.86rem; color: var(--bark); }
.ck-scope .fi-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-pale); border: 1px solid var(--gold-pale2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); font-size: 1.1rem; font-weight: 300; transition: transform 0.3s, background 0.22s; }
.ck-scope .fi.open .fi-ico { transform: rotate(45deg); background: rgba(168,124,90,0.16); }
.ck-scope .fi-a { max-height: 0; overflow: hidden; transition: max-height 0.38s ease, padding 0.38s ease; padding: 0 26px; }
.ck-scope .fi.open .fi-a { max-height: 300px; padding: 0 26px 20px; }
.ck-scope .fi-at { font-family: var(--f-b); font-weight: 300; font-size: 0.80rem; color: var(--text-soft); line-height: 1.92; }

/* ═══════════════════════════════════
   FINAL CTA
═══════════════════════════════════ */
.ck-scope .final-cta-wrap {
  background: var(--bark); border-radius: var(--r);
  padding: clamp(52px,7vw,100px) clamp(28px,5vw,88px);
  text-align: center; position: relative; overflow: hidden;
}
.ck-scope .final-cta-wrap::before { content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; border-radius: 50%; background: rgba(168,124,90,0.10); pointer-events: none; }
.ck-scope .final-cta-wrap::after { content: 'C'; position: absolute; top: -0.05em; right: -0.06em; font-family: var(--f-d); font-size: min(38vw,500px); font-weight: 400; color: rgba(253,250,245,0.022); line-height: 1; pointer-events: none; user-select: none; }
.ck-scope .final-cta-t { font-family: var(--f-d); font-size: clamp(2.0rem,4vw,3.6rem); font-weight: 400; color: rgba(253,250,245,0.96); margin-bottom: 14px; position: relative; z-index: 1; line-height: 1.08; }
.ck-scope .final-cta-t em { font-style: normal; font-weight: 400; color: var(--gold-lt); }
.ck-scope .final-cta-s { font-family: var(--f-b); font-weight: 300; font-size: 0.84rem; color: rgba(253,250,245,0.38); max-width: 46ch; margin: 0 auto 42px; position: relative; z-index: 1; line-height: 1.92; }
.ck-scope .final-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ═══════════════════════════════════
   GLOBAL RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1100px) {
  .ck-scope .ba-text-row, .ck-scope .exp-banner, .ck-scope .magnet-card, .ck-scope .forbes-banner { grid-template-columns: 1fr; }
  .ck-scope .fb-mark { border-right: none; border-bottom: 1px solid rgba(253,250,245,0.09); padding-right: 0; padding-bottom: 22px; }
  .ck-scope .market-grid, .ck-scope .why-grid { grid-template-columns: 1fr 1fr; }
  .ck-scope .market-stats { grid-template-columns: repeat(2,1fr); }
  .ck-scope .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .ck-scope .why-grid { grid-template-columns: 1fr; }
  .ck-scope .svc-grid { grid-template-columns: 1fr; }
  .ck-scope .magnet-card { grid-template-columns: 1fr; }
  .ck-scope .market-grid { grid-template-columns: 1fr; }
  .ck-scope .exp-banner { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .ck-scope .exp-media { order: 1; min-height: 260px; height: 260px; }
  .ck-scope .exp-content { order: 2; }
  .ck-scope .roi-inner-grid { grid-template-columns: 1fr; }
  .ck-scope .cat-pods { padding-top: 0; }
  .ck-scope .cat-amenities { padding-top: 0; }
  .ck-footer-main > div { text-align: left; }
  .ck-footer-links { align-items: flex-start; }
}
@media (max-width: 540px) {
  .ck-scope .hero-btns { flex-direction: column; align-items: flex-start; }
  .ck-scope .final-cta-btns { flex-direction: column; align-items: center; }
  .ck-scope .cr-metrics { grid-template-columns: 1fr 1fr; }
  .ck-scope .forbes-banner { grid-template-columns: 1fr; text-align: center; }
  .ck-scope .fb-badge { display: none; }
}

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
.ck-header {
  background: var(--sur, #FDFAF5); border-bottom: 1px solid rgba(28,22,20,0.08);
  padding: 0 clamp(20px,4.5vw,88px);
  display: flex; align-items: center; justify-content: center;
  height: 80px; position: relative;
}
.ck-header-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ck-header-logo img { height: 42px; width: auto; display: block; }
.ck-header-logo-text { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; color: #1C1614; letter-spacing: 0.01em; }
.ck-header-tagline { font-family: 'Urbanist', sans-serif; font-size: 0.50rem; font-weight: 300; letter-spacing: 0.44em; text-transform: uppercase; color: #A87C5A; display: block; margin-top: 3px; }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.ck-footer { background: #1C1614; color: rgba(253,250,245,0.68); font-family: 'Urbanist', sans-serif; font-weight: 300; }
.ck-footer-main {
  max-width: 1600px; margin: 0 auto;
  padding: clamp(52px,7vw,100px) clamp(20px,4.5vw,88px) clamp(36px,4vw,56px);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px,4vw,60px);
}
.ck-footer-brand-name { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 400; color: rgba(253,250,245,0.96); margin-bottom: 8px; }
.ck-footer-brand-tag { font-family: 'Urbanist', sans-serif; font-size: 0.50rem; font-weight: 300; letter-spacing: 0.44em; text-transform: uppercase; color: #C8B496; display: block; margin-bottom: 20px; }
.ck-footer-desc { font-size: 0.76rem; line-height: 1.88; color: rgba(253,250,245,0.34); max-width: 34ch; margin-bottom: 26px; }
.ck-footer-social { display: flex; gap: 10px; }
.ck-footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(253,250,245,0.10); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: border-color 0.22s, background 0.22s; }
.ck-footer-social a:hover { border-color: #C8B496; background: rgba(200,180,150,0.08); }
.ck-footer-social a svg { width: 15px; height: 15px; stroke: rgba(253,250,245,0.44); fill: none; stroke-width: 1.5; transition: stroke 0.22s; }
.ck-footer-social a:hover svg { stroke: #C8B496; }
.ck-footer-col-title { font-family: 'Urbanist', sans-serif; font-size: 0.52rem; font-weight: 400; letter-spacing: 0.40em; text-transform: uppercase; color: #A87C5A; margin-bottom: 20px; display: block; }
.ck-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ck-footer-links a { font-size: 0.78rem; color: rgba(253,250,245,0.36); text-decoration: none; transition: color 0.22s; letter-spacing: 0.02em; }
.ck-footer-links a:hover { color: rgba(253,250,245,0.88); }
.ck-footer-contact { display: flex; flex-direction: column; gap: 12px; }
.ck-footer-contact-item { display: flex; gap: 11px; align-items: flex-start; }
.ck-footer-contact-item svg { width: 14px; height: 14px; stroke: #A87C5A; fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 3px; }
.ck-footer-contact-item span { font-size: 0.76rem; color: rgba(253,250,245,0.36); line-height: 1.68; }
.ck-footer-bar { border-top: 1px solid rgba(253,250,245,0.07); padding: 22px clamp(20px,4.5vw,88px); max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ck-footer-copy { font-size: 0.64rem; color: rgba(253,250,245,0.22); letter-spacing: 0.06em; font-weight: 300; }
.ck-footer-legal { display: flex; gap: 22px; }
.ck-footer-legal a { font-size: 0.62rem; color: rgba(253,250,245,0.20); text-decoration: none; letter-spacing: 0.06em; transition: color 0.22s; font-weight: 300; }
.ck-footer-legal a:hover { color: rgba(253,250,245,0.60); }
@media (max-width: 900px) { .ck-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) {
  .ck-footer-main { grid-template-columns: 1fr; }
  .ck-footer-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   ROI SECTION ADDITIONS
   Paste these rules at the VERY END of your existing style.css.
   They add new classes used by the updated ROI HTML section.
   No existing rules are changed.
═══════════════════════════════════════════════════════════════ */

/* ── ROI grid: equal-height columns ── */
.ck-scope .roi-inner-grid {
  align-items: stretch;
}

/* ── Calculator shell: flex column so result panel sticks to bottom ── */
.ck-scope .calc-shell {
  display: flex;
  flex-direction: column;
}
.ck-scope .calc-inputs {
  flex: 1;
  padding-bottom: 28px;
}

/* ── Investment field — gold-tinted highlight box ── */
.ck-scope .ci-row-invest {
  background: var(--gold-pale);
  border: 1px solid var(--gold-pale2);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.ck-scope .ci-row-invest .ci-label {
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-scope .ci-row-invest .ci-label::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  display: inline-block;
}
.ck-scope .ci-row-invest .ci-in {
  background: var(--sur);
  border-color: rgba(168,124,90,0.22);
}
.ck-scope .ci-row-invest .ci-in:focus { border-color: var(--gold); }

/* Total investment display line */
.ck-scope .ci-total-line {
  font-family: var(--f-b);
  font-weight: 300;
  font-size: 0.68rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  margin-top: 8px;
}
.ck-scope .ci-total-line strong {
  color: var(--gold);
  font-weight: 400;
}

/* Thin divider inside calculator */
.ck-scope .calc-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* ── Result panel — dark gradient, attached to bottom of calc-shell ── */
.ck-scope .calc-result-panel {
  background: linear-gradient(140deg, var(--bark) 0%, #2C1E10 100%);
  padding: 28px 34px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ck-scope .calc-result-panel::before {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(168,124,90,0.09);
  pointer-events: none;
}

/* Monthly headline */
.ck-scope .cr-primary-label {
  font-family: var(--f-b);
  font-weight: 300; font-size: 0.56rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(253,250,245,0.44);
  display: block; margin-bottom: 6px;
}
.ck-scope .cr-primary-row {
  display: flex; align-items: baseline;
  gap: 10px; margin-bottom: 20px;
}
.ck-scope .cr-primary-num {
  font-family: var(--f-d);
  font-size: clamp(2.0rem, 3vw, 2.6rem);
  font-weight: 400; color: var(--sur);
  line-height: 1; letter-spacing: -0.02em;
}
.ck-scope .cr-primary-period {
  font-family: var(--f-b);
  font-weight: 300; font-size: 0.72rem;
  color: rgba(253,250,245,0.38); letter-spacing: 0.06em;
}

/* 2×2 metrics grid */
.ck-scope .cr-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(253,250,245,0.08);
  border-radius: 8px; overflow: hidden;
  position: relative; z-index: 1; margin-bottom: 16px;
}
.ck-scope .cr-metric {
  background: rgba(253,250,245,0.04);
  padding: 13px 14px; text-align: center;
  transition: background 0.2s;
}
.ck-scope .cr-metric:hover { background: rgba(253,250,245,0.07); }
.ck-scope .cr-metric-label {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(253,250,245,0.34); display: block; margin-bottom: 5px;
}
.ck-scope .cr-metric-value {
  font-family: var(--f-d); font-size: 1.0rem; font-weight: 400;
  color: rgba(253,250,245,0.92); display: block; letter-spacing: -0.01em;
}
.ck-scope .cr-metric-value.cr-highlight { color: var(--gold-lt); }

/* Break-even badge */
.ck-scope .cr-breakeven-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(168,124,90,0.26);
  border-radius: 8px;
  background: rgba(168,124,90,0.08);
  position: relative; z-index: 1;
}
.ck-scope .cr-be-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(168,124,90,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ck-scope .cr-be-icon svg {
  width: 14px; height: 14px;
  stroke: var(--gold-lt); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ck-scope .cr-be-label {
  font-family: var(--f-b); font-weight: 300; font-size: 0.52rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(253,250,245,0.38); display: block; margin-bottom: 2px;
}
.ck-scope .cr-be-val {
  font-family: var(--f-d); font-size: 1.05rem; font-weight: 400;
  color: var(--gold-lt); display: block;
}

/* ── Feature column — RIGHT side ── */
/* FIX: give header a darker bg so it contrasts against the light card */
.ck-scope .feat-col {
  display: flex; flex-direction: column;
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh2);
}
/* Header — darker than bg-deep to be visible */
.ck-scope .feat-col-head {
  background: var(--peat);              /* ← was bg-deep (blended), now dark brown */
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ck-scope .feat-col-head-t {
  font-family: var(--f-d); font-size: 1.15rem; font-weight: 400;
  color: var(--sur);                    /* white text on dark header */
  margin-bottom: 3px;
}
.ck-scope .feat-col-head-s {
  font-family: var(--f-b); font-weight: 300; font-size: 0.66rem;
  color: rgba(253,250,245,0.52); letter-spacing: 0.06em;
}

/* FIX: remove flex:1 from feat-item — was causing excessive whitespace.
   Items now size naturally to their content. Use flex-grow on body text instead. */
.ck-scope .feat-item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  transition: background 0.22s;
  /* NO flex:1 here — that was forcing items to fill all remaining space */
}
.ck-scope .feat-item:last-of-type { border-bottom: none; }
.ck-scope .feat-item:hover { background: var(--gold-pale); }

.ck-scope .feat-icon-wrap {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--gold-pale);
  border: 1px solid var(--gold-pale2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.22s, border-color 0.22s;
  margin-top: 2px;
}
.ck-scope .feat-item:hover .feat-icon-wrap {
  background: rgba(168,124,90,0.16);
  border-color: rgba(168,124,90,0.32);
}
.ck-scope .feat-icon-wrap svg {
  width: 19px; height: 19px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.ck-scope .feat-kicker {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 4px;
}
.ck-scope .feat-title {
  font-family: var(--f-d); font-size: 0.98rem; font-weight: 400;
  color: var(--bark); margin-bottom: 6px; line-height: 1.18;
}
.ck-scope .feat-body {
  font-family: var(--f-b); font-weight: 300; font-size: 0.74rem;
  line-height: 1.76; color: var(--text-soft);
}

/* Stat strip — darker bg for contrast */
.ck-scope .feat-stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  flex-shrink: 0;
  margin-top: auto;               /* pushes strip to bottom when col is taller than content */
}
.ck-scope .feat-stat {
  padding: 16px 12px; text-align: center;
  border-right: 1px solid var(--line);
}
.ck-scope .feat-stat:last-child { border-right: none; }
.ck-scope .feat-stat-n {
  font-family: var(--f-d); font-size: 1.35rem; font-weight: 400;
  color: var(--bark); display: block; line-height: 1;
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.ck-scope .feat-stat-l {
  font-family: var(--f-b); font-weight: 300; font-size: 0.50rem;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-mute); display: block;
}




/* ══ ROI VARIANT D — RESPONSIVE ══ */
@media (max-width: 1100px) {
  .ck-roi-d-inputs { grid-template-columns: 1fr 1fr !important; }
  .ck-roi-d-stats  { grid-template-columns: 1fr 1fr !important; }
  .ck-roi-d-feats  { grid-template-columns: 1fr 1fr !important; }
  .ck-roi-d-header { flex-direction: column !important; align-items: flex-start !important; }
  .ck-roi-d-live   { text-align: left !important; }
  .ck-roi-d-live div { justify-content: flex-start !important; }
}
@media (max-width: 768px) {
  .ck-roi-d-inp-cell  { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .ck-roi-d-inp-cell:nth-child(odd)  { border-right: 1px solid var(--line) !important; }
  .ck-roi-d-stat-cell { border-right: none !important; }
  .ck-roi-d-stat-cell:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .ck-roi-d-feat-cell { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .ck-roi-d-feat-cell:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .ck-roi-d-feat-cell:nth-last-child(-n+2) { border-bottom: none !important; }
  .ck-roi-d-live-num  { font-size: clamp(2.0rem, 8vw, 3.0rem) !important; }
}
@media (max-width: 480px) {
  .ck-roi-d-inputs { grid-template-columns: 1fr !important; }
  .ck-roi-d-feats  { grid-template-columns: 1fr !important; }
  .ck-roi-d-inp-cell:nth-child(odd)  { border-right: none !important; }
  .ck-roi-d-feat-cell:nth-child(odd) { border-right: none !important; }
  .ck-roi-d-feat-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line) !important; }
  .ck-roi-d-feat-cell:last-child { border-bottom: none !important; }
}



/* 1. Remove overflow:hidden from the card so the head can poke out */
.magnet-card {
    position: relative !important;
    overflow: visible !important; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. Stop the hover movement */
.magnet-link:hover .magnet-card, 
.magnet-link:hover {
    transform: none !important;
    top: 0 !important;
    transition: none !important;
}

/* 3. The Giraffe - This handles the clipping */
.giraffe-overlay {
    position: absolute !important;
    right: 0;
    bottom: 55px; 
    height: 150%; /* Taller than the box */
    width: auto;
    z-index: 10;
    pointer-events: none;
    
    /* This pushes the head UP out of the box */
    transform: translateY(10%);
    
    /* TRICK: This clips only the BOTTOM and RIGHT. 
       The -100% on top/left means "don't cut the head" */
    clip-path: inset(-100% 0% 0% -100%); 
}

/* 4. Ensure parent containers don't cut the head */
.ck-scope, .sec-deep, .wrap, .magnet-link {
    overflow: visible !important;
}

.mag-right {
    margin-right: 150px;
    position: relative;
    z-index: 11;
}


/* Mobile Specific Fix */
@media (max-width: 768px) {
    .giraffe-overlay {
        /* Your specific phone settings */
        bottom: 231px !important;
        height: 85% !important;
        
    }