/*
 * Brand colours for the Workforce template.
 * Loaded after style.css, so everything here overrides the template's defaults.
 *
 *   Primary    #832f7d  (template teal, --theme-color3)
 *   Secondary  #bd3e85  (template yellow accent, --theme-color1)
 *   Baby pink  #e8bed9  (template green, --theme-color4, plus light tints)
 */

:root {
  --brand-primary: #832f7d;
  --brand-primary-rgb: 131, 47, 125;
  --brand-secondary: #bd3e85;
  --brand-secondary-rgb: 189, 62, 133;
  --brand-pink: #e8bed9;
  --brand-pink-rgb: 232, 190, 217;
  --brand-pink-light: #fbf1f7;
  --brand-dark: #2b1029;
  --brand-dark-rgb: 43, 16, 41;

  --theme-color1: var(--brand-secondary);
  --theme-color1-rgb: var(--brand-secondary-rgb);
  --theme-color1-text-color: #ffffff;
  --theme-color2: var(--brand-dark);
  --theme-color2-rgb: var(--brand-dark-rgb);
  --theme-color3: var(--brand-primary);
  --theme-color3-rgb: var(--brand-primary-rgb);
  --theme-color4: var(--brand-pink);
  --theme-color4-rgb: var(--brand-pink-rgb);
  --hover-theme-color: var(--brand-primary);

  --theme-color-light-gray: var(--brand-pink-light);
  --theme-color-lighter: var(--brand-pink-light);
  --theme-color-lighter2: var(--brand-pink-light);
  --theme-color-silver: var(--brand-pink-light);
  --bg-color: var(--brand-pink-light);
  --gradient-1: linear-gradient(181.35deg, rgba(var(--brand-pink-rgb), 0) 1.15%, rgba(var(--brand-secondary-rgb), 0.1) 98.91%);
  --headings-color: var(--brand-dark);
  --heading-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --review-color: var(--brand-secondary);
  --theme-light-background: var(--brand-dark);
  --link-color: var(--brand-secondary);
  --link-hover-color: var(--brand-primary);
}

/* Hard-coded template colours that don't use the variables */

.project-details__pagination li.next i,
.project-details__pagination li.previous i {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.blog-details__tags span,
.blog-details__pagenation li,
.sidebar__post .sidebar__post-list .sidebar__post-content .h3 a,
.sidebar__category-list li a:hover,
.sidebar__category-list li.active a,
.sidebar__tags-list a,
.sidebar__comments-text-box p span {
  color: var(--brand-primary);
}

.styled-pagination .swiper-pagination-progressbar-fill,
.swiper-horizontal > .styled-scrollbar {
  background: linear-gradient(270deg, rgba(var(--brand-pink-rgb), 0) -1.4%, var(--brand-secondary) 100%);
}

@keyframes round-shape-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--brand-secondary-rgb), 0.08), 0 0 0 30px rgba(var(--brand-secondary-rgb), 0.08), 0 0 0 50px rgba(var(--brand-secondary-rgb), 0.08);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(var(--brand-secondary-rgb), 0.08), 0 0 0 50px rgba(var(--brand-secondary-rgb), 0.08), 0 0 0 70px rgba(var(--brand-secondary-rgb), 0);
  }
}

/* Gradients: hero overlays, image overlays, and counters */

.banner-section-two:before {
  background-image: linear-gradient(180deg, rgba(var(--brand-dark-rgb), 0.4) 0%, var(--brand-dark) 83%);
}

.banner-section-two .outer-box .funfact-box .inner-box .counter-box .count-box:before {
  background-image: linear-gradient(91deg, var(--brand-dark) 35%, rgba(var(--brand-secondary-rgb), 0.99) 30%);
}

.banner-box-two .inner-box:before {
  background: linear-gradient(to bottom, var(--brand-primary) 0%, rgba(var(--brand-pink-rgb), 0) 100%);
}

.services-section-two .outer-box:before {
  background: linear-gradient(180deg, rgba(var(--brand-dark-rgb), 0) 0%, var(--brand-dark) 100%);
}

.contact-section .outer-box .image-column .inner-column:before {
  background-image: linear-gradient(178deg, rgba(var(--brand-dark-rgb), 0) 66%, var(--brand-dark) 100%);
}

.process-box-layout4 .inner-box .step {
  background: linear-gradient(39.66deg, var(--brand-primary) -21.47%, var(--brand-dark) 55.5%);
}

/* The page-title background image is teal; blend it to the primary colour */

.page-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--brand-primary);
  mix-blend-mode: color;
  pointer-events: none;
}

.page-title .auto-container {
  position: relative;
  z-index: 1;
}

/* More hard-coded template colours */

.social-widget .social-icon-list1 li a {
  background-color: rgba(var(--brand-pink-rgb), 0.2);
}

.faq-section-two .faq-column .inner-column .accordion-box .accordion {
  background-color: var(--brand-primary);
}

.products-section .bg-image:before {
  background-color: var(--brand-dark);
}

.process-block-three:nth-child(3) .inner-block .step {
  background-color: var(--brand-pink);
}

.process-block-three:nth-child(4) .inner-block .step {
  background-color: var(--brand-secondary);
}

.product-block .rating,
.product-block-two .rating,
.product-details .product-info .product-details__reveiw i,
.product-discription .single-comment-box .inner-box .rating li,
.product-discription .comment-box .review-box .rating li,
.testimonial-block-three .inner-block .bottom-box .rating i,
.play-now-two:hover,
.play-now .icon,
.category-block-two.child-two .inner-box:hover h4 a,
.category-block-two.child-three .inner-box:hover h4 a {
  color: var(--brand-secondary);
}

.product-block .tag {
  background: var(--brand-secondary);
}

.shop-sidebar .post-widget .post .price {
  color: var(--brand-primary);
}

