/*
Theme Name: Salient Child Theme
Description: Africa Recovery Initiative (ARI) — inner-page identity, ported from the editorial homepage
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 2.0
*/

/* ==========================================================================
   ARI COLOUR SYSTEM v1.1
   Navy / green / gold / bone carry over unchanged from the approved v1.0 file.
   Ink, muted and line were warmed to match the editorial homepage and are
   approved here as v1.1.
   Distribution: navy 30% / green 15% / gold 5% / bone as support.
   ========================================================================== */
:root {
  --ari-navy:       #153564;
  --ari-navy-deep:  #0D2446;
  --ari-green:      #436C40;
  --ari-gold:       #D6A23E;
  --ari-bone:       #F4EFE6;
  --ari-ink:        #1A1A18;
  --ari-muted:      #736D5A;
  --ari-line:       #C8BEA4;
  --ari-white:      #FFFFFF;
  --ari-header-line:#E5DFD2;

  /* Legacy aliases so earlier rules keep resolving */
  --ari-warm-sand:  var(--ari-bone);
  --ari-earth-gold: var(--ari-gold);
  --ari-border:     var(--ari-line);
  --ari-gray:       var(--ari-muted);
  --ari-navy-900:   var(--ari-navy-deep);
  --ari-green-600:  #52854E;

  --ari-serif: "Newsreader", Georgia, serif;
  --ari-sans:  "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ari-serif-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --ari-sans-ar:  "Alexandria", "Segoe UI", Tahoma, sans-serif;

  --ari-ease:      cubic-bezier(.16, 1, .3, 1);
  --ari-ease-ui:   cubic-bezier(.22, 1, .36, 1);
  --ari-t-micro:   160ms;
  --ari-t-ui:      240ms;
  --ari-t-reveal:  720ms;

  --ari-page: min(100% - 48px, 1480px);
  --ari-section-pad: clamp(74px, 8vw, 140px);
}

/* --------------------------------------------------------------------------
   1. Container — match the homepage measure
   -------------------------------------------------------------------------- */
