/* Consult One — theme layer. Design tokens come from theme.json (--wp--preset--*).
   Logical properties throughout so the Arabic (RTL) side needs no second stylesheet. */

:root {
  --c1-line: var(--wp--custom--line);
  --c1-line-dark: var(--wp--custom--line-dark);
  --c1-gutter: var(--wp--custom--gutter);
  --c1-radius: var(--wp--custom--radius);
  --c1-radius-lg: var(--wp--custom--radius-lg);
  --c1-ease: cubic-bezier(.2, .7, .2, 1);
  --c1-header-h: 5rem;
  --c1-shadow: 0 1px 2px rgba(38, 48, 80, .05), 0 18px 40px -24px rgba(38, 48, 80, .28);
  --c1-shadow-lg: 0 2px 4px rgba(38, 48, 80, .05), 0 40px 80px -40px rgba(38, 48, 80, .35);
}

/* ---------- One switchable accent across the whole site ----------
   The colour switcher (Choose theme) toggles body.c1-theme-{red,green,blue}.
   The DEFAULT — and the brand — is the maroon red. Every c1- component below
   reads --c1-accent, so one click recolours the entire design, on every page. */
:root {
  --c1-accent: #c0403f;   /* brand maroon — default */
  --c1-accent-d: #a33534;
  --c1-hl: #e2726f;
  --c1-accent-tint: color-mix(in srgb, var(--c1-accent) 12%, #fff);
  --c1-accent-tint-2: color-mix(in srgb, var(--c1-accent) 22%, #fff);
}
/* A leftover #c1-red-fix style hard-locks one red with `html:root:root`
   !important, which also stops the green/blue switch working. These selectors
   are deliberately more specific so the switch works and red = the brand maroon. */
html:root:root body.c1-theme-red,
html:root:root body:not(.c1-theme-green):not(.c1-theme-blue) { --c1-accent:#c0403f !important; --c1-accent-d:#a33534 !important; --c1-hl:#e2726f !important; }
html:root:root body.c1-theme-green { --c1-accent:#1aa45a !important; --c1-accent-d:#147a43 !important; --c1-hl:#42e08b !important; }
html:root:root body.c1-theme-blue  { --c1-accent:#1f8bdc !important; --c1-accent-d:#1668a8 !important; --c1-hl:#5cc0ff !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--c1-header-h) + 1rem); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

:focus-visible { outline: 3px solid var(--c1-accent); outline-offset: 3px; border-radius: 2px; }
.c1-dark :focus-visible { outline-color: var(--c1-hl); }
::selection { background: var(--c1-accent-tint); color: var(--wp--preset--color--navy); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto; width: auto; height: auto; margin: 0; padding: .75rem 1rem;
  background: var(--wp--preset--color--navy); color: #fff; z-index: 100000;
  inset-inline-start: 1rem; inset-block-start: 1rem; text-decoration: none;
}

/* ---------- Arabic ---------- */
.c1-lang-ar { font-family: var(--wp--preset--font-family--arabic); }
.c1-lang-ar :is(h1, h2, h3, h4) { font-family: var(--wp--preset--font-family--arabic); font-weight: 700; }
.c1-lang-ar { --c1-tracking: 0; }

/* ---------- Layout primitives ---------- */
.c1-wrap { width: min(100% - 2 * var(--c1-gutter), 1280px); margin-inline: auto; }
.c1-section { padding-block: var(--wp--preset--spacing--60); position: relative; }
.c1-section--tight { padding-block: var(--wp--preset--spacing--50); }
.c1-section + .c1-section { border-block-start: 1px solid var(--c1-line); }

.c1-dark, .is-style-c1-dark {
  background: var(--wp--preset--color--navy);
  color: #fff;
}
.c1-dark :is(h1, h2, h3), .is-style-c1-dark :is(h1, h2, h3) { color: #fff; }
.c1-dark a, .is-style-c1-dark a { color: var(--c1-hl); }
.c1-dark .c1-section + .c1-section { border-color: var(--c1-line-dark); }
.c1-paper-2 { background: var(--wp--preset--color--paper-2); }

/* ---------- Editorial lockup ---------- */
.c1-eyebrow {
  font-size: var(--wp--preset--font-size--xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c1-accent);
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem;
}
.c1-dark .c1-eyebrow { color: var(--c1-hl); }
.c1-lang-ar .c1-eyebrow { letter-spacing: 0; }

.c1-head { display: grid; gap: 1.25rem 3rem; align-items: end; margin-block-end: var(--wp--preset--spacing--50); }
@media (min-width: 900px) { .c1-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.c1-head > :where(h1, h2) { margin: 0; text-wrap: balance; }
.c1-lead { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); max-width: 62ch; text-wrap: pretty; }
.c1-dark .c1-lead { color: rgba(255, 255, 255, .8); }
.c1-measure { max-width: 66ch; }

/* ---------- Answer block: the passage AI engines quote ---------- */
.c1-answer, .is-style-c1-answer {
  border-inline-start: 3px solid var(--c1-accent);
  background: var(--wp--preset--color--paper-2);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  border-radius: 0 var(--c1-radius) var(--c1-radius) 0;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.6;
  color: var(--wp--preset--color--ink);
  max-width: 72ch;
}
.c1-answer > :first-child { margin-block-start: 0; }
.c1-answer > :last-child { margin-block-end: 0; }

/* ---------- Section rail (fixed table of contents) ---------- */
.c1-rail { display: none; }

@media (min-width: 1500px) {
  .c1-rail {
    display: block; position: fixed; inset-inline-start: 2rem; inset-block-start: 50%;
    transform: translateY(-50%); z-index: 40;
    font-family: var(--wp--preset--font-family--mono);
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    max-inline-size: 13rem;
  }
  .c1-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
  .c1-rail a {
    color: var(--wp--preset--color--muted-soft); text-decoration: none;
    display: flex; align-items: center; gap: .6rem; opacity: .65;
    transition: opacity .2s var(--c1-ease), color .2s var(--c1-ease);
  }
  .c1-rail a::before {
    content: ""; inline-size: 1.25rem; block-size: 1px; background: currentcolor;
    flex: none; transition: inline-size .25s var(--c1-ease);
  }
  .c1-rail a:hover, .c1-rail a:focus-visible { opacity: 1; color: var(--c1-accent); }
  .c1-rail a[aria-current] { opacity: 1; color: var(--c1-accent); }
  .c1-rail a[aria-current]::before { inline-size: 2.25rem; }
  .c1-rail__n { font-variant-numeric: tabular-nums; opacity: .7; }
  .c1-rail__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  body.c1-on-dark .c1-rail a { color: rgba(255, 255, 255, .7); }
  body.c1-on-dark .c1-rail a[aria-current],
  body.c1-on-dark .c1-rail a:hover { color: #fff; }
}

.c1-lang-ar .c1-rail { letter-spacing: 0; text-transform: none; font-family: var(--wp--preset--font-family--arabic); font-size: .8rem; }

/* ---------- Citable heading anchors ---------- */
.c1-anchor {
  margin-inline-start: .4em; opacity: 0; text-decoration: none;
  color: var(--c1-accent); font-weight: 400;
  transition: opacity .2s var(--c1-ease);
}
:is(h2, h3):hover .c1-anchor, .c1-anchor:focus-visible { opacity: .6; }

/* ---------- Cards & grids ---------- */
.c1-grid { display: grid; gap: 1.5rem; }
.c1-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.c1-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.c1-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.c1-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--c1-line);
  border-radius: var(--c1-radius);
  padding: var(--wp--preset--spacing--40);
  display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .25s var(--c1-ease), transform .25s var(--c1-ease);
}
.c1-card:hover { box-shadow: var(--c1-shadow); transform: translateY(-2px); }
.c1-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--navy); margin: 0; }
.c1-card__body { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin: 0; line-height: 1.55; }
.c1-card--accent { border-block-start: 3px solid var(--c1-accent); }

/* ---------- Tech stack rows ---------- */
.c1-stack { display: grid; gap: .75rem; }
.c1-stack__row {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--c1-line);
  border-inline-start: 4px solid var(--c1-accent);
  border-radius: var(--c1-radius); padding: 1.1rem 1.4rem;
}
.c1-stack__row:nth-child(even) { border-inline-start-color: var(--wp--preset--color--navy); }
.c1-stack__label { font-size: .7rem; letter-spacing: .12em; font-weight: 700; color: var(--wp--preset--color--muted-soft); text-transform: uppercase; min-inline-size: 5.5rem; }
.c1-chip { background: var(--c1-accent-tint); color: var(--c1-accent-d); font-size: var(--wp--preset--font-size--xs); font-weight: 600; padding: .4rem .75rem; border-radius: 6px; }
.c1-stack__row:nth-child(even) .c1-chip { background: var(--wp--preset--color--paper-3); color: var(--wp--preset--color--navy); }

/* ---------- Check list ---------- */
.is-style-c1-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.is-style-c1-checks li { display: flex; gap: .75rem; align-items: start; line-height: 1.55; }
.is-style-c1-checks li::before {
  content: ""; flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .18rem;
  background: var(--c1-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Stats ---------- */
.c1-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 2rem; text-align: center; }
.c1-stats__n { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--wp--preset--font-size--2xl); line-height: 1; color: var(--wp--preset--color--navy); }
.c1-dark .c1-stats__n { color: #fff; }
.c1-stats__l { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin-block-start: .4rem; }
.c1-dark .c1-stats__l { color: var(--wp--preset--color--muted-soft); }

/* ---------- Header ---------- */
.c1-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--c1-line);
}
.c1-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-block-size: var(--c1-header-h); }

