/*
"What we do" — animated data-dashboard infographics (HTML/CSS/SVG).
Loaded by page.php. Charts draw in on scroll (via .in on the .f4j-ig wrapper).
Brand: teal #16999b | blue #3698cd | navy #253a4b
*/
.wwd-ig{
  --w-teal:#16999b;
  --w-blue:#3698cd;
  --w-navy:#253a4b;
  --w-lite:#c7d4dd;
  --w-ink:#2b3a4a;
  --w-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  color:var(--w-ink);
}
.wwd-ig .w-teal{ color:var(--w-teal); }
.wwd-ig .w-red{ color:#c0334d; }

/* ---- section title ---- */
.wwd-cap{
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(17px,2vw,22px);
  color:var(--w-ink);
  margin:0 0 26px;
}

/* ---- card surfaces ---- */
.wwd-card{ background:#eef3f7; border-radius:18px; padding:24px; }
.wwd-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.wwd-grid2b{ display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:center; }

/* ---- big stat number ---- */
.wwd-stat{ display:flex; align-items:center; gap:12px; }
.wwd-stat i.wwd-ic{ font-size:34px; color:var(--w-navy); opacity:.9; }
.wwd-stat-num{
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(30px,4vw,46px); color:var(--w-navy); line-height:1;
  font-variant-numeric:tabular-nums;
}
.wwd-stat-lbl{ font-family:'Montserrat',sans-serif; font-weight:700; color:var(--w-teal); font-size:16px; }
.wwd-navytxt{ font-family:'Montserrat',sans-serif; font-weight:800; color:var(--w-navy); font-size:clamp(18px,2.2vw,26px); line-height:1.25; }

/* ================= SVG RING gauge ================= */
.wwd-ring{ position:relative; display:inline-flex; width:var(--sz,110px); height:var(--sz,110px); }
.wwd-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.wwd-ring .tk{ fill:none; stroke:#e2e9ef; stroke-width:3.4; }
.wwd-ring .vl{
  fill:none; stroke:var(--c,var(--w-blue)); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:0 100;
  transition:stroke-dasharray 1.3s var(--w-ease) var(--d,0ms);
}
.f4j-ig.in .wwd-ring .vl{ stroke-dasharray:var(--pct) 100; }
.wwd-ring b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:calc(var(--sz,110px)*.2); color:var(--w-navy);
}
.wwd-ring-wrap{ text-align:center; }
.wwd-ring-cap{ margin-top:8px; font-size:15px; color:var(--w-ink); }

/* ================= SEMICIRCLE gauge ================= */
.wwd-semi{ text-align:center; }
.wwd-semi svg{ width:var(--sz,150px); height:calc(var(--sz,150px)*.56); overflow:visible; }
.wwd-semi .tk{ fill:none; stroke:#e2e9ef; stroke-width:9; stroke-linecap:round; }
.wwd-semi .vl{
  fill:none; stroke:var(--c,var(--w-teal)); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:0 100;
  transition:stroke-dasharray 1.3s var(--w-ease) var(--d,0ms);
}
.f4j-ig.in .wwd-semi .vl{ stroke-dasharray:var(--pct) 100; }
.wwd-semi-val{ font-weight:700; font-size:22px; color:var(--w-navy); margin-top:-6px; }
.wwd-semi-cap{ font-size:18px; color:var(--w-ink); margin-top:2px; }

/* ================= DONUT ================= */
.wwd-donut{ position:relative; display:inline-flex; width:var(--sz,180px); height:var(--sz,180px); }
.wwd-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.wwd-donut circle{ fill:none; stroke-width:6.6; }
.wwd-donut .tk{ stroke:#eef3f7; }
.wwd-donut .seg{
  stroke-dasharray:0 100;
  transition:stroke-dasharray 1.1s var(--w-ease) var(--sd,0ms);
}
.f4j-ig.in .wwd-donut .seg{ stroke-dasharray:var(--len) 100; }
.wwd-donut b{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-weight:800; color:#fff; font-size:13px;
}
.wwd-legend{ list-style:none; margin:0; padding:0; font-size:13px; }
.wwd-legend li{ display:flex; align-items:center; gap:8px; margin-bottom:7px; color:var(--w-ink); }
.wwd-legend .dot{ width:10px; height:10px; border-radius:50%; flex:none; }

/* ================= BARS (vertical) ================= */
.wwd-bars{ display:flex; align-items:flex-end; gap:26px; height:150px; padding:0 10px; }
.wwd-bar{ width:52px; text-align:center; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.wwd-bar .bar{
  width:100%; border-radius:7px 7px 0 0; background:var(--c,var(--w-blue));
  height:0; transition:height 1.1s var(--w-ease) var(--d,0ms);
}
.f4j-ig.in .wwd-bar .bar{ height:var(--h); }
.wwd-bar .bl{ font-size:13px; margin-top:6px; color:var(--w-ink); }

/* ================= PROGRESS (horizontal) ================= */
.wwd-prog-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.wwd-prog-name{ width:86px; font-size:17px; color:var(--w-ink); }
.wwd-prog-track{ flex:1; height:14px; border-radius:8px; background:#e2e9ef; overflow:hidden; }
.wwd-prog-fill{
  height:100%; border-radius:8px; background:var(--c,var(--w-blue));
  width:0; transition:width 1.2s var(--w-ease) var(--d,0ms);
}
.f4j-ig.in .wwd-prog-fill{ width:var(--pct); }
.wwd-prog-val{ width:52px; text-align:right; font-weight:700; color:var(--w-navy); }

/* ================= icon-percent grid ================= */
.wwd-sectors{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.wwd-sector{ display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(12px); transition:opacity .5s var(--w-ease) var(--d,0ms), transform .5s var(--w-ease) var(--d,0ms); }
.f4j-ig.in .wwd-sector{ opacity:1; transform:none; }
.wwd-sector .si{ width:52px; height:52px; flex:none; border-radius:10px; background:#f4f7fa; display:flex; align-items:center; justify-content:center; }
.wwd-sector .si i{ font-size:27px; color:var(--w-navy); }
.wwd-sector .sn{ font-style:italic; font-weight:700; font-size:13.5px; line-height:1.25; color:var(--w-navy); }
.wwd-sector .sp{ font-weight:800; color:var(--w-teal); font-size:16px; }
.wwd-divider{ width:2px; background:var(--w-navy); align-self:stretch; }

/* ================= map ================= */
.wwd-map-wrap{ display:flex; gap:14px; align-items:flex-start; margin-top:18px; }
.wwd-map{ position:relative; width:150px; flex:none; }
.wwd-map img{ width:100%; display:block; filter:none; }
.wwd-map-pins{ flex:1; }
.wwd-map-pin{ display:flex; align-items:baseline; gap:8px; margin-bottom:18px; opacity:0; transform:translateX(10px); transition:opacity .5s ease var(--d,0ms), transform .5s var(--w-ease) var(--d,0ms); }
.f4j-ig.in .wwd-map-pin{ opacity:1; transform:none; }
.wwd-map-pin i{ color:var(--w-teal); font-size:19px; }
.wwd-map-pin .mn{ font-style:italic; font-weight:700; font-size:14px; color:var(--w-navy); }
.wwd-map-pin .mp{ font-weight:800; font-size:17px; color:var(--w-teal); }
.wwd-gaza{ margin-top:6px; text-align:center; }
.wwd-gaza .mp{ color:#9c2b53; font-weight:800; font-size:16px; }
.wwd-gaza .mn{ color:#9c2b53; font-style:italic; font-weight:700; font-size:13px; }

/* ================= list rows (capital) ================= */
.wwd-rows{ margin:6px 0; }
.wwd-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid #e2e9ef; }
.wwd-row:last-child{ border-bottom:none; }
.wwd-row .rn{ font-weight:600; color:var(--w-ink); font-size:14px; }
.wwd-row .rp{ font-weight:800; color:var(--w-teal); font-size:14px; }

@media all and (max-width:820px){
  .wwd-grid2,.wwd-grid2b,.wwd-sectors{ grid-template-columns:1fr; }
  .wwd-divider{ display:none; }
  .wwd-map-wrap{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce){
  .wwd-ig *{ transition:none !important; }
  .f4j-ig .wwd-ring .vl,.f4j-ig .wwd-semi .vl{ stroke-dasharray:var(--pct) 100 !important; }
  .f4j-ig .wwd-donut .seg{ stroke-dasharray:var(--len) 100 !important; }
  .f4j-ig .wwd-bar .bar{ height:var(--h) !important; }
  .f4j-ig .wwd-prog-fill{ width:var(--pct) !important; }
  .f4j-ig .wwd-sector,.f4j-ig .wwd-map-pin{ opacity:1 !important; transform:none !important; }
}