#problem { background: #2C5E44; }

.pb {
  --ink:#FBF8F2; --sec:rgba(255,255,255,.78); --ter:rgba(255,255,255,.62);
  --greenT:#3AB648; --hair:rgba(255,255,255,.22);
  max-width:1240px; margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,2.5rem); padding-block:clamp(4rem,9vw,7rem);
  color:var(--ink);
}
.pb-eyebrow { margin:0 0 clamp(1.25rem,2.2vw,1.75rem); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--greenT); }
.pb-head { margin:0; max-width:20ch; font-size:clamp(2rem,4.4vw,3.6rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.04; text-wrap:balance; color:var(--ink); }

.pb-map { margin:clamp(2.75rem,5.5vw,4.25rem) 0 0; display:grid; justify-items:center; }
.pb-farm { margin:0; padding:.55rem 1.4rem; border-radius:999px;
  border:1.5px solid var(--greenT); background:rgba(58,182,72,.18);
  font-size:clamp(.95rem,1.15vw,1.05rem); font-weight:600; color:var(--ink); }

.pb-join { position:relative; width:100%; height:clamp(2.2rem,4vw,3rem); }
.pb-join::before { content:""; position:absolute; top:0; left:50%; width:1px; height:50%;
  background:var(--hair); }
.pb-join-bar { position:absolute; top:50%; left:12.5%; width:75%; height:1px;
  background:var(--hair); }

.pb-systems { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.75rem); width:100%; }
.pb-sys { position:relative; padding-top:clamp(1.6rem,3vw,2.2rem); text-align:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .55s ease var(--d,0ms),transform .55s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.pb.in .pb-sys { opacity:1; transform:none; }
.pb-sys-stem { position:absolute; top:calc(-1 * clamp(2.2rem,4vw,3rem) / 2); left:50%;
  width:1px; height:calc(clamp(2.2rem,4vw,3rem) / 2 + clamp(1.6rem,3vw,2.2rem));
  background:var(--hair); }

.pb-ico { display:block; margin-inline:auto; color:var(--greenT); }
.pb-sys-k { margin:.5rem 0 0; font-size:clamp(.98rem,1.15vw,1.08rem); font-weight:600; color:var(--ink); }
.pb-sys-e { margin:.35rem auto 0; max-width:22ch; font-size:.84rem; line-height:1.4; color:var(--sec); }

.pb-quotes { margin:clamp(2.75rem,5.5vw,4.25rem) auto 0; max-width:48ch; display:grid;
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease .34s,transform .6s cubic-bezier(.2,.7,.2,1) .34s; }
.pb.in .pb-quotes { opacity:1; transform:none; }
.pb-q { grid-area:1 / 1; margin:0; padding:0; text-align:center;
  opacity:0; transition:opacity .75s ease; }
.pb-q.is-on { opacity:1; }
.pb-q blockquote { margin:0; font-size:clamp(1.15rem,1.95vw,1.6rem); font-weight:500;
  line-height:1.38; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.pb-q blockquote::before { content:"\201C"; }
.pb-q blockquote::after { content:"\201D"; }
.pb-q figcaption { margin-top:.85rem; font-size:.8rem; color:var(--ter); }

.pb-dots { margin:clamp(1.1rem,2vw,1.5rem) auto 0; display:flex; gap:.45rem; justify-content:center; }
.pb-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28);
  transition:background .4s ease; }
.pb-dot.is-on { background:var(--greenT); }

.pb-more { margin:clamp(1.75rem,3.5vw,2.5rem) 0 0; text-align:center; font-size:.82rem;
  color:var(--ter); }
.pb-more .src-a { color:rgba(255,255,255,.88); text-decoration-color:rgba(255,255,255,.45); }
.pb-more .src-a:hover { color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .pb-quotes { max-width:60ch; gap:clamp(1.25rem,2.5vw,1.75rem); }
  .pb-q { grid-area:auto; opacity:1; transition:none; }
  .pb-q blockquote { font-size:clamp(1rem,1.3vw,1.15rem); }
  .pb-dots { display:none; }
}

@media (max-width:820px) {
  .pb-systems { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(1.75rem,4vw,2.5rem); }
  .pb-join-bar { left:25%; width:50%; }
}
@media (max-width:520px) {
  .pb-systems { grid-template-columns:1fr; }
  .pb-join-bar { display:none; }
  .pb-sys-stem { display:none; }
  .pb-sys { padding-top:0; }
}