/* ============================================================
   Jabbour Law Firm — Design tokens
   ============================================================ */
:root {
  --navy: #132139;
  --navy-deep: #0b1526;
  --navy-soft: #1c2d4a;
  --ivory: #f6f4ee;
  --paper: #ffffff;
  --ink: #1b2130;
  --muted: #6b7280;
  --muted-light: #9aa1ad;
  --brass: #a9822f;
  --brass-light: #cfa74f;
  --line: #e6e2d6;
  --line-dark: rgba(255, 255, 255, 0.14);

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 2px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  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 0.5em;
  color: var(--navy);
}

p { margin: 0 0 1.1em; }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass);
}
.eyebrow--plain::before { content: none; }

.mini-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 16px;
}
.credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.credentials-grid .detail-list li { font-size: 15px; }

.section {
  padding: 96px 0;
}
.section--tight { padding: 64px 0; }
.section--navy {
  background: var(--navy);
  color: rgba(255,255,255,0.86);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--ivory { background: var(--ivory); }

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 620px;
}
.section--navy .lede { color: rgba(255,255,255,0.72); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brass);
  color: #fff;
}
.btn-primary:hover { background: var(--brass-light); }
.btn-outline {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-outline-dark {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline-dark:hover { background: var(--navy); color: #fff; }
.btn-arrow { transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
.brand img { height: 34px; width: auto; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.nav-desktop a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.nav-desktop a:hover, .nav-desktop > a.is-active { color: #fff; }
.nav-desktop > a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brass);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-lang {
  display: flex;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
.nav-lang a {
  color: inherit; font-size: inherit;
  cursor: pointer; padding: 2px 4px; font-family: var(--font-body);
  text-decoration: none;
}
.nav-lang a.is-active { color: #fff; font-weight: 700; }
.nav-lang a:hover { color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px; height: 2px; background: #fff; display: block;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--navy-deep);
  padding: 8px 32px 28px;
}
.nav-mobile a {
  color: rgba(255,255,255,0.85);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 15px;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile > a.is-active { color: var(--brass-light); font-weight: 600; }

/* ---- Desktop dropdown ---- */
.has-dropdown {
  position: relative;
  /* Extend the interactive box all the way down to (and slightly past)
     the top of the dropdown-panel with padding rather than margin, so
     there is no dead pixel gap between trigger and panel for the mouse
     to cross (the old translateY(6px) offset created exactly that gap,
     which is what caused the dropdown to close before the pointer
     reached the links). The panel is pulled back up over that padding
     with a negative margin so nothing shifts visually. */
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.has-dropdown > .nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; padding: 6px 0;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.has-dropdown > .nav-trigger:hover,
.has-dropdown > .nav-trigger:focus-visible { color: #fff; }
.has-dropdown.is-active > .nav-trigger,
.has-dropdown.is-open > .nav-trigger { color: #fff; }
.has-dropdown .chev { width: 9px; height: 9px; transition: transform 0.18s ease; stroke: currentColor; }
.has-dropdown:hover .chev, .has-dropdown.is-open .chev { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 18px; /* matches .has-dropdown's padding-bottom: visual gap without a hover dead-zone */
  width: 600px;
  background: var(--paper);
  box-shadow: 0 22px 48px rgba(11,21,38,0.22);
  border-top: 2px solid var(--brass);
  padding: 28px;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 28px;
  z-index: 150;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel,
.has-dropdown.is-open .dropdown-panel { display: grid; }
.dropdown-panel a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 6px;
  font-size: 13.5px; color: var(--navy);
  border-radius: 2px;
  min-width: 0;
  white-space: normal;
}
.dropdown-panel a:hover,
.dropdown-panel a:focus-visible { background: var(--ivory); color: var(--brass); }
.dropdown-panel a.is-active {
  background: var(--ivory);
  color: var(--brass);
  font-weight: 600;
}
.dropdown-panel a .di {
  font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--brass); min-width: 16px;
}
.dropdown-panel .dropdown-all {
  grid-column: 1 / -1;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 600; color: var(--brass);
}

/* ---- Focus-visible states (keyboard navigation), site-wide ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.filter-pill:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline-color: var(--brass-light);
  border-radius: 2px;
}
.site-footer a:focus-visible { outline-color: var(--brass-light); }

/* ---- Mobile accordion ---- */
.mobile-group .mobile-group-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.85); font: inherit;
  padding: 13px 0; border-bottom: 1px solid var(--line-dark);
}
.mobile-group .chev { width: 9px; height: 9px; transition: transform 0.18s ease; }
.mobile-group.is-open .chev { transform: rotate(180deg); }
.mobile-submenu {
  display: none;
  flex-direction: column;
  padding: 4px 0 8px 14px;
}
.mobile-group.is-open .mobile-submenu { display: flex; }
.mobile-submenu a {
  border-bottom: none;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.mobile-submenu a.is-active { color: var(--brass-light); font-weight: 600; }
.mobile-group.is-active > .mobile-group-trigger { color: #fff; }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,21,38,0.82) 0%, rgba(11,21,38,0.55) 32%, rgba(19,33,57,0.45) 60%, rgba(11,21,38,0.92) 100%),
    linear-gradient(90deg, rgba(11,21,38,0.55) 0%, rgba(11,21,38,0.05) 45%, rgba(11,21,38,0.15) 100%);
}
.hero .container {
  position: relative;
  z-index: 1;
  padding-top: 100px;
  padding-bottom: 210px;
}
.hero-copy { max-width: 700px; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-copy h1 em {
  font-style: italic;
  color: var(--brass-light);
}
.hero-copy .lede { color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 34px; text-shadow: 0 1px 12px rgba(0,0,0,0.3); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-dark);
  background: rgba(11,21,38,0.55);
}
.hero-stats .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-top: 0; padding-bottom: 0;
}
.hero-stat {
  padding: 30px 24px;
  border-right: 1px solid var(--line-dark);
}
.hero-stat:last-child { border-right: none; }
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--brass-light);
  display: block;
}
.hero-stat .label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ---- Trust strip (regulator / recognition marks) ---- */
.trust-strip {
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}
.trust-strip-label {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 0 0 18px;
}
.trust-strip-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 44px;
}
.trust-mark {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-light);
  opacity: 0.8;
  white-space: nowrap;
}

/* Page header (non-home hero) */
.page-header {
  background: var(--navy);
  color: #fff;
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-header h1 { color: #fff; font-size: clamp(32px, 4vw, 46px); font-weight: 400; }
.page-header .lede { max-width: 640px; }
.page-header--marked { padding-bottom: 72px; }
.page-header--photo {
  padding: 100px 0 80px;
}
.page-header-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.page-header-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.page-header-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,21,38,0.86) 0%, rgba(19,33,57,0.62) 45%, rgba(11,21,38,0.9) 100%);
}
.page-header--photo .container {
  position: relative;
  z-index: 1;
}
.page-header-mark {
  position: absolute;
  top: 50%; right: 6%;
  width: 340px;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.page-header--marked .container { position: relative; z-index: 1; }
.breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: #fff; }

/* ============================================================
   Grids: practices / solutions / cards
   ============================================================ */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  padding: 40px 36px;
  transition: background 0.2s ease;
}
.card:hover { background: var(--ivory); }
.card .card-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
  font-size: 15px;
  margin-bottom: 18px;
  display: block;
}
.card h3 { font-size: 21px; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.card-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-link .arrow { transition: transform 0.2s ease; }
.card:hover .card-link .arrow { transform: translateX(3px); }

/* Practice / solution detail sections (anchored) */
.detail-block {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  scroll-margin-top: 100px;
}
.detail-block:last-child { border-bottom: none; }
.detail-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--brass);
}
.detail-block h2 { font-size: 27px; margin-top: 6px; }
.detail-body p { color: var(--muted-light); color: #4b5261; font-size: 16.5px; }
.detail-list {
  list-style: none;
  padding: 0; margin: 18px 0 0;
  display: grid;
  gap: 8px;
}
.detail-list li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  color: var(--muted);
}
.detail-list li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--brass);
}

/* ============================================================
   Stat / trust band, quote, split sections
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split-media {
  background: var(--ivory);
  overflow: hidden;
  position: relative;
}
.split-media img { width: 100%; height: auto; display: block; }

.quote-block {
  border-left: 3px solid var(--brass);
  padding-left: 28px;
  margin: 28px 0;
}
.quote-block p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 10px;
}
.quote-block cite {
  font-style: normal;
  font-size: 13.5px;
  color: var(--muted);
}

.offices-table {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}
.office-card {
  background: var(--paper);
  padding: 34px 30px;
}
.office-card .office-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-bottom: 10px; display:block;
}
.office-card h3 { font-size: 20px; margin-bottom: 14px; }
.office-card p { font-size: 14.5px; color: var(--muted); margin-bottom: 6px; }

/* ============================================================
   News
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.news-card { display: flex; flex-direction: column; }
.news-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
.news-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(169,130,47,0.35), transparent 60%);
}
.news-thumb-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 78px;
  z-index: 1;
}
.news-featured .news-thumb-icon { max-width: 108px; }
.news-thumb-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.news-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.35); padding: 6px 10px;
}
.news-meta { font-size: 12.5px; color: var(--muted-light); margin-bottom: 8px; }
.news-card h3 { font-size: 19px; margin-bottom: 10px; }
.news-card p { color: var(--muted); font-size: 14.5px; }

/* Homepage News article excerpt — max 3 lines */
.home-news-excerpt {
  line-height: 1.6;
  min-height: 4.8em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card .card-link { margin-top: auto; }

.news-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.news-featured .news-thumb { aspect-ratio: 4/3; margin: 0; }

.filter-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 48px;
}
.filter-pill {
  font: inherit; font-size: 13px; padding: 9px 18px;
  border: 1px solid var(--line); border-radius: 0; line-height: normal;
  color: var(--muted); cursor: pointer; background: var(--paper);
  -webkit-appearance: none; appearance: none;
}
.filter-pill.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Article page */
.article-head { max-width: 760px; margin: 0 auto; }
.article-body { max-width: 760px; margin: 48px auto 0; font-size: 17px; }
.article-body h2 { font-size: 24px; margin-top: 44px; }
.article-body p { color: #333a47; }
.article-body ul { padding-left: 22px; color: #333a47; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--navy);
}

.form-row-2 .form-row label {
  min-height: 42px;
  display: flex;
  align-items: flex-end;
}


.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 15px; font-size: 15px;
  border: 1px solid var(--line); font-family: var(--font-body);
  background: var(--ivory); color: var(--ink);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Honeypot field: visually hidden the standard, direction-safe way
   (clipped to a 1px box in normal flow) rather than pushed off-canvas
   with a huge negative offset. The old "left: -9999px" approach added
   9999px+ to document.documentElement.scrollWidth on RTL pages
   specifically (Chromium measures the box's far edge from the RTL
   scroll origin), causing real horizontal-scroll on every Arabic page
   that includes a form — found via a responsive/RTL Playwright sweep
   across 320-1440px. This pattern has none of that: it participates
   in normal flow at essentially zero size, so it can't push the
   layout wider in either direction. */
.hp-field {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.form-status { margin-top: 16px; font-size: 14px; font-weight: 600; min-height: 20px; }
.form-status.is-success { color: #2e7d4f; }
.form-status.is-error { color: #b3261e; }

/* ============================================================
   FAQ accordion (native <details>/<summary> — keyboard and
   screen-reader accessible with no extra JS or ARIA wiring needed)
   ============================================================ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 30px 22px 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy);
  position: relative;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 2px; top: 18px;
  font-size: 22px;
  color: var(--brass);
  font-family: var(--font-body);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.faq-item .faq-answer {
  padding: 0 30px 24px 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 700px;
}
[dir="rtl"] .faq-item summary { padding: 22px 0 22px 30px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 2px; }
[dir="rtl"] .faq-item .faq-answer { padding: 0 0 24px 30px; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  background: var(--navy);
  color: #fff;
  padding: 72px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band .lede { margin: 0 auto 30px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.6);
  padding: 72px 0 28px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand img { height: 30px; margin-bottom: 18px; }
.footer-brand p { color: rgba(255,255,255,0.5); font-size: 14px; max-width: 280px; }
.footer-col h4, .footer-office h4 {
  color: #fff; font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-col a, .footer-col p {
  display: block; color: rgba(255,255,255,0.55); margin-bottom: 11px; font-size: 14.5px;
}
.footer-col a:hover { color: #fff; }
.footer-offices {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.footer-office a, .footer-office p {
  display: block; color: rgba(255,255,255,0.55); margin-bottom: 9px; font-size: 14px;
}
.footer-office a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; font-size: 13px; color: rgba(255,255,255,0.4);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.4); }
.footer-bottom a:hover { color: #fff; }

/* ---- WhatsApp floating widget ---- */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11,21,38,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: transform 0.2s ease;
}
.whatsapp-fab svg { width: 42px; height: 42px; }
.whatsapp-fab:hover { transform: scale(1.08); }
@media (max-width: 720px) {
  .whatsapp-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 38px; height: 38px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero .container { padding-top: 100px; padding-bottom: 180px; }
  .hero-stats .container { grid-template-columns: repeat(3, 1fr); }
  .hero-stat:nth-child(3n) { border-right: none; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-featured { grid-template-columns: 1fr; }
  .offices-table { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-offices { grid-template-columns: 1fr; gap: 24px; }
  .detail-block { grid-template-columns: 1fr; gap: 14px; }
  .credentials-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Switch to the mobile menu earlier than 720px: the full desktop nav
   (logo + 5 links + language switcher + CTA button) genuinely needs
   about 1024px of room to fit on one line without overflowing. Below
   that — including in-between widths like tablets and foldables in
   landscape — show the hamburger menu instead. */
@media (max-width: 1024px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-outline { display: none; }
}
@media (max-width: 720px) {
  .hero .container { padding-top: 96px; padding-bottom: 160px; }
  .section { padding: 64px 0; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-offices { grid-template-columns: 1fr; }
  .hero-stat { padding: 22px 16px; }
  .hero-stat .num { font-size: 26px; }
  /* .btn's white-space: nowrap (needed on desktop to keep the label
     and arrow icon on one line) let a longer translated CTA label —
     e.g. French "Voir les dix domaines d'expertise" — push past the
     320-375px viewport edge and cause real horizontal page scroll.
     Below 480px only, let button text wrap instead. */
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ============================================================
   RTL (Arabic) support
   ============================================================ */
[dir="rtl"] {
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;
}
[dir="rtl"] body { letter-spacing: 0; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .btn-arrow,
[dir="rtl"] .arrow,
[dir="rtl"] .card-link .arrow,
[dir="rtl"] .chev { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .quote-block {
  border-left: none;
  border-right: 3px solid var(--brass);
  padding-left: 0;
  padding-right: 28px;
}
[dir="rtl"] .detail-list li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .detail-list li::before { left: auto; right: 0; }
[dir="rtl"] .hero-stat,
[dir="rtl"] .office-card,
[dir="rtl"] .card {
  border-right: none;
}
[dir="rtl"] .hero-stat { border-inline-end: 1px solid var(--line-dark); border-right: none !important; }
[dir="rtl"] .hero-stat:last-child { border-inline-end: none; }
[dir="rtl"] .card-num { direction: ltr; display: inline-block; }
[dir="rtl"] .detail-index { direction: ltr; display: inline-block; }
[dir="rtl"] .nav-lang { direction: ltr; }
[dir="rtl"] .footer-bottom { direction: rtl; }
[dir="rtl"] .form-row label { text-align: right; }
[dir="rtl"] .breadcrumb { direction: rtl; }
[dir="rtl"] .whatsapp-fab { right: auto; left: 24px; }
[dir="rtl"] .dropdown-panel { left: auto; right: 0; }
@media (max-width: 720px) {
  [dir="rtl"] .whatsapp-fab { left: 16px; }
}

/* ============================================================
   Motion (page-load fade + scroll in/out reveal)
   Controlled by the ANIMATIONS_ENABLED flag at the top of main.js.
   Content stays fully visible by default; the "motion-on" class is
   only added by JS when the toggle is on and the visitor hasn't
   asked their system for reduced motion, so this is purely additive.
   ============================================================ */
body.motion-on { opacity: 0; }
body.motion-on.page-in {
  opacity: 1;
  transition: opacity 0.5s ease;
}
body.motion-on .reveal-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.motion-on .reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on { opacity: 1; }
  body.motion-on .reveal-section { opacity: 1; transform: none; transition: none; }
}