/* ============================================================
   AZ LEGAL SOLUTIONS — Dark Premium Glass Editorial
   One pass. Committed direction. No patches.
   ============================================================ */

/* --- TOKENS ----------------------------------------------- */
:root {
  /* Ground — dark petrol blue family */
  --bg-hero:        #0F2A36;
  --bg-content:     #132F3C;
  --bg-recessed:    #0C2430;
  --bg-cta:         #0A2230;
  --bg-footer:      #080E14;

  /* Accent */
  --accent:         #C43050;
  --accent-hover:   #D94468;
  --accent-glow:    rgba(196, 48, 80, 0.30);
  --teal:           #5A9A8A;
  --teal-hover:     #6FB5A3;

  /* Text — all tested for AA contrast on --bg-content */
  --text-bright:    #F0F4F2;      /* 10:1 on content bg */
  --text-body:      #B8D4CC;      /* 6.5:1 on content bg */
  --text-muted:     #7FA69C;      /* 4.6:1 on content bg */
  --text-label:     #E07A8F;      /* lighter cranberry, ~4.8:1 on content bg — WCAG AA */

  /* Glass — white translucent on dark */
  --glass:          rgba(255, 255, 255, 0.07);
  --glass-hover:    rgba(255, 255, 255, 0.12);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-border-h: rgba(255, 255, 255, 0.18);
  --glass-blur:     20px;
  --glass-r:        16px;

  /* Shadows */
  --shadow-card:    0 4px 32px rgba(0,0,0,0.30);
  --shadow-lift:    0 12px 48px rgba(0,0,0,0.40);
  --shadow-glow-a:  0 0 32px rgba(196,48,80,0.25);
  --shadow-glow-t:  0 0 32px rgba(90,154,138,0.12);

  /* Fonts */
  --f-head:   'DM Sans', sans-serif;
  --f-body:   'Source Serif 4', Georgia, serif;
  --f-head-ar: 'Tajawal', 'DM Sans', sans-serif;
  --f-body-ar: 'Noto Naskh Arabic', 'Source Serif 4', Georgia, serif;

  /* Space */
  --s-xs: 8px;  --s-sm: 16px;  --s-md: 24px;  --s-lg: 48px;
  --s-xl: 64px; --s-2xl: 80px; --s-sec: 120px;

  /* Radius */
  --r-sm: 8px;  --r-md: 16px;

  /* Width */
  --w-max: 1140px;
  --w-narrow: 780px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s ease;
  --t-med:  0.4s var(--ease);
  --t-slow: 0.7s var(--ease);

  /* Whatsapp */
  --whatsapp: #25D366;
  --whatsapp-h: #1EBE57;
}


/* --- RESET ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  color: var(--text-body);
  background: var(--bg-content);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--teal-hover); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90,154,138,0.5); border-radius: var(--r-sm); }


/* --- SKIP LINK -------------------------------------------- */
.skip-link {
  position: absolute; top: -100%; left: var(--s-sm);
  background: var(--accent); color: var(--text-bright);
  padding: var(--s-xs) var(--s-sm); border-radius: var(--r-sm);
  font: 500 0.875rem var(--f-head); z-index: 10000;
}
.skip-link:focus { top: var(--s-sm); }


/* --- TYPOGRAPHY ------------------------------------------- */
.type-hero      { font: 400 clamp(1.75rem, 3.5vw, 2.75rem)/1.15 var(--f-body); color: var(--text-bright); letter-spacing: -0.02em; }
.type-section   { font: 400 clamp(1.375rem, 3vw, 2rem)/1.25 var(--f-body); color: var(--text-bright); }
.type-subsection{ font: 500 clamp(1.125rem, 2vw, 1.375rem)/1.35 var(--f-head); color: var(--text-bright); }
.type-card-title{ font: 600 1.125rem/1.4 var(--f-head); color: var(--text-bright); }
.type-body      { font: 400 1rem/1.7 var(--f-body); color: var(--text-body); }
.type-body-large{ font: 400 1.125rem/1.75 var(--f-body); color: var(--text-body); }
.type-small     { font: 400 0.9375rem/1.7 var(--f-body); color: var(--text-bright); opacity: 0.85; }
.type-label     { font: 600 0.6875rem/1 var(--f-head); color: var(--text-label); text-transform: uppercase; letter-spacing: 0.16em; }
.type-nav       { font: 500 0.9375rem/1 var(--f-head); text-transform: uppercase; letter-spacing: 0.05em; }
.type-stat      { font: 600 clamp(2rem, 4vw, 2.75rem)/1 var(--f-head); color: var(--text-label); letter-spacing: -0.02em; }
.type-quote     { font: italic 400 clamp(1.0625rem, 2vw, 1.25rem)/1.75 var(--f-body); color: var(--text-bright); }


