/* ============================================================
   اتصل بنا — أنماط خاصة بهذه الصفحة وحدها.
   المُحدِّدات مسبوقة بـco- تجنّباً لأي تعارض مع site.css.
   ============================================================ */

.co-open, .co-meet, .co-cards, .co-band{ --co-pad: clamp(46px, 4.8vw, 74px); }
/* لون التمييز في هذه الصفحة.
   كان ذهبياً #B99765 — وهو في بقيّة الموقع لونُ حالةٍ لا لونُ هوية:
   «قيد الانتظار» في الطلبات، وحالة الطابور في البريد، ونجوم التقييم.
   استعمالُه لونَ تمييزٍ لبطاقات العمل جعل صفحةً واحدة تتكلّم بلغةٍ
   لا يعرفها بقيّة الموقع. الفيروزيّ هو لون التمييز في هوية الجمعية،
   فصار هو، والاسم بعده وصفٌ للدور لا للّون. */
.co-cards, .co-band, .co-msg{ --co-accent:var(--teal); --co-accent-soft:var(--teal-soft); }
.co-inner, .co-open-inner{max-width:1180px; margin:0 auto;}

/* نصّ لقارئ الشاشة وحده — لا يوجد مرادف له في site.css */
.co-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.co-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:11.5px; font-weight:700;
  color:var(--teal); background:var(--mint-pale);
  border:1px solid rgba(31,120,116,.16); padding:6px 15px; border-radius:999px;
}
.co-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}
.co-head{margin-bottom:clamp(24px,2.8vw,36px); max-width:72ch;}
.co-head.is-center{max-width:64ch; margin-inline:auto; text-align:center;}
.co-head h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(22px,2.6vw,32px); font-weight:800; line-height:1.32; margin-top:13px;
}
.co-head-lede{margin-top:12px; font-size:15px; line-height:1.9; color:#4b5f72;}

/* ---------- الافتتاحية ---------- */
.co-open{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  background:linear-gradient(152deg, #04203A 0%, var(--navy) 52%, #0B3A5E 100%);
  color:#fff; padding:clamp(84px,8.6vw,126px) 28px clamp(50px,5.2vw,72px);
}
.co-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 76% at 86% 8%, rgba(44,148,142,.28), transparent 60%),
    radial-gradient(46% 62% at 8% 96%, rgba(65,127,193,.18), transparent 62%);
}
.co-kicker{
  display:inline-block; font-family:var(--font-head); font-size:12.5px; font-weight:700;
  color:var(--mint); background:rgba(179,222,202,.10);
  border:1px solid rgba(179,222,202,.22); padding:7px 16px; border-radius:999px; margin-bottom:18px;
}
.co-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(27px,3.8vw,46px); line-height:1.32; letter-spacing:-.5px;
  max-width:18ch; margin-inline:auto; text-wrap:balance;
}
.co-lede{
  margin:16px auto 0; max-width:66ch;
  font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.85; color:rgba(255,255,255,.78);
}
.co-lede p{margin:0;}

