.elementor-9821 .elementor-element.elementor-element-e5b4d43{--display:flex;}.elementor-9821 .elementor-element.elementor-element-e5b4d43:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-e5b4d43 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-9821 .elementor-element.elementor-element-e2ef554{--display:flex;}.elementor-9821 .elementor-element.elementor-element-e2ef554:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-e2ef554 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-9821 .elementor-element.elementor-element-5961485{--display:flex;}.elementor-9821 .elementor-element.elementor-element-ba52bd5{--display:flex;}.elementor-9821 .elementor-element.elementor-element-ba52bd5:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-ba52bd5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-9821 .elementor-element.elementor-element-a235c57{--display:flex;}.elementor-9821 .elementor-element.elementor-element-a235c57:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-a235c57 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-9821 .elementor-element.elementor-element-514b160{--display:flex;}.elementor-9821 .elementor-element.elementor-element-514b160:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-514b160 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-9821 .elementor-element.elementor-element-9b505f1{--display:flex;}.elementor-9821 .elementor-element.elementor-element-9b505f1:not(.elementor-motion-effects-element-type-background), .elementor-9821 .elementor-element.elementor-element-9b505f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}/* Start custom CSS *//* ============================================================
   RAIN GARDENS PAGE — Page-specific CSS
   Namespace: cl-rg-
   URL: /design/rain-gardens/
   Added to: Elementor → Site Settings → Custom CSS
             (or the page's own Custom CSS panel)

   Does NOT modify global.css.
   CTA reuses existing .cl-cta classes — no changes needed there.
   Footer reuses existing .cl-portfolio-footer — no changes needed.
   ============================================================ */

/* =============================================
   BREADCRUMB — Container 1
   ============================================= */
.cl-rg-breadcrumb {
  padding: 18px 48px 0;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #9A9588 !important;
}
.cl-rg-breadcrumb a {
  color: #9A9588 !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}
.cl-rg-breadcrumb a:hover { color: #6B2D68 !important; }
.cl-rg-bc-sep { margin: 0 8px; opacity: 0.5; }

/* =============================================
   HERO — Container 2
   ============================================= */
.cl-rg-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 540px;
  border-bottom: 0.5px solid #DDD9D2;
}
.cl-rg-hero-left {
  padding: 72px 56px 72px 48px;
  border-right: 0.5px solid #DDD9D2;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #FAF8F5;
}
.cl-rg-eyebrow {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #9A9588 !important;
  margin-bottom: 28px !important;
}
.cl-rg-h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 52px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  color: #2C2830 !important;
  margin: 0 0 36px !important;
}
.cl-rg-h1 em {
  font-style: italic !important;
  color: #6B2D68 !important;
}
.cl-rg-hero-body {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: #4A4840 !important;
  max-width: 400px;
  margin-bottom: 40px !important;
}
.cl-rg-cta-link {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6B2D68 !important;
  text-decoration: none !important;
  border-bottom: 0.5px solid #6B2D68 !important;
  padding-bottom: 2px !important;
  transition: color 200ms ease, border-color 200ms ease;
  align-self: flex-start;
}
.cl-rg-cta-link:hover {
  color: #2C2830 !important;
  border-color: #2C2830 !important;
}

/* Hero right — slider panel */
.cl-rg-hero-right {
  position: relative;
  background: #DDD9CF;
  overflow: hidden;
  min-height: 460px;
}
.cl-rg-slider {
  position: absolute;
  inset: 0;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.cl-rg-slider-after,
.cl-rg-slider-before {
  position: absolute;
  inset: 0;
}
.cl-rg-slider-before { clip-path: inset(0 50% 0 0); z-index: 2; }
.cl-rg-slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
.cl-rg-slider-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: #FAF8F5;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
.cl-rg-slider-handle {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  background: #FAF8F5;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 0 1px 8px rgba(44,40,48,0.12);
  pointer-events: none;
}
.cl-rg-slider-handle svg {
  width: 16px; height: 16px;
  color: #2C2830;
}
.cl-rg-slider-label {
  position: absolute;
  top: 20px;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  z-index: 5;
  pointer-events: none;
}
.cl-rg-slider-label--before { left: 20px;  color: rgba(107,92,106,0.9) !important; }
.cl-rg-slider-label--after  { right: 20px; color: rgba(58,78,42,0.9) !important; }

/* =============================================
   SHARED BODY TEXT — used across containers 3–5
   ============================================= */
.cl-rg-body {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: #4A4840 !important;
  margin: 0 !important;
}
.cl-rg-body + .cl-rg-body { margin-top: 18px !important; }

/* =============================================
   PHILOSOPHY + STATS — Container 3
   ============================================= */
.cl-rg-philosophy {
  padding: 64px 48px;
  border-bottom: 0.5px solid #DDD9D2;
  background: #FAF8F5;
}
.cl-rg-philosophy-inner { max-width: 680px; }
.cl-rg-pull-quote {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  color: #2C2830 !important;
  margin: 0 0 28px !important;
}
.cl-rg-stats-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px;
  margin-top: 40px !important;
  max-width: 520px;
}
.cl-rg-stat-block {
  background: #FAF8F5;
  border: 0.5px solid #DDD9D2;
  border-left: 2px solid #6B2D68;
  padding: 24px 28px;
}
.cl-rg-stat-number {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  color: #6B2D68 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}
.cl-rg-stat-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9A9588 !important;
}

/* =============================================
   CERTIFICATION — Container 4
   ============================================= */
.cl-rg-cert {
  padding: 64px 48px;
  border-bottom: 0.5px solid #DDD9D2;
  background: #FAF8F5;
}
.cl-rg-cert-inner { max-width: 680px; }
.cl-rg-annotation {
  display: inline-block !important;
  background: #6B2D68 !important;
  color: #FAF8F5 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}
.cl-rg-h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  color: #2C2830 !important;
  margin: 0 0 20px !important;
}
.cl-rg-h2 em {
  font-style: italic !important;
  color: #6B2D68 !important;
}
.cl-rg-cert-img-wrap {
  width: 100%;
  margin-top: 36px;
  overflow: hidden;
}
.cl-rg-cert-img {
  width: 100% !important;
  height: 340px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* =============================================
   WHY WATER HARVESTING — Container 5
   ============================================= */
.cl-rg-why {
  padding: 64px 48px;
  border-bottom: 0.5px solid #DDD9D2;
  background: #FAF8F5;
}
.cl-rg-why-inner { max-width: 680px; }

/* =============================================
   CTA OVERRIDE — Container 6
   Body copy only — overrides .cl-cta-body text
   via the HTML widget directly (no CSS needed)
   ============================================= */

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .cl-rg-breadcrumb { padding: 16px 24px 0; }
  .cl-rg-hero { grid-template-columns: 1fr !important; }
  .cl-rg-hero-left { padding: 48px 32px; border-right: none; border-bottom: 0.5px solid #DDD9D2; }
  .cl-rg-hero-right { min-height: 380px; }
  .cl-rg-h1 { font-size: 40px !important; }
  .cl-rg-philosophy,
  .cl-rg-cert,
  .cl-rg-why { padding: 52px 32px; }
  .cl-rg-h2 { font-size: 26px !important; }
  .cl-rg-pull-quote { font-size: 19px !important; }
}

@media (max-width: 600px) {
  .cl-rg-h1 { font-size: 34px !important; }
  .cl-rg-hero-left { padding: 40px 24px; }
  .cl-rg-philosophy,
  .cl-rg-cert,
  .cl-rg-why { padding: 48px 24px; }
  .cl-rg-pull-quote { font-size: 17px !important; }
  .cl-rg-stats-row { grid-template-columns: 1fr !important; }
  .cl-rg-stat-number { font-size: 32px !important; }
}

/* Session 15 — nav gap + padding tidy */
.cl-rg-breadcrumb {
    padding-top: 24px !important;
}

.cl-rg-philosophy,
.cl-rg-cert,
.cl-rg-why {
    padding-left: 80px !important;
    padding-right: 80px !important;
}/* End custom CSS */