/* =====================================================
   MERGE — BATHROOM COST GUIDE
   FIRST MOBILE
===================================================== */

:root{

  --guide-green:#2A7C13;
  --guide-green-light:#76C457;

  --guide-cream:#FFF8CF;
  --guide-warm:#FBE6C2;

  --guide-dark:#102018;
  --guide-text:#26332b;

  --guide-white:#ffffff;

  --guide-border:
    rgba(16,32,24,.12);

}


/* =====================================================
   BASE
===================================================== */

html{
  scroll-behavior:smooth;
}


.cost-guide{
  background:#fff;
  color:var(--guide-text);
}


.cost-shell{
  width:min(1160px,100%);
  margin-inline:auto;
}


.cost-section{
  padding:54px 14px;
}


.cost-section-index{

  margin-bottom:22px;

  color:rgba(16,32,24,.38);

  font-size:10px;
  font-weight:900;

  letter-spacing:.12em;
  text-transform:uppercase;

}


.cost-section-index-light{
  color:rgba(255,255,255,.36);
}


.cost-kicker{

  margin:0 0 8px;

  color:var(--guide-green-light);

  font-size:11px;
  font-weight:900;

  letter-spacing:.09em;
  text-transform:uppercase;

}


.cost-section-heading{
  max-width:720px;
  margin-bottom:24px;
}


.cost-section-heading h2,
.quick-answer-layout h2,
.real-project-copy h2{

  margin:0 0 12px;

  color:var(--guide-dark);

  font-size:
    clamp(29px,8vw,46px);

  line-height:1.08;

  letter-spacing:-.025em;

}


.cost-section-heading > p:last-child{

  max-width:620px;

  margin:0;

  color:#647067;

  font-size:14px;
  line-height:1.65;

}


/* =====================================================
   HERO
===================================================== */

.cost-hero{

  position:relative;

  min-height:360px;

  display:flex;
  align-items:center;

  padding:
    34px 14px 20px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(118,196,87,.38),
      transparent 27%
    ),
    var(--guide-green);

  color:#fff;

}


.cost-hero::after{

  content:"";

  position:absolute;

  width:340px;
  height:340px;

  right:-180px;
  bottom:-170px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.09);

  box-shadow:
    0 0 0 50px rgba(255,255,255,.03),
    0 0 0 100px rgba(255,255,255,.018);

  pointer-events:none;

}


.cost-back{

  position:relative;
  z-index:2;

  display:inline-flex;

  margin-bottom:20px;

  color:rgba(255,255,255,.72);

  font-size:11px;
  font-weight:800;

  text-decoration:none;

}


.cost-hero-copy{

  position:relative;
  z-index:2;

  max-width:850px;

}


.cost-eyebrow{

  margin:0 0 9px;

  color:var(--guide-cream);

  font-size:11px;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;

}


.cost-hero h1{

  max-width:17ch;

  margin:0;

  color:#fff;

  font-size:
    clamp(34px,9.5vw,62px);

  line-height:1.02;

  letter-spacing:-.035em;

}


.cost-hero-intro{

  max-width:38ch;

  margin:16px 0 0;

  color:rgba(255,255,255,.86);

  font-size:14px;
  line-height:1.55;

}


.cost-hero-actions{

  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:20px;

}


.cost-primary-button,
.cost-secondary-button,
.cost-outline-button{

  min-height:42px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:0 14px;

  border-radius:999px;

  font-size:11px;
  font-weight:900;

  text-decoration:none;

  cursor:pointer;

}


.cost-primary-button{

  border:0;

  background:var(--guide-cream);

  color:var(--guide-green);

}


.cost-secondary-button{

  border:
    1px solid rgba(255,255,255,.25);

  color:#fff;

}


/* =====================================================
   QUICK NAV
===================================================== */

.cost-quick-nav{

  position:relative;
  z-index:2;

  display:flex;

  gap:6px;

  margin-top:22px;
  margin-right:-14px;

  padding-right:14px;

  overflow-x:auto;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;

}


.cost-quick-nav::-webkit-scrollbar{
  display:none;
}


.cost-quick-nav a{

  flex:0 0 auto;

  padding:7px 10px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:999px;

  color:rgba(255,255,255,.8);

  font-size:9px;
  font-weight:800;

  text-decoration:none;

}


/* =====================================================
   QUICK ANSWER
===================================================== */

.cost-quick-answer{
  background:var(--guide-cream);
}


