/* ==========================================================================
   pages.css — inner-page layouts and shared additions.

   Loaded after base.css and home.css on every page. Home.css still supplies
   the cards, steps, CTA band and testimonial components; this file adds the
   page hero, editorial splits, service details, FAQ, form and legal styles.
   ========================================================================== */

/* 1. SKIP LINK ------------------------------------------------------------ */
.skip {
  position: absolute;
  top: -90px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--n8);
  color: var(--cream);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* 2. NAVIGATION ADDITIONS ------------------------------------------------- */
@media (min-width: 1101px) {
  .nav .links { gap: 26px; }
}

.links a.lang-link {
  margin-inline-start: 4px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--n8);
  opacity: 1;
}
.links a.lang-link::after { display: none; }
.links a.lang-link:hover {
  color: var(--gd);
  border-color: var(--gold);
  background: rgba(235, 176, 34, .14);
}

@media (max-width: 1100px) {
  .links a.lang-link {
    margin: 12px 0 0;
    padding: 14px 2px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
  }
}

/* 3. PAGE HERO ------------------------------------------------------------ */
.page-hero {
  position: relative;
  overflow: clip;
  padding: 180px 0 110px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(120% 120% at 70% 0%, #fffaf0 0%, var(--cream) 55%, #efe7d2 100%);
}
.ph-in { position: relative; z-index: 2; max-width: 980px; }
.page-hero .h1 { max-width: 920px; }
.page-hero .lead { max-width: 780px; }
.page-hero .lead + .lead { margin-top: 14px; }

.ph-orbs { position: absolute; inset: 0; pointer-events: none; }
.ph-orb { position: absolute; border-radius: 50%; }
.ph-orb.o1 {
  width: 560px;
  height: 560px;
  inset-inline-start: -180px;
  top: -200px;
  background: radial-gradient(circle, rgba(235, 176, 34, .24), transparent 65%);
  animation: drift1 18s ease-in-out infinite alternate;
}
.ph-orb.o2 {
  width: 620px;
  height: 620px;
  inset-inline-end: -220px;
  top: -60px;
  background: radial-gradient(circle, rgba(65, 90, 119, .16), transparent 65%);
  animation: drift2 22s ease-in-out infinite alternate;
}
.ph-orb.o3 {
  width: 360px;
  height: 360px;
  inset-inline-start: 38%;
  bottom: -220px;
  background: radial-gradient(circle, rgba(235, 176, 34, .18), transparent 65%);
  animation: drift1 15s ease-in-out infinite alternate-reverse;
}

/* 4. EDITORIAL SPLITS ----------------------------------------------------- */
.split-sec { background: var(--cream); }
.split-in { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.split-copy { flex: 1 1 440px; min-width: 0; }
.split-visual { flex: 1 1 440px; min-width: 0; }
.split-reverse .split-copy { order: 2; }
.split-reverse .split-visual { order: 1; }

.info-card {
  padding: 36px 34px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff 0%, #f3ecda 100%);
  border: 1px solid rgba(65, 90, 119, .22);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -34px rgba(27, 38, 59, .45);
}
.info-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--n8);
}
.info-list { display: grid; gap: 18px; margin-top: 26px; }
.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--n6);
  font-weight: 600;
}
.info-list li:first-child { padding-top: 0; border-top: 0; }
.info-num {
  flex: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
}
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip-list li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(65, 90, 119, .08);
  color: var(--n6);
  font-size: 14px;
  font-weight: 600;
}

/* 5. CARD ADDITIONS ------------------------------------------------------- */
.g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 70px;
  perspective: 1300px;
}
.card-label {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gd);
}
.card-label + h3 { margin-top: 10px; }
.card-headline {
  margin-top: 10px !important;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--n8) !important;
}
.center { text-align: center; }
.center .sub { margin-inline: auto; }
.center-cta { margin-top: 54px; text-align: center; }

