/* ==========================================================================
   Additions on top of the design system, for behaviour the static
   prototype did not have: a consent choice, the article template, and the
   contact form's submitted state.
   ========================================================================== */

/* ---------- Consent ----------
   The prototype only offered "Accept all". Rejecting has to be exactly as
   easy as accepting, so the pair sits on one row in the same visual key. */
.cookies__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.cookies__reject {
  align-self: flex-start;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-green-50);
  text-decoration: underline;
  text-underline-position: from-font;
}

.cookies__reject:hover {
  color: var(--color-forest);
}

.cookies__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ---------- Article ----------
   The article page reuses the design's own detail template (.dhero,
   .report, .data-table, .home-cta). These rules only cover what the
   rich-text editor emits that the static prototype never had: real
   heading levels, lists, generic tables and the two custom blocks. */
/* RichText renders one wrapper div, so the section rhythm the static
   template got from .report__sec has to live inside it. */
.report__body .payload-richtext {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.report__body .payload-richtext > h2 {
  margin-top: var(--sp-40);
}

.report__body .payload-richtext > h3 {
  margin-top: var(--sp-24);
}

.report__body .payload-richtext > :first-child {
  margin-top: 0;
}

/* The article's opening paragraph carries the lead treatment, so the intro
   lives in the body rather than being repeated above it. */
.report__body .payload-richtext > p:first-of-type {
  max-width: 854px;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-night);
}

.report__body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-night);
}

.report__body h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.28px;
  color: var(--color-night);
}

.report__body ul,
.report__body ol {
  max-width: 872px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.report__body ul { list-style: disc; }
.report__body ol { list-style: decimal; }

.report__body li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.report__body a {
  color: var(--color-night);
  text-decoration: underline;
  text-underline-position: from-font;
}

.report__body hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--sp-16) 0;
}

/* Tables typed in the editor get the design's data-table treatment. */
.report__body table {
  width: 100%;
  background: var(--color-blue-5);
  border-collapse: separate;
  border-spacing: 0 4px;
  font-family: var(--font-body);
  padding: var(--sp-16);
}

.report__body th,
.report__body td {
  text-align: left;
  padding-right: var(--sp-32);
}

.report__body th {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-night);
  opacity: 0.5;
}

.report__body td {
  border-top: 1px solid var(--color-blue-10);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.2px;
  color: var(--color-night);
}

/* Pull quote — the large serif statement between sections. */
.report__body .pullquote {
  margin: var(--sp-16) 0;
}

.report__body .pullquote__text {
  max-width: 872px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--color-night);
}

.report__body .pullquote__attribution {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-blue-50);
}

/* Key numbers — the dark panel in the left column. */
.report .keynumbers {
  background: var(--color-night);
  color: var(--color-almost-white);
}

.report .keynumbers__title {
  padding: var(--sp-4) var(--sp-16);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 20px;
  color: var(--color-gray-40);
  border-bottom: 1px solid var(--color-gray-10);
}

.report .keynumbers__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--color-gray-10);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.report .keynumbers__row:last-child { border-bottom: 0; }
.report .keynumbers__label { color: var(--color-gray-40); }
.report .keynumbers__change { color: var(--color-gray-20); min-width: 56px; text-align: right; }

.report__body .article-figure {
  margin: var(--sp-16) 0;
}

.report__body .article-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.report__body .article-figure figcaption {
  margin-top: var(--sp-12);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-blue-40);
}

.article-share {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-24);
  border-top: var(--hairline);
}

.article-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-night);
  border: var(--hairline);
}

.report__meta .report .keynumbers { margin-bottom: var(--sp-24); }

/* ---------- Fund pages ----------
   Values transcribed from the Figma frame: the facts panel is a 28px
   night-coloured header over a --color-blue-5 body, rows 32px on a 187/202
   label/value split. */
/* The Figma frame gives the fund hero 600px, shorter than the 736px the
   design system's .dhero defaults to. */
.dhero--fund {
  min-height: 600px;
}

.fund .fund__inner {
  align-items: start;
}

.fund__aside {
  padding-right: var(--sp-32);
}

.fund__main {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-left: var(--sp-16);
}

.fund__block h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.34px;
  color: var(--color-night);
}

