/* ============================================================
   True Self Practice: Shared Stylesheet
   ============================================================ */

:root {
  --ink: #2B2622;
  --ink-soft: #55493F;
  --clay: #8A9A80;
  --clay-dark: #6F7E66;
  --sand: #F1E9DE;
  --cream: #FBF7F1;
  --line: #E4D9C8;
  --white: #FFFFFF;

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1140px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: .9em;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }
@media (max-width: 720px) { section { padding: 56px 0; } }

.section-alt { background: var(--sand); }

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 640px;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(138, 154, 128, .28);
}
.btn-primary:hover { background: var(--clay-dark); }

.btn-outline {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(138, 154, 128, .28);
}
.btn-outline:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

/* Hero secondary CTA stays a plain white/outline button rather than
   solid green, so it doesn't visually compete with the primary CTA
   next to it. */
.btn-outline-white {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: none;
}
.btn-outline-white:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }

.btn-ghost {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-ghost:hover { background: rgba(255,255,255,.28); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,247,241,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.brand {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
}
.brand-mark {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--clay);
}
.brand-highlight {
  display: inline-block;
  background: var(--clay);
  color: var(--white);
  padding: 1px 8px;
  border-radius: 4px;
}
.brand-loc { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); border-color: var(--clay); }

.nav-links a.nav-lang {
  position: relative;
  margin-inline-start: 10px;
  padding-inline-start: 20px;
}
.nav-links a.nav-lang::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--line);
}
.nav-links a.nav-lang:hover::before { background: var(--clay); }

/* Arabic text embedded in an English (LTR) page — e.g. the "العربية"
   language-switch link — must render in El Messiri, never Manrope,
   even though the surrounding page has no [dir="rtl"] ancestor. */
[lang="ar"] { font-family: "El Messiri", var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}

/* Wrapper around nav-links + nav-cta. On desktop it renders as if it
   weren't there at all (display: contents), so the existing desktop
   layout (logo / links / cta spread via justify-content) is untouched.
   On mobile it becomes the single slide-down panel toggled by the
   hamburger button. */
.nav-menu { display: contents; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    box-shadow: 0 20px 48px rgba(43,38,34,.14);
    padding: 8px 24px 28px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }

  .nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; }
  .nav-links a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav-links a.nav-lang {
    display: block;
    margin-inline-start: 0;
    padding-inline-start: 4px;
  }
  .nav-links a.nav-lang::before { display: none; }

  .nav-cta { width: 100%; margin-top: 14px; display: flex; justify-content: center; }
  .nav-cta .btn { width: auto; display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 96px;
  background:
    radial-gradient(ellipse at top right, rgba(138,154,128,.08), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(110,127,99,.10), transparent 55%),
    var(--cream);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .hero { padding: 28px 0 56px; }
  .hero-grid { gap: 36px; }
}