.quick-answer-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:16px;

}


.quick-answer-card{

  padding:21px;

  border-radius:20px;

  background:#fff;

  box-shadow:
    0 14px 36px rgba(42,124,19,.08);

}


.quick-answer-card p{

  margin:0 0 14px;

  font-size:14px;
  line-height:1.65;

}


.quick-answer-card strong{

  display:block;

  padding-top:14px;

  border-top:
    1px solid var(--guide-border);

  color:var(--guide-green);

  font-size:15px;

}


/* =====================================================
   SCOPE TABS
===================================================== */

.scope-tabs{

  display:flex;

  gap:7px;

  margin-right:-14px;
  padding-right:14px;

  overflow-x:auto;

  scrollbar-width:none;

  scroll-snap-type:x proximity;

  -webkit-overflow-scrolling:touch;

}


.scope-tabs::-webkit-scrollbar{
  display:none;
}


.scope-tab{

  flex:0 0 auto;

  min-height:40px;

  padding:7px 14px;

  border:
    1px solid rgba(42,124,19,.17);

  border-radius:999px;

  background:#fff;

  color:var(--guide-green);

  font-size:11px;
  font-weight:900;

  cursor:pointer;

  scroll-snap-align:start;

}


.scope-tab.active{

  border-color:var(--guide-green);

  background:var(--guide-green);

  color:#fff;

}


.scope-detail{

  display:grid;

  grid-template-columns:1fr;

  gap:5px;

  margin-top:13px;

  padding:20px;

  border-radius:20px;

  background:var(--guide-warm);

}


.scope-detail-number{

  color:rgba(42,124,19,.30);

  font-size:26px;
  font-weight:900;

}


.scope-detail h3{

  margin:0 0 7px;

  color:var(--guide-dark);

  font-size:20px;

}


.scope-detail p{

  margin:0;

  color:#4e5a52;

  font-size:14px;
  line-height:1.65;

}


/* =====================================================
   COMPARISON
===================================================== */

.cost-compare-section{

  background:#102d1b;
  color:#fff;

}


.cost-compare-section h2{
  color:#fff;
}


.project-compare-track{

  display:flex;

  gap:10px;

  margin-right:-14px;
  padding-right:14px;

  overflow-x:auto;

  scroll-snap-type:x mandatory;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;

}


.project-compare-track::-webkit-scrollbar{
  display:none;
}


.project-scope-card{

  flex:0 0 88%;

  min-height:285px;

  padding:22px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:20px;

  background:
    rgba(255,255,255,.06);

  scroll-snap-align:center;

}


.project-scope-highlight{

  background:var(--guide-cream);
  color:var(--guide-dark);

}


.project-label{

  color:var(--guide-green-light);

  font-size:10px;
  font-weight:900;

  letter-spacing:.08em;
  text-transform:uppercase;

}


.project-scope-card h3{

  margin:12px 0 20px;

  font-size:23px;
  line-height:1.15;

}


.project-scope-card ul{

  display:grid;

  gap:11px;

  margin:0;

  padding-left:19px;

  font-size:13px;
  line-height:1.5;

}


.compare-message{

  margin-top:18px;

  padding:18px;

  border-radius:18px;

  background:
    rgba(255,255,255,.07);

}


.compare-message strong{

  display:block;

  color:var(--guide-cream);

  font-size:19px;

}


.compare-message p{

  margin:7px 0 0;

  color:rgba(255,255,255,.68);

  font-size:13px;
  line-height:1.6;

}


/* =====================================================
   PROPOSAL ACCORDION
===================================================== */

.proposal-accordion{

  display:grid;

  gap:8px;

}


.proposal-item{

  overflow:hidden;

  border:
    1px solid var(--guide-border);

  border-radius:16px;

  background:#fff;

}


.proposal-trigger{

  width:100%;

  display:grid;

  grid-template-columns:34px 1fr 22px;

  align-items:center;

  gap:8px;

  min-height:62px;

  padding:10px 14px;

  border:0;

  background:#fff;

  color:var(--guide-dark);

  text-align:left;

  cursor:pointer;

}


.proposal-trigger span{

  color:var(--guide-green-light);

  font-size:10px;
  font-weight:900;

}


.proposal-trigger strong{

  font-size:14px;
  line-height:1.35;

}


.proposal-trigger b{

  color:var(--guide-green);

  font-size:20px;
  font-weight:500;

  text-align:center;

}


