/* ===== Responsive Stats Strip (center on desktop, left on mobile) ===== */
.stats-strip__grid {
  display: flex !important;
  justify-content: center;       /* center for desktop */
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.stats-strip__col {
  flex: 1 1 33.33%;
  display: flex;
  justify-content: center;       /* center for desktop */
  align-items: center;
  padding: 0.5rem 0;
}

.stats-item {
  text-align: center;
}

.stats-item__num .numline{
  display: inline-flex;
  align-items: baseline;         /* keep "+" inline with number */
  gap: 0.15em;
  white-space: nowrap;
}

.stats-item__num .num{
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
  color: #2f4a24;
  line-height: 0.5;
}

.stats-item__num .plus{
  font-size: 0.6em;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-0.15em);
}

.stats-item__label {
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  color: #385b2b;
  font-weight: 600;
  margin-top: 0.2rem;
  opacity: 0.95;
}

/* separator only on large screens */
@media (min-width: 783px) {
  .stats-strip__col:not(:first-child) {
    border-left: 1px solid rgba(0,0,0,0.1);
  }
}
/* 📱 mobile view: show number and label inline left-aligned */
@media (max-width: 782px) {
  .stats-strip__grid {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
  }

  .stats-strip__col {
    flex: 1 1 100%;
    justify-content: flex-start;
    border-left: none;
  }

  .stats-item {
    text-align: left;
    display: inline-flex;         /* 🔹 keep num + label in one line */
    align-items: baseline;        /* align number & text nicely */
    gap: 0.4em;                   /* spacing between num and label */
    padding-left: 0.5rem;
  }

  .stats-item__num {
    margin: 0;
  }

  .stats-item__label {
    margin: 0;
    font-weight: 600;
    opacity: 0.95;
  }

  .stats-item__num .numline {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    gap: 0.1em;
  }
}

/* second banner style */
/* === Full-width promo grid === */
.promo-grid {
  /* make sure it actually uses the row */
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* big left, smaller right */
  grid-template-rows: 1fr 1fr;                          /* two equal rows on the right */
  gap: clamp(12px, 2vw, 24px);
  align-items: stretch;
}

/* positions: left spans both rows; right split */
.promo--large  { grid-column: 1; grid-row: 1 / span 2; }
.promo--top    { grid-column: 2; grid-row: 1; }
.promo--bottom { grid-column: 2; grid-row: 2; }

/* promo card base */
.promo{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  isolation: isolate;
}
.promo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.18));
}
.promo > *{ position: relative; z-index: 1; }

/* size so they feel substantial */
.promo--large { min-height: clamp(320px, 38vw, 520px); }
.promo--small { min-height: clamp(180px, 20vw, 260px); }

/* text + buttons */
.promo__title{ margin:0 0 .25rem 0; font-weight:800; font-size: clamp(1.3rem, 3.4vw, 2.2rem); }
.promo__subtitle{ margin:0 0 .75rem 0; opacity:.95; }
.kbtn{
  display:inline-block; padding:.6rem 1rem; border-radius:999px;
  background:#6bb252; color:#fff!important; font-weight:700; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.16); transition:transform .08s, box-shadow .2s, background .2s;
}
.kbtn:hover{ transform: translateY(-1px); }
.kbtn--light{ background: rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(2px); }

/* === Responsive === */
/* tablet: big left full-width, two right cards side-by-side */
@media (max-width: 1024px){
  .promo-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .promo--large  { grid-column: 1 / -1; grid-row: 1; }
  .promo--top    { grid-column: 1; grid-row: 2; }
  .promo--bottom { grid-column: 2; grid-row: 2; }
}

/* mobile: stack all three, full width */
@media (max-width: 782px){
  .promo-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .promo--large, .promo--top, .promo--bottom { grid-column: 1; grid-row: auto; }
  .promo--large { min-height: clamp(240px, 52vw, 380px); }
  .promo--small { min-height: clamp(160px, 44vw, 240px); }
}