.elementor-kit-7{--e-global-color-primary:#2454E6;--e-global-color-secondary:#0B1739;--e-global-color-text:#18233D;--e-global-color-accent:#46C7EE;--e-global-color-arnavy2:#13224D;--e-global-color-arsoft:#F4F7FB;--e-global-color-armuted:#61708A;--e-global-color-arborder:#DCE4F0;--e-global-color-arred:#E5444F;--e-global-color-arcobdk:#1C45C4;--e-global-color-arwhite:#FFFFFF;--e-global-color-armnavy:#A9B6D3;--e-global-color-artint:#EAF0FE;--e-global-color-arfield:#7F8CA8;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;--e-global-typography-ardisp-font-family:"Manrope";--e-global-typography-ardisp-font-size:64px;--e-global-typography-ardisp-font-weight:800;--e-global-typography-ardisp-line-height:1.04em;--e-global-typography-ardisp-letter-spacing:-0.032em;--e-global-typography-arh1-font-family:"Manrope";--e-global-typography-arh1-font-size:56px;--e-global-typography-arh1-font-weight:800;--e-global-typography-arh1-line-height:1.08em;--e-global-typography-arh1-letter-spacing:-0.03em;--e-global-typography-arh2-font-family:"Manrope";--e-global-typography-arh2-font-size:42px;--e-global-typography-arh2-font-weight:700;--e-global-typography-arh2-line-height:1.12em;--e-global-typography-arh2-letter-spacing:-0.026em;--e-global-typography-arh3-font-family:"Manrope";--e-global-typography-arh3-font-size:22px;--e-global-typography-arh3-font-weight:700;--e-global-typography-arh3-line-height:1.3em;--e-global-typography-arh3-letter-spacing:-0.012em;--e-global-typography-arh4-font-family:"Manrope";--e-global-typography-arh4-font-size:18px;--e-global-typography-arh4-font-weight:700;--e-global-typography-arh4-line-height:1.35em;--e-global-typography-arh4-letter-spacing:-0.006em;--e-global-typography-arlead-font-family:"Inter";--e-global-typography-arlead-font-size:20px;--e-global-typography-arlead-font-weight:400;--e-global-typography-arlead-line-height:1.6em;--e-global-typography-arbody-font-family:"Inter";--e-global-typography-arbody-font-size:17px;--e-global-typography-arbody-font-weight:400;--e-global-typography-arbody-line-height:1.65em;--e-global-typography-arsmall-font-family:"Inter";--e-global-typography-arsmall-font-size:14px;--e-global-typography-arsmall-font-weight:500;--e-global-typography-arsmall-line-height:1.5em;--e-global-typography-arbrow-font-family:"Inter";--e-global-typography-arbrow-font-size:13px;--e-global-typography-arbrow-font-weight:600;--e-global-typography-arbrow-text-transform:uppercase;--e-global-typography-arbrow-line-height:1.2em;--e-global-typography-arbrow-letter-spacing:0.12em;--e-global-typography-arft-font-family:"Inter";--e-global-typography-arft-font-size:17px;--e-global-typography-arft-font-weight:600;--e-global-typography-arft-line-height:1.4em;--e-global-typography-arfx-font-family:"Inter";--e-global-typography-arfx-font-size:15px;--e-global-typography-arfx-font-weight:400;--e-global-typography-arfx-line-height:1.6em;--e-global-typography-arlabel-font-family:"Inter";--e-global-typography-arlabel-font-size:13px;--e-global-typography-arlabel-font-weight:600;--e-global-typography-arlabel-text-transform:uppercase;--e-global-typography-arlabel-line-height:1.3em;--e-global-typography-arlabel-letter-spacing:0.08em;--e-global-typography-arcard-font-family:"Inter";--e-global-typography-arcard-font-size:15px;--e-global-typography-arcard-font-weight:400;--e-global-typography-arcard-line-height:1.6em;--e-global-typography-arcta-font-family:"Inter";--e-global-typography-arcta-font-size:14px;--e-global-typography-arcta-font-weight:600;--e-global-typography-arcta-line-height:1.4em;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:var( --e-global-typography-arbody-font-family ), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-size:var( --e-global-typography-arbody-font-size );font-weight:var( --e-global-typography-arbody-font-weight );line-height:var( --e-global-typography-arbody-line-height );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-size:15px;font-weight:600;line-height:1em;letter-spacing:0.01em;color:#FFFFFF;border-radius:10px 10px 10px 10px;padding:16px 24px 16px 24px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-arcobdk );color:#FFFFFF;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-primary );}.elementor-kit-7 a:hover{color:var( --e-global-color-arcobdk );}.elementor-kit-7 h1{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 h2{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 h3{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 h4{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 h5{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 h6{color:var( --e-global-color-text );font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-weight:700;}.elementor-kit-7 label{color:var( --e-global-color-text );font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-size:14px;font-weight:600;line-height:1.3em;}.elementor-kit-7 input:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea,.elementor-kit-7 .elementor-field-textual{font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.4em;color:var( --e-global-color-text );accent-color:var( --e-global-color-primary );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-arfield );border-radius:10px 10px 10px 10px;padding:13px 16px 13px 16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-ardisp-font-size:52px;--e-global-typography-arh1-font-size:46px;--e-global-typography-arh2-font-size:36px;--e-global-typography-arh3-font-size:21px;--e-global-typography-arlead-font-size:19px;--e-global-typography-arbody-font-size:16px;font-size:var( --e-global-typography-arbody-font-size );line-height:var( --e-global-typography-arbody-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-ardisp-font-size:38px;--e-global-typography-arh1-font-size:36px;--e-global-typography-arh2-font-size:30px;--e-global-typography-arh3-font-size:20px;--e-global-typography-arh4-font-size:17px;--e-global-typography-arlead-font-size:18px;--e-global-typography-arbrow-font-size:12px;font-size:var( --e-global-typography-arbody-font-size );line-height:var( --e-global-typography-arbody-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Al Reef Group — global custom CSS                          v1.0 · Phase 1
   --------------------------------------------------------------------------
   WHERE IT GOES
     WordPress admin → Elementor → Site Settings (or Edit with Elementor →
     hamburger menu → Site Settings) → Custom CSS → paste this whole file.
     (Requires Elementor Pro. Without Pro: Appearance → Customize →
     Additional CSS works the same way.)

   TARGET
     Elementor + Elementor Pro 4.3.x, classic widgets on Flexbox Containers,
     Hello Elementor theme 3.5.x.

   RULES THIS FILE FOLLOWS
     1. Content, colours, type, spacing and layout are edited in Elementor.
        This file adds only states, motion and plumbing Elementor's controls
        cannot express (focus states, hover lifts, slide transitions,
        progress bars, reduced motion, sticky header, form states).
     2. Layout defaults are wrapped in :where() so they have zero
        specificity: any value you set in an element's own controls wins.
     3. Every hook is a class you add in Advanced → CSS Classes. Class names
        start with "ar-". Nothing here targets an element ID.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Tokens. The first four follow Site Settings → Global Colors (system
      colours) automatically. The rest mirror the custom global colours; if
      you change one of those in Site Settings, change it here too.
   -------------------------------------------------------------------------- */
body {
  --ar-cobalt: var(--e-global-color-primary, #2454E6);
  --ar-navy: var(--e-global-color-secondary, #0B1739);
  --ar-ink: var(--e-global-color-text, #18233D);
  --ar-cyan: var(--e-global-color-accent, #46C7EE);
  --ar-cobalt-dark: #1C45C4;
  --ar-cobalt-tint: #EAF0FE;
  --ar-soft: #F4F7FB;
  --ar-muted: #61708A;
  --ar-muted-navy: #A9B6D3;
  --ar-navy-2: #13224D;
  --ar-border: #DCE4F0;
  --ar-field: #7F8CA8;
  --ar-red: #E5444F;
  --ar-red-dark: #C2303C;
  --ar-success: #157A4A;
  --ar-success-tint: #E8F6EE;
  --ar-error: #B42633;
  --ar-error-tint: #FDECEE;
  --ar-wa-light: #1E9E57;
  --ar-wa-dark: #25D366;

  --ar-focus: var(--ar-cobalt);
  --ar-ease: cubic-bezier(.2, .7, .2, 1);
  --ar-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ar-fast: 180ms;
  --ar-base: 240ms;
  --ar-lift: 300ms;
  --ar-zoom: 600ms;
  --ar-shadow-rest: 0 1px 2px rgba(11, 23, 57, .05);
  --ar-shadow-hover: 0 18px 40px -18px rgba(11, 23, 57, .28);
  --ar-shadow-panel: 0 24px 60px -28px rgba(11, 23, 57, .35);
  --ar-header-h: 80px;
  --ar-content: 1280px;
}
@media (max-width: 1024px) { body { --ar-header-h: 68px; } }

/* Dark (navy) sections: add class "ar-dark" to the section container. */
.ar-dark { --ar-focus: var(--ar-cyan); }


/* --------------------------------------------------------------------------
   1. Base: no sideways scrolling, anchor offsets, focus, selection.
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; }            /* clip (not hidden) keeps the sticky header working */
:where(html) { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: calc(var(--ar-header-h) + 24px); }
::selection { background: var(--ar-cobalt); color: #fff; }

:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 3px; }
.elementor-button:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 3px; }

/* Long words (e.g. "Electromechanical") wrap instead of overflowing. */
.elementor-heading-title { overflow-wrap: break-word; }
@media (max-width: 767px) { .elementor-heading-title { hyphens: auto; } }

/* Visually hidden but read by screen readers (used for the homepage H1). */
.ar-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Faint drawing-grid texture for navy page heroes (container class "ar-grid-texture"). */
.ar-grid-texture {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Hello Elementor skip link: make it visible when focused. */
.skip-link.screen-reader-text:focus {
  clip: auto !important; clip-path: none; width: auto; height: auto;
  top: 12px; left: 12px; z-index: 100000; padding: 12px 18px;
  background: #fff; color: var(--ar-ink); border-radius: 10px;
  box-shadow: var(--ar-shadow-panel); font-weight: 600;
}


/* --------------------------------------------------------------------------
   2. Small type helpers.
   -------------------------------------------------------------------------- */
/* Tabular figures for 01–08 indexes, counters and dates. */
.ar-index, .ar-index .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* Eyebrow label: a short red rule before the text. Add "ar-eyebrow" to a
   Heading widget that uses the AR Eyebrow global font. */
.ar-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.ar-eyebrow .elementor-heading-title::before {
  content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--ar-red);
}
.ar-eyebrow--center .elementor-heading-title { justify-content: center; }


/* --------------------------------------------------------------------------
   3. Buttons and links.
   -------------------------------------------------------------------------- */
.elementor-button {
  transition: background-color var(--ar-fast) var(--ar-ease), color var(--ar-fast) var(--ar-ease),
              border-color var(--ar-fast) var(--ar-ease), box-shadow var(--ar-fast) var(--ar-ease),
              transform var(--ar-fast) var(--ar-ease);
}
.elementor-button:active { transform: translateY(1px); }

/* "ar-btn-arrow": the icon (set to "after" in the Button widget) nudges right. */
.ar-btn-arrow .elementor-button-icon { transition: transform var(--ar-base) var(--ar-ease); }
.ar-btn-arrow .elementor-button:is(:hover, :focus-visible) .elementor-button-icon { transform: translateX(3px); }

/* "ar-btn-wa": WhatsApp glyph in WhatsApp green; the label carries the meaning. */
.ar-btn-wa .elementor-button-icon svg { fill: var(--ar-wa-light); }
.ar-dark .ar-btn-wa .elementor-button-icon svg,
.ar-btn-wa.ar-on-dark .elementor-button-icon svg { fill: var(--ar-wa-dark); }

/* Minimum touch target for every button. */
.elementor-button { min-height: 44px; }

/* "ar-link-arrow": a Heading or Text widget link with an animated arrow. */
.ar-link-arrow a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.ar-link-arrow a::after {
  content: "\2192"; transition: transform var(--ar-base) var(--ar-ease);
}
.ar-link-arrow a:is(:hover, :focus-visible) { text-decoration: underline; }
.ar-link-arrow a:is(:hover, :focus-visible)::after { transform: translateX(3px); }


/* --------------------------------------------------------------------------
   4. Cards. Add "ar-card" to a card container. Add "ar-card--link" when the
      card has one link (on its title, class "ar-card__title"): the whole
      card becomes clickable and keyboard focus outlines the card.
   -------------------------------------------------------------------------- */
.ar-card {
  transition: transform var(--ar-lift) var(--ar-ease), box-shadow var(--ar-lift) var(--ar-ease),
              border-color var(--ar-fast) var(--ar-ease);
  box-shadow: var(--ar-shadow-rest);
}
.ar-card:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--ar-shadow-hover); border-color: #BFD0FA; }

.ar-card--link { position: relative; }
.ar-card--link .ar-card__title a { color: inherit; text-decoration: none; }
.ar-card--link .ar-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
@supports .elementor-kit-7(:has(*)) {
  .ar-card--link .ar-card__title a:focus-visible { outline: none; }
  .ar-card--link:has(.ar-card__title a:focus-visible) { outline: 3px solid var(--ar-focus); outline-offset: 3px; }
}

/* Visual-only "View service →" line inside a linked card. */
.ar-card__cta .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; }
.ar-card__cta .elementor-heading-title::after { content: "\2192"; transition: transform var(--ar-base) var(--ar-ease); }
.ar-card:is(:hover, :focus-within) .ar-card__cta .elementor-heading-title::after { transform: translateX(4px); }

/* Card image zoom: the Image widget inside the card clips its own overflow. */
.ar-card .ar-card__media { overflow: hidden; }
.ar-card .ar-card__media img { transition: transform var(--ar-zoom) var(--ar-ease-out); will-change: transform; }
.ar-card:is(:hover, :focus-within) .ar-card__media img { transform: scale(1.04); }

/* Icon well that tints on hover/focus. */
.ar-card__icon { transition: background-color var(--ar-base) var(--ar-ease), color var(--ar-base) var(--ar-ease); }
.ar-card:is(:hover, :focus-within) .ar-card__icon { background-color: var(--ar-cobalt) !important; }
.ar-card:is(:hover, :focus-within) .ar-card__icon :is(svg, i) { color: #fff; fill: none; stroke: #fff; }


/* --------------------------------------------------------------------------
   5. Header (Theme Builder header template).
      The header location sticks with CSS. Do NOT also switch on Motion
      Effects → Sticky: that duplicates the header markup.
   -------------------------------------------------------------------------- */
.elementor-location-header {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 1000;
}
.ar-header {
  transition: box-shadow var(--ar-base) var(--ar-ease), background-color var(--ar-base) var(--ar-ease);
}
.ar-scrolled .ar-header {
  box-shadow: 0 6px 24px -12px rgba(11, 23, 57, .22);
  background-color: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
/* Logo image keeps its proportions; the supplied JPG has a white background,
   which the white header shows as-is. */
.ar-header__logo img { width: auto; max-height: 56px; object-fit: contain; }
@media (max-width: 1024px) { .ar-header__logo img { max-height: 46px; } }

/* Menu widget (class "ar-nav"): animated underline indicator. */
.ar-nav .e-n-menu-title-text { position: relative; }
.ar-nav .e-n-menu-title-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: var(--ar-cobalt); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--ar-base) var(--ar-ease);
}
.ar-nav .e-n-menu-title:is(:hover, :focus-within) .e-n-menu-title-text::after,
.ar-nav .e-n-menu-title.e-current .e-n-menu-title-text::after,
.ar-nav [aria-current="page"] .e-n-menu-title-text::after { transform: scaleX(1); }
.ar-nav .e-n-menu-dropdown-icon svg { transition: transform var(--ar-base) var(--ar-ease); }
.ar-nav .e-n-menu-dropdown-icon[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Services mega panel (container inside the Menu item, class "ar-megamenu"). */
.ar-megamenu { animation: ar-drop var(--ar-base) var(--ar-ease) both; }
@keyframes ar-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ar-megamenu__item a { transition: background-color var(--ar-fast) var(--ar-ease), color var(--ar-fast) var(--ar-ease); }
.ar-megamenu__item a:is(:hover, :focus-visible) { background-color: var(--ar-soft); color: var(--ar-cobalt); }


/* --------------------------------------------------------------------------
   6. Mobile drawer (Off-Canvas widget, class "ar-drawer").
   -------------------------------------------------------------------------- */
.ar-drawer .e-off-canvas__main { overscroll-behavior: contain; }
.ar-drawer .e-off-canvas__content { min-height: 100%; }
.ar-drawer .e-off-canvas__overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ar-drawer__nav a { display: flex; align-items: center; min-height: 48px; }
.ar-drawer__nav .elementor-icon-list-item > a { transition: color var(--ar-fast) var(--ar-ease), padding var(--ar-base) var(--ar-ease); }
.ar-drawer__nav .elementor-icon-list-item > a:is(:hover, :focus-visible) { color: var(--ar-cyan); }
.ar-drawer__sub a { min-height: 40px; }
/* The drawer's Services accordion: chevron turns when open. */
.ar-drawer .e-n-accordion-item-title-icon { transition: transform var(--ar-base) var(--ar-ease); }
.ar-drawer .e-n-accordion-item[open] > summary .e-n-accordion-item-title-icon { transform: rotate(180deg); }


/* --------------------------------------------------------------------------
   7. Hero slider (Carousel widget with classes "ar-carousel ar-carousel--hero").
      Slide = container "ar-hero__slide" holding a media container
      "ar-hero__media" (Image widget + background overlay) and a content
      container "ar-hero__content".
   -------------------------------------------------------------------------- */
:where(.ar-hero) { position: relative; background-color: var(--ar-navy); }
:where(.ar-hero__slide) { position: relative; overflow: hidden; min-height: clamp(600px, 84svh, 820px); }
@media (max-width: 1024px) { :where(.ar-hero__slide) { min-height: 640px; } }
@media (max-width: 767px)  { :where(.ar-hero__slide) { min-height: 600px; } }

.ar-hero__media.e-con, .ar-hero__media { position: absolute; inset: 0; z-index: 0; padding: 0; overflow: hidden; }
.ar-hero__media::before { z-index: 1; }                       /* Elementor background overlay above the photo */
.ar-hero__media .elementor-widget-image { position: absolute; inset: 0; z-index: 0; margin: 0; }
.ar-hero__media .elementor-widget-image :is(.elementor-widget-container, a) { height: 100%; }
.ar-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ar-hero__grid::after {                                        /* optional drawing-grid texture */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
}
.ar-hero__content { position: relative; z-index: 2; }

/* Slow image drift on the active slide only. */
.ar-carousel--hero .swiper-slide-active .ar-hero__media img { animation: ar-drift 7.5s linear both; }
@keyframes ar-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Text rises in when a slide becomes active (not on first page load, so
   the first slide paints immediately). The script adds the two classes. */
.ar-carousel--animate .swiper-slide-active :is(.ar-hero__content > .elementor-element, .ar-hero__content > .e-con-inner > .elementor-element) {
  animation: ar-rise .6s var(--ar-ease-out) both;
}
.ar-carousel--animate .swiper-slide-active :is(.ar-hero__content > .elementor-element, .ar-hero__content > .e-con-inner > .elementor-element):nth-child(2) { animation-delay: .09s; }
.ar-carousel--animate .swiper-slide-active :is(.ar-hero__content > .elementor-element, .ar-hero__content > .e-con-inner > .elementor-element):nth-child(3) { animation-delay: .18s; }
.ar-carousel--animate .swiper-slide-active :is(.ar-hero__content > .elementor-element, .ar-hero__content > .e-con-inner > .elementor-element):nth-child(4) { animation-delay: .27s; }
@keyframes ar-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Control bar built by the script: counter · time line · prev · next · pause. */
.ar-carousel { position: relative; }
.ar-carousel__bar {
  display: flex; align-items: center; gap: 12px; z-index: 5; color: #fff;
}
.ar-carousel--hero .ar-carousel__bar {
  position: absolute; bottom: 32px;
  left: max(32px, calc((100% - var(--ar-content)) / 2));
}
@media (max-width: 767px) { .ar-carousel--hero .ar-carousel__bar { bottom: 24px; left: 20px; right: 20px; } }
.ar-carousel__bar .swiper-pagination {
  position: static; inset: auto; width: auto; transform: none;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 56px;
}
.ar-carousel__bar .swiper-pagination-total { opacity: .6; }
.ar-carousel__progress { position: relative; width: 132px; height: 2px; background: rgba(255, 255, 255, .28); border-radius: 2px; overflow: hidden; }
.ar-carousel__progress > span { position: absolute; inset: 0; background: var(--ar-cyan); transform-origin: left center; transform: scaleX(0); }
.ar-carousel__progress.is-run > span { animation: ar-progress var(--ar-delay, 7000ms) linear forwards; }
.ar-carousel__progress[data-state="paused"] > span { animation-play-state: paused; }
@keyframes ar-progress { to { transform: scaleX(1); } }
@media (max-width: 767px) { .ar-carousel__progress { flex: 1; width: auto; } }
.ar-carousel__bar .elementor-swiper-button,
.ar-carousel__toggle {
  position: static; inset: auto; transform: none; margin: 0;
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: transparent;
  color: #fff; cursor: pointer; padding: 0;
  transition: background-color var(--ar-fast) var(--ar-ease), border-color var(--ar-fast) var(--ar-ease);
}
.ar-carousel__bar .elementor-swiper-button svg, .ar-carousel__toggle svg { width: 18px; height: 18px; fill: currentColor; }
.ar-carousel__toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-carousel__bar .elementor-swiper-button:is(:hover, :focus-visible),
.ar-carousel__toggle:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .12); border-color: #fff; }
.ar-carousel__bar :focus-visible { outline: 3px solid var(--ar-cyan); outline-offset: 2px; }
.ar-carousel__toggle .ar-i-play, .ar-carousel__toggle[data-state="paused"] .ar-i-pause { display: none; }
.ar-carousel__toggle[data-state="paused"] .ar-i-play { display: block; }


/* --------------------------------------------------------------------------
   8. Client strip (Carousel widget, classes "ar-carousel ar-carousel--clients").
   -------------------------------------------------------------------------- */
.ar-carousel--clients .swiper-slide { height: auto; }
.ar-carousel--clients .swiper-slide > .elementor-element { height: 100%; }   /* equal-height client cards */
.ar-carousel--clients .ar-carousel__bar { position: relative; margin-top: 24px; color: var(--ar-ink); }
.ar-carousel--clients .ar-carousel__bar .swiper-pagination-progressbar {
  position: relative; inset: auto; flex: 1; height: 2px; min-width: 0; background: var(--ar-border); border-radius: 2px;
}
.ar-carousel--clients .swiper-pagination-progressbar-fill { background: var(--ar-cobalt); }
.ar-carousel--clients .ar-carousel__bar :is(.elementor-swiper-button, .ar-carousel__toggle) {
  width: 40px; height: 40px; border-color: var(--ar-field); color: var(--ar-ink);
}
.ar-carousel--clients .ar-carousel__bar :is(.elementor-swiper-button, .ar-carousel__toggle):is(:hover, :focus-visible) {
  background: var(--ar-soft); border-color: var(--ar-cobalt); color: var(--ar-cobalt);
}
.ar-carousel--clients .ar-carousel__bar :focus-visible { outline-color: var(--ar-cobalt); }
.ar-client__lead .elementor-heading-title { letter-spacing: .04em; }

/* Reduced motion (or the script's static mode): show every client as a
   wrapped, still grid instead of a moving strip. */
@media (prefers-reduced-motion: reduce) {
  .ar-carousel--clients .swiper-wrapper { transform: none !important; flex-wrap: wrap; gap: 12px; }
  .ar-carousel--clients .swiper-slide { width: auto !important; flex: 1 1 220px; margin: 0 !important; }
  .ar-carousel--clients .swiper-slide-duplicate,
  .ar-carousel--clients .ar-carousel__bar { display: none !important; }
}


/* --------------------------------------------------------------------------
   9. Status badges, scope chips and demo labels (Heading widgets).
   -------------------------------------------------------------------------- */
.ar-badge .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.ar-badge--running .elementor-heading-title { background: rgba(11, 23, 57, .88); color: #fff; }
.ar-badge--running .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-cyan); }
.ar-badge--completed .elementor-heading-title { background: #fff; color: var(--ar-ink); box-shadow: inset 0 0 0 1px var(--ar-border); }
.ar-badge--completed .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-success); }
.ar-badge--demo .elementor-heading-title { background: #fff; color: var(--ar-ink); box-shadow: inset 0 0 0 1px var(--ar-border); }
.ar-badge--demo .elementor-heading-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-red); }