body .container.main-content {
  max-width: var(--ari-page) !important;
  width: 100% !important;
}
@media (max-width: 480px) {
  body .container.main-content,
  body #footer-outer .container,
  body #header-outer .container { max-width: calc(100% - 44px) !important; }
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body,
body .container-wrap,
body .main-content {
  color: var(--ari-ink);
  font-family: var(--ari-sans);
  font-size: 17px;
  line-height: 1.7;
}

body h1, body h2,
body .row .col h1, body .row .col h2 {
  font-family: var(--ari-serif);
  font-weight: 500;
  color: var(--ari-navy);
  letter-spacing: -.035em;
}

body h3, body h4, body h5, body h6,
body .row .col h3, body .row .col h4 {
  font-family: var(--ari-sans);
  font-weight: 650;
  color: var(--ari-navy);
  letter-spacing: -.01em;
}

body .ari-hero h1 {
  font-size: clamp(40px, 4.4vw, 78px);
  line-height: .96;
  color: var(--ari-white) !important;
}
body .ari-heading h2,
body .container-wrap h2 {
  font-size: clamp(32px, 3.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
body h3 { font-size: clamp(19px, 1.4vw, 24px); line-height: 1.3; }
body h4 { font-size: clamp(17px, 1.15vw, 20px); line-height: 1.35; }

/* Green italic accent inside a headline — the homepage's signature move */
body h1 em, body h2 em { color: var(--ari-green); font-style: italic; font-weight: 400; }
body .ari-section-navy h2 em, body .ari-hero h1 em,
body .ari-media-band h2 em { color: var(--ari-gold); }

body p { color: var(--ari-ink); }
body .ari-lead p:first-child,
body .ari-heading p { color: var(--ari-muted); font-size: clamp(17px, 1.2vw, 19px); }

body a { color: var(--ari-navy); transition: color var(--ari-t-micro) ease-out; }
body a:hover { color: var(--ari-green); }

.ari-meta, body .ari-muted { color: var(--ari-muted); font-size: 1rem; }

/* Micro label — uppercase, tracked, sits above a heading */
p.ari-eyebrow,
.ari-eyebrow p {
  margin-bottom: 22px;
  color: var(--ari-green);
  font-family: var(--ari-sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.ari-section-navy p.ari-eyebrow, .ari-section-navy .ari-eyebrow p,
.ari-hero p.ari-eyebrow, .ari-media-band p.ari-eyebrow { color: var(--ari-gold) !important; }

/* The homepage headline carries no gold underline — remove the old rule */
.ari-heading h2::after, .ari-heading h1::after { content: none; }

.ari-center, .ari-center p, .ari-center h1, .ari-center h2 { text-align: center; }

/* --------------------------------------------------------------------------
   3. Buttons — square, weighted, no shadow
   -------------------------------------------------------------------------- */
body .nectar-button.regular-button,
body .nectar-button,
body input[type="submit"],
body button[type="submit"],
body .wpcf7 input[type="submit"] {
  padding: 14px 26px !important;
  border-radius: 0 !important;
  background-color: var(--ari-navy) !important;
  border: 1px solid var(--ari-navy) !important;
  color: var(--ari-white) !important;
  font-family: var(--ari-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: background-color var(--ari-t-micro) ease-out, border-color var(--ari-t-micro) ease-out, transform var(--ari-t-micro) ease-out;
}
body .nectar-button:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover,
body .wpcf7 input[type="submit"]:hover {
  background-color: var(--ari-navy-deep) !important;
  border-color: var(--ari-navy-deep) !important;
}
body .nectar-button:active { transform: translateY(1px); }

body .nectar-button.ari-btn-gold {
  background-color: var(--ari-gold) !important;
  border-color: var(--ari-gold) !important;
  color: var(--ari-navy-deep) !important;
  font-weight: 750;
}
body .nectar-button.ari-btn-gold:hover { background-color: #E4B653 !important; border-color: #E4B653 !important; }

body .nectar-button.ari-btn-outline {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: var(--ari-white) !important;
}
body .nectar-button.ari-btn-outline:hover {
  background-color: var(--ari-white) !important;
  border-color: var(--ari-white) !important;
  color: var(--ari-navy) !important;
}

body .nectar-button.ari-btn-green {
  background-color: var(--ari-green) !important;
  border-color: var(--ari-green) !important;
}
body .nectar-button.ari-btn-green:hover { background-color: var(--ari-green-600) !important; border-color: var(--ari-green-600) !important; }

/* Text link with a moving rule, as on the homepage */
.ari-textlink a {
  position: relative;
  font-weight: 650;
  font-size: 15px;
  padding-bottom: 3px;
}
.ari-textlink a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--ari-green);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--ari-t-ui) var(--ari-ease-ui);
}
.ari-textlink a:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. Section grounds — full bleed
   -------------------------------------------------------------------------- */
body .wpb_row.ari-section-navy,
body .wpb_row.ari-section-bone,
body .wpb_row.ari-section-sand,
body .wpb_row.ari-section-green {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
}
/* Full-bleed ground.
   Pseudo-elements are not usable here: WPBakery already owns `::before` on
   every row as a `display: table` clearfix, and an over-constrained absolute
   box silently drops `left` in RTL — which collapsed the Arabic backgrounds.
   A wide solid box-shadow paints past both edges instead, and `clip-path`
   trims it back to the row's own height. No positioning, no pseudo-element,
   identical in LTR and RTL, and safe inside Salient's flex rows. */
body .wpb_row.ari-section-navy,
body .wpb_row.ari-section-bone,
body .wpb_row.ari-section-sand,
body .wpb_row.ari-section-green {
  position: relative;
  clip-path: inset(0 -100vmax);
}
body .wpb_row.ari-section-navy {
  background-color: var(--ari-navy) !important;
  box-shadow: 0 0 0 100vmax var(--ari-navy);
}
body .wpb_row.ari-section-bone,
body .wpb_row.ari-section-sand {
  background-color: var(--ari-bone) !important;
  box-shadow: 0 0 0 100vmax var(--ari-bone);
}
body .wpb_row.ari-section-green {
  background-color: var(--ari-green) !important;
  box-shadow: 0 0 0 100vmax var(--ari-green);
}

/* Rows on a flat ARI ground take their colour from `background-color`, so
   Salient's own background layers are pure noise — and its default 0.3 overlay
   was veiling the content once the rows became full-width. */
body .wpb_row.ari-section-navy > .row-bg-wrap,
body .wpb_row.ari-section-bone > .row-bg-wrap,
body .wpb_row.ari-section-sand > .row-bg-wrap,
body .wpb_row.ari-section-green > .row-bg-wrap { display: none !important; }

body .wpb_row.ari-media-band > .row-bg-wrap .row-bg-overlay { display: none !important; }

body .container-wrap { overflow-x: clip; background: var(--ari-white); }

.ari-section-navy, .ari-section-navy p, .ari-section-navy li,
.ari-section-navy h1, .ari-section-navy h2, .ari-section-navy h3,
.ari-section-navy h4, .ari-section-navy h5, .ari-section-navy h6,
.ari-hero, .ari-hero p, .ari-hero li,
.ari-section-green, .ari-section-green p, .ari-section-green li,
.ari-section-green h2, .ari-section-green h3 { color: var(--ari-white) !important; }

.ari-section-navy .ari-meta, .ari-hero .ari-meta { color: #AFC0D8 !important; }

/* Section rhythm */
body .wpb_row.ari-pad { padding-top: var(--ari-section-pad) !important; padding-bottom: var(--ari-section-pad) !important; }
body .wpb_row.ari-pad-sm { padding-top: clamp(44px, 4.5vw, 76px) !important; padding-bottom: clamp(44px, 4.5vw, 76px) !important; }
body .wpb_row.ari-pad-top0 { padding-top: 0 !important; }
body .wpb_row.ari-pad-bot0 { padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   5. Hairline cells — the homepage's card language
   Grid cells divided by rules, no radius, no shadow, no coloured top border.
   -------------------------------------------------------------------------- */
.ari-card > .vc_column-inner > .wpb_wrapper {
  height: 100%;
  padding: clamp(26px, 2.4vw, 40px) clamp(22px, 2vw, 34px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ari-line);
  border-radius: 0;
  transition: background-color var(--ari-t-ui) var(--ari-ease-ui);
}
.ari-card:hover > .vc_column-inner > .wpb_wrapper { background-color: rgba(200, 190, 164, .13); transform: none; box-shadow: none; }
.ari-card h3, .ari-card h4 { margin-top: 0; margin-bottom: 12px; }
.ari-card p:last-child { margin-bottom: 0; }
.ari-card p { color: var(--ari-muted); font-size: 16px; }

/* Vertical rules between cells on wide screens */
@media (min-width: 1000px) {
  .ari-cells .ari-card + .ari-card > .vc_column-inner > .wpb_wrapper {
    border-inline-start: 1px solid var(--ari-line);
    margin-inline-start: -1px;
  }
}

/* On navy and green grounds the hairline lightens */
.ari-section-navy .ari-card > .vc_column-inner > .wpb_wrapper,
.ari-section-green .ari-card > .vc_column-inner > .wpb_wrapper { border-color: rgba(255, 255, 255, .26); }
.ari-section-navy .ari-cells .ari-card + .ari-card > .vc_column-inner > .wpb_wrapper,
.ari-section-green .ari-cells .ari-card + .ari-card > .vc_column-inner > .wpb_wrapper { border-inline-start-color: rgba(255, 255, 255, .26); }
.ari-section-navy .ari-card:hover > .vc_column-inner > .wpb_wrapper,
.ari-section-green .ari-card:hover > .vc_column-inner > .wpb_wrapper { background-color: rgba(255, 255, 255, .06); }
.ari-section-navy .ari-card p, .ari-section-green .ari-card p { color: rgba(255, 255, 255, .82) !important; }

/* Numbered cell */
.ari-num .ari-num-badge {
  display: block;
  margin-bottom: 16px;
  color: var(--ari-gold);
  font-family: var(--ari-serif);
  font-size: clamp(30px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}
.ari-num > .vc_column-inner > .wpb_wrapper { padding-inline-start: clamp(22px, 2vw, 34px); position: static; }

/* --------------------------------------------------------------------------
   6. Statistics
   -------------------------------------------------------------------------- */
.ari-stats .nectar-milestone { text-align: start; }
.ari-stats .nectar-milestone .number,
.ari-stats .nectar-milestone .number span {
  color: var(--ari-gold) !important;
  font-family: var(--ari-serif) !important;
  font-weight: 500;
  letter-spacing: -.04em;
}
.ari-stats .nectar-milestone .subject {
  margin-top: 10px;
  color: rgba(255, 255, 255, .78) !important;
  font-family: var(--ari-sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.ari-stats .wpb_column > .vc_column-inner > .wpb_wrapper {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .26);
}
.ari-stats .wpb_column { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   7. Photography
   -------------------------------------------------------------------------- */
.ari-figure { margin: 0; }
.ari-figure img { display: block; width: 100%; height: auto; border-radius: 0; }
.ari-figure figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ari-line);
  color: var(--ari-muted);
  font-size: 13px;
  line-height: 1.55;
}
.ari-section-navy .ari-figure figcaption,
.ari-hero .ari-figure figcaption {
  color: #AFC0D8;
  border-top-color: rgba(255, 255, 255, .26);
}
.ari-figure.ari-ratio-wide img  { aspect-ratio: 16 / 9; object-fit: cover; }
.ari-figure.ari-ratio-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.ari-figure.ari-ratio-tall img  { aspect-ratio: 4 / 5; object-fit: cover; }
.ari-figure { overflow: hidden; }
.ari-figure.ari-lifted img { box-shadow: 0 24px 60px rgba(13, 36, 70, .22); }

/* Breathing photographs.
   A slow, shallow scale keeps the documentary imagery alive without pulling
   attention off the copy. Neighbouring figures are desynchronised so a row of
   pictures never pulses in unison. */
@keyframes ari-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

@media (prefers-reduced-motion: no-preference) {
  .ari-figure img {
    animation: ari-breathe 12s ease-in-out infinite;
    transform-origin: center;
  }
  .ari-strip .wpb_column:nth-child(2) .ari-figure img { animation-delay: -4s; }
  .ari-strip .wpb_column:nth-child(3) .ari-figure img { animation-delay: -8s; }
  .ari-hero .ari-figure img { animation-duration: 15s; }

  /* The media band's photograph is a row background, so it breathes too */
  body .wpb_row.ari-media-band > .row_col_wrap_12 { position: relative; z-index: 1; }
body .wpb_row.ari-media-band > .row-bg-wrap .row-bg {
    animation: ari-breathe 18s ease-in-out infinite;
    transform-origin: center;
  }
}

/* Gold keyline tying a hero photo to the identity */
.ari-figure.ari-keyline { position: relative; }
.ari-figure.ari-keyline::after {
  content: "";
  position: absolute;
  inset-inline-start: -16px;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: var(--ari-gold);
}
@media (max-width: 999px) { .ari-figure.ari-keyline::after { display: none; } }

/* Full-bleed media band: Salient's own row background, pushed past the gutter */
body .wpb_row.ari-media-band {
  position: relative;
  clip-path: inset(0 -100vmax);
  background-color: var(--ari-navy-deep) !important;
  box-shadow: 0 0 0 100vmax var(--ari-navy-deep);
}
body .wpb_row.ari-media-band > .row-bg-wrap {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
}
body .wpb_row.ari-media-band > .row_col_wrap_12 { position: relative; z-index: 1; }
body .wpb_row.ari-media-band > .row-bg-wrap .row-bg {
  left: 0 !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
}
body .wpb_row.ari-media-band > .row-bg-wrap::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13,36,70,.94) 0%, rgba(13,36,70,.80) 46%, rgba(13,36,70,.42) 100%);
}
body.rtl .wpb_row.ari-media-band::after {
  background: linear-gradient(260deg, rgba(13,36,70,.94) 0%, rgba(13,36,70,.80) 46%, rgba(13,36,70,.42) 100%);
}
.ari-media-band, .ari-media-band p, .ari-media-band li,
.ari-media-band h2, .ari-media-band h3, .ari-media-band h4 { color: var(--ari-white) !important; }
.ari-media-band .ari-quote blockquote {
  background: transparent;
  border-inline-start: 3px solid var(--ari-gold);
  color: var(--ari-white);
  font-family: var(--ari-serif);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.35;
  padding-block: 0;
}
.ari-media-band .ari-quote cite { color: var(--ari-gold); }

.ari-strip .ari-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 999px) { .ari-figure { margin-top: 24px; } }

/* --------------------------------------------------------------------------
   8. Accordions, tables, quotes
   -------------------------------------------------------------------------- */
body .toggles .toggle > .toggle-title a { color: var(--ari-navy); font-family: var(--ari-sans); font-weight: 650; }
body .toggles .toggle.open > .toggle-title a,
body .toggles .toggle > .toggle-title a:hover { color: var(--ari-green); }
body .toggles .toggle > div { border-color: var(--ari-line); }

.ari-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ari-table table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
.ari-table th {
  padding: 15px 16px;
  border-bottom: 1px solid var(--ari-navy);
  background: transparent;
  color: var(--ari-navy);
  font-family: var(--ari-sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: start;
}
.ari-table td { padding: 15px 16px; border-bottom: 1px solid var(--ari-line); vertical-align: top; font-size: 16px; }
.ari-table tbody tr:last-child td { border-bottom: 0; }
.ari-table .ari-share { color: var(--ari-gold); font-family: var(--ari-serif); font-size: 20px; font-weight: 500; white-space: nowrap; }
.ari-section-navy .ari-table th { color: var(--ari-gold); border-bottom-color: rgba(255,255,255,.4); }
.ari-section-navy .ari-table td { border-bottom-color: rgba(255,255,255,.2); }

.ari-quote blockquote, blockquote.ari-quote {
  margin: 0;
  padding: 4px 0 4px 26px;
  border-inline-start: 3px solid var(--ari-gold);
  border-radius: 0;
  background: transparent;
  color: var(--ari-navy);
  font-family: var(--ari-serif);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
}
body.rtl .ari-quote blockquote, body.rtl blockquote.ari-quote { padding: 4px 26px 4px 0; }
.ari-quote cite {
  display: block;
  margin-top: 16px;
  color: var(--ari-green);
  font-family: var(--ari-sans);
  font-size: 12px;
  font-weight: 750;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Header and footer — match the homepage chrome
   -------------------------------------------------------------------------- */
body #header-outer {
  background: var(--ari-white) !important;
  border-bottom: 1px solid var(--ari-header-line);
  box-shadow: none !important;
}
body #header-outer #logo img,
body #header-outer #logo img.stnd,
body #header-outer.detached #logo img { height: 58px !important; max-height: none !important; width: auto !important; }
@media (max-width: 1000px) {
  body #header-outer #logo img, body #header-outer #logo img.stnd { height: 40px !important; }
}
body #header-outer #top nav > ul > li > a {
  font-family: var(--ari-sans);
  font-size: 14px;
  font-weight: 650;
  color: var(--ari-navy) !important;
}
body #header-outer #top nav > ul > li > a[href*="/donate"],
body #slide-out-widget-area .ari-donate-link > a {
  padding: 13px 22px !important;
  border-radius: 0;
  background: var(--ari-gold) !important;
  color: var(--ari-navy-deep) !important;
  font-weight: 750;
  margin-inline-start: 12px;
  line-height: 1.4;
}
body #header-outer #top nav > ul > li > a[href*="/donate"]:hover { background: #E4B653 !important; }
body #header-outer #top nav > ul > li > a[href*="/donate"]::after { display: none; }

body #footer-outer { background-color: var(--ari-navy) !important; color: #C4D0E2; font-family: var(--ari-sans); }
body #footer-outer h1, body #footer-outer h2, body #footer-outer h3,
body #footer-outer h4, body #footer-outer h5, body #footer-outer h6 {
  color: var(--ari-white) !important;
  font-family: var(--ari-sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body #footer-outer a { color: #C4D0E2; }
body #footer-outer a:hover { color: var(--ari-gold); }
body #footer-outer #copyright { background-color: var(--ari-navy-deep) !important; border-top: 1px solid rgba(255,255,255,.12); }
body #footer-outer #copyright p { color: #9FB0C8; font-size: 13px; }
body #footer-outer .ari-social a {
  display: inline-block;
  width: 42px; height: 42px; line-height: 40px;
  margin-inline-end: 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  color: var(--ari-white);
  text-align: center;
  transition: background-color var(--ari-t-ui) ease-out, border-color var(--ari-t-ui) ease-out;
}
body #footer-outer .ari-social a:hover { background: var(--ari-green); border-color: var(--ari-green); }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.ari-form .wpcf7-form { max-width: 900px; }
.ari-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--ari-navy);
  font-family: var(--ari-sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ari-form .ari-required { color: #B3261E; }
.ari-form input[type="text"], .ari-form input[type="email"], .ari-form input[type="tel"],
.ari-form input[type="url"], .ari-form input[type="number"], .ari-form input[type="date"],
.ari-form select, .ari-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ari-line);
  border-radius: 0;
  background: var(--ari-white);
  color: var(--ari-ink);
  font-family: var(--ari-sans);
  font-size: 16px;
}
.ari-form input:focus, .ari-form select:focus, .ari-form textarea:focus {
  border-color: var(--ari-green);
  outline: 2px solid rgba(67,108,64,.2);
}
.ari-form .ari-field { margin-bottom: 24px; }
.ari-form .ari-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.ari-form .ari-hint { display: block; margin-top: 6px; color: var(--ari-muted); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 767px) { .ari-form .ari-grid-2 { grid-template-columns: 1fr; } }
.ari-form .wpcf7-list-item { display: block; margin: 0 0 .5em; }
.ari-form .wpcf7-list-item label { font-weight: 400; color: var(--ari-ink); text-transform: none; letter-spacing: 0; font-size: 16px; }

/* Contact page: keep the message form visually anchored inside the layout. */
.ari-form .ari-contact-form-card {
  position: relative;
  margin: 0;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(21, 53, 100, .16);
  border-radius: 18px;
  background: var(--ari-white);
  box-shadow: 0 24px 64px rgba(15, 39, 75, .10);
}
.ari-form .ari-contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ari-gold);
}
.ari-form .ari-contact-form-card h2 {
  margin-bottom: clamp(24px, 3vw, 38px);
  color: var(--ari-navy);
}
.ari-form .ari-contact-form-card .wpcf7-form { max-width: none; }
.ari-form .ari-contact-form-card input[type="text"],
.ari-form .ari-contact-form-card input[type="email"],
.ari-form .ari-contact-form-card input[type="tel"],
.ari-form .ari-contact-form-card input[type="url"],
.ari-form .ari-contact-form-card input[type="number"],
.ari-form .ari-contact-form-card input[type="date"],
.ari-form .ari-contact-form-card select,
.ari-form .ari-contact-form-card textarea {
  border-radius: 8px;
  background: #FBFAF7;
}
@media (max-width: 999px) {
  .ari-form .ari-contact-form-card { margin-bottom: 30px; }
}

