:root {
  --navy: #1a2e44;
  --navy-dark: #0f1d2c;
  --navy-mid: #223651;
  --gold: #e8c422;
  --gold-light: #f5d64a;
  --gold-dark: #c4a51a;
  --steel: #3a5068;
  --steel-light: #4e6a84;
  --concrete: #c8cdd4;
  --concrete-light: #e8eaed;
  --white: #ffffff;
  --off-white: #f4f5f7;
  --gray-text: #8899aa;
  --text-light: #cdd6e0;
  --radius: 4px;
  --radius-md: 8px;
  --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The horizontal guard is on BOTH html and body.
   On body alone it does not hold: the scrollport is the root element, so
   anything wider than the viewport still gave the document a horizontal
   scrollbar — and in RTL the page then opened scrolled away from its start,
   which is the "site glisse à droite" bug. `clip` is preferred over `hidden`
   because it does not turn the element into a scroll container (which would
   break any future position:sticky); `hidden` stays first as the fallback for
   browsers without it. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
html { scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; color: var(--navy-dark); background: var(--white); }

/* Arabic font – apply to every Arabic element and to body in AR mode */
.ar,
[data-lang="ar"],
body.lang-ar { font-family: 'Noto Kufi Arabic', sans-serif; }
body.lang-ar * { font-family: 'Noto Kufi Arabic', sans-serif; }
/* Keep technical / brand fonts in AR mode */
body.lang-ar .logo-text strong,
body.lang-ar .service-num,
body.lang-ar .stat-num,
body.lang-ar .about-badge-float strong { font-family: 'Barlow Condensed', sans-serif; }

/* ===================== NAV ===================== */
nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: rgba(15, 29, 44, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold);
  transition: var(--transition);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 72px;
}
.logo-wrap { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* The wordmark is navy and gold on transparency; the navbar and footer are
   both dark navy, so its navy letters disappeared and "COMODA" read as
   "CO ODA". It now sits on a light panel, which keeps the brand colours exactly
   as drawn instead of filtering or inverting them to survive the background. */
.logo-img {
  height: 44px; width: auto; display: block; object-fit: contain;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}
.logo-img-footer { height: 38px; }

/* Catalogue download. Styled as a third, quieter action beside the two hero
   CTAs — it is a useful thing to offer, not the thing we want clicked most. */
.btn-download {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 12px 24px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(232, 196, 34, 0.10);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--gold); text-transform: uppercase; text-decoration: none;
  transition: var(--transition); cursor: pointer;
}
.btn-download:hover { background: var(--gold); color: var(--navy-dark); transform: translateY(-2px); }
.btn-download svg { width: 18px; height: 18px; flex-shrink: 0; }
.logo-mark {
  width: 48px; height: 48px;
  background: var(--navy-mid);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 800;
  color: var(--white); letter-spacing: -1px;
}
.logo-mark span { color: var(--gold); }
.logo-text { line-height: 1.1; }
.logo-text strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 2px; }
.logo-text em { font-style: normal; font-size: 11px; color: var(--gold); letter-spacing: 3px; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-light); text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: var(--gold); }
.lang-toggle { display: flex; gap: 4px; background: rgba(255,255,255,0.08); border-radius: var(--radius); padding: 4px; }
.lang-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: 1px; background: none; border: none; cursor: pointer; color: var(--gray-text); border-radius: 2px; transition: var(--transition); }
.lang-btn.active { background: var(--gold); color: var(--navy-dark); }
.btn-devis { background: var(--gold); color: var(--navy-dark); padding: 10px 24px; border: none; border-radius: var(--radius); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; transition: var(--transition); }
.btn-devis:hover { background: var(--gold-light); transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: var(--white); transition: var(--transition); }

/* ===================== HERO ===================== */
#hero { min-height: 100vh; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 40%, var(--steel) 100%); position: relative; overflow: hidden; display: flex; align-items: center; }

/* Hero Background Video */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.7;
}