/* 6. VALUES / VISION ------------------------------------------------------ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.value-card {
  position: relative;
  padding: 32px 30px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(243, 236, 218, .85));
  border: 1px solid var(--border);
  box-shadow: 0 26px 50px -38px rgba(13, 27, 42, .5);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(235, 176, 34, .8);
  box-shadow: 0 36px 60px -34px rgba(13, 27, 42, .5);
}
.value-card h3 { font-size: 22px; margin-top: 18px; }
.value-card p { margin-top: 10px; color: var(--mut); }
.value-check {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--gd);
  background: rgba(235, 176, 34, .18);
  border: 1px solid rgba(235, 176, 34, .45);
}
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.vision-card { padding: 44px 40px; }
.vision-card .h3 {
  font-size: clamp(28px, 3vw, 40px);
  margin-top: 16px;
}
.vision-card p { margin-top: 18px; color: var(--mut); }

/* 7. APPROACH ------------------------------------------------------------- */
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-4 .step p { max-width: none; }
.steps-4 .step h3 { font-size: 24px; }

/* 8. SERVICES ------------------------------------------------------------- */
.service-list { padding-top: 30px; }
.service-detail {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 60px;
  padding: 74px 0;
  border-top: 1px solid var(--border);
}
.service-detail:first-child { border-top: 0; }
.service-meta .h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  margin-top: 14px;
}
.service-name {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gd);
}
.service-body p { color: var(--mut); margin-bottom: 18px; }
.service-body p:last-of-type { margin-bottom: 0; }
.scope-title { font-size: 20px; margin-top: 28px; }
.scope-list { display: grid; gap: 12px; margin-top: 18px; }
.scope-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--n9);
  font-weight: 600;
}
.scope-list svg { flex: none; margin-top: 5px; color: var(--gd); }
.service-cta { margin-top: 32px; }

/* 9. PRINCIPLE ------------------------------------------------------------ */
.principle-sec { background: linear-gradient(180deg, var(--cream) 0%, #ebe3cd 50%, var(--cream) 100%); }
.principle {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 70px 46px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 40px 80px -50px rgba(27, 38, 59, .45);
  overflow: hidden;
}
.principle::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.principle .h2 { max-width: 760px; margin-inline: auto; }
.principle .sub { margin-inline: auto; max-width: 680px; }

/* 10. INDUSTRIES ---------------------------------------------------------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 50px;
}
.industry-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .58);
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, .85);
}
.industry-num {
  flex: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
}
.industry-card p { margin: 0; color: var(--n6); font-weight: 600; }
.note {
  margin-top: 40px;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(235, 176, 34, .1);
  color: var(--mut);
  font-size: 15px;
}

/* 11. FAQ ----------------------------------------------------------------- */
.faq-wrap { max-width: 940px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--n8);
  transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gd); }
.faq-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--gd);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s;
}
.faq-icon::before { width: 10px; height: 2px; }
.faq-icon::after { width: 2px; height: 10px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { padding: 0 0 28px; }
.faq-a p { max-width: 780px; color: var(--mut); }

/* 12. CONTACT ------------------------------------------------------------- */
.contact-sec { background: linear-gradient(180deg, var(--cream) 0%, #efe8d4 100%); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 44px;
  align-items: start;
}
.contact-form-wrap {
  padding: 44px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff 0%, #f3ecda 100%);
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -52px rgba(13, 27, 42, .55);
}
.contact-form-wrap .h2 { font-size: clamp(30px, 3.4vw, 46px); }
.contact-form { margin-top: 36px; display: grid; gap: 20px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--n8);
}
.req,
.opt {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(65, 90, 119, .1);
  color: var(--mut);
}
.req { background: rgba(235, 176, 34, .18); color: var(--gd); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--n9);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(235, 176, 34, .18);
}
.privacy-note { font-size: 13px; color: var(--mut); }
.privacy-note a { color: var(--gd); font-weight: 700; }
.form-note {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(65, 90, 119, .08);
  color: var(--mut);
  font-size: 13px;
}
.form-note a { color: var(--gd); font-weight: 700; word-break: break-word; }
.contact-aside {
  position: relative;
  overflow: hidden;
  padding: 38px 32px;
  border-radius: var(--radius);
  background: radial-gradient(120% 120% at 50% 0%, #415a77 0%, #243550 75%);
  color: var(--cream);
  box-shadow: 0 40px 80px -50px rgba(13, 27, 42, .65);
}
.contact-aside .eyebrow { color: var(--gold); }
.contact-aside h3 { font-size: 26px; margin-top: 14px; }
.contact-aside p { margin-top: 16px; color: rgba(247, 243, 233, .72); }
.contact-list { display: grid; gap: 18px; margin-top: 30px; }
.contact-list li {
  display: grid;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 243, 233, .18);
}
.contact-list li:first-child { padding-top: 0; border-top: 0; }
.contact-list li > span:first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-list a,
.contact-list li > span:last-child {
  color: var(--cream);
  font-weight: 600;
  word-break: break-word;
}
.contact-list a:hover { color: var(--gold); }