.ar-chip .elementor-heading-title {
  display: inline-flex; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: var(--ar-cobalt-tint); color: var(--ar-cobalt); line-height: 1.2;
}
.ar-chip a { color: inherit; }


/* --------------------------------------------------------------------------
   10. Recent Projects filter. The bar (class "ar-filter") stays hidden until
       the script is ready, so visitors without JavaScript simply see every
       project. Cards carry "ar-project-card" plus "ar-status-running",
       "ar-status-completed" or "ar-status-demo".
   -------------------------------------------------------------------------- */
.ar-filter.e-con, .ar-filter { display: none; }
.ar-filter.ar-filter--ready { display: flex; }
.ar-filter .ar-filter__btn {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ar-field); background: #fff; color: var(--ar-ink);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background-color var(--ar-fast) var(--ar-ease), border-color var(--ar-fast) var(--ar-ease), color var(--ar-fast) var(--ar-ease);
}
.ar-filter .ar-filter__btn:hover { border-color: var(--ar-cobalt); color: var(--ar-cobalt); }
.ar-filter .ar-filter__btn[aria-pressed="true"] { background: var(--ar-cobalt-tint); border-color: var(--ar-cobalt); color: var(--ar-cobalt); }
.ar-filter .ar-filter__count { opacity: .7; font-variant-numeric: tabular-nums; margin-left: 6px; }
.ar-project-card[hidden] { display: none !important; }
.ar-project-card.ar-filter-in { animation: ar-fade var(--ar-lift) var(--ar-ease) both; }
@keyframes ar-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* --------------------------------------------------------------------------
   11. Forms (Form widget, class "ar-form").
   -------------------------------------------------------------------------- */