/* Hero Overlay for Text Readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 29, 44, 0.5) 0%, rgba(15, 29, 44, 0.3) 40%, rgba(58, 80, 104, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(232, 196, 34, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 196, 34, 0.06) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; }
.hero-shapes { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; background: var(--navy-mid); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); opacity: 0.5; z-index: 1; }
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(232, 196, 34, 0.2), 0 0 40px rgba(232, 196, 34, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(232, 196, 34, 0.3), 0 0 60px rgba(232, 196, 34, 0.15);
  }
}

.hero-accent {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  border: 2px solid rgba(232, 196, 34, 0.15);
  border-radius: 50%;
  z-index: 1;
  animation: pulseGlow 3s ease-in-out infinite;
}

.hero-accent::before {
  content: '';
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(232, 196, 34, 0.1);
  border-radius: 50%;
}
.hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 8rem 2rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
/* Hero Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 196, 34, 0.15);
  border: 1px solid rgba(232, 196, 34, 0.4);
  border-radius: 2px;
  padding: 6px 16px;
  margin-bottom: 1.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: slideInFromLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.5rem;
  animation: slideInFromLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  overflow: hidden;
}

.hero-title .accent {
  color: var(--gold);
  display: block;
  animation: slideInFromRight 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.hero-subtitle {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 2.5rem;
  max-width: 520px;
  animation: slideInFromBottom 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
  overflow: hidden;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: slideInFromBottom 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}
.btn-outline { padding: 12px 28px; border: 2px solid rgba(255,255,255,0.3); border-radius: var(--radius); background: transparent; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1.5px; color: var(--white); text-transform: uppercase; text-decoration: none; transition: var(--transition); cursor: pointer; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary { padding: 14px 32px; background: var(--gold); border: none; border-radius: var(--radius); font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: var(--navy-dark); text-transform: uppercase; text-decoration: none; transition: var(--transition); cursor: pointer; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.8rem; font-weight: 800; color: var(--gold); line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-light); margin-top: 6px; letter-spacing: 0.5px; }
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 1s ease-out 0.4s both;
}

.hero-img-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  background: var(--navy-mid);
  border-radius: var(--radius-md);
  border: 1px solid rgba(232, 196, 34, 0.2);
  overflow: hidden;
  position: relative;
  animation: slideInLeft 1s ease-out 0.6s both;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-illustration {
  width: 100%;
  height: 100%;
  animation: fadeInUp 1.2s ease-out 0.8s both;
}

/* ===================== SECTIONS ===================== */
section { scroll-margin-top: 72px; }
.section-inner { max-width: 1280px; margin: 0 auto; padding: 5rem 2rem; }
.section-label { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; color: var(--gold-dark); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1rem; }
.section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background: var(--gold-dark); width: 30px; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--navy-dark); margin-bottom: 1rem; }
.section-title .highlight { color: var(--gold-dark); }
.section-desc { font-size: 1.05rem; line-height: 1.8; color: #556677; max-width: 600px; }

/* ===================== ABOUT ===================== */
#about { background: var(--off-white); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-visual { position: relative; }
.about-img-main { width: 100%; aspect-ratio: 4/3; background: var(--navy); border-radius: var(--radius-md); overflow: hidden; }
.about-badge-float { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--gold); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.about-badge-float strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 800; color: var(--navy-dark); line-height: 1; }
.about-badge-float span { font-size: 12px; font-weight: 600; color: var(--navy-mid); letter-spacing: 1px; }
.about-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.pillar { background: var(--white); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.25rem; }
.pillar h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.pillar p { font-size: 13px; color: #778899; line-height: 1.5; }
body.lang-ar .pillar { border-left: none; border-right: 3px solid var(--gold); }

/* ===================== WHY US ===================== */
#why { background: var(--navy-dark); position: relative; overflow: hidden; }
#why::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(232,196,34,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,196,34,0.04) 1px, transparent 1px); background-size: 40px 40px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.why-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 2rem 1.5rem; text-align: center; transition: var(--transition); position: relative; }
.why-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--gold); transition: width 0.3s ease; }
.why-card:hover::after { width: 60%; }
.why-card:hover { background: rgba(255,255,255,0.07); }
.why-icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; background: rgba(232, 196, 34, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.why-icon svg { width: 32px; height: 32px; }
.why-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 0.75rem; }
.why-card p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.why-header { position: relative; z-index: 1; }
.why-header .section-title { color: var(--white); }
.why-header .section-desc { color: var(--text-light); }
.why-header .section-label { color: var(--gold); }
.why-header .section-label::before, .why-header .section-label::after { background: var(--gold); }

