
/* ══════════════════════════════════════════════
   DESIGN TOKENS — Papaya Orange / Deep Teal / Sand Beige
   ══════════════════════════════════════════════ */
:root {
  --papaya:        #F2622E;
  --papaya-mid:    #E8511E;
  --papaya-light:  #F9916A;
  --papaya-pale:   #FEF0EB;
  --teal:          #1B5E52;
  --teal-mid:      #236B5D;
  --teal-light:    #2E8B78;
  --teal-pale:     #E8F5F2;
  --sand:          #F5EFE0;
  --sand-mid:      #EDE3CC;
  --sand-dark:     #C9B99A;
  --charcoal:      #1C1C1E;
  --charcoal-mid:  #2C2C2E;
  --charcoal-soft: #444444;
  --muted:         #6B6B6E;
  --white:         #FFFFFF;
  --border-light:  #ECDECF;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   BALOCHI PATTERN SYSTEM — geometric embroidery
   ══════════════════════════════════════════════ */
.balochi-strip {
  height: 10px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--papaya)       0px, var(--papaya)       18px,
      var(--papaya-light) 18px, var(--papaya-light) 28px,
      var(--sand-dark)    28px, var(--sand-dark)    36px,
      var(--teal-light)   36px, var(--teal-light)   46px,
      var(--teal)         46px, var(--teal)          56px,
      var(--sand-dark)    56px, var(--sand-dark)     64px,
      var(--papaya-light) 64px, var(--papaya-light)  74px
    );
}
.balochi-strip-thin {
  height: 5px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--papaya) 0px, var(--papaya) 10px,
      var(--teal-light) 10px, var(--teal-light) 18px,
      var(--sand-dark) 18px, var(--sand-dark) 24px,
      var(--teal-light) 24px, var(--teal-light) 32px
    );
}

/* Embroidery SVG motif as CSS background */
.balochi-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23F2622E' stroke-width='0.6' opacity='0.12'%3E%3Cpolygon points='40,4 52,28 76,28 56,44 64,68 40,54 16,68 24,44 4,28 28,28'/%3E%3Cpolygon points='40,14 49,32 68,32 53,43 59,61 40,50 21,61 27,43 12,32 31,32'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ══════════════════════════════════════════════
   COVER
   ══════════════════════════════════════════════ */