.ar-form .elementor-field-textual,
.ar-form .elementor-select-wrapper select {
  transition: border-color var(--ar-fast) var(--ar-ease), box-shadow var(--ar-fast) var(--ar-ease);
}
.ar-form .elementor-field-textual:focus,
.ar-form .elementor-select-wrapper select:focus {
  border-color: var(--ar-cobalt) !important; box-shadow: 0 0 0 3px rgba(36, 84, 230, .2); outline: none;
}
.ar-form .elementor-field-textual::placeholder { color: var(--ar-muted); opacity: 1; }
.ar-form .elementor-mark-required .elementor-field-label::after { color: var(--ar-red-dark); }
.ar-form .elementor-acceptance-field, .ar-form input[type="checkbox"] { accent-color: var(--ar-cobalt); width: 20px; height: 20px; }
.ar-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.ar-form .elementor-field-type-acceptance label { font-size: 14px; line-height: 1.5; color: var(--ar-muted); }
.ar-form .elementor-field-type-acceptance label a { color: var(--ar-cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* Errors from Elementor (field level and form level). */
.ar-form .elementor-error :is(.elementor-field-textual, select) { border-color: var(--ar-error) !important; }
.ar-form .elementor-help-inline { display: block; width: 100%; margin-top: 6px; font-size: 14px; color: var(--ar-error); background: none; padding: 0; }
.ar-form .elementor-message { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.ar-form .elementor-message-success { background: var(--ar-success-tint); color: var(--ar-success); }
.ar-form .elementor-message-danger:not(.elementor-help-inline) { background: var(--ar-error-tint); color: var(--ar-error); }

/* Loading state while Elementor sends the form. */
.ar-form .elementor-form-waiting .elementor-button,
.ar-form form[aria-busy="true"] .elementor-button { opacity: .75; cursor: progress; }


/* --------------------------------------------------------------------------
   12. FAQ accordion (Accordion widget, class "ar-faq").
   -------------------------------------------------------------------------- */
.ar-faq .e-n-accordion-item-title { transition: color var(--ar-fast) var(--ar-ease); }
.ar-faq .e-n-accordion-item-title:hover { color: var(--ar-cobalt); }
.ar-faq .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: -3px; border-radius: 10px; }


/* --------------------------------------------------------------------------
   13. Section reveal. Add "ar-reveal" to a container. Hidden only after the
       script confirms it is running, so content never stays invisible.
   -------------------------------------------------------------------------- */
.ar-reveal-ready .ar-reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
.ar-reveal-ready .ar-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ar-ease-out), transform .6s var(--ar-ease-out);
}


