/*
F4J infographics — HTML/CSS recreation of the About page diagrams,
with scroll-triggered animations. Loaded by page.php.
*/
/* the page hero's slide-in (translateX 100%) creates transient horizontal overflow
   that offsets centering; clip it so everything centres to the viewport */
body{ overflow-x:clip; }
/* centre via a text-align holder — bulletproof against margin/overflow quirks */
.f4j-ig-hold{ text-align:center; width:100%; }
.f4j-ig-hold > .f4j-ig{
  display:inline-block;
  width:1040px;
  max-width:100%;
  text-align:start;
  margin:44px 0;
}
.f4j-ig-hold > .f4j-ig.ig-inst{ display:inline-grid; }

.f4j-ig{
  --ig-red:#cb1b4a;
  --ig-blue:#2f9ad2;
  --ig-teal:#1395a3;
  --ig-navy:#373545;
  --ig-maroon:#75034a;
  --ig-tl-teal:#42afb6;
  --ig-gray:#afbabb;
  --ig-dteal:#007a7d;
  --ig-line:#6a889c;
  --ig-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Montserrat',sans-serif;
  max-width:1040px;
  margin:44px auto;
  color:#22323f;
}

/* ============================================================
   1. SERIES OF PROJECTS  (flow + timeline)
   ============================================================ */
.ig-proj-title{
  text-align:center;
  color:#3f9fd6;
  font-style:italic;
  font-weight:800;
  font-size:clamp(20px,2.4vw,27px);
  margin-bottom:6px;
  opacity:0; transform:translateY(-10px);
  transition:opacity .6s var(--ig-ease), transform .6s var(--ig-ease);
}
.f4j-ig.in .ig-proj-title{ opacity:1; transform:none; }

/* top bracket */
.ig-bracket{
  position:relative;
  width:78%;
  margin:0 auto;
  height:26px;
}
.ig-bracket::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:2px; background:var(--ig-line);
}
.ig-bracket-top{ border:2px solid var(--ig-line); border-bottom:none; border-radius:18px 18px 0 0; }
.ig-bracket-top::after{ top:-13px; height:13px; }
.ig-bracket-bot{ border:2px solid var(--ig-line); border-top:none; border-radius:0 0 18px 18px; margin-top:6px; }
.ig-bracket-bot::after{ bottom:-18px; height:18px; }
/* draw-in for brackets */
.ig-bracket{ clip-path:inset(0 50% 0 50%); transition:clip-path .9s var(--ig-ease) .2s; }
.f4j-ig.in .ig-bracket{ clip-path:inset(0 0 0 0); }
.ig-down-arrow{
  text-align:center; color:var(--ig-line); margin-top:6px;
  opacity:0; transition:opacity .5s ease .9s;
}
.f4j-ig.in .ig-down-arrow{ opacity:1; }
.ig-down-arrow i{ font-size:30px; }

