/* =============================================================
   SQL — Support Services
   Stylesheet (clean rebuild)

   Organisation
   1.  Design tokens
   2.  Reset & base
   3.  Layout primitives (container / section / eyebrow)
   4.  Buttons & links
   5.  Header & navigation
   6.  Hero / page hero
   7.  Home — trust strip
   8.  Home — about showcase
   9.  Home — services slider
   10. Home — process band
   11. Home — CTA band
   12. Services page — grid
   13. About page — showcase cards
   14. Projects page — filters & cards
   15. Careers page — value cards
   16. Blog — list, sidebar, article
   17. Forms (contact / service request)
   18. Footer
   19. Motion (reveal, hero text, marquee)
   20. Responsive
   21. Accessibility helpers

   Direction: the site is Arabic-first (dir="rtl"). All directional
   spacing/alignment uses CSS logical properties (start/end, inline),
   so the same rules work for the English (dir="ltr") pages with no
   duplicated selectors.
   ============================================================= */

/* 1. ---------- Design tokens ---------- */
:root {
  /* Brand colours */
  --color-ink: #083b5a;          /* primary text */
  --color-muted: #5e7180;        /* secondary text */
  --color-surface: #ffffff;      /* page background */
  --color-panel: #ffffff;        /* cards */
  --color-line: #d8ebee;         /* borders */
  --color-primary: #03A8AD;      /* teal */
  --color-primary-dark: #053e61; /* navy */
  --color-deep: #06324d;         /* deepest navy (dark bands, hero fallback) */
  --color-accent: #03A8AD;       /* bright teal */
  --color-teal: #03A8AD;         /* teal accent (was undefined in old file) */
  --color-brand-accent: #03A8AD;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  --grad-deep: linear-gradient(160deg, var(--color-primary-dark), var(--color-deep));
  --hero-veil: linear-gradient(to inline-end, rgba(23, 25, 31, 0.42), rgba(23, 25, 31, 0.88));

  /* Layout */
  --content-max: 1180px;
  --gutter: max(22px, calc((100% - var(--content-max)) / 2));

  /* Elevation */
  --shadow-card: 0 14px 38px rgba(5, 62, 97, 0.07);
  --shadow-float: 0 24px 70px rgba(5, 62, 97, 0.14);
  --shadow-header: 0 10px 30px rgba(5, 62, 97, 0.05);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Type */
  --font-base: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* 2. ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-ink);
  background: var(--color-surface);
  text-align: start;
  max-width: 100vw;
}

html[lang^="zh"] body {
  font-family: "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-ink);
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* 3. ---------- Layout primitives ---------- */
main {
  display: block;
}

.section {
  width: 100%;
  padding: clamp(56px, 7vw, 92px) var(--gutter);
}

/* a centred heading block used on several pages */
.section-heading,
.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-block-end: clamp(32px, 5vw, 52px);
  text-align: center;
}

.section-heading h1,
.section-heading h2,
.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--color-primary-dark);
}

.section-heading p,
.section-head p {
  margin-block-start: 14px;
  color: var(--color-muted);
}

.eyebrow {
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* 4. ---------- Buttons & links ---------- */
.btn,
.header-cta,
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.btn-primary,
.header-cta {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 14px 30px rgba(5, 62, 97, 0.18);
}

.btn-primary:hover,
.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(5, 62, 97, 0.26);
}

.btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.65);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.btn-wide {
  width: 100%;
}

.ghost-button {
  color: var(--color-primary-dark);
  background: #fff;
  border-color: var(--color-line);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.text-link::after {
  content: "\2190"; /* arrow; flips with text direction */
  transition: transform 0.18s ease;
}

.text-link:hover {
  color: var(--color-primary);
}

.text-link:hover::after {
  transform: translateX(-4px);
}

html[dir="ltr"] .text-link::after {
  content: "\2192";
}

html[dir="ltr"] .text-link:hover::after {
  transform: translateX(4px);
}

/* 5. ---------- Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 78px;
  padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.98);
  border-block-end: 1px solid rgba(216, 235, 238, 0.9);
  box-shadow: 0 10px 30px rgba(5, 62, 97, 0.04);
  transition: min-height 0.3s var(--motion-ease, ease), padding 0.3s var(--motion-ease, ease), box-shadow 0.3s ease, background 0.3s ease;
}

/* Compact "scrolled" state: header shrinks slightly and gains a
   stronger shadow once the page has scrolled past the hero, so it
   stays legible and out of the way while remaining visible. */
.site-header.is-scrolled {
  min-height: 62px;
  padding-block: 6px;
  box-shadow: 0 14px 34px rgba(5, 62, 97, 0.12);
  background: rgba(255, 255, 255, 0.98);
}

.site-header.is-scrolled .brand-mark {
  width: 68px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: block;
  width: 94px;
  height: 94px;
  font-size: 0;
  background: url("assets/sql-logo-transparent-clean.png") center / contain no-repeat;
  transition: width 0.3s var(--motion-ease, ease), height 0.3s var(--motion-ease, ease);
}

.brand-text {
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 30px);
  min-width: 0;
}

.site-nav a {
  position: relative;
  padding: 6px 0;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-muted);
  transition: color 0.18s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-ink);
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

.header-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  min-height: 44px;
  padding: 10px 16px;
  color: var(--color-primary-dark);
  background: #fff;
  border-color: var(--color-line);
}

.lang-switch:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lang-pill {
  gap: 0;
  min-height: 44px;
  padding: 4px;
  border: 1px solid rgba(5, 62, 97, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.lang-pill:hover {
  border-color: rgba(24, 170, 168, 0.5);
  color: var(--color-primary-dark);
}

.lang-pill a,
.lang-pill span {
  display: inline-grid;
  min-width: 34px;
  min-height: 32px;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.lang-pill a {
  color: var(--color-muted);
}

.lang-pill span {
  color: #fff;
  background: var(--color-primary-dark);
}

.lang-pill a:hover {
  color: var(--color-primary-dark);
  background: var(--color-surface);
}

.mobile-lang-group {
  display: none;
}

.mobile-lang {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  flex: none;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 6. ---------- Hero / page hero ---------- */
.hero,
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  padding: clamp(110px, 16vh, 150px) var(--gutter) clamp(64px, 9vh, 96px);
  color: #fff;
  background-color: var(--color-deep); /* fallback so text is always readable */
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.home-hero {
  height: clamp(680px, 88vh, 860px);
}

/* Background image lives on ::after so it can fade in independently */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-team.webp");
  background-size: cover;
  background-position: center top;
  z-index: 0;
  animation: heroImageIn 800ms ease-out both;
}

.home-hero::before {
  z-index: 1;
  background: linear-gradient(
    to inline-start,
    rgba(6, 50, 77, 0.25) 0%,
    rgba(6, 50, 77, 0.75) 55%,
    rgba(6, 50, 77, 0.92) 100%
  );
}

.page-hero {
  min-height: min(64vh, 540px);
}

.about-hero {
  background-image: url("assets/about-company.webp");
}

.services-hero {
  background-image: url("assets/service-workers.webp");
}

.projects-hero {
  background-image: url("assets/service-maintenance.webp");
}

.contact-hero {
  background-image: url("assets/about-goals.webp");
}

.blog-hero {
  background-image: url("assets/about-vision.webp");
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 25, 38, 0.45), rgba(6, 33, 51, 0.9));
}

html[dir="ltr"] .hero::before,
html[dir="ltr"] .page-hero::before {
  background: linear-gradient(270deg, rgba(8, 25, 38, 0.45), rgba(6, 33, 51, 0.9));
}

.hero-content,
.page-hero > div {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: start;
}

.hero h1,
.page-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.15;
  color: #fff;
}

.hero p,
.page-hero p {
  max-width: 640px;
  margin: 0 0 26px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255, 255, 255, 0.88);
}

.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--color-primary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* 7. ---------- Home: trust strip ---------- */
.trust-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-block-start: clamp(-72px, -5vw, -48px);
  padding-block: 0 clamp(40px, 6vw, 60px);
}

.trust-strip > div {
  padding: 28px 24px;
  text-align: center;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}

.trust-strip p {
  margin-block-start: 6px;
  color: var(--color-muted);
  font-weight: 600;
}

.metric {
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 8. ---------- Home: about showcase ---------- */
.logo-motion-section {
  position: relative;
}

/* Subtle, slowly drifting watermark of the brand mark behind the
   "About the Company" block on the home page only (this section carries
   both .about-showcase and .logo-motion-section). */
.about-showcase.logo-motion-section {
  overflow: hidden;
}

.about-showcase.logo-motion-section::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: url("assets/sql-mark.svg") 0 0 / 132px 132px repeat;
  opacity: 0.05;
  animation: logoDrift 38s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes logoDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-132px, -132px); } /* one tile = seamless loop */
}

.about-showcase-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.about-showcase-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 320px;
}

.about-showcase-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.about-wave-title {
  position: absolute;
  inset-inline: 18px;
  bottom: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(5, 62, 97, 0.85), rgba(6, 50, 77, 0.92));
  color: #fff;
  backdrop-filter: blur(2px);
}

.about-wave-title span {
  display: block;
  font-weight: 800;
  color: var(--color-primary);
}

.about-wave-title strong {
  display: block;
  font-size: 14px;
  opacity: 0.85;
}

.about-main-text {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.9;
}

.about-en-text,
.en-text {
  margin-block-start: 14px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.8;
}

.about-showcase-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 22px;
}

.about-showcase-pills span {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(24, 170, 168, 0.25);
  border-radius: var(--radius-pill);
}

/* 9. ---------- Home: services slider ---------- */
.services-slider-section {
  background: var(--grad-deep);
  color: #fff;
  padding-block: 60px;
  overflow: hidden;
}

.services-slider-section .eyebrow {
  color: var(--color-primary);
}

.services-slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-block-end: 36px;
  padding-inline: 20px;
}

.services-slider-head h2 {
  max-width: 760px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.5;
  color: #fff;
}

.all-services-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 22px;
  font-weight: 800;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.all-services-btn span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.all-services-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.service-carousel {
  overflow: hidden;
}

.service-track {
  display: flex;
  gap: 22px;
  width: max-content;
}

/* Continuous, seamless, never-stopping rotation. script.js duplicates the
   cards once, so translateX(-50%) lands exactly on the start of the copy and
   the loop is seamless. No hover pause: the strip rotates permanently. */
.service-track[data-marquee-ready="true"] {
  animation: marquee 40s linear infinite;
}

/* Service cards (used by both the slider and the services grid) */
.service-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-card);
  text-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-track .service-card {
  flex: 0 0 320px;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-float);
}

.service-icon {
  display: inline-flex;
  font-size: 36px;
  line-height: 1;
  margin-block-end: 14px;
}

.service-card h3 {
  font-size: 20px;
  color: var(--color-primary-dark);
}

.service-card p {
  margin-block: 12px 16px;
  color: var(--color-muted);
}

.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--color-primary);
}

.service-card a span {
  font-size: 18px;
}

/* 10. ---------- Home: process band ---------- */
.dark-band {
  background: var(--color-deep);
  color: #fff;
}

.dark-band > div:first-child {
  max-width: 760px;
  margin-inline: auto;
  margin-block-end: 44px;
  text-align: center;
}

