/* ------------------------------------------------------------------
   Consolidated for Auditing and Tax Consultation
   Design system mirrored from creativeans.com:
   dark #161616 / cream #FFFBF3, brand white #EBEBE6,
   cyan #27FCF2 → blue #3064D0 → purple #8739D5 gradient,
   serif italic display type + Roboto body, earth-tone accordion.
   ------------------------------------------------------------------ */

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --bg-dark: #161616;
  --bg-light: #e6e6e4;
  --card-dark: #1a1a1a;
  --ink: #1b1b1b;
  --brand-white: #ebebe6;
  --cyan: #27fcf2;
  --blue: #3064d0;
  --purple: #8739d5;
  --link-hover: #5de6ff;
  --whatsapp: #00bb7f;
  --accordion-1: #9a443a;
  --accordion-2: #d15f3f;
  --accordion-3: #896d49;
  --accordion-4: #d4b287;
  --accordion-5: #b8943c;
  --accordion-6: #48a13f;

  --background: var(--bg-dark);
  --foreground: var(--brand-white);
  --muted: rgba(235,235,230,.72);
  --line: rgba(255,255,255,.15);
  --btn-border: #fff;
  --btn-text: #fff;
  --btn-fill: #fff;
  --btn-fill-text: #000;
  --logo-filter: none;

  --font-head: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: 75rem;
}

html[lang="ar"] {
  --font-head: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

html.light {
  --background: var(--bg-light);
  --foreground: var(--ink);
  --muted: rgba(27,27,27,.72);
  --line: rgba(27,27,27,.15);
  --btn-border: #000;
  --btn-text: #000;
  --btn-fill: #000;
  --btn-fill-text: #fff;
  --logo-filter: invert(1) brightness(.12);
}

* { box-sizing: border-box; }
html { font-size: clamp(14px, 7.36px + .65vw, 24px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-body); font-weight: 400; line-height: 1.5;
  transition: background-color 1s ease, color 1s ease; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .serif { font-family: var(--font-head); font-weight: 400; line-height: 1.1; }
.italic { font-style: italic; }
html[lang="ar"] .italic { font-style: normal; }
.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }
.section { position: relative; z-index: 20; }
.center { text-align: center; }
.center-row { display: flex; justify-content: center; margin-top: 2.5rem; }
.light { font-weight: 300; }
.h2 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.15; }
.label { font-size: 1.1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .label { letter-spacing: 0; }

/* Character reveal */
.ch { opacity: .32; display: inline; }
.ch[data-on="1"] { opacity: 1; }

/* ---------- Sound button ---------- */
.sound-btn {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10040; width: 3rem; height: 3rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); cursor: pointer;
  display: grid; place-items: center; transition: transform .3s var(--ease);
}
html[dir="rtl"] .sound-btn { right: auto; left: 1.25rem; }
.sound-btn svg { width: 1.25rem; height: 1.25rem; }
.sound-btn[aria-pressed="false"] .s1, .sound-btn[aria-pressed="false"] .s2 { opacity: .25; }
.sound-btn:hover { transform: scale(1.06); }

/* ---------- Preloader ---------- */
#preloader { position: fixed; inset: 0; z-index: 10050; background: #000; display: grid; place-items: center; }
#preloader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#preloader .pre-logo { position: absolute; opacity: 0; will-change: transform, opacity; }

/* ---------- Fixed hero background ---------- */
.hero-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
.hero-rotor { position: absolute; left: 50%; top: 50%; width: min(100vw, 1100px); aspect-ratio: 1; transform: translate(-50%, -50%); perspective: 1600px; transition: opacity .6s; }
.hero-rotor > * { position: absolute; inset: 0; animation: rotor 26s linear infinite; transform-style: preserve-3d; }
.hero-blob {
  background: conic-gradient(from var(--angle), #3064d0, #27fcf2, #48a13f, #f99c00, #d6249f, #8739d5, #3064d0);
  -webkit-mask: url('../img/icon.png') center / contain no-repeat; mask: url('../img/icon.png') center / contain no-repeat;
  filter: blur(40px) saturate(1.2); opacity: .8; animation: rotor 26s linear infinite, gradient-spin 9s linear infinite;
}
.hero-rotor img { width: 100%; height: 100%; object-fit: contain; opacity: .18; filter: blur(8px); }
@keyframes rotor { from { transform: rotateY(0deg) rotateX(14deg); } to { transform: rotateY(360deg) rotateX(14deg); } }
.hero-veil { position: absolute; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.hero-dim { position: absolute; inset: 0; background: rgba(18,18,18,.62); opacity: 0; }
.hero-solid { position: absolute; inset: 0; background: var(--bg-light); opacity: 0; }

/* ---------- Header ---------- */
#header {
  position: fixed; inset-inline: 0; top: 1.667rem; z-index: 9999;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 .667rem; pointer-events: none; transition: top .4s var(--ease);
}
#header > * { pointer-events: auto; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: .75rem; color: var(--foreground); transition: color .6s; }
.brand-icon { height: 3.2rem; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.brand-wordmark { height: 2.15rem; width: auto; filter: invert(1) brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,.55)); transition: filter .6s; }
html.light .brand-wordmark { filter: none; }
html.light .brand-icon { filter: none; }
html[lang="ar"] .brand-wordmark { display: none; }
.brand-text { display: none; flex-direction: column; line-height: 1.05; }
html[lang="ar"] .brand-text { display: flex; }
.brand-text strong { font: 700 1.05rem/1 var(--font-body); letter-spacing: .12em; }
.brand-text small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: .25rem; }
html[lang="ar"] .brand-text strong { letter-spacing: 0; font-size: 1.2rem; }
html[lang="ar"] .brand-text small { letter-spacing: 0; font-size: .65rem; text-transform: none; }

