.elementor-10077 .elementor-element.elementor-element-6653ce6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-6653ce6:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-6653ce6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-6dd0892{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-6dd0892:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-6dd0892 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-4c64aca{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-4c64aca:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-4c64aca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-b184866{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-b184866:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-b184866 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-31cb061{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-31cb061:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-31cb061 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-ca893fd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-ca893fd:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-ca893fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-aa72b48{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-aa72b48:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-aa72b48 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}.elementor-10077 .elementor-element.elementor-element-f1c893e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10077 .elementor-element.elementor-element-f1c893e:not(.elementor-motion-effects-element-type-background), .elementor-10077 .elementor-element.elementor-element-f1c893e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-84225a3 );}/* Start custom CSS *//* ============================================================
   PHILOSOPHY PAGE — Page-specific CSS
   Namespace: cl-ph-
   URL: /design/philosophy/
   Last updated: Session 17 — 11 May 2026 (v2 — clean)

   GLOBAL CLASSES REUSED (no new CSS needed for these):
   - .cl-bio, .cl-bio__left           → two-column grid + left panel
   - .cl-portfolio .cl-headline + em  → h1 with plum italic
   - .cl-note                         → subhead body copy 15px/300/1.85
   - .cl-dh-h2 + em                   → section h2s, plum italic
   - .cl-dh-rain-body                 → section body copy
   - .cl-testimonial                  → pull quote
   - .cl-portfolio a.cl-portfolio-cta → plum underline link
   - .cl-signature, .cl-signature-rule, .cl-signature-name → CTA sign-off
   - .cl-portfolio-footer + cells     → footer
   ============================================================ */


/* =============================================
   ANNOTATION BADGE
   Defined here since .cl-rg-annotation lives
   in the rain page CSS, not global CSS
   ============================================= */
.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;
}


/* =============================================
   BREADCRUMB
   ============================================= */
.cl-ph-breadcrumb {
  padding: 18px 80px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9588;
  background: #FAF8F5;
}
.cl-ph-breadcrumb__link {
  color: #9A9588;
  text-decoration: none;
  transition: color 200ms ease;
}
.cl-ph-breadcrumb__link:hover { color: #6B2D68; }
.cl-ph-breadcrumb__sep { margin: 0 8px; }
.cl-ph-breadcrumb__current { color: #2C2830; }


/* =============================================
   INTRO — two-column hero
   .cl-bio provides the grid.
   Left panel: headline + subhead + body copy.
   Right panel: image with padding and centring.
   ============================================= */
.cl-ph-intro {
  border-bottom: 0.5px solid #DDD9D2 !important;
}
.cl-ph-intro-header {
  padding: 52px 80px 40px;
  background: #FAF8F5;
  border-bottom: 0.5px solid #DDD9D2;
}
.cl-ph-intro-header .cl-headline {
  margin: 0 !important;
  max-width: 900px;
}
.cl-ph-intro .cl-bio__left {
  padding: 64px 56px 64px 80px !important;
  justify-content: flex-start !important;
  gap: 20px;
}
.cl-ph-intro-body p {
  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 0 18px 0 !important;
}
.cl-ph-intro-body p:last-child { margin-bottom: 0 !important; }
.cl-ph-intro-right {
  padding: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #DDD9CF;
  border-left: 0.5px solid #DDD9D2;
  box-sizing: border-box;
}
.cl-ph-intro-img {
  width: 100% !important;
  height: 480px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 6px !important;
  position: static !important;
  inset: auto !important;
}


/* =============================================
   CONTENT SECTIONS — shared pattern
   ============================================= */
.cl-ph-section {
  padding: 64px 80px;
  border-bottom: 0.5px solid #DDD9D2;
  background: #FAF8F5;
  box-sizing: border-box;
}
.cl-ph-section--tinted {
  background: #F5F2EC;
}
.cl-ph-section-inner {
  max-width: 720px;
}
.cl-ph-section .cl-dh-h2 {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}
.cl-ph-body-wrap .cl-dh-rain-body {
  max-width: 100% !important;
  margin-bottom: 20px !important;
}
.cl-ph-body-wrap .cl-dh-rain-body:last-child { margin-bottom: 0 !important; }


/* =============================================
   BIOPHILIA — landscape image below text
   ============================================= */
.cl-ph-landscape-img-wrap {
  margin-top: 40px;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}
.cl-ph-landscape-img {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 6px !important;
}


/* =============================================
   POLLINATORS — two-column, text left / image right
   .cl-bio provides the grid (same pattern as intro)
   ============================================= */
.cl-ph-pollinators {
  min-height: 400px !important;
  border-bottom: none !important;
}
.cl-ph-poll-left {
  padding: 64px 56px 64px 0 !important;
  justify-content: flex-start !important;
  border-right: 0.5px solid #DDD9D2 !important;
}
.cl-ph-poll-left .cl-dh-h2 {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}
.cl-ph-poll-left .cl-dh-rain-body {
  max-width: 100% !important;
  margin-bottom: 20px !important;
}
.cl-ph-poll-left .cl-dh-rain-body:last-child { margin-bottom: 0 !important; }
.cl-ph-poll-right {
  padding: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #DDD9CF;
  box-sizing: border-box;
}
.cl-ph-poll-img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 6px !important;
  position: static !important;
  inset: auto !important;
}


/* =============================================
   WATER HARVESTING — two-column, text left / image right
   .cl-bio provides the grid (same pattern as intro)
   ============================================= */
.cl-ph-water {
  min-height: 500px !important;
  border-bottom: none !important;
}
.cl-ph-water-left {
  padding: 64px 56px 64px 0 !important;
  justify-content: flex-start !important;
  border-right: 0.5px solid #DDD9D2 !important;
}
.cl-ph-water-left .cl-dh-h2 {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}
.cl-ph-water-left .cl-dh-rain-body {
  max-width: 100% !important;
  margin-bottom: 20px !important;
}
.cl-ph-water-left .cl-dh-rain-body:last-child { margin-bottom: 0 !important; }
.cl-ph-pull-quote {
  margin: 32px 0 !important;
  max-width: 480px;
}
.cl-ph-water-right {
  padding: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #DDD9CF;
  box-sizing: border-box;
}
.cl-ph-water-img {
  width: 100% !important;
  height: 580px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 6px !important;
  position: static !important;
  inset: auto !important;
}


/* =============================================
   CTA / SIGN-OFF
   ============================================= */
.cl-ph-cta {
  padding: 64px 80px;
  border-bottom: 0.5px solid #DDD9D2;
  background: #FAF8F5;
  box-sizing: border-box;
}
.cl-ph-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}
.cl-ph-cta-text {
  max-width: 480px;
}
.cl-ph-cta-email {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #2C2830 !important;
  margin: 12px 0 0 0 !important;
}
.cl-ph-cta-action {
  flex-shrink: 0;
}


/* =============================================
   RESPONSIVE — 900px
   ============================================= */
@media (max-width: 900px) {
  .cl-ph-breadcrumb { padding: 16px 40px 0; }

  /* Intro */
  .cl-ph-intro { display: block !important; }
  .cl-ph-intro .cl-bio__left { padding: 52px 40px !important; border-right: none !important; border-bottom: 0.5px solid #DDD9D2; }
  .cl-ph-intro-right { padding: 40px !important; }
  .cl-ph-intro-img { height: 280px !important; }

  /* Pollinators */
  .cl-ph-pollinators { display: block !important; }
  .cl-ph-poll-left { padding: 52px 40px !important; border-right: none !important; border-bottom: 0.5px solid #DDD9D2; }
  .cl-ph-poll-right { padding: 40px !important; }
  .cl-ph-poll-img { height: 260px !important; }

  /* Water harvesting */
  .cl-ph-water { display: block !important; }
  .cl-ph-water-left { padding: 52px 40px !important; border-right: none !important; border-bottom: 0.5px solid #DDD9D2; }
  .cl-ph-water-right { padding: 40px !important; }
  .cl-ph-water-img { height: 300px !important; }

  /* Content sections */
  .cl-ph-section,
  .cl-ph-cta { padding: 52px 40px; }

  /* CTA */
  .cl-ph-cta-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
}


/* =============================================
   RESPONSIVE — 600px
   ============================================= */
@media (max-width: 600px) {
  .cl-ph-breadcrumb { padding: 14px 24px 0; }

  .cl-ph-intro .cl-bio__left { padding: 40px 24px !important; }
  .cl-ph-intro-right { padding: 24px !important; }
  .cl-ph-intro-img { height: 220px !important; }

  .cl-ph-poll-left { padding: 40px 24px !important; }
  .cl-ph-poll-right { padding: 24px !important; }
  .cl-ph-poll-img { height: 220px !important; }

  .cl-ph-water-left { padding: 40px 24px !important; }
  .cl-ph-water-right { padding: 24px !important; }
  .cl-ph-water-img { height: 240px !important; }

  .cl-ph-section,
  .cl-ph-cta { padding: 48px 24px; }

  .cl-ph-cta-email { font-size: 17px !important; }
}/* End custom CSS */