.service-sidebar .banner-widget .content-box .theme-btn-two:hover {
  background: var(--brand-primary);
}

.header-style-one,
.header-style-two,
.header-style-three {
  box-shadow: 0 3px 18px rgba(var(--brand-dark-rgb), 0.09);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-secondary);
}

/* Baby pink accents where the secondary colour would sit on purple */

.page-title .page-breadcrumb li a,
.footer-area .outer-box .footer-column .contact-widget .info i,
.footer-bottom ul li a:hover,
.user-links li a:hover {
  color: var(--brand-pink);
}

/* White text on the secondary-coloured hero cards */

.banner-section-two .outer-box .funfact-box .inner-box .count-box,
.banner-section-two .outer-box .funfact-box .inner-box .title,
.video-block .inner-block .bottom-box .btn-plain-text-with-arrow-right,
.video-block .inner-block .bottom-box.btn-view-details .btn-plain-text-with-arrow-right::after {
  color: #ffffff;
}

/*
 * Pages that end with the blog and contact sections (the "home" footer variant):
 * the pink panel runs straight into the footer, so square the footer's top
 * corners to make the panel and footer read as one card.
 */
.footer-joined .footer-area .outer-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Preloader: the orbit ring replaces the template's pulsing logo */

.site-preloader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-preloader::before,
.site-preloader::after {
  content: none;
}

.site-preloader .orbit-ring {
  width: 48px;
  height: 48px;
  color: var(--brand-primary);
}

.orbit-ring {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  animation: loading-ui-orbit-ring-rotation var(--duration, 1s) linear infinite;
}

.orbit-ring__track {
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.25;
}

.orbit-ring__arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116.667%;
  height: 116.667%;
  border: 2px solid transparent;
  border-bottom-color: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-ring__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes loading-ui-orbit-ring-rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Headings: Arial with no extra letter-spacing */
.sec-title .sub-title,
.banner-box-two h4,
.page-title .text,
.error-page__inner .error-page__sub-title {
  letter-spacing: normal;
}

/* FAQ section: keep the title inside its column, clear of the FAQ card */
.faq-section .content-column .sec-title .title {
  max-width: 501px;
  font-size: clamp(28px, 3vw, 40px);
}

/* ---------- Header: fit seven menu items beside the Donate button ---------- */

.main-header .header-lower .inner-container .main-box .left-box {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  gap: 30px;
}

.main-header .header-lower .inner-container .main-box .right-box {
  flex-shrink: 0;
}

.main-header .main-menu .navigation > li {
  margin: 0 14px;
}

.sticky-header .main-menu .navigation > li {
  margin: 0 0 0 26px;
}

/* ---------- Donate button (header, sticky header, mobile menu) ---------- */

.donate-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
  padding: 12px 26px;
  border-radius: 50px;
  background-color: var(--brand-secondary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 300ms ease;
}

.donate-btn:hover,
.donate-btn:focus-visible {
  background-color: var(--brand-primary);
  color: #ffffff;
}

.donate-btn i {
  font-size: 14px;
}

.main-header .donate-btn + .mobile-nav-toggler,
.header-style-three .header-lower .inner-container .main-box .right-box .donate-btn + .mobile-nav-toggler {
  margin-left: 24px;
}

/* Phones: a round heart button, so the logo and menu toggle still fit. The label stays for screen readers. */
@media (max-width: 575.98px) {
  .main-header .header-lower .donate-btn,
  .sticky-header .donate-btn {
    margin-left: 12px;
    padding: 12px;
  }

  .main-header .header-lower .donate-btn span,
  .sticky-header .donate-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .main-header .donate-btn + .mobile-nav-toggler,
  .header-style-three .header-lower .inner-container .main-box .right-box .donate-btn + .mobile-nav-toggler {
    margin-left: 16px;
  }
}

.mobile-donate {
  padding: 20px 25px 0;
}

.mobile-donate .donate-btn {
  justify-content: center;
  width: 100%;
  margin-left: 0;
}

/* ---------- Shared site pieces ---------- */

.site-empty-state {
  padding: 40px 20px;
  border: 1px dashed rgba(var(--brand-primary-rgb), 0.3);
  border-radius: 20px;
  background: var(--brand-pink-light);
  text-align: center;
}

.site-empty-state p {
  margin: 0;
}

.site-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 50px;
}

.site-pagination .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.site-rich-text > * + * {
  margin-top: 1em;
}

.site-rich-text h2,
.site-rich-text h3 {
  margin-top: 1.5em;
}

.site-rich-text ul,
.site-rich-text ol {
  padding-left: 1.4em;
}

.site-rich-text ul {
  list-style: disc;
}

.site-rich-text ol {
  list-style: decimal;
}

.site-rich-text li {
  display: list-item;
  margin-bottom: 0.4em;
  list-style: inherit;
}

.site-rich-text h2 {
  font-size: 28px;
}

.site-rich-text h3 {
  font-size: 22px;
}

.site-rich-text blockquote {
  padding-left: 20px;
  border-left: 3px solid var(--brand-secondary);
  font-style: italic;
}

.site-rich-text a {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* ---------- Blog search ---------- */

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  /* The width of one blog card, centred above the cards. */
  max-width: calc(50% - 12px);
  margin: 0 auto 44px;
  padding: 4px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  border-radius: 50px;
  background: #ffffff;
  box-shadow: 0 16px 32px -24px rgba(var(--brand-dark-rgb), 0.4);
}

.blog-search:focus-within {
  border-color: var(--brand-secondary);
}

.blog-search > i {
  margin: 0 10px 0 16px;
  font-size: 14px;
  color: var(--brand-primary);
}

.blog-search input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  font-size: 15px;
  border: 0;
  background: transparent;
  outline: none;
}