/* --- LAYOUT ----------------------------------------------- */
.wrap       { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--s-md); }
.wrap-narrow{ max-width: var(--w-narrow); margin-inline: auto; padding-inline: var(--s-md); }
.section    { padding-block: var(--s-sec); background: var(--bg-content); position: relative; overflow: hidden; }
.section > *{ position: relative; z-index: 1; }

/* Gradient orbs — background depth */
.section::before {
  content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,154,138,0.10) 0%, transparent 70%);
  top: -200px; right: -150px; pointer-events: none; z-index: 0;
}
.section::after {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,48,80,0.06) 0%, transparent 70%);
  bottom: -150px; left: -100px; pointer-events: none; z-index: 0;
}

.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--s-md); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); }
.section-sm { padding-block: var(--s-xl); background: var(--bg-content); position: relative; overflow: hidden; }
.section-sm > * { position: relative; z-index: 1; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* --- NAV -------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--bg-hero);
  padding: 18px 0;
}
.nav-inner {
  width: 100%; max-width: var(--w-max); margin-inline: auto;
  padding-inline: var(--s-md);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 63px;
}
.nav-logo { display: flex; align-items: center; color: var(--accent); }
.nav-logo svg { height: 58px; width: auto; display: block; }
.nav-logo:hover { opacity: 0.85; }

.nav-links { display: none; list-style: none; gap: var(--s-lg); align-items: center; }
.nav-link { color: var(--text-muted); min-height: 48px; display: flex; align-items: center; transition: color var(--t-fast); }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text-bright); }

.nav-lang { display: flex; gap: 6px; }
.nav-lang-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  color: var(--text-muted); font: 500 0.6875rem var(--f-head);
  padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.nav-lang-btn:hover, .nav-lang-btn.active {
  background: rgba(90,154,138,0.15); color: var(--text-bright);
  border-color: var(--glass-border-h);
}

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: var(--s-xs); min-width: 48px; min-height: 48px; align-items: center;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--teal); border-radius: 1px; transition: all var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nav-mobile {
  display: none; position: fixed; inset: 0; background: var(--bg-hero);
  z-index: 999; padding: 90px var(--s-md) 0; flex-direction: column; gap: var(--s-md);
}
.nav-mobile.open { display: flex; }
.nav-mobile a { font: 500 1.25rem var(--f-head); color: var(--text-bright); padding: var(--s-sm) 0; border-bottom: 1px solid var(--glass-border); min-height: 48px; display: flex; align-items: center; }


/* --- HERO ------------------------------------------------- */
.hero {
  position: relative; min-height: 90vh;
  display: flex; align-items: center;
  padding-top: 90px; overflow: hidden;
  background: var(--bg-hero);
}
/* Hero photo. English and French use the mirrored shot (wall on the
   right, away from LTR text). Arabic uses the original (wall on the
   left, away from RTL text). The photo shows in full — no mask fade. */
.hero-image {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0F2A36;
  background-image: url('hero-office-english.png');
  background-size: cover;
  background-position: center center;
  opacity: 1;
}
[lang="ar"] .hero-image {
  background-image: url('hero-office.png');
}
/* On portrait phones / tablets the image is scaled to fill height,
   so the wall text would land where the H1 sits. Shift the visible
   window all the way to the side opposite the wall logo — the office
   window / plant area — so the page text reads on a clean atmospheric
   background. 48em covers portrait phones; the second query covers
   portrait tablets (up to 50em). */