.dark-band .eyebrow {
  color: var(--color-primary);
}

.dark-band h2 {
  font-size: clamp(24px, 3vw, 38px);
  color: #fff;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.process-list article {
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
}

.process-list span {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--color-primary);
}

.process-list h3 {
  margin-block: 10px 8px;
  font-size: 20px;
  color: #fff;
}

.process-list p {
  color: rgba(255, 255, 255, 0.74);
}

.why-us-list {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  gap: 34px;
}

.why-us-list article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 0;
  text-align: start;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.why-us-list span {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
}

.why-us-list h3 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 30px);
}

.why-us-list p {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
}

/* 11. ---------- Home: Clients ---------- */
.clients-section {
  text-align: center;
  overflow: hidden;
  padding-block: 60px;
}

.clients-track-wrapper {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
  direction: ltr;
}

.clients-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  will-change: transform;
}

.clients-track[data-marquee-ready="true"] {
  animation: scroll-ltr 30s linear infinite;
}

@keyframes scroll-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.clients-track img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.3s;
  flex-shrink: 0;
}

.clients-track img:hover {
  filter: grayscale(0) opacity(1);
}

@keyframes scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 12. ---------- Home: CTA band ---------- */
.cta-band {
  text-align: center;
  background: var(--color-panel);
}

.cta-band h2 {
  font-size: clamp(28px, 4vw, 46px);
  color: var(--color-primary-dark);
}

.cta-band p {
  max-width: 620px;
  margin: 16px auto 28px;
  color: var(--color-muted);
}

/* 12. ---------- Services page: grid ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.service-grid .service-card {
  position: relative;
}

.card-number {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-block-end: 8px;
}

/* 13. ---------- About page: showcase cards ---------- */
.about-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 32px);
  max-width: var(--content-max);
  margin-inline: auto;
}

.about-showcase {
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.about-showcase .about-showcase-media {
  border-radius: 0;
  min-height: 260px;
}

.about-showcase .about-showcase-media img {
  min-height: 260px;
}

.about-showcase-wave {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(6, 33, 51, 0.92), transparent);
}

.about-showcase-title {
  position: absolute;
  inset-inline: 22px;
  bottom: 18px;
  color: #fff;
}

.about-showcase-title .eyebrow {
  margin: 0 0 4px;
  color: var(--color-primary);
}

.about-showcase-title h2 {
  font-size: clamp(20px, 2vw, 26px);
  color: #fff;
}

.about-showcase-title strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.82;
}

.about-showcase-card {
  padding: clamp(22px, 2.5vw, 30px);
}

.about-showcase-card p {
  color: var(--color-ink);
}

/* 14. ---------- Projects page: filters & cards ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-block-end: 36px;
}

.filters button {
  padding: 9px 18px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.filters button:hover {
  border-color: var(--color-primary);
}

.filters button.active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.project-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-deep);
  box-shadow: var(--shadow-card);
}

.project-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.project-card > div {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 24px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(6, 33, 51, 0.95), rgba(6, 33, 51, 0.12) 70%, transparent);
}

.project-card p {
  margin-block-end: 4px;
  font-weight: 700;
  color: var(--color-primary);
}

.project-card h3 {
  font-size: 22px;
  color: #fff;
}

.project-card.is-filtered-out {
  display: none;
}

/* 15. ---------- Careers page: value cards ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.values-grid article {
  padding: 30px 28px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.values-grid h3 {
  font-size: 22px;
  color: var(--color-primary-dark);
}

.values-grid p {
  margin-block-start: 10px;
  color: var(--color-muted);
}

/* 16. ---------- Blog: list, sidebar, article ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 340px);
  grid-template-areas: "main sidebar";
  gap: clamp(24px, 3vw, 40px);
  width: min(1240px, calc(100% - 44px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  align-items: start;
  direction: ltr;
}

html[dir="rtl"] .blog-layout {
  grid-template-columns: clamp(280px, 27vw, 340px) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

.blog-main {
  grid-area: main;
  min-width: 0;
}

.blog-sidebar {
  grid-area: sidebar;
  min-width: 0;
}

html[dir="rtl"] .blog-main,
html[dir="rtl"] .blog-sidebar {
  direction: rtl;
}

html[dir="ltr"] .blog-main,
html[dir="ltr"] .blog-sidebar {
  direction: ltr;
}

.blog-loading {
  padding: 26px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-panel);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  margin-block-end: 26px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.featured-post img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.featured-post > div {
  padding: clamp(22px, 2.5vw, 32px);
}

.featured-post h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--color-primary-dark);
}

.featured-post p {
  margin-block: 12px;
  color: var(--color-muted);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 245px;
  padding: 28px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.post-card::before,
.blog-sidebar > div::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  opacity: 0.9;
}

.post-card > span {
  font-weight: 800;
  color: var(--color-primary);
}

.post-card h3 {
  font-size: 20px;
  color: var(--color-primary-dark);
}

.post-card p {
  color: var(--color-muted);
}

.post-card a {
  margin-block-start: auto;
  font-weight: 800;
  color: var(--color-primary);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 6px;
}

.tag-list span {
  padding: 5px 12px;
  font-size: 13px;
  color: var(--color-primary-dark);
  background: rgba(24, 170, 168, 0.1);
  border: 1px solid rgba(24, 170, 168, 0.22);
  border-radius: var(--radius-pill);
}

.blog-sidebar {
  display: grid;
  gap: 22px;
}

.blog-sidebar > div {
  position: relative;
  padding: 26px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.blog-sidebar h2 {
  font-size: 21px;
  margin-block-end: 14px;
  color: var(--color-primary-dark);
}

.blog-sidebar > div > a {
  display: block;
  padding: 10px 0;
  color: var(--color-muted);
  border-block-end: 1px solid var(--color-line);
  transition: color 0.18s ease;
}

.blog-sidebar > div > a:last-child {
  border-block-end: 0;
}

.blog-sidebar > div > a:hover {
  color: var(--color-primary);
}

/* Single article */
.article-section {
  max-width: 800px;
  margin-inline: auto;
}

.article-detail .article-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-block-end: 24px;
}

.article-detail h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--color-primary-dark);
}

.article-excerpt {
  margin-block: 16px;
  font-size: 19px;
  color: var(--color-muted);
}

.article-body {
  margin-block-start: 24px;
}

.article-body h2 {
  margin-block: 30px 12px;
  color: var(--color-primary-dark);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
}

.article-body p {
  margin-block-end: 18px;
  line-height: 1.95;
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-block-start: 32px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-line);
}

/* 17. ---------- Forms ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: var(--content-max);
  margin-inline: auto;
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 170, 168, 0.16);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.wide-field {
  grid-column: 1 / -1;
}

.contact-form .btn {
  margin-block-start: 4px;
}

.form-status {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.form-status[data-type="info"] {
  background: rgba(24, 170, 168, 0.1);
  color: var(--color-primary-dark);
}

.form-status[data-type="success"] {
  background: rgba(32, 197, 193, 0.16);
  color: #0a6c54;
}

.form-status[data-type="error"] {
  background: rgba(214, 69, 69, 0.12);
  color: #a23030;
}

.contact-info {
  padding: clamp(24px, 3vw, 32px);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.contact-info h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-block: 8px 12px;
  color: var(--color-primary-dark);
}

.contact-info > p {
  color: var(--color-muted);
}

.info-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-block-end: 1px solid var(--color-line);
}

.info-line:last-child {
  border-block-end: 0;
}

.info-line span {
  color: var(--color-muted);
}

.info-line strong {
  color: var(--color-ink);
}

/* Inner page polish */
.inner-page-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(24, 170, 168, 0.08), transparent 24%),
    linear-gradient(180deg, #fff 0%, var(--color-surface) 100%);
}

.inner-page-section .section-heading {
  margin-block-end: clamp(28px, 5vw, 48px);
}

.inner-cta,
.careers-status {
  display: grid;
  gap: 18px;
  align-items: center;
  justify-items: center;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 16% 18%, rgba(32, 197, 193, 0.28), transparent 26%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-deep));
}

.inner-cta h2,
.careers-status h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
}

.inner-cta p,
.careers-status p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
}

.careers-status {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: start;
  text-align: start;
}

.careers-status .eyebrow {
  color: var(--color-primary);
}

.careers-grid article {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.careers-grid article > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  place-items: center;
  font-size: 30px;
  background: rgba(24, 170, 168, 0.1);
  border-radius: 18px;
}

.contact-quick-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-bottom: 0;
}

.contact-quick-cards article {
  padding: 26px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.contact-quick-cards span {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  place-items: center;
  font-size: 28px;
  background: rgba(24, 170, 168, 0.1);
  border-radius: 16px;
}

.contact-quick-cards h3 {
  margin-bottom: 6px;
  color: var(--color-primary-dark);
}

.contact-quick-cards p {
  color: var(--color-muted);
  font-weight: 700;
}

.full-grid .service-card {
  min-height: 230px;
  border-top: 4px solid rgba(24, 170, 168, 0.65);
}

.full-grid .card-number {
  width: fit-content;
  padding: 4px 10px;
  background: rgba(24, 170, 168, 0.1);
  border-radius: var(--radius-pill);
}

/* 18. ---------- Footer ---------- */
.site-footer {
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(135deg, #053e61, #0a1b24);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(24px, 3vw, 44px);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 72px) var(--gutter) 40px;
}

.footer-about p {
  margin-block: 16px 20px;
  line-height: 1.8;
}

.footer-brand {
  gap: 12px;
}

.footer-brand .brand-mark {
  filter: brightness(0) invert(1);
}

.footer-brand-text {
  color: #fff;
}

.footer-cta {
  display: inline-flex;
}

.footer-group h3 {
  margin-block-end: 16px;
  font-size: 17px;
  color: #fff;
}

.footer-group a {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.74);
  transition: color 0.18s ease;
}

.footer-group a:hover {
  color: #fff;
}

.footer-contact p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-end: 14px;
}