/* ---------- Print ---------- */
@media print {
  .c1-rail, .c1-header, .c1-footer, .c1-anchor { display: none !important; }
  .c1-dark { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------- Category tabs (server-rendered: every panel is in the HTML) ---------- */
.c1-tabs { margin-block-start: var(--wp--preset--spacing--50); }
.c1-tabs__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-block-end: var(--wp--preset--spacing--50); }
.c1-tab {
  display: flex; flex-direction: column; gap: .25rem; text-align: start;
  background: var(--wp--preset--color--paper); border: 1px solid var(--c1-line);
  border-radius: var(--c1-radius); padding: 1rem 1.35rem; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .2s var(--c1-ease), box-shadow .2s var(--c1-ease);
}
.c1-tab:hover { border-color: var(--wp--preset--color--muted-soft); }
.c1-tab[aria-selected="true"] {
  background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy);
  box-shadow: 0 4px 0 0 var(--c1-accent);
}
.c1-tab__t { font-weight: 700; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--navy); }
.c1-tab__s { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted-soft); }
.c1-tab[aria-selected="true"] .c1-tab__t { color: #fff; }
.c1-tab[aria-selected="true"] .c1-tab__s { color: rgba(255, 255, 255, .72); }
.c1-tabs__h { text-align: center; margin-block: 0 .5rem; }
.c1-tabs__panel > .c1-lead { margin-inline: auto; text-align: center; margin-block-end: var(--wp--preset--spacing--40); }

/* No JS: show every panel rather than hiding content. */
.no-js .c1-tabs__panel[hidden] { display: block !important; }

/* ---------- Legacy JS-rendered hero ---------- */
/* The hero placeholder hides itself with `#main:has(section.coh) #c1-hero-ph`,
   which only works when a #main ancestor exists. This is the belt to that
   braces: hide the placeholder as soon as the real hero is anywhere on the
   page, so a missing landmark can never leave a blank 470px box again. */
body:has(section.coh) #c1-hero-ph,
body.coh-ready #c1-hero-ph { display: none !important; }

.c1-main { display: block; }

/* =========================================================================
   MEGA MENU — redesign + overflow fix
   =========================================================================
   The original panel was a fixed 680px whose inner grid declared three
   columns (`1fr 1fr 1.1fr`) for four columns of content. The fourth was
   auto-placed into an implicit track and ran ~65px past the panel edge,
   which is why "Brand & Content" was clipped mid-word.

   Real structure (verified in the DOM, not guessed):
     .c1nav-item > .c1nav-mega > .c1nav-mega-inner > .c1nav-mega-col
       .c1nav-mega-head > a.c1nav-mega-headlink
       a.c1nav-mega-link > span.c1nav-mega-chip + span.c1nav-mega-txt
                             span.c1nav-mega-name + span.c1nav-mega-sub

   Fixed in the theme rather than the inline block so it survives the theme
   options being edited. `.c1nav-item` prefix outranks the inline rules
   without needing !important.
   ====================================================================== */

.c1nav-item .c1nav-mega {
  width: min(1180px, calc(100vw - 3rem));
  max-width: none;
  padding: 1.75rem;
  border-radius: var(--c1-radius-lg);
  border: 1px solid var(--c1-line);
  box-shadow: var(--c1-shadow-lg);
}

/* Four real columns. */
.c1nav-item .c1nav-mega .c1nav-mega-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.c1nav-item .c1nav-mega .c1nav-mega-col {
  padding: 0 1.25rem;
  min-width: 0;                 /* lets titles wrap rather than overflow */
  border-inline-start: 1px solid var(--c1-line);
}
.c1nav-item .c1nav-mega .c1nav-mega-col:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.c1nav-item .c1nav-mega .c1nav-mega-col:last-child { padding-inline-end: 0; }

/* Category heading — a red rule under it does the grouping work the
   column borders alone could not. */
.c1nav-item .c1nav-mega .c1nav-mega-head {
  margin: 0 0 .875rem;
  padding: 0 0 .625rem;
  border-block-end: 2px solid var(--c1-accent);
}
.c1nav-item .c1nav-mega .c1nav-mega-headlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted-soft);
  text-decoration: none;
  white-space: normal;
  text-wrap: balance;
}
.c1nav-item .c1nav-mega .c1nav-mega-headlink:hover { color: var(--c1-accent); }

/* Items. The 30px chip was pure decoration and stole the width that forced
   titles onto three lines; a left accent bar on hover reads better and
   costs no horizontal space. */
.c1nav-item .c1nav-mega .c1nav-mega-chip { display: none; }

.c1nav-item .c1nav-mega .c1nav-mega-link {
  display: block;
  position: relative;
  padding: .55rem .75rem;
  margin-inline: -.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .18s var(--c1-ease);
}
.c1nav-item .c1nav-mega .c1nav-mega-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .55rem;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--c1-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .18s var(--c1-ease);
}
.c1nav-item .c1nav-mega .c1nav-mega-link:hover,
.c1nav-item .c1nav-mega .c1nav-mega-link:focus-visible {
  background: var(--wp--preset--color--paper-2);
}
.c1nav-item .c1nav-mega .c1nav-mega-link:hover::before,
.c1nav-item .c1nav-mega .c1nav-mega-link:focus-visible::before { transform: scaleY(1); }

.c1nav-item .c1nav-mega .c1nav-mega-txt { display: block; }

.c1nav-item .c1nav-mega .c1nav-mega-name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--navy);
  text-wrap: balance;
  transition: color .18s var(--c1-ease);
}
.c1nav-item .c1nav-mega .c1nav-mega-link:hover .c1nav-mega-name { color: var(--c1-accent); }

