/* ==========================================================================
   seapeat-site.css — styles for the SEAPEAT content pages.

   Layered on top of seapeat.css and built entirely from that file's design
   tokens, so type, colour and rhythm stay consistent with the rest of the
   site. Nothing here overrides the template's own components.
   ========================================================================== */

/* --------------------------------------------------------------------- *
 * Closing CTA — background photo
 *
 * The template's own background-image on .rt-cta lives in seapeat.css,
 * which a full rebuild restores from the pristine vendor file — so the
 * swap is redeclared here instead, where it survives. Position, cover
 * sizing and the fixed parallax attachment are left untouched. */
.rt-cta {
  background-image: url(../images/cta-peat-river-dawn.webp);
}

/* --------------------------------------------------------------------- *
 * Typography
 *
 *   Primary   — BDO Grotesk. Headings and display type.
 *   Secondary — Inter. Body copy, UI, labels and form fields.
 *
 * BDO Grotesk is a licensed typeface, so its files are not distributed with
 * this repository. Drop your licensed files into /fonts using the names
 * below (see fonts/README.md) and they are picked up automatically.
 *
 * Each weight accepts woff2, woff, otf or ttf. The browser walks the list
 * and uses the first format it both supports and can fetch, so whichever
 * format your licence provides will work. woff2 is listed first because it
 * is roughly 40% smaller than the same font as otf/ttf; if you only have
 * otf or ttf you can safely delete the lines above it to avoid a failed
 * request per weight.
 *
 * Until the files exist every rule falls through to Inter, so the site
 * renders correctly either way — just in one family.
 * --------------------------------------------------------------------- */
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/bdo-grotesk-regular.woff2") format("woff2"),
       url("../fonts/bdo-grotesk-regular.woff") format("woff"),
       url("../fonts/bdo-grotesk-regular.otf") format("opentype"),
       url("../fonts/bdo-grotesk-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/bdo-grotesk-medium.woff2") format("woff2"),
       url("../fonts/bdo-grotesk-medium.woff") format("woff"),
       url("../fonts/bdo-grotesk-medium.otf") format("opentype"),
       url("../fonts/bdo-grotesk-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/bdo-grotesk-semibold.woff2") format("woff2"),
       url("../fonts/bdo-grotesk-semibold.woff") format("woff"),
       url("../fonts/bdo-grotesk-semibold.otf") format("opentype"),
       url("../fonts/bdo-grotesk-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/bdo-grotesk-bold.woff2") format("woff2"),
       url("../fonts/bdo-grotesk-bold.woff") format("woff"),
       url("../fonts/bdo-grotesk-bold.otf") format("opentype"),
       url("../fonts/bdo-grotesk-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root,
body {
  --font-primary: "BDO Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* The template's own variables are remapped onto the pair above, so the
     twenty-odd existing rules follow without being edited individually.
     --ltsuperior drove headings; --inter-tight drove body copy. */
  --_typography---font-family--ltsuperior: var(--font-primary);
  --_typography---font-family--inter-tight: var(--font-secondary);
}

/* --------------------------------------------------------------------- *
 * Hero
 *
 * The template's hero left column (h1 + button, capped at 28.125rem) never
 * shipped a subtext slot — the button sat directly under the heading. This
 * adds one without touching that column's width or the entrance-animation
 * hooks the rest of the hero relies on. */
.rt-hero-v1-subtext {
  color: var(--white);
  opacity: .8;
  margin-top: 1.125rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .rt-hero-v1-subtext {
    margin-top: .875rem;
    margin-bottom: 1.375rem;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------- *
 * Navigation bar
 *
 * Two things here.
 *
 * 1. The template caps the menu at 31.9375rem, which was sized for short
 *    labels ("Home, About, Blog"). "Our Team" and "Resources" wrap onto a
 *    second line inside that cap, so the menu sizes to its content instead
 *    and the labels are held on one line.
 *
 * 2. Above 992px the bar is transparent, which is fine over the dark hero
 *    but leaves white nav text sitting on light page content once you
 *    scroll — well below any usable contrast. A solid evergreen background
 *    is applied as soon as the page moves, giving roughly 15:1 against the
 *    white labels. Below 992px the template already paints the bar solid,
 *    so nothing changes there.
 * --------------------------------------------------------------------- */
.rt-desktop-menu {
  justify-content: center;
  width: auto;
  max-width: none;
}

.rt-desktop-menu .rt-nav-text {
  white-space: nowrap;
}

.rt-navbar {
  /* Long, gentle glide both ways; opacity trails the movement slightly so
     the bar dissolves as it leaves rather than blinking out. */
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease,
              transform .7s cubic-bezier(.4, 0, .2, 1),
              opacity .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
}

.rt-navbar.is-scrolled {
  transform: translate(0, 0);
  background-color: var(--deep-evergreen);
  border-bottom-color: #ffffff1f;
  box-shadow: 0 .5rem 1.75rem #0a271047;
}

/* The ticker strip above the bar is semi-transparent at rest; solidify it
   with the bar so the two don't disagree while scrolling. */
.rt-all-top.is-scrolled .rt-nav-top {
  background-color: var(--deep-evergreen);
}

@media (prefers-reduced-motion: reduce) {
  .rt-navbar {
    transition: none;
  }
}

/* --------------------------------------------------------------------- *
 * Partner institution logos
 *
 * The template assumed five identical wordmarks: it stretched each logo to
 * fill its tile and applied invert(50%) to grey it out. Real university
 * crests are a different problem — the ratios run from 0.72 (the tall
 * Universiti Malaya crest) to 2.60 (the wide Nottingham lockup), and
 * inverting a colour crest turns it into a negative.
 *
 * So: letterbox rather than stretch, and desaturate rather than invert.
 * Colour returns on hover, which is the usual treatment for a partner row.
 * --------------------------------------------------------------------- */
/* The two copies of each logo are stacked in a column and the box clips to
   exactly one of them: on hover the grey copy rolls up and out while the
   colour copy rolls in beneath. That only works if the box has a fixed
   height and each image fills it exactly — hence flex-basis 100% rather
   than letting the images size themselves. */
.rt-partners-icon {
  width: 100%;
  max-width: 8.5rem;
  height: 5rem;
  overflow: hidden;
}

.rt-partners-logo {
  object-fit: contain;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/* Resting: desaturated, so the row reads as one texture rather than five
   competing colour schemes. The colour arrives with the roll. */
.rt-partners-logo.rt-1 {
  filter: grayscale(1) contrast(.9) opacity(.65);
}

.rt-partners-logo.rt-2 {
  filter: none;
}

@media screen and (max-width: 991px) {
  .rt-partners-icon {
    height: 3.75rem;
  }
}

@media screen and (max-width: 767px) {
  .rt-partners-icon {
    max-width: 5.5rem;
    height: 3rem;
  }
}

/* --------------------------------------------------------------------- *
 * Brand logo
 *
 * The wordmark SVG carries only a viewBox (68 x 12.08, ≈5.63:1) and no
 * intrinsic width, so without an explicit size the browser falls back to
 * 68px — tiny. Size is therefore set here, fluidly, and the aspect ratio is
 * reserved so nothing shifts while the SVG loads.
 * --------------------------------------------------------------------- */
.rt-nav-logo-wrap {
  align-items: center;
  display: flex;
}

/* 992–1279px keeps the five-item menu and the CTA on one line. That fits
   inside roughly 870px, so the logo has room to sit at a proper size here
   rather than being held back. */
.rt-nav-logo {
  align-items: center;
  width: 11.5rem;                                    /* 184px */
  display: flex;
}

@media screen and (min-width: 1280px) {
  .rt-nav-logo {
    width: clamp(12rem, 8rem + 4vw, 14rem);          /* 192px → 224px */
  }
}

.rt-nav-logo img,
.rt-footer-logo-icon img {
  aspect-ratio: 68 / 12.08;
  width: 100%;
  height: auto;
  display: block;
}

/* The footer logo has the column to itself, so it can sit a little larger. */
.rt-footer-logo-icon {
  width: 11rem;                                      /* 176px */
  display: block;
}

@media screen and (min-width: 1280px) {
  .rt-footer-logo-icon {
    width: clamp(13rem, 9rem + 4vw, 15.5rem);        /* 208px → 248px */
  }
}

/* The header collapses to a hamburger below this width, so the logo has the
   bar largely to itself and can hold its size. */
@media screen and (max-width: 991px) {
  .rt-nav-logo {
    width: 10.5rem;
  }

  .rt-footer-logo-icon {
    width: 11.5rem;
  }
}

@media screen and (max-width: 767px) {
  .rt-nav-logo {
    width: 10rem;
  }

  .rt-footer-logo-icon {
    width: 12rem;
  }
}

@media screen and (max-width: 479px) {
  .rt-nav-logo {
    width: 8.75rem;                                   /* 140px */
  }

  .rt-footer-logo-icon {
    width: 10rem;
  }
}

/* --------------------------------------------------------------------- *
 * Icons
 *
 * One monochrome line set. Colour is inherited via currentColor so an icon
 * reads correctly on both the light sections and the evergreen bands. Each
 * icon has a "body" (the container shape) and an "accent" (the part that
 * carries the meaning) — the accent is what moves on hover.
 * --------------------------------------------------------------------- */
.rt-icon-wrap {
  color: var(--deep-evergreen);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;

  background-color: #0a27100f;
  border-radius: .75rem;
  transition: background-color .35s ease, color .35s ease;
}

.rt-icon {
  width: 1.375rem;
  height: 1.375rem;
  overflow: visible;
}

/* Small inline variant, for eyebrows, meta rows and link labels. */
.rt-icon-inline {
  background: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-right: .4375rem;
  border-radius: 0;
  vertical-align: -.1875rem;
}

.rt-icon-inline .rt-icon {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* Trailing position for outbound-link arrows. */
.rt-reference-link .rt-icon-inline,
.rt-sub-text .rt-icon-inline {
  margin-left: .375rem;
  margin-right: 0;
}

.rt-icon-body,
.rt-icon-accent {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  transform-origin: center;
  transform-box: fill-box;
}

/* On the evergreen bands the icons invert. */
.rt-section-dark .rt-icon-wrap,
.rt-hero-v4 .rt-icon-wrap {
  color: var(--white);
  background-color: #ffffff1a;
}

.rt-title-video-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.rt-title-video-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../images/hero/rf3-hero-poster.jpg') center / cover;
  pointer-events: none;
}

.rt-title-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rt-title-video-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 30, 23, .65);
}

@media (prefers-reduced-motion: reduce) {
  .rt-title-video-background video {
    display: none;
  }
}

.rt-hero-v4-top {
  max-width: 56rem !important;
  margin-left: auto;
  margin-right: auto;
}

.rt-hero-v4 .rt-paragraph-color,
.rt-hero-v4 p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------- *
 * Icon micro-animations
 *
 * Each hint matches what the icon means: downloads press downward, outbound
 * links lift away, the map turns, the checklist ticks. Deliberately small —
 * a nudge, not a performance.
 * --------------------------------------------------------------------- */
.rt-card:hover .rt-icon-wrap,
a:hover > .rt-icon-inline,
.rt-dataset-group-title:hover .rt-icon-inline {
  background-color: var(--light-lime-green);
  color: var(--white);
}

/* Download — the arrow presses into the tray. */
.rt-card:hover .rt-icon--download .rt-icon-accent,
a:hover .rt-icon--download .rt-icon-accent {
  transform: translateY(2px);
}

/* Outbound — the arrow leaves the frame. */
.rt-card:hover .rt-icon--external .rt-icon-accent,
a:hover .rt-icon--external .rt-icon-accent {
  transform: translate(2px, -2px);
}

/* Map — the meridian rotates, suggesting a turning globe. */
.rt-card:hover .rt-icon--map .rt-icon-accent,
a:hover .rt-icon--map .rt-icon-accent {
  transform: scaleX(.45);
}

/* Layers and data — the lower strata settle. */
.rt-card:hover .rt-icon--science .rt-icon-accent,
.rt-card:hover .rt-icon--data .rt-icon-accent {
  transform: translateY(1.5px);
}

/* Checklist and policy — the tick draws itself again. */
.rt-card:hover .rt-icon--checklist .rt-icon-accent,
.rt-card:hover .rt-icon--policy .rt-icon-accent {
  animation: rt-tick .45s cubic-bezier(.22, .61, .36, 1);
}

@keyframes rt-tick {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Community and network — the second figure steps forward. */
.rt-card:hover .rt-icon--community .rt-icon-accent,
.rt-card:hover .rt-icon--network .rt-icon-accent {
  transform: translateX(1.5px);
}

/* Calendar, mail, document, reference — a gentle lift. */
.rt-card:hover .rt-icon--calendar .rt-icon-accent,
.rt-card:hover .rt-icon--mail .rt-icon-accent,
.rt-card:hover .rt-icon--document .rt-icon-accent,
.rt-card:hover .rt-icon--reference .rt-icon-accent {
  transform: translateY(-1.5px);
}

/* Alert — a single considered pulse. */
.rt-card:hover .rt-icon--alert .rt-icon-accent {
  animation: rt-pulse .6s ease;
}

@keyframes rt-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Method — the lens sweeps. */
.rt-card:hover .rt-icon--method .rt-icon-accent {
  transform: translate(1.5px, 1.5px);
}

/* Bullet markers */
.rt-list--icon {
  padding-left: 0;
  list-style: none;
}

.rt-list--icon li {
  align-items: flex-start;
  gap: .75rem;
  padding-left: 0;
  display: flex;
}

.rt-icon-bullet {
  color: var(--deep-evergreen);
  background: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .3125rem;
  border-radius: 0;
}

.rt-icon-bullet .rt-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.rt-section-dark .rt-icon-bullet {
  color: var(--light-lime-green);
}

/* Card heading row: icon beside the title. */
/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .rt-icon-body,
  .rt-icon-accent {
    transition: none;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------- *
 * Section rhythm
 * --------------------------------------------------------------------- */
.rt-section-block {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}

.rt-section-block + .rt-section-block {
  padding-top: 0;
}

.rt-section-block .rt-sub-text-gap {
  margin-bottom: 1rem;
}

.rt-section-block h2 {
  max-width: 46rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: var(--_typography---font-size--heading-two);
  line-height: var(--_typography---line-height--heading-two);
  letter-spacing: var(--_typography---letter-spacing--heading-two);
}

.rt-section-block > .w-container > p {
  max-width: 46rem;
  margin-bottom: 0;
  font-size: 1.0625rem;
  line-height: 165%;
}

/* Dark band variant, matching the site's evergreen sections. */
.rt-section-dark {
  background-color: var(--deep-evergreen);
}

.rt-section-dark h2,
.rt-section-dark .rt-sub-text,
.rt-section-dark .rt-text-style-h4,
.rt-section-dark .rt-text-style-h5 {
  color: var(--white);
}

.rt-section-dark .rt-paragraph-color {
  color: var(--silver-gray);
}

/* --------------------------------------------------------------------- *
 * Card grid — research priorities, resources, checklist steps
 * --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- *
 * Cards
 *
 * A single vertical hierarchy, used by every card on the site:
 *
 *     icon (+ index)      the visual anchor
 *     note                small-caps category / source
 *     title               the thing itself
 *     body                supporting sentence
 *
 * Everything stacks. An earlier version put the note beside the title in a
 * space-between row, which collided as soon as either wrapped.
 * --------------------------------------------------------------------- */
.rt-card-grid {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  align-items: stretch;
  margin-top: 2.5rem;
  display: grid;
}

.rt-card {
  border: .0625rem solid #0a271014;
  border-radius: 1rem;
  background-color: #0a27100a;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding: 1.75rem;
  display: flex;
}

/* Icon row. The index sits opposite the icon and never wraps, because it is
   only ever two characters. */
.rt-card-top {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  display: flex;
}

.rt-card-index {
  color: var(--charcoal-gray);
  letter-spacing: .09375rem;
  font-family: var(--_typography---font-family--ltsuperior);
  font-size: .8125rem;
  font-weight: var(--_typography---font-weight--weight-semi-bold);
  line-height: 1;
}

/* Text stack */
.rt-card-text {
  flex-flow: column;
  gap: .5rem;
  width: 100%;
  display: flex;
}

.rt-card-note {
  color: var(--charcoal-gray);
  text-transform: uppercase;
  letter-spacing: .075rem;
  overflow-wrap: anywhere;
  font-family: var(--_typography---font-family--ltsuperior);
  font-size: .6875rem;
  font-weight: var(--_typography---font-weight--weight-semi-bold);
  line-height: 1.45;
}

.rt-card-title {
  color: var(--deep-evergreen);
  text-wrap: balance;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: var(--_typography---font-weight--weight-medium);
  line-height: 1.35;
  letter-spacing: -.0125rem;
}

.rt-card-body {
  color: var(--charcoal-gray);
  margin: .25rem 0 0;
  font-size: .9688rem;
  line-height: 1.6;
}

/* Leaf — the frond tips lift. */
.rt-card:hover .rt-icon--leaf .rt-icon-accent,
.rt-choose-item:hover .rt-icon--leaf .rt-icon-accent {
  transform: translate(-1px, -1.5px);
}

/* On the evergreen bands the card text inverts with the surface. */
.rt-section-dark .rt-card-title {
  color: var(--white);
}

.rt-section-dark .rt-card-note,
.rt-section-dark .rt-card-body,
.rt-section-dark .rt-card-index {
  color: var(--silver-gray);
}

/* The landing page's own cards keep the template layout, so the icon sits
   inline with the title there rather than on its own row. */
.rt-card-heading {
  align-items: center;
  gap: .875rem;
  display: flex;
}

.rt-card-heading .rt-text-style-h5,
.rt-card-heading .rt-text-style-h4 {
  margin: 0;
}

/* Push trailing actions to the foot so cards in a row align. */
.rt-card .rt-button-row,
.rt-card .rt-dataset-links,
.rt-card .rt-card-action {
  margin-top: auto;
  padding-top: .25rem;
}

a.rt-resource-link {
  text-decoration: none;
  transition: background-color .3s, border-color .3s, transform .3s;
}

a.rt-resource-link:hover {
  background-color: #0a271014;
  border-color: #0a271033;
  transform: translateY(-.25rem);
}

.rt-section-dark .rt-card {
  background-color: #ffffff0f;
  border-color: #ffffff1f;
}

.rt-section-dark a.rt-resource-link:hover {
  background-color: #ffffff1a;
}

/* --------------------------------------------------------------------- *
 * Lists
 * --------------------------------------------------------------------- */
.rt-list {
  margin: 1.75rem 0 0;
  padding-left: 1.125rem;
  max-width: 46rem;
}

.rt-list li {
  margin-bottom: .75rem;
  padding-left: .375rem;
  font-size: 1.0625rem;
  line-height: 165%;
}

.rt-list li::marker {
  color: var(--light-lime-green);
}

.rt-section-dark .rt-list li::marker {
  color: var(--light-lime-green);
}

/* --------------------------------------------------------------------- *
 * Buttons in flow
 * --------------------------------------------------------------------- */
.rt-button-row {
  margin-top: 2rem;
  flex-flow: wrap;
  gap: 1rem;
  display: flex;
}

/* --------------------------------------------------------------------- *
 * Institutions (landing page)
 * --------------------------------------------------------------------- */
.rt-institution-grid {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2.5rem;
  display: grid;
}

.rt-institution-card {
  border: .0625rem solid #0a271014;
  border-radius: 1rem;
  flex-flow: column;
  gap: .5rem;
  padding: 1.5rem;
  display: flex;
}

.rt-institution-card .rt-text-style-h5 {
  color: var(--deep-evergreen);
  margin: 0;
}

.rt-note {
  color: var(--silver-gray);
  margin-top: 1.5rem;
  font-size: .9375rem;
  font-style: italic;
}

/* --------------------------------------------------------------------- *
 * Team
 * --------------------------------------------------------------------- */
.rt-team-grid {
  grid-column-gap: 1.75rem;
  grid-row-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  margin-top: 2.75rem;
  display: grid;
}

/* Avatar sits in its own column beside the text. Cards without a portrait
   use the person mark, so every card keeps the same shape and the grid
   stays even whether or not a photo exists. Extra top padding gives the
   avatar breathing room above the name, and the hover lift is a light
   touch that makes the grid feel tactile rather than static. */
.rt-team-card {
  border: .0625rem solid #0a271014;
  border-radius: 1.25rem;
  background-color: #0a27100a;
  align-items: flex-start;
  gap: 1.375rem;
  padding: 2.125rem 1.875rem;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
  display: flex;
}

.rt-team-card:hover {
  border-color: #0a271026;
  background-color: #0a27100f;
  box-shadow: 0 1rem 2.5rem #0a27101a;
  transform: translateY(-.1875rem);
}

.rt-team-avatar {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  margin-top: .125rem;
}

.rt-team-photo {
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

/* Stand-in for members we have no portrait for. */
.rt-team-placeholder {
  color: var(--deep-evergreen);
  background-color: #0a271014;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.rt-team-placeholder .rt-icon-wrap {
  background: none;
  width: auto;
  height: auto;
}

.rt-team-placeholder .rt-icon {
  width: 2.125rem;
  height: 2.125rem;
}

/* Name, role and country sit close together as one meta group (tight,
   near-zero gaps); the bio then gets a clear gap of its own so the eye
   reads the card in two deliberate steps rather than one dense block. */
.rt-team-text {
  flex-flow: column;
  gap: 0;
  min-width: 0;
  display: flex;
}

.rt-team-card .rt-text-style-h4 {
  margin: 0 0 .3125rem;
  line-height: 1.25;
}

.rt-team-card .rt-sub-text {
  margin: 0;
  line-height: 1.4;
}

.rt-team-country {
  color: var(--charcoal-gray);
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.3;
}

.rt-team-card p {
  margin-top: 1.125rem;
  margin-bottom: 0;
  line-height: 1.65;
}

@media screen and (max-width: 479px) {
  .rt-team-card {
    gap: 1rem;
  }

  .rt-team-avatar {
    width: 3.75rem;
    height: 3.75rem;
  }

  .rt-team-placeholder .rt-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .rt-team-card p {
    margin-top: .875rem;
  }
}

/* --------------------------------------------------------------------- *
 * Case study
 * --------------------------------------------------------------------- */
.rt-case-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  margin-top: 2.5rem;
  display: grid;
}

.rt-case-col {
  border-top: .1875rem solid var(--light-lime-green);
  padding-top: 1.25rem;
}

.rt-case-col .rt-text-style-h5 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.rt-case-col p {
  margin-bottom: 1rem;
}

.rt-case-col .rt-list {
  margin-top: 0;
}

.rt-source {
  color: var(--charcoal-gray);
  border-top: .0625rem solid #0a271014;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: .875rem;
  line-height: 160%;
}

/* --------------------------------------------------------------------- *
 * Checklist page
 * --------------------------------------------------------------------- */
.rt-checklist-block {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  margin-top: 2rem;
  display: grid;
}

.rt-checklist-block .rt-text-style-h5 {
  margin-top: 0;
  margin-bottom: .75rem;
}

.rt-callout {
  border-left: .1875rem solid var(--light-lime-green);
  background-color: #0a27100a;
  border-radius: .5rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
}

/* --------------------------------------------------------------------- *
 * References — numbered citation list
 * --------------------------------------------------------------------- */
.rt-reference-list {
  counter-reset: ref;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 58rem;
  list-style: none;
}

.rt-reference {
  counter-increment: ref;
  border-bottom: .0625rem solid #0a271014;
  gap: 1rem;
  padding: 1.125rem 0 1.125rem 2.75rem;
  display: flex;
  position: relative;
}

.rt-reference::before {
  content: counter(ref);
  color: var(--white);
  background-color: var(--light-lime-green);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: .8125rem;
  font-weight: var(--_typography---font-weight--weight-semi-bold);
  display: flex;
  position: absolute;
  top: 1.125rem;
  left: 0;
}

.rt-reference-text {
  color: var(--charcoal-gray);
  flex: 1;
  font-size: .9688rem;
  line-height: 165%;
}

.rt-reference-link {
  color: var(--deep-evergreen);
  white-space: nowrap;
  border-bottom: .0625rem solid #0a271040;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: .875rem;
  font-weight: var(--_typography---font-weight--weight-medium);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}

.rt-reference-link:hover {
  color: #4a6b1f;
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------- *
 * Publications
 * --------------------------------------------------------------------- */
.rt-publication-list {
  margin-top: 2.5rem;
  max-width: 58rem;
}

.rt-publication {
  border-top: .0625rem solid #0a271014;
  padding: 2rem 0;
}

.rt-publication:first-child {
  border-top: 0;
  padding-top: 0;
}

.rt-publication-meta {
  color: var(--charcoal-gray);
  text-transform: uppercase;
  letter-spacing: var(--_typography---letter-spacing--sub-text);
  margin-bottom: .625rem;
  font-size: .75rem;
  font-weight: var(--_typography---font-weight--weight-semi-bold);
}

.rt-publication-title {
  margin: 0 0 .5rem;
}

.rt-publication-authors {
  color: var(--charcoal-gray);
  margin-bottom: 1rem;
  font-size: .9375rem;
  font-style: italic;
}

.rt-publication p {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------- *
 * Dataset catalogue
 * --------------------------------------------------------------------- */
.rt-dataset-group {
  margin-top: 3rem;
}

.rt-dataset-group-title {
  border-bottom: .1875rem solid var(--light-lime-green);
  margin: 0 0 .25rem;
  padding-bottom: .75rem;
  display: inline-block;
}

.rt-dataset-links {
  gap: 1.25rem;
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
}

.rt-doi {
  color: var(--charcoal-gray);
}

/* --------------------------------------------------------------------- *
 * Contact form
 * --------------------------------------------------------------------- */
.rt-contact-block {
  max-width: 40rem;
  margin-top: 2.5rem;
}

.rt-form-label {
  color: var(--deep-evergreen);
  margin-top: 1.25rem;
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: var(--_typography---font-weight--weight-medium);
  display: block;
}

.rt-text-field {
  width: 100%;
  color: var(--deep-evergreen);
  background-color: #0a27100a;
  border: .0625rem solid #0a271026;
  border-radius: .625rem;
  min-height: 3.25rem;
  margin-bottom: 0;
  padding: .875rem 1rem;
  font-size: 1rem;
  transition: border-color .2s, background-color .2s;
}

.rt-text-field:focus {
  border-color: var(--deep-evergreen);
  background-color: #0a271014;
  outline: 0;
}

textarea.rt-text-field {
  min-height: 9rem;
  resize: vertical;
}

.rt-form-submit {
  margin-top: 1.75rem;
  border: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------- *
 * Footer link
 * --------------------------------------------------------------------- */
.rt-footer-inline-link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: .1875rem;
}

.rt-footer-inline-link:hover {
  color: var(--white);
}

/* --------------------------------------------------------------------- *
 * Responsive
 * --------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .rt-section-block {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Tablet: two columns rather than letting auto-fit drop to one too early. */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .rt-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .rt-section-block {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .rt-card {
    gap: 1rem;
    padding: 1.5rem;
  }

  .rt-team-card {
    gap: 1.125rem;
    padding: 1.625rem;
  }

  .rt-card-title {
    font-size: 1.125rem;
  }

  .rt-card-grid,
  .rt-team-grid,
  .rt-case-grid,
  .rt-institution-grid,
  .rt-checklist-block {
    grid-template-columns: 1fr;
  }

  .rt-card-grid {
    grid-row-gap: 1rem;
    margin-top: 2rem;
  }

  .rt-team-grid {
    grid-row-gap: 1.25rem;
  }

  /* Long citations and URLs must not push the list sideways. */
  .rt-reference {
    flex-flow: column;
    gap: .625rem;
  }

  .rt-reference-link {
    align-self: flex-start;
  }
}

@media screen and (max-width: 479px) {
  .rt-card {
    padding: 1.25rem;
  }

  .rt-team-card {
    padding: 1.75rem 1.25rem 1.25rem;
  }

  .rt-icon-wrap {
    width: 2.25rem;
    height: 2.25rem;
  }

  .rt-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   "The problem" section now sits directly under the hero.

   Everywhere else on the site the space between two sections is the sum of
   the upper section's bottom padding and the lower one's top padding (e.g.
   priorities -> methods = section-text-gap twice). The hero has no bottom
   padding at all, so it gets the missing half as a margin instead. The
   problem section then keeps its stock padding and its stock watermark
   offset, exactly like "Our approach".
   -------------------------------------------------------------------------- */
main > .rt-banner-main {
  min-height: 100vh;
  min-height: 100dvh;
  margin-bottom: 0;
}

/* Applies to both "The problem" and "Our approach". */
.rt-choose + .rt-about-main {
  padding-top: calc(var(--_site-unit---section-gap--section-text-gap) + clamp(2rem, 4vw, 4rem));
}

.rt-choose + .rt-about-main .rt-big-about-text-wrapper {
  top: clamp(2rem, 4vw, 4rem);
}

.rt-about-main .rt-big-about-text {
  opacity: .18;
}

.rt-about-main .rt-about-heading-wrap h2 {
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Consistent spacing within the homepage's Problem and Approach cards. */
main > .rt-about-main + .rt-products {
  padding-top: clamp(3rem, 6vw, 6rem);
}

main > .rt-products .rt-products-heading {
  max-width: 60rem;
}

.rt-footer-top {
  border-bottom: 0;
}

.rt-outputs-section { scroll-margin-top: 7rem; }
.rt-outputs-layout { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2.5rem; align-items: start; }
.rt-output-sidebar { position: sticky; top: 7rem; align-self: start; max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); overflow-y: auto; }
.rt-output-sidebar h2 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.15; margin-bottom: 2rem; }
.rt-output-tabs { border: 1px solid #0a271026; border-radius: 1rem; overflow: hidden; background: white; }
.rt-output-tab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem; border: 0; border-bottom: 1px solid #0a271026; background: white; color: var(--deep-evergreen); font: inherit; text-align: left; cursor: pointer; }
.rt-output-tab:last-child { border-bottom: 0; }
.rt-output-tab[aria-selected="true"] { background: linear-gradient(90deg, var(--light-lime-green), #f8fbe9); font-weight: 600; }
.rt-output-tab:hover { background-color: #f5f8ef; }
.rt-output-tab:focus-visible { outline: 2px solid var(--deep-evergreen); outline-offset: -4px; }
.rt-output-panels { display: grid; min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 1rem; background: #f7f9f5; }
.rt-output-panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; align-self: start; }
/* Reserve the tallest category's space so tab switches cannot move the sidebar. */
.rt-output-panels > [role="tabpanel"][hidden] { display: block; visibility: hidden; pointer-events: none; }
.rt-output-entry { padding-block: 1.5rem; border-bottom: 1px solid #0a271026; }
.rt-output-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.rt-output-material-icon { margin-bottom: 1.25rem; }
.rt-recording-thumbnail { display: block; position: relative; overflow: hidden; border-radius: .75rem; margin-bottom: 1.5rem; background: var(--deep-evergreen); }
.rt-recording-thumbnail img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rt-recording-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--light-lime-green); color: var(--deep-evergreen); box-shadow: 0 2px 16px #0004; }
.rt-recording-thumbnail:hover .rt-recording-play { background: white; }
.rt-recording-thumbnail:focus-visible { outline: 3px solid var(--deep-evergreen); outline-offset: 4px; }
.rt-publication-cover { display: block; max-width: 11rem; margin-bottom: 1.5rem; border-radius: .5rem; overflow: hidden; box-shadow: 0 4px 18px #0002; transition: transform .25s ease, box-shadow .25s ease; }
.rt-publication-cover img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1275; object-fit: cover; }
.rt-publication-cover:hover { transform: translateY(-3px); box-shadow: 0 8px 26px #0003; }
.rt-publication-cover:focus-visible { outline: 3px solid var(--deep-evergreen); outline-offset: 4px; }
.rt-output-entry h4 { margin: .5rem 0 .875rem; font-size: 1.375rem; line-height: 1.35; }
.rt-output-entry p { margin: 0 0 1rem; line-height: 1.65; }
.rt-output-authors, .rt-output-status { font-size: .875rem; color: #526353; }
@media (max-width: 767px) { .rt-outputs-layout { grid-template-columns: minmax(0, 1fr); } .rt-output-sidebar { position: static; max-height: none; } .rt-output-tab { padding: 1.125rem 1.25rem; } }

.rt-map-launch-section {
  padding-block: clamp(2rem, 4vw, 4rem);
  scroll-margin-top: 7rem;
}

.rt-map-launch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  max-width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid var(--deep-evergreen);
  border-radius: 2rem;
  background: var(--light-lime-green);
  color: var(--deep-evergreen);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}

.rt-map-launch-heading {
  margin-bottom: 1.75rem;
}

.rt-map-page-content {
  margin-top: 2rem;
}

.rt-map-launch-button:hover {
  background: #e0ff79;
}

.rt-map-launch-button:focus-visible {
  outline: 2px solid var(--deep-evergreen);
  outline-offset: 4px;
}

.rt-map-launch-button > svg,
.rt-map-launch-button .rt-icon-inline {
  flex-shrink: 0;
}

.rt-map-launch-button > span:not(.rt-icon-wrap) {
  display: block;
  line-height: 1.25;
}

.rt-map-launch-button .rt-icon-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  vertical-align: initial;
  transform: translateY(-.0625rem);
}

.rt-map-launch-button .rt-icon-inline .rt-icon,
.rt-map-launch-button > svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.rt-footer-marquee .rt-big-marquree-text {
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1;
}

main > .rt-products .rt-products-row-1 {
  justify-content: center;
}

main > .rt-products .rt-products-heading h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.15;
}

main > .rt-focus {
  padding-top: clamp(4rem, 8vw, 8rem);
}

.rt-story-card {
  max-width: 43.4375rem;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.rt-approach-image-panel {
  padding-top: clamp(2rem, 4vw, 4rem);
}

.rt-story-with-context {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.rt-story-context {
  overflow: hidden;
  border-radius: 1rem;
  background: var(--deep-evergreen);
  color: white;
}

.rt-story-context > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rt-story-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.rt-story-facts strong, .rt-story-facts span {
  display: block;
}

.rt-story-facts strong {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.rt-story-facts span {
  font-size: .875rem;
}

@media (max-width: 991px) {
  .rt-story-with-context {
    grid-template-columns: minmax(0, 1fr);
  }
  .rt-story-context {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
  }
}

.rt-story-card .rt-about-heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.rt-story-card .rt-about-heading-wrap .rt-about-part-title {
  margin: 0;
}

.rt-story-card .rt-about-border {
  margin: 1.5rem 0;
}

.rt-story-card .rt-about-item-centerbuttom {
  max-width: none;
  padding-top: 0;
  gap: 1.75rem;
}

.rt-story-card .rt-about-item-centerbuttom p {
  margin: 0;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Hero: the right-hand stat card was removed, so the left column now runs
   the full width. Pull the "Scroll to Explore" cue up (its 19rem stack gap
   pushed it below the fold) and park it at the right edge of the hero.
   -------------------------------------------------------------------------- */
.rt-hero-v1-content:not(:has(.rt-hero-v1-right)) .rt-hero-v1-left {
  grid-column-gap: clamp(1.5rem, 6vh, 4rem);
  grid-row-gap: clamp(1.5rem, 6vh, 4rem);
  max-width: none;
  padding-bottom: 0;
}

.rt-hero-v1-content:not(:has(.rt-hero-v1-right)) .rt-hero-v1-left > div:first-child {
  max-width: 28.125rem;
}

.rt-hero-v1-content:not(:has(.rt-hero-v1-right)) .rt-hero-v1-left-buttom {
  justify-content: flex-end;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .rt-hero-v1-content:not(:has(.rt-hero-v1-right)) .rt-hero-v1-left-buttom {
    justify-content: flex-start;
  }
}

/* Hero lost its tallest element (the stat card), so the video no longer
   filled the viewport. Hold it at one screen — as a MINIMUM only. On short
   or narrow viewports the stacked copy is allowed to make the hero taller
   rather than being clipped by the section's overflow:hidden. */
main > .rt-banner-main .rt-hero-v1-video-wrapper {
  min-height: 100vh;          /* fallback for browsers without svh */
  min-height: 100dvh;
  height: auto;
  padding-top: clamp(6rem, 14vh, 16.5rem);
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
}

main > .rt-banner-main .rt-hero-v1-content {
  padding-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   Navbar auto-hide: slides out of the way while scrolling down, returns on
   the first upward scroll. (State class is set in js-new/widgets.js.)
   -------------------------------------------------------------------------- */
.rt-navbar.is-hidden {
  transform: translate(0, calc(-100% - 43px));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rt-navbar {
    transition: none;
  }
}

/* ==========================================================================
   RESPONSIVE SAFETY NET
   Everything below is either breakpoint-scoped (max-width) or a wrapping
   rule that is a no-op at desktop widths, so the desktop composition is
   unchanged.
   ========================================================================== */

/* Nothing should be able to push the page sideways. `clip` (rather than
   `hidden`) avoids turning the body into a scroll container, which would
   break ScrollTrigger and position:sticky. */
body {
  overflow-x: clip;
}

/* Long DOIs, dataset URLs and citation links are the usual culprits for
   horizontal overflow on phones. */
.rt-doi,
.rt-reference-text,
.rt-reference-link,
a.rt-resource-link,
.rt-publication-meta {
  overflow-wrap: anywhere;
}

/* Inline link rows should wrap instead of squeezing. */
.rt-dataset-links,
.rt-publication-meta {
  flex-wrap: wrap;
}

@media screen and (max-width: 991px) {
  /* Hero: the copy column no longer competes with a stat card, so let it
     use the full container width at tablet sizes. */
  .rt-hero-v1-content:not(:has(.rt-hero-v1-right)) .rt-hero-v1-left > div:first-child {
    max-width: 34rem;
  }
}

@media screen and (max-width: 767px) {
  /* Section watermarks ("THE PROBLEM" / "OUR APPROACH") are set in a huge
     display size; keep them from spilling past the viewport edge. */
  .rt-big-about-text-wrapper {
    max-width: 100%;
    overflow: hidden;
  }

  .rt-big-about-text {
    max-width: 100%;
  }

  /* Buttons go full-bleed in a stacked row so taps are comfortable. */
  .rt-button-row {
    flex-flow: column;
    align-items: stretch;
  }

  .rt-button-row > * {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  /* Hero headline gets tight at 320–479px; allow a slightly smaller step
     than the global h1 without touching larger screens. */
  .rt-banner-main h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.1;
  }

  .rt-hero-v1-subtext {
    font-size: .9375rem;
  }

  /* Stat counters and big display numbers overflow their box on the
     narrowest phones. */
  .rt-counter-box.rt-big-1,
  .rt-counter-box.rt-big-marquree-text {
    font-size: 3.25rem;
    line-height: 1.05;
  }
}

/* The two "about" blocks keep the site's stock layout; only the heading
   legibility tweak above applies to them. */

/* The card carries two labelled parts — the problem, then the response.
   Each label is highlighted as a lime chip so the two halves are obvious
   at a glance. */
.rt-about-part-title {
  background-color: var(--light-lime-green);
  color: var(--deep-evergreen);
  border-radius: 1.25rem;
  align-items: center;
  margin-bottom: .875rem;
  padding: .375rem .875rem;
  font-family: var(--_typography---font-family--ltsuperior);
  font-size: .875rem;
  font-weight: var(--_typography---font-weight--weight-bold);
  letter-spacing: .05rem;
  line-height: 1.3;
  text-transform: uppercase;
  display: inline-flex;
}

/* The partners strip lost its big counter, so the remaining line was left
   stranded in a narrow column on the left. Centre it across the container. */
.rt-trusted-top {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rt-trusted-top-text {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* Even spacing for 5-collaborator pentagon layout */
@media screen and (min-width: 992px) {
  .rt-process-over-item.rt-one {
    top: 0;
  }
  .rt-process-over-item.rt-two {
    top: 23%;
    right: 0;
  }
  .rt-process-over-item.rt-three {
    top: 23%;
    left: 0;
  }
  .rt-process-over-item.rt-four {
    bottom: 8%;
    left: 14%;
  }
  .rt-process-over-item.rt-five {
    bottom: 8%;
    right: 14%;
  }
}

/* Center and enlarge logos in collaborating institutions cards */
.rt-process-over-item {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 0.75rem;
}

.rt-process-icon {
  width: 11.5rem !important;
  height: 7rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.rt-process-icon img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.rt-process-text-item {
  align-items: center !important;
  width: 100%;
}

a.rt-process-over-item {
  text-decoration: none !important;
  cursor: pointer;
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.3s ease;
}

a.rt-process-over-item:hover {
  box-shadow: 0 20px 40px rgba(10, 39, 16, 0.12) !important;
  background-color: #fafdf7 !important;
}

.rt-process-icon img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.rt-process-over-item:hover .rt-process-icon img {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------- *
 * Interactive Map Embed
 * --------------------------------------------------------------------- */
.rt-map-embed-card {
  margin-top: 2rem;
  background: var(--white);
  border: 1px solid #0a27101f;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(10, 39, 16, 0.08);
  display: flex;
  flex-direction: column;
}

.rt-map-embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background-color: #f7faf5;
  border-bottom: 1px solid #0a271014;
  gap: 1rem;
}

.rt-map-embed-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.rt-map-status-dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: #2ebd59;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #2ebd5933;
  animation: rt-pulse-dot 2s infinite ease-in-out;
}

@keyframes rt-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

.rt-map-embed-title {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-evergreen);
}

.rt-map-embed-actions {
  display: flex;
  align-items: center;
}

.rt-map-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--deep-evergreen);
  background-color: var(--white);
  border: 1px solid #0a27101f;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.rt-map-action-btn:hover {
  background-color: var(--light-lime-green);
  color: var(--deep-evergreen);
  border-color: var(--light-lime-green);
  transform: translateY(-1px);
}

.rt-map-action-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.rt-map-iframe-wrap {
  width: 100%;
  height: 720px;
  position: relative;
  background-color: #e5e9e2;
}

.rt-map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.rt-map-embed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: #f7faf5;
  border-top: 1px solid #0a271014;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rt-map-footer-text {
  font-size: 0.875rem;
  color: var(--charcoal-gray);
  line-height: 1.5;
  flex: 1 1 20rem;
}

.rt-map-footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rt-map-footer-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-evergreen);
  text-decoration: none;
  transition: color 0.2s ease;
}

.rt-map-footer-link:hover {
  color: #1b632c;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .rt-map-iframe-wrap {
    height: 480px;
  }
  .rt-map-embed-bar,
  .rt-map-embed-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------- *
 * Video Embed (Seminars & Recordings)
 * --------------------------------------------------------------------- */
.rt-video-embed-card {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  background: var(--white);
  border: 1px solid #0a27101f;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(10, 39, 16, 0.08);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
}

.rt-video-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.rt-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.rt-video-embed-info {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.875rem;
  background-color: #fcfdfa;
}

.rt-video-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--light-lime-green);
  color: var(--deep-evergreen);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: 2rem;
}

.rt-video-title {
  margin: 0;
  color: var(--deep-evergreen);
  font-size: 1.25rem;
  line-height: 1.35;
}

.rt-video-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal-gray);
}

.rt-video-links,
.rt-video-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.rt-video-actions .rt-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-evergreen);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rt-video-actions .rt-card-btn:hover {
  color: #1a6b2e;
}

@media screen and (max-width: 991px) {
  .rt-video-embed-card {
    grid-template-columns: 1fr;
  }
  .rt-video-embed-info {
    padding: 1.5rem;
  }
}

/* Minimal institution map. */
.institution-network {padding-top:2rem}
.network-heading {margin:0 auto 2.5rem;text-align:center}
.network-heading h2 {margin:0}
.network-layout {width:70%;max-width:60rem;margin:0 auto}
.network-map svg {display:block;width:100%;height:auto}
.network-marker {cursor:pointer;outline:none}
.network-marker rect {fill:#fff;stroke:#d8dfd3;stroke-width:1}
.network-marker text {fill:#17351d;font:500 13px Inter,sans-serif;pointer-events:none}
.network-leader {stroke:#9aaa91;stroke-width:1;fill:none}
.network-location {fill:#193b21;stroke:#fff;stroke-width:2}
.network-marker:hover rect {fill:#d3f547;stroke:#afca57}
.network-marker:focus-visible rect {stroke:#193b21;stroke-width:3}
.network-map-foot {display:flex;justify-content:space-between;gap:12px;color:#7a8475;font-size:10px;padding:8px 0 16px}
.network-map-foot a {color:inherit}
.network-directory {border-top:1px solid #e0e5dc;padding-top:20px}
.network-detail {display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;min-height:82px}
.network-detail[hidden] {display:none}
.network-location-label {grid-column:1;font-size:12px;color:#67725f;margin:0}
.network-detail h3 {grid-column:1;font-size:clamp(18px,2vw,24px);line-height:1.3;margin:0;color:#17351d}
.network-visit {grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:16px;color:#17351d;font-size:14px;text-decoration:none;border-bottom:1px solid #a9b59e;padding-bottom:4px}
.network-visit:focus-visible {outline:2px solid #385d29;outline-offset:4px}
.network-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:600px) {.network-detail{grid-template-columns:1fr;min-height:132px}.network-visit{grid-column:1;grid-row:auto;justify-self:start}.network-map svg{min-height:260px}}

.network-marker .network-marker-city {font-size:11px;fill:#67725f;font-weight:400}
.network-hint {font-size:14px;color:#67725f;margin:12px 0 0}

.network-marker-logo {pointer-events:none}

.network-team-button {display:flex;justify-content:center;margin-top:2rem}

.rt-offerings-item-icon .rt-strand-icon {width:50px;height:50px;object-fit:contain;display:block}

.rt-knowledge-toolkit-button {display:inline-flex;align-items:center;gap:1rem;padding:.65rem 1.2rem;border:1px solid #17351d;border-radius:999px;background:#d3f547;color:#17351d;font-size:14px;font-weight:600;text-decoration:none}
.rt-knowledge-toolkit-button:hover {background:#e4ff76}
.rt-knowledge-toolkit-button:focus-visible {outline:2px solid #17351d;outline-offset:4px}

/* Consistent spacing for the knowledge co-creation methods and CTA. */
.rt-knowledge-creation .rt-offerings-wrapper {align-items:stretch;row-gap:2.5rem}
.rt-knowledge-creation .rt-offerings-item {justify-content:flex-start;gap:1.875rem}
.rt-knowledge-creation .rt-offerings-item-icon {display:flex;align-items:center;justify-content:center}
.rt-knowledge-creation .rt-knowledge-toolkit-link {margin-top:clamp(2rem,4vw,3rem);text-align:center}

.rt-knowledge-creation .rt-icon-wrap {width:4rem;height:4rem;border-radius:1rem}
.rt-knowledge-creation .rt-icon {width:2.25rem;height:2.25rem}

@media (max-width:991px) {.network-layout {width:100%}}

.rt-case-download {margin-top:1.5rem}
.rt-case-download-note {font-size:.8125rem;color:#67725f;margin-top:.75rem}

.rt-download-button .rt-button-icon-wrapper {width:1rem;height:1rem;flex-shrink:0;margin-bottom:.125rem}
.rt-download-button .rt-button-icon {width:1rem;height:1rem;max-width:none}

.rt-checklist-overview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem;list-style:none;margin:2rem 0;padding:0}
.rt-checklist-overview li {display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid #dce3d7;color:#17351d;font-size:1rem;line-height:1.4}
.rt-checklist-overview-number {font-size:.75rem;font-weight:600;color:#67725f;flex-shrink:0}
@media(max-width:991px) {.rt-checklist-overview {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) {.rt-checklist-overview {grid-template-columns:1fr;gap:0}}

.rt-checklist-download-row {justify-content:flex-end}

.rt-case-heading-row {display:flex;align-items:center;justify-content:space-between;gap:2rem}
.rt-case-heading-row > .rt-overflow-hidden {flex:1;min-width:0}
.rt-case-heading-action {flex-shrink:0}
@media(max-width:991px) {.rt-case-heading-row {flex-direction:column;align-items:flex-start;gap:1.5rem}.rt-case-heading-action {margin-bottom:1rem}}

/* Responsive layouts for SEAPEAT pages, including custom content modules. */
.network-mobile-institutions {display:none}
.rt-card,.rt-team-card,.rt-team-text,.rt-case-col,.rt-output-entry,.rt-map-embed-info {min-width:0}
.rt-source,.rt-team-text,.rt-output-entry,.rt-card-body,.rt-reference-text {overflow-wrap:anywhere}
@media (max-width:991px) {
  .rt-outputs-layout {grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .rt-output-sidebar {position:static;max-height:none;overflow:visible}
  .rt-output-sidebar h2 {margin-bottom:1.5rem}
  .rt-output-tab {min-height:48px;padding:1rem 1.25rem}
  .rt-output-panels > [role="tabpanel"][hidden] {display:none}
  .rt-output-panels {display:block}
  .rt-offerings-wrapper {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .rt-offerings-item {width:100%;max-width:none;min-width:0}
  .rt-nav-button {min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .w-nav-overlay {max-height:calc(100dvh - 5rem);overflow-y:auto;overscroll-behavior:contain}
  .rt-nav-menu[data-nav-menu-open] {position:relative;height:auto;min-height:0;max-height:none;overflow:visible;padding-bottom:2rem}
  .rt-map-embed-bar {flex-wrap:wrap}
  .rt-map-action-btn {min-height:44px}
  .rt-map-iframe-wrap {height:65vh;height:65dvh;min-height:420px;max-height:720px}
  .rt-case-heading-action {max-width:100%}
}
@media (max-width:767px) {
  .rt-container-main {padding-left:20px;padding-right:20px}
  h1 {font-size:clamp(2rem,8vw,3rem);line-height:1.12;overflow-wrap:break-word}
  h2 {font-size:clamp(1.75rem,6.5vw,2.5rem);line-height:1.18;overflow-wrap:break-word}
  .rt-title-video-hero {padding-top:8rem;padding-bottom:3.5rem}
  .rt-title-video-hero .rt-hero-v4-top {max-width:100%;padding:0}
  .rt-section-block,.rt-offerings,.rt-about-main,.rt-products {padding-top:3.5rem;padding-bottom:3.5rem}
  .rt-cta {background-attachment:scroll}
  .rt-offerings-wrapper {grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .rt-offerings-item {max-width:32rem;margin-inline:auto}
  .rt-knowledge-creation .rt-offerings-item {gap:1.25rem}
  .rt-offerings-top {max-width:100%;text-align:center}
  .rt-about-wrapper {display:flex;flex-direction:column;gap:1.5rem}
  .rt-about-wrapper > * {width:100%;max-width:none;min-width:0}
  .rt-about-wrapper .rt-story-card {order:-1;padding:1.5rem}
  .rt-about-item-content {max-width:28rem;margin-inline:auto}
  .rt-about-item-content img {width:100%;height:auto}
  .rt-approach-image-panel {padding-top:0}
  .rt-products .rt-products-wrapper {display:block}
  .rt-products .rt-products-row-1 {display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .rt-products .rt-products-item {width:100%;max-width:none}
  .rt-products .rt-mobile-slider {display:none}
  .rt-button-box,.rt-knowledge-toolkit-button {max-width:100%;min-height:48px;padding:.8rem 1.25rem;gap:.75rem;justify-content:center}
  .rt-button-text-wrapper {min-width:0;flex-shrink:1}
  .rt-button-text {font-size:1rem;line-height:1.35;white-space:normal;text-align:center}
  .rt-button-text.rt-two {width:100%}
  .rt-button-icon-wrapper {flex-shrink:0}
  .rt-button-row {gap:.875rem;align-items:stretch}
  .rt-map-launch-button {width:100%;max-width:100%;white-space:normal;gap:.75rem}
  .rt-map-launch-button .rt-icon-wrap {flex-shrink:0}
  .rt-case-heading-action,.rt-case-heading-action > a {width:100%}
  .rt-case-heading-row {gap:1.25rem}
  .rt-case-grid,.rt-checklist-block {gap:2rem}
  .rt-map-embed-card {border-radius:1rem}
  .rt-map-embed-bar,.rt-map-embed-footer {padding:1rem}
  .rt-map-embed-title {font-size:.8125rem;line-height:1.4}
  .rt-map-status-dot {flex-shrink:0}
  .rt-map-embed-actions {width:100%}
  .rt-map-embed-actions a {justify-content:center}
  .rt-reference-link {white-space:normal;line-height:1.5}
  .rt-output-panels {padding:1.25rem}
  .rt-output-entry h4 {font-size:1.2rem;overflow-wrap:anywhere}
  .rt-team-photo {max-width:100%;height:auto;aspect-ratio:1;object-fit:cover}
  .rt-team-text .rt-sub-text {line-height:1.5}
  .rt-dataset-links {gap:1rem;flex-wrap:wrap}
  .rt-text-field {font-size:16px}
  .network-map {overflow-x:auto;overscroll-behavior-x:contain;border-radius:12px}
  .network-map svg {width:760px;min-width:760px;max-width:none;height:auto;min-height:0}
  .network-mobile-institutions {display:grid;margin-top:1rem;border-top:1px solid #dce3d7}
  .network-mobile-institutions a {display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #dce3d7;color:#17351d;text-decoration:none;min-height:64px}
  .network-mobile-institutions img {width:56px;height:44px;object-fit:contain;flex-shrink:0}
  .network-mobile-institutions a > span:first-of-type {flex:1;min-width:0}
  .network-mobile-institutions strong {display:block;font-size:14px;line-height:1.35;font-weight:600}
  .network-mobile-institutions small {display:block;margin-top:4px;color:#67725f;font-size:12px}
  .network-team-button {margin-top:1.5rem}
  .rt-footer-top {gap:2.5rem;flex-wrap:wrap}
  .rt-footer-top-left,.rt-footer-top-right {max-width:100%;min-width:0}
}
@media (max-width:379px) {
  .rt-container-main {padding-inline:16px}
  .rt-button-box {padding-inline:1rem}
  .rt-button-text {font-size:.9375rem}
  .rt-output-tab {padding:.875rem}
}
.network-mobile-hint {display:none}
@media(max-width:767px) {.network-mobile-hint {display:block;font-size:.8125rem;color:#67725f;text-align:center;margin:0 0 1rem}}

/* Keep footer contact details alongside each other on wider screens. */
.rt-footer-top-right {
  display: block;
  min-width: 0;
}
.rt-footer-top-right > .rt-footer-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: none;
  align-items: start;
}
.rt-footer-top-right .rt-footer-link {
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .rt-footer-top-right > .rt-footer-heading {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.seapeat-footer-copyright {
  margin: 0;
  padding: 1.5rem 0;
  color: #fff;
  font-size: .875rem;
  text-align: center;
}
.seapeat-footer-copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.seapeat-footer-institution {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.seapeat-footer-um-logo {
  box-sizing: content-box;
  flex: 0 0 168px;
  width: 168px;
  height: 56px;
  padding: 10px 14px;
  background-color: #fff;
  border-radius: 8px;
  object-fit: contain;
}

/* Preserve the original layout where the requested items were removed. */
.seapeat-removed-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* Tighten image backgrounds now that their captions are removed. */
.rt-about-item-content:has(> .rt-sub-text.seapeat-removed-placeholder) {
  gap: 0;
  padding: .5rem;
}
.rt-about-item-content > .rt-sub-text.seapeat-removed-placeholder {
  display: none;
}

/* Bring the adjacent Problem and Our Approach cards closer together. */
main > .rt-about-main:has(+ .rt-about-main) {
  padding-bottom: 1rem;
}
main > .rt-about-main + .rt-about-main {
  padding-top: 1rem;
}

.seapeat-toolkit-card {
  flex: 1;
  min-width: 0;
  max-width: 34.8125rem;
}
.seapeat-toolkit-card > .rt-products-item {
  display: block;
  width: 100%;
  max-width: none;
}
.seapeat-toolkit-description {
  padding: 1.25rem 0;
}
.seapeat-toolkit-description h3 {
  margin: 0 0 .75rem;
  color: var(--deep-evergreen);
  font-size: 1.25rem;
  line-height: 1.3;
}
.seapeat-toolkit-description p {
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .seapeat-toolkit-card {max-width: none;width: 100%}
}

/* Align toolkit titles with the left edge of their card content. */
main > .rt-products .rt-products-item-overlay {
  justify-content: flex-start;
  text-align: left;
}

.rt-output-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Keep each institution logo directly beneath its member's portrait. */
.rt-team-portrait {display:flex;flex-direction:column;align-items:center;gap:2rem;flex:0 0 5rem;width:5rem}
.rt-team-institution-logo {display:block;width:100%;height:3.5rem;object-fit:contain}
@media (max-width:479px) {.rt-team-portrait {flex-basis:3.75rem;width:3.75rem}.rt-team-institution-logo {height:3rem}}

.rt-funding-logo {display:block;width:clamp(180px,28vw,300px);max-width:100%;height:auto;object-fit:contain;margin:2rem 0}

.rt-poster-preview {display:block;max-width:1100px;margin:2rem auto 0}.rt-poster-preview img {display:block;width:100%;height:auto;border-radius:.75rem}.rt-poster-preview:focus-visible {outline:2px solid #17351d;outline-offset:6px}

.rt-event-article {max-width:800px;margin-inline:auto}
.rt-event-article h2 {margin:0 0 1.25rem;font-size:clamp(2rem,4vw,3.25rem);line-height:1.15}
.rt-event-article-meta {display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;color:#67725f;font-size:.875rem;padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid #dce3d7}
.rt-event-article p {font-size:1.125rem;line-height:1.8;margin:0 0 1.75rem;color:#526451}
.rt-event-article strong {color:#17351d}

.rt-event-article h3 {font-size:1.375rem;line-height:1.4;margin:2rem 0 .75rem;color:#17351d}
.rt-event-speakers {padding-left:1.25rem;margin:0 0 1.75rem;color:#526451;font-size:1.125rem;line-height:1.8}
.rt-event-speakers li {margin-bottom:.75rem}
.rt-event-details {display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.75rem 1rem;font-size:1.125rem;line-height:1.8;margin:0 0 1.75rem;color:#526451}
.rt-event-details dt {font-weight:600;color:#17351d}.rt-event-details dd {margin:0}

.rt-poster-download-row {max-width:1100px;margin:2rem auto 0;justify-content:flex-start}

.rt-newsletter-article {max-width:960px;margin:auto;color:#526451;font-size:1.0625rem;line-height:1.8;overflow-wrap:anywhere}
.rt-newsletter-article h2 {font-size:clamp(1.5rem,3vw,2.25rem);margin:2.5rem 0 1.25rem;color:#17351d}
.rt-newsletter-article p {margin:0 0 1.25rem}.rt-newsletter-article strong {color:#17351d}
.rt-newsletter-article figure {margin:1.5rem 0}.rt-newsletter-article img {width:100%;height:auto;display:block;border-radius:.75rem}
.rt-newsletter-article hr {border:0;border-top:1px solid #dce3d7;margin:2.5rem 0}
.rt-newsletter-article a:not(.rt-knowledge-toolkit-button):not(.rt-button-box) {color:#17351d;text-decoration:underline;text-underline-offset:3px}
.rt-newsletter-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin:1.5rem 0}.rt-newsletter-columns>div {min-width:0}
.rt-newsletter-navigation {display:flex;flex-wrap:wrap;gap:1rem 2rem;max-width:960px;margin:auto}.rt-newsletter-navigation a {color:#17351d;text-decoration:underline;text-underline-offset:4px}
@media(max-width:767px){.rt-newsletter-columns {grid-template-columns:1fr}.rt-newsletter-article {font-size:1rem}}

/* A consistent opening for the three newsletter releases. */
.rt-newsletter-opening {display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;overflow:hidden;border:1px solid #dce3d7;border-radius:1.25rem;background:#f6f8f3;margin-bottom:3rem}
.rt-newsletter-opening-copy {display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3vw,3rem)}
.rt-newsletter-opening-meta {display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:2.5rem;font-size:.8125rem;color:#67725f}
.rt-newsletter-opening-meta span:first-child {background:#d3f547;color:#17351d;border-radius:2rem;padding:.35rem .85rem;font-weight:600}
.rt-newsletter-opening-copy .rt-sub-text {font-size:.75rem;letter-spacing:.12em;margin-bottom:1rem;color:#526451}
.rt-newsletter-article .rt-newsletter-opening h2 {font-size:clamp(2rem,3.5vw,3rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 1rem;color:#17351d}
.rt-newsletter-article .rt-newsletter-opening-label {margin:0;font-size:1.125rem;color:#526451}
.rt-newsletter-article .rt-newsletter-opening-image {margin:0;min-height:340px}
.rt-newsletter-opening-image a {display:block;height:100%}
.rt-newsletter-article .rt-newsletter-opening-image img {width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:0}
@media(max-width:650px){.rt-newsletter-opening {grid-template-columns:1fr}.rt-newsletter-opening-meta {margin-bottom:1.75rem}.rt-newsletter-article .rt-newsletter-opening-image {min-height:0}.rt-newsletter-article .rt-newsletter-opening-image img {height:auto;min-height:0;aspect-ratio:16/9}.rt-newsletter-opening-copy {padding:1.75rem}}

/* Shared reading rhythm for all newsletter releases. */
.rt-newsletter-article {--newsletter-section-gap:clamp(2rem,4vw,3rem)}
.rt-newsletter-opening {margin-bottom:var(--newsletter-section-gap)}
.rt-newsletter-opening-meta {margin-bottom:1.75rem}
.rt-newsletter-opening-copy .rt-sub-text {margin-bottom:.75rem}
.rt-newsletter-article .rt-newsletter-copy p {margin:0 0 1.25rem}
.rt-newsletter-copy p:last-child {margin-bottom:0}
.rt-newsletter-copy + .rt-newsletter-copy {margin-top:1.5rem}
.rt-newsletter-article > .rt-newsletter-copy:has(h2) {margin-top:var(--newsletter-section-gap);margin-bottom:1.5rem}
.rt-newsletter-article > .rt-newsletter-copy:has(h2) h2 {margin:0;line-height:1.25}
.rt-newsletter-article > .rt-newsletter-copy:has(h2) + * {margin-top:0}
.rt-newsletter-article .rt-newsletter-columns {gap:2rem;margin:0}
.rt-newsletter-columns > div {display:flex;flex-direction:column;align-items:stretch;gap:1.25rem}
.rt-newsletter-columns > div > figure,.rt-newsletter-columns > div > .rt-newsletter-copy,.rt-newsletter-columns > div > .rt-button-row {margin:0}
.rt-newsletter-article > .rt-button-row {margin:1.5rem 0 2.5rem}
.rt-newsletter-article > .rt-button-row + .rt-newsletter-copy {margin-top:var(--newsletter-section-gap)}
.rt-newsletter-article hr {margin:var(--newsletter-section-gap) 0}
.rt-newsletter-article hr + .rt-newsletter-copy {margin-top:0}
.rt-newsletter-article br + br {display:none}
@media(max-width:767px){.rt-newsletter-article .rt-newsletter-columns {gap:2rem}.rt-newsletter-opening-meta {gap:.5rem .75rem}.rt-newsletter-article > .rt-button-row {margin-bottom:2rem}}

/* Newsletter type hierarchy: masthead, sections, stories, body, metadata. */
.rt-newsletter-article {font-size:1.0625rem;line-height:1.75}
.rt-newsletter-article .rt-newsletter-opening h2 {font-size:clamp(2rem,3.5vw,3rem);font-weight:600;line-height:1.12}
.rt-newsletter-article .rt-newsletter-section-title {font-size:clamp(1.625rem,2.6vw,2.125rem);font-weight:600;line-height:1.2;letter-spacing:-.025em;color:#17351d}
.rt-newsletter-article .rt-newsletter-story-title {font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:#17351d;margin:0 0 1rem}
.rt-newsletter-article .rt-newsletter-byline {font-size:.875rem;line-height:1.6;color:#67725f;margin-bottom:1.25rem}
.rt-newsletter-opening-meta {font-size:.8125rem;line-height:1.5}
.rt-newsletter-opening-copy .rt-sub-text {font-size:.75rem;line-height:1.5}
.rt-newsletter-article .rt-newsletter-opening-label {font-size:1.125rem;line-height:1.5}
@media(max-width:650px){.rt-newsletter-article {font-size:1rem;line-height:1.75}}
.rt-output-entry--cover {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
  width: 100%;
  box-sizing: border-box;
}
.rt-output-entry--cover > .rt-publication-cover {
  display: block;
  width: 16rem;
  min-width: 0;
  max-width: 16rem;
  height: 22.667rem;
  margin: 0;
  background: #fff;
}
.rt-output-entry--cover > .rt-publication-cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.rt-output-entry--cover > .rt-publication-body {
  width: 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .rt-output-entry--cover { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; }
  .rt-output-entry--cover > .rt-publication-cover { width: 11rem; max-width: 11rem; height: 15.583rem; }
}
@media (max-width: 600px) {
  .rt-output-entry--cover { grid-template-columns: minmax(0, 1fr); }
}

/* Galleries marquee (About page) */
.rt-gallery-section h2 { margin-bottom: 2.5rem; text-align: center; }
.rt-gallery-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rt-gallery-track { display: flex; gap: 1.25rem; width: max-content; animation: rt-gallery-scroll 70s linear infinite; will-change: transform; }
.rt-gallery-marquee:hover .rt-gallery-track { animation-play-state: paused; }
.rt-gallery-item { margin: 0; flex: 0 0 auto; height: 22rem; border-radius: .75rem; overflow: hidden; background: #e8ece6; }
.rt-gallery-item img { display: block; height: 100%; width: auto; object-fit: cover; transition: transform .6s ease; }
.rt-gallery-item:hover img { transform: scale(1.04); }
@keyframes rt-gallery-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(-50% - .625rem),0,0); } }
@media (max-width: 767px) { .rt-gallery-item { height: 14rem; } .rt-gallery-track { gap: .75rem; animation-duration: 50s; } @keyframes rt-gallery-scroll { to { transform: translate3d(calc(-50% - .375rem),0,0); } } }
@media (prefers-reduced-motion: reduce) { .rt-gallery-track { animation: none; } .rt-gallery-marquee { overflow-x: auto; } }
.rt-gallery-section .rt-container-main { display: flex; flex-direction: column; align-items: center; }
.rt-gallery-section .rt-overflow-hidden { display: flex; justify-content: center; width: 100%; text-align: center; }
.rt-gallery-section h2#gallery-heading { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: auto; }

/* Map launcher: static map preview on the right */
.rt-map-launch-grid::before, .rt-map-launch-grid::after { content: none !important; display: none !important; }
.rt-map-launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3rem; align-items: center; }
.rt-map-launch-thumb { margin: 0; border-radius: 1rem; overflow: hidden; border: 1px solid #1b2a1f22; box-shadow: 0 10px 30px #0000001a; pointer-events: none; }
.rt-map-launch-thumb img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .rt-map-launch-grid { grid-template-columns: 1fr; gap: 2rem; } }
.rt-map-launch-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rt-map-launch-copy > :last-child { margin-bottom: 0; }
.rt-map-launch-copy .rt-sub-text-gap { margin-top: 0; }
.rt-map-launch-thumb { justify-self: end; width: 100%; max-width: 34rem; aspect-ratio: 960 / 500; border-radius: 1.25rem; border: 1px solid #1b2a1f1f; box-shadow: 0 18px 40px -18px #0b2a1440; }
.rt-map-launch-thumb img { height: 100%; object-fit: cover; }
@media (max-width: 767px) { .rt-map-launch-grid { grid-template-columns: 1fr; } .rt-map-launch-thumb { justify-self: stretch; max-width: none; } }
.rt-map-launch-grid { display: block; }
.rt-map-launch-thumb { justify-self: auto; width: 100%; max-width: 40rem; margin: 0 0 1.75rem; }
.rt-map-launch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.rt-map-launch-row .rt-map-launch-thumb { flex: 0 1 34rem; max-width: 34rem; margin: 0; }
@media (max-width: 767px) { .rt-map-launch-row { flex-direction: column; } .rt-map-launch-row .rt-map-launch-thumb { flex-basis: auto; max-width: none; } }
.rt-map-launch-thumb { aspect-ratio: 1400 / 683; }
.rt-map-launch-thumb { aspect-ratio: auto !important; height: auto !important; } .rt-map-launch-thumb img { width: 100% !important; height: auto !important; object-fit: contain !important; }

/* Funding: APN logo beside the text, under the title */
.rt-funding-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); }
.rt-funding-copy { flex: 1 1 0; min-width: 0; }
.rt-funding-row .rt-funding-logo { flex: 0 0 auto; width: clamp(180px, 24vw, 300px); margin: 0; }
@media (max-width: 767px) { .rt-funding-row { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; } }

/* Publisher logos on commentary entries */
.rt-output-publisher-logo { display: flex; align-items: center; height: 2.75rem; margin-bottom: 1.5rem; }
.rt-output-publisher-logo img { display: block; height: 100%; width: auto; max-width: 14rem; object-fit: contain; }
.rt-recording-thumbnail img { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
/* Map launcher final: copy left, map right, map top aligned with title */
.rt-map-launch-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.rt-map-launch-grid > .rt-map-launch-thumb { justify-self: end; width: 100%; max-width: 40rem; margin: 2.75rem 0 0; }
@media (max-width: 991px) { .rt-map-launch-grid { grid-template-columns: 1fr; } .rt-map-launch-grid > .rt-map-launch-thumb { margin-top: 2rem; max-width: none; } }

/* Multilingual community toolkit invitation over the hero video. */
.rt-hero-v1-content:has(.seapeat-hero-toolkit-card) .rt-hero-v1-left {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.seapeat-hero-toolkit-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: #fff;
  text-decoration: none;
  background: rgba(10, 39, 16, .6);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
  transition: background-color .2s, border-color .2s;
}
.seapeat-hero-toolkit-card:hover {
  color: #fff;
  background-color: rgba(10, 39, 16, .78);
  border-color: rgba(255, 255, 255, .6);
}
.seapeat-hero-toolkit-card:focus-visible {
  outline: 3px solid #d9edb5;
  outline-offset: 5px;
}
.seapeat-hero-toolkit-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  padding-bottom: .875rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.seapeat-hero-toolkit-language {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.6;
}
.seapeat-hero-toolkit-language strong {
  font-size: .75rem;
  line-height: 2;
  color: #d9edb5;
  letter-spacing: .06em;
}
.rt-hero-v1-content:has(.seapeat-hero-toolkit-card) .rt-hero-v1-left-buttom {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .rt-hero-v1-content:has(.seapeat-hero-toolkit-card) .rt-hero-v1-left {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;
  }
  .seapeat-hero-toolkit-card { max-width: 34rem; }
}

.seapeat-hero-toolkit-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  filter: invert(1);
}

.rt-map-intro { margin: 0 0 2rem; line-height: 1.75; }

.seapeat-footer-video-credit { margin: .5rem 0 0; padding-bottom: 1.5rem; color: rgba(255, 255, 255, .7); font-size: .8125rem; line-height: 1.6; text-align: center; }

/* Hero invitation shares the site's button sweep and arrow animation. */
.seapeat-hero-toolkit-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 2.5rem;
  background: rgba(10, 39, 16, .72);
  border-color: rgba(211, 245, 71, .35);
}
.seapeat-hero-toolkit-card > .rt-button-bg {
  z-index: -1;
  background: rgba(211, 245, 71, .12);
}
.seapeat-hero-toolkit-card:hover,
.seapeat-hero-toolkit-card:focus-visible {
  background-color: rgba(10, 39, 16, .8);
  border-color: var(--light-lime-green, #d3f547);
}
.seapeat-hero-toolkit-card .rt-button-text {
  color: #fff;
  font-size: inherit;
  line-height: inherit;
}
.seapeat-hero-toolkit-card .rt-button-icon-wrapper {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.seapeat-hero-toolkit-card .rt-button-icon { filter: invert(1); }
.seapeat-hero-toolkit-language strong {
  color: var(--light-lime-green, #d3f547);
}
.seapeat-hero-toolkit-title { border-color: rgba(211, 245, 71, .25); }

/* Language choices accompany each translated material. */
.seapeat-language-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.seapeat-language-links a:not(.rt-button-box) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid #17351d33; border-radius: 999px; color: #17351d; background: #f5f7f2; font-size: .875rem; line-height: 1.4; text-decoration: none; transition: background-color .2s, border-color .2s; }
.seapeat-language-links a:not(.rt-button-box):hover, .seapeat-language-links a:not(.rt-button-box)[aria-current="page"] { background: var(--light-lime-green, #d3f547); border-color: #17351d; }
.seapeat-language-links a:focus-visible { outline: 2px solid #17351d; outline-offset: 3px; }
.rt-output-entry--cover > .seapeat-language-links { grid-column: 2; margin-top: 0; }
.seapeat-resource-with-languages { min-width: 0; display: flex; flex-direction: column; }
.seapeat-resource-with-languages > .rt-card { flex: 1; }
.seapeat-translation-downloads { margin: 1.5rem 0 2rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.seapeat-policy-preview { display: block; width: 100%; height: 80vh; min-height: 30rem; border: 1px solid #17351d26; border-radius: 1rem; background: #f5f7f2; }
.seapeat-translated-article { max-width: 54rem; margin: 0 auto 3rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .rt-output-entry--cover > .seapeat-language-links { grid-column: 1; } .seapeat-language-links a:not(.rt-button-box) { font-size: .8125rem; } }
.rt-hero-v4-top > .seapeat-language-links { justify-content: center; margin: 1.5rem auto 0; }
.rt-arrow-icon { width: .588235rem; height: auto; flex-shrink: 0; }

.seapeat-language-links { gap: .75rem; }
.seapeat-language-links .rt-button-box { padding: .6rem 1.5rem .5rem; }
.rt-button-row:has(> .rt-reference-link) { align-items: center; }
.rt-button-row:has(> .rt-reference-link) > .rt-reference-link { align-self: center; }
.seapeat-footer-copyright:has(+ .seapeat-footer-video-credit) { padding-bottom: 0; }