/* =============================================================
   DreamSpace Remodel — Redesign 2026 (top design layer)
   Loaded LAST. Overrides via specificity; existing files untouched.
   Sections: 0 fonts · 1 tokens · 2 base · 3 buttons · 4 hero
   5 trust bar · 6 sections/cards · 7 before-after · 8 multistep form
   9 motion/reveal · 10 sticky mobile bar · 11 responsive
   ============================================================= */

/* ---------- 0. Self-hosted fonts ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Fraunces-Variable-latin.woff2') format('woff2');
}

/* ---------- 1. Tokens ---------- */
:root {
  --rd-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rd-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --rd-ink: #1c1b17;
  --rd-ink-soft: #514e46;
  --rd-cream: #faf7f1;
  --rd-cream-2: #f2ece1;
  --rd-white: #ffffff;

  --rd-green: #4a6e1a;
  --rd-green-deep: #34500e;
  --rd-orange: #d97000;
  --rd-orange-deep: #b85c00;
  --rd-gold: #c79a22;

  --rd-line: rgba(28,27,23,.10);
  --rd-radius: 18px;
  --rd-radius-sm: 12px;
  --rd-shadow: 0 22px 60px -28px rgba(28,27,23,.45);
  --rd-shadow-sm: 0 10px 30px -18px rgba(28,27,23,.40);

  --fs-hero: clamp(2.7rem, 6.2vw, 5.2rem);
  --fs-h2: clamp(2rem, 4vw, 3.3rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.55rem);
  --rd-maxw: 1200px;
  --rd-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base typography polish ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--rd-sans); color: var(--rd-ink); background: var(--rd-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.section-header h2,
.services h2, .why-choose-modern h2, .process-modern h2,
.portfolio h2, .testimonials h2, .pricing-section .section-title,
.cta-modern .cta-title, .rd-section-title {
  font-family: var(--rd-display) !important;
  font-weight: 560 !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  color: var(--rd-ink) !important;
}
.section-header { margin-bottom: 2.6rem; }
.section-header::after {
  content: ""; display: block; width: 56px; height: 3px; margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--rd-green), var(--rd-orange)); border-radius: 3px;
}
.rd-eyebrow { display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--rd-orange); margin-bottom:.6rem; }

