/* =============================================================================
   OnTime Legal Translation — Site styles (v4: reference-led layout)
   Light canvas, pill labels, two-tone headlines, floating card compositions,
   tinted panels, sticky-label scroll section, Venn audiences, numbered rows.
   Primary: logo blue #203070. Secondary: teal. Logical properties for RTL.
   ========================================================================== */

:root {
  --blue-950: #0e1633; --blue-900: #16214f; --blue: #203070; --blue-600: #2b3f8e; --blue-500: #3a52ad;
  --blue-100: #e4e9f5; --blue-50: #f1f4fa;
  --teal: #0f9aa8; --teal-600: #0c7f8b; --teal-100: #e2f3f5; --teal-50: #f0f9fa; --teal-bright: #22c3d2;
  --accent: #4b74d6;
  --canvas: #f6f8fa; --white: #fff; --ink: #141a2e; --ink-2: #4b5367; --muted: #707892; --line: #e3e7ee; --line-dark: rgba(255,255,255,0.14);
  --tint-teal: #e4f4f3; --tint-blue: #e6edf9; --tint-rose: #f8e9e8; --tint-sand: #f4efe6;
  --success: #1f7a4d; --danger: #b93a32; --warn-bg: #fff8e6; --warn-ink: #7a5200; --wa: #25a35a;
  --font-display: "Plus Jakarta Sans", "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --container: 1180px; --gutter: clamp(16px, 4vw, 40px); --section: clamp(4rem, 8vw, 7rem);
  --r: 10px; --r-lg: 16px; --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(20,26,46,0.04), 0 4px 12px -4px rgba(20,26,46,0.08);
  --shadow: 0 2px 6px rgba(20,26,46,0.04), 0 16px 40px -16px rgba(20,26,46,0.18);
  --shadow-lg: 0 10px 20px -10px rgba(20,26,46,0.15), 0 30px 60px -24px rgba(20,26,46,0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 350ms; --fast: 180ms; --header-h: 76px; --topbar-h: 0px;
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html[lang="ar"] body { font-family: "Tajawal", var(--font-body); font-size: 1.06rem; line-height: 1.85; }
img, svg, picture { display: block; max-width: 100%; } img { height: auto; }
.media picture, .branch__media picture, .status-page__bg picture, .hero-card__img picture, .banner__media picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; } address { font-style: normal; }
:focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--teal-100); color: var(--blue-900); }
bdi, [dir="ltr"] { unicode-bidi: isolate; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -100px; z-index: 1000; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.2em; height: 1.2em; flex: none; }
[dir="rtl"] .icon-arrow, [dir="rtl"] .icon-external { transform: scaleX(-1); }

/* ---------- Typography ---------------------------------------------------- */
.h1, .h2, .h3, .h4, .hero__title, .banner__title, .stat__value { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3, html[lang="ar"] .h4, html[lang="ar"] .hero__title, html[lang="ar"] .banner__title, html[lang="ar"] .stat__value { font-family: "Cairo", var(--font-display); letter-spacing: 0; line-height: 1.4; }
.h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); }
.h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.h4 { font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.hl { color: var(--teal); }
.lead { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.pill .icon { width: 14px; height: 14px; color: var(--teal); }
html[lang="ar"] .pill { font-family: "Cairo", sans-serif; font-size: 0.88rem; padding: 6px 9px 6px 12px; }
.pill--light { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.pill--light .icon { color: var(--teal-bright); }
.on-dark { color: #fff; } .on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: #fff; } .on-dark .lead, .on-dark p { color: rgba(255,255,255,0.82); }
.muted { color: var(--muted); }
.link-inline { color: var(--blue-500); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(58,82,173,0.35); text-underline-offset: 3px; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); font-size: 0.92rem; }
.link-more .icon { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.link-more:hover .icon { transform: translateX(4px); } [dir="rtl"] .link-more:hover .icon { transform: translateX(-4px) scaleX(-1); }
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .lead { margin-top: 0.8rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 0.6rem; }
html[lang="ar"] .eyebrow { font-family: "Cairo", sans-serif; letter-spacing: 0; font-size: 0.9rem; }
.eyebrow--light { color: var(--teal-bright); }

/* Uniform photo frames: every section photo fills the same box (cover crop, tuned focal points) */
img.ph-meeting { object-position: 50% 32%; }
img.ph-stamp { object-position: 50% 58%; }
img.ph-handover { object-position: 50% 45%; }
img.ph-mazaya { object-position: 50% 38%; }
img.ph-oudmetha { object-position: 50% 50%; }
img.ph-office { object-position: 50% 45%; }
img.ph-docs { object-position: 50% 92%; }
.media:has(img.ph-team) { aspect-ratio: 9 / 4; } /* shown whole at its own proportions */
img.ph-langs { object-position: 50% 55%; } /* the supplied artwork is centred in the 4:3 frame */

/* ---------- Layout -------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; overflow-x: clip; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--white { background: #fff; }
.section--blue { background: var(--blue-900); color: #fff; }
.section--dark { background: var(--blue-950); color: #fff; }
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--start { align-items: start; } .split--label { grid-template-columns: 4fr 8fr; } }
.media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media:hover img { transform: scale(1.04); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.label-col { position: sticky; top: calc(var(--header-h) + 24px); }

/* ---------- Buttons (pill) ------------------------------------------------ */
.btn { --bg: var(--blue); --fg: #fff; --bd: var(--blue); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1.2; position: relative; overflow: hidden; transition: background-color var(--fast), color var(--fast), border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
html[lang="ar"] .btn { font-family: "Cairo", sans-serif; font-size: 1rem; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%); transform: translateX(-130%); transition: transform 600ms var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(32,48,112,0.55); }
.btn--primary:hover { --bg: var(--blue-500); --bd: var(--blue-500); }
.btn--teal { --bg: var(--teal); --bd: var(--teal); } .btn--teal:hover { --bg: var(--teal-600); --bd: var(--teal-600); }
.btn--white { --bg: #fff; --fg: var(--blue); --bd: #fff; } .btn--white:hover { --bg: var(--blue-50); }
.btn--outline { --bg: #fff; --fg: var(--blue); --bd: #cdd4e2; } .btn--outline:hover { --bd: var(--blue); --bg: var(--blue-50); }
.btn--outline-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,0.5); } .btn--outline-light:hover { --bd: #fff; --bg: rgba(255,255,255,0.1); }
.btn--wa { --bg: var(--wa); --bd: var(--wa); } .btn--wa:hover { --bg: #1f8f4e; --bd: #1f8f4e; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.86rem; } .btn--lg { min-height: 52px; padding: 0 28px; font-size: 0.98rem; } .btn--block { width: 100%; }
.btn .icon { width: 18px; height: 18px; }
.btn[disabled], .btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 800ms linear infinite; display: none; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--blue-900); transition: background-color var(--fast); }
.icon-btn:hover { background: var(--blue-50); } .icon-btn .icon { width: 22px; height: 22px; }

/* ---------- Header -------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); transition: box-shadow var(--dur) var(--ease); }
/* The blur sits on the navbar, not the header: a backdrop-filter on the header would become the containing block for the fixed mobile menu */
.navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(22,33,79,0.3); }
.navbar { border-bottom: 1px solid var(--line); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); transition: height var(--dur) var(--ease); }
.site-header.is-scrolled .navbar__inner { height: 66px; }
.logo { display: inline-flex; align-items: center; }
.logo__img { height: 56px; width: auto; transition: height var(--dur) var(--ease); }
.site-header.is-scrolled .logo__img { height: 48px; }
@media (max-width: 480px) { .logo__img { height: 44px; } }
.nav { display: none; }
@media (min-width: 1024px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__list > li { position: relative; display: flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 12px; font-family: var(--font-display); font-weight: 600; font-size: 0.93rem; color: var(--ink); position: relative; transition: color var(--fast); }
html[lang="ar"] .nav__link { font-family: "Cairo", sans-serif; font-size: 1rem; }
.nav__link::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: var(--o, left); transition: transform var(--dur) var(--ease-out); }
[dir="rtl"] .nav__link::after { --o: right; }
.nav__link:hover, .nav__link.is-active { color: var(--blue); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__caret { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; margin-inline-start: -10px; border-radius: 4px; color: var(--muted); }
.nav__caret .icon { width: 16px; height: 16px; transition: transform var(--fast); }
.nav__item--dropdown.is-open .nav__caret .icon, .nav__item--dropdown:hover .nav__caret .icon { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility 0s linear var(--fast); }
.dropdown::before { content: ""; position: absolute; top: -10px; inset-inline: 0; height: 10px; }
.nav__item--dropdown:hover .dropdown, .nav__item--dropdown.is-open .dropdown, .nav__item--dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); font-size: 0.93rem; font-weight: 500; color: var(--ink); transition: background-color var(--fast), color var(--fast); }
.dropdown__link:hover { background: var(--blue-50); color: var(--blue); }
.dropdown__ico { width: 32px; height: 32px; border-radius: 6px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; flex: none; }
.dropdown__ico .icon { width: 16px; height: 16px; }
.dropdown__link > .icon-arrow { display: none; }
.dropdown__all { display: flex; align-items: center; gap: 8px; margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 0.88rem; font-weight: 700; color: var(--blue); }
.dropdown__all .icon { width: 16px; height: 16px; }
.navbar__actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; color: var(--blue-900); transition: border-color var(--fast), background-color var(--fast); }
.lang-switch:hover { border-color: var(--blue); background: var(--blue-50); }
.lang-switch .icon { width: 16px; height: 16px; color: var(--blue); }
.lang-switch[lang="ar"] .lang-switch__label { font-family: "Cairo", sans-serif; }
.navbar__cta { display: none; white-space: nowrap; } @media (min-width: 1024px) { .navbar__cta { display: inline-flex; } }
.navbar__location { display: none; } @media (min-width: 1360px) { .navbar__location { display: inline-flex; } }
/* Phone icon in the main navbar (symbol only; the number is in the aria-label and tel: link) */
.navbar__phone { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--blue-900); transition: background-color var(--fast), color var(--fast); }
.navbar__phone .icon { width: 22px; height: 22px; }
.navbar__phone:hover { background: var(--blue-50); color: var(--blue); }
.navbar__phone-num { display: none; }
.nav-toggle { display: inline-flex; } @media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }
@media (max-width: 480px) { .lang-switch__label { display: none; } .lang-switch { padding: 8px 10px; } }
.mobile-menu { position: fixed; inset: 0; top: var(--header-h); z-index: 99; background: rgba(14,22,51,0.4); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 100%); background: #fff; overflow-y: auto; padding: 16px var(--gutter) 32px; box-shadow: var(--shadow-lg); animation: slideIn 300ms var(--ease-out) both; }
@keyframes slideIn { from { transform: translateX(var(--slide, 30px)); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .mobile-menu__panel { --slide: -30px; }
.mobile-menu__list > li { border-bottom: 1px solid var(--line); }
.mobile-menu__list > li > a { display: block; padding: 15px 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--blue-900); }
html[lang="ar"] .mobile-menu__list > li > a { font-family: "Cairo", sans-serif; }
.mobile-menu__list > li > a[aria-current] { color: var(--blue-500); }
.mobile-menu__group { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.mobile-menu__toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); }
.mobile-menu__toggle .icon { transition: transform var(--fast); }
.mobile-menu__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-menu__sub { grid-column: 1 / -1; padding: 0 0 10px; }
.mobile-menu__sub[hidden] { display: none; }
.mobile-menu__sub a { display: block; padding: 9px 12px; color: var(--ink-2); border-radius: 6px; }
.mobile-menu__sub a:hover { background: var(--blue-50); color: var(--blue); }
.mobile-menu__actions { display: grid; gap: 10px; margin-top: 20px; }
.mobile-menu__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-menu__lang { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 12px; color: var(--blue); font-weight: 700; }