.blog-search__button {
  padding: 7px 20px;
  font-size: 14px;
  border: 0;
  border-radius: 40px;
  background: var(--brand-secondary);
  color: #ffffff;
  font-weight: 600;
  transition: background-color 200ms ease;
}

.blog-search__button:hover,
.blog-search__button:focus-visible {
  background: var(--brand-primary);
}

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  justify-content: center;
  margin: -24px 0 44px;
}

@media (max-width: 1199.98px) {
  .blog-search {
    max-width: none;
  }
}

.blog-filter a {
  color: var(--brand-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Blog cards: the image fills the card beside the text, cropped to fit ---------- */

.blog-block .image .post-thumb {
  flex: 1;
}

.blog-block .image .post-thumb,
.blog-block .image .post-thumb-inner,
.blog-block .image .thumb,
.blog-block .image .thumb > a {
  display: block;
  height: 100%;
}

.blog-block .image .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* Phones: cards stack, so show a landscape crop above the text. */
@media (max-width: 575.98px) {
  .blog-block .image .thumb img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Events ---------- */

/* Event cards: every image (cover, gallery photo or default) fills the same 3:2 frame. */
.blog-block-two .image-box .image img {
  width: 100%;
  aspect-ratio: 672 / 448;
  object-fit: cover;
}

.event-details__cover {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 20px;
}

.event-details__summary {
  font-size: 18px;
  color: var(--headings-color);
}

.event-details__info {
  position: sticky;
  top: 120px;
  padding: 30px;
  border-radius: 20px;
  background: var(--brand-pink-light);
}

.event-details__info ul {
  margin: 20px 0 30px;
}

.event-details__info li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.event-details__info li i {
  margin-top: 6px;
  color: var(--brand-secondary);
}

.event-gallery {
  margin-top: 80px;
}

.photo-grid__item {
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.photo-grid__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms ease;
}

.photo-grid__item:hover img,
.photo-grid__item:focus-visible img {
  transform: scale(1.05);
}

/* ---------- Gallery detail: Pinterest-style masonry ---------- */

.gallery-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.gallery-detail__header p {
  margin: 4px 0 0;
}

.sub-title-plain {
  color: var(--brand-secondary);
  font-weight: 500;
}

.masonry-gallery {
  column-count: 4;
  column-gap: 16px;
}

@media (max-width: 1199.98px) {
  .masonry-gallery {
    column-count: 3;
  }
}

@media (max-width: 767.98px) {
  .masonry-gallery {
    column-count: 2;
    column-gap: 10px;
  }
}

.masonry-gallery__item {
  margin: 0 0 16px;
  break-inside: avoid;
}

.masonry-gallery__item a {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--brand-pink-light);
}

.masonry-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 400ms ease;
}

.masonry-gallery__item a:hover img,
.masonry-gallery__item a:focus-visible img {
  transform: scale(1.04);
}

.masonry-gallery__item figcaption {
  margin-top: 8px;
  font-size: 14px;
}

/* ---------- Gallery albums ---------- */

.gallery-album {
  display: block;
  color: inherit;
}

.gallery-album__image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
}

.gallery-album__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 400ms ease;
}

.gallery-album:hover .gallery-album__image img,
.gallery-album:focus-visible .gallery-album__image img {
  transform: scale(1.05);
}

.gallery-album__count {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(var(--brand-dark-rgb), 0.8);
  color: #ffffff;
  font-size: 14px;
}

.gallery-album__title {
  display: block;
  margin-top: 18px;
  font-family: var(--heading-font-family);
  font-size: 22px;
  color: var(--headings-color);
}

.gallery-album:hover .gallery-album__title {
  color: var(--brand-secondary);
}

.gallery-album__date {
  display: block;
  font-size: 14px;
}

/* ---------- Downloads ---------- */

.downloads-group + .downloads-group {
  margin-top: 60px;
}

.downloads-group__title {
  margin-bottom: 20px;
}

.downloads-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 30px;
  border-radius: 20px;
  background: var(--brand-pink-light);
}

.download-item__icon {
  font-size: 40px;
  color: var(--brand-secondary);
}

.download-item__body {
  flex: 1;
  min-width: 0;
}

.download-item__title {
  margin-bottom: 4px;
}

.download-item__body p {
  margin: 0 0 4px;
}

.download-item__meta {
  font-size: 14px;
  color: var(--brand-primary);
}

.download-item__button {
  margin-left: 0;
}

@media (max-width: 575.98px) {
  .download-item {
    flex-wrap: wrap;
    padding: 20px;
  }

  .download-item__button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Impact & donate ---------- */

.impact-stat,
.donate-method {
  height: 100%;
  padding: 40px 30px;
  border-radius: 20px;
  background: var(--brand-pink-light);
  text-align: center;
}

.impact-stat i,
.donate-method i {
  font-size: 40px;
  color: var(--brand-secondary);
}

.impact-stat__value {
  margin-top: 16px;
  font-family: var(--heading-font-family);
  font-size: 44px;
  color: var(--brand-primary);
}

.impact-stat__label {
  font-weight: 500;
  color: var(--headings-color);
}

.impact-story {
  margin-top: 100px;
}

.impact-story__image {
  width: 100%;
  border-radius: 20px;
}

.donate-method .h4 {
  margin: 20px 0 10px;
}

.donate-method p {
  margin: 0;
}

.donate-contact {
  margin-top: 60px;
}

/* ---------- Home: "Scroll down to explore" cue ---------- */

/* Pinned to the bottom of the screen while the visitor is at the top of the page. */
.scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  border-radius: 50px;
  background-color: rgba(var(--brand-dark-rgb), 0.82);
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), 0.25);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity 300ms ease, transform 300ms ease, background-color 200ms ease;
}

