/* ==========================================================================
   Renuvo Capital — styles
   Brand: orange #F08C1E + warm grays (from Renuvo logo)
   ========================================================================== */

:root {
  --brand: #F08C1E;
  --brand-dark: #D2760E;
  --brand-tint: #FDF2E3;
  --ink: #23201C;
  --ink-soft: #57514A;
  --ink-faint: #8A837A;
  --bg: #FFFFFF;
  --bg-alt: #F8F6F2;
  --border: #E8E2D9;
  --error: #C0392B;
  --success: #1E9E5A;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(35, 32, 28, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  padding: .7rem 1.4rem; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-pill { border-radius: 999px; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-outline { background: #fff; color: var(--brand-dark); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-tint); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--brand-tint); }
.btn[disabled] { opacity: .6; cursor: wait; }

:focus-visible { outline: 3px solid rgba(240, 140, 30, .55); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: .65rem 1rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand img { display: block; width: 120px; }

.nav { display: none; gap: 1.4rem; margin-left: 1rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--brand-dark); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.header-phone { font-weight: 700; font-size: .95rem; color: var(--ink); white-space: nowrap; display: none; }
.signin-placeholder { color: var(--ink-soft); font-weight: 600; font-size: .95rem; cursor: default; white-space: nowrap; display: none; }

.nav-toggle {
  margin-left: auto; display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-phone, .signin-placeholder { display: inline; }
  .header-actions { margin-left: 1.5rem; }
}

/* mobile nav open state */
.site-header.nav-open .nav {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 1rem; margin-left: 0; box-shadow: var(--shadow);
}

/* mobile header (Rocket-style): hamburger left, logo dead-center, Apply now right.
   Equal flex zones on both sides keep the logo optically centered. */
@media (max-width: 899px) {
  .nav-toggle { order: -1; margin-left: 0; flex: 1; }
  .brand { flex: none; }
  .brand img { width: 104px; }
  .header-actions { flex: 1; justify-content: flex-end; margin-left: 0; min-width: 0; }
  .header-actions .btn { padding: .55rem 1rem; font-size: .9rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 4.5rem 1rem 4rem;
  text-align: center;
  background: #fff;
  --wheel: 1220px;  /* diameter of the photo ring (~30% tighter tile spacing) */
  --tile: 150px;    /* size of each photo tile */
  --speed: 230s;    /* seconds per full revolution (~30% slower) */
}
@media (min-width: 960px) {
  .hero { min-height: 780px; display: grid; place-items: end center; padding-bottom: 11rem; }
}
.hero-copy { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; }
.hero-eyebrow {
  color: var(--ink-soft); font-weight: 600; letter-spacing: .02em;
  font-size: 1.05rem; margin: 0 0 .5rem;
}
.hero-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.trust-bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center;
  color: var(--ink-soft); font-size: .95rem; font-weight: 600;
}
.trust-bullets li { display: flex; align-items: center; gap: .45rem; }
.trust-bullets li::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: var(--brand);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3" d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="3" d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}

/* spinning half-wheel (Rocket Mortgage-style) — ring center sits at the hero's
   bottom edge, so only the top arc is visible. Tiles ride the ring and rotate
   WITH it (tangent to the circle), dissolving as they swing toward the copy.
   Shared mechanics here; visibility + fade line are set per breakpoint below. */
.hero-wheel { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wheel-spin {
  position: absolute; left: 50%; top: 100%; /* ring center at the hero's bottom edge: only the top arc shows */
  width: var(--wheel); height: var(--wheel);
  margin: calc(var(--wheel) / -2) 0 0 calc(var(--wheel) / -2);
  animation: wheel-rotate var(--speed) linear infinite;
}
.wheel-spot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--wheel) / -2));
}
.wheel-spot img {
  display: block;
  width: var(--tile); height: var(--tile); object-fit: cover;
  border-radius: 22px; box-shadow: 0 14px 34px rgba(35, 32, 28, .22);
}
@keyframes wheel-rotate { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .wheel-spin { animation: none; }
}

/* mobile: compact arc — small ring + small tiles (Rocket-style) parked in a band
   above the copy, so the whole hero (text + buttons) fits above the fold.
   Tiles dissolve out just above the copy block. */