.cover {
  min-height: 100vh;
  background: var(--charcoal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}
.cover-hero-img {
  position: absolute; inset: 0;
  background-image: url('assets/images/library.jpg');
  background-size: cover; background-position: center top;
  opacity: 0.2;
}
.cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(28,28,30,0.97) 0%,
    rgba(27,94,82,0.5) 55%,
    rgba(242,98,46,0.25) 100%
  );
}
/* Balochi pattern woven into the left side */
.cover-pattern {
  position: absolute; top: 0; left: 0; width: 340px; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23F2622E' stroke-width='0.5' opacity='0.08'%3E%3Cpolygon points='30,3 39,21 57,21 43,33 48,51 30,40 12,51 17,33 3,21 21,21'/%3E%3Cpolygon points='30,10 36,23 50,23 39,31 43,44 30,36 17,44 21,31 10,23 24,23'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.cover-top {
  position: relative; z-index:3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cover-logo img { height: 52px; object-fit:contain; }
.cover-logo-fallback {
  font-family:'Cormorant Garamond',serif;
  font-size: 22px; font-weight:700; letter-spacing:0.08em;
  color: var(--white);
}
.cover-badge {
  font-family:'DM Mono',monospace;
  font-size: 10px; letter-spacing: 0.18em; color: var(--sand-dark);
  text-transform: uppercase; padding: 7px 14px;
  border: 1px solid rgba(205,185,154,0.4); border-radius: 2px;
}
.cover-body {
  position: relative; z-index:3;
  display: flex; flex-direction:column; justify-content:center;
  padding: 64px 64px 48px;
  max-width: 980px;
}
.cover-eyebrow {
  font-family:'DM Mono',monospace;
  font-size: 10px; letter-spacing: 0.28em; text-transform:uppercase;
  color: var(--teal-light); margin-bottom:20px;
  display: flex; align-items:center; gap:12px;
}
.cover-eyebrow::before {
  content:''; width:32px; height:2px; background:var(--teal-light);
}
.cover-headline {
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(52px,7.5vw,96px);
  font-weight: 700; line-height: 0.95;
  color: var(--white); margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cover-headline em { color: var(--papaya); font-style:normal; }
.cover-org-name {
  font-family:'DM Sans',sans-serif;
  font-size: clamp(13px,1.6vw,17px); font-weight:400;
  color: rgba(255,255,255,0.55); letter-spacing:0.04em;
  margin-bottom: 32px;
}
.cover-tagline {
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(16px,1.8vw,21px); font-style:italic;
  color: rgba(255,255,255,0.75);
  padding: 14px 20px;
  border-left: 3px solid var(--papaya);
  margin-bottom: 52px; max-width: 520px; line-height:1.5;
}
.cover-stats {
  display: flex; gap: 52px; flex-wrap:wrap;
}
.stat-item {}
.stat-num {
  font-family:'Cormorant Garamond',serif;
  font-size: 44px; font-weight:700;
  color: var(--papaya-light); line-height:1;
  display:block; margin-bottom:4px;
}
.stat-lbl {
  font-size: 11px; color: rgba(255,255,255,0.45);
  text-transform:uppercase; letter-spacing:0.12em; display:block;
  max-width: 120px; line-height:1.4;
}
.stat-divider {
  width: 1px; background: rgba(255,255,255,0.12);
  margin: 4px 0; align-self:stretch;
}
.cover-bottom {
  position: relative; z-index:3;
  padding: 24px 64px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items:center; justify-content:space-between;
  color: rgba(255,255,255,0.3); font-size:12px;
}
.cover-scroll {
  font-family:'DM Mono',monospace;
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.12em;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.cover-socials { display:flex; align-items:center; gap:16px; }
.social-icon {
  color: rgba(255,255,255,0.55);
  display: flex;
  transition: color 0.2s, transform 0.2s;
}
.social-icon:hover { color: var(--papaya-light); transform: translateY(-2px); }
.social-icon svg { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) {
  .cover-bottom { flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════ */
nav {
  position: sticky; top:0; z-index:100;
  background: var(--charcoal);
  padding: 0 64px;
  display: flex; align-items:center; gap:28px;
  height: 52px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
  overflow-x: auto;
}
nav::-webkit-scrollbar { display:none; }
nav a {
  color: rgba(255,255,255,0.5); text-decoration:none;
  font-size: 11px; font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase; padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s; white-space:nowrap; flex-shrink:0;
}
nav a:hover { color: var(--papaya-light); border-color: var(--papaya); }

/* ══════════════════════════════════════════════
   SECTION BASE
   ══════════════════════════════════════════════ */
.section {
  padding: 88px 64px;
}
.section-inner { max-width:1120px; margin:0 auto; }
.section-sand { background: var(--sand); }
.section-teal { background: var(--teal); }
.section-charcoal { background: var(--charcoal); color:var(--white); }
.section-papaya { background: var(--papaya); color:var(--white); }

.eyebrow {
  font-family:'DM Mono',monospace;
  font-size: 10px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--papaya); margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::after { content:''; flex:1; max-width:40px; height:1px; background:currentColor; opacity:0.45; }
.section-charcoal .eyebrow,
.section-teal .eyebrow { color: var(--papaya-light); }

.h2 {
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(30px,4vw,48px); font-weight:700;
  line-height: 1.05; margin-bottom:14px; color:var(--charcoal);
  letter-spacing:-0.01em;
}
.section-charcoal .h2,
.section-teal .h2 { color:var(--white); }
.h2 em { color:var(--papaya); font-style:normal; }
.section-charcoal .h2 em { color:var(--papaya-light); }
.section-teal .h2 em { color: var(--sand); }

.gold-rule { width:56px; height:4px; background:var(--papaya); margin:0 0 28px; border-radius:2px; }
.section-charcoal .gold-rule,
.section-teal .gold-rule { background: var(--papaya-light); }

.lead {
  font-size: 17px; color:var(--muted); line-height:1.8;
  max-width:760px; margin-bottom:44px;
}
.section-charcoal .lead { color:rgba(255,255,255,0.6); }
.section-teal .lead { color:rgba(255,255,255,0.75); }

/* ══════════════════════════════════════════════
   EXECUTIVE SUMMARY BAND
   ══════════════════════════════════════════════ */
.exec-band {
  background: var(--teal);
  padding: 52px 64px;
  border-left: 6px solid var(--papaya);
}
.exec-band-inner {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:240px 1fr; gap:56px; align-items:center;
}
.exec-label {
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--sand); margin-bottom:12px;
}
.exec-title {
  font-family:'Cormorant Garamond',serif;
  font-size: 28px; font-weight:700; color:var(--white); line-height:1.2;
}
.exec-body {
  font-size:15px; line-height:1.8; color:rgba(255,255,255,0.75);
}
.exec-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px;
}
.exec-stat-box {
  background:rgba(255,255,255,0.08);
  padding:20px 16px; border-top:3px solid var(--papaya);
}
.exec-stat-num {
  font-family:'Cormorant Garamond',serif;
  font-size:34px; font-weight:700; color:var(--papaya-light); display:block; line-height:1;
}
.exec-stat-lbl {
  font-size:12px; color:rgba(255,255,255,0.55); margin-top:4px; line-height:1.4;
}

/* ══════════════════════════════════════════════
   ABOUT / WHO WE ARE
   ══════════════════════════════════════════════ */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;
}
.about-img-wrap {
  position:relative;
}
.about-img-wrap img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
.about-img-wrap::before {
  content:''; position:absolute;
  top:-14px; left:-14px; right:14px; bottom:14px;
  border:3px solid var(--papaya); z-index:-1;
}
.about-caption {
  position:absolute; bottom:-2px; right:-2px;
  background:var(--teal); color:white;
  padding:18px 20px; max-width:220px;
}
.about-caption-lbl {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.2em; opacity:0.6; margin-bottom:4px;
}
.about-caption-text { font-size:12px; line-height:1.5; }

/* ══════════════════════════════════════════════
   PHOTO STRIP
   ══════════════════════════════════════════════ */
.photo-strip {
  display:grid;
  grid-template-columns: 1.2fr 2fr 1.5fr 1.2fr;
  height:300px; gap:4px;
  overflow:hidden;
}
.photo-strip .strip-item {
  overflow:hidden; position:relative;
}
.photo-strip .strip-item img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 0.5s ease, filter 0.3s;
  display:block;
}
.photo-strip .strip-item:hover img {
  transform:scale(1.06); filter:brightness(1.08) saturate(1.12);
}
.photo-strip .strip-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.18) 0%, transparent 50%);
  pointer-events:none;
}

