/* Partnerships: the client's own idea, organisations as ecological roles. One motif, the thread. */

/* ---------- Hero ---------- */
.pt-hero { position: relative; min-height: 72svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.pt-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #14251c; }
.pt-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pt-hero-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6,18,12,.86) 0%, rgba(6,18,12,.42) 42%, rgba(6,18,12,.05) 72%, rgba(6,18,12,0) 88%);
}
.pt-hero-inner { padding: calc(var(--header-h) + 6vh) 0 clamp(36px, 6vh, 64px); display: grid; gap: 22px; }
.pt-hero .eyebrow { color: var(--sprout); }
.pt-hero h1 { font-size: var(--t-88); max-width: 20ch; text-shadow: 0 2px 30px rgba(6,18,12,.35); }
.pt-hero h1 em { color: var(--sprout); font-style: italic; }
.pt-hero .lede { color: rgba(255,255,255,.94); max-width: 34em; text-shadow: 0 1px 18px rgba(6,18,12,.5); }
.pt-hero .btn { margin-top: 6px; justify-self: start; }
@media (max-width: 640px) { .pt-hero h1 { font-size: clamp(34px, 10vw, 48px); } }

/* ---------- Why partner: one line that keeps changing its last word ----------
   Four reasons used to be four pictograms in pale circles. They are now one sentence that says
   all four in turn, with the matching line under it. The dots jump and hold. */
.pt-intro { padding: calc(var(--sect) * .8) 0; }
.pt-intro-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.pt-intro-prose h2 { font-size: var(--t-48); color: var(--forest); }
.pt-intro-prose p { margin-top: 18px; }

.pt-more { padding-top: 6px; }
.pt-more-line { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .24em; font-size: var(--t-88); line-height: 1.06; color: var(--forest); }
.pt-more-static { display: block; }
/* The word rides in a box that grows and shrinks to fit it, so the line never jumps. */
/* The box is set once to the width of the longest word, so the swap animates transform and
   opacity only and never lays the line out again. Nothing follows the word on the line, so the
   slack after a short one is invisible. translate(0) gives the box its own layer, which is what
   reliably clips the word being slid away. */
.pt-more-box { display: block; position: relative; height: 1.2em; overflow: hidden; width: 7em; transform: translate(0); }
.pt-more-word { position: absolute; left: 0; top: 0; white-space: nowrap; font-style: italic; color: var(--moss); line-height: 1.06; transition: transform .75s var(--ease), opacity .45s var(--ease); }
.pt-more-word.is-next { transform: translateY(108%); opacity: 0; transition: none; }
.pt-more-word.is-out { transform: translateY(-108%); opacity: 0; }
.pt-more-measure { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; font-style: italic; pointer-events: none; }
.pt-more-copy { margin-top: clamp(18px, 2vw, 26px); max-width: 30ch; font-size: var(--t-22); line-height: 1.45; color: var(--stone); transition: opacity .3s var(--ease); }
.pt-more-copy.is-fading { opacity: 0; }
.pt-more-dots { display: flex; gap: 2px; margin-top: clamp(20px, 2.5vw, 30px); }
/* The dot is 9px, the padding carries the tap target. */
.pt-more-dot { box-sizing: content-box; width: 9px; height: 9px; padding: 9px; border-radius: 50%; background: var(--line-strong); background-clip: content-box; transition: background-color .4s var(--ease), transform .4s var(--ease); }
.pt-more-dot:hover { background-color: var(--leaf); }
.pt-more-dot.is-on { background-color: var(--sprout); box-shadow: inset 0 0 0 2px var(--leaf); transform: scale(1.18); }
@media (max-width: 900px) { .pt-intro-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 720px) { .pt-more-line { font-size: clamp(38px, 10.5vw, 62px); } .pt-more-copy { font-size: var(--t-18); } }

/* ---------- Ecological roles ---------- */
.pt-roles { padding: calc(var(--sect) * .9) 0; background: var(--mist); overflow: hidden; }
.pt-roles-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.pt-roles h2 { font-size: var(--t-64); color: var(--forest); max-width: 20ch; }
.pt-roles h2 em { color: var(--leaf); font-style: italic; }
.pt-roles-ledes { display: grid; gap: 10px; padding-bottom: 6px; }
.pt-roles-lede { font-size: var(--t-18); color: var(--stone); max-width: 46ch; }
.pt-roles-lede-last { color: var(--moss); font-family: var(--display); font-style: italic; font-size: var(--t-22); }
@media (max-width: 900px) { .pt-roles-head { grid-template-columns: 1fr; align-items: start; } .pt-roles-ledes { margin-top: 18px; } }