.c1nav-item .c1nav-mega .c1nav-mega-sub {
  display: block;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
  margin-block-start: .1rem;
  text-wrap: pretty;
}

.c1-lang-ar .c1nav-item .c1nav-mega .c1nav-mega-headlink { letter-spacing: 0; }

/* Tablet: two columns. Phone: one. */
@media (max-width: 1100px) {
  .c1nav-item .c1nav-mega .c1nav-mega-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0;
  }
  .c1nav-item .c1nav-mega .c1nav-mega-col:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}
@media (max-width: 700px) {
  .c1nav-item .c1nav-mega { width: calc(100vw - 2rem); padding: 1.25rem; }
  .c1nav-item .c1nav-mega .c1nav-mega-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 0;
  }
  .c1nav-item .c1nav-mega .c1nav-mega-col {
    border-inline-start: 0;
    padding-inline: 0;
  }
}

/* =========================================================================
   HERO — server-rendered fallback
   =========================================================================
   The slider builds itself in JavaScript, so the homepage shipped with no
   <h1> at all and showed a blank 470px box whenever the script did not run
   (the live Arabic homepage bug). This static hero is real HTML: crawlers
   and AI agents always get the heading, and if the slider ever fails again
   the visitor sees a proper hero instead of an empty band.
   ====================================================================== */

.c1-hero-seo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-inline: var(--c1-gutter);
  max-width: 1280px;
  margin-inline: auto;
  z-index: 1;
}
.c1-hero-seo__eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c1-hl); margin: 0;
}
.c1-hero-seo h1 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 900;
  color: #fff;
  max-width: 18ch;
  text-wrap: balance;
}
.c1-hero-seo h1 b, .c1-hero-seo h1 strong { color: var(--c1-hl); font-weight: 900; }
.c1-hero-seo p {
  margin: 0; max-width: 52ch; font-size: 1.0625rem;
  line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.c1-lang-ar .c1-hero-seo__eyebrow { letter-spacing: 0; }

/* Once the real slider has mounted, the static copy steps aside. */
body.coh-ready .c1-hero-seo,
body:has(section.coh .coh-slide) .c1-hero-seo { display: none; }

/* =========================================================================
   TRUSTED-BY CLIENT STRIP
   =========================================================================
   Rendered above the footer on every page. The original Elementor strip sat
   directly under the hero, competing with the slider for the first screen;
   it is hidden below rather than deleted, so nothing is lost from the page
   content if this is ever turned off.
   ====================================================================== */

.c1-clients {
  background: var(--wp--preset--color--paper-2);
  border-block-start: 1px solid var(--c1-line);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.c1-clients__kicker {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted-soft);
}
.c1-lang-ar .c1-clients__kicker { letter-spacing: 0; font-size: .8125rem; }

/* Explicit column counts, not auto-fit: eight clients across seven auto
   columns orphans the last one on a row of its own. Four gives two even rows. */
.c1-clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: .5rem 0;
}
.c1-clients__grid > * { flex: 0 0 50%; }
@media (min-width: 700px)  { .c1-clients__grid > * { flex-basis: 33.333%; } }
@media (min-width: 1100px) { .c1-clients__grid > * { flex-basis: 20%; } }

.c1-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4rem;
  block-size: 100%;
  padding: .5rem .75rem;
  text-decoration: none;
}

/* Logos: muted so the strip reads as one row rather than eight competing
   brands, full colour on hover. */
.c1-clients__img {
  max-block-size: 2.5rem;
  max-inline-size: 13rem;
  inline-size: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .25s var(--c1-ease), opacity .25s var(--c1-ease);
}
.c1-clients__item:hover .c1-clients__img,
.c1-clients__item:focus-visible .c1-clients__img { filter: grayscale(0); opacity: 1; }

/* Fallback until a logo file is supplied — honest type, not a fake mark. */
.c1-clients__wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .02em;
  line-height: 1.25;
  text-align: center;
  color: var(--wp--preset--color--muted-soft);
  text-wrap: balance;
  transition: color .2s var(--c1-ease);
}
a.c1-clients__item:hover .c1-clients__wordmark { color: var(--c1-accent); }
.c1-lang-ar .c1-clients__wordmark { font-family: var(--wp--preset--font-family--arabic); }

@media (prefers-reduced-motion: reduce) {
  .c1-clients__img { transition: none; }
}

/* The original in-page strip, superseded by the one above the footer. */
.c1-trust-strip { display: none !important; }

/* ---------- Technologies band (homepage) ----------
   Elementor renders this as a raw HTML widget, so every class here has to be
   self-sufficient — no block-editor layout wrappers to lean on. */
.c1-tech-band { background: var(--wp--preset--color--paper-2, #f6f7f8); padding-block: clamp(3.5rem, 7vw, 6rem); }
/* Inside Elementor the band's background and padding come from the section
   itself, so it can run full-bleed; the inner element must not repeat them. */
.elementor .c1-tech-band { background: none; padding-block: 0; }
.c1-tech-grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .c1-tech-grid { grid-template-columns: 1fr; } }
.c1-tech-copy h2 { margin: .4rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; }
.c1-tech-copy .c1-lead { margin-block-end: 1.6rem; }
.c1-tech-cta { margin-block-start: 2rem; }
.c1-btn {
  display: inline-block; background: var(--c1-accent); color: #fff;
  padding: .85rem 1.6rem; border-radius: 8px; font-weight: 600; text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.c1-btn:hover, .c1-btn:focus-visible { background: var(--c1-accent-d); color: #fff; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .c1-btn { transition: none; } }
/* The check list is a flex row, which turns a leading <strong> into its own
   column and leaves the sentence ragged. In this band the whole item is one
   sentence, so run it as normal flow with the tick absolutely placed. */
.c1-tech-copy .is-style-c1-checks li { display: block; position: relative; padding-inline-start: 1.9rem; }
.c1-tech-copy .is-style-c1-checks li::before { position: absolute; inset-inline-start: 0; inset-block-start: .28em; margin-block-start: 0; }

/* =====================================================================
   Homepage — the approved design (inc/home.php renders these blocks)
   ===================================================================== */

/* Elementor wrappers: the section itself carries its background and
   padding, so the wrapper must be full-bleed and add nothing. */
.elementor-section.c1-home-wrap > .elementor-container { max-width: none; width: 100%; }
.elementor-section.c1-home-wrap > .elementor-container > .elementor-column { width: 100%; }
.elementor-section.c1-home-wrap .elementor-widget-wrap { padding: 0; }
.elementor-section.c1-home-wrap .elementor-widget-html { margin: 0; }

.c1-home-head { text-align: center; max-width: 60rem; margin-inline: auto; }
.c1-home-head h2, .c1-svc__head h2, .c1-workband__head h2, .c1-about h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900; letter-spacing: -.015em; line-height: 1.1;
  font-size: clamp(2rem, 4vw, 2.75rem); color: var(--wp--preset--color--navy); margin: .35rem 0 0;
}
.c1-lang-ar :is(.c1-svc__head h2, .c1-workband__head h2, .c1-about h2) { letter-spacing: 0; font-weight: 700; }

/* ---------- Buttons ---------- */
.c1-btn--ghost { background: transparent; color: var(--wp--preset--color--navy); border: 1.5px solid var(--wp--preset--color--navy); }
.c1-btn--ghost:hover, .c1-btn--ghost:focus-visible { background: var(--wp--preset--color--navy); color: #fff; }
.c1-btn--light { background: #fff; color: var(--c1-accent); font-weight: 700; }
.c1-btn--light:hover, .c1-btn--light:focus-visible { background: var(--c1-accent-tint); color: var(--c1-accent-d); }
.c1-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.c1-btn--outline:hover, .c1-btn--outline:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- 14 services ---------- */
.c1-svc { background: var(--wp--preset--color--paper); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.c1-svc__head { text-align: center; }
.c1-svc__hint { margin: 1.25rem 0 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--muted-soft); }
.c1-lang-ar .c1-svc__hint { letter-spacing: 0; }
.c1-svc__tabs { margin-block-start: 1.25rem; }
.c1-svc__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); margin-block-end: 2.5rem; }
.c1-svc-tab { flex-direction: row; align-items: center; gap: .9rem; padding: 1rem 1.25rem; }
.c1-svc-tab__i { flex: none; inline-size: 1.65rem; block-size: 1.65rem; color: var(--wp--preset--color--muted); }
.c1-svc-tab__i svg { inline-size: 100%; block-size: 100%; }
.c1-svc-tab[aria-selected="true"] .c1-svc-tab__i { color: var(--c1-hl); }
.c1-svc-tab__x { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.c1-svc-panel__h { text-align: center; font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 1.75rem; color: var(--wp--preset--color--navy); }

.c1-svc-grid { display: grid; gap: 1.25rem; }
.c1-svc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.c1-svc-grid--4, .c1-svc-grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.c1-svc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--wp--preset--color--paper); border: 1px solid var(--c1-line);
  border-radius: var(--c1-radius-lg); overflow: hidden;
  transition: box-shadow .25s var(--c1-ease), transform .25s var(--c1-ease), border-color .25s var(--c1-ease);
}
.c1-svc-card:hover, .c1-svc-card:focus-visible { box-shadow: var(--c1-shadow); transform: translateY(-3px); border-color: transparent; }
.c1-svc-card__art { display: block; background: linear-gradient(180deg, var(--wp--preset--color--paper-3), var(--wp--preset--color--paper-2)); aspect-ratio: 200 / 110; }
.c1-svc-card__art svg { inline-size: 100%; block-size: 100%; display: block; }
.c1-svc-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.35rem 1.4rem; }
.c1-svc-card__t { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--navy); }
.c1-svc-card__p { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.55; color: var(--wp--preset--color--muted); }
.c1-svc-card__more { margin-block-start: auto; padding-block-start: .5rem; font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--c1-accent); }
.c1-svc-explore { text-align: center; margin: 2rem 0 0; }
.c1-svc-explore a { color: var(--c1-accent); font-weight: 600; text-decoration: none; border-block-end: 2px solid currentcolor; padding-block-end: .2rem; }

