/* RightWise on Divi 5: loaded before the v5 component rules.
   Divi 5 renders every section, row, column and module as a flex box.
   Inside RightWise sections (.rw) they fall back to normal blocks here, at
   single-class specificity, so the v5 component rules that follow
   (.hero.hero-photo, .cards, .cta ...) and the Divi layer can set their own display. */
.et_flex_section:where(.rw),
.et_flex_row:where(.rw *),
.et_flex_column:where(.rw *),
.et_flex_module:where(.rw *):where(:not(.et_pb_button)) { display: block; }
.et_flex_section:where(.rw), .et_flex_row:where(.rw *), .et_flex_column:where(.rw *), .et_flex_module:where(.rw *) { gap: normal; flex-direction: row; }
.et_flex_section:where(.rw) { align-items: normal; }
/* Divi paints every section white; v5 sections bring their own backgrounds. */
.et_pb_section:where(.rw) { background-color: transparent; }
/* Divi indents and pads every content list; the v5 rules start lists from zero. */
.entry-content ul:where(.rw *), .entry-content ol:where(.rw *) { padding: 0; line-height: inherit; }
/* Divi removes the underline from every link; v5 keeps the browser default and opts out per component. */
:where(body.rw-site) a { text-decoration: underline; }
/* Divi spaces and centres modules; v5 component margins (applied after this) take over. */
.et_pb_module:where(.rw *) { margin: 0; }

/* ==========================================================================
   RightWise — site.css
   Mobile-first. Uses logical properties (inline/block) so the Arabic (RTL)
   layout mirrors automatically. No inline styles are needed by the HTML,
   which keeps the Content-Security-Policy strict (no 'unsafe-inline').
   ========================================================================== */

/* ---------- 0. Self-hosted brand fonts (SIL Open Font License) ----------
   Served from /assets/fonts — no third-party requests, no layout flash when
   switching language. unicode-range means Arabic files only load when needed. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/cairo-arabic-wght-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/cairo-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

/* Metric-matched stand-in fonts: while the brand fonts download, text is drawn
   in Arial resized to Montserrat / IBM Plex Sans proportions, so the swap causes
   no layout shift (CLS). Values computed from the actual font files. */
@font-face { font-family: "Montserrat Fallback"; font-weight: 100 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
  size-adjust: 109.08%; ascent-override: 88.74%; descent-override: 23.01%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 100 900;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 97.45%; ascent-override: 105.18%; descent-override: 28.22%; line-gap-override: 0%; }

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --navy: #0C2340;
  --navy-2: #12305A;
  --navy-3: #1A3D6E;
  --blue: #2E9FD9;          /* brand accent — use on dark or for large type */
  --blue-ink: #1A73A8;      /* accessible blue for small text on white (5.0:1) */
  --sky: #8FD0F2;
  --mist: #C9D6E3;

  /* Neutrals */
  --ink: #0C2340;
  --text: #33475B;
  --muted: #5B6B7E;
  --line: #E1E8F0;
  --soft: #F4F7FB;
  --white: #FFFFFF;

  /* Utility */
  --wa: #187A3F;            /* WhatsApp green, darkened for 5:1 contrast */
  --ok: #187A3F;
  --err: #B42318;

  /* Type */
  --f-head: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --fs-h3: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);

  /* Spacing scale (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(56px, 8vw, 104px);
  --maxw: 1200px;

  /* Shape & depth */
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --r-btn: 8px;             /* all CTA buttons share this radius */
  --shadow-1: 0 1px 2px rgba(12, 35, 64, .06), 0 2px 8px rgba(12, 35, 64, .05);
  --shadow-2: 0 10px 30px rgba(12, 35, 64, .12);
  --header-h: 72px;
}

[dir="rtl"] {
  --f-head: "Cairo", "Montserrat", system-ui, Tahoma, Arial, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, Tahoma, Arial, sans-serif;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.4; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul { margin: 0; padding: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.mt { margin-top: var(--s-4); }
.lead-sm { font-size: var(--fs-md); }

/* Skip link */
.skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -60px;
  z-index: 1000;
  background: var(--navy);
  color: var(--white);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: var(--s-3); color: var(--white); }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}
section { padding-block: var(--section); }
section.soft { background: var(--soft); }

.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 + p, .sec-head .eyebrow + h2 { margin-top: var(--s-3); }
.sec-head p { font-size: var(--fs-md); color: var(--muted); margin-top: var(--s-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  line-height: 1.4;
}
h2.eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: var(--fs-sm); }

.lead { font-size: var(--fs-lg); line-height: 1.6; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: 2px solid transparent;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue-ink); color: var(--white); }
.btn-primary:hover { background: var(--navy); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); color: var(--white); }
.btn-wa { background: var(--wa); color: var(--white); }
.btn-wa:hover { background: #12612F; color: var(--white); }
.btn svg { flex: none; }

.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- 5. Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
  direction: ltr;            /* header keeps the same layout in EN and AR */
}
[dir="rtl"] .menu, [dir="rtl"] .menu a { direction: rtl; }  /* items read right-to-left inside the same centred block */
[dir="rtl"] .menu a { font-weight: 700; }   /* Cairo runs lighter than Montserrat; match visual weight */
/* Header "Contact us" button: fixed width so it never shifts between EN and AR */
.nav-cta {
  display: none;
  width: 99px;              /* was 124px: -20% */
  height: 32px;             /* was 38px: -15% */
  min-height: 0;
  padding: 0 6px;
  font-size: .8rem;
  line-height: 20px;
  white-space: nowrap;
}
.nav-cta:hover { transform: none; }
@media (min-width: 600px) {
  .nav-cta { display: inline-flex; }
  .menu-cta { display: none !important; }
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }   /* +15% */

.tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.lang {
  display: inline-flex;
  flex: none;
  direction: ltr;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--white);
}   /* total 94 x 36px (was 118 x 42): -20% width, -15% height */
.lang button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  height: 30px;
  padding: 0;
  line-height: 30px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
/* fixed widths + fixed fonts: the toggle is pixel-identical in both languages */
.lang button[lang="en"] { width: 35px; font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif; }
.lang button[lang="ar"] { width: 53px; font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; }
.lang button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.burger {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
}

/* Mobile menu: a panel under the header */
.menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--gutter) var(--s-5);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.menu.open { display: flex; }
.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--soft); color: var(--blue-ink); }
.menu a.btn { justify-content: center; margin-top: var(--s-3); min-height: 44px; color: var(--white); }
.menu a.btn:hover { background: var(--navy); color: var(--white); }

body.menu-open { overflow: hidden; }

/* Desktop: logo | menu bar (centred between them) | Contact + language.
   Side blocks have fixed widths, so the menu sits in the same place in EN and AR. */
@media (min-width: 1024px) {
  .nav {
    display: grid;
    /* fixed side columns: logo | menu block | Contact + language */
    grid-template-columns: var(--brand-w) 1fr var(--tools-w);
    gap: var(--s-4);
    --brand-w: 174px;
    --tools-w: 206px;
    --menu-w: 440px;
  }
  .brand { justify-self: start; }
  .brand img { height: 44px; }
  .burger { display: none; }
  .menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    justify-self: center;
    width: var(--menu-w);              /* same block width in EN and AR */
    justify-content: space-between;
  }
  .menu a { height: 40px; min-height: 0; padding: 0 2px; font-size: .8rem; line-height: 20px; white-space: nowrap; }
  .menu a:hover, .menu a[aria-current="page"] { background: none; }
  .tools { justify-self: end; gap: var(--s-3); }
}
@media (min-width: 1280px) {
  .nav { --brand-w: 210px; --menu-w: 500px; }
  .brand img { height: 53px; }
  .menu a { font-size: .9rem; }
}
@media (max-width: 400px) {
  .nav { gap: var(--s-2); }
  .brand img { height: 34px; }
  .lang button[lang="en"] { width: 30px; }
  .lang button[lang="ar"] { width: 46px; }
}

/* ---------- 6. Hero & sub-hero (dark) ---------- */
.hero, .sub-hero, .band, .indep, .contact, .site-footer {
  --on-dark: #D7E3EF;
  color: var(--on-dark);
}
.hero, .sub-hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(46, 159, 217, .28), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(46, 159, 217, .14), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* subtle engineering grid */
.hero::before, .sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 208, 242, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 208, 242, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero h1, .sub-hero h1, .hero h2, .sub-hero h3 { color: var(--white); }
.hero .eyebrow, .sub-hero .eyebrow { color: var(--sky); }
.hero { padding-block: clamp(64px, 10vw, 128px); }
.hero .wrap > div { max-width: 860px; }
.hero h1 { margin-top: var(--s-4); }
.hero .lead { margin-top: var(--s-5); color: var(--on-dark); max-width: 760px; }

.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); list-style: none; padding: 0; }
.pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(143, 208, 242, .35);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  color: var(--sky);
  font-size: var(--fs-sm);
  font-weight: 500;
  direction: ltr;
}

.sub-hero { padding-block: clamp(48px, 7vw, 96px); }
.sub-hero .wrap { display: grid; gap: var(--s-7); align-items: center; }
.sub-hero h1 { margin-top: var(--s-3); }
.sub-hero .lead { margin-top: var(--s-4); color: var(--on-dark); max-width: 680px; }
.sub-hero .tag { margin-top: var(--s-4); }
@media (min-width: 960px) {
  .sub-hero:not(.single) .wrap { grid-template-columns: 1.05fr .95fr; }
}

/* Breadcrumb trail: Home › Services › Page */
.crumbs { margin-bottom: var(--s-2); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mist);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin-inline: 8px; color: var(--sky); opacity: .7; }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: var(--sky); text-decoration: none; display: inline-block; padding-block: 10px; margin-block: -10px; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--mist); font-weight: 500; }

/* Signal-path card (ip-timing) */
.sigcard {
  margin: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(143, 208, 242, .22);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.sigcard svg { width: 100%; margin-block: var(--s-4); direction: ltr; }
.sigtitle { font-family: var(--f-head); font-weight: 700; color: var(--white); font-size: var(--fs-h3); margin: 0; }
.cap { font-size: var(--fs-sm); color: var(--mist); }

/* ---------- 7. Tags ---------- */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: #E7F3FB;
  color: var(--blue-ink);
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}
.sub-hero .tag { background: rgba(46, 159, 217, .18); color: var(--sky); }

