/* The VALE – partner page
   Brand: teal + orange, warm greys, Roboto Condensed titles, Roboto body. */

:root {
  --teal: #94DED8;
  --teal-light: #C0E8E5;
  --teal-deep: #2F8F88;      /* text-safe teal for small accents on white */
  --orange: #FFA023;
  --orange-light: #FFC880;
  --black: #000000;
  --grey-dark: #4F4F4F;
  --grey: #7A7A7A;
  --grey-light: #BEBEBE;
  --white: #FFFFFF;
  --paper: #FFFBF4;           /* warm off-white */

  --font-title: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1240px;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
strong { font-weight: 500; }

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .82rem;
  color: var(--grey-dark);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .8em;
}
.eyebrow::before {
  content: "";
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.7em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--black); }
.btn:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 4px; }
.btn--small { padding: .6em 1.2em; font-size: .8rem; box-shadow: 3px 3px 0 var(--black); }
.btn--ghost { --bg: var(--white); }
.btn--ghost:hover { --bg: var(--teal-light); }
.btn--big { font-size: 1.1rem; padding: 1.1em 2.2em; }

.link-arrow {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
.link-arrow:hover { border-color: var(--orange); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-color: #eee; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1.05rem;
}

/* ---------- hero ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.9rem, 6.2vw, 5.6rem);
  font-weight: 900;
  line-height: .9;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.mark {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.mark::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.06em;
  bottom: .04em;
  height: .36em;
  background: var(--orange);
  z-index: -1;
  transform-origin: left;
  transform: scaleX(0) skewX(-8deg);
  animation: swipe .9s .6s var(--ease) forwards;
}
@keyframes swipe { to { transform: scaleX(1) skewX(-8deg); } }

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  max-width: 34em;
  color: var(--grey-dark);
  margin: 0 0 2.2rem;
}
.lede strong { color: var(--black); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }

.hero__art { position: relative; }
.vale-scene { width: 100%; height: auto; overflow: visible; }
.ridge--back  { fill: var(--teal-light); stroke: var(--black); stroke-width: 2; stroke-linejoin: round; }
.ridge--front { fill: var(--teal); stroke: var(--black); stroke-width: 2; stroke-linejoin: round; }
.swell line { animation: drift 7s ease-in-out infinite alternate; }
.swell line:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
.swell line:nth-child(3) { animation-duration: 8s; animation-delay: -5s; }
.swell line:nth-child(4) { animation-duration: 10s; animation-delay: -2s; }
@keyframes drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }

.sun .ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ripple 4.5s var(--ease) infinite;
  opacity: 0;
}
.sun .ring--2 { animation-delay: 1.5s; }
.sun .ring--3 { animation-delay: 3s; }
@keyframes ripple {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- section heads ---------- */
section { position: relative; }
.section-head { max-width: var(--max); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 16em; }
.outline {
  color: var(--orange);
  text-shadow: .045em .045em 0 var(--black);
}

/* ---------- logo wall ---------- */
.company {
  background: var(--paper);
  padding: clamp(64px, 9vw, 128px) 0;
  border-top: 2px solid var(--black);
}
.logos {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.logo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logo::before {                 /* teal ripple that fills the tile on hover */
  content: "";
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal-light);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s var(--ease);
  z-index: 0;
}
.logo img {
  position: absolute;
  z-index: 1;
  left: 16%;
  top: 14%;
  width: 68%;
  height: 58%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.1);
  opacity: .62;
  transition: filter .35s, opacity .35s, transform .35s var(--ease);
}
.logo span {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  color: var(--grey);
}
.logo:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--black); }
.logo:hover::before { transform: translate(-50%, -50%) scale(5); }
.logo:hover img { filter: none; opacity: 1; transform: scale(1.04); }
.logo:hover span { color: var(--black); }

.company__note {
  max-width: var(--max);
  margin: 2.4rem auto 0;
  padding: 0 var(--gutter);
  color: var(--grey-dark);
}

