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

:root{

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

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

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

  --timeline-white:#ffffff;

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

}


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

html{
  scroll-behavior:smooth;
}


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


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


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


.timeline-section-index{

  margin-bottom:22px;

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

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

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

}


.timeline-section-index-light{
  color:rgba(255,255,255,.35);
}


.timeline-kicker{

  margin:0 0 8px;

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

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

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

}


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


.timeline-section-heading h2,
.timeline-quick-layout h2,
.timeline-project-copy h2{

  margin:0 0 12px;

  color:var(--timeline-dark);

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

  line-height:1.08;

  letter-spacing:-.025em;

}


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

  max-width:620px;

  margin:0;

  color:#647067;

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

}


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

.timeline-hero{

  position:relative;

  min-height:360px;

  display:flex;
  align-items:center;

  padding:
    34px 14px 20px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(118,196,87,.40),
      transparent 27%
    ),
    var(--timeline-green);

  color:#fff;

}


.timeline-hero::after{

  content:"";

  position:absolute;

  width:360px;
  height:360px;

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

  border-radius:50%;

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

  box-shadow:
    0 0 0 55px rgba(255,255,255,.03),
    0 0 0 110px rgba(255,255,255,.018);

}


.timeline-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;

}


.timeline-hero-content{

  position:relative;
  z-index:2;

  max-width:850px;

}


.timeline-eyebrow{

  margin:0 0 9px;

  color:var(--timeline-cream);

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

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

}


.timeline-hero h1{

  max-width:17ch;

  margin:0;

  color:#fff;

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

  line-height:1.02;

  letter-spacing:-.035em;

}


.timeline-hero-intro{

  max-width:40ch;

  margin:16px 0 0;

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

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

}


.timeline-hero-actions{

  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:20px;

}


.timeline-primary-button,
.timeline-secondary-button,
.timeline-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;

}


.timeline-primary-button{

  border:0;

  background:var(--timeline-cream);

  color:var(--timeline-green);

}


.timeline-secondary-button{

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

  background:transparent;

  color:#fff;

}


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

.timeline-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;

}


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


.timeline-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
===================================================== */

.timeline-quick{
  background:var(--timeline-cream);
}


.timeline-quick-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:16px;

}


.timeline-answer-card{

  padding:21px;

  border-radius:20px;

  background:#fff;

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

}


.timeline-answer-card p{

  margin:0 0 14px;

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

}


.timeline-answer-card strong{

  display:block;

  padding-top:14px;

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

  color:var(--timeline-green);

  font-size:15px;

}


/* =====================================================
   PROJECT JOURNEY
===================================================== */

.timeline-stage-tabs{

  display:flex;

  gap:7px;

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

  overflow-x:auto;

  scrollbar-width:none;

  scroll-snap-type:x proximity;

}


.timeline-stage-tabs::-webkit-scrollbar{
  display:none;
}


.timeline-stage-tab{

  flex:0 0 auto;

  display:grid;

  gap:3px;

  min-width:82px;
  min-height:55px;

  padding:8px 13px;

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

  border-radius:14px;

  background:#fff;

  color:var(--timeline-green);

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

  text-align:left;

  cursor:pointer;

  scroll-snap-align:start;

}


.timeline-stage-tab span{

  font-size:9px;

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

}


.timeline-stage-tab.active{

  background:var(--timeline-green);

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

  color:#fff;

}


.timeline-stage-tab.active span{
  color:var(--timeline-cream);
}


.timeline-stage-detail{

  display:grid;

  grid-template-columns:1fr;

  gap:5px;

  margin-top:13px;

  padding:21px;

  border-radius:20px;

  background:var(--timeline-warm);

}


.timeline-stage-number{

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

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

}


.timeline-stage-label{

  margin:0 0 6px;

  color:var(--timeline-green);

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

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

}


.timeline-stage-detail h3{

  margin:0 0 8px;

  font-size:20px;

  color:var(--timeline-dark);

}


.timeline-stage-detail p{

  margin:0;

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

  color:#4e5a52;

}


/* =====================================================
   TIMELINE FACTORS
===================================================== */