.nav-pill { justify-self: center; border-radius: 999px; padding: 1px; background: transparent; }
.nav-pill ul { display: flex; align-items: center; gap: 0; padding: .2rem; border-radius: inherit; background: rgba(22,22,22,.92); backdrop-filter: blur(16px); transition: background .6s; }
html.light .nav-pill ul { background: rgba(255,251,243,.94); }
.nav-pill a, .nav-pill .lang-toggle {
  display: inline-block; padding: .417rem 1rem; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font: 400 1.05rem/1.2 var(--font-head); letter-spacing: .02em; color: var(--brand-white); transition: background .3s, color .3s;
}
html[lang="en"] .nav-pill .lang-toggle { font-family: 'Amiri', serif; }
html[lang="ar"] .nav-pill .lang-toggle { font-family: 'Instrument Serif', serif; }
html[lang="ar"] .nav-pill a { font-size: 1.1rem; letter-spacing: 0; }
html.light .nav-pill a, html.light .nav-pill .lang-toggle { color: var(--ink); }
.nav-pill a:hover, .nav-pill .lang-toggle:hover { background: rgba(255,255,255,.1); }
html.light .nav-pill a:hover, html.light .nav-pill .lang-toggle:hover { background: rgba(0,0,0,.06); }
html[lang="en"] .lang-toggle span { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.header-actions { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.orb-btn {
  position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden;
  background: linear-gradient(to top left, #8739d5, #3064d0, #27fcf2); color: #fff; transition: transform .3s var(--ease);
}
.orb-btn:hover { transform: translateY(-2px); }
.orb-ring { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 1.5px solid #fff; border-right-color: transparent; transition: transform .5s var(--ease); }
.orb-btn:hover .orb-ring { animation: spin 1s linear infinite; }
.orb-dot { position: absolute; width: .3rem; height: .3rem; border-radius: 999px; background: #fff; transform: translate(.42rem, .42rem); }
@keyframes spin { to { transform: rotate(360deg); } }
.wa-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--whatsapp); color: #fff; transition: transform .3s var(--ease); }
.wa-btn svg { width: 1.125rem; height: 1.125rem; transition: transform .3s; }
.wa-btn:hover { transform: translateY(-2px); }
.wa-btn:hover svg { transform: translate(2px, -2px); }
.menu-btn { display: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.15); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 50%; width: 1.1rem; height: 1.5px; background: var(--foreground); transform: translateX(-50%); transition: transform .4s var(--ease), top .4s; }
.menu-btn span:first-child { top: calc(50% - 4px); }
.menu-btn span:last-child { top: calc(50% + 3px); }
.menu-btn[aria-expanded="true"] span:first-child { top: 50%; transform: translateX(-50%) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 50%; transform: translateX(-50%) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 9990; background: var(--bg-dark); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 2rem;
  clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem); transition: clip-path .7s var(--ease); pointer-events: none;
}
html[dir="rtl"] .mobile-menu { clip-path: circle(0% at 2.5rem 2.5rem); }
.mobile-menu.open { clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem); pointer-events: auto; }
html[dir="rtl"] .mobile-menu.open { clip-path: circle(150% at 2.5rem 2.5rem); }
.mobile-menu a { font-family: var(--font-head); font-size: 2.4rem; color: var(--brand-white); }
.mobile-menu .lang-toggle { align-self: flex-start; margin-top: 1rem; border: 1px solid var(--line); background: none; color: var(--brand-white); border-radius: 999px; padding: .5rem 1.2rem; }

/* ---------- Gradient border card (conic spin + mouse spotlight) ---------- */
.gradient-border-card { position: relative; isolation: isolate; --mouse-x: 50%; --mouse-y: 50%; }
.gradient-border-card::before, .gradient-border-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -2; pointer-events: none;
  background: conic-gradient(from var(--angle), var(--cyan), var(--blue), var(--purple), var(--cyan));
  animation: gradient-spin 3s linear infinite; transition: opacity .3s ease-in-out;
}
.gradient-border-card::after {
  z-index: -1; opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), #fff 0%, transparent 300px);
  mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), #fff 0%, transparent 300px);
}
.gradient-border-card:hover::before { opacity: .1; }
.gradient-border-card:hover::after { opacity: 1; }
@keyframes gradient-spin { to { --angle: 360deg; } }

/* ---------- Button (outline pill, dot expands on hover) ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem;
  height: 2.25rem; padding: 0 .4rem 0 1rem; border-radius: 999px; border: 1px solid var(--btn-border); color: var(--btn-text);
  font: 400 .875rem var(--font-body); white-space: nowrap; cursor: pointer; background: transparent;
  -webkit-mask-image: radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); transition: transform .3s var(--ease);
}
html[dir="rtl"] .btn { padding: 0 1rem 0 .4rem; }
.btn-label { position: relative; z-index: 3; transition: color .3s; }
.btn-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; }
.btn-icon svg { position: relative; z-index: 2; width: 1rem; height: 1rem; color: var(--btn-fill-text); transition: transform .3s var(--ease); }
html[dir="rtl"] .btn-icon svg { transform: scaleX(-1); }
.btn-dot { position: absolute; z-index: 1; width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--btn-fill); transition: transform .5s var(--ease); }
.btn:hover .btn-dot { transform: scale(16); }
.btn:hover .btn-label { color: var(--btn-fill-text); }
.btn-white { --btn-border: #fff; --btn-text: #fff; --btn-fill: #fff; --btn-fill-text: #000; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 20; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 0 9rem; text-align: left; }
html[dir="rtl"] .hero { text-align: right; }
.hero-title { display: flex; flex-direction: column; gap: .2em; width: fit-content; max-width: 100%; font-size: clamp(2.4rem, 5.6vw, 4.9rem); line-height: .98; color: #fff; }
.hero-title .line { display: flex; align-items: center; white-space: nowrap; }
.hero-title .end { align-self: flex-end; }
.hero-rule { display: inline-block; height: 2px; width: 11rem; border: 0; margin: 0 0 0 .3em; background: #fff; vertical-align: middle; }
html[dir="rtl"] .hero-rule { margin: 0 .3em 0 0; }
.cycle-wrap { position: relative; display: inline-grid; width: max-content; clip-path: inset(0 0 -.15em); }
.cycle-reserve { visibility: hidden; grid-area: 1 / 1; white-space: nowrap; }
.cycle { grid-area: 1 / 1; display: flex; white-space: nowrap; }
.cycle span { display: inline-block; will-change: transform; }
html[lang="ar"] .cycle span { display: inline; }
/* Service names are long: they take their own line and wrap between words. */
.hero-title .line-cycle { white-space: normal; font-size: .56em; line-height: 1.08; }
.line-cycle .cycle-wrap { width: auto; max-width: 100%; clip-path: none; }
.line-cycle .cycle-reserve { display: grid; white-space: normal; }
.line-cycle .cycle-reserve > span { grid-area: 1 / 1; }
.line-cycle .cycle { flex-wrap: wrap; column-gap: .25em; white-space: normal; }
.cycle-w { display: inline-flex; white-space: nowrap; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
html[lang="ar"] .cycle { display: block; }
/* The hero uses more of the screen than the rest of the page: headline near the start edge, copy near the end edge. */
.hero-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: 3rem 4rem; align-items: center; width: min(100% - clamp(2.5rem, 7vw, 8rem), 104rem); margin-inline: auto; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; }
.hero-sub { max-width: 36ch; margin: 0 0 1.6rem; font: italic 400 1.6rem/1.35 var(--font-head); color: #ebebe6; }
html[lang="ar"] .hero-sub { font-style: normal; font-size: 1.45rem; line-height: 1.6; }


/* ---------- Marquee ---------- */
.marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; will-change: transform; animation: marquee-left var(--dur, 40s) linear infinite; }
.marquee-track.right { animation-name: marquee-right; }
html[dir="rtl"] .marquee-track { animation-name: marquee-right; }
html[dir="rtl"] .marquee-track.right { animation-name: marquee-left; }
/* The keyframes assume the track starts at the left edge; in RTL it would sit at the right and leave a gap,
   so the strip itself is laid out LTR while each item keeps RTL text. */