.scroll-cue.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  background-color: var(--brand-primary);
  color: #ffffff;
}

.scroll-cue:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 3px;
}

.scroll-cue__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brand-secondary);
  font-size: 18px;
}

.scroll-cue__icon i {
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

.scroll-cue__label {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}

/* Clicking the cue glides down to the next section, clear of the sticky header. */
html:has(.scroll-cue) {
  scroll-behavior: smooth;
}

#about {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__icon i {
    animation: none;
  }

  html:has(.scroll-cue) {
    scroll-behavior: auto;
  }
}

/* ---------- Footer newsletter form ---------- */

/* The honeypot field: kept off-screen for people, but visible to bots that fill in every field. */
.subscribe-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.subscribe-form__message {
  min-height: 1.5em;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--brand-pink);
}

.subscribe-form__message.is-error {
  color: #ffd6e0;
  font-weight: 500;
}

.subscribe-form .submit-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Custom cursor (public/assets/js/cursor.js) ---------- */

.site-cursor,
.site-cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  scale: 0;
  transition: opacity 200ms ease, scale 200ms ease;
}

.site-cursor {
  width: 10px;
  height: 10px;
  /* Negative margins centre the element on the pointer; scaling happens around that centre. */
  margin: -5px 0 0 -5px;
  background-color: var(--brand-secondary);
}

.site-cursor-follow {
  z-index: 99999;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(var(--brand-primary-rgb), 0.5);
  background-color: rgba(var(--brand-pink-rgb), 0.25);
  transition: opacity 200ms ease, scale 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.has-custom-cursor .site-cursor,
.has-custom-cursor .site-cursor-follow {
  opacity: 1;
  scale: 1;
}

/* Over links and buttons the ring grows; pressing shrinks it slightly. */
.has-custom-cursor .site-cursor-follow.is-hovering {
  scale: 1.6;
  /* Light border plus a thin magenta outline: visible on white pages and purple buttons alike. */
  border-color: var(--brand-pink);
  background-color: rgba(var(--brand-pink-rgb), 0.2);
  box-shadow: 0 0 0 1px rgba(var(--brand-secondary-rgb), 0.7);
}

.has-custom-cursor .site-cursor-follow.is-pressed {
  scale: 0.8;
}

.has-custom-cursor .site-cursor-follow.is-hovering.is-pressed {
  scale: 1.3;
}

/* Hide the native cursor while the custom one is showing... */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}

/* ...except over text fields, where the I-beam is needed to type and select. */
.has-custom-cursor.custom-cursor-text,
.has-custom-cursor.custom-cursor-text input,
.has-custom-cursor.custom-cursor-text textarea,
.has-custom-cursor.custom-cursor-text [contenteditable="true"] {
  cursor: auto !important;
}

.has-custom-cursor.custom-cursor-text .site-cursor,
.has-custom-cursor.custom-cursor-text .site-cursor-follow {
  opacity: 0;
  scale: 0;
}

::selection {
  background: var(--brand-pink);
  color: var(--brand-dark);
}

/* Organisation content: hero intro, partner names and linked phone numbers */

.banner-section-two .outer-box .banner-content .inner-content .banner-text {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .banner-section-two .outer-box .banner-content .inner-content .banner-text {
    margin: -10px auto 30px;
    text-align: center;
  }
}

.client-block .inner-block .client-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 0 12px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.15);
  border-radius: 12px;
  color: var(--brand-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  transition: all 300ms ease;
}

.client-block .inner-block:hover .client-name {
  border-color: var(--brand-secondary);
  color: var(--brand-primary);
}

.call-info .title a {
  color: inherit;
}

/* About: our story */


.story-section__quote {
  position: relative;
  margin: 10px 0 40px;
  padding: 32px 32px 28px;
  border-radius: 20px;
  background: var(--brand-pink-light);
}

.story-section__quote p {
  margin: 0 0 20px;
  color: var(--brand-dark);
  font-size: 18px;
  font-style: italic;
  line-height: 1.6;
}

.story-section__quote footer .name {
  display: block;
  color: var(--brand-primary);
  font-weight: 700;
}

.story-section__quote footer .designation {
  font-size: 14px;
}

.story-section__text p {
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.8;
}

.story-section__text p:first-child::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  color: var(--brand-primary);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.85;
}

.footer-area .outer-box .footer-column .contact-widget .info a {
  color: var(--theme-color-white);
  overflow-wrap: anywhere;
}

.footer-area .outer-box .footer-column .contact-widget .info a:hover {
  color: var(--brand-pink);
}

.main-header .upper-box .info-box .info a,
.contact-details__info a {
  color: inherit;
  overflow-wrap: anywhere;
}

.impact-focus {
  margin: 0 0 32px;
}

.impact-focus dt {
  margin-top: 18px;
  color: var(--brand-primary);
  font-size: 19px;
  font-weight: 700;
}

.impact-focus dt:first-child {
  margin-top: 0;
}

.impact-focus dd {
  margin: 4px 0 0;
}

.impact-reach {
  margin-top: 60px;
}

/* Equal-height focus area cards on the home page */
.services-section-three .service-block-three .inner-block {
  height: 100%;
}