/* ---------- Hero (light, floating cards) ---------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--canvas); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% 20%, rgba(15,154,168,0.10), transparent 60%), radial-gradient(700px 400px at 10% 90%, rgba(32,48,112,0.06), transparent 60%); pointer-events: none; }
.hero__inner { position: relative; display: grid; gap: 3rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
@media (min-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 580px; } }
.hero__title { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.hero__text { margin-top: 1.1rem; max-width: 520px; color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.12rem); }
.hero__actions { margin-top: 1.8rem; }
.hero__actions .btn { white-space: nowrap; }
@media (max-width: 480px) { .hero__actions { flex-wrap: nowrap; } .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 0.86rem; } .hero__actions .btn .icon-arrow { display: none; } }
.hero__trust { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.8rem; font-weight: 700; color: var(--ink-2); font-family: var(--font-display); }
html[lang="ar"] .hero__trust li { font-family: "Cairo", sans-serif; font-size: 0.9rem; }
.hero__trust .icon { width: 14px; height: 14px; color: var(--teal); }
.hero__content > * { opacity: 0; transform: translateY(14px); animation: fadeUp 700ms var(--ease-out) forwards; }
.hero__content > :nth-child(1) { animation-delay: 80ms; } .hero__content > :nth-child(2) { animation-delay: 160ms; } .hero__content > :nth-child(3) { animation-delay: 280ms; } .hero__content > :nth-child(4) { animation-delay: 400ms; } .hero__content > :nth-child(5) { animation-delay: 520ms; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .w > span { display: inline-block; transform: translateY(110%); animation: wordUp 800ms var(--ease-out) forwards; animation-delay: calc(200ms + var(--wi, 0) * 60ms); }
.hero__title { animation: none; opacity: 1; transform: none; }
@keyframes wordUp { to { transform: none; } } @keyframes fadeUp { to { opacity: 1; transform: none; } }

.stage { position: relative; height: clamp(360px, 44vw, 520px); }
.stage__tile { position: absolute; inset: 6% 0 8% 14%; border-radius: var(--r-xl); background: var(--tint-teal); background-image: radial-gradient(rgba(15,154,168,0.35) 1.2px, transparent 1.3px); background-size: 14px 14px; opacity: 0; transform: scale(0.94); animation: tileIn 900ms var(--ease-out) 300ms forwards; }
[dir="rtl"] .stage__tile { inset: 6% 14% 8% 0; }
@keyframes tileIn { to { opacity: 1; transform: none; } }
.hero-card { position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid rgba(20,26,46,0.06); opacity: 0; transform: translateY(26px) scale(0.96); animation: cardIn 800ms var(--ease-out) forwards; }
.hero-card:nth-of-type(2) { animation-delay: 500ms; } .hero-card:nth-of-type(3) { animation-delay: 680ms; } .hero-card:nth-of-type(4) { animation-delay: 860ms; } .hero-card:nth-of-type(5) { animation-delay: 1040ms; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.hero-card--img { inset-inline-start: 0; top: 4%; width: 58%; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; }
.hero-card--img img { width: 100%; height: 100%; object-fit: cover; }
/* Hero photo slideshow (pure CSS, 14s cycle): office photo ~5s, stamp photo ~8s with 1s cross-fades */
.hero-slides { isolation: isolate; }
.hero-slide { position: absolute; inset: 0; }
.hero-slide picture, .hero-slide img { width: 100%; height: 100%; display: block; }
.hero-slide--1 { animation: heroSlideA 14s ease-in-out infinite; }
.hero-slide--2 { opacity: 0; animation: heroSlideB 14s ease-in-out infinite; }
.hero-slide--1 img { animation: heroZoom 14s ease-in-out infinite; }
.hero-slide--2 img { animation: heroZoom2 14s ease-in-out infinite; }
@keyframes heroSlideA { 0%, 32% { opacity: 1; } 39%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroSlideB { 0%, 32% { opacity: 0; } 39%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes heroZoom { 0% { transform: scale(1); } 36% { transform: scale(1.05); } 93% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes heroZoom2 { 0%, 32% { transform: scale(1.06); } 39% { transform: scale(1); } 93% { transform: scale(1.06); } 100% { transform: scale(1.06); } }
img.ph-hero2 { object-position: 72% 50%; }
.hero-card--chip { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; }
[dir="rtl"] .hero-card--chip { padding: 12px 12px 12px 16px; }
.hero-card__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.hero-card__ico .icon { width: 18px; height: 18px; }
.hero-card__t { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); line-height: 1.2; }
html[lang="ar"] .hero-card__t { font-family: "Cairo", sans-serif; }
.hero-card__s { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.hero-card--a { inset-inline-end: 0; top: 10%; } .hero-card--b { inset-inline-end: 0; top: 46%; } .hero-card--c { inset-inline-start: 30%; bottom: 0; }
.hero-card--a.is-floating { animation: cardIn 800ms var(--ease-out) 500ms forwards, floatA 7s ease-in-out 1.4s infinite; }
.hero-card--b.is-floating { animation: cardIn 800ms var(--ease-out) 680ms forwards, floatB 8s ease-in-out 1.6s infinite; }
.hero-card--c.is-floating { animation: cardIn 800ms var(--ease-out) 860ms forwards, floatA 9s ease-in-out 1.8s infinite; }
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (max-width: 599px) { .hero-card--chip { padding: 9px 12px 9px 9px; } .hero-card__ico { width: 32px; height: 32px; } .hero-card__t { font-size: 0.82rem; } .hero-card__s { display: none; } }

/* ---------- Label + stat cards (figures) ---------------------------------- */
.figures { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.figure { padding: 1.4rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.figure:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.figure__ico { width: 46px; height: 46px; border-radius: 12px; background: var(--tint-teal); color: var(--teal-600); display: grid; place-items: center; }
.figure__ico .icon { width: 22px; height: 22px; }
.figure:nth-child(2) .figure__ico { background: var(--tint-blue); color: var(--blue); } .figure:nth-child(3) .figure__ico { background: var(--tint-sand); color: #8a6a2e; } .figure:nth-child(4) .figure__ico { background: var(--tint-rose); color: #b4433b; }
.stat__value { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1; display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; margin-top: 0.4rem; }
[dir="rtl"] .stat__value--num { direction: ltr; justify-content: flex-end; }
.stat__value .sfx { font-size: 0.6em; color: var(--teal); }
.stat__label { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
.since { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.4rem; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.since__num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--blue); line-height: 1; }
.since__pre { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-600); font-weight: 700; display: block; }
html[lang="ar"] .since__pre { letter-spacing: 0; font-size: 0.82rem; }
.since__label { font-size: 0.82rem; color: var(--ink-2); max-width: 200px; line-height: 1.4; }

/* ---------- Tinted icon cards (services) ---------------------------------- */
.tcards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tcards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .tcards { grid-template-columns: repeat(3, 1fr); } }
.tcard { display: flex; flex-direction: column; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tcard__top { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 16px 16px; flex-wrap: wrap; background: var(--tint-teal); background-image: radial-gradient(rgba(15,154,168,0.28) 1.2px, transparent 1.3px); background-size: 14px 14px; overflow: hidden; }
.tcard:nth-child(3n+2) .tcard__top { background-color: var(--tint-blue); background-image: radial-gradient(rgba(32,48,112,0.22) 1.2px, transparent 1.3px); }
.tcard:nth-child(3n) .tcard__top { background-color: var(--tint-sand); background-image: linear-gradient(rgba(138,106,46,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(138,106,46,0.12) 1px, transparent 1px); background-size: 16px 16px; }
.tcard__ico { width: 56px; height: 56px; border-radius: 16px; flex: none; background: #fff; box-shadow: var(--shadow); color: var(--teal-600); display: grid; place-items: center; transform: rotate(-4deg); transition: transform var(--dur) var(--spring); }
.tcard:nth-child(3n+2) .tcard__ico { color: var(--blue); } .tcard:nth-child(3n) .tcard__ico { color: #8a6a2e; }
.tcard:hover .tcard__ico { transform: rotate(0) scale(1.08); }
.tcard__ico .icon { width: 28px; height: 28px; }
.tcard__badge { position: absolute; top: 12px; inset-inline-start: 12px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: var(--teal-600); background: #fff; padding: 4px 9px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.tcard:nth-child(3n+2) .tcard__badge { color: var(--blue); } .tcard:nth-child(3n) .tcard__badge { color: #8a6a2e; }
.tcard__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
.tcard__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translateY(8px) scale(0.92); transition: opacity 400ms, transform 500ms var(--spring); transition-delay: calc(350ms + var(--ci, 0) * 110ms); }
html[lang="ar"] .tcard__chip { font-family: "Cairo", sans-serif; font-size: 0.8rem; }
.is-visible .tcard__chip, .no-js .tcard__chip { opacity: 1; transform: none; }
.tcard__chip .icon { width: 11px; height: 11px; color: var(--teal); }
.tcard:hover .tcard__chip { transform: translateY(-2px); }
.tcard__body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcard__body p { color: var(--ink-2); font-size: 0.93rem; }
.tcard__body .link-more { margin-top: auto; padding-top: 6px; }

/* ---------- Numbered rows (why choose / what sets us apart) --------------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 48px 1fr; gap: 12px 20px; padding: 1.3rem 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (min-width: 760px) { .row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; } }
.row__num { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--teal-600); padding-top: 4px; }
.row__title { font-size: 1.08rem; }
.row__text { color: var(--ink-2); font-size: 0.95rem; grid-column: 2; }
@media (min-width: 760px) { .row__text { grid-column: auto; } }
.row { position: relative; } .row::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; height: 1px; width: 0; background: var(--teal); transition: width 700ms var(--ease-out); } .row:hover::after { width: 100%; }

/* ---------- Sticky scroll panels (how it works) --------------------------- */
.scrolly { display: grid; gap: 2rem; }
@media (min-width: 960px) { .scrolly { grid-template-columns: 4fr 8fr; gap: 4rem; } .scrolly__head { position: sticky; top: calc(var(--header-h) + 24px); } }
.panels { display: grid; gap: 1.25rem; }
.panel { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 760px) { .panel { grid-template-columns: 5fr 7fr; } }
.panel__text .h3 { font-size: 1.15rem; }
.panel__text p { margin-top: 0.4rem; color: var(--ink-2); font-size: 0.93rem; }
.panel__stage { position: relative; min-height: 230px; border-radius: var(--r-lg); display: grid; place-items: center; padding: 1.5rem; overflow: hidden; }
.panel:nth-child(1) .panel__stage { background: var(--tint-teal); background-image: radial-gradient(rgba(15,154,168,0.32) 1.2px, transparent 1.3px); background-size: 14px 14px; }
.panel:nth-child(2) .panel__stage { background: var(--tint-blue); background-image: radial-gradient(rgba(32,48,112,0.25) 1px, transparent 1.1px), radial-gradient(rgba(32,48,112,0.25) 1px, transparent 1.1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.panel:nth-child(3) .panel__stage { background: var(--tint-sand); background-image: linear-gradient(rgba(138,106,46,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(138,106,46,0.14) 1px, transparent 1px); background-size: 18px 18px; }
.mock { width: min(360px, 100%); background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px 18px; display: grid; gap: 10px; transform: translateY(26px); opacity: 0; transition: transform 700ms var(--ease-out), opacity 600ms; }
.is-visible .mock { transform: none; opacity: 1; }
.mock__head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.mock__ico { width: 32px; height: 32px; border-radius: 9px; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; }
.mock__ico .icon { width: 16px; height: 16px; }
.mock__line { height: 8px; border-radius: 4px; background: var(--line); width: var(--w, 80%); }
.mock__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mock__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--line); font-size: 0.76rem; font-weight: 700; color: var(--ink-2); opacity: 0; transform: translateY(8px) scale(0.9); transition: opacity 400ms, transform 500ms var(--spring); transition-delay: calc(500ms + var(--ci, 0) * 160ms); }
.is-visible .mock__chip { opacity: 1; transform: none; }
.mock__chip .icon { width: 12px; height: 12px; color: var(--teal); }
.mock__check { position: absolute; top: -12px; inset-inline-end: -12px; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); transform: scale(0); transition: transform 500ms var(--spring) 1100ms; }
.is-visible .mock__check { transform: scale(1); }
.mock__check .icon { width: 16px; height: 16px; }
.mock { position: relative; }
.mock__btn { margin-top: 4px; justify-self: start; opacity: 0; transform: translateY(6px); transition: opacity 400ms 1200ms, transform 400ms var(--ease-out) 1200ms; }
.is-visible .mock__btn { opacity: 1; transform: none; }
.mock__stamp { width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; transform: rotate(-12deg) scale(0); opacity: 0; transition: transform 600ms var(--spring) 900ms, opacity 300ms 900ms; justify-self: end; }
.is-visible .mock__stamp { transform: rotate(-12deg) scale(1); opacity: 1; }

/* ---------- Venn (who we serve) ------------------------------------------- */
.venn { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; justify-items: center; }
@media (min-width: 860px) { .venn { grid-template-columns: 1fr minmax(260px, 420px) 1fr; gap: 1rem; } }
.venn__circles { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1.6; }
.venn__c { position: absolute; top: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-align: center; transform: scale(0); transition: transform 900ms var(--spring); }
.venn__c--a { padding-inline: 8% 26%; } .venn__c--b { padding-inline: 26% 8%; }
html[lang="ar"] .venn__c { font-family: "Cairo", sans-serif; }
.venn__c--a { inset-inline-start: 0; background: var(--teal); mix-blend-mode: multiply; }
.venn__c--b { inset-inline-end: 0; background: var(--blue-900); transition-delay: 200ms; mix-blend-mode: multiply; }
.is-visible .venn__c { transform: scale(1); }
.venn__c span { opacity: 0; transition: opacity 500ms 900ms; } .is-visible .venn__c span { opacity: 1; }
.venn__side { display: grid; gap: 10px; width: 100%; max-width: 340px; }
.venn__pill { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 0.9rem; color: var(--ink); opacity: 0; transform: translateX(var(--vx, -20px)) scale(0.95); transition: opacity 500ms, transform 600ms var(--spring); transition-delay: calc(1100ms + var(--vi, 0) * 150ms); }
.venn__side--b .venn__pill { --vx: 20px; } [dir="rtl"] .venn__side--a .venn__pill { --vx: 20px; } [dir="rtl"] .venn__side--b .venn__pill { --vx: -20px; }
.is-visible .venn__pill { opacity: 1; transform: none; }
.venn__pill .icon { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--teal-100); color: var(--teal-600); flex: none; }
.venn__side--b .venn__pill .icon { background: var(--blue-100); color: var(--blue); }
.venn__pill strong { display: block; font-family: var(--font-display); font-size: 0.92rem; }
.venn__pill span { display: block; font-size: 0.82rem; color: var(--ink-2); }

/* ---------- Values (small cards row) -------------------------------------- */
.values { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(5, 1fr); } }
.value { padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 8px; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--tint-teal); color: var(--teal-600); display: grid; place-items: center; transition: transform var(--dur) var(--spring); }
.value:hover .value__ico { transform: rotate(-6deg) scale(1.08); }
.value__ico .icon { width: 22px; height: 22px; }
.value .h4 { margin-top: 4px; } .value p { color: var(--ink-2); font-size: 0.9rem; }

/* ---------- Partners strip ------------------------------------------------ */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.partner { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.3rem 1rem; min-height: 88px; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.95rem; line-height: 1.35; transition: transform var(--dur) var(--ease), box-shadow var(--dur), color var(--dur); }
html[lang="ar"] .partner { font-family: "Cairo", sans-serif; }
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--blue); }
.partners__note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); text-align: center; }

/* ---------- Partner logo ticker ------------------------------------------- */
.partners-band { overflow: hidden; }
.ticker { position: relative; padding-block: 0.5rem; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.ticker__track { display: flex; width: max-content; animation: tickerMove 38s linear infinite; }
[dir="rtl"] .ticker__track { animation-name: tickerMoveRtl; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; align-items: center; flex: none; }
.ticker__item { display: flex; align-items: center; justify-content: center; padding-inline: clamp(1.5rem, 3.5vw, 3rem); position: relative; }
.ticker__item + .ticker__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 28px; transform: translateY(-50%); background: var(--line); }
.ticker__img { height: 54px; width: auto; max-width: none; object-fit: contain; transition: transform var(--dur) var(--ease); }
.ticker__img--wide { height: 48px; }
.ticker__item:hover .ticker__img { transform: scale(1.06); }
@media (max-width: 599px) { .ticker__img { height: 42px; } .ticker__img--wide { height: 38px; } .ticker__track { animation-duration: 28s; } }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tickerMoveRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { mask-image: none; -webkit-mask-image: none; } .ticker__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } .ticker__set[aria-hidden] { display: none; } .ticker__set { flex-wrap: wrap; justify-content: center; gap: 1rem 0; } }

