/* ==========================================================
   Buy-to-Rent page — builds on home-lively.css + about-lively.css
   ========================================================== */

/* ---------- "We handle everything" flow ---------- */
.bt-program { padding: clamp(5rem, 10vw, 8rem) 0; background: var(--cp-sand); position: relative; overflow: hidden; }
.bt-program-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem; align-items: end; margin-bottom: 4rem; }
.bt-program-head .cp-heading { margin: 0 !important; }
.bt-program-head .cp-lead { margin: 0; }

.bt-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.bt-line { position: absolute; left: 6%; right: 6%; top: 2.4rem; height: 2px; background: rgba(18,26,20,.12); overflow: hidden; }
.bt-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cp-gold), var(--cp-green)); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--cp-ease) .3s; }
.bt-flow.is-in .bt-line::after { transform: scaleX(1); }
.bt-flow.cp-reveal { opacity: 1; transform: none; } /* container itself stays put; steps animate */

.bt-step { position: relative; text-align: center; padding: 0 .6rem; }
.bt-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 4.8rem; height: 4.8rem; margin: 0 auto 1.6rem; border-radius: 50%;
  background: #fff; color: var(--cp-ink); font-size: 1.7rem;
  box-shadow: 0 16px 34px -18px rgba(18,26,20,.5);
  transform: scale(.4); opacity: 0;
  transition: transform .9s var(--cp-ease), opacity .6s, background .4s, color .4s;
}
.bt-flow.is-in .bt-step-dot { transform: none; opacity: 1; }
.bt-flow.is-in .bt-step:nth-child(2) .bt-step-dot { transition-delay: .4s; }
.bt-flow.is-in .bt-step:nth-child(3) .bt-step-dot { transition-delay: .9s; }
.bt-flow.is-in .bt-step:nth-child(4) .bt-step-dot { transition-delay: 1.4s; }
.bt-flow.is-in .bt-step:nth-child(5) .bt-step-dot { transition-delay: 1.9s; }
.bt-step:hover .bt-step-dot { background: var(--cp-green); color: #fff; transform: translateY(-6px); }
.bt-step-dot small { position: absolute; top: -.3rem; right: -.3rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--cp-ink); color: var(--cp-gold-soft); font-size: .7rem; font-family: var(--cp-sans); }
.bt-step h4 { font-family: var(--cp-serif) !important; font-size: 1.6rem !important; font-weight: 500; margin: 0 0 .5rem; color: var(--cp-ink); }
.bt-step p { font-size: .88rem; line-height: 1.7; color: var(--cp-muted); margin: 0; font-weight: 300; }
.bt-step h4, .bt-step p { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--cp-ease); }
.bt-flow.is-in .bt-step h4, .bt-flow.is-in .bt-step p { opacity: 1; transform: none; }
.bt-flow.is-in .bt-step:nth-child(2) h4, .bt-flow.is-in .bt-step:nth-child(2) p { transition-delay: .5s; }
.bt-flow.is-in .bt-step:nth-child(3) h4, .bt-flow.is-in .bt-step:nth-child(3) p { transition-delay: 1s; }
.bt-flow.is-in .bt-step:nth-child(4) h4, .bt-flow.is-in .bt-step:nth-child(4) p { transition-delay: 1.5s; }
.bt-flow.is-in .bt-step:nth-child(5) h4, .bt-flow.is-in .bt-step:nth-child(5) p { transition-delay: 2s; }

.bt-payoff {
  position: relative; overflow: hidden; margin-top: 3.5rem;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  padding: 1.8rem 2.2rem; border-radius: 24px;
  background: var(--cp-ink); color: #fff;
}
.bt-payoff-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--cp-green); font-size: 1.6rem; flex-shrink: 0; animation: bt-pulse 2.6s ease-in-out infinite; }
@keyframes bt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(134,169,0,.5); } 50% { box-shadow: 0 0 0 14px rgba(134,169,0,0); } }
.bt-payoff p { margin: 0; flex: 1; min-width: 16rem; font-family: var(--cp-serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.4; }
.bt-payoff p em { color: var(--cp-gold-soft); }

/* ---------- Big statement ---------- */
.bt-quote { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
.bt-quote blockquote { margin: 0 auto; max-width: 56rem; font-family: var(--cp-serif); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.15; color: var(--cp-ink); }
.bt-quote blockquote em { color: var(--cp-gold); }
.bt-quote .bt-quote-mark { display: block; font-size: 5rem; line-height: .6; color: var(--cp-gold); opacity: .5; margin-bottom: 1rem; font-family: var(--cp-serif); }
.bt-quote-word { display: inline-block; opacity: .15; transition: opacity .5s ease; }
.bt-quote-word.is-lit { opacity: 1; }

/* ---------- Choose your investment ---------- */
.bt-choose { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.bt-choose .cp-apt { aspect-ratio: 3 / 3.6; }

@media (max-width: 991px) {
  .bt-program-head { grid-template-columns: 1fr; }
  .bt-flow { grid-template-columns: 1fr 1fr; row-gap: 2.8rem; }
  .bt-line { display: none; }
}
@media (max-width: 576px) {
  .bt-flow { grid-template-columns: 1fr; }
  .bt-step { display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem; text-align: left; align-items: start; }
  .bt-step-dot { grid-row: span 2; margin: 0; width: 3.8rem; height: 3.8rem; font-size: 1.4rem; }
  .bt-payoff { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-step-dot, .bt-step h4, .bt-step p { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bt-line::after { transform: none; transition: none; }
  .bt-quote-word { opacity: 1; }
  .bt-payoff-icon { animation: none; }
}