/* ===================== SERVICES ===================== */
#services { background: var(--white); }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; }
.service-card { border: 1px solid var(--concrete-light); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,46,68,0.12); }
.service-header { background: var(--navy); padding: 1.75rem 2rem; display: flex; align-items: center; gap: 1rem; }
.service-num { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 800; color: rgba(232,196,34,0.2); line-height: 1; }
.service-header h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--white); }
.service-body { padding: 1.75rem 2rem; background: var(--off-white); }
.service-body p { font-size: 14px; color: #556677; line-height: 1.7; margin-bottom: 1rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 600; padding: 4px 12px; background: rgba(26,46,68,0.08); color: var(--navy); border-radius: 2px; letter-spacing: 0.5px; }

/* ===================== PRODUCTS (CATALOGUE) ===================== */
#products { background: var(--off-white); }
.catalogue-controls { display: flex; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; align-items: center; }
.catalogue-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--concrete-light); border-radius: var(--radius-md); padding: 10px 16px; }
.catalogue-search input { flex: 1; border: none; outline: none; font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--navy-dark); background: transparent; }
.catalogue-search svg { opacity: 0.4; flex-shrink: 0; }
.category-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-filter-btn { padding: 8px 16px; background: var(--white); border: 1px solid var(--concrete-light); border-radius: 100px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.cat-filter-btn:hover, .cat-filter-btn.active { background: var(--navy); color: var(--gold); border-color: var(--navy); }
body.lang-ar .cat-filter-btn { font-family: 'Noto Kufi Arabic', sans-serif; letter-spacing: 0; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.cat-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--concrete-light); overflow: hidden; transition: var(--transition); }
.cat-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-2px); }
.cat-card.hidden { display: none; }
.cat-card-header { background: var(--navy); padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.cat-card-cat { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }
.cat-card-icon { width: 36px; height: 36px; background: rgba(232,196,34,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cat-card-body { padding: 1.25rem 1.5rem; }
.cat-card-body h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cat-card-body p { font-size: 13px; color: #778899; line-height: 1.6; margin-bottom: 0.75rem; }
.cat-card-body.ar, .cat-card-body.ar h4 { font-family: 'Noto Kufi Arabic', sans-serif; }
.spec-row { display: flex; gap: 6px; flex-wrap: wrap; }
.spec-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; background: rgba(232,196,34,0.15); color: var(--gold-dark); border-radius: 2px; }
.spec-badge.blue { background: rgba(26,46,68,0.08); color: var(--steel); }
.no-results { grid-column: 1/-1; text-align: center; padding: 3rem; color: var(--gray-text); font-size: 1.1rem; display: none; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--white); border-radius: var(--radius-md); max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header { background: var(--navy); padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--white); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--gold); font-size: 24px; line-height: 1; }
.modal-body { padding: 2rem; }
.modal-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.modal-table th { background: var(--off-white); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--concrete-light); }
.modal-table td { padding: 10px 14px; font-size: 14px; color: #445566; border-bottom: 1px solid var(--concrete-light); }
.modal-table tr:last-child td { border-bottom: none; }
.modal-table tr:hover td { background: var(--off-white); }

/* ===================== CONTACT ===================== */
#contact { background: var(--navy-dark); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.contact-info .section-title { color: var(--white); }
.contact-info .section-desc { color: var(--text-light); }
.contact-info .section-label { color: var(--gold); }
.contact-info .section-label::before, .contact-info .section-label::after { background: var(--gold); }
.contact-items { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(232,196,34,0.1); border: 1px solid rgba(232,196,34,0.2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.contact-icon svg { width: 20px; height: 20px; }
.contact-item strong { display: block; color: var(--gold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; margin-bottom: 2px; }
.contact-item span, .contact-item a { color: var(--text-light); font-size: 15px; text-decoration: none; }
.contact-form { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 2.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group.full { grid-column: span 2; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.form-group input, .form-group textarea { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); color: var(--white); font-family: 'Barlow', sans-serif; font-size: 15px; transition: var(--transition); resize: vertical; outline: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--gold); background: rgba(255,255,255,0.09); }
.form-group textarea { min-height: 120px; }
.form-group.error input, .form-group.error textarea { border-color: #f87171; }
.form-error-msg { font-size: 11px; color: #f87171; margin-top: 4px; display: none; }
.form-group.error .form-error-msg { display: block; }

/* Math captcha */
.captcha-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 6px; flex-wrap: wrap; }
.captcha-question {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700;
  color: var(--gold); background: rgba(232,196,34,0.1); border: 1px solid rgba(232,196,34,0.3);
  border-radius: var(--radius); padding: 8px 18px; min-width: 100px; text-align: center;
  white-space: nowrap; letter-spacing: 1px;
}
#captcha-input {
  width: 72px !important; padding: 10px 12px !important;
  text-align: center; font-size: 1.1rem !important;
  -moz-appearance: textfield;
}
#captcha-input::-webkit-outer-spin-button,
#captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.captcha-refresh {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius); padding: 9px 13px;
  color: var(--gray-text); cursor: pointer; font-size: 17px; transition: var(--transition);
  line-height: 1;
}
.captcha-refresh:hover { background: rgba(255,255,255,0.1); color: var(--white); }

.form-submit { width: 100%; padding: 16px; background: var(--gold); border: none; border-radius: var(--radius); font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--navy-dark); text-transform: uppercase; cursor: pointer; margin-top: 0.5rem; transition: var(--transition); }
.form-submit:hover { background: var(--gold-light); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.success-msg { display: none; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); border-radius: var(--radius); padding: 1rem; text-align: center; color: #4ade80; font-size: 14px; margin-top: 1rem; }
.error-msg { display: none; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius); padding: 1rem; text-align: center; color: #f87171; font-size: 14px; margin-top: 1rem; }

/* Map embed */
.map-wrap { margin-top: 2rem; }
.map-wrap iframe { width: 100%; height: 220px; border: 0; border-radius: var(--radius-md); display: block; }
.map-open-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.5rem; color: var(--gold); font-size: 13px; text-decoration: none; transition: color 0.2s; }
.map-open-link:hover { color: var(--gold-light); }

/* ===================== FOOTER ===================== */
footer { background: #070d14; border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem 2rem 2rem; }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.footer-brand p { font-size: 13px; color: #667788; line-height: 1.7; margin: 1rem 0; }
.footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul li a { font-size: 14px; color: #667788; text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--text-light); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: 12px; color: #445566; }

/* Photo credit. Quieter than the copyright line above it — it is a licence
   obligation, so it must be present and readable, but it is not a message to
   the visitor. */
.footer-credits { padding-top: 0.6rem; font-size: 11px; color: #33475a; text-align: center; }
.footer-credits a { color: inherit; text-decoration: none; }
.footer-credits a:hover { color: var(--gold); text-decoration: underline; }

/* ===================== BILINGUAL ===================== */
[data-lang="ar"] { display: none; }
body.lang-ar [data-lang="fr"] { display: none; }
/* Arabic display values are set dynamically by setLang() */
body.lang-ar { direction: rtl; }
body.lang-ar nav, body.lang-ar footer { direction: rtl; }
body.lang-ar .about-badge-float { right: auto; left: -1.5rem; }

/* ===================== BACK TO TOP ===================== */
#back-to-top {
  position: fixed; bottom: 7.5rem; right: 1.5rem; z-index: 900;
  width: 44px; height: 44px;
  background: var(--navy-mid); border: 2px solid var(--gold);
  border-radius: 50%; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: var(--transition);
}
#back-to-top.visible { display: flex; }
#back-to-top:hover { background: var(--gold); color: var(--navy-dark); transform: translateY(-3px); }

/* ===================== WHATSAPP BUTTON ===================== */
#whatsapp-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(37,211,102,0.45);
  text-decoration: none; transition: var(--transition);
}
#whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.6); }

/* ===================== CLIENTS ===================== */
#clients { background: var(--off-white); }

.clients-header { margin-bottom: 3rem; }

/* Stats Section */
.clients-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2.5rem 0 3.5rem; }
.stat-item { text-align: center; }
.stat-value { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 800; color: var(--gold-dark); line-height: 1; margin-bottom: 0.5rem; counter-increment: stat; }
.stat-label { font-size: 13px; color: var(--gray-text); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }

/* Clients Grid - Scrolling Carousel */
.clients-grid {
  display: flex;
  gap: 1.75rem;
  padding: 2rem 0;
  margin-top: 2rem;
  overflow: hidden;
  animation: scrollClients 60s linear infinite;
  width: fit-content;
}

@keyframes scrollClients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.875rem));
  }
}