.hero-location {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.hero-location svg { color: var(--clay); flex-shrink: 0; margin-top: 2px; }
.hero-location-stack { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.hero-location-stack .hero-location { margin-bottom: 0; }
.hero h1 { margin-bottom: .35em; }
.hero .tagline { font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 1.6em; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 1.6em; }
.hero-note { font-size: .88rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .hero-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    font-size: .82rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .hero .eyebrow {
    font-size: clamp(.56rem, 2.6vw, .78rem);
    letter-spacing: clamp(.03em, .8vw, .14em);
    white-space: nowrap;
  }
}

.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(43,38,34,.14);
  aspect-ratio: 4/5;
  background: var(--sand);
}
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Logo / trust bar ---------- */
.trust-bar { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .eyebrow { display: block; text-align: center; margin-bottom: 1.4em; }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.trust-row img { height: 42px; width: auto; max-width: 130px; opacity: 1; object-fit: contain; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.grid-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.grid-services .card { flex: 1 1 260px; max-width: 340px; }
@media (max-width: 620px) { .grid-services .card { flex-basis: 100%; max-width: none; } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card > .btn { margin-top: auto; align-self: flex-start; }
.card > .btn + .form-note { margin-top: 10px; }
.card .icon-badge {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--sand);
  color: var(--clay);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
  transition: background .25s ease, color .25s ease;
}
.card-meta {
  display: flex;
  gap: 18px;
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.card-meta span { display: flex; align-items: center; gap: 6px; }

.tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink-soft);
  margin: 3px 6px 3px 0;
}

/* ---------- Section header ---------- */
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Subsection label (groups cards within one section) ---------- */
.subsection-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Philosophy ---------- */
.philosophy { position: relative; overflow: hidden; }
.philosophy::before,
.philosophy::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.philosophy::before {
  top: -200px; right: -180px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at 30% 30%, rgba(138,154,128,.24), rgba(138,154,128,0) 70%);
  animation: philosophyDriftA 16s ease-in-out infinite;
}
.philosophy::after {
  bottom: -220px; left: -160px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 60% 60%, rgba(138,154,128,.16), rgba(138,154,128,0) 72%);
  animation: philosophyDriftB 19s ease-in-out infinite;
}
@keyframes philosophyDriftA {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(-60px, 40px) scale(1.15) rotate(8deg); }
  50%  { transform: translate(-20px, 85px) scale(0.94) rotate(-5deg); }
  75%  { transform: translate(45px, 20px) scale(1.1) rotate(6deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes philosophyDriftB {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  30%  { transform: translate(55px, -45px) scale(1.12) rotate(-10deg); }
  60%  { transform: translate(15px, -75px) scale(0.9) rotate(6deg); }
  85%  { transform: translate(-40px, -15px) scale(1.08) rotate(-5deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
.philosophy-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.philosophy-inner .quote-block { text-align: start; margin: 1.5em auto 32px; max-width: 600px; }

.quote-block {
  border-left: 3px solid var(--clay);
  padding-left: 24px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 1.2em 0;
}

/* ---------- Therapist bio ---------- */
.bio {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.bio:last-child { border-bottom: none; }
@media (max-width: 800px) { .bio { grid-template-columns: 1fr; } }

.bio-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; background: var(--sand); }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-name { margin-bottom: .1em; }
.bio-credential { color: var(--clay); font-weight: 600; margin-bottom: 1.1em; display: block; }
.bio > div:not(.bio-photo) { max-width: 93%; }
.bio .credential-list + .btn { margin-top: 20px; }
@media (max-width: 800px) { .bio > div:not(.bio-photo) { max-width: 100%; } }
.credential-list {
  list-style: none;
  padding: 18px 0 0;
  margin: 1.7em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}
.credential-list li {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clay-dark);
  background: var(--sand);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(43,38,34,.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.credential-list li:hover {
  box-shadow: 0 3px 8px rgba(43,38,34,.09);
  transform: translateY(-1px);
}
.credential-list li.credential-primary {
  color: var(--clay-dark);
  font-weight: 700;
}
[dir="rtl"] .credential-list li {
  font-family: "El Messiri", var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: .8rem;
  font-weight: 600;
}
@media (max-width: 560px) {
  .credential-list li { font-size: .64rem; padding: 6px 13px; }
  [dir="rtl"] .credential-list li { font-size: .72rem; }
}

/* ---------- Focus areas ---------- */
.focus-grid { align-items: stretch; }
.focus-category {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px 26px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.focus-grid .focus-category { margin-bottom: 0; }
.focus-category:hover { border-color: var(--clay); box-shadow: 0 10px 26px rgba(43,38,34,.08); }
.focus-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.focus-title .icon-badge {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--sand);
  color: var(--clay);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0;
}
.focus-category .focus-desc {
  margin: 10px 0 0;
  max-width: 88%;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.88;
  min-height: 84px;
}
.focus-category .focus-desc strong {
  color: var(--ink);
  font-weight: 700;
}
.focus-category .focus-tags {
  margin-top: 16px;
  padding-top: 0;
}
.focus-category .focus-tags .tag { opacity: .62; }

/* First category gets subtle emphasis as the practice's core specialty */
.focus-grid .focus-category:first-child .focus-title .icon-badge {
  background: var(--clay);
  color: var(--white);
}
.focus-grid .focus-category:first-child .focus-title {
  font-weight: 700;
}

/* Arabic needs more breathing room: taller line-height, narrower measure, taller min-height */
[dir="rtl"] .focus-category .focus-desc {
  max-width: 82%;
  line-height: 2.1;
  min-height: 112px;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-weight: 600;
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--clay);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 14px; color: var(--ink-soft); }
.faq-item ul, .faq-item ol { margin: 10px 0 14px; padding-inline-start: 22px; color: var(--ink-soft); }
.faq-item li { margin-bottom: 6px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--clay-dark), var(--ink));
  color: var(--white);
  border-radius: 28px;
  padding: 64px;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.82); }
@media (max-width: 700px) { .cta-band { padding: 40px 24px; } }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "location ."
    "info message";
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "location"
      "info"
      "message";
  }
}
.contact-card { padding: 24px 28px; }
.contact-card:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--white); }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  transition: background .2s ease;
}
.contact-item:last-child { border-bottom: none; }
.contact-item:hover { background: var(--sand); }
.contact-item:hover .icon-badge { background: var(--clay); color: var(--white); }
.contact-item .icon-badge { flex-shrink: 0; }
.contact-item h3 { margin-bottom: .2em; }
.contact-item a.link { color: var(--clay); font-weight: 600; }

.mini-steps { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 28px; }
.mini-step { display: flex; align-items: flex-start; gap: 14px; font-size: .95rem; color: var(--ink-soft); }
.mini-step .mini-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--clay);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--white);
  color: var(--ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.75);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 { color: var(--white); font-family: var(--font-body); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2em; }
.footer-grid h4 a { color: inherit; transition: color .15s ease; }
.footer-grid h4 a:hover { color: var(--clay); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .7em; }
.footer-grid a:hover { color: var(--white); }
.footer-lang {
  font-weight: 600;
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.footer-lang:hover { border-color: var(--clay); color: var(--white); }
.footer-brand { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin-bottom: .5em; }
.footer-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--clay);
  margin-bottom: .9em;
}
.footer-location svg { flex-shrink: 0; }
.footer-whatsapp { display: inline-flex; align-items: center; gap: 8px; }
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: rgba(255,255,255,.1); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
}

@media (max-width: 800px) {
  .footer-social { width: 100%; }
  .footer-bottom { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; }
}

/* On mobile, keep the brand column's text and social icons aligned to
   each language's natural reading edge (right for Arabic) rather than
   centered. */
@media (max-width: 800px) {
  [dir="rtl"] .footer-grid > div:first-child { text-align: right; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 64px 0 40px; text-align: center; }
.page-hero .eyebrow { display: block; }
@media (max-width: 720px) {
  .page-hero { padding: 28px 0 32px; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.disclaimer-box {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 22px 28px 17px;
  font-size: .9rem;
  color: var(--ink-soft);
  margin-top: 24px;
}
.insight-box {
  background: linear-gradient(135deg, rgba(138,154,128,.14), rgba(138,154,128,.05));
  border: 1px solid rgba(138,154,128,.35);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 32px;
}
.insight-box .insight-label {
  display: block;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clay-dark);
  margin-bottom: 10px;
}
.insight-box p {
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}
[dir="rtl"] .insight-box .insight-label {
  font-family: "El Messiri", var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: .85rem;
}

/* ============================================================
   RTL / Arabic support
   ============================================================ */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: "El Messiri", var(--font-body);
}
[dir="rtl"] * {
  font-family: "El Messiri", var(--font-body) !important;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-weight: 700;
}
[dir="rtl"] .quote-block {
  border-left: none;
  border-right: 3px solid var(--clay);
  padding-left: 0;
  padding-right: 24px;
}
[dir="rtl"] .nav-links a.active,
[dir="rtl"] .nav-links a { border-bottom-color: transparent; }
[dir="rtl"] .footer-social { direction: ltr; justify-content: flex-end; }
[dir="rtl"] .credential-list,
[dir="rtl"] .focus-tags,
[dir="rtl"] .trust-row,
[dir="rtl"] .hero-actions { direction: rtl; }
[dir="rtl"] .card-meta { direction: rtl; }
[dir="rtl"] .faq-item summary,
[dir="rtl"] .focus-title { text-align: right; }
[dir="rtl"] .focus-desc { text-align: right; }
[dir="rtl"] .contact-item,
[dir="rtl"] .bio,
[dir="rtl"] .trust-row img { direction: rtl; }
[dir="rtl"] .form-note,
[dir="rtl"] .disclaimer-box { text-align: right; }

/* Arabic text should never inherit Latin-oriented letter-spacing or
   uppercase transforms — both distort Arabic's cursive letter-joining. */
[dir="rtl"] * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ============================================================
   Motion & interactivity
   ============================================================ */

/* Sticky header gains a soft shadow once the page scrolls */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 20px rgba(43,38,34,.08); }