.footer-contact span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-contact strong {
  color: #fff;
  font-weight: 700;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 20px var(--gutter);
  font-size: 14px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

/* 19. ---------- Motion ---------- */
@keyframes heroImageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroItemIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Staggered entrance: image → eyebrow+h1 → p → buttons */
.home-hero .hero-content > .eyebrow {
  opacity: 0;
  animation: heroItemIn 500ms ease-out 950ms both;
}
.home-hero .hero-content > h1 {
  opacity: 0;
  animation: heroItemIn 500ms ease-out 950ms both;
}
.home-hero .hero-content > p:not(.eyebrow) {
  opacity: 0;
  animation: heroItemIn 500ms ease-out 1100ms both;
}
.home-hero .hero-content > .hero-actions {
  opacity: 0;
  animation: heroItemIn 500ms ease-out 1250ms both;
}

/* Respect reduced-motion: skip entrance, show immediately */
@media (prefers-reduced-motion: reduce) {
  .home-hero::after { animation: none; }
  .home-hero .hero-content > .eyebrow,
  .home-hero .hero-content > h1,
  .home-hero .hero-content > p:not(.eyebrow),
  .home-hero .hero-content > .hero-actions {
    opacity: 1;
    animation: none;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* scroll reveal (classes added by script.js)
   Implemented purely with transitions (no @keyframes) so that a single
   element never runs a transition and an animation at the same time,
   which was the main source of jank/flicker on scroll. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.6s var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.reveal-from-right {
  transform: translateX(40px) translateY(10px);
}

.reveal-from-left {
  transform: translateX(-40px) translateY(10px);
}

.reveal-fadeIn {
  transform: none;
}

.reveal-fadeInUp {
  transform: translateY(30px);
}

.reveal-fadeInRight {
  transform: translateX(36px);
}

.reveal-zoomInLeft {
  transform: scale(0.9) translateX(-26px);
}

.reveal-bounceIn {
  transform: scale(0.8);
}

.reveal-slideInDown {
  transform: translateY(-44px);
}

.reveal-slideInUp {
  transform: translateY(44px);
}

.reveal-slideInLeft {
  transform: translateX(-56px);
}

.reveal-slideInRight {
  transform: translateX(56px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Once the reveal has played, drop will-change so we don't keep
   compositor layers alive for every revealed block. */
.reveal.is-visible {
  will-change: auto;
}

/* hero rotating headline */
.hero-rotating-text {
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.home-hero .hero-content.is-changing .hero-rotating-text {
  opacity: 0;
}

/* 20. ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
  .about-showcase-frame {
    grid-template-columns: 1fr;
  }
  .blog-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }
}

@media (max-width: 980px) {
  .site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .brand {
    order: 0;
  }
  .site-nav {
    order: 1;
  }
  .header-end {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 2;
  }
  .nav-toggle {
    display: flex;
  }
  .header-actions {
    order: unset;
  }
  .header-actions .header-cta {
    display: none; /* keep header tidy on mobile; CTA repeated in footer & hero */
  }
  .site-nav {
    position: absolute;
    inset-inline: 12px;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .site-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav a {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
  }
  .site-nav a::after {
    display: none;
  }
  .site-nav a:hover,
  .site-nav a.active {
    background: var(--color-surface);
  }
  .mobile-lang-group {
    display: flex;
    gap: 8px;
    padding: 10px 8px 6px;
  }
  .mobile-lang {
    display: inline-flex;
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-weight: 800;
    color: var(--color-primary-dark);
  }
  .mobile-lang:hover,
  .mobile-lang.active {
    background: var(--color-surface);
    color: var(--color-primary-dark);
  }
  .service-grid,
  .process-list,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-quick-cards {
    grid-template-columns: 1fr;
  }
  .careers-status {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .featured-post {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .trust-strip,
  .service-grid,
  .process-list,
  .values-grid,
  .project-grid,
  .post-grid,
  .footer-main {
    grid-template-columns: 1fr;
  }
  .services-slider-head {
    flex-direction: column;
    align-items: stretch;
    padding-inline: 20px;
  }
  .about-showcase-grid {
    grid-template-columns: 1fr;
  }
  .trust-strip {
    margin-block-start: clamp(-40px, -8vw, -28px);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 21. ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .vision-photo,
  .vision-text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .service-carousel {
    overflow: hidden;
  }
}

.skip-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Final hero copy stability
   The rotating Arabic lines have different lengths. Reserving enough space for
   the longest headline prevents the hero, buttons, and metrics from jumping
   while the copy fades between slides. */
.home-hero .hero-content {
  display: grid;
  align-content: end;
  grid-template-rows: auto minmax(3.45em, auto) minmax(3.8em, auto) auto;
  min-height: clamp(430px, 56vh, 560px);
}

.home-hero .hero-content .eyebrow {
  align-self: end;
}

.home-hero .hero-content h1 {
  min-height: 3.45em;
  display: flex;
  align-items: center;
}

.home-hero .hero-content p:not(.eyebrow) {
  min-height: 3.8em;
}

.home-hero .hero-rotating-text {
  transition: opacity 0.32s ease;
  will-change: opacity;
}

.home-hero .hero-content.is-changing .hero-rotating-text {
  opacity: 0;
  transform: none;
  filter: none;
}

/* Final services carousel behavior
   The duplicated service cards form a full 360-style loop. The strip keeps
   moving continuously and pauses when the user hovers or focuses inside it. */
.service-carousel {
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.service-carousel::before,
.service-carousel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: clamp(48px, 8vw, 120px);
  pointer-events: none;
}

.service-carousel::before {
  inset-inline-start: 0;
  background: linear-gradient(to inline-end, var(--color-deep), rgba(6, 50, 77, 0));
}

.service-carousel::after {
  inset-inline-end: 0;
  background: linear-gradient(to inline-start, var(--color-deep), rgba(6, 50, 77, 0));
}

.service-track {
  will-change: transform;
}

.service-track[data-marquee-ready="true"] {
  animation: servicesOrbit 34s linear infinite;
}

.service-carousel:hover .service-track[data-marquee-ready="true"],
.service-carousel:focus-within .service-track[data-marquee-ready="true"] {
  animation-play-state: paused;
}

@keyframes servicesOrbit {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Keep the services strip visually full in RTL pages.
   The page text stays RTL, but the moving rail itself runs in LTR geometry so
   translateX(-50%) never exposes an empty side of the carousel. */
.service-carousel {
  direction: ltr;
}

.service-track {
  min-width: max-content;
}

.service-track .service-card {
  direction: rtl;
}

html[dir="ltr"] .service-track .service-card {
  direction: ltr;
}

@media (max-width: 760px) {
  .home-hero {
    height: clamp(680px, 92vh, 820px);
  }

  .home-hero .hero-content {
    grid-template-rows: auto minmax(4.6em, auto) minmax(5.8em, auto) auto;
    min-height: 520px;
  }

  .home-hero .hero-content h1 {
    min-height: 4.6em;
  }

  .home-hero .hero-content p:not(.eyebrow) {
    min-height: 5.8em;
  }
}

/* =============================================================
   Homepage refresh — Falfa-style structure adapted for SQL
   ============================================================= */
.home-falfa-template {
  background: #fff;
}

.falfa-header {
  min-height: 86px;
  border-block-end: 1px solid rgba(216, 235, 238, 0.72);
  box-shadow: 0 12px 34px rgba(5, 62, 97, 0.08);
}

.falfa-header .brand-mark,
.footer-brand .brand-mark {
  width: 94px;
  height: 94px;
  background-image: url("assets/sql-logo-transparent-clean.png");
}

.falfa-header .site-nav a {
  color: var(--color-primary-dark);
}

.falfa-header .site-nav a::after {
  height: 3px;
  border-radius: 99px;
}

.falfa-home-hero {
  height: clamp(690px, 88vh, 860px);
  align-items: center;
  padding-block: 120px 140px;
  isolation: isolate;
}

.falfa-home-hero::after {
  content: none;
}

.falfa-home-hero::before {
  z-index: 2;
  background: linear-gradient(
    to inline-start,
    rgba(6, 50, 77, 0.14) 0%,
    rgba(6, 50, 77, 0.72) 50%,
    rgba(5, 38, 63, 0.96) 100%
  );
}

.falfa-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1100ms ease, transform 6500ms ease;
  background:
    radial-gradient(circle at 72% 28%, rgba(32, 197, 193, 0.34), transparent 27%),
    linear-gradient(135deg, rgba(244, 251, 251, 0.78), rgba(102, 142, 150, 0.72) 42%, rgba(5, 62, 97, 0.96) 100%),
    url("assets/hero-team.webp") center top / cover no-repeat;
}

.falfa-hero-bg:nth-child(2) {
  background:
    radial-gradient(circle at 70% 24%, rgba(24, 170, 168, 0.22), transparent 25%),
    linear-gradient(135deg, rgba(244, 251, 251, 0.82), rgba(22, 179, 174, 0.52) 44%, rgba(6, 50, 77, 0.98) 100%),
    url("assets/hero-team.webp") center center / cover no-repeat;
}

.falfa-hero-bg:nth-child(3) {
  background:
    radial-gradient(circle at 76% 20%, rgba(32, 197, 193, 0.32), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(94, 113, 128, 0.62) 42%, rgba(3, 34, 53, 0.98) 100%),
    url("assets/hero-team.webp") center top / cover no-repeat;
}

.falfa-hero-bg.active {
  opacity: 1;
  transform: scale(1);
}

.falfa-home-hero .hero-content {
  max-width: 720px;
  z-index: 3;
}

.falfa-home-hero .eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  color: #d8fffb;
  background: rgba(255, 255, 255, 0.12);
}

.falfa-home-hero .hero-content h1 {
  min-height: 2.25em;
  font-size: clamp(34px, 5.2vw, 68px);
}

.falfa-home-hero .hero-content p:not(.eyebrow) {
  min-height: 5.4em;
  font-size: clamp(17px, 1.45vw, 20px);
}

.falfa-home-hero .hero-content > .eyebrow,
.falfa-home-hero .hero-content > h1,
.falfa-home-hero .hero-content > p:not(.eyebrow),
.falfa-home-hero .hero-content > .hero-actions {
  animation: falfaHeroLayer 820ms ease both;
}

.falfa-home-hero .hero-content > h1 {
  animation-delay: 120ms;
}

.falfa-home-hero .hero-content > p:not(.eyebrow) {
  animation-delay: 240ms;
}

.falfa-home-hero .hero-content > .hero-actions {
  animation-delay: 360ms;
}

.falfa-home-hero .hero-content.is-changing .hero-rotating-text {
  opacity: 0;
  transform: translateY(20px);
}

@keyframes falfaHeroLayer {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.falfa-hero-dots {
  position: absolute;
  right: 50%;
  bottom: 38px;
  z-index: 5;
  display: flex;
  gap: 8px;
  transform: translateX(50%);
}

.falfa-hero-dots button {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.falfa-hero-dots button.active {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.falfa-feature-strip {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: -96px;
  padding-top: 0;
}

.falfa-feature-strip article,
.falfa-values-grid article,
.falfa-service-card,
.falfa-sectors-grid article,
.falfa-news-grid article {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.falfa-feature-strip article {
  min-height: 190px;
  padding: 28px 24px;
  border-bottom: 5px solid var(--color-primary);
}

.falfa-feature-strip article:hover,
.falfa-values-grid article:hover,
.falfa-service-card:hover,
.falfa-sectors-grid article:hover,
.falfa-news-grid article:hover {
  transform: translateY(-8px);
  border-color: rgba(24, 170, 168, 0.36);
  box-shadow: 0 26px 70px rgba(5, 62, 97, 0.16);
}

.falfa-feature-strip span,
.falfa-values-grid span {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 16px;
  color: var(--color-primary);
  background: rgba(24, 170, 168, 0.11);
  font-weight: 800;
}

.falfa-feature-strip h3,
.falfa-values-grid h3,
.falfa-service-card h3,
.falfa-news-grid h3 {
  margin-bottom: 10px;
  color: var(--color-primary-dark);
}

.falfa-feature-strip p,
.falfa-values-grid p,
.falfa-service-card p,
.falfa-news-grid p {
  color: var(--color-muted);
}

.falfa-about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}

.falfa-about-media {
  position: relative;
  min-height: 540px;
}

.falfa-about-media img {
  width: 88%;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.falfa-about-media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48%;
  height: 42%;
  border: 9px solid #fff;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 24%, rgba(32, 197, 193, 0.38), transparent 28%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-float);
}

.falfa-experience {
  position: absolute;
  right: 0;
  bottom: 46px;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  padding: 18px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: var(--grad-brand);
  box-shadow: var(--shadow-float);
}

.falfa-experience strong {
  display: block;
  font-size: 34px;
  line-height: 1;
}

.falfa-about-content h2,
.falfa-section-title h2 {
  margin-bottom: 18px;
  color: var(--color-primary-dark);
  font-size: clamp(28px, 4vw, 46px);
}

.falfa-about-content p:not(.eyebrow) {
  margin-bottom: 14px;
  color: var(--color-muted);
  font-size: 18px;
}

.falfa-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 30px;
}

.falfa-checks span {
  font-weight: 800;
  color: var(--color-primary-dark);
}

.falfa-checks span::before {
  content: "✓";
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-inline-end: 8px;
  place-items: center;
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(24, 170, 168, 0.12);
}

.falfa-values-section,
.falfa-map-section,
.falfa-news-section {
  background: #f7fbfb;
}

.falfa-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.falfa-values-grid article {
  min-height: 255px;
  padding: 34px 30px;
  border-top: 4px solid var(--color-primary);
}

.falfa-section-title {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: 44px;
}

.falfa-section-title h2 {
  max-width: 760px;
  margin-bottom: 0;
}

.falfa-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

[data-services-timeline] .falfa-service-card {
  --service-delay: 0ms;
}

.falfa-service-card a,
.falfa-news-grid a {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  color: var(--color-primary);
  font-weight: 800;
}

.falfa-services-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(24, 170, 168, 0.12), transparent 18%),
    radial-gradient(circle at 86% 8%, rgba(24, 170, 168, 0.12), transparent 20%),
    #fff;
}

.falfa-services-section .falfa-service-card {
  position: relative;
  min-height: 280px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  perspective: 1100px;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--service-delay, 0ms),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--service-delay, 0ms);
}

[data-services-timeline].timeline-active .falfa-service-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-services-timeline].timeline-active .falfa-service-card:hover,
[data-services-timeline].timeline-active .falfa-service-card:focus-within,
[data-services-timeline].timeline-active .falfa-service-card:focus {
  transform: translateY(-6px) scale(1);
}

[data-services-timeline] .falfa-service-card > .service-flip-inner,
[data-services-timeline].timeline-active .falfa-service-card > .service-flip-inner {
  position: relative;
  width: 100%;
  min-height: 280px;
  opacity: 1;
  transform: rotateY(0);
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.falfa-service-card:hover > .service-flip-inner,
.falfa-service-card:focus-within > .service-flip-inner,
.falfa-service-card:focus > .service-flip-inner {
  transform: rotateY(180deg);
}

[data-services-timeline].timeline-active .falfa-service-card:hover > .service-flip-inner,
[data-services-timeline].timeline-active .falfa-service-card:focus-within > .service-flip-inner,
[data-services-timeline].timeline-active .falfa-service-card:focus > .service-flip-inner {
  transform: rotateY(180deg);
}

.service-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  padding: 30px 26px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(216, 235, 238, 0.95);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(5, 62, 97, 0.1);
  backface-visibility: hidden;
  overflow: hidden;
}

.service-card-face::before {
  content: "";
  position: absolute;
  inset: auto -16% -42% -16%;
  height: 64%;
  background: linear-gradient(135deg, rgba(24, 170, 168, 0.14), rgba(5, 62, 97, 0.1));
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.service-card-front {
  align-items: center;
}

.service-card-back {
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(32, 197, 193, 0.25), transparent 30%),
    linear-gradient(145deg, var(--color-primary-dark), var(--color-deep));
  border-color: rgba(32, 197, 193, 0.35);
  transform: rotateY(180deg);
}

.service-card-back::before {
  opacity: 0.28;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 62%);
}


.service-card-face h3,
.service-card-face p,
.service-card-face a,
.service-card-face small {
  position: relative;
  z-index: 1;
}

.service-card-face h3 {
  margin-bottom: 10px;
  font-size: clamp(20px, 2vw, 25px);
}

.service-card-front h3 {
  color: var(--color-primary-dark);
}

.service-card-front small {
  color: var(--color-muted);
  font-weight: 700;
}

.service-card-back h3 {
  color: #fff;
}

.service-card-back p {
  max-width: 290px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.85;
}

.service-card-back a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.falfa-dark-band {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(5, 62, 97, 0.96), rgba(6, 50, 77, 0.88)),
    radial-gradient(circle at 18% 18%, rgba(32, 197, 193, 0.35), transparent 26%),
    var(--color-deep);
}

.falfa-dark-band h2,
.falfa-dark-band h3,
.falfa-dark-band .section-head h2 {
  color: #fff;
}

.falfa-dark-band .section-head p,
.falfa-dark-band .process-list p {
  color: rgba(255, 255, 255, 0.74);
}

.falfa-dark-band .process-list article {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.falfa-dark-band .why-us-list article {
  background: transparent;
  border: 0;
}

.business-solutions-section {
  background:
    radial-gradient(circle at 8% 18%, rgba(24, 170, 168, 0.10), transparent 22%),
    radial-gradient(circle at 92% 86%, rgba(24, 170, 168, 0.1), transparent 24%),
    #fff;
}

.business-title {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 780px;
  margin: 0 auto clamp(42px, 6vw, 76px);
  text-align: center;
}

.business-title span {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(176, 144, 103, 0.9), transparent);
}

.business-title h2 {
  color: var(--color-primary-dark);
  font-size: clamp(32px, 4vw, 48px);
}

.business-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 30px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.business-solutions-grid article {
  --business-delay: 0ms;
  position: relative;
  min-height: 250px;
  padding: 34px 28px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(24, 170, 168, 0.58);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(5, 62, 97, 0.07);
  opacity: 0;
  overflow: hidden;
  transform: translateY(46px) rotateX(10deg) scale(0.96);
  transform-origin: center bottom;
  transition:
    opacity 700ms ease var(--business-delay),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--business-delay),
    box-shadow 240ms ease,
    border-color 240ms ease;
}

.business-solutions-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.62) 48%, transparent 58% 100%);
  opacity: 0;
  transform: translateX(70%);
  transition: transform 900ms ease var(--business-delay), opacity 450ms ease var(--business-delay);
  pointer-events: none;
}