@media (max-width: 50em) {
  .hero-image {
    background-position: 0% center;
  }
  [lang="ar"] .hero-image {
    background-position: 100% center;
  }
}
.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 80%, rgba(15, 42, 54, 0.55) 0%, transparent 70%);
  pointer-events: none;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2; opacity: 0.035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* No bottom gradient overlay — the photo shows clean to the edge.
   A thin 1px line at the hero/section seam (handled by .accent-bar)
   replaces any fade. */
.hero::after { display: none; }
/* SVG watermark is suppressed when the hero photo is in use — the
   photo's own brass wall logo serves as the brand anchor. The SVG
   markup stays in the HTML so it can be re-enabled by overriding
   `display`. */
.hero-watermark {
  display: none;
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 75vw;
  max-width: 880px;
  z-index: 2;
  opacity: 0.05;
  pointer-events: none;
  color: var(--text-bright);
  filter:
    drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.6))
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.08));
}
@media (max-width: 48em) {
  .hero-watermark {
    right: -25%;
    width: 130vw;
    max-width: none;
    opacity: 0.04;
  }
}
.hero-content {
  position: relative; z-index: 3; width: 100%; max-width: var(--w-max);
  margin-inline: auto; padding: var(--s-lg) var(--s-md) var(--s-md);
}
/* Glass block — sits behind the hero copy so it reads cleanly on top
   of the photo. Sized to the text width, not the full hero width. */
.hero-glass {
  width: 100%;
  max-width: 460px;
  padding: var(--s-sm) var(--s-md) var(--s-md);
  background: rgba(10, 26, 32, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r);
  box-shadow: var(--shadow-card);
}
.hero-glass > .hero-tagline { margin-top: var(--s-md); }
.hero-label { margin-bottom: var(--s-md); padding-left: var(--s-sm); border-left: 3px solid var(--accent); }
.hero-title { max-width: 780px; margin-bottom: var(--s-md); }
.hero-subtitle { max-width: 600px; margin-bottom: var(--s-lg); }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: var(--s-sm); }


/* --- ACCENT BAR ------------------------------------------- */
.accent-bar { height: 3px; border: none; background: linear-gradient(to right, var(--accent), var(--teal)); }


/* --- BUTTONS ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  font: 500 0.875rem var(--f-head); letter-spacing: 0.02em;
  padding: 14px 32px; border-radius: var(--r-sm); border: none; cursor: pointer;
  min-height: 48px; transition: all var(--t-med); text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--text-bright); box-shadow: 0 2px 16px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-hover); color: var(--text-bright); box-shadow: var(--shadow-glow-a); transform: translateY(-3px) scale(1.02); }
.btn-outline {
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text-body); border: 1px solid var(--glass-border-h);
}
.btn-outline:hover { background: var(--glass-hover); color: var(--text-bright); transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-glow-t); }
.btn-ghost { background: transparent; color: var(--teal); padding: 14px 16px; }
.btn-ghost:hover { color: var(--text-bright); }
.btn-whatsapp { background: var(--whatsapp); color: var(--text-bright); }
.btn-whatsapp:hover { background: var(--whatsapp-h); color: var(--text-bright); transform: translateY(-3px); }


/* --- GLASS CARDS ------------------------------------------ */
.card {
  background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--glass-r);
  padding: var(--s-lg) var(--s-md); position: relative; overflow: hidden;
  box-shadow: var(--shadow-card); transition: all var(--t-med);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent 10%, rgba(255,255,255,0.10) 50%, transparent 90%);
  pointer-events: none;
}
.card:hover {
  background: var(--glass-hover); border-color: var(--glass-border-h);
  box-shadow: var(--shadow-lift), var(--shadow-glow-t);
  transform: translateY(-8px) scale(1.02);
}
.card-number {
  font: 700 3rem var(--f-head); color: var(--accent); opacity: 0.10;
  position: absolute; top: var(--s-sm); right: var(--s-md); line-height: 1; pointer-events: none;
}
.card-title { margin-bottom: var(--s-xs); }
.card-audience { margin-bottom: var(--s-sm); color: var(--teal); font-size: 0.625rem; opacity: 0.8; }
.card-text  { margin-bottom: var(--s-md); }
.card-link  { font: 500 0.8125rem var(--f-head); color: var(--teal); display: inline-flex; align-items: center; gap: var(--s-xs); min-height: 48px; }
.card-link:hover { color: var(--text-bright); }
.card-link::after { content: '\2192'; transition: transform var(--t-fast); }
.card:hover .card-link::after { transform: translateX(6px); }

/* Full-width banner card */
.card-full { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: var(--s-md); padding: var(--s-lg); }


/* --- DIVIDER ---------------------------------------------- */
.divider { width: 50%; max-width: 500px; height: 1px; background: linear-gradient(to right, transparent, var(--glass-border-h), transparent); border: none; margin: 0 auto; }


/* --- STATS ------------------------------------------------ */
.stats-section {
  background: var(--bg-recessed); position: relative; overflow: hidden;
  border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
}
.stats-section::before {
  content: ''; position: absolute; width: 800px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(90,154,138,0.06) 0%, transparent 70%);
  top: -150px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.stats-section::after { display: none; }
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 0; text-align: center; position: relative; z-index: 1; }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-xs); padding: var(--s-lg) var(--s-md); position: relative; }
.stat-item + .stat-item::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-border-h), transparent);
}


/* --- TESTIMONIAL ------------------------------------------ */
.testimonial-section { background: var(--bg-content); position: relative; overflow: hidden; }
.testimonial-section::before {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,48,80,0.06) 0%, transparent 70%);
  bottom: -200px; right: -100px; pointer-events: none;
}
.testimonial-section::after { display: none; }
.testimonial {
  background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-left: 3px solid var(--accent);
  border-radius: 0 var(--glass-r) var(--glass-r) 0;
  padding: var(--s-lg) var(--s-md);
  position: relative; box-shadow: var(--shadow-card);
}
.testimonial::before {
  content: '\201C'; position: absolute; top: -10px; left: var(--s-lg);
  font: 7rem var(--f-body); line-height: 1; color: var(--accent); opacity: 0.12; pointer-events: none;
}
.testimonial-text { margin-bottom: var(--s-md); position: relative; z-index: 1; }
.testimonial-meta { display: flex; align-items: center; gap: var(--s-sm); }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--text-bright);
  font: 600 0.75rem var(--f-head); display: flex; align-items: center; justify-content: center;
}
.testimonial-author { font: 500 0.875rem var(--f-head); color: var(--text-bright); }
.testimonial-role   { font: 400 0.8125rem var(--f-head); color: var(--text-muted); }
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-md); }
@media (min-width: 60em) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }


/* --- CTA -------------------------------------------------- */
.cta-section {
  background: var(--bg-cta); position: relative; overflow: hidden;
  border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
}
.cta-section::before {
  content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,48,80,0.10) 0%, transparent 60%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.cta-section::after { display: none; }
.cta-inner { text-align: center; max-width: 600px; margin-inline: auto; position: relative; z-index: 1; }
.cta-inner .type-section { margin-bottom: var(--s-sm); }
.cta-inner .type-body    { margin-bottom: var(--s-lg); }


/* --- FOOTER ----------------------------------------------- */
.site-footer { background: var(--bg-footer); border-top: 1px solid var(--glass-border); color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); }
.footer-heading { font: 600 0.75rem/1 var(--f-head); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-bright); margin-bottom: var(--s-sm); }
.footer-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.footer-link { display: flex; align-items: center; font-size: 0.875rem; color: var(--text-muted); padding-block: 4px; min-height: 44px; transition: color var(--t-fast); }
.footer-link:hover { color: var(--text-bright); }
.footer-bottom { border-top: 1px solid var(--glass-border); padding-top: var(--s-md); margin-top: var(--s-lg); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-sm); }
.footer-legal { font: 400 0.75rem var(--f-head); color: var(--text-muted); }
.footer-sra   { font: 400 0.6875rem var(--f-head); color: var(--text-muted); }