/* ---------- 8. Cards ---------- */
.cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .cards.three, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) { .cards.four { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #CBDCEB; }
.card h3 { margin-top: var(--s-4); }
.card .tag { align-self: flex-start; }
.card .out { margin-top: var(--s-3); font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.card .under {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
[dir="rtl"] .card .under { letter-spacing: 0; }
.card ul { list-style: none; margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.card li {
  position: relative;
  padding-inline-start: 22px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.card .more {
  color: var(--blue-ink);
  margin-top: auto;
  padding-top: var(--s-5);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card .more::after { content: "→"; transition: transform .2s; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--blue-ink); }
[dir="rtl"] .card .more::after { content: "←"; }
.card:hover .more::after { transform: translateX(4px); }
[dir="rtl"] .card:hover .more::after { transform: translateX(-4px); }
/* whole card clickable through the single real link on the title */
.card h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.card h3 a:focus-visible { outline: none; }

/* Engagement cards */
.card.eng h3 { margin-top: 0; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.card.eng .row { margin-top: var(--s-4); }
.card.eng .row p { font-size: var(--fs-sm); }
.lbl {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue-ink);
  margin-bottom: 2px;
}
[dir="rtl"] .lbl { letter-spacing: 0; }

/* ---------- 9. Bands (CTA strips) ---------- */
.band { background: var(--navy); padding-block: clamp(36px, 5vw, 56px); }
.band .wrap { display: flex; flex-direction: column; gap: var(--s-5); }
.band h3 { color: var(--white); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.band p { color: var(--mist); margin-top: var(--s-2); }
.band .cta { margin-top: 0; }
@media (min-width: 820px) {
  .band .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
}
.band.teaser {
  background: linear-gradient(90deg, var(--navy-2), var(--navy-3));
  border-top: 1px solid rgba(143, 208, 242, .12);
}

/* ---------- 10. Stats strip ---------- */
.strip { padding-block: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--line); }
.statgrid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .statgrid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--blue); }
.sv {
  font-family: "Montserrat", var(--f-head);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  direction: ltr;
  unicode-bidi: isolate;
}
.sl { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* ---------- 11. Deliverables / numbered lists ---------- */
.dlgrid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .dlgrid { grid-template-columns: repeat(2, 1fr); } }
.dl {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dl h3 { font-size: 1.05rem; }
.dl p { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.dl-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--sky);
  font-family: "Montserrat", var(--f-head);
  font-weight: 800;
  font-size: .85rem;
}

/* ---------- 12. Case studies ---------- */
.cases { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cases:not(.one) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .cases.one { grid-template-columns: repeat(2, 1fr); } }
.cases.one:has(> .case:only-child) { grid-template-columns: 1fr; max-width: 820px; }
.case {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.client-name {
  margin: var(--s-3) 0 var(--s-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.case dl { margin: var(--s-4) 0 0; display: grid; gap: var(--s-1); }
.case dt {
  margin-top: var(--s-3);
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue-ink);
}
[dir="rtl"] .case dt { letter-spacing: 0; }
.case dd { margin: 0; font-size: var(--fs-sm); }

/* Placeholder content left for the site owner to complete */
.ph {
  color: var(--muted);
  font-style: italic;
  border: 1.5px dashed #B9C7D6;
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(12, 35, 64, .025) 8px 16px);
}
.exp.ph { display: grid; place-items: center; text-align: center; min-height: 110px; }

/* ---------- 13. Credentials ---------- */
.cgrid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cgrid { grid-template-columns: repeat(3, 1fr); } }
.cgroup {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
.cgroup h3 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--blue); display: inline-block; }
.cgroup ul { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.cgroup li { position: relative; padding-inline-start: 26px; font-size: var(--fs-sm); line-height: 1.55; }
.cgroup li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #E7F3FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%231A73A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- 14. Process steps ---------- */
.steps { display: grid; gap: var(--s-4); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.step .n {
  display: block;
  font-family: "Montserrat", var(--f-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--blue-ink);
  margin-bottom: var(--s-3);
}
.step p { margin-top: var(--s-2); font-size: var(--fs-sm); }

/* ---------- 15. Independence band ---------- */
.indep { background: linear-gradient(135deg, var(--navy), var(--navy-3)); }
.indep .wrap { display: grid; gap: var(--s-5); align-items: center; }
.indep h2 { color: var(--white); margin-top: var(--s-3); }
.indep .eyebrow { color: var(--sky); }
.indep p { font-size: var(--fs-lg); color: var(--on-dark); }
@media (min-width: 900px) { .indep .wrap { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); } }

/* ---------- 16. About ---------- */
.about-grid { display: grid; gap: var(--s-7); }
.about-grid h2 { margin-top: var(--s-3); }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.facts {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
@media (min-width: 520px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
@media (min-width: 520px) {
  .fact:nth-child(odd) { border-inline-end: 1px solid var(--line); }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }
}
.fact:last-child { border-bottom: 0; }
.fact .l { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
[dir="rtl"] .fact .l { letter-spacing: 0; }
.fact .v { margin-top: 2px; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }

/* ---------- 17. Contact ---------- */
.contact { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); }
.contact h2 { color: var(--white); margin-top: var(--s-3); }
.contact .eyebrow { color: var(--sky); }
.contact .sec-head p { color: var(--mist); }
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; gap: var(--s-8); align-items: start; } }

.cinfo { display: flex; flex-direction: column; }
.cline {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(143, 208, 242, .15);
}
.cline:last-of-type { border-bottom: 0; }
.ci {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(46, 159, 217, .16);
}
.cline .k { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sky); }
[dir="rtl"] .cline .k { letter-spacing: 0; }
.cline a, .cline .v { color: var(--white); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cline a { display: inline-block; padding-block: 8px; margin-block: -6px; }   /* larger tap area */
.cline a:hover { text-decoration: underline; }
.cinfo .btn-wa { margin-top: var(--s-5); align-self: flex-start; }

/* Form */
#enquiry {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  color: var(--text);
}
#enquiry label {
  margin-top: var(--s-4);
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
#enquiry label:first-of-type { margin-top: 0; }
#enquiry input, #enquiry select, #enquiry textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid #CCD7E3;
  border-radius: 10px;
  background: var(--white);
  font-size: 16px; /* prevents iOS zoom on focus */
  transition: border-color .2s, box-shadow .2s;
}
#enquiry textarea { resize: vertical; min-height: 120px; }
#enquiry select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230C2340' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
[dir="rtl"] #enquiry select { background-position: left 14px center; }
#enquiry input:focus, #enquiry select:focus, #enquiry textarea:focus {
  outline: none;
  border-color: var(--blue-ink);
  box-shadow: 0 0 0 4px rgba(46, 159, 217, .18);
}
#enquiry [aria-invalid="true"] { border-color: var(--err); }
#enquiry .field-err { color: var(--err); font-size: var(--fs-xs); margin-top: 4px; }
#enquiry button[type="submit"] { margin-top: var(--s-5); width: 100%; }
#enquiry button[disabled] { opacity: .6; cursor: progress; }
#formStatus { margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: 600; min-height: 1.4em; }
#formStatus.ok { color: var(--ok); }
#formStatus.err { color: var(--err); }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 18. Service sub-pages ---------- */
.why { max-width: 860px; }
.why p {
  margin-top: var(--s-4);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}

.dogrid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .dogrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dogrid { grid-template-columns: repeat(3, 1fr); } }
.doitem {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.doitem p { font-size: var(--fs-sm); }

.exps { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-5); }
@media (min-width: 760px) { .exps { grid-template-columns: repeat(2, 1fr); } }
.exp {
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--blue);
  border-radius: var(--r);
}
.exp .client-name { margin-top: 0; color: var(--ink); font-family: var(--f-head); font-weight: 700; }
.exp p { font-size: var(--fs-sm); }
.exp.ph { border-inline-start-width: 1.5px; }

.moregrid { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.morelink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}
.morelink:hover { border-color: var(--blue); color: var(--blue-ink); background: #F2F9FE; }

/* IP & timing */
.ipgrid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .ipgrid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.ipgrid h2 { margin-top: var(--s-3); }
.ipcols { display: grid; gap: var(--s-4); }
.ipcol {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
}
.ipcol p { margin-top: 6px; font-size: var(--fs-sm); }
.ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--navy);
}

.fails { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .fails { grid-template-columns: repeat(2, 1fr); } }
.fail {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.fail p { margin-top: 6px; font-size: var(--fs-sm); }

/* ---------- 19. Footer ---------- */
.site-footer {
  background: #08192F;
  padding-block: clamp(48px, 6vw, 72px) calc(var(--s-5) + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
}
.foot-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.4fr 1.2fr 1fr 1.1fr; } }
.foot-logo { display: inline-block; }
.foot-logo img { height: 48px; width: auto; }
.foot-brand p { margin-top: var(--s-4); color: var(--mist); max-width: 340px; }
.foot-h {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sky);
  margin-bottom: var(--s-3);
}
[dir="rtl"] .foot-h { letter-spacing: 0; font-size: var(--fs-sm); }
.site-footer nav a, .site-footer .foot-grid > div > a, .site-footer address {
  display: block;
  padding-block: 5px;
  color: var(--on-dark);
  text-decoration: none;
}
.site-footer a:hover { color: var(--white); text-decoration: underline; }
[dir="rtl"] .site-footer a[dir="ltr"] { text-align: right; }
.foot-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(143, 208, 242, .14);
  color: #9FB2C6;
  font-size: var(--fs-xs);
}

/* ---------- 20. RTL tweaks ---------- */
[dir="rtl"] .contact a[dir="ltr"] { display: inline-block; }
[dir="rtl"] .btn { letter-spacing: 0; }

/* ---------- 21. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .burger, .lang, .cta, .band, #enquiry, .skip { display: none !important; }
  .hero, .sub-hero, .contact, .indep, .site-footer { background: none !important; color: #000; }
  .hero h1, .sub-hero h1, .contact h2, .indep h2 { color: #000; }
  section { padding-block: 24px; }
}

/* ==========================================================================
   v2 (Oct 2026): photo hero, slogan, standards chips, service sliders,
   Insights dropdown
   ========================================================================== */

/* ---------- Hero with photo ---------- */
.hero.hero-photo {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 860px);
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--navy);
}
.hero.hero-photo::before { content: none; }
.hero-bg, .hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg { z-index: -2; }
.hero-bg img { object-fit: cover; object-position: 62% center; }
/* Brand-blue gradient: strongest top-right, fading out toward bottom-left,
   plus a soft navy scrim on the text side for legible copy. */