/* ══════════════════════════════════════════════
   MISSION / VISION SPLIT PANEL
   ══════════════════════════════════════════════ */
.mv-split {
  display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:48px;
}
.mv-panel {
  padding: 52px 44px; position:relative; overflow:hidden;
}
.mv-panel:first-child { background:var(--charcoal); }
.mv-panel:last-child  { background:var(--teal); }
.mv-panel-lbl {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.22em;
  text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:20px;
}
.mv-panel-text {
  font-family:'Cormorant Garamond',serif;
  font-size:19px; font-style:italic; color:var(--white);
  line-height:1.7;
}
.mv-panel::after {
  content:'"'; position:absolute; right:20px; bottom:-24px;
  font-family:'Cormorant Garamond',serif; font-size:200px;
  color:rgba(255,255,255,0.04); line-height:1;
}
.mv-panel-icon {
  font-size:28px; margin-bottom:16px; display:block;
}

/* Values */
.values-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--border-light);
}
.value-card {
  background:var(--white); padding:32px 28px;
  transition:background 0.2s;
}
.value-card:hover { background:var(--sand); }
.value-icon { font-size:26px; margin-bottom:12px; }
.value-title { font-weight:700; color:var(--charcoal); margin-bottom:6px; font-size:14px; }
.value-text  { font-size:13px; color:var(--muted); line-height:1.65; }

/* ══════════════════════════════════════════════
   FOUNDER SECTION — LEADERSHIP SPOTLIGHT
   ══════════════════════════════════════════════ */