.c1-svc-tech { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); padding-block-start: clamp(2rem, 4vw, 3rem); border-block-start: 1px solid var(--c1-line); }
.c1-svc-tech__h { text-align: center; margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--wp--preset--color--navy); }
.c1-svc-tech__lead { text-align: center; margin: .5rem auto 1.75rem; color: var(--wp--preset--color--muted); max-width: 48ch; }
.c1-tech-chips__lead { text-align: center; margin: 1.75rem 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted-soft) !important; }
.c1-lang-ar .c1-tech-chips__lead { letter-spacing: 0; font-size: .875rem; }
.c1-tech-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.c1-tech-chip { display: inline-flex; align-items: center; padding: .45rem .9rem; border: 1px solid var(--c1-line); border-radius: 999px; background: var(--wp--preset--color--paper); font-size: .8125rem; font-weight: 600; color: var(--wp--preset--color--navy) !important; text-decoration: none !important; transition: border-color .2s var(--c1-ease), color .2s var(--c1-ease), background-color .2s var(--c1-ease); }
.c1-tech-chip:hover, .c1-tech-chip:focus-visible { border-color: var(--c1-accent); color: var(--c1-accent) !important; background: var(--c1-accent-tint); }
.c1-tech-grid4 { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .c1-tech-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c1-tech-grid4 { grid-template-columns: 1fr; } }
.c1-tech-card {
  display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit;
  background: var(--wp--preset--color--paper); border: 1px solid var(--c1-line); border-radius: var(--c1-radius); padding: 1.5rem;
  transition: box-shadow .25s var(--c1-ease), transform .25s var(--c1-ease);
}
.c1-tech-card:hover, .c1-tech-card:focus-visible { box-shadow: var(--c1-shadow); transform: translateY(-2px); }
.c1-tech-card__badge {
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .95rem;
  background: var(--c1-accent-tint); color: var(--c1-accent);
}
.c1-tech-card:nth-child(4n+3) .c1-tech-card__badge, .c1-tech-card:nth-child(4n+4) .c1-tech-card__badge { background: var(--wp--preset--color--paper-3); color: var(--wp--preset--color--navy); }
.c1-tech-card__t { font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--navy); }
.c1-tech-card__p { font-size: var(--wp--preset--font-size--sm); line-height: 1.55; color: var(--wp--preset--color--muted); }

/* ---------- Stats band ---------- */
.c1-statband { padding-block: clamp(2.75rem, 5vw, 3.75rem); }
.c1-statband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.5rem; }
.c1-statband__item { display: grid; gap: .35rem; justify-items: center; text-align: center; position: relative; }
@media (min-width: 900px) {
  .c1-statband__item + .c1-statband__item::before { content: ""; position: absolute; inset-block: 10%; inset-inline-start: -.75rem; inline-size: 1px; background: var(--wp--preset--color--navy-line); }
}
.c1-statband__n { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1; color: #fff; letter-spacing: -.01em; }
.c1-statband__item--accent .c1-statband__n { color: var(--c1-hl); }
.c1-statband__l { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted-soft); }

/* ---------- Selected work ---------- */
.c1-workband { background: var(--wp--preset--color--paper); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.c1-workband__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-block-end: 2.25rem; }
.c1-workband__all { color: var(--c1-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.c1-workband__all:hover { text-decoration: underline; }
.c1-workband__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.c1-work { display: flex; flex-direction: column; border: 1px solid var(--c1-line); border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--paper); transition: box-shadow .25s var(--c1-ease), transform .25s var(--c1-ease); }
.c1-work:hover { box-shadow: var(--c1-shadow); transform: translateY(-3px); }
.c1-work__media { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--wp--preset--color--navy), var(--wp--preset--color--navy-line)); overflow: hidden; }
.c1-work__media > img, .elementor .c1-work__media > img { inline-size: 100%; block-size: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.c1-work__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.35rem 1.4rem; }
.c1-work__tag { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--muted-soft); }
.c1-lang-ar .c1-work__tag { letter-spacing: 0; }
.c1-work__t { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--navy); }
.c1-work__p { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.5; color: var(--wp--preset--color--muted); }