.hero.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom left, rgba(46, 159, 217, .62) 0%, rgba(26, 61, 110, .40) 30%, rgba(12, 35, 64, 0) 62%),
    linear-gradient(90deg, rgba(8, 25, 47, .86) 0%, rgba(8, 25, 47, .78) 45%, rgba(8, 25, 47, .45) 62%, rgba(8, 25, 47, .08) 85%);
}
[dir="rtl"] .hero.hero-photo::after {
  background:
    linear-gradient(to bottom left, rgba(46, 159, 217, .62) 0%, rgba(26, 61, 110, .40) 30%, rgba(12, 35, 64, 0) 62%),
    linear-gradient(270deg, rgba(8, 25, 47, .86) 0%, rgba(8, 25, 47, .78) 45%, rgba(8, 25, 47, .45) 62%, rgba(8, 25, 47, .08) 85%);
}
@media (max-width: 767px) {
  .hero.hero-photo { min-height: 0; }
  .hero-bg img { object-position: 70% center; }
  .hero.hero-photo::after,
  [dir="rtl"] .hero.hero-photo::after {
    background:
      linear-gradient(to bottom left, rgba(46, 159, 217, .55) 0%, rgba(12, 35, 64, 0) 60%),
      linear-gradient(180deg, rgba(8, 25, 47, .55) 0%, rgba(8, 25, 47, .78) 100%);
  }
}
.hero-photo .wrap { width: 100%; }
.hero.hero-photo .wrap > .hero-copy { max-width: 640px; }
.hero.hero-photo .lead { max-width: none; }
.hero-photo .lead { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.hero-photo h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

.slogan {
  margin: var(--s-4) 0 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(.95rem, .85rem + .45vw, 1.2rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
}
.slogan .accent { color: var(--sky); }
[dir="rtl"] .slogan { letter-spacing: 0; }

/* ---------- Standards we design in ---------- */
.standards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--soft);
}
.std-title { margin: 0; }
.std-pills { margin-top: 0; }
.std-pills .pill {
  border-color: #CFE3F2;
  background: var(--white);
  color: var(--blue-ink);
  font-weight: 600;
}

/* ---------- Service sliders: 3 cards on desktop, 2 on tablet, 1 on phones ---------- */
.slider { position: relative; }
.slider + .slider { margin-top: var(--s-5); }
.slider-track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for hover lift + focus ring, without changing alignment */
  padding: 8px 8px 12px;
  margin-inline: -8px;
  scroll-padding-inline: 8px;   /* snap cards to the content edge, not the padding */
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.slider-track > .card {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 680px) {
  .slider-track > .card { flex-basis: calc((100% - var(--s-5)) / 2); }
}
@media (min-width: 1024px) {
  .slider-track > .card { flex-basis: calc((100% - 2 * var(--s-5)) / 3); }
}
.slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.slider-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.slider-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-ink); background: #F2F9FE; }
.slider-btn:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .slider-btn svg { transform: scaleX(-1); }

/* ---------- Insights dropdown ---------- */
.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.has-sub > a { flex: 1 1 auto; }
.sub-toggle { display: none; }
.submenu { flex-basis: 100%; display: flex; flex-direction: column; padding-inline-start: var(--s-5); }
.menu .submenu a { min-height: 44px; font-weight: 500; font-size: .92rem; }
.menu a.is-active { color: var(--blue-ink); }
.has-sub.is-active > a { color: var(--blue-ink); }

@media (min-width: 1024px) {
  .has-sub { position: relative; flex-wrap: nowrap; }
  .has-sub > a { flex: none; }
  .sub-toggle {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
  }
  .sub-toggle svg { transition: transform .2s; }
  .has-sub.open .sub-toggle svg, .has-sub:hover .sub-toggle svg { transform: rotate(180deg); }
  .submenu {
    position: absolute;
    top: 100%;
    inset-inline-start: -12px;
    z-index: 20;
    min-width: 210px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* hide after the fade-out finishes... */
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  }
  .has-sub:hover .submenu, .has-sub.open .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* ...but become visible (and focusable) instantly when opening */
    transition: opacity .15s, transform .15s, visibility 0s;
  }
  .menu .submenu a {
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .menu .submenu a:hover, .menu .submenu a[aria-current="page"] { background: var(--soft); color: var(--blue-ink); }
}