[data-business-solutions].timeline-active .business-solutions-grid article {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
}

[data-business-solutions].timeline-active .business-solutions-grid article::after {
  opacity: 1;
  transform: translateX(-70%);
}

.business-solutions-grid article:hover {
  border-color: var(--color-primary);
  box-shadow: 0 28px 70px rgba(5, 62, 97, 0.14);
  transform: translateY(-8px) scale(1.01);
}

.business-solutions-grid span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  place-items: center;
  font-size: 34px;
  background: #fff;
  border: 1px solid rgba(216, 235, 238, 0.95);
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(5, 62, 97, 0.08);
  transition: transform 260ms ease, background 260ms ease;
}

.business-solutions-grid article:hover span {
  background: rgba(24, 170, 168, 0.08);
  transform: translateY(-4px) rotate(-5deg) scale(1.06);
}

.business-solutions-grid h3,
.business-solutions-grid p {
  position: relative;
  z-index: 1;
}

.business-solutions-grid h3 {
  margin-bottom: 12px;
  color: #111;
  font-size: clamp(19px, 1.8vw, 24px);
}

.business-solutions-grid p {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

.falfa-sectors-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.falfa-sectors-grid article {
  --sector-delay: 0ms;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
  opacity: 0;
  transform: translateY(32px) rotate(-6deg) scale(0.82);
  transition:
    opacity 560ms ease var(--sector-delay),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--sector-delay),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

[data-sectors-motion].timeline-active .falfa-sectors-grid article {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}

.falfa-sectors-grid span {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.falfa-sectors-grid article:hover span {
  transform: translateY(-5px) rotate(12deg) scale(1.18);
}

.falfa-sectors-grid strong {
  color: var(--color-primary-dark);
}

/* ---------- Dotted coverage map (city network) ---------- */
.falfa-map-wrap {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.falfa-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.map-dot {
  fill: rgba(24, 170, 168, 0.32);
  opacity: 0;
  transition: opacity 0.5s ease var(--dot-delay, 0ms);
}

[data-map-motion].timeline-active .map-dot {
  opacity: 1;
}

.map-line {
  fill: none;
  stroke: rgba(24, 170, 168, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--motion-ease, ease) 0.35s;
}

[data-map-motion].timeline-active .map-line {
  stroke-dashoffset: 0;
}

.map-city {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease var(--city-delay, 0ms), transform 0.5s var(--motion-ease, ease) var(--city-delay, 0ms);
  transform-box: fill-box;
  transform-origin: center;
}

[data-map-motion].timeline-active .map-city {
  opacity: 1;
  transform: translateY(0);
}

.map-city-dot {
  fill: var(--color-primary-dark);
  stroke: #fff;
  stroke-width: 2;
}

.map-city-dot.is-hq {
  fill: var(--color-primary);
}

.map-city-pulse {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: center;
  animation: mapPulse 2.2s ease-in-out infinite;
}

@keyframes mapPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.map-city-label {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 800;
  fill: var(--color-primary-dark);
}

.map-city-label.is-hq {
  fill: var(--color-primary);
}

.map-city-sub {
  font-size: 11px;
  font-weight: 600;
  fill: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .map-dot,
  .map-city {
    opacity: 1;
    transform: none;
  }
  .map-line {
    stroke-dashoffset: 0;
  }
  .map-city-pulse {
    animation: none;
  }
}

@media (max-width: 640px) {
  .falfa-map-wrap {
    max-width: 420px;
  }
  .map-city-label {
    font-size: 12px;
  }
}

.falfa-stats-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  color: #fff;
  text-align: center;
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
}

.falfa-stats-section .metric {
  color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.falfa-stats-section p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.specializations-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(24, 170, 168, 0.1) 1.4px, transparent 1.8px) center 22px / 13px 13px,
    linear-gradient(180deg, #f8fbfc 0%, #fff 100%);
}

.specializations-section::before {
  content: "";
  position: absolute;
  inset: 44px 12% auto;
  height: 360px;
  opacity: 0.45;
  background:
    radial-gradient(ellipse at 25% 42%, rgba(5, 62, 97, 0.08) 0 32%, transparent 33%),
    radial-gradient(ellipse at 52% 34%, rgba(5, 62, 97, 0.07) 0 28%, transparent 29%),
    radial-gradient(ellipse at 72% 46%, rgba(5, 62, 97, 0.06) 0 24%, transparent 25%);
  pointer-events: none;
}

.specializations-title,
.specializations-subtitle,
.specializations-grid {
  position: relative;
  z-index: 1;
}

.specializations-title {
  margin-bottom: 22px;
}

.specializations-subtitle {
  max-width: 720px;
  margin: 0 auto clamp(44px, 6vw, 70px);
  text-align: center;
  color: var(--color-primary);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
}

.specializations-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  max-width: 1500px;
  margin-inline: auto;
}

.specializations-grid article {
  --specialization-delay: 0ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 340px;
  padding: 20px 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(38px) scale(0.96);
  transition:
    opacity 650ms ease var(--specialization-delay),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--specialization-delay);
}

