/* Home page: hero, thesis, three steps, give, the 50/50 panel, globe, pairs, partners. */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #2b3a2e; }
.hero-media picture { position: absolute; inset: 0; display: block; }
/* The photograph is portrait, 3:4. Held high in the frame so a wide crop keeps the bare tree, the
   sun over the bay and the top of the green path, and loses the empty foreground scrub instead. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.06); animation: settle 2.4s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
/* Four layers: the floor the headline sits on, a wash from the left behind the copy column, a
   soft patch over the sun in the top right so the white type never meets bare glare, and a top
   band for the header. */
.hero-scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,18,12,.84) 0%, rgba(6,18,12,.6) 26%, rgba(6,18,12,.24) 54%, rgba(6,18,12,.06) 74%, rgba(6,18,12,0) 88%),
    linear-gradient(to right, rgba(6,18,12,.5) 0%, rgba(6,18,12,.14) 52%, rgba(6,18,12,0) 80%),
    radial-gradient(72% 56% at 80% 16%, rgba(6,18,12,.46), rgba(6,18,12,0) 72%),
    linear-gradient(to bottom, rgba(6,18,12,.34) 0%, rgba(6,18,12,0) 24%);
}
.hero-inner { padding: calc(var(--header-h) + 4vh) 0 clamp(28px, 5vh, 64px); display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; }
.hero h1 { font-size: min(var(--t-88), 11.5vh); max-width: 11ch; text-shadow: 0 2px 30px rgba(6,18,12,.35); }
.hero h1 em { color: var(--sprout); }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .l span { display: block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * .14s); }
@keyframes rise { to { transform: none; } }
.hero-p { font-size: min(var(--t-22), 2.6vh); line-height: 1.4; max-width: 30em; color: rgba(255,255,255,.94); opacity: 0; animation: fade 1.2s var(--ease) .9s forwards; text-shadow: 0 1px 18px rgba(6,18,12,.5); }
@keyframes fade { to { opacity: 1; } }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; animation: fade 1.2s var(--ease) 1.1s forwards; }
.hero-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 26px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.22); font-size: 13px; letter-spacing: .03em; color: rgba(255,255,255,.78); opacity: 0; animation: fade 1s var(--ease) 1.5s forwards; }
.hero-foot b { color: #fff; font-weight: 500; }
.scroll-cue { position: relative; padding-right: 26px; }
.scroll-cue::after { content: ""; position: absolute; right: 8px; top: 50%; width: 1px; height: 28px; background: rgba(255,255,255,.7); transform: translateY(-50%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(0); } 100% { clip-path: inset(100% 0 0 0); } }
/* A phone screen is close to the photograph's own shape, so it is shown almost as shot. */
@media (max-width: 640px) { .hero h1 { font-size: clamp(44px, 13vw, 64px); } .hero-p { font-size: 18px; } .hero-media img { object-position: 50% 38%; } }

/* ---------- Thesis ---------- */
.question { padding: calc(var(--sect) * .72) 0 calc(var(--sect) * .52); position: relative; }
/* ---------- The thread run ----------
   One line from the foot of the hero to the seam of the split panel. home.js measures the things
   it has to land on and writes the path in page pixels, then draws it against scroll so the tip
   stays in the middle of the screen. The dotted line marches behind a mask that does the drawing. */
.thread-run { position: relative; }
.thread-line { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.tr-line { fill: none; stroke: url(#tr-grad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 4.5; animation: tr-march 3.4s linear infinite; }
.tr-reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tr-start { fill: var(--sprout); stroke: var(--leaf); stroke-width: 1.5; }
@keyframes tr-march { to { stroke-dashoffset: -28.5px; } }
.no-js .tr-reveal { stroke-dashoffset: 0; }
@media (max-width: 760px) { .thread-line { display: none; } }
@media (prefers-reduced-motion: reduce) { .tr-line { animation: none; } }
/* section content sits above the thread; the section backgrounds stay under it */
.question .wrap, .two .wrap, .fifty .wrap { position: relative; z-index: 2; }
.question-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.question h2 { font-size: var(--t-64); margin-top: 18px; max-width: 18ch; color: var(--forest); text-wrap: pretty; }
.question h2 em { color: var(--moss); font-style: italic; }
.question .lede { margin-top: 20px; }
/* The turn of the sentence, set as its own line so it lands after the three short statements. */
.question-turn { margin-top: clamp(24px, 3vw, 36px); font-family: var(--display); font-style: italic; font-weight: 500; font-size: var(--t-48); line-height: 1.05; letter-spacing: -.012em; color: var(--moss); }
.question .chip { display: inline-flex; align-items: center; gap: 8px; vertical-align: -.06em; margin: 0 .04em; padding: 0 12px 0 0; border-radius: 999px; background: var(--mist); font: 500 .26em / 1 var(--sans); letter-spacing: .02em; color: var(--forest); height: .78em; white-space: nowrap; }
.question .chip img { width: .78em; height: .78em; border-radius: 999px; object-fit: cover; }
.question-photo { position: relative; margin: 0; width: 100%; justify-self: stretch; border-radius: var(--r-20); aspect-ratio: 1 / 1; isolation: isolate; color: #fff; }
.question-photo picture { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.question-photo img { width: 100%; height: 100%; object-fit: cover; }
.question-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,18,12,.82), rgba(6,18,12,.2) 55%, transparent); z-index: 1; }
.question-photo figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; display: grid; gap: 10px; }
.question-photo .stat { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 10px; }
.question-photo .stat b { font-size: var(--t-28); color: #fff; min-width: 2.2ch; }
.question-photo .stat b small { font-size: .6em; color: var(--sprout); font-weight: 400; }
.question-photo .stat span { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.35; }
@media (max-width: 900px) { .question-grid { grid-template-columns: 1fr; gap: 36px; } }

/* dusk: the ramp from the light canvas into the globe void */
.dusk {
  height: clamp(124px, 18vh, 216px);
  margin-bottom: -1px;
  /* Sampled in Oklab through forest, with stops placed so lightness falls at a
     near-constant rate and eases off at both ends. Even stops in sRGB drop most
     of the light in the first third, which reads as a hard edge under the mist. */
  background: linear-gradient(to bottom,
    #fbfcf9 0%,
    #e1e9e1 6.3%,
    #d4ddd5 12.5%,
    #c5d0c8 18.8%,
    #b4c2b8 25%,
    #a1b2a7 31.3%,
    #8da095 37.5%,
    #788e82 43.8%,
    #637b6f 50%,
    #4e695c 56.3%,
    #3a584b 62.5%,
    #28493b 68.8%,
    #163b2d 75%,
    #0f2e22 81.3%,
    #0c231a 87.5%,
    #081a12 93.8%,
    #06120c 100%);
}

/* ---------- How a gift moves ----------
   Three stations on the thread, on the forest ground. The first sits on the centre line with its
   words to the right, the second is the fork with its words to the left, the third is the two
   photographs the branches land on. Everything the line has to pass through is a real element. */
.steps { position: relative; background: var(--forest); color: #fff; padding: clamp(64px, 8vw, 110px) 0 clamp(72px, 9vw, 128px); }
.steps-stage { position: relative; display: grid; gap: clamp(48px, 6vw, 84px); }
.st { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 32px); align-items: center; }
.st-node { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 0 3px var(--forest), 0 0 0 4.5px var(--sprout); transform: scale(.55); opacity: .55; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.st-node.is-lit { transform: none; opacity: 1; }
.st-node-fork { background: var(--forest); box-shadow: 0 0 0 2.5px var(--sprout); }
.st-node-fork.is-lit { background: var(--sprout); }
.st-1 .st-node { grid-column: 2; }
.st-1 .st-text { grid-column: 3; }
.st-2 .st-text { grid-column: 1; text-align: right; justify-self: end; }
.st-2 .st-node { grid-column: 2; }
.st-text { display: grid; gap: 8px; max-width: 30ch; }
.st-text b { font-size: var(--t-36); line-height: 1.05; font-weight: 500; color: #fff; }
.st-text span { color: rgba(255,255,255,.72); font-size: var(--t-16); line-height: 1.5; }
.st-3 { grid-template-columns: 1fr; justify-items: center; row-gap: 28px; }
.st-places { display: flex; justify-content: center; gap: var(--st-fork-gap, clamp(180px, 34vw, 520px)); }
.st-place { display: flex; align-items: center; gap: 16px; }
.st-place[data-node="urban"] { flex-direction: row-reverse; }
.st-place img { width: clamp(96px, 10vw, 136px); height: clamp(96px, 10vw, 136px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--forest), 0 0 0 5px rgba(169,213,160,.35); transform: scale(.94); transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.st-place.is-lit img { box-shadow: 0 0 0 3px var(--forest), 0 0 0 5px var(--sprout); transform: none; }
.st-place em { font-family: var(--display); font-style: italic; font-size: var(--t-18); color: var(--sprout); white-space: nowrap; }
.st-text-centre { text-align: center; justify-items: center; }
@media (max-width: 760px) {
  .steps { padding: 56px 0 64px; }
  .steps-stage { gap: 40px; }
  /* one rail down the left, drawn in on scroll, joins the three stations */
  .steps-stage::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background-image: repeating-linear-gradient(to bottom, var(--sprout) 0 5px, transparent 5px 9.5px); opacity: .7; transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.6s var(--ease); }
  .steps-stage.in::before { transform: scaleY(1); }
  .st { grid-template-columns: 16px minmax(0, 1fr); column-gap: 18px; }
  .st-1 .st-node, .st-2 .st-node { grid-column: 1; }
  .st-1 .st-text, .st-2 .st-text { grid-column: 2; text-align: left; justify-self: start; }
  .st-2 .st-node { order: -1; }
  .st-3 { grid-template-columns: 16px minmax(0, 1fr); justify-items: start; row-gap: 20px; }
  .st-3::before { content: ""; grid-column: 1; grid-row: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 0 3px var(--forest), 0 0 0 4.5px var(--sprout); align-self: center; }
  .st-3 .st-places, .st-3 .st-text { grid-column: 2; }
  .st-places { --st-fork-gap: 22px; justify-content: start; }
  .st-place { flex-direction: column !important; align-items: flex-start; gap: 8px; }
  .st-place img { width: 88px; height: 88px; }
  .st-place em { font-size: 15px; white-space: normal; }
  .st-text-centre { text-align: left; justify-items: start; }
  .st-text b { font-size: var(--t-28); }
}
@media (prefers-reduced-motion: reduce) { .steps-stage::before { transform: scaleY(1); } }

/* ---------- The 50/50 panel ----------
   One photograph parted down a seam, the way the diptychs are, with the two halves of the gift
   written on it. Portrait screens part it across instead of down. */
.fifty { padding: clamp(56px, 7vw, 96px) 0 calc(var(--sect) * .5); background: var(--mist); }
.fifty-head { display: grid; gap: 14px; margin: 0 auto clamp(64px, 8vw, 112px); text-align: center; justify-items: center; }
.fifty-head h2 { font-size: var(--t-48); color: var(--forest); max-width: none; white-space: nowrap; }
@media (max-width: 440px) { .fifty-head h2 { white-space: normal; } }
.fifty-head h2 em { color: var(--moss); font-style: italic; }
.fifty-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-20); aspect-ratio: 16 / 9; color: #fff; --seam: 50%; }
.fifty-side { position: absolute; inset: 0; }
.fifty-side img { width: 100%; height: 100%; object-fit: cover; }
.fifty-side.wild { clip-path: inset(0 0 0 var(--seam)); }
.fifty-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,18,12,.88), rgba(6,18,12,.42) 50%, rgba(6,18,12,.14) 80%); }
.fifty-seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 2px; transform: translateX(-1px); background: linear-gradient(to bottom, transparent, var(--sprout) 30%, var(--sprout) 70%, transparent); }
.fifty-seam::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--sprout); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(169,213,160,.25); }
.fifty-copy { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); padding: clamp(22px, 3vw, 40px); align-items: end; }
.fifty-half { display: grid; align-content: end; gap: 4px; }
.fifty-half .money { font-size: var(--t-88); line-height: .9; color: #fff; }
.fifty-half h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-28); line-height: 1.1; margin-top: 10px; }
.fifty-half p { color: rgba(255,255,255,.82); font-size: var(--t-16); line-height: 1.45; max-width: 24em; }
@media (max-width: 700px) {
  .fifty-panel { aspect-ratio: 3 / 4; }
  .fifty-side.wild { clip-path: inset(var(--seam) 0 0 0); }
  .fifty-seam { top: var(--seam); bottom: auto; left: 0; right: 0; width: auto; height: 2px; transform: translateY(-1px); background: linear-gradient(to right, transparent, var(--sprout) 30%, var(--sprout) 70%, transparent); }
  .fifty-scrim { background: linear-gradient(to bottom, rgba(6,18,12,.12), rgba(6,18,12,.62) 36%, rgba(6,18,12,.24) 54%, rgba(6,18,12,.82)); }
  .fifty-copy { inset: 0; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 0; }
  .fifty-half:first-child { padding-bottom: 16px; }
  .fifty-half .money { font-size: var(--t-64); }
}