.clients-grid:hover {
  animation-play-state: paused;
}

/* Client Cards with Professional Styling & Animation */
.client-card {
  background: var(--white);
  border: 1.5px solid var(--concrete-light);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.320, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  will-change: transform;
  min-height: 220px;
  flex-shrink: 0;
  width: 180px;
}

/* Float animation */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.client-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(232,196,34,0.03) 0%, rgba(232,196,34,0.01) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.client-card:hover::before { opacity: 1; }

.client-card:hover {
  filter: drop-shadow(0 16px 48px rgba(26, 46, 68, 0.16));
  border-color: var(--gold-dark);
}

/* Logo Container */
.client-logo {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
  background: rgba(232, 196, 34, 0.03);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26, 46, 68, 0.5) 0%, rgba(42, 64, 96, 0.3) 100%);
}

/* Images with Lazy Loading & Filter Effects */
.client-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
  height: 100%;
  transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  filter: brightness(1);
  transform: scale(1);
}

.client-card:hover .client-img {
  filter: brightness(1.1);
  transform: scale(1.12) rotate(2deg);
}

/* Subtle pulse animation on client card */
.client-card:hover {
  animation: pulse-subtle 0.6s ease-out;
}

@keyframes pulse-subtle {
  0% {
    box-shadow: 0 16px 48px rgba(26, 46, 68, 0.16);
  }
  50% {
    box-shadow: 0 20px 60px rgba(232, 196, 34, 0.12);
  }
  100% {
    box-shadow: 0 16px 48px rgba(26, 46, 68, 0.16);
  }
}