.founder-wrap {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-mid) 60%, #1B3A30 100%);
  position:relative; overflow:hidden;
}
.founder-wrap .balochi-bg {
  position:absolute; inset:0; opacity:1;
  background-size:80px 80px;
}
.founder-inner {
  position:relative; z-index:2;
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:420px 1fr;
  gap:80px; align-items:center;
  padding: 88px 64px;
}
.founder-photo-frame {
  position:relative;
}
.founder-photo-frame img {
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; display:block;
}
.founder-photo-frame::before {
  content:''; position:absolute;
  top:-14px; right:-14px; left:14px; bottom:14px;
  border:3px solid var(--papaya); z-index:-1;
}
.founder-photo-ribbon {
  position:absolute; bottom:0; left:0; right:0;
  background: var(--papaya); color:white;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.founder-photo-ribbon-name { font-weight:700; font-size:15px; }
.founder-photo-ribbon-role { font-size:11px; opacity:0.85; }

.founder-content { color:var(--white); }
.founder-spotlight-tag {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--teal-light); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.founder-spotlight-tag::before { content:''; width:28px; height:2px; background:var(--teal-light); }
.founder-qmark {
  font-family:'Cormorant Garamond',serif; font-size:100px; font-weight:700;
  color:var(--papaya); opacity:0.2; line-height:0.9; margin-bottom:8px;
}
.founder-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-style:italic;
  color:var(--white); line-height:1.65; margin-bottom:28px;
}
.founder-bio {
  font-size:15px; color:rgba(255,255,255,0.65); line-height:1.8; margin-bottom:32px;
}
.founder-divider { width:40px; height:3px; background:var(--papaya); margin-bottom:20px; }
.founder-name { font-size:20px; font-weight:700; color:var(--white); }
.founder-title { font-size:13px; color:var(--papaya-light); margin-top:4px; font-weight:500; }

.founder-credentials {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
}
.credential-tag {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
  padding:5px 12px; border:1px solid rgba(242,98,46,0.45);
  color:var(--papaya-light); border-radius:2px;
}

/* ══════════════════════════════════════════════
   PROGRAMME PILLARS
   ══════════════════════════════════════════════ */
.pillars-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  background:var(--papaya);
}
.pillar-card {
  background:var(--white); padding:44px 36px;
  position:relative; overflow:hidden;
  transition:background 0.2s;
}
.pillar-card:hover { background:var(--sand); }
.pillar-num {
  font-family:'Cormorant Garamond',serif;
  font-size:80px; font-weight:700; color:var(--papaya);
  opacity:0.1; position:absolute; right:20px; top:8px; line-height:1;
}
.pillar-tag {
  font-family:'DM Mono',monospace; font-size:9px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--papaya); margin-bottom:10px; font-weight:500;
}
.pillar-title {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:700; color:var(--charcoal); margin-bottom:10px;
}
.pillar-text { font-size:13px; color:var(--muted); line-height:1.7; }

/* ══════════════════════════════════════════════
   PROGRAMMES / FLAGSHIP
   ══════════════════════════════════════════════ */
.programme {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; margin-bottom:72px; align-items:center;
}
.programme.rev { direction:rtl; }
.programme.rev>* { direction:ltr; }
.programme-img {
  aspect-ratio:4/3; overflow:hidden; position:relative;
}
.programme-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s;
}
.programme-img:hover img { transform:scale(1.04); }
.prog-num {
  font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:0.18em; color:var(--sand-dark);
  text-transform:uppercase; margin-bottom:10px;
}
.programme-title {
  font-family:'Cormorant Garamond',serif;
  font-size:26px; font-weight:700; color:var(--charcoal); margin-bottom:14px; line-height:1.15;
}
.programme-text { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:18px; }
.tag-row { display:flex; gap:8px; flex-wrap:wrap; }
.tag {
  font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 10px; background:var(--papaya-pale); color:var(--papaya);
  border:1px solid var(--papaya-light); border-radius:2px;
}

/* ══════════════════════════════════════════════
   TIMELINE — Visual milestones
   ══════════════════════════════════════════════ */