.timeline-factors-section{

  background:#102d1b;

  color:#fff;

}


.timeline-factors-section h2{
  color:#fff;
}


.timeline-factors-section
.timeline-section-heading > p:last-child{

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

}


.timeline-factor-tabs{

  display:flex;

  gap:7px;

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

  overflow-x:auto;

  scrollbar-width:none;

}


.timeline-factor-tabs::-webkit-scrollbar{
  display:none;
}


.timeline-factor-tab{

  flex:0 0 auto;

  min-height:40px;

  padding:7px 14px;

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

  border-radius:999px;

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

  color:#fff;

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

  cursor:pointer;

}


.timeline-factor-tab.active{

  background:var(--timeline-cream);

  border-color:var(--timeline-cream);

  color:var(--timeline-green);

}


.timeline-factor-detail{

  display:grid;

  grid-template-columns:1fr;

  gap:8px;

  margin-top:13px;

  padding:21px;

  border-radius:20px;

  background:var(--timeline-cream);

  color:var(--timeline-dark);

}


.timeline-factor-index{

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

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

}


.timeline-factor-detail h3{

  margin:0 0 8px;

  font-size:20px;

}


.timeline-factor-detail p{

  margin:0;

  color:#536057;

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

}


.timeline-factor-link{

  display:inline-flex;

  margin-top:12px;

  color:var(--timeline-green);

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

  text-decoration:none;

}


/* =====================================================
   BEFORE / DURING
===================================================== */

.timeline-before-during{

  display:grid;

  grid-template-columns:1fr;

  gap:10px;

}


.timeline-phase-card{

  padding:22px;

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

  border-radius:20px;

  background:#fff;

}


.timeline-phase-highlight{

  background:var(--timeline-warm);

}


.timeline-phase-card > span{

  color:var(--timeline-green);

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

  text-transform:uppercase;

}


.timeline-phase-card h3{

  margin:8px 0 16px;

  font-size:21px;

}


.timeline-phase-card ul{

  display:grid;

  gap:9px;

  margin:0;

  padding-left:18px;

  font-size:13px;

}


.timeline-phase-arrow{

  display:grid;

  place-items:center;

  height:30px;

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

  font-size:20px;

}


.timeline-preparation-message{

  margin-top:18px;

  padding:18px;

  border-radius:18px;

  background:var(--timeline-cream);

}


.timeline-preparation-message strong{

  color:var(--timeline-green);

  font-size:17px;

}


.timeline-preparation-message p{

  margin:7px 0 0;

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

}


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

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


.timeline-project-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:24px;

}


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

  margin:0 0 12px;

  color:#525e55;

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

}


.timeline-text-link{

  display:inline-flex;

  margin-top:7px;

  color:var(--timeline-green);

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

  text-decoration:none;

}


.timeline-project-images{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

}


.timeline-project-images figure{

  position:relative;

  margin:0;

  aspect-ratio:4/5;

  overflow:hidden;

  border-radius:16px;

}


.timeline-project-images img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

}


.timeline-project-images figcaption{

  position:absolute;

  left:8px;
  bottom:8px;

  padding:6px 8px;

  border-radius:999px;

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

  color:#fff;

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

  text-transform:uppercase;

}


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

.timeline-related{
  background:#fff;
}


.timeline-related-track{

  display:flex;

  gap:10px;

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

  overflow-x:auto;

  scroll-snap-type:x proximity;

  scrollbar-width:none;

}


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


.timeline-related-card{

  flex:0 0 78%;

  min-height:165px;

  display:flex;
  flex-direction:column;

  padding:20px;

  border-radius:18px;

  background:var(--timeline-cream);

  color:var(--timeline-dark);

  text-decoration:none;

  scroll-snap-align:start;

}


.timeline-related-card > span{

  color:var(--timeline-green);

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

  text-transform:uppercase;

}


.timeline-related-card strong{

  margin-top:18px;

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

}


.timeline-related-card small{

  margin-top:auto;

  color:var(--timeline-green);

  font-weight:900;

}


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