.proposal-answer{

  max-height:0;

  overflow:hidden;

  transition:
    max-height .3s ease;

}


.proposal-answer p{

  margin:0;

  padding:
    0 14px 17px 56px;

  color:#5b665e;

  font-size:13px;
  line-height:1.6;

}


.proposal-item.active
.proposal-answer{

  max-height:180px;

}


/* =====================================================
   REAL PROJECT
===================================================== */

.cost-real-project{
  background:var(--guide-warm);
}


.real-project-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:24px;

}


.real-project-copy > p:not(.cost-kicker){

  margin:
    0 0 12px;

  color:#525e55;

  font-size:14px;
  line-height:1.65;

}


.cost-text-link{

  display:inline-flex;

  margin-top:7px;

  color:var(--guide-green);

  font-size:12px;
  font-weight:900;

  text-decoration:none;

}


.real-project-images{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

}


.real-project-images figure{

  position:relative;

  margin:0;

  aspect-ratio:4/5;

  overflow:hidden;

  border-radius:16px;

}


.real-project-images img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

}


.real-project-images figcaption{

  position:absolute;

  left:8px;
  bottom:8px;

  padding:6px 8px;

  border-radius:999px;

  background:rgba(0,0,0,.7);

  color:#fff;

  font-size:8px;
  font-weight:900;

  text-transform:uppercase;

}


/* =====================================================
   RELATED GUIDES
===================================================== */

.cost-related{
  background:#fff;
}


.related-guide-track{

  display:flex;

  gap:10px;

  margin-right:-14px;
  padding-right:14px;

  overflow-x:auto;

  scroll-snap-type:x proximity;

  scrollbar-width:none;

}


.related-guide-track::-webkit-scrollbar{
  display:none;
}


.related-guide-card{

  flex:0 0 78%;

  min-height:165px;

  display:flex;
  flex-direction:column;

  padding:20px;

  border-radius:18px;

  background:var(--guide-cream);

  color:var(--guide-dark);

  text-decoration:none;

  scroll-snap-align:start;

}


.related-guide-card > span{

  color:var(--guide-green);

  font-size:9px;
  font-weight:900;

  letter-spacing:.06em;
  text-transform:uppercase;

}


.related-guide-card strong{

  margin-top:18px;

  font-size:17px;
  line-height:1.3;

}


.related-guide-card small{

  margin-top:auto;

  color:var(--guide-green);

  font-weight:900;

}


/* =====================================================
   FINAL CTA
===================================================== */

.cost-final-cta{

  padding:
    58px 14px 95px;

  background:var(--guide-green);

  color:#fff;

  text-align:center;

}


.cost-kicker-light{
  color:var(--guide-cream);
}


.cost-final-cta h2{

  max-width:680px;

  margin:
    0 auto 12px;

  color:#fff;

  font-size:
    clamp(32px,9vw,52px);

  line-height:1.05;

}


.cost-final-cta > .cost-shell > p:not(.cost-kicker){

  max-width:580px;

  margin:0 auto;

  color:rgba(255,255,255,.82);

  font-size:14px;
  line-height:1.65;

}


.cost-final-actions{

  display:grid;

  grid-template-columns:1fr;

  gap:8px;

  margin-top:22px;

}


.cost-primary-light{

  width:100%;

  background:var(--guide-cream);

}


.cost-outline-button{

  min-height:44px;

  border:
    1px solid rgba(255,255,255,.28);

  color:#fff;

}


/* =====================================================
   STICKY MOBILE CTA
===================================================== */

.cost-sticky-cta{

  position:fixed;

  left:10px;
  right:10px;
  bottom:10px;

  z-index:300;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:
    8px 8px 8px 12px;

  border-radius:15px;

  background:#102d1b;

  color:#fff;

  box-shadow:
    0 15px 40px rgba(0,0,0,.25);

  transform:
    translateY(140%);

  transition:
    transform .3s ease;

}


.cost-sticky-cta.visible{

  transform:
    translateY(0);

}


.cost-sticky-cta small{

  display:block;

  color:rgba(255,255,255,.58);

  font-size:8px;

}


.cost-sticky-cta strong{

  display:block;

  margin-top:1px;

  font-size:11px;

}


.cost-sticky-cta button{

  flex:0 0 auto;

  min-height:38px;

  padding:0 12px;

  border:0;

  border-radius:999px;

  background:var(--guide-green-light);

  color:#12351b;

  font-size:10px;
  font-weight:900;

  cursor:pointer;

}


