/* ============================================================
   كلمة رئيس مجلس الإدارة — وثيقة رسمية لا بطاقة تعريف.
   المُحدِّدات مسبوقة بـcw- تجنّباً لأي تعارض مع site.css.
   ============================================================ */

.cw-masthead, .cw-doc-sec, .cw-path, .cw-channels, .cw-more{ --cw-pad: clamp(44px, 4.6vw, 70px); }
.cw-inner{max-width:1180px; margin:0 auto; padding-inline:28px;}

.cw-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:.4px;
  color:var(--teal); background:var(--mint-pale);
  border:1px solid rgba(31,120,116,.16); padding:6px 15px; border-radius:999px;
}
.cw-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}
.cw-eyebrow-light{color:var(--mint); background:rgba(179,222,202,.10); border-color:rgba(179,222,202,.24);}
.cw-eyebrow-light::before{background:var(--mint);}

/* ---------- الترويسة المؤسسية ---------- */
.cw-masthead{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(152deg, #04203A 0%, var(--navy) 55%, #0A3457 100%);
  color:#fff; padding:clamp(96px,9vw,140px) 0 clamp(96px,9.5vw,150px);
}
.cw-masthead-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(54% 72% at 88% 6%, rgba(44,148,142,.24), transparent 60%),
    radial-gradient(42% 58% at 6% 96%, rgba(65,127,193,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 52px);
}
.cw-crumb{display:flex; align-items:center; gap:9px; margin-bottom:16px; font-size:12.5px; color:rgba(255,255,255,.58);}
.cw-crumb a{color:var(--mint); transition:color .25s ease;}
.cw-crumb a:hover{color:#fff;}
.cw-kicker{
  font-family:var(--font-head); font-size:12.5px; font-weight:700; letter-spacing:1.6px;
  color:var(--mint); margin:0 0 12px;
}
.cw-masthead h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(28px,3.8vw,48px); line-height:1.24; letter-spacing:-.6px;
  max-width:min(760px,100%); text-wrap:balance;
}
.cw-rule{display:block; width:76px; height:3px; margin-top:22px; background:linear-gradient(90deg, var(--mint), rgba(179,222,202,0));}

/* ---------- الوثيقة ---------- */
.cw-doc-sec{background:var(--paper-tint); padding:0 0 var(--cw-pad);}
.cw-doc{
  position:relative; background:#fff; border:1px solid var(--line);
  box-shadow:0 40px 80px -46px rgba(4,32,58,.45);
  /* ترتفع فوق الترويسة قليلاً فتبدو ورقةً موضوعة على الخلفية */
  margin-top:clamp(-118px,-9vw,-70px);
  padding:clamp(30px,3.6vw,54px) clamp(24px,4vw,66px) clamp(34px,4vw,56px);
}
/* شريط الهوية أعلى الورقة */
.cw-doc::before{
  content:''; position:absolute; top:0; inset-inline:0; height:4px;
  background:linear-gradient(90deg, var(--teal) 0 55%, var(--teal-soft) 55% 82%, var(--mint) 82% 100%);
}

/* ترويسة الخطاب */
.cw-sender{display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap;}
.cw-portrait{
  margin:0; flex-shrink:0; width:clamp(84px,8vw,104px); aspect-ratio:1;
  border-radius:50%; overflow:hidden; background:var(--paper-tint);
  border:3px solid #fff; box-shadow:0 0 0 1px var(--line), 0 14px 30px -16px rgba(4,32,58,.5);
}
.cw-portrait img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.cw-sender-id{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cw-sender-id strong{font-family:var(--font-head); font-size:clamp(17px,1.9vw,21px); font-weight:800; color:var(--navy); line-height:1.4;}
.cw-sender-id span{font-size:14px; font-weight:700; color:var(--teal);}
.cw-sender-id em{font-style:normal; font-size:12.5px; color:#8394a3;}

.cw-creds{
  list-style:none; margin:0; padding:0; margin-inline-start:auto;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cw-creds li{
  background:var(--paper-tint); border:1px solid var(--line);
  padding:11px 18px; text-align:center;
}
.cw-creds b{display:block; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--navy); line-height:1.2;}
.cw-creds span{display:block; margin-top:3px; font-size:11.5px; color:#7c8b99;}

.cw-sep{
  display:block; height:1px; margin:clamp(24px,2.8vw,34px) 0;
  background:linear-gradient(90deg, var(--line), rgba(5,34,62,.02));
}

/* ---------- متن الخطاب ---------- */
.cw-body{max-width:66ch;}
.cw-bismillah{
  font-family:var(--font-head); font-size:clamp(16px,1.7vw,19px); font-weight:700;
  color:var(--teal); text-align:center; margin:0 0 clamp(22px,2.4vw,30px);
}
.cw-para{
  margin:0 0 18px; font-size:clamp(15px,1.35vw,16.5px); line-height:2.1; color:#41566a;
  text-align:justify; text-justify:inter-word;
}
/* الفقرة الأولى أكبر قليلاً: تفتح القراءة كما في الخطابات المطبوعة */
.cw-para.is-lead{font-size:clamp(16px,1.5vw,18px); line-height:2; color:#33475a; font-weight:500;}

.cw-pull{
  position:relative; margin:clamp(26px,3vw,38px) 0;
  padding:clamp(22px,2.4vw,30px) clamp(24px,3vw,40px);
  background:var(--paper-tint); border-inline-start:3px solid var(--teal);
}
.cw-pull p{
  margin:0; font-family:var(--font-head); font-size:clamp(16.5px,1.8vw,20px);
  font-weight:700; line-height:1.75; color:var(--navy);
}
.cw-qmark{
  position:absolute; top:-6px; inset-inline-start:14px;
  font-family:Georgia, serif; font-size:64px; line-height:1;
  color:rgba(31,120,116,.14); pointer-events:none;
}

/* ---------- التوقيع ---------- */
.cw-sign{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,44px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
}
.cw-sign-line{display:flex; flex-direction:column; gap:4px;}
.cw-sign-rule{display:block; width:120px; height:2px; background:var(--navy); margin-bottom:10px;}
.cw-sign-line strong{font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--navy);}
.cw-sign-line span{font-size:13px; color:#7c8b99;}
.cw-seal{height:44px; width:auto; opacity:.5;}

/* ---------- المسيرة المهنية ---------- */
.cw-path{padding:var(--cw-pad) 0; background:#fff;}
.cw-head{margin-bottom:clamp(26px,3vw,38px);}
.cw-head h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(22px,2.6vw,31px); font-weight:800; line-height:1.3; margin-top:13px;
}

.cw-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:0;
}
.cw-steps li{
  position:relative; padding:26px 22px 24px; background:#fff;
  border-top:2px solid var(--line);
  transition:background .35s ease, border-color .35s ease;
}
.cw-steps li:hover{background:var(--paper-tint); border-top-color:var(--teal);}
.cw-node{
  position:absolute; top:-7px; inset-inline-start:22px;
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--teal);
  transition:background .35s ease, scale .35s cubic-bezier(.16,1,.3,1);
}
.cw-steps li:hover .cw-node{background:var(--teal); scale:1.15;}
.cw-year{
  display:inline-block; font-family:'Roboto',sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.5px; color:var(--teal); background:var(--mint-pale);
  padding:4px 13px; border-radius:999px; margin-bottom:12px;
}
.cw-steps h3{font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--navy); line-height:1.5;}
.cw-steps p{margin-top:8px; font-size:13.8px; line-height:1.9; color:#5d7285;}

/* ---------- حسابات الجمعية ---------- */
.cw-channels{
  padding:var(--cw-pad) 0;
  background:linear-gradient(140deg, #04203A, var(--navy) 60%, #0A3457);
}
.cw-channels-in{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.cw-channels h2{font-family:var(--font-head); color:#fff; font-size:clamp(20px,2.3vw,27px); font-weight:800; margin-top:12px;}
.cw-social{list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap;}
.cw-social a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  font-size:13.5px; font-weight:700;
  transition:background .3s ease, border-color .3s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.cw-social a:hover{background:var(--mint); color:#04203A; border-color:transparent; transform:translateY(-3px);}
.cw-social svg{width:17px; height:17px; flex-shrink:0;}

/* ---------- روابط ---------- */
.cw-more{padding:var(--cw-pad) 0; background:var(--paper-tint);}
.cw-more h2{font-family:var(--font-head); font-size:clamp(19px,2.1vw,25px); font-weight:800; color:var(--navy); margin-bottom:20px;}
.cw-more-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px;}
.cw-more-card{
  display:flex; flex-direction:column; gap:5px; position:relative;
  background:#fff; border:1px solid var(--line); padding:20px 22px 22px;
  transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease, border-color .35s ease;
}
.cw-more-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(31,120,116,.32);}
.cw-more-label{font-family:var(--font-head); font-size:15.5px; font-weight:800; color:var(--navy);}
.cw-more-note{font-size:12.8px; line-height:1.75; color:#7c8b99;}
.cw-more-card svg{
  width:16px; height:16px; color:var(--teal); margin-top:10px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.cw-more-card:hover svg{transform:translateX(-5px);}

/* ---------- الحركة ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal] .cw-steps li,
  [data-reveal] .cw-more-card,
  [data-reveal] .cw-social li{
    animation:cw-rise .62s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i,0) * 70ms);
    animation-play-state:paused;
  }
  [data-reveal].in-view .cw-steps li,
  [data-reveal].in-view .cw-more-card,
  [data-reveal].in-view .cw-social li{animation-play-state:running;}
  @keyframes cw-rise{from{opacity:0; translate:0 14px;} to{opacity:1; translate:0 0;}}
}

/* ---------- الاستجابة ---------- */
@media (max-width:820px){
  .cw-creds{margin-inline-start:0; width:100%;}
  .cw-creds li{flex:1 1 auto;}
}
@media (max-width:560px){
  .cw-inner{padding-inline:20px;}
  .cw-doc{margin-top:-56px;}
  .cw-para{text-align:start;}
  .cw-sign{flex-direction:column; align-items:flex-start;}
  .cw-social a{flex:1 1 100%; justify-content:center;}
}