.report .fund__lead {
  max-width: 697px;
  margin-top: var(--sp-24);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.report .fundfacts {
  max-width: 364px;
}

.report .fundfacts__title {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-16);
  background-color: var(--color-night);
  border-bottom: 1px solid var(--color-blue-10);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-almost-white);
}

.report .fundfacts__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16);
  background-color: var(--color-blue-5);
}

.report .fundfacts__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: 6px 0;
  border-top: 1px solid rgba(23, 34, 58, 0.08);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.report .fundfacts__row:first-child {
  border-top: 0;
}

.report .fundfacts__label {
  flex: 0 0 187px;
  color: var(--color-blue-50);
}

.report .fundfacts__value {
  flex: 1 1 auto;
  color: var(--color-night);
}

/* Service providers — one column per row entered in the CMS. */
.report .svc {
  margin-top: var(--sp-32);
  background-color: var(--color-blue-5);
  padding: var(--sp-16);
}

.report .svc__row {
  display: grid;
  grid-template-columns: repeat(var(--svc-columns, 3), minmax(0, 1fr));
  gap: var(--sp-32);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-night);
}

.report .svc__row--head {
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-blue-10);
  color: var(--color-blue-50);
}

.report .svc__row:not(.svc__row--head) {
  padding-top: var(--sp-16);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.2px;
}

.report .histdata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-32);
  margin-top: var(--sp-32);
}

.report .histdata__item h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  color: var(--color-night);
}

.report .histdata__item p {
  margin-top: var(--sp-8);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.report .histdata__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-blue-40);
}

.report .docaccess {
  margin-top: var(--sp-32);
  display: flex;
  flex-direction: column;
}

.report .docaccess__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--color-night);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-night);
}

.report .docaccess__row:hover {
  color: var(--color-blue-50);
}

/* Closing band: left-aligned into the 4/8 split, artwork bleeding off the
   bottom-left rather than centred behind the text. */
.home-cta--fund {
  min-height: 442px;
  padding: 0 0 120px;
  align-items: stretch;
  justify-content: flex-end;
  text-align: left;
  background-color: var(--color-night);
}

/* The plate is the design's own vector — transparent, so it sits on the
   navy and the forest band alike. The PNG version has a navy ground baked
   in, which showed as a hard blue box on anything else. It bleeds off the
   left corner the way the frame places it. */
.home-cta--fund .home-cta__graphic {
  top: auto;
  bottom: -150px;
  left: -230px;
  transform: rotate(180deg);
  width: 640px;
  height: auto;
  opacity: 0.65;
}

.home-cta--fund .home-cta__inner {
  position: relative;
  z-index: 1;
}

.home-cta--fund .home-cta__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
}

.home-cta--fund .home-cta__title {
  font-size: 84px;
}

.home-cta--fund .home-cta__buttons {
  margin-top: var(--sp-24);
}

@media (max-width: 992px) {
  .fund__aside {
    padding-right: 0;
    margin-bottom: var(--sp-40);
  }

  .fund__main {
    padding-left: 0;
  }

  .report .fundfacts {
    max-width: none;
  }

  .report .histdata {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-cta--fund .home-cta__title {
    font-size: 44px;
    letter-spacing: -0.66px;
  }

  .home-cta--fund .home-cta__graphic {
    bottom: -80px;
    width: 420px;
    opacity: 0.5;
  }
}

/* ---------- Article data tables & downloads ---------- */
/* The design's own .data-table already covers the table itself; these add the
   caption above it and the spacing inside the rich-text flow. */
.report__body .data-figure {
  margin: var(--sp-8) 0;
}

.report__body .data-figure__title {
  margin-bottom: var(--sp-12);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--color-night);
}

.report__body .data-table-wrap {
  overflow-x: auto;
}

.report__body .docaccess--article {
  margin-top: var(--sp-40);
}

/* A cover image behind the article hero, dimmed so the headline still reads. */
.dhero--art .dhero__bg {
  opacity: 0.35;
  object-fit: cover;
  width: 100%;
  height: 100%;
  left: 0;
}

/* ---------- Appearance pages ----------
   An "In the news" or "Videos" entry gets its own page: our note on the
   piece, the player where the host allows embedding, then the way out. */