html[dir="rtl"] .marquee { direction: ltr; }
html[dir="rtl"] .marquee-track > * { direction: rtl; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cert-mark { flex: 0 0 auto; font-family: var(--font-head); font-size: 1.6rem; letter-spacing: .06em; opacity: .85; padding: 0 1.2rem; white-space: nowrap; }
.cert-mark small { font-family: var(--font-body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-inline-start: .5rem; }

/* ---------- Portfolio (sector cards) ---------- */
.portfolio { padding: 8rem 0 8rem; overflow: hidden; }
.portfolio .label, .section-title { margin-bottom: 2.5rem; font: 400 clamp(2.4rem, 4.5vw, 3.6rem)/1.1 var(--font-head); letter-spacing: 0; text-transform: none; }
.portfolio-rows { display: grid; gap: 1.25rem; }
.portfolio-rows .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.portfolio-rows .marquee-track { gap: 1.25rem; }
.pcard { position: relative; flex: 0 0 auto; display: block; overflow: hidden; border-radius: 2rem; background: rgba(255,255,255,.05); height: 18rem; width: 20rem; }
.pcard.wide { width: 26rem; }
.pcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover > img { transform: scale(1.06); }
.pcard-shade { position: absolute; inset: 0; z-index: 2; }
/* Soft fade along the bottom edge only, so the always-visible title stays readable on light photos. */
.pcard-shade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 45%); }
.pcard-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 2rem 2rem; }
.pcard-body h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; color: #fff; }
.pcard-body h3 svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Intro ---------- */
.intro { padding: 2rem 0 0; color: var(--foreground); transition: color 1s; }
.intro-text { display: flex; flex-direction: column; align-items: flex-start; }
html[dir="rtl"] .intro-text { align-items: flex-end; }
.intro-lead { margin: 0; max-width: 62ch; font: italic 400 clamp(1.4rem, 1.9vw, 1.7rem)/1.45 var(--font-head); }
html[lang="ar"] .intro-lead { font-style: normal; line-height: 1.7; }
/* About: framed like the vision/mission cards, heading on the start side, copy on the end side. */
.about-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 2rem 4rem; align-items: start; width: 100%; padding: 3rem; border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(20,20,20,.45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.about-title { font: italic 400 clamp(2.6rem, 5vw, 4rem)/1 var(--font-head); }
.intro-big { font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.25; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 5rem auto 0; padding: 0 1rem; place-items: start center; }
.stat { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.stat > span { max-width: 26ch; font: 400 1.35rem/1.35 var(--font-head); letter-spacing: .01em; color: var(--foreground); transition: color 1s; text-align: center; }
html[lang="ar"] .stat span { letter-spacing: 0; }

/* Stat icons: thin strokes in the text colour, inside a circle with the site's spinning gradient border. */
.stat-badge { width: 5.5rem; height: 5.5rem; border-radius: 50%; padding: 1px; margin-bottom: 1.4rem; }
.stat-badge-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: var(--background); transition: background-color 1s; }
.stat-badge svg { width: 2.4rem; height: 2.4rem; overflow: visible; color: var(--foreground); transition: color 1s; }
.stat-badge .sd { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.4s var(--ease) .2s, opacity .2s .2s; }
/* Strokes are matched by .sd, not [pathLength]: Chrome does not restyle attribute selectors on SVG when .is-in is added. */
.stat.is-in .stat-badge .sd { stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stat-badge .sd { transition: none; } }
.vm-tag { margin-top: 1.2rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
html[lang="ar"] .vm-tag { letter-spacing: 0; font-size: .85rem; }

/* ---------- Vision and mission ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 5rem; }
.vm-card { padding: 2.25rem; border-radius: 1.5rem; border: 1px solid var(--line); background: rgba(20,20,20,.45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.vm-title { font-size: 2.2rem; font-style: italic; margin: 0 0 1rem; }
html[lang="ar"] .vm-title { font-style: normal; }
.vm-text { font-size: 1.05rem; line-height: 1.5; }

/* ---------- Founder ---------- */
.founder { margin-top: 2rem; }
.founder-card { border-radius: 1.5rem; padding: 1px; }
.founder-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 20rem 1fr; border-radius: 1.5rem; overflow: hidden; background: #1b1b1b; color: var(--brand-white); }
.founder-photo { position: relative; margin: 0; min-height: 24rem; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; filter: grayscale(1); transition: filter .8s; }
.founder-card:hover .founder-photo img { filter: grayscale(0); }
.founder-photo figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 6rem 1.5rem 2rem; text-align: center; color: #fffbf3; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.45), transparent); display: flex; flex-direction: column; gap: .4rem; }
.founder-photo strong { font: 400 1.6rem/1 var(--font-head); }
.founder-photo span { font-size: .85rem; font-weight: 500; }
.founder-text { padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.founder-text .label { font-size: .9rem; }
.founder-text .h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cert-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.cert-row span { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--brand-white); font-size: .78rem; font-weight: 500; letter-spacing: .08em; }
.founder-bio p { margin-bottom: .9rem; font-weight: 300; line-height: 1.55; }
.founder-contact-title { margin-top: .5rem; }
.founder-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; font-size: .92rem; font-weight: 300; }
.founder-contact small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-bottom: .15rem; }
html[lang="ar"] .founder-contact small { letter-spacing: 0; font-size: .8rem; }
.founder-contact a:hover { color: var(--link-hover); }
.founder-contact span[dir="ltr"] { unicode-bidi: isolate; display: inline-block; }

