/* 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); } }
/* Let the sunset and greenery carry the opening. Shade the lower copy and
   navigation locally, rather than stacking washes across the whole photograph. */
.page-home main .hero[data-hero]::after { background: none; }
.hero-scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,18,12,.62) 0%, rgba(6,18,12,.38) 24%, rgba(6,18,12,.08) 50%, rgba(6,18,12,0) 64%),
    linear-gradient(to right, rgba(6,18,12,.38) 0%, rgba(6,18,12,.12) 42%, rgba(6,18,12,0) 68%),
    linear-gradient(to bottom, rgba(6,18,12,.35) 0%, rgba(6,18,12,0) 18%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(6,18,12,.65) 0%, rgba(6,18,12,.56) 40%, rgba(6,18,12,.56) 68%, transparent 84%),
      linear-gradient(to right, rgba(6,18,12,.15), transparent);
  }
}
.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-start { fill: var(--sprout); stroke: var(--leaf); stroke-width: 1.5; }
@keyframes tr-march { to { stroke-dashoffset: -28.5px; } }
.no-js [data-thread-reveal] { height: 100%; }
@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 night. Built in Oklab with eased stops, so
   lightness falls evenly through living green and there is no band, no muddy middle and no edge. */
.dusk {
  height: clamp(150px, 21vh, 230px);
  position: relative;
  margin-bottom: -1px;
  /* One pre-rendered ramp, eased in Oklab and dithered by a level either way, so the 8-bit steps a
     long CSS gradient shows as faint lines never form. See assets/dusk-ramp.png. */
  background: #0b261c url("/assets/dusk-ramp.png") repeat-x 0 0 / 128px 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-color: var(--forest);
  /* A canopy beneath the forest-green wash gives the gift's journey a living backdrop. */
  background-image:
    linear-gradient(180deg, rgba(18,56,42,.84), rgba(18,56,42,.76) 48%, rgba(18,56,42,.9)),
    image-set(url('/assets/role-canopy-1400.webp') type('image/webp'), url('/assets/role-canopy-1400.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center, 50% 42%;
  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: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: clamp(180px, 34vw, 520px); }
.st-place { display: flex; align-items: center; gap: 16px; }
.st-place[data-node="urban"] { flex-direction: row-reverse; }
/* Leave enough drop for a broad, rounded fork rather than a flattened bend. */
@media (min-width: 761px) {
  .question { padding-top: clamp(120px, 11vw, 170px); }
  .st-3 { margin-top: clamp(80px, 8vw, 128px); }
}
.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;
    background-image:
      linear-gradient(180deg, rgba(18,56,42,.84), rgba(18,56,42,.8) 48%, rgba(18,56,42,.9)),
      image-set(url('/assets/role-canopy-900.webp') type('image/webp'), url('/assets/role-canopy-900.jpg') type('image/jpeg'));
  }
  .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 { display: flex; width: auto; 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; }
@media (min-width: 761px) { .fifty-head { margin-bottom: clamp(112px, 12vw, 176px); } }
.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(24px, 4vh, 44px) 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;
  /* Fade the clipped sphere and its glow into the section, rather than ending at the canvas edge. */
  --globe-edge-mask: linear-gradient(to bottom,
    transparent 0%, #000 12%, #000 60%,
    rgba(0, 0, 0, .95) 68%, rgba(0, 0, 0, .72) 78%,
    rgba(0, 0, 0, .38) 88%, rgba(0, 0, 0, .1) 96%, transparent 100%);
  -webkit-mask-image: var(--globe-edge-mask);
  mask-image: var(--globe-edge-mask);
}
.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; } }
/* Stacked captions occupy the middle of a phone photograph as well as its foot. */
@media (max-width: 900px) { .diptych .scrim { background: linear-gradient(to bottom, rgba(6,18,12,.15), rgba(6,18,12,.74) 28%, rgba(6,18,12,.88)); } }

/* ---------- 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; } }

@media (min-width: 761px) { .two { padding-top: clamp(120px, 13vw, 200px); } }

/* ---------- 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,.88); 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,.9); }
/* 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,.9); 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 */
/*old hint*/
.globe-hint-old { 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; }
}

/* Client's revised opening line. */
.hero-p strong { display: block; font-weight: 600; margin-bottom: .35em; }

/* ---------- Hero, second pass ----------
   One voice for the headline: the campaign line sits under it, smaller, same colour, upright.
   One paragraph, one button and a plain link. The example pair is the house card: two white
   tilted photo cards, the city one overlapping the wild one, the thread and distance between. */