/* --------------------------------------------------------------------------
   11. GiveWP
   -------------------------------------------------------------------------- */
body .give-btn, body .give-submit {
  border-radius: 0 !important;
  background: var(--ari-gold) !important;
  border: 0 !important;
  color: var(--ari-navy-deep) !important;
  font-family: var(--ari-sans);
  font-weight: 750;
}
body .give-btn:hover, body .give-submit:hover { background: #E4B653 !important; }
body .give-form-title, body .give-form h2 { color: var(--ari-navy); }

/* --------------------------------------------------------------------------
   12. Reading measure
   -------------------------------------------------------------------------- */
body .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .wpb_text_column p,
body .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .wpb_text_column ul,
body .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .wpb_text_column ol {
  max-width: 68ch;
  margin-inline-end: auto;
}
body .ari-hero h1 { max-width: 16ch; margin-inline-end: auto; }
body .ari-hero .wpb_text_column p { max-width: 54ch; }
body .ari-heading h2 { max-width: 20ch; margin-inline-end: auto; }
body .ari-center h1, body .ari-center h2, body .ari-center p, body .ari-center ul { margin-inline: auto !important; }
body .wpb_text_column p:has(.nectar-button), body .ari-table, body .ari-table p { max-width: none; }
body .ari-card p, body .ari-card ul,
body .vc_col-sm-8 p, body .vc_col-sm-6 p, body .vc_col-sm-4 p { max-width: none; }

/* --------------------------------------------------------------------------
   13. Scroll choreography — classes applied by ari-motion.js
   -------------------------------------------------------------------------- */
.ari-anim { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
.ari-anim.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ari-t-reveal) var(--ari-ease) var(--ari-delay, 0ms),
    transform var(--ari-t-reveal) var(--ari-ease) var(--ari-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .ari-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ari-figure img { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   14. Arabic / RTL
   -------------------------------------------------------------------------- */
html[lang="ar"] body, body.rtl { direction: rtl; text-align: right; }
body.rtl, body.rtl p, body.rtl li,
body.rtl .nectar-button, body.rtl input, body.rtl select, body.rtl textarea,
body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6,
body.rtl p.ari-eyebrow, body.rtl .ari-form label {
  font-family: var(--ari-sans-ar);
}
/* `.row .col h1` in the Latin block outranks a plain `body.rtl h1`, so the
   Arabic serif has to mirror that selector depth or headings silently fall back
   to Newsreader — which carries no Arabic glyphs. */
body.rtl h1, body.rtl h2,
body.rtl .row .col h1, body.rtl .row .col h2,
body.rtl .ari-hero h1, body.rtl .ari-heading h2,
body.rtl .ari-quote blockquote, body.rtl .ari-num-badge,
body.rtl .ari-stats .nectar-milestone .number {
  font-family: var(--ari-serif-ar);
  letter-spacing: 0;
}
body.rtl { line-height: 1.9; }
body.rtl h1, body.rtl h2 { line-height: 1.3; }
body.rtl .ari-hero h1 { font-size: clamp(32px, 3.6vw, 62px); }
body.rtl .ari-heading h2, body.rtl .container-wrap h2 { font-size: clamp(27px, 3vw, 48px); }
body.rtl .ari-stats .nectar-milestone .subject { letter-spacing: 0; }
body.rtl #footer-outer .ari-social a { margin-inline-end: 8px; }

/* --------------------------------------------------------------------------
   15. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  body .ari-hero h1 { font-size: clamp(30px, 8.4vw, 40px) !important; }
  body .ari-heading h2, body .container-wrap h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  body h3 { font-size: 19px !important; }
  body .ari-stats .nectar-milestone .number,
  body .ari-stats .nectar-milestone .number span { font-size: 38px !important; line-height: 1.1 !important; }
  body .ari-stats .wpb_column.vc_col-sm-3 { width: 50%; float: inline-start; }
  body .ari-hero .nectar-button,
  body .ari-section-green .nectar-button { display: block; width: 100%; text-align: center; margin: 0 0 12px 0 !important; }
}
@media (max-width: 480px) {
  body .ari-stats .wpb_column.vc_col-sm-3 { width: 100%; float: none; }
}

/* --------------------------------------------------------------------------
   16. Accessibility
   -------------------------------------------------------------------------- */
.ari-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ari-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   17. Editorial inner-page template
   These pages render through `ari-inner-en.php`, which reuses the home page's
   header, navigation and footer. There is no Salient `.container` here, so the
   rows run edge to edge naturally and the measure is applied to the inner
   wrapper — which means the full-bleed grounds need none of the box-shadow
   trickery required inside Salient's container.
   -------------------------------------------------------------------------- */
.ari-inner-page .ari-inner-main { background: var(--ari-white); }

.ari-inner-page .ari-inner-main .wpb_row {
  width: 100%;
  margin-inline: 0;
  clip-path: none !important;
  box-shadow: none !important;
}
.ari-inner-page .ari-inner-main .wpb_row > .row_col_wrap_12 {
  width: var(--ari-page);
  max-width: 100%;
  margin-inline: auto;
  float: none;
}
.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap {
  left: 0;
  width: 100%;
  transform: none;
}

/* Navigation: no bullet separators, and a little more air between items */
.ari-inner-page .ari-primary-menu > li::before,
.ari-inner-page .ari-primary-menu li::before,
.ari-inner-page .ari-primary-menu > li::after {
  content: none !important;
  display: none !important;
}
body.ari-live-home.ari-inner-page .ari-primary-menu {
  gap: clamp(18px, 1.8vw, 32px);
}
body.ari-live-home.ari-live-home-ar.ari-inner-page .ari-primary-menu {
  gap: clamp(18px, 1.6vw, 28px);
}
body.ari-live-home.ari-inner-page .ari-primary-menu .sub-menu { gap: 0; }

/* ==========================================================================
   18. Page hero — editorial composition
   Three things carry it: an asymmetric grid borrowed from the home page, a
   photograph that runs off the outer edge, and a topographic pattern that
   drifts slowly enough to read as depth rather than motion.
   ========================================================================== */

.ari-hero {
  position: relative;
  overflow: hidden;
  min-height: min(66vh, 680px);
}

/* --- Layer 1: wave drift ---------------------------------------------------
   Three families of sine waves, each drawn as one continuous line that runs the
   whole width of the viewport. The tiles are periodic — every wave starts and
   ends at the same height with a matching tangent — so `repeat-x` produces an
   unbroken curve with no seam, and shifting the background by exactly one tile
   width loops forever without a jump. The three layers travel at different
   speeds and in opposite directions, which reads as depth rather than motion. */
.ari-hero::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='620' viewBox='0 0 480 620'%3E%3Cg fill='none' stroke='%23D6A23E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 110 Q120 76 240 110 T480 110'/%3E%3Cpath d='M0 250 Q120 216 240 250 T480 250'/%3E%3Cpath d='M0 390 Q120 356 240 390 T480 390'/%3E%3Cpath d='M0 530 Q120 496 240 530 T480 530'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='620' viewBox='0 0 640 620'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 180 Q160 134 320 180 T640 180'/%3E%3Cpath d='M0 340 Q160 294 320 340 T640 340'/%3E%3Cpath d='M0 500 Q160 454 320 500 T640 500'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='620' viewBox='0 0 360 620'%3E%3Cg fill='none' stroke='%23D6A23E' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M0 70 Q90 46 180 70 T360 70'/%3E%3Cpath d='M0 300 Q90 276 180 300 T360 300'/%3E%3Cpath d='M0 560 Q90 536 180 560 T360 560'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-size: 480px 620px, 640px 620px, 360px 620px;
  background-position: 0 22%, 0 58%, 0 84%;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.10) 58%, transparent 80%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.10) 58%, transparent 80%);
}
body.rtl .ari-hero::after {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.10) 58%, transparent 80%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.10) 58%, transparent 80%);
}