@media (max-width: 959px) {
  .hero { --wheel: 880px; --tile: 78px; padding-top: 200px; padding-bottom: 2rem; }
  .wheel-spin { top: calc(80px + var(--wheel) / 2); } /* ring center pinned so the arc peak sits ~80px from the hero top */
  .hero-wheel {
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90px, transparent 195px);
    mask-image: linear-gradient(to bottom, #000 0, #000 90px, transparent 195px);
  }
  .hero-ctas .btn { padding: .9rem 1.3rem; font-size: 1rem; } /* keep both buttons on one row */
}

/* desktop: wide arc; dissolve completes just above the button row */
@media (min-width: 960px) {
  .hero-wheel {
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 74%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 74%);
  }
}

/* rotating headline line — the entire first line swaps as a block, so the
   static second line never shifts; nowrap + fluid font keeps it on one line */
.swap-word { display: block; white-space: nowrap; }
.hero-title-static { display: block; text-wrap: balance; }
@media (min-width: 960px) {
  .hero-title-static { white-space: nowrap; } /* keep "into capital for what's next." on one line */
}
.swap-text {
  display: inline-block;
  background: linear-gradient(transparent 64%, var(--brand-tint) 64%);
  transition: opacity .25s ease, transform .25s ease;
}
.swap-text.swap-out { opacity: 0; transform: translateY(12px); }

/* trust bar (below the fold) */
.trust-bar {
  background: var(--bg-alt); border-top: 1px solid var(--border);
  padding: 2rem 1rem 2.2rem;
  display: grid; gap: 1.4rem; justify-items: center; text-align: center;
}

/* ---------- Sections ---------- */
.section { padding: 3.5rem 1rem; max-width: 1100px; margin: 0 auto; }
.section-alt { background: var(--bg-alt); max-width: none; }
.section-alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.01em; margin: 0 0 .4rem; text-align: center; }
.section-sub { text-align: center; color: var(--ink-soft); margin: 0 auto 2.2rem; max-width: 560px; }
.section-alt .section-title, .section-alt .section-sub { text-align: left; max-width: none; }

