/* ==========================================================================
   MAJI.CSS - a fresh, block-based design language for Amref WASH Footprint
   Inspired by projectmaji.org: big type, bold block sections, oversized
   numbers, large rounded cards, generous whitespace.

   This file is loaded LAST. It deliberately overrides and neutralises the
   old "Charitics" theme rather than living inside it - the goal is an
   entirely new outlook, not a reskin.

   Palette: Amref red kept as an accent; Maji deep blue is the lead colour,
   warm gold is the highlight.
   ========================================================================== */

:root {
  /* Brand - Amref RED + BLACK lead. Blue/gold are minimal accents only. */
  --c-red: #d21034;       /* Amref red - PRIMARY */
  --c-red-dark: #a50c28;
  --c-red-soft: #fce9ed;  /* faint red tint for soft surfaces */
  --c-black: #0c0e12;     /* deep black - footer base, scrims */
  --c-ink: #14171c;       /* near-black - dark blocks + text */
  --c-charcoal: #23272f;  /* charcoal - gradient partner for black blocks */

  /* the old "navy/blue" accent tokens now resolve to RED so every former
     blue accent (eyebrows, links, CTAs, stat numbers) reads as Amref red,
     and every former navy block reads as black/charcoal. */
  --c-navy: #14171c;      /* dark block colour -> near-black */
  --c-blue: #d21034;      /* accent -> red */
  --c-blue-2: #a50c28;
  --c-blue-soft: #fce9ed; /* soft accent surface -> faint red */

  /* gold kept defined but used only as a whisper of accent */
  --c-gold: #f6a500;
  --c-gold-soft: #ffcb67;

  --c-body: #4b5159;      /* body grey (neutral, not blue) */
  --c-paper: #f6f6f7;     /* neutral light section band */
  --c-line: #e6e6e9;

  /* repoint legacy theme tokens so leftover rules don't fight us */
  --ul-primary: #d21034;
  --ul-secondary: #14171c;
  --ul-black: #14171c;
  --ul-p: #4b5159;
  --ul-gray: #4b5159;
  --ul-gray3: #f6f6f7;
  --ul-c3: #fce9ed;
  --ul-c4: #f6f6f7;

  /* Type */
  --font-primary: "Mulish", sans-serif;
  --font-quicksand: "Mulish", sans-serif;
  --font-caveat: "Mulish", sans-serif;
  --font-display: "Montserrat", "Mulish", sans-serif;

  /* Shape */
  --r: 20px;
  --r-lg: 32px;
  --r-pill: 999px;
  --shadow: 0 30px 60px -28px rgba(22, 48, 107, 0.35);
  --shadow-sm: 0 14px 34px -18px rgba(22, 48, 107, 0.3);
  --maxw: 1240px;
}

/* --------------------------------------------------------------------------
   GLOBAL RESETS over the old theme
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-primary);
  color: var(--c-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
  background: #fff;
  position: static !important;   /* old theme set body{position:fixed} */
}

h1, h2, h3, h4, h5, h6,
.ul-section-title, .ul-banner-title, .ul-breadcrumb-title,
.ul-service-details-title, .ul-event-title, .ul-blog-title {
  font-family: var(--font-display) !important;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-weight: 800;
}

a { color: var(--c-blue); }
a:hover { color: var(--c-navy); }

img { max-width: 100%; }

/* Kill the old theme's decorative clutter for a clean block look */
.ul-header .logo-container::before,
.ul-header .logo-container::after,
.ul-footer-vectors,
.ul-about-vectors,
.ul-banner-txt-vector,
.ul-banner-vectors,
.ul-banner-img-vectors,
.ul-why-join-wrapper::before,
.ul-section-sub-title::before,
.ul-footer-widget-title::before,
.ul-footer-widget-title::after,
.ul-footer-top,
.ul-footer-middle::before { display: none !important; }

/* Layout container */
.rb-container,
.ul-container,
.ul-banner-container,
.ul-footer-container,
.ul-testimonial-container,
.ul-blogs-container {
  width: min(100% - 40px, var(--maxw)) !important;
  max-width: var(--maxw) !important;
  margin-inline: auto !important;
}