.timeline-section { background:var(--sand); }
.timeline-track {
  position:relative;
  margin-top:48px;
}
.timeline-track::before {
  content:'';
  position:absolute; left:56px; top:0; bottom:0;
  width:3px;
  background:linear-gradient(to bottom, var(--papaya), var(--teal), var(--papaya-light));
  border-radius:2px;
}
.timeline-item {
  display:grid; grid-template-columns:112px 1fr;
  gap:32px; margin-bottom:48px; align-items:flex-start;
  position:relative;
}
.timeline-year-wrap { text-align:right; padding-top:12px; }
.timeline-year {
  font-family:'Cormorant Garamond',serif;
  font-size:20px; font-weight:700; color:var(--papaya);
  line-height:1; display:block;
}
.timeline-year-sub {
  font-family:'DM Mono',monospace; font-size:9px;
  letter-spacing:0.15em; color:var(--muted); margin-top:2px;
}
.timeline-dot {
  position:absolute; left:50px; top:14px;
  width:16px; height:16px; border-radius:50%;
  background:var(--papaya); border:3px solid var(--sand);
  box-shadow:0 0 0 3px var(--papaya);
}
.timeline-dot.teal-dot { background:var(--teal); box-shadow:0 0 0 3px var(--teal); }
.timeline-dot.future-dot {
  background:var(--sand-dark); box-shadow:0 0 0 3px rgba(201,185,154,0.6);
  border-style:dashed;
}
.timeline-card {
  background:var(--white); padding:28px 32px;
  border-left:4px solid var(--papaya);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.timeline-card.teal-card { border-color:var(--teal); }
.timeline-card.future-card {
  border-color:var(--sand-dark); background:var(--sand);
  border-style:dashed;
}
.timeline-card-label {
  font-family:'DM Mono',monospace; font-size:9px;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--papaya); margin-bottom:6px;
}
.timeline-card.teal-card .timeline-card-label { color:var(--teal); }
.timeline-card.future-card .timeline-card-label { color:var(--muted); }
.timeline-card-title {
  font-family:'Cormorant Garamond',serif;
  font-size:20px; font-weight:700; color:var(--charcoal); margin-bottom:8px;
}
.timeline-card-text { font-size:13px; color:var(--muted); line-height:1.65; }
.timeline-icon { font-size:24px; margin-bottom:8px; }

/* ══════════════════════════════════════════════
   CENTRES OF EXCELLENCE
   ══════════════════════════════════════════════ */
.coe-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  background:var(--border-light);
}
.coe-card {
  background:var(--white); padding:36px 28px;
  border-top:4px solid var(--teal);
  transition:background 0.2s;
}
.coe-card:hover { background:var(--teal-pale); }
.coe-icon { font-size:28px; margin-bottom:14px; }
.coe-card-title { font-weight:700; color:var(--charcoal); margin-bottom:6px; font-size:14px; }
.coe-card-text  { font-size:13px; color:var(--muted); line-height:1.6; }

/* District expansion focus areas */
.focus-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.focus-tag {
  padding:8px 16px; font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  background:var(--teal); color:var(--white); border-radius:2px;
}

/* ══════════════════════════════════════════════
   IMPACT STATS
   ══════════════════════════════════════════════ */
.impact-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  background:var(--papaya); margin-bottom:0;
}
.impact-card {
  background:var(--charcoal); padding:44px 28px; text-align:center;
}
.impact-num {
  font-family:'Cormorant Garamond',serif;
  font-size:52px; font-weight:700; color:var(--papaya-light);
  line-height:1; margin-bottom:10px; display:block;
}
.impact-label { font-size:12px; color:rgba(255,255,255,0.55); line-height:1.45; }

/* ══════════════════════════════════════════════
   SDG ALIGNMENT
   ══════════════════════════════════════════════ */
.sdg-expanded-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  background:rgba(255,255,255,0.1); margin-top:32px;
}
.sdg-expanded-card {
  padding:24px 18px; background:rgba(255,255,255,0.06);
  border-left:4px solid var(--teal-light);
}
.sdg-num {
  font-family:'Cormorant Garamond',serif;
  font-size:34px; font-weight:700; color:var(--papaya-light); margin-bottom:4px;
}
.sdg-name { font-size:12px; color:rgba(255,255,255,0.65); line-height:1.4; }
.sdg-detail { font-size:11px; color:rgba(255,255,255,0.4); margin-top:6px; line-height:1.4; }

