.garden-page .compost-hero {
  min-height: 820px;
  background:
    linear-gradient(90deg, rgba(8,22,15,.94) 0%, rgba(9,27,17,.88) 43%, rgba(9,27,17,.42) 72%, rgba(9,27,17,.2) 100%),
    url('images/gardens/garden-watering-hero.webp') center / cover no-repeat;
}

.garden-page .compost-hero h1 { max-width: 10ch; }
.garden-page .compost-hero-copy { max-width: 50rem; }
.garden-page .compost-principle { background: #21452f; }

.garden-intro-image {
  min-height: 34rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 1.4rem 3rem rgba(23,26,23,.12);
}
.garden-intro-image img { display: block; width: 100%; height: 100%; min-height: 34rem; object-fit: cover; }

.garden-intro-copy { align-self: center; }
.garden-intro-copy p { margin: 0 0 1.2rem; font-size: clamp(1.05rem,1.45vw,1.22rem); line-height: 1.72; }
.garden-intro-copy .garden-definition {
  margin-top: 1.8rem;
  padding: 1.25rem 1.4rem;
  border-left: 4px solid #00a800;
  border-radius: 0 1rem 1rem 0;
  background: #fff;
  font-weight: 650;
}

.garden-benefits { padding: clamp(5.5rem,9vw,8rem) 0; background: #fff; }
.garden-benefits .benefit-card:nth-child(2) { background: #e3edd0; }
.garden-benefits .benefit-card:nth-child(3) { background: #dce9e5; }
.garden-benefits .benefit-card:nth-child(4) { background: #e9dfcd; }

.garden-uses { padding: clamp(6rem,10vw,9rem) 0; background: #17372d; color: #fff; }
.garden-uses .section-title { max-width: 11ch; }
.garden-uses-lead { max-width: 47rem; margin: 1.4rem 0 3rem; color: #d8e3dc; font-size: 1.15rem; line-height: 1.7; }
.garden-use-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.garden-use-card { display: flex; min-height: 28rem; padding: 1.7rem; flex-direction: column; justify-content: flex-end; overflow: hidden; position: relative; border-radius: 1.35rem; background: #294c3b; }
.garden-use-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 20%,rgba(7,20,14,.93) 86%); }
.garden-use-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.garden-use-card::before { z-index: 1; }
.garden-use-card > :not(.garden-use-image) { position: relative; z-index: 2; }
.garden-use-card .garden-use-number {
  align-self: flex-start;
  padding: .5rem .72rem .42rem;
  border-radius: .45rem;
  background: #00a800;
  color: #fff;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.2);
  font: 800 .9rem/1 var(--condensed);
  letter-spacing: .08em;
}
.garden-use-card h3 { margin: .85rem 0 .65rem; font: 800 clamp(2.2rem,3.4vw,3.3rem)/.88 var(--condensed); }
.garden-use-card p { margin: 0; color: #e0e8e3; line-height: 1.58; }

.garden-charge { padding: clamp(6rem,10vw,9rem) 0; }
.garden-charge-head { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem,8vw,8rem); align-items: end; }
.garden-charge-head > p { margin: 0; font-size: 1.15rem; line-height: 1.7; }
.garden-pore-explainer {
  display: grid;
  grid-template-columns: minmax(17rem,.72fr) 1.28fr;
  gap: clamp(1.5rem,4vw,3.5rem);
  align-items: center;
  margin: 3rem 0 1.2rem;
  padding: clamp(1.15rem,2.5vw,2rem);
  border-radius: 1.4rem;
  background: #17372d;
  color: #fff;
}
.garden-pore-explainer figure { margin: 0; overflow: hidden; border-radius: 1rem; }
.garden-pore-explainer img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.garden-pore-explainer .kicker { color: #74e768; }
.garden-pore-explainer h3 { margin: .65rem 0 .9rem; font: 800 clamp(2.4rem,4vw,4.4rem)/.9 var(--condensed); }
.garden-pore-explainer p { margin: 0; color: #e0e9e3; font-size: 1.08rem; line-height: 1.7; }
.garden-charge .charging-card:nth-child(2) { background: #dfeacb; }
.garden-charge-note { margin-top: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1rem; background: #17372d; color: #e7eee9; line-height: 1.65; }

.garden-application { padding: clamp(6rem,10vw,9rem) 0; background: #e5eadb; }
.garden-application-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(3rem,7vw,7rem); }
.garden-application-copy { position: sticky; top: 2rem; align-self: start; }
.garden-application-copy p { font-size: 1.1rem; line-height: 1.7; }
.garden-step-list { display: grid; gap: .85rem; }
.garden-step { display: grid; grid-template-columns: 3.1rem 1fr; gap: 1rem; padding: 1.3rem; border-radius: 1rem; background: rgba(255,255,255,.75); }
.garden-step > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: #00a800; color: #fff; font-weight: 800; }
.garden-step h3 { margin: 0 0 .4rem; font: 800 1.65rem/1 var(--condensed); }
.garden-step p { margin: 0; line-height: 1.6; }
.garden-calculator-callout { display: flex; gap: 1.2rem; justify-content: space-between; align-items: center; margin-top: 1.1rem; padding: 1.35rem; border-radius: 1rem; background: #fff; }
.garden-calculator-callout p { margin: 0; }
.garden-calculator-callout .button { flex: 0 0 auto; }

.garden-systems { padding: clamp(6rem,10vw,9rem) 0; background: #fff; }
.garden-systems-head { max-width: 55rem; }
.garden-systems-head p { font-size: 1.14rem; line-height: 1.72; }
.garden-system-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .8rem; margin-top: 2.5rem; }
.garden-system-card { min-height: 13rem; padding: 1.25rem; border: 1px solid #d4dbd4; border-radius: 1rem; background: #f4f3ed; }
.garden-system-card:nth-child(even) { background: #e3ecd0; }
.garden-system-card h3 { margin: 2.7rem 0 .6rem; font: 800 1.55rem/.95 var(--condensed); }
.garden-system-card p { margin: 0; font-size: .92rem; line-height: 1.5; }

.garden-products { padding: clamp(6rem,10vw,9rem) 0; background: #f3f1e8; }
.garden-products .product-grid { grid-template-columns: repeat(3,1fr); }
.garden-products .product-card { min-height: 18rem; }

.garden-bridge { padding: clamp(5rem,8vw,7rem) 0; background: #dce8c1; }
.garden-bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: center; }
.garden-bridge p { font-size: 1.12rem; line-height: 1.7; }
.garden-bridge-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.garden-page .commercial-cta { background: #e8ddc9; }

@media (max-width: 1000px) {
  .garden-use-grid { grid-template-columns: 1fr 1fr; }
  .garden-use-card:last-child { grid-column: 1 / -1; min-height: 22rem; }
  .garden-system-grid { grid-template-columns: repeat(3,1fr); }
  .garden-products .product-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .garden-page .compost-hero { min-height: auto; background-position: 62% center; }
  .garden-intro-image, .garden-intro-image img { min-height: 22rem; }
  .garden-use-grid, .garden-charge-head, .garden-application-grid, .garden-bridge-grid { grid-template-columns: 1fr; }
  .garden-pore-explainer { grid-template-columns: 1fr; }
  .garden-use-card, .garden-use-card:last-child { min-height: 23rem; grid-column: auto; }
  .garden-application-copy { position: static; }
  .garden-system-grid, .garden-products .product-grid { grid-template-columns: 1fr; }
  .garden-system-card { min-height: auto; }
  .garden-system-card h3 { margin-top: 1.7rem; }
  .garden-calculator-callout { align-items: flex-start; flex-direction: column; }
}