/* ============================================================
   ABOUT PAGE · "Our Agency" hero + body + why + footer
   ============================================================ */

.about{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(7rem,15vh,11rem) clamp(1.4rem,5vw,4rem) clamp(2rem,5vh,3rem);
  padding-left:clamp(2.5rem,7vw,4.5rem);
}

/* ---------- HERO ---------- */
.about__hero{
  position:relative;
  margin-bottom:clamp(3rem,8vh,5rem);
}
.about__hero-glow{
  position:absolute;
  inset:-40% -20% -20% -20%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(38% 55% at 18% 40%, rgba(255,43,214,.14), transparent 70%),
    radial-gradient(38% 55% at 82% 60%, rgba(0,229,255,.10), transparent 70%);
  filter:blur(60px);
  animation:drift 22s ease-in-out infinite alternate;
}
.about__hero-inner{
  position:relative;
  z-index:1;
}
.about__eyebrow{margin-bottom:1.5rem}

.about__title{
  font-size:clamp(2.2rem,7vw,5.4rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:clamp(1.5rem,4vh,2.25rem);
  text-shadow:
    0 0 2px #fff, 0 0 10px rgba(255,255,255,.85),
    0 0 26px var(--neon), 0 0 60px rgba(255,43,214,.55);
}
.about__title em{
  display:block;
  font-style:normal;
  font-weight:300;
  color:#eaf6ff;
  margin-top:.1em;
  text-shadow:
    0 0 2px #fff, 0 0 12px rgba(255,255,255,.8),
    0 0 32px var(--neon-2), 0 0 72px rgba(0,229,255,.55);
}

.about__lead{
  max-width:64ch;
  font-size:clamp(1rem,1.55vw,1.2rem);
  line-height:1.85;
  color:rgba(244,244,246,.92);
}

/* ---------- DECORATIVE RULE ---------- */
.about__rule{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:clamp(2.5rem,6vh,4rem) 0;
}
.about__rule-line{
  flex:1;
  height:1px;
  border:0;
  background:linear-gradient(90deg,var(--neon),transparent);
  box-shadow:0 0 8px rgba(255,43,214,.55);
}
.about__rule-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 10px var(--neon), 0 0 22px rgba(255,43,214,.65);
  flex-shrink:0;
}

/* ---------- BODY PARAGRAPH ---------- */
.about__body{
  max-width:820px;
  padding-left:clamp(1rem,2.5vw,2rem);
  border-left:1px solid rgba(0,229,255,.35);
  position:relative;
}
.about__body::before{
  content:'';
  position:absolute;
  left:-1px;
  top:0;
  width:1px;
  height:40%;
  background:var(--neon-2);
  box-shadow:0 0 10px var(--neon-2), 0 0 22px rgba(0,229,255,.55);
}
.about__body p{
  font-size:clamp(.92rem,1.25vw,1.05rem);
  line-height:1.9;
  color:rgba(244,244,246,.9);
}

/* ---------- WHY JOIN US ---------- */
.about__why{
  margin-top:clamp(3.5rem,9vh,6rem);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.about__why-head{
  position:sticky;
  top:clamp(6rem,12vh,8rem);
}
.about__why-eyebrow{margin-bottom:1.25rem}

.about__why-title{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:#fff;
}
.about__why-title b{
  display:block;
  font-weight:700;
  text-shadow:
    0 0 2px #fff, 0 0 10px rgba(255,255,255,.85),
    0 0 26px var(--neon), 0 0 60px rgba(255,43,214,.5);
}
.about__why-title em{
  font-style:normal;
  font-weight:300;
  color:#eaf6ff;
  text-shadow:
    0 0 2px #fff, 0 0 12px rgba(255,255,255,.8),
    0 0 32px var(--neon-2), 0 0 72px rgba(0,229,255,.5);
}

.about__why-text{
  font-size:clamp(.92rem,1.25vw,1.05rem);
  line-height:1.95;
  color:rgba(244,244,246,.9);
}

/* ---------- DROP CAP (Latin only) ---------- */
.about__why-text::first-letter{
  font-size:2.6em;
  font-weight:500;
  float:left;
  line-height:.9;
  padding:.05em .18em 0 0;
  color:#fff;
  text-shadow:
    0 0 2px #fff, 0 0 12px rgba(255,255,255,.7),
    0 0 28px var(--neon-2), 0 0 60px rgba(0,229,255,.5);
}

/* ---------- ARABIC FIXES ---------- */
/* Remove drop cap in RTL — Arabic has no "first letter" concept the same way */
html[dir="rtl"] .about__why-text::first-letter,
html[lang="ar"] .about__why-text::first-letter{
  float:none;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  padding:0;
  text-shadow:inherit;
}

/* Force RTL direction on Arabic body text so letters render correctly */
html[lang="ar"] .about__why-text,
html[lang="ar"] .about__lead,
html[lang="ar"] .about__body p{
  direction:rtl;
  text-align:right;
  unicode-bidi:embed;
}

/* Mirror the cyan sidebar rule on the right side in Arabic */
html[dir="rtl"] .about__body{
  padding-left:0;
  padding-right:clamp(1rem,2.5vw,2rem);
  border-left:0;
  border-right:1px solid rgba(0,229,255,.35);
}
html[dir="rtl"] .about__body::before{
  left:auto;
  right:-1px;
}

/* Flip the decorative rule gradient direction in RTL */
html[dir="rtl"] .about__rule-line{
  background:linear-gradient(270deg,var(--neon),transparent);
}

/* Tone down uppercase letter-spacing in Arabic (Arabic doesn't have uppercase) */
html[lang="ar"] .about__title,
html[lang="ar"] .about__why-title,
html[lang="ar"] .about__eyebrow,
html[lang="ar"] .about__why-eyebrow{
  letter-spacing:0;
  text-transform:none;
}

/* ---------- FOOTER ---------- */
.about__footer{
  margin-top:clamp(4rem,10vh,7rem);
  padding-top:clamp(2rem,5vh,2.75rem);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
}
.about__footer-copy{
  font-size:clamp(.62rem,.78vw,.7rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
.about__footer-mark{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:clamp(.6rem,.75vw,.68rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}
.about__footer-mark::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 8px var(--neon), 0 0 16px rgba(255,43,214,.6);
}
html[lang="ar"] .about__footer-copy,
html[lang="ar"] .about__footer-mark{
  letter-spacing:.08em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .about__why{
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .about__why-head{
    position:static;
  }
}

@media (max-width:640px){
  .about{
    padding-left:clamp(1.4rem,5vw,2rem);
  }
}

@media (max-width:520px){
  .about__footer{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }
}