[data-specializations].timeline-active .specializations-grid article {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.specializations-grid span {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  place-items: center;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(216, 235, 238, 0.82);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(5, 62, 97, 0.08);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.specializations-grid article:hover span {
  transform: translateY(-6px) rotate(8deg) scale(1.08);
  box-shadow: 0 18px 36px rgba(5, 62, 97, 0.14);
}

.specializations-grid h3 {
  margin-bottom: 18px;
  color: #20364c;
  font-size: clamp(18px, 1.6vw, 23px);
}

.specializations-grid p {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

.specializations-grid a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  color: #c49a6c;
  font-weight: 800;
}

.specializations-grid a::before {
  content: "✓";
  font-weight: 900;
}

.falfa-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.falfa-news-grid article {
  padding: 30px 28px;
}

.falfa-news-grid article > span {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-primary-dark);
  background: rgba(24, 170, 168, 0.11);
  font-weight: 800;
  font-size: 14px;
}

.falfa-cta {
  background:
    linear-gradient(90deg, rgba(6, 50, 77, 0.95), rgba(24, 170, 168, 0.78)),
    url("assets/hero-team.webp") center / cover no-repeat;
}

.falfa-cta h2,
.falfa-cta p {
  color: #fff;
}

.falfa-cta p {
  opacity: 0.85;
}

@media (max-width: 1080px) {
  .falfa-feature-strip,
  .falfa-stats-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .falfa-about-section,
  .falfa-section-title {
    grid-template-columns: 1fr;
  }

  .falfa-services-grid,
  .falfa-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .falfa-sectors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .falfa-header .brand-mark,
  .footer-brand .brand-mark {
    width: 78px;
    height: 54px;
  }

  .falfa-home-hero {
    height: 660px;
    padding-block: 110px 120px;
  }

  .falfa-home-hero .hero-content h1 {
    font-size: clamp(30px, 10vw, 42px);
    min-height: 3.2em;
  }

  .falfa-home-hero .hero-content p:not(.eyebrow) {
    min-height: 8.5em;
  }

  .falfa-feature-strip,
  .falfa-values-grid,
  .falfa-services-grid,
  .falfa-sectors-grid,
  .falfa-stats-section,
  .falfa-news-grid {
    grid-template-columns: 1fr;
  }

  .falfa-about-media {
    min-height: 420px;
  }

  .falfa-about-media img {
    width: 100%;
    height: 390px;
  }

  .falfa-about-media::after {
    display: none;
  }

  .falfa-experience {
    right: 18px;
    bottom: 18px;
    width: 118px;
    height: 118px;
  }

  .falfa-checks {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   Falfa-like opening: white intro, company brief, slanted vision band
   ============================================================= */
.falfa-opening {
  position: relative;
  min-height: auto;
  padding: clamp(58px, 8vh, 96px) var(--gutter) clamp(64px, 8vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(24, 170, 168, 0.11), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f4fbfb 100%);
}

.falfa-opening-inner {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
  max-width: 1220px;
  margin-inline: auto;
}

.opening-logo-card,
.opening-services {
  direction: rtl;
}

.opening-logo-card {
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.opening-logo-card img {
  width: min(360px, 100%);
  height: auto;
  transform-origin: center bottom;
  animation: openingLogoDoubleHop 2s ease-in-out infinite;
}

.opening-services {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  padding-top: 0;
  text-align: right;
}

.opening-service h1,
.opening-service h2 {
  margin: 0 0 14px;
  color: var(--color-primary-dark);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
}

.opening-service {
  opacity: 0;
  animation: openingTextFromLeft 3.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opening-service:first-child {
  animation-name: openingTextFromRight;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.12, 0.72, 0.18, 1);
}

.opening-service:nth-child(2) {
  animation-delay: 850ms;
}

.opening-service h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
}

.opening-service p {
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 600;
}

.opening-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.falfa-company-intro {
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  max-width: 1220px;
  margin: clamp(52px, 7vw, 82px) auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 320ms ease;
}

.falfa-company-intro::after {
  content: none;
}

.falfa-company-intro:hover {
  transform: translateY(-4px);
}

.falfa-company-intro:hover::after {
  opacity: 1;
  transform: translateX(35%) rotate(4deg);
}

.intro-image,
.intro-copy {
  direction: rtl;
}

.intro-image {
  height: 320px;
  overflow: hidden;
  border-radius: 12px;
  animation: falfaImageReveal 950ms ease 260ms both;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease;
}

.intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.intro-copy {
  position: relative;
  z-index: 2;
  min-height: auto;
  padding: 0;
  animation: falfaIntroRise 850ms ease 360ms both;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.falfa-company-intro:hover .intro-image {
  transform: translateX(-28px) rotate(-1deg);
  box-shadow: 0 20px 44px rgba(5, 62, 97, 0.16);
}

.falfa-company-intro:hover .intro-copy {
  transform: translateX(28px);
}

.falfa-company-intro:hover .intro-image img {
  transform: scale(1.055);
}

.intro-copy::before {
  content: "";
  position: absolute;
  inset: 20px -50px auto auto;
  width: min(620px, 100%);
  height: 210px;
  opacity: 0.34;
  background:
    radial-gradient(circle at 18% 70%, rgba(5, 62, 97, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 48%, rgba(5, 62, 97, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 52%, rgba(5, 62, 97, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(5, 62, 97, 0.75) 0 2px, transparent 3px);
  pointer-events: none;
}

.intro-copy span {
  position: relative;
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
}

.intro-copy h2 {
  position: relative;
  margin-bottom: 16px;
  color: #14191c;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
}

.intro-copy p {
  position: relative;
  max-width: 650px;
  color: #111;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
}

.falfa-vision-mission {
  position: relative;
  margin-top: -1px;
  padding: clamp(90px, 10vw, 128px) var(--gutter) clamp(120px, 12vw, 168px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, rgba(5, 62, 97, 0.94), rgba(10, 83, 96, 0.96));
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
}

.falfa-vision-mission::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 2;
  height: clamp(54px, 6.5vw, 88px);
  background: var(--color-surface);
  clip-path: polygon(0 100%, 100% 22%, 100% 100%);
  pointer-events: none;
}

.vision-shape {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 35%, rgba(24, 170, 168, 0.18), transparent 25%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 35%);
  opacity: 0.9;
}

.vision-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 76px);
  max-width: 1160px;
  margin-inline: auto;
}

.vision-row {
  --step-delay: 0ms;
  --text-delay: var(--step-delay);
  --image-delay: calc(var(--step-delay) + 200ms);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 100px;
  align-items: center;
  opacity: 1;
}

.vision-row:nth-child(2) {
  --step-delay: 180ms;
}

.vision-row:nth-child(3) {
  --step-delay: 360ms;
}

.vision-text {
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay);
  will-change: opacity, transform;
}

.vision-text h2 {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
}

.vision-text p {
  max-width: 560px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.9;
}

.vision-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  will-change: transform, opacity;
}

.vision-photo img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  object-position: center center;
}

.falfa-vision-mission.timeline-active .vision-text,
.vision-row.row-visible .vision-text {
  opacity: 1;
  transform: none;
}

/* relaxed zoom-in: image appears small and grows smoothly to full size */
.falfa-vision-mission.timeline-active .vision-photo,
.vision-row.row-visible .vision-photo {
  animation: visionZoomIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--image-delay) both;
}

@keyframes visionZoomIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

.falfa-goals-text .eyebrow {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.falfa-goals-text h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  color: var(--color-primary-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}

.falfa-goals-text p {
  color: var(--color-muted);
  line-height: 1.85;
  font-size: 16px;
}

.falfa-goals-image {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}

.falfa-goals-image img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) {
  .falfa-goals-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .falfa-goals-image img {
    height: 260px;
  }
}

@keyframes falfaIntroRise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoSlideIn {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes openingTextFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-125vw);
    filter: blur(4px);
  }
  72% {
    opacity: 1;
    transform: translateX(18px);
    filter: blur(0);
  }
  88% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes openingTextFromRight {
  0% {
    opacity: 0;
    transform: translateX(140vw);
    filter: blur(3px);
  }
  18% {
    opacity: 1;
    filter: blur(0);
  }
  86% {
    opacity: 1;
    transform: translateX(-12px);
    filter: blur(0);
  }
  94% {
    transform: translateX(3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes openingLogoDoubleHop {
  0%,
  18%,
  36%,
  100% {
    transform: translateY(0) scale(1);
  }
  9% {
    transform: translateY(-18px) scale(1.035);
  }
  27% {
    transform: translateY(-13px) scale(1.022);
  }
}

@keyframes openingLogoTripleBounce {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  12% {
    opacity: 1;
    transform: translateY(-28px) scale(1.04);
  }
  24% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-20px) scale(1.035);
  }
  52% {
    transform: translateY(0) scale(1);
  }
  66% {
    transform: translateY(-12px) scale(1.018);
  }
  78%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes falfaImageReveal {
  from {
    opacity: 0;
    clip-path: inset(10% 0 10% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.floating-contact-actions {
  position: fixed;
  inset-inline-end: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.floating-contact-actions a {
  pointer-events: auto;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.floating-call {
  background: #24d366;
}

.floating-whatsapp {
  background: #24d366;
}

/* Falfa active effects: particles, flip boxes, overlays, parallax, typewriter */
.falfa-opening {
  isolation: isolate;
}

/* interactive particle network background */
.falfa-opening .net-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.falfa-opening .falfa-opening-inner,
.falfa-opening .falfa-company-intro {
  position: relative;
  z-index: 1;
}

.opening-logo-card img {
  transform-origin: center bottom;
}

.particles-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.particles-layer span {
  position: absolute;
  width: var(--particle-size, 6px);
  height: var(--particle-size, 6px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 22px rgba(32, 197, 193, 0.45);
  opacity: 0.45;
  animation: particle-float var(--particle-speed, 9s) linear infinite;
  animation-delay: var(--particle-delay, 0s);
  transform: translate3d(0, 0, 0);
}

.falfa-dark-band,
.falfa-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.falfa-dark-band > :not(.particles-layer),
.falfa-cta > :not(.particles-layer) {
  position: relative;
  z-index: 1;
}

.falfa-dark-band::before,
.falfa-cta::before {
  content: "";
  position: absolute;
  inset: -18% 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(32, 197, 193, 0.28), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(24, 170, 168, 0.16), transparent 24%);
  opacity: 0.72;
  transform: translateY(var(--parallax-shift, 0px));
  transition: transform 120ms linear;
  pointer-events: none;
}

.falfa-service-card,
.falfa-sectors-grid article {
  transform-style: preserve-3d;
  perspective: 900px;
}

.falfa-service-card:hover,
.falfa-sectors-grid article:hover {
  transform: translateY(-6px);
}

.falfa-service-card:nth-child(even):hover {
  transform: translateY(-6px);
}

.falfa-news-grid article {
  position: relative;
  overflow: hidden;
}

.falfa-news-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(5, 62, 97, 0.88), rgba(24, 170, 168, 0.72));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.falfa-news-grid article > * {
  position: relative;
  z-index: 1;
}

.falfa-news-grid article:hover::before {
  opacity: 1;
}

.falfa-news-grid article:hover h3,
.falfa-news-grid article:hover p,
.falfa-news-grid article:hover a {
  color: #fff;
}

.falfa-news-grid article:hover > span {
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.9);
}

.typewriter-number::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 4px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: cursor-blink 1s step-end infinite;
}

.typewriter-number.is-complete::after {
  content: none;
}

.outsourcing-type-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 24%, rgba(32, 197, 193, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7fbfb);
}

.outsourcing-type-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--content-max);
  min-height: clamp(560px, 42vw, 640px);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(216, 235, 238, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 62, 97, 0.1);
}

.outsourcing-type-card::before {
  content: none;
}

.outsourcing-type-badge {
  display: none;
}

.outsourcing-type-copy {
  align-self: center;
  width: min(920px, 100%);
  margin-inline: auto;
  text-align: center;
}

.outsourcing-type-copy h2 {
  max-width: 860px;
  margin-bottom: 18px;
  color: var(--color-primary-dark);
  font-size: clamp(28px, 3.7vw, 46px);
}

.outsourcing-typed-text {
  max-width: 930px;
  margin-inline: auto;
  color: #122c3c;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 600;
  line-height: 1.95;
}

.outsourcing-typed-text + .outsourcing-typed-text {
  margin-top: 1.2em;
}

/* SplitText line reveal */
.split-reveal .split-line {
  will-change: transform;
}

.outsourcing-typed-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 5px;
  vertical-align: -0.12em;
  background: var(--color-primary);
  animation: cursor-blink 0.75s step-end infinite;
}