.hero h1 { max-width: 13ch; }
.hero h1 .l-sub { font-size: .52em; line-height: 1.08; margin-top: .22em; color: rgba(255,255,255,.94); letter-spacing: -.005em; }
.hero-p { font-size: min(var(--t-18), 2.4vh); line-height: 1.55; max-width: 31em; }
.hero-p strong { display: inline; }
.hero-actions { align-items: center; gap: 12px 26px; }
.hero-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-shadow: 0 1px 14px rgba(6,18,12,.6); }
.hero-textlink .arrow { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.hero-textlink:hover .arrow { transform: translateX(4px); }
.hero-inner { grid-template-areas: "copy link"; }
.hero-link { position: relative; display: block; width: min(100%, 470px); height: 330px; padding: 0; text-shadow: none; }
.hl-card { position: absolute; margin: 0; background: #fff; padding: 8px 8px 0; box-shadow: 10px 12px 0 rgba(6,18,12,.28); color: var(--forest); }
.hl-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hl-media img { width: 100%; height: 100%; object-fit: cover; }
.hl-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 2px 10px; }
.hl-card b { font: 500 16px / 1.15 var(--display); }
.hl-card figcaption span { font: 500 10px / 1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.hl-urban { left: 0; top: 0; width: 52%; transform: rotate(-3deg); z-index: 2; }
.hl-wild { right: 0; bottom: 0; width: 58%; transform: rotate(2.2deg); }
.hero-link .link-line { position: absolute; left: 40%; top: 46%; width: 34%; height: auto; margin: 0; z-index: 3; }
.hl-km { position: absolute; left: 40%; top: 74%; z-index: 3; padding: 4px 9px; border-radius: 99px; background: var(--forest); color: #fff; font-size: 12px; }
.hero-scrim { background:
  linear-gradient(to top, rgba(6,18,12,.55) 0%, rgba(6,18,12,.3) 26%, rgba(6,18,12,0) 55%),
  linear-gradient(to right, rgba(6,18,12,.42) 0%, rgba(6,18,12,.12) 45%, rgba(6,18,12,0) 70%),
  linear-gradient(to bottom, rgba(6,18,12,.3) 0%, rgba(6,18,12,0) 16%); }
@media (max-width: 1000px) { .hero-inner { grid-template-areas: "copy" "link"; } .hero-link { justify-self: start; width: min(100%, 400px); height: 280px; } }
@media (max-width: 640px) {
  .hero-link { display: block; width: 100%; height: 210px; margin-top: 6px; }
  .hl-card b { font-size: 13px; } .hl-card figcaption span { display: none; }
  .hl-urban { width: 50%; } .hl-wild { width: 54%; }
}
.hl-card figcaption { display: grid; gap: 3px; justify-content: start; }
.hl-km { left: 42%; top: 70%; }

/* Hero, third pass: the two cards sit apart with the thread pinned between them, the distance
   sits on the thread; the lead sentence and the button carry the brand green; a clear cue to scroll. */
.hero-link { width: min(100%, 540px); height: 300px; }
.hl-urban { left: 0; top: 0; width: 41%; transform: rotate(-3deg); }
.hl-wild { right: 0; top: 52px; bottom: auto; width: 43%; transform: rotate(2.4deg); }
.hl-thread { position: absolute; left: 40%; right: 42%; top: 34%; height: 40px; z-index: 3; color: var(--sprout); }
.hl-thread svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl-thread path { stroke: var(--sprout); filter: drop-shadow(0 1px 4px rgba(6,18,12,.5)); }
.hl-pin { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 6px rgba(6,18,12,.5); }
.hl-pin-a { left: 0; background: var(--sprout); }
.hl-pin-b { left: 100%; background: var(--forest); border: 2.5px solid var(--sprout); }
.hero-link .hl-km { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; background: var(--sprout); color: var(--forest); font-weight: 600; }
.hero-p-lead { color: var(--sprout); font-weight: 500; }
.hero .btn-light { background: var(--sprout); color: var(--forest); }
.hero .btn-light:hover { background: #fff; }
.hero .btn-light .leaf { color: var(--forest); }
.hero-scroll { position: absolute; left: 50%; bottom: clamp(14px, 2.6vh, 26px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 13px; letter-spacing: .02em; text-shadow: 0 1px 12px rgba(6,18,12,.6); opacity: 0; animation: fade 1s var(--ease) 1.8s forwards; z-index: 2; }
.hero-scroll svg { width: 20px; height: 30px; color: var(--sprout); }
.hero-scroll-dot { animation: scroll-dot 1.8s var(--ease) infinite; }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.hero-scroll:hover span { text-decoration: underline; text-underline-offset: 4px; }
.hero-inner { padding-bottom: clamp(84px, 11vh, 120px); }
@media (prefers-reduced-motion: reduce) { .hero-scroll-dot { animation: none; } }
@media (max-width: 1000px) { .hero-link { width: min(100%, 460px); height: 260px; } }
@media (max-width: 640px) {
  .hero-link { height: 190px; }
  .hl-urban { width: 42%; } .hl-wild { width: 44%; top: 36px; }
  .hero-inner { padding-bottom: 86px; }
}
.hero-scroll { gap: 6px; }
.hero-scroll svg { width: 24px; height: 14px; animation: scroll-v 1.8s var(--ease) infinite; }
@keyframes scroll-v { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }
.tr-start { display: none; }

/* The urgent appeal, in the hero */
.hero-appeal { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 8px 16px 8px 8px; max-width: 460px; border-radius: 16px; color: #fff; text-shadow: none;
  background: rgba(6,18,12,.42); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); opacity: 0; animation: fade 1.2s var(--ease) 1.6s forwards; transition: background-color .3s, border-color .3s; }
.hero-appeal:hover { background: rgba(6,18,12,.6); border-color: rgba(255,255,255,.45); }
.hero-appeal-pic { flex: none; width: 58px; height: 58px; border-radius: 11px; overflow: hidden; }
.hero-appeal-pic img { width: 100%; height: 100%; object-fit: cover; }
.hero-appeal-txt { display: grid; gap: 3px; }
.hero-appeal-txt small { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sprout); }
.hero-appeal-txt b { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.1; }
.hero-appeal-txt span { font-size: 13px; color: rgba(255,255,255,.8); }
.hero-appeal svg { flex: none; width: 18px; height: 18px; margin-left: 6px; transition: transform .4s var(--ease); }
.hero-appeal:hover svg { transform: translateX(3px); }

/* The gift on the home page uses the same control as /donate/ */
.two-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.two-head h2 { font-size: var(--t-64); color: var(--forest); max-width: 11ch; }
@media (max-width: 900px) { .two-head { grid-template-columns: 1fr; } .two .wrap { width: calc(100% - 20px); } .two-head { padding: 0 6px; } }


/* ---------- The globe band, in glass ---------- */
.globe-band { background: linear-gradient(to bottom, rgba(11,38,28,1.000) 0px, rgba(11,38,28,0.983) 25px, rgba(11,38,28,0.936) 49px, rgba(11,38,28,0.865) 74px, rgba(11,38,28,0.774) 98px, rgba(11,38,28,0.670) 123px, rgba(11,38,28,0.558) 148px, rgba(11,38,28,0.442) 172px, rgba(11,38,28,0.330) 197px, rgba(11,38,28,0.226) 222px, rgba(11,38,28,0.135) 246px, rgba(11,38,28,0.064) 271px, rgba(11,38,28,0.017) 295px, rgba(11,38,28,0.000) 320px), radial-gradient(75% 85% at 72% 66%, #1c5a40 0%, #123b2c 42%, #0b261c 100%); }
.globe-canvas { --globe-edge-mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.globe-copy { display: grid; grid-template-columns: minmax(0, 452px); gap: clamp(18px, 3vh, 30px); align-content: start; pointer-events: none; }
.globe-copy > * { pointer-events: auto; }
.globe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: min(100%, var(--wrap)); }
.globe-copy { grid-template-columns: 1fr; }
.globe-title { display: grid; gap: 14px; justify-items: start; }
.globe-title h2 { font-size: min(var(--t-64), 7vh); line-height: 1; color: #fff; max-width: 14ch; }
.globe-lede { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.74); max-width: 30em; }
.globe-card { width: min(452px, 100%); }
.gl-home-list .gl-row { cursor: pointer; }
.globe-cta { height: 52px; padding: 0 22px; font-size: 16px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); margin: 0 0 6px; }
.globe-hint { position: absolute; z-index: 2; bottom: clamp(24px, 5vh, 48px); right: var(--gutter); display: inline-flex; gap: 8px; align-items: center; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.globe-hint.is-gone { opacity: 0; transform: translateY(6px); }
.globe-hint i { display: none; }
@media (min-width: 901px) and (max-height: 860px) { .globe-card { padding: 14px; gap: 10px; } .globe-card .map-focus .gl-tile { min-height: 96px; } .globe-card .gl-row { padding: 6px 10px 6px 6px; } .globe-card .gl-pics img { width: 40px; height: 40px; } .globe-lede { display: none; } .globe-title h2 { font-size: 46px; } }
@media (max-width: 900px) {
  .globe-head { flex-direction: column; align-items: flex-start; }
  .globe-card { width: 100%; }
  .globe-cta { width: 100%; justify-content: center; margin: 0; }
  .globe-hint { top: 14px; bottom: auto; }
}

/* The green starts behind the gift box: the box sits on its first stops instead of ending above them */
.two { padding-bottom: clamp(28px, 4vh, 48px); }
.two .gv { position: relative; z-index: 2; }
.dusk { margin-top: calc(-1 * clamp(190px, 26vh, 250px)); z-index: 0; height: clamp(380px, 50vh, 480px); }
@media (max-width: 900px) { .dusk { margin-top: -130px; height: 300px; } }

/* ---------- Phone only ---------- */
@media (max-width: 640px) {
  /* the lead sentence sat on the bright sun: a soft wash behind the copy, phones only */
  .hero-scrim { background:
    linear-gradient(to bottom, rgba(6,18,12,.5) 0%, rgba(6,18,12,.5) 55%, rgba(6,18,12,.2) 80%, rgba(6,18,12,0) 100%),
    linear-gradient(to top, rgba(6,18,12,.55) 0%, rgba(6,18,12,0) 40%); }
  .hero-p { text-shadow: 0 1px 14px rgba(6,18,12,.7); }
  .hero-p-lead { color: #c9ecc1; }
  /* the seam line ran through the headline and text of each pair card */
  .diptych .seam { display: none; }
}
.question-after { margin-top: 18px; max-width: 30em; }