.impact-reach .list-style-one li {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

/* About: milestones and leadership message */

/* About: our journey as a timeline. Down the page on small screens, across it on wide ones. */
.journey-panel {
  padding: 60px 50px;
  border-radius: 28px;
  background: var(--brand-pink-light);
}
.journey {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The line runs from the first dot to the last. */
.journey::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-secondary);
}
.journey__item {
  position: relative;
  padding: 0 0 28px 50px;
}
.journey__item:last-child {
  padding-bottom: 0;
}
.journey__year {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(var(--brand-dark-rgb), 0.06);
}
.journey__dot {
  position: absolute;
  top: 4px;
  left: 1px;
  width: 23px;
  height: 23px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(var(--brand-secondary-rgb), 0.35);
}
.journey__item--latest .journey__dot {
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0 9px rgba(var(--brand-secondary-rgb), 0.2);
}
.journey__body {
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), 0.06);
}
.journey__date {
  margin-bottom: 6px;
  color: var(--brand-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.journey__title {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.3;
}
.journey__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.journey__item--latest .journey__body {
  background-color: var(--brand-primary);
  box-shadow: 0 16px 36px rgba(var(--brand-dark-rgb), 0.22);
}
.journey__item--latest .journey__date {
  color: var(--brand-pink);
}
.journey__item--latest .journey__title {
  color: #fff;
}
.journey__item--latest .journey__body p {
  color: rgba(255, 255, 255, 0.86);
}
.journey__item--latest .journey__year {
  background: var(--brand-primary);
  color: #fff;
}
@media (min-width: 1200px) {
  .journey {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
  }
  /* Across the page: each column's dot sits at its centre, so the line spans from the first centre to the last. */
  .journey::before {
    top: 61px;
    right: calc((100% - 5 * 18px) / 12);
    bottom: auto;
    left: calc((100% - 5 * 18px) / 12);
    width: auto;
    height: 3px;
    background: var(--brand-secondary);
  }
  .journey__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    text-align: center;
  }
  .journey__year {
    margin-bottom: 14px;
  }
  .journey__dot {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    margin-bottom: 22px;
  }
  /* A short stem joins each dot to its card. */
  .journey__dot::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: rgba(var(--brand-secondary-rgb), 0.3);
    transform: translateX(-50%);
  }
  .journey__body {
    flex: 1;
    width: 100%;
    padding: 22px 20px;
    text-align: left;
  }
}
@media (max-width: 1199.98px) {
  /* Stop the line at the last dot. */
  .journey__item:last-child::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: -14px;
    left: 0;
    width: 26px;
    background: var(--brand-pink-light);
  }
}
@media (max-width: 575.98px) {
  .journey-panel {
    padding: 36px 16px 36px 14px;
    border-radius: 20px;
  }
  .journey__item {
    padding-left: 42px;
  }
}

.leadership-message__inner {
  padding: 60px;
  border-radius: 30px;
  background-color: var(--brand-primary);
}

.leadership-message__text p {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.8;
}

.leadership-message__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .leadership-message__inner {
    padding: 36px 24px;
  }
}

/* Impact: programmes, reintegration model, facts and priorities */

.impact-programmes,
.impact-model,
.impact-accountability,
.impact-ahead {
  margin-top: 100px;
}

.programme-card {
  height: 100%;
  padding: 36px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  border-radius: 20px;
  background: #fff;
}

.programme-card__number {
  color: var(--brand-secondary);
  font-size: 15px;
  font-weight: 700;
}

.programme-card__title {
  margin: 6px 0 10px;
}

.programme-card__figures {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.programme-card__figures li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}

.programme-card__figures strong {
  flex: 0 0 56px;
  color: var(--brand-primary);
  font-size: 26px;
  line-height: 1;
}

.programme-card__impact {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--brand-pink-light);
  color: var(--brand-dark);
}

.programme-card__impact span {
  display: block;
  color: var(--brand-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.impact-model__core {
  padding: 16px 20px;
  border-left: 4px solid var(--brand-secondary);
  border-radius: 0 12px 12px 0;
  background: var(--brand-pink-light);
  color: var(--brand-dark);
}

.impact-model__core i {
  margin-right: 8px;
  color: var(--brand-secondary);
}

.model-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-steps__item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), 0.08);
}

.model-steps__number {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-secondary);
  color: #fff;
  font-weight: 700;
}

.model-steps__label {
  color: var(--brand-dark);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 575.98px) {
  .model-steps {
    grid-template-columns: 1fr;
  }
}

.impact-facts {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.impact-facts li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

.impact-facts strong {
  flex: 0 0 76px;
  color: var(--brand-primary);
  font-size: 32px;
  line-height: 1;
}

.impact-facts__source {
  margin-bottom: 28px;
  font-size: 14px;
}

.impact-facts__source a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.impact-priorities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.impact-priorities li {
  padding: 24px;
  border-radius: 16px;
  background: var(--brand-pink-light);
  color: var(--brand-dark);
  font-weight: 600;
  line-height: 1.4;
}

.impact-priorities i {
  display: block;
  margin-bottom: 12px;
  color: var(--brand-secondary);
  font-size: 24px;
}

@media (max-width: 575.98px) {
  .impact-priorities {
    grid-template-columns: 1fr;
  }
}

.faq-all-link {
  margin-top: 24px;
}

/* Long page titles (blog posts, events) stay within two or three lines */
.page-title .title.is-long {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.2;
}

/* Pagination buttons use the template's icon circle, so keep label and icon side by side */
.site-pagination .theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Detailed page header (blog posts): category label, balanced title, author and date */

.page-title--detailed .title-outer {
  max-width: 980px;
  margin: 0 auto;
}

.page-title--detailed .title {
  margin-bottom: 20px;
  font-weight: 600;
  text-wrap: balance;
}

.page-title__eyebrow {
  margin-bottom: 18px;
}

.page-title__eyebrow a {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 300ms ease;
}

.page-title__eyebrow a:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.page-title__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.page-title__meta i {
  margin-right: 6px;
  color: var(--brand-pink);
}

.page-title--detailed .page-breadcrumb {
  opacity: 0.85;
}

@media (max-width: 767.98px) {
  .page-title__meta {
    gap: 6px 16px;
    font-size: 14px;
  }
}

.page-title--detailed .title-outer {
  padding-top: 40px;
}

/* ---------- Donate: M-Pesa and PayPal form ---------- */

.donate-impact {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.donate-impact li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

.donate-impact strong {
  display: block;
  color: var(--brand-primary);
  font-size: 18px;
}

.donate-card {
  padding: 32px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(var(--brand-dark-rgb), 0.08);
}

.donate-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 28px;
  padding: 6px;
  border-radius: 50px;
  background: var(--brand-pink-light);
}

.donate-tabs button {
  padding: 12px 16px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--brand-dark);
  font-weight: 600;
  transition: all 250ms ease;
}