.report__body .appearance-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--sp-32);
  background: var(--color-blue-5);
}

.report__body .appearance-embed--audio {
  aspect-ratio: auto;
  height: 232px;
  background: none;
}

.report__body .appearance-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.report__body .appearance-poster {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--sp-32);
}

/* ---------- Lending & Borrowing ----------
   The page reuses the design's own sections where it can — the hero and
   stat line from Home, the four-column strip from How We Invest, the
   closing band from the fund pages. These rules cover what is new to it.

   The frame is drawn entirely on the green side of the palette: forest for
   dark text, green/50 for muted, green/10 for hairlines, green/5 for the
   panel grounds. The shared sections all reach for the navy tokens, so
   those are remapped for this page rather than every rule being restated. */
main:has(> .hero--financing) {
  /* Set explicitly as well: text that merely inherits picks up body's
     already-computed navy, which the token remap cannot reach. */
  color: #173a2c;
  --color-night: #173a2c;
  --color-blue-50: rgba(23, 58, 44, 0.5);
  --color-blue-40: rgba(23, 58, 44, 0.4);
  --color-blue-10: rgba(23, 58, 44, 0.1);
  --color-blue-5: rgba(23, 58, 44, 0.05);
}

.hero--financing {
  min-height: 800px;
  background-color: var(--color-forest);
}

.hero--financing .hero__video {
  object-position: right top;
  opacity: 0.85;
}

.hero--financing .hero__cta {
  align-self: flex-start;
}

.desk-section__lead {
  max-width: 640px;
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

/* Two columns rather than the four How We Invest uses. */
.desk-section__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-32);
}

/* Three ways to access credit — a heading pair, then one row per route. */
.credit {
  background-color: var(--color-almost-white);
  padding: var(--sp-120) 0;
}

.credit__head {
  align-items: start;
  margin-bottom: var(--sp-64);
}

.credit__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.72px;
  color: var(--color-night);
}

.credit__intro {
  max-width: 420px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.credit-row {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  gap: var(--sp-32);
  padding: 48px var(--sp-32);
  background-color: var(--color-blue-5);
  border-top: var(--hairline);
}

.credit-row:last-child {
  border-bottom: var(--hairline);
}

.credit-row__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-night);
}

.credit-row__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.credit-row__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  list-style: disc;
  padding-left: 20px;
}

.credit-row__points li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-night);
}

/* Breaker — the brand band, with the mark above the line and a note under. */
.financing-breaker {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  /* The Company brand band is night; this one is forest, per the frame. */
  background-color: var(--color-forest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-32) var(--container-pad);
  text-align: center;
}

/* Same artwork, and the same treatment, as the cycles band on the home
   page: one copy covering the band.

   This was a 130px repeat of card-maze.svg, which rendered as flat green.
   That file strokes its line with var(--stroke-0, #17223A) and a CSS
   background image is an isolated document — the custom property does not
   resolve in it, so the line fell back to navy, which at 0.14 opacity over
   forest is invisible. Tiled down to 130px the strokes were sub-pixel
   anyway. */
.financing-breaker__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.financing-breaker .brandband__title {
  position: relative;
  z-index: 1;
  margin: auto 0;
}

.financing-breaker__brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--color-almost-white);
}

.financing-breaker__brand .logo__mark {
  width: 20px;
  height: 20px;
  color: var(--color-almost-white);
}

/* .logo__word carries its own colour, so it has to be set here or the
   wordmark comes out navy on the green band. */
.financing-breaker__brand .logo__word {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-almost-white);
}

.financing-breaker__sub {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-gray-40);
}

/* Why Hilbert — centred intro over a three-across card grid. */
.verify {
  background-color: var(--color-almost-white);
  padding: var(--sp-120) 0;
}

.verify__head {
  max-width: 700px;
  margin: 0 auto var(--sp-64);
  text-align: center;
}

.verify__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.72px;
  color: var(--color-night);
}

.verify__head p {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.verify__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.verify-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-height: 300px;
  padding: var(--sp-24);
  background-color: var(--color-blue-5);
}

.verify-card__label {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-blue-40);
}

.verify-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.24px;
  color: var(--color-night);
}

.verify-card__desc {
  max-width: 320px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-blue-50);
}