/* Section rhythm - big, airy blocks */
.ul-section-spacing,
.rb-section {
  padding-top: clamp(64px, 8vw, 130px) !important;
  padding-bottom: clamp(64px, 8vw, 130px) !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.rb-eyebrow,
.ul-section-sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  font-size: clamp(12px, 0.85vw, 14px);
  color: var(--c-blue);
  margin-bottom: 18px;
}
.rb-eyebrow::before,
.ul-section-sub-title.rb-eyebrow::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 16px;
  background: url("/img/sub-title-vector.svg") no-repeat center center;
  background-size: contain;
}

.rb-h1, .ul-banner-title {
  font-size: clamp(40px, 6.2vw, 92px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
}
.rb-h2,
.ul-section-title,
.ul-breadcrumb-title {
  font-size: clamp(30px, 4.4vw, 60px) !important;
  font-weight: 800 !important;
}
.rb-lead {
  font-size: clamp(16px, 1.25vw, 21px);
  color: var(--c-body);
  max-width: 60ch;
}
.rb-text-light { color: rgba(255,255,255,0.86) !important; }

/* --------------------------------------------------------------------------
   BUTTONS - big bold pills
   -------------------------------------------------------------------------- */
.rb-btn,
.ul-btn,
.ul-blog-btn,
.ul-event .ul-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 0.95vw, 16px);
  height: auto;
  padding: clamp(14px, 1.1vw, 18px) clamp(24px, 1.8vw, 34px) !important;
  border-radius: var(--r-pill) !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  line-height: 1;
}
.rb-btn i, .ul-btn i { all: unset; font-family: inherit; }

/* primary -> Amref red */
.rb-btn--gold, .rb-btn--red, .ul-btn {
  background: var(--c-red) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm);
}
.rb-btn--gold:hover, .rb-btn--red:hover, .ul-btn:hover {
  background: var(--c-ink) !important;
  color: #fff !important;
  transform: translateY(-3px);
  border-color: transparent !important;
}
/* secondary -> black */
.rb-btn--blue {
  background: var(--c-ink);
  color: #fff;
}
.rb-btn--blue:hover { background: var(--c-red); color: #fff; transform: translateY(-3px); }

.rb-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.rb-btn--ghost:hover { background: #fff; color: var(--c-navy); transform: translateY(-3px); }

.rb-btn--outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-line);
}
.rb-btn--outline:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

/* --------------------------------------------------------------------------
   NAVBAR
   -------------------------------------------------------------------------- */