.donate-tabs button i {
  margin-right: 6px;
}

.donate-tabs button.is-active {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.3);
}

.donate-tabs button:focus-visible,
.donate-amount input:focus-visible + span,
.donate-field input:focus-visible {
  outline: 3px solid rgba(var(--brand-secondary-rgb), 0.45);
  outline-offset: 2px;
}

.donate-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.donate-amounts legend {
  grid-column: 1 / -1;
  margin-bottom: 10px;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 600;
}

.donate-amount {
  position: relative;
  margin: 0;
}

.donate-amount input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.donate-amount span {
  display: block;
  padding: 12px 6px;
  border: 1.5px solid rgba(var(--brand-primary-rgb), 0.25);
  border-radius: 12px;
  color: var(--brand-dark);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 200ms ease;
}

.donate-amount input:checked + span {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}

.donate-amount--other {
  grid-column: 1 / -1;
}

.donate-amount--other input,
.donate-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(var(--brand-primary-rgb), 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-dark);
}

.donate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.donate-field {
  margin: 0;
}

.donate-field--full {
  grid-column: 1 / -1;
}

.donate-field span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 600;
}

.donate-field small {
  color: #7a6b78;
  font-weight: 400;
}

.donate-check {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0 22px;
  font-size: 14px;
}

.donate-submit {
  width: 100%;
  justify-content: flex-start;
}

.donate-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.donate-paypal-buttons {
  min-height: 150px;
}

.donate-status {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.donate-status.is-info {
  background: var(--brand-pink-light);
  color: var(--brand-dark);
}

.donate-status.is-success {
  background: #e7f6ec;
  color: #1c6b3a;
}

.donate-status.is-error {
  background: #fdecec;
  color: #a12222;
}

.donate-trap {
  position: absolute;
  left: -9999px;
}

.donate-other {
  margin-top: 100px;
}

.donate-paybill {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 4px 16px;
  margin: 10px 0 14px;
}

.donate-paybill dt {
  font-weight: 500;
  text-align: right;
}

.donate-paybill dd {
  margin: 0;
  color: var(--brand-primary);
  font-size: 22px;
  font-weight: 700;
  text-align: left;
}

@media (max-width: 575.98px) {
  .donate-card {
    padding: 22px 18px;
  }

  .donate-amounts {
    grid-template-columns: 1fr 1fr;
  }

  .donate-fields {
    grid-template-columns: 1fr;
  }
}

.donate-status.is-info:not([data-donate-status]) {
  margin: 0 0 16px;
}

/* The loader hides as soon as the page's content is ready. If a script ever fails,
   this fades it out anyway after 4 seconds, so visitors are never stuck behind it. */
.site-preloader {
  animation: preloader-failsafe 0.4s ease 4s forwards;
}

@keyframes preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Impact: places we work (Admin → Where We Work) */
.impact-places {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.impact-places li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12);
}

.impact-places strong {
  display: block;
  color: var(--brand-dark);
  font-weight: 600;
}

.impact-places span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

/* Logo: capped by height so it takes about the same width as the template's wordmark
   (the width and height attributes keep the aspect ratio while it loads). */
.main-header .logo img,
.main-header .logo-box img {
  width: auto;
  max-height: 72px;
}
.sticky-header .logo img {
  max-height: 54px;
}
.mobile-menu .nav-logo img {
  width: auto;
  max-height: 52px;
}
.footer-area .about-widget .widget-content .logo img {
  width: auto;
  max-width: 220px;
  max-height: 84px;
}
@media (max-width: 575.98px) {
  .main-header .logo img,
  .main-header .logo-box img {
    max-height: 56px;
  }
}

/* "Ways you can support our work" cards: the hover fill is brand magenta, so everything
   on it turns white (the template only recoloured the title, not its link or the text). */
.services-block .inner-block:hover .content .title,
.services-block .inner-block:hover .content .title a,
.services-block .inner-block:focus-within .content .title,
.services-block .inner-block:focus-within .content .title a {
  color: #ffffff;
}
.services-block .inner-block:hover .content .text,
.services-block .inner-block:focus-within .content .text {
  color: rgba(255, 255, 255, 0.92);
}
.services-block .inner-block:focus-within:before {
  opacity: 1;
  height: 100%;
}
.services-block .inner-block .content .text {
  transition: color 300ms ease;
}

/* About: "How we do this" under each thematic area. */
.why-choose-us-block .features-how {
  margin: 18px 0 8px;
  color: var(--brand-secondary);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.why-choose-us-block .features-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.why-choose-us-block .features-list li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.why-choose-us-block .features-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-secondary);
}