.verify-card__graphic {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  opacity: 0.35;
  pointer-events: none;
}

.verify-card__num {
  position: relative;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-blue-40);
}

/* Desk at a glance — value over label, two to a row. */
.glance {
  background-color: var(--color-light-green);
  padding: var(--sp-120) 0;
}

.glance__inner {
  align-items: start;
}

.glance__main h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.72px;
  color: var(--color-night);
}

.glance__note {
  max-width: 560px;
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-green-50);
}

.glance__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-40);
}

.glance-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-64);
  min-height: 260px;
  padding: var(--sp-40) var(--sp-32) var(--sp-32) 0;
  border-bottom: 1px solid var(--color-green-10);
}

.glance-item__value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.28px;
  color: var(--color-night);
}

.glance-item__label {
  margin-top: var(--sp-12);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-green-50);
}

.glance__cta {
  margin-top: var(--sp-40);
  max-width: 640px;
}

/* The footer takes its colour from the section above it. main.js does that
   after hydration; matching it here means the server already paints the
   right one, so the footer never flashes the wrong colour. */
main:has(> section:last-child.home-cta--forest) + .site-footer {
  background-color: var(--color-forest);
  color: var(--color-almost-white);
}

main:has(> section:last-child.home-cta--forest) + .site-footer .logo--light,
main:has(> section:last-child.home-cta--forest) + .site-footer .logo--light .logo__word {
  color: var(--color-almost-white);
}

/* The closing band is the fund one in forest rather than night. */
.home-cta--forest {
  min-height: 560px;
  background-color: var(--color-forest);
}

.home-cta--fund .home-cta__text {
  max-width: 504px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-almost-white);
}

.home-cta--fund .home-cta__disclaimer {
  position: relative;
  z-index: 1;
  max-width: 466px;
  margin-top: var(--sp-40);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-gray-60);
}

@media (max-width: 992px) {
  .desk-section__grid,
  .verify__grid,
  .glance__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .credit-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .credit__head h2,
  .verify__head h2,
  .glance__main h2 {
    font-size: 34px;
    letter-spacing: -0.4px;
  }
}

/* ---------- Insights research rails ---------- */
.weekly-rail__intro,
.research-rail__head p {
  max-width: 560px;
  margin-top: var(--sp-12);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.research-rail__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.research-rail__more {
  display: inline-block;
  margin-top: var(--sp-40);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-night);
  text-decoration: underline;
  text-underline-position: from-font;
}

.research-rail .media-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Hero stat line, stepped ----------
   The hero holds at the top of the viewport for a stretch, and the scroll
   through that stretch walks the stat line left to right. When the last
   figure is lit the hero releases and the page carries on. HeroScroll adds
   `hero-pin--active`, so with no JavaScript nothing here applies and the
   hero behaves exactly as it did. */
.hero-pin {
  position: relative;
}

.hero-pin--active {
  /* One viewport to read the hero, then a stretch per figure after the first. */
  height: calc(100vh + (var(--stat-steps, 4) - 1) * 42vh);
}

.hero-pin--active > .hero {
  position: sticky;
  /* clears the sticky header */
  top: 64px;
  height: calc(100vh - 64px);
  min-height: 560px;
}

/* Everything dims; the current figure is the one lit, and the rule beneath
   it travels along instead of staying under the first. */
.hero-pin--active .hero-statline__item {
  padding-bottom: 16px;
  border-bottom: 1px solid transparent;
  opacity: 0.4;
  transition: opacity 0.4s ease, border-color 0.4s ease;
}

.hero-pin--active .hero-statline__item.is-active {
  opacity: 1;
  border-bottom-color: var(--color-gray-60);
}

/* ---------- Partners marquee ----------
   The prototype's strip was drag-scrolled and sat still. This runs it as a
   continuous loop: the set is rendered twice and the track travels exactly
   half its own width, so the second copy lands where the first began and
   the seam is invisible. */
.partners__row--marquee {
  overflow: hidden;
  cursor: default;
  /* the marquee handles its own overflow; the drag-scroll rules would fight it */
  overflow-x: hidden;
  margin-right: calc(-1 * var(--container-pad));
  padding-right: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 120px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 120px),
    transparent 100%
  );
}

.partners__marquee {
  display: flex;
  align-items: center;
  gap: 132px;
  width: max-content;
  animation: partners-scroll 45s linear infinite;
}

.partners__set {
  display: flex;
  align-items: center;
  gap: 132px;
}

/* Every slot is centred here — the design's flush-left first slot was for a
   static row and would put a wider gap at the loop's seam. */
.partners__row--marquee .partners__logo:first-child {
  justify-content: center;
}

.partners__row--marquee:hover .partners__marquee,
.partners__row--marquee:focus-within .partners__marquee {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* half the track is one full set, plus the gap that separates the two */
    transform: translate3d(calc(-50% - 66px), 0, 0);
  }
}

/* Someone who has asked for less motion gets the strip standing still,
   scrollable by hand. */
@media (prefers-reduced-motion: reduce) {
  .partners__marquee {
    animation: none;
  }

  .partners__row--marquee {
    overflow-x: auto;
  }
}

/* ---------- Mega menu ----------
   The panel keeps the prototype's chrome — 640px, centred, the section
   label across the top, the grey item hover with its arrow, the footer
   link — and gains the grouped structure: each cell of the two-up grid is
   a group heading over its own links. */
.dropdown--groups .dropdown__grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8) 1px;
  padding: var(--sp-8) var(--sp-16) var(--sp-8) 0;
}

.dropdown-group {
  display: flex;
  flex-direction: column;
}

.dropdown-group__title {
  display: block;
  padding: var(--sp-12) var(--sp-16) var(--sp-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-forest);
  opacity: 0.55;
}

/* A group that is a link in its own right reads as a live item, so it gets
   the same hover the entries below it have. */
.dropdown-group__title--link {
  opacity: 1;
  transition: background-color 0.2s ease;
}

.dropdown-group__title--link:hover {
  background-color: var(--color-green-5);
}

/* The entries reuse .dropdown__item; only the padding tightens, since a
   group heading now carries the space above them. */
.dropdown--groups .dropdown__item {
  padding: 8px var(--sp-16);
}

/* The design reveals the arrow on hover. An off-site marker is information
   rather than decoration, so that one stays visible. */
.dropdown--groups .dropdown__item[target='_blank'] .dropdown__item-title span {
  opacity: 0.5;
}

/* ---------- Contact form states ---------- */
.enquiry-form__status {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-40);
}

.enquiry-form__status--error {
  color: var(--color-error);
}

.enquiry-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Capability card curve ----------
   The Hilbert curve on the three cards below the fold. It used to be a flat
   <img>; it is now inlined as two copies of the same path (see
   components/CurveGraphic.tsx) so the hover can draw along the line instead
   of fading a picture in.

   The track keeps exactly the values the artwork shipped with, including
   the darken blend that sat on the <img>, so the resting card is unchanged.
   The lit copy rides on top: stroke-dashoffset walks from 1 to 0, which
   with pathLength="1" means "hidden" to "fully drawn", and the line grows
   out from one end of the curve to the other. */
.cap3-card__graphic.curve {
  /* the blend now belongs to the track, so the lit line is not darkened
     into the card underneath it */
  mix-blend-mode: normal;
  overflow: visible;
}

.curve__track {
  stroke: #17223a;
  stroke-opacity: 0.5;
  stroke-width: 0.345703;
  stroke-linecap: round;
  stroke-linejoin: round;
  mix-blend-mode: darken;
}

/* The dash pattern is a single growing segment parked at the point where
   the curve enters the card: dashoffset pushes the pattern's start to
   --curve-start, and the dash itself grows from nothing to --curve-span.
   The 2 is the gap, wide enough that the pattern never repeats.
   CurveDraw.tsx measures both; the fallbacks draw the whole path, which is
   what happens with JavaScript off. */
.curve__lit {
  stroke: var(--color-forest);
  /* Exactly the track's hairline width: the line lights up by going from
     navy at half opacity to full-strength forest, not by getting fatter.
     Nothing about its weight changes as it draws. */
  stroke-width: 0.345703;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 2;
  stroke-dashoffset: calc(-1 * var(--curve-start, 0));
  opacity: 0;
  /* Leaving is a retreat back down the same line, quicker than the draw —
     a long unwind reads as the card being slow to let go. */
  transition: stroke-dasharray 0.45s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease 0.15s;
}

