@charset "UTF-8";
/*!
 * /remote-foundation/ 1443 EN + /pl/zdalna-fundacja/ 2963 PL.
 * template-remote-foundation.php.
 *
 * Figma 6745:11803 desktop / 8890:12738 mobile (EN). Values are staging's computed
 * ones (measured 2026-09-27 at 1440 and 375, fully lazy-loaded); Figma supplied the
 * layout and agrees band for band.
 *
 * Bootstrap 5.3, .container (1146 at xl) and .btn.btn-atom all arrive via
 * main.min.css on this template and are not restated here.
 *
 * TYPE, desktop -> <=767px (staging's scale):
 *   title 48/58 700 -> 32/38      h2 40/52 700 -> 30/36
 *   lead 24/34 700 (both)         h3 24/34 700 -> 20/28
 *   point title 20/28 700 -> 15/21
 *   text 20/32 -> 18/29            card title 32/42 600 -> 24/34
 *   card caption 16/24 (both), centred
 *
 * Raman's review, 2026-09-30, overrides staging on two of these. The h2 is the
 * design system's H2 (Bold 40/1.3, 30/1.2 mobile; Figma 8800:11994 and the 375
 * frame), not staging's 600. The caption under "Contact us" is text-desktop-S
 * 16/1.5 centred under the button (Raman, round 2), at every width. The 375
 * frame's 12/1.4 (8890:13032) was tried first and rejected.
 */
/* Timeline year-tab label ("• The Question") under the .nav__about-dates pills.
   Shared by pages/about.scss and pages/remote-foundation.scss; include it inside
   the page's own scope (`#rs-about { @include rs-tag-pill; }`).

   Bootstrap gives it the 8/16 padding (py-2 px-3) and the white fill; everything
   below is the Figma tag component I37599:6770;37595:6699, which is NOT a pill — it
   is the same 4px radius as every other card on the page. The name stays `tag-pill`
   because that is the class Denis's page-about.html uses; only the geometry is
   corrected. Coral is #F35B54 here, one step off Bootstrap's .text-danger (#FF6D66),
   which is why the utility had to come off the markup — it sets colour with
   !important. */