/* ---------- Misc ---------- */
.band .band-title { color: var(--white); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.card.sector h3 { margin-top: var(--s-4); }
.card.sector p { margin-top: var(--s-3); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }

/* ==========================================================================
   v3 (Oct 2026): landing pages, service & sector pages
   ========================================================================== */
.page-hero .eyebrow { margin-top: var(--s-2); }
.page-hero h1 { margin-top: var(--s-3); max-width: 900px; }
.hero-tags { margin-top: var(--s-5); }
.wrap.narrow { max-width: 860px; }
.h3 { font-size: var(--fs-h3); }
.muted { color: var(--muted); }

/* card numbers + bottom art panel */
.card { --pad: clamp(22px, 2.6vw, 30px); }
.card-num {
  font-family: "Montserrat", var(--f-head);
  font-weight: 800;
  font-size: .95rem;
  color: var(--blue-ink);
  letter-spacing: .04em;
}
.svc-card .more { padding-top: var(--s-4); }
.card-media {
  display: grid;
  place-items: center;
  height: 132px;
  margin: var(--s-5) calc(-1 * var(--pad)) calc(-1 * var(--pad));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  color: var(--sky);
  background:
    linear-gradient(rgba(143, 208, 242, .08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(143, 208, 242, .08) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(260px 120px at 85% 0%, rgba(46, 159, 217, .45), transparent 70%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
}
.card-media svg { width: 58px; height: 58px; transition: transform .3s; }
.card:hover .card-media svg { transform: scale(1.06); }

/* long-form text */
.prose { margin-top: var(--s-4); }
.prose p { font-size: var(--fs-md); line-height: 1.75; }
.prose p:first-child { font-size: var(--fs-lg); color: var(--ink); }

/* checklists */
.checklist, .feature-grid { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist li, .feature-grid li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.checklist .ck, .feature-grid .ck { flex: none; margin-top: 2px; color: var(--blue-ink); }
.checklist.cols { gap: var(--s-3) var(--s-6); }
@media (min-width: 760px) { .checklist.cols { grid-template-columns: repeat(2, 1fr); } }
.feature-grid { gap: var(--s-4); }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature-grid li {
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.feature-grid strong { color: var(--ink); font-weight: 600; }

/* two-column panels */
.two-col { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.panel {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
.panel > p { margin-top: var(--s-3); }
.panel-dark { background: linear-gradient(150deg, var(--navy), var(--navy-3)); border-color: transparent; color: var(--on-dark, #D7E3EF); }
.panel-dark h2 { color: var(--white); }
.panel-dark p { color: #D7E3EF; font-size: var(--fs-md); }

/* who it's for */
.who-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 680px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .who-grid { grid-template-columns: repeat(3, 1fr); } }
.who-grid li {
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--blue);
  border-radius: var(--r);
  font-weight: 500;
  color: var(--ink);
}

/* FAQ accordion (native <details>, no script needed) */
.faqs { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.faq summary {
  position: relative;
  padding: var(--s-4) var(--s-5);
  padding-inline-end: 52px;
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue-ink);
}
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 var(--s-5) var(--s-5); color: var(--text); }

/* related links */
.related { padding-block: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.rel-grid { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
@media (min-width: 760px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel-col h3 { font-size: 1rem; margin-bottom: var(--s-3); }
.rel-col ul { list-style: none; display: grid; gap: 6px; }
.rel-col a { font-weight: 600; text-decoration: none; }
.rel-col a:hover { text-decoration: underline; }

/* CTA band + arrows */
.cta-band .wrap > div:first-child { max-width: 640px; }
.link-arrow { font-family: var(--f-head); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "→"; }
[dir="rtl"] .link-arrow::after { content: "←"; }
.strip-link { margin-top: var(--s-5); }

/* sector grid */
.sector-top { display: flex; align-items: center; justify-content: space-between; }
.sector-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #E7F3FB; color: var(--blue-ink); }
.sector-icon svg { width: 26px; height: 26px; }
.sector-card h3 { margin-top: var(--s-4); }
.sector-card > p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.sector-card .meta { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.sector-card .meta strong { color: var(--ink); font-weight: 600; }
.rel-links a { position: relative; z-index: 1; font-weight: 600; }
.sol-card p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.link-list { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.link-list a { font-weight: 600; }

/* projects + filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.filters-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-inline-end: var(--s-2); }
.chip {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-empty { margin-top: var(--s-4); color: var(--muted); }
.case.project .tag span { font: inherit; }
.case dd a { font-weight: 600; }

/* insights */
.ins-card h3 { margin-top: var(--s-3); }
.ins-card p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.ins-card.is-soon h3 { color: var(--muted); }
.tag-soon, .badge-soon { background: #EEF1F5; color: var(--muted); }
.badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: #E7F3FB;
  color: var(--blue-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.feature-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.feature-body { padding: clamp(24px, 4vw, 48px); }
.feature-body .tag { margin-inline-start: var(--s-3); }
.feature-body h2 { margin-top: var(--s-4); }
.feature-body h2 a { color: inherit; text-decoration: none; }
.feature-body h2 a::before { content: ""; position: absolute; inset: 0; }
.feature-card { position: relative; }
.feature-body p { margin-top: var(--s-3); font-size: var(--fs-md); }
.feature-body .link-arrow { margin-top: var(--s-4); color: var(--blue-ink); }
.feature-card .card-media { margin: 0; height: auto; min-height: 180px; border-radius: 0; }
.feature-card .card-media svg { width: 96px; height: 96px; }
@media (min-width: 900px) { .feature-card { grid-template-columns: 1.4fr 1fr; } }
.lib-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lib-grid { grid-template-columns: repeat(3, 1fr); } }
.lib-col { padding: var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lib-col h3 { font-size: 1.05rem; padding-bottom: var(--s-3); border-bottom: 2px solid var(--blue); display: inline-block; }
.lib-col ul { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.lib-col li { font-size: var(--fs-sm); line-height: 1.5; }
.lib-col li a { font-weight: 600; }
.lib-col li.is-soon { color: var(--muted); }

/* about */
.principle h3 { margin-top: var(--s-3); }
.principle p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.brand-card h3 { font-family: "Montserrat", var(--f-head); }
.brand-card p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.brand-card .link-arrow, .brand-card .domain, .brand-card .badge { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }
.brand-card .badge { margin-inline-start: 0; margin-top: var(--s-4); padding: 2px 10px; }
.brand-card .domain { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.brand-card.is-current { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
#numbers .statgrid { margin-top: var(--s-5); }

/* =====================================================================
   v4 (Oct 2026): photo cards, poster band, deliverables slider,
   project photos, footer + About refinements
   ===================================================================== */

/* ---------- Photo with brand-blue gradient (blue top-right → clear bottom-left) ---------- */
.card-photo, .case-photo, .sector-photo, .feature-photo { position: relative; overflow: hidden; background: var(--navy); }
.card-photo img, .case-photo img, .sector-photo img, .feature-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.card-photo::after, .case-photo::after, .sector-photo::after, .feature-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom left, rgba(46, 159, 217, .62) 0%, rgba(26, 61, 110, .40) 30%, rgba(12, 35, 64, 0) 62%),
    linear-gradient(0deg, rgba(8, 25, 47, .30) 0%, rgba(8, 25, 47, 0) 45%);
}
.card:hover .card-photo img, .case:hover .case-photo img, .card:hover .sector-photo img { transform: scale(1.04); }

/* service cards: photo bleeds to the card edges at the bottom */
.card-photo {
  aspect-ratio: 16 / 9;
  margin: var(--s-5) calc(-1 * var(--pad)) calc(-1 * var(--pad));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.svc-card .card-photo, .home-svc .card-photo { margin-top: var(--s-5); }
.home-svc .out { margin-bottom: 0; }

/* sector cards: square photo cropped to a banner at the top */
.sector-photo {
  aspect-ratio: 16 / 10;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s-4);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.feature-card .feature-photo { min-height: 200px; }

/* ---------- Insight band: data-centre poster + brand gradient ---------- */
.band.poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 112px);
  background: var(--navy);
  border-top: 0;
}
.poster-bg { position: absolute; inset: 0; z-index: -2; }
.poster-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.band.poster::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom left, rgba(46, 159, 217, .62) 0%, rgba(26, 61, 110, .40) 30%, rgba(12, 35, 64, 0) 62%),
    linear-gradient(90deg, rgba(8, 25, 47, .86) 0%, rgba(8, 25, 47, .78) 40%, rgba(8, 25, 47, .40) 65%, rgba(8, 25, 47, .10) 90%);
}
[dir="rtl"] .band.poster::after {
  background:
    linear-gradient(to bottom left, rgba(46, 159, 217, .62) 0%, rgba(26, 61, 110, .40) 30%, rgba(12, 35, 64, 0) 62%),
    linear-gradient(270deg, rgba(8, 25, 47, .86) 0%, rgba(8, 25, 47, .78) 40%, rgba(8, 25, 47, .40) 65%, rgba(8, 25, 47, .10) 90%);
}
.poster-copy { max-width: 600px; }
.poster-copy .eyebrow { color: var(--sky); }
.poster-copy h2 { margin-top: var(--s-3); color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.poster-copy p { margin-top: var(--s-3); color: #DCE8F3; font-size: var(--fs-md); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.band.poster .btn { flex: none; }
@media (max-width: 767px) {
  .poster-bg img { object-position: 82% center; }
  .band.poster::after, [dir="rtl"] .band.poster::after {
    background:
      linear-gradient(to bottom left, rgba(46, 159, 217, .55) 0%, rgba(12, 35, 64, 0) 60%),
      linear-gradient(180deg, rgba(8, 25, 47, .35) 0%, rgba(8, 25, 47, .72) 100%);
  }
}

/* ---------- Deliverables slider: 1-2 stacked, 3-4 beside them…  ---------- */
.dl-track {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--s-4) var(--s-5);
}
@media (min-width: 760px) {
  .dl-track { grid-auto-columns: calc((100% - var(--s-5)) / 2); }
}
.dl-track > .dl { scroll-snap-align: start; min-width: 0; }
.dl-track > .dl:nth-child(even) { scroll-snap-align: none; }

/* ---------- Selected work: photo cards ---------- */
.case.case-photo-card, .case.project { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .25s, box-shadow .25s; }
.case.case-photo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.case-photo { aspect-ratio: 16 / 9; }
.case-body, .case.project > :not(.case-photo) { margin-inline: clamp(22px, 2.6vw, 30px); }
.case-body { padding-block: var(--s-5) clamp(22px, 2.6vw, 30px); }
.case.project > .tag { margin-top: var(--s-5); align-self: flex-start; }
.case.project > dl { margin-bottom: clamp(22px, 2.6vw, 30px); }
.case-body h3 { margin-top: var(--s-1); }
.case-body h3 a { color: inherit; text-decoration: none; }
.case-body h3 a::before { content: ""; position: absolute; inset: 0; }
.case-body h3 a:hover { color: var(--blue-ink); }
.case-body h3 a:focus-visible { outline: none; }
.case.case-photo-card:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Footer ---------- */
.foot-brand .foot-tag { color: #D3E1EE; font-weight: 600; letter-spacing: .01em; }
.foot-bottom { text-align: center; }
.foot-legal { max-width: 860px; margin-inline: auto; line-height: 1.7; }

/* ---------- About: watercolour fact tiles, wider column ---------- */
@media (min-width: 960px) { .about-grid.about-who { grid-template-columns: 1fr 1.15fr; } }
.about-who .facts { border: 0; overflow: visible; background: none; gap: var(--s-3); }
.about-who .fact {
  border: 1px solid rgba(143, 177, 207, .35) !important;
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
}
.about-who .fact:nth-child(6n+1) { background: linear-gradient(135deg, #EAF4FB 0%, #F4F9FD 100%); }
.about-who .fact:nth-child(6n+2) { background: linear-gradient(135deg, #EEF2F6 0%, #F7F9FB 100%); }
.about-who .fact:nth-child(6n+3) { background: linear-gradient(135deg, #F1F6FA 0%, #E6F0F8 100%); }
.about-who .fact:nth-child(6n+4) { background: linear-gradient(135deg, #E9F1F7 0%, #F5F8FB 100%); }
.about-who .fact:nth-child(6n+5) { background: linear-gradient(135deg, #EDF5FA 0%, #F2F4F7 100%); }
.about-who .fact:nth-child(6n+6) { background: linear-gradient(135deg, #F0F3F7 0%, #E8F2FA 100%); }
.about-who .fact .l { color: #4E6A85; }

/* ---------- About: brand family, footers aligned on one line ---------- */
.brand-foot { margin-top: auto; padding-top: var(--s-4); display: flex; align-items: center; min-height: calc(var(--s-4) + 28px); }
.brand-card .brand-foot > * { margin: 0; padding: 0; }
.brand-card .brand-foot .badge { padding: 2px 10px; }

/* =====================================================================
   v5 (Oct 2026): no top strokes on cards, stats, poster band,
   service / sector / project dropdowns, project pages
   ===================================================================== */
.statgrid > .stat:first-child { border-inline-start: 0; padding-inline-start: 0; }

.band.poster .poster-copy .cta { margin-top: var(--s-5); }
.band.poster .wrap { display: block; }

/* dropdowns: accordion on phones/tablets, hover panel on desktop */
@media (max-width: 1023px) {
  .has-sub > a { flex: 1 1 0; min-width: 0; }
  .sub-toggle {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: var(--r-sm); background: none;
    color: var(--muted); cursor: pointer;
  }
  .sub-toggle:hover { background: var(--soft); color: var(--blue-ink); }
  .sub-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
  .has-sub.open .sub-toggle svg { transform: rotate(180deg); }
  .submenu { display: none; padding-block: 2px var(--s-2); border-inline-start: 2px solid var(--line); margin-inline-start: var(--s-3); padding-inline-start: var(--s-3); }
  .has-sub.open .submenu { display: flex; }
  .menu .submenu a { min-height: 42px; font-size: .9rem; }
}
@media (min-width: 1024px) {
  .menu .submenu.sub-sectors { min-width: 230px; }
  .menu .submenu.sub-projects { min-width: 300px; }
  .menu .submenu.sub-projects a { white-space: normal; }
}

/* project pages */
.prj-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .prj-grid { grid-template-columns: 1.35fr 1fr; } }
.prj-photo { aspect-ratio: 16 / 9; border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.prj-facts .facts { margin-top: var(--s-3); grid-template-columns: 1fr; }
.prj-facts .fact { border-inline-end: 0 !important; border-bottom: 1px solid var(--line) !important; }
.prj-facts .fact:last-child { border-bottom: 0 !important; }
.prj-facts .pills { margin-top: var(--s-3); }
.fact-links { list-style: none; display: grid; gap: 4px; }
.fact-links a { font-weight: 600; }
.prj-intro + .soft .panel p { margin-top: var(--s-3); }
.case.project h3 a { color: inherit; text-decoration: none; }
.case.project h3 a:hover { color: var(--blue-ink); }

/* insights: featured card image */
.feature-card .feature-photo { min-height: 240px; }
.prj-facts .pill { color: var(--blue-ink); background: #F2F9FE; border-color: #CFE3F2; }

/* insight band photo: keep the switch in frame at every width */
.poster-bg img { object-position: 78% 56%; }
[dir="rtl"] .poster-bg img { transform: scaleX(-1); }   /* mirror so the Arabic text sits over the calm side */
@media (max-width: 767px) {
  .poster-bg img, [dir="rtl"] .poster-bg img { object-position: center 60%; transform: none; }
}
.poster-bg picture { display: block; width: 100%; height: 100%; }


/* =====================================================================
   WordPress + Divi 5 layer
   The v5 component styles above are reused as-is. This layer:
   1) neutralises Divi's default section/row/column/module/button styling
      inside RightWise sections (.rw), and
   2) maps the v5 components onto Divi's markup
      (section > row > column > module).
   ===================================================================== */

/* ---------- page shell ---------- */
body.rw-site { font-family: var(--f-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.65; color: var(--text); background: var(--white); }
body.rw-site #page-container { overflow: visible; padding-top: 0 !important; }
body.rw-site #et-main-area, body.rw-site #main-content { background: transparent; }
body.rw-site #main-content { overflow-x: clip; }
body.rw-site .entry-content { padding: 0; }
body.rw-site article.page { margin: 0; padding: 0; }
/* Divi adds padding-bottom to headings and paragraphs; colours, sizes and
   weights come from the v5 rules above (they load after Divi's CSS). :where()
   keeps these at element specificity so component rules (.hero h1 etc.) win. */
:where(body.rw-site) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
:where(body.rw-site) p { padding-bottom: 0; }

/* ---------- sections, rows, columns, modules ---------- */
/* Divi prints its own section padding (incl. a 54px rule at 1350px+ after this
   file), so the v5 section paddings are restated here at section specificity. */
.et_pb_section.rw { padding: var(--section) 0; }
.et_pb_section.rw.hero { padding-block: clamp(64px, 10vw, 128px); }
.et_pb_section.rw.hero.hero-photo { padding-block: clamp(96px, 12vw, 160px); }
.et_pb_section.rw.sub-hero { padding-block: clamp(48px, 7vw, 96px); }
.et_pb_section.rw.band { padding-block: clamp(36px, 5vw, 56px); }
.et_pb_section.rw.band.poster { padding-block: clamp(64px, 9vw, 112px); }
.et_pb_section.rw.strip, .et_pb_section.rw.related { padding-block: clamp(40px, 6vw, 64px); }
@media print { .et_pb_section.rw { padding-block: 24px; } }
.et_pb_section.rw.soft { background-color: var(--soft); }
.et_pb_section.rw .et_pb_row {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-left));
  float: none;
}
.et_pb_section.rw .et_pb_row::after { display: none; }
.et_pb_section.rw .et_pb_row:is(.narrow, .why) { max-width: 860px; }
.et_pb_section.rw .et_pb_row + .et_pb_row,
.et_pb_section.rw .et_pb_row + .slider { margin-top: 0; }
.et_pb_section.rw .et_pb_column {
  width: auto;
  margin: 0;
  float: none;
  min-width: 0;
}
.et_pb_section.rw .et_pb_row:not(.rw-grid):not(.slider-track):not(.statgrid):not(.about-grid):not(.two-col):not(.ipgrid):not(.prj-grid) > .et_pb_column_4_4 { width: 100%; }
.et_pb_section.rw .et_pb_text { word-wrap: break-word; line-height: inherit; }
.et_pb_section.rw .et_pb_text_inner > p:empty { display: none; }


/* ---------- buttons (Divi button module carries the .btn classes) ---------- */
.et_pb_section.rw .et_pb_button_module_wrapper { display: inline-block; margin: var(--s-5) 0 0; margin-inline-end: var(--s-3); vertical-align: bottom; }
.et_pb_section.rw .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: var(--s-3); margin-inline-end: 0; }
body.rw-site a.et_pb_button.btn,
body.rw-site a.et_pb_button.btn:hover {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 22px !important;
  border-radius: var(--r-btn);
  border: 2px solid transparent;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-decoration: none;
}
body.rw-site a.et_pb_button.btn::after, body.rw-site a.et_pb_button.btn::before { display: none !important; content: none !important; }
body.rw-site a.et_pb_button.btn-primary { background: var(--blue-ink); color: var(--white); }
body.rw-site a.et_pb_button.btn-primary:hover { background: var(--navy); color: var(--white); }
body.rw-site a.et_pb_button.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
body.rw-site .soft a.et_pb_button.btn-ghost, body.rw-site .et_pb_section.rw:not(.hero):not(.sub-hero):not(.band):not(.contact):not(.indep) a.et_pb_button.btn-ghost { color: var(--navy); border-color: var(--line); }
body.rw-site a.et_pb_button.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
body.rw-site a.et_pb_button.btn-wa { background: var(--wa); color: var(--white); }
body.rw-site a.et_pb_button.btn-wa:hover { background: #12612F; color: var(--white); }
/* WhatsApp glyph only where v5 shows it (contact details); band buttons are text-only */
body.rw-site .cinfo a.et_pb_button.btn-wa::before {
  content: "" !important; display: inline-block !important; position: static; opacity: 1;
  width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("img/icon-whatsapp.svg") center / contain no-repeat; mask: url("img/icon-whatsapp.svg") center / contain no-repeat;
}

/* ---------- photos (Divi image module = photo panel) ---------- */
.et_pb_section.rw .et_pb_image { max-width: none; text-align: initial; }
/* the image wrap plays the role of v5's <picture>: full width, natural height */
.et_pb_section.rw .et_pb_image .et_pb_image_wrap { display: block; width: 100%; height: auto; }
.et_pb_section.rw .et_pb_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.et_pb_section.rw .card .card-photo, .et_pb_section.rw .card-photo { position: relative; overflow: hidden; }

/* ---------- hero & poster band: Divi section background + brand gradient ---------- */
.et_pb_section.rw.hero.hero-photo, .et_pb_section.rw.band.poster { position: relative; isolation: isolate; background-color: var(--navy); background-repeat: no-repeat; }
.et_pb_section.rw.hero.hero-photo { background-position: 62% center; }
.et_pb_section.rw.band.poster { background-position: 78% 56%; }
[dir="rtl"] .et_pb_section.rw.band.poster { background-position: 22% 56%; }
@media (min-width: 768px) {
  /* RTL: rightwise.js copies the band photo into --rw-poster; it is painted mirrored underneath */
  [dir="rtl"] .et_pb_section.rw.band.poster.rw-mirror { background-image: none !important; }
  [dir="rtl"] .et_pb_section.rw.band.poster.rw-mirror::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--rw-poster) 78% 56% / cover no-repeat; transform: scaleX(-1);
  }
}
@media (max-width: 767px) {
  .et_pb_section.rw.hero.hero-photo { background-position: 70% center; }
  .et_pb_section.rw.band.poster { background-position: 72% center; }
}
.et_pb_section.rw.hero.hero-photo > .et_pb_row, .et_pb_section.rw.band.poster > .et_pb_row { position: relative; z-index: 1; }
.et_pb_section.rw.hero .et_pb_row > .hero-copy { max-width: 640px; }
.et_pb_section.rw.band.poster .et_pb_row > .poster-copy { max-width: 600px; }
.et_pb_section.rw.band.poster .et_pb_row { display: block; }

/* ---------- section heads & text spacing ---------- */
/* v5 rules written with ">" for elements that now sit inside a Text module */
.et_pb_section.rw .sector-card .et_pb_text_inner > p { margin-top: var(--s-3); font-size: var(--fs-sm); }
.et_pb_section.rw .panel .et_pb_text_inner > p { margin-top: var(--s-3); }
/* column classes whose v5 layout applies to items that now sit in one Text module */
.et_pb_section.rw .ipcols > .et_pb_text > .et_pb_text_inner { display: grid; gap: var(--s-4); }
.et_pb_section.rw .et_pb_row + .et_pb_row { margin-top: 0; }

/* ---------- card grids: the row is the grid, each column is a card ---------- */
.et_pb_section.rw .et_pb_row.rw-grid { display: grid; }
.et_pb_section.rw .et_pb_row.cards { gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .et_pb_section.rw .et_pb_row.cards.three, .et_pb_section.rw .et_pb_row.cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .et_pb_section.rw .et_pb_row.cards.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) { .et_pb_section.rw .et_pb_row.cards.four { grid-template-columns: repeat(4, 1fr); } }
.et_pb_section.rw .et_pb_row.cases { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .et_pb_section.rw .et_pb_row.cases { grid-template-columns: repeat(3, 1fr); } }

.et_pb_section.rw .et_pb_column.card { display: flex; flex-direction: column; }
.et_pb_section.rw .et_pb_column.card .et_pb_module { position: static; }
#page-container .et_pb_section.rw .et_pb_column .et_pb_module:is(.card-photo, .case-photo, .prj-photo, .sector-photo, .feature-photo) { position: relative; overflow: hidden; }
.et_pb_section.rw .et_pb_column.card > .et_pb_text { flex: 1 1 auto; display: flex; flex-direction: column; }
.et_pb_section.rw .et_pb_column.card > .et_pb_text > .et_pb_text_inner { flex: 1 1 auto; display: flex; flex-direction: column; }
#page-container .et_pb_section.rw .et_pb_column.card .card-photo { flex: none; margin-top: var(--s-5); margin-bottom: calc(-1 * var(--pad)); margin-inline: calc(-1 * var(--pad)); aspect-ratio: 16 / 9; height: auto; }
#page-container .et_pb_section.rw .et_pb_column.sector-card .sector-photo { order: -1; flex: none; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s-4); aspect-ratio: 16 / 10; }

/* (#page-container: Divi zeroes the last module's bottom margin with a 0,6,1 selector) */

/* project cards: photo on top, text below */
.et_pb_section.rw .et_pb_column.case { display: flex; flex-direction: column; position: relative; padding: 0; overflow: hidden; }
.et_pb_section.rw .et_pb_column.case .case-photo { aspect-ratio: 16 / 9; flex: none; }
.et_pb_section.rw .et_pb_column.case.project > .et_pb_text { padding: var(--s-5) 0 clamp(22px, 2.6vw, 30px); }
.et_pb_section.rw .et_pb_column.case .et_pb_module { position: static; }
.et_pb_section.rw .et_pb_column.case h3 a::before { content: ""; position: absolute; inset: 0; }

/* sliders: the Divi row is the scroll track; JS adds the arrows */
.et_pb_section.rw .et_pb_row.slider-track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: calc(100% - 2 * var(--gutter) + 16px);
  max-width: calc(var(--maxw) - 2 * var(--gutter) + 16px);
  margin-inline: auto;
  padding: 8px 8px 12px;
  scroll-padding-inline: 8px;
}
.et_pb_section.rw .et_pb_row.slider-track::-webkit-scrollbar { display: none; }
.et_pb_section.rw .et_pb_row.slider-track > .et_pb_column { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 680px) { .et_pb_section.rw .et_pb_row.slider-track > .et_pb_column.card { flex-basis: calc((100% - var(--s-5)) / 2); } }
@media (min-width: 1024px) { .et_pb_section.rw .et_pb_row.slider-track > .et_pb_column.card { flex-basis: calc((100% - 2 * var(--s-5)) / 3); } }
.et_pb_section.rw .slider { margin-inline: 0; }
.et_pb_section.rw .slider .slider-nav { margin-top: var(--s-2); }
.et_pb_section.rw .slider + .et_pb_row.slider-track, .et_pb_section.rw .slider + .slider { margin-top: var(--s-5); }

/* deliverables: each column holds two stacked items (1 over 2, 3 over 4 ...) */
.et_pb_section.rw .et_pb_row.dl-track { display: flex; grid-template-rows: none; }
.et_pb_section.rw .et_pb_row.dl-track > .dl-col { flex: 0 0 100%; }
@media (min-width: 760px) { .et_pb_section.rw .et_pb_row.dl-track > .dl-col { flex-basis: calc((100% - var(--s-5)) / 2); } }
.et_pb_section.rw .dl-col .et_pb_text, .et_pb_section.rw .dl-col .et_pb_text_inner { height: 100%; }
.et_pb_section.rw .dl-col .et_pb_text_inner { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-4); }

/* layout rows (two columns, about grid, stats) */
.et_pb_section.rw .et_pb_row.statgrid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .et_pb_section.rw .et_pb_row.statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .et_pb_section.rw .et_pb_row.statgrid { grid-template-columns: repeat(4, 1fr); } }
.et_pb_section.rw .et_pb_row.about-grid, .et_pb_section.rw .et_pb_row.two-col, .et_pb_section.rw .et_pb_row.ipgrid, .et_pb_section.rw .et_pb_row.prj-grid { display: grid; }
.et_pb_section.rw .et_pb_row.contact-grid { display: grid; }
.et_pb_section.rw.band > .et_pb_row { display: flex; flex-direction: column; gap: var(--s-5); }
@media (min-width: 820px) {
  .et_pb_section.rw.band > .et_pb_row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.et_pb_section.rw.band .et_pb_column.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.et_pb_section.rw.band .et_pb_column.cta .et_pb_button_module_wrapper { margin: 0; }
.et_pb_section.rw.band .et_pb_column:first-child { max-width: 640px; }
.et_pb_section.rw .et_pb_column.panel { display: block; }
/* the feature card is itself the row: keep it inside the page gutter like v5's .wrap > .feature-card */
.et_pb_section.rw .et_pb_row.feature-card { display: grid; padding: 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); }
.et_pb_section.rw .et_pb_row.feature-card .feature-photo { height: 100%; min-height: 240px; }
.et_pb_section.rw .et_pb_row.feature-card .feature-photo img { height: 100%; }

/* FAQ: Divi toggle module styled like the v5 <details> accordion */
.et_pb_section.rw .et_pb_toggle.faq { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.et_pb_section.rw .et_pb_text + .et_pb_toggle.faq { margin-top: var(--s-5); }
.et_pb_section.rw .et_pb_toggle.faq + .et_pb_toggle.faq { margin-top: var(--s-3); }
.et_pb_section.rw .et_pb_toggle.faq .et_pb_toggle_title {
  position: relative; margin: 0; padding: var(--s-4) var(--s-5); padding-inline-end: 52px;
  font-family: var(--f-head); font-size: 1rem; font-weight: 700; line-height: 1.65; letter-spacing: 0; color: var(--ink); cursor: pointer;
}
.et_pb_section.rw .et_pb_toggle.faq .et_pb_toggle_title::before {
  content: "+"; position: absolute; inset-inline-end: var(--s-5); left: auto; top: 50%; margin: 0; transform: translateY(-50%);
  font-family: var(--f-head); font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--blue-ink);
}
[dir="rtl"] .et_pb_section.rw .et_pb_toggle.faq .et_pb_toggle_title::before { right: auto; }
.et_pb_section.rw .et_pb_toggle_open.faq .et_pb_toggle_title::before { content: "–"; }
.et_pb_section.rw .et_pb_toggle.faq .et_pb_toggle_content { margin: 0; padding: 0; }

/* ---------- contact form (Divi contact form module, styled like the v5 enquiry form) ---------- */
.et_pb_section.rw .rw-form { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 36px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); color: var(--text); }
.et_pb_section.rw .rw-form .et_pb_contact_form { margin: 0; display: block; }
#page-container .et_pb_section.rw .rw-form .et_pb_contact_field { display: block; width: 100% !important; margin: var(--s-4) 0 0 !important; padding: 0 !important; float: none; }
#page-container .et_pb_section.rw .rw-form .et_pb_contact_field:first-child { margin-top: 0 !important; }
.et_pb_section.rw .rw-form .et_pb_contact_form_label { display: block !important; margin: 0 0 6px; font-family: var(--f-body); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.et_pb_section.rw .rw-form .input {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #CCD7E3; border-radius: 10px;
  background-color: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.et_pb_section.rw .rw-form .input::placeholder { color: transparent; }
.et_pb_section.rw .rw-form textarea.input { min-height: 120px; resize: vertical; }
.et_pb_section.rw .rw-form select.input {
  -webkit-appearance: none; appearance: none; padding-inline-end: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230C2340' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
[dir="rtl"] .et_pb_section.rw .rw-form select.input { background-position: left 14px center; }
.et_pb_section.rw .rw-form .et_pb_contact_field[data-type="select"]::after { display: none; }
.et_pb_section.rw .rw-form .input:focus { outline: none; border-color: var(--blue-ink); box-shadow: 0 0 0 4px rgba(46, 159, 217, .18); }
.et_pb_section.rw .rw-form .et_contact_error { border-color: var(--err) !important; }
/* spam check + full-width submit */
#page-container .et_pb_section.rw .rw-form .et_contact_bottom_container { display: block; float: none; margin: var(--s-5) 0 0; text-align: start; }
#page-container .et_pb_section.rw .rw-form .et_pb_contact_right { margin: 0 !important; }
.et_pb_section.rw .rw-form .et_pb_contact_right p { margin: 0; padding: 0; }
.et_pb_section.rw .rw-form .et_pb_contact_right label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.et_pb_section.rw .rw-form .et_pb_contact_right label::before { content: "Quick check:"; font-weight: 600; color: var(--muted); margin-inline-end: 2px; }
[lang="ar"] .et_pb_section.rw .rw-form .et_pb_contact_right label::before { content: "تحقق سريع:"; }
.et_pb_section.rw .rw-form .et_pb_contact_right .et_pb_contact_captcha_question { direction: ltr; unicode-bidi: isolate; }
.et_pb_section.rw .rw-form input.et_pb_contact_captcha { width: 72px !important; min-height: 40px; padding: 6px 10px; text-align: center; }
#page-container .et_pb_section.rw .rw-form .et_pb_button_wrapper { display: block; margin: var(--s-4) 0 0; text-align: start; }
#page-container .et_pb_section.rw .rw-form .et_pb_contact_submit {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 12px 22px !important;
  border: 0; border-radius: var(--r-btn); background: var(--blue-ink); color: var(--white);
  font-family: var(--f-head); font-weight: 700; font-size: .95rem; line-height: 1.2 !important; letter-spacing: 0; cursor: pointer;
}
#page-container .et_pb_section.rw .rw-form .et_pb_contact_submit:hover { background: var(--navy); }
#page-container .et_pb_section.rw .rw-form .et_pb_contact_submit::after, #page-container .et_pb_section.rw .rw-form .et_pb_contact_submit::before { display: none; content: none; }
.et_pb_section.rw .rw-form .et-pb-contact-message { color: var(--ink); font-weight: 600; }
.et_pb_section.rw .rw-form .et-pb-contact-message:not(:empty) { margin-bottom: var(--s-4); }
.et_pb_section.rw .rw-form .et-pb-contact-message ul { margin: var(--s-2) 0 0; padding-inline-start: 1.2em; list-style: disc; font-weight: 400; color: var(--err); }

/* ---------- checklist icons (inline SVGs are not used inside editable text) ---------- */
.checklist li::before, .feature-grid li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--blue-ink);
  -webkit-mask: url("img/icon-check.svg") center / contain no-repeat; mask: url("img/icon-check.svg") center / contain no-repeat;
}
.panel-dark .checklist li::before { background: var(--sky); }

/* ---------- header language links ---------- */
.lang a {
  display: inline-block; height: 30px; padding: 0; line-height: 30px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600; text-align: center; text-decoration: none; color: var(--muted);
}
.lang a[lang="en"] { width: 35px; font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif; }
.lang a[lang="ar"] { width: 53px; font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; }
.lang a[aria-current="true"] { background: var(--navy); color: var(--white); }
.lang a:hover { color: var(--navy); }
.lang a[aria-current="true"]:hover { color: var(--white); }
@media (max-width: 400px) { .lang a[lang="en"] { width: 30px; } .lang a[lang="ar"] { width: 46px; } }

/* WordPress admin bar keeps the sticky header below it */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ==========================================================================
   13 Oct 2026 review changes
   ========================================================================== */

/* ---------- home hero: two-line headline, larger slogan, buttons above the fold on laptops ---------- */
.et_pb_section.rw.hero.hero-photo .slogan { font-size: clamp(1rem, .82rem + .62vw, 1.45rem); }
@media (min-width: 1024px) {
  .et_pb_section.rw.hero.hero-photo { padding-block: clamp(40px, 9vh, 120px) clamp(56px, 10vh, 140px); }
  .et_pb_section.rw.hero.hero-photo .et_pb_row > .hero-copy { max-width: 820px; }
  .et_pb_section.rw.hero.hero-photo h1 { font-size: clamp(3.5rem, 2rem + 2.2vw, 4.1rem); max-width: 820px; text-wrap: balance; }
  .et_pb_section.rw.hero.hero-photo .lead { max-width: 640px; }
}

/* ---------- "By the numbers": blue rule before every figure, the first one included ---------- */
.statgrid > .stat:first-child { border-inline-start: 3px solid var(--blue); padding-inline-start: var(--s-4); }

/* ---------- About: Streetwise Tech Corp family cards ----------
   Normal: 1px grey outline. Hover / keyboard focus: blue outline + soft shadow. */
.et_pb_section.rw .card.brand-card,
.et_pb_section.rw .card.brand-card.is-current { border: 1px solid #C9D3DE; box-shadow: none; }
.et_pb_section.rw .card.brand-card:hover,
.et_pb_section.rw .card.brand-card:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 12px 32px rgba(12, 35, 64, .14); }

/* ---------- footer: two short lines under the tagline ---------- */
.foot-brand .foot-about { margin-top: var(--s-2); max-width: 360px; font-size: var(--fs-sm); line-height: 1.6; color: var(--mist); }
.foot-brand .foot-about span { display: block; }

/* ---------- "Independent by design": photo background (Divi section background) ----------
   The section carries the extra class "indep-photo"; a navy wash keeps the text readable. */
.et_pb_section.rw.indep.indep-photo { position: relative; isolation: isolate; background-color: var(--navy); background-repeat: no-repeat; background-size: cover; background-position: center 55%; }
.et_pb_section.rw.indep.indep-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 24, 46, .92) 0%, rgba(8, 24, 46, .82) 48%, rgba(12, 35, 64, .72) 100%);
}
[dir="rtl"] .et_pb_section.rw.indep.indep-photo::before { background: linear-gradient(270deg, rgba(8, 24, 46, .92) 0%, rgba(8, 24, 46, .82) 48%, rgba(12, 35, 64, .72) 100%); }
@media (max-width: 899px) { .et_pb_section.rw.indep.indep-photo::before { background: rgba(8, 24, 46, .84); } }
.et_pb_section.rw.indep.indep-photo > .et_pb_row { position: relative; z-index: 1; }

/* ---------- Arabic: Cairo for all text (headings already used it; body text now too) ---------- */
[dir="rtl"] { --f-body: "Cairo", "IBM Plex Sans", system-ui, Tahoma, Arial, sans-serif; }
.lang a[lang="ar"] { font-family: "Cairo", Tahoma, sans-serif; }
/* Divi prints h1–h6 { font-family: var(--et_global_heading_font) } ('Open Sans', which has no
   Arabic glyphs) after this file on some pages; point Divi's variables at the site fonts. */
html:root { --et_global_heading_font: var(--f-head); --et_global_body_font: var(--f-body); }

/* ==========================================================================
   14 Oct 2026 review changes
   ========================================================================== */

/* ---------- desktop dropdown menus ----------
   The panel opens just below the header, with a thin blue line on the straight part of its top edge.
   It slides down into view, then its links fade and slide in one after another.
   The arrows next to Services / Sectors / Projects always point down and turn blue with the link. */
@media (min-width: 1024px) {
  .has-sub .sub-toggle svg,
  .has-sub:hover .sub-toggle svg,
  .has-sub.open .sub-toggle svg { transform: none; transition: none; }
  .has-sub:hover > a, .has-sub.open > a, .has-sub:focus-within > a,
  .has-sub:hover .sub-toggle, .has-sub.open .sub-toggle, .has-sub .sub-toggle:focus-visible { color: var(--blue-ink); }

  .submenu {
    top: calc(50% + var(--header-h) / 2 + 1px);   /* = bottom edge of the header */
    padding: 10px 8px 8px;
    transform: translateY(-10px);
    clip-path: inset(-24px -48px 100% -48px);
    transition: opacity .16s ease, transform .16s ease, clip-path .16s ease, visibility 0s linear .16s;
  }
  .has-sub:hover .submenu, .has-sub.open .submenu {
    transform: none;
    clip-path: inset(-24px -48px -60px -48px);
    transition: opacity .2s ease-out, transform .42s cubic-bezier(.16, .84, .3, 1),
                clip-path .42s cubic-bezier(.16, .84, .3, 1), visibility 0s;
  }
  /* blue line: straight part of the top edge only, stopping where the corners start to curve */
  .submenu::after {
    content: ""; position: absolute; top: -1px; height: 2px;
    inset-inline: var(--r); background: var(--blue); border-radius: 2px;
  }
  /* invisible bridge over the gap between the menu item and the panel, so the panel stays open */
  .submenu::before { content: ""; position: absolute; bottom: 100%; inset-inline: 0; height: 20px; }

  .menu .submenu a {
    opacity: 0; transform: translateY(-6px);
    transition: opacity .1s ease, transform .1s ease, background-color .15s ease, color .15s ease;
  }
  .has-sub:hover .submenu a, .has-sub.open .submenu a {
    opacity: 1; transform: none;
    transition: opacity .3s ease-out var(--d, 0s), transform .38s cubic-bezier(.16, .84, .3, 1) var(--d, 0s),
                background-color .15s ease, color .15s ease;
  }
  .submenu a:nth-child(1) { --d: .08s; }  .submenu a:nth-child(2) { --d: .11s; }
  .submenu a:nth-child(3) { --d: .14s; }  .submenu a:nth-child(4) { --d: .17s; }
  .submenu a:nth-child(5) { --d: .20s; }  .submenu a:nth-child(6) { --d: .23s; }
  .submenu a:nth-child(7) { --d: .26s; }  .submenu a:nth-child(8) { --d: .29s; }
  .submenu a:nth-child(9) { --d: .32s; }  .submenu a:nth-child(10) { --d: .35s; }
  .submenu a:nth-child(n+11) { --d: .38s; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .submenu, .has-sub:hover .submenu, .has-sub.open .submenu,
  .menu .submenu a, .has-sub:hover .submenu a, .has-sub.open .submenu a { transform: none; clip-path: none; transition: opacity .1s, visibility 0s; }
}

/* ---------- service cards: the whole card opens the service page ----------
   The title link's click area (h3 a::before) now covers the full card, including "Learn more" and the photo. */
#page-container .et_pb_section.rw .svc-card .et_pb_text,
#page-container .et_pb_section.rw .svc-card .et_pb_text_inner { position: static; }
.et_pb_section.rw .svc-card h3 a::before { z-index: 2; border-radius: var(--r); }
.et_pb_section.rw .svc-card { cursor: pointer; }
.et_pb_section.rw .svc-card:hover .more { color: var(--blue-ink); }

/* ---------- service pages: "Who This Is For" ---------- */
.et_pb_section.rw ul.who-grid, .et_pb_section.rw ul.who-grid li { list-style: none; }
.et_pb_section.rw .who-grid li { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); }
/* Divi adds round bullets to lists inside Text modules; the site's styled lists (checklists, feature/who grids,
   "Services used" links on project pages) have no bullets. */
.et_pb_section.rw .et_pb_text ul[class], .et_pb_section.rw .et_pb_text ul[class] > li { list-style: none; }

/* ==========================================================================
   14 Oct 2026 (evening) review changes
   ========================================================================== */

/* ---------- WhatsApp button: icon centred on the text line ----------
   Divi moves button icons up by half their height (translateY(-50%)), meant for its absolutely placed icons. */
body.rw-site .cinfo a.et_pb_button.btn-wa::before { transform: none !important; top: auto !important; line-height: 1 !important; font-size: inherit !important; margin: 0 !important; }

/* ---------- footer ---------- */
/* the lines under the tagline wrap at the tagline's own width */
.foot-brand .foot-text { display: inline-flex; flex-direction: column; max-width: 100%; }
.foot-brand .foot-text .foot-tag { max-width: none; }
.foot-brand .foot-text .foot-about { width: 0; min-width: 100%; max-width: none; margin-top: var(--s-2); }
/* contact links get the same hover as the menu links (white + underline) */
.site-footer .foot-grid > div > a:not(.foot-logo):hover { color: var(--white); text-decoration: underline; }

/* ---------- phones: "Standards we design in" labels on one line (titles unchanged) ---------- */
@media (max-width: 767px) {
  .standards { padding-inline: 3.5vw; }
  .std-pills { flex-wrap: nowrap; gap: 1vw; }
  .std-pills .pill { flex: none; font-size: min(2.4vw, 12px); padding: .4em .6em; white-space: nowrap; letter-spacing: 0; }
}

/* ---------- phones/tablets: menu panel opens with the desktop dropdown motion ----------
   The panel slides down, then its items fade and slide in one after another (also inside opened submenus). */
@keyframes rw-panel-in { from { transform: translateY(-10px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -60px 0); } }
@keyframes rw-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .menu.open { animation: rw-panel-in .42s cubic-bezier(.16, .84, .3, 1) both; }
  .menu.open > * { animation: rw-item-in .38s cubic-bezier(.16, .84, .3, 1) both; animation-delay: var(--d, 0s); }
  .has-sub.open .submenu > a { animation: rw-item-in .32s cubic-bezier(.16, .84, .3, 1) both; animation-delay: var(--d, 0s); }
  .menu.open > :nth-child(1) { --d: .08s; } .menu.open > :nth-child(2) { --d: .11s; } .menu.open > :nth-child(3) { --d: .14s; }
  .menu.open > :nth-child(4) { --d: .17s; } .menu.open > :nth-child(5) { --d: .20s; } .menu.open > :nth-child(6) { --d: .23s; }
  .menu.open > :nth-child(n+7) { --d: .26s; }
  .has-sub.open .submenu > a:nth-child(1) { --d: .02s; } .has-sub.open .submenu > a:nth-child(2) { --d: .05s; }
  .has-sub.open .submenu > a:nth-child(3) { --d: .08s; } .has-sub.open .submenu > a:nth-child(4) { --d: .11s; }
  .has-sub.open .submenu > a:nth-child(5) { --d: .14s; } .has-sub.open .submenu > a:nth-child(6) { --d: .17s; }
  .has-sub.open .submenu > a:nth-child(7) { --d: .20s; } .has-sub.open .submenu > a:nth-child(n+8) { --d: .23s; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .menu.open, .menu.open > *, .has-sub.open .submenu > a { animation: none; }
}

/* ---------- inner-page heroes: square + circle structure on the grid ----------
   Four circles inscribed in grid-aligned squares for the group's four brands: RightWise (blue, the origin),
   Streetwise Tech Corp, AcouRight and LumiRight. The composition is picked per page by a body class from
   functions.php (rw-grid-orbit / axes / column / constellation / none) so it never sits behind the headline.
   Wide screens only (1280px+), behind the content. */
@media (min-width: 1280px) {
  .et_pb_section.rw.sub-hero::before { background-position: right top; }
  .et_pb_section.rw.sub-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Crect x='144.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='240.5' y='0.5' width='192' height='192' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='192.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='240.5' y='288.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='192.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='336.5' cy='96.5' r='95.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='72.5' cy='264.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='264.5' cy='312.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3C/svg%3E") no-repeat right 96px top 96px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  [dir="rtl"] .et_pb_section.rw.sub-hero::before { background-position: left top; }
  [dir="rtl"] .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Crect x='192.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='0.5' width='192' height='192' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='192.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='144.5' y='288.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='240.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='96.5' cy='96.5' r='95.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='360.5' cy='264.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='168.5' cy='312.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3C/svg%3E"); background-position: left 96px top 96px; }
  body.rw-grid-axes .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Cpath d='M0.5 192.5H432.5M192.5 0.5V384.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Crect x='144.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='0.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='240.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='288.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='192.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='360.5' cy='72.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='72.5' cy='312.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='312.5' cy='312.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='192.5' cy='192.5' r='2.5' fill='rgba(46,159,217,.8)'/%3E%3C/svg%3E"); }
  [dir="rtl"] body.rw-grid-axes .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Cpath d='M432.5 192.5H0.5M240.5 0.5V384.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Crect x='192.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='0.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='240.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='96.5' y='288.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='240.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='72.5' cy='72.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='360.5' cy='312.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='120.5' cy='312.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='240.5' cy='192.5' r='2.5' fill='rgba(46,159,217,.8)'/%3E%3C/svg%3E"); }
  body.rw-grid-column .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Crect x='96.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='240.5' y='0.5' width='192' height='192' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='240.5' y='240.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='48.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='144.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='336.5' cy='96.5' r='95.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='312.5' cy='312.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='24.5' cy='72.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3C/svg%3E"); }
  [dir="rtl"] body.rw-grid-column .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Crect x='240.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='0.5' width='192' height='192' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='48.5' y='240.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='384.5' y='48.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='288.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='96.5' cy='96.5' r='95.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='120.5' cy='312.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='408.5' cy='72.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3C/svg%3E"); }
  body.rw-grid-constellation .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Cpath d='M192.5 192.5L360.5 72.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Cpath d='M192.5 192.5L72.5 264.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Cpath d='M192.5 192.5L72.5 72.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Crect x='144.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='0.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='192.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='48.5' y='48.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='192.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='360.5' cy='72.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='72.5' cy='264.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='72.5' cy='72.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='192.5' cy='192.5' r='2.5' fill='rgba(46,159,217,.8)'/%3E%3C/svg%3E"); }
  [dir="rtl"] body.rw-grid-constellation .et_pb_section.rw.sub-hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='433' height='385' viewBox='0 0 433 385'%3E%3Cpath d='M240.5 192.5L72.5 72.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Cpath d='M240.5 192.5L360.5 264.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Cpath d='M240.5 192.5L360.5 72.5' stroke='rgba(143,208,242,.2)' stroke-dasharray='2 6' fill='none'/%3E%3Crect x='192.5' y='144.5' width='96' height='96' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='0.5' y='0.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='288.5' y='192.5' width='144' height='144' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Crect x='336.5' y='48.5' width='48' height='48' fill='none' stroke='rgba(143,208,242,.13)'/%3E%3Ccircle cx='240.5' cy='192.5' r='47.5' fill='none' stroke='rgba(46,159,217,.8)'/%3E%3Ccircle cx='72.5' cy='72.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='360.5' cy='264.5' r='71.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='360.5' cy='72.5' r='23.5' fill='none' stroke='rgba(143,208,242,.26)'/%3E%3Ccircle cx='240.5' cy='192.5' r='2.5' fill='rgba(46,159,217,.8)'/%3E%3C/svg%3E"); }
  body.rw-grid-none .et_pb_section.rw.sub-hero::after { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .et_pb_section.rw.sub-hero::after { background-position: right 0 top 96px; }
  [dir="rtl"] .et_pb_section.rw.sub-hero::after { background-position: left 0 top 96px; }
}

/* ---------- homepage "Ways to engage" on phones: Divi toggles (cards stay on tablet/desktop) ---------- */
.et_pb_section.rw .et_pb_row.eng-toggles { margin-top: var(--s-5); }
.et_pb_section.rw .et_pb_toggle.eng-toggle .et_pb_toggle_content { padding: 0 var(--s-5) var(--s-5); }
.et_pb_section.rw .et_pb_toggle.eng-toggle .et_pb_toggle_content .row { margin-top: var(--s-3); }
.et_pb_section.rw .et_pb_toggle.eng-toggle .et_pb_toggle_content .row:first-child { margin-top: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.et_pb_section.rw .et_pb_toggle.eng-toggle .et_pb_toggle_content p { padding: 0; margin: 0; font-size: var(--fs-sm); }

/* 14 Oct 2026: lighter, slightly smaller breadcrumbs */
.crumbs ol { font-size: .84rem; font-weight: 500; }
.crumbs [aria-current="page"] { font-weight: 400; }

/* 14 Oct 2026: footer about text sits 5px under the tagline */
.foot-brand .foot-text .foot-tag { margin-bottom: 0; }
.foot-brand .foot-text .foot-about { margin-top: 5px; }

/* photo frames: fill and centre the image inside the aspect-ratio box */
#page-container .et_pb_section.rw .et_pb_column .et_pb_module:is(.card-photo, .case-photo, .prj-photo, .sector-photo, .feature-photo) .et_pb_image_wrap { display: block; width: 100%; height: 100%; }
#page-container .et_pb_section.rw .et_pb_column .et_pb_module:is(.card-photo, .case-photo, .prj-photo, .sector-photo, .feature-photo) img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 16 Oct 2026: Arabic toggles (class rtl-toggle-left, AR pages only): +/- icon on the left, title text on the right */
.et_pb_section.rw .et_pb_toggle.rtl-toggle-left .et_pb_toggle_title { padding-right: var(--s-5); padding-left: 52px; text-align: right; }
.et_pb_section.rw .et_pb_toggle.rtl-toggle-left .et_pb_toggle_title::before { inset-inline-end: auto; right: auto; left: var(--s-5); }

/* 17 Oct 2026: one +/- icon for every toggle (FAQ and "Ways to engage", EN and AR).
   Drawn with CSS bars instead of a font glyph, so it looks the same in Montserrat and Cairo,
   and overrides any icon picked in the Divi toggle settings. Closed = plus, open = minus. */
.et_pb_section.rw .et_pb_toggle .et_pb_toggle_title::before {
  content: "" !important; font-family: inherit !important; font-size: 0 !important;
  display: block; width: 14px; height: 14px; margin: 0; color: var(--blue-ink);
  position: absolute; top: 50%; transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: background-size .2s ease;
}
.et_pb_section.rw .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title::before {
  content: "" !important;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat;
}
.et_pb_section.rw .et_pb_toggle .et_pb_toggle_title:hover::before,
.et_pb_section.rw .et_pb_toggle .et_pb_toggle_title:focus-visible::before { color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .et_pb_section.rw .et_pb_toggle .et_pb_toggle_title::before { transition: none; }
}
/* 17 Oct 2026: About section tagline under the photo (EN + AR homepage, Text module class about-slogan).
   Echoes the hero slogan: blue bar, Montserrat 800 caps with wide tracking, second half in blue.
   Arabic: Cairo, no tracking or caps. Side padding matches the photo module so the text lines up with its edge. */
#page-container .et_pb_section.rw .et_pb_module.about-slogan { margin: 22px 0 0; padding: 0; }
#page-container .et_pb_section.rw .et_pb_module.about-slogan .et_pb_text_inner { display: grid; gap: 10px; justify-items: start; }
#page-container .et_pb_section.rw .et_pb_module.about-slogan .et_pb_text_inner::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--blue); }
#page-container .et_pb_section.rw .et_pb_module.about-slogan p {
  margin: 0; padding: 0; font-family: var(--f-head); font-size: 15px; font-weight: 800; line-height: 1.45;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
#page-container .et_pb_section.rw .et_pb_module.about-slogan p .accent { color: var(--blue-ink); }
[dir="rtl"] #page-container .et_pb_section.rw .et_pb_module.about-slogan p { font-size: 17px; letter-spacing: 0; text-transform: none; }
@media (max-width: 980px) { #page-container .et_pb_section.rw .et_pb_module.about-slogan { padding-inline: 50px; } }
@media (max-width: 767px) { #page-container .et_pb_section.rw .et_pb_module.about-slogan { margin-top: 18px; padding-inline: 20px; } #page-container .et_pb_section.rw .et_pb_module.about-slogan p { font-size: 13.5px; letter-spacing: .16em; } [dir="rtl"] #page-container .et_pb_section.rw .et_pb_module.about-slogan p { font-size: 16px; letter-spacing: 0; } }
/* 17 Oct 2026: "Keep exploring" links are grey on every Services, Sectors and Projects page (EN + AR),
   set here once instead of per link in the editor. Hover turns them brand blue. */
#page-container .et_pb_section.rw.related .rel-col a { color: #808080; transition: color .15s ease; }
#page-container .et_pb_section.rw.related .rel-col a:hover,
#page-container .et_pb_section.rw.related .rel-col a:focus-visible { color: var(--blue-ink); }
/* 4 Nov 2026: Arabic titles end on a round dot. Cairo draws "." as a square; functions.php wraps each full stop
   in Arabic headings and slogans in .rw-dot, drawn here as a circle in the text colour, sized and placed like
   Cairo's own full stop (about .16em square on the baseline). The "." is still in the page, clipped out of view. */
.rw-dot {
  display: inline-block; width: .18em; height: .18em; margin-inline-start: .05em;
  border-radius: 50%; background: currentColor;
  overflow: hidden; text-indent: 1em; white-space: nowrap; vertical-align: baseline;
}
/* 4 Nov 2026: floating WhatsApp + "back to top" buttons on every page (EN + AR); markup in functions.php,
   right after the footer. They float on the end side of the screen (right in English, left in Arabic):
   WhatsApp at the bottom in brand blue with a white glyph, "back to top" above it in white with a navy
   arrow, both turning navy on hover; a thin white ring keeps them visible over photos and navy bands.
   Desktop (1024px+): at the end of the page WhatsApp stops on the footer copyright line, centred on it.
   .rw-fabs is a zero-height sticky strip just below the footer and rightwise.js sets --rw-fab-dock (how
   far the copyright line's centre sits above the end of the footer); the footer's bottom padding leaves
   room for that stop. Phones and tablets (menu-button layout, under 1024px): the strip is simply fixed,
   and WhatsApp fades out once the footer phone number scrolls up to it (rightwise.js adds .wa-off), so
   it never covers the footer; the copyright row keeps its original layout. */
:root { --rw-fab-wa: 56px; --rw-fab-gap: 20px; --rw-fab-stack: 12px; --rw-fab-line: calc(var(--rw-fab-gap) + var(--rw-fab-wa) / 2); }
.rw-fabs {
  position: sticky; z-index: 90; height: 0; pointer-events: none;
  bottom: calc(var(--rw-fab-line) + env(safe-area-inset-bottom, 0px) - var(--rw-fab-dock, 45px));
}
.rw-fabs-in {
  position: absolute; inset-inline-end: var(--rw-fab-gap); bottom: calc(var(--rw-fab-dock, 45px) - var(--rw-fab-wa) / 2);
  display: flex; flex-direction: column; align-items: center; gap: var(--rw-fab-stack); pointer-events: none;
}
.rw-fabs.is-fixed { position: fixed; inset-inline: 0; bottom: env(safe-area-inset-bottom, 0px); }
.rw-fabs.is-fixed .rw-fabs-in { bottom: var(--rw-fab-gap); }
.rw-fabs .rw-fab {
  pointer-events: auto; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .25s ease, visibility .25s;
}
.rw-fabs .rw-fab svg { display: block; }
.rw-fabs .rw-fab:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.rw-fabs .rw-fab-wa {
  width: var(--rw-fab-wa); height: var(--rw-fab-wa); background: var(--blue-ink); color: var(--white);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 10px 24px rgba(12, 35, 64, .28);
}
.rw-fabs .rw-fab-wa svg { width: 28px; height: 28px; }
.rw-fabs .rw-fab-wa:hover, .rw-fabs .rw-fab-wa:focus-visible { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.rw-fabs .rw-fab-top {
  width: 44px; height: 44px; background: var(--white); color: var(--navy);
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(12, 35, 64, .18);
}
.rw-fabs .rw-fab-top svg { width: 20px; height: 20px; }
.rw-fabs .rw-fab-top:hover, .rw-fabs .rw-fab-top:focus-visible { background: var(--navy); color: var(--white); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 8px 20px rgba(12, 35, 64, .24); }
.rw-fabs .rw-fab-top:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(10px); }
body.menu-open .rw-fabs { display: none; }
@media (min-width: 1024px) {
  /* room for the stop: the copyright line's centre sits at least one button-line above the end of the page */
  .site-footer { padding-bottom: calc(max(var(--s-5), var(--rw-fab-line) - 10px) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1023px) {
  .rw-fabs { position: fixed; inset-inline: 0; bottom: env(safe-area-inset-bottom, 0px); }
  .rw-fabs .rw-fabs-in { bottom: var(--rw-fab-gap); }
  .rw-fabs.wa-off .rw-fab-wa { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.85); }
}
@media (max-width: 767px) {
  :root { --rw-fab-wa: 52px; --rw-fab-gap: 16px; --rw-fab-stack: 10px; }
  .rw-fabs .rw-fab-wa svg { width: 26px; height: 26px; }
}
@media print { .rw-fabs { display: none !important; } }
/* 4 Nov 2026: footer legal line, "© 2026 RightWise. All rights reserved. A brand of Streetwise Tech Corp. · License No. 4306997.01".
   Tablet and desktop: one line. Phones: two lines, breaking after "All rights reserved." */
@media (max-width: 767px) {
  .foot-legal .fl-short, .foot-legal .fl-brand { display: block; white-space: nowrap; }
  /* the longer line needs about 26.5 x the font size: shrink slightly on phones narrower than ~370px so it stays on one line */
  .foot-legal { font-size: min(var(--fs-xs), calc((100vw - 34px) / 27)); }
}