/* A near-steady curve: a strong ease would sprint the first half of the
   line and crawl the rest, which does not read as drawing. */
@media (hover: hover) {
  .cap3-card:hover .curve__lit {
    stroke-dasharray: var(--curve-span, 1) 2;
    opacity: 1;
    transition: stroke-dasharray 0.95s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s ease;
  }
}

/* Keyboard focus draws it too, and is not gated on a pointer. */
.cap3-card:focus-visible .curve__lit {
  stroke-dasharray: var(--curve-span, 1) 2;
  opacity: 1;
  transition: stroke-dasharray 0.95s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s ease;
}

/* Without the drawing, the line is simply there or not. Listed against the
   same selectors as the hover state so it actually wins on specificity. */
@media (prefers-reduced-motion: reduce) {
  .curve__lit,
  .cap3-card:hover .curve__lit,
  .cap3-card:focus-visible .curve__lit {
    stroke-dasharray: var(--curve-span, 1) 2;
    transition: opacity 0.2s ease;
  }
}

/* ---------- Form selects ----------
   The enquiry form sits on a dark ground, so the closed control draws its
   text almost-white. The options are a different surface: the native popup
   is painted by the OS, which on Windows and most Linux builds is white —
   inheriting the control's colour there put white text on white ground and
   the choices could not be read.

   Both sides are therefore stated outright rather than inherited, and
   color-scheme keeps the browser from re-theming the popup underneath us.
   The placeholder row is dimmed so the real choices lead. */
.enquiry-form select.field__control {
  color-scheme: light;
}

.enquiry-form select.field__control option {
  color: var(--color-night);
  background-color: var(--color-almost-white);
}

.enquiry-form select.field__control option[value=""] {
  color: var(--color-blue-40);
}

/* Until something is chosen the control shows its placeholder, which should
   read as a placeholder rather than as an answer. */
.enquiry-form select.field__control:has(option[value=""]:checked) {
  color: var(--color-gray-40);
}

/* ---------- Newsletter confirm / unsubscribe ----------
   The two pages the mailed links open. They carry one decision each, so
   they get the article measure and nothing else on the page competing with
   the button. */
.token-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--sp-120) 0;
  background: var(--color-almost-white);
}

.token-page__inner { max-width: 620px; }

.token-page__label {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-blue-50);
}

.token-page__title {
  margin-top: var(--sp-16);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.48px;
  color: var(--color-night);
}

.token-page__text {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-blue-50);
}

.token-action { margin-top: var(--sp-32); }

.token-action__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.28px;
  color: var(--color-night);
}

.token-action__text {
  margin: var(--sp-8) 0 var(--sp-24) 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-blue-50);
}

.token-action__error {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #b4462f;
}

@media (max-width: 767px) {
  .token-page__title { font-size: 34px; letter-spacing: -0.34px; }
}

/* The signup says what it is signing you up for, and the button no longer
   claims you are subscribed when all that has happened is an email going
   out for you to confirm. */
.signup__consent {
  margin-top: var(--sp-12);
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-40);
}

.signup__status {
  margin-top: var(--sp-12);
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-almost-white);
}

/* ---------- Cover art in the thumbnail slots ----------
   The generated covers are 874x352 — far wider than any slot they land in.
   Each slot therefore states how it crops, rather than leaving the image to
   size itself, so a cover of any proportion fills its box and is centred.

   `object-fit: cover` crops rather than distorts. These covers are fields
   of marks with no focal point, so cropping costs nothing and stretching
   would be visible immediately. */

/* The home page feature panel. The rule underneath sizes the image to a
   fixed 1030px square and contains it, which is right for the square maze
   the CMS art uses and wrong for anything else: a 2.5:1 cover letterboxes
   into a band across the middle with the panel ground above and below it. */
.newsmedia__feature img.newsmedia__feature-cover {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center;
}

/* The Insights Featured panel, same story as the home page's: the rule
   underneath sizes the art to a fixed 1030px square placed off-centre,
   which is the treatment the maze motif wants and wrong for a cover. */