/* ---------- numbers ---------- */
.numbers {
  background: var(--teal);
  border-block: 2px solid var(--black);
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  overflow: hidden;
}
.numbers::before {               /* big faint circle echoing the mark */
  content: "";
  position: absolute;
  width: 60vw;
  max-width: 820px;
  aspect-ratio: 1;
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  right: -12vw;
  top: -18vw;
}
.numbers__grid {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat { border-top: 2px solid var(--black); padding-top: 1rem; }
.stat__n {
  display: block;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 1;
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.stat__l { display: block; max-width: 15em; font-size: .98rem; }

/* ---------- impact: a scroll story on the map ----------
   .impact__story[data-stage] goes 1→4 as the reader scrolls the steps (script.js).
   Each stage adds a layer: 1 countries + dots · 2 ripples · 3 dots turn orange · 4 arcs to Hamburg. */
.impact {
  background: var(--black);
  color: var(--white);
  padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px);
  border-top: 2px solid var(--black);
}
.impact__head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow--light { color: var(--teal-light); }
.impact h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 900; margin-bottom: 1rem; }
.impact__lede { color: #d4d4d4; margin: 0; max-width: 32em; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

.impact__story {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 64px);
}
.impact__map {
  position: sticky;
  top: 72px;
  height: calc(100vh - 96px);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.impact__map svg {
  width: 100%;
  height: auto;
  max-height: calc(100% - 3rem);
  overflow: hidden;
  /* fade the eastern and northern edges so the clip never shows as a hard line */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  mask-composite: intersect;
}

.land { fill: #171717; stroke: #2e2e2e; stroke-width: 1.5; transition: fill .8s var(--ease); }
.land--applied { fill: #22403e; }
.land--chosen  { fill: #2f6f6a; }
.impact__story[data-stage="3"] .land--chosen,
.impact__story[data-stage="4"] .land--chosen { fill: #245955; }

.dot { transition: transform .6s var(--ease); }
.dot .core {
  fill: var(--teal);
  stroke: var(--black);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .6s, transform .6s var(--ease);
}
.impact__story[data-stage="3"] .dot .core,
.impact__story[data-stage="4"] .dot .core { fill: var(--orange); transform: scale(1.3); }
.dot .ripple {
  fill: none;
  stroke: var(--teal);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.impact__story[data-stage="2"] .dot .ripple,
.impact__story[data-stage="3"] .dot .ripple {
  animation: map-ripple 2.8s var(--ease) infinite;
  animation-delay: calc(var(--i) * -.23s);
}
.impact__story[data-stage="2"] .dot .ripple--late,
.impact__story[data-stage="3"] .dot .ripple--late { animation-delay: calc(var(--i) * -.23s - 1.4s); }
.impact__story[data-stage="3"] .dot .ripple { stroke: var(--orange); }
@keyframes map-ripple {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}

.arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .85;
  transition: stroke-dashoffset 1.4s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}
.impact__story[data-stage="4"] .arc { stroke-dashoffset: 0; }

.hamburg { opacity: 0; transition: opacity .6s .9s; }
.impact__story[data-stage="4"] .hamburg { opacity: 1; }
.hamburg__dot { fill: var(--white); stroke: var(--orange); stroke-width: 6; }
.hamburg__pulse {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-ripple 2.2s var(--ease) infinite;
}
.hamburg text {
  fill: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: .06em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--black);
  stroke-width: 10px;
}

.impact__caption {
  position: relative;
  height: 1.6em;
  margin-top: .8rem;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--teal-light);
}
.impact__caption span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .4s var(--ease);
}
.impact__story[data-stage="1"] .impact__caption [data-for="1"],
.impact__story[data-stage="2"] .impact__caption [data-for="2"],
.impact__story[data-stage="3"] .impact__caption [data-for="3"],
.impact__story[data-stage="4"] .impact__caption [data-for="4"] { opacity: 1; transform: none; }

.impact__steps { list-style: none; margin: 0; padding: 0; }
.impact__steps li {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .28;
  transition: opacity .5s;
}
.impact__steps li:first-child { min-height: 64vh; }
.impact__steps li.is-active { opacity: 1; }
.step__num { font-family: var(--font-title); letter-spacing: .14em; font-size: .85rem; color: var(--teal); }
.impact__steps h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: .5rem 0 .2rem; color: var(--white); }
.step__fig {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: .95;
  margin: .3rem 0 .8rem;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.impact__steps p:not(.step__fig) { margin: 0; color: #d0d0d0; max-width: 26em; }
.step__link {
  align-self: flex-start;
  margin-top: 1.2rem;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
}
.step__link::after { content: " →"; }
.impact__source {
  max-width: var(--max);
  margin: 1rem auto 0;
  padding: 0 var(--gutter);
  font-size: .8rem;
  color: #9a9a9a;
}
.impact__source a { color: var(--teal-light); margin-left: .4em; }

/* ---------- why ---------- */
.why { padding: clamp(72px, 10vw, 140px) 0; }
.why__list {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.why__list li { border-top: 2px solid var(--black); padding-top: 1.4rem; }
.why__num {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1rem;
  color: var(--grey);
  letter-spacing: .1em;
}
.why__list h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: .4rem 0 .8rem; }
.why__list p { margin: 0; color: var(--grey-dark); }
.why__list li:hover h3 { color: var(--orange); transition: color .2s; }

/* ---------- tiers ---------- */
.tiers {
  background: var(--paper);
  border-top: 2px solid var(--black);
  padding: clamp(72px, 10vw, 140px) 0;
}
.tiers__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.tier {
  position: relative;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 2rem 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tier:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--black); }
.tier--featured { background: var(--orange-light); }
.tier__badge {
  position: absolute;
  top: -14px;
  left: 1.6rem;
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  padding: .35em .9em;
  border-radius: 999px;
}
.tier__icon { width: 88px; height: 88px; margin-bottom: 1rem; overflow: visible; }
.tier__icon .dot { fill: var(--orange); stroke: var(--black); stroke-width: 2; }
.tier__icon .r {
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
  transform-origin: 60px 60px;
  transition: transform .5s var(--ease), stroke .3s;
}
.tier:hover .tier__icon .r1 { transform: scale(1.12); stroke: var(--teal-deep); }
.tier:hover .tier__icon .r2 { transform: scale(1.1);  transition-delay: .06s; stroke: var(--teal-deep); }
.tier:hover .tier__icon .r3 { transform: scale(1.08); transition-delay: .12s; stroke: var(--teal-deep); }
.tier h3 { font-size: 2.4rem; }
.tier__price {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2rem;
  margin: .2rem 0 .4rem;
}
.tier__pitch { margin: 0 0 1.2rem; font-weight: 500; }
.tier ul { list-style: none; margin: 0 0 2rem; padding: 0; flex: 1; }
.tier li {
  padding: .5rem 0 .5rem 1.6rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  position: relative;
  font-size: .96rem;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: .6em;
  height: .6em;
  border: 2px solid var(--black);
  border-radius: 50%;
}
.tier .btn { align-self: flex-start; }
.tiers__note { text-align: center; margin: 2.6rem var(--gutter) 0; color: var(--grey-dark); }

/* ---------- quote ---------- */
.quote {
  padding: clamp(72px, 9vw, 128px) var(--gutter);
  text-align: center;
  border-top: 2px solid var(--black);
}
.quotes { display: grid; max-width: 980px; margin: 0 auto; }
.quote figure {
  grid-area: 1 / 1;              /* stack every quote in the same cell */
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.quote figure.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.12;
  margin: 0;
}
.quote p::before, .quote p::after { color: var(--orange); font-weight: 900; }
.quote p::before { content: "“"; }
.quote p::after  { content: "”"; }
.quote figcaption {
  margin-top: 1.6rem;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  color: var(--grey);
}

/* ---------- CTA ---------- */
.talk {
  border-top: 2px solid var(--black);
  padding: clamp(96px, 14vw, 200px) var(--gutter);
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)),
    url("assets/mountains.jpg") center / cover no-repeat;
  text-align: center;
  isolation: isolate;
}
.talk::after {                  /* teal/orange duotone wash on the photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal) 0%, transparent 55%, var(--orange) 100%);
  mix-blend-mode: soft-light;
  z-index: -1;
}
.talk__inner { max-width: 760px; margin: 0 auto; position: relative; }
.talk h2 { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 900; margin-bottom: 1.4rem; }
.talk p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); margin: 0 auto 2.4rem; max-width: 34em; }
.talk .talk__who { margin: 1.8rem 0 0; font-size: .92rem; opacity: .9; }
.talk .talk__who a { text-decoration-color: var(--orange); }

/* ---------- social / Instagram ---------- */
.social {
  padding: clamp(64px, 8vw, 112px) var(--gutter);
  background: var(--paper);
  border-top: 2px solid var(--black);
}
.social__head {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.6rem 2rem;
}
.social h2 { font-size: clamp(2.2rem, 6vw, 5rem); text-transform: none; }
.social h2 a { text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) 0 92% / 0 .18em no-repeat; transition: background-size .5s var(--ease); }
.social h2 a:hover { background-size: 100% .18em; }
.social__links { display: flex; flex-wrap: wrap; gap: .8rem; }
.ig-feed {
  list-style: none;
  max-width: var(--max);
  margin: 2.6rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.ig-feed[hidden] { display: none; }
.ig-feed a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 2px solid var(--black);
  border-radius: 14px;
  overflow: hidden;
  background: var(--teal-light);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ig-feed img { width: 100%; height: 100%; object-fit: cover; }
.ig-feed a:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--black); }
.ig-kind {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: .15em .6em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: var(--white);
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .62rem;
}
.ig-caption {                     /* first line of the caption slides up on hover */
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem .7rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: var(--white);
  font-size: .78rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--ease);
}
.ig-feed a:hover .ig-caption, .ig-feed a:focus-visible .ig-caption { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.footer {
  padding: 36px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  font-size: .85rem;
  color: var(--grey-dark);
  border-top: 2px solid var(--black);
}
.footer p { margin: 0; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer nav { display: flex; gap: 1.4rem; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); }

/* ---------- click ripples ---------- */
.click-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--teal-deep);
  animation: click-ripple .9s var(--ease) forwards;
}
.click-ripple--late { border-color: var(--orange); animation-delay: .12s; opacity: 0; }
@keyframes click-ripple {
  0%   { transform: scale(1);  opacity: .9; }
  100% { transform: scale(9);  opacity: 0; }
}

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__art { max-width: 460px; margin: 0 auto; width: 100%; order: -1; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; }
  .why__list, .tiers__grid { grid-template-columns: 1fr; }
  .impact__story { grid-template-columns: 1fr; gap: 0; }
  .impact__map {                 /* the map rides along as a header; the steps slide under it */
    top: 60px;
    height: auto;
    z-index: 2;
    background: var(--black);
    padding: .8rem 0 .4rem;
    box-shadow: 0 16px 16px -8px var(--black);
  }
  .impact__map svg { max-height: 38vh; }
  .impact__steps li, .impact__steps li:first-child { min-height: 52vh; justify-content: flex-start; padding-top: 1.2rem; }
  .impact__steps li:last-child { min-height: 40vh; }
  .impact__caption { height: 2.8em; font-size: .7rem; letter-spacing: .12em; }
  .ig-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiers__grid { max-width: 560px; }
}
@media (max-width: 520px) {
  .hero__art { max-width: 250px; }
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .mark::after { transform: scaleX(1) skewX(-8deg); }
  .js .reveal { opacity: 1; transform: none; }
  .impact__steps li { opacity: 1; }
}