/* 13. WORK ---------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 50px;
}
.work-item {
  padding: 30px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(243, 236, 218, .75));
}
.work-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
}
.work-item h3 { margin-top: 12px; font-size: 22px; }
.work-item p { margin-top: 8px; color: var(--mut); }

/* 14. LEGAL --------------------------------------------------------------- */
.legal-wrap { max-width: 880px; }
.legal-updated { color: var(--mut); font-size: 14px; }
.legal-note {
  margin-top: 16px;
  padding: 16px 20px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(235, 176, 34, .1);
  color: var(--mut);
  font-size: 14px;
}
.legal-body { margin-top: 44px; }
.legal-block { padding: 30px 0; border-top: 1px solid var(--border); }
.legal-block:first-child { padding-top: 0; border-top: 0; }
.legal-block h2 { font-size: clamp(22px, 2.2vw, 30px); }
.legal-block p { margin-top: 12px; color: var(--mut); line-height: 1.8; }
.lp .legal-list {
  margin-top: 14px;
  padding-inline-start: 22px;
  list-style: disc;
}
.legal-list li { margin-top: 8px; color: var(--mut); }

/* 15. FOOTER ADDITIONS ---------------------------------------------------- */
.fbrand { max-width: 300px; }
.fbrand p { margin-top: 18px; color: rgba(247, 243, 233, .7); }
.fbrand .logo img { height: 70px; }
.foot-loc { display: block; margin-top: 10px; color: rgba(247, 243, 233, .7); }
.fb a { color: var(--gold); font-weight: 700; }

/* 16. ARABIC TYPOGRAPHY + RTL -------------------------------------------- */
html[lang="ar"] {
  --font-body: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] .h1,
html[lang="ar"] .h2,
html[lang="ar"] .h3,
html[lang="ar"] .h4,
html[lang="ar"] .lead,
html[lang="ar"] .sub {
  line-height: 1.35;
  letter-spacing: 0;
}
html[lang="ar"] .h1 { line-height: 1.3; }
html[lang="ar"] .eyebrow { letter-spacing: .03em; }
html[lang="ar"] .card-label,
html[lang="ar"] .service-name,
html[lang="ar"] .contact-list li > span:first-child {
  letter-spacing: 0;
}
html[lang="ar"] .faq-item summary { line-height: 1.5; }

[dir="rtl"] .fg .col a:hover { transform: translateX(-6px); }
[dir="rtl"] .more svg,
[dir="rtl"] .btn svg,
[dir="rtl"] .snav svg { transform: scaleX(-1); }
[dir="rtl"] .card:hover .more svg { transform: translateX(-6px) scaleX(-1); }
[dir="rtl"] .step:hover .num { transform: rotate(8deg) scale(1.08); }

/* 17. RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-4 .rail { display: none; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-hero { padding: 150px 0 85px; }
  .split-in { gap: 44px; }
  .two-col { grid-template-columns: 1fr; }
  .service-detail {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 56px 0;
  }
  .contact-layout { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .vision-card { padding: 34px 30px; }
  .contact-form-wrap { padding: 32px; }
}

@media (max-width: 620px) {
  .page-hero { padding: 135px 0 70px; }
  .field-row { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .principle { padding: 48px 24px; }
  .contact-form-wrap { padding: 26px 20px; }
  .contact-aside { padding: 30px 24px; }
  .fbrand { max-width: none; }
  .steps-4 { grid-template-columns: 1fr; }
  .service-meta .h2 { font-size: clamp(28px, 8vw, 38px); }
}