/* ==========================================================================
   CONNECT MORE OF THE FARM'S BUSINESS.

   Sits between #whyof (pale ground) and #catalyst. Full-width dark band.

   ONE PICTURE, NOT FOUR CARDS. Earlier builds put the services in bordered
   cards, which read as an admin interface and made the connectors decorative.
   Grouping is now spatial -- four arcs round one ring, with the group name
   outside each cluster and no boxes anywhere.

   NO PHOTOGRAPH. A landscape said nothing about the relationship, and a cropped
   product screenshot was illegible at this size and showed the company's own
   account rather than a farm.

   GROUND IS #24523B, NOT #2C5E44. Green 300 is the accent through the whole
   drawing and measures 4.44:1 on #2C5E44 -- under the 4.5:1 floor -- against
   5.28:1 on the deeper token. White is 8.95:1 here, cream at .74 is 5.47:1.
   ========================================================================== */
#partner {
  background: #24523B;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}
.pe {
  --ink: #FFFFFF;
  /* .74 is the floor. Quieter tints measured 3.79:1 and 4.36:1 against the 4.5
     minimum, and opacity is never used to signal state: at .55 this body colour
     falls to 2.67:1. Hierarchy is size, weight and stroke. */
  --body: rgba(251, 248, 242, .74);
  --accent: #8DD895;
  --hair: rgba(255, 255, 255, .16);
  max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--body);
}

/* ------------------------------------------------------------------ head */
.pe-eyebrow {
  margin: 0 0 clamp(.9rem, 1.5vw, 1.3rem);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.pe-h {
  margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.03em; line-height: 1.06;
  font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 34ch;
}
/* the second line is the qualifier, so it steps back without losing contrast */
.pe-h span { color: var(--body); }

/* ------------------------------------------------------------- the figure */
.pe-fig { margin: clamp(2rem, 3.6vw, 3rem) 0 0; }
/* the mobile block is the default; the query swaps in the radial figure.
   Declared here, before any later rule, or source order re-shows both. */
.ec-svg { display: none; width: 100%; height: auto; }
@media (min-width: 900px) { .ec-svg { display: block; } .ec-m { display: none; } }

.ec-band { fill: none; stroke: rgba(141, 216, 149, .13); }
.ec-edge { fill: none; stroke: #8DD895; stroke-width: 2; }
.ec-farm { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; }
.ec-farm-t {
  fill: #FFFFFF; font-family: inherit; font-size: 30px; font-weight: 700; letter-spacing: 1.5px;
}
.ec-of { fill: #8DD895; font-family: inherit; font-size: 26px; font-weight: 500; letter-spacing: 6px; }
.ec-of-s { fill: rgba(251, 248, 242, .74); font-family: inherit; font-size: 15px; letter-spacing: .4px; }

/* spokes carry the connection; only the highlighted one is solid accent */
.ec-spoke { stroke: rgba(141, 216, 149, .40); stroke-width: 1.5; }
.ec-spoke.is-hl { stroke: #8DD895; stroke-width: 2.5; }

.ec-ring2 { fill: #24523B; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.ec-ico { fill: none; stroke: rgba(251, 248, 242, .82); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ec-lbl { fill: rgba(251, 248, 242, .74); font-family: inherit; font-size: 19px; }
.ec-grp {
  fill: #8DD895; font-family: inherit; font-size: 15px; font-weight: 500;
  letter-spacing: 2.2px; text-transform: uppercase;
}
/* the single highlight: the first proposed partnership */
.ec-node.is-hl .ec-ring2 { stroke: #8DD895; stroke-width: 2.5; fill: rgba(141,216,149,.10); }
.ec-node.is-hl .ec-ico { stroke: #FFFFFF; }
.ec-node.is-hl .ec-lbl { fill: #FFFFFF; font-weight: 500; }

.ec-call path { fill: none; stroke: #8DD895; stroke-width: 1.5; stroke-dasharray: 4 4; }
.ec-call-k { fill: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 500; }
.ec-call-v { fill: rgba(251, 248, 242, .74); font-family: inherit; font-size: 15px; }

/* one label for the whole drawing, so the ring cannot imply the integrations
   already exist */
/* Above the drawing: the reader needs to know it is a vision, not an
   inventory, before reading a single service name. */
.pe-cap {
  margin: 0 0 clamp(1rem, 1.8vw, 1.4rem); text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------- mobile
   Same content, different drawing: at 390px the radial labels would land near
   7px. A compact ring, then the four clusters as grouped lines -- still no
   boxes. */
.ec-m-svg { display: block; width: min(280px, 78%); height: auto; margin: 0 auto; }
.ec-farm-t.is-m { font-size: 26px; }
.ec-of.is-m { font-size: 21px; letter-spacing: 4px; }
.ec-m-s {
  margin: .9rem 0 0; text-align: center; font-size: .88rem; line-height: 1.45; color: var(--body);
}
.ec-m-groups {
  display: grid; gap: clamp(1rem, 2.4vw, 1.4rem);
  margin-top: clamp(1.6rem, 3.4vw, 2.2rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.6rem); border-top: 1px solid var(--hair);
}
.ec-m-k {
  margin: 0 0 .2rem; font-size: 11px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
.ec-m-i { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--body); }
.ec-m-i b { color: var(--ink); font-weight: 500; }
.ec-m-call {
  margin: clamp(1.2rem, 2.4vw, 1.6rem) 0 0; font-size: .9rem; line-height: 1.5; color: var(--body);
}
.ec-m-call b { color: var(--ink); font-weight: 500; }

/* The ring's meaning, horizontal and legible. On the arc it was 15px, curved
   and upside-down-prone; it is the core value proposition, not microcopy. */
.pe-rel {
  margin: clamp(1rem, 1.8vw, 1.4rem) auto 0; max-width: 44ch; text-align: center;
  color: var(--ink); font-weight: 500; letter-spacing: -.005em;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.4;
}

/* ------------------------------------------------------- the network model */
/* Directly under the headline. It used to sit below the figure, which put the
   whole reason for the strategy a screen's scroll away from the claim. */
.pe-lead {
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 0; max-width: 66ch;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.5; color: var(--body);
}
.pe-model {
  margin-top: clamp(2.2rem, 3.8vw, 3rem);
  padding-top: clamp(1.4rem, 2.4vw, 2rem); border-top: 1px solid var(--hair);
}
.pe-model ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr; gap: .7rem;
}
@media (min-width: 820px) { .pe-model ul { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }
.pe-model li {
  position: relative; padding-left: 1.1rem;
  font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.5; color: var(--body);
}
.pe-model li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.pe-model-n { margin: clamp(1rem, 1.6vw, 1.3rem) 0 0; font-size: .88rem; color: var(--body); }

/* ---------------------------------------------------------------- status */
.pe-status {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding-top: clamp(1rem, 1.6vw, 1.3rem); border-top: 1px solid var(--hair);
  font-size: .95rem; line-height: 1.55;
}
.pe-status .pe-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: .5rem; vertical-align: middle;
}
.pe-status a { color: var(--accent); text-underline-offset: 3px; margin-left: .35rem; }

/* --------------------------------------------------------------- motion */
.pe { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.pe.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pe { opacity: 1; transform: none; transition: none; } }
.pe a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }