/* ==========================================================================
   Pin Africa — Archive & portfolio
   Single stylesheet, mobile-first, full-width layout.
   Sections with a background are inset "panels" (margin + rounded corners).

   Contents
   01. Design tokens (edit colours, type and spacing here)
   02. Fonts (Sofia Pro hook)
   03. Base & resets
   04. Layout helpers, panels & themes
   05. Typography helpers
   06. Buttons, CTAs, chips, tags
   07. Cards & photos
   08. Header & mobile menu
   09. Hero & map of Africa
   10. About Pin Africa — falling value pills
   11. Who we were
   12. Our mission
   13. Our values
   14. Selected work (index tiles)
   15. Featured campaign
   16. Video (one row)
   17. Mobile storytelling (9:16 reel)
   18. Interactive stories
   19. Articles & Live News Update
   20. Explore more
   21. Contact & archive (pre-footer)
   22. Footer
   23. 404 page
   24. Motion: scroll reveal + reduced motion
   ========================================================================== */

/* 01. DESIGN TOKENS ======================================================== */
:root {
  /* Brand palette — only these four colours, plus tints mixed with white */
  --teal: #327a7b; /* primary: solid panels, dots, rules, icons          */
  --red: #e7574b; /* accent: primary buttons, status, highlights         */
  --ink: #001e1c; /* text, dark panels, footer, secondary buttons        */
  --white: #ffffff; /* page background, cards                              */
  --teal-10: #e7f3f3; /* light panels, card gradients                        */
  --teal-20: #cfe7e7; /* borders, round icon buttons, archive block          */
  --red-20: #fadddb; /* red mixed with white (value card, pill)             */
  --ink-72: #475d5c; /* secondary text (7:1 on white)                       */

  /* Contrast (WCAG, measured)
     ink on white 17.5:1 · ink on teal-10 15.4:1 · ink on red 4.9:1
     white on teal 5.0:1 — headings / large text only, as per the brand rules */

  --veil: rgb(0 30 28 / 0.6); /* --ink at 60 % over photos */

  /* Typography: Rubik for headings and labels, Roboto for body text */
  --font-display: "Roboto", system-ui, sans-serif;
  --font-sans:
    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-body: 1.0625rem; /* 17px            */
  --lh-body: 1.6;
  --fs-h1: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); /* 40 → 72px       */
  --fs-h2: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); /* 36 → 52px       */
  --fs-story: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); /* 24 → 32px       */
  --fs-lead: clamp(1.20rem, 1.1rem + 0.6vw, 1rem); /* 20 → 24px       */
  --fs-label: 1rem; /* 16px            */
  --fs-label-sm: 15px;          
  --tracking-label: 0.06em;
  --w-display: 700;

  /* Shapes */
  --r-card: 28px;
  --r-media: 20px;
  --r-pill: 999px;
  --r-panel: clamp(20px, 2.6vw, 40px); /* panels' corners */
  --round-btn: 40px;

  /* Full-width layout (same rhythm as the reference) */
  --edge: clamp(16px, 2.8vw, 40px); /* header side padding  */
  --gutter: clamp(20px, 6.667vw, 96px); /* content side padding */
  --container: 1504px;
  --panel-m: clamp(8px, 1.1vw, 16px); /* panels' outer margin */
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 72px; /* tab height (incl. frame) */
  --gap: clamp(16px, 1.8vw, 28px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-lift: 0 24px 48px -24px rgb(0 30 28 / 0.4);
  --shadow-chip: 0 6px 16px -8px rgb(0 30 28 / 0.45);

  --card-bg: linear-gradient(135deg, var(--white) 0%, var(--teal-10) 100%);

  --focus: var(--ink); /* focus ring colour — redefined per background */
}

@media (max-width: 599px) {
  :root {
    --header-h: 64px;
  }
}

/* 02. FONTS ================================================================ */
/* Sofia Pro (the font of the former site) is commercial. With a web licence,
   put the files in /assets/fonts/ and uncomment this block. Until then Sofia
   Sans (Google Fonts) is used.

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-soft-bold.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
*/

/* 03. BASE & RESETS ======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

.prose a,
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Low-specificity list reset so component classes can set margin/padding */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font: 700 var(--fs-label) / 1.2 var(--font-display);
  text-transform: none;
  text-decoration: none;
  --focus: var(--red);
}
.skip-link:focus {
  top: 12px;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill {
  fill: currentColor;
  stroke: none;
}

.placeholder {
  outline: 2px dashed currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* 04. LAYOUT HELPERS, PANELS & THEMES ====================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

/* Any section with a background is an inset, rounded panel */
.panel {
  margin: var(--panel-m);
  border-radius: var(--r-panel);
  overflow: clip;
}

.theme-teal {
  background: var(--teal);
  color: var(--white);
  --focus: var(--white);
}
.theme-tint {
  background: var(--teal-10);
}
.theme-ink {
  background: var(--ink);
  color: var(--white);
  --focus: var(--white);
}
.theme-red {
  background: var(--red);
  color: var(--ink);
  --focus: var(--ink);
}
.theme-mist {
  background: var(--teal-20);
  color: var(--ink);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
}
.section-head p {
  font-size: 1.125rem;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Heading on the left, text / controls on the right */
.section-head--split {
  display: grid;
  gap: 16px 48px;
  max-width: none;
  align-items: end;
}
.section-head--split h2 {
  margin: 0;
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1fr minmax(280px, 460px);
  }
}

/* 05. TYPOGRAPHY HELPERS =================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 16px;
  font: 700 var(--fs-label) / 1.3 var(--font-display);
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  flex: none;
  border-radius: 50%;
  background: var(--red);
}

.label {
  margin: 0;
  font: 700 var(--fs-label) / 1.3 var(--font-display);
  text-transform: none;
}

/* White pill label (readable on any panel colour) */
.label-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
}

.story-title {
  font-size: var(--fs-story);
  line-height: 1.12;
}

/* 06. BUTTONS, CTAs, CHIPS, TAGS =========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font: 500 var(--fs-label) / 1.2 var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn--icon {
  padding-right: 6px;
}
.btn__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
}
.btn__icon .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.btn:hover .btn__icon .icon {
  transform: translateX(4px);
}

.btn--red {
  background: var(--red);
  color: var(--ink);
}
.btn--red .btn__icon {
  background: var(--ink);
  color: var(--white);
}
.btn--ink {
  background: var(--ink);
  color: var(--white);
}
.btn--ink .btn__icon {
  background: var(--teal-20);
  color: var(--ink);
}
.btn--outline {
  background: var(--white);
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline .btn__icon {
  background: var(--teal-20);
  color: var(--ink);
}
.btn--line {
  background: var(--white);
  border-color: var(--ink);
  color: var(--ink);
  border-width: 1px;
}
.btn--light {
  background: transparent;
  border-color: rgb(255 255 255 / 0.7);
  color: var(--white);
}
.btn--light .btn__icon {
  background: var(--white);
  color: var(--ink);
}
.btn--sm {
  min-height: 44px;
  padding: 6px 20px;
  font-size: var(--fs-label-sm);
}

/* CTA: label followed by a 40px round button with an arrow */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font: 700 var(--fs-label) / 1.3 var(--font-display);
  text-transform: none;
  text-decoration: none;
  color: inherit;
}
.cta__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}
.cta:hover .cta__label {
  text-decoration-color: var(--teal);
}
.theme-ink .cta:hover .cta__label,
.on-photo .cta:hover .cta__label {
  text-decoration-color: currentColor;
}

.round-btn,
.cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--round-btn);
  height: var(--round-btn);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.round-btn .icon,
.cta__icon .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.cta:hover .cta__icon .icon,
.round-btn:hover .icon,
.is-linked:hover .round-btn .icon {
  transform: translateX(4px);
}

.cta-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Pill + round button joined (pre-footer, like the reference) */
.pill-cta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
  color: var(--ink);
}
.pill-cta__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  background: var(--white);
  font: 700 var(--fs-label) / 1.25 var(--font-display);
  text-transform: none;
}
.pill-cta__label--email {
  font: 700 1.25rem / 1.2 var(--font-sans);
  text-transform: none;
  overflow-wrap: anywhere;
}
.pill-cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
}
.pill-cta__icon .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.pill-cta:hover .pill-cta__icon .icon {
  transform: translateX(4px);
}
.pill-cta:hover .pill-cta__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Chips — white pill with a line icon in a white circle */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 3px 14px 3px 3px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 500 0.875rem / 1.2 var(--font-sans);
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
}
.chip__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--teal-20);
  color: var(--teal);
}
.chip__icon .icon {
  width: 16px;
  height: 16px;
}
.chip--title {
  padding: 6px 14px;
  background: var(--ink);
  color: var(--white);
}
.chip--status {
  gap: 8px;
  padding: 6px 14px;
  background: var(--red);
  color: var(--ink);
  font: 700 var(--fs-label-sm) / 1.2 var(--font-display);
  text-transform: none;
}
.chip--status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.chip-stack {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-pill);
  background: var(--teal-10);
  color: var(--ink);
  font: 700 var(--fs-label-sm) / 1.2 var(--font-display);
  text-transform: none;
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* 07. CARDS & PHOTOS ======================================================= */
.card {
  position: relative;
  border: 1px solid var(--teal-20);
  border-radius: var(--r-card);
  background: var(--card-bg);
  color: var(--ink);
  padding: clamp(24px, 3.4vw, 56px);
  --focus: var(--ink);
}
.card--lift {
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.card--lift:hover,
.card--lift:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--teal-20);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.photo:hover img {
  transform: scale(1.04);
}

/* 08. HEADER (NOTCH), DROPDOWNS & MOBILE MENU ============================= */
/* A white tab hangs from a thin white frame at the top of the page and is
   joined to it by two concave corners. When the page scrolls, the frame
   folds away and the tab stays pinned to the top edge. */
.site-header {
  --frame: var(--panel-m);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  pointer-events: none;
}
.site-header.is-scrolled {
  --frame: 0px;
}
.site-header__frame {
  height: var(--frame);
  background: var(--white);
  transition: height 0.35s var(--ease);
}

.notch {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
  width: max-content;
  max-width: calc(100% - 2 * (var(--panel-m) + 26px));
  padding: calc(var(--frame) + 8px) 8px 8px 18px;
  border-radius: 0 0 26px 26px;
  background: var(--white);
  pointer-events: auto;
  transition:
    padding 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.site-header.is-scrolled .notch {
  box-shadow: 0 16px 32px -22px rgb(0 30 28 / 0.5);
}

/* Concave corners joining the tab to the frame */
.notch::before,
.notch::after {
  content: "";
  position: absolute;
  top: var(--frame);
  width: 26px;
  height: 26px;
  pointer-events: none;
  transition: top 0.35s var(--ease);
}
.notch::before {
  right: 100%;
  background: radial-gradient(
    circle at 0 100%,
    transparent 25.5px,
    var(--white) 26px
  );
}
.notch::after {
  left: 100%;
  background: radial-gradient(
    circle at 100% 100%,
    transparent 25.5px,
    var(--white) 26px
  );
}

.notch__logo {
  display: block;
  flex: none;
  border-radius: 8px;
}
.notch__logo img {
  width: auto;
  height: 42px;
}

/* Desktop navigation */
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__item {
  position: relative;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: 500 0.9375rem / 1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.nav__link:hover,
.nav__trigger[aria-expanded="true"] {
  background: var(--teal-10);
}
.nav__chev {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  transition: rotate 0.3s var(--ease);
}
.nav__trigger[aria-expanded="true"] .nav__chev {
  rotate: 180deg;
}
/* Current section: small red dot under the item */
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  translate: -50% 0;
}

.notch__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

/* Drop-down panels */
.dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 2;
  padding: 10px;
  border-radius: 24px;
  background: var(--white);
  box-shadow:
    0 30px 60px -24px rgb(0 30 28 / 0.4),
    0 0 0 1px var(--teal-20);
  translate: -50% 0;
}
.dropdown[hidden] {
  display: none;
}
/* Without JS, drop-downs still open on hover / keyboard focus */
html:not(.js) .nav__item:is(:hover, :focus-within) > .dropdown {
  display: block;
}
.dropdown.is-open {
  animation: dd-in 0.28s var(--ease) both;
}
@keyframes dd-in {
  from {
    opacity: 0;
    translate: -50% -8px;
  }
  to {
    opacity: 1;
    translate: -50% 0;
  }
}
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
} /* hover bridge */

.dd-list {
  display: grid;
  gap: 2px;
  min-width: 250px;
}
.dd-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--ink);
  font: 600 1.0625rem / 1.2 var(--font-display);
  text-decoration: none;
  transition: background-color 0.2s;
}
.dd-link:hover,
.dd-link[aria-current="true"] {
  background: var(--teal-10);
}
.dd-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
}
.dd-swatch--teal {
  background: var(--teal);
}
.dd-swatch--mist {
  background: var(--teal-20);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.dd-swatch--red {
  background: var(--red);
}
.dd-swatch--ink {
  background: var(--ink);
}

.dropdown--work {
  width: min(740px, 70vw);
}
.dd-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dd-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink);
  text-decoration: none;
  isolation: isolate;
}
.dd-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--ease);
}
.dd-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 30 28 / 0.9) 0%,
    rgb(0 30 28 / 0) 60%
  );
}
.dd-tile:hover img {
  transform: scale(1.08);
}
.dd-tile[aria-current="true"] {
  box-shadow: inset 0 0 0 3px var(--red);
}
.dd-tile__num {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 700 0.75rem / 1.4 var(--font-display);
}
.dd-tile__label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: var(--white);
  font: 700 0.9375rem / 1.15 var(--font-display);
}
.dd-all {
  margin: 10px 6px 2px;
}

/* Text that rolls up on hover (buttons in the tab and the hero) */
.roll {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  line-height: 1.25;
}
.roll > span {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--ease);
}
.roll__b {
  transform: translateY(105%);
}
a:hover > .roll .roll__a,
a:focus-visible > .roll .roll__a {
  transform: translateY(-105%);
}
a:hover > .roll .roll__b,
a:focus-visible > .roll .roll__b {
  transform: none;
}

/* Menu button: three lines that turn into a cross */
.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.burger__lines {
  position: relative;
  width: 18px;
  height: 12px;
}
.burger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.35s var(--ease),
    opacity 0.2s;
}
.burger__lines span:nth-child(1) {
  top: 0;
}
.burger__lines span:nth-child(2) {
  top: 5px;
}
.burger__lines span:nth-child(3) {
  top: 10px;
}
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1099px) {
  .nav {
    display: none;
  }
  .notch__actions .btn--line {
    display: none;
  }
  .burger {
    display: grid;
  }
}
@media (max-width: 599px) {
  .notch {
    padding-left: 14px;
    gap: 20px;
  }
  .notch__actions {
    display: none;
  }
  .notch__logo img {
    height: 36px;
  }
}

/* Mobile menu: white card dropping from the tab, over a dimmed page */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(0 30 28 / 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.menu-backdrop[hidden],
.menu-card[hidden] {
  display: none;
}
.menu-card {
  position: fixed;
  z-index: 58;
  top: var(--menu-top, 84px);
  left: var(--panel-m);
  right: var(--panel-m);
  max-width: 560px;
  margin-inline: auto;
  max-height: calc(100svh - var(--menu-top, 84px) - var(--panel-m));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: 26px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgb(0 30 28 / 0.5);
}
.menu-card.is-open {
  animation: menu-drop 0.32s var(--ease) both;
}
@keyframes menu-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mm-group {
  padding: 4px 0;
  border-bottom: 1px solid var(--teal-20);
}
.mm-group:last-child {
  border-bottom: 0;
}
.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 16px;
  color: var(--ink);
  font: 700 clamp(1.5rem, 1.25rem + 1.2vw, 2rem) / 1.1 var(--font-display);
  text-decoration: none;
}
.mm-link .icon {
  width: 22px;
  height: 22px;
  transition: transform 0.25s var(--ease);
}
.mm-link:hover,
.mm-link.is-active {
  background: var(--teal-10);
}
.mm-link:hover .icon {
  transform: translateX(4px);
}
.mm-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 12px 12px;
}
.mm-sub a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--teal-10);
  color: var(--ink);
  font: 500 0.9375rem / 1.2 var(--font-sans);
  text-decoration: none;
}
.mm-sub a:hover {
  background: var(--teal-20);
}
.mm-sub a[aria-current="true"] {
  background: var(--ink);
  color: var(--white);
}
.mm-actions {
  display: grid;
  gap: 8px;
  padding: 14px 12px 8px;
}
@media (min-width: 440px) {
  .mm-actions {
    grid-template-columns: 1fr 1fr;
  }
}
.mm-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 12px;
}
.mm-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-10);
  color: var(--ink);
  font-size: 1.125rem;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.mm-social a:hover {
  background: var(--ink);
  color: var(--white);
}

body.menu-open {
  overflow: hidden;
}

/* 09. HERO & MAP OF AFRICA ================================================= */
/* Dark rounded panel sitting under the tab: text on the left, dotted map of
   Africa on the right (stacked, centred, below 960px) */
.hero {
  display: grid;
  align-items: center;
  min-height: calc(100vh - 2 * var(--panel-m));
  min-height: calc(100svh - 2 * var(--panel-m));
  padding-top: calc(var(--header-h) + clamp(36px, 4.5vw, 72px));
  padding-bottom: clamp(48px, 6vw, 88px);
  text-align: center;
  background:
    radial-gradient(
      120% 70% at 50% -12%,
      rgb(50 122 123 / 0.6),
      rgb(50 122 123 / 0) 62%
    ),
    var(--ink);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero {
    text-align: left;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  .hero .hero__intro,
  .hero .status__text {
    margin-inline: 0;
  }
  .hero .hero__actions {
    justify-content: flex-start;
  }
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 16px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 700 var(--fs-label-sm) / 1.2 var(--font-display);
  text-transform: none;
}
.hero__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.hero h1 {
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  line-height: 0.98;
  margin-bottom: 22px;
}
.hero__sub {
  font: 500 var(--fs-lead) / 1.35 var(--font-display);
  margin-bottom: 16px;
}
.hero__intro {
  max-width: 680px;
  margin-inline: auto;
  font-size: 1.125rem;
}
.hero .status {
  margin-top: 28px;
}
.hero .thanks {
  margin-top: 22px;
}
.hero .hero__actions {
  margin-top: 26px;
}
@media (max-width: 599px) {
  .status-pill {
    font-size: 0.9375rem;
    padding: 8px 14px;
  }
}

.status {
  margin-top: 36px;
}
.status-pill {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
  font-weight: 500;
}
.status-pill__dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
}
.status__text {
  max-width: 620px;
  margin: 14px auto 0;
  color: rgb(255 255 255 / 0.8);
}

.thanks {
  margin-top: 28px;
  font-size: 1.125rem;
}
.thanks strong {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* Dotted map: 511 dots in an SVG; a layer on top holds the photos and value
   pills. Each .map-item sits on a dot (--x / --y in % of the map) and its
   body pops up above it (or below with .is-below), shifted by --dx to stay
   inside the map. main.js picks the items and dots at random. */
.hero-map {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
.hero__text {
  position: relative;
  z-index: 1;                          /* above the faint world map */
}
/* Rest of the world: same 10-unit grid as the Africa SVG (viewBox
   -680 -210 1610 610 vs 0 0 390 310), so it lines up at every size.
   Percentages are of the map width (margin-top % is too). The hero
   panel clips what goes past its edges. */
.hero-map__world {
  position: absolute;
  z-index: -1;
  top: 0;
  left: -174.359%;
  width: 412.821%;
  max-width: none;
  height: auto;
  margin-top: -53.846%;
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
}
.hero-map__dots {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--teal-10);
}
.hero-map__dots .is-isle {
  opacity: 0.7;
}
.hero-map__layer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.map-item {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  width: 0;
  height: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}
.map-item.is-on {
  z-index: 2;
  visibility: visible;
  transition-delay: 0s;
}
/* The dot lights up red with a ring… */
.map-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgb(231 87 75 / 0.3);
  scale: 0;
  transition: scale 0.4s var(--ease);
}
/* …and a short stem joins it to the card */
.map-item::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 16px;
  background: var(--white);
  transform-origin: bottom;
  scale: 1 0;
  transition: scale 0.3s var(--ease);
}
.map-item.is-below::after {
  top: 0;
  bottom: auto;
  transform-origin: top;
}
.map-item.is-on::before {
  scale: 1;
}
.map-item.is-on::after {
  scale: 1 1;
  transition-delay: 0.1s;
}
.map-item__body {
  position: absolute;
  left: 0;
  bottom: 16px;
  translate: calc(-50% + var(--dx, 0px)) 0;
  transform-origin: calc(50% - var(--dx, 0px)) 100%;
  opacity: 0;
  scale: 0.6;
  transition:
    opacity 0.45s var(--ease),
    scale 0.55s var(--ease);
}
.map-item.is-below .map-item__body {
  top: 16px;
  bottom: auto;
  transform-origin: calc(50% - var(--dx, 0px)) 0;
}
.map-item.is-on .map-item__body {
  opacity: 1;
  scale: 1;
  transition-delay: 0.15s;
}

.map-photo {
  width: clamp(112px, 12vw, 172px);
  aspect-ratio: var(--ar, 4 / 5);
  overflow: hidden;
  border: 3px solid var(--white);
  border-radius: 18px;
  background: var(--teal-10);
  box-shadow: var(--shadow-lift);
}
.map-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-photo .chip {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  min-height: 0;
  padding: 5px 10px;
  font-size: 0.75rem;
  white-space: normal;
}
.map-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.9em 0.38em 0.38em;
  border-radius: var(--r-pill);
  font: 700 clamp(0.9375rem, 0.8rem + 0.45vw, 1.25rem) / 1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
}

.hero-map__toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 14px 4px 4px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 700 var(--fs-label-sm) / 1 var(--font-display);
  text-transform: none;
  cursor: pointer;
}
.hero-map__toggle-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal-20);
}
.hero-map__toggle .icon {
  width: 14px;
  height: 14px;
}
.hero-map__toggle .icon-play {
  display: none;
}
.hero-map.is-paused .hero-map__toggle .icon-play {
  display: block;
}
.hero-map.is-paused .hero-map__toggle .icon-pause {
  display: none;
}
/* No JS: the still items stay, the button has nothing to do */
html:not(.js) .hero-map__toggle {
  display: none;
}

/* 10. ABOUT PIN AFRICA — FALLING VALUE PILLS =============================== */
/* Without JS (or with reduced motion) the pills sit as a still pile.
   main.js turns them into physics bodies (Matter.js): they fall, stack,
   get pushed away by the pointer, can be dragged (mouse) or tapped (touch). */
.about-intro {
  padding-block: 0 clamp(32px, 5vw, 72px);
  text-align: center;
}
.pile:first-child {
  margin-top: 0;
} /* no title above the pile */
.about-intro h2 {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
}

.pile {
  position: relative;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: flex-start;
  gap: 12px 10px;
  margin: clamp(24px, 3vw, 40px) auto 0;
  padding: 40px var(--gutter) 24px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
/* With JS + motion, the pit keeps its final height from the start (no layout
   shift) and pills stay hidden until they drop in. */
@media (prefers-reduced-motion: no-preference) {
  .js .pile {
    height: clamp(260px, 22vw, 340px);
  }
  .js .pile:not(.is-live):not(.is-static) .pile__pill {
    visibility: hidden;
  }
}
.pile.is-live {
  display: block;
  height: clamp(260px, 22vw, 340px);
  padding: 0;
  overflow-x: clip; /* pills may fall in across the title, never past the sides */
  overflow-y: visible;
}

.pile__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.95em 0.42em 0.42em;
  border-radius: var(--r-pill);
  font: 400 clamp(1.15rem, 0.85rem + 1.5vw, 2.25rem) / 1 var(--font-display); /* ≥ 20px bold */
  white-space: nowrap;
  rotate: var(--r, 0deg);
  transition: filter 0.2s;
}
.pile__pill:nth-child(5n + 1) {
  --r: -5deg;
}
.pile__pill:nth-child(5n + 2) {
  --r: 3deg;
}
.pile__pill:nth-child(5n + 3) {
  --r: -2deg;
}
.pile__pill:nth-child(5n + 4) {
  --r: 6deg;
}
.pile__pill:nth-child(5n + 5) {
  --r: -3deg;
}

.pile.is-live .pile__pill {
  position: absolute;
  left: 0;
  top: 0;
  rotate: none;
  will-change: transform;
  cursor: grab;
  visibility: hidden;
}
.pile.is-live .pile__pill.is-on {
  visibility: visible;
}
.pile.is-live.is-dragging .pile__pill {
  cursor: grabbing;
}
.pile__pill:hover {
  filter: brightness(1.06) saturate(1.05);
}

.pile__check {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  flex: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
}
.pile__check .icon {
  width: 0.7em;
  height: 0.7em;
  stroke-width: 2.5;
}

/* Colour variants (text colours keep AA at this size) */
.pill--teal {
  background: var(--teal);
  color: var(--white);
}
.pill--red {
  background: var(--red);
  color: var(--ink);
}
.pill--ink {
  background: var(--ink);
  color: var(--white);
}
.pill--mist {
  background: var(--teal-20);
  color: var(--ink);
}
.pill--blush {
  background: var(--red-20);
  color: var(--ink);
}
.pill--line {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.pill--line .pile__check,
.pill--mist .pile__check,
.pill--blush .pile__check {
  background: var(--ink);
  color: var(--white);
}

/* 11. WHO WE WERE ========================================================== */
.who {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 900px) {
  .who {
    grid-template-columns: 5fr 6fr;
  }
}
.who__photo {
  aspect-ratio: 1 / 1;
  max-height: 760px;
}
.who__kicker {
  margin: 0 0 8px;
  font: var(--w-display) clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem) / 1
    var(--font-display);
}
.who h2 {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.who .prose {
  max-width: 62ch;
  font-size: 1.125rem;
}

/* 12. OUR MISSION ========================================================== */
.mission {
  text-align: center;
  padding-block: clamp(80px, 11vw, 160px);
}
.mission h2 {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.mission__text {
  margin: 0 auto;
  font: var(--w-display) clamp(1.5rem, 0.8rem + 2.2vw, 3.25rem) / 1.15
    var(--font-display); /* large text */
}
.mission__line {
  display: block;
  text-wrap: balance;
}

/* 13. OUR VALUES =========================================================== */
.values {
  padding-bottom: 0;
} /* the falling pills follow right after */
.values-grid {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .values-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.value-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 32px);
  border-radius: var(--r-card);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  --focus: var(--ink);
}
.value-card:hover {
  transform: translateY(-8px) rotate(-1.5deg);
  box-shadow: var(--shadow-lift);
}
.value-card:nth-child(even):hover {
  transform: translateY(-8px) rotate(1.5deg);
}
.value-card__num {
  align-self: flex-start;
  padding: 12px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 700 var(--fs-label-sm) / 1.4 var(--font-display);
}
.value-card h3 {
  margin-top: auto;
  padding-top: 32px;
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
}
.value-card p {
  margin: 10px 0 0;
  font-size: 1rem;
}
@media (min-width: 640px) {
  .value-card {
    min-height: clamp(260px, 22vw, 340px);
  }
}
.value-card--mist {
  background: var(--teal-20);
}
.value-card--red {
  background: var(--red);
}
.value-card--ink {
  background: var(--ink);
  color: var(--white);
}
.value-card--teal {
  background: var(--teal);
  color: var(--white);
}
.value-card--blush {
  background: var(--red-20);
}
.value-card--tint {
  background: var(--teal-10);
  box-shadow: inset 0 0 0 1px var(--teal-20);
}
.value-card--ink .value-card__num {
  background: var(--teal-20);
}

/* 14. SELECTED WORK (INDEX TILES) ========================================== */
.work .section-head--split h2 {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.work .section-head--split p {
  font-size: 1.125rem;
  margin: 0;
}
.work.panel {
  margin-bottom: 0;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
.work.panel + .campaign {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.work-index {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 72%);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding: 8px var(--gutter) 24px;
}
@media (min-width: 600px) {
  .work-index {
    grid-auto-columns: minmax(240px, 42%);
  }
}
@media (min-width: 1100px) {
  .work-index {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(220px, 19vw, 300px);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .work-index .work-tile {
    aspect-ratio: auto;
    height: 100%;
  }
}
.work-index > li {
  scroll-snap-align: start;
}

.work-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.work-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 0.9s var(--ease);
}
.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 30 28 / 0.55),
    rgb(0 30 28 / 0) 55%
  );
}
.work-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.work-tile:hover img {
  transform: scale(1.07);
}
.work-tile__num {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  font: 700 var(--fs-label-sm) / 1.4 var(--font-display);
}
.work-tile__foot {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.work-tile__label {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  font: 700 var(--fs-label-sm) / 1.2 var(--font-display);
  text-transform: none;
}
.work-tile:hover .round-btn .icon {
  transform: translateX(4px);
}

/* 15. FEATURED CAMPAIGN ==================================================== */
/* Dark panel, two columns from 960px: the event photos stick on the left
   (frame + two step buttons) while the story scrolls on the right in two
   parts. main.js sets --t (0 → 1) on the frame as part 2 comes up: the
   second photo wipes up from the bottom while both zoom; --px / --py add
   a light pointer parallax. Below 960px each part shows its photo inline. */
.campaign {
  padding-block: var(--section-y);
}
.campaign__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
}
.campaign__media {
  display: none;
}
.campaign__part + .campaign__part {
  margin-top: clamp(40px, 5vw, 40px);
}
.campaign__inline {
  margin: 0 0 28px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-media);
  background: rgb(255 255 255 / 0.06);
}
.campaign__inline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 960px) {
  .campaign__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  .campaign__media {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - var(--header-h) - 48px);
    height: calc(100svh - var(--header-h) - 48px);
  }
  .campaign__inline {
    display: none;
  }
  /* The last part is at least a screen tall, so photo 2 stays a while */
  .campaign__part:last-child {
    min-height: calc(100vh - var(--header-h) - 48px);
    min-height: calc(100svh - var(--header-h) - 48px);
  }
}

.campaign__frame {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-media);
  background: rgb(255 255 255 / 0.06);
}
.campaign__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: calc(1.06 + var(--t, 0) * 0.06);
  translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -14px);
  transition: translate 0.6s var(--ease);
}
.campaign__img--next {
  clip-path: inset(calc((1 - var(--t, 0)) * 100%) 0 0 0 round var(--r-media));
  scale: calc(1.2 - var(--t, 0) * 0.14);
}
.campaign__caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 500 0.875rem / 1.2 var(--font-sans);
  box-shadow: var(--shadow-chip);
}
.campaign__count {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font: 700 var(--fs-label-sm) / 1 var(--font-display);
  letter-spacing: var(--tracking-label);
}
.campaign__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.campaign__steps button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r-pill);
  background: none;
  color: var(--white);
  font: 700 var(--fs-label-sm) / 1 var(--font-display);
  text-transform: none;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.campaign__steps button:hover {
  border-color: var(--white);
}
.campaign__steps button.is-active {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.campaign h2 {
  font-size: clamp(2.75rem, 1.8rem + 3.2vw, 4.75rem);
  line-height: 1;
  margin-bottom: 18px;
}
.campaign__byline {
  margin: 0 0 clamp(28px, 3vw, 40px);
  font-size: var(--fs-lead);
  font-style: italic;
  color: rgb(255 255 255 / 0.85);
}
.campaign .figures {
  margin-bottom: clamp(28px, 3vw, 40px);
}
.campaign .figure__num {
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4.5rem);
}
.campaign .figure {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 0;
  border-top: 0;
}
.campaign .figure__label {
  margin-top: 0;
  font: 500 1rem / 1.35 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.campaign .prose p {
  color: rgb(255 255 255 / 0.85);
}
.campaign .prose .campaign__lead {
  font: 700 var(--fs-lead) / 1.35 var(--font-sans);
  color: var(--white);
}
.campaign .note {
  margin-top: 24px;
  color: rgb(255 255 255 / 0.7);
}

/* Key figures, right next to the title block */
.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
}
.figure {
  margin: 0;
  padding-top: 18px;
  border-top: 2px solid rgb(255 255 255 / 0.5);
}
.figure__num {
  display: block;
  font: var(--w-display) clamp(4rem, 2.4rem + 6vw, 8.5rem) / 0.9
    var(--font-display);
}
.figure__label {
  display: block;
  margin-top: 12px;
  max-width: 22ch;
}

.note {
  margin: 0 0 28px;
  font-style: italic;
  color: var(--ink-72);
}
.campaign-resources {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.campaign-resources li {
  min-width: 0;
}
.campaign-resources .cta {
  display: grid;
  grid-template-columns: 1fr 40px;
  gap: 14px;
  width: 100%;
  min-height: 100%;
  padding: 18px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  background: var(--teal-10);
  color: var(--ink);
  text-decoration: none;
  text-transform: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.campaign-resources .cta:hover {
  transform: translateY(-2px);
  color: var(--white);
  background: var(--red);
}

.campaign-resources .cta__label {
  align-self: center;
  text-decoration: none;
  padding-left: 10px;
}
.campaign-resources .cta__icon {
  align-self: center;
}

/* 16. VIDEO (ONE ROW) ====================================================== */
.yt {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--ink);
  color: var(--ink);
}
.yt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.yt:hover img {
  transform: scale(1.03);
}
.yt__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 30px -8px rgb(0 30 28 / 0.6);
  transition: transform 0.25s var(--ease);
}
.yt__play .icon {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}
.yt:hover .yt__play {
  transform: scale(1.08);
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Three films side by side; a snap row on smaller screens */
.video-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 84%);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding: 8px var(--gutter) 24px;
}
@media (min-width: 640px) {
  .video-row {
    grid-auto-columns: minmax(280px, 48%);
  }
}
@media (min-width: 1000px) {
  .video-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}
.video-row > li {
  display: flex;
  scroll-snap-align: start;
}

.video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(10px, 1vw, 14px);
}
.video-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px clamp(8px, 1.2vw, 16px) 10px;
}
.video-card .chip {
  align-self: flex-start;
  margin-bottom: 14px;
  box-shadow: none;
}
.video-card .story-title {
  margin-bottom: 10px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}
.video-card__body > p:not(.chip) {
  color: var(--ink-72);
}
.video-card .cta {
  margin-top: auto;
  padding-top: 14px;
}

/* 17. MOBILE STORYTELLING (9:16 REEL) ====================================== */
/* Cards keep the exact 1080 × 1920 ratio of the original vertical videos. */
.reel .section-head--split h2 {
  margin-bottom: 16px;
}
.reel .section-head--split p {
  margin: 0;
  max-width: 60ch;
}

.reel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}
.reel__counter {
  font: 700 var(--fs-label) / 1 var(--font-display);
  min-width: 4.5ch;
  text-align: center;
}
/* Prev / next: a white disc grows from the centre on hover, the arrow
   nudges in its direction, the button sinks a little when pressed */
.reel__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition:
    color 0.3s var(--ease),
    opacity 0.2s,
    scale 0.15s var(--ease);
}
.reel__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--white);
  scale: 0;
  transition: scale 0.35s var(--ease);
}
.reel__btn:hover:not(:disabled),
.reel__btn:focus-visible {
  color: var(--ink);
}
.reel__btn:hover:not(:disabled)::before,
.reel__btn:focus-visible::before {
  scale: 1;
}
.reel__btn:active:not(:disabled) {
  scale: 0.9;
}
.reel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.reel__btn .icon {
  width: 20px;
  height: 20px;
  transition: translate 0.3s var(--ease);
}
.reel__btn--prev .icon {
  transform: scaleX(-1);
}
.reel__btn--next:hover:not(:disabled) .icon {
  translate: 3px 0;
}
.reel__btn--prev:hover:not(:disabled) .icon {
  translate: -3px 0;
}
.reel.is-static .reel__controls,
.reel.is-static .reel__progress {
  visibility: hidden;
}

.reel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 8px 28px;
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}
.reel__track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1100px) {
  .reel__track {
    justify-content: safe center;
  }
}

.reel-card {
  position: relative;
  flex: none;
  width: clamp(250px, 76vw, 340px);
  scroll-snap-align: start;
  perspective: 1200px;
}
@media (min-width: 900px) {
  .reel-card {
    width: clamp(300px, 27vw, 420px);
  }
}

.reel-card__frame {
  position: relative;
  aspect-ratio: 1080 / 1920;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #0b2a28;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    opacity 0.4s var(--ease);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
}
.reel-card.is-tilting .reel-card__frame {
  transition:
    transform 0.08s linear,
    box-shadow 0.5s var(--ease),
    opacity 0.4s var(--ease);
}
.reel-card:hover .reel-card__frame {
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.85);
}
@media (hover: hover) {
  .reel__track:hover .reel-card:not(:hover) .reel-card__frame {
    opacity: 0.55;
  }
}
.reel-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 0%),
    rgb(255 255 255 / 0.18),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.reel-card.is-tilting .reel-card__frame::after {
  opacity: 1;
}
.reel-card.is-playing .reel-card__frame::after {
  display: none;
}

.reel-card .yt {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: transparent;
}
.reel-card .yt img {
  transition: transform 1.4s var(--ease);
}
.reel-card:hover .yt img {
  transform: scale(1.06);
}

/* Landscape upload in a 9:16 card: the vertical thumbnail fills the card
   like any other; once playing (the facade <a> becomes a <div>), the same
   image sits blurred behind the 16:9 player. */
.yt__backdrop {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(28px) saturate(1.1);
  opacity: 0.85;
}
a.yt .yt__backdrop {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none;
  opacity: 1;
}
.yt--landscape iframe {
  top: 50%;
  bottom: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}

.reel-card__top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.reel-card__bars {
  display: flex;
  gap: 4px;
}
.reel-card__bars span {
  height: 3px;
  flex: 1;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.4);
}
.reel-card__bars span.is-on {
  background: var(--white);
}
.reel-card__index {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: 700 0.75rem / 1.4 var(--font-display);
}
/* The gradient stays glued to the bottom edge (bottom: -1px hides any
   sub-pixel seam under the rounded, tilting frame); on hover a denser,
   teal-tinted gradient fades in over it and only the text lifts. */
.reel-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  isolation: isolate;
  padding: 96px clamp(18px, 2vw, 26px) calc(clamp(18px, 2vw, 26px) + 1px);
  background: linear-gradient(
    to top,
    rgb(0 30 28 / 0.92) 10%,
    rgb(0 30 28 / 0)
  );
  color: var(--white);
  --focus: var(--white);
}
.reel-card__overlay::before {
  content: "";
  position: absolute;
  inset: -40% 0 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 30 28 / 0.96) 0%,
    rgb(50 122 123 / 0.75) 45%,
    rgb(50 122 123 / 0) 100%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.reel-card:hover .reel-card__overlay::before,
.reel-card:focus-within .reel-card__overlay::before {
  opacity: 1;
}
.reel-card__overlay > * {
  transition: translate 0.45s var(--ease);
}
.reel-card:hover .reel-card__overlay > *,
.reel-card:focus-within .reel-card__overlay > * {
  translate: 0 -6px;
}
.reel-card__title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.12;
  margin-bottom: 6px;
}
.reel-card__desc {
  margin: 0 0 4px;
}
.reel-card .cta {
  margin-top: 10px;
}
.reel-card .cta__icon {
  overflow: hidden;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    scale 0.3s var(--ease);
}
.reel-card .cta:hover .cta__icon,
.reel-card .cta:focus-visible .cta__icon {
  background: var(--red);
  color: var(--ink);
  scale: 1.08;
}
.reel-card .cta:hover .cta__icon .icon,
.reel-card .cta:focus-visible .cta__icon .icon {
  transform: none;
  animation: arrow-through 0.55s var(--ease);
}
.reel-card .cta:active .cta__icon {
  scale: 0.94;
}
@keyframes arrow-through {
  45% {
    translate: 160% 0;
    opacity: 0;
  }
  46% {
    translate: -160% 0;
    opacity: 0;
  }
  100% {
    translate: 0 0;
    opacity: 1;
  }
}
.reel-card.is-playing .reel-card__overlay,
.reel-card.is-playing .reel-card__top {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.reel-card.is-playing .reel-card__frame {
  transform: none;
}

.reel__progress {
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
}
.reel__progress span {
  display: block;
  height: 100%;
  width: var(--p, 33%);
  border-radius: inherit;
  background: var(--white);
  transition: width 0.2s linear;
}

/* 18. INTERACTIVE STORIES ================================================== */
.story-cards {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 760px) {
  .story-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .story-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.story-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.story-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--teal-20);
}
.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.story-card:hover .story-card__media img {
  transform: scale(1.05);
}
.story-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 22px 18px 14px;
}
.story-card__body p {
  margin: 0;
}
.story-card .cta {
  margin-top: auto;
  padding-top: 8px;
}

/* 19. ARTICLES & LIVE NEWS UPDATE ========================================== */
.articles {
  display: grid;
  gap: 32px;
}
@media (min-width: 960px) {
  .articles {
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 64px;
    align-items: start;
  }
  .articles .section-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
.article-list {
  border-top: 1px solid var(--teal);
}
.article-row {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--teal);
}
.article-row h3 {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.18;
}
.article-row__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article-row__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.article-row:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (min-width: 720px) {
  .article-row {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
  .article-row__meta {
    justify-content: flex-end;
  }
}

.live-card {
  display: grid;
  gap: 28px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px);
}
@media (min-width: 900px) {
  .live-card {
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
  }
}
/* Teal card (white text: 5.2:1) */
.live-card {
  border-color: transparent;
  background: var(--teal);
  color: var(--white);
  --focus: var(--white);
}
.live-card__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  line-height: 1.05;
}
/* Red "live" dot before the title */
.live-card__title::before {
  content: "";
  width: 0.36em;
  height: 0.36em;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0.12em rgb(255 255 255 / 0.9);
}
.live-card p {
  margin: 0;
  max-width: 60ch;
}
/* Live news illustration (inline SVG, colours from the tokens) */
.live-illo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-left: auto;
  overflow: visible;
}
@media (max-width: 899px) {
  .live-illo {
    margin-inline: auto;
  }
}
.live-illo__halo {
  fill: rgb(255 255 255 / 0.12);
}
.live-illo__panel {
  fill: var(--white);
  stroke: var(--teal-20);
  stroke-width: 1.5;
  filter: drop-shadow(0 18px 24px rgb(0 30 28 / 0.12));
}
.live-illo__bar {
  fill: var(--ink);
}
.live-illo__badge rect {
  fill: var(--red);
}
.live-illo__badge text {
  fill: var(--ink);
  font: 700 12px / 1 var(--font-display);
  letter-spacing: 0.08em;
}
.live-illo__dot {
  fill: var(--ink);
}
.live-illo__pulse {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: live-pulse 1.8s var(--ease) infinite;
}
@keyframes live-pulse {
  from {
    scale: 1;
    opacity: 0.6;
  }
  to {
    scale: 3;
    opacity: 0;
  }
}
.live-illo__line {
  fill: var(--ink);
  opacity: 0.85;
}
.live-illo__line--soft {
  fill: var(--teal-20);
  opacity: 1;
}
.live-illo__line--bar {
  fill: rgb(255 255 255 / 0.25);
  opacity: 1;
}
.live-illo__rail {
  stroke: var(--teal-20);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}
.live-illo__node {
  fill: var(--white);
  stroke: var(--teal);
  stroke-width: 3;
}
.live-illo__node--new {
  fill: var(--red);
  stroke: var(--red-20);
  stroke-width: 5;
}
.live-illo__time {
  fill: var(--teal-10);
  stroke: var(--teal-20);
}
.live-illo__time--new {
  fill: var(--red-20);
  stroke: none;
}
.live-illo__time-text {
  fill: var(--ink);
  font: 600 10px / 1 var(--font-sans);
  text-anchor: middle;
}
/* The newest update slides in, again and again */
.live-illo__item--new {
  animation: live-new 6s var(--ease) infinite;
}
@keyframes live-new {
  0%,
  8% {
    opacity: 0;
    translate: 0 -10px;
  }
  18%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.live-illo__bubble {
  fill: var(--white);
  stroke: var(--teal-20);
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 14px rgb(0 30 28 / 0.14));
}
.live-illo__bubble-dot {
  fill: var(--teal);
}
.live-illo__bubble-icon {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.live-illo__avatar {
  stroke: var(--white);
  stroke-width: 3;
}
.live-illo__avatar--teal {
  fill: var(--teal);
}
.live-illo__avatar--red {
  fill: var(--red);
}
.live-illo__avatar--ink {
  fill: var(--ink);
}
.live-illo__plus {
  fill: var(--ink);
  font: 700 13px / 1 var(--font-display);
  text-anchor: middle;
}
.live-illo__float {
  animation: live-float 5s ease-in-out infinite alternate;
}
.live-illo__float--b {
  animation-delay: -2.5s;
}
@keyframes live-float {
  to {
    translate: 0 -8px;
  }
}

/* 20. EXPLORE MORE ========================================================= */
.more h2 {
  font-size: var(--fs-h2);
  margin-bottom: 32px;
}
.more-list {
  display: grid;
  gap: 14px;
}
.more-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: center;
  padding: 24px clamp(20px, 3vw, 40px);
}
.more-card__logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 64px;
}
.more-card__logo img {
  display: block;
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}
.more-card__head {
  grid-column: 2;
  grid-row: 1;
}
.more-card__title {
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  margin-bottom: 4px;
}
.more-card__label {
  color: var(--ink-72);
  text-transform: none;
}
.more-card__text {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.more-card .round-btn {
  grid-column: 3;
  grid-row: 1 / span 2;
}
@media (min-width: 900px) {
  .more-card {
    grid-template-columns: 136px minmax(260px, 1fr) 2fr auto;
  }
  .more-card__logo {
    grid-row: 1;
  }
  .more-card__logo img {
    max-height: 96px;
  }
  .more-card__text {
    grid-column: 3;
    grid-row: 1;
  }
  .more-card .round-btn {
    grid-column: 4;
    grid-row: 1;
  }
}

/* 21. ARCHIVE & CONTACT (PRE-FOOTER) ======================================= */
/* Two compact panels: the archive note first, then contact */
.prefooter {
  display: grid;
  gap: var(--panel-m);
  margin: var(--panel-m);
}
@media (min-width: 900px) {
  .prefooter {
    grid-template-columns: 1fr 1fr;
  }
}
.prefooter__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 44px);
}
.prefooter__block h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}
.prefooter__block p {
  margin: 0;
  max-width: 56ch;
  font-size: 1rem;
}
.prefooter__actions {
  margin-top: auto;
  padding-top: 18px;
}

/* 22. FOOTER =============================================================== */
.site-footer {
  margin: var(--panel-m);
  border-radius: var(--r-panel);
  background: var(--ink);
  color: var(--white);
  --focus: var(--white);
  overflow: clip;
}
.footer__inner {
  padding: clamp(32px, 4.5vw, 72px) clamp(20px, 4.5vw, 72px) 28px;
}

/* Top row: logo, slogan and menu on one line (menu pushed right);
   they stack on small screens */
.footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px clamp(20px, 3vw, 40px);
}
.footer__links {
  flex-basis: 100%;
}
@media (min-width: 1280px) {
  .footer__links {
    flex-basis: auto;
    margin-left: auto;
  }
}
.footer__logo {
  width: clamp(130px, 12vw, 170px);
  height: auto;
}
.footer__slogan {
  margin: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgb(255 255 255 / 0.25);
  font: var(--w-display) clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem) / 1
    var(--font-display);
  letter-spacing: -0.02em;
}
@media (max-width: 599px) {
  /* The slogan wraps under the logo: no divider */
  .footer__slogan {
    padding-left: 0;
    border-left: 0;
  }
}
.footer__slogan span {
  color: var(--red);
} /* 4.9:1, large text */
.footer__col h3 {
  margin-bottom: 16px;
  font: 700 var(--fs-label) / 1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgb(255 255 255 / 0.7);
}
.footer__social-title {
  margin: 0;
  font: 700 var(--fs-label) / 1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgb(255 255 255 / 0.7);
}
/* Bottom row: copyright · "Find us on social media" + icons · back to top */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-left: auto;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: var(--white);
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.25s var(--ease),
    border-color 0.2s;
}
.social a:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  transform: translateY(-3px);
}

/* Menu on one line (wraps on small screens); its label is for screen readers */
.footer__links h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.footer__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(18px, 2vw, 28px);
}
.footer__links a {
  display: inline-block;
  padding: 4px 0;
  color: var(--white);
  font: 600 1.0625rem / 1.3 var(--font-display);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.footer__links a:hover {
  text-decoration-color: var(--red);
}

.footer__email {
  font: 700 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.3 var(--font-sans);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(16px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.9375rem;
}
.footer__bottom p {
  margin: 0;
}
.to-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1.5px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  color: var(--white);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.to-top .icon {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  transition: translate 0.25s var(--ease);
}
.to-top:hover {
  background: var(--white);
  color: var(--ink);
}
.to-top:hover .icon {
  translate: 0 -3px;
}

/* 23. 404 PAGE ============================================================= */
.header--simple .notch {
  box-shadow: 0 16px 32px -22px rgb(0 30 28 / 0.5);
}
.header--simple .notch__actions {
  display: flex;
}
.header--simple .notch__actions .btn--line {
  display: inline-flex;
}
@media (max-width: 599px) {
  .header--simple .notch__actions .btn--line {
    display: none;
  }
}
.notfound {
  text-align: center;
  padding-block: calc(var(--header-h) + clamp(56px, 10vw, 120px))
    clamp(72px, 10vw, 140px);
}
.notfound h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0 auto 20px;
  max-width: 16ch;
}
.notfound p {
  max-width: 560px;
  margin-inline: auto;
  font-size: 1.125rem;
}
.notfound .hero__actions {
  margin-top: 36px;
}
.footer--simple .footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer--simple .footer__logo {
  width: 180px;
}

/* 24. MOTION =============================================================== */
/* Titles: words drop in with the scroll; --w (0 → 1) is set per word by main.js */
.split-word {
  display: inline-block;
}
.is-scrubbed .split-word {
  opacity: var(--w, 1);
  translate: 0 calc((var(--w, 1) - 1) * 100%);
  will-change: opacity, translate;
}

.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.7s var(--ease) calc(var(--i, 0) * 90ms),
    translate 0.7s var(--ease) calc(var(--i, 0) * 90ms),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  translate: none;
}

.status-pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] {
    opacity: 1;
    translate: none;
  }
  .status-pill__dot::after {
    display: none;
  }
  .hero-map__toggle {
    display: none;
  }
  .card--lift:hover,
  .card--lift:focus-within,
  .btn:hover,
  .work-tile:hover,
  .value-card:hover {
    transform: none;
  }
  .reel-card__frame {
    transform: none !important;
  }
  .roll__b {
    display: none;
  }
  a:hover > .roll .roll__a,
  a:focus-visible > .roll .roll__a {
    transform: none;
  }
}