/* Why this work matters in Sindh — Overview & Vision only */
.ws-sec{
  --ws-deep:#0F3B2D;
  --ws-green:#1E6B49;
  --ws-gold:#E4B65E;
  --ws-rose:#8E2440;
  --ws-mint:#E3F0E8;
  --ws-rose-soft:#F8E5E8;
  --ws-gold-soft:#F8EDD4;
  --ws-ink:var(--ink,#10261D);
  --ws-muted:var(--muted,#566A60);
  --ws-surface:var(--surface,#fff);
  --ws-line:var(--line,#E6EAE4);
  background:#fff;
  color:var(--ws-ink);
  padding:64px 0 72px;
  overflow:hidden;
}
.ws-wrap{
  width:100%;
  max-width:1170px;
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,28px);
  box-sizing:border-box;
}
.ws-row{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}
.ws-copy{min-width:0}
.ws-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ws-rose);
  font-family:var(--display),'Plus Jakarta Sans',sans-serif;
}
.ws-eyebrow::before{
  content:"";
  width:28px;height:2px;
  background:var(--ws-rose);
  flex:none;
}
.ws-title{
  margin:0 0 16px;
  font-family:var(--display),'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ws-ink);
  max-width:16em;
}
.ws-title .ws-sindh{
  color:var(--ws-green);
  position:relative;
  display:inline-block;
}
.ws-title .ws-sindh::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.06em;
  height:6px;
  border-radius:3px;
  background:var(--ws-gold);
  transform:scaleX(0);
  transform-origin:left center;
}
.ws-lead{
  margin:0 0 22px;
  font-family:var(--body),'DM Sans',sans-serif;
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ws-muted);
  max-width:34em;
}
.ws-icons{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ws-icons li{display:flex;gap:14px;align-items:flex-start}
.ws-ico{
  width:46px;height:46px;border-radius:14px;flex:none;
  display:grid;place-items:center;
}
.ws-ico .ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ws-ico.mint{background:var(--ws-mint);color:var(--ws-green)}
.ws-ico.rose{background:var(--ws-rose-soft);color:var(--ws-rose)}
.ws-ico.gold{background:var(--ws-gold-soft);color:#8A6A1E}
.ws-icons strong{
  display:block;
  font-family:var(--display),'Plus Jakarta Sans',sans-serif;
  font-size:.98rem;font-weight:800;color:var(--ws-ink);margin-bottom:2px;
}
.ws-icons span{font-size:.9rem;line-height:1.5;color:var(--ws-muted)}

.ws-photo-col{position:relative;min-width:0}
.ws-photo-back{
  position:absolute;inset:18px -18px -18px 18px;
  border-radius:24px;background:var(--ws-mint);z-index:0;
}
.ws-photo{
  position:relative;z-index:1;
  aspect-ratio:16/9;border-radius:24px;overflow:hidden;
  box-shadow:0 14px 36px rgba(16,38,29,.14);
  background:var(--ws-mint);
}
.ws-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ws-caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55);
  font-size:.82rem;font-weight:700;color:var(--ws-deep);
  font-family:var(--display),'Plus Jakarta Sans',sans-serif;
}

.ws-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:46px;
}
.ws-card{
  position:relative;overflow:hidden;
  background:var(--ws-surface);
  border:1px solid var(--ws-line);
  border-radius:22px;
  padding:22px 20px 20px;
  box-shadow:0 8px 24px rgba(16,38,29,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ws-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,38,29,.12)}
.ws-card::before{
  content:"";position:absolute;left:0;top:0;height:5px;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:var(--ws-bar,var(--ws-green));
}
.ws-card::after{
  content:"";position:absolute;right:-28px;bottom:-28px;
  width:120px;height:120px;border-radius:50%;
  background:var(--ws-bar,var(--ws-green));opacity:.09;
  transform:scale(.6);
}
.ws-card.is-green{--ws-bar:var(--ws-green)}
.ws-card.is-rose{--ws-bar:var(--ws-rose)}
.ws-card.is-gold{--ws-bar:var(--ws-gold)}
.ws-card-ico{
  width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:14px;
  background:var(--ws-mint);color:var(--ws-green);
  position:relative;z-index:1;
}
.ws-card.is-rose .ws-card-ico{background:var(--ws-rose-soft);color:var(--ws-rose)}
.ws-card.is-gold .ws-card-ico{background:var(--ws-gold-soft);color:#8A6A1E}
.ws-card-ico .ic{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ws-num{
  position:relative;z-index:1;
  display:block;
  font-family:var(--display),'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem,4vw,3.3rem);
  line-height:1.05;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--ws-deep);
  margin-bottom:6px;
}
.ws-label{
  position:relative;z-index:1;
  display:block;
  font-size:.98rem;
  line-height:1.4;
  color:var(--ws-muted);
  margin-bottom:12px;
}
.ws-tag{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:999px;
  background:rgba(228,182,94,.16);
  color:#6B5210;
  font-size:.72rem;font-weight:700;
  letter-spacing:.04em;
}
.ws-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ws-gold);flex:none;
}