/* --------------------------------------------------------------------------
   14. Phone action bar (footer template container, class "ar-mobilebar").
   -------------------------------------------------------------------------- */
.ar-mobilebar.e-con, .ar-mobilebar { display: none; }
@media (max-width: 767px) {
  .ar-mobilebar.e-con, .ar-mobilebar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -10px 30px -16px rgba(11, 23, 57, .35);
    transition: transform var(--ar-base) var(--ar-ease);
  }
  /* Room for the bar at the end of the page, in the footer's own colour. */
  body.has-ar-mobilebar .elementor-location-footer,
  .elementor-location-footer:has(.ar-mobilebar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); background-color: var(--ar-navy); }
  .ar-mobilebar.is-hidden, .ar-drawer-open .ar-mobilebar { transform: translateY(110%); }
  html:has(.ar-mobilebar) { scroll-padding-bottom: 84px; }
}


/* --------------------------------------------------------------------------
   15. Footer.
   -------------------------------------------------------------------------- */
/* The JPG logo sits on a white rounded tile so it reads as a badge on navy. */
.ar-logo-tile img { background: #fff; border-radius: 16px; padding: 10px; width: 96px; height: 96px; object-fit: contain; }
.ar-footer a { transition: color var(--ar-fast) var(--ar-ease); }
.ar-footer a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; text-underline-offset: 4px; }