/* ---------- Core values: About-style panel, then the six cards in a 3 x 2 grid ---------- */
.values { margin-top: 7rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; perspective: 1400px; }
.wl-card { position: relative; transform-style: preserve-3d; cursor: pointer; }
.wl-card-inner { position: relative; border-radius: 1.25rem; aspect-ratio: 4 / 3; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.wl-card.flipped .wl-card-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .wl-card:hover .wl-card-inner, .wl-card:focus-visible .wl-card-inner { transform: rotateY(180deg); } }
.wl-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border-radius: inherit; overflow: hidden; border: 1px solid var(--line); }
.wl-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); }
.wl-face h3 { position: relative; z-index: 1; font-size: clamp(1.4rem, 1.8vw, 1.8rem); color: #fff; font-style: italic; }
html[lang="ar"] .wl-face h3 { font-style: normal; }
.wl-face.back { transform: rotateY(180deg); background: var(--bg-light); color: var(--ink); border-color: transparent; justify-content: center; padding: 1.75rem; }
.wl-face.back::after { display: none; }
.wl-face.back h3 { margin-bottom: .7rem; color: var(--ink); }
.wl-face.back p { position: relative; z-index: 1; font-size: 1.15rem; line-height: 1.45; color: rgba(27,27,27,.82); }
.wl-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 1.25rem; }
@media (max-width: 1024px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- Why choose us ---------- */
.why { margin-top: 2rem; padding-block: 4rem 2rem; }
/* Framed like the About panel: heading on the start side, intro beside it in the serif. */
.why-head { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; padding: 3rem; border: 1px solid var(--line); border-radius: 1.5rem; transition: border-color 1s; }
.why-head .h2 { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; }
.why-head .h2 .italic { display: inline; }
.why-intro { margin: 0; font-family: var(--font-head); font-size: clamp(1.35rem, 1.9vw, 1.7rem); font-weight: 400; line-height: 1.4; color: var(--foreground); }
/* Expanding cards: the panel animates from 0fr to 1fr rows, so it opens to its natural height. */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; align-items: start; margin-top: 2.5rem; }
/* The cards are hidden for now: remove the hidden attribute from #why-grid in index.html to show them again. */
.why-grid[hidden] { display: none; }
.why-card { border-radius: 1.4rem; padding: 1px; }
.why-inner { position: relative; z-index: 1; border-radius: inherit; background: #141414; }
.why-toggle { display: flex; align-items: center; gap: 1.1rem; width: 100%; padding: 1.6rem 1.6rem; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.why-num { flex: 0 0 auto; font-family: var(--font-head); font-size: 1rem; letter-spacing: .12em; color: var(--cyan); opacity: .9; }
.why-card h3 { flex: 1; font-size: 1.55rem; font-style: italic; line-height: 1.15; }
html[lang="ar"] .why-card h3 { font-style: normal; }
.why-plus { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); transition: background-color .4s, border-color .4s; }
.why-plus svg { width: 1.1rem; height: 1.1rem; }
.why-plus svg .v { transform-origin: center; transition: transform .45s var(--ease); }
.why-card.open .why-plus { background: var(--brand-white); border-color: var(--brand-white); color: #141414; }
.why-card.open .why-plus svg .v { transform: scaleY(0); }
.why-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.why-panel > div { overflow: hidden; }
.why-card p { padding-block: 0 1.7rem; padding-inline: calc(1.6rem + 2.3rem) 1.6rem; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--muted); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .55s var(--ease); }
.why-card.open .why-panel { grid-template-rows: 1fr; }
.why-card.open p { opacity: 1; transform: none; transition-delay: .12s; }
.why-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; border-radius: 1.4rem; }
@media (max-width: 860px) { .why-head { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 1.75rem; } .why-grid { grid-template-columns: 1fr; } }