/* ══════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════ */
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.testimonial-card {
  background:var(--white); padding:36px 28px;
  border-top:4px solid var(--papaya);
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  position:relative;
}
.testimonial-card::before {
  content:'"'; font-family:'Cormorant Garamond',serif;
  font-size:88px; font-weight:700; color:var(--papaya); opacity:0.12;
  position:absolute; top:6px; left:20px; line-height:1;
}
.testimonial-text {
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:16px; line-height:1.65;
  color:var(--charcoal); margin-bottom:20px; padding-top:28px;
}
.testimonial-author { font-weight:700; font-size:14px; color:var(--charcoal); }
.testimonial-role { font-size:11px; color:var(--papaya); font-weight:500; margin-top:2px; }

/* ══════════════════════════════════════════════
   PARTNERS — Logo Grid
   ══════════════════════════════════════════════ */
/* Partner grid uses inline styles */

.partner-cat {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--papaya); font-weight:500; margin-bottom:14px;
}
.partner-items li {
  font-size:13px; color:var(--muted); padding:5px 0;
  border-bottom:1px solid var(--border-light); list-style:none;
  display:flex; align-items:center; gap:8px;
}
.partner-items li::before { content:'→'; color:var(--teal); font-weight:700; flex-shrink:0; }

/* ══════════════════════════════════════════════
   GEOGRAPHY
   ══════════════════════════════════════════════ */
.geo-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.loc-list { list-style:none; }
.loc-list li {
  padding:18px 0; border-bottom:1px solid var(--border-light);
  display:flex; gap:14px; align-items:flex-start;
}
.loc-dot {
  width:12px; height:12px; border-radius:50%; background:var(--teal);
  flex-shrink:0; margin-top:4px;
}
.loc-name { font-weight:700; font-size:15px; color:var(--charcoal); }
.loc-desc { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }

.roadmap-track {}
.roadmap-lbl {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--teal); font-weight:700;
  margin-bottom:24px;
}
.roadmap-item {
  display:flex; gap:18px; margin-bottom:28px;
}
.roadmap-year {
  font-family:'DM Mono',monospace; font-size:11px; font-weight:700;
  color:var(--teal); min-width:80px; padding-top:2px;
}
.roadmap-bar {
  width:3px; background:linear-gradient(to bottom, var(--papaya), var(--teal));
  border-radius:2px; flex-shrink:0;
}
.roadmap-content .title { font-weight:700; font-size:14px; color:var(--charcoal); margin-bottom:3px; }
.roadmap-content .desc  { font-size:13px; color:var(--muted); line-height:1.5; }

/* ══════════════════════════════════════════════
   DONOR-READY CAPABILITY STATEMENT
   ══════════════════════════════════════════════ */
.capability-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.capability-box {
  background:rgba(255,255,255,0.07); padding:28px 24px;
  border-left:3px solid var(--papaya-light); margin-bottom:16px;
}
.capability-box-title { font-weight:700; color:var(--white); margin-bottom:6px; font-size:14px; }
.capability-box-text  { font-size:13px; color:rgba(255,255,255,0.6); line-height:1.65; }

/* ══════════════════════════════════════════════
   FUTURE ROADMAP
   ══════════════════════════════════════════════ */
.roadmap-full-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
  background:var(--border-light);
}
.roadmap-full-card {
  background:var(--white); padding:32px 24px;
  border-top:4px solid var(--papaya);
}
.roadmap-full-card.teal { border-color:var(--teal); }
.roadmap-full-card.future { background:var(--sand); border-color:var(--sand-dark); border-style:dashed; }
.rf-year {
  font-family:'Cormorant Garamond',serif;
  font-size:28px; font-weight:700; color:var(--papaya); margin-bottom:8px;
}
.roadmap-full-card.teal .rf-year { color:var(--teal); }
.roadmap-full-card.future .rf-year { color:var(--muted); }
.rf-title { font-weight:700; font-size:14px; color:var(--charcoal); margin-bottom:6px; }
.rf-text  { font-size:12px; color:var(--muted); line-height:1.6; }