/* ---------- 3. Buttons ---------- */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--rd-sans); font-weight: 700; font-size: 1.02rem; line-height: 1;
  padding: 1.05rem 1.9rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .2s var(--rd-ease), box-shadow .2s var(--rd-ease), background .2s ease;
  will-change: transform;
}
.rd-btn-primary { background: var(--rd-orange); color: #fff; box-shadow: 0 14px 30px -12px rgba(217,112,0,.7); }
.rd-btn-primary:hover { background: var(--rd-orange-deep); transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(217,112,0,.8); }
.rd-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.rd-btn-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.rd-btn-green { background: var(--rd-green); color:#fff; box-shadow: 0 14px 30px -14px rgba(74,110,26,.7); }
.rd-btn-green:hover { background: var(--rd-green-deep); transform: translateY(-2px); }
.rd-btn:focus-visible { outline: 3px solid var(--rd-gold); outline-offset: 3px; }

/* ---------- 4. Hero ---------- */
.rd-hero.hero {
  min-height: 90vh; height: auto; padding: 7rem 0 4rem; background: #0e0d0b !important;
  align-items: center; margin-top: 0 !important; /* kill legacy mobile gap above hero */
}
.rd-hero .rd-hero-media, .rd-hero .hero-bg { position:absolute; inset:0; width:100%; height:100%; }
.rd-hero .hero-bg { object-fit: cover; z-index:1; }
.rd-hero .rd-hero-scrim {
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(14,13,11,.42) 0%, rgba(14,13,11,.18) 40%, rgba(14,13,11,.62) 100%),
    linear-gradient(100deg, rgba(14,13,11,.88) 0%, rgba(14,13,11,.66) 38%, rgba(14,13,11,.22) 68%, rgba(14,13,11,0) 100%);
}
/* Force legible hero text regardless of inherited .hero h1/.hero p rules from earlier CSS */
.rd-hero .rd-hero-title { color: #fff !important; }
.rd-hero .hero-dynamic-slot, .rd-hero .hero-dynamic-slot .rotating-word { color: #ffd9a3 !important; }
.rd-hero .rd-hero-eyebrow { color: #fbf7f0 !important; }
.rd-hero .rd-hero-eyebrow .stars { color: #ffc83d !important; }
.rd-hero .rd-hero-sub { color: #f6f1e9 !important; }
.rd-hero .rd-hero-reassure { color: #e9e2d5 !important; }
.rd-hero-inner { position: relative; z-index: 3; max-width: var(--rd-maxw); width:100%; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); color:#fff; text-align:left; }
.rd-hero-eyebrow { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-weight:600; font-size:.95rem; letter-spacing:.01em; color:#fbf7f0; margin-bottom:1.1rem; text-shadow: 0 1px 14px rgba(0,0,0,.65); }
.rd-hero-eyebrow .stars { color: #ffc83d; letter-spacing:.05em; }
.rd-hero-eyebrow .dot { opacity:.5; }
.rd-hero-title {
  font-family: var(--rd-display); font-weight: 540; font-size: var(--fs-hero);
  line-height: .98; letter-spacing: -.02em; margin: 0 0 1.1rem; max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.rd-hero-title .accent, .rd-hero .hero-dynamic-slot { color: #ffd9a3; font-style: italic; }
.rd-hero .hero-dynamic-slot { display:inline-block; position:relative; min-width: 5.5ch; height: 1em; vertical-align: baseline; }
.rd-hero .hero-dynamic-slot .rotating-word { position:absolute; left:0; top:0; white-space:nowrap; transition: opacity .35s ease; }
.rd-hero .hero-dynamic-slot .rotating-word.fade-out { opacity: 0; }
.rd-hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.55; color:#f6f1e9; max-width: 46ch; margin:0 0 1.9rem; text-shadow: 0 1px 16px rgba(0,0,0,.6); }
.rd-hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.rd-hero-reassure { margin-top:1.1rem; font-size:.92rem; color:#e4ddd0; display:flex; align-items:center; gap:.5rem; }
.rd-hero-reassure::before { content:"✓"; color:#9fd356; font-weight:800; }
.rd-scroll-cue {
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; text-decoration:none;
  animation: rd-bounce 2s infinite;
}
@keyframes rd-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }
.rd-hero .hero-trust, .rd-hero .hero-title-old { display: none !important; }

/* Landing-page image heroes: ensure legible white text (fixes a pre-existing
   global h1{color} override) + premium display font. Scoped to known photo heroes. */
.kitchen-hero, .kitchen-hero h1, .kitchen-hero h2, .kitchen-hero p, .kitchen-hero .hero-subtitle, .kitchen-hero .hero-trust, .kitchen-hero li,
.bath-hero, .bath-hero h1, .bath-hero h2, .bath-hero p,
.portfolio-hero, .portfolio-hero h1, .portfolio-hero h2, .portfolio-hero p,
.service-hero, .service-hero h1, .service-hero h2, .service-hero p {
  color: #fff !important;
}
.kitchen-hero h1, .bath-hero h1, .portfolio-hero h1, .service-hero h1 {
  font-family: var(--rd-display) !important; font-weight: 560 !important; letter-spacing: -.015em;
  text-shadow: 0 2px 26px rgba(0,0,0,.55) !important;
}
.kitchen-hero .hero-subtitle, .bath-hero p, .portfolio-hero p, .service-hero p { text-shadow: 0 1px 16px rgba(0,0,0,.5) !important; }
/* keep the brand-orange accent word visible on the kitchen hero */
.kitchen-hero h1 span { color: #ffb24d !important; }

/* ---------- 5. Above-the-fold trust strip ---------- */
.rd-trustbar { background: var(--rd-ink); color:#f3efe7; }
.rd-trustbar-inner { max-width: var(--rd-maxw); margin:0 auto; padding: 1.05rem clamp(1rem,4vw,3rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 1.1rem 2.2rem; }
.rd-trust-item { display:flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:500; color:#efe9df; }
.rd-trust-item svg { width:22px; height:22px; color: var(--rd-gold); flex:0 0 auto; }
.rd-trust-item strong { font-weight:700; color:#fff; }
.rd-trust-stars { color:#ffc83d; letter-spacing:.06em; }
.rd-trust-sep { width:1px; height:22px; background: rgba(255,255,255,.18); }

/* ---------- 6. Sections & bento cards ---------- */
.services, .why-choose-modern, .process-modern, .portfolio, .testimonials { background: var(--rd-cream); }
.testimonials, .why-choose-modern { background: var(--rd-cream-2); }
.services-container, .why-choose-container, .process-container, .portfolio-container, .testimonials-container, .rd-container { max-width: var(--rd-maxw); margin:0 auto; padding-left: clamp(1rem,4vw,2rem); padding-right: clamp(1rem,4vw,2rem); }

.service-card, .project-card, .feature-card, .testimonial-card {
  border-radius: var(--rd-radius) !important;
  border: 1px solid var(--rd-line) !important;
  background: var(--rd-white) !important;
  box-shadow: var(--rd-shadow-sm) !important;
  overflow: hidden;
  transition: transform .35s var(--rd-ease), box-shadow .35s var(--rd-ease) !important;
}
.service-card:hover, .project-card:hover, .feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--rd-shadow) !important;
}
.service-image, .project-images { overflow:hidden; }
.service-img, .project-img { transition: transform .6s var(--rd-ease) !important; }
.service-card:hover .service-img, .project-card:hover .project-img { transform: scale(1.07); }
.service-content h3, .project-content h3 { font-family: var(--rd-display) !important; font-weight: 560 !important; letter-spacing:-.01em; }
.service-link { color: var(--rd-green) !important; font-weight:700 !important; }

/* Dark luxury band wrapper for the CTA section */
.cta-modern { background: linear-gradient(135deg, #20301a 0%, #14110c 100%) !important; }

/* Map facade (click to load) */
.rd-map-facade { position:relative; width:100%; height:450px; border-radius: var(--rd-radius); overflow:hidden; cursor:pointer; background:
   linear-gradient(135deg, rgba(74,110,26,.92), rgba(20,17,12,.92)); display:flex; align-items:center; justify-content:center; text-align:center; }
.rd-map-facade::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 22px 22px; opacity:.5; }
.rd-map-facade .rd-map-cta { position:relative; z-index:2; color:#fff; }
.rd-map-facade .rd-map-cta .pin { font-size:2.4rem; display:block; margin-bottom:.4rem; }
.rd-map-facade .rd-map-cta strong { display:block; font-family: var(--rd-display); font-weight:560; font-size:1.4rem; margin-bottom:.3rem; }
.rd-map-facade .rd-map-cta span.sub { font-size:.95rem; opacity:.9; }
.rd-map-facade .rd-map-btn { display:inline-block; margin-top:.9rem; background:#fff; color:var(--rd-green); font-weight:800; padding:.7rem 1.4rem; border-radius:999px; }
.rd-map-facade.rd-map-loading .rd-map-btn::after { content:" …"; }

/* ---------- 7. Before / After slider ---------- */
.rd-ba-section { background: var(--rd-ink); color:#fff; padding: clamp(3.5rem,7vw,6rem) 0; }
.rd-ba-section .section-header h2 { color:#fff !important; }
.rd-ba-section .rd-section-sub { text-align:center; color:#d8d2c6; max-width:54ch; margin: -1.4rem auto 2.6rem; }
.rd-ba-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(330px,1fr)); gap: 1.8rem; max-width: var(--rd-maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.rd-ba-card { background:#26241e; border-radius: var(--rd-radius); overflow:hidden; box-shadow: var(--rd-shadow); }
.rd-ba {
  position:relative; aspect-ratio: 3/2; user-select:none; touch-action: pan-y; overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rd-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.rd-ba .rd-ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.rd-ba-label { position:absolute; top:.7rem; z-index:4; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .6rem; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; }
.rd-ba-label.before { left:.7rem; }
.rd-ba-label.after { right:.7rem; background: var(--rd-orange); }
.rd-ba-divider { position:absolute; top:0; bottom:0; left: var(--pos, 50%); width:2px; background:#fff; z-index:5; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.rd-ba-handle {
  position:absolute; top:50%; left: var(--pos, 50%); transform: translate(-50%,-50%); z-index:6;
  width:44px; height:44px; border-radius:50%; background:#fff; color: var(--rd-ink);
  display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: ew-resize;
}
.rd-ba-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:7; margin:0; }
.rd-ba-range:focus-visible + .rd-ba-handle { outline: 3px solid var(--rd-gold); outline-offset:2px; }
.rd-ba-cap { padding: 1rem 1.2rem; }
.rd-ba-cap h3 { font-family: var(--rd-display); font-weight:560; font-size:1.2rem; margin:0 0 .25rem; color:#fff; }
.rd-ba-cap p { color:#c8c2b6; font-size:.92rem; margin:0; }
.rd-ba-note { text-align:center; color:#9a958a; font-size:.8rem; margin-top:1.6rem; }

/* ---------- 8. Multi-step lead form ---------- */
.estimate-form { background: linear-gradient(180deg, var(--rd-cream) 0%, var(--rd-cream-2) 100%); }
.estimate-container { max-width: 680px; margin:0 auto; padding: clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem); }
.section-header-form h2 { font-family: var(--rd-display) !important; font-weight:560 !important; font-size: var(--fs-h2) !important; color: var(--rd-ink) !important; }
.estimate-form .lead-form {
  background: var(--rd-white); border:1px solid var(--rd-line); border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow); padding: clamp(1.4rem, 3vw, 2.4rem); margin-top:1.5rem;
}
.rd-progress { display:flex; align-items:center; gap:.5rem; margin-bottom:1.6rem; }
.rd-progress-track { flex:1; height:6px; background: var(--rd-cream-2); border-radius:999px; overflow:hidden; }
.rd-progress-fill { height:100%; width:33%; background: linear-gradient(90deg,var(--rd-green),var(--rd-orange)); border-radius:999px; transition: width .4s var(--rd-ease); }
.rd-progress-label { font-size:.82rem; font-weight:700; color: var(--rd-ink-soft); white-space:nowrap; }

.rd-step { display:none; animation: rd-fade .35s var(--rd-ease); }
.rd-step.active { display:block; }
@keyframes rd-fade { from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }
.rd-step-title { font-family: var(--rd-display); font-weight:560; font-size:1.35rem; margin:0 0 .3rem; color:var(--rd-ink); }
.rd-step-help { color: var(--rd-ink-soft); font-size:.92rem; margin:0 0 1.2rem; }

/* project-type tiles */
.rd-tiles { display:grid; grid-template-columns: repeat(2,1fr); gap:.7rem; margin-bottom:1.1rem; }
.rd-tile { position:relative; }
.rd-tile input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.rd-tile label {
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; justify-content:center;
  padding: .95rem 1rem; border:2px solid var(--rd-line); border-radius: var(--rd-radius-sm);
  cursor:pointer; transition: border-color .2s, background .2s, transform .15s; min-height:72px; background:#fff;
}
.rd-tile label .ico { font-size:1.4rem; line-height:1; }
.rd-tile label .txt { font-weight:700; color:var(--rd-ink); font-size:.98rem; }
.rd-tile input:checked + label { border-color: var(--rd-green); background: #f3f7ec; box-shadow: inset 0 0 0 1px var(--rd-green); }
.rd-tile input:focus-visible + label { outline:3px solid var(--rd-gold); outline-offset:2px; }
.rd-tile label:hover { transform: translateY(-2px); }

.estimate-form .input, .estimate-form select, .estimate-form textarea {
  border-radius: var(--rd-radius-sm) !important; border:2px solid var(--rd-line) !important;
  padding: .85rem 1rem !important; font-size:1rem !important; transition: border-color .2s, box-shadow .2s !important;
}
.estimate-form .input:focus, .estimate-form select:focus, .estimate-form textarea:focus {
  border-color: var(--rd-green) !important; box-shadow: 0 0 0 3px rgba(74,110,26,.15) !important; outline:none !important;
}
.estimate-form .label { font-weight:700 !important; color: var(--rd-ink) !important; }

.rd-step-nav { display:flex; gap:.8rem; margin-top:1.4rem; align-items:center; }
.rd-step-nav .rd-btn { flex: 1 1 auto; padding-top:1rem; padding-bottom:1rem; }
.rd-back { background:none; border:2px solid var(--rd-line); color: var(--rd-ink-soft); flex: 0 0 auto !important; }
.rd-back:hover { border-color: var(--rd-ink-soft); transform:none; }
.estimate-form .btn-submit {
  background: var(--rd-orange) !important; border-radius:999px !important; font-weight:800 !important;
  font-size:1.08rem !important; padding:1.05rem 1.6rem !important; box-shadow: 0 14px 30px -12px rgba(217,112,0,.7) !important;
}
.estimate-form .btn-submit:hover { background: var(--rd-orange-deep) !important; transform: translateY(-2px); }
.rd-form-reassure { text-align:center; color: var(--rd-ink-soft); font-size:.86rem; margin-top:1rem; }
.rd-form-reassure b { color: var(--rd-green); }

/* hide legacy expand toggle when multistep is active */
.lead-form.rd-multistep .form-expand-toggle, .lead-form.rd-multistep #formOptionalFields[hidden] { display:none; }
.lead-form.rd-multistep #formOptionalFields { display:block; }

/* ---------- 9. Motion / scroll reveal ---------- */
.rd-reveal { opacity:0; transform: translateY(22px); transition: opacity .7s var(--rd-ease), transform .7s var(--rd-ease); }
.rd-reveal.rd-in { opacity:1; transform:none; }
.rd-reveal.d1 { transition-delay:.08s } .rd-reveal.d2 { transition-delay:.16s } .rd-reveal.d3 { transition-delay:.24s }

/* ---------- 10. Sticky mobile call+quote bar ---------- */
.rd-mobilebar { position:fixed; left:0; right:0; bottom:0; z-index:1200; display:none; gap:.6rem; padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top:1px solid var(--rd-line); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
.rd-mobilebar a { flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:50px; border-radius:12px; font-weight:800; font-size:1rem; text-decoration:none; }
.rd-mobilebar .call { background: var(--rd-green); color:#fff; }
.rd-mobilebar .quote { background: var(--rd-orange); color:#fff; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 768px) {
  .rd-hero.hero { min-height: 84vh; padding-top: 4.5rem; }
  /* Stronger, uniform scrim so centered hero text stays legible over bright photos */
  .rd-hero .rd-hero-scrim { background: linear-gradient(180deg, rgba(14,13,11,.66) 0%, rgba(14,13,11,.62) 45%, rgba(14,13,11,.84) 100%); }
  .rd-hero-inner { text-align:center; }
  .rd-hero-title { margin-left:auto; margin-right:auto; }
  .rd-hero-eyebrow, .rd-hero-cta, .rd-hero-reassure { justify-content:center; }
  .rd-hero-sub { margin-left:auto; margin-right:auto; }
  .rd-hero-cta .rd-btn { width:100%; }
  .rd-trust-sep { display:none; }
  .rd-tiles { grid-template-columns: 1fr 1fr; }
  .rd-mobilebar { display:flex; }
  body { padding-bottom: 70px; } /* room for mobile bar */
  .rd-scroll-cue { display:none; }
  .sticky-cta { display:none !important; } /* rd-mobilebar replaces the floating CTA on mobile */
}
@media (max-width: 480px) {
  .rd-hero-title { font-size: clamp(2.3rem, 11vw, 3rem); }
  .rd-ba-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .rd-scroll-cue { animation:none; }
  .rd-btn, .service-card, .project-card, .feature-card { transition: none !important; }
}