.outsourcing-typed-text.is-complete::after {
  content: none;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.72);
  }
  14% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--particle-drift, 42px), -140px, 0) scale(1.12);
  }
}

/* Elementor-style motion layer applied across the static site */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --accent-color: 24, 170, 168;
}

:where(.section, .section-head, .section-heading, .trust-strip > div, .service-card, .project-card, .post-card, .values-grid article, .process-list article, .featured-post, .blog-sidebar > div, .media-panel, .contact-info, .contact-form, .falfa-feature-strip article, .falfa-values-grid article, .falfa-service-card, .falfa-sectors-grid article, .falfa-news-grid article, .opening-logo-card, .opening-service, .falfa-company-intro, .vision-text, .vision-photo, .footer-group) {
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s, transform 0.4s var(--motion-ease), opacity 0.3s ease;
}

:where(.hero::before, .page-hero::before, .home-hero::before, .falfa-home-hero::before, .vision-shape) {
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

:where(a, .site-nav a, .footer-group a, .falfa-service-card a, .falfa-news-grid a, .post-card a, .text-link) {
  transition: color 0.2s linear, opacity 0.2s linear;
}

:where(.btn, .header-cta, .lang-switch, .all-services-btn, .filters button, .contact-form .btn) {
  position: relative;
  overflow: hidden;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.4s var(--motion-ease), color 0.2s linear;
}

:where(.btn, .header-cta, .all-services-btn)::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}

:where(.btn, .header-cta, .all-services-btn):hover::before {
  animation: button-ripple 1.1s ease-out;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

:where(img, .project-card img, .vision-photo img, .intro-image img, .featured-post img, .article-cover) {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

:where(.falfa-service-card, .project-card, .post-card, .falfa-news-grid article, .process-list article, .falfa-sectors-grid article, .trust-strip > div):hover img,
.vision-photo:hover img,
.intro-image:hover img {
  transform: scale(1.045);
}

.site-nav a::after,
.footer-group a::after,
.falfa-service-card a::after,
.falfa-news-grid a::after,
.post-card a::after {
  transition: width 0.1s 0.2s, height 0.1s 0.3s, opacity 0.12s 0.22s;
}

.site-nav.open {
  transition: 300ms ease-out;
}

.site-nav:not(.open) {
  transition: 300ms ease-in;
}

.nav-toggle:hover span:first-child {
  transform: translateX(3px);
}

.nav-toggle:hover span:last-child {
  transform: translateX(-3px);
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
  transition: width 0.3s;
  pointer-events: none;
}

.back-to-top {
  position: fixed;
  inset-inline-end: 24px;
  bottom: 178px;
  z-index: 85;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 14px 30px rgba(5, 62, 97, 0.22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.4s var(--motion-ease), visibility 0.5s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomInLeft {
  from { opacity: 0; transform: scale(0.8) translateX(-30px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.08); opacity: 1; }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes slideInDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes fadeOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

@keyframes fadeOutTop {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-30px); }
}

@keyframes fadeOutBottom {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(30px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes wobble-horizontal {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@keyframes glow-out {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-color), 0.45); }
  100% { box-shadow: 0 0 0 20px rgba(var(--accent-color), 0); }
}

@keyframes iconTranslateY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes button-ripple {
  0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes radio-wave {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes skeleton-loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ken-burns-in {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

@keyframes ken-burns-out {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}

@keyframes popup-open {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes popup-close {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

.home-hero::after,
.falfa-hero-bg.active {
  animation: ken-burns-in 8s ease forwards;
}

.falfa-opening-inner {
  animation: fadeInUp 0.7s ease both;
}

.falfa-company-intro {
  animation: fadeIn 0.8s ease both;
}

.floating-contact-actions a {
  transition: transform 0.4s var(--motion-ease), box-shadow 0.3s ease, opacity 0.3s ease;
}

.floating-contact-actions a:hover {
  animation: pulse 0.6s ease;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.22);
}

.floating-call {
  animation: floating-pulse 1.8s ease-in-out infinite;
}

.floating-whatsapp {
  animation: floating-pulse 1.8s ease-in-out 0.35s infinite;
}

@keyframes floating-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.04);
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 2s linear infinite alternate;
}

@media (max-width: 980px) {
  .falfa-opening {
    min-height: auto;
    padding-top: 72px;
  }

  .falfa-opening-inner,
  .falfa-company-intro {
    grid-template-columns: 1fr;
  }

  .vision-row {
    grid-template-columns: 1fr;
  }

  .vision-row[data-dir="right"] .vision-photo {
    order: -1;
  }

  .opening-logo-card {
    justify-content: center;
    padding-top: 0;
  }

  .opening-services {
    gap: 54px;
    text-align: center;
  }

  .falfa-company-intro {
    margin-top: 80px;
  }

  .intro-image {
    transform: none;
  }

  .intro-copy {
    min-height: auto;
    padding: 20px 0 60px;
    text-align: center;
  }

  .falfa-company-intro:hover .intro-image,
  .falfa-company-intro:hover .intro-copy {
    transform: none;
  }

  .falfa-vision-mission {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
    padding-top: 110px;
  }

  .why-us-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .opening-logo-card img {
    width: min(290px, 90%);
  }

  .opening-service h1,
  .opening-service h2 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .opening-service p {
    font-size: 18px;
  }

  .floating-contact-actions a {
    width: 58px;
    height: 58px;
    font-size: 26px;
  }

  .back-to-top {
    bottom: 178px;
  }

  .why-us-list article {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .business-title {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .business-title span {
    max-width: 160px;
    width: 100%;
    margin-inline: auto;
  }
}

[data-sectors-motion].timeline-active .falfa-sectors-grid article:hover {
  transform: translateY(-10px) rotate(0deg) scale(1.05);
}

@media (max-width: 1080px) {
  .business-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specializations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .business-solutions-grid {
    grid-template-columns: 1fr;
  }

  .business-solutions-grid article {
    min-height: 220px;
  }

  .specializations-grid {
    grid-template-columns: 1fr;
  }

  .specializations-grid article {
    min-height: auto;
    padding-inline: 18px;
  }
}

/* Brand polish: unified headings, calmer motion colors, and a wider footer. */
.section-heading,
.section-head,
.business-title,
.specializations-title {
  text-align: center;
}

.section-heading h1,
.section-heading h2,
.section-head h2,
.business-title h2,
.specializations-title h2 {
  color: var(--color-primary-dark);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

.section-heading .eyebrow,
.section-head .eyebrow {
  color: var(--color-primary);
  font-weight: 900;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--motion-ease, ease-out);
}

.section-heading h1,
.section-heading h2,
.section-head h2,
.business-title h2,
.specializations-title h2 {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--motion-ease, ease-out);
}

.section-heading.heading-in-view .eyebrow,
.section-head.heading-in-view .eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.section-heading.heading-in-view h1,
.section-heading.heading-in-view h2,
.section-head.heading-in-view h2,
.business-title.heading-in-view h2,
.specializations-title.heading-in-view h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

body:not(.motion-ready) .section-heading::after,
body:not(.motion-ready) .section-head::after,
body:not(.motion-ready) .business-title span {
  transition: none;
}

.section-heading p,
.section-head p,
.specializations-subtitle {
  color: rgba(24, 170, 168, 0.92);
  font-weight: 800;
}

.section-heading::after,
.section-head::after {
  content: "";
  display: block;
  width: min(220px, 46vw);
  height: 3px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(24, 170, 168, 0.24), var(--color-primary), rgba(5, 62, 97, 0.22), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.75s var(--motion-ease, ease-out);
}

.section-heading.heading-in-view::after,
.section-head.heading-in-view::after {
  transform: scaleX(1);
}

.falfa-dark-band .section-head h2,
.falfa-dark-band .section-head p {
  color: #fff;
}

.falfa-dark-band .section-head::after {
  background: linear-gradient(90deg, transparent, rgba(24, 170, 168, 0.95), rgba(255, 255, 255, 0.75), transparent);
}

.specializations-title::after {
  content: none;
}

/* Fail-safe: if reduced-motion is on, headings must not stay
   invisible waiting on JS — show them immediately. The JS observer
   below provides the same safety net when IntersectionObserver is
   unavailable, matching the pattern used by the other reveal
   sections on this site. */
@media (prefers-reduced-motion: reduce) {
  .section-heading .eyebrow,
  .section-head .eyebrow,
  .section-heading h1,
  .section-heading h2,
  .section-head h2,
  .business-title h2,
  .specializations-title h2 {
    opacity: 1;
    transform: none;
  }
  .section-heading::after,
  .section-head::after,
  .business-title span {
    transform: scaleX(1) !important;
  }
}

.business-title {
  max-width: 860px;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: clamp(42px, 6vw, 74px);
}

.business-title span {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(24, 170, 168, 0.18), var(--color-primary), rgba(5, 62, 97, 0.18), transparent);
  transform: scaleX(0);
  transition: transform 0.75s var(--motion-ease, ease-out);
}

.business-title[data-dir="left"] span,
.business-title span:first-child {
  transform-origin: right center;
}

.business-title span:last-child {
  transform-origin: left center;
}

.business-title.heading-in-view span {
  transform: scaleX(1);
}

.business-solutions-grid article,
.falfa-sectors-grid article,
.specializations-grid article {
  border-color: rgba(24, 170, 168, 0.34);
  box-shadow: 0 18px 46px rgba(5, 62, 97, 0.08);
}

.business-solutions-grid article:hover,
.falfa-sectors-grid article:hover,
.specializations-grid article:hover {
  border-color: rgba(24, 170, 168, 0.9);
  box-shadow: 0 28px 70px rgba(5, 62, 97, 0.16);
}

.specializations-section {
  background:
    radial-gradient(circle, rgba(24, 170, 168, 0.075) 1.2px, transparent 1.7px) center 22px / 14px 14px,
    linear-gradient(180deg, #f7fbfc 0%, #fff 46%, #f9fcfc 100%);
}

.specializations-section::before {
  opacity: 0.32;
}

.specializations-grid {
  max-width: 1380px;
}

.specializations-grid article {
  position: relative;
  min-height: 360px;
  padding: 26px 18px 24px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(24, 170, 168, 0.18);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.specializations-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(24, 170, 168, 0.12), transparent 44%, rgba(5, 62, 97, 0.08));
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.specializations-grid article:hover::before {
  opacity: 1;
}

.specializations-grid span {
  color: var(--color-primary-dark);
  background: linear-gradient(145deg, #fff, rgba(24, 170, 168, 0.1));
  border-color: rgba(24, 170, 168, 0.18);
}

.specializations-grid h3,
.specializations-grid p,
.specializations-grid a {
  position: relative;
  z-index: 1;
}

.specializations-grid h3 {
  color: var(--color-primary-dark);
  font-weight: 900;
}

.specializations-grid a {
  color: var(--color-primary);
}

.site-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 16% 18%, rgba(24, 170, 168, 0.22), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(24, 170, 168, 0.12), transparent 28%),
    linear-gradient(145deg, #053e61 0%, #092f47 46%, #071b25 100%);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.03)),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) center / 18px 18px;
  opacity: 0.16;
  pointer-events: none;
}

.footer-main,
.footer-bottom {
  position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

.footer-main {
  grid-template-columns: minmax(300px, 1.35fr) repeat(2, minmax(170px, 0.72fr)) minmax(260px, 1fr);
  gap: clamp(30px, 4vw, 62px);
  padding: clamp(70px, 7vw, 96px) 0 clamp(46px, 5vw, 58px);
}

.footer-about p {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

.site-footer .footer-brand {
  gap: 14px;
}

.site-footer .footer-brand .brand-mark {
  width: 146px;
  height: 142px;
  background: url("assets/sql-logo-transparent-clean.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
}

.site-footer .footer-brand-text {
  display: none;
}

.footer-group {
  min-width: 0;
}

.footer-group h3 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.footer-group h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
}

.footer-group a {
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-group a:hover {
  color: #fff;
  transform: translateX(-3px);
}

[dir="ltr"] .footer-group a:hover {
  transform: translateX(3px);
}

.footer-contact p {
  gap: 5px;
  margin-bottom: 18px;
}

.footer-contact strong {
  max-width: 280px;
  overflow-wrap: anywhere;
  line-height: 1.75;
}

.footer-cta {
  background: linear-gradient(135deg, var(--color-primary), #2fc2bf);
  box-shadow: 0 18px 44px rgba(24, 170, 168, 0.22);
}

.footer-bottom {
  padding: 22px 0 28px;
}

@media (max-width: 1080px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .section-heading h1,
  .section-heading h2,
  .section-head h2,
  .business-title h2,
  .specializations-title h2 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .outsourcing-type-card {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .outsourcing-type-badge {
    min-height: 112px;
  }

  .outsourcing-typed-text {
    font-size: 17px;
  }

  .footer-main,
  .footer-bottom {
    width: min(560px, calc(100% - 40px));
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding-block: 58px 36px;
  }

  .site-footer .footer-brand .brand-mark {
    width: 132px;
    height: 128px;
  }
}

/* Blog repair: stable layout in Arabic and English. */
.blog-layout {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 340px);
  grid-template-areas: "main sidebar";
  width: min(1240px, calc(100% - 44px));
  max-width: none;
  padding-inline: 0;
  direction: ltr;
}

html[dir="rtl"] .blog-layout {
  grid-template-columns: clamp(280px, 27vw, 340px) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

.blog-main {
  grid-area: main;
  min-width: 0;
}

.blog-sidebar {
  grid-area: sidebar;
  min-width: 0;
}

html[dir="rtl"] .blog-main,
html[dir="rtl"] .blog-sidebar {
  direction: rtl;
}

html[dir="ltr"] .blog-main,
html[dir="ltr"] .blog-sidebar {
  direction: ltr;
}

.featured-post,
.post-card,
.blog-sidebar > div,
.article-detail {
  border-color: rgba(24, 170, 168, 0.2);
}

.featured-post {
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
}

.post-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-section {
  width: min(920px, calc(100% - 44px));
  max-width: none;
  padding-inline: 0;
}

.article-detail {
  padding: clamp(24px, 4vw, 42px);
  background: #fff;
  border: 1px solid rgba(24, 170, 168, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(5, 62, 97, 0.08);
}

@media (max-width: 1180px) {
  .blog-layout,
  html[dir="rtl"] .blog-layout,
  html[dir="ltr"] .blog-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }

  .blog-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .blog-layout,
  .article-section {
    width: min(620px, calc(100% - 36px));
  }

  .featured-post,
  .post-grid,
  .blog-sidebar {
    grid-template-columns: 1fr;
  }

  .featured-post img {
    min-height: 220px;
  }
}

/* Opening hero motion requested: relaxed left entrance and logo bounce. */
.falfa-opening-inner {
  animation: none;
}

.opening-logo-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}

.opening-logo-card img {
  width: min(360px, 100%);
  max-width: none;
  transform-origin: center bottom;
  animation: openingLogoDoubleHop 2s ease-in-out infinite;
}

.opening-service {
  opacity: 0;
  animation: openingTextFromLeft 3.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opening-service:first-child {
  animation-name: openingTextFromRight;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.12, 0.72, 0.18, 1);
}

.opening-service:nth-child(2) {
  animation-delay: 850ms;
}

.opening-actions {
  display: none;
}

body:not(.motion-ready) .opening-service,
body:not(.motion-ready) .opening-logo-card img {
  animation-play-state: paused;
}

/* Contact pages responsive repair: avoid squeezed columns at narrow widths/zoom. */
.contact-quick-cards,
.contact-layout {
  width: min(var(--content-max), calc(100% - 44px));
  padding-inline: 0;
}

.contact-quick-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.contact-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.contact-quick-cards article,
.contact-form,
.contact-info {
  min-width: 0;
}

.contact-quick-cards h3,
.contact-quick-cards p,
.contact-info h2,
.contact-info p,
.info-line strong {
  overflow-wrap: anywhere;
}

.info-line {
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (max-width: 820px) {
  .contact-quick-cards,
  .contact-layout {
    width: min(620px, calc(100% - 36px));
    grid-template-columns: 1fr;
  }

  .contact-form,
  .contact-info,
  .contact-quick-cards article {
    padding: 24px 22px;
  }
}

.site-header .brand-mark {
  width: 94px;
  height: 94px;
  background-image: url("assets/sql-logo-transparent-clean.png");
  background-size: contain;
}

@media (max-width: 720px) {
  .site-header .brand-mark {
    width: 76px;
    height: 76px;
  }

  .opening-logo-card img {
    width: min(310px, 92%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final clean SQL theme update. */
body {
  background: #fff;
}

.site-header {
  gap: clamp(10px, 1.5vw, 24px);
}

.site-nav {
  gap: clamp(10px, 1.35vw, 20px);
}

.site-nav a {
  font-size: 15px;
}

.page-hero,
.hero,
.dark-band,
.falfa-dark-band,
.falfa-cta,
.cta-band,
.inner-cta,
.outsourcing-type-section,
.outsourcing-type-card {
  color: var(--color-ink);
  background: #fff !important;
  background-image: none !important;
}

.page-hero {
  min-height: auto;
  padding-block: clamp(66px, 9vw, 104px);
  border-bottom: 1px solid rgba(3, 168, 173, 0.14);
}

.page-hero::before,
.hero::before,
.falfa-dark-band::before,
.falfa-cta::before,
.site-footer::before,
.outsourcing-type-card::before {
  content: none !important;
}

.page-hero > div {
  max-width: 860px;
}

.page-hero h1,
.dark-band h2,
.falfa-dark-band h2,
.falfa-dark-band .section-head h2,
.inner-cta h2,
.outsourcing-type-copy h2 {
  color: var(--color-primary-dark);
}

.page-hero p,
.dark-band p,
.falfa-dark-band .section-head p,
.falfa-dark-band .process-list p,
.falfa-cta p,
.inner-cta p,
.outsourcing-type-copy p {
  color: var(--color-muted);
}

.page-hero .eyebrow,
.dark-band .eyebrow,
.falfa-dark-band .eyebrow,
.inner-cta .eyebrow,
.outsourcing-type-copy .eyebrow {
  color: var(--color-primary);
}

.falfa-services-section,
.falfa-values-section,
.falfa-sectors-section,
.falfa-news-section,
.business-solutions-section,
.specializations-section,
.clients-section {
  background: #fff !important;
}

.service-card-face {
  background: #fff;
  border-color: rgba(3, 168, 173, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(5, 62, 97, 0.08);
}

.service-card-face::before {
  background: linear-gradient(135deg, rgba(3, 168, 173, 0.1), rgba(3, 168, 173, 0.03));
}

.service-card-back {
  color: var(--color-ink);
  background: #fff;
  border-color: rgba(3, 168, 173, 0.34);
}

.service-card-back::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(3, 168, 173, 0.09), transparent 58%);
}

.service-card-back h3 {
  color: var(--color-primary-dark);
}

.service-card-back p {
  color: var(--color-muted);
}

.service-card-face a {
  display: none !important;
}

.process-list article,
.falfa-dark-band .process-list article,
.falfa-dark-band .why-us-list article {
  background: #fff;
  border: 1px solid rgba(3, 168, 173, 0.18);
  box-shadow: 0 18px 46px rgba(5, 62, 97, 0.08);
}

.visa-highlight {
  margin-top: 18px;
  padding: 18px 20px;
  color: var(--color-primary-dark) !important;
  background: rgba(3, 168, 173, 0.07);
  border: 1px solid rgba(3, 168, 173, 0.2);
  border-radius: 12px;
  font-weight: 700;
}

.visa-highlight strong {
  color: var(--color-primary-dark);
  font-weight: 900;
}

.visa-highlight span {
  color: var(--color-primary);
  font-size: 1.18em;
}

.companies-services-page {
  background: #fff;
}

.companies-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.company-service-card {
  padding: clamp(26px, 4vw, 42px);
  background: #fff;
  border: 1px solid rgba(3, 168, 173, 0.2);
  border-top: 4px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(5, 62, 97, 0.08);
}

.company-service-card span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--color-primary);
  font-weight: 900;
}

.company-service-card h2 {
  margin-bottom: 14px;
  color: var(--color-primary-dark);
  font-size: clamp(24px, 3vw, 34px);
}

.company-service-card p {
  margin-bottom: 20px;
  color: var(--color-muted);
}

.company-service-card ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding-inline-start: 22px;
  color: var(--color-ink);
}

.company-service-card li::marker {
  color: var(--color-primary);
}

.site-footer {
  color: var(--color-ink);
  background: #fff !important;
  border-top: 1px solid rgba(3, 168, 173, 0.16);
}

.footer-about p,
.footer-group a,
.footer-contact strong,
.footer-bottom,
.footer-bottom p {
  color: var(--color-muted);
}

.footer-group h3 {
  color: var(--color-primary-dark);
}

.footer-group a:hover {
  color: var(--color-primary);
}

.site-footer .footer-brand .brand-mark {
  filter: none;
}

@media (max-width: 980px) {
  .companies-service-grid {
    grid-template-columns: 1fr;
  }
}

/* Header and vision/mission refinement requested after the white theme pass. */
.site-header {
  gap: clamp(8px, 1.1vw, 18px);
  min-height: 74px;
}

.site-header .brand-mark {
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
}

.site-header.is-scrolled .brand-mark {
  width: 64px;
  height: 64px;
}

.site-nav {
  flex-wrap: nowrap;
  gap: clamp(8px, 0.9vw, 14px);
}

.site-nav a {
  font-size: 14px;
  line-height: 1.35;
}

.header-actions {
  gap: 8px;
}

.header-cta {
  min-height: 40px;
  padding: 8px 12px;
  white-space: nowrap;
}

.lang-pill {
  min-height: 38px;
  padding: 3px;
}

.lang-pill a,
.lang-pill span {
  min-width: 30px;
  min-height: 30px;
  padding-inline: 7px;
  font-size: 12px;
}

.falfa-vision-mission {
  color: var(--color-ink);
  background: #fff !important;
  background-image: none !important;
  clip-path: none;
}

.falfa-vision-mission::after,
.vision-shape {
  content: none !important;
  display: none !important;
}

.vision-grid {
  gap: clamp(42px, 6vw, 70px);
}

.vision-row,
.vision-row:nth-child(2),
.vision-row:nth-child(3) {
  direction: ltr;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
}

.vision-photo {
  grid-column: 1;
  order: 1;
  opacity: 0;
  transform: translateX(-48px);
  transform-origin: center;
  animation: none !important;
  box-shadow: 0 22px 60px rgba(5, 62, 97, 0.12);
  transition:
    opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1) var(--image-delay),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) var(--image-delay);
}

.vision-text {
  grid-column: 2;
  order: 2;
  text-align: start;
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay),
    transform 1500ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay);
}

html[dir="rtl"] .vision-text {
  direction: rtl;
}

html[dir="ltr"] .vision-text {
  direction: ltr;
}

.vision-text h2 {
  color: var(--color-primary-dark);
}

.vision-text p {
  margin-inline: 0;
  color: var(--color-muted);
}

.falfa-vision-mission.timeline-active .vision-photo,
.vision-row.row-visible .vision-photo,
.falfa-vision-mission.timeline-active .vision-text,
.vision-row.row-visible .vision-text {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1180px) and (min-width: 981px) {
  .site-header {
    padding-inline: clamp(18px, 2.4vw, 28px);
  }

  .site-header .brand-mark {
    width: 74px;
    height: 74px;
  }

  .site-nav {
    gap: 8px;
  }

  .site-nav a {
    font-size: 13px;
  }

  .header-cta {
    display: none;
  }
}

@media (max-width: 980px) {
  .site-header {
    min-height: 70px;
  }

  .site-nav {
    flex-wrap: nowrap;
    gap: 0;
  }

  .site-nav a {
    font-size: 15px;
  }

  .vision-row,
  .vision-row:nth-child(2),
  .vision-row:nth-child(3) {
    grid-template-columns: 1fr;
  }

  .vision-photo {
    grid-column: 1;
    grid-row: 1;
  }

  .vision-text {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }

  .vision-text p {
    margin-inline: auto;
  }
}

/* Focused follow-up: text-only why cards, stricter reveal timing, smaller logo. */
.site-header .brand-mark {
  width: 74px;
  height: 74px;
}

.site-header.is-scrolled .brand-mark {
  width: 58px;
  height: 58px;
}

[data-why-motion] .why-us-list article {
  --why-delay: 0ms;
  grid-template-columns: 1fr;
  padding: clamp(20px, 3vw, 28px);
  text-align: center;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 66px, 0) scale(0.9);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--why-delay),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--why-delay),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--why-delay);
  will-change: opacity, transform, filter;
}

[data-why-motion] .why-us-list article span {
  display: none !important;
}

[data-why-motion].timeline-active .why-us-list article {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.vision-photo {
  transform: translate3d(-36px, 18px, 0) scale(0.98);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--image-delay),
    transform 860ms cubic-bezier(0.16, 1, 0.3, 1) var(--image-delay);
}

.vision-text {
  transform: translate3d(36px, 20px, 0);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--text-delay);
}

@media (max-width: 1180px) and (min-width: 981px) {
  .site-header .brand-mark {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 980px) {
  .site-header .brand-mark {
    width: 64px;
    height: 64px;
  }

  .site-header.is-scrolled .brand-mark {
    width: 58px;
    height: 58px;
  }
}

/* Formal logo-colored icons for business solutions and specializations. */
.business-solutions-grid .formal-icon,
.specializations-grid .formal-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  direction: ltr;
  color: #03a8ad;
  background:
    linear-gradient(145deg, rgba(3, 168, 173, 0.14), rgba(3, 168, 173, 0.04)),
    #fff;
  border: 1px solid rgba(3, 168, 173, 0.32);
  box-shadow: 0 14px 30px rgba(3, 168, 173, 0.12);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

.business-solutions-grid .formal-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 18px;
  font-size: 19px;
}

.specializations-grid .formal-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 14px;
  font-size: 16px;
}