/* ---------- Solutions accordion ---------- */
.solutions { margin-top: 10rem; overflow-x: clip; }
.sol-intro { font-size: 1rem; display: grid; gap: 1rem; color: var(--foreground); }
.sol-intro a, .sol-intro strong { color: #27fcf2; }
html.light .sol-intro strong { color: #0084cc; }
.accordion { margin-top: 3rem; background: #141414; }
.acc-item { --acc-fg: var(--brand-white); --acc-line: rgba(255,255,255,.12); --acc-hover: rgba(255,255,255,.06); --acc-dot: var(--cyan); position: relative; background: var(--row); color: var(--acc-fg); border-bottom: 1px solid var(--acc-line); }
/* Light grey rows: dark text, darker bullets and an inverted button so everything stays readable. */
.acc-item.acc-light { --acc-fg: var(--ink); --acc-line: rgba(0,0,0,.1); --acc-hover: rgba(0,0,0,.04); --acc-dot: var(--blue); }
.acc-item.acc-light .btn { --btn-border: var(--ink); --btn-text: var(--ink); --btn-fill: var(--ink); --btn-fill-text: #fff; }
.acc-item::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,0); transition: background .3s; pointer-events: none; }
.acc-item:hover::after { background: var(--acc-hover); }
.acc-btn { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; color: inherit; cursor: pointer; text-align: start; padding: .5rem 1.5rem; }
@media (min-width: 768px) { .acc-btn { padding: .5rem 2.5rem; } }
.acc-title { display: flex; align-items: center; font: italic 400 1.45rem var(--font-head); transition: opacity .5s; }
html[lang="ar"] .acc-title { font-style: normal; }
.acc-item.open .acc-title { opacity: 0; }
.acc-icon { margin-inline-start: 1rem; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; overflow: hidden; }
.acc-icon svg { width: 2.5rem; height: 2.5rem; stroke-width: 1px; transition: transform .5s var(--ease), opacity .4s; }
.acc-icon .v { transform-origin: center; transition: transform .4s var(--ease); }
.acc-item.open .acc-icon .v { transform: scaleY(0); }
.acc-panel { position: relative; z-index: 1; height: 0; overflow: hidden; padding: 0 1.5rem; }
@media (min-width: 768px) { .acc-panel { padding: 0 2.5rem; } }
.acc-body { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .acc-body { flex-direction: row; } }
.acc-text { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .acc-text { width: 55%; gap: 2rem; } }
.acc-num { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 999px; }
.acc-num svg { width: 1.6rem; height: 1.6rem; }
.acc-big { font: italic 400 clamp(2.25rem, 3.5vw, 3rem)/1.05 var(--font-head); margin-top: 1rem; }
@media (min-width: 768px) { .acc-big { margin-top: 0; } }
html[lang="ar"] .acc-big { font-style: normal; }
.acc-prose { font-size: 1.167rem; line-height: 1.3; }
.acc-prose p { margin-bottom: 1rem; font-size: 14px; line-height: 1.3; }
@media (min-width: 768px) { .acc-prose p { font-size: 1rem; } }
.acc-prose ul { display: grid; gap: .5rem; margin-bottom: 1rem; }
.acc-prose ul li { position: relative; padding-inline-start: 1.4rem; font-size: .95rem; }
.acc-prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 999px; border: 1px solid #fff; background: rgba(255,255,255,.3); }
.acc-prose p:last-child { margin-bottom: 0; }
.acc-img { flex: 1; width: 100%; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 3; }
.acc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.acc-img:hover img { transform: scale(1.05); }
.acc-item:not(.acc-light) .btn { --btn-border: #fff; --btn-text: #fff; --btn-fill: #fff; --btn-fill-text: #000; }
.acc-item .btn { align-self: flex-start; }

/* accordion: tagline, sub-headings, numbered list */
.acc-ico { flex: 0 0 auto; display: inline-flex; width: 1.65rem; height: 1.65rem; margin-inline-end: 1.1rem; opacity: .85; }
.acc-ico svg, .acc-num svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.acc-ico svg { width: 100%; height: 100%; }
.acc-tagline { font: italic 400 1.1rem/1.4 var(--font-head); opacity: .85; margin: -.5rem 0 .5rem; }
html[lang="ar"] .acc-tagline { font-style: normal; }
.acc-h4 { font: italic 400 1.35rem/1.25 var(--font-head); letter-spacing: .01em; opacity: .8; margin: 1.6rem 0 .8rem; }
html[lang="ar"] .acc-h4 { letter-spacing: 0; font-style: normal; font-size: 1.25rem; }
.acc-prose .acc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.5rem; margin: 0 0 .5rem; padding: 0; }
.acc-prose .acc-list li { position: relative; padding-inline-start: 1.7rem; font-size: .9rem; font-weight: 300; line-height: 1.35; }
.acc-prose .acc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 1.05rem; height: 1.05rem; background: var(--acc-dot); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 860px) { .acc-list { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .acc-text { width: 60%; } }
/* accordion badges and paired lists */
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badges span { padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
html[lang="ar"] .badges span { letter-spacing: 0; font-size: .8rem; }
.acc-prose li strong { display: block; font-weight: 500; font-size: 1rem; }
.acc-prose li span { display: block; font-size: .88rem; opacity: .85; font-weight: 300; }

/* ---------- Leadership ---------- */
.founder .label { margin-bottom: .5rem; }
.leaders-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.leader-card { border-radius: 1.5rem; padding: 1px; }
.leader-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 22rem 1fr; border-radius: 1.5rem; overflow: hidden; background: #1b1b1b; color: var(--brand-white); }
.leader-photo { position: relative; margin: 0; min-height: 26rem; background: #000; }
/* A wider photo column lets the portrait fill the card's full height with only a light crop, so it reads from a distance
   without leaving empty space above it. */
.leader-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter .8s; }
.leader-card:hover .leader-photo img { filter: grayscale(0); }
.leader-photo figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 7rem 1.25rem 1.5rem; text-align: center; color: #fffbf3; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.5), transparent); display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.leader-photo strong { font: 400 1.5rem/1.05 var(--font-head); }
.leader-photo span { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .leader-photo span { letter-spacing: 0; font-size: .85rem; }
.leader-photo em { font-style: normal; font-size: .75rem; opacity: .8; }
.leader-photo .cert-row { justify-content: center; margin-top: .2rem; }
.leader-photo .cert-row span { padding: .2rem .55rem; font-size: .65rem; letter-spacing: .08em; border-color: rgba(255,255,255,.6); }
.leader-text { padding: 2.25rem; display: flex; flex-direction: column; gap: 1rem; }
.leader-text p { font-weight: 300; line-height: 1.6; }
.leader-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); font: 400 1.15rem/1.4 var(--font-head); }
.leader-contact small { display: block; font: italic 400 .95rem/1.2 var(--font-head); letter-spacing: .02em; opacity: .6; margin-bottom: .2rem; }
html[lang="ar"] .leader-contact small { letter-spacing: 0; font-style: normal; font-size: .95rem; }
.leader-contact a:hover { color: var(--link-hover); }
.leader-contact span[dir="ltr"] { unicode-bidi: isolate; display: inline-block; }
.clients-intro { margin: -1.5rem 0 2.5rem; max-width: 60ch; font-weight: 300; }
.client-card > span { display: flex; flex-direction: column; line-height: 1.2; }
.client-card b { font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
html[lang="ar"] .client-card b { letter-spacing: 0; font-size: .72rem; }

/* ---------- Team stack (testimonial component) ---------- */
.team { margin-top: 5rem; }
.team .h2 { margin-bottom: 2.5rem; line-height: 1.2; font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
@media (min-width: 900px) { .team .h2 { white-space: nowrap; } }
.stack-wrap { position: relative; display: flex; flex-direction: column; gap: 1.75rem; align-items: center; min-height: 36rem; padding: 3rem 0; }
@media (min-width: 768px) { .stack-wrap { flex-direction: row; gap: 3.5rem; padding: 6rem 0; } }
.stack { position: relative; flex: 0 0 auto; width: 100%; height: 10rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); }
@media (min-width: 768px) { .stack { width: 11.25rem; height: 31rem; -webkit-mask-image: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); mask-image: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); } }
.stack-item { position: absolute; top: 50%; left: 50%; overflow: hidden; width: 7.5rem; height: 7.5rem; margin: -3.75rem 0 0 -3.75rem; border-radius: 999px; border: 0; background: #0b0b0b; display: grid; place-items: center; cursor: pointer; overflow: hidden; will-change: transform; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
@media (min-width: 768px) { .stack-item { width: 11.25rem; height: 11.25rem; margin: -5.625rem 0 0 -5.625rem; } }
.stack-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; transform: scale(1.04); }
.stack-item b { font: 400 2.2rem var(--font-head); color: var(--brand-white); letter-spacing: .04em; }
.stack-text { flex: 1; padding: 1rem 0; }
.stack-text h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: .02em; }
.stack-meta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .2rem; }
.stack-meta strong { font: 400 1.6rem/1.15 var(--font-head); letter-spacing: .01em; }
.stack-meta span { font: italic 400 1.2rem/1.3 var(--font-head); color: var(--muted); }
html[lang="ar"] .stack-meta span { font-style: normal; }
.stack-nav { display: flex; gap: .6rem; margin-top: 2rem; }
.round-btn { width: 3rem; height: 3rem; border-radius: 999px; border: 1px solid var(--foreground); background: transparent; color: var(--foreground); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s; }
.round-btn:hover { background: var(--foreground); color: var(--background); }
.round-btn svg { width: 1.2rem; height: 1.2rem; }
html[dir="rtl"] .round-btn svg { transform: scaleX(-1); }