/* ---------- About ---------- */
.c1-about { background: var(--wp--preset--color--paper-2); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.c1-about__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .c1-about__grid { grid-template-columns: 1fr; } }
.c1-about .c1-lead { margin-block: 1rem 1.5rem; }
.c1-about__list li { display: block; position: relative; padding-inline-start: 1.9rem; }
.c1-about__list li::before { position: absolute; inset-inline-start: 0; inset-block-start: .28em; margin-block-start: 0; }
.c1-about__cta { margin-block-start: 2rem; }
.c1-about__para { background: var(--wp--preset--color--paper); border: 1px solid var(--c1-line); border-inline-start: 4px solid var(--c1-accent); border-radius: var(--c1-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.c1-about__para p { margin: 0; font-size: var(--wp--preset--font-size--md); line-height: 1.7; color: var(--wp--preset--color--ink); }

/* ---------- Contact (reusable) ---------- */
.c1-contact__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
@media (max-width: 900px) { .c1-contact__grid { grid-template-columns: 1fr; } }
.c1-contact__card { background: var(--wp--preset--color--paper); border: 1px solid var(--c1-line); border-radius: var(--c1-radius-lg); padding: 1.75rem; }
.c1-contact__card dl { margin: 0; display: grid; gap: 1.1rem; }
.c1-contact__row dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted-soft); font-weight: 600; }
.c1-contact__row dd { margin: .2rem 0 0; color: var(--wp--preset--color--ink); }
.c1-contact__form .wpcf7-form :is(input:not([type=submit]), select, textarea) { inline-size: 100%; font: inherit; padding: .8rem 1rem; border: 1px solid var(--c1-line); border-radius: 8px; background: #fff; }
.c1-contact__form .wpcf7-form input[type=submit] { background: var(--c1-accent); color: #fff; border: 0; border-radius: 8px; padding: .9rem 1.6rem; font-weight: 600; cursor: pointer; }

/* ---------- CTA band ---------- */
.c1-ctaband { background: linear-gradient(120deg, var(--c1-accent-d), var(--c1-accent)); color: #fff; text-align: center; padding-block: clamp(3.5rem, 7vw, 5rem); }
.c1-ctaband h2 { margin: 0; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -.01em; }
.c1-lang-ar .c1-ctaband h2 { letter-spacing: 0; font-weight: 700; }
.c1-ctaband p.c1-ctaband__p { margin: 1rem auto 0; max-width: 40rem; color: #fbe3e2; font-size: var(--wp--preset--font-size--md); }
.c1-ctaband__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-block-start: 1.75rem; }

/* Responsive refinements + Arabic typography for the homepage blocks */
@media (max-width: 1100px) { .c1-svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c1-svc__list { grid-template-columns: 1fr; } }
.c1-statband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .c1-statband__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c1-lang-ar :is(.c1-svc__head h2, .c1-workband__head h2, .c1-about h2, .c1-ctaband h2, .c1-svc-card__t, .c1-work__t, .c1-tech-card__t, .c1-svc-tech__h, .c1-svc-panel__h, .c1-tab__t) {
  font-family: var(--wp--preset--font-family--arabic); letter-spacing: 0;
}

/* A site snippet forces `body p { color: … !important }`. These two are the
   only paragraphs whose colour is part of the design, so they push back. */
.elementor p.c1-eyebrow, p.c1-eyebrow { color: var(--c1-accent) !important; }
.c1-svc__head p.c1-eyebrow, .c1-workband__head p.c1-eyebrow, .c1-about p.c1-eyebrow { justify-content: inherit; }
.c1-svc__head p.c1-eyebrow { justify-content: center; }
.c1-ctaband p.c1-ctaband__p { color: #fbe3e2 !important; }
.c1-ctaband a.c1-btn--outline { color: #fff; }

/* ---------- Uniform card & tab sizing (no big-then-small) ----------
   Grid rows share one height, cards fill it, so every box in a row matches
   whatever the tallest one needs — and the footer link sits on one line. */
.c1-svc__list { grid-auto-rows: 1fr; }
.c1-svc-tab { min-height: 5.25rem; align-items: center; }
.c1-svc-grid, .c1-tech-grid4 { grid-auto-rows: 1fr; }
.c1-svc-card, .c1-tech-card, .c1-work { height: 100%; }
.c1-svc-card__body { flex: 1 1 auto; }
.c1-tech-card { justify-content: flex-start; }
.c1-tech-card__p { margin-block-start: auto; padding-block-start: .35rem; }
/* Cap the service panels at four equal columns so the 3-card panels don't
   stretch into three wide boxes next to the four-card panel. */
@media (min-width: 1101px) {
  .c1-svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin-inline: auto; }
  .c1-svc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c1-svc-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin-inline: auto; }
}

/* ======================================================================
   Services icon bar — 14 pictograms in one row under the homepage slider.
   Desktop: one even row. Below 1100px: a horizontal scroller with snap.
   ====================================================================== */

.c1-svcbar {
  background: var(--wp--preset--color--paper);
  border-block-start: 1px solid var(--c1-line);
  border-block-end: 1px solid var(--c1-line);
  padding-block: .75rem;
}
.c1-svcbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .125rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c1-svcbar__list::-webkit-scrollbar { display: none; }
/* Edge fade hints that the row scrolls on narrow screens. */
@media (max-width: 1199px) {
  .c1-svcbar__list { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent); }
  .c1-lang-ar .c1-svcbar__list, [dir="rtl"] .c1-svcbar__list { mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 3rem), transparent); -webkit-mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 3rem), transparent); }
}
.c1-svcbar__cell {
  flex: 0 0 auto;
  inline-size: 7.5rem;
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
}
@media (min-width: 1200px) {
  .c1-svcbar__list { overflow: visible; }
  .c1-svcbar__cell { flex: 1 1 0; inline-size: auto; min-inline-size: 0; }
}
.c1-svcbar__cell { --c1-svc: var(--c1-accent); }
.c1-svcbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  block-size: 100%;
  padding: .75rem .375rem .875rem;
  border-radius: .75rem;
  text-decoration: none !important;
  color: var(--wp--preset--color--navy) !important;
  transition: color .25s var(--c1-ease);
}
/* The pictograms paint with --c1-accent; each cell re-points it at its own hue
   so the icon turns full colour on hover / spotlight. Resting state is muted. */
.c1-svcbar__ico {
  --c1-accent: var(--c1-svc);
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 4.75rem;
  block-size: 3rem;
  border-radius: 1rem;
  filter: grayscale(1);
  opacity: .72;
  transform: scale(1);
  transition: transform .35s var(--c1-ease), filter .35s var(--c1-ease), opacity .35s var(--c1-ease), background-color .35s var(--c1-ease), box-shadow .35s var(--c1-ease);
}
.c1-svcbar__ico svg { display: block; inline-size: 4.5rem; block-size: auto; aspect-ratio: 200 / 110; }
.c1-svcbar__ico::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--c1-svc) 12%, #fff);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s var(--c1-ease), transform .35s var(--c1-ease);
}
.c1-svcbar__ico > svg { position: relative; }
.c1-svcbar__item:hover .c1-svcbar__ico,
.c1-svcbar__item:focus-visible .c1-svcbar__ico,
.c1-svcbar__cell.is-spot .c1-svcbar__ico {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.22) translateY(-3px);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--c1-svc) 70%, transparent);
}
.c1-svcbar__item:hover .c1-svcbar__ico::before,
.c1-svcbar__item:focus-visible .c1-svcbar__ico::before,
.c1-svcbar__cell.is-spot .c1-svcbar__ico::before { opacity: 1; transform: scale(1); }
.c1-svcbar__item:hover,
.c1-svcbar__item:focus-visible,
.c1-svcbar__cell.is-spot .c1-svcbar__item { color: var(--c1-svc) !important; }
.c1-svcbar__lbl {
  font-family: var(--wp--preset--font-family--display);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  transition: transform .35s var(--c1-ease);
}
.c1-svcbar__item:hover .c1-svcbar__lbl,
.c1-svcbar__cell.is-spot .c1-svcbar__lbl { transform: translateY(2px); }
.c1-lang-ar .c1-svcbar__lbl { font-family: var(--wp--preset--font-family--arabic); font-size: .8125rem; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .c1-svcbar__item, .c1-svcbar__ico, .c1-svcbar__ico::before, .c1-svcbar__lbl { transition: none; }
  .c1-svcbar__item:hover .c1-svcbar__ico { transform: none; }
}