/* Each offset is exactly one tile width, so the loop is invisible. */
@keyframes ari-wave-drift {
  from { background-position: 0 22%, 0 58%, 0 84%; }
  to   { background-position: -480px 22%, 640px 58%, -360px 84%; }
}

@media (prefers-reduced-motion: no-preference) {
  .ari-hero::after { animation: ari-wave-drift 48s linear infinite; }
}

/* Below the split the copy spans the full width, so the pattern steps back to
   a texture rather than a graphic element. */
@media (max-width: 999px) {
  .ari-hero::after {
    opacity: .26;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
  }
  body.rtl .ari-hero::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
  }
}

/* Content must sit above the pattern */
.ari-hero > .row_col_wrap_12 { position: relative; z-index: 1; }

/* --- Layer 2: the vertical rhythm behind the copy -------------------------- */
.ari-hero .wpb_column:first-child > .vc_column-inner {
  position: relative;
}
.ari-hero .wpb_column:first-child > .vc_column-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -40px;
  inset-inline: -28px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 25% 100%;
  pointer-events: none;
}

/* --- Layer 3: type ---------------------------------------------------------*/
.ari-hero p.ari-eyebrow {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.ari-hero p.ari-eyebrow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--ari-gold);
  transform-origin: inline-start;
}
@media (prefers-reduced-motion: no-preference) {
  .ari-hero p.ari-eyebrow::after {
    animation: ari-rule-draw 900ms var(--ari-ease) 240ms both;
  }
}
@keyframes ari-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.ari-hero .ari-heading p {
  color: rgba(255, 255, 255, .82) !important;
  font-size: clamp(16px, 1.15vw, 19px);
  max-width: 44ch;
}

/* --- Layer 4: the photograph ---------------------------------------------- */
.ari-hero .ari-figure {
  position: relative;
  border-radius: 0;
}
.ari-hero .ari-figure img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
}

/* A gold frame offset behind the photograph */
.ari-hero .ari-figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 26px;
  inset-inline-start: -26px;
  inset-inline-end: 26px;
  border: 1px solid rgba(214, 162, 62, .55);
  pointer-events: none;
}

/* The caption rides on the image, as it does on the home page */
.ari-hero .ari-figure figcaption {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0;
  bottom: 0;
  max-width: min(320px, 76%);
  margin: 0;
  padding: 13px 16px;
  border: 0;
  border-inline-start: 2px solid var(--ari-gold);
  background: rgba(13, 36, 70, .82);
  backdrop-filter: blur(3px);
  color: #E4EAF3;
  font-size: 12px;
  line-height: 1.5;
}

/* --- Layout: asymmetric grid, photograph running off the outer edge -------- */
@media (min-width: 1000px) {
  .ari-hero > .row_col_wrap_12 {
    display: grid !important;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.25fr);
    gap: clamp(36px, 4vw, 84px);
    align-items: center;
  }
  .ari-hero > .row_col_wrap_12 > .wpb_column {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
  }

  /* Inside the editorial template the row is already full width, so the media
     column can run to the viewport edge. */
  .ari-inner-page .ari-hero > .row_col_wrap_12 > .wpb_column:last-child {
    margin-inline-end: calc((var(--ari-page) - 100vw) / 2);
  }
  .ari-inner-page .ari-hero .ari-figure img {
    aspect-ratio: 16 / 10;
    max-height: min(58vh, 540px);
  }
}

