/* About page: FXL colours and Arabic details for the parts that only exist on this page.
   Shared rules (Arabic font, clients ticker, CTA, footer, buttons) come from styles.css. */

/* Ciketo's About page uses the solid "Secondary" header from the start (there is no dark hero). */
nav[data-framer-name$="/Secondary"] {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* active tab: FXL orange */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530;
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458;
  --ciketo-orange: #F14624;
}
nav[data-framer-name$="/Secondary"] .framer-text { --framer-font-family: "29LT Bukra", "Archivo", sans-serif !important; letter-spacing: 0 !important; }
/* the dark quote button becomes FXL purple */
/* the whole button is purple (not only the text and icon boxes inside it) */
nav[data-framer-name$="/Secondary"] a.framer-ueppu { background-color: #452874 !important; }
nav[data-framer-name$="/Secondary"] .framer-ueppu .framer-scunil,
nav[data-framer-name$="/Secondary"] .framer-ueppu .framer-1ef7ulg { background-color: transparent !important; }
nav[data-framer-name$="/Secondary"] .framer-ueppu .framer-text { --framer-text-color: #FFFFFF !important; }
/* FXL logo instead of Ciketo's wordmark */
nav[data-framer-name$="/Secondary"] .framer-MoQON.framer-mtf846,
nav[data-framer-name$="/Secondary"] [class*="-container"]:has(> .framer-MoQON) { width: 52px !important; height: 28px !important; }
nav[data-framer-name$="/Secondary"] .framer-MoQON img { object-fit: contain !important; }
nav[data-framer-name="Phone/Secondary"] [data-framer-name="Line"] { background-color: #1B1530 !important; }

/* Page sections: Ciketo's black becomes FXL ink, its orange becomes FXL orange */
html[data-page="about"] main section,
html[data-page="about"] section[data-framer-name="Page Title"],
html[data-page="about"] section[data-framer-name="Leader"],
html[data-page="about"] section[data-framer-name="Industries"],
html[data-page="about"] section[data-framer-name="Client"] {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624;
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530;
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458;
  --ciketo-orange: #F14624;
}
/* Page title: the black secondary button becomes FXL purple, like the homepage hero */
section[data-framer-name="Page Title"] [data-framer-name="Secondary/Black"] .framer-scunil { background-color: #452874 !important; }
section[data-framer-name="Page Title"] [data-framer-name="Secondary/Black"] .framer-text { --framer-text-color: #FFFFFF !important; }

/* Leader: keep the quote marks and the name on the reading side */
section[data-framer-name="Leader"] img[src*="mishal"] { object-position: 50% 20% !important; }

/* Numbers and Latin labels inside Arabic stats read number-first */
#about [data-framer-name="Number"] h4 { direction: rtl !important; unicode-bidi: isolate !important; }
#about {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624;
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530;
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458;
}

/* ===== Our Mission («رسالة الشركة») ===== */
.fxl-mission { background: #FFFFFF; }
.fxl-mission__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.fxl-mission__body { display: flex; flex-direction: column; gap: 28px; }
.fxl-mission__body .fxl-body { font-size: 17px; }
.fxl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fxl-tags li { padding: 8px 14px; border-radius: 2px; background: var(--page, #F4F0F0); font-size: 14px; line-height: 1.5; color: var(--ink, #1B1530); }
.fxl-tags li:nth-child(1) { background: #452874; color: #FFFFFF; }

/* ===== Core values («القيم الأساسية») ===== */
.fxl-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; background: #FFFFFF; border-radius: 2px; }
.fxl-values__intro { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 2px; background: #452874; color: #FFFFFF; }
.fxl-values__intro .fxl-title { font-size: clamp(26px, 2.4vw, 34px); color: #FFFFFF; }
.fxl-values__intro .fxl-body { color: rgba(255, 255, 255, .82); font-size: 15px; margin-top: auto; }
.fxl-label--light { color: #FFFFFF; }
.fxl-value { display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: 2px; background: var(--page, #F4F0F0); }
.fxl-value__top { display: flex; justify-content: space-between; align-items: flex-start; }
.fxl-value__num { font-size: 14px; color: #F14624; }
.fxl-value__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 2px; background: #FFFFFF; color: #452874; }
.fxl-value h3 { margin: auto 0 0; padding-top: 40px; font-size: 22px; line-height: 1.6; font-weight: 400; color: #1B1530; }
.fxl-value p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.9; color: #4A4458; }

@media (max-width: 1199px) {
  .fxl-mission__grid { grid-template-columns: 1fr; gap: 32px; }
  .fxl-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .fxl-values__grid { grid-template-columns: 1fr; }
  .fxl-value { min-height: 0; }
  .fxl-value h3 { padding-top: 28px; }
}

/* ===== Core values: orange circle grows from the bottom-left corner on hover ===== */
.fxl-value { position: relative; overflow: hidden; isolation: isolate; }
.fxl-value::before {
  content: ""; position: absolute; z-index: -1; left: 0; bottom: 0;
  width: 320%; aspect-ratio: 1; border-radius: 50%; background: #F14624;
  transform: translate(-50%, 50%) scale(0);           /* centred on the bottom-left corner, collapsed */
  transition: transform 600ms cubic-bezier(.4, 0, .2, 1);   /* leaving: shrinks back */
}
.fxl-value h3, .fxl-value p, .fxl-value__num { transition: color 400ms ease; }
@media (hover: hover) {
  .fxl-value:hover::before { transform: translate(-50%, 50%) scale(1); transition-duration: 500ms; } /* fills the card in 0.5s */
  .fxl-value:hover h3, .fxl-value:hover p, .fxl-value:hover .fxl-value__num { color: #FFFFFF; }
  .fxl-value:hover .fxl-value__icon { color: #F14624; }
}
@media (prefers-reduced-motion: reduce) {
  .fxl-value::before { transition: none !important; }
}
/* tuning: titles fit the 2-column cards; the fill sweeps evenly and is complete at 1.5s */
.fxl-value::before { width: 290%; transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
/* the text turns white once the orange has reached it (not while the circle is still small);
   on leaving it turns dark again straight away */
@media (hover: hover) {
  .fxl-value:hover h3, .fxl-value:hover p, .fxl-value:hover .fxl-value__num { transition: color 200ms ease 220ms; }
}

/* Mission service tags (same design as the original mission section): white chips on the page colour,
   the first one purple */
#about .fxl-mission-tags { margin-top: 8px; }
#about .fxl-mission-tags li { background: #FFFFFF; font-family: "29LT Bukra", sans-serif; }
#about .fxl-mission-tags li:nth-child(1) { background: #452874; color: #FFFFFF; }

/* Photo band under the page title: 80% of the screen height, the photo fixed while the page scrolls past */
.fxl-band--about { height: 80vh !important; height: 80svh !important; }
.fxl-band--about img { object-position: 50% 55% !important; transform: none !important; }

/* Mission tags: one purple (first) and one orange (last), the rest white */
#about .fxl-mission-tags li:last-child { background: #F14624; color: #FFFFFF; }
/* keep the fixed effect on phones too */
@media (max-width: 809px) {
  .fxl-band--about > [data-framer-background-image-wrapper] { position: fixed !important; inset: 0 !important; height: 100vh !important; height: 100lvh !important; }
}
/* phones: centre the narrow crop on the FXL logo */
@media (max-width: 809px) { .fxl-band--about img { object-position: 57% 55% !important; } }