/* Ecosystem: the two brands as vellum sheets that meet at the "&", each
   carrying half of one back rank; active pathways as pieces on squares, planned
   ones as empty outlined squares; and the close. */

.nw { white-space: nowrap; }

/* ---------- Hero ---------- */
/* short, so both brand sheets sit in the first screen beneath it */
.ec-hero { padding-block: clamp(1.5rem, 3vh, 2.5rem) 0; }
.ec-hero .eyebrow { font-size: .9375rem; color: var(--muted); }
.ec-hero h1 { margin-top: 1.5rem; font-size: var(--d-1); line-height: 1.15; max-width: 16ch; }
.ec-hero .lede { max-width: 38rem; margin-top: 1.5rem; color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; }
.js-motion:not(.ec-go) .ec-hero-copy > * { visibility: hidden; animation: ec-show 0s linear 3s forwards; }
@keyframes ec-show { to { visibility: visible; } }

/* ---------- Two sheets, one back rank ---------- */
.ec-meet-sec { overflow-x: clip; }
.ec-stage { position: relative; }
.ec-meet { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 68rem; margin-inline: auto;
  --q: clamp(2.6rem, 4vw, 3.5rem); --pad: clamp(1.5rem, 3.2vw, 2.75rem); --amp: clamp(4.25rem, 6vw, 5.5rem); }
.ec-meet > .drawing { inset: -14% -8%; --sq: clamp(3rem, 5vw, 4.5rem); }
.ec-side { z-index: 1; display: flex; flex-direction: column; padding: var(--pad) var(--pad) .35rem; }
.ec-a { border-radius: 4px 0 0 4px; }
.ec-b { border-radius: 0 4px 4px 0; }
.ec-mark, .ec-zx { height: clamp(2.5rem, 4.2vw, 3.5rem); display: flex; align-items: center; color: var(--fg); }
.ec-mark [data-logo] { display: flex; height: 100%; }
.ec-mark svg { height: 100% !important; width: auto !important; max-width: 100%; }
.ec-zx { font-family: var(--display); font-weight: 400; letter-spacing: .32em; font-size: clamp(1.6rem, 3.1vw, 2.6rem); line-height: 1; }
.ec-body { margin-top: 1.5rem; color: var(--fg-2); font-size: 1.0625rem; max-width: 28rem; }
.ec-link { margin-top: .5rem; }
.ec-b .ec-body, .ec-b .ec-zx, .ec-b .ec-link { padding-left: clamp(0rem, 2vw, 1.5rem); }
.ec-a .ec-body, .ec-a .ec-mark { padding-right: clamp(0rem, 2vw, 1.5rem); }
/* half a back rank on each sheet, flush with the seam so the two halves join */
.ec-rank { margin-top: auto; padding-top: 2.25rem; display: grid; grid-template-columns: repeat(4, var(--q)); grid-template-rows: var(--q) 1.6rem; }
.ec-rank-a { align-self: flex-end; margin-right: calc(var(--pad) * -1); }
.ec-rank-b { align-self: flex-start; margin-left: calc(var(--pad) * -1); }
.ec-rank .sq { position: relative; background: var(--tb-l); border-block: 1px solid var(--tb-edge); }
.ec-rank .sq.d { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 55%); }
.ec-rank-a .sq:first-child { border-left: 1px solid var(--tb-edge); }
.ec-rank-b .sq:nth-child(4) { border-right: 1px solid var(--tb-edge); }
.ec-rank .pcw, .ec-sq .pcw { position: absolute; inset: 8%; }
.ec-rank .pcw [data-piece], .ec-sq .pcw [data-piece] { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .14)); }
.ec-rank .fl { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: .75rem; color: var(--muted); }
/* the ampersand: a small round of vellum laid over the seam */
.ec-amp { position: absolute; z-index: 3; left: calc(50% - var(--amp) / 2); top: calc(40% - var(--amp) / 2); width: var(--amp); height: var(--amp); pointer-events: none; }
.ec-amp > .sheet { position: absolute; inset: 0; border-radius: 50%; }
.ec-amp b { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1; color: var(--fg); padding-bottom: .1em; }
.ec-note { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; font-size: .9375rem; color: var(--muted); }
/* Desktop with motion: the meeting holds the screen while the sheets come together */
.ec-stage.pinned { height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(var(--nav-h) + clamp(.25rem, 1vh, 1rem)); }
/* the pinned stage already carries the space around its centred content, so the section adds none */
.ec-meet-sec:has(.ec-stage.pinned) { padding-block: 0; }
@media (max-width: 860px) {
  .ec-meet { grid-template-columns: 1fr; --q: clamp(2.4rem, 13vw, 3.4rem); --pad: 1.5rem; }
  .ec-a, .ec-b { border-radius: 4px; }
  .ec-rank-a, .ec-rank-b { align-self: flex-start; margin-inline: 0; }
  .ec-rank-a .sq:nth-child(4) { border-right: 1px solid var(--tb-edge); }
  .ec-rank-b .sq:first-child { border-left: 1px solid var(--tb-edge); }
  .ec-b .ec-body, .ec-b .ec-zx, .ec-b .ec-link, .ec-a .ec-body, .ec-a .ec-mark { padding-inline: 0; }
  .ec-amp { position: relative; left: auto; top: auto; margin: calc(var(--amp) / -2) var(--pad) calc(var(--amp) / -2) auto; }
  .ec-meet > .drawing { inset: 10% -10%; }
}