.featured .news__featured img.news__featured-cover {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

/* The video rail had no rule for its image at all — the slot sets an aspect
   ratio and the image was left to take its intrinsic size inside it. */
.video-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- Strategy performance ----------
   The charts are inline SVG rather than a library: two line series and a
   pair of axes do not need a runtime, and the figures should be in the HTML
   where a reader without JavaScript still gets them. */
.perf {
  background: var(--color-almost-white);
  padding: var(--sp-120) 0;
  border-top: 1px solid var(--color-blue-10);
}

.perf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-24);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-blue-10);
}

.perf__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-night);
}

.perf__asof {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-blue-50);
  white-space: nowrap;
}

.perf__charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-32);
  margin-top: var(--sp-40);
}

.perf-chart {
  margin: 0;
  min-width: 0;
}

.perf-chart__title {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-night);
}

.perf-chart__title span {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-blue-40);
}

.perf-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--sp-12);
  overflow: visible;
}

.perf-chart__grid {
  stroke: var(--color-blue-10);
  stroke-width: 1;
}

.perf-chart__tick {
  fill: var(--color-blue-40);
  font-family: var(--font-body);
  font-size: 11px;
}

.perf-chart__line {
  fill: none;
  stroke: var(--color-night);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.perf-chart__area {
  fill: var(--color-blue-5);
  stroke: none;
}

/* Eight figures in four columns, so both rows are full. auto-fit was
   leaving a ragged tail: the leftover track showed the grid's own
   background and read as an empty cell someone forgot to fill. */
.perf__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--sp-64);
  background: var(--color-blue-10);
  border: 1px solid var(--color-blue-10);
}

.perf-metric {
  padding: var(--sp-16);
  background: var(--color-almost-white);
}

.perf-metric__label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-blue-50);
}

.perf-metric__value {
  margin-top: var(--sp-8);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.28px;
  color: var(--color-night);
  /* Tabular figures so a column of numbers lines up on the decimal. */
  font-variant-numeric: tabular-nums;
}

.perf-metric__note {
  margin-top: var(--sp-8);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-blue-40);
}

/* Thirteen numeric columns will not fit a phone, so the table scrolls
   inside its own box rather than pushing the page sideways. */
.perf__table-wrap {
  margin-top: var(--sp-64);
  overflow-x: auto;
}

.perf-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.perf-table__caption {
  text-align: left;
  padding-bottom: var(--sp-12);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-night);
}

.perf-table th,
.perf-table td {
  padding: 10px 8px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid var(--color-blue-10);
}

.perf-table thead th {
  font-size: 12px;
  color: var(--color-blue-50);
  border-bottom-color: var(--color-night);
}

.perf-table tbody th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-night);
}

.perf-table td {
  color: var(--color-night);
}

.perf-table td.is-empty {
  color: var(--color-blue-10);
}

.perf-table td.is-negative {
  color: #b4462f;
}

.perf-table th:last-child,
.perf-table td.perf-table__year {
  font-weight: 500;
  border-left: 1px solid var(--color-blue-10);
}

.perf__notes {
  margin-top: var(--sp-24);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.perf__notes p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-blue-40);
}

@media (max-width: 992px) {
  .perf { padding: var(--sp-80) 0; }
  .perf__charts { grid-template-columns: 1fr; gap: var(--sp-40); }
  .perf__metrics { grid-template-columns: repeat(2, 1fr); }
  .perf__head { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .perf__head h2 { font-size: 32px; letter-spacing: -0.32px; }
}

/* ---------- Factsheet request ----------
   The row used to link to the contact page, which asked a reader already
   on a strategy page to start over somewhere else and remember which
   strategy they meant. It opens in place instead. */
.factsheet {
  border-top: 1px solid var(--color-blue-10);
}

.factsheet:last-child {
  border-bottom: 1px solid var(--color-blue-10);
}

.factsheet__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
  padding: var(--sp-16) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-night);
}

.factsheet__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.factsheet__icon::before,
.factsheet__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--color-night);
  transform: translate(-50%, -50%);
}