/* =====================================================
   LEAD OVERLAY
===================================================== */

.cost-lead-overlay{

  position:fixed;

  inset:0;

  z-index:500;

  background:
    rgba(5,15,10,.58);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

}


.cost-lead-overlay[hidden]{
  display:none;
}


/* MOBILE = BOTTOM SHEET */

.cost-lead-panel{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  max-height:88svh;

  overflow-y:auto;

  padding:
    36px 20px 24px;

  border-radius:
    24px 24px 0 0;

  background:var(--guide-cream);

}


.cost-lead-close{

  position:absolute;

  top:12px;
  right:14px;

  width:36px;
  height:36px;

  border:0;

  border-radius:50%;

  background:#fff;

  color:var(--guide-green);

  font-size:22px;

  cursor:pointer;

}


.cost-lead-panel h2{

  margin:0 0 8px;

  color:var(--guide-dark);

  font-size:27px;
  line-height:1.1;

}


.cost-lead-panel > p:not(.cost-kicker){

  margin:0;

  color:#637067;

  font-size:13px;
  line-height:1.6;

}


.cost-lead-form{

  display:grid;

  gap:12px;

  margin-top:20px;

}


.cost-lead-form label{

  display:grid;

  gap:5px;

  color:var(--guide-dark);

  font-size:10px;
  font-weight:900;

}


.cost-lead-form input,
.cost-lead-form select{

  width:100%;

  min-height:46px;

  padding:0 12px;

  border:
    1px solid rgba(42,124,19,.17);

  border-radius:12px;

  background:#fff;

  color:var(--guide-dark);

  font:inherit;

}


.cost-lead-submit{

  min-height:48px;

  border:0;
  border-radius:999px;

  background:var(--guide-green);

  color:#fff;

  font-weight:900;

  cursor:pointer;

}


.cost-form-note{

  color:#78827a;

  font-size:10px;
  line-height:1.45;

}


.cost-hidden-field{

  position:absolute !important;

  left:-9999px !important;

}


/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:769px){


  .cost-section{

    padding:
      78px 20px;

  }


  /* HERO */

  .cost-hero{

    min-height:520px;

    padding:
      55px 20px 30px;

  }


  .cost-hero-intro{

    max-width:650px;

    font-size:17px;

  }


  .cost-hero-actions{

    margin-top:28px;

  }


  .cost-primary-button,
  .cost-secondary-button,
  .cost-outline-button{

    min-height:46px;

    padding:0 18px;

    font-size:13px;

  }


  /* QUICK */

  .quick-answer-layout{

    grid-template-columns:
      .85fr 1.15fr;

    gap:42px;

  }


  .quick-answer-card{
    padding:30px;
  }


  /* SCOPE */

  .scope-tabs{

    flex-wrap:wrap;

    overflow:visible;

    margin-right:0;
    padding-right:0;

  }


  .scope-detail{

    grid-template-columns:
      80px 1fr;

    gap:20px;

    margin-top:15px;

    padding:30px;

  }


  .scope-detail-number{

    font-size:42px;

  }


  /* COMPARE */

  .project-compare-track{

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:visible;

    margin:0;
    padding:0;

  }


  .project-scope-card{

    min-height:300px;

  }


  /* PROPOSAL */

  .proposal-accordion{

    max-width:900px;

  }


  /* REAL PROJECT */

  .real-project-layout{

    grid-template-columns:
      .9fr 1.1fr;

    gap:48px;

    align-items:center;

  }


  /* RELATED */

  .related-guide-track{

    display:grid;

    grid-template-columns:
      repeat(4,minmax(0,1fr));

    margin:0;
    padding:0;

    overflow:visible;

  }


  .related-guide-card{

    min-height:190px;

  }


  /* FINAL */

  .cost-final-actions{

    display:flex;

    justify-content:center;

  }


  .cost-primary-light{

    width:auto;

  }


  /* STICKY ONLY MOBILE */

  .cost-sticky-cta{

    display:none;

  }


  /* DRAWER DESKTOP */

  .cost-lead-panel{

    left:auto;
    top:0;
    right:0;
    bottom:auto;

    width:min(470px,92vw);
    height:100%;

    max-height:none;

    padding:44px 30px;

    border-radius:0;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }


  *,
  *::before,
  *::after{

    transition:none !important;

  }

}