/* Home: "Who we serve" list in the approach tabs. */
.why-choose-us-block-two .who-we-serve {
  margin: 0 0 30px;
}
.why-choose-us-block-two .who-we-serve li {
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Home: the stories intro sits on the purple band, so it needs light text. */
.testimonial-section .sec-title.light .text {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Thematic area cards: the hover fill is brand magenta, so everything on it turns white. */
.service-block-three .inner-block:hover .service-title,
.service-block-three .inner-block:hover .service-title a,
.service-block-three .inner-block:hover .service-details,
.service-block-three .inner-block:focus-within .service-title,
.service-block-three .inner-block:focus-within .service-title a,
.service-block-three .inner-block:focus-within .service-details,
.why-choose-us-block:hover .features-title,
.why-choose-us-block:hover .features-details,
.why-choose-us-block:hover .features-how,
.why-choose-us-block:hover .features-list li,
.why-choose-us-block:focus-within .features-title,
.why-choose-us-block:focus-within .features-details,
.why-choose-us-block:focus-within .features-how,
.why-choose-us-block:focus-within .features-list li {
  color: #fff;
}
.service-block-three .inner-block:hover .btn-view-details .btn-plain-text-with-arrow-right,
.service-block-three .inner-block:hover .btn-view-details .btn-plain-text-with-arrow-right:after,
.service-block-three .inner-block:focus-within .btn-view-details .btn-plain-text-with-arrow-right,
.service-block-three .inner-block:focus-within .btn-view-details .btn-plain-text-with-arrow-right:after,
.why-choose-us-block:hover .btn-view-details .btn-plain-text-with-arrow-right,
.why-choose-us-block:hover .btn-view-details .btn-plain-text-with-arrow-right:after,
.why-choose-us-block:focus-within .btn-view-details .btn-plain-text-with-arrow-right,
.why-choose-us-block:focus-within .btn-view-details .btn-plain-text-with-arrow-right:after {
  color: #fff !important;
}
.service-block-three .inner-block:focus-within {
  background-color: var(--theme-color1);
}
.why-choose-us-block:focus-within::after {
  left: 0;
  right: auto;
  width: 100%;
}
.why-choose-us-block:hover .features-list li::before,
.why-choose-us-block:focus-within .features-list li::before {
  background: #fff;
}
.why-choose-us-block:hover .ks-choose-icon,
.why-choose-us-block:focus-within .ks-choose-icon {
  background-color: #fff;
}
.why-choose-us-block .features-title,
.why-choose-us-block .features-details,
.why-choose-us-block .features-how,
.why-choose-us-block .features-list li,
.service-block-three .service-details {
  transition: color 300ms ease;
}

/* About: why we exist */
.why-exist__panel {
  padding: 70px 60px;
  border-radius: 28px;
  background: var(--brand-pink-light);
}
.why-exist__aside {
  position: sticky;
  top: 120px;
}
.why-exist__quote {
  position: relative;
  margin: 30px 0 0;
  padding: 40px 36px 36px;
  border-radius: 22px;
  background-color: var(--brand-primary);
  box-shadow: 0 20px 40px rgba(var(--brand-dark-rgb), 0.18);
}
.why-exist__quote i {
  display: block;
  margin-bottom: 16px;
  color: var(--brand-pink);
  font-size: 34px;
}
.why-exist__quote p {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
}
.why-exist__points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.why-exist__point {
  display: flex;
  gap: 22px;
  padding: 26px 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), 0.06);
}
.why-exist__point + .why-exist__point {
  margin-top: 16px;
}
.why-exist__icon {
  display: grid;
  flex: 0 0 52px;
  height: 52px;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-secondary);
  color: #fff;
  font-size: 20px;
}
.why-exist__label {
  margin: 2px 0 8px;
  color: var(--brand-secondary);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.why-exist__point p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}
@media (max-width: 991.98px) {
  .why-exist__panel {
    padding: 50px 30px;
  }
  .why-exist__aside {
    position: static;
  }
}
@media (max-width: 575.98px) {
  .why-exist__panel {
    padding: 36px 16px;
    border-radius: 20px;
  }
  .why-exist__quote p {
    font-size: 20px;
  }
  .why-exist__point {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
  .why-exist__icon {
    flex-basis: auto;
    width: 52px;
  }
}

/* About: the reintegration model as a cycle around its core. */
.model-cycle {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.model-cycle__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.model-cycle__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 34%;
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  box-shadow: 0 0 0 10px var(--brand-pink-light), 0 20px 40px rgba(var(--brand-dark-rgb), 0.2);
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transform: translate(-50%, -50%);
}
.model-cycle__core i {
  color: var(--brand-pink);
  font-size: 26px;
}
.model-cycle__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.model-cycle__step {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 150px;
  text-align: center;
  transform: translate(-50%, -34px);
}
.model-cycle__step--1 { top: 12.5%; left: 50%; }
.model-cycle__step--2 { top: 38.41%; left: 85.66%; }
.model-cycle__step--3 { top: 80.34%; left: 72.05%; }
.model-cycle__step--4 { top: 80.34%; left: 27.95%; }
.model-cycle__step--5 { top: 38.41%; left: 14.34%; }
.model-cycle__icon {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand-secondary);
  box-shadow: 0 10px 24px rgba(var(--brand-dark-rgb), 0.18);
  color: #fff;
  font-size: 24px;
}
.model-cycle__number {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.model-cycle__title {
  padding: 6px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(var(--brand-dark-rgb), 0.08);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.model-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.model-principles li {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand-pink-light);
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 600;
}
.model-principles i {
  margin-right: 6px;
  color: var(--brand-secondary);
}
/* Small screens: the cycle becomes a numbered path from top to bottom. */
@media (max-width: 575.98px) {
  .model-cycle {
    aspect-ratio: auto;
  }
  .model-cycle__ring {
    display: none;
  }
  .model-cycle__core {
    position: static;
    width: auto;
    aspect-ratio: auto;
    margin: 30px 0 24px;
    padding: 20px;
    border-radius: 18px;
    box-shadow: none;
    transform: none;
  }
  .model-cycle__steps {
    position: relative;
  }
  .model-cycle__steps::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 34px;
    border-left: 2px dashed var(--brand-pink);
  }
  .model-cycle__step {
    position: relative;
    top: auto !important;
    left: auto !important;
    flex-direction: row;
    width: auto;
    text-align: left;
    transform: none;
  }
  .model-cycle__step + .model-cycle__step {
    margin-top: 16px;
  }
  .model-cycle__icon {
    flex: 0 0 68px;
  }
}