/* Icon List in two columns on phones (footer service links). */
@media (max-width: 767px) {
  .ar-two-col .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}


/* --------------------------------------------------------------------------
   16. Demo content and launch switch.
       Before launch: keep the next rule commented out and the demo items
       visible. At launch: remove the comment markers (or better, delete the
       demo items in Elementor) — every element with class "ar-demo"
       disappears and every "ar-empty" state appears.
   -------------------------------------------------------------------------- */
.ar-empty.e-con, .ar-empty { display: none; }
/*
.ar-demo, .ar-demo.e-con { display: none !important; }
.ar-empty.e-con, .ar-empty { display: flex !important; }
*/


/* --------------------------------------------------------------------------
   17. Reduced motion: no drift, reveals, autoplay or long transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ar-carousel--hero .swiper-slide-active .ar-hero__media img { animation: none; transform: none; }
  .ar-reveal-ready .ar-reveal:not(.is-visible) { opacity: 1; transform: none; }
  .ar-card:is(:hover, :focus-within), .ar-card:is(:hover, :focus-within) .ar-card__media img { transform: none; }
}


/* ==========================================================================
   Al Reef Group: Elementor build helpers                      v1.0 · build
   Adds only what Elementor controls cannot express. Layout, colours, type
   and spacing are set on each element (Style / Layout / Advanced tabs).
   ========================================================================== */

