/* ==========================================================================
   Careox - your own overrides
   Loaded last, so anything here wins over style.css. Put your edits in this
   file rather than in style.css, which is the untouched template stylesheet.
   ========================================================================== */

/* Static-site notice shown when a form that used to be handled by WordPress
   is submitted. Delete this block once the forms post to a real endpoint. */
.static-form-notice {
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid #ffa415;
  background-color: rgba(255, 164, 21, 0.08);
  color: #2f2f2f;
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   1. Header — the top bar used to run ~440px tall because the square 499x499
   logo rendered at its full width and the utility strip above it was empty.
   ========================================================================== */

/* Top utility strip: email, hours, social. Slim by design. */
.topbar-one__inner {
  padding: 9px 0;
  gap: 24px;
  flex-wrap: wrap;
}

.topbar-one__info {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.topbar-one__info i {
  color: var(--careox-base, #ff5528);
  font-size: 15px;
}

.topbar-one__info a {
  color: inherit;
  transition: color 300ms ease;
}

.topbar-one__info a:hover {
  color: var(--careox-base, #ff5528);
}

.topbar-one__info__sep {
  width: 1px;
  height: 14px;
  background-color: rgba(var(--careox-text-dark-rgb, 114, 116, 114), 0.35);
  margin: 0 7px;
}

.topbar-one__social {
  gap: 6px;
}

.topbar-one__social a {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border-radius: 50%;
}

.topbar-one__info__hours {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Phones get the email and the social row only - the opening hours are in the
   footer and on the contact page, and a three-line utility strip is no use. */
@media (max-width: 991px) {
  .topbar-one__info__hours {
    display: none;
  }
  .topbar-one__inner {
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 575px) {
  .topbar-one__info {
    font-size: 13px;
  }
}

/* Logo row: cap the logo by height so the square mark cannot stretch the bar. */
.topbar-one__bottom__inner {
  padding: 16px 0;
  gap: 24px;
}

.topbar-one__bottom__logo img {
  height: 66px;
  width: auto;
  max-width: none;
}

/* The little rounded tab only reads correctly against the dark angled shape,
   which the theme hides below 1500px — hide the tab with it. */
@media (max-width: 1500px) {
  .topbar-one__bottom__inner::after {
    display: none;
  }
}

/* Donate button promoted into the flow so it shows at every width, instead of
   living in the absolutely-positioned strip that only appears above 1700px. */
.topbar-one__bottom__cta {
  flex: none;
  padding: 13px 32px;
  margin-right: 4px;
}

/* Breathing room at both ends of the white logo panel, so neither the logo nor
   the Donate button is flush against the container edge. */
.topbar-one__bottom__inner {
  padding-left: 34px;
  padding-right: 28px;
}

@media (max-width: 1199px) {
  .topbar-one__bottom__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .topbar-one__bottom__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* The nav bar lost its search and cart icons, so on desktop the menu is the
   only thing left in the row - let it sit where the eye expects it. */
@media (min-width: 1200px) {
  .main-header__right {
    display: none;
  }
  .main-header__nav {
    margin: 0 auto;
  }
}

.topbar-one__bottom__cta i {
  margin-right: 8px;
}

@media (max-width: 1699px) {
  .topbar-one__bottom__button {
    display: none;
  }
}

@media (max-width: 1199px) {
  .topbar-one__bottom__logo img {
    height: 58px;
  }
  .topbar-one__bottom__cta {
    display: none;
  }
}

@media (max-width: 767px) {
  .topbar-one__bottom__inner {
    padding: 14px 0;
  }
  .topbar-one__bottom__logo img {
    height: 50px;
    max-width: none;
  }
}

/* ==========================================================================
   2. Page header — the theme blanks out the banner image, leaving every inner
   page opening on a 375px slab of flat green. Give it depth and less height.
   ========================================================================== */

.page-header {
  padding-top: 90px;
  padding-bottom: 90px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .page-header {
    padding-top: 130px;
    padding-bottom: 130px;
  }
}

.page-header__bg {
  background-position: center 35%;
  opacity: 1;
}

/* Each page sets its own photo inline on .page-header__bg; the gradient below
   keeps the headline readable over it. */
/* !important because the customizer's inline <style> block loads after this
   file and sets an empty `background-image: url()` on the same pseudo-element,
   which would otherwise wipe the gradient out. */
.page-header__bg::before {
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(18, 47, 42, 0.95) 0%,
    rgba(18, 47, 42, 0.88) 45%,
    rgba(18, 47, 42, 0.62) 100%
  ) !important;
}

.page-header__title {
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .page-header__title {
    font-size: 54px;
    line-height: 64px;
  }
}

/* Short standfirst under the page title. */
.page-header__text {
  color: rgba(var(--careox-white-rgb, 255, 255, 255), 0.82);
  font-size: 17px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 0 22px;
}

/* .careox-btn paints its orange fill from a z-index:-1 pseudo-element, which
   vanishes behind the background of any ancestor that paints one. Isolating the
   button keeps that pseudo-element inside it, so the fill shows everywhere. */
.careox-btn {
  isolation: isolate;
}

/* ==========================================================================
   3. Shared page building blocks
   Small component set used by the donate, partnerships, volunteer, gallery and
   contact pages, so those pages stop being walls of <p> and stacked images.
   All of it is built from the theme's own tokens and type scale.
   ========================================================================== */

.zfh-section {
  padding: 100px 0;
  position: relative;
}

.zfh-section--tight {
  padding: 80px 0;
}

.zfh-section--gray {
  background-color: var(--careox-gray, #f1f6f7);
}

.zfh-section--dark {
  background-color: var(--careox-black, #122f2a);
}

.zfh-section--dark .sec-title__title,
.zfh-section--dark .zfh-lead {
  color: var(--careox-white, #fff);
}

@media (max-width: 767px) {
  .zfh-section,
  .zfh-section--tight {
    padding: 60px 0;
  }
}

.zfh-lead {
  font-size: 18px;
  line-height: 1.85;
  color: var(--careox-text, #636363);
  margin: 0 0 22px;
}

.zfh-lead--center {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.zfh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--careox-base, #ff5528);
  margin: 0 0 14px;
}

.zfh-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: currentcolor;
}

/* --- Checklist ----------------------------------------------------------- */

.zfh-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.zfh-check li {
  position: relative;
  padding-left: 38px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--careox-text, #636363);
}

/* Tick is drawn in CSS rather than pulled from an icon font, so the list never
   depends on a particular glyph being present. */
.zfh-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--accent-color, var(--careox-base, #ff5528));
}

.zfh-check li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 5px;
  height: 10px;
  border: solid var(--careox-white, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.zfh-check--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 34px;
}

@media (max-width: 767px) {
  .zfh-check--two-col {
    grid-template-columns: 1fr;
  }
}

/* --- Generic card grid --------------------------------------------------- */

.zfh-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.zfh-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Fixed counts, for card sets that would otherwise leave a lonely last row. */
@media (min-width: 992px) {
  .zfh-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .zfh-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .zfh-grid--4,
  .zfh-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .zfh-grid--4,
  .zfh-grid--3 {
    grid-template-columns: 1fr;
  }
}

.zfh-card {
  position: relative;
  background-color: var(--careox-white, #fff);
  border-radius: 20px;
  padding: 38px 32px 34px;
  box-shadow: 0 12px 40px rgba(18, 47, 42, 0.07);
  border: 1px solid rgba(18, 47, 42, 0.06);
  overflow: hidden;
  transition: transform 400ms ease, box-shadow 400ms ease;
  height: 100%;
}

.zfh-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 0;
  background-color: var(--accent-color, var(--careox-base, #ff5528));
  transition: width 500ms ease;
}

.zfh-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(18, 47, 42, 0.12);
}

.zfh-card:hover::after {
  width: 100%;
}

.zfh-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--accent-color, var(--careox-base, #ff5528));
  background-color: rgba(var(--careox-gray-rgb, 241, 246, 247), 1);
  margin-bottom: 24px;
  transition: all 400ms ease;
}

.zfh-card:hover .zfh-card__icon {
  color: var(--careox-white, #fff);
  background-color: var(--accent-color, var(--careox-base, #ff5528));
}

.zfh-card__title {
  font-size: 21px;
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--careox-black, #122f2a);
}

.zfh-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--careox-text, #636363);
}

/* --- Tag chips ----------------------------------------------------------- */

.zfh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.zfh-tags li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  background-color: var(--careox-white, #fff);
  border: 1px solid rgba(18, 47, 42, 0.1);
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--careox-black, #122f2a);
  transition: all 350ms ease;
}

.zfh-tags li i {
  color: var(--careox-base, #ff5528);
  transition: color 350ms ease;
}

.zfh-tags li:hover {
  background-color: var(--careox-black, #122f2a);
  border-color: var(--careox-black, #122f2a);
  color: var(--careox-white, #fff);
}

.zfh-tags li:hover i {
  color: var(--careox-secondary, #ffa415);
}

/* --- Image collage ------------------------------------------------------- */

.zfh-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  position: relative;
}

.zfh-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.zfh-collage__tall {
  grid-row: span 2;
  min-height: 460px;
}

/* Photo cells only - the badge is a sibling and must stay content-sized. */
.zfh-collage > div:not(.zfh-collage__badge) {
  min-height: 220px;
}

/* The badge is an absolutely-positioned child of a grid container, so it also
   gets an implicit grid area and would stretch to fill it - max-content on both
   axes keeps it the size of its own text. */
.zfh-collage__badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: max-content;
  height: max-content;
  background-color: var(--careox-base, #ff5528);
  color: var(--careox-white, #fff);
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  box-shadow: 0 14px 34px rgba(255, 85, 40, 0.35);
}

.zfh-collage__badge strong {
  display: block;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}

.zfh-collage__badge span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Single column on phones. The cells lose their grid-derived height there, so
   pin an aspect ratio - otherwise a portrait photo runs the full screen. */
@media (max-width: 575px) {
  .zfh-collage {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .zfh-collage > div:not(.zfh-collage__badge) {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .zfh-collage__tall {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   4. Donate page
   ========================================================================== */

.zfh-tiers {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.zfh-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 30px 26px;
  border-radius: 18px;
  background-color: var(--careox-white, #fff);
  border: 2px solid rgba(18, 47, 42, 0.08);
  box-shadow: 0 10px 30px rgba(18, 47, 42, 0.05);
  cursor: pointer;
  transition: all 350ms ease;
  font: inherit;
  color: inherit;
}

.zfh-tier:hover,
.zfh-tier.is-selected {
  border-color: var(--careox-base, #ff5528);
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(255, 85, 40, 0.16);
}

.zfh-tier__amount {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--careox-black, #122f2a);
}

.zfh-tier.is-selected .zfh-tier__amount {
  color: var(--careox-base, #ff5528);
}

.zfh-tier__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--careox-text, #636363);
}

.zfh-tier__pick {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--careox-base, #ff5528);
  opacity: 0;
  transition: opacity 300ms ease;
}

.zfh-tier:hover .zfh-tier__pick,
.zfh-tier.is-selected .zfh-tier__pick {
  opacity: 1;
}

/* Paystack form, dropped into a proper card instead of running full-bleed. */
.zfh-donate-form {
  background-color: var(--careox-white, #fff);
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: 0 20px 60px rgba(18, 47, 42, 0.09);
  border: 1px solid rgba(18, 47, 42, 0.06);
}

.zfh-donate-form h1#pf-form2842 {
  display: none;
}

.zfh-donate-form .j-forms .label,
.zfh-donate-form label.label {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--careox-black, #122f2a);
  margin-bottom: 8px;
  display: block;
}

.zfh-donate-form .unit {
  margin-bottom: 20px;
}

.zfh-donate-form input[type="text"],
.zfh-donate-form input[type="email"],
.zfh-donate-form input[type="number"],
.zfh-donate-form select {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(18, 47, 42, 0.14);
  background-color: var(--careox-gray, #f1f6f7);
  color: var(--careox-black, #122f2a);
  font-size: 16px;
  outline: none;
  transition: border-color 300ms ease, background-color 300ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.zfh-donate-form select {
  background-image: linear-gradient(45deg, transparent 50%, #122f2a 50%), linear-gradient(135deg, #122f2a 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.zfh-donate-form input:focus,
.zfh-donate-form select:focus {
  border-color: var(--careox-base, #ff5528);
  background-color: var(--careox-white, #fff);
}

.zfh-donate-form .paystack-cardlogos {
  max-width: 220px;
  height: auto;
  margin: 14px 0 22px;
  display: block;
}

.zfh-donate-form .primary-btn,
.zfh-donate-form .secondary-btn {
  border: none;
  border-radius: 12px;
  padding: 16px 38px;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: all 300ms ease;
}

.zfh-donate-form .primary-btn {
  background-color: var(--careox-base, #ff5528);
  color: var(--careox-white, #fff);
  margin-left: 12px;
}

.zfh-donate-form .primary-btn:hover {
  background-color: var(--careox-black, #122f2a);
}

.zfh-donate-form .secondary-btn {
  background-color: var(--careox-gray, #f1f6f7);
  color: var(--careox-black, #122f2a);
}

.zfh-donate-form .secondary-btn:hover {
  background-color: rgba(18, 47, 42, 0.12);
}

.paystack-secure-badge {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--careox-text, #636363);
}

/* Reassurance panel beside the form. */
/* Sized to its own content, and pinned while the (much taller) form scrolls. */
.zfh-aside {
  background-color: var(--careox-black, #122f2a);
  border-radius: 24px;
  padding: 44px 38px;
  color: rgba(var(--careox-white-rgb, 255, 255, 255), 0.78);
}

@media (min-width: 992px) {
  .zfh-aside {
    position: sticky;
    top: 110px;
  }
}

.zfh-aside__title {
  color: var(--careox-white, #fff);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 20px;
}

.zfh-aside .zfh-check li {
  color: rgba(var(--careox-white-rgb, 255, 255, 255), 0.8);
}

.zfh-aside__contact {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--careox-white-rgb, 255, 255, 255), 0.14);
  font-size: 15px;
  line-height: 1.9;
}

.zfh-aside__contact a {
  color: var(--careox-secondary, #ffa415);
}

.zfh-aside__contact a:hover {
  color: var(--careox-white, #fff);
}

@media (max-width: 767px) {
  .zfh-donate-form,
  .zfh-aside {
    padding: 32px 24px;
  }
  .zfh-donate-form .primary-btn,
  .zfh-donate-form .secondary-btn {
    width: 100%;
    margin: 8px 0 0;
  }
}

/* Chips that are links (the social row) keep the whole chip clickable. */
.zfh-tags li:has(> a) {
  padding: 0;
}

.zfh-tags li > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  color: inherit;
}

.zfh-tags--center {
  justify-content: center;
}

/* ==========================================================================
   5. Gallery
   The photos come in every aspect ratio, so the four-up grid used to end up
   ragged. Crop them to a common ratio and let the grid do its job.
   ========================================================================== */

.gallery-one {
  padding: 100px 0;
}

.gallery-one .row {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 24px;
}

.gallery-one__card {
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}

.gallery-one__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-one__card:hover img {
  transform: scale(1.06);
}

/* Four-up card sets sit in narrower columns, so ease the padding back. */
.zfh-grid--4 .zfh-card {
  padding: 32px 26px 28px;
}

.zfh-grid--4 .zfh-card__title {
  font-size: 19px;
}

/* Drops the bottom padding when the next section brings its own. */
.zfh-section--flush {
  padding-bottom: 0;
}

/* ==========================================================================
   6. Contact
   The theme deliberately hangs the photo off the left of its column, but that
   only works on very wide screens - below 1600px it just breaks the container.
   ========================================================================== */

@media (max-width: 1599px) {
  .contact-one--page .contact-one__image {
    float: none;
    margin-right: 0;
    max-width: 100%;
  }
}

/* Let the photo fill its column so it lines up with the form beside it. */
.contact-one--page .contact-one__image {
  height: 100%;
}

/* Direct child only - the badge logo and the decorative shape are also imgs
   inside .contact-one__image, and a blanket rule stretched the logo to 523px
   tall, right over the heading beside it. */
.contact-one--page .contact-one__image > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  border-radius: 20px;
}

/* The phone callout ships rotated -45deg, which only reads on the demo's dark
   corner image. Straighten it and give it its own panel instead. */
.contact-one--page .contact-one__image__info {
  position: absolute;
  right: auto;
  left: 24px;
  bottom: 24px;
  transform: none;
  padding: 22px 28px 22px 84px;
  border-radius: 18px;
  background-color: rgba(18, 47, 42, 0.92);
  backdrop-filter: blur(2px);
  max-width: calc(100% - 48px);
}

.contact-one--page .contact-one__image__info__icon {
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 44px;
  line-height: 1;
  color: var(--careox-secondary, #ffa415);
}

.contact-one--page .contact-one__image__info__title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* .contact-one--page normally darkens this text for a light background; it now
   sits on a dark panel, so put the white back. */
.contact-one--page .contact-one__image__info__text,
.contact-one--page .contact-one__image__info__text a {
  color: var(--careox-white, #fff);
  font-size: 19px;
  font-weight: 700;
}

/* Badge moved off the centre of the photo, where it sat over people's faces. */
.contact-one--page .contact-one__image__icon {
  left: auto;
  bottom: auto;
  right: -26px;
  top: 28px;
  margin: 0;
  width: 132px;
  height: 132px;
  border-width: 8px;
}

.contact-one--page .contact-one__image__icon img {
  width: auto;
  height: 84px;
  max-width: none;
}

@media (max-width: 991px) {
  .contact-one--page .contact-one__image__icon {
    display: none;
  }
}

/* ==========================================================================
   7. Blog archive
   The post list used to sit in a three-up carousel, so only part of it was
   ever visible. It is a grid now; these rules make the cards line up.
   ========================================================================== */

.blog-one__grid > [class*="col-"] {
  display: flex;
}

.blog-one__grid .blog-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.blog-one__grid .blog-card__image {
  aspect-ratio: 16 / 10;
  flex: none;
}

.blog-one__grid .blog-card__image img {
  height: 100%;
  object-fit: cover;
}

.blog-one__grid .blog-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-one__grid .blog-card__title {
  /* Titles run to very different lengths; cap them so every card's excerpt and
     read-more link start at the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-one__grid .blog-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-one__grid .blog-card__link {
  margin-top: auto;
}

/* The theme keeps post photos permanently desaturated. Let hovering bring the
   colour back, so the archive has some life in it. */
.blog-card__image img {
  transition: 0.5s, mix-blend-mode 0.4s;
}

.blog-card:hover .blog-card__image img {
  mix-blend-mode: normal;
}

/* Pair of buttons that should wrap rather than squash on narrow screens. */
.zfh-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.zfh-button-row .careox-btn i {
  font-size: 17px;
  margin-right: 9px;
}

/* Outline variant, for a secondary action next to the solid button. */
.careox-btn--ghost::before {
  background: transparent;
  border: 2px solid var(--careox-secondary, #ffa415);
}

.careox-btn--ghost:hover::before {
  opacity: 1;
  transform: none;
  background: var(--careox-secondary, #ffa415);
}

.careox-btn--ghost:hover {
  color: var(--careox-black, #122f2a);
}

.careox-btn--ghost::after {
  display: none;
}


/* ==========================================================================
   8. Home — hero slider
   The three slides ran to different heights (1254 / 958 / 1039px), so the two
   shorter ones left a white band under themselves where the owl stage had
   already been sized by the tallest. One height for all three, content centred.
   ========================================================================== */

.main-slider-one__item {
  display: flex;
  align-items: center;
  /* above the tallest slide's natural height, so all three match exactly */
  min-height: 800px;
  padding-top: 130px;
  padding-bottom: 130px;
}

.main-slider-one__item > .container {
  width: 100%;
}

/* Keep the copy clear of the masked photo on the right, and let the headline
   wrap on its own rather than on hard breaks. */
.main-slider-one__content {
  max-width: 620px;
}

.main-slider-one__title {
  font-size: 56px;
  line-height: 1.12;
  margin-bottom: 18px;
}

@media (max-width: 1400px) {
  .main-slider-one__content {
    max-width: 540px;
  }
  .main-slider-one__title {
    font-size: 48px;
  }
}

@media (max-width: 1199px) {
  .main-slider-one__content {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .main-slider-one__title {
    font-size: 38px;
  }
}

.main-slider-one__text {
  margin-bottom: 38px;
}

@media (max-width: 1199px) {
  .main-slider-one__item {
    min-height: 560px;
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

@media (max-width: 767px) {
  .main-slider-one__item {
    min-height: 0;
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* The vendor's demo backdrop is gone; a soft wash reads better behind the dark
   headline than the flat grey the theme falls back to. */
.main-slider-one__bg {
  background-image: linear-gradient(120deg, #eef5f4 0%, #f7fafa 42%, #fdf3ea 100%);
}

/* The masked photo on the right is faded in by an entrance animation that does
   not always land on the active slide, leaving the right half empty. */
.main-slider-one .owl-item.active .main-slider-one__layer,
.main-slider-one__layer {
  opacity: 1;
}

/* The theme blends the hero photo to luminosity against the white shape behind
   it, which renders it greyscale. These are photos of the people ZFH works
   with - they should be in colour. */
.main-slider-one__layer__inner {
  background-color: var(--careox-secondary, #ffa415);
}

.main-slider-one__layer__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

/* ==========================================================================
   9. Home — Mission / Vision / Core Values / Approach
   These were flat panels: a flat orange wash over the photo, centred cursive
   headings and long unbroken copy. The theme paints its overlay with ::after
   (::before is its hover ripple), so that is the hook to override.
   ========================================================================== */

.cta-one__content {
  border-radius: 22px;
  padding: 54px 46px;
  /* The bootstrap column stretches to the taller panel of the pair, but the
     panel inside kept its own height, so the row ended on a ragged step. */
  height: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  background-position: center 30%;
}

.cta-one__content::after {
  background-color: transparent;
  background-image: linear-gradient(
    to top,
    rgba(18, 47, 42, 0.96) 0%,
    rgba(18, 47, 42, 0.88) 40%,
    rgba(18, 47, 42, 0.45) 100%
  );
  transition: opacity 500ms ease;
}

.cta-one__content:hover::after {
  opacity: 0.9;
}

/* The theme gives the right-hand panel of each pair a different scrim and a
   different button fill; all four panels now read as one set. */
.cta-one__content--right::after {
  background-color: transparent;
  background-image: linear-gradient(
    to top,
    rgba(18, 47, 42, 0.96) 0%,
    rgba(18, 47, 42, 0.88) 40%,
    rgba(18, 47, 42, 0.45) 100%
  );
}

.cta-one__content--right .careox-btn {
  color: var(--careox-black, #122f2a);
}

.cta-one__content--right .careox-btn::before {
  background-color: var(--careox-white, #fff);
}

.cta-one__content--right .careox-btn::after {
  border-color: var(--careox-white, #fff);
}

.cta-one__content--right .careox-btn:hover {
  color: var(--careox-white, #fff);
}

.cta-one__title {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 16px;
  position: relative;
  padding-top: 18px;
}

/* Small accent rule above each heading, in place of the theme's flat wash. */
.cta-one__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background-color: var(--careox-secondary, #ffa415);
}

.cta-one__text {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 28px;
}

.cta-one__content .careox-btn {
  align-self: flex-start;
  padding: 12px 34px;
}

.cta-one .row {
  --bs-gutter-x: 26px;
  --bs-gutter-y: 26px;
}

.cta-one .container-fluid {
  max-width: 1500px;
  padding-left: 26px;
  padding-right: 26px;
}

/* The core-values panel lists six named values; it was one run-on paragraph. */
.cta-one__values {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 11px;
  position: relative;
  z-index: 2;
}

.cta-one__values li {
  position: relative;
  padding-left: 22px;
  color: rgba(var(--careox-white-rgb, 255, 255, 255), 0.85);
  font-size: 15px;
  line-height: 1.6;
}

.cta-one__values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--careox-secondary, #ffa415);
}

.cta-one__values strong {
  color: var(--careox-white, #fff);
  font-weight: 800;
}

/* The two rows are separate widgets, so the second would double the padding. */
.elementor-widget-careox-call-to-action + .elementor-widget-careox-call-to-action .cta-one {
  padding-top: 0;
  margin-top: 26px;
}

@media (max-width: 767px) {
  .cta-one__content {
    padding: 38px 26px;
    min-height: 340px;
  }
  .cta-one__title {
    font-size: 26px;
  }
}

/* ==========================================================================
   10. Home — "Impact So Far" counters
   Six items in a `justify-content: space-between` flex row wrapped into two
   ragged lines of different widths. A three-column grid lines them up.
   ========================================================================== */

.funfact-one__list.list-unstyled {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
  border-radius: 28px;
  padding: 64px 60px;
  box-shadow: 0 24px 70px rgba(18, 47, 42, 0.08);
}

@media (min-width: 1360px) {
  .funfact-one__list.list-unstyled {
    margin: 0;
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (max-width: 991px) {
  .funfact-one__list.list-unstyled {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 48px 36px;
    gap: 34px 24px;
  }
}

@media (max-width: 575px) {
  .funfact-one__list.list-unstyled {
    grid-template-columns: 1fr;
    padding: 36px 26px;
  }
}

.funfact-one__item {
  align-items: flex-start;
  gap: 18px;
}

.funfact-one__count {
  font-size: 38px;
  line-height: 1.1;
}

.funfact-one__text {
  font-size: 15px;
  line-height: 1.65;
}

/* The theme pulls this block up over the section below it. */
.funfact-one {
  margin-bottom: -90px;
}

/* ==========================================================================
   11. Home — "Watch Us in Action" video band
   ========================================================================== */

/* The band below is pulled up 260px over this one; the bottom padding has to
   clear that, or the overlap cuts straight through the Discover More button. */
.video-one {
  padding: 150px 0 340px;
}

.video-one__bg {
  background-position: center 30%;
}

/* Photo alone left the white type barely legible; the band needs a scrim. */
.video-one__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(18, 47, 42, 0.78) 0%,
    rgba(18, 47, 42, 0.72) 45%,
    rgba(18, 47, 42, 0.9) 100%
  );
}

.video-one .container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.video-one .video-popup {
  margin: 0 auto 34px;
}

.video-one__sub-title {
  color: var(--careox-secondary, #ffa415);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
}

.video-one__title {
  color: var(--careox-white, #fff);
  font-size: 46px;
  line-height: 1.15;
  font-weight: 900;
  margin: 0 0 14px;
}

.video-one__text {
  color: rgba(var(--careox-white-rgb, 255, 255, 255), 0.82);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 34px;
}

@media (max-width: 767px) {
  .video-one__title {
    font-size: 32px;
  }
  .video-one {
    padding: 90px 0 260px;
  }
}

/* ==========================================================================
   12. Home — the dark "ways to help" band beneath the video
   It was a flat dark slab with three thin pills floating on it. Give it the
   photo backdrop it was always meant to have, plus a heading.
   ========================================================================== */

.feature-one {
  padding: 360px 0 140px;
  margin-top: -260px;
  /* keeps the ::before scrim inside this section's own stacking context */
  isolation: isolate;
}

.feature-one__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0.22;
}

/* Keeps the band dark enough for white type wherever the photo is bright. */
.feature-one::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(18, 47, 42, 0.55) 0%,
    rgba(18, 47, 42, 0.82) 60%,
    rgba(18, 47, 42, 0.94) 100%
  );
  z-index: 1;
}

/* Section headings default to the dark body colour, which vanished here. */
.feature-one .sec-title__title {
  color: var(--careox-white, #fff);
  font-size: 36px;
}

.feature-one .sec-title__tagline {
  color: var(--careox-secondary, #ffa415);
}

.feature-one .sec-title__tagline__border {
  background-color: var(--careox-secondary, #ffa415);
}

.feature-one .sec-title {
  margin-bottom: 54px;
}

/* The --about variant is transparent and sits on the light page background, so
   it wants neither the dark scrim nor the white heading. */
.feature-one--about::before {
  display: none;
}

.feature-one--about .sec-title__title {
  color: var(--careox-black, #122f2a);
}

.feature-one--about .sec-title__tagline {
  color: var(--careox-base, #ff5528);
}

.feature-one--about .sec-title__tagline__border {
  background-color: var(--careox-base, #ff5528);
}

.feature-one--about .feature-one__item {
  border: 1px solid rgba(18, 47, 42, 0.07);
  box-shadow: 0 14px 36px rgba(18, 47, 42, 0.08);
}

.feature-one .container {
  position: relative;
  z-index: 2;
}

.feature-one__item {
  max-width: none;
  width: 100%;
  min-height: 132px;
  padding: 26px 30px 26px 119px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.feature-one__item__title {
  font-size: 20px;
  margin-bottom: 4px;
}

.feature-one__item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.feature-one__item:hover .feature-one__item__title,
.feature-one__item:hover .feature-one__item__text {
  color: var(--careox-white, #fff);
}

/* ==========================================================================
   13. Home — Our Supporters
   ========================================================================== */

.client-carousel {
  border-top: none;
  padding: 100px 0;
  background-color: var(--careox-gray, #f1f6f7);
}

.client-carousel__one__item {
  background-color: var(--careox-white, #fff);
  border-radius: 16px;
  padding: 28px 24px;
  min-height: 128px;
  border: 1px solid rgba(18, 47, 42, 0.07);
  transition: box-shadow 400ms ease, transform 400ms ease;
}

.client-carousel__one__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(18, 47, 42, 0.1);
}

.client-carousel__one__item img {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ==========================================================================
   14. Home — map
   ========================================================================== */

.contact-map {
  padding: 0 0 100px;
  background-color: var(--careox-gray, #f1f6f7);
}

.contact-map .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1500px;
}

.google-map__contact {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(18, 47, 42, 0.12);
}

.google-map iframe {
  height: 520px;
  /* the theme desaturates the map into the page; at full size that just reads
     as a broken screenshot, so let it keep its own colours */
  mix-blend-mode: normal;
}

/* Address card floating over the map. */
.map-card {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 2;
  width: min(360px, calc(100% - 80px));
  background-color: var(--careox-white, #fff);
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 20px 46px rgba(18, 47, 42, 0.18);
}

.map-card__title {
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--careox-black, #122f2a);
}

.map-card__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.map-card__list li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--careox-text, #636363);
}

.map-card__list li i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 17px;
  color: var(--careox-base, #ff5528);
}

.map-card__list a {
  color: inherit;
}

.map-card__list a:hover {
  color: var(--careox-base, #ff5528);
}

@media (max-width: 767px) {
  .map-card {
    position: static;
    width: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .google-map iframe {
    height: 360px;
  }
  .contact-map {
    padding-bottom: 60px;
  }
}

/* ==========================================================================
   15. Footer
   Elementor sized the four columns 33% / 15% / 25% / 25% with `nowrap` and a
   stray 30px left margin on one widget, so the links column was squeezed and
   nothing lined up. Lay it out as a grid instead.
   ========================================================================== */

.main-footer__middle .e-con-inner {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1.6fr;
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Elementor sets these widths and margins inline via custom properties. */
.main-footer__middle .e-con-inner > .e-con {
  --width: auto;
  --margin-left: 0;
  --margin-right: 0;
  width: auto;
  margin: 0;
}

.main-footer__middle .elementor-widget-footer-nav-menu > .elementor-widget-container {
  margin: 0;
}

@media (max-width: 991px) {
  .main-footer__middle .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
}

@media (max-width: 575px) {
  .main-footer__middle .e-con-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer-widget {
  margin-bottom: 0;
}

.footer-widget__title {
  margin-bottom: 22px;
  padding-bottom: 14px;
  position: relative;
}

.footer-widget__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--careox-secondary, #ffa415);
}

.footer-widget__logo img {
  /* flex item, so it needs flex:none or it shrinks to nothing */
  flex: none;
  height: 62px;
  width: auto;
  max-width: none;
}

.footer-widget__text {
  max-width: 380px;
}

.footer-widget__info li {
  line-height: 1.7;
}

/* The address and email wrapped mid-word because the theme hard-breaks them. */
.footer-widget__info li {
  overflow-wrap: anywhere;
}

/* The hotline is two tel: links; keep each number whole and the comma with it. */
.footer-widget__box__text a {
  white-space: nowrap;
}

.footer-widget__social {
  margin-top: 26px;
}

/* Newsletter row: the heading block and the form were not on the same line. */
.main-footer__top {
  padding: 46px 0;
  margin-bottom: 56px;
}

.main-footer__top .row {
  align-items: center;
}

.main-footer__newsletter {
  max-width: 480px;
  margin-left: auto;
}

@media (max-width: 767px) {
  .main-footer__newsletter {
    margin-left: 0;
  }
}

.main-footer__bottom {
  margin-top: 46px;
}

/* ==========================================================================
   16. 404
   The page offered a WordPress search box that cannot work on a static site.
   Quick links to the pages people actually want are more use.
   ========================================================================== */

.error-404__image img {
  max-width: 420px;
  height: auto;
}

.error-404__title {
  font-size: 34px;
  margin-bottom: 12px;
}

.error-404__text {
  max-width: 560px;
  margin: 0 auto 34px;
}

.error-404__links {
  list-style: none;
  padding: 0;
  margin: 0 auto 38px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 720px;
}

.error-404__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 40px;
  background-color: var(--careox-white, #fff);
  border: 1px solid rgba(18, 47, 42, 0.12);
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--careox-black, #122f2a);
  transition: all 350ms ease;
}

.error-404__links a i {
  color: var(--careox-base, #ff5528);
  transition: color 350ms ease;
}

.error-404__links a:hover {
  background-color: var(--careox-black, #122f2a);
  border-color: var(--careox-black, #122f2a);
  color: var(--careox-white, #fff);
}

.error-404__links a:hover i {
  color: var(--careox-secondary, #ffa415);
}

/* ==========================================================================
   17. Blog posts
   Two articles were pasted as a single <p> with a <br/> at every source line,
   so the copy re-wrapped at the original document's column on every screen.
   They are real paragraphs, headings and lists now; these style them.
   ========================================================================== */

/* Three of the five posts use the raw WordPress paragraph class, so key the
   body type off the article wrapper rather than one class. */
.blog-details__content p,
.blog-details__text {
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 22px;
}

.blog-details__content ol.wp-block-list,
.blog-details__content ul.wp-block-list {
  margin: 0 0 26px;
  padding-left: 22px;
  display: grid;
  gap: 12px;
}

.blog-details__content ol.wp-block-list li,
.blog-details__content ul.wp-block-list li {
  font-size: 17px;
  line-height: 1.75;
  color: var(--careox-text, #636363);
}

/* Standfirst: the opening line of each article. */
.blog-details__content p.blog-details__text--lead,
.blog-details__text--lead {
  font-size: 21px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--careox-black, #122f2a);
  margin-bottom: 28px;
}

/* Closing call to action. */
.blog-details__content p.blog-details__text--kicker,
.blog-details__text--kicker {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--careox-black, #122f2a);
  border-left: 4px solid var(--careox-secondary, #ffa415);
  padding-left: 20px;
  margin-top: 34px;
}

.blog-details__heading {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--careox-black, #122f2a);
  margin: 40px 0 18px;
}

.blog-details__heading strong {
  font-weight: inherit;
}

.blog-details__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.blog-details__list li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--careox-text, #636363);
}

.blog-details__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--careox-base, #ff5528);
}

/* These items keep their own "1." / "✓" prefixes in the copy, so no marker. */
.blog-details__list--numbered,
.blog-details__list--tick {
  padding-left: 4px;
}

.blog-details__list--numbered li,
.blog-details__list--tick li {
  padding-left: 0;
}

.blog-details__list--numbered li::before,
.blog-details__list--tick li::before {
  display: none;
}

.blog-details__list--numbered li {
  padding-left: 26px;
  text-indent: -26px;
}

@media (min-width: 1200px) {
  .blog-details__list {
    padding-right: 50px;
  }
}

/* Sidebar: the two dead WordPress search widgets are gone; tidy what is left. */
.sidebar__single {
  margin-bottom: 30px;
}

/* The two decorative shapes over the video band render as hard orange claws
   across the photo; the band reads better without them. */
.video-one__shape-one,
.video-one__shape-two {
  display: none;
}

/* ==========================================================================
   18. About — "Donate to ..." strip
   All four cards used the same photo and rendered at whatever size the file
   happened to be, so the row was ragged. One ratio, one crop, labels that are
   readable instead of hidden until hover.
   ========================================================================== */

.instagram-one {
  padding: 0 5px 40px;
}

.instagram-one a {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
}

.instagram-one a img {
  height: 100%;
  object-fit: cover;
}

/* The theme's hover overlay points at a shape image that is not in this build;
   a gradient does the same job and keeps the labels legible at rest. */
.instagram-one a::after {
  background-image: linear-gradient(
    to top,
    rgba(18, 47, 42, 0.92) 0%,
    rgba(18, 47, 42, 0.55) 55%,
    rgba(18, 47, 42, 0) 100%
  );
  opacity: 1;
  visibility: visible;
  height: 62%;
}

.instagram-one a:hover::after {
  height: 72%;
}

.instagram-one__sub-title,
.instagram-one__title {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.instagram-one__sub-title {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--careox-secondary, #ffa415);
  bottom: 52px;
}

.instagram-one__title {
  font-size: 22px;
  bottom: 22px;
}

/* ==========================================================================
   19. Team carousel
   The portraits come in different aspect ratios, so each card started at a
   different height and the row stepped down like a staircase. Crop to one
   ratio and let the cards fill the track.
   ========================================================================== */

.team-one__carousel .owl-stage {
  display: flex;
}

.team-one__carousel .owl-item {
  display: flex;
  height: auto;
}

.team-one__carousel .item {
  display: flex;
  width: 100%;
}

.team-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.team-card__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex: none;
}

.team-card__image img {
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.team-card__content {
  flex: 1 1 auto;
  /* the round + button sits bottom-right; keep the job title clear of it */
  padding-right: 78px;
}

.team-card__designation {
  margin-bottom: 0;
}

/* ==========================================================================
   20. About — "at a glance" card
   The image column ran ~640px shorter than the copy beside it, leaving a large
   hole under the photos. This fills it with facts already stated on the page.
   ========================================================================== */

.zfh-facts {
  margin-top: 40px;
  background-color: var(--careox-gray, #f1f6f7);
  border-radius: 22px;
  padding: 38px 34px;
  border: 1px solid rgba(18, 47, 42, 0.06);
}

.zfh-facts__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--careox-black, #122f2a);
  margin: 0 0 24px;
  padding-bottom: 14px;
  position: relative;
}

.zfh-facts__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--careox-secondary, #ffa415);
}

.zfh-facts__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.zfh-facts__list li {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: baseline;
  gap: 16px;
}

.zfh-facts__value {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--careox-base, #ff5528);
}

.zfh-facts__label {
  font-size: 15px;
  line-height: 1.6;
  color: var(--careox-text, #636363);
}

@media (max-width: 575px) {
  .zfh-facts {
    padding: 28px 22px;
  }
  .zfh-facts__list li {
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }
  .zfh-facts__value {
    font-size: 22px;
  }
}

/* ==========================================================================
   21. Donate form — the closing row
   The Paystack stylesheet floats both buttons right, so the card logos, the
   "* are compulsory" note and the buttons scattered across the row with Reset
   sitting to the right of Donate.
   ========================================================================== */

.zfh-donate-form .j-forms .unit:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(18, 47, 42, 0.1);
}

.zfh-donate-form .j-forms .unit:last-child br {
  display: none;
}

.zfh-donate-form .j-forms .unit:last-child > small {
  order: 1;
  flex: 1 0 100%;
  font-size: 13px;
  color: var(--careox-text, #636363);
  margin-top: 12px;
}

.zfh-donate-form .paystack-cardlogos {
  order: 2;
  margin: 0;
  margin-right: auto;
}

.zfh-donate-form .primary-btn {
  order: 3;
  margin-left: 0;
}

.zfh-donate-form .secondary-btn {
  order: 4;
}

.zfh-donate-form .j-forms .unit:last-child button {
  float: none;
}

@media (max-width: 575px) {
  .zfh-donate-form .paystack-cardlogos {
    margin-right: 0;
    flex: 1 0 100%;
  }
  .zfh-donate-form .primary-btn,
  .zfh-donate-form .secondary-btn {
    flex: 1 1 auto;
  }
}

/* The plugin draws its own dropdown arrow in an empty <i> next to each select;
   with our own arrow on the select that renders as a stray box. */
.zfh-donate-form .j-forms .select > i,
.zfh-donate-form .j-forms .input > i {
  display: none;
}

/* The page's inline customizer CSS loads after this file, so this needs the
   extra weight to win. */
.zfh-donate-form + .paystack-secure-badge strong,
.paystack-secure-badge strong {
  color: var(--careox-black, #122f2a) !important;
}

/* ==========================================================================
   22. Gallery — video row
   Three ZFH videos, opened in the theme's existing lightbox (.video-popup).
   ========================================================================== */

.zfh-videos {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.zfh-video {
  display: block;
  color: inherit;
}

.zfh-video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--careox-black, #122f2a);
}

.zfh-video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease, opacity 400ms ease;
  opacity: 0.82;
}

.zfh-video:hover .zfh-video__frame img {
  transform: scale(1.06);
  opacity: 1;
}

.zfh-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--careox-black, #122f2a);
  background-color: var(--careox-white, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: all 350ms ease;
}

.zfh-video:hover .zfh-video__play {
  background-color: var(--careox-secondary, #ffa415);
  color: var(--careox-white, #fff);
}

.zfh-video__title {
  display: block;
  margin-top: 18px;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--careox-black, #122f2a);
  transition: color 300ms ease;
}

.zfh-video:hover .zfh-video__title {
  color: var(--careox-base, #ff5528);
}

/* ==========================================================================
   23. Team section spacing
   The heading sat tight under the band above it.
   ========================================================================== */

/* The about page wraps this in .team-one--about, and the theme zeroes the
   padding there with `.team-one--about .team-one` - which out-specifies a bare
   .team-one rule, so both selectors need the value. */
.team-one,
.team-one--about .team-one {
  padding: 150px 0 120px;
}

@media (max-width: 767px) {
  .team-one,
  .team-one--about .team-one {
    padding: 90px 0 80px;
  }
}

.team-one .sec-title {
  margin-bottom: 56px;
}

/* Author / commenter avatars are the ZFH mark on a tinted disc, since the
   remote Gravatar images are gone. */
img.avatar {
  border-radius: 50%;
  background-color: var(--careox-gray, #f1f6f7);
  object-fit: contain;
  padding: 3px;
}

/* The Paystack stylesheet set Open Sans on the form; it now inherits the site's
   own typeface so the donate page matches every other form. */
.zfh-donate-form,
.zfh-donate-form input,
.zfh-donate-form select,
.zfh-donate-form button,
.zfh-donate-form label,
.zfh-donate-form small {
  font-family: var(--careox-font, "Rubik", sans-serif);
}

.zfh-donate-form .label,
.zfh-donate-form .primary-btn,
.zfh-donate-form .secondary-btn {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
}

/* ==========================================================================
   24. Impact page
   ========================================================================== */

/* The counters are the hero of this page, not an overlap strip like on home. */
.funfact-one--impact {
  margin-bottom: 0;
  margin-top: 50px;
}

.funfact-one--impact .funfact-one__list.list-unstyled {
  background-color: var(--careox-gray, #f1f6f7);
  box-shadow: none;
  border: 1px solid rgba(18, 47, 42, 0.07);
}

/* Programme acronym, above the full name. */
.zfh-card__tag {
  display: inline-block;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color, var(--careox-base, #ff5528));
  margin-bottom: 8px;
}

.zfh-grid--4 .zfh-card__title {
  font-size: 17px;
  line-height: 1.4;
}

.zfh-card__link {
  margin-top: 18px;
}

.zfh-card__link a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--accent-color, var(--careox-base, #ff5528));
  transition: gap 300ms ease;
}

.zfh-card__link a:hover {
  gap: 15px;
}

/* --- State cards --------------------------------------------------------- */

.zfh-states {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .zfh-states {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .zfh-states {
    grid-template-columns: 1fr;
  }
}

.zfh-state {
  position: relative;
  text-align: center;
  background-color: var(--careox-white, #fff);
  border: 1px solid rgba(18, 47, 42, 0.07);
  border-radius: 20px;
  padding: 40px 28px 34px;
  box-shadow: 0 12px 40px rgba(18, 47, 42, 0.07);
  transition: transform 400ms ease, box-shadow 400ms ease;
}

.zfh-state:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(18, 47, 42, 0.12);
}

.zfh-state__map {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 24px;
}

.zfh-state__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.zfh-state__count {
  position: absolute;
  left: -10px;
  bottom: 6px;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--careox-white, #fff);
  box-shadow: 0 8px 20px rgba(18, 47, 42, 0.15);
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-size: 15px;
  font-weight: 900;
  color: var(--accent-color, var(--careox-base, #ff5528));
}

.zfh-state__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--careox-black, #122f2a);
}

.zfh-state__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--careox-text, #636363);
}

/* ==========================================================================
   25. Form feedback
   Inline responses for the Paystack donation flow and the Formspree forms.
   ========================================================================== */

.zfh-notice {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid transparent;
  font-size: 15px;
  line-height: 1.65;
}

.zfh-notice code {
  background-color: rgba(18, 47, 42, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
}

.zfh-notice a {
  text-decoration: underline;
}

.zfh-notice--success {
  background-color: rgba(68, 200, 149, 0.1);
  border-left-color: #44c895;
  color: #17694c;
}

.zfh-notice--error {
  background-color: rgba(255, 85, 40, 0.08);
  border-left-color: var(--careox-base, #ff5528);
  color: #9c2c10;
}

.zfh-notice--info {
  background-color: rgba(255, 164, 21, 0.12);
  border-left-color: var(--careox-secondary, #ffa415);
  color: #7a5205;
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never shown to a person. */
.zfh-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Disabled state while a submit is in flight. */
.zfh-form button[type="submit"][disabled],
.paystack-form .primary-btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.main-footer__newsletter .zfh-notice {
  color: var(--careox-white, #fff);
}

.main-footer__newsletter .zfh-notice--success {
  background-color: rgba(68, 200, 149, 0.18);
}

/* ==========================================================================
   26. Thank-you page
   Where the contact and volunteer forms land after a successful submission.
   ========================================================================== */

.page-header--thanks {
  padding-top: 110px;
  padding-bottom: 110px;
}

.zfh-thanks {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  background-color: var(--careox-white, #fff);
  border: 1px solid rgba(18, 47, 42, 0.07);
  border-radius: 26px;
  padding: 66px 56px 56px;
  box-shadow: 0 26px 70px rgba(18, 47, 42, 0.09);
  position: relative;
}

/* Tick drawn in CSS so it never depends on an icon font being present. */
.zfh-thanks__mark {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: rgba(68, 200, 149, 0.14);
  display: block;
  margin: 0 auto 30px;
  position: relative;
}

.zfh-thanks__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 38px;
  margin: -23px 0 0 -10px;
  border: solid #2aa877;
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
  transform-origin: center;
  animation: zfhTick 500ms ease 120ms both;
}

@keyframes zfhTick {
  from { opacity: 0; transform: rotate(45deg) scale(0.4); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .zfh-thanks__mark::before { animation: none; }
}

.zfh-thanks__title {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--careox-black, #122f2a);
  margin: 0 0 16px;
}

.zfh-thanks__text {
  font-size: 18px;
  line-height: 1.8;
  color: var(--careox-text, #636363);
  margin: 0 auto 44px;
  max-width: 620px;
}

/* What happens next, as three steps. */
.zfh-thanks__steps {
  list-style: none;
  margin: 0 0 40px;
  padding: 36px 0 0;
  border-top: 1px solid rgba(18, 47, 42, 0.08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}

.zfh-thanks__steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
}

.zfh-thanks__steps__num {
  grid-row: span 2;
  align-self: start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 900;
  font-size: 16px;
  color: var(--careox-white, #fff);
  background-color: var(--careox-secondary, #ffa415);
}

.zfh-thanks__steps li:nth-child(2) .zfh-thanks__steps__num { background-color: var(--careox-base, #ff5528); }
.zfh-thanks__steps li:nth-child(3) .zfh-thanks__steps__num { background-color: #8139e7; }

.zfh-thanks__steps__label {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 800;
  font-size: 16px;
  color: var(--careox-black, #122f2a);
}

.zfh-thanks__steps__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--careox-text, #636363);
}

.zfh-thanks__aside {
  font-size: 15px;
  line-height: 1.7;
  color: var(--careox-text, #636363);
  margin: 0 0 34px;
}

.zfh-thanks__aside a {
  color: var(--careox-base, #ff5528);
  font-weight: 700;
}

.zfh-thanks__actions {
  justify-content: center;
}

/* Outline button for a light background. */
.careox-btn--ghost-dark::before {
  background: transparent;
  border: 2px solid var(--careox-black, #122f2a);
}

.careox-btn--ghost-dark {
  color: var(--careox-black, #122f2a);
}

.careox-btn--ghost-dark::after {
  display: none;
}

.careox-btn--ghost-dark:hover::before {
  opacity: 1;
  transform: none;
  background: var(--careox-black, #122f2a);
}

.careox-btn--ghost-dark:hover {
  color: var(--careox-white, #fff);
}

@media (max-width: 767px) {
  .zfh-thanks {
    padding: 44px 26px 40px;
    border-radius: 20px;
  }
  .zfh-thanks__title {
    font-size: 26px;
  }
  .zfh-thanks__text {
    font-size: 16px;
    margin-bottom: 32px;
  }
  .zfh-thanks__steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   27. Footer newsletter
   The field is type="email" now (validation, and the right keyboard on a
   phone). The theme only styles input[type=text], so carry its styling over
   rather than give the email type up.
   ========================================================================== */

.main-footer__newsletter input[type="email"] {
  width: 100%;
  display: block;
  border: none;
  outline: none;
  height: 60px;
  background-color: var(--careox-white, #fff);
  color: var(--careox-text, #636363);
  font-size: 16px;
  font-weight: 400;
  padding-left: 30px;
  padding-right: 60px;
  transition: all 500ms ease;
  border-radius: 5px;
}

.main-footer__newsletter input[type="email"]:focus {
  color: var(--careox-black, #122f2a);
}

.main-footer__newsletter input[type="email"]:invalid:not(:placeholder-shown) {
  box-shadow: inset 0 0 0 2px rgba(255, 85, 40, 0.55);
}

/* Receipt block on the thank-you page, shown only after a donation. */
.zfh-receipt {
  max-width: 460px;
  margin: 0 auto 40px;
  text-align: left;
  background-color: var(--careox-gray, #f1f6f7);
  border: 1px solid rgba(18, 47, 42, 0.08);
  border-radius: 16px;
  padding: 8px 26px;
}

.zfh-receipt[hidden] {
  display: none;
}

.zfh-receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(18, 47, 42, 0.08);
}

.zfh-receipt__row:last-child {
  border-bottom: none;
}

.zfh-receipt__k {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--careox-text, #636363);
  flex: none;
}

.zfh-receipt__v {
  font-family: var(--careox-heading-font, "Nunito Sans", sans-serif);
  font-weight: 800;
  font-size: 18px;
  color: var(--careox-black, #122f2a);
  text-align: right;
}

.zfh-receipt__v--ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .zfh-receipt__row {
    flex-direction: column;
    gap: 4px;
  }
  .zfh-receipt__v {
    text-align: left;
  }
}