/* ---------- Reviews slider ------------------------------------------------ */
.slider { position: relative; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px; margin: -6px; }
.reviews::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .reviews { grid-auto-columns: calc(50% - 0.5rem); } } @media (min-width: 1024px) { .reviews { grid-auto-columns: calc(33.333% - 0.67rem); } }
.reviews > li { scroll-snap-align: start; }
.review { padding: 1.4rem; display: flex; flex-direction: column; gap: 10px; height: 100%; position: relative; transition: box-shadow var(--dur), transform var(--dur); }
.review:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.review__quote { width: 26px; height: 26px; color: var(--teal-100); }
.review__text { color: var(--ink-2); font-size: 0.95rem; } .review__text[dir="ltr"] { text-align: left; }
.review__author { margin-top: auto; font-weight: 700; color: var(--ink); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.review__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; flex: none; }
.review__source { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.slider__nav { display: flex; justify-content: center; gap: 10px; margin-top: 1.25rem; align-items: center; }
.slider__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue); display: grid; place-items: center; transition: background-color var(--fast), color var(--fast), border-color var(--fast); }
.slider__btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; } .slider__btn .icon { width: 18px; height: 18px; }
.slider__btn--prev .icon { transform: scaleX(-1); } [dir="rtl"] .slider__btn--prev .icon { transform: none; } [dir="rtl"] .slider__btn--next .icon { transform: scaleX(-1); }
.slider__dots { display: flex; gap: 6px; align-items: center; }
.slider__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color var(--fast), transform var(--fast); }
.slider__dot.is-active { background: var(--teal); transform: scale(1.3); }
.google-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; color: var(--ink); font-size: 0.9rem; background: #fff; box-shadow: var(--shadow-sm); }
.google-badge:hover { border-color: var(--teal); }
.google-badge .g { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; }
.reviews-empty { padding: 1.5rem; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); font-size: 0.93rem; text-align: center; }