/* Line icons (uploaded SVGs are stroked): keep them unfilled. */
.ar-line-icon .elementor-icon svg { fill: none !important; stroke: currentColor; }
.ar-line-icon .elementor-icon { color: var(--ar-icon, currentColor); }
.elementor-button .elementor-button-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.elementor-widget-button:not(.ar-btn-wa) .elementor-button-icon svg { fill: none; }
.ar-card:is(:hover, :focus-within) .ar-card__icon .elementor-icon { background-color: var(--ar-cobalt) !important; }
.ar-card:is(:hover, :focus-within) .ar-card__icon .elementor-icon svg { stroke: #fff; }

/* Image aspect ratios (Image widget, class ar-ratio-*). */
.ar-ratio-43 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ar-ratio-54 img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.ar-ratio-169 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Small pill label on an image (Heading widget, class ar-img-note, inside a
   container with class ar-img-wrap). */
.ar-img-wrap { position: relative; }
.ar-img-note { position: absolute !important; right: 12px; bottom: 12px; z-index: 2; width: auto !important; pointer-events: none; }
.ar-img-note .elementor-heading-title {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; padding: 5px 9px; border-radius: 999px;
  background: rgba(11, 23, 57, .62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ar-img-note--top { top: 20px; bottom: auto; right: 20px; }
@media (max-width: 767px) { .ar-img-note--top { top: 12px; right: 12px; } }
.ar-img-note--glass .elementor-heading-title { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ar-brand { text-decoration: none; }
.ar-brand img { width: 56px; height: 56px; object-fit: contain; }
@media (max-width: 1024px) { .ar-brand img { width: 46px; height: 46px; } }
@media (max-width: 420px) { .ar-brand__sub { display: none; } }
.ar-nav .e-n-menu-title-text { font-weight: 500; }
.ar-nav .e-n-menu-dropdown-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.ar-nav .e-n-menu-content { padding-top: 0; }

/* Services mega panel */
.ar-megamenu { box-shadow: var(--ar-shadow-panel); }
.ar-megamenu__item .elementor-heading-title a { display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; padding: 10px 12px; border-radius: 10px; color: var(--ar-ink); text-decoration: none; }
.ar-megamenu__item .ar-idx { font-size: 13px; font-weight: 600; color: var(--ar-cobalt); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ar-megamenu__item .elementor-heading-title a:is(:hover, :focus-visible) { background-color: var(--ar-soft); color: var(--ar-cobalt); }
.ar-megamenu__sub { margin-top: -6px !important; padding: 0 12px 6px 48px; }
.ar-megamenu__sub .elementor-icon-list-text { font-size: 13px; color: var(--ar-muted); }
.ar-megamenu__sub a:is(:hover, :focus-visible) .elementor-icon-list-text { color: var(--ar-cobalt); text-decoration: underline; }
.ar-megamenu__all { border-top: 1px solid var(--ar-border); margin-top: 8px; padding: 14px 12px 0; }

/* Off-canvas drawer */
.ar-drawer .e-off-canvas__main { color: #fff; }
.ar-drawer__top img { width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 4px; object-fit: contain; }
.ar-drawer__nav .elementor-icon-list-item > a { font-family: Manrope, Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 6px 0; width: 100%; }
.ar-drawer__nav .elementor-icon-list-item > a .elementor-icon-list-text { color: inherit; }
.ar-drawer .e-n-accordion-item-title { font-family: Manrope, Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); min-height: 56px; padding: 6px 0; }
.ar-drawer .e-n-accordion-item-title-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.ar-drawer__link .elementor-heading-title a { display: flex; align-items: baseline; gap: 10px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; min-height: 44px; padding: 8px 0; }
.ar-drawer__link .ar-idx { color: var(--ar-cyan); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; width: 22px; flex: none; }
.ar-drawer__link .elementor-heading-title a:is(:hover, :focus-visible) { color: var(--ar-cyan); }
.ar-drawer__sub { margin-top: -4px !important; padding: 0 0 6px 32px; }
.ar-drawer__sub .elementor-icon-list-item > a { min-height: 36px; }
.ar-drawer__sub .elementor-icon-list-text { font-size: 14px; color: var(--ar-muted-navy); font-weight: 500; }
.ar-drawer__all .elementor-heading-title a { color: var(--ar-cyan); font-weight: 600; text-decoration: none; }
.ar-drawer__contact a { color: var(--ar-muted-navy); }

/* --------------------------------------------------------------------------
   Hero carousel (nested Carousel, class ar-carousel--hero)
   -------------------------------------------------------------------------- */
.ar-hero__slide { min-height: 720px; }
@media (max-width: 1024px) { .ar-hero__slide { min-height: 640px; } }
@media (max-width: 767px) { .ar-hero__slide { min-height: 600px; } }
.ar-hero__slide > .ar-hero__content { flex: 1; }
.ar-slide-title .elementor-heading-title { max-width: 15ch; }
.ar-slide-text { max-width: 38rem; }

/* --------------------------------------------------------------------------
   Lists drawn with Text Editor HTML
   -------------------------------------------------------------------------- */
.ar-steps ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: arstep; }
.ar-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: #D7DEEE; font-size: 16px; line-height: 1.5; counter-increment: arstep; }
.ar-steps li::before { content: counter(arstep); width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(70, 199, 238, .6); color: var(--ar-cyan); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Breadcrumbs (Icon List, inline, class ar-crumbs) */
.ar-crumbs .elementor-icon-list-item:not(:first-child)::before { content: "/"; margin-right: 8px; opacity: .6; color: var(--ar-muted-navy); }
.ar-crumbs .elementor-icon-list-item a:is(:hover, :focus-visible) .elementor-icon-list-text { color: #fff; text-decoration: underline; }
.ar-crumbs .elementor-icon-list-item:last-child .elementor-icon-list-text { color: var(--ar-muted-navy); }

/* Process steps (container class ar-step, number heading class ar-step__num) */
.ar-step { position: relative; }
.ar-step::before { content: ""; position: absolute; left: 44px; right: -24px; top: 21px; height: 1px; background: var(--ar-border); }
.ar-step:last-child::before { display: none; }
.ar-step__num .elementor-heading-title { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ar-cobalt); color: var(--ar-cobalt); background: #fff; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .ar-step::before { display: none; } }

/* Stat card over the About image */
.ar-stat { position: absolute !important; right: -24px; bottom: 56px; width: auto !important; }
@media (max-width: 1024px) { .ar-stat { right: 16px; } }

/* Fact blocks (red top rule) */
.ar-fact { border-top: 2px solid var(--ar-red); }

/* Testimonial quote mark */
.ar-q-mark .elementor-heading-title { font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: .7; height: 32px; font-weight: 700; color: var(--ar-cobalt); }

/* Project card: badge over the image */
.ar-project-card { overflow: hidden; }
.ar-badge-pos { position: absolute !important; left: 16px; top: 16px; z-index: 2; width: auto !important; }
.ar-project-card .ar-card__cta { margin-top: auto; }

/* Project facts list (Text Editor HTML, class ar-facts) */
.ar-facts dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; }
.ar-facts dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-muted); padding: 14px 0; border-bottom: 1px solid var(--ar-border); }
.ar-facts dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--ar-border); font-size: 16px; font-weight: 500; color: var(--ar-ink); }
.ar-facts dl > :nth-last-child(-n+2) { border-bottom: 0; }
.ar-facts .ar-src { font-size: 13px; color: var(--ar-muted); font-weight: 400; display: block; margin-top: 4px; }
.ar-facts .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-facts .ar-chips a, .ar-facts .ar-chips span { display: inline-flex; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--ar-cobalt-tint); color: var(--ar-cobalt); line-height: 1.2; text-decoration: none; }
@media (max-width: 767px) { .ar-facts dl { grid-template-columns: 1fr; } .ar-facts dt { border-bottom: 0; padding-bottom: 2px; } }