.ul-header-bottom { padding: 14px 0; }
.ul-header-bottom.sticky {
  background: #fff !important;
  box-shadow: 0 10px 30px -16px rgba(22,48,107,0.3) !important;
}
.ul-header-bottom-wrapper { gap: 28px !important; }
.ul-header-nav { gap: clamp(20px, 2vw, 38px) !important; }
.ul-header-nav a,
.ul-header-nav a:not([href]):not([class]) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff !important;          /* over the dark hero/breadcrumb by default */
}
.ul-header-nav a:hover,
.ul-header-nav a:not([href]):hover { color: var(--c-red) !important; }
/* once the white sticky bar appears, links go dark */
.ul-header-bottom.sticky .ul-header-nav a,
.ul-header-bottom.sticky .ul-header-nav a:not([href]):not([class]) { color: var(--c-ink) !important; }
.ul-header-bottom.sticky .ul-header-nav a:hover { color: var(--c-blue) !important; }
.ul-header-actions button { color: #fff; }
.ul-header-bottom.sticky .ul-header-actions button { color: var(--c-ink); }
.logo-container img { max-height: 56px; width: auto; }

/* The header sits transparent over a dark hero on every page, so use the
   light logos by default and swap to the standard logos once the white
   sticky bar appears. Scoped to the header bar so the white mobile sidebar
   keeps its dark/standard logo. (The theme only did this for .home-page.) */
.ul-header-bottom .logo-light { display: block !important; max-height: 56px; width: auto; }
.ul-header-bottom .logo-standard { display: none !important; }
.ul-header-bottom.sticky .logo-light { display: none !important; }
.ul-header-bottom.sticky .logo-standard { display: block !important; max-height: 56px; width: auto; }
@media (max-width: 991px) {
  /* mobile: nav lives in the off-canvas sidebar on a light surface */
  .to-go-to-sidebar-in-mobile .ul-header-nav a { color: var(--c-ink) !important; }
}

.ul-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-red);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.ul-nav-cta:hover { background: var(--c-ink); color: #fff !important; transform: translateY(-2px); }

.ul-header-submenu { border-radius: 14px !important; box-shadow: var(--shadow) !important; }
/* The dropdown panel always sits on a white surface, so its links must read dark
   in BOTH header states - not the white the top-level nav uses over the dark hero.
   (Without this, the items are white-on-white before the page is scrolled.) */
.ul-header-bottom .ul-header-submenu li a,
.ul-header-bottom.sticky .ul-header-submenu li a { color: var(--c-ink) !important; }
.ul-header-bottom .ul-header-submenu li a:hover,
.ul-header-bottom.sticky .ul-header-submenu li a:hover { color: var(--c-blue) !important; }

/* --------------------------------------------------------------------------
   HERO (home swiper banner) -> big block hero
   -------------------------------------------------------------------------- */
.ul-banner, .ul-banner-2 { background: var(--c-navy); }
.ul-banner-2-slide { min-height: clamp(560px, 82vh, 880px); display: flex; align-items: center; }
.ul-banner-2-slide-bg-img { filter: saturate(1.05); }
.ul-banner-2-slide::before {
  background: linear-gradient(90deg, rgba(8,9,12,0.92) 0%, rgba(8,9,12,0.7) 42%, rgba(8,9,12,0.22) 100%) !important;
  opacity: 1 !important;
}
.ul-banner-txt { position: relative; z-index: 2; max-width: 820px; }
.ul-banner-2-slide .ul-banner-title { color: #fff !important; }
.ul-banner-descr {
  color: rgba(255,255,255,0.9) !important;
  font-size: clamp(16px, 1.25vw, 21px) !important;
  max-width: 56ch;
  margin-top: 22px !important;
}
.ul-banner-btns { margin-top: 34px !important; display: flex; gap: 14px; flex-wrap: wrap; }

/* hero thumb slider chips */
.ul-banner-2-thumb-slider img { border-radius: 14px; }

/* --------------------------------------------------------------------------
   BREADCRUMB -> page hero block
   -------------------------------------------------------------------------- */
.ul-breadcrumb {
  background-color: var(--c-navy) !important;
  background-size: cover !important;
  background-position: center !important;
  padding: clamp(120px, 16vw, 230px) 0 clamp(70px, 9vw, 130px) !important;
  text-align: left !important;
}
/* Lighter, directional tint (matches the .rb-phero project hero) so the
   underlying header image stays visible while left-aligned text stays legible. */
.ul-breadcrumb::before {
  background:
    linear-gradient(rgba(8,9,12,0.18), rgba(8,9,12,0.18)),
    linear-gradient(90deg, rgba(8,9,12,0.8) 0%, rgba(8,9,12,0.5) 45%, rgba(8,9,12,0.2) 100%) !important;
}
.ul-breadcrumb-title { color: #fff !important; max-width: 18ch; }
.ul-breadcrumb-nav {
  margin-top: 18px;
  background: rgba(255,255,255,0.12) !important;
  border-radius: var(--r-pill);
  padding: 10px 22px !important;
  color: #fff;
}
.ul-breadcrumb-nav a { color: #fff; }
.ul-breadcrumb-nav a:hover { color: #ff8095; }

/* --------------------------------------------------------------------------
   PROJECT PAGE HERO (self-contained, no swiper) + feature cards
   -------------------------------------------------------------------------- */
.rb-phero {
  position: relative;
  min-height: clamp(440px, 62vh, 640px);
  display: flex;
  align-items: center;
  background: #000;
  overflow: hidden;
}
.rb-phero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rb-phero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;   /* sit ABOVE the <img> background, below the text */
  /* uniform darkening + directional gradient so headings stay legible
     over the brighter areas of the photo */
  background:
    linear-gradient(rgba(8,9,12,0.18), rgba(8,9,12,0.18)),
    linear-gradient(90deg, rgba(8,9,12,0.8) 0%, rgba(8,9,12,0.5) 45%, rgba(8,9,12,0.2) 100%);
}
.rb-phero .ul-container { position: relative; z-index: 2; }
.rb-phero .ul-banner-title { color: #fff !important; max-width: 16ch; }
.rb-phero .ul-banner-descr { color: rgba(255,255,255,0.9) !important; max-width: 60ch; margin-top: 20px !important; }
.rb-phero .ul-banner-btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

.rb-feature {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: clamp(24px, 2vw, 36px);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.rb-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.rb-feature-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-red-soft); color: var(--c-red); font-size: 22px;
  font-family: var(--font-display); font-weight: 800;
}
.rb-feature h3 {
  font-family: var(--font-display); color: var(--c-ink);
  font-size: clamp(20px, 1.6vw, 26px); margin: 16px 0 8px;
}
.rb-feature p { color: var(--c-body); margin: 0; }

/* numbered process steps */
.rb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); }
@media (max-width: 900px) { .rb-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rb-steps { grid-template-columns: 1fr; } }
.rb-step {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r);
  padding: clamp(22px, 1.8vw, 32px); box-shadow: var(--shadow-sm); height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.rb-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.rb-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--c-red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 16px;
}
.rb-step h3 { font-family: var(--font-display); color: var(--c-ink); font-size: clamp(18px, 1.4vw, 22px); margin: 0 0 8px; }
.rb-step p { color: var(--c-body); margin: 0; font-size: clamp(14px, 0.95vw, 16px); }

/* --------------------------------------------------------------------------
   BLOCK PANELS (the signature Maji look)
   -------------------------------------------------------------------------- */
.rb-block {
  border-radius: var(--r-lg);
  padding: clamp(32px, 4.5vw, 80px);
  position: relative;
  overflow: hidden;
}
.rb-block--navy { background: linear-gradient(135deg, var(--c-ink), var(--c-charcoal)); color: #fff; }
.rb-block--navy h2, .rb-block--navy h3 { color: #fff !important; }
.rb-block--navy p { color: rgba(255,255,255,0.85); }
.rb-block--red { background: linear-gradient(135deg, var(--c-red), var(--c-red-dark)); color: #fff; }
.rb-block--red h2, .rb-block--red h3 { color: #fff !important; }
.rb-block--red p { color: rgba(255,255,255,0.9); }
.rb-block--gold { background: linear-gradient(135deg, var(--c-red), var(--c-red-dark)); color: #fff; }
.rb-block--soft { background: var(--c-red-soft); }
.rb-block--paper { background: var(--c-paper); }

.rb-grid { display: grid; gap: clamp(20px, 2.4vw, 40px); }
.rb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rb-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .rb-grid--3, .rb-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rb-grid--2, .rb-grid--3, .rb-grid--4 { grid-template-columns: 1fr; } }

.rb-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .rb-split { grid-template-columns: 1fr; } }
.rb-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rb-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed split: image runs to the page edge, fills the full row height,
   square corners; the text column lines up with the site container. */
.rb-bleed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin-top: clamp(48px, 6vw, 100px);
}
.rb-bleed-media { min-height: 100%; overflow: hidden; }
.rb-bleed-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.rb-bleed-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 6vw, 104px);
}
.rb-bleed-text--left  { padding-left: max(20px, calc((100vw - var(--maxw)) / 2)); padding-right: clamp(24px, 4vw, 72px); }
.rb-bleed-text--right { padding-right: max(20px, calc((100vw - var(--maxw)) / 2)); padding-left: clamp(24px, 4vw, 72px); }
@media (max-width: 900px) {
  .rb-bleed { grid-template-columns: 1fr; }
  .rb-bleed-text { padding-inline: 20px !important; padding-block: clamp(32px, 8vw, 52px); }
  .rb-bleed-media img { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   STAT BLOCKS - oversized numbers
   -------------------------------------------------------------------------- */
.rb-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,32px); }
@media (max-width: 900px){ .rb-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .rb-stats { grid-template-columns: 1fr; } }
.rb-stat { text-align: left; }
.rb-stat-num, .increment-number, #abstracted {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 5vw, 80px) !important;
  line-height: 1 !important;
  color: var(--c-red) !important;
  display: block;
}
.rb-stat-label { margin-top: 10px; font-weight: 600; color: inherit; opacity: .9; }

/* legacy stats strip (water/sanitation/powering health) -> full black band */
.ul-stats {
  background: linear-gradient(135deg, var(--c-ink), var(--c-charcoal));
  padding: clamp(48px, 5vw, 88px) 0;
}
.ul-stats-wrapper { margin: 0 !important; }
.ul-stats-item .number { color: var(--c-red); }
.ul-stats-item { text-align: center; color: #fff; }
.ul-stats-item .number {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 4vw, 64px); color: var(--c-red); display: block; line-height: 1;
}
.ul-stats-item .txt { color: rgba(255,255,255,0.85); display: block; margin-top: 8px; }
.ul-stats-item img.flaticon-image { filter: brightness(0) invert(1); opacity: .9; margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   CARDS - services, blogs, events, projects
   -------------------------------------------------------------------------- */
.ul-service,
.ul-blog,
.ul-event,
.ul-donation,
.rb-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
  height: 100%;
}
.ul-service:hover, .ul-blog:hover, .ul-event:hover, .ul-donation:hover, .rb-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.ul-service-img, .ul-blog-img, .ul-event-img, .ul-donation-img { overflow: hidden; }
.ul-service-img img, .ul-blog-img img, .ul-event-img img, .ul-donation-img img {
  width: 100%; height: clamp(200px, 22vw, 280px); object-fit: cover; transition: transform .6s ease;
}
.ul-service:hover .ul-service-img img,
.ul-blog:hover .ul-blog-img img,
.ul-event:hover .ul-event-img img,
.ul-donation:hover .ul-donation-img img { transform: scale(1.06); }

.ul-service-txt, .ul-blog-txt, .ul-event-txt, .ul-donation-txt { padding: clamp(22px, 1.8vw, 32px) !important; }
.ul-service-title a, .ul-blog-title, .ul-event-title a, .ul-donation-title {
  font-family: var(--font-display); font-weight: 800; color: var(--c-ink);
  font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2;
}
.ul-service-title a:hover, .ul-blog-title:hover, .ul-event-title a:hover, .ul-donation-title:hover { color: var(--c-blue); }
.ul-service-descr, .ul-event-descr, .ul-blog-excerpt, .ul-donation-descr { color: var(--c-body); }
.ul-donation-btn { font-family: var(--font-display); font-weight: 800; color: var(--c-blue); display:inline-flex; align-items:center; gap:8px; }
.ul-donation-btn:hover { color: var(--c-navy); }

/* project detail article body (raw HTML content) */
.amref-project-details { max-width: 880px; margin-inline: auto; }
.amref-project-details h1, .amref-project-details h2, .amref-project-details h3 {
  font-family: var(--font-display); color: var(--c-ink); margin: 28px 0 12px; line-height: 1.15;
}
.amref-project-details h3 { font-size: clamp(22px, 2vw, 32px); }
.amref-project-details p { color: var(--c-body); margin-bottom: 18px; font-size: clamp(15px,1.05vw,18px); }

/* card meta chips */
.ul-blog-info .icon { color: var(--c-blue); }
.ul-blog-img .date {
  background: var(--c-red) !important; color: #fff !important;
  border-radius: 14px !important;
}

/* card link buttons */
.ul-service-btn, .ul-blog-btn {
  font-family: var(--font-display); font-weight: 800; color: var(--c-blue);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
}
.ul-service-btn:hover, .ul-blog-btn:hover { color: var(--c-navy); }

/* --------------------------------------------------------------------------
   ACCORDION (why WASH)
   -------------------------------------------------------------------------- */
.ul-single-accordion-item {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r) !important;
  margin-bottom: 14px;
  background: #fff;
  overflow: hidden;
}
.ul-single-accordion-item.open { border-color: var(--c-blue) !important; box-shadow: var(--shadow-sm); }
.ul-single-accordion-item__title { font-family: var(--font-display); font-weight: 800; color: var(--c-ink); }
.ul-single-accordion-item .icon { color: var(--c-blue); }

/* --------------------------------------------------------------------------
   SERVICE DETAILS / ARTICLE BODY
   -------------------------------------------------------------------------- */
.ul-service-details-title { font-size: clamp(24px, 2.4vw, 38px); margin-top: 8px; }
.ul-service-details-descr, .ul-service-details p { font-size: clamp(15px,1.05vw,18px); color: var(--c-body); }
.ul-service-details h4 { font-family: var(--font-display); color: var(--c-navy); margin-top: 18px; }

