/* rolunk.html – page layout only (brand-info group). Tokens only; components come from components.css. */

/* Story: text in columns 1–7, the mascot (the page's one mascot moment) in 8–12. */
.page--rolunk .rolunk-story__inner { display: grid; gap: 40px; }
.page--rolunk .rolunk-story__text { margin-top: 24px; max-width: 640px; }
.page--rolunk .rolunk-story__text > * + * { margin-top: 16px; }
.page--rolunk .rolunk-story__text .lead { max-width: none; color: var(--text); }
.page--rolunk .rolunk-story__sign { color: var(--text-2); font-weight: 600; }

.page--rolunk .rolunk-values__title { margin-top: 48px; }
.page--rolunk .rolunk-values { margin-top: 16px; border-top: 1px solid var(--line); max-width: 640px; }
.page--rolunk .rolunk-values li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.page--rolunk .rolunk-values strong { color: var(--text); }

.page--rolunk .rolunk-story__mascot { margin: 0; display: grid; justify-items: start; gap: 16px; }
.page--rolunk .rolunk-story__mascot .mascot { --mascot-h: 260px; }
.page--rolunk .rolunk-story__mascot figcaption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--text-2); max-width: 32ch; }
@media (min-width: 768px) {
  .page--rolunk .rolunk-story__mascot .mascot { --mascot-h: 340px; }
}
@media (min-width: 1024px) {
  .page--rolunk .rolunk-story__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--rolunk .rolunk-story__copy { grid-column: 1 / 8; }
  .page--rolunk .rolunk-story__mascot { grid-column: 9 / 13; position: sticky; top: calc(var(--header-offset) + 24px); justify-items: center; text-align: center; padding-top: 40px; }
  .page--rolunk .rolunk-story__mascot .mascot { --mascot-h: 420px; }
}

/* What we do (navy): four text items in two columns, the real macro photo beside them. */
.page--rolunk .rolunk-what__grid { display: grid; gap: 48px; }
.page--rolunk .rolunk-what__items { display: grid; gap: 32px; }
.page--rolunk .rolunk-what__item { padding-top: 20px; border-top: 1px solid var(--navy-line); }
.page--rolunk .rolunk-what__item p { margin-top: 10px; color: var(--on-navy-2); max-width: 46ch; }
.page--rolunk .rolunk-what__item a { color: var(--sky-soft); }
.page--rolunk .rolunk-what__lens { justify-self: start; }
@media (min-width: 768px) {
  .page--rolunk .rolunk-what__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 1024px) {
  .page--rolunk .rolunk-what__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
  .page--rolunk .rolunk-what__items { grid-column: 1 / 9; gap: 40px 48px; }
  .page--rolunk .rolunk-what__lens { grid-column: 9 / 13; justify-self: end; }
}

/* Numbers as one sentence (never a stat trio): h2 size on white, the figures in full text colour. */
.page--rolunk .rolunk-numbers__line { max-width: 22ch; color: var(--text-2); }
.page--rolunk .rolunk-numbers__n { color: var(--text); }
.page--rolunk .rolunk-numbers__text { margin-top: 24px; max-width: 60ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); }
@media (min-width: 1024px) {
  .page--rolunk .rolunk-numbers__line { max-width: 24ch; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); }
  .page--rolunk .rolunk-numbers__text { margin-left: calc((100% - 11 * 24px) / 12 * 5 + 5 * 24px); max-width: 52ch; }
}

/* Career teaser and the grant note. */
.page--rolunk .rolunk-more__inner { display: grid; gap: 48px; }
.page--rolunk .rolunk-career > * + * { margin-top: 16px; }
.page--rolunk .rolunk-career .lead { color: var(--text-2); }
.page--rolunk .rolunk-grant { padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.page--rolunk .rolunk-grant h3 { color: var(--text); }
.page--rolunk .rolunk-grant p { margin-top: 10px; }
@media (min-width: 1024px) {
  .page--rolunk .rolunk-more__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page--rolunk .rolunk-career { grid-column: 1 / 7; }
  .page--rolunk .rolunk-grant { grid-column: 8 / 13; }
}