.pt-roles-row { position: relative; margin-top: clamp(44px, 6vw, 72px); }
.pt-roles-inner { position: relative; }
/* The thread is built in partnerships.js from the measured circle centres, so it runs through
   every one of them in reading order instead of behind the first row only. */
.pt-roles-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.pt-roles-thread .pt-march { stroke: var(--leaf); animation: pt-march 3.4s linear infinite; }
/* one whole dash period (5 + 4.5) times three, or the pattern jumps each loop */
@keyframes pt-march { to { stroke-dashoffset: -28.5px; } }
.pt-roles-list { position: relative; z-index: 1; list-style: none; display: flex; gap: 20px; }
.pt-role { flex: 0 0 auto; width: 190px; text-align: center; scroll-snap-align: center; }
.pt-role-photo { display: block; width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; border: 3px solid var(--mist); box-shadow: 0 0 0 1.5px var(--line-strong); transition: box-shadow .7s var(--ease); }
.pt-role-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The ring lights as the drawn tip of the thread passes the circle. */
.pt-role.is-lit .pt-role-photo { box-shadow: 0 0 0 5px var(--sprout), 0 0 0 6.5px rgba(78,154,91,.5); }
.pt-role h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-22); color: var(--forest); line-height: 1.1; }
.pt-role p { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--stone); }
.pt-roles-hint { display: none; margin-top: 16px; font-family: var(--display); font-style: italic; font-size: 15px; color: var(--moss); }

/* Phones and tablets: one row inside a horizontal scroller, the thread scrolling with it. */
@media (max-width: 859px) {
  .pt-roles-row { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 8px; }
  .pt-roles-row::-webkit-scrollbar { display: none; }
  .pt-roles-inner { width: max-content; }
  .pt-roles-hint { display: block; }
}
@media (min-width: 860px) {
  /* the inline padding keeps a clear gutter either side of the circles: it is where the thread
     turns from one row into the next without crossing a caption */
  .pt-roles-list { flex-wrap: wrap; justify-content: center; row-gap: clamp(52px, 6vw, 80px); column-gap: 24px; padding-inline: 62px; }
  .pt-role { width: calc(25% - 18px); }
}

/* ---------- Pioneer Species Programme: the card is a membership card, over the photograph ---------- */
.pt-pioneer { padding: calc(var(--sect) * .9) 0 calc(var(--sect) * .8); }
/* The photograph runs the height of the section on the left, the words sit at its top right and
   the card is laid across its edge: one composition, not a two column grid. */
.pt-pioneer-stage { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-rows: auto auto auto; align-items: start; }
.pt-pioneer-photo { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin: 0; min-height: 420px; overflow: hidden; }
.pt-pioneer-photo img { width: 100%; height: 100%; object-fit: cover; }
.pt-pioneer-copy { grid-column: 2; grid-row: 1; max-width: 46ch; padding: 0 0 clamp(30px, 4vw, 48px) clamp(28px, 3.4vw, 52px); }
.pt-pioneer-copy h2 { font-size: var(--t-48); color: var(--forest); }
.pt-pioneer-copy .lede { margin-top: 16px; }
.pt-pioneer-copy p:not(.lede) { margin-top: 14px; color: var(--stone); }
.pt-pioneer-cta { grid-column: 1; grid-row: 3; justify-self: start; margin-top: clamp(32px, 4vw, 44px); }

/* The ticket: the approved plate, stamped. */
.pt-ticket { background: #fff; border: 1.5px solid var(--forest); padding: 9px 9px 7px; box-shadow: 8px 8px 0 rgba(18, 56, 42, .12); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.pt-ticket-pioneer { grid-column: 2; grid-row: 2; align-self: end; z-index: 2; margin-left: -60px; transform: rotate(-.8deg); }
.pt-ticket-pioneer:hover { transform: rotate(-.8deg) translateY(-3px); box-shadow: 11px 11px 0 rgba(18, 56, 42, .16); }
.pt-ticket-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 14px 18px; border-bottom: 1.5px solid var(--forest); }
.pt-ticket-title { font-size: var(--t-36); line-height: 1.02; color: var(--forest); max-width: 8ch; }
.pt-ticket-title em { font-style: italic; color: var(--moss); }
.pt-stamp { flex: none; width: 96px; height: 96px; margin: -6px -4px -24px 0; color: var(--moss); animation: pt-stamp-spin 54s linear infinite; }
.pt-stamp-disc { fill: var(--canvas); }
.pt-stamp-ring { font: 500 8.6px var(--sans); letter-spacing: 1.7px; text-transform: uppercase; }
.pt-stamp-word { font: italic 500 13px var(--display); }
@keyframes pt-stamp-spin { from { transform: rotate(-9deg); } to { transform: rotate(351deg); } }