.rs-rf {
  --rs-rf-ink: var(--rs-black-prime, #34383c);
  --rs-rf-ink-soft: var(--rs-black-second, #5d636a);
  --rs-rf-teal: var(--rs-teal-00, #408897);
  color: var(--rs-rf-ink-soft);
  font-family: var(--rs-font-body);
  font-size: 1.25rem;
  line-height: 32px;
  /* PL compounds break display type first (trap 9). Not on h3: it split
     short words like "wypra-wy" that staging simply wraps. */
}
.rs-rf .tag-pill {
  border-radius: var(--rs-radius-xs, 4px); /* -xs is the 4px step; -s is 5px. */
  color: #F35B54;
  font-size: 14px;
  gap: 12px;
  margin-bottom: 20px; /* Figma card gap; Bootstrap has no 20px spacer (mb-3 = 16). */
}
.rs-rf .tag-pill__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rs-rf p {
  margin: 0;
}
.rs-rf h1,
.rs-rf h2,
.rs-rf h3 {
  margin: 0;
  color: var(--rs-rf-ink);
  font-family: var(--rs-font-display);
  overflow-wrap: break-word;
}
.rs-rf h1,
.rs-rf h2 {
  hyphens: auto;
}
.rs-rf img {
  display: block;
  max-width: 100%;
  height: auto;
}
.rs-rf a {
  text-decoration: none;
}

/* Figma's 147/1146/147 grid: above 1200 the viewport supplies the margin, so
   Bootstrap's 12px gutter would make every band 24px narrow. Same fix as
   pages/rs-hubs.scss. Mobile runs a 20px gutter, as staging does. */
@media (min-width: 1200px) {
  .rs-rf .container {
    padding-right: 0;
    padding-left: 0;
  }
}
/* ---- Bands --------------------------------------------------------------- */
.rs-rf__hero,
.rs-rf__band {
  padding: 110px 0;
}

.rs-rf__hero {
  background-color: var(--rs-white-ivory, #f9faf4);
}

.rs-rf__band--beginning {
  padding-top: 50px;
}

/* Follows The Beginning on the same white: the band above already supplies the
   110px, so this one starts flush. The year tabs are About's (.nav__about-dates in
   main.scss, .tag-pill via config/_tag-pill.scss) — nothing restated here. */
.rs-rf__band--story {
  padding-top: 0;
}

.rs-rf__band--grey {
  background-color: var(--rs-grey-light-50, #f9f9f9);
}

.rs-rf__stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Two equal columns, 30px gutter — 558 | 558 in the frame. */
.rs-rf__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.rs-rf__split--center {
  align-items: center;
}

/* Impact's second row: Figma's 558 | 60 | 528, and staging's ~120px between rows. */
.rs-rf__split--flip {
  grid-template-columns: 558fr 528fr;
  gap: 60px;
  margin-top: 60px;
}

/* ---- Hero ---------------------------------------------------------------- */
/* The title starts at the badge's centre line and overlaps its right half. */
.rs-rf__badge {
  --rs-rf-badge: 294px;
  display: flex;
  align-items: center;
}

.rs-rf__badge-img {
  flex: none;
  width: var(--rs-rf-badge);
}

.rs-rf .rs-rf__title {
  position: relative;
  margin-left: calc(var(--rs-rf-badge) / -2);
  color: var(--rs-rf-teal);
  font-size: 3rem;
  font-weight: 700;
  line-height: 58px;
}

.rs-rf__mission {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.rs-rf .rs-rf__lead {
  color: var(--rs-rf-ink);
  font-family: var(--rs-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 34px;
}

.rs-rf__point-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px !important;
  color: var(--rs-rf-teal);
  font-family: var(--rs-font-display);
  font-weight: 700;
  line-height: 28px;
}

/* ---- Blocks -------------------------------------------------------------- */
.rs-rf__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.rs-rf .rs-rf__h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.rs-rf .rs-rf__h3 {
  color: var(--rs-rf-teal);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 34px;
}

.rs-rf .rs-rf__h3--light {
  color: var(--rs-grey-light-50, #f9f9f9);
}

.rs-rf__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rs-rf__text--light {
  color: var(--rs-white-pure, #fffffe);
}
.rs-rf__text--light a {
  color: var(--rs-yellow-light-20, #ffd87d);
}

.rs-rf .rs-rf__coral {
  color: var(--rs-coral-00, #f35b54);
}

.rs-rf a:hover {
  text-decoration: underline;
}

.rs-rf .btn:hover {
  text-decoration: none;
}

/* Coral dot bullets, centred on the first 32px line. */
.rs-rf__dots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-rf__dots li {
  position: relative;
  padding-left: 25px;
}
.rs-rf__dots li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rs-coral-00, #f35b54);
}

.rs-rf__media {
  display: block;
}

.rs-rf__media--tree {
  justify-self: end;
}

/* ---- Cards --------------------------------------------------------------- */
/* Background art is a media-library image passed in as --rs-rf-bg / -m. */
.rs-rf__card {
  border-radius: 4px;
  padding: 40px;
  background: var(--rs-rf-bg) no-repeat center left, linear-gradient(180deg, var(--rs-teal-light-10, #4b9eb0) 0%, var(--rs-rf-teal) 100%);
  color: var(--rs-white-pure, #fffffe);
}

.rs-rf__card--reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 60px;
}

.rs-rf__card--contact {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-left: 50px;
  background-position: bottom center, 0 0;
}

.rs-rf__reach {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-rf__reach-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-rf__reach-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.rs-rf__reach-list img {
  flex: none;
  margin-top: 5px;
}

.rs-rf .rs-rf__btn {
  width: 100%;
  margin-top: 10px;
}

.rs-rf .rs-rf__card-title {
  color: var(--rs-white-ivory, #f9faf4);
  font-family: var(--rs-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 42px;
}
.rs-rf .rs-rf__card-title span {
  color: var(--rs-yellow-00, #ffc94b);
}

.rs-rf__cta {
  /* The card stretches to its row; the CTA sits on the card's floor, as on staging. */
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-rf__caption {
  color: var(--rs-white-ivory, #f9faf4);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* ---- Tablet: stack ------------------------------------------------------- */
@media (max-width: 991px) {
  .rs-rf__split,
  .rs-rf__card--reach {
    grid-template-columns: 1fr;
  }
  .rs-rf__split--flip {
    gap: 30px;
    margin-top: 0;
  }
  .rs-rf__media--tree {
    justify-self: center;
  }
  .rs-rf__card--contact {
    margin-left: 0;
  }
}
/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .rs-rf {
    font-size: 1.125rem;
    line-height: 29px;
  }
  .rs-rf .container {
    padding-right: 20px;
    padding-left: 20px;
  }
  .rs-rf__hero {
    padding: 10px 0 30px;
  }
  .rs-rf__band {
    padding: 30px 0;
  }
  .rs-rf__band--story {
    padding-top: 0;
  }
  .rs-rf__stack {
    gap: 30px;
  }
  .rs-rf__badge {
    --rs-rf-badge: 156px;
  }
  .rs-rf .rs-rf__title {
    font-size: 2rem;
    line-height: 38px;
  }
  .rs-rf .rs-rf__h2 {
    font-size: 1.875rem;
    line-height: 1.2;
  }
  .rs-rf .rs-rf__h3 {
    font-size: 1.25rem;
    line-height: 28px;
  }
  .rs-rf__point-title {
    font-size: 0.9375rem;
    line-height: 21px;
  }
  .rs-rf__dots li::before {
    top: 11px;
  }
  /* The plants strip sits under its copy on mobile, as on staging. */
  .rs-rf__split--flip > .rs-rf__media {
    order: 1;
  }
  .rs-rf__card {
    padding: 20px;
    background-image: var(--rs-rf-bg-m), linear-gradient(180deg, var(--rs-teal-light-10, #4b9eb0) 0%, var(--rs-rf-teal) 100%);
    background-position: bottom center, 0 0;
  }
  .rs-rf__card--reach {
    gap: 30px;
    margin-top: 30px;
  }
  .rs-rf__card--contact {
    gap: 30px;
    margin-top: -10px;
  }
  .rs-rf .rs-rf__card-title {
    font-size: 1.5rem;
    line-height: 34px;
  }
  .rs-rf__reach-list img {
    margin-top: 4px;
  }
}