/* --- PAGE HEADER (inner pages) ---------------------------- */
.page-header {
  padding-top: calc(90px + var(--s-2xl)); padding-bottom: var(--s-xl);
  background: var(--bg-hero); color: var(--text-bright);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,154,138,0.12) 0%, transparent 70%);
  top: -200px; left: -100px; pointer-events: none;
}
.page-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-content)); pointer-events: none; z-index: 2;
}
.page-header .type-label { color: var(--text-label); margin-bottom: var(--s-sm); }
.page-header .type-hero  { margin-bottom: var(--s-md); max-width: 720px; }
.page-header .type-body-large { max-width: 640px; color: var(--text-body); }


/* --- CONTENT PROSE ---------------------------------------- */
.prose { max-width: var(--w-narrow); margin-inline: auto; }
.prose p + p { margin-top: var(--s-md); }
.prose h2 { margin-top: var(--s-xl); margin-bottom: var(--s-md); }
.prose h3 { margin-top: var(--s-lg); margin-bottom: var(--s-sm); }
.prose ul, .prose ol { padding-left: var(--s-md); margin-block: var(--s-sm); }
.prose li { margin-bottom: var(--s-xs); padding-left: var(--s-xs); }
.prose li::marker { color: var(--teal); }


/* --- CREDENTIALS ------------------------------------------ */
.credentials { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.credential-tag {
  font: 500 0.75rem var(--f-head); color: var(--teal);
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  padding: var(--s-xs) var(--s-sm); white-space: nowrap;
}


/* --- FORMS ------------------------------------------------ */
.form-group { margin-bottom: var(--s-md); }
.form-label { font: 500 0.8125rem var(--f-head); color: var(--text-bright); display: block; margin-bottom: var(--s-xs); }
.form-input, .form-textarea {
  width: 100%; font: 1rem var(--f-body); color: var(--text-bright);
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); border-radius: var(--r-sm);
  padding: 14px var(--s-sm); min-height: 48px; transition: border-color var(--t-fast);
}
.form-input:focus, .form-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(90,154,138,0.3); outline: none; }
.form-textarea { min-height: 160px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }


/* --- 404 -------------------------------------------------- */
.page-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 90px; background: var(--bg-content); }
.page-404-code { font: 600 clamp(4rem,10vw,8rem) var(--f-head); color: var(--text-label); line-height: 1; margin-bottom: var(--s-sm); }


/* --- SCROLL REVEAL ---------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.30s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.36s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.42s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.48s; }


/* --- SPACING UTILS ---------------------------------------- */
.mt-xs{margin-top:var(--s-xs)}.mt-sm{margin-top:var(--s-sm)}.mt-md{margin-top:var(--s-md)}.mt-lg{margin-top:var(--s-lg)}
.mb-xs{margin-bottom:var(--s-xs)}.mb-sm{margin-bottom:var(--s-sm)}.mb-md{margin-bottom:var(--s-md)}.mb-lg{margin-bottom:var(--s-lg)}


/* --- RESPONSIVE ------------------------------------------- */
@media (min-width: 40em) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item::before { top: 20%; left: 0; right: auto; width: 1px; height: 60%; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: start; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-item + .stat-item::before { top: 15%; height: 70%; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .card-full { grid-template-columns: 1fr 2fr; align-items: center; }
  .card-full .card-text { margin-bottom: 0; }
}

/* --- PRINT ------------------------------------------------ */
@media print {
  body { background: #fff; color: #111; }
  .site-nav, .site-footer, .accent-bar, .cta-section { display: none; }
  .card { border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; background: #f5f5f5; }
  a { color: #111; text-decoration: underline; }
  .section::before, .section::after { display: none; }
}


/* --- PROFILE STRIP ---------------------------------------- */
.profile-strip {
  background: var(--bg-recessed);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  position: relative; overflow: hidden;
}
.profile-strip::before {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,154,138,0.06) 0%, transparent 70%);
  top: -200px; left: -100px; pointer-events: none;
}
.profile-strip::after { display: none; }
.profile-photo {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--glass-border); margin: 0 auto var(--s-md);
  box-shadow: var(--shadow-card);
}
.profile-inner {
  display: grid; grid-template-columns: 1fr; gap: var(--s-lg);
  text-align: center; position: relative; z-index: 1;
}
.profile-bio { max-width: 640px; margin-inline: auto; }
.profile-name { font: 500 1.25rem var(--f-head); color: var(--text-bright); margin-bottom: var(--s-xs); }
.profile-title { font: 400 0.875rem var(--f-head); color: var(--teal); margin-bottom: var(--s-md); }
.profile-text { margin-bottom: var(--s-md); }
.profile-credentials { display: flex; flex-wrap: wrap; gap: var(--s-xs); justify-content: center; }


/* --- TAGLINE ---------------------------------------------- */
.hero-tagline {
  font: 500 0.8125rem var(--f-head);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--teal); margin-top: var(--s-lg);
  opacity: 0.9;
}
.mb-2xl{margin-bottom:var(--s-2xl)}


/* --- ARABIC / RTL ----------------------------------------- */
/* Arabic body & heading typography. Tajawal + Noto Naskh Arabic
   cover headings and prose at C2-legal quality.
   Letter-spacing is reset because Arabic shaping does not use it. */
[lang="ar"] {
  font-family: var(--f-body-ar);
  letter-spacing: 0 !important;
}
[lang="ar"] .type-hero,
[lang="ar"] .type-section,
[lang="ar"] .type-subsection,
[lang="ar"] .type-card-title,
[lang="ar"] .type-label,
[lang="ar"] .type-nav,
[lang="ar"] .type-stat,
[lang="ar"] .footer-heading,
[lang="ar"] .nav-link,
[lang="ar"] .nav-lang-btn,
[lang="ar"] .nav-mobile a,
[lang="ar"] .btn,
[lang="ar"] .credential-tag,
[lang="ar"] .form-label,
[lang="ar"] .hero-tagline {
  font-family: var(--f-head-ar);
}
[lang="ar"] .type-body,
[lang="ar"] .type-body-large,
[lang="ar"] .type-small,
[lang="ar"] .type-quote,
[lang="ar"] .footer-text,
[lang="ar"] .form-input,
[lang="ar"] .form-textarea {
  font-family: var(--f-body-ar);
}
/* Arabic does not idiomatically use uppercase or wide tracking — strip both. */
[lang="ar"] .type-label,
[lang="ar"] .type-nav,
[lang="ar"] .nav-lang-btn,
[lang="ar"] .footer-heading,
[lang="ar"] .footer-sra,
[lang="ar"] .footer-legal,
[lang="ar"] .hero-tagline {
  text-transform: none;
  letter-spacing: 0;
}
/* Italic quote face — Arabic does not have italic; use a slightly heavier weight instead. */
[lang="ar"] .type-quote {
  font-style: normal;
  font-weight: 500;
}

/* RTL directional overrides — only where the LTR rule uses left/right
   instead of inline-start/inline-end. Decorative orbs/glows are left
   alone (they're symmetric enough that flipping adds nothing). */
[dir="rtl"] .skip-link { left: auto; right: var(--s-sm); }
[dir="rtl"] .hero-label {
  padding-left: 0; padding-right: var(--s-sm);
  border-left: none; border-right: 3px solid var(--accent);
}
[dir="rtl"] .testimonial {
  border-left: none; border-right: 3px solid var(--accent);
  border-radius: var(--glass-r) 0 0 var(--glass-r);
}
[dir="rtl"] .testimonial::before { left: auto; right: var(--s-lg); }
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol { padding-left: 0; padding-right: var(--s-md); }
[dir="rtl"] .prose li { padding-left: 0; padding-right: var(--s-xs); }
[dir="rtl"] .card-number { right: auto; left: var(--s-md); }
[dir="rtl"] .card-link::after { content: '\2190'; }
[dir="rtl"] .card:hover .card-link::after { transform: translateX(-6px); }