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

:root{

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

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

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

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

}


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

html{
  scroll-behavior:smooth;
}


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


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


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


.moisture-section-index{

  margin-bottom:22px;

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

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

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

}


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


.moisture-kicker{

  margin:0 0 8px;

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

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

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

}


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


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

  margin:0 0 12px;

  color:var(--moisture-dark);

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

  line-height:1.08;

  letter-spacing:-.025em;

}


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

  max-width:620px;

  margin:0;

  color:#647067;

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

}


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

.moisture-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,.42),
      transparent 27%
    ),
    #165628;

  color:#fff;

}


.moisture-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);

}


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

}


.moisture-hero-content{

  position:relative;
  z-index:2;

  max-width:850px;

}


.moisture-eyebrow{

  margin:0 0 9px;

  color:var(--moisture-cream);

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

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

}


.moisture-hero h1{

  max-width:17ch;

  margin:0;

  color:#fff;

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

  line-height:1.02;

  letter-spacing:-.035em;

}


.moisture-hero-intro{

  max-width:40ch;

  margin:16px 0 0;

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

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

}


.moisture-hero-actions{

  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:20px;

}


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

}


.moisture-primary-button{

  border:0;

  background:var(--moisture-cream);

  color:var(--moisture-green);

}


.moisture-secondary-button{

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

  background:transparent;

  color:#fff;

}


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

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

}


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


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

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


.moisture-quick-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:16px;

}


.moisture-answer-card{

  padding:21px;

  border-radius:20px;

  background:#fff;

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

}


.moisture-answer-card p{

  margin:0 0 14px;

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

}


.moisture-answer-card strong{

  display:block;

  padding-top:14px;

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

  color:var(--moisture-green);

  font-size:15px;

}


/* =====================================================
   MOISTURE ZONES
===================================================== */

.moisture-zone-tabs{

  display:flex;

  gap:7px;

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

  overflow-x:auto;

  scrollbar-width:none;

}


.moisture-zone-tabs::-webkit-scrollbar{
  display:none;
}


.moisture-zone-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(--moisture-green);

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

  cursor:pointer;

}


.moisture-zone-tab.active{

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

  background:var(--moisture-green);

  color:#fff;

}


.moisture-zone-detail{

  display:grid;

  grid-template-columns:1fr;

  gap:5px;

  margin-top:13px;

  padding:21px;

  border-radius:20px;

  background:var(--moisture-warm);

}


.moisture-zone-number{

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

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

}


.moisture-zone-label{

  margin:0 0 6px;

  color:var(--moisture-green);

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

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

}


.moisture-zone-detail h3{

  margin:0 0 8px;

  color:var(--moisture-dark);

  font-size:20px;

}


.moisture-zone-detail p{

  margin:0;

  color:#4e5a52;

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

}


/* =====================================================
   PROTECTION LAYERS
===================================================== */

.moisture-layers-section{

  background:#102d1b;

  color:#fff;

}


.moisture-layers-section h2{
  color:#fff;
}


.moisture-layers-section
.moisture-section-heading > p:last-child{

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

}


.moisture-layer-tabs{

  display:flex;

  gap:7px;

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

  overflow-x:auto;

  scrollbar-width:none;

}


.moisture-layer-tabs::-webkit-scrollbar{
  display:none;
}


.moisture-layer-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;

}


.moisture-layer-tab.active{

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

  background:var(--moisture-cream);

  color:var(--moisture-green);

}


.moisture-layer-detail{

  display:grid;

  grid-template-columns:1fr;

  gap:8px;

  margin-top:13px;

  padding:21px;

  border-radius:20px;

  background:var(--moisture-cream);

  color:var(--moisture-dark);

}


.moisture-layer-index{

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

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

}


.moisture-layer-detail h3{

  margin:0 0 8px;

  font-size:20px;

}


.moisture-layer-detail p{

  margin:0;

  color:#536057;

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

}


/* =====================================================
   WARNING SIGNS
===================================================== */

.moisture-warning-grid{

  display:grid;

  grid-template-columns:1fr;

  gap:9px;

}


.moisture-warning-grid article{

  padding:19px;

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

  border-radius:17px;

  background:#fff;

}


.moisture-warning-grid article > span{

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

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

}


.moisture-warning-grid strong{

  display:block;

  margin:7px 0;

  color:var(--moisture-dark);

  font-size:16px;

}


.moisture-warning-grid p{

  margin:0;

  color:#5a665e;

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

}


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

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