/* ---------- Notices -------------------------------------------------------- */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #f0dfae; font-size: 0.88rem; line-height: 1.5; }
.notice .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; } .notice strong { font-weight: 700; }

/* ---------- Branches ------------------------------------------------------ */
.branches { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .branches { grid-template-columns: 1fr 1fr; } }
.branch { overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow var(--dur), transform var(--dur) var(--ease); }
.branch__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.branch__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.branch__actions a, .branch__tag { position: relative; z-index: 2; }
.branch:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.branch__media { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.branch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.branch:hover .branch__media img { transform: scale(1.05); }
.branch__tag { position: absolute; top: 12px; inset-inline-start: 12px; background: #fff; color: var(--teal-600); padding: 5px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
html[lang="ar"] .branch__tag { letter-spacing: 0; font-size: 0.82rem; }
.branch__body { padding: clamp(1.2rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.branch__name { font-size: 1.12rem; }
.branch__address { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 0.93rem; }
.branch__address .icon { color: var(--teal); margin-top: 3px; width: 18px; height: 18px; }
.branch__hours-head { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
html[lang="ar"] .branch__hours-head { letter-spacing: 0; font-size: 0.85rem; }
.hours { display: grid; gap: 4px; }
.hours li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 0.9rem; }
.hours li::after { content: ""; order: 1; height: 1px; background: var(--line); align-self: center; }
.hours__day { font-weight: 600; color: var(--ink); order: 0; } .hours__time { order: 2; color: var(--ink-2); text-align: end; }
.hours li.is-closed .hours__time { color: var(--danger); font-weight: 600; }
.branch__actions { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; font-size: 0.9rem; }

/* ---------- Contact rows -------------------------------------------------- */
.contact-rows { display: grid; gap: 10px; margin-top: 1.5rem; }
.contact-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-dark); transition: background-color var(--fast), transform var(--fast); }
.contact-row:hover { background: rgba(255,255,255,0.1); }
.contact-row__ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(34,195,210,0.18); color: var(--teal-bright); display: grid; place-items: center; flex: none; }
.contact-row__ico .icon { width: 18px; height: 18px; }
.contact-row__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 700; }
html[lang="ar"] .contact-row__label { letter-spacing: 0; font-size: 0.82rem; }
.contact-row__value { font-weight: 600; color: #fff; margin-top: 1px; font-size: 0.95rem; }
.contact-rows--light .contact-row { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.contact-rows--light .contact-row__ico { background: var(--teal-100); color: var(--teal-600); }
.contact-rows--light .contact-row__label { color: var(--muted); } .contact-rows--light .contact-row__value { color: var(--ink); }
.contact-rows--light .contact-row:hover { transform: translateY(-2px); }

/* ---------- Forms (compact) ----------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 2.5vw, 1.9rem); box-shadow: var(--shadow); }
.form-card__head { margin-bottom: 1.1rem; }
.form-card__head .h3 { font-size: 1.3rem; }
.form-card__head p { margin-top: 0.25rem; color: var(--ink-2); font-size: 0.93rem; }
.form-grid { display: grid; gap: 0.9rem 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid > .span-2 { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .form-grid--3 { grid-template-columns: repeat(3, 1fr); } .form-grid--3 > .span-2 { grid-column: span 2; } .form-grid--3 > .span-3 { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field__label { font-size: 0.82rem; font-weight: 700; color: var(--blue-900); display: flex; gap: 4px; align-items: baseline; }
.field__label .req { color: var(--danger); }
.field__label .opt { color: var(--muted); font-weight: 500; font-size: 0.76rem; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cfd5e1; border-radius: var(--r); background: #fff; color: var(--ink); font-size: 0.95rem; transition: border-color var(--fast), box-shadow var(--fast); appearance: none; -webkit-appearance: none; }
.textarea { min-height: 88px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(58,82,173,0.14); outline: none; }
.input::placeholder, .textarea::placeholder { color: #a0a7b8; }
.select-wrap { position: relative; }
.select-wrap .icon { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); width: 16px; height: 16px; }
.select { padding-inline-end: 34px; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }
.field__error { font-size: 0.8rem; color: var(--danger); display: none; align-items: center; gap: 5px; }
.field.is-invalid .field__error { display: flex; }
.field__error .icon { width: 13px; height: 13px; }
[dir="rtl"] .input[type="tel"], [dir="rtl"] .input[type="email"] { direction: ltr; text-align: end; }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #cfd5e1; border-radius: var(--r); font-size: 0.88rem; font-weight: 600; color: var(--ink); background: #fff; transition: border-color var(--fast), background-color var(--fast), color var(--fast); }
.choice input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice:hover span { border-color: var(--blue); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.9rem; color: var(--ink); position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 20px; height: 20px; border: 1px solid #cfd5e1; border-radius: 4px; background: #fff; display: grid; place-items: center; margin-top: 3px; transition: background-color var(--fast), border-color var(--fast); }
.check__box .icon { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--fast), transform var(--fast); }
.check input:checked + .check__box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .check__box .icon { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check--toggle { padding: 10px 12px; border: 1px solid #cfd5e1; border-radius: var(--r); transition: border-color var(--fast), background-color var(--fast); }
.check--toggle:hover { border-color: var(--blue); }
.check--toggle.is-on { border-color: var(--blue); background: var(--blue-50); }
.check--toggle strong { font-weight: 600; color: var(--blue-900); }
/* Compact tick-box group (e.g. services: tick one or several) */
.field--group legend { padding: 0; float: left; width: 100%; }
.field--group legend + * { clear: both; }
.check-list { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
.check-list .check { align-items: center; }
.check-list .check:hover .check__box { border-color: var(--blue); }
.field.is-invalid .check__box { border-color: var(--danger); }
@media (max-width: 600px) { .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } }
.field.is-invalid .check__box { border-color: var(--danger); }
.reveal-field { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.reveal-field > div { overflow: hidden; min-height: 0; }
.reveal-field.is-open { grid-template-rows: 1fr; }
.reveal-field > div > .field { padding-top: 8px; }
.dropzone { border: 1px dashed #b9c2d6; border-radius: var(--r); padding: 12px 14px; display: flex; align-items: center; gap: 12px; background: var(--surface); transition: border-color var(--fast), background-color var(--fast); cursor: pointer; position: relative; text-align: start; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--blue-500); background: #fff; }
.dropzone input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dropzone__icon { width: 36px; height: 36px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); flex: none; }
.dropzone__icon .icon { width: 18px; height: 18px; }
.dropzone__title { font-weight: 600; color: var(--blue-900); font-size: 0.9rem; }
.dropzone__title u { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dropzone__hint { font-size: 0.78rem; color: var(--muted); margin: 0; }
.file-list { display: grid; gap: 6px; margin-top: 8px; }
.file-list:empty { display: none; }
.file-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-size: 0.86rem; }
.file-item .icon { color: var(--blue); }
.file-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; font-weight: 600; }
.file-item__size { color: var(--muted); font-size: 0.8rem; }
.file-item__remove { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); }
.file-item__remove:hover { background: var(--surface); color: var(--danger); }
.file-item.is-rejected { border-color: var(--danger); color: var(--danger); }
.form-footer { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
.form-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-note { font-size: 0.8rem; color: var(--muted); margin: 0; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; }
.form-status.is-visible { display: block; }
.form-status__panel { border-radius: var(--r-lg); padding: 1rem 1.2rem; display: flex; gap: 12px; align-items: flex-start; }
.form-status__panel .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.form-status--demo .form-status__panel { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #f0dfae; }
.form-status--error .form-status__panel { background: #fdf1f0; color: var(--danger); border: 1px solid rgba(185,58,50,0.3); }
.form-status__title { font-weight: 700; font-family: var(--font-display); }
.form-status__panel p { margin: 4px 0 0; font-size: 0.9rem; }
.form-status__panel a { text-decoration: underline; text-underline-offset: 3px; }
.form-summary { margin-top: 8px; font-size: 0.84rem; display: grid; gap: 2px; opacity: 0.85; }
.form-summary span { font-weight: 700; }


/* ---------- Page banner (light) ------------------------------------------ */
.banner { position: relative; background: var(--canvas); overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 90% 0%, rgba(15,154,168,0.12), transparent 60%); pointer-events: none; }
.banner__inner { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .banner__inner { grid-template-columns: 7fr 5fr; } }
.banner__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(20px) scale(0.97); animation: cardIn 900ms var(--ease-out) 250ms forwards; position: relative; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20,26,46,0.06); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.crumbs a:hover { color: var(--blue); } .crumbs .icon { width: 14px; height: 14px; opacity: 0.6; } .crumbs [aria-current] { color: var(--teal-600); }
.banner__title { font-size: clamp(2rem, 4vw, 3.1rem); }
.banner__text { margin-top: 0.8rem; color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.1rem); max-width: 560px; }
.banner__content > * { opacity: 0; transform: translateY(10px); animation: fadeUp 600ms var(--ease-out) forwards; }
.banner__content > :nth-child(2) { animation-delay: 100ms; } .banner__content > :nth-child(3) { animation-delay: 200ms; }

/* ---------- Statement card & gradient CTA -------------------------------- */
.statement { text-align: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); max-width: 900px; margin-inline: auto; }
.statement__logo { width: 56px; height: 56px; border-radius: 16px; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; margin: 0 auto 1.25rem; }
.statement__logo .icon { width: 26px; height: 26px; }
.statement .h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.statement p { margin-top: 0.6rem; color: var(--ink-2); }
.statement .btn-row { justify-content: center; margin-top: 1.5rem; }
.cta-band { position: relative; color: #fff; padding-block: clamp(3rem, 6vw, 5rem); overflow: hidden; background: linear-gradient(110deg, var(--blue-900) 0%, var(--blue) 45%, var(--teal-600) 100%); }
.cta-band::before, .cta-band::after { content: ""; position: absolute; top: -40%; width: 22%; height: 180%; background: rgba(255,255,255,0.07); transform: skewX(-18deg); pointer-events: none; }
.cta-band::before { inset-inline-start: 18%; } .cta-band::after { inset-inline-end: 12%; width: 10%; }
.cta-band__inner { position: relative; text-align: center; max-width: 720px; margin-inline: auto; }
.cta-band .h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.3rem); } .cta-band p { margin-top: 0.6rem; color: rgba(255,255,255,0.85); }
.cta-band .btn-row { justify-content: center; margin-top: 1.5rem; }

/* ---------- Services page: index + tinted photo stages -------------------- */
.svc-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.svc-index__link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--ink-2); transition: border-color var(--fast), color var(--fast), transform var(--fast), background-color var(--fast); }
html[lang="ar"] .svc-index__link { font-family: "Cairo", sans-serif; font-size: 0.92rem; }
.svc-index__link .icon { width: 15px; height: 15px; color: var(--teal); }
.svc-index__link:hover, .svc-index__link.is-active { border-color: var(--teal); color: var(--teal-600); background: var(--teal-50); transform: translateY(-2px); }
.svc__stage { position: relative; border-radius: var(--r-xl); padding: 10% 12% 14% 8%; }
[dir="rtl"] .svc__stage { padding: 10% 8% 14% 12%; }
.svc__stage--1 { background: var(--tint-teal); background-image: radial-gradient(rgba(15,154,168,0.3) 1.2px, transparent 1.3px); background-size: 14px 14px; }
.svc__stage--2 { background: var(--tint-blue); background-image: radial-gradient(rgba(32,48,112,0.22) 1.2px, transparent 1.3px); background-size: 14px 14px; }
.svc__stage--3 { background: var(--tint-sand); background-image: linear-gradient(rgba(138,106,46,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(138,106,46,0.12) 1px, transparent 1px); background-size: 16px 16px; }
.svc__photo { box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; transform: rotate(-1.5deg); transition: transform 700ms var(--ease-out); }
.svc--flip .svc__photo { transform: rotate(1.5deg); }
.svc:hover .svc__photo { transform: rotate(0); }
.svc__float { position: absolute; bottom: 6%; inset-inline-end: 5%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink); max-width: 70%; opacity: 0; transform: translateY(14px); transition: opacity 500ms 500ms, transform 600ms var(--spring) 500ms; }
[dir="rtl"] .svc__float { padding: 10px 10px 10px 14px; } html[lang="ar"] .svc__float { font-family: "Cairo", sans-serif; }
.is-visible .svc__float, .no-js .svc__float { opacity: 1; transform: none; }
.svc__float-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--teal-100); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.svc__float-ico .icon { width: 16px; height: 16px; }
.svc--stage .svc__body .pill { margin-bottom: 0.8rem; }

/* ---------- About / Services page ----------------------------------------- */
.prose p { color: var(--ink-2); } .prose p + p { margin-top: 0.9rem; } .prose--lead p:first-child { font-size: 1.1rem; color: var(--ink); font-weight: 500; }
.timeline { display: grid; gap: 1rem; }
@media (min-width: 860px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.tl-item { padding: 1.3rem 1.3rem 1.2rem; position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.tl-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tl-item__year { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--teal-600); }
html[lang="ar"] .tl-item__year { font-family: "Cairo", sans-serif; }
.tl-item__text { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.92rem; }
.svc { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.25rem, 4vw, 3.5rem); scroll-margin-top: calc(var(--header-h) + 16px); }
.svc + .svc { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .svc { grid-template-columns: 5fr 7fr; } .svc--flip .svc__media { order: 2; } }
.svc__title { font-size: clamp(1.45rem, 2.3vw, 1.9rem); } .svc__body p { color: var(--ink-2); margin-top: 0.8rem; max-width: 620px; }
.svc__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 0.8rem; font-weight: 600; color: var(--ink); font-size: 0.92rem; } .svc__note .icon { color: var(--teal); }
.pair-list { display: grid; gap: 8px; margin-top: 1rem; max-width: 520px; }
.pair { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); font-size: 0.92rem; box-shadow: var(--shadow-sm); }
.pair .icon { color: var(--teal); width: 18px; height: 18px; }
.svc__actions { margin-top: 1.2rem; }
.gov-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 1rem; max-width: 560px; }
@media (min-width: 540px) { .gov-list { grid-template-columns: repeat(4, 1fr); } }
.gov-list li { padding: 12px 10px; text-align: center; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-sm); }
.lang-dir { display: grid; gap: 2rem; }
@media (min-width: 900px) { .lang-dir { grid-template-columns: 5fr 7fr; } }
.lang-group__label { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; gap: 12px; align-items: center; }
html[lang="ar"] .lang-group__label { font-family: "Cairo", sans-serif; letter-spacing: 0; font-size: 0.9rem; }
.lang-group__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lang-core { display: grid; gap: 8px; margin-top: 0.9rem; }
.lang-core li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--blue); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.lang-core li .icon { width: 18px; height: 18px; }
.lang-other { margin-top: 0.9rem; display: grid; }
@media (min-width: 640px) { .lang-other { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.lang-other li { display: grid; gap: 1px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-size: 0.93rem; margin-bottom: 8px; }
.lang-other__name { font-weight: 700; color: var(--blue-900); }
.lang-other__dir { color: var(--ink-2); font-size: 0.88rem; }
.lang-other__dir .arrow { color: var(--blue-500); padding-inline: 2px; }
.lang-note { margin-top: 1.25rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.lang-note p { margin: 0; color: var(--blue-900); font-weight: 600; font-size: 0.95rem; }
.pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .pay-grid { grid-template-columns: repeat(4, 1fr); } }
.pay-grid li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue-900); font-size: 0.9rem; }
.pay-grid li .icon { color: var(--success); width: 18px; height: 18px; }

/* Request / FAQ layouts */
.request-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .request-layout { grid-template-columns: 8fr 4fr; } .request-layout__aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; }
.aside-card + .aside-card { margin-top: 12px; }
.aside-card .h3 { font-size: 1.1rem; }
.aside-card__list { margin-top: 0.8rem; display: grid; gap: 8px; }
.aside-card__list li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 0.92rem; }
.aside-card__list .icon { color: var(--success); width: 16px; height: 16px; }
.aside-card--blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.aside-card--blue .h3 { color: #fff; }
.aside-card--blue p { color: rgba(255,255,255,0.85); margin-top: 0.5rem; font-size: 0.93rem; }
.aside-card--blue .link-inline { color: #fff; text-decoration-color: rgba(255,255,255,0.5); }
.faq-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 4fr 8fr; } .faq-layout__aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.accordion { display: grid; gap: 10px; }
.acc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding-inline: 1.1rem; transition: box-shadow var(--dur); }
.acc:has(.acc__btn[aria-expanded="true"]) { box-shadow: var(--shadow); }
.acc__btn { width: 100%; display: grid; grid-template-columns: 1fr 32px; gap: 14px; align-items: center; padding: 1.05rem 0; text-align: start; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--blue-900); line-height: 1.4; transition: color var(--fast); }
html[lang="ar"] .acc__btn { font-family: "Cairo", sans-serif; line-height: 1.6; }
.acc__btn:hover { color: var(--blue-500); }
.acc__num { display: none; }
.acc__icon { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; justify-self: end; transition: background-color var(--fast), border-color var(--fast), transform var(--dur) var(--ease); }
.acc__icon .icon { width: 14px; height: 14px; }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__content { padding: 0 46px 1.1rem 0; color: var(--ink-2); font-size: 0.97rem; }
[dir="rtl"] .acc__content { padding: 0 0 1.1rem 46px; }

/* Legal / status pages */
/* Legal documents (privacy policy, terms) */
.legal-doc { max-width: 800px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.7; }
.legal-doc__meta { font-size: 0.86rem; color: var(--muted); font-weight: 600; margin-bottom: 1.5rem; }
.legal-doc h2 { margin-top: 2rem; margin-bottom: 0.6rem; color: var(--blue-900); }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc__sub { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.1rem 0 0.4rem; }
.legal-doc p + p { margin-top: 0.8rem; }
.legal-doc__list { margin: 0.5rem 0 0.9rem; padding-inline-start: 1.4rem; list-style: disc; display: grid; gap: 0.3rem; }
.legal-doc__list li::marker { color: var(--teal-600); }
.legal-doc__contact { margin: 0.75rem 0 1.25rem; display: grid; gap: 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.legal-doc__contact li { display: flex; gap: 10px; align-items: flex-start; }
.legal-doc__contact .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal-600); }
.status-page { position: relative; min-height: calc(100svh - var(--header-h) - var(--topbar-h)); display: grid; place-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); overflow: hidden; isolation: isolate; background: var(--surface); }
.status-page__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.08; }
.status-page__bg img { width: 100%; height: 100%; object-fit: cover; }
.status-page__inner { text-align: center; max-width: 620px; }
.status-page__seal { width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; margin: 0 auto 1.5rem; }
.status-page__seal .icon { width: 36px; height: 36px; }
.status-page .lead { margin-top: 0.9rem; }
.status-page__ref { margin-top: 0.9rem; font-weight: 600; color: var(--navy, #203070); }
.status-page .btn-row { justify-content: center; margin-top: 1.75rem; }
.status-page .notice { margin: 1.5rem auto 0; max-width: 560px; text-align: start; }
.status-page__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--blue-100); letter-spacing: -0.03em; }