/* Header submenus (Media): open in place with no gap to cross, and stay open briefly if the
   pointer slips off, so the menu doesn't vanish on the way down. Clicking the heading also
   opens it (.is-open, set in script.js), which is what touch screens rely on. */
.main-menu .navigation > li > ul {
  margin-top: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease 150ms, transform 200ms ease 150ms, visibility 0s linear 350ms;
}
.main-menu .navigation > li.dropdown:hover > ul,
.main-menu .navigation > li.dropdown:focus-within > ul,
.main-menu .navigation > li.dropdown.is-open > ul {
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  transform: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
/* An invisible bridge between the heading and the submenu keeps the hover alive. */
.main-menu .navigation > li > ul::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 18px;
}
.main-menu .navigation > li.dropdown > a[href="#"] {
  cursor: pointer;
}

/* Header over the hero and page titles: the white logo gets breathing room from the edges
   and sits at a calmer size, centred on the menu. */
.header-style-two .header-lower .inner-container {
  padding: 0 40px;
}
.header-style-two .header-lower .logo-box .logo img {
  max-height: 58px;
}
.header-style-two .header-lower .logo-box {
  display: flex;
  align-items: center;
  padding: 14px 0;
}
@media (max-width: 1199.98px) {
  .header-style-two .header-lower .inner-container {
    padding: 0 24px;
  }
}
@media (max-width: 575.98px) {
  .header-style-two .header-lower .inner-container {
    padding: 0 18px;
  }
  .header-style-two .header-lower .logo-box .logo img {
    max-height: 48px;
  }
}

/* Brand patterns instead of gradients: solid purple panels carry the footer's swirl artwork,
   and the pale pink panels the faint line artwork used on the "Where we work" section. */
.why-exist__quote,
.journey__item--latest .journey__body,
.leadership-message__inner,
.model-cycle__core {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.why-exist__quote::before,
.journey__item--latest .journey__body::before,
.leadership-message__inner::before,
.model-cycle__core::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/background/footer-bg1-1.png") center / cover no-repeat;
  opacity: 0.035;
  pointer-events: none;
}
.why-exist__panel,
.journey-panel {
  background: var(--brand-pink-light) url("../images/background/service-bg2-1.png") center / cover no-repeat;
}
/* Small purple cards: show the pattern at full scale and fainter, so it doesn't crowd the text. */
.why-exist__quote::before,
.journey__item--latest .journey__body::before,
.model-cycle__core::before {
  background-size: 1200px auto;
  opacity: 0.025;
}

/* About: thematic areas as four equal cards. Hovering (or tabbing into) a card fills it with
   brand magenta and turns everything on it white. */
.thematic-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 26px 26px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  border-radius: 20px;
  background: #fff;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.thematic-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}
.thematic-card__icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-pink-light);
  color: var(--brand-secondary);
  font-size: 32px;
  transition: background-color 300ms ease, color 300ms ease;
}
.thematic-card__number {
  color: rgba(var(--brand-primary-rgb), 0.25);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transition: color 300ms ease;
}
.thematic-card__title {
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color 300ms ease;
}
.thematic-card__text {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.65;
  transition: color 300ms ease;
}
.thematic-card__how {
  padding-top: 16px;
  margin-bottom: 10px;
  border-top: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  color: var(--brand-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 300ms ease, border-color 300ms ease;
}
.thematic-card__list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.thematic-card__list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  transition: color 300ms ease;
}
.thematic-card__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-secondary);
  transition: background-color 300ms ease;
}
.thematic-card__link {
  margin-top: auto;
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 700;
  transition: color 300ms ease;
}
.thematic-card__link i {
  margin-left: 6px;
  font-size: 12px;
  transition: transform 300ms ease;
}
.thematic-card:hover,
.thematic-card:focus-within {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
  box-shadow: 0 18px 40px rgba(var(--brand-secondary-rgb), 0.25);
  transform: translateY(-4px);
}
.thematic-card:hover .thematic-card__icon,
.thematic-card:focus-within .thematic-card__icon {
  background: #fff;
}
.thematic-card:hover .thematic-card__number,
.thematic-card:focus-within .thematic-card__number {
  color: rgba(255, 255, 255, 0.45);
}
.thematic-card:hover .thematic-card__title,
.thematic-card:hover .thematic-card__text,
.thematic-card:hover .thematic-card__how,
.thematic-card:hover .thematic-card__list li,
.thematic-card:hover .thematic-card__link,
.thematic-card:focus-within .thematic-card__title,
.thematic-card:focus-within .thematic-card__text,
.thematic-card:focus-within .thematic-card__how,
.thematic-card:focus-within .thematic-card__list li,
.thematic-card:focus-within .thematic-card__link {
  color: #fff;
}
.thematic-card:hover .thematic-card__how,
.thematic-card:focus-within .thematic-card__how {
  border-color: rgba(255, 255, 255, 0.3);
}
.thematic-card:hover .thematic-card__list li::before,
.thematic-card:focus-within .thematic-card__list li::before {
  background: #fff;
}
.thematic-card:hover .thematic-card__link i,
.thematic-card:focus-within .thematic-card__link i {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .thematic-card:hover,
  .thematic-card:focus-within {
    transform: none;
  }
}
.thematic-section .sec-title-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  align-items: flex-end;
  justify-content: space-between;
}
.thematic-section .sec-title-box .sec-title {
  margin-bottom: 0;
}
/* Four across: give titles and descriptions the same height so the lists line up. */
@media (min-width: 1200px) {
  .thematic-card__title {
    min-height: 2.6em;
  }
  .thematic-card__text {
    min-height: 8.25em;
  }
}