/* ---------- Globe ---------- */
/* the header is fixed on top of the page, so a full 100svh section always lost its last 68px */
.globe-band { position: relative; background: var(--void); color: #fff; min-height: calc(100svh - var(--header-h)); scroll-margin-top: var(--header-h); overflow: hidden; isolation: isolate; padding: clamp(48px, 7vh, 80px) 0 clamp(40px, 6vh, 72px); display: grid; }
.globe-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; touch-action: none; view-transition-name: globe; }
.globe-copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 20px 40px; align-content: start; pointer-events: none; }
.globe-copy > * { pointer-events: auto; }
.globe-text .eyebrow { color: var(--sprout); }
.globe-text h2 { font-size: min(var(--t-64), 7.5vh); margin-top: 18px; max-width: 14ch; }
.globe-text h2 em { color: var(--sprout); }
.globe-text .lede { color: rgba(255,255,255,.72); margin-top: 16px; font-size: var(--t-18); }
.pair-list { grid-column: 1; display: grid; gap: 8px; align-self: end; }
.pair-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: var(--r-12); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); text-align: left; transition: background .3s, border-color .3s; }
.pair-item:hover { background: rgba(255,255,255,.08); }
.pair-item.is-active { background: rgba(169,213,160,.12); border-color: rgba(169,213,160,.5); }
.pair-item .pics { display: flex; }
.pair-item .pics img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--void); }
.pair-item .pics img + img { margin-left: -12px; }
.pair-item .names b { display: block; font-weight: 500; font-size: 15px; }
.pair-item .names b i { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--sprout); font-size: 1.1em; }
.pair-item .names span { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 1px; }
.pair-item .go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: var(--sprout); }
.pair-item .go svg { width: 14px; height: 14px; }
.pair-item.is-active .go { background: var(--sprout); color: var(--void); border-color: var(--sprout); }
.globe-detail { grid-column: 1; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.5; max-width: 44em; min-height: 3em; }
/* The way into the full map. It closes the band, so it needs air above it and enough weight to
   read as the section's action rather than a footnote under the pair controls. */
