/* Values come from the Figma frame (1440 wide). Spacing scales down from there on smaller screens. */
:root {
  --navy: #0b2559;
  --blue: #1247c4;
  --white: #ffffff;

  --font-display: "Unbounded", "Arial Black", Arial, sans-serif;
  --font-body: "LINE Seed JP", "Helvetica Neue", Arial, sans-serif;

  --content-width: 1300px;
  --gutter: clamp(16px, 4.861vw, 70px);
  --band-inset: clamp(8px, 1.736vw, 25px);
  --plate-muted: #47608a;
  --plate-track: #dce7f7;
  color-scheme: light;
}

/* Language: every text exists twice, and the root attribute decides which one shows. */
:root:not([data-lang="en"]) .en { display: none !important; }
:root[data-lang="en"] .uk { display: none !important; }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Header */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-top: 35px;
}

.logo {
  display: block;
  justify-self: start;
  line-height: 0;
}

.site-nav {
  display: flex;
  gap: 30px;
  font-size: 20px;
  white-space: nowrap;
}

.site-nav a {
  text-decoration: none;
  text-underline-offset: 5px;
}

.site-nav a:hover { text-decoration: underline; }

.menu-toggle { display: none; }

.lang-switch {
  display: flex;
  justify-self: end;
  width: 125px;
  height: 50px;
  padding: 2px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 50px;
}

.lang-switch button {
  flex: 1 1 50%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50px;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch button:hover { color: var(--blue); }

.lang-switch button[aria-pressed="true"] {
  background: var(--blue);
  color: var(--white);
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  margin: clamp(28px, 3.195vw, 46px) 0 0;
  padding-inline: 16px;
  font-family: var(--font-display);
  font-size: min(70px, 10.4vw);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* The longest English line is wider than the longest Ukrainian one. */
:root[data-lang="en"] .hero-title { font-size: min(70px, 8.8vw); }

.hero-text {
  width: min(563px, 100% - 2 * var(--gutter));
  margin: clamp(28px, 3.96vw, 57px) 0 0;
  font-size: clamp(18px, 1.39vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.hero-button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 60px;
  margin-top: clamp(32px, 4.03vw, 58px);
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 30px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-button:hover {
  background: var(--navy);
  color: var(--white);
}

/* The button sits half over the video, as in the design. */
.hero-media {
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  aspect-ratio: 1300 / 562;
  margin-top: -30px;
  overflow: hidden;
  background: var(--navy);
  border-radius: 30px 30px 0 0;
}

.hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Next section: slides over the pinned hero. */
.js .stage {
  position: sticky;
  top: 0; /* script.js replaces this so a hero taller than the screen pins at its bottom edge */
  z-index: 0;
  background: var(--white);
}

/* Everything after the hero sits above the pinned stage. */
.sheet {
  position: relative;
  z-index: 1;
  background: var(--white);
}

.context { padding-bottom: 110px; }

/* Figures band: wider than the page content, as in the design */
.stats {
  display: grid;
  /* Column widths reproduce where the three figures sit in the Figma frame. */
  grid-template-columns: 526fr 308fr 556fr;
  width: min(1390px, 100% - 2 * var(--band-inset));
  margin: 0 auto;
  padding: 52px 0 44px;
  list-style: none;
  background: var(--blue);
  border-radius: 40px;
  color: var(--white);
  text-align: center;
}

.stat p { margin: 0; }

.stat-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.14em;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.861vw, 70px);
  font-weight: 400;
  line-height: 1.1;
}

.stat-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stat-figure img {
  flex: none;
  width: 0.71em;
  height: 0.71em;
}

.stat-label {
  margin-top: 9px !important;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.389vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

/* Copy and well passport */
.context-body {
  display: grid;
  grid-template-columns: minmax(0, 582fr) minmax(0, 635fr);
  gap: 83px;
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin: 110px auto 0;
}

.context-copy {
  grid-column: 2;
  grid-row: 1;
  padding-top: 170px;
}

.context-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.context-text {
  margin: 33px 0 0;
  font-size: clamp(18px, 1.389vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.context-goals {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 2.778vw, 40px);
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.context-goals img {
  display: block;
  width: clamp(104px, 9.444vw, 136px);
  height: auto;
}

.plate {
  grid-column: 1;
  grid-row: 1;
  min-height: 678px;
  display: flex;
  padding: 14px;
  background: var(--white);
  border-radius: 40px;
  box-shadow: 0 18px 48px rgba(11, 37, 89, 0.18);
}

.plate-in {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 44px 44px 34px;
  border: 2px solid var(--blue);
  border-radius: 28px;
}

/* The two rivets of the enamel plate */
.plate-in::before,
.plate-in::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--plate-track);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--plate-muted);
}

.plate-in::before { left: 14px; }
.plate-in::after { right: 14px; }

.plate-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  color: var(--plate-muted);
}

.nowrap { white-space: nowrap; }

.plate-tag {
  color: var(--blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plate-title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.223vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.plate-place {
  margin: 8px 0 0;
  font-size: 18px;
  color: var(--plate-muted);
}

.plate-values {
  display: grid;
  flex: 1;
  align-content: space-between;
  gap: 20px;
  margin: 26px 0 26px;
  padding-top: 24px;
  border-top: 1px solid var(--plate-track);
}

.pv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}

.pv dt {
  font-size: 18px;
  color: var(--plate-muted);
}

.pv dd {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  text-align: right;
}

.pv .meter {
  grid-column: 1 / -1;
  height: 8px;
  margin-block: 6px 4px;
  overflow: hidden;
  background: var(--plate-track);
  border-radius: 4px;
}

.meter i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.pv .sub {
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--plate-muted);
  text-align: left;
}

.plate-note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--plate-track);
  font-size: 16px;
  line-height: 1.45;
  color: var(--plate-muted);
}

/* News timeline. Each row owns its piece of the line, so the line can draw row by row. */
.timeline {
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin: 110px auto 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  padding: 28px 50px 46px 47px;
}

.timeline li:last-child { padding-bottom: 4px; }

.timeline li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 3px;
  width: 2px;
  background: var(--blue);
  transform-origin: top;
}

.timeline li::after {
  content: "";
  position: absolute;
  top: 29px;
  left: -6px;
  width: 20px;
  height: 20px;
  background: var(--navy);
  border-radius: 50%;
}

.timeline-date {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.timeline p {
  margin: 13px 0 0;
  font-size: clamp(18px, 1.389vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

/* Hidden start of the reveal. Without JavaScript or with reduced motion, every row simply shows. */
@media (prefers-reduced-motion: no-preference) {
  .js .timeline li::before {
    transform: scaleY(0);
    transition: transform 0.5s ease;
  }

  .js .timeline li::after {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
  }

  .js .timeline li > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .timeline li.is-visible::before { transform: scaleY(1); }
  .js .timeline li.is-visible::after { transform: scale(1); }

  .js .timeline li.is-visible > * {
    opacity: 1;
    transform: none;
  }
}

/* About us */
.purpose {
  --card-width: clamp(280px, 32.292vw, 465px);
  --card-gap: clamp(16px, 4.514vw, 65px);
  --section-inset: max(var(--gutter), (100% - var(--content-width)) / 2);
  padding-bottom: 110px;
}

.purpose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--section-inset);
}

.purpose-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.purpose-sub {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.389vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arrows need the script, so without it the cards simply scroll sideways. */
.carousel-arrows {
  display: none;
  flex: none;
  gap: 27px;
}

.js .carousel-arrows { display: flex; }

.carousel-arrow {
  display: grid;
  place-items: center;
  width: clamp(52px, 5.556vw, 80px);
  height: clamp(52px, 5.556vw, 80px);
  padding: 0;
  background: var(--blue);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.carousel-arrow img {
  display: block;
  width: 60%;
  height: 60%;
  transition: transform 0.25s ease;
}

.carousel-arrow-next img { transform: scaleX(-1); }

@media (hover: hover) {
  .carousel-arrow:hover { background: var(--navy); }
}

/* Starts at the left edge of the content, so no earlier card shows beside the first one. */
.carousel {
  margin-top: 40px;
  margin-inline-start: var(--section-inset);
  overflow-x: auto;
}

.js .carousel { overflow: hidden; }

.carousel-track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  touch-action: pan-y;
}

.js .carousel-track {
  transform: translateX(calc((var(--card-width) + var(--card-gap)) * var(--carousel-position, 0) * -1));
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.purpose-card {
  --dim: 0.58;
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--card-width);
  min-height: 475px;
  padding: 55px 50px 34px;
  overflow: hidden;
  background: var(--navy);
  border-radius: 50px;
  color: var(--white);
}

.purpose-card-mission { --dim: 0.72; }
.purpose-card-sector { --dim: 0.5; }

.purpose-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.purpose-card-vision .purpose-photo { object-position: center 38%; }
.purpose-card-sector .purpose-photo { object-position: center 44%; }

.purpose-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, var(--dim));
  transition: background-color 0.5s ease;
}

.purpose-copy,
.purpose-icon {
  position: relative;
  z-index: 2;
}

.purpose-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
}

.purpose-text {
  margin: 20px 0 0;
  font-size: clamp(18px, 1.389vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.purpose-icon {
  align-self: center;
  width: 100px;
  height: 100px;
  margin-top: auto;
}

/* Hover: the photo darkens and drifts closer while the text grows towards the reader. */
@media (hover: hover) {
  .purpose-card:hover::before { background-color: rgba(0, 0, 0, calc(var(--dim) + 0.14)); }
}

/* Where we work */
.where {
  padding: 0 var(--band-inset) var(--band-inset);
}

.where-card {
  display: grid;
  grid-template-columns: minmax(0, 795fr) minmax(340px, 395fr);
  column-gap: clamp(24px, 8.125vw, 117px);
  max-width: calc(var(--content-width) + 90px);
  margin-inline: auto;
  padding: 52px clamp(20px, 3.194vw, 46px) 82px;
  background: var(--blue);
  border-radius: 40px;
  color: var(--white);
}

.where-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.where-lead {
  width: min(440px, 100%);
  margin: 20px 0 0;
  font-size: clamp(18px, 1.389vw, 20px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.map-wrap {
  position: relative;
  margin-top: 66px;
}

/* Footnotes sit in the empty corner beside the map, so they take no extra height. */
.map-notes {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
}

/* The credit is required by the OpenStreetMap licence. */
.map-credit {
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: -0.02em;
}

.ukraine-map {
  display: block;
  width: 100%;
  height: auto;
}

/* Only the highlighted oblasts react; the lines and pins on top let the pointer through. */
#ukraine-outline,
#oblast-lines,
#location-pins { pointer-events: none; }

#focus-oblasts path { transition: fill 0.25s ease; }
#focus-oblasts path:hover { fill: #5b8cff; }

.where-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.where-side { padding-top: 102px; }

.where-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.where-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.where-count-number {
  display: inline-block;
  font-size: 60px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.where-count-label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}

/* Regions: the same row-by-row line as the news timeline, in white on blue. */
.regions {
  margin: 62px 0 0;
  padding: 0;
  list-style: none;
}

.regions li {
  position: relative;
  min-height: 166px;
  padding: 30px 0 24px 46px;
}

.regions li:last-child {
  min-height: 159px;
  padding-bottom: 0;
}

.regions li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 7px;
  width: 2px;
  background: var(--white);
  transform-origin: top;
}

.regions li::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -2px;
  width: 20px;
  height: 20px;
  background: var(--navy);
  border-radius: 50%;
}

.region-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.region-raions {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.region-text {
  max-width: 240px;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Activities: figures, then five squares that show the details on hover. */
.activities {
  padding: 86px max(var(--gutter), (100% - var(--content-width)) / 2) 55px;
  text-align: center;
}

.activities-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.778vw, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.activity-stats,
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 3.472vw, 50px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-stats {
  margin-top: 106px;
  color: var(--blue);
}

.activity-stat-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.activity-stat-label {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.389vw, 20px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.activity-stat img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 11px auto 0;
}

.activity-grid {
  row-gap: clamp(16px, 3.819vw, 55px);
  margin-top: 88px;
}

.activity {
  display: grid;
  aspect-ratio: 1; /* a square stays square unless its text needs more height */
  background: var(--blue);
  border-radius: clamp(30px, 3.472vw, 50px);
  color: var(--white);
  transition: background-color 0.35s ease, color 0.35s ease;
}

.activity-navy { background: var(--navy); }

.activity:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.activity-title,
.activity-detail {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.activity-title {
  place-self: center;
  margin: 0;
  padding-inline: 24px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.778vw, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.activity-detail {
  align-self: center;
  padding: clamp(20px, 2.5vw, 36px);
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
}

.activity-detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.528vw, 22px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.activity-text {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.activity-result {
  margin: 18px 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.activity-result-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 400;
}

/* Hover or keyboard focus: the square changes colour and its title gives way to the details. */
.activity:focus-visible,
.activity:hover {
  background: var(--plate-track);
  color: var(--navy);
}

.activity:focus-visible .activity-title,
.activity:hover .activity-title {
  opacity: 0;
  transform: scale(0.92);
}

.activity:focus-visible .activity-detail,
.activity:hover .activity-detail {
  opacity: 1;
  transform: none;
}

/* Touch screens have no hover, so the details are always shown. */
@media (hover: none) {
  .activity { aspect-ratio: auto; }
  .activity:focus-visible,
  .activity:hover { background: var(--blue); color: var(--white); }
  .activity-navy:focus-visible,
  .activity-navy:hover { background: var(--navy); }
  .activity-title { display: none; }
  .activity-detail { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .activity,
  .activity-title,
  .activity-detail { transition: none; transform: none; }
}

/* Scroll-in animations. Without JavaScript or with reduced motion, everything simply shows. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
      opacity 0.8s ease var(--reveal-delay, 0s),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .where-lead,
  .purpose-sub,
  .carousel { --reveal-delay: 0.15s; }

  .activity-grid li:nth-child(2),
  .activity-grid li:nth-child(5) { --reveal-delay: 0.12s; }
  .activity-grid li:nth-child(3) { --reveal-delay: 0.24s; }

  /* Photos settle into place while the cards rise, then the icons pop in. */
  .purpose-photo { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

  .js .carousel .purpose-photo {
    transform: scale(1.12);
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  }

  .js .carousel.is-visible .purpose-photo { transform: none; }

  .js .carousel .purpose-icon {
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity 0.5s ease calc(var(--reveal-delay, 0s) + 0.45s),
      transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.45s);
  }

  .js .carousel.is-visible .purpose-icon {
    opacity: 1;
    transform: none;
  }

  .purpose-copy {
    transform-origin: 50% 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (hover: hover) {
    .purpose-card:hover .purpose-copy { transform: scale(1.07); }
    .purpose-card:hover .purpose-photo,
    .js .carousel.is-visible .purpose-card:hover .purpose-photo {
      transform: scale(1.08);
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .carousel-arrow:hover img { transform: translateX(-4px); }
    .carousel-arrow-next:hover img { transform: scaleX(-1) translateX(-4px); }
  }

  /* The three oblasts fill in one by one, in the order of the list below, and each pin drops onto its oblast.
     These run as keyframes so that they add no delay to the colour change on hover. */
  .js .map-wrap:not(.is-visible) #focus-oblasts path { fill: var(--white); }
  .js .map-wrap:not(.is-visible) .map-pin { opacity: 0; }

  .js .map-wrap.is-visible #focus-oblasts path { animation: oblast-fill 0.7s ease both; }
  .js .map-wrap.is-visible .map-pin { animation: pin-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

  .js .map-wrap.is-visible #mykolaiv { animation-delay: 0.4s; }
  .js .map-wrap.is-visible #kherson { animation-delay: 0.7s; }
  .js .map-wrap.is-visible #dnipropetrovsk { animation-delay: 1s; }
  .js .map-wrap.is-visible .map-pin-mykolaiv { animation-delay: 0.7s; }
  .js .map-wrap.is-visible .map-pin-kherson { animation-delay: 1s; }
  .js .map-wrap.is-visible .map-pin-dnipropetrovsk { animation-delay: 1.3s; }

  @keyframes oblast-fill {
    from { fill: var(--white); }
  }

  @keyframes pin-drop {
    from {
      opacity: 0;
      transform: translateY(-34px);
    }
  }

  .js .regions li::before {
    transform: scaleY(0);
    transition: transform 0.5s ease;
  }

  .js .regions li::after {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
  }

  .js .regions li > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .regions li.is-visible::before { transform: scaleY(1); }
  .js .regions li.is-visible::after { transform: scale(1); }

  .js .regions li.is-visible > * {
    opacity: 1;
    transform: none;
  }
}

/* Get involved: the photo fills the panel and zooms on hover, the text stays still. */
.join { padding-top: 55px; }

.join-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: min(67.57vw, 1080px);
  color: var(--white);
  background: var(--navy);
}

.join-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .join-panel:hover .join-photo { transform: scale(1.07); }
}

/* Darkens toward the bottom, as in the design. */
.join-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.48) 35%, rgba(0, 0, 0, 0.74) 74%, rgba(0, 0, 0, 0.78));
}

.join-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(40px, 3.82vw, 55px) clamp(48px, 7.71vw, 111px);
}

.join-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.778vw, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-align: center;
}

.join-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: space-between;
  column-gap: 32px;
  margin: auto 0;
  padding: 65px 0 48px;
  list-style: none;
}

.join-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.389vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.join-text {
  margin: 23px 0 0;
  font-size: clamp(17px, 1.389vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.join-contact { text-align: center; }

.join-email { overflow-wrap: anywhere; }

/* Footer: pinned behind the page. script.js keeps a footer taller than the screen reachable. */
main {
  position: relative;
  z-index: 1;
  background: var(--white);
}

.site-footer {
  background: var(--blue);
  color: var(--white);
}

.js .site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

.site-footer a:focus-visible { outline-color: var(--white); }

.footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  min-height: 500px;
  margin-inline: auto;
  padding-block: 50px 32px;
}

.footer-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: space-between;
  gap: 40px 32px;
}

.footer-logo {
  display: inline-block;
  line-height: 0;
}

.footer-logo img {
  width: auto;
  height: 66px;
}

.footer-brand .footer-text { margin-top: 28px; }

.footer-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.389vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.footer-heading-next { margin-top: 36px; }

.footer-text {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.footer-links {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.footer-note {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 1.45;
}

.footer-note p { margin: 0; }

/* Below this width the logo, menu and language switch no longer fit on one row. */
@media (max-width: 1240px) {
  .site-header { grid-template-columns: 1fr auto; }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
  }
}

/* Phones and small tablets: the menu folds into a burger and opens over the whole screen. */
@media (max-width: 900px) {
  .js .site-header { grid-template-columns: 1fr auto auto; gap: 8px; }

  .js .logo,
  .js .lang-switch,
  .js .menu-toggle {
    position: relative;
    z-index: 6;
  }

  .js .menu-toggle {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: 50%;
    color: var(--navy);
    cursor: pointer;
  }

  .menu-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .menu-toggle-lines,
  .menu-toggle-lines::before,
  .menu-toggle-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, background-color 0.25s ease;
  }

  .menu-toggle-lines { position: relative; }

  .menu-toggle-lines::before,
  .menu-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-toggle-lines::before { transform: translateY(-6px); }
  .menu-toggle-lines::after { transform: translateY(6px); }

  .menu-toggle[aria-expanded="true"] .menu-toggle-lines { background-color: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines::before { background-color: var(--navy); transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines::after { background-color: var(--navy); transform: rotate(-45deg); }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 5; /* above the hero button */
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 130px var(--gutter) 40px;
    overflow-y: auto;
    background: var(--white);
    font-family: var(--font-display);
    font-size: clamp(24px, 7vw, 34px);
    letter-spacing: -0.02em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
  }

  .js .site-nav a { padding-block: 8px; }

  .menu-open .site-nav {
    opacity: 1;
    visibility: visible;
  }

  /* The pinned stage rises above the next section while the menu covers the screen. */
  .menu-open { overflow: hidden; }
  .menu-open .stage { z-index: 2; }
}

@media (max-width: 480px) {
  .js .logo img {
    width: auto;
    height: 40px;
  }

  .js .lang-switch {
    width: 100px;
    height: 44px;
  }

  .js .lang-switch button { font-size: 13px; }

  .js .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .js .site-nav { padding-top: 110px; }
}

/* Copy above the passport once they no longer fit side by side. */
@media (max-width: 1080px) {
  .context-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 72px;
  }

  .context-copy {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
  }

  .plate {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(582px, 100%);
    min-height: 0;
  }

  .timeline { margin-top: 72px; }
  .timeline li { padding-right: 0; }
}

@media (max-width: 760px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 40px 16px;
    border-radius: 30px;
  }

  .stat-label { font-size: 16px; }
}

@media (max-width: 640px) {
  .hero-media { aspect-ratio: 4 / 5; }
  .site-nav { font-size: 17px; }
  .context-title br { display: none; }
  .context { padding-bottom: 72px; }
  .plate { padding: 10px; border-radius: 30px; }
  .plate-in { padding: 36px 20px 24px; border-radius: 20px; }
}

/* The corner beside the map is too small from here down, so the footnotes go under it. */
@media (max-width: 1240px) {
  .map-notes {
    position: static;
    width: auto;
    margin-top: 24px;
  }
}

/* Squares need room for their details, so the grid drops to two columns. */
@media (max-width: 1200px) {
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-grid li:nth-child(n) { --reveal-delay: 0s; }
}

/* The map and the region list stack once they no longer fit side by side. */
@media (max-width: 1080px) {
  .where-card { grid-template-columns: minmax(0, 1fr); }
  .where-side { padding-top: 56px; }
}

@media (max-width: 760px) {
  .activity-stats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
    margin-top: 56px;
  }

  .activity-stat-label { margin-top: 16px; }
  .activity-stat img { width: 72px; height: 72px; }
  .activity-grid { margin-top: 56px; }
}