/* ======================================================================
   First screen (homepage): header + slider + services bar + client line
   fill the viewport; the following sections snap into view one by one.
   --c1-fold-rest = everything in the first screen except the slider; the
   CSS default is refined by a small script once the header is measured.
   ====================================================================== */
:root { --c1-fold-rest: 354px; }
.admin-bar { --c1-fold-rest: 386px; }
@media (max-width: 1199px) { :root { --c1-fold-rest: 330px; } .admin-bar { --c1-fold-rest: 376px; } }
@media (max-width: 700px) { :root { --c1-fold-rest: 300px; } }
html:root:root body.home #coh-hero {
  min-height: max(420px, calc(100svh - var(--c1-fold-rest))) !important;
  height: auto !important;
}
html:root:root body.home #coh-hero .coh-slide { min-height: 100%; }
@media (min-width: 1000px) {
  /* Full-page scroll: every "page" snaps under the sticky header. The first
     page is the top of the document (header + slider + bar + client line). */
  :root:has(body.home) { scroll-snap-type: y mandatory; scroll-padding-top: var(--c1-nav-h, 74px); }
  /* The first page snaps to the document top (body), never to the sticky
     header — a sticky element is a moving snap target and hangs the tab. */
  body.home { scroll-snap-align: start; }
  body.home .elementor-element-services-section,
  body.home .elementor-element-c1tech01,
  body.home .elementor-element-stats-section,
  body.home .elementor-element-c1work01,
  body.home .elementor-element-c1about01,
  body.home .c1-inquiry { scroll-snap-align: start; scroll-snap-stop: always; }
  body.home .elementor-location-footer { scroll-snap-align: end; }
  /* Each page fills the screen; shorter ones centre their content. */
  body.home .elementor-element-c1tech01,
  body.home .elementor-element-stats-section,
  body.home .elementor-element-c1work01,
  body.home .elementor-element-c1about01,
  body.home .c1-inquiry {
    min-height: calc(100svh - var(--c1-nav-h, 74px));
    display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box;
  }
  body.home .elementor-element-services-section { min-height: calc(100svh - var(--c1-nav-h, 74px)); }
}
@media (prefers-reduced-motion: reduce) {
  :root:has(body.home) { scroll-snap-type: none; }
}

/* Client line: one row, colour logos in bordered cards, slow marquee. */
.c1-clients--line {
  padding-block: .75rem;
  border-block-start: 1px solid var(--c1-line);
  border-block-end: 1px solid var(--c1-line);
  background: var(--wp--preset--color--paper);
  overflow: hidden;
}
.c1-clients__line { display: flex; align-items: center; gap: 1.25rem; width: min(100% - 2 * var(--c1-gutter), 1480px); margin-inline: auto; }
.c1-clients__tag {
  flex: none;
  max-inline-size: 9.5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--wp--preset--color--muted-soft);
}
.c1-lang-ar .c1-clients__tag { letter-spacing: 0; font-size: .8125rem; }
.c1-clients__viewport {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.c1-clients__track {
  display: flex;
  align-items: center;
  gap: .75rem;
  inline-size: max-content;
  padding-block: .35rem;
  animation: c1-marquee 55s linear infinite;
}
.c1-lang-ar .c1-clients__track { animation-name: c1-marquee-rtl; }
.c1-clients--line:hover .c1-clients__track,
.c1-clients--line:focus-within .c1-clients__track { animation-play-state: paused; }
@keyframes c1-marquee { to { transform: translateX(-50%); } }
@keyframes c1-marquee-rtl { to { transform: translateX(50%); } }
.c1-clients--line .c1-clients__item {
  flex: none;
  min-block-size: 0;
  block-size: 3.75rem;
  inline-size: 10.5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--c1-line);
  border-radius: .75rem;
  background: #fff;
  transition: transform .25s var(--c1-ease), border-color .25s var(--c1-ease), box-shadow .25s var(--c1-ease);
}
.c1-clients--line .c1-clients__img {
  filter: none;
  opacity: 1;
  max-block-size: 2.25rem;
  max-inline-size: 100%;
}
.c1-clients--line .c1-clients__item:hover,
.c1-clients--line .c1-clients__item:focus-visible {
  transform: scale(1.12);
  border-color: var(--c1-accent);
  box-shadow: 0 12px 28px -14px rgba(27, 43, 75, .35);
  z-index: 1;
}
@media (max-width: 700px) {
  .c1-clients__tag { display: none; }
  .c1-clients--line .c1-clients__item { inline-size: 8.5rem; block-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .c1-clients__track { animation: none; }
  .c1-clients__viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* ======================================================================
   Header: same dark ground as the slider, with the accent glow — so the
   header and the banner read as one surface. White logo + white menu.
   ====================================================================== */
html:root:root .c1nav-top {
  background: #0c1017;
  color: rgba(255,255,255,.82);
  border-block-end: 1px solid rgba(255,255,255,.06);
}
html:root:root .c1nav-main {
  background:
    radial-gradient(900px 260px at 82% 140%, color-mix(in srgb, var(--c1-accent) 78%, transparent), transparent 70%),
    linear-gradient(120deg, #11161d 0%, #161c27 55%, #1a2030 100%);
  border-block-end: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.8);
}
html:root:root .c1nav-logo { color: #fff; }
html:root:root .c1nav-logo img.c1logo-light { content: url("../img/logo-white.png"); }
html:root:root .c1nav-logo img.c1logo-dark { display: none; }
@media (min-width: 981px) {
  html:root:root .c1nav-link { color: rgba(255,255,255,.9); }
  html:root:root .c1nav-link:hover,
  html:root:root .c1nav-link:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
  html:root:root .c1nav-link.active { color: #fff; box-shadow: inset 0 -2px 0 var(--c1-accent); border-radius: 8px 8px 0 0; }
}
html:root:root .c1nav-burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
html:root:root .c1nav-burger svg { stroke: #fff; }
/* The slider's top edge meets the header without a hard line. */
html:root:root #coh-hero { box-shadow: inset 0 40px 60px -40px rgba(0,0,0,.55); }

/* ======================================================================
   Partial loading: everything after the first screen is only laid out and
   painted when it comes into view, so the first paint is just the first
   screen. contain-intrinsic-size keeps the scrollbar honest.
   ====================================================================== */
/* Only below the snap breakpoint: content-visibility + mandatory snap is a
   known renderer hazard in Chrome. */
@media (max-width: 999px) {
body.home .elementor-14 > .elementor-section:not(.elementor-element-c1hph01):not(.elementor-element-c1trs01),
body.home .elementor-location-footer {
  content-visibility: auto;
  /* Placeholder height = the page height, so snap positions don't shift as
     pages render in. */
  contain-intrinsic-size: auto calc(100svh - var(--c1-nav-h, 74px));
}
body.home .elementor-element-services-section { contain-intrinsic-size: auto 1650px; }
}


/* ======================================================================
   Inquiry form — above the footer on every page.
   ====================================================================== */
.c1-inquiry {
  background:
    radial-gradient(700px 320px at 90% 0%, color-mix(in srgb, var(--c1-accent) 55%, transparent), transparent 70%),
    linear-gradient(120deg, #11161d, #1a2030);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-block-start: 1px solid rgba(255,255,255,.08);
}
.c1-inquiry__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) { .c1-inquiry__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; } }
.c1-inquiry__eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c1-hl) !important; }
.c1-lang-ar .c1-inquiry__eyebrow { letter-spacing: 0; font-size: .9rem; }
.c1-inquiry__h { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.05; color: #fff; }
.c1-lang-ar .c1-inquiry__h { font-family: var(--wp--preset--font-family--arabic); }
.c1-inquiry__lead { margin: 1rem 0 0; font-size: 1.05rem; color: rgba(255,255,255,.78) !important; max-width: 40ch; }
.c1-inquiry__contacts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.c1-inquiry__contacts a { color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.c1-inquiry__contacts a:hover { border-color: var(--c1-hl); color: var(--c1-hl) !important; }
.c1-inquiry__form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.c1-inquiry__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c1-inquiry__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .c1-inquiry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c1-inquiry__f--wide { grid-column: 1 / -1; } }
.c1-inquiry__f { display: grid; gap: .4rem; }
.c1-inquiry__f > span { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75); }
.c1-inquiry__f input, .c1-inquiry__f select, .c1-inquiry__f textarea {
  width: 100%; box-sizing: border-box;
  padding: .8rem 1rem; border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff;
  font: inherit; font-size: .95rem; line-height: 1.4;
  transition: border-color .2s var(--c1-ease), background-color .2s var(--c1-ease);
}
.c1-inquiry__f select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%), linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.2rem, calc(100% - .75rem) 1.2rem; background-size: .35rem .35rem; background-repeat: no-repeat; }
.c1-lang-ar .c1-inquiry__f select { background-position: 1.1rem 1.2rem, .75rem 1.2rem; }
.c1-inquiry__f select option { color: #111; }
.c1-inquiry__f input::placeholder, .c1-inquiry__f textarea::placeholder { color: rgba(255,255,255,.4); }
.c1-inquiry__f input:focus, .c1-inquiry__f select:focus, .c1-inquiry__f textarea:focus { outline: none; border-color: var(--c1-hl); background: rgba(255,255,255,.1); }
.c1-inquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.c1-inquiry__btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--c1-accent); color: #fff !important;
  font: inherit; font-weight: 700; font-size: .95rem;
  padding: .9rem 1.75rem; border-radius: 999px;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c1-accent) 80%, transparent);
  transition: transform .2s var(--c1-ease), filter .2s var(--c1-ease);
}
.c1-inquiry__btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.c1-inquiry__btn:disabled { opacity: .7; cursor: progress; transform: none; }
.c1-inquiry__privacy { font-size: .8rem; color: rgba(255,255,255,.55); }
.c1-inquiry__msg { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: .75rem; font-size: .95rem; }
.c1-inquiry__msg.is-ok { background: rgba(26,164,90,.18); border: 1px solid rgba(26,164,90,.5); color: #d7f5e5 !important; }
.c1-inquiry__msg.is-fail { background: rgba(224,49,49,.18); border: 1px solid rgba(224,49,49,.5); color: #ffd9d9 !important; }

/* Header: second CTA ("Inquiry") as a ghost button beside "Get a quote". */
html:root:root .c1nav-cta--inquiry {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: none !important;
  margin-inline-start: .5rem;
}
html:root:root .c1nav-cta--inquiry:hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }
@media (max-width: 980px) { html:root:root .c1nav-cta--inquiry { display: none; } }

/* Rail footer: pager + inquiry button under the section list. */
@media (min-width: 1500px) {
  .c1-rail__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(127,127,127,.25); display: grid; gap: .75rem; }
  .c1-rail__pager { display: flex; align-items: center; gap: .4rem; }
  .c1-rail__pg {
    appearance: none; cursor: pointer; display: inline-grid; place-items: center;
    inline-size: 2rem; block-size: 2rem; border-radius: 50%;
    border: 1px solid rgba(127,127,127,.35); background: transparent; color: var(--wp--preset--color--muted);
    transition: color .2s var(--c1-ease), border-color .2s var(--c1-ease), background-color .2s var(--c1-ease);
  }
  .c1-rail__pg:hover { color: #fff; background: var(--c1-accent); border-color: var(--c1-accent); }
  .c1-rail__pgtxt { margin-inline-start: .35rem; font-size: .65rem; letter-spacing: .1em; color: var(--wp--preset--color--muted-soft); font-variant-numeric: tabular-nums; }
  .c1-rail__cta {
    display: inline-flex; align-items: center; gap: .5rem; justify-self: start;
    padding: .55rem .9rem; border-radius: 999px;
    background: var(--c1-accent); color: #fff !important; text-decoration: none !important;
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c1-accent) 80%, transparent);
    transition: transform .2s var(--c1-ease), filter .2s var(--c1-ease);
  }
  .c1-rail__cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
  body.c1-on-dark .c1-rail__pg { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); }
  body.c1-on-dark .c1-rail__pgtxt { color: rgba(255,255,255,.55); }
  body.c1-on-dark .c1-rail__foot { border-color: rgba(255,255,255,.18); }
}

