/* ============================================================
   HomeRenewCT — shared landing/spoke page styles (funnel.css)
   Editorial aesthetic matching the main site: Fraunces + Manrope,
   cream/ink palette. Each page sets its own --accent in a <style> block.
   ============================================================ */

:root {
  --cream:        #f4efe6;
  --cream-2:      #ebe4d6;
  --cream-3:      #e0d6c2;
  --ink:          #1a1a1a;
  --ink-2:        #3a3835;
  --ink-mute:     #6e6a63;
  --rule:         #1a1a1a14;
  --rule-strong:  #1a1a1a26;

  /* Fallback accent; pages override in their own <style> */
  --accent:       oklch(64% 0.13 62);
  --accent-soft:  oklch(95% 0.035 70);
  --accent-ink:   oklch(40% 0.10 55);

  --maxw: 1180px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 400; }
h4 { font-size: 19px; font-weight: 500; }
em { font-style: italic; color: var(--accent); }
p { margin: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section-pad { padding: clamp(56px, 9vh, 104px) 0; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  display: inline-block;
}
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em; padding: 14px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.05); }
.btn-block { width: 100%; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-back {
  background: none; border: 0; color: var(--ink-mute); cursor: pointer;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; padding: 8px 4px;
}
.btn-back:hover { color: var(--ink); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--cream) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 21px;
  color: var(--ink); text-decoration: none; line-height: 1; white-space: nowrap; }
.logo .sep { display: inline-block; width: 1px; height: .5em; background: currentColor;
  opacity: .32; margin: 0 .4em 0 .55em; vertical-align: .06em; }
.logo .ct { font-style: normal; font-weight: 500; text-transform: uppercase; font-size: .30em;
  letter-spacing: .32em; vertical-align: .55em; opacity: .78; }
.topbar-call { text-decoration: none; color: var(--ink); text-align: right; line-height: 1.1; }
.topbar-call .label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-family: 'JetBrains Mono', monospace; }
.topbar-call .num { font-weight: 700; font-size: 16px; }

/* ---------- hero + form ---------- */
.hero { padding: clamp(40px, 7vh, 88px) 0 clamp(48px, 8vh, 96px); }
.hero-grid { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero-bg-ph { display: none; }  /* photo placeholder hidden until real photos exist */
.offer-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft);
  color: var(--accent-ink); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 13px; font-weight: 600;
  margin-bottom: 20px; }
.offer-badge .tag { background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; }
.hero-eyebrow { margin-bottom: 16px; }
.hero h1 { margin-bottom: 18px; }
.hero-sub { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 46ch; margin-bottom: 24px; }
.hero-points { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.ck { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.hero-trust { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-mute); }
.hero-trust .stars { color: oklch(65% 0.14 70); letter-spacing: 1px; }

/* form card */
.form-panel { position: relative; }
.form-card { background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: clamp(22px, 2.5vw, 32px); box-shadow: 0 24px 60px rgba(26,26,26,.09); position: relative; }
.form-card-head { margin-bottom: 16px; }
.fc-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; letter-spacing: -.01em; }
.fc-sub { color: var(--ink-mute); font-size: 14px; margin-top: 4px; }
.progress { margin-bottom: 22px; }
.progress-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); }
.progress-track { height: 4px; border-radius: 999px; background: var(--cream-2); overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; width: 25%; background: var(--accent); border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.2,1); }

.step { display: none; }
.step.active { display: block; animation: stepIn .35s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step-q { font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px; margin-bottom: 6px; }
.step-hint { color: var(--ink-mute); font-size: 13px; margin-bottom: 16px; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips.one-col { grid-template-columns: 1fr; }
.chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1px solid var(--rule-strong); border-radius: 9px; cursor: pointer; font-size: 14px;
  transition: border-color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--ink-mute); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .box { width: 18px; height: 18px; border: 1.5px solid var(--rule-strong); border-radius: 5px;
  flex-shrink: 0; position: relative; transition: all .15s ease; }
.chip.radio .box { border-radius: 50%; }
.chip input:checked ~ .box { background: var(--accent); border-color: var(--accent); }
.chip input:checked ~ .box::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chip-note { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }

.field { margin-bottom: 16px; }
.flabel { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-strong);
  border-radius: 9px; font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--ink);
  background: #fff; outline: none; transition: border-color .15s ease; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field-error { display: none; color: #b14545; font-size: 12.5px; margin-top: 7px; }
.field.invalid .field-error, .chips.invalid + .field-error, .invalid > .field-error { display: block; }

.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.form-nav .btn-block { margin-left: auto; }

.offer-reward { display: none; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px;
  background: var(--accent-soft); border-radius: 9px; font-size: 13.5px; color: var(--accent-ink); }