/* Gallery placeholders */
.ar-ph { aspect-ratio: 4 / 3; border: 1.5px dashed var(--ar-field); }

/* FAQ accordion */
.ar-faq .e-n-accordion-item { border-bottom: 1px solid var(--ar-border); }
.ar-faq .e-n-accordion-item:first-child { border-top: 1px solid var(--ar-border); }
.ar-faq .e-n-accordion-item-title-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--ar-soft); color: var(--ar-cobalt); display: inline-grid; place-items: center; transition: transform .24s; }
.ar-faq .e-n-accordion-item-title-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.ar-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(45deg); }

/* Organisation chart */
.ar-org-line { width: 1px; height: 20px; background: var(--ar-field); }
.ar-org-row { position: relative; }
.ar-org-row::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--ar-field); }
.ar-org-row > .ar-org-node::before { content: ""; position: absolute; left: 50%; top: -21px; width: 1px; height: 20px; background: var(--ar-field); }
.ar-org-node { position: relative; }
.ar-org-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
@media (max-width: 1024px) { .ar-org-row::before, .ar-org-row > .ar-org-node::before { display: none; } }

/* Map placeholder grid */
.ar-map { background-image: linear-gradient(#DCE4F0 1px, transparent 1px), linear-gradient(90deg, #DCE4F0 1px, transparent 1px); background-size: 32px 32px; }

/* Footer */
.ar-footer .elementor-icon-list-icon svg { fill: none; stroke: currentColor; }
.ar-footer .elementor-icon-list-item { align-items: flex-start; }
.ar-footer .elementor-icon-list-icon { padding-top: 3px; }

/* Phone action bar buttons share the width */
.ar-mobilebar > .elementor-element { flex: 1; }
.ar-mobilebar .elementor-button { width: 100%; padding: 14px 12px; }

/* Services grid: compact two columns on phones */
@media (max-width: 767px) {
  .ar-svc-grid .ar-svc-card { padding: 18px 16px !important; gap: 10px !important; border-radius: 14px !important; }
  .ar-svc-grid .ar-svc-card .ar-card__title .elementor-heading-title { font-size: 16px; line-height: 1.3; }
  .ar-svc-grid .ar-card__cta .elementor-heading-title { font-size: 13px; }
}

/* Testimonial quote text */
.ar-quote blockquote { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; }
.ar-quote p { margin: 0; }

/* Build fixes (QA pass) */
.ar-header .ar-menu-trigger { flex-shrink: 0; }
.ar-header .ar-brand { min-width: 0; flex-shrink: 1; }
.ar-carousel--hero .swiper-pagination, .ar-carousel--hero .swiper-pagination * { color: #fff; }
.ar-carousel__toggle { background: transparent !important; }
.ar-carousel__toggle:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .12) !important; }
.ar-carousel--clients .ar-carousel__toggle { color: var(--ar-ink); }
.ar-carousel--clients .ar-carousel__toggle:is(:hover, :focus-visible) { background: var(--ar-soft) !important; }
.ar-img-note .elementor-heading-title { color: #fff !important; }
.ar-img-note--glass .elementor-heading-title { color: rgba(255, 255, 255, .9) !important; }
.ar-drawer .e-off-canvas__main { max-width: 100vw; }
@media (max-width: 767px) { .ar-drawer .e-off-canvas__main { width: 100% !important; } }
.ar-drawer__nav .elementor-icon-list-text, .ar-drawer .e-n-accordion-item-title-text { font-family: Manrope, Inter, sans-serif; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: #fff; }
.ar-drawer .e-n-accordion-item-title { width: 100%; justify-content: space-between; }

/* Linked cards: the title link covers the whole card */
.ar-card--link .ar-card__title, .ar-card--link .ar-card__title .elementor-heading-title { position: static; }
.ar-card--link .ar-card__cta a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
.ar-card--link { cursor: pointer; }

/* --------------------------------------------------------------------------
   Homepage clients section (v2): cards, controls, short progress line
   -------------------------------------------------------------------------- */
.ar-clients-section { overflow-x: clip; }
.ar-clients-v2 .e-n-carousel { padding: 6px 0 18px; }
.ar-client2 { height: 100%; box-shadow: 0 1px 2px rgba(11, 23, 57, .05), 0 6px 16px -12px rgba(11, 23, 57, .18); transition: transform .3s var(--ar-ease), box-shadow .3s var(--ar-ease), border-color .2s var(--ar-ease); }
.ar-client2::before { content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--ar-cobalt); margin-bottom: 10px; }
.ar-client2:hover { transform: translateY(-3px); border-color: #C9D5E8 !important; box-shadow: 0 2px 4px rgba(11, 23, 57, .05), 0 14px 30px -16px rgba(11, 23, 57, .28); }
.ar-client2__short .elementor-heading-title, .ar-client2__full .elementor-heading-title { overflow-wrap: normal; hyphens: manual; }
.ar-clients-v2 .ar-carousel__bar { position: relative; margin-top: 10px; display: flex; justify-content: flex-start; }
.ar-clients-v2 .ar-carousel__bar .swiper-pagination-progressbar { position: relative !important; inset: auto !important; width: 120px !important; height: 3px !important; border-radius: 3px; background: #DCE4F0 !important; overflow: hidden; }
.ar-clients-v2 .swiper-pagination-progressbar-fill { background: var(--ar-cobalt) !important; border-radius: 3px; }
.ar-clients-controls .elementor-swiper-button,
.ar-clients-controls .ar-carousel__toggle {
  position: static !important; transform: none !important; inset: auto !important; margin: 0 !important;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid #C9D5E8; background: #fff !important;
  color: var(--ar-cobalt); display: inline-grid; place-items: center; cursor: pointer;
  transition: border-color .2s var(--ar-ease), background-color .2s var(--ar-ease);
}
.ar-clients-controls .elementor-swiper-button svg, .ar-clients-controls .ar-carousel__toggle svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor; }
.ar-clients-controls .elementor-swiper-button:is(:hover, :focus-visible),
.ar-clients-controls .ar-carousel__toggle:is(:hover, :focus-visible) { border-color: var(--ar-cobalt); background: var(--ar-cobalt-tint) !important; }
.ar-clients-controls :focus-visible { outline: 3px solid var(--ar-cobalt); outline-offset: 2px; }
.ar-clients-controls:not(.is-ready) { visibility: hidden; }
.elementor-editor-active .ar-clients-controls:not(.is-ready) { visibility: visible; min-width: 136px; min-height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .ar-clients-controls { display: none !important; }
  .ar-client2, .ar-client2:hover { transition: none; transform: none; }
}

/* Clients: show a glimpse of the next card on phones */
@media (max-width: 767px) { .ar-clients-v2 .e-n-carousel { overflow: visible; margin-right: 56px; clip-path: inset(-12px -100vw -24px 0); } }

.ar-clients-v2 .ar-carousel__bar .swiper-pagination-progressbar { flex: 0 0 120px !important; }
.ar-clients-section .ar-clients-controls { width: auto !important; flex: 0 0 auto !important; }
.ar-clients-section .e-con:has(> .ar-clients-controls) > .e-con:not(.ar-clients-controls) { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
@media (max-width: 767px) { .ar-clients-section .e-con:has(> .ar-clients-controls) > .e-con:not(.ar-clients-controls) { width: 100% !important; } }/* End custom CSS */