/* /renovation/ — Hearth & Home palette + page extras (before/after slider). Shared layout lives in /assets/css/demo.css. */
@font-face { font-family: "Outfit"; src: url(/assets/fonts/outfit-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
.rn-page {
  --pg-bg: #f4f1ec; --pg-ink: #1f2a24; --bg: #1a1a1a; --ink: #1f2a24;
  --bar-bg: #1f2a24; --bar-fg: #f4f1ec; --tag: #c9a35a;
  --btn-bg: #7f9b86; --btn-fg: #fff; --accent: #7f9b86; --card-bg: #fbf9f5;
  --order-bg: #1f2a24; --order-fg: #f4f1ec;
  --f-display: "Outfit", system-ui, sans-serif; --h-weight: 600;
}
.rn-page h1, .rn-page h2, .rn-page h3 { letter-spacing: -.03em; }
.rn-page .dm-bar__name { font-weight: 600; }
.rn-page .dm-bar .dm-btn { --btn-bg: #c9a35a; --btn-fg: #1f2a24; }
.rn-page .dm-kicker, .rn-page .dm-eyebrow { color: #5f7a67; }
.dm-on .rn-page .dm-stage { color: var(--pg-ink); }
.dm-on .rn-page .dm-stage::before { display: none; }
/* a soft vignette over the render so the cards sit nicely */
.dm-on .rn-page .dm-obj::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .28)); }
.dm-on .rn-page .dm-step h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.dm-on .rn-page .dm-step p { color: #43504a; font-size: 1.05rem; }
.dm-on .rn-page .dm-intro h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.dm-on .rn-page .dm-intro p:last-child, .dm-on .rn-page .dm-final p { color: #43504a; }
.dm-on .rn-page .dm-cue { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.dm-on .rn-page .dm-load { color: #fff; }

/* Before / after slider */
.rn-compare { background: #f4f1ec; }
.rn-slider { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .4); user-select: none; }
.rn-slider img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rn-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.rn-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; translate: -50% 0; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .35); pointer-events: none; }
.rn-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #1f2a24; font: 700 1.1rem var(--f-body); box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.rn-slider input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.rn-label { position: absolute; top: 16px; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .85); font: 500 .75rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.rn-label--b { left: 16px; } .rn-label--a { right: 16px; }

.rn-services { background: #fbf9f5; }
.rn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.rn-grid li { padding: 1.5rem; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .3); }
.rn-grid h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.rn-grid p { margin: 0; opacity: .75; }
.rn-quote { background: #fbf9f5; padding-top: 0; }
.rn-page .dm-order .dm-btn { --btn-bg: #c9a35a; --btn-fg: #1f2a24; }
@media (max-width: 900px) { .rn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rn-grid { grid-template-columns: minmax(0, 1fr); } .rn-slider { aspect-ratio: 4 / 3; } }