/* ======================================================================
   Header over light pages: glass, dark logo, dark menu (header.js toggles
   body.c1-hdr-light from the section beneath the header).
   ====================================================================== */
html:root:root .c1nav-main { transition: background-color .3s var(--c1-ease), box-shadow .3s var(--c1-ease); }
html:root:root body.c1-hdr-light .c1nav-main {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--c1-line);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.35);
}
html:root:root body.c1-hdr-light .c1nav-logo img.c1logo-light { content: normal; }
@media (min-width: 981px) {
  html:root:root body.c1-hdr-light .c1nav-link { color: var(--wp--preset--color--navy); }
  html:root:root body.c1-hdr-light .c1nav-link:hover,
  html:root:root body.c1-hdr-light .c1nav-link:focus-visible { color: var(--c1-accent); background: var(--c1-accent-tint); }
  html:root:root body.c1-hdr-light .c1nav-link.active { color: var(--c1-accent); }
}
html:root:root body.c1-hdr-light .c1nav-cta--inquiry { color: var(--wp--preset--color--navy) !important; border-color: var(--c1-line) !important; }
html:root:root body.c1-hdr-light .c1nav-cta--inquiry:hover { border-color: var(--c1-accent) !important; background: var(--c1-accent-tint) !important; }
html:root:root body.c1-hdr-light .c1nav-burger { background: #fff; border-color: var(--c1-line); }
html:root:root body.c1-hdr-light .c1nav-burger svg { stroke: var(--wp--preset--color--navy); }

/* ======================================================================
   Track record page: numbers + how we work + partners.
   ====================================================================== */
.c1-statband { padding-block: clamp(3rem, 6vw, 4.5rem); }
.c1-statband__head { text-align: center; margin-block-end: 2.25rem; }
.c1-eyebrow--light { color: var(--c1-hl) !important; }
.c1-statband__h { margin: .5rem 0 0; color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.01em; }
.c1-lang-ar .c1-statband__h { font-family: var(--wp--preset--font-family--arabic); letter-spacing: 0; font-weight: 700; }
.c1-steps { margin-block-start: clamp(2.25rem, 4vw, 3rem); padding-block-start: 2rem; border-block-start: 1px solid rgba(255,255,255,.1); }
.c1-steps__head { margin: 0 0 1.25rem; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6) !important; }
.c1-lang-ar .c1-steps__head { letter-spacing: 0; font-size: .95rem; }
.c1-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; counter-reset: none; }
.c1-steps__item { display: grid; gap: .35rem; padding: 1.1rem 1.15rem; border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; background: rgba(255,255,255,.04); }
.c1-steps__item:last-child { border-color: color-mix(in srgb, var(--c1-accent) 60%, transparent); background: color-mix(in srgb, var(--c1-accent) 14%, transparent); }
.c1-steps__n { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .1em; color: var(--c1-hl); }
.c1-steps__t { font-weight: 700; color: #fff; font-size: 1rem; }
.c1-steps__p { font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.65); }
.c1-partners { margin-block-start: clamp(2rem, 3.5vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; }
.c1-partners__head { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5) !important; }
.c1-lang-ar .c1-partners__head { letter-spacing: 0; font-size: .9rem; }
.c1-partners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.c1-partners__list li { padding: .4rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8); }