/* Gentle hover lift on cards and bios */
.card, .bio-photo, .contact-item {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(43,38,34,.12);
  border-color: var(--clay);
  background: linear-gradient(160deg, rgba(138,154,128,.06), var(--white) 60%);
}
.card:hover .icon-badge { background: var(--clay); color: var(--white); }
.btn { transition: transform .15s ease, box-shadow .15s ease, background .2s ease; }

/* Scroll-reveal: elements fade + rise into place as they enter view */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view { opacity: 1; transform: none; }

/* Hero entrance animation (plays immediately on load, not on scroll) */
.hero-grid > div:first-child > * {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn .7s ease forwards;
}
.hero-grid > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.hero-grid > div:first-child > *:nth-child(2) { animation-delay: .12s; }
.hero-grid > div:first-child > *:nth-child(3) { animation-delay: .19s; }
.hero-grid > div:first-child > *:nth-child(4) { animation-delay: .26s; }
.hero-grid > div:first-child > *:nth-child(5) { animation-delay: .33s; }
.hero-media { opacity: 0; transform: scale(.97); animation: heroMediaIn .8s ease forwards; animation-delay: .2s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroMediaIn { to { opacity: 1; transform: none; } }

/* "Featured in" logo strip: gentle continuous auto-scroll, pauses on hover */
.trust-marquee { overflow: hidden; }
.trust-marquee .trust-row {
  flex-wrap: nowrap;
  width: max-content;
  animation: trustScroll 32s linear infinite;
}
.trust-marquee:hover .trust-row { animation-play-state: paused; }
@keyframes trustScroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-distance, -50%)); }
}
/* Force LTR box positioning for the animated marquee row itself, in both
   languages. Once JS duplicates the logos and this row becomes wider than
   its container, the row's resting position (before any transform) is
   governed by direction: in RTL it rests flush against the container's
   RIGHT edge instead of the left. Combined with animation-direction:reverse
   (which starts playback at its END keyframe -- a large negative
   translateX) this shoved the whole doubled row off-screen on first paint,
   which read as the strip going "empty" until it slowly crawled back into
   view. Keeping the row LTR-positioned and playing the same animation
   direction in both languages keeps it visibly moving from frame one. */
[dir="rtl"] .trust-marquee,
[dir="rtl"] .trust-marquee .trust-row { direction: ltr; }

/* Respect reduced-motion preferences: turn every animation off */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-grid > div:first-child > *, .hero-media { opacity: 1; transform: none; animation: none; }
  .trust-marquee .trust-row { animation: none; }
  .card:hover { transform: none; }
  .philosophy::before, .philosophy::after { animation: none; }
}