/* Interaction styles for the standalone homepage */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #e2652a; outline-offset: 4px; }
nav .mobile-links {
  background: #141414;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 20px;
  width: 100%;
}
nav .mobile-links a {
  border-bottom: 1px solid #ffffff24;
  color: inherit;
  display: block;
  font: 500 15px/1.4 Inter, sans-serif;
  padding-block: 12px;
}
nav .mobile-links a:last-child { border-bottom: 0; }
#faq .faq-answer { width: 100%; }
.quote-status { color: #4b4a4a; font: 14px/1.5 Inter, sans-serif; margin-top: 12px; }


/* The published variants use a sliding fill, a rotating arrow and 105% image zoom. */
:root {
  --ciketo-orange: #e2652a;
  --ciketo-motion: 400ms cubic-bezier(.22, 1, .36, 1);
}

.framer-ueppu,
.framer-MYWTc,
.framer-OwhrL { transition: background-color var(--ciketo-motion), gap var(--ciketo-motion); }
.framer-ueppu .framer-6y4nwf { transition: width var(--ciketo-motion); }
.framer-ueppu .framer-1ef7ulg { transition: padding var(--ciketo-motion), background-color var(--ciketo-motion); }
.framer-ueppu .framer-jvlr3x-container {
  color: #000;
  line-height: 0;
  transition: transform var(--ciketo-motion), color var(--ciketo-motion);
}
.framer-ueppu [class~="framer-jvlr3x-container"] svg { display: block; width: 100%; height: 100%; }
.framer-ueppu:is([data-framer-name$="/Black"]) .framer-jvlr3x-container { color: #fff; }

.framer-OwhrL .framer-1drfgb { transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.framer-XfxQo .framer-1itkh8y {
  transform-origin: center;
  transition: transform var(--ciketo-motion);
}

.service-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.service-trigger:focus-visible { outline-offset: -4px; }
.service-open .framer-1ot6srd { z-index: 2; }
.service-open .framer-15w8j03 { overflow: hidden; }
.mobile-links a:focus-visible { color: var(--ciketo-orange); }
.framer-eJFkv > div { transition: transform 220ms ease, opacity 220ms ease; }
.framer-eJFkv[aria-expanded="true"] .framer-sxij6q { transform: rotate(45deg); }
.framer-eJFkv[aria-expanded="true"] .framer-1tprjqz { opacity: 0; }
.framer-eJFkv[aria-expanded="true"] .framer-1ccss1b { transform: rotate(-45deg); }
.framer-LhQcG { transition: background-color 220ms ease; }
.framer-MXnka { transition: opacity 220ms ease; }
[data-framer-name="Image List"] [aria-pressed] { cursor: pointer; transition: opacity var(--ciketo-motion); }
[data-framer-name="Image List"] [aria-pressed="false"] { opacity: .68; }
[data-framer-name="Image List"] [role="button"]:focus-visible { outline-offset: -3px; }

@media (max-width: 809px) {
  .framer-ZOlN3 .framer-1i360h6 > [aria-pressed="true"] {
    width: min(200px, calc(100% - 132px));
  }
  .framer-ZOlN3 [data-framer-name="Detail List"] {
    height: auto !important;
  }
  .framer-ZOlN3 [data-framer-name="Detail List"] > div,
  .framer-ZOlN3 [data-framer-name="Detail List"] .framer-l88cqf {
    position: relative;
    height: auto !important;
  }
  .framer-ZOlN3 [data-framer-name="Detail List"] .framer-l88cqf { gap: 32px; }
}

.framer-ueppu:focus-visible .framer-jvlr3x-container,
.framer-ueppu:active .framer-jvlr3x-container { transform: rotate(45deg); }
.framer-MYWTc:focus-visible { background-color: var(--ciketo-orange) !important; }
.framer-MYWTc:active { background-color: #4b4a4a !important; }
.framer-XfxQo:focus-visible .framer-1itkh8y { transform: scale(1.05); }

@media (hover: hover) {
  .framer-ueppu:is(.framer-v-1sae2pd, .framer-v-17p2jg0):hover { gap: 0; }
  .framer-ueppu:is(.framer-v-1sae2pd, .framer-v-17p2jg0):hover .framer-1ef7ulg { padding-inline-start: 14px; }
  .framer-ueppu:not([data-framer-name^="Small/"]):hover .framer-6y4nwf { width: 100%; }
  .framer-ueppu[data-framer-name^="Small/"]:hover,
  .framer-ueppu[data-framer-name^="Primary/"]:hover .framer-1ef7ulg,
  .framer-MYWTc:hover { background-color: var(--ciketo-orange) !important; }
  .framer-ueppu:hover .framer-1yi707c .framer-text { color: #fff; }
  .framer-ueppu:hover .framer-jvlr3x-container { color: #fff; transform: rotate(45deg); }
  .framer-ueppu[data-framer-name^="Secondary/"]:hover .framer-1ef7ulg { opacity: 0; }
  .framer-MYWTc:active { background-color: #4b4a4a !important; }
  .framer-OwhrL:not([data-framer-page-link-current]):hover { background-color: #e5e5e5 !important; }
  .framer-OwhrL:not([data-framer-page-link-current]):hover .framer-1drfgb { transform: translateY(calc(-50% - 2.5px)); }
  .framer-XfxQo:hover .framer-1itkh8y { transform: scale(1.05); }
  .framer-LhQcG:not(.service-open):hover { background-color: #e5e5e5 !important; }
  .mobile-links a:hover { color: var(--ciketo-orange); }
  [data-framer-name="Image List"] [aria-pressed]:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #main *, #main *::before, #main *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}



/* ===== FXL brand: hero + navigation ===== */
/* Ciketo's colour tokens re-pointed to FXL inside the hero and the nav bars only. */
[data-framer-name="Hero"],
nav[data-framer-name$="/Primary"] {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange: Ciketo #e2652a -> FXL accent */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530; /* black -> FXL ink */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey text -> FXL body */
  --ciketo-orange: #F14624;
}
[data-framer-name="Hero"] .framer-text,
nav[data-framer-name$="/Primary"] .framer-text { --framer-font-family: "29LT Bukra", sans-serif !important; }
[data-framer-name="Hero"] h1.framer-text { letter-spacing: -0.03em; }

/* Purple instead of black for the dark blocks */
[data-framer-name="Hero"] [data-framer-name="Secondary/Black"] .framer-scunil,
[data-framer-name="Hero"] .framer-112q7oi { background-color: #452874 !important; }
[data-framer-name="Hero"] .framer-112q7oi .framer-text { --framer-text-color: #FFFFFF; }
[data-framer-name="Hero"] .framer-112q7oi [data-framer-name="Client Name"] .framer-text { --framer-text-color: #D9CFEA; }

/* Ciketo darkens the photo with 70% black; FXL uses its deep purple instead */
[data-framer-name="Hero"] [data-framer-name="Cover"] { background-color: rgba(42, 23, 72, .66) !important; }

/* FXL logo is taller than Ciketo's wordmark */
.framer-502un2-container,
.framer-MoQON.framer-mtf846 { width: 52px !important; height: 28px !important; }
.framer-MoQON img[src*="fxl-logo"] { object-fit: contain !important; }

/* ===== Arabic-first (right-to-left) ===== */
@font-face { font-family: "29LT Bukra"; src: url("assets/fonts/29ltbukralight.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "29LT Bukra"; src: url("assets/fonts/29ltbukraregular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "29LT Bukra"; src: url("assets/fonts/29ltbukrabold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
[lang="ar"] .framer-text {
  --framer-font-family: "29LT Bukra", "Archivo", sans-serif !important;
  --framer-letter-spacing: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
[lang="ar"] h1.framer-text { --framer-line-height: 1.3 !important; line-height: 1.3 !important; font-weight: 700; }
[lang="ar"] [data-framer-name="Hero Title"] p.framer-text { --framer-line-height: 1.8 !important; line-height: 1.8 !important; }
/* The arrow is drawn pointing up-left in RTL, so it turns the other way on hover */
@media (hover: hover) {
  [dir="rtl"] .framer-ueppu:hover .framer-jvlr3x-container { transform: rotate(-45deg); }
}
[dir="rtl"] .framer-ueppu:is(:focus-visible, :active) .framer-jvlr3x-container { transform: rotate(-45deg); }
@media (hover: hover) {
  [dir="rtl"] .framer-ueppu:is(.framer-v-1sae2pd, .framer-v-17p2jg0):hover .framer-1ef7ulg { padding-inline-start: 0; padding-inline-end: 14px; }
}
/* Bukra is wider than Inter: let the office chip and the markets line wrap on narrow screens */
[dir="rtl"] .framer-ylxcy9 { flex-wrap: wrap; column-gap: 16px; row-gap: 16px; overflow: visible; }
/* Hero is exactly one screen tall (desktop and tablet). On short screens the spacing and title
   shrink so the content never slides up under the header. */
@media (min-width: 810px) {
  .framer-vAthX .framer-1u3wiw6[data-framer-name="Hero"] { height: 100vh; height: 100svh; min-height: 0; }
  @media (max-height: 860px) {
    .framer-vAthX [data-framer-name="Hero"] .framer-76nrcq { padding-top: 110px; padding-bottom: 32px; }
    .framer-vAthX [data-framer-name="Hero"] .framer-9rz4b { gap: 40px; }
    [lang="ar"][data-framer-name="Hero"] h1.framer-text { font-size: clamp(40px, 6.4vh, 64px) !important; --framer-font-size: clamp(40px, 6.4vh, 64px) !important; }
  }
  @media (max-height: 700px) {
    .framer-vAthX [data-framer-name="Hero"] .framer-9rz4b { gap: 24px; }
    [data-framer-name="Hero"] [data-framer-name="Hero Title"] p.framer-text { font-size: 15px !important; }
  }
}
/* Phones: the hero keeps its natural height (Ciketo's phone layout stacks everything) but fills at least the screen */
@media (max-width: 809px) {
  .framer-vAthX .framer-1u3wiw6[data-framer-name="Hero"] { min-height: 100svh; }
}

/* ===== Clients ticker =====
   The Framer Ticker component only moves once Framer's runtime hydrates it, so in this static copy
   the logos stood still. This is a plain CSS loop: the list is repeated once and slides by half its width. */
#clients .framer-yy8r8w { direction: ltr; }
#clients .fxl-ticker {
  display: flex; align-items: center; gap: 0; width: max-content;
  list-style: none; margin: 0; padding: 0;
  animation: fxl-ticker var(--fxl-ticker-duration, 140s) linear infinite reverse; /* reverse = drifts right, with the Arabic reading flow */
}
#clients .fxl-ticker-copy, #clients .fxl-ticker-copy-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
#clients .fxl-logo { flex: none; display: grid; place-items: center; height: 64px; padding-inline: 28px; }
#clients .fxl-logo img {
  display: block; height: auto; width: auto; max-height: 52px; max-width: 140px;
  mix-blend-mode: multiply;
  filter: brightness(1.04) grayscale(1); opacity: .8; transition: filter .3s ease, opacity .3s ease;
}
#clients .fxl-logo:hover img { filter: brightness(1.04); opacity: 1; }
#clients .framer-yy8r8w:hover .fxl-ticker { animation-play-state: paused; }
@keyframes fxl-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #clients .fxl-ticker { animation: none; }
  #clients .framer-yy8r8w { overflow-x: auto; }
}
@media (max-width: 809px) {
  #clients .fxl-logo { height: 44px; padding-inline: 20px; }
  #clients .fxl-logo img { max-height: 34px; max-width: 96px; }
}

/* ===== Services (Arabic, FXL colours) ===== */
#services {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey text */
  --ciketo-orange: #F14624;
}
/* The open service card is FXL purple instead of black */
#services .framer-LhQcG.service-open { background-color: #452874 !important; }
#services .framer-LhQcG:not(.service-open) .framer-text { --framer-text-color: #1B1530; }
#services [data-framer-name="Name"] img, #services img[src*="fxl-logomark"] { object-fit: contain !important; background: #fff; padding: 8px; }
#services .framer-text a[href^="tel:"] bdi { unicode-bidi: isolate; }
/* Plus/minus icon: Framer baked each bar's colour and rotation into inline styles at first render,
   so after clicking another row the icons stayed as they were. Drive them from the open state instead. */
#services .framer-LhQcG .framer-zJg98 > * { background-color: #1B1530 !important; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), background-color 300ms ease; }
#services .framer-LhQcG .framer-zJg98 > .framer-1odax4q { transform: rotate(90deg) !important; }
#services .framer-LhQcG.service-open .framer-zJg98 > * { background-color: #FFFFFF !important; }
#services .framer-LhQcG.service-open .framer-zJg98 > .framer-1odax4q { transform: none !important; }
@media (hover: hover) {
  #services .framer-LhQcG:not(.service-open):hover { background-color: #ECE7F3 !important; } /* FXL tint instead of grey */
}

/* ===== Header ===== */
nav [data-framer-name="Action"]:has(> .fxl-portal-link) { gap: 16px; }
nav .mobile-links .fxl-portal-link {
  display: flex;
  align-self: flex-start;
  margin-top: 8px;
}
nav[data-framer-name^="Tablet/"] [data-framer-name="Action"]:has(> .fxl-portal-link) { gap: 8px; }
@media (max-width: 950px) {
  nav.framer-BLDGm[data-framer-name^="Tablet/"] { padding-inline: 12px; }
  nav[data-framer-name^="Tablet/"] [data-framer-name="Navigation"] { gap: 2px; }
  nav[data-framer-name^="Tablet/"] [data-framer-name="Navigation"] a.framer-OwhrL { padding-inline: 4px; }
  nav[data-framer-name^="Tablet/"] [data-framer-name="Action"] .framer-ueppu { gap: 6px; padding-inline: 8px; }
  nav[data-framer-name^="Tablet/"] [data-framer-name="Action"] .framer-ueppu .framer-text { --framer-font-size: 12px; }
}
/* The primary nav uses the solid FXL header when scrolled. */
nav[data-framer-name$="/Primary"] { transition: background-color 300ms ease; }
nav[data-framer-name$="/Primary"] .framer-ueppu .framer-scunil,
nav[data-framer-name$="/Primary"] .framer-ueppu .framer-1ef7ulg,
nav[data-framer-name$="/Primary"] [data-framer-name="Line"] { transition: background-color 300ms ease; }
html.is-scrolled nav[data-framer-name$="/Primary"] { background-color: rgba(244, 240, 240, .976) !important; }
/* the whole quote button turns purple (not just the text and icon boxes inside the white button) */
html.is-scrolled nav[data-framer-name$="/Primary"] a.framer-ueppu { background-color: #452874 !important; }
html.is-scrolled nav[data-framer-name$="/Primary"] .framer-ueppu .framer-scunil,
html.is-scrolled nav[data-framer-name$="/Primary"] .framer-ueppu .framer-1ef7ulg { background-color: transparent !important; }
html.is-scrolled nav[data-framer-name$="/Primary"] .framer-ueppu .framer-text { --framer-text-color: #FFFFFF !important; color: #FFFFFF; }
html.is-scrolled nav[data-framer-name$="/Primary"] .framer-ueppu .framer-jvlr3x-container { color: #FFFFFF; }
html.is-scrolled nav[data-framer-name="Phone/Primary"] [data-framer-name="Line"] { background-color: #1B1530 !important; }

/* ===== FXL image band after services: the photo stays fixed while the page scrolls past it ===== */
.fxl-band { clip-path: inset(0); overflow: hidden !important; }
.fxl-band > [data-framer-background-image-wrapper] { position: fixed !important; inset: 0 !important; height: 100vh; height: 100lvh; }
.fxl-band img { object-position: 60% 45% !important; transform: scale(var(--band-scale, 1.12)); transform-origin: 60% 45%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fxl-band img { transform: none; } }

/* ===== How It Works (Arabic, FXL colours) ===== */
section.framer-lqKNo {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530; /* black -> FXL ink */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey text */
  --ciketo-orange: #F14624;
}
/* Keep the step counter reading "01 / 04" (numbers stay left-to-right inside the Arabic layout) */
section.framer-lqKNo [data-framer-name="Number"] { direction: ltr; }
/* On phones a full-screen fixed photo crops to just a few letters, so the band shows the whole frame
   and keeps only the zoom-out as you scroll. */
@media (max-width: 809px) {
  .fxl-band > [data-framer-background-image-wrapper] { position: absolute !important; height: 100% !important; }
  .fxl-band img { object-position: 62% 50% !important; transform-origin: 62% 50%; }
}

/* ===== About (Arabic, FXL colours) ===== */
#about {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530; /* black -> FXL ink */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey text */
  --ciketo-orange: #F14624;
}
/* Stat lines have dir="auto", so "FCL · LCL بحري" was laid out left-to-right; keep every stat number-first in Arabic order */
#about [data-framer-name="Number"] h4 { direction: rtl !important; unicode-bidi: isolate !important; }
/* Ciketo's black button becomes FXL purple (the orange hover fill still slides over it) */
#about .framer-ueppu .framer-scunil,
#about .framer-ueppu .framer-1ef7ulg { background-color: #452874 !important; }

/* ===== Testimonials (Arabic, FXL colours) ===== */
.framer-ZOlN3 {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange: role, stars */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530; /* black -> FXL ink */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey text */
}
/* Keep each face in frame: the new photos are framed differently from Ciketo's */
.framer-ZOlN3 img[src*="client-sa-man-1"] { object-position: 50% 15% !important; }
.framer-ZOlN3 img[src*="client-sd-woman"] { object-position: 72% 30% !important; }
.framer-ZOlN3 img[src*="client-sd-man"] { object-position: 48% 30% !important; }
.framer-ZOlN3 img[src*="client-sa-man-2"] { object-position: 52% 25% !important; }
/* The "5.0 /5" score stays left-to-right */
.framer-ZOlN3 [data-framer-name="5 Stars"] [data-framer-name="Number"] { direction: ltr; }

/* =========================================================
   Markets we serve + Why FXL
   Ported from the earlier FXL site and restyled to the FXL design system
   (Ciketo structure: orange-square label, 2px corners, cards inside a 5px white frame).
   ========================================================= */
.fxl-sec {
  --ink: #1B1530; --body: #4A4458; --muted: #6E687C; --purple: #452874; --orange: #F14624; --line: #E5E1EC; --page: #F4F0F0;
  background: var(--page); color: var(--ink); padding: 100px 40px;
  font-family: "29LT Bukra", "Archivo", sans-serif;
}
.fxl-sec__inner { max-width: 1600px; margin-inline: auto; }
.fxl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fxl-head--center { align-items: center; text-align: center; }
.fxl-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.fxl-label > span { width: 8px; height: 8px; background: var(--orange); flex: none; }
.fxl-title { margin: 0; max-width: 860px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.35; font-weight: 400; color: var(--ink); text-wrap: balance; }
.fxl-body { margin: 0; font-size: 16px; line-height: 1.9; color: var(--body); }

/* Word-by-word reveal for the headings */
[data-fxl-split] .w { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(0.35em); filter: blur(6px);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease; transition-delay: calc(var(--i) * 45ms); }
[data-fxl-split].is-in .w { opacity: 1; transform: none; filter: none; }

/* ---------- Markets ---------- */
.fxl-markets__frame { margin-top: 56px; padding: 5px; background: #fff; border-radius: 2px; }
.fxl-markets__map { position: relative; direction: ltr; aspect-ratio: 1504 / 753; overflow: hidden; border-radius: 2px; background: #fff; }
.fxl-markets__canvas { position: absolute; inset: 0; }
.fxl-markets__canvas > img { display: block; width: 100%; height: 100%; }
.fxl-pin { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -100%); color: var(--purple); }
.fxl-pin__icon { display: block; width: 100%; height: 100%; }
.fxl-pin__icon path { fill: currentColor; }
.fxl-pin__icon circle { fill: #fff; }
.fxl-pin__label {
  position: absolute; direction: rtl; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 4px 4px 10px; border-radius: 2px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(27, 21, 48, .08);
  font-size: 13px; line-height: 1.5; color: var(--ink);
}
.fxl-pin__flag { width: 18px; height: 13.5px; border-radius: 1px; object-fit: cover; box-shadow: 0 0 0 1px rgba(27, 21, 48, .12); flex: none; }
.fxl-pin--top .fxl-pin__label { left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); }
.fxl-pin--bottom .fxl-pin__label { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
.fxl-pin--left .fxl-pin__label { right: calc(100% + 4px); top: 50%; transform: translateY(-62%); }
.fxl-pin--right .fxl-pin__label { left: calc(100% + 4px); top: 50%; transform: translateY(-62%); }
.fxl-markets__foot { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.fxl-markets__foot .fxl-body { max-width: 540px; text-wrap: balance; }
.fxl-btn-wrap { display: flex; }

/* ---------- Why FXL ---------- */
.fxl-why__cards { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; background: #fff; border-radius: 2px; }
.fxl-wcard {
  position: relative; min-height: 440px; padding: 28px; border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column; transform: translateY(var(--cy, 0px)); will-change: transform;
}
.fxl-wcard__num { font-size: 14px; line-height: 1; color: var(--orange); font-family: "Archivo", sans-serif; }
.fxl-wcard h3 { margin: 40px 0 0; font-size: 22px; line-height: 1.6; font-weight: 400; }
.fxl-wcard p { margin: 12px 0 0; max-width: 260px; font-size: 14.5px; line-height: 1.9; color: var(--body); }
.fxl-wcard--light { background: var(--page); }
.fxl-wcard--accent { background: var(--orange); color: #fff; }
.fxl-wcard--accent .fxl-wcard__num { color: #fff; opacity: .8; }
.fxl-wcard--accent p { color: rgba(255, 255, 255, .9); }
.fxl-wcard--dark { background: var(--purple); color: #fff; }
.fxl-wcard--dark p { color: rgba(255, 255, 255, .82); }

/* Animated line icons (same drawings as the earlier site, mirrored for right-to-left) */
.fxl-wicon { position: absolute; left: 28px; bottom: 28px; width: 130px; height: 130px; color: currentColor; opacity: .9; }
.fxl-wcard--light .fxl-wicon { color: var(--purple); }
.fxl-wicon--coil i { position: absolute; left: 16px; width: 98px; height: 20px; border: 1px solid currentColor; border-radius: 50%;
  top: calc(16px + var(--k) * 6px); animation: fxl-coil 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.12s); }
@keyframes fxl-coil { 50% { transform: translateY(-6px) scaleX(.92); } }
.fxl-wicon--rings { animation: fxl-spin 14s linear infinite; }
.fxl-wicon--rings i { position: absolute; left: 8px; top: 50%; border: 1px solid currentColor; border-radius: 50%;
  width: calc(114px - var(--k) * 19px); height: calc(114px - var(--k) * 19px); transform: translateY(-50%); }
@keyframes fxl-spin { to { transform: rotate(360deg); } }
.fxl-wicon--arrow svg { width: 130px; height: 130px; overflow: visible; }
.fxl-wicon--arrow .sq { transform-origin: 80px 80px; animation: fxl-sq 2.6s ease-in-out infinite; }
.fxl-wicon--arrow .a1 { animation: fxl-arrow 2.6s ease-in-out infinite; }
@keyframes fxl-sq { 50% { transform: scale(1.35); } }
@keyframes fxl-arrow { 50% { transform: translate(-6px, -6px); } }
.fxl-wicon--grid { display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; padding: 12px; }
.fxl-wicon--grid i { width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; animation: fxl-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .18s); }
@keyframes fxl-pulse { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1); } }
.fxl-wicon--stack i { position: absolute; left: 20px; width: 90px; height: 22px; border: 1px solid currentColor; border-radius: 2px;
  bottom: calc(12px + var(--k) * 28px); animation: fxl-stack 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * .15s); }
@keyframes fxl-stack { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc((var(--k) - 1.5) * 8px)); } }
.fxl-wicon--orbit i { position: absolute; inset: 18px; border: 1px solid currentColor; border-radius: 50%; }
.fxl-wicon--orbit i:nth-child(2) { inset: 18px 42px; animation: fxl-spin 9s linear infinite; }
.fxl-wicon--orbit b { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: currentColor; animation: fxl-orbit 4s linear infinite; }
@keyframes fxl-orbit { from { transform: rotate(0deg) translateX(-47px); } to { transform: rotate(-360deg) translateX(-47px); } }
.fxl-wicon--bars { display: flex; align-items: flex-end; justify-content: space-between; padding: 18px 12px; }
.fxl-wicon--bars i { width: 1px; height: 100%; background: currentColor; transform-origin: bottom; animation: fxl-bar 2.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.25s); }
@keyframes fxl-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.fxl-wicon--cross i { position: absolute; inset: 30px; border: 1px solid currentColor; animation: fxl-turn 6s ease-in-out infinite; }
.fxl-wicon--cross i:nth-child(2) { animation-direction: reverse; }
@keyframes fxl-turn { 50% { transform: rotate(-45deg) scale(.86); } }

/* Tablet (Ciketo's 810 to 1199px layout) */
@media (max-width: 1199px) {
  .fxl-sec { padding: 80px 20px; }
  .fxl-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fxl-wcard { --cy: 0px !important; min-height: 380px; }
}
/* Phone */
@media (max-width: 809px) {
  .fxl-sec { padding: 60px 15px; }
  .fxl-markets__frame, .fxl-why__cards { margin-top: 36px; }
  /* zoom the map into the Middle East to China area so the tags stay readable */
  .fxl-markets__map { aspect-ratio: 4 / 3; }
  .fxl-markets__canvas { inset: auto; left: 50%; top: 50%; width: 300%; aspect-ratio: 1504 / 753; transform: translate(-65.3%, -52%); }
  .fxl-pin { width: 18px; height: 18px; }
  .fxl-pin__label { font-size: 11.5px; gap: 4px; padding: 2px 3px 2px 8px; }
  .fxl-pin__flag { width: 15px; height: 11px; }
  .fxl-pin--m-bottom .fxl-pin__label { left: 50%; right: auto; top: calc(100% + 6px); bottom: auto; transform: translateX(-50%); }
  .fxl-why__cards { grid-template-columns: 1fr; }
  .fxl-wcard { min-height: 340px; padding: 24px; }
  .fxl-wcard p { max-width: 72%; }
  .fxl-wicon { transform: scale(.82); transform-origin: bottom left; left: 20px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-fxl-split] .w { opacity: 1; transform: none; filter: none; transition: none; }
  .fxl-wicon, .fxl-wicon * { animation: none !important; }
}
/* Ciketo's page wrapper is a centred flex column, so new sections must stretch to full width themselves */
.fxl-sec { width: 100%; align-self: stretch; box-sizing: border-box; }
.fxl-sec *, .fxl-sec *::before, .fxl-sec *::after { box-sizing: border-box; }
/* The staircase moves cards independently, so no shared white frame behind them; light cards are white instead */
.fxl-why__cards { background: none; padding: 0; gap: 8px; }
.fxl-wcard--light { background: #FFFFFF; }
/* Phones: the icon sits below the text (bottom-left) instead of floating over long Arabic text */
@media (max-width: 809px) {
  .fxl-wcard p { max-width: none; }
  .fxl-wicon { position: relative; left: auto; bottom: auto; margin-top: auto; align-self: flex-end; flex: none; width: 130px; height: 130px; transform: scale(.85); transform-origin: bottom left; margin-bottom: -10px; }
  .fxl-wcard h3 { margin-top: 24px; }
  .fxl-wcard { gap: 0; min-height: 0; }
  .fxl-wcard p { margin-bottom: 24px; }
}
/* Markets: the whole section is white, so the map sits on one continuous white background */
.fxl-markets { background: #FFFFFF; }
.fxl-markets__frame { padding: 0; background: none; }

/* ===== CTA (Arabic, FXL containers photo) ===== */
section.framer-qdtZ9 {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624;
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530;
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458;
  --ciketo-orange: #F14624;
}
section.framer-qdtZ9 [data-framer-name="Secondary/Black"] .framer-scunil { background-color: #452874 !important; }

/* ===== Footer (Arabic, FXL deep purple) ===== */
footer.framer-yqxFe {
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #2A1748; /* Ciketo's black footer -> FXL deep purple */
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624;
  --ciketo-orange: #F14624;
  background-color: #2A1748 !important;
}
footer.framer-yqxFe .framer-MoQON img { object-fit: contain !important; }
footer.framer-yqxFe .framer-nao37s-container,
footer.framer-yqxFe .framer-MoQON.framer-mtf846 { width: 74px !important; height: 40px !important; }
/* The Guangzhou address stays in English, aligned with the Arabic column above it */
footer.framer-yqxFe p:has(> bdi) { text-align: right; }
/* CTA: FXL purple tint over the photo instead of Ciketo's black, matching the hero */
section.framer-qdtZ9 [data-framer-name="Cover"] { background-color: rgba(42, 23, 72, .55) !important; }
/* The loop needs a left-to-right track on every page (Ciketo's container class differs per page,
   so pin the direction on the track and whatever holds it, not on a page-specific class). */
#clients .fxl-ticker,
#clients :has(> .fxl-ticker) { direction: ltr; justify-content: flex-start; }

/* Nav links, nav quote button and all hero text use the FXL font only (no Archivo/Inter fallback for Arabic) */
nav[data-framer-name$="/Primary"] .framer-text,
nav[data-framer-name$="/Primary"] a,
nav[data-framer-name$="/Primary"] .mobile-links a,
[data-framer-name="Hero"] .framer-text { font-family: "29LT Bukra", sans-serif !important; letter-spacing: 0 !important; }

/* ===== «الأدوات» (Tools) nav dropdown, built by script.js ===== */
.fxl-tools { position: relative; }
.fxl-tools > a { cursor: pointer; display: flex !important; align-items: center; gap: 4px; }
.fxl-tools__chev { display: grid; place-items: center; color: currentColor; transition: transform 200ms ease; }
.fxl-tools.is-open .fxl-tools__chev { transform: rotate(180deg); }
.fxl-tools > a.fxl-tools--current { background-color: #F14624 !important; }
.fxl-tools > a.fxl-tools--current p, .fxl-tools > a.fxl-tools--current .fxl-tools__chev { color: #FFFFFF !important; --framer-text-color: #FFFFFF !important; }
.fxl-tools__menu {
  position: absolute; z-index: 50; top: calc(100% + 10px); right: -8px; width: 270px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 2px; background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(27, 21, 48, .16); direction: rtl; font-family: "29LT Bukra", sans-serif;
}
.fxl-tools__menu[hidden] { display: none; }
.fxl-tools__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }   /* hover bridge */
.fxl-tools__menu a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 2px; text-decoration: none; color: #1B1530; transition: background-color 150ms ease; }
.fxl-tools__menu a:hover, .fxl-tools__menu a:focus-visible { background: #F4F0F0; outline: none; }
.fxl-tools__menu a[aria-current="page"] { background: #ECE7F3; }
.fxl-tools__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 2px; background: #452874; color: #FFFFFF; }
.fxl-tools__menu b { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
.fxl-tools__menu small { display: block; font-size: 12px; line-height: 1.4; color: #6E687C; }
nav .mobile-links a[aria-current="page"] { color: #F14624; }
/* Framer clips the nav and its wrappers; let only the chain that holds the Tools item overflow so the menu shows */
nav[data-framer-name^="Desktop/"]:has(.fxl-tools), nav[data-framer-name^="Tablet/"]:has(.fxl-tools),
nav[data-framer-name^="Desktop/"] :has(.fxl-tools), nav[data-framer-name^="Tablet/"] :has(.fxl-tools) { overflow: visible !important; }
/* the Tools label doesn't flip on hover (its menu opens instead) */
.fxl-tools .framer-1drfgb { transform: none !important; }

/* ===== Form fields: one clean focus frame in FXL purple (Framer's own frame, recoloured; no extra outline) ===== */
.framer-form-input-wrapper {
  --framer-input-border-color: #E5E1EC !important;
  --framer-input-focused-border-color: #452874 !important;
  --framer-input-focused-border-width: 1.5px !important;
  --framer-input-focused-border-style: solid !important;
}
.framer-form-input:focus, .framer-form-input:focus-visible { outline: none !important; }

/* ===== Split buttons (label block + arrow block): on hover they join into one rectangle =====
   The blocks keep 2px corners at rest; on hover the gap closes, so the corners where they meet go square
   (otherwise the rounded inner corners and the label's light base show as specks). RTL: label right, arrow left. */
@media (hover: hover) {
  .framer-ueppu:hover .framer-scunil { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
  .framer-ueppu:hover .framer-6y4nwf { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
  .framer-ueppu:hover .framer-1ef7ulg { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
  /* design-system split buttons (calculator, tracker, CTA bands) */
  .fxl-split:hover, .fxl-ctaband__btn:hover { gap: 0 !important; }
  .fxl-split:hover .fxl-split__label, .fxl-ctaband__btn:hover .fxl-ctaband__btn-label { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .fxl-split:hover .fxl-split__icon, .fxl-ctaband__btn:hover .fxl-ctaband__btn-icon { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }   /* 1px overlap: no hairline at sub-pixel positions */
  .framer-ueppu:hover .framer-1ef7ulg { margin-right: -1px; }
}
.fxl-split, .fxl-ctaband__btn { transition: gap 200ms ease; }

/* Nav links: the hover "flip" slides a second copy of the label up from below; each link clips its own text
   (the nav wrappers are set to overflow:visible for the Tools menu, so the clip has to live on the link) */
nav a.framer-OwhrL { overflow: hidden !important; }
nav a.framer-OwhrL [data-framer-name="Text"] { overflow: hidden !important; }

/* ===== Design-system split button (03 Buttons · Primary), shared ===== */
.fxl-split { display: inline-flex; gap: 2px; text-decoration: none; color: #FFFFFF; transition: gap 200ms ease; }
.fxl-split__label { display: flex; align-items: center; height: 49px; padding: 0 30px; border-radius: 2px; background: #452874; font-family: "29LT Bukra", sans-serif; font-size: 16px; white-space: nowrap; transition: background-color 200ms ease; }
.fxl-split__icon { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 2px; background: #452874; transition: background-color 200ms ease; }
.fxl-split__icon svg { transition: transform 300ms ease; }
@media (hover: hover) {
  .fxl-split:hover .fxl-split__label, .fxl-split:hover .fxl-split__icon { background: #2A1748; }
  .fxl-split:hover .fxl-split__icon svg { transform: rotate(-45deg); }
}
/* homepage services: «عرض جميع الخدمات» under the list */
.fxl-all-services { display: flex; justify-content: center; width: 100%; padding: 8px 20px 0; box-sizing: border-box; direction: rtl; }
section#services { flex-wrap: wrap; }

/* hero stat cards: numbers sit on the reading side (right) */
[data-framer-name="Hero"] [data-framer-name="Stats"] h4,
[data-framer-name="Hero"] .framer-112q7oi h4 { direction: rtl !important; text-align: right !important; width: 100%; }

/* About: the quote is signed by the FXL team (logomark instead of a portrait) */
#about [data-framer-name="Team"] img[src*="fxl-logomark"] { object-fit: contain !important; padding: 8px; box-sizing: border-box; background: #FFFFFF; }

/* Branded versions of the standard Windows arrow and link hand. */
@media (pointer: fine) {
  :root {
    --fxl-cursor-arrow: url("assets/fxl/cursor-arrow.svg") 0 0, default;
    --fxl-cursor-link: url("assets/fxl/cursor-link.svg") 7 0, pointer;
    --framer-custom-cursors: var(--fxl-cursor-link);
    cursor: var(--fxl-cursor-arrow);
  }

  :is(a[href], button, [role="button"], summary, select,
      input:is([type="checkbox"], [type="radio"], [type="submit"], [type="button"])):not(:disabled):not([data-framer-cursor="grab"]) {
    cursor: var(--fxl-cursor-link) !important;
  }
  :is(textarea, input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="search"], [type="number"], [type="url"]),
      input:not([type]), [contenteditable="true"]) { cursor: text; }
  button:disabled { cursor: var(--fxl-cursor-arrow) !important; }
}

/* ===== Reviews: space before the CTA band; on phones/tablets the quote card was squashed by fixed flex heights ===== */
.framer-ZOlN3 { padding-bottom: 120px !important; }
/* desktop: the section is 100vh tall; on short windows the quote ran under the CTA, so it never gets shorter than its content */
@media (min-width: 1200px) { .framer-ZOlN3 { height: max(100vh, 960px) !important; } }
@media (max-width: 1199px) {
  .framer-ZOlN3 { padding-bottom: 80px !important; height: auto !important; }
  .framer-ZOlN3 > [data-framer-name="Inner"],
  .framer-ZOlN3 [data-framer-name="Part/Testimonial"],
  .framer-ZOlN3 [data-framer-name="Detail List"],
  .framer-ZOlN3 [data-framer-name="Detail List"] > [data-framer-name^="Details"]:not([hidden]),
  .framer-ZOlN3 [data-framer-name="Detail List"] > [data-framer-name^="Details"]:not([hidden]) > [class*="-container"] { height: auto !important; min-height: 0 !important; overflow: visible !important; flex: none !important; width: 100% !important; }
  .framer-ZOlN3 [data-framer-name="Detail List"] { margin-top: 28px; }
}

/* ===== Markets map on phones: zoom further so the Gulf pins and their tags don't crowd ===== */
@media (max-width: 809px) {
  .fxl-markets__map { aspect-ratio: 1 / 1; }
  .fxl-markets__canvas { width: 330%; transform: translate(-66%, -52%); }
  /* China's tag sits to the left of its pin so it stays on screen */
  .fxl-pin[style*="78.69%"] .fxl-pin__label { left: auto; bottom: auto; right: calc(100% + 4px); top: 50%; transform: translateY(-62%); }
  .fxl-pin__label { font-size: 11px; padding: 2px 3px 2px 6px; }
}
@media (max-width: 809px) { .framer-ZOlN3 { padding-top: 64px !important; } }

/* ===== Footer: WeChat QR under the contact details ===== */
.fxl-wechat { display: inline-flex; align-items: center; margin-inline-end: 16px; flex: none; }
.fxl-wechat img { display: block; width: 56px; height: 56px; padding: 4px; border-radius: 2px; background: #FFFFFF; image-rendering: pixelated; }
footer [data-framer-name="Link"]:has(.fxl-wechat) { align-items: center !important; }
[class*="-container"]:has(> .framer-ZOlN3) { height: auto !important; min-height: 0 !important; }