@media (max-width: 999px) {
  .ari-hero { min-height: 0; }
  .ari-hero .ari-figure::before { display: none; }
  .ari-hero .ari-figure figcaption { position: static; max-width: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   19. Page-level editorial polish
   -------------------------------------------------------------------------- */
.ari-inner-page .ari-inner-main h1,
.ari-inner-page .ari-inner-main h2,
.ari-inner-page .ari-inner-main h3 { text-wrap: balance; }

.ari-inner-page .ari-inner-main p,
.ari-inner-page .ari-inner-main li { text-wrap: pretty; }

.ari-inner-page .ari-primary-menu .current-menu-item > a,
.ari-inner-page .ari-primary-menu .current-menu-ancestor > a {
  color: var(--ari-green-dark);
}

.ari-inner-page .ari-primary-menu .current-menu-item > a::after,
.ari-inner-page .ari-primary-menu .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.ari-inner-page .ari-hero .ari-figure img {
  filter: saturate(.92) contrast(1.025);
}

.ari-inner-page .ari-media-band .ari-quote {
  max-width: 760px;
}

.ari-inner-page .ari-inner-main > .wpb_row:not(.ari-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

body.rtl.ari-inner-page .ari-hero .ari-figure figcaption { text-align: start; }
body.rtl.ari-inner-page .ari-media-band .ari-quote { margin-inline-end: 0; }

/* --------------------------------------------------------------------------
   20. Media-band split repair

   Salient offsets full-width row backgrounds with a negative half-viewport
   margin. Inside the custom inner-page template that left the photograph on
   half the canvas while the original 2/3 content column crossed its edge.
   Make the intended image/copy relationship an explicit two-column layout.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band {
    min-height: 560px;
    display: flex;
    align-items: center;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap {
    top: 0;
    bottom: 0;
    left: 0 !important;
    right: auto !important;
    width: 50% !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.rtl.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap {
    left: auto !important;
    right: 0 !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row_col_wrap_12 {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row_col_wrap_12 > .wpb_column {
    width: auto !important;
    min-width: 0;
    grid-column: 2;
    margin: 0 !important;
    padding-inline: clamp(42px, 5vw, 88px) !important;
  }

  body.rtl.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row_col_wrap_12 > .wpb_column {
    grid-column: 1;
  }

  body.ari-inner-page .ari-media-band .ari-quote,
  body.ari-inner-page .ari-media-band .ari-quote blockquote {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  body.ari-inner-page .wpb_row.ari-media-band > .row-bg-wrap::after {
    background: linear-gradient(110deg, rgba(13, 36, 70, .18), rgba(13, 36, 70, .42));
  }

  body.rtl.ari-inner-page .wpb_row.ari-media-band > .row-bg-wrap::after {
    background: linear-gradient(250deg, rgba(13, 36, 70, .18), rgba(13, 36, 70, .42));
  }
}

@media (max-width: 999px) {
  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band {
    min-height: 0;
    padding-top: clamp(340px, 62vw, 470px) !important;
    padding-bottom: 68px !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap,
  body.rtl.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap {
    top: 0;
    bottom: auto;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: clamp(300px, 55vw, 420px);
    margin: 0 !important;
    transform: none !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row_col_wrap_12 {
    width: 100% !important;
    margin: 0 !important;
    padding-inline: clamp(22px, 6vw, 54px) !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row_col_wrap_12 > .wpb_column {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ari-inner-page .wpb_row.ari-media-band > .row-bg-wrap::after {
    background: linear-gradient(180deg, rgba(13, 36, 70, .08), rgba(13, 36, 70, .42));
  }
}

@media (max-width: 560px) {
  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band {
    padding-top: 310px !important;
    padding-bottom: 56px !important;
  }

  body.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap,
  body.rtl.ari-inner-page .ari-inner-main .wpb_row.ari-media-band > .row-bg-wrap {
    height: 280px;
  }

  body.ari-inner-page .ari-media-band .ari-quote blockquote {
    font-size: clamp(21px, 6.5vw, 28px);
  }
}