/* ---------- Active and planned ---------- */
.ec-paths { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.ec-list { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.ec-row { position: relative; display: grid; grid-template-columns: var(--q) minmax(0, 1fr) auto; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; padding: 1.35rem 0; border-bottom: 1px solid var(--line); --q: clamp(2.75rem, 4vw, 3.25rem); }
.ec-sq { position: relative; width: var(--q); height: var(--q); background: var(--tb-l); box-shadow: inset 0 0 0 1px var(--tb-edge); }
.ec-row:nth-child(even) .ec-sq { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 55%); }
.ec-sq .shadow { bottom: 8%; }
.ec-t h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35; }
.ec-t h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.ec-t h3 a::after { content: ""; position: absolute; inset: 0; }
.ec-row:hover .ec-t h3 a, .ec-t h3 a:focus-visible { background-size: 100% 1px; }
.ec-t p { margin-top: .3rem; color: var(--fg-2); }
.ec-arr { position: relative; width: 1.5rem; height: 1px; background: var(--fg-2); transition: transform .5s var(--ease); }
.ec-arr::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid var(--fg-2); border-right: 1px solid var(--fg-2); transform: rotate(45deg); }
.ec-row:hover .ec-arr { transform: translateX(5px); }
.ec-planned { position: sticky; top: calc(var(--nav-h) + 2rem); }
.ec-planned-in { padding: clamp(1.5rem, 3vw, 2.5rem); outline: 1px dashed var(--line-2); outline-offset: -1px; border-radius: 4px; }
.ec-planned h2 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.ec-planned-lede { margin-top: 1rem; color: var(--fg-2); }
.ec-planned ul { margin-top: 1.75rem; }
.ec-plan { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px dashed var(--line-2); color: var(--fg-2); }
.ec-ghost { width: 1.75rem; height: 1.75rem; border: 1px dashed var(--line-2); margin-top: .05rem; }
@media (max-width: 960px) {
  .ec-paths { grid-template-columns: 1fr; }
  .ec-planned { position: static; }
}

/* ---------- Close ---------- */
.ec-cta { position: relative; overflow: hidden; padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem); }
.ec-cta-wrap { position: relative; }
.ec-cta-wrap > .drawing { left: 0; right: 0; top: -12%; bottom: -12%; margin-inline: auto; width: min(64rem, 100%); --sq: clamp(3rem, 5vw, 4.25rem); }
.ec-panel { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.ec-panel h2 { font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.15; }
.ec-panel > p { max-width: 30rem; margin: 1.5rem auto 0; color: var(--fg-2); font-size: 1.125rem; }
.ec-panel .ctas { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }