/* ─────────────────────────────
   TOKENS
───────────────────────────── */
:root{
  --cream:  #F7F5F1;
  --cream2: #EFEDE8;
  --white:  #FFFFFF;
  --navy:   #000038;
  --mag:    #9B1F54;
  --mag2:   #7D1844;
  --gold:   #C9951A;
  --orange: #E55318;
  --green:  #1A6B40;
  --text:   #0E0C09;
  --mid:    #3E3A36;
  --muted:  #7A746E;
  --soft:   #AEA9A3;
  --border: #E4DFD9;
  --serif:  'Playfair Display',Georgia,serif;
  --sans:   'Inter',system-ui,sans-serif;
  --mono:   'DM Mono',monospace;
  --ease:   cubic-bezier(.4,0,.2,1);
  --out:    cubic-bezier(.16,1,.3,1);
    --rule:    #E0DDD8;
  --pad:     clamp(24px,5.5vw,92px);
  --max:     1240px;
  --ease:    cubic-bezier(0.22,1,0.36,1); 
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--white);color:var(--text);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img { display:block; max-width:100%; height:auto; }
::selection { background:var(--magenta); color:#fff; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--magenta); }
#sp { position:fixed; top:0; left:0; width:3px; height:0%; background:var(--magenta); z-index:9999; }

/* reveal */
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--out),transform .7s var(--out)}
[data-r="left"]{transform:translateX(-20px)}
[data-r="right"]{transform:translateX(20px)}
[data-r="scale"]{transform:scale(.97)}
[data-r].on{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}
[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}
[data-delay="4"]{transition-delay:.4s}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:grid; grid-template-rows:1fr auto;
  overflow:hidden; background:var(--navy);
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(155,31,84,0.16) 0%, transparent 55%),
    linear-gradient(155deg, #000028 0%, #04012e 50%, #0a0318 100%);
}
.hero-brand-bar {
  position:absolute; top:0; left:0; right:0;
  height:4px; background:var(--magenta); z-index:10;
  transform:scaleX(0); transform-origin:left;
  animation:brandBar .9s var(--ease) forwards;
}
.hero-inner {
  position:relative; z-index:2;
  padding:clamp(100px,14vw,160px) var(--pad) ;
  max-width:calc(var(--max) + var(--pad)*2);
  width:100%; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(32px,4vw,72px);
}
.hero-label {
  margin-left: -1.5vw;
  font-size:10px; font-weight:600; letter-spacing:3.5px;
  text-transform:uppercase; 
  color: var(--mag); 
  display:flex; align-items:center; gap:12px;
  margin-bottom:28px;
  opacity:0; animation:rise .5s .15s var(--ease) forwards;
}
.hero-label::before { 
  content:''; 
  width:24px; 
  height:1px; 
  background:var(--magenta);
  flex-shrink:0; 
}
.hero-h1 {
  font-size:clamp(44px,4vw,50px);
  font-weight:500; line-height:1;
  letter-spacing:-0.03em; color:var(--white);
  margin-bottom:28px;
  opacity:0; animation:rise .9s .3s var(--ease) forwards;
}
.hero-h1 span {
  font-style:normal; font-weight:300;
  color: var(--mag);
  font-size:0.90em;
  letter-spacing:-0.01em; line-height:1.2;
}
.hero-sub {
  font-size:clamp(14px,1.6vw,17px);
  font-weight:300; line-height:1.75;
  color:rgba(255,255,255,0.48); 
  max-width:750px;
  opacity:0; animation:rise .7s .5s var(--ease) forwards;
}

.hero-stats {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.06);
  opacity:0; animation:rise .6s .85s var(--ease) forwards;
}
.hstat {
  padding:clamp(16px,2.2vw,22px) clamp(12px,2vw,24px);
  border-right:1px solid rgba(255,255,255,0.06);
  text-align:center; transition:background .2s;
}
.hstat:last-child { border-right:none; }
.hstat:hover { background:rgba(155,31,84,0.1); }
.hstat-val { font-size:clamp(18px,2.4vw,28px); font-weight:700; color:var(--white); letter-spacing:-0.5px; line-height:1; }
.hstat-sfx { font-size:.5em; color:var(--orange); font-weight:700; }
.hstat-lbl { font-size:8px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.22); margin-top:4px; }

@keyframes rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes brandBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes statPop { 0%{transform:scale(0.75);opacity:0} 65%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.hstat-val.popped { animation:statPop .45s var(--ease) forwards; }

/* ─────────────────────────────
   BUTTONS
───────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 17px;
     font-family:var(--sans);font-size:.73rem;font-weight:500;border-radius:2px;
     cursor:pointer;border:none;transition:all .18s var(--ease);letter-spacing:.01em;white-space:nowrap}
.b-mag{background:var(--mag);color:#fff}
.b-mag:hover{background:var(--mag2)}
.b-wa{background:#25D366;color:#fff}
.b-wa:hover{background:#1ea855}
.b-line{background:transparent;color:var(--mid);border:1px solid var(--border)}
.b-line:hover{border-color:var(--mag);color:var(--mag)}
.b-line-lt{background:transparent;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14)}
.b-line-lt:hover{border-color:rgba(255,255,255,.35);color:#fff}

/* ─────────────────────────────
   SHARED PERSON SECTION ATOMS
───────────────────────────── */
.person-num{
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.14em;color:var(--soft);margin-bottom:6px;
}
.person-role{
  font-family:var(--mono);font-size:.56rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mag);margin-bottom:10px;
}
.person-name{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:400;line-height:1.05;color:var(--navy);
  letter-spacing:-.02em;margin-bottom:6px;
}
.person-name-lt{color:#fff}
.person-greeting{
  font-family:var(--serif);font-size:.95rem;font-style:italic;
  color:var(--soft);margin-bottom:18px;
}
.person-greeting-lt{color:rgba(255,255,255,.3)}
.person-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tag{
  padding:3px 10px;border-radius:2px;
  font-family:var(--mono);font-size:.56rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
  background:rgba(155,31,84,.07);color:var(--mag);
  border:1px solid rgba(155,31,84,.14);
}
.tag-gold{background:rgba(201,149,26,.1);color:var(--orange);border-color:rgba(201,149,26,.2)}
.tag-navy{background:rgba(0,0,56,.07);color:var(--navy);border-color:rgba(0,0,56,.14)}
.tag-lt{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.12)}
.person-rule{width:32px;height:1px;background:var(--border);margin-bottom:18px;
             transition:width .4s var(--ease),background .4s}
.person-rule-lt{background:rgba(255,255,255,.15)}
.person-bio{font-size:.855rem;line-height:1.9;color:var(--mid);margin-bottom:22px}
.person-bio-lt{color:rgba(255,255,255,.5)}
.person-btns{display:flex;gap:7px;flex-wrap:wrap}

/* photo shared */
.person-photo{
  display:block;object-fit:cover;object-position:center top;
  filter:grayscale(8%);
  transition:filter .5s var(--ease),transform .5s var(--ease);
}

/* ─────────────────────────────
   01  WAFA -full-width dark feature
   Left: number + large name + info
   Right: portrait in a contained frame
───────────────────────────── */
.s-wafa{
  background:var(--navy);
  padding:72px 6%;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.s-wafa::before{
  content:'01';position:absolute;
  right:6%;bottom:-40px;
  font-family:var(--serif);font-size:200px;font-weight:400;
  color:rgba(255,255,255,.025);line-height:1;pointer-events:none;user-select:none;
}
.wafa-layout{
  display:grid;grid-template-columns:1fr 260px;
  gap:80px;align-items:center;
}
.wafa-photo-frame{
  position:relative;flex-shrink:0;
  border-top:2px solid var(--orange);
}
.wafa-photo-frame img{
  width:260px;height:320px;
  object-fit:cover;object-position:center top;
  display:block;filter:grayscale(6%);
  transition:filter .5s var(--ease);
}
.s-wafa:hover .wafa-photo-frame img{filter:grayscale(0%)}
.wafa-photo-label{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--gold);color:var(--navy);
  font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 0;text-align:center;
}
.wafa-info .person-rule{background:rgba(255,255,255,.15);width:32px}
.s-wafa:hover .wafa-info .person-rule{width:52px;background:var(--orange)}


/* ─────────────────────────────
   02  HASNAIN -white, photo left small
   Different treatment: photo leads, info flows right
───────────────────────────── */
.s-hasnain{
  background:var(--white);
  padding:72px 6%;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.s-hasnain::after{
  content:'02';position:absolute;
  right:5%;bottom:-30px;
  font-family:var(--serif);font-size:180px;font-weight:400;
  color:rgba(0,0,0,.03);line-height:1;pointer-events:none;user-select:none;
}
.hasnain-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;align-items:start;
}
.hasnain-photo-col{padding-top:0}
.hasnain-photo-col img{
  width:220px;height:280px;
  object-fit:cover;object-position:center top;display:block;
  filter:grayscale(10%);
  border-bottom:2px solid var(--orange);
  transition:filter .5s var(--ease);
}
.s-hasnain:hover .hasnain-photo-col img{filter:grayscale(0%)}
.hasnain-photo-num{
  font-family:var(--mono);font-size:.54rem;color:var(--soft);
  letter-spacing:.12em;margin-top:8px;
}
.hasnain-info .person-rule{width:32px}
.s-hasnain:hover .hasnain-info .person-rule{width:52px;background:var(--mag)}

/* ─────────────────────────────
   03  LABEEB -cream, centered split
   Two columns equal weight, photo right, number oversized
───────────────────────────── */

.s-labeeb{
  background:var(--cream);
  padding:72px 6%;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.s-labeeb::before{
  content:'03';
  position:absolute;
  left:3%;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--serif);
  font-size:200px;
  font-weight:400;
  color:rgba(0,0,0,.04);
  line-height:1;
  pointer-events:none;
  user-select:none;
}

.labeeb-layout{
  display:grid;
  grid-template-columns:48px 1fr 200px;
  gap:0 48px;
  align-items:start;
}

.labeeb-number-col{
  padding-top:4px;
}

.labeeb-num-vert{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.18em;
  color:var(--soft);
  writing-mode:vertical-rl;
}

.labeeb-info{
  padding:0;
}

.labeeb-photo-wrap{
  padding-top:8px;
}

.labeeb-photo-wrap img{
  width:200px;
  height:260px;
  object-fit:cover;
  object-position:center top;
  display:block;
  filter:grayscale(10%);
  border-left:2px solid var(--mag);
  transition:filter .5s var(--ease);
}

.s-labeeb:hover .labeeb-photo-wrap img{
  filter:grayscale(0%);
}

.s-labeeb:hover .person-rule{
  width:52px;
  background:var(--mag);
}

/* ─────────────────────────────
   04  PERLIE -cream, asymmetric
   Number watermark huge left
   Photo sits mid-right as standalone portrait
───────────────────────────── */
.s-perlie{
  background:var(--white);
  padding:72px 6%;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.s-perlie::after{
  content:'04';
  position:absolute;
  right:5%;
  bottom:-30px;

  font-family:var(--serif);
  font-size:180px;
  font-weight:400;
  color:rgba(0,0,0,.03);

  line-height:1;
  pointer-events:none;
  user-select:none;
}

.perlie-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;
  align-items:start;
}

/* PHOTO */
.perlie-photo-col{
  padding-top:0;
}

.perlie-photo-col img{
  width:220px;
  height:280px;

  object-fit:cover;
  object-position:center top;
  display:block;

  filter:grayscale(10%);
  border-bottom:2px solid var(--mag);

  transition:filter .5s var(--ease);
}

.s-perlie:hover .perlie-photo-col img{
  filter:grayscale(0%);
}

.perlie-photo-num{
  font-family:var(--mono);
  font-size:.54rem;
  color:var(--soft);
  letter-spacing:.12em;
  margin-top:8px;
}

/* INFO */
.perlie-info .person-rule{
  width:32px;
}

.s-perlie:hover .perlie-info .person-rule{
  width:52px;
  background:var(--mag);
}
/* ─────────────────────────────
   05  Archie 
───────────────────────────── */
.s-archie{
  background:var(--cream);
  padding:72px 6%;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}

.s-archie::before{
  content:'05';
  position:absolute;
  left:3%;
  top:50%;
  transform:translateY(-50%);

  font-family:var(--serif);
  font-size:200px;
  font-weight:400;
  color:rgba(0,0,0,.04);

  line-height:1;
  pointer-events:none;
  user-select:none;
}

.archie-layout{
  display:grid;
  grid-template-columns:48px 1fr 200px;
  gap:0 48px;
  align-items:start;
}

/* NUMBER COLUMN */
.archie-number-col{
  padding-top:4px;
}

.archie-num-vert{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.18em;
  color:var(--soft);
  writing-mode:vertical-rl;
}

/* CONTENT */
.archie-info{
  padding:0;
}

/* PHOTO */
.archie-photo-wrap{
  padding-top:8px;
}

.archie-photo-wrap img{
  width:200px;
  height:260px;

  object-fit:cover;
  object-position:center top;
  display:block;

  filter:grayscale(10%);
  border-left:2px solid var(--gold);

  transition:filter .5s var(--ease);
}

.s-archie:hover .archie-photo-wrap img{
  filter:grayscale(0%);
}

.s-archie:hover .person-rule{
  width:52px;
  background:var(--mag);
}
/* ─────────────────────────────
   06 NASREEN — same layout as Perlie
   Dark version
───────────────────────────── */

.s-nasreen{
  background:var(--navy);
  padding:72px 6%;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}

.s-nasreen::after{
  content:'06';
  position:absolute;
  right:5%;
  bottom:-30px;

  font-family:var(--serif);
  font-size:180px;
  font-weight:400;
  color:rgba(255,255,255,.03);

  line-height:1;
  pointer-events:none;
  user-select:none;
}

.nasreen-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;
  align-items:start;
}

/* PHOTO */
.nasreen-photo-col{
  padding-top:0;
}

.nasreen-photo-col img{
  width:220px;
  height:280px;

  object-fit:cover;
  object-position:center top;
  display:block;

  filter:grayscale(10%);
  border-bottom:2px solid var(--mag);

  transition:filter .5s var(--ease);
}

.s-nasreen:hover .nasreen-photo-col img{
  filter:grayscale(0%);
}

.nasreen-photo-num{
  font-family:var(--mono);
  font-size:.54rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.12em;
  margin-top:8px;
}

/* INFO */
.nasreen-info .person-rule{
  background:rgba(255,255,255,.15);
  width:32px;
}

.s-nasreen:hover .nasreen-info .person-rule{
  width:52px;
  background:var(--mag);
}
/* ─────────────────────────────
   SECTION LABEL BETWEEN GROUPS
───────────────────────────── */
.group-label{
  padding:40px 6% 0;
  display:flex;align-items:center;gap:16px;
  background:var(--cream);
}
.group-label::after{content:'';flex:1;height:1px;background:var(--border)}
.gl-text{
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
  white-space:nowrap;
  margin-bottom: 2vw;
}

/* ─────────────────────────────
   DIRECTORY
───────────────────────────── */
.dir{background:var(--navy);padding:64px 6%}
.dir-head{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  margin-bottom:40px;align-items:end;
}
.d-eyebrow{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:8px}
.d-h2{font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.9rem);font-weight:400;color:#fff;line-height:1.15}
.d-h2 span{color:var(--orange)}
.d-sub{
  font-size:.82rem;
  line-height:1.8;
  color:rgba(255, 255, 255, 0.823);
  margin-top:8px;
}
.d-contact{border:1px solid rgba(255,255,255,.07);padding:22px 24px}
.dc-label{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mag);margin-bottom:10px}
.dc-body{font-size:.8rem;line-height:1.85;color:rgba(255,255,255,.46)}
.dc-body a{color:var(--orange)}
.dc-btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}

.dir-table{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.07)}
.dir-table tr{border-bottom:1px solid rgba(255,255,255,.05);transition:background .18s}
.dir-table tr:last-child{border-bottom:none}
.dir-table tr:hover{background:rgba(255,255,255,.025)}
.dir-table td{padding:14px 16px;vertical-align:middle}
.col-r{width:185px;border-right:1px solid rgba(255,255,255,.05)}
.r-flag{
  font-size:.65rem;margin-bottom:2px; color: var(--mag);}
.r-name{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255, 255, 255, 0.871)}
.col-p .dt-n{font-family:var(--serif);font-size:.92rem;font-weight:400;color:#fff;margin-bottom:2px}
.col-p .dt-r{font-size:.67rem;color:rgba(255, 255, 255, 0.726)}
.col-a{text-align:right}
.col-a{display:flex;gap:5px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.a-e{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;background:rgba(155,31,84,.15);color:rgba(255,255,255,.55);border:1px solid rgba(155,31,84,.22);font-size:.67rem;border-radius:2px;transition:all .18s}
.a-e:hover{background:var(--mag);color:#fff;border-color:var(--mag)}
.a-w{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;background:rgba(37,211,102,.1);color:rgba(255,255,255,.42);border:1px solid rgba(37,211,102,.17);font-size:.67rem;border-radius:2px;transition:all .18s}
.a-w:hover{background:#25D366;color:#fff;border-color:#25D366}
.a-b{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.09);font-size:.67rem;border-radius:2px;transition:all .18s}
.a-b:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}

.agent-sep{display:flex;align-items:center;gap:12px;margin:28px 0 14px;font-family:var(--mono);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color: var(--orange)}
.agent-sep::before,.agent-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}
.agent-tbl{width:100%;border-collapse:collapse;border:1px solid rgba(201,149,26,.1)}
.agent-tbl tr{border-bottom:1px solid rgba(201,149,26,.07);transition:background .18s}
.agent-tbl tr:last-child{border-bottom:none}
.agent-tbl tr:hover{background:rgba(201,149,26,.04)}
.agent-tbl td{padding:13px 16px;vertical-align:middle}
.agent-tbl .col-r{border-color:rgba(201,149,26,.1)}
.agent-tbl .r-name{color:var(--orange)}
.agent-tbl .dt-n{color:rgba(255,255,255,.78)}
.agent-tbl .dt-r{color:var(--orange)}

/* ─────────────────────────────
   CTA
───────────────────────────── */
.cta-team{background:var(--cream);border-top:1px solid var(--border);padding:60px 6%}
.cta-in{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.c-eyebrow{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mag);margin-bottom:8px}
.c-h{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.8rem);font-weight:400;color:var(--navy);line-height:1.15;margin-bottom:8px}
.c-h em{font-style:italic}
.c-p{font-size:.83rem;line-height:1.8;color:var(--muted);max-width:400px;margin-bottom:14px}
.resp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(26,107,64,.08);border:1px solid rgba(26,107,64,.18);border-radius:2px;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.resp-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.cta-r{display:flex;flex-direction:column;gap:7px;min-width:190px}

/* ─────────────────────────────
   CONTACT BAR
───────────────────────────── */
.cbar{background:var(--white);border-top:1px solid var(--border);padding:16px 6%;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.ci{padding:0 24px;border-right:1px solid var(--border)}
.ci:first-child{padding-left:0}
.ci:last-child{border-right:none;margin-left:auto;padding-right:0}
.ci-l{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.2);margin-bottom:2px}
.ci-v{font-size:.78rem;font-weight:500;color:var(--text)}
.ci-v a{color:inherit;transition:color .18s}
.ci-v a:hover{color:var(--mag)}


/* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */
@media(max-width:960px){
  .wafa-layout,.nasreen-layout{grid-template-columns:1fr;gap:36px}
  .wafa-photo-frame{order:-1;max-width:220px}
  .wafa-photo-frame img{width:100%;height:auto}
  .nasreen-photo{order:-1;max-width:200px}
  .nasreen-photo img{width:100%;height:auto}
  .perlie-layout{grid-template-columns:32px 1fr;gap:0 28px}
  .perlie-photo-wrap{display:none}
  .hasnain-layout{grid-template-columns:1fr;gap:28px}
  .hasnain-photo-col{max-width:180px}
  .hasnain-photo-col img{width:100%;height:auto}
  .labeeb-layout{grid-template-columns:1fr;gap:28px}
  .labeeb-right{flex-direction:row;gap:0}
  .labeeb-right img{max-width:160px;height:auto}
  .archie-layout{grid-template-columns:48px 1fr;gap:0 32px}
  .archie-photo-col{display:none}
  .dir-head{grid-template-columns:1fr;gap:28px}
  .cta-in{grid-template-columns:1fr}
  .cta-r{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:680px){
  .nl{display:none}
  .h-h1{font-size:1.9rem}
  .perlie-layout{grid-template-columns:1fr}
  .perlie-number-col{display:none}
  .archie-layout{grid-template-columns:1fr}
  .archie-num-col{display:none}
  .cbar{flex-direction:column;align-items:flex-start;gap:14px}
  .ci{padding:0;border:none}
  .ci:last-child{margin-left:0}
}