/* Backyard Bins homepage draft. Scoped so it cannot affect existing pages. */
.bbx5-home {
  --bb-green: #80a409;
  --bb-green-dark: #2c4e15;
  --bb-header: #282e15;
  --bb-gold: #d7af28;
  --bb-ink: #242820;
  --bb-copy: #343a30;
  --bb-muted: #6d7468;
  --bb-soft: #f8faef;
  --bb-line: #dce4ce;
  --bb-shadow: 0 18px 50px rgba(52, 62, 32, .12);
  color: var(--bb-copy);
  font-family: "Open Sans", Arial, sans-serif;
}

.bbx5-home,
.bbx5-home * { box-sizing: border-box; }
.bbx5-home .wpb_content_element { margin-bottom: 0; }
.bbx5-home .vc_custom_heading:after { display: none !important; }
.bbx5-home p,
.bbx5-home li { font-family: "Open Sans", Arial, sans-serif !important; }
.bbx5-home h1,
.bbx5-home h2,
.bbx5-home h3,
.bbx5-home .bbx5-h1,
.bbx5-home .bbx5-h2,
.bbx5-home .bbx5-h3 { font-family: "Roboto Slab", Georgia, serif !important; text-transform: none !important; }
.bbx5-home > .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }
.bbx5-section { padding-top: 92px; padding-bottom: 92px; }