/* --------------------------------------------------------------------------
   INTERVENTION PAGES - image+accordion blocks, article bodies
   -------------------------------------------------------------------------- */
.ul-service-details { padding: clamp(56px, 6vw, 110px) 0; }
.ul-service-details-txt { max-width: 880px; margin-inline: auto; }
.ul-service-details-title { margin-bottom: 14px; }
.ul-service-details-descr { margin-bottom: 22px; }

/* rounded media on the why-join / project image sliders */
.ul-why-join-img,
.ul-project-details-img-slider,
.ul-why-join-img .swiper,
.ul-why-join-img > div {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ul-why-join-img img { border-radius: var(--r-lg); }
.ul-why-join-txt .ul-section-descr { font-size: clamp(15px,1.05vw,18px); color: var(--c-body); }
.ul-why-join { padding: clamp(40px, 5vw, 80px) 0; }
.ul-why-join:nth-of-type(even) { background: var(--c-paper); }

/* slider nav arrows -> tidy round buttons */
.ul-slider-nav button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.ul-slider-nav button:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.ul-pagination ul { gap: 8px; }
.ul-pagination a {
  border-radius: 12px !important; border: 1px solid var(--c-line);
  font-family: var(--font-display); font-weight: 800; color: var(--c-ink);
}
.ul-pagination a.active, .ul-pagination a:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* --------------------------------------------------------------------------
   FOOTER - navy block
   -------------------------------------------------------------------------- */
/* always keep a gap between the footer and the section above it */
.ul-footer { margin-top: clamp(48px, 6vw, 96px); }
.ul-footer-middle { background: var(--c-navy) !important; padding: clamp(80px,7vw,130px) 0 clamp(50px,5vw,90px) !important; }
.ul-footer-about-txt,
.ul-footer-widget-links a,
.ul-footer-widget-title { color: rgba(255,255,255,0.85) !important; }
.ul-footer-widget-title { font-family: var(--font-display); font-weight: 800; color: #fff !important; font-size: 20px; }
.ul-footer-widget-links a:hover { color: #ff8095 !important; }
.ul-footer-socials a {
  color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
}
.ul-footer-socials a:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); transform: translateY(-3px); }
.ul-footer-bottom { background: #000; }
.ul-footer-bottom .copyright-txt { color: rgba(255,255,255,0.7) !important; margin: 0; padding: 18px 0; }
.ul-footer-about .logo { filter: brightness(0) invert(1); max-width: 160px; }

/* --------------------------------------------------------------------------
   SUBSCRIBE strip
   -------------------------------------------------------------------------- */
.rb-subscribe {
  background: linear-gradient(135deg, var(--c-red), var(--c-red-dark));
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 2.4vw, 48px); flex-wrap: wrap;
  position: relative; z-index: 3;
}
.rb-subscribe h3 { color: #fff; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px,2.2vw,38px); margin: 0 0 6px; }
.rb-subscribe p { color: rgba(255,255,255,0.85); margin: 0; }
.rb-subscribe-form { display: flex; gap: 10px; flex: 1 1 340px; max-width: 520px; flex-wrap: wrap; }
.rb-subscribe-form input {
  flex: 1 1 220px; height: 58px; border: none; border-radius: var(--r-pill);
  padding: 0 24px; font-family: var(--font-primary); font-size: 16px; outline: none;
}
.rb-subscribe-form button {
  height: 58px; border: none; border-radius: var(--r-pill); padding: 0 30px;
  background: var(--c-ink); color: #fff; font-family: var(--font-display); font-weight: 800; cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.rb-subscribe-form button:hover { transform: translateY(-2px); background: #000; }

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */
.rb-center { text-align: center; }
.rb-center .rb-eyebrow, .rb-center .ul-section-sub-title { justify-content: center; }
.rb-mw-head { max-width: 760px; }
.rb-center .rb-mw-head { margin-inline: auto; }
.rb-mt { margin-top: clamp(36px, 4vw, 64px); }
.rb-section-head { margin-bottom: clamp(36px, 4vw, 64px); }
.rb-pill-tag {
  display: inline-block; background: var(--c-blue-soft); color: var(--c-blue);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  padding: 6px 14px; border-radius: var(--r-pill);
}