/* Placeholder for Missing Logos */
.logo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.5px;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.logo-fallback .client-img {
  display: none;
}

.logo-fallback .logo-placeholder {
  display: flex;
  color: #e8c422;
}

/* No layout shift for missing images */
.client-logo img {
  display: block;
}

/* ===================== GALLERY ===================== */
#gallery { background: var(--white); }
.gallery-category { margin-bottom: 4rem; }
.category-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 2rem; letter-spacing: 0.5px; position: relative; padding-bottom: 1rem; }
.category-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: var(--gold); }
body.lang-ar .category-title::after { left: auto; right: 0; }

/* ===================== SHOWCASE VIDÉO — POLYSTYRÈNE ===================== */
#showcase { background: var(--navy-dark); color: var(--white); }

.showcase-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
}

.showcase-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.showcase-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sound is off until asked for. A film that starts talking on its own is the
   fastest way to make someone close the tab. */
.showcase-sound {
  position: absolute;
  inset-inline-end: 1rem;          /* logical: flips by itself in RTL */
  bottom: 1rem;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(15, 29, 44, 0.55);
  backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.showcase-sound:hover { background: rgba(15, 29, 44, 0.8); border-color: var(--gold); color: var(--gold); }
.showcase-sound svg { width: 20px; height: 20px; }
/* Muted shows the cross; unmuted shows the waves. */
.showcase-sound .showcase-wave { display: none; }
.showcase-sound[aria-pressed="true"] .showcase-wave { display: inline; }
.showcase-sound[aria-pressed="true"] .showcase-mute { display: none; }

.showcase-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0.75rem 0 1rem;
}
.showcase-desc {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: 1.75rem;
  max-width: 46ch;
}
body.lang-ar .showcase-desc { margin-inline: 0 auto; }