/* product cards */
.card-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: .6rem;
  box-shadow: 0 2px 8px rgba(35,32,28,.04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card h3 { margin: 0; font-size: 1.25rem; }
.product-card p { margin: 0 0 .8rem; color: var(--ink-soft); flex: 1; }
.product-card .btn { align-self: flex-start; }
.product-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-tint); margin-bottom: .4rem;
}
.product-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* split / why us */
.split { display: grid; gap: 2rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.split p { color: var(--ink-soft); font-size: 1.05rem; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.check-list li {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; color: var(--ink-soft);
}
.check-list strong { color: var(--ink); }

/* steps */
.steps { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.section-alt .step-item { background: #fff; }
.step-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; margin-bottom: .8rem;
}
.step-item h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.step-item p { margin: 0; color: var(--ink-soft); }
.center { text-align: center; }

/* testimonial */
.testimonial { margin: 0 auto; max-width: 760px; text-align: center; }
.testimonial blockquote {
  margin: 0 0 1rem; font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4; font-weight: 500;
}
.testimonial figcaption { color: var(--ink-soft); font-weight: 600; }
.fine { font-size: .85rem; color: var(--ink-faint); font-weight: 400; }

/* faq */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: .8rem; }
.faq-list details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.faq-list summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-dark); flex: none; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { color: var(--ink-soft); margin: .8rem 0 .2rem; }

/* cta band */
.cta-band { background: var(--ink); color: #fff; text-align: center; padding: 3.5rem 1rem; }
.cta-band h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.cta-band p { margin: 0 auto 1.6rem; color: #CFC9C0; max-width: 480px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 2.5rem 1rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 1.8rem; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.2fr .8fr 2fr; } }
.footer-brand p { color: var(--ink-soft); font-size: .95rem; margin: .6rem 0 0; }
.footer-phone { font-weight: 700; color: var(--ink) !important; }
.footer-nav { display: grid; gap: .5rem; align-content: start; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.footer-nav a:hover { color: var(--brand-dark); }
.footer-legal { font-size: .8rem; color: var(--ink-faint); display: grid; gap: .6rem; }
.footer-legal p { margin: 0; }
.equal-housing { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink-soft); }
.equal-housing svg { width: 22px; height: 22px; fill: var(--ink-soft); }

/* ==========================================================================
   Funnel
   ========================================================================== */
.funnel-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(35, 32, 28, .55);
  display: grid; place-items: center; padding: 1rem;
}
.funnel-overlay[hidden] { display: none; }

.funnel-dialog {
  background: #fff; border-radius: 18px; width: 100%; max-width: 640px;
  max-height: 92vh; overflow-y: auto; padding: 1.2rem 1.4rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.funnel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.funnel-close {
  background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer;
  color: var(--ink-faint); padding: .2rem .5rem; border-radius: 8px;
}
.funnel-close:hover { color: var(--ink); background: var(--bg-alt); }

.funnel-progress { height: 6px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; }
.funnel-progress-bar { height: 100%; width: 14%; background: var(--brand); border-radius: 99px; transition: width .25s ease; }
.funnel-stepcount { font-size: .8rem; color: var(--ink-faint); margin: .4rem 0 1rem; }

.funnel-step { border: 0; margin: 0; padding: 0; }
.funnel-step legend {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 1.1rem; padding: 0;
}
.legend-hint { display: block; font-size: .85rem; font-weight: 500; color: var(--ink-faint); margin-top: .2rem; }

/* selectable cards */
.option-grid { display: grid; gap: .7rem; }
.option-grid-inline { grid-template-columns: repeat(3, 1fr); }
.option-card { position: relative; display: block; cursor: pointer; }
.option-card input {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.option-card span {
  display: block; padding: 1rem 1.1rem; border: 2px solid var(--border); border-radius: 12px;
  font-weight: 600; background: #fff; transition: border-color .12s ease, background .12s ease;
}
.option-card:hover span { border-color: var(--ink-faint); }
.option-card:has(input:checked) span,
.option-card.selected span {
  border-color: var(--brand); background: var(--brand-tint);
}
.option-card input:focus-visible + span { outline: 3px solid rgba(240, 140, 30, .55); outline-offset: 2px; }
.option-sm span { padding: .7rem .8rem; text-align: center; font-size: .92rem; }

/* fields */
.field { margin-bottom: 1rem; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label, .field-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  width: 100%; font: inherit; padding: .8rem 1rem;
  border: 2px solid var(--border); border-radius: 10px; background: #fff;
}
.field input:focus { outline: none; border-color: var(--brand); }
.field input.input-error, .option-grid.input-error .option-card span { border-color: var(--error); }

.currency-field { position: relative; }
.currency-field span {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-weight: 700;
}
.currency-field input { padding-left: 2rem !important; }

.soft-note {
  background: var(--brand-tint); border: 1px solid var(--brand); border-radius: 10px;
  padding: .8rem 1rem; font-size: .9rem; color: var(--ink-soft);
}

.consent { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-size: .82rem; color: var(--ink-soft); }
.consent input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }

.funnel-error {
  background: #FDECEA; border: 1px solid var(--error); color: var(--error);
  border-radius: 10px; padding: .7rem 1rem; font-size: .9rem; font-weight: 600;
  margin: 1rem 0 0;
}

.funnel-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.funnel-nav #funnel-next { margin-left: auto; }
.funnel-nav .btn { min-width: 120px; }

/* result screen */
.result-screen { text-align: center; padding: 1rem 0; }
.result-check {
  width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
  background: #E7F7EE; display: grid; place-items: center;
}
.result-check svg { width: 36px; height: 36px; fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.result-screen h2 { margin: 0 0 .6rem; font-size: 1.7rem; }
.result-screen p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 1rem; }
.result-next {
  list-style: none; margin: 0 auto 1.2rem; padding: 0; max-width: 460px;
  display: grid; gap: .6rem; text-align: left;
}
.result-next li {
  background: var(--bg-alt); border-radius: 10px; padding: .7rem 1rem;
  font-size: .92rem; color: var(--ink-soft);
}

/* honeypot — never visible to humans */
.hp-field {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* ---------- photo integration ---------- */
.card-thumb {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: 10px; margin-bottom: .4rem; display: block;
}
.split-photo {
  width: 100%; max-height: 340px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-top: 1.4rem; display: block;
}
.testimonial-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin: 0 auto .8rem; display: block; box-shadow: var(--shadow);
}
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("images/home_sunset_large_lawn.webp") center 30% / cover no-repeat;
  opacity: .25;
}
.cta-band > * { position: relative; z-index: 1; }