.ws-note{
  margin-top:22px;
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  background:var(--ws-rose-soft);
  border-left:4px solid var(--ws-rose);
  font-size:.9rem;line-height:1.55;color:#5A2434;
}
.ws-note .ic{width:1.2em;height:1.2em;flex:none;margin-top:2px;color:var(--ws-rose);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Reveal states — only when html.js */
html.js .ws-sec:not(.ws-in) .ws-reveal{
  opacity:0;transform:translateY(18px);
}
html.js .ws-sec.ws-in .ws-reveal{
  animation:ws-up .7s cubic-bezier(.2,.8,.2,1) forwards;
}
html.js .ws-sec.ws-in .ws-reveal:nth-child(1){animation-delay:0ms}
html.js .ws-sec.ws-in .ws-reveal:nth-child(2){animation-delay:100ms}
html.js .ws-sec.ws-in .ws-reveal:nth-child(3){animation-delay:200ms}
html.js .ws-sec.ws-in .ws-reveal:nth-child(4){animation-delay:300ms}
html.js .ws-sec.ws-in .ws-reveal:nth-child(5){animation-delay:400ms}
html.js .ws-sec.ws-in .ws-reveal:nth-child(6){animation-delay:500ms}
html.js .ws-sec:not(.ws-in) .ws-photo{opacity:0;transform:scale(1.03)}
html.js .ws-sec.ws-in .ws-photo{
  animation:ws-photo .9s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
html.js .ws-sec.ws-in .ws-title .ws-sindh::after{
  animation:ws-draw .7s ease-out .45s forwards;
}
html.js .ws-sec:not(.ws-in) .ws-card{
  opacity:0;transform:translateY(18px);
}
html.js .ws-sec.ws-in .ws-card{
  animation:ws-up .7s cubic-bezier(.2,.8,.2,1) forwards;
}
html.js .ws-sec.ws-in .ws-card:nth-child(1){animation-delay:0ms}
html.js .ws-sec.ws-in .ws-card:nth-child(2){animation-delay:150ms}
html.js .ws-sec.ws-in .ws-card:nth-child(3){animation-delay:300ms}
html.js .ws-sec.ws-in .ws-card.is-on::before{
  animation:ws-bar .6s ease-out forwards;
}
html.js .ws-sec.ws-in .ws-card.is-on::after{
  animation:ws-blob .7s ease-out forwards;
}
html.js .ws-sec .ws-card.is-done .ws-card-ico{
  animation:ws-pulse .9s ease-out 1;
}
@keyframes ws-up{to{opacity:1;transform:none}}
@keyframes ws-photo{to{opacity:1;transform:scale(1)}}
@keyframes ws-draw{to{transform:scaleX(1)}}
@keyframes ws-bar{to{transform:scaleX(1)}}
@keyframes ws-blob{to{transform:scale(1)}}
@keyframes ws-pulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@media (max-width:900px){
  .ws-row{grid-template-columns:1fr;gap:28px}
  .ws-photo-col{order:-1}
  .ws-stats{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .ws-card{display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:start}
  .ws-card-ico{grid-row:1 / span 3;margin:0}
  .ws-num{grid-column:2}
  .ws-label{grid-column:2;margin-bottom:8px}
  .ws-tag{grid-column:2;justify-self:start}
}
@media (max-width:360px){
  .ws-sec{padding:48px 0 56px}
  .ws-title{font-size:1.75rem}
}

:root[data-theme="dark"] .ws-sec,
:root:not([data-theme="light"]) .ws-sec{
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ws-sec{
    --ws-ink:var(--ink);
    --ws-muted:var(--muted);
    --ws-surface:var(--surface);
    --ws-line:var(--line);
  }
  :root:not([data-theme="light"]) .ws-sec{background:var(--bg,#0A1612)}
  :root:not([data-theme="light"]) .ws-num{color:var(--ink)}
  :root:not([data-theme="light"]) .ws-caption{background:rgba(18,37,29,.78);color:#E8F0EB;border-color:rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .ws-tag{color:#F2D089}
}
:root[data-theme="dark"] .ws-sec{
  --ws-ink:var(--ink);
  --ws-muted:var(--muted);
  --ws-surface:var(--surface);
  --ws-line:var(--line);
  background:var(--bg,#0A1612);
}
:root[data-theme="dark"] .ws-num{color:var(--ink)}
:root[data-theme="dark"] .ws-caption{background:rgba(18,37,29,.78);color:#E8F0EB;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .ws-tag{color:#F2D089}

@media (prefers-reduced-motion:reduce){
  html.js .ws-sec .ws-reveal,
  html.js .ws-sec .ws-photo,
  html.js .ws-sec .ws-card,
  html.js .ws-sec .ws-title .ws-sindh::after,
  html.js .ws-sec .ws-card::before,
  html.js .ws-sec .ws-card::after,
  html.js .ws-sec .ws-card-ico{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  html.js .ws-sec .ws-title .ws-sindh::after{transform:scaleX(1)!important}
  html.js .ws-sec .ws-card::before{transform:scaleX(1)!important}
  html.js .ws-sec .ws-card::after{transform:scale(1)!important}
  .ws-card:hover{transform:none}
}