@media (max-width: 900px) {
  .showcase-wrap { grid-template-columns: 1fr; gap: 2rem; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.gallery-card { background: var(--white); border: 1px solid var(--concrete-light); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
.gallery-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(26, 46, 68, 0.15); }

.gallery-image-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; text-align: center; padding: 2rem; position: relative; overflow: hidden; }
.gallery-image-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%); }
.gallery-image-placeholder span { position: relative; z-index: 1; }

.gallery-info { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.gallery-info h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy-dark); margin-bottom: 0.75rem; line-height: 1.3; }

.specs { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--concrete-light); }
.specs span { font-size: 13px; font-weight: 600; color: var(--gold-dark); letter-spacing: 0.5px; }

.specs-detail { font-size: 13px; color: #556677; line-height: 1.6; flex: 1; }

.gallery-footer { margin-top: 3rem; }
.gallery-footer .section-desc { max-width: none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 3rem; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { display: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-stats { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .catalogue-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .clients-stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat-value { font-size: 2.2rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: span 1; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 2.4rem; }
  .about-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .catalogue-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .client-card { width: 150px; }
  .clients-grid { animation: scrollClients 35s linear infinite; }
  .clients-stats { grid-template-columns: 1fr; gap: 0.75rem; margin: 1.5rem 0 2rem; }
  .stat-value { font-size: 2rem; }
  .stat-label { font-size: 11px; }
  .client-logo { width: 100px; height: 100px; }
  .client-card { padding: 1.25rem 1rem; }
  .why-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .section-inner { padding: 3rem 1.25rem; }
  .category-filters { flex-wrap: wrap; }
  .category-title { font-size: 1.25rem; }
  #back-to-top { right: 1rem; bottom: 7rem; }
  #whatsapp-btn { right: 1rem; bottom: 1rem; }
}

/* ===================== ANIMATIONS ===================== */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.5s; }
.stagger.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.6s; }
.stagger.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.7s; }
.stagger.visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.8s; }

.nav-links.open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--navy-dark); padding: 2rem; gap: 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); z-index: 999; }

.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(15,29,44,0.3); border-top-color: var(--navy-dark); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-left: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== ARABIC TYPOGRAPHY — LAST WORD =====================
   `body.lang-ar *` near the top of this file is specificity 0,1,1, so every
   later rule of the SAME weight beat it and kept Barlow Condensed:

       .nav-links a      line 102      the menu
       .footer-col h4    line 501      footer column headings
       .gallery-info h4  line 799      product card headings

   Barlow Condensed contains no Arabic glyphs, so the browser fell back
   silently. Measured before this fix: the menu was drawn in Segoe UI Semibold
   and the footer headings in Segoe UI — the operating system's font, not a
   design choice, and visibly different from the Kufi used everywhere else.

   Rather than chase each selector, the rule is simply restated here at the end
   of the file, where nothing can outrank it by source order.

   Numerals and the wordmark are re-exempted below: figures read better in the
   condensed Latin face and Barlow renders them fine. */
body.lang-ar * { font-family: 'Noto Kufi Arabic', sans-serif; }

body.lang-ar .logo-text strong,
body.lang-ar .service-num,
body.lang-ar .stat-num,
body.lang-ar .about-badge-float strong { font-family: 'Barlow Condensed', sans-serif; }

/* The menu sets tight Latin tracking; Arabic joins its letters, so spacing them
   apart breaks the words up. */
body.lang-ar .nav-links a,
body.lang-ar .footer-col h4,
body.lang-ar .gallery-info h4,
body.lang-ar .btn-devis,
body.lang-ar .btn-download { letter-spacing: 0; }