.offer-reward.show { display: flex; }
.offer-reward .rk { font-weight: 700; }

.fc-foot { margin-top: 16px; font-size: 12px; color: var(--ink-mute); text-align: center; }
.form-success { display: none; text-align: center; padding: 20px 8px; }
.form-success.show { display: block; animation: stepIn .4s ease; }
.success-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.form-success h3 { font-size: 26px; margin-bottom: 10px; }
.form-success p { color: var(--ink-2); font-size: 15px; max-width: 34ch; margin: 0 auto; }
.saved { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; }

/* ---------- trust strip ---------- */
.trust-strip { background: var(--ink); color: rgba(244,239,230,.85); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: center;
  padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; }
.trust-item .stars { color: oklch(72% 0.14 70); letter-spacing: 1px; }
.trust-item strong { color: var(--cream); }

/* ---------- section head ---------- */
.sec-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head .lede { margin-top: 14px; }

/* ---------- before/after ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ba-card { }
.ba-imgs { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; display: flex;
  border: 1px solid var(--rule); }
.ba-half { flex: 1; position: relative; background: var(--cream-2); display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.ba-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-half.after { background: var(--cream-3); }
.ba-label { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--cream);
  padding: 3px 8px; border-radius: 4px; }
.ba-label.r { left: auto; right: 10px; background: var(--accent); }
.ba-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); opacity: .65; padding: 8px; text-align: center; }
.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--cream); z-index: 2; }
.ba-cap { margin-top: 10px; font-size: 13px; color: var(--ink-mute); }

/* ---------- how it works ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.howstep .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 44px; color: var(--accent);
  line-height: 1; margin-bottom: 14px; }
.howstep h4 { margin-bottom: 8px; }
.howstep p { color: var(--ink-2); font-size: 14px; }

/* ---------- what's included ---------- */
.incl-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.incl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.incl-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.incl-aside { background: var(--cream-2); border-radius: 12px; padding: 28px; }
.incl-aside h3 { margin-bottom: 10px; }
.incl-aside p { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }

/* ---------- testimonials ---------- */
.tests { background: var(--cream-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tests-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.test { border-top: 1px solid var(--rule-strong); padding-top: 20px; }
.test .stars { color: oklch(65% 0.14 70); letter-spacing: 2px; font-size: 12px; }
.test blockquote { font-family: 'Fraunces', serif; font-weight: 300; font-size: 19px; line-height: 1.4;
  margin: 14px 0 18px; }
.test cite { font-style: normal; font-size: 13px; color: var(--ink-mute); display: flex; flex-direction: column; }
.test cite strong { color: var(--ink); font-weight: 600; }

/* ---------- faq ---------- */
.faq-wrap { max-width: 760px; }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; background: var(--accent); transition: transform .2s ease; }
.faq .pm::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq .pm::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq[open] .pm::after { transform: rotate(90deg); opacity: 0; }
.faq-body { padding: 0 0 18px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 68ch; }

/* ---------- final CTA ---------- */
.final-cta { background: var(--ink); color: var(--cream); text-align: center; }
.final-cta .offer-badge { background: rgba(244,239,230,.12); color: var(--cream); }
.final-cta h2 { color: var(--cream); margin: 18px 0 12px; }
.final-cta p { color: rgba(244,239,230,.8); max-width: 46ch; margin: 0 auto 26px; }
.final-cta em { color: oklch(80% 0.11 70); }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-line { margin-top: 22px; font-size: 13px; color: rgba(244,239,230,.6); }
.btn-line a { color: var(--cream); }

/* ---------- footer ---------- */
.foot { background: #141414; color: rgba(244,239,230,.7); padding: 48px 0 30px; }
.foot .logo { color: var(--cream); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid rgba(244,239,230,.12); }
.foot-contact { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: 14px; }
.foot-contact a { color: rgba(244,239,230,.85); text-decoration: none; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px;
  font-size: 12px; color: rgba(244,239,230,.5); }
.foot-bottom a { color: inherit; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: color-mix(in oklab, var(--cream) 94%, transparent); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--rule); }
.sc-offer { font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.sc-line { font-size: 12px; color: var(--ink-mute); }

/* ---------- related services ---------- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-card { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 20px 22px; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 15px; background: #fff;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.related-card .ra { color: var(--accent); transition: transform .2s ease; }
.related-card:hover .ra { transform: translateX(3px); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ba-grid, .steps-grid, .tests-grid { grid-template-columns: 1fr; gap: 20px; }
  .incl-wrap { grid-template-columns: 1fr; }
  .form-panel { order: -1; }  /* form first on mobile */
}
@media (max-width: 640px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 72px; }
  .topbar-call .label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }
}

/* ---------- accessibility: focus + skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.chip:focus-within{outline:2px solid var(--accent);outline-offset:2px}