/* ══════════════════════════════════════════════
   PHOTO GRID
   ══════════════════════════════════════════════ */
.photo-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:220px 220px; gap:4px;
}
.photo-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:filter 0.3s; }
.photo-grid img:hover { filter:brightness(1.1) saturate(1.1); }
.photo-grid .tall { grid-row:span 2; }

/* ══════════════════════════════════════════════
   CTA / CONTACT
   ══════════════════════════════════════════════ */
.cta-section {
  background:linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-mid) 50%, #1B3A30 100%);
  padding:96px 64px; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before {
  content:'SWWSO'; position:absolute;
  font-family:'Cormorant Garamond',serif; font-size:260px; font-weight:700;
  color:rgba(255,255,255,0.025); top:50%; left:50%;
  transform:translate(-50%,-50%); letter-spacing:-0.04em; white-space:nowrap;
}
.cta-section .h2 { color:white; margin-bottom:14px; position:relative; z-index:2; }
.cta-section .lead {
  color:rgba(255,255,255,0.55); margin:0 auto 44px;
  text-align:center; position:relative; z-index:2;
}
.cta-btns {
  display:flex; gap:14px; justify-content:center;
  position:relative; z-index:2; flex-wrap:wrap;
}
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 32px; font-size:13px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:all 0.25s;
}
.btn-papaya { background:var(--papaya); color:var(--white); border-color:var(--papaya); }
.btn-papaya:hover { background:var(--papaya-mid); transform:translateY(-2px); }
.btn-outline { background:transparent; color:white; border-color:rgba(255,255,255,0.35); }
.btn-outline:hover { border-color:white; background:rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
footer {
  background:var(--charcoal); color:rgba(255,255,255,0.4);
  padding:36px 64px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; flex-wrap:wrap; gap:16px;
}
footer strong { color:white; }
footer a { color:var(--teal-light); text-decoration:none; }
footer a:hover { color:var(--papaya-light); }

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print {
  nav { display:none; }
  .cover { min-height:auto; page-break-after:always; }
  .section { padding:48px 40px; }
  .balochi-bg { display:none; }
}

@media (max-width:768px) {
  .section { padding:56px 24px; }
  nav { padding:0 24px; }
  .cover-top, .cover-body, .cover-bottom { padding-left:24px; padding-right:24px; }
  .about-grid, .mv-split, .pillars-grid, .programme,
  .programme.rev, .geo-grid, .capability-grid,
  .impact-grid, .sdg-expanded-grid, .partner-logo-grid,
  .roadmap-full-grid, .testimonials-grid,
  .exec-band-inner, .coe-grid, .values-grid { grid-template-columns:1fr; }
  .programme.rev { direction:ltr; }
  .founder-inner { grid-template-columns:1fr; padding:56px 24px; }
  .photo-strip { height:180px; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .cover-stats { gap:28px; }
}

/* ══════════════════════════════════════════════
   MERGED SITE HEADER + NAV — single light sticky bar
   ══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
  background: var(--sand);
  border-bottom: 1px solid var(--sand-dark);
  box-shadow: 0 2px 14px rgba(28,28,30,0.08);
  padding: 12px 64px;
}
.site-header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.site-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.site-header-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--charcoal);
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.site-header-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papaya-mid);
  font-weight: 500;
}
.site-nav {
  position: static;
  background: none;
  box-shadow: none;
  overflow: visible;
  height: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 0;
}
.site-nav-link {
  color: var(--charcoal-soft);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav-link:hover { color: var(--papaya); border-color: var(--papaya-light); }
.site-nav-link.active { color: var(--papaya); border-color: var(--papaya); }

@media (max-width: 760px) {
  .site-header { padding: 12px 20px; }
  .site-header-logo { height: 44px; }
  .site-nav { gap: 16px 18px; }
}

/* The hero's "Organizational Profile" badge now stands alone (logo lives
   in the persistent header above), so let it sit naturally at the start. */
.cover-top { justify-content: flex-start; }