.bbx5-kicker {
  position: relative;
  margin: 0 0 22px !important;
  padding-left: 44px;
  color: var(--bb-green-dark) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1.4 !important;
}
.bbx5-kicker:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 32px;
  height: 3px;
  background: var(--bb-gold);
}
.bbx5-h1 {
  max-width: 680px;
  margin: 0 !important;
  color: var(--bb-ink) !important;
  font-size: clamp(46px, 5vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}
.bbx5-h2 {
  margin: 0 !important;
  color: var(--bb-ink) !important;
  font-size: clamp(36px, 4vw, 50px) !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
  letter-spacing: -.02em !important;
}
.bbx5-h3 {
  margin: 0 0 14px !important;
  color: var(--bb-ink) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.bbx5-intro {
  max-width: 740px;
  margin: 22px auto 46px !important;
  color: var(--bb-muted);
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

/* Buttons */
.bbx5-primary .vc_btn3,
.bbx5-secondary .vc_btn3 {
  min-height: 54px;
  padding: 15px 27px !important;
  border-radius: 6px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.bbx5-primary .vc_btn3 {
  border-color: var(--bb-green) !important;
  background: var(--bb-green) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(128, 164, 9, .25);
}
.bbx5-secondary .vc_btn3 {
  border: 2px solid var(--bb-ink) !important;
  background: transparent !important;
  color: var(--bb-ink) !important;
}
.bbx5-primary .vc_btn3:hover,
.bbx5-secondary .vc_btn3:hover { transform: translateY(-2px); }

/* Hero copied from the service-page visual system */
.bbx5-hero {
  position: relative;
  overflow: hidden;
  padding-top: 102px;
  padding-bottom: 126px;
  background-color: #fbfcf5;
  background-image: radial-gradient(rgba(128, 164, 9, .13) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}
.bbx5-hero:after {
  content: "";
  position: absolute;
  inset: 0 0 0 47%;
  background: linear-gradient(90deg, rgba(251,252,245,0), rgba(251,252,245,.9));
  pointer-events: none;
}
.bbx5-hero > .container { position: relative; z-index: 2; }
.bbx5-hero-copy > .vc_column-inner { padding-right: 62px !important; }
.bbx5-lead {
  max-width: 650px;
  margin-top: 28px !important;
  color: var(--bb-copy);
  font-size: 19px;
  line-height: 1.7;
}
.bbx5-actions { margin-top: 30px; }
.bbx5-actions > .wpb_column:first-child > .vc_column-inner { padding-right: 6px; }
.bbx5-actions > .wpb_column:last-child > .vc_column-inner { padding-left: 6px; }
.bbx5-points { margin-top: 28px !important; }
.bbx5-points ul { display: flex; flex-wrap: wrap; gap: 12px 23px; margin: 0; padding: 0; list-style: none; }
.bbx5-points li { list-style: none !important; color: var(--bb-copy); font-size: 13px; font-weight: 700; }
.bbx5-points li:before { content: "●"; margin-right: 8px; color: var(--bb-green); }
.bbx5-hero-media > .vc_column-inner { position: relative; padding: 0 22px 22px 0 !important; }
.bbx5-hero-media > .vc_column-inner:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 76%;
  height: 68%;
  border-radius: 10px;
  background: var(--bb-gold);
  z-index: 0;
}
.bbx5-hero-image { position: relative; z-index: 2; margin: 0 !important; }
.bbx5-hero-image .vc_single_image-wrapper { display: block; width: 100%; height: 470px; overflow: hidden; border-radius: 10px; box-shadow: var(--bb-shadow); }
.bbx5-hero-image img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; }
.bbx5-price-tag {
  position: absolute;
  z-index: 4;
  left: -24px;
  bottom: 54px;
  min-width: 180px;
  padding: 18px 22px;
  border-left: 5px solid var(--bb-gold);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(45, 55, 25, .16);
}
.bbx5-price-tag p { margin: 0; }
.bbx5-price-tag strong { display: block; color: var(--bb-green-dark); font: 700 25px/1.15 "Roboto Slab", Georgia, serif; }
.bbx5-price-tag span { display: block; margin-top: 5px; color: var(--bb-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Finder */
.bbx5-finder { position: relative; z-index: 8; margin-top: -62px; padding-bottom: 48px; }
.bbx5-finder-card > .vc_column-inner {
  padding: 34px 40px 38px !important;
  border-bottom: 7px solid var(--bb-green);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--bb-shadow);
}
.bbx5-finder .bbx5-h2 { font-size: 34px !important; }
.bbx5-finder .bbx5-kicker { margin-bottom: 10px !important; }
.bbx5-finder-copy { padding-left: 38px; color: var(--bb-muted); font-size: 16px; line-height: 1.7; }
.bbx5-quiz { margin-top: 28px !important; padding-top: 28px; border-top: 1px solid var(--bb-line); }

/* Waste types */
.bbx5-waste { background: #fff; }
.bbx5-waste > .wpb_column > .vc_column-inner > .bbx5-kicker { display: table; margin-left: auto !important; margin-right: auto !important; }
.bbx5-card-row { margin-left: -14px; margin-right: -14px; }
.bbx5-card-row + .bbx5-card-row { margin-top: 28px; }
.bbx5-waste-card > .vc_column-inner {
  height: 100%;
  margin: 0 14px;
  padding: 0 30px 28px !important;
  overflow: hidden;
  border: 1px solid #d8e4b7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(49, 65, 23, .08);
}
.bbx5-card-image { margin: 0 -30px 28px !important; }
.bbx5-card-image .vc_single_image-wrapper { display: block; width: calc(100% + 60px); height: 245px; overflow: hidden; }
.bbx5-card-image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.bbx5-card-kicker {
  margin: 0 0 11px !important;
  color: var(--bb-green-dark) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
}
.bbx5-waste-card .wpb_text_column { color: var(--bb-muted); font-size: 15px; line-height: 1.65; }
.bbx5-warning { margin-top: 15px !important; padding: 12px 14px; border-left: 4px solid var(--bb-gold); background: #faf7e9; color: var(--bb-copy); }
.bbx5-text-link { margin-top: 12px; margin-bottom: 0 !important; }
.bbx5-text-link .vc_btn3 { padding: 0 0 5px !important; border: 0 !important; border-bottom: 2px solid var(--bb-green) !important; border-radius: 0 !important; background: transparent !important; color: var(--bb-green-dark) !important; font-size: 14px !important; font-weight: 800 !important; text-transform: none !important; }

/* Sizes */
.bbx5-sizes { background: var(--bb-soft); }
.bbx5-sizes > .wpb_column > .vc_column-inner > .bbx5-kicker { display: table; margin-left: auto !important; margin-right: auto !important; }
.bbx5-size-row { margin-left: -13px; margin-right: -13px; }
.bbx5-size-card > .vc_column-inner {
  position: relative;
  height: 100%;
  margin: 0 13px;
  padding: 30px 28px 32px !important;
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 26px rgba(49, 65, 23, .07);
}
.bbx5-size-card.bbx5-featured > .vc_column-inner { border: 2px solid var(--bb-green); transform: translateY(-10px); box-shadow: 0 16px 36px rgba(49, 65, 23, .13); }
.bbx5-popular { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 6px 15px; border-radius: 20px; background: var(--bb-green); color: #fff; white-space: nowrap; }
.bbx5-popular p { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.bbx5-bin-image .vc_single_image-wrapper { display: block; height: 180px; }
.bbx5-bin-image img { width: 100% !important; height: 100% !important; object-fit: contain; }
.bbx5-size-card .wpb_text_column { min-height: 70px; color: var(--bb-muted); font-size: 14px; line-height: 1.6; }
.bbx5-size-price { margin: 20px 0 16px !important; color: var(--bb-green-dark) !important; font: 700 24px/1.2 "Roboto Slab", Georgia, serif !important; }
.bbx5-all-sizes { margin-top: 38px; }

/* Proof */
.bbx5-proof { background: #fff; }
.bbx5-proof-media > .vc_column-inner { position: relative; padding: 0 24px 24px 0 !important; }
.bbx5-proof-media > .vc_column-inner:after { content: ""; position: absolute; right: 0; bottom: 0; width: 78%; height: 72%; border-radius: 8px; background: var(--bb-gold); z-index: 0; }
.bbx5-proof-image { position: relative; z-index: 2; }
.bbx5-proof-image .vc_single_image-wrapper { display: block; width: 100%; height: 490px; overflow: hidden; border-radius: 8px; box-shadow: var(--bb-shadow); }
.bbx5-proof-image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.bbx5-proof-copy > .vc_column-inner { padding-left: 62px !important; }
.bbx5-proof-lead { margin-top: 23px !important; color: var(--bb-muted); font-size: 17px; line-height: 1.75; }
.bbx5-stats { margin-top: 30px; margin-bottom: 24px; padding: 22px 0; border-top: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); }
.bbx5-stat { margin: 0 0 4px !important; color: var(--bb-green-dark) !important; font: 700 31px/1.05 "Roboto Slab", Georgia, serif !important; }
.bbx5-stats p { margin: 0; color: var(--bb-muted); font-size: 12px; font-weight: 700; }
.bbx5-checks { margin-bottom: 26px !important; }
.bbx5-checks ul { margin: 0; padding: 0; list-style: none; }
.bbx5-checks li { margin: 10px 0; list-style: none !important; }
.bbx5-checks li:before { content: "✓"; display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 10px; border-radius: 50%; background: #eaf2ce; color: var(--bb-green-dark); font-weight: 900; }

/* FAQ */
.bbx5-faq { background: var(--bb-soft); }
.bbx5-faq > .wpb_column:first-child > .vc_column-inner { padding-right: 55px !important; }
.bbx5-faq > .wpb_column:first-child .wpb_text_column { margin-top: 22px !important; color: var(--bb-muted); font-size: 16px; line-height: 1.7; }
.bbx5-faq-list .vc_toggle { margin: 0 0 12px; padding: 20px 22px; border: 1px solid var(--bb-line); border-radius: 7px; background: #fff; }
.bbx5-faq-list .vc_toggle_title h4 { color: var(--bb-ink); font: 600 18px/1.4 "Roboto Slab", Georgia, serif; }
.bbx5-faq-list .vc_toggle_content { color: var(--bb-muted); font-size: 15px; line-height: 1.7; }

/* Final CTA */
.bbx5-final { padding-top: 62px; padding-bottom: 62px; background: var(--bb-header); color: #fff; }
.bbx5-final .bbx5-kicker { color: #d2df9e !important; }
.bbx5-final .bbx5-h2 { color: #fff !important; }
.bbx5-final .wpb_text_column { margin-top: 14px !important; color: rgba(255,255,255,.78); font-size: 17px; }
.bbx5-final-actions .vc_btn3 { min-width: 210px; }

@media (max-width: 991px) {
  .bbx5-section { padding-top: 72px; padding-bottom: 72px; }
  .bbx5-hero { padding-top: 75px; }
  .bbx5-hero-copy > .vc_column-inner { padding-right: 30px !important; }
  .bbx5-h1 { font-size: 48px !important; }
  .bbx5-hero-image .vc_single_image-wrapper { height: 420px; }
  .bbx5-waste-card > .vc_column-inner { margin: 0 8px; }
  .bbx5-card-row { margin-left: -8px; margin-right: -8px; }
  .bbx5-proof-copy > .vc_column-inner { padding-left: 38px !important; }
}

@media (max-width: 767px) {
  .bbx5-section { padding: 58px 0; }
  .bbx5-h1 { font-size: 42px !important; line-height: 1.12 !important; }
  .bbx5-h2 { font-size: 34px !important; }
  .bbx5-h3 { font-size: 23px !important; }
  .bbx5-hero { padding: 62px 0 108px; }
  .bbx5-hero-copy > .vc_column-inner { padding-right: 15px !important; }
  .bbx5-actions > .wpb_column > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
  .bbx5-actions .vc_btn3-container { display: block; margin-bottom: 10px; }
  .bbx5-actions .vc_btn3 { width: 100%; }
  .bbx5-points ul { display: block; }
  .bbx5-points li { margin: 9px 0; }
  .bbx5-hero-media { margin-top: 38px; }
  .bbx5-hero-media > .vc_column-inner { padding-right: 14px !important; padding-bottom: 14px !important; }
  .bbx5-hero-image .vc_single_image-wrapper { height: 360px; }
  .bbx5-price-tag { left: 15px; bottom: 35px; }
  .bbx5-finder { margin-top: -46px; padding: 0 15px 38px; }
  .bbx5-finder-card > .vc_column-inner { padding: 26px 23px 30px !important; }
  .bbx5-finder-copy { padding-left: 0; margin-top: 15px !important; }
  .bbx5-card-row { margin: 0; }
  .bbx5-card-row + .bbx5-card-row { margin-top: 0; }
  .bbx5-waste-card > .vc_column-inner { margin: 0 0 22px; padding-bottom: 25px !important; }
  .bbx5-card-image .vc_single_image-wrapper { height: 220px; }
  .bbx5-size-card > .vc_column-inner { margin: 0 0 22px; }
  .bbx5-size-card.bbx5-featured > .vc_column-inner { transform: none; }
  .bbx5-proof-media > .vc_column-inner { padding-right: 14px !important; padding-bottom: 14px !important; }
  .bbx5-proof-image .vc_single_image-wrapper { height: 360px; }
  .bbx5-proof-copy > .vc_column-inner { padding-left: 15px !important; padding-top: 42px !important; }
  .bbx5-faq > .wpb_column:first-child > .vc_column-inner { padding-right: 15px !important; padding-bottom: 30px !important; }
  .bbx5-final { padding: 50px 15px; text-align: left; }
  .bbx5-final-actions { margin-top: 24px; }
  .bbx5-final-actions .vc_btn3-container { text-align: left !important; }
}