.timeline-final-cta{

  padding:
    58px 14px 95px;

  background:var(--timeline-green);

  color:#fff;

  text-align:center;

}


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


.timeline-final-cta h2{

  max-width:680px;

  margin:0 auto 12px;

  color:#fff;

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

  line-height:1.05;

}


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

  max-width:580px;

  margin:0 auto;

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

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

}


.timeline-final-actions{

  display:grid;

  gap:8px;

  margin-top:22px;

}


.timeline-primary-light{

  width:100%;

  background:var(--timeline-cream);

}


.timeline-outline-button{

  min-height:44px;

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

  color:#fff;

}


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

.timeline-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;

}


.timeline-sticky-cta.visible{
  transform:translateY(0);
}


.timeline-sticky-cta small{

  display:block;

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

  font-size:8px;

}


.timeline-sticky-cta strong{

  display:block;

  margin-top:1px;

  font-size:11px;

}


.timeline-sticky-cta button{

  flex:0 0 auto;

  min-height:38px;

  padding:0 12px;

  border:0;

  border-radius:999px;

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

  color:#12351b;

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

}


/* =====================================================
   LEAD PANEL
===================================================== */

.timeline-lead-overlay{

  position:fixed;

  inset:0;

  z-index:500;

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

  backdrop-filter:blur(5px);

}


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


.timeline-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(--timeline-cream);

}


.timeline-lead-close{

  position:absolute;

  top:12px;
  right:14px;

  width:36px;
  height:36px;

  border:0;

  border-radius:50%;

  background:#fff;

  color:var(--timeline-green);

  font-size:22px;

}


.timeline-lead-panel h2{

  margin:0 0 8px;

  font-size:27px;

}


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

  margin:0;

  color:#637067;

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

}


.timeline-lead-form{

  display:grid;

  gap:12px;

  margin-top:20px;

}


.timeline-lead-form label{

  display:grid;

  gap:5px;

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

}


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

  width:100%;

  min-height:46px;

  padding:0 12px;

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

  border-radius:12px;

  background:#fff;

  font:inherit;

}


.timeline-lead-submit{

  min-height:48px;

  border:0;

  border-radius:999px;

  background:var(--timeline-green);

  color:#fff;

  font-weight:900;

}


.timeline-form-note{

  color:#78827a;

  font-size:10px;

}


.timeline-hidden-field{

  position:absolute !important;

  left:-9999px !important;

}


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

@media(min-width:769px){

  .timeline-section{
    padding:78px 20px;
  }


  .timeline-hero{

    min-height:520px;

    padding:
      55px 20px 30px;

  }


  .timeline-hero-intro{

    max-width:650px;

    font-size:17px;

  }


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

    min-height:46px;

    padding:0 18px;

    font-size:13px;

  }


  .timeline-quick-layout{

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

    gap:42px;

  }


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


  .timeline-stage-tabs{

    flex-wrap:wrap;

    margin:0;
    padding:0;

    overflow:visible;

  }


  .timeline-stage-detail{

    grid-template-columns:
      70px 1fr;

    gap:20px;

    padding:30px;

  }


  .timeline-factor-tabs{

    flex-wrap:wrap;

    margin:0;
    padding:0;

    overflow:visible;

  }


  .timeline-factor-detail{

    grid-template-columns:
      70px 1fr;

    gap:20px;

    padding:30px;

  }


  .timeline-before-during{

    grid-template-columns:
      1fr 60px 1fr;

    align-items:stretch;

  }


  .timeline-phase-arrow{

    height:auto;

    font-size:24px;

    transform:rotate(-90deg);

  }


  .timeline-project-layout{

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

    gap:48px;

    align-items:center;

  }


  .timeline-related-track{

    display:grid;

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

    margin:0;
    padding:0;

    overflow:visible;

  }


  .timeline-related-card{
    min-height:190px;
  }


  .timeline-final-actions{

    display:flex;

    justify-content:center;

  }


  .timeline-primary-light{
    width:auto;
  }


  .timeline-sticky-cta{
    display:none;
  }


  .timeline-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;

  }

}


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

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
  }

}