/* قنوات مباشرة: كل بطاقة رابط عامل (اتصال/بريد/خرائط) لا نصّ للقراءة */
.co-chans{
  list-style:none; margin:34px auto 0; padding:0; text-align:start;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); gap:12px;
}
.co-chans a{
  display:flex; align-items:center; gap:14px; height:100%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  padding:17px 18px; color:#fff;
  transition:background .32s ease, border-color .32s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.co-chans a:hover{
  background:rgba(255,255,255,.09); border-color:rgba(179,222,202,.4); transform:translateY(-4px);
}
.co-chan-ic{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:rgba(179,222,202,.12); color:var(--mint);
  display:flex; align-items:center; justify-content:center;
  transition:background .32s ease, color .32s ease;
}
.co-chan-ic svg{width:20px; height:20px;}
.co-chans a:hover .co-chan-ic{background:var(--mint); color:var(--navy);}
.co-chan-txt{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.co-chan-txt b{font-family:var(--font-head); font-size:13px; font-weight:700; color:rgba(255,255,255,.62);}
.co-chan-val{
  font-size:14.5px; font-weight:700; color:#fff; line-height:1.5;
  overflow-wrap:anywhere;
}
.co-chan-val.is-ltr{direction:ltr; text-align:start; font-family:'Roboto',sans-serif; letter-spacing:.2px;}
.co-chan-go{
  flex-shrink:0; color:var(--mint); opacity:0; translate:8px 0;
  transition:opacity .32s ease, translate .42s cubic-bezier(.16,1,.3,1);
}
.co-chan-go svg{width:17px; height:17px; display:block;}
.co-chans a:hover .co-chan-go, .co-chans a:focus-visible .co-chan-go{opacity:1; translate:0 0;}

/* ---------- بطاقات المواعيد ---------- */
.co-meet{padding:var(--co-pad) 28px;}
.co-meet-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:16px;}
.co-meet-card{
  position:relative; overflow:hidden; text-align:start; cursor:pointer;
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:26px 24px 22px; font:inherit; color:inherit;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
}
.co-meet-card::before{
  content:''; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-soft));
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.co-meet-card:hover, .co-meet-card:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(31,120,116,.3);
}
.co-meet-card:hover::before, .co-meet-card:focus-visible::before{transform:scaleX(1);}
.co-meet-ic{
  width:50px; height:50px; border-radius:50%;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, color .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.co-meet-ic svg{width:23px; height:23px;}
.co-meet-card:hover .co-meet-ic{background:var(--teal); color:#fff; transform:scale(1.06);}
.co-meet-label{
  font-family:var(--font-head); font-size:16.5px; font-weight:800;
  color:var(--navy); line-height:1.5;
}
.co-meet-go{
  margin-top:auto; padding-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:800; color:var(--teal);
}
.co-meet-go svg{width:15px; height:15px; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.co-meet-card:hover .co-meet-go svg{transform:translateX(-5px);}

/* ---------- نموذج الرسالة: لوحان متقابلان ---------- */
.co-msg{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--paper-tint);
}
.co-msg-photo{margin:0; position:relative; overflow:hidden; min-height:clamp(360px,42vw,620px);}
.co-msg-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:scale 1.2s cubic-bezier(.16,1,.3,1);
}
.co-msg:hover .co-msg-photo img{scale:1.03;}
.co-msg-panel{display:flex; align-items:center; padding:clamp(44px,5vw,84px) clamp(24px,4vw,72px);}
.co-msg-panel-in{width:100%; max-width:560px; margin-inline:auto;}
.co-msg-panel h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(24px,2.9vw,36px); font-weight:800; line-height:1.32; margin-top:14px;
}
.co-msg-lede{margin-top:14px; font-size:15px; line-height:1.95; color:#5d7285;}

/* الحقول بخطّ سفلي وحده — أقرب لروح البطاقة المطبوعة من الصناديق */
.co-form{margin-top:clamp(26px,3vw,40px);}
.co-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,30px) 22px;}
.co-field{display:flex; flex-direction:column; gap:6px; margin:0; position:relative;}
.co-field.is-wide{grid-column:1 / -1;}
.co-field label{
  font-family:var(--font-head); font-size:13.5px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:2px;
}
.co-field label i{color:var(--co-accent, var(--teal)); font-style:normal;}
.co-field input, .co-field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--navy);
  background:transparent; border:0; border-bottom:1px solid #c9cfd4; border-radius:0;
  padding:9px 2px; appearance:none;
  transition:border-color .3s ease;
}
.co-field textarea{resize:vertical; min-height:86px; line-height:1.85;}
.co-field input:hover, .co-field textarea:hover{border-bottom-color:#9aa8b4;}
.co-field input:focus-visible, .co-field textarea:focus-visible{
  outline:none; border-bottom-color:var(--navy);
}
/* خطّ ثانٍ ينمو من حافة الحقل عند التركيز بدل إطار قافز */
.co-field::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--co-accent, var(--teal));
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.co-field:focus-within::after{transform:scaleX(1);}
/* لا نُلوّن الحقل أحمر قبل أن يحاول الزائر الإرسال */
.co-field input:user-invalid, .co-field textarea:user-invalid{border-bottom-color:#d9534f;}
.co-count{
  position:absolute; inset-inline-end:0; bottom:-18px;
  font-family:'Roboto',sans-serif; font-size:11.5px; color:#9aa8b4;
}
.co-count b{font-weight:700; color:#7c8b99;}

/* حقول النافذة تبقى صناديق: الحوار ضيّق والخطوط وحدها تُربك القراءة */
.co-dialog .co-field input, .co-dialog .co-field select, .co-dialog .co-field textarea{
  background:#fff; border:1px solid var(--line); padding:12px 14px;
}
.co-dialog .co-field::after{display:none;}
.co-dialog .co-field select{
  width:100%; font:inherit; font-size:15px; color:var(--navy); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#7c8b99 50%),linear-gradient(135deg,#7c8b99 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px), calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-inline-start:40px;
}
.co-dialog .co-field input:focus-visible,
.co-dialog .co-field select:focus-visible,
.co-dialog .co-field textarea:focus-visible{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,120,116,.14);
}

/* ---------- بطاقات التواصل ----------
   بطاقة عمل بمقاسها الحقيقي: 348 بكسل عرضاً بنسبة 85:55 — أي بحجم
   البطاقة في اليد. كانت 577 بكسل فتقرأ كلوحةٍ لا كبطاقة، وهو ما
   يُفقد الفكرة معناها.
   وتتناوب داكنةً وفاتحة كوجهَي البطاقة المطبوعة، والداكن كحليّ الهوية.
   والشبكة لا تمطّ البطاقات لتملأ العرض: العمود بعرضٍ ثابت، فتبقى
   المستطيلات بمقاسها مهما اتّسعت الشاشة. */
.co-cards{padding:var(--co-pad) 28px; background:#F7F4EE;}
.co-card-grid{
  display:grid; gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(0,348px));
  justify-content:center;
}
.co-card{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:85/55;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(31,120,116,.2); border-radius:9px;
  padding:19px 20px 17px;
  box-shadow:0 12px 28px -22px rgba(4,32,58,.45);
  transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease, border-color .3s ease;
}
/* الخيط العلويّ توقيعُ البطاقة */
.co-card::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--mint), var(--teal));
  transform:scaleX(0); transform-origin:inline-end;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.co-card:hover{
  transform:translateY(-5px); box-shadow:0 24px 46px -26px rgba(4,32,58,.5);
  border-color:rgba(31,120,116,.5);
}
.co-card:hover::before{transform:scaleX(1);}

/* الوجه الداكن: كحليّ الهوية، وهو ما يقابل ظهر البطاقة في المطبوع */
.co-card.is-dark{background:var(--navy); border-color:transparent;}
.co-card.is-dark .co-card-role{color:var(--mint);}
.co-card.is-dark h3{color:#fff;}
.co-card.is-dark .co-card-org{color:rgba(255,255,255,.6);}
.co-card.is-dark .co-card-rule{border-top-color:rgba(179,222,202,.28);}
.co-card.is-dark .co-card-lines a{color:rgba(255,255,255,.9);}
.co-card.is-dark .co-card-lines a:hover{color:var(--mint);}
.co-card.is-dark .co-card-lines svg{color:var(--mint);}
.co-card.is-dark .co-card-ic{background:#fff; color:var(--navy);}
.co-card.is-dark:hover .co-card-ic{background:var(--mint);}
.co-card.is-dark .co-vcard{color:var(--mint); border-color:rgba(179,222,202,.4);}
.co-card.is-dark .co-vcard:hover{background:var(--mint); color:var(--navy); border-color:var(--mint);}
.co-card.is-dark .co-vcard.is-done{background:#fff; color:var(--navy); border-color:#fff;}

/* الرأس: علامةٌ مربّعة صغيرة والمسمّى — كطُرّة البطاقة */
/* لا يتقلّص أيّ سطر ليُدخل المحتوى في صندوقٍ ثابت الارتفاع: كان
   العنوان يُضغط من 23 بكسل إلى 11 صامتاً فيُقصّ نصفه. الآن يظهر
   التجاوز لو حدث بدل أن يُخفى. */
.co-card > *{flex:0 0 auto;}
.co-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.co-card-role{
  font-family:var(--font-head); font-size:10.5px; font-weight:800;
  color:var(--teal); letter-spacing:.9px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.co-card-ic{
  width:30px; height:30px; border-radius:6px; flex-shrink:0;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, rotate .45s cubic-bezier(.16,1,.3,1);
}
.co-card-ic svg{width:16px; height:16px;}
.co-card:hover .co-card-ic{rotate:-6deg;}

.co-card h3{
  font-family:var(--font-head); font-weight:800; color:var(--navy);
  font-size:16.5px; line-height:1.35; margin-top:10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.co-card-org{
  margin-top:4px; font-size:11.5px; line-height:1.5; color:#8394a3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.co-card-rule{
  margin:auto 0 0; padding-top:10px;
  border-top:1px dashed rgba(31,120,116,.32);
}
.co-card-lines{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.co-card-lines li{display:flex; align-items:center; gap:7px; min-width:0;}
.co-card-lines svg{width:12px; height:12px; flex-shrink:0; color:var(--teal);}
.co-card-lines a{
  font-family:'Roboto',sans-serif; font-size:12px; color:var(--navy); letter-spacing:.15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  transition:color .25s ease;
}
.co-card-lines a:hover{color:var(--teal); text-decoration:underline;}

.co-card-foot{display:flex; justify-content:flex-end; margin-top:9px;}
.co-vcard{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:inherit; font-size:11px; font-weight:800; color:var(--teal);
  background:transparent; border:1px solid rgba(31,120,116,.45);
  border-radius:6px; padding:6px 11px; white-space:nowrap;
  transition:background .28s ease, color .28s ease, border-color .28s ease;
}
.co-vcard svg{width:13px; height:13px; flex-shrink:0;}
.co-vcard:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
.co-vcard.is-done{background:var(--navy); color:#fff; border-color:var(--navy);}
.co-vcard.is-done span::after{content:' ✓';}

/* الشاشات الضيّقة: بطاقة واحدة بعرض الشاشة، والنسبة تُلغى فلا يُضغط النصّ */
@media(max-width:420px){
  .co-card-grid{grid-template-columns:1fr;}
  .co-card{aspect-ratio:auto;}
}

/* ---------- شريط الملف التعريفي ووسائل التواصل ---------- */
.co-band{
  position:relative; overflow:hidden; isolation:isolate;
  padding:var(--co-pad) 28px; color:#fff;
  background:linear-gradient(140deg, #04203A 0%, var(--navy) 55%, #0A3457 100%);
}
.co-band-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 120% at 90% 0%, rgba(44,148,142,.26), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px);
}
.co-band-in{display:flex; align-items:center; flex-wrap:wrap; gap:26px 32px;}
.co-band-text{display:flex; align-items:center; gap:16px; flex:1 1 340px; min-width:0;}
.co-band-ic{
  width:56px; height:56px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(140deg, var(--co-accent), var(--co-accent-soft)); color:#04203A;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -16px rgba(44,148,142,.9);
}
.co-band-ic svg{width:26px; height:26px;}
.co-band-text h2{font-family:var(--font-head); font-size:clamp(19px,2.2vw,26px); font-weight:800; color:#fff; line-height:1.4;}
.co-band-text p{margin-top:6px; font-size:14px; line-height:1.8; color:rgba(255,255,255,.72); max-width:52ch;}

.co-band-btn{
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  padding:15px 30px; border-radius:8px;
  font-weight:800; font-size:14.5px; color:#04203A;
  background:linear-gradient(120deg, var(--co-accent-soft), var(--co-accent));
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease, filter .3s ease;
}
.co-band-btn svg{width:17px; height:17px; transition:translate .38s cubic-bezier(.16,1,.3,1);}
.co-band-btn:hover{transform:translateY(-3px); box-shadow:0 20px 38px -18px rgba(44,148,142,.95); filter:brightness(1.05);}
.co-band-btn:hover svg{translate:0 3px;}
.co-band-soon{
  flex-shrink:0; font-size:13px; color:rgba(255,255,255,.6);
  border:1px dashed rgba(255,255,255,.28); border-radius:8px; padding:13px 24px;
}

.co-social{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-inline-start:32px; border-inline-start:1px solid rgba(255,255,255,.14);
}
.co-social > span{font-family:var(--font-head); font-size:13px; font-weight:700; color:rgba(255,255,255,.6);}
.co-social ul{list-style:none; margin:0; padding:0; display:flex; gap:9px; flex-wrap:wrap;}
.co-social a{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.18);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.co-social a svg{width:18px; height:18px;}
.co-social a:hover{
  background:var(--co-accent); color:#04203A; border-color:transparent; transform:translateY(-3px);
}

.co-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:28px; padding:15px 34px; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; color:#fff; background:var(--navy);
  transition:background .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, opacity .25s ease;
}
.co-submit svg{width:17px; height:17px; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.co-submit:hover:not(:disabled){
  background:linear-gradient(120deg, var(--teal), var(--teal-soft));
  transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(31,120,116,.6);
}
.co-submit:hover:not(:disabled) svg{transform:translateX(-4px);}
.co-submit:disabled{opacity:.55; cursor:not-allowed;}
/* أثناء الإرسال يحلّ محلّ السهم قرصٌ دوّار، فيعرف الزائر أن الطلب جارٍ */
.is-sending .co-submit svg{display:none;}
.is-sending .co-submit::after{
  content:''; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:co-spin .7s linear infinite;
}
@keyframes co-spin{to{rotate:360deg;}}
@media (prefers-reduced-motion: reduce){ .is-sending .co-submit::after{animation:none;} }

.co-status{margin-top:14px; font-size:13.8px; line-height:1.75; min-height:1px;}
.co-status:empty{display:none;}
.co-status.is-ok{color:var(--teal); font-weight:700;}
.co-status.is-err{color:#c0392b; font-weight:700;}
.co-status.is-wait{color:#7c8b99;}

/* ---------- الخريطة ---------- */
.co-map{line-height:0; background:var(--paper-tint);}
.co-map iframe{
  display:block; width:100%; height:clamp(300px,38vw,440px); border:0;
  filter:grayscale(.35) contrast(1.03); transition:filter .5s ease;
}
.co-map:hover iframe{filter:none;}

/* ---------- نافذة الاجتماع ---------- */
.co-dialog{
  /* التصفير العام في site.css يُلغي margin:auto المُوروث من المتصفّح،
     فيلتصق الحوار بحافة الشاشة. نُعيد التوسيط صراحةً. */
  inset:0; margin:auto;
  width:min(680px, calc(100vw - 32px)); max-height:min(88vh, 860px);
  padding:clamp(24px,3vw,38px); border:0; background:#fff; color:var(--navy);
  box-shadow:0 40px 90px -30px rgba(4,32,58,.55); overflow:auto;
}
.co-dialog::backdrop{background:rgba(4,32,58,.62); backdrop-filter:blur(3px);}
@media (prefers-reduced-motion: no-preference){
  .co-dialog[open]{animation:co-pop .38s cubic-bezier(.16,1,.3,1);}
  .co-dialog[open]::backdrop{animation:co-fade .38s ease;}
  @keyframes co-pop{from{opacity:0; translate:0 18px; scale:.97;} to{opacity:1; translate:0 0; scale:1;}}
  @keyframes co-fade{from{opacity:0;} to{opacity:1;}}
}
.co-dialog-x{position:sticky; top:0; height:0; text-align:start; z-index:2;}
.co-dialog-x button{
  position:relative; inset-inline-start:-6px;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:#7c8b99; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .28s ease, color .28s ease, border-color .28s ease;
}
.co-dialog-x button:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.co-dialog-x svg{width:16px; height:16px;}

.co-dialog-head{display:flex; align-items:center; gap:14px; padding-inline-start:34px; margin-bottom:22px;}
.co-dialog-ic{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.co-dialog-ic svg{width:22px; height:22px;}
.co-dialog-head h2{font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--navy); line-height:1.4;}
.co-dialog-head p{margin-top:3px; font-size:13.5px; color:#7c8b99;}
.co-dialog-head p:empty{display:none;}
.co-dialog-form > .co-field.is-wide{margin-bottom:16px;}
.co-meetlink{
  margin-top:12px; padding:12px 15px; font-size:13.5px; line-height:1.7;
  background:var(--mint-pale); border-inline-start:3px solid var(--teal); overflow-wrap:anywhere;
}
.co-meetlink a{color:var(--teal); font-weight:700; text-decoration:underline;}

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

/* ---------- الاستجابة ---------- */
@media (max-width:900px){
  /* الصورة تعلو النموذج على الشاشات الضيّقة، فتبقى مرئية دون أن تخنقه */
  .co-msg{grid-template-columns:1fr;}
  .co-msg-photo{min-height:clamp(220px,46vw,320px); order:-1;}
  .co-band-in{flex-direction:column; align-items:stretch;}
  .co-band-btn, .co-band-soon{align-self:flex-start;}
  .co-social{padding-inline-start:0; border-inline-start:0; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);}
}
@media (max-width:560px){
  .co-fields{grid-template-columns:1fr;}
  .co-card-top{flex-direction:row-reverse; justify-content:flex-end;}
  .co-vcard{flex:1;}
  .co-band-btn{width:100%; justify-content:center;}
  .co-submit{width:100%;}
  .co-dialog{width:100vw; max-width:100vw; max-height:100vh; height:100vh; padding:22px 18px 30px;}
  .co-dialog-head{padding-inline-start:30px;}
}