/* phase row */
.ig-phases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:6px auto 4px;
  width:82%;
}
.ig-phase{
  position:relative;
  padding-top:34px;
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ig-ease), transform .6s var(--ig-ease);
  transition-delay:var(--d,0ms);
}
.f4j-ig.in .ig-phase{ opacity:1; transform:none; }
.ig-phase-icon{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:66px; height:66px; border-radius:50%;
  background:#fff; border:3px solid currentColor;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.ig-phase-icon i{ font-size:32px; color:#2b2b2b; }
.ig-phase-box{
  color:#fff; font-style:italic; font-weight:700;
  font-size:13.5px; line-height:1.3;
  min-height:96px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:34px 26px 20px;
  clip-path:polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
}
/* arrows follow the reading direction */
[dir="rtl"] .ig-phase-box{
  clip-path:polygon(100% 0, 12% 0, 0 50%, 12% 100%, 100% 100%, 88% 50%);
}
.ig-phase.p1{ color:var(--ig-red); }
.ig-phase.p2{ color:var(--ig-blue); }
.ig-phase.p3{ color:var(--ig-teal); }
.ig-phase.p1 .ig-phase-box{ background:var(--ig-red); }
.ig-phase.p2 .ig-phase-box{ background:var(--ig-blue); }
.ig-phase.p3 .ig-phase-box{ background:var(--ig-teal); }
.ig-phase-label{
  text-align:center; font-weight:800; font-size:15px;
  margin-top:10px; color:currentColor;
}

/* timeline row */
.ig-timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:26px;
  align-items:end;
}
.ig-tl-col{ text-align:center; position:relative; }
.ig-tl-ring{
  width:118px; height:118px; border-radius:50%;
  background:#fff; border:15px solid var(--c);
  margin:0 auto -8px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
  transform:scale(0);
  transition:transform .6s var(--ig-ease);
  transition-delay:var(--d,0ms);
}
.f4j-ig.in .ig-tl-ring{ transform:scale(1); }
.ig-tl-ring img{ max-width:66px; max-height:56px; }
.ig-tl-ring .ig-tl-txt{ font-weight:800; font-size:19px; line-height:1.1; color:#22323f; direction:ltr; unicode-bidi:isolate; }
.ig-tl-bar{
  height:30px; background:var(--c);
  transform:scaleX(0); transform-origin:center;
  transition:transform .5s var(--ig-ease);
  transition-delay:var(--d,0ms);
}
.f4j-ig.in .ig-tl-bar{ transform:scaleX(1); }
.ig-tl-label{
  font-style:italic; font-weight:700; font-size:15px;
  margin-top:14px; color:#22323f;
}
.ig-tl-col.c1{ --c:var(--ig-navy); }
.ig-tl-col.c2{ --c:var(--ig-maroon); }
.ig-tl-col.c3{ --c:var(--ig-tl-teal); }
.ig-tl-col.c4{ --c:var(--ig-gray); }
.ig-tl-col.c5{ --c:var(--ig-dteal); }

/* ============================================================
   2. INNOVATIVE FINANCIAL INSTRUMENTS  (curved timeline)
   ============================================================ */
.ig-inst{
  display:grid;
  grid-template-columns:0.9fr 1.4fr;
  gap:20px;
  align-items:center;
}
.ig-inst-circle{
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  border:1px solid #e6edf2;
  box-shadow:0 18px 50px rgba(22,36,47,.10);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:14%;
  opacity:0; transform:scale(.85);
  transition:opacity .7s var(--ig-ease), transform .7s var(--ig-ease);
}
.f4j-ig.in .ig-inst-circle{ opacity:1; transform:none; }
.ig-inst-circle-title{
  color:#112f8d; font-style:italic; font-weight:800;
  font-size:clamp(18px,2vw,24px); line-height:1.25; margin-bottom:12px;
}
.ig-inst-circle-sub{ color:#33445a; font-size:14px; line-height:1.4; }

.ig-inst-track{ position:relative; }
/* the connecting rail line (drawn top→bottom on scroll) */
.ig-inst-track::before{
  content:''; position:absolute;
  inset-inline-start:27px; top:22px; bottom:22px;
  width:2.5px; background:#c7d2e0; z-index:0;
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.5s var(--ig-ease) .15s;
}
.f4j-ig.in .ig-inst-track::before{ transform:scaleY(1); }

.ig-inst-item{ position:relative; padding-inline-start:118px; margin-bottom:26px; }
.ig-inst-item:last-child{ margin-bottom:0; }
.ig-inst-node{
  position:absolute; inset-inline-start:0; top:0;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; z-index:2;
  box-shadow:0 8px 18px rgba(22,36,47,.16);
  transform:scale(0);
  transition:transform .5s var(--ig-ease);
  transition-delay:var(--d,0ms);
}
.f4j-ig.in .ig-inst-node{ transform:scale(1); }
.ig-inst-node i{ font-size:26px; }
.ig-inst-node.n-navy{ background:#122359; }
.ig-inst-node.n-gray{ background:#9fb0cb; }
.ig-inst-node.n-cream{ background:#e7ded6; color:#8a7f74; }
.ig-inst-num{
  position:absolute; inset-inline-start:68px; top:11px;
  font-weight:800; font-size:26px; color:#1a2b5e;
  opacity:0; transition:opacity .5s ease var(--d,0ms);
}
.f4j-ig.in .ig-inst-num{ opacity:1; }
.ig-inst-body{
  opacity:0; transform:translateX(14px);
  transition:opacity .6s var(--ig-ease), transform .6s var(--ig-ease);
  transition-delay:var(--d,0ms);
}
[dir="rtl"] .ig-inst-body{ transform:translateX(-14px); }
.f4j-ig.in .ig-inst-body{ opacity:1; transform:none; }
.ig-inst-h{
  color:#1a2b6b; font-weight:800; font-size:16px; margin-bottom:6px;
}
.ig-inst-p{
  font-family:'Segoe UI Variable Text','Segoe Fluent','Segoe UI',system-ui,sans-serif;
  color:#43566a; font-size:13px; line-height:1.55; text-align:justify;
}

/* ============================================================
   responsive
   ============================================================ */
@media all and (max-width:900px){
  .ig-phases,.ig-bracket{ width:100%; }
  .ig-phase-box{ font-size:12px; padding:30px 14px 16px; }
  .ig-phase-icon{ width:54px; height:54px; }
  .ig-tl-ring{ width:84px; height:84px; border-width:11px; }
  .ig-tl-ring img{ max-width:46px; max-height:40px; }
  .ig-tl-ring .ig-tl-txt{ font-size:13px; }
  .ig-tl-label,.ig-tl-bar{ font-size:11px; }
  .ig-tl-bar{ height:20px; }
  .ig-inst{ grid-template-columns:1fr; }
  .ig-inst-circle{ max-width:320px; margin:0 auto; }
}

@media (prefers-reduced-motion: reduce){
  .f4j-ig *{ transition:none !important; }
  .ig-proj-title,.ig-down-arrow,.ig-inst-circle,.ig-inst-body,.ig-inst-num,.ig-phase{ opacity:1 !important; transform:none !important; }
  .ig-bracket{ clip-path:none !important; }
  .ig-tl-ring,.ig-inst-node{ transform:scale(1) !important; }
  .ig-tl-bar{ transform:scaleX(1) !important; }
  .ig-inst-svg path{ stroke-dashoffset:0 !important; }
}

/* ---------- PPAB composition (Advisory Board) ---------- */
.ppab-ig{ font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; color:#22323f; --pp-navy:#31485a; --pp-blue:#3399d1; --pp-teal:#16999b; --pp-line:#e3eaf0; --pp-ease:cubic-bezier(.22,1,.36,1); }
.ppab-head{ text-align:center; margin-bottom:28px; }
.ppab-eyebrow{ display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--pp-blue); }
.ppab-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,30px); color:#22323f; margin:8px 0 4px; letter-spacing:-.4px; }
.ppab-sub{ color:#5c6f7e; font-size:16px; }
.ppab-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ppab-card{ background:#fff; border:1px solid var(--pp-line); border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(22,36,47,.08); opacity:0; transform:translateY(24px); transition:opacity .7s var(--pp-ease), transform .7s var(--pp-ease); }
.ppab-card.priv{ transition-delay:.12s; }
.f4j-ig.in .ppab-card{ opacity:1; transform:none; }
.ppab-card-h{ display:flex; align-items:center; gap:10px; padding:16px 22px; color:#fff; font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; }
.ppab-card.pub .ppab-card-h{ background:linear-gradient(135deg,#31485a,#3d5a71); }
.ppab-card.priv .ppab-card-h{ background:linear-gradient(135deg,#16999b,#1eb0b2); }
.ppab-card-h i{ font-size:24px; }
.ppab-count{ margin-inline-start:auto; background:rgba(255,255,255,.22); border-radius:20px; min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.ppab-card ul{ list-style:none; margin:0; padding:10px 20px 18px; }
.ppab-card li{ display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid #eef3f7; font-size:14.5px; line-height:1.35; font-weight:600; color:#33455a; opacity:0; transform:translateX(10px); transition:opacity .5s var(--pp-ease) var(--d,0ms), transform .5s var(--pp-ease) var(--d,0ms); }
[dir="rtl"] .ppab-card li{ transform:translateX(-10px); }
.f4j-ig.in .ppab-card li{ opacity:1; transform:none; }
.ppab-card li:last-child{ border-bottom:none; }
.ppab-card li i{ flex:none; width:42px; height:42px; border-radius:11px; background:#f1f6fa; display:flex; align-items:center; justify-content:center; font-size:22px; }
.ppab-card.pub li i{ color:#31485a; }
.ppab-card.priv li i{ color:#16999b; }
.ppab-observer{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:9px; background:#f6f8fa; border:1px dashed #c7d4dd; border-radius:30px; padding:12px 24px; font-weight:600; color:#4a5c6e; font-size:14.5px; opacity:0; transition:opacity .6s ease .5s; }
.f4j-ig.in .ppab-observer{ opacity:1; }
.ppab-observer i{ color:var(--pp-blue); font-size:20px; }
@media all and (max-width:760px){ .ppab-cols{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .ppab-card,.ppab-card li,.ppab-observer{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- DIB mechanism ---------- */
.dib-ig{ font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; color:#22323f; --d-navy:#31485a; --d-blue:#3399d1; --d-ease:cubic-bezier(.22,1,.36,1); }
.dib-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:34px; align-items:start; }
.dib-role{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #e3eaf0; border-inline-start:4px solid var(--d-blue); border-radius:12px; padding:15px 18px; margin-bottom:12px; box-shadow:0 8px 22px rgba(22,36,47,.06);
  opacity:0; transform:translateX(-16px); transition:opacity .55s var(--d-ease) var(--d,0ms), transform .55s var(--d-ease) var(--d,0ms); }
[dir="rtl"] .dib-role{ transform:translateX(16px); }
.f4j-ig.in .dib-role{ opacity:1; transform:none; }
.dib-role-ic{ flex:none; width:46px; height:46px; border-radius:12px; background:#eaf4fb; color:var(--d-navy); display:flex; align-items:center; justify-content:center; }
.dib-role-ic i{ font-size:24px; }
.dib-role-n{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15.5px; color:var(--d-navy); }
.dib-role-t{ font-size:13.5px; line-height:1.5; color:#4a5c6e; margin-top:3px; }
.dib-flow{ display:flex; flex-direction:column; align-items:center; padding:6px 0; }
.dib-node{ width:100%; max-width:230px; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e3eaf0; border-radius:14px; padding:12px 16px; box-shadow:0 8px 20px rgba(22,36,47,.08);
  opacity:0; transform:scale(.9); transition:opacity .5s var(--d-ease) var(--d,0ms), transform .5s var(--d-ease) var(--d,0ms); }
.f4j-ig.in .dib-node{ opacity:1; transform:none; }
.dib-node-ic{ flex:none; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#3399d1,#2b86bb); color:#fff; display:flex; align-items:center; justify-content:center; }
.dib-node-ic i{ font-size:23px; }
.dib-node-n{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14.5px; color:var(--d-navy); }
.dib-arrow{ color:#3ba9d4; height:26px; display:flex; align-items:center; opacity:0; transition:opacity .4s ease var(--d,0ms); }
.f4j-ig.in .dib-arrow{ opacity:1; }
.dib-arrow i{ font-size:26px; }
.dib-legend{ margin-top:20px; display:flex; flex-direction:column; gap:9px; background:#f6f8fa; border:1px solid #e3eaf0; border-radius:14px; padding:14px 18px; width:100%; max-width:230px; }
.dib-legend span{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#4a5c6e; }
.dib-lg{ width:26px; height:8px; border-radius:4px; flex:none; }
@media all and (max-width:820px){ .dib-grid{ grid-template-columns:1fr; } .dib-flow{ margin-top:10px; } }
@media (prefers-reduced-motion: reduce){ .dib-role,.dib-node,.dib-arrow{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- ICF beneficiaries bar chart ---------- */
.icf-chart{ font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; color:#22323f; --i-ease:cubic-bezier(.22,1,.36,1); }
.icf-plot{ position:relative; padding:0 10px 96px 46px; height:340px; }
.icf-grid{ position:absolute; left:46px; right:10px; height:1px; background:#e6edf2; }
.icf-grid span{ position:absolute; left:-42px; top:-9px; font-size:12px; color:#8496a6; }
.icf-bars{ position:absolute; left:46px; right:10px; bottom:0; height:calc(100% ); display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:end; }
.icf-bar-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.icf-bar-val{ font-weight:800; font-size:15px; color:#2f5596; margin-bottom:6px; opacity:0; transition:opacity .5s ease var(--d,0ms); }
.f4j-ig.in .icf-bar-val{ opacity:1; }
.icf-bar{ width:64%; max-width:74px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 82%, #000 4%)); height:0; box-shadow:0 6px 16px rgba(47,85,150,.18); transition:height 1.1s var(--i-ease) var(--d,0ms); }
.f4j-ig.in .icf-bar{ height:var(--h); }
.icf-bar-lbl{ position:absolute; top:calc(100% + 10px); font-size:12.5px; line-height:1.25; text-align:center; color:#4a5c6e; font-weight:600; width:118%; }
@media all and (max-width:720px){ .icf-plot{ height:300px; padding-bottom:120px; } .icf-bar-lbl{ font-size:11px; } }
@media (prefers-reduced-motion: reduce){ .icf-bar{ height:var(--h) !important; } .icf-bar-val{ opacity:1 !important; } }

/* ============================================================
   Beneficiaries page — ICF grantees list (coded card grid)
   ============================================================ */
.ben-ig{
  --ben-navy:#31485a; --ben-blue:#3399d1; --ben-ink:#22323f; --ben-muted:#5c6f7e;
  --ben-line:#e6edf2; --ben-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; width:1080px !important; max-width:100%;
}
/* header */
.ben-head{ text-align:center; max-width:820px; margin:0 auto 30px; }
.ben-eyebrow{
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--ben-blue); margin-bottom:12px;
}
.ben-title{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(26px,3.2vw,38px);
  color:var(--ben-ink); letter-spacing:-.5px; line-height:1.1;
}
.ben-title::after{ content:''; display:block; width:64px; height:4px; border-radius:3px; margin:16px auto 0;
  background:linear-gradient(90deg,var(--ben-blue),#16999b); }
.ben-intro{ margin:20px auto 0; font-size:16px; line-height:1.72; color:var(--ben-muted); max-width:760px; }

/* impact stat band */
.ben-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:34px 0 40px;
  background:linear-gradient(135deg,#31485a,#22323f); border-radius:20px; padding:30px 22px;
  box-shadow:0 20px 46px rgba(34,50,63,.20);
}
.ben-stat{ text-align:center; color:#fff; position:relative; opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ben-ease) var(--d,0ms), transform .7s var(--ben-ease) var(--d,0ms); }
.ben-stat:not(:last-child)::after{ content:''; position:absolute; inset-inline-end:-8px; top:18%; height:64%; width:1px; background:rgba(255,255,255,.16); }
.f4j-ig.in .ben-stat{ opacity:1; transform:none; }
.ben-stat-num{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(26px,3vw,38px); line-height:1; letter-spacing:-.5px; }
.ben-stat-suf{ font-size:.62em; margin-inline-start:1px; }
.ben-stat-region{ display:inline-flex; align-items:center; gap:5px; font-size:clamp(20px,2.2vw,26px); color:#eaf5fb; }
.ben-stat-region i{ font-family:'Material Symbols Outlined','Material Icons'; font-size:26px; color:#5fbef0; font-style:normal;
  font-variation-settings:'FILL' 1; }
.ben-stat-lbl{ margin-top:9px; font-size:12.5px; line-height:1.35; color:#bcccd8; font-weight:600; letter-spacing:.2px; }

/* grid of grantee cards */
.ben-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.ben-card{
  display:flex; gap:18px; background:#fff; border:1px solid var(--ben-line); border-radius:18px;
  padding:20px; position:relative; overflow:hidden; text-align:start;
  box-shadow:0 10px 26px rgba(34,50,63,.06);
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ben-ease) var(--d,0ms), transform .6s var(--ben-ease) var(--d,0ms), box-shadow .35s ease, border-color .35s ease;
}
.f4j-ig.in .ben-card{ opacity:1; transform:none; }
.ben-card::before{ content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background:var(--accent); }
.ben-card:hover{ box-shadow:0 22px 46px rgba(34,50,63,.14); border-color:color-mix(in srgb,var(--accent) 40%, var(--ben-line)); }
.ben-logo{
  flex:0 0 118px; width:118px; height:118px; border-radius:14px; background:#fff;
  border:1px solid var(--ben-line); display:flex; align-items:center; justify-content:center; padding:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.ben-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ben-body{ flex:1; min-width:0; }
.ben-sector{
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, #fff);
  border:1px solid color-mix(in srgb,var(--accent) 26%, #fff); border-radius:20px; padding:4px 11px; margin-bottom:9px;
}
.ben-name{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16.5px; line-height:1.28; color:var(--ben-ink); margin:0 0 8px; }
.ben-desc{ font-size:13.5px; line-height:1.6; color:var(--ben-muted); margin:0 0 15px; }
.ben-metrics{ display:flex; flex-direction:column; gap:9px; border-top:1px dashed var(--ben-line); padding-top:13px; }
.ben-metric{ display:flex; align-items:center; gap:10px; }
.ben-metric > i{ font-family:'Material Symbols Outlined','Material Icons'; font-style:normal; font-size:20px; color:var(--accent);
  flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px;
  background:color-mix(in srgb,var(--accent) 11%, #fff); font-variation-settings:'FILL' 1; }
.ben-metric > div{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.ben-metric-v{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:var(--ben-ink); }
.ben-metric-k{ font-size:11px; color:#8496a6; font-weight:600; letter-spacing:.2px; }

/* RTL */
[dir="rtl"] .ben-ig{ font-family:'Segoe UI Variable Text','Tahoma',sans-serif; }

@media all and (max-width:1000px){
  .ben-grid{ grid-template-columns:1fr; }
}
@media all and (max-width:560px){
  .ben-stats{ grid-template-columns:repeat(2,1fr); gap:22px 12px; }
  .ben-stat:nth-child(2)::after{ display:none; }
  .ben-card{ flex-direction:column; }
  .ben-logo{ width:96px; height:96px; flex-basis:96px; }
}
@media (prefers-reduced-motion: reduce){
  .ben-stat,.ben-card{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   DIB I — Job Starts Per Segment (radial hub-and-spoke)
   ============================================================ */
.jsp-ig{
  --jsp-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  text-align:center; width:780px !important; max-width:100%;
}
.jsp-title{
  font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.3px;
  font-size:clamp(21px,2.5vw,30px); color:#22323f; margin-bottom:20px;
}
.jsp-stage{ position:relative; width:700px; max-width:96%; aspect-ratio:1; margin:0 auto; }
.jsp-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.jsp-ring{ fill:none; stroke:#dde5eb; stroke-width:.3; stroke-dasharray:233; stroke-dashoffset:233;
  transition:stroke-dashoffset 1.1s ease .1s; }
.f4j-ig.in .jsp-ring{ stroke-dashoffset:0; }
.jsp-spoke{ stroke-width:.5; stroke-linecap:round; stroke-dasharray:40; stroke-dashoffset:40;
  transition:stroke-dashoffset .6s ease var(--d,0ms); }
.f4j-ig.in .jsp-spoke{ stroke-dashoffset:0; }

.jsp-bubble{
  position:absolute; width:23%; aspect-ratio:1; border-radius:50%; padding:6%;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
  font-size:clamp(8px,1.32vw,10.5px); line-height:1.16; font-weight:600;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  box-shadow:0 9px 22px rgba(34,50,63,.18);
  transition:opacity .5s var(--jsp-ease) var(--d,0ms), transform .55s var(--jsp-ease) var(--d,0ms);
}
.f4j-ig.in .jsp-bubble{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.jsp-bubble span{ display:block; }
.jsp-navy{ background:#2f4351; }
.jsp-blue{ background:#3399d1; }
.jsp-teal{ background:#16999b; }

.jsp-hub{
  position:absolute; left:50%; top:50%; width:27%; aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.5px; font-size:clamp(18px,2.5vw,29px);
  background:radial-gradient(circle at 38% 32%, #ec3f9c 0%, #d6157f 60%, #b40f69 100%);
  box-shadow:0 14px 34px rgba(214,21,127,.42); z-index:4;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  transition:opacity .6s var(--jsp-ease) .15s, transform .6s var(--jsp-ease) .15s;
}
.f4j-ig.in .jsp-hub{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.jsp-pct{
  position:absolute; z-index:3; font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(11px,1.5vw,15px); background:#fff; padding:1px 8px; border-radius:20px;
  box-shadow:0 3px 10px rgba(34,50,63,.16); white-space:nowrap;
  transform:translate(-50%,-50%) scale(.5); opacity:0;
  transition:opacity .45s var(--jsp-ease) var(--d,0ms), transform .45s var(--jsp-ease) var(--d,0ms);
}
.f4j-ig.in .jsp-pct{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.jsp-arrow{ position:absolute; z-index:2; opacity:0; transition:opacity .4s ease var(--d,0ms); }
.f4j-ig.in .jsp-arrow{ opacity:1; }
.jsp-arrow i{ display:block; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor; }

@media all and (max-width:600px){
  .jsp-stage{ width:100%; }
  .jsp-pct{ font-size:10px; padding:0 5px; }
}
@media (prefers-reduced-motion: reduce){
  .jsp-bubble,.jsp-hub,.jsp-pct{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .jsp-arrow{ opacity:1 !important; }
  .jsp-ring,.jsp-spoke{ stroke-dashoffset:0 !important; }
}