.moisture-project-layout{

  display:grid;

  grid-template-columns:1fr;

  gap:24px;

}


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

  margin:0 0 12px;

  color:#525e55;

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

}


.moisture-text-link{

  display:inline-flex;

  margin-top:7px;

  color:var(--moisture-green);

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

  text-decoration:none;

}


.moisture-project-images{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

}


.moisture-project-images figure{

  position:relative;

  margin:0;

  aspect-ratio:4/5;

  overflow:hidden;

  border-radius:16px;

}


.moisture-project-images img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

}


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

.moisture-related{
  background:#fff;
}


.moisture-related-track{

  display:flex;

  gap:10px;

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

  overflow-x:auto;

  scroll-snap-type:x proximity;

  scrollbar-width:none;

}


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


.moisture-related-card{

  flex:0 0 78%;

  min-height:165px;

  display:flex;
  flex-direction:column;

  padding:20px;

  border-radius:18px;

  background:var(--moisture-cream);

  color:var(--moisture-dark);

  text-decoration:none;

  scroll-snap-align:start;

}


.moisture-related-card > span{

  color:var(--moisture-green);

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

  text-transform:uppercase;

}


.moisture-related-card strong{

  margin-top:18px;

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

}


.moisture-related-card small{

  margin-top:auto;

  color:var(--moisture-green);

  font-weight:900;

}


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

.moisture-final-cta{

  padding:
    58px 14px 95px;

  background:var(--moisture-green);

  color:#fff;

  text-align:center;

}


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


.moisture-final-cta h2{

  max-width:680px;

  margin:0 auto 12px;

  color:#fff;

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

  line-height:1.05;

}


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

  max-width:580px;

  margin:0 auto;

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

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

}


.moisture-final-actions{

  display:grid;

  gap:8px;

  margin-top:22px;

}


.moisture-primary-light{

  width:100%;

  background:var(--moisture-cream);

}


.moisture-outline-button{

  min-height:44px;

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

  color:#fff;

}


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

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

}


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


.moisture-sticky-cta small{

  display:block;

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

  font-size:8px;

}


.moisture-sticky-cta strong{

  display:block;

  margin-top:1px;

  font-size:11px;

}


.moisture-sticky-cta button{

  flex:0 0 auto;

  min-height:38px;

  padding:0 12px;

  border:0;

  border-radius:999px;

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

  color:#12351b;

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

}


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

.moisture-lead-overlay{

  position:fixed;

  inset:0;

  z-index:500;

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

  backdrop-filter:blur(5px);

}


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


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

}


.moisture-lead-close{

  position:absolute;

  top:12px;
  right:14px;

  width:36px;
  height:36px;

  border:0;

  border-radius:50%;

  background:#fff;

  color:var(--moisture-green);

  font-size:22px;

}


.moisture-lead-panel h2{

  margin:0 0 8px;

  font-size:27px;

}


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

  margin:0;

  color:#637067;

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

}


.moisture-lead-form{

  display:grid;

  gap:12px;

  margin-top:20px;

}


.moisture-lead-form label{

  display:grid;

  gap:5px;

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

}


.moisture-lead-form input,
.moisture-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;

}


.moisture-lead-submit{

  min-height:48px;

  border:0;

  border-radius:999px;

  background:var(--moisture-green);

  color:#fff;

  font-weight:900;

}


.moisture-form-note{

  color:#78827a;

  font-size:10px;

}


.moisture-hidden-field{

  position:absolute !important;

  left:-9999px !important;

}


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

@media(min-width:769px){

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


  .moisture-hero{

    min-height:520px;

    padding:
      55px 20px 30px;

  }


  .moisture-hero-intro{

    max-width:650px;

    font-size:17px;

  }


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

    min-height:46px;

    padding:0 18px;

    font-size:13px;

  }


  .moisture-quick-layout{

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

    gap:42px;

  }


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


  .moisture-zone-tabs,
  .moisture-layer-tabs{

    flex-wrap:wrap;

    margin:0;
    padding:0;

    overflow:visible;

  }


  .moisture-zone-detail,
  .moisture-layer-detail{

    grid-template-columns:
      70px 1fr;

    gap:20px;

    padding:30px;

  }


  .moisture-warning-grid{

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

  }


  .moisture-project-layout{

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

    gap:48px;

    align-items:center;

  }


  .moisture-related-track{

    display:grid;

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

    margin:0;
    padding:0;

    overflow:visible;

  }


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


  .moisture-final-actions{

    display:flex;

    justify-content:center;

  }


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


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


  .moisture-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;
  }

}