/* ---------- Trust ---------- */
.trust { margin-top: 2.5rem; }
.trust .label { margin-bottom: 2rem; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } }
/* Client logos in full colour on white tiles (logos are drawn for white); a gradient ring lights up on hover. */
.logo-tile { position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: 1.25rem; background: linear-gradient(160deg, #fff 55%, #f2f2f0); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(0,0,0,.18); transition: transform .5s var(--ease), box-shadow .5s; }
.logo-tile img { position: absolute; inset: 16% 12%; width: 76%; height: 68%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.logo-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, var(--cyan), var(--blue), var(--purple)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; }
.logo-tile:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 44px rgba(0,0,0,.35), 0 0 32px rgba(48,100,208,.25); }
.logo-tile:hover::after { opacity: 1; }
.logo-tile:hover img { transform: scale(1.06); }
.trust-tile { border-radius: 1.25rem; padding: 1px; transition: transform .5s var(--ease); }
.trust-tile::before { opacity: 0; }
.trust-tile:hover { transform: translateY(-4px); }
.trust-tile:hover::before { opacity: .35; }
.trust-inner { position: relative; z-index: 1; height: 100%; min-height: 9.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1.4rem 1.2rem 1.2rem; border-radius: inherit; background: var(--background); border: 1px solid var(--line); transition: background-color 1s, border-color .5s; }
.trust-tile:hover .trust-inner { border-color: transparent; }
.trust-badge { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 999px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.trust-badge img { width: 100%; height: 100%; object-fit: contain; padding: .45rem; filter: grayscale(1); transition: filter .5s; }
.trust-tile:hover .trust-badge img { filter: none; }
.trust-badge b { display: none; font: 400 1.35rem var(--font-head); letter-spacing: .04em; color: #fff; }
.trust-badge.no-logo { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #000), color-mix(in srgb, var(--c) 20%, #000)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
.trust-badge.no-logo b { display: block; }
.trust-name { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.15; }
.trust-group { font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c); opacity: .9; }
html[lang="ar"] .trust-group { letter-spacing: 0; font-size: .75rem; }
.sector-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 1.5rem; }
.sector-legend span { font-size: .78rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sector-legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; background: var(--c); margin-inline-end: .5rem; vertical-align: middle; }
.client-card { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-radius: 1rem; border: 1px solid var(--line); font-size: .85rem; white-space: nowrap; transition: border-color .3s; }
.client-card:hover { border-color: var(--foreground); }
.client-card i { width: .55rem; height: .55rem; border-radius: 999px; background: var(--c); box-shadow: 0 0 10px var(--c); }

/* ---------- Expect marquee ---------- */
.expect { position: relative; overflow: hidden; padding-top: 5rem; margin-top: 5rem; }
@media (min-width: 768px) { .expect { padding: 8rem 0; } }
.expect-inner { display: flex; flex-direction: column; padding: 0 1.5rem; }
@media (min-width: 1024px) { .expect-inner { flex-direction: row; align-items: center; gap: 4rem; padding-inline-start: 5rem; } }
.expect-head { flex: 0 0 30%; }
.expect-title { display: flex; flex-direction: column; text-align: center; font-size: 3rem; line-height: 1.1; color: var(--foreground); }
@media (min-width: 768px) { .expect-title { text-align: start; } }
.expect-title .big { font-size: clamp(4.5rem, 7vw, 5rem); }
.expect-marquee { flex: 1; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.expect-marquee .marquee-track { gap: 1.5rem; padding: 2.5rem 3rem; cursor: grab; }
.expect-marquee .marquee-track:active { cursor: grabbing; }
.ecard { position: relative; flex: 0 0 auto; width: 19.5rem; height: 21.75rem; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.7); background: var(--card-dark); box-shadow: 0 25px 50px rgba(0,0,0,.1); transition: box-shadow .4s; }
@media (min-width: 768px) { .ecard { width: 21.75rem; height: 24rem; } }
.ecard:hover { box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.ecard-img { position: relative; height: 48%; width: 100%; overflow: hidden; border-radius: 22px 22px 72px 0; background: #fff; }
html[dir="rtl"] .ecard-img { border-radius: 22px 22px 0 72px; }
.ecard-img img { width: 100%; height: 100%; object-fit: cover; }
.ecard-body { height: 52%; display: flex; align-items: center; padding: 2rem; }
.ecard-body p { font: italic 400 1.5rem/1.25 var(--font-head); color: #fff; }
html[lang="ar"] .ecard-body p { font-style: normal; }

/* ---------- Inquiry form ---------- */
.inquiry { margin-top: 6rem; }
/* Office location: details beside a live map, inside the site's gradient-border card. */
.visit { margin-top: 6rem; }
.visit-card { border-radius: 1.75rem; padding: 1px; }
.visit-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); border-radius: inherit; background: #141414; overflow: hidden; }
.visit-info { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: 3rem; }
.visit-address { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.4; }
.visit-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.visit-map { min-height: 26rem; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 26rem; border: 0; }
@media (max-width: 860px) { .visit-inner { grid-template-columns: 1fr; } .visit-info { padding: 2rem 1.75rem; } .visit-map, .visit-map iframe { min-height: 20rem; } }
.inquiry-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
.inquiry-copy .light { margin: 1rem 0 1.5rem; max-width: 46ch; }
.inquiry-points { display: grid; gap: .7rem; }
.inquiry-points li { position: relative; padding-inline-start: 1.6rem; font-weight: 300; }
.inquiry-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: .7rem; height: .7rem; border-radius: 999px; background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.inquiry-card { border-radius: 1.5rem; padding: 1px; }
.inquiry-inner { position: relative; z-index: 1; border-radius: 1.5rem; background: #1b1b1b; color: var(--brand-white); padding: 2rem; display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field > span { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
html[lang="ar"] .field > span { letter-spacing: 0; font-size: .85rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff;
  font: 400 .95rem var(--font-body); outline: none; transition: border-color .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ebebe6 50%), linear-gradient(135deg, #ebebe6 50%, transparent 50%); background-position: calc(100% - 1.3rem) 50%, calc(100% - 1rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-inline-end: 2.4rem; }
html[dir="rtl"] .field select { background-position: 1.3rem 50%, 1rem 50%; padding-inline-end: 1rem; padding-inline-start: 2.4rem; }
.field select option { background: #1b1b1b; color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); background: rgba(255,255,255,.08); }
.field.invalid input, .field.invalid textarea { border-color: #e40014; }
.hp { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.inquiry-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.btn-wa { --btn-border: #00bb7f; --btn-text: #fff; --btn-fill: #00bb7f; --btn-fill-text: #fff; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.form-status { min-height: 1.2em; font-size: .9rem; }
.form-status.ok { color: #27fcf2; }
.form-status.err { color: #ffa3a3; }
.form-privacy { font-size: .75rem; opacity: .6; font-weight: 300; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 20; margin-top: 5rem; padding-bottom: 5rem; }
.connect { display: flex; flex-direction: column; gap: 2rem; justify-content: space-between; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .connect { flex-direction: row; align-items: flex-end; } }
.connect-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--foreground); display: grid; place-items: center; transition: background .3s, color .3s; }
.socials a:hover { background: var(--foreground); color: var(--background); }
.socials svg { width: 1.1rem; height: 1.1rem; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 3rem 2.5rem; padding: 3.5rem 0; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: 1.2fr .8fr 1.3fr; } }
/* Column headings: serif, large, with a short gradient underline. */
.footer-col h3 { position: relative; width: fit-content; font: 400 clamp(1.7rem, 2.4vw, 2.1rem)/1.1 var(--font-head); padding-bottom: .9rem; margin-bottom: 1.6rem; }
.footer-col h3::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple)); }
.footer-col ul { display: grid; gap: .85rem; font-size: .95rem; font-weight: 300; }
.footer-col a, .footer-col li > div { display: inline-flex; align-items: flex-start; gap: .75rem; transition: color .3s; }
.footer-col a:hover { color: var(--link-hover); }
.foot-ico { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -.3rem; border-radius: 50%; border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.foot-ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-col a:hover .foot-ico { border-color: var(--link-hover); background: rgba(93,230,255,.08); }
/* Firm links: a short line that stretches on hover. */
.foot-link a::before { content: ""; flex: 0 0 auto; width: .9rem; height: 1px; margin-top: .7em; background: currentColor; opacity: .5; transition: width .35s var(--ease), opacity .35s; }
.foot-link a:hover::before { width: 1.6rem; opacity: 1; }
.foot-all a { align-items: center; gap: .4rem; margin-top: .2rem; font-weight: 500; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
html[lang="ar"] .foot-all a { letter-spacing: 0; }
.foot-all svg { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
html[dir="rtl"] .foot-all svg { transform: scaleX(-1); }
.foot-all a:hover svg { transform: translate(2px, -2px); }
.footer-col span[dir="ltr"] { unicode-bidi: isolate; display: inline-block; }
.footer-led p { font-size: .85rem; font-weight: 300; }
.footer-led .names { font-weight: 500; margin-top: .25rem; }
.footer-legal { font-size: .8rem; font-weight: 300; text-align: end; }
.footer-legal .motto { margin-top: .3rem; font-family: var(--font-head); font-size: 1rem; letter-spacing: .1em; }

/* ---------- Consultation card ---------- */
.consult { margin-top: 5rem; display: flex; justify-content: center; }
.consult-card { width: 100%; max-width: 56rem; border-radius: 1rem; padding: 1px; }
.consult-inner { position: relative; z-index: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem; background: var(--bg-light); color: var(--ink); }
html.dark:not(.light) .consult-inner { background: #1b1b1b; color: var(--brand-white); backdrop-filter: blur(40px); }
@media (min-width: 768px) { .consult-inner { flex-direction: row; } }
.consult-photo { position: relative; margin: 0; overflow: hidden; }
@media (min-width: 768px) { .consult-photo { width: 19rem; flex: 0 0 19rem; } }
.consult-photo img { height: 30rem; width: 100%; object-fit: cover; object-position: center 10%; transform-origin: bottom; transform: scale(.92); }
@media (min-width: 768px) { .consult-photo img { height: 27rem; } }
.consult-photo figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 5rem 1rem 1.5rem; text-align: center; color: #fffbf3; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.45), transparent); display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.consult-photo strong { font: 400 1.5rem/1.05 var(--font-head); }
.consult-photo figcaption > span { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .consult-photo figcaption > span { letter-spacing: 0; font-size: .85rem; }
.consult-photo em { font-style: normal; font-size: .75rem; opacity: .8; }
.consult-photo .cert-row { justify-content: center; gap: .35rem; margin-top: .2rem; }
.consult-photo .cert-row span { padding: .2rem .5rem; font-size: .62rem; letter-spacing: .06em; border-color: rgba(255,255,255,.6); }
.consult-text { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 1.75rem; text-align: center; }
@media (min-width: 768px) { .consult-text { align-items: flex-start; gap: .75rem; text-align: start; } }
.consult-text .h2 { font-size: 2.33rem; line-height: 1.15; }
.consult-text .light { font-size: 1rem; }
.consult-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
@media (min-width: 768px) { .consult-foot { align-items: flex-start; } }
.consult-book { font: 400 1.45rem var(--font-head); }
.consult-text .btn { justify-content: space-between; }

/* Founder photo has more headroom than the others: frame it a little lower. */
.consult-photo { background: #000; }
.consult-photo img[src*="esam"] { height: auto; transform: none; }
/* Team thumbnails shot at a different distance from the rest use pre-framed square crops (thumb in i18n.js). */
.stack-item img[src*="-thumb"] { object-position: center; transform: none; }


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .about-panel { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 1.75rem; }
  #header { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .brand-icon { height: 2.6rem; }
  .brand-wordmark { height: 1.7rem; }
  .nav-pill, .header-actions .btn, .orb-btn { display: none; }
  .menu-btn { display: block; }
  .hero { padding-bottom: 12rem; }
  .hero-content { grid-template-columns: 1fr; gap: 2rem; }
  .hero-title { font-size: clamp(2rem, 9.5vw, 3.2rem); max-width: 100%; }
  .hero-title .line { white-space: normal; flex-wrap: wrap; row-gap: .1em; }
  .cycle-wrap, .cycle, .cycle-reserve { white-space: normal; }
  .cycle-wrap { width: auto; max-width: 100%; }
  .hero-side { max-width: 100%; }
  .hero-sub { max-width: 100%; font-size: 1.3rem; }
  .vm-grid, .leader-inner, .leader-contact, .inquiry-grid, .field-row { grid-template-columns: 1fr; }
  .leader-photo { min-height: 30rem; }
  .hero-rule { width: 6rem; }
}
@media (max-width: 600px) {
  .pcard { width: 17rem; height: 15rem; }
  .pcard.wide { width: 20rem; }
  .hero-title { font-size: clamp(2.4rem, 11.5vw, 3.4rem); }
  .wa-btn { display: none; }
  .stats { gap: 2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-border-card::before, .gradient-border-card::after, .marquee-track, .hero-rotor img { animation: none !important; }
  .ch { opacity: 1 !important; }
}

/* ---------- Careers page ---------- */
.careers-page main { padding-top: 7.5rem; }
.careers-hero { padding: 2rem 0 3rem; }
.careers-hero .h2 { font-size: clamp(2.6rem, 5.5vw, 4.5rem); max-width: 16ch; }
.careers-hero .light { max-width: 60ch; margin-top: 1.2rem; font-size: 1.05rem; }
.careers-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; padding-bottom: 5rem; }
.careers-side { display: grid; gap: 1.25rem; }
.careers-side .label { margin-bottom: .25rem; }
.role-card { padding: 1.4rem 1.5rem; border-radius: 1.25rem; border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); cursor: pointer; }
.role-card:hover { border-color: var(--foreground); transform: translateY(-2px); }
.role-card h3 { font-size: 1.5rem; font-style: italic; }
html[lang="ar"] .role-card h3 { font-style: normal; }
.role-card p { margin-top: .4rem; font-weight: 300; font-size: .95rem; color: var(--muted); }
.role-card small { display: block; margin-top: .6rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
html[lang="ar"] .role-card small { letter-spacing: 0; font-size: .8rem; }
.file-field { display: grid; gap: .4rem; }
.file-drop { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: .9rem; border: 1px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.04); cursor: pointer; transition: border-color .3s, background .3s; }
.file-drop:hover, .file-drop.drag { border-color: var(--cyan); background: rgba(39,252,242,.06); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: var(--cyan); }
.file-drop b { display: block; font-weight: 500; font-size: .95rem; }
.file-drop span { display: block; font-size: .78rem; opacity: .65; font-weight: 300; }
.file-drop.has-file { border-style: solid; border-color: rgba(39,252,242,.6); }
.file-name { font-size: .85rem; color: var(--cyan); min-height: 1.2em; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; font-weight: 300; cursor: pointer; }
.check input { margin-top: .25rem; accent-color: var(--cyan); }
.careers-page .footer { margin-top: 2rem; }
@media (max-width: 860px) { .careers-grid { grid-template-columns: 1fr; } }

/* ---------- Reading text: upright serif ----------
   Paragraphs, lists and card copy use the heading serif in its upright style (Instrument Serif; Amiri in Arabic).
   Headings keep their own styles, and small interface text (menu, buttons, form fields, uppercase labels) stays
   in the body sans for legibility. The serif runs small, so sizes are set a step larger than the sans they replace. */
.hero-sub, .intro-lead, .vm-text, .why-intro, .why-card p, .wl-face.back p,
.acc-tagline, .acc-prose p, .acc-prose .acc-list li, .leader-text p, .founder-bio p, .clients-intro,
.ecard-body p, .inquiry-copy .light, .inquiry-points li, .visit-address, .footer-col ul,
.consult-text .light, .careers-hero .light, .role-card p {
  font-family: var(--font-head); font-style: normal; font-weight: 400;
}
.vm-text { font-size: 1.25rem; line-height: 1.5; }
.why-card p { font-size: 1.15rem; line-height: 1.5; }
.acc-tagline { font-size: 1.2rem; }
.acc-prose p { font-size: 1.15rem; line-height: 1.45; }
.acc-prose .acc-list li { font-size: 1.05rem; line-height: 1.35; }
.leader-text p, .founder-bio p { font-size: 1.15rem; line-height: 1.5; }
.inquiry-copy .light { font-size: 1.25rem; line-height: 1.45; }
.inquiry-points li { font-size: 1.15rem; }
.footer-col ul { font-size: 1.1rem; }
.consult-text .light, .careers-hero .light { font-size: 1.2rem; line-height: 1.5; }
.role-card p { font-size: 1.1rem; line-height: 1.45; }
html[lang="ar"] :is(.vm-text, .why-card p, .acc-prose p, .leader-text p, .founder-bio p, .inquiry-copy .light, .consult-text .light, .careers-hero .light, .role-card p) { line-height: 1.8; }

/* Justified reading text (client request): paragraphs are flush on both the left and right edges.
   The last line of each paragraph stays at the start edge. */
.hero-sub, .intro-lead, .vm-text, .why-intro, .why-card p, .wl-face.back p, .acc-prose p, .leader-text p,
.founder-bio p, .clients-intro, .ecard-body p, .inquiry-copy .light, .careers-hero .light, .role-card p {
  text-align: justify; text-align-last: start; text-justify: inter-word;
}
@media (min-width: 768px) { .consult-text .light { text-align: justify; text-align-last: start; } }
/* The hero runs large in a narrow column: spread the extra space between letters, not only words, so no wide gaps open. */
html[lang="en"] .hero-sub { text-justify: inter-character; }

/* Sectors heading: italic serif at the content's start edge. */
.portfolio .label { font-style: italic; text-align: start; }
html[lang="ar"] .portfolio .label { font-style: normal; }


/* Small status message (e.g. "Email address copied"). */
.site-toast { position: fixed; inset-inline: 1rem; bottom: 1.5rem; z-index: 10070; width: fit-content; max-width: min(34rem, calc(100% - 2rem)); margin-inline: auto; padding: .85rem 1.2rem; border-radius: 1rem; background: rgba(20,20,20,.92); border: 1px solid var(--line); color: var(--brand-white); font: 400 1.05rem/1.4 var(--font-head); text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.site-toast.show { opacity: 1; transform: none; }

/* ---------- Section heading underline ----------
   A simple gradient line exactly as long as the heading text. */
.hd-line { position: relative; width: fit-content; max-width: 100%; padding-bottom: .9rem; text-align: start; }
.hd-line::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--purple)); }
html[dir="rtl"] .hd-line::after { background: linear-gradient(270deg, var(--cyan), var(--blue) 55%, var(--purple)); }
.about-title.hd-line, .why-head .hd-line { margin-bottom: .4rem; }

/* Framed panels (About, Why Choose Us) reach out by their own padding, so their headings line up with every other
   section heading on the content's start edge. --pp never exceeds the space beside the content column. */
.about-panel, .why-head { --pp: clamp(.75rem, (100vw - 75rem) / 2 - .5rem, 3rem); padding-inline: var(--pp); margin-inline: calc(-1 * var(--pp)); width: calc(100% + 2 * var(--pp)); max-width: none; }
/* Vision / Mission cards line up with the About panel's outer edges (same outward offset). */
.vm-grid { --pp: clamp(.75rem, (100vw - 75rem) / 2 - .5rem, 3rem); margin-inline: calc(-1 * var(--pp)); width: calc(100% + 2 * var(--pp)); }