.pt-ledger { list-style: none; margin: 0; padding: 0 14px; }
.pt-ledger li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0 14px; border-bottom: 1px dotted var(--line-strong); font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.pt-ledger li:last-child { border-bottom: 0; }
.pt-check { flex: none; width: 17px; height: 16px; stroke: var(--leaf); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pt-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pt-ledger.in .pt-check path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease) calc(.14s + var(--i, 0) * .09s); }
.no-js .pt-check path { stroke-dashoffset: 0; }
.pt-ticket-foot { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 14px 10px; border-top: 1.5px solid var(--forest); font: 500 11px / 1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.pt-ticket-foot .money { font-size: 11px; letter-spacing: .08em; color: var(--forest); }

@media (max-width: 900px) {
  .pt-pioneer-stage { grid-template-columns: minmax(0, 1fr); }
  .pt-pioneer-copy { grid-column: 1; grid-row: 1; padding: 0; max-width: none; }
  .pt-pioneer-photo { grid-column: 1; grid-row: 2; align-self: auto; min-height: 0; aspect-ratio: 16 / 10; margin-top: clamp(28px, 5vw, 44px); }
  .pt-ticket-pioneer { grid-column: 1; grid-row: 3; align-self: auto; margin: -52px 0 0 clamp(16px, 6vw, 60px); }
  .pt-pioneer-cta { grid-row: 4; }
}

/* ---------- The Pioneer Fund ---------- */
.pt-fund { position: relative; padding: calc(var(--sect) * 1) 0; color: #fff; isolation: isolate; overflow: hidden; background: var(--void); }
.pt-fund-media { position: absolute; inset: 0; z-index: -2; opacity: .32; }
.pt-fund-media img { width: 100%; height: 100%; object-fit: cover; }
.pt-fund-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,18,12,.7), rgba(6,18,12,.94)); }
.pt-fund-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 96px); align-items: stretch; }
/* the copy spreads down its column so its closing line sits level with the foot of the card,
   instead of leaving the dark half of the band empty */
.pt-fund-copy { display: flex; flex-direction: column; }
.pt-fund h2 { font-size: var(--t-64); }
.pt-fund .lede { color: rgba(255,255,255,.88); margin-top: 18px; }
.pt-fund-copy p:not(.lede):not(.pt-fund-close) { margin-top: 16px; color: rgba(255,255,255,.72); }
.pt-fund-quote { font-style: italic; font-size: var(--t-36); color: var(--sprout); margin: 0 0 clamp(26px, 3vw, 36px); max-width: 22ch; }
.pt-fund-side { padding-top: 8px; }
.pt-ticket-fund { transform: rotate(.7deg); box-shadow: 10px 10px 0 rgba(6, 18, 12, .55); }
.pt-ticket-fund:hover { transform: rotate(.7deg) translateY(-3px); box-shadow: 13px 13px 0 rgba(6, 18, 12, .62); }
.pt-fund-close { margin-top: auto; padding-top: clamp(28px, 3vw, 40px); font-family: var(--sans); font-weight: 500; font-size: var(--t-22); color: var(--sprout); max-width: 26ch; }
@media (max-width: 900px) { .pt-fund-grid { grid-template-columns: 1fr; } .pt-fund-side { padding-top: clamp(30px, 6vw, 48px); } .pt-fund-close { padding-top: 24px; } }

/* ---------- Partner marks ---------- */
.pt-partners { padding: calc(var(--sect) * .5) 0; }

/* ---------- Close ---------- */
.pt-cta-line { margin-top: 18px; color: rgba(255,255,255,.82); max-width: 46em; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .pt-stamp, .pt-roles-thread .pt-march { animation: none; }
  .pt-check path { stroke-dashoffset: 0; }
}