/* ---------- Footer -------------------------------------------------------- */
.site-footer { background: var(--blue-950); color: rgba(255,255,255,0.75); padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--blue-500), var(--teal-bright), var(--blue-500)); }
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 0.8fr 1fr 1.3fr; gap: 3rem; } }
.footer__logo { height: 56px; width: auto; }
.footer__tagline { margin-top: 1.1rem; max-width: 320px; font-size: 0.93rem; }
.footer__head { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 1rem; }
html[lang="ar"] .footer__head { font-family: "Cairo", sans-serif; letter-spacing: 0; font-size: 0.95rem; }
.footer__minihead { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; margin-bottom: 0.5rem; }
html[lang="ar"] .footer__minihead { letter-spacing: 0; font-size: 0.82rem; }
.footer__badges { margin-top: 1.25rem; }
.badge-list { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; color: #fff; font-weight: 600; }
.badge-list li { display: inline-flex; align-items: center; gap: 6px; }
.badge-list .icon { color: var(--teal-bright); width: 14px; height: 14px; }
.pay-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-list li { font-size: 0.76rem; padding: 4px 10px; border: 1px solid var(--line-dark); border-radius: 4px; color: rgba(255,255,255,0.8); }
.footer__links { display: grid; gap: 8px; }
.footer__links a { color: rgba(255,255,255,0.78); transition: color var(--fast); font-size: 0.95rem; }
.footer__links a:hover { color: #fff; }
.footer__contact-list { display: grid; gap: 10px; font-size: 0.9rem; }
.footer__contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact-list .icon { color: var(--teal-bright); margin-top: 4px; width: 15px; height: 15px; }
.footer__contact-list a { color: #fff; }
.footer__contact-list a:hover { text-decoration: underline; }
.footer__follow { margin-top: 1.25rem; }
.social-row { display: flex; gap: 8px; }
.social-row a { width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--line-dark); display: grid; place-items: center; color: #fff; transition: background-color var(--fast), border-color var(--fast); }
.social-row a:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
.social-row--light a { color: var(--blue); border-color: var(--line); }
.social-row--light a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.social-row .icon { width: 17px; height: 17px; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 0.83rem; color: rgba(255,255,255,0.6); }
.footer__copy { margin: 0; }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a:hover { color: #fff; }

/* ---------- Floating & cookie ------------------------------------------- */
.floating { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); position: relative; transition: transform var(--fast), box-shadow var(--fast); }
.float-btn:hover { transform: translateY(-2px); }
.float-btn .icon { width: 24px; height: 24px; }
.float-btn--wa { background: var(--wa); }
.float-btn--wa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,163,90,0.45); } 70% { box-shadow: 0 0 0 14px rgba(37,163,90,0); } 100% { box-shadow: 0 0 0 0 rgba(37,163,90,0); } }
.float-btn--call { background: var(--blue); }
.float-btn--top { background: #fff; color: var(--blue); border: 1px solid var(--line); width: 42px; height: 42px; }
.float-btn[hidden] { display: none; }
.float-btn::after { content: attr(data-tooltip); position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--blue-950); color: #fff; font-size: 0.78rem; padding: 5px 9px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--fast); }
@media (hover: hover) { .float-btn:hover::after { opacity: 1; } }
@media (min-width: 1024px) { .float-btn--call { display: none; } }
.cookie { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 95; max-width: 400px; width: calc(100% - 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 16px 18px; display: grid; gap: 10px; animation: rise 500ms var(--ease-out) both; }
.cookie[hidden] { display: none; }
.cookie__text { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.cookie__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.cookie__more { font-size: 0.88rem; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .cookie { inset-inline-start: 12px; bottom: 84px; width: calc(100% - 24px); } .floating { inset-inline-end: 12px; bottom: 12px; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }



/* ---------- Languages hub (dark) ------------------------------------------ */
.langs { isolation: isolate; background: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.35) 50%, transparent 51%), radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 56% 82%, rgba(255,255,255,0.25) 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.25) 50%, transparent 51%), var(--blue-950); }
.langs__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 420px at 72% 38%, rgba(34,195,210,0.22), transparent 60%), radial-gradient(500px 300px at 15% 90%, rgba(58,82,173,0.25), transparent 60%); pointer-events: none; }
.langs .section-head .lead { color: rgba(255,255,255,0.72); }
.lang-group__label--dark { color: rgba(255,255,255,0.6); } .lang-group__label--dark::after { background: rgba(255,255,255,0.14); }
.hub { display: grid; gap: 1.5rem; align-items: center; justify-items: center; max-width: 880px; margin-inline: auto; }
@media (min-width: 860px) { .hub { grid-template-columns: minmax(300px, 380px) 120px 220px; gap: 0; justify-content: center; } }
.hub__cards { display: grid; gap: 12px; width: 100%; }
.hub__card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.93rem; box-shadow: 0 10px 30px -20px rgba(0,0,0,0.6); opacity: 0; transform: translateX(-16px); transition: opacity 500ms, transform 600ms var(--ease-out), border-color var(--fast), background-color var(--fast); transition-delay: calc(200ms + var(--hi, 0) * 140ms); }
[dir="rtl"] .hub__card { transform: translateX(16px); }
html[lang="ar"] .hub__card { font-family: "Cairo", sans-serif; }
.is-visible .hub__card, .no-js .hub__card { opacity: 1; transform: none; }
.hub__card:hover { border-color: var(--teal-bright); background: rgba(34,195,210,0.1); }
.hub__card-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(34,195,210,0.16); color: var(--teal-bright); display: grid; place-items: center; flex: none; }
.hub__card-ico .icon { width: 17px; height: 17px; }
.hub__wire { display: none; position: relative; width: 100%; height: 100%; min-height: 200px; }
@media (min-width: 860px) { .hub__wire { display: block; } }
.hub__spine { position: absolute; inset-inline-start: 40px; top: 20%; bottom: 20%; width: 2px; background: linear-gradient(to bottom, transparent, var(--teal-bright), transparent); transform: scaleY(0); transition: transform 700ms var(--ease-out) 500ms; }
.hub__arm { position: absolute; inset-inline-start: 40px; inset-inline-end: 0; top: 50%; height: 2px; background: linear-gradient(to right, var(--teal-bright), rgba(34,195,210,0.4)); transform: scaleX(0); transform-origin: var(--o, left); transition: transform 600ms var(--ease-out) 1000ms; }
[dir="rtl"] .hub__arm { --o: right; background: linear-gradient(to left, var(--teal-bright), rgba(34,195,210,0.4)); }
.hub__wire::before { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: calc(100% - 40px); top: 20%; height: 2px; background: rgba(34,195,210,0.5); } .hub__wire::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: calc(100% - 40px); top: 80%; height: 2px; background: rgba(34,195,210,0.5); }
.hub__wire .hub__spine::before { content: ""; position: absolute; inset-inline-start: -40px; top: 50%; width: 40px; height: 2px; background: rgba(34,195,210,0.5); }
.is-visible .hub__spine { transform: scaleY(1); } .is-visible .hub__arm { transform: scaleX(1); }
.hub__node { position: relative; width: 200px; aspect-ratio: 1; border-radius: 28px; display: grid; place-content: center; text-align: center; color: #fff; background: linear-gradient(145deg, #2a3f8e 0%, var(--blue) 40%, var(--teal-600) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 30px 60px -20px rgba(34,195,210,0.55), 0 0 80px rgba(34,195,210,0.25); transform: scale(0.6); opacity: 0; transition: transform 800ms var(--spring) 1200ms, opacity 400ms 1200ms; }
.is-visible .hub__node, .no-js .hub__node { transform: none; opacity: 1; }
.hub__node-ring { position: absolute; inset: -14px; border-radius: 36px; border: 1px solid rgba(34,195,210,0.35); animation: ringPulse 3.2s var(--ease) infinite; }
@keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.06); opacity: 0.15; } }
.hub__node-val { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; }
.hub__node-label { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
html[lang="ar"] .hub__node-label { font-family: "Cairo", sans-serif; letter-spacing: 0; font-size: 1rem; }
.lang-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
@media (min-width: 640px) { .lang-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .lang-grid { grid-template-columns: repeat(4, 1fr); } }
.lang-tile { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); display: grid; gap: 3px; transition: border-color var(--fast), background-color var(--fast), transform var(--fast); }
.lang-tile:hover { border-color: var(--teal-bright); background: rgba(34,195,210,0.1); transform: translateY(-3px); }
.lang-tile__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.95rem; }
html[lang="ar"] .lang-tile__name { font-family: "Cairo", sans-serif; }
.lang-tile__dir { font-size: 0.82rem; color: rgba(255,255,255,0.62); } .lang-tile__dir .arrow { color: var(--teal-bright); padding-inline: 2px; }
.lang-note--dark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } .lang-note--dark p { color: #fff; }
.on-dark .pill--light { margin-bottom: 1rem; }

/* ---------- Closing band: dark with light beam ---------------------------- */
.cta-band { background: var(--blue-950); }
.cta-band::before { inset: auto; top: -10%; bottom: auto; inset-inline-start: 50%; width: 260px; height: 120%; transform: translateX(-50%) skewX(0); background: linear-gradient(to bottom, rgba(34,195,210,0.0), rgba(34,195,210,0.35) 45%, rgba(34,195,210,0.0)); filter: blur(28px); opacity: 0.9; }
.cta-band::after { inset: auto; inset-inline-start: 50%; bottom: 0; width: 60%; height: 50%; transform: translateX(-50%) skewX(0); background: radial-gradient(60% 100% at 50% 100%, rgba(34,195,210,0.35), transparent 70%); filter: none; }
.cta-band .btn--white { box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 40px rgba(34,195,210,0.45); }

/* ---------- Values: tilted cards that straighten ------------------------- */
.value { transform: rotate(var(--tilt, 0deg)); }
.value:nth-child(odd) { --tilt: -2deg; } .value:nth-child(even) { --tilt: 2deg; } .value:nth-child(3) { --tilt: 0deg; }
.value:hover { transform: rotate(0) translateY(-4px); }

/* ---------- Motion -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-28px); } .reveal--right { transform: translateX(28px); } [dir="rtl"] .reveal--left { transform: translateX(28px); } [dir="rtl"] .reveal--right { transform: translateX(-28px); }
.reveal--scale { transform: scale(0.95); }
.media.reveal { transform: none; opacity: 1; }
.media.reveal img { clip-path: inset(0 0 0 100%); transition: clip-path 1000ms var(--ease-out), transform 1.2s var(--ease); } [dir="rtl"] .media.reveal img { clip-path: inset(0 100% 0 0); } .media.reveal.is-visible img { clip-path: inset(0 0 0 0); }
.reveal-lines > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal-lines.is-visible > * { opacity: 1; transform: none; }
.reveal-lines.is-visible > :nth-child(2) { transition-delay: 90ms; } .reveal-lines.is-visible > :nth-child(3) { transition-delay: 180ms; } .reveal-lines.is-visible > :nth-child(4) { transition-delay: 270ms; } .reveal-lines.is-visible > :nth-child(5) { transition-delay: 360ms; } .reveal-lines.is-visible > :nth-child(n+6) { transition-delay: 450ms; }
.no-js .reveal, .no-js .reveal-lines > *, .no-js .hero__content > *, .no-js .banner__content > *, .no-js .hero-card, .no-js .stage__tile, .no-js .banner__media, .no-js .mock, .no-js .mock__chip, .no-js .mock__check, .no-js .mock__btn, .no-js .mock__stamp, .no-js .venn__c, .no-js .venn__c span, .no-js .venn__pill, .no-js .media.reveal img, .no-js .hub__spine, .no-js .hub__arm { opacity: 1; transform: none; animation: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .reveal, .reveal-lines > *, .hero__content > *, .banner__content > *, .hero__title .w > span, .hero-card, .stage__tile, .banner__media, .mock, .mock__chip, .mock__check, .mock__btn, .mock__stamp, .venn__c, .venn__c span, .venn__pill, .svc__float, .tcard__chip, .hub__card, .hub__node, .hub__spine, .hub__arm { opacity: 1 !important; transform: none !important; }
  .hub__node-ring { animation: none; }
  .media.reveal img { clip-path: none !important; }
  .hero-slide--1, .hero-slide--2, .hero-slide img { animation: none !important; }
  .hero-slide--2 { opacity: 1 !important; } /* reduced motion: hold the stamp photo */
}
@media print { .site-header, .floating, .cookie { display: none !important; } }