.factsheet__icon::before { width: 14px; height: 1.5px; }
.factsheet__icon::after {
  width: 1.5px;
  height: 14px;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.factsheet.is-open .factsheet__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Same mechanism as the Who we serve rows: grid rows resolve to the
   content's real height, so the panel opens to where the form actually
   ends rather than to a guessed maximum. */
.factsheet__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.factsheet__panel[hidden] {
  display: grid;
}

.factsheet.is-open .factsheet__panel {
  grid-template-rows: 1fr;
}

.factsheet__clip {
  overflow: hidden;
  min-height: 0;
}

.factsheet__form,
.factsheet__done {
  padding-bottom: var(--sp-32);
}

.factsheet__intro,
.factsheet__done-text {
  max-width: 560px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-blue-50);
}

.factsheet__done-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.24px;
  color: var(--color-night);
  margin-bottom: var(--sp-8);
}

.factsheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16) var(--sp-24);
  max-width: 640px;
  margin-top: var(--sp-16);
}

.factsheet__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.factsheet__field span {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-blue-50);
}

.factsheet__field input,
.factsheet__field select {
  height: 40px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-night);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-blue-10);
}

.factsheet__field select {
  /* The popup is painted by the OS; state both sides so the options cannot
     end up unreadable the way the contact form's did. */
  color-scheme: light;
}

.factsheet__field select option {
  color: var(--color-night);
  background-color: var(--color-almost-white);
}

.factsheet__field input:focus,
.factsheet__field select:focus {
  outline: none;
  border-bottom-color: var(--color-night);
}

.factsheet__submit {
  margin-top: var(--sp-24);
}

.factsheet__error {
  margin-top: var(--sp-12);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #b4462f;
}

@media (prefers-reduced-motion: reduce) {
  .factsheet__panel,
  .factsheet__icon::after { transition: none; }
}

@media (max-width: 767px) {
  .factsheet__grid { grid-template-columns: 1fr; }
}

/* ---------- Demo gate ----------
   The password page in front of the site while it is being reviewed. It
   borrows the brand and nothing else: no header, no menu, no footer, since
   a gate that lists what is behind it is not much of a gate. */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-32);
  background: var(--color-night);
}

.gate__panel {
  width: 100%;
  max-width: 420px;
}

.gate__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-almost-white);
}

.gate__brand .logo__mark {
  width: 24px;
  height: 24px;
  color: var(--color-almost-white);
}

.gate__word {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--color-almost-white);
}

.gate__title {
  margin-top: var(--sp-40);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.36px;
  color: var(--color-almost-white);
}

.gate__text {
  margin-top: var(--sp-12);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-gray-40);
}

.gate__form {
  margin-top: var(--sp-32);
}

.gate__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gate__field span {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-gray-40);
}

.gate__field input {
  height: 44px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-almost-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-gray-40);
  transition: border-color 0.2s ease;
}

.gate__field input:focus {
  outline: none;
  border-bottom-color: var(--color-almost-white);
}

.gate__submit {
  margin-top: var(--sp-24);
  background: var(--color-almost-white);
  color: var(--color-night);
  border-color: var(--color-almost-white);
}

.gate__error {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: #e8907c;
}

.gate__foot {
  margin-top: var(--sp-64);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: rgba(239, 239, 236, 0.35);
}

/* ---------- Principles, pinned ----------
   Scrolling down walks the row sideways, then the page carries on. Same
   shape as the hero pin: a wrapper tall enough to give the interaction its
   travel, with the section sticky inside it.

   Everything hangs off `principles-pin--active`, which only JavaScript
   adds, so with it off the row is an ordinary horizontal scroller and the
   page scrolls straight past — which is what it did before. */
.principles-pin {
  position: relative;
}

.principles-pin--active {
  /* One viewport to read the section, then the row's own sideways distance
     again as vertical travel, so the cards move at about the speed of the
     scroll rather than at a rate picked out of the air. */
  height: calc(100vh + var(--principles-travel, 0px));
}

.principles-pin--active > .principles {
  position: sticky;
  /* clears the sticky header */
  top: 64px;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The scroll position is set from the scroll handler, so the browser must
   not also be animating it — smooth behaviour here would chase the value
   and lag a frame or two behind the page. */
.principles-pin--active .principles__slider {
  scroll-behavior: auto;
  overflow-x: hidden;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .principles-pin--active {
    height: auto;
  }

  .principles-pin--active > .principles {
    position: static;
    height: auto;
  }

  .principles-pin--active .principles__slider {
    overflow-x: auto;
  }
}