.business-solutions-grid .formal-icon::after,
.specializations-grid .formal-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(3, 168, 173, 0.22);
  border-radius: inherit;
  pointer-events: none;
}

.business-solutions-grid article:hover .formal-icon,
.specializations-grid article:hover .formal-icon {
  color: #fff;
  background: #03a8ad;
  border-color: #03a8ad;
  box-shadow: 0 18px 38px rgba(3, 168, 173, 0.22);
}

/* Circular line icons, matching the requested reference style. */
.business-solutions-grid .formal-icon,
.specializations-grid .formal-icon {
  width: 82px;
  height: 82px;
  margin-inline: auto;
  color: #03a8ad;
  background: #fff;
  border: 1.5px solid rgba(3, 168, 173, 0.55);
  border-radius: 50%;
  box-shadow: 0 16px 36px rgba(3, 168, 173, 0.08);
  font-size: 0;
  letter-spacing: 0;
}

.business-solutions-grid .formal-icon {
  margin-bottom: 20px;
}

.specializations-grid .formal-icon {
  margin-bottom: 22px;
}

.business-solutions-grid .formal-icon::before,
.specializations-grid .formal-icon::before {
  content: "";
  width: 43px;
  height: 43px;
  background: currentColor;
  -webkit-mask: var(--formal-icon) center / contain no-repeat;
  mask: var(--formal-icon) center / contain no-repeat;
}

.business-solutions-grid .formal-icon::after,
.specializations-grid .formal-icon::after {
  content: none;
}

.business-solutions-grid article:hover .formal-icon,
.specializations-grid article:hover .formal-icon {
  color: #fff;
  background: #03a8ad;
  border-color: #03a8ad;
  box-shadow: 0 20px 42px rgba(3, 168, 173, 0.2);
}

.icon-operations {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 39h28M13 39V17h22v22M17 17v-6h14v6M18 23h4M26 23h4M18 29h4M26 29h4M22 39v-6h4v6'/%3E%3Cpath d='M20 11h8M16 8h16'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-workforce {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='17' r='6'/%3E%3Cpath d='M13 38c2-8 7-12 11-12s9 4 11 12'/%3E%3Ccircle cx='12' cy='21' r='4'/%3E%3Cpath d='M5 36c1.2-5 4.2-8 8-8'/%3E%3Ccircle cx='36' cy='21' r='4'/%3E%3Cpath d='M43 36c-1.2-5-4.2-8-8-8'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-customer {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='17'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3Cpath d='M35 13l5-5M34 14h7v7'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-safety {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 6l16 6v12c0 10-6.5 16-16 19C14.5 40 8 34 8 24V12l16-6z'/%3E%3Cpath d='M16 24l5 5 11-12'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-governance {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6h16l6 6v30H14z'/%3E%3Cpath d='M30 6v8h8M19 20h14M19 27h14M19 34h9'/%3E%3Cpath d='M10 14h4M10 22h4M10 30h4'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-innovation {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 22a7 7 0 1 1 14 0c0 4-3 6-4 9h-6c-1-3-4-5-4-9z'/%3E%3Cpath d='M20 36h8M21 41h6M24 4v5M9 10l4 4M39 10l-4 4M6 25h5M37 25h5'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-maintenance {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 8a10 10 0 0 0 10 10l-8 8-6-6z'/%3E%3Cpath d='M25 21L9 37a4 4 0 0 0 6 6l16-16'/%3E%3Cpath d='M13 39l2 2M34 31l5 5M37 28l5 5'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-facility {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 41h30M13 41V12h14v29M27 20h8v21'/%3E%3Cpath d='M17 18h4M17 24h4M17 30h4M31 26h2M31 32h2M20 41v-6h4v6'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-cleaning {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M29 8l11 11M32 17L14 35M10 39l8-8 5 5-8 8zM31 9l8 8'/%3E%3Cpath d='M11 12h6M14 9v6M36 32h5M38.5 29v6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Apply the same circular line icon system to Services. */
.falfa-service-card .formal-icon,
.service-card .formal-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 82px;
  height: 82px;
  margin: 0 auto 20px;
  place-items: center;
  color: #03a8ad;
  background: #fff;
  border: 1.5px solid rgba(3, 168, 173, 0.55);
  border-radius: 50%;
  box-shadow: 0 16px 36px rgba(3, 168, 173, 0.08);
  font-size: 0;
  transition: color 260ms ease, background 260ms ease, border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.service-card .formal-icon {
  margin-bottom: 18px;
}

.falfa-service-card .formal-icon::before,
.service-card .formal-icon::before {
  content: "";
  width: 43px;
  height: 43px;
  background: currentColor;
  -webkit-mask: var(--formal-icon) center / contain no-repeat;
  mask: var(--formal-icon) center / contain no-repeat;
}

.falfa-service-card:hover .formal-icon,
.falfa-service-card:focus-within .formal-icon,
.service-card:hover .formal-icon {
  color: #fff;
  background: #03a8ad;
  border-color: #03a8ad;
  box-shadow: 0 20px 42px rgba(3, 168, 173, 0.2);
  transform: translateY(-4px);
}

.icon-electrical {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 4L12 27h11l-1 17 14-24H25z'/%3E%3Cpath d='M10 40h28'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-mechanical {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='6'/%3E%3Cpath d='M24 6v6M24 36v6M6 24h6M36 24h6M11 11l4 4M33 33l4 4M37 11l-4 4M15 33l-4 4'/%3E%3Cpath d='M18 8l6-3 6 3M18 40l6 3 6-3'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-landscape {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 40V23'/%3E%3Cpath d='M24 23c-9 0-14-5-14-13 9 0 14 5 14 13zM24 25c9 0 14-5 14-13-9 0-14 5-14 13z'/%3E%3Cpath d='M8 40h32M13 35c3 2 6 2 9 0M26 35c3 2 6 2 9 0'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-contracting {
  --formal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 40h32M13 40V18h22v22M17 18v-6h14v6'/%3E%3Cpath d='M18 24h4M26 24h4M18 30h4M26 30h4'/%3E%3Cpath d='M9 18h30M11 14h26'/%3E%3C/g%3E%3C/svg%3E");
}