@media (max-width: 640px) {
  .activities { padding-top: 64px; }
  .activities-title br { display: none; }
  .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-text,
  .activity-result { font-size: 16px; }
  .purpose { --card-width: min(300px, 100vw - 2 * var(--gutter) - 24px); padding-bottom: 72px; }
  .purpose-head { flex-direction: column; }
  .js .carousel-arrows { gap: 16px; }
  .carousel { margin-top: 28px; }
  .purpose-card { padding: 40px 28px 24px; border-radius: 30px; }
  .where-card { padding-block: 40px 40px; border-radius: 30px; }
  .map-wrap { margin-top: 40px; }
  .map-credit { font-size: 12px; }
  .where-note { font-size: 14px; line-height: 1.4; }
  .where-count { gap: 8px; }
  .where-count-number { font-size: 48px; }
  .where-count-label { font-size: 16px; }
  .regions { margin-top: 40px; }
  .regions li,
  .regions li:last-child { min-height: 0; }
  .regions li { padding-bottom: 36px; }
  .regions li:last-child { padding-bottom: 4px; }
  .region-raions { font-size: 16px; line-height: 1.3; }
  .region-text { max-width: none; font-size: 16px; line-height: 1.4; }
}

/* Three columns stop fitting, so the join text and the footer stack. */
@media (max-width: 860px) {
  .join-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-block: 56px;
  }

  .join-text { margin-top: 12px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .footer-text { max-width: 480px; }
  .footer-inner { min-height: 0; }
}

@media (max-width: 480px) {
  .join-title br { display: none; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lang-switch button, .hero-button { transition: none; }
  .js .site-nav,
  .menu-toggle-lines,
  .menu-toggle-lines::before,
  .menu-toggle-lines::after { transition: none; }
  .js .stage { position: static; }
  .js .site-footer { position: static; }
  .join-photo { transition: none; }
  .js .carousel-track { transition: none; }
  .purpose-card::before { transition: none; }
}