/* About page facts */
.c1-about__facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.c1-about__facts li { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--c1-line); border-radius: .85rem; background: rgba(255,255,255,.7); }
.c1-about__fact-n { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 1.35rem; color: var(--c1-accent); line-height: 1; }
.c1-about__fact-l { font-size: .85rem; line-height: 1.4; color: var(--wp--preset--color--muted); }

/* The old CTA band wrapper is empty now — hide it so it is not a blank page. */
body.home .elementor-element-cta-band { display: none !important; }

/* ======================================================================
   Soft page backgrounds (light pages): layered gradients + a faint grid —
   no image files, so nothing to download.
   ====================================================================== */
body.home .elementor-element-services-section,
body.home .elementor-element-c1tech01,
body.home .elementor-element-c1work01,
body.home .elementor-element-c1about01 { position: relative; isolation: isolate; }
body.home .elementor-element-services-section::before,
body.home .elementor-element-c1tech01::before,
body.home .elementor-element-c1work01::before,
body.home .elementor-element-c1about01::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(27,43,75,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,43,75,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
body.home .elementor-element-services-section {
  background:
    radial-gradient(900px 600px at -10% -10%, color-mix(in srgb, var(--c1-accent) 10%, transparent), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(27,43,75,.08), transparent 60%),
    var(--wp--preset--color--paper);
}
body.home .elementor-element-c1tech01 {
  background:
    radial-gradient(700px 500px at 100% 0%, color-mix(in srgb, var(--c1-accent) 9%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, rgba(27,43,75,.025) 0 2px, transparent 2px 18px),
    var(--wp--preset--color--paper-2);
}
body.home .elementor-element-c1work01 {
  background:
    radial-gradient(rgba(27,43,75,.09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(800px 500px at 0% 100%, color-mix(in srgb, var(--c1-accent) 8%, transparent), transparent 60%),
    var(--wp--preset--color--paper);
}
body.home .elementor-element-c1about01 {
  background:
    radial-gradient(1100px 700px at 85% 50%, color-mix(in srgb, var(--c1-accent) 10%, transparent), transparent 55%),
    radial-gradient(600px 600px at 5% 10%, rgba(27,43,75,.07), transparent 60%),
    var(--wp--preset--color--paper-2);
}

/* ======================================================================
   Pinned menu: the header sticks with its contact bar scrolled away, so the
   logo + menu stay on screen on every page (negative sticky offset = the
   contact bar height, measured by header.js).
   ====================================================================== */
html:root:root header.elementor-location-header {
  position: sticky;
  top: calc(-1 * var(--c1-top-h, 45px));
  z-index: 9000;
}
html:root:root body.admin-bar header.elementor-location-header { top: calc(32px - var(--c1-top-h, 45px)); }
@media (max-width: 782px) { html:root:root body.admin-bar header.elementor-location-header { top: calc(46px - var(--c1-top-h, 45px)); } }
html:root:root .c1nav-main { position: relative; top: auto; }

/* ======================================================================
   Slider ground: neutral dark + accent glow (the snippet's own fallback is
   green-tinted); and the no-JS/blocked-JS hero placeholder fills the first
   screen properly instead of leaving a bare band.
   ====================================================================== */
html:root:root section.coh {
  background:
    radial-gradient(900px 520px at 76% 120%, var(--c1-accent), transparent 70%),
    linear-gradient(120deg, #11161d, #1a2030) !important;
}
html:root:root #c1-hero-ph {
  position: relative;
  min-height: max(420px, calc(100svh - var(--c1-fold-rest, 354px)));
  background:
    radial-gradient(900px 520px at 76% 120%, var(--c1-accent), transparent 70%),
    linear-gradient(120deg, #11161d, #1a2030);
  overflow: hidden;
}
html:root:root #c1-hero-ph .c1-hero-seo { position: absolute; inset: 0; margin-inline: auto; max-width: 1280px; padding-inline: var(--c1-gutter); }
/* The Elementor wrapper around the placeholder must not add its own band. */
body.home .elementor-element-c1hph01 { padding: 0 !important; background: none !important; }

/* ======================================================================
   Track record page: one full-bleed dark page in the same palette as the
   slider and the inquiry form (the inner band used to sit as a navy box
   inside a boxed Elementor column).
   ====================================================================== */
html:root:root body.home .elementor-element-stats-section {
  background:
    radial-gradient(800px 420px at 10% 100%, color-mix(in srgb, var(--c1-accent) 45%, transparent), transparent 70%),
    linear-gradient(120deg, #11161d, #1a2030) !important;
}
html:root:root body.home #track-record.c1-statband { background: transparent; width: 100%; }
html:root:root body.home .elementor-element-stats-section > .elementor-container,
html:root:root body.home .elementor-element-stats-section .elementor-column,
html:root:root body.home .elementor-element-stats-section .elementor-widget-wrap { width: 100%; max-width: none; }

/* ======================================================================
   First screen as one band: the services bar and the client line carry
   the slider's colours and get lighter step by step towards the page.
   ====================================================================== */
html:root:root .c1-svcbar {
  --c1-band-top: #1a2030;
  --c1-band-mid: #263050;
  background:
    radial-gradient(900px 260px at 76% -60%, color-mix(in srgb, var(--c1-accent) 42%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c1-band-top) 0%, var(--c1-band-mid) 100%);
  border-block-start: 0;
  border-block-end: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html:root:root .c1-svcbar__item { color: rgba(255, 255, 255, .88) !important; }
html:root:root .c1-svcbar__ico {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .85rem;
  filter: none;
  opacity: 1;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .7);
}
html:root:root .c1-svcbar__ico::before { background: color-mix(in srgb, var(--c1-svc) 14%, #fff); }
html:root:root .c1-svcbar__item:hover .c1-svcbar__ico,
html:root:root .c1-svcbar__item:focus-visible .c1-svcbar__ico,
html:root:root .c1-svcbar__cell.is-spot .c1-svcbar__ico {
  border-color: var(--c1-svc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1-svc) 55%, transparent), 0 16px 30px -12px rgba(0, 0, 0, .8);
}
html:root:root .c1-svcbar__item:hover,
html:root:root .c1-svcbar__item:focus-visible,
html:root:root .c1-svcbar__cell.is-spot .c1-svcbar__item { color: #fff !important; }
html:root:root .c1-svcbar__lbl { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

html:root:root .c1-clients--line {
  background:
    radial-gradient(700px 220px at 20% 120%, color-mix(in srgb, var(--c1-accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #263050 0%, #3b4569 100%);
  border-block-start: 0;
  border-block-end: 0;
}
html:root:root .c1-clients__tag { color: rgba(255, 255, 255, .72); }
html:root:root .c1-clients--line .c1-clients__item {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8);
}
html:root:root .c1-clients--line .c1-clients__item:hover,
html:root:root .c1-clients--line .c1-clients__item:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1-accent) 55%, transparent), 0 16px 30px -12px rgba(0, 0, 0, .8);
}

/* FAQ rendered by the theme for pages whose builder ignores post_content. */
.c1-faqband { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--wp--preset--color--paper); }
.c1-faqband h2 { margin-block-end: 1.25rem; }
.c1-faqband .wp-block-details { border-block-end: 1px solid var(--c1-line); padding-block: .9rem; }
.c1-faqband .wp-block-details summary { cursor: pointer; font-weight: 700; color: var(--wp--preset--color--navy); }
.c1-faqband .wp-block-details p { margin-block: .6rem 0; color: var(--wp--preset--color--muted); }