.globe-cta { grid-column: 1; justify-self: start; margin-top: clamp(26px, 3.8vh, 46px); height: 60px; padding: 0 34px; font-size: var(--t-18); border-width: 1.5px; }
.globe-cta .arrow { width: 18px; height: 18px; }

/* Short desktop windows: tighten the copy column so the whole band still lands in one screen. */
@media (min-width: 901px) and (max-height: 860px) {
  .globe-band { padding: clamp(28px, 4.5vh, 48px) 0 clamp(24px, 3.5vh, 40px); }
  .globe-copy { gap: 12px 40px; }
  .globe-text h2 { margin-top: 8px; }
  .globe-text .lede { margin-top: 10px; font-size: var(--t-16); }
  .pair-item { padding: 6px 10px 6px 6px; }
  .pair-item .pics img { width: 32px; height: 32px; }
  .globe-detail { min-height: 0; }
  .globe-cta { margin-top: 16px; height: 52px; padding: 0 28px; font-size: var(--t-16); }
}

@media (max-width: 900px) {
  .globe-canvas { position: relative; inset: auto; width: 100%; height: 72vw; margin: -10px 0 8px; }
  .globe-band { display: block; }
  .globe-copy { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 22px; }
  .globe-text h2 { font-size: var(--t-48); }
  .globe-arrow { width: 40px; height: 40px; }
  .pair-list, .globe-detail, .globe-cta { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- Pairs (diptychs) ---------- */
.pairs { padding: calc(var(--sect) * .6) 0 0; }
.pairs-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; }
.pairs-head h2 { font-size: var(--t-64); max-width: 14ch; margin-top: 18px; color: var(--forest); }
.diptych { position: relative; height: clamp(520px, 78vh, 820px); overflow: hidden; border-radius: var(--r-20); margin-bottom: 20px; color: #fff; isolation: isolate; --seam: 50%; }
.diptych .side { position: absolute; inset: 0; }
.diptych .side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Each half breathes between its two photographs, so a pair shows four places over time.
   The two sides are offset from each other, and each card from the next. */
.diptych .side img.alt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .diptych .side img { animation: dip-a 17s var(--ease) infinite; animation-delay: var(--fade-delay, 0s); }
  .diptych .side img.alt { animation-name: dip-b; }
  .diptych .side.wild img { animation-delay: calc(var(--fade-delay, 0s) + 8.5s); }
}
@keyframes dip-a { 0%, 42% { opacity: 1 } 50%, 92% { opacity: 0 } 100% { opacity: 1 } }
@keyframes dip-b { 0%, 42% { opacity: 0 } 50%, 92% { opacity: 1 } 100% { opacity: 0 } }
.diptych .side.wild { clip-path: inset(0 0 0 var(--seam)); }
.diptych .seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 2px; background: linear-gradient(to bottom, transparent, var(--sprout) 30%, var(--sprout) 70%, transparent); transform: translateX(-1px); }
.diptych .seam::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--sprout); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(169,213,160,.25); }
.diptych .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,18,12,.78), rgba(6,18,12,.2) 45%, transparent 70%); }
.diptych .label { position: absolute; top: 24px; }
.diptych .label.u { left: 24px; } .diptych .label.w { right: 24px; }
.diptych .caption { position: absolute; left: 32px; right: 32px; bottom: 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end; }
.diptych .caption h3 { font-size: var(--t-48); font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: -.012em; }
.diptych .caption h3 em { color: var(--sprout); font-style: italic; }
.diptych .caption p { color: rgba(255,255,255,.84); margin-top: 12px; max-width: 34em; font-size: var(--t-16); }
.diptych .facts { display: grid; gap: 10px; justify-items: end; text-align: right; }
.diptych .facts div { font-size: 13px; color: rgba(255,255,255,.7); }
.diptych .facts div b { display: block; color: #fff; font-weight: 500; font-size: 16px; }
.diptych .btn { margin-top: 8px; }
@media (max-width: 900px) { .pairs-head { flex-direction: column; align-items: start; } .diptych .caption { grid-template-columns: 1fr; left: 20px; right: 20px; bottom: 20px; } .diptych .facts { justify-items: start; text-align: left; } .diptych { height: 82svh; } .diptych .label.w { display: none; } }

/* ---------- Give ---------- */
.two { padding: calc(var(--sect) * .52) 0 calc(var(--sect) * .22); background: linear-gradient(to bottom, var(--mist) 0%, var(--canvas) 100%); }
.two-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.two h2 { font-size: var(--t-64); margin-top: 18px; max-width: 12ch; color: var(--forest); }
.two .lede { margin-top: 20px; }
.give-pairs { display: grid; gap: 8px; margin-top: 32px; }
.give-pair { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 8px; border: 1px solid transparent; text-align: left; font-size: 15px; font-weight: 500; color: var(--stone); transition: border-color .3s, background .3s, color .3s; justify-self: start; }
.give-pair img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--canvas); }
.give-pair img + img { margin-left: -14px; }
.give-pair span { padding-right: 8px; }
.give-pair span i { font-family: var(--display); font-style: italic; font-size: 1.15em; color: var(--moss); }
.give-pair:hover { color: var(--forest); }
.give-pair.is-on { background: #fff; border-color: var(--line); color: var(--forest); }
@media (max-width: 900px) { .two-grid { grid-template-columns: 1fr; } }

/* ---------- Partners ---------- */
.partners { padding: 0 0 calc(var(--sect) * .6); }
.partners-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 28px 36px; border-radius: var(--r-20); background: var(--forest); color: #fff; }
.partners-label { font-family: var(--display); font-style: italic; font-size: var(--t-22); color: var(--sprout); }
.partners-word { font-family: var(--display); font-weight: 600; font-size: var(--t-28); }
.partners-word small { font-family: var(--sans); font-weight: 400; font-size: 13px; color: rgba(255,255,255,.65); margin-left: 6px; }
.partners-row img { height: 40px; width: auto; opacity: .92; }
.partners-row img[alt="Whole Wild World"] { height: 64px; }
@media (max-width: 700px) { .partners-row { justify-content: start; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; background: var(--forest); color: #fff; padding: 14px 20px; border-radius: 8px; font-size: 15px; z-index: 200; transition: all .6s var(--ease); box-shadow: var(--shadow-float); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }


/* ---------- Hero: copy + connection drawn on the photo ---------- */
.hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); grid-template-areas: "copy link" "foot foot"; align-items: end; column-gap: clamp(24px, 4vw, 64px); }
.hero-copy { grid-area: copy; display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; }
.hero-foot { grid-area: foot; }
.hero-link { grid-area: link; justify-self: end; width: min(100%, 460px); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "a line b" "cap cap cap"; align-items: end; column-gap: 8px; row-gap: 14px; padding-bottom: 6px; opacity: 0; animation: fade 1.2s var(--ease) 1.3s forwards; text-shadow: 0 1px 14px rgba(6,18,12,.7); transition: opacity .35s var(--ease); }
.hero-link.is-swapping { opacity: 0; }
.link-pin { display: grid; justify-items: center; text-align: center; gap: 3px; width: 112px; }
.link-pin b { font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.link-pin > span:last-child { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.3; }
.link-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-bottom: 6px; box-shadow: 0 6px 20px -6px rgba(6,18,12,.7); }
.link-photo img { width: 100%; height: 100%; object-fit: cover; }
.ring-urban { border: 2.5px solid #fff; }
.ring-wild { border: 2.5px solid var(--sprout); }
.link-line { grid-area: line; width: 100%; height: auto; overflow: visible; margin-bottom: 14px; }
/* Same thread as the patches page: a masked path wipes in, then the dashes march along it. The mask
   keeps the wipe and the dash pattern on separate elements, since both want stroke-dasharray. */
.link-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-link.is-drawing .link-reveal { animation: linkdraw 1.4s var(--ease) both; }
@keyframes linkdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.link-draw { stroke: var(--sprout); }
.link-dot-a { fill: var(--sprout); stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.link-dot-b { fill: none; stroke: var(--sprout); stroke-width: 2.2; }
.link-tag { font: 500 9px var(--sans); letter-spacing: .18em; text-transform: uppercase; fill: rgba(255,255,255,.6); }
/* shift by a whole multiple of the dash period (5 + 4.5) or the pattern jumps each loop */
.march { animation: dash-march 3.4s linear infinite; }
@keyframes dash-march { to { stroke-dashoffset: -28.5px; } }
@media (prefers-reduced-motion: reduce) { .march { animation: none; } }
.link-km { font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: #fff; }
.link-caption { grid-area: cap; font-size: 13px; color: rgba(255,255,255,.78); text-align: center; margin: 0; }
@media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "link" "foot"; } .hero-link { justify-self: start; } }
@media (max-width: 640px) { .hero-link { display: none; } }

/* ---------- Question ---------- */
.question-photo figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; font-family: var(--display); font-style: italic; font-size: var(--t-28); color: #fff; line-height: 1.1; }

/* ---------- Two patches: the list of three ---------- */
/* The split is drawn by the gift control beside this copy, so it is not spelled out in words too. */
.two .give-pairs { margin-top: 24px; }

.pairs-head .textlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--moss); font-size: var(--t-16); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.pairs-head .textlink:hover { border-color: var(--moss); }
.pairs-head .textlink .arrow { width: 14px; height: 14px; }

/* ---------- Impact ---------- */
.impact { position: relative; color: #fff; padding: clamp(60px, 7vw, 96px) 0 clamp(52px, 6vw, 84px); isolation: isolate; overflow: hidden; }
.impact { background: var(--forest); }
.impact-bg { position: absolute; inset: 0; z-index: -1; background: var(--forest); }
.impact-bg picture { position: absolute; inset: 0; display: block; }
.impact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* The network picture carries its own glow, so the wash is heavier than a plain photograph would
   need and still reads left to right, keeping the figures off the brightest nodes. */
.impact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,18,12,.9), rgba(6,18,12,.74) 46%, rgba(18,56,42,.56)); }
.impact .eyebrow { color: var(--sprout); }
.impact h2 { color: #fff; }
.impact h2 em { color: var(--sprout); }
.impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: clamp(28px, 3.4vw, 40px) 0 0; }
.impact-grid div { border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; display: grid; gap: 8px; }
.impact-grid dt { font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.impact-grid dd { margin: 0; font-size: var(--t-64); color: #fff; }
.impact-faces { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(28px, 3.4vw, 40px) 0 0; padding: 0; }
.impact-faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.3); }
.impact-note { margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,.62); max-width: none; }
.impact-note a { color: var(--sprout); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.impact-note a:hover { color: #fff; }
@media (max-width: 900px) { .impact-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Three ways in, under the closing call ---------- */
/* No cards. Three columns of the closing band, parted by hairlines. */
.ways { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 46em; font-size: var(--t-16); color: rgba(255,255,255,.72); }
.ways a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ways a:hover { color: var(--sprout); }


.trust-partners { margin-top: clamp(28px, 4vw, 48px); background: var(--forest); color: #fff; padding: 16px 0; }
.trust-partners .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 40px; }
.trust-partners .partners-label { margin: 0; }
.trust-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 8px 28px; }
.trust-mark { display: grid; place-items: center; max-width: 100%; }
.trust-marks img { height: clamp(56px, 12vw, 168px); width: auto; max-width: 100%; object-fit: contain; }
.trust-marks img[alt="Whole Wild World"] { height: clamp(68px, 14vw, 196px); }
/* Partners who have no mark of their own are set, not faked into a logo. */
.trust-marks .partners-word { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.6vw, 36px); line-height: 1.05; text-align: center; text-wrap: balance; }
@media (max-width: 900px) {
  .trust-stage { grid-template-columns: 1fr; }
  .trust-photos .zoom-img { aspect-ratio: 4 / 3; }
  .trust-partners .wrap { grid-template-columns: 1fr; gap: 10px; }
  .trust-marks { gap: 8px 14px; }
}

/* globe hint: type plus a drawn hand, tucked under the header, not a glass pill over the planet */
.globe-hint { position: absolute; z-index: 2; top: calc(var(--header-h) + 10px); right: var(--gutter); display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sprout); font-size: 13px; letter-spacing: .06em; transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.globe-hint i { font-family: var(--display); font-style: italic; font-size: 16px; letter-spacing: 0; color: rgba(255,255,255,.58); }
.globe-hint-hand { display: inline-flex; align-items: center; flex: none; color: inherit; animation: nudge 2.4s var(--ease) infinite; }
.globe-hint-hand .ico { width: 15px; height: 15px; display: block; transform: translateY(.5px); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.globe-hint.is-gone { opacity: 0; transform: translateY(-6px); }
@media (max-width: 900px) { .globe-hint { top: 14px; right: var(--gutter); } }
@media (prefers-reduced-motion: reduce) { .globe-hint-hand { animation: none; } }

/* The MaP band: the globe picks a new pair every few seconds, and this caption is what shows it. */
.globe-now { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.globe-now.is-in { animation: now-in .55s var(--ease) both; }
@keyframes now-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.globe-now-pics { display: flex; flex: none; }
.globe-now-pics img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--void); }
.globe-now-pics img + img { margin-left: -14px; }
.globe-now-text { display: grid; gap: 2px; min-width: 0; }
.globe-now-text b { font-weight: 500; font-size: 16px; color: #fff; }
.globe-now-text span { font-size: 13px; color: rgba(255, 255, 255, .6); }
.globe-nav { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.globe-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.globe-arrow svg { width: 15px; height: 15px; }
.globe-arrow:hover { background: rgba(169, 213, 160, .16); border-color: rgba(169, 213, 160, .6); }
.globe-arrow:focus-visible { outline: 2px solid var(--sprout); outline-offset: 3px; }
.globe-dots { display: flex; align-items: center; gap: 2px; }
/* The dot stays 7px but the padding carries the tap target, so a thumb does not have to be exact. */
.globe-dot { box-sizing: content-box; width: 7px; height: 7px; padding: 7px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .26); background-clip: content-box; cursor: pointer; transition: background .4s var(--ease), transform .4s var(--ease); }
.globe-dot:hover { background-color: rgba(255, 255, 255, .5); }
/* background-color, not the shorthand: the shorthand would reset background-clip and paint the
   whole padded tap target instead of the dot. */
.globe-dot.is-on { background-color: var(--sprout); transform: scale(1.4); }
.globe-dot:focus-visible { outline: 2px solid var(--sprout); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .globe-now.is-in { animation: none; } }
/* The six faces are one row, or they stop reading as "these are the six". */
@media (max-width: 560px) {
  .impact-faces { gap: 6px; }
  .impact-faces img { width: 44px; height: 44px; }
}