/* ============================================================================
   Middle East Machinery FZE — site stylesheet
   Multipage build. Visual source of truth: Claude Design "diff color" mockup.
   Self-hosted fonts only (Archivo / Jost / Tajawal). Strict CSP: no inline
   styles, no external hosts. All magic numbers live in the token layer below.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */

:root {
  /* Brand palette */
  --navy-950: #0B1C30;
  --navy-900: #0E2338;
  --navy-800: #0F2C48;
  --navy-700: #123453;
  --navy-600: #17466E;
  --blue: #1C6EA4;          /* white text on this = 5.5:1 */
  --blue-hover: #17578A;    /* darker on hover = 7.6:1 (never lighten) */
  --blue-050: #EAF1F8;
  --amber: #F5A01E;

  --ink: #132436;
  --ink-strong: #0F2C48;
  --muted: #4C5D6E;
  --muted-2: #5A6A7A;
  --line: #D2E0EC;
  --line-field: #CBDAEA;
  /* Рамка .svc-btn--outline — единственная граница кнопки, поэтому это не
     декоративная линия, а UI-компонент: нужен контраст ≥3:1 (WCAG 1.4.11).
     Прежний #C4CCB4 давал на белом 1.66:1, текущий — 3.64:1. */
  --line-neutral: #7F8A6E;
  --field-bg: #FAFBF5;

  --footer-bg: #161911;
  --wa-green: #25D366;
  --wa-green-bright: #4AE58A;
  --wa-green-deep: #128C4B;
  --wa-green-darker: #0E3A24;
  --wa-green-text: #0C6E39; /* button label on tinted white — #128C4B is only 4.0:1, this is ≥4.5:1 incl. hover */
  --error: #B42318; /* form validation — 5.9:1 on white */

  /* Text on dark surfaces (all ≥4.5:1 on navy-950/footer) */
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-2: rgba(255, 255, 255, 0.72);
  --on-dark-3: rgba(255, 255, 255, 0.64);
  --on-dark-faint: rgba(255, 255, 255, 0.6);

  /* Glass surfaces (header pill / lang) — kept opaque enough for contrast */
  --glass: rgba(11, 28, 48, 0.82);
  --glass-border: rgba(255, 255, 255, 0.14);

  /* Typography */
  --font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-display: 'Jost', 'Archivo', system-ui, sans-serif;
  --font-ar: 'Tajawal', system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 34px;
  --space-8: 44px;
  --shell-max: 1280px;
  --shell-pad: 28px;
  --section-y: clamp(64px, 8vw, 100px);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-2xl: 20px;
  --r-3xl: 22px;
  --r-4xl: 26px;
  --r-pill: 999px;

  /* Shadows */
  --sh-card: 0 22px 44px rgba(15, 30, 48, 0.14);
  --sh-card-sm: 0 16px 32px rgba(15, 30, 48, 0.12);
  --sh-lg: 0 30px 60px rgba(15, 30, 48, 0.18);
  --sh-blue: 0 10px 30px rgba(28, 110, 164, 0.45);

  /* Z-index scale */
  --z-header: 100;
  --z-wa: 120;
  --z-nav-panel: 200;
  --z-preloader: 9999;

  /* Focus ring: a deep amber, not brand --amber. Brand amber (#F5A01E) is only
     ~2.1:1 on white and fails WCAG 1.4.11 (3:1) on light sections. This darker
     amber stays ≥3:1 on white, --blue-050 and navy, so one ring works on every
     background (a single outline — box-shadow would be clobbered by component
     shadows at equal specificity). */
  --focus: #B26E12;
  --focus-ring: 3px solid var(--focus);
  --tap: 44px; /* minimum touch target */
}

/* ---------- Reset / base -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The inline SVG icon sprite carries [hidden]; inline SVG ignores the UA
   [hidden] rule and would otherwise render at its default 300x150 box. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body { font-family: var(--font-ar); }

/* height:auto is the other half of max-width:100% — without it the HTML height
   attribute stays a hard pixel value and any image whose CSS width differs from
   that attribute gets squashed. Rules that deliberately crop (.card__media img,
   .story__grid img …) set height:100% at higher specificity and still win. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

h1, h2, h3 { margin: 0; }

button { font-family: inherit; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: calc(var(--z-preloader) + 1);
  transform: translateY(-160%);
  background: var(--navy-800);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* Shared eyebrow (line + uppercase label) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 34px; height: 3px;
  border-radius: 2px;
  background: var(--blue);
  flex: none;
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px; height: 3px;
  border-radius: 2px;
  background: var(--blue);
  flex: none;
}
html[lang="ar"] .eyebrow { letter-spacing: 0; }

/* Section titles scale smoothly like the hero */
.section-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
html[lang="ar"] .section-title { font-weight: 800; letter-spacing: 0; line-height: 1.25; }

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
html[lang="ar"] .btn { text-transform: none; letter-spacing: 0; }

.btn--blue { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn--blue:hover { background: var(--blue-hover); color: #fff; transform: translateY(-3px); }
.btn--blue:active { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(28, 110, 164, 0.4); }

.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.btn--navy:active { transform: translateY(0); }

.btn--outline { border-color: var(--navy-800); color: var(--navy-800); background: transparent; }
.btn--outline:hover { background: var(--navy-800); color: #fff; }
.btn--outline:active { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: transparent; }
.btn--outline-light:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--outline-light:active { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff; background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--ghost:active { background: rgba(255, 255, 255, 0.2); }

/* Trailing directional arrow via pseudo-element — invisible to screen readers,
   auto-mirrored in RTL. Closes the "decorative arrow announced" finding. */
.btn--arrow::after,
.link-more::after {
  content: "\2192"; /* → */
  font-weight: 700;
}
[dir="rtl"] .btn--arrow::after,
[dir="rtl"] .link-more::after { content: "\2190"; } /* ← */

/* ---------- Header -------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
  background: rgba(11, 28, 48, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.site-header__bar {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 12px var(--shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-header__logo { display: flex; align-items: center; flex: none; min-height: var(--tap); }
/* Высота лого задана здесь и в двух брейкпоинтах ниже: логотип шире, чем
   кажется (512×342 ≈ 1.5:1), и на узких экранах он вместе с гамбургером и
   переключателем языка перестаёт помещаться в одну строку. */
.site-header__logo img {
  height: 96px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}

.site-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 7px;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  transition: background .18s ease, color .18s ease;
}
.site-nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav__link.is-active { background: #fff; color: var(--navy-800); }
.site-nav__link.is-active:hover { color: var(--navy-800); }
.site-nav__link.is-active::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--blue);
  flex: none;
}

/* Три языка (EN / FR / عربي) в одной пилюле: текущий — не ссылка, а
   подсвеченный span, остальные два — обычные ссылки. Раньше здесь была одна
   ссылка-тумблер на два языка; с третьим языком тумблер перестал работать. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  flex: none;
}
.lang-switch__cur,
.lang-switch__alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
}
.lang-switch__cur { color: #fff; }
.lang-switch__alt {
  color: rgba(255, 255, 255, 0.55);
  transition: background .18s ease, color .18s ease;
}
/* Видимая пилюля — 36px, чтобы вписаться в 44px-контейнер с отступом 4px.
   Зону нажатия добираем до 44px псевдоэлементом: он перекрывает вертикальный
   padding родителя, не меняя вид. По ширине оставляем как есть — три языка с
   таргетами по 44px не влезают в 320px, а фактические 26–43px уверенно проходят
   минимум 24×24 (WCAG 2.5.8). */
.lang-switch__cur::after,
.lang-switch__alt::after {
  content: "";
  position: absolute;
  inset-block: -4px;
  inset-inline: 0;
}
.lang-switch__alt:hover,
.lang-switch__alt:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lang-switch__sep { opacity: 0.35; }

/* Hamburger — desktop hidden */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap); height: var(--tap);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  color: #fff;
  cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- Preloader (home intro) --------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  overflow: hidden;
  pointer-events: none;
}
html.intro-seen .preloader { display: none; }

.preloader__strips { position: absolute; inset: 0; }
.preloader__strip {
  position: absolute;
  inset-inline: 0;
  height: calc(14.2857% + 1px);
  background: var(--navy-950);
}
.preloader__strip:nth-child(1) { top: 0;        animation: preStripL .82s cubic-bezier(.76,0,.24,1) 1.70s forwards; }
.preloader__strip:nth-child(2) { top: 14.2857%; animation: preStripR .82s cubic-bezier(.76,0,.24,1) 1.77s forwards; }
.preloader__strip:nth-child(3) { top: 28.5714%; animation: preStripL .82s cubic-bezier(.76,0,.24,1) 1.84s forwards; }
.preloader__strip:nth-child(4) { top: 42.8571%; animation: preStripR .82s cubic-bezier(.76,0,.24,1) 1.91s forwards; }
.preloader__strip:nth-child(5) { top: 57.1428%; animation: preStripL .82s cubic-bezier(.76,0,.24,1) 1.98s forwards; }
.preloader__strip:nth-child(6) { top: 71.4285%; animation: preStripR .82s cubic-bezier(.76,0,.24,1) 2.05s forwards; }
.preloader__strip:nth-child(7) { top: 85.7142%; animation: preStripL .82s cubic-bezier(.76,0,.24,1) 2.12s forwards; }

.preloader__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preFade 2.7s ease forwards;
}
.preloader__stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.preloader__mark { position: relative; width: 300px; height: 210px; display: flex; align-items: center; justify-content: center; }
.preloader__sun {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(245,160,30,0.5), rgba(28,110,164,0.12) 46%, transparent 70%);
  animation: preSun 2.2s ease-out both;
}
.preloader__logo { position: relative; height: 170px; width: auto; animation: preLogoIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
.preloader__bar { width: 190px; height: 2px; background: rgba(255,255,255,0.16); overflow: hidden; border-radius: 2px; }
.preloader__bar span { display: block; height: 100%; background: var(--amber); transform-origin: left; animation: preLine 1.5s cubic-bezier(.2,.7,.2,1) .45s both; }
[dir="rtl"] .preloader__bar span { transform-origin: right; }

/* ---------- Hero (home) --------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* The copy is centred vertically: pinned to the top it left twice as much
     air below as above on a tall window — measured 160px against 303px at
     1440x1080. `safe center` so that on a short window, where the copy is
     taller than the viewport, alignment falls back to the start instead of
     clipping the top (.hero is overflow: hidden). */
  align-items: center;
  align-items: safe center;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(1.02) contrast(0.95);
  animation: heroPan 22s ease-in-out infinite alternate;
}
/* Scrims: dense enough under the copy for ≥4.5:1 on white text without a shadow. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 28, 48, 0.42) 0%,
    rgba(11, 28, 48, 0.3) 22%,
    rgba(15, 44, 72, 0.4) 46%,
    rgba(15, 44, 72, 0.62) 74%,
    rgba(11, 28, 48, 0.86) 100%);
}
.hero__scrim--side {
  background: linear-gradient(90deg, rgba(14, 35, 56, 0.72) 0%, rgba(14, 35, 56, 0.34) 42%, transparent 68%);
}
[dir="rtl"] .hero__scrim--side {
  background: linear-gradient(-90deg, rgba(14, 35, 56, 0.72) 0%, rgba(14, 35, 56, 0.34) 42%, transparent 68%);
}
.hero__glow { position: absolute; inset: -12%; mix-blend-mode: screen; pointer-events: none; }
.hero__glow--a { background: radial-gradient(44% 44% at 74% 32%, rgba(205,222,240,0.3), transparent 70%); animation: heroDrift 15s ease-in-out infinite alternate; }
.hero__glow--b { background: radial-gradient(40% 40% at 88% 62%, rgba(120,160,205,0.28), transparent 72%); animation: heroDrift 21s ease-in-out infinite alternate-reverse; }
[dir="rtl"] .hero__glow--a { background: radial-gradient(44% 44% at 26% 32%, rgba(205,222,240,0.3), transparent 70%); }
[dir="rtl"] .hero__glow--b { background: radial-gradient(40% 40% at 12% 62%, rgba(120,160,205,0.28), transparent 72%); }

.hero__body {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  /* Top exceeds bottom by roughly the fixed header: under centring that lands
     the copy on the optical centre rather than under the header. */
  padding: 110px 40px 70px;
}
.hero__copy { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.12;
  font-weight: 500; /* raised from the 300 mockup weight for legibility */
  color: #fff;
  text-shadow: 0 2px 22px rgba(6, 18, 32, 0.5);
  animation: heroIn .9s .16s both;
}
html[lang="ar"] .hero__title { font-family: var(--font-ar); font-weight: 700; line-height: 1.35; }
.hero__lede {
  margin: 0;
  /* 620px, not the original 460px: the lede is now the 40-70 word answer block
     the page leads with, and at 460px it ran to eight lines. */
  max-width: 620px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(6, 18, 32, 0.5);
  animation: heroIn .9s .3s both;
}
html[lang="ar"] .hero__lede { font-family: var(--font-ar); font-weight: 500; line-height: 1.7; }
/* Laptop-height screens. The hero now opens with the answer block instead of a
   one-line slogan, and on a 1280x720 window that pushed "Send a request" below
   the fold — measured at 766px against a 720px viewport on the Arabic home,
   which wraps to more lines than the English one. The headline gives up one
   step of size here rather than the copy giving up words. */
@media (max-height: 780px) {
  .hero__body { padding-block: 92px 56px; }
  .hero__copy { gap: 24px; }
  .hero__title { font-size: clamp(34px, 3.9vw, 52px); }
}
/* Phones, same reason: the answer block wraps to eleven lines at 375px and had
   pushed the CTA 68px past the fold. */
@media (max-width: 620px) {
  .hero__body { padding-block: 88px 56px; }
  .hero__copy { gap: 20px; }
  .hero__title { font-size: clamp(30px, 8.6vw, 36px); }
  .hero__lede { font-size: 17px; }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--tap);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  padding: 9px 9px 9px 34px;
  border-radius: var(--r-pill);
  transition: background .18s ease, transform .18s ease;
  animation: heroIn .9s .44s both;
}
html[lang="ar"] .hero__cta { font-family: var(--font-ar); padding: 9px 34px 9px 9px; }
.hero__cta:hover { background: var(--blue-hover); color: #fff; transform: translateY(-2px); }
.hero__cta:active { background: var(--blue-hover); transform: translateY(0); }
.hero__cta-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.hero__cta-icon svg { stroke: var(--ink-strong); }
[dir="rtl"] .hero__cta-icon svg { transform: scaleX(-1); }

/* ---------- Stats --------------------------------------------------------- */

.stats { position: relative; overflow: hidden; background: var(--navy-950); }
.stats__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.stats__glow {
  position: absolute; top: -140px; inset-inline-end: -100px;
  width: 420px; height: 420px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(28, 110, 164, 0.22), transparent 70%);
}
.stats__grid {
  position: relative;
  padding-block: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat { padding-inline: 32px; border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.stat__value {
  margin: 0;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .stat__value { font-weight: 800; }
.stat__suffix { color: var(--amber); }
.stat__label { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--on-dark-faint); }

/* ---------- Services (home) ---------------------------------------------- */

.services { background: var(--blue-050); }
.services .shell { padding-block: var(--section-y); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.section-head .section-title { max-width: 560px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-card); color: inherit; }
.card:active { transform: translateY(-2px); }
.card__media { height: 190px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 24px 24px 26px; }
.card__body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ink-strong); }
.card__body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted-2); }
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--blue);
}

/* ---------- About teaser (home) ------------------------------------------ */

.about { background: #fff; }
.about .shell {
  padding-block: var(--section-y);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.about__figure { position: relative; margin: 0; }
.about__figure img { width: 100%; border-radius: var(--r-2xl); box-shadow: var(--sh-lg); }
.about__badge {
  position: absolute;
  bottom: -26px; inset-inline-end: -18px;
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 20px 26px;
  box-shadow: 0 18px 40px rgba(15, 30, 48, 0.35);
}
.about__badge b { display: block; font-size: 30px; font-weight: 900; color: var(--amber); }
.about__badge span { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.about__title { margin: 0 0 20px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; color: var(--ink-strong); }
html[lang="ar"] .about__title { font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.about__text { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.about__text:last-of-type { margin-bottom: 28px; }

/* ---------- Brands (home marquee) ---------------------------------------- */

.brands { background: var(--navy-950); overflow: hidden; }
.brands__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: 90px 30px;
}
.brands__title { margin: 0; max-width: 600px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
html[lang="ar"] .brands__title { font-weight: 800; letter-spacing: 0; line-height: 1.3; }

.marquees { padding-block: 30px 40px; display: flex; flex-direction: column; gap: var(--space-4); }
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: var(--space-4); flex: none; padding-inline-end: var(--space-4); }
.marquee.is-looping .marquee__track { animation: marqueeL 42s linear infinite; }
.marquee.is-looping .marquee__track--reverse { animation: marqueeR 42s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.brand-tile {
  flex: none;
  width: 180px; height: 84px;
  background: #fff;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.brand-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- FAQ ----------------------------------------------------------- */

.faq { background: #fff; }
.faq .shell { max-width: 880px; padding-block: var(--section-y); }
.faq__head { text-align: center; margin-bottom: var(--space-8); }
.faq__title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.02em; color: var(--ink-strong); }
html[lang="ar"] .faq__title { font-weight: 800; letter-spacing: 0; }
.faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { background: var(--blue-050); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; line-height: 1;
  transition: transform .2s ease;
}
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__item p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- CTA band ------------------------------------------------------ */

.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-700) 60%, var(--navy-600) 100%);
}
.cta__glow {
  position: absolute; top: -120px; inset-inline-end: -80px;
  width: 420px; height: 420px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(28, 110, 164, 0.35), transparent 70%);
}
.cta .shell {
  position: relative;
  padding-block: var(--section-y);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta__copy { max-width: 640px; }
.cta__copy h2 { margin: 0 0 14px; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
html[lang="ar"] .cta__copy h2 { font-weight: 800; letter-spacing: 0; line-height: 1.25; }
.cta__copy p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--on-dark-2); }
.cta__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Page hero (inner pages) -------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-700) 70%, var(--navy-600) 100%);
}
.page-hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.page-hero__glow {
  position: absolute; top: -140px; inset-inline-end: -100px;
  width: 480px; height: 480px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(28, 110, 164, 0.3), transparent 70%);
}
.page-hero .shell { position: relative; padding: 170px 28px 90px; }
.page-hero .eyebrow { color: var(--amber); animation: heroIn .8s .05s both; }
.page-hero__title {
  margin: 0 0 18px;
  max-width: 860px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  animation: heroIn .85s .16s both;
}
html[lang="ar"] .page-hero__title { font-weight: 800; letter-spacing: 0; line-height: 1.25; }
.page-hero__lead {
  margin: 0;
  max-width: 700px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--on-dark);
  animation: heroIn .85s .3s both;
}

/* ---------- Products: service cards -------------------------------------- */

.svc-section { background: var(--blue-050); }
.svc-section .shell { padding-block: 80px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  scroll-margin-top: 96px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(15, 30, 48, 0.13); }
.svc-card__media { position: relative; height: 230px; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* CSP-safe placeholder for services without a self-hosted photo */
.svc-card__ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.svc-card__ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.svc-card__ph svg { position: relative; width: 62px; height: 62px; stroke: var(--amber); opacity: 0.9; }
.svc-card__tag {
  position: absolute;
  top: 16px; inset-inline-start: 16px;
  background: rgba(7, 26, 51, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
html[lang="ar"] .svc-card__tag { letter-spacing: 0; }
.svc-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.svc-card__body h2 { margin: 0; font-size: 23px; font-weight: 800; color: var(--ink-strong); }
.svc-card__body p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); flex: 1; }
.svc-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 6px; }
.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 800;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.svc-btn--solid { background: var(--navy-800); color: #fff; }
.svc-btn--solid:hover { background: var(--blue); color: #fff; }
.svc-btn--solid:active { background: var(--blue-hover); }
.svc-btn--outline { border: 1.5px solid var(--line-neutral); color: var(--navy-800); font-weight: 700; }
.svc-btn--outline:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Products: how we work ---------------------------------------- */

.how { background: #fff; }
.how .shell { padding-block: var(--section-y); }
.how__head { text-align: center; margin-bottom: 52px; }
.how__head .eyebrow { justify-content: center; }
.how__title { margin: 0; font-size: clamp(30px, 3.6vw, 42px); font-weight: 900; letter-spacing: -0.02em; color: var(--ink-strong); }
html[lang="ar"] .how__title { font-weight: 800; letter-spacing: 0; }
.how__rail { position: relative; }
.how__line {
  position: absolute;
  top: 29px;
  inset-inline: 30px;
  height: 2px;
  background-image: linear-gradient(90deg, rgba(28, 110, 164, 0.75) 55%, transparent 55%);
  background-size: 18px 2px;
  background-repeat: repeat-x;
  animation: dashFlow .9s linear infinite;
}
.how__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.how__step { display: flex; flex-direction: column; align-items: flex-start; }
.how__num-wrap { position: relative; width: 60px; height: 60px; margin-bottom: 20px; }
.how__num-ping {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: rgba(28, 110, 164, 0.45);
  animation: ping 2.4s ease-out infinite;
}
.how__num {
  position: relative;
  width: 60px; height: 60px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue), var(--amber));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900;
  box-shadow: 0 10px 24px rgba(28, 110, 164, 0.4);
  border: 4px solid #fff;
}
.how__card {
  background: var(--blue-050);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  width: 100%;
  flex: 1;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.how__card:hover { transform: translateY(-4px); border-color: rgba(28, 110, 164, 0.5); box-shadow: var(--sh-card-sm); }
.how__card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.how__card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted-2); }

/* ---------- About page: story / values / offices ------------------------ */

.story { background: #fff; }
.story .shell {
  padding-block: var(--section-y);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 5vw, 60px);
  align-items: center;
}
.story__body p { margin: 0 0 16px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.story__body p:last-child { margin-bottom: 0; }
.story__title { margin: 0 0 20px; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; color: var(--ink-strong); }
html[lang="ar"] .story__title { font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.story__grid > img:first-child { grid-column: 1 / -1; height: 260px; }
.story__cell { height: 220px; border-radius: var(--r-2xl); overflow: hidden; background: var(--blue-050); }
.story__grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-2xl); }
.story__cell img { border-radius: 0; }
/* Placeholder tile for the story grid slots without a photo */
.story__ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--on-dark-2);
  text-align: center;
  padding: 16px;
}
.story__ph svg { width: 34px; height: 34px; stroke: var(--amber); }
.story__ph span { font-size: 12.5px; font-weight: 700; }

.values { position: relative; overflow: hidden; background: var(--navy-950); }
.values__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.values__glow {
  position: absolute; top: -160px; inset-inline-start: -120px;
  width: 520px; height: 520px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(28, 110, 164, 0.22), transparent 70%);
}
.values .shell { position: relative; padding-block: var(--section-y); }
.values__head { text-align: center; margin-bottom: 52px; }
.values__head .eyebrow { justify-content: center; color: var(--amber); }
.values__head .eyebrow::before, .values__head .eyebrow::after { background: var(--blue); }
.values__title { margin: 0; font-size: clamp(30px, 3.6vw, 42px); font-weight: 900; letter-spacing: -0.02em; color: #fff; }
html[lang="ar"] .values__title { font-weight: 800; letter-spacing: 0; }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.value {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-3xl);
  padding: 38px 32px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.value:hover { transform: translateY(-6px); border-color: rgba(28, 110, 164, 0.65); background: rgba(255, 255, 255, 0.08); }
.value__ghost {
  position: absolute; top: -30px; inset-inline-end: 4px;
  font-size: 150px; line-height: 1; font-weight: 900;
  color: rgba(255, 255, 255, 0.07);
  font-family: var(--font-sans);
  pointer-events: none;
}
.value__icon {
  position: relative;
  width: 58px; height: 58px;
  border-radius: var(--r-lg);
  background: rgba(28, 110, 164, 0.14);
  border: 1px solid rgba(28, 110, 164, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.value__icon svg { width: 26px; height: 26px; stroke: var(--amber); }
.value h3 { position: relative; margin: 22px 0 10px; font-size: 21px; font-weight: 800; color: #fff; }
.value p { position: relative; margin: 0; font-size: 15px; line-height: 1.75; color: var(--on-dark-3); }

.offices { background: #fff; }
.offices .shell { padding-block: var(--section-y); }
.offices__head { margin-bottom: var(--space-8); }
.office-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-700));
  border-radius: var(--r-4xl);
  color: #fff;
}
.office-card__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.office-card__glow {
  position: absolute; top: -140px; inset-inline-end: -100px;
  width: 460px; height: 460px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(28, 110, 164, 0.28), transparent 70%);
}
.office-card__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.office { padding: 52px 48px; }
.office:first-child { border-inline-end: 1px solid rgba(255, 255, 255, 0.1); }
.office__pin { display: flex; align-items: center; gap: var(--space-3); }
.office__dot { position: relative; width: 16px; height: 16px; display: inline-flex; flex: none; }
.office__dot span:first-child {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: rgba(28, 110, 164, 0.55);
  animation: ping 2.2s ease-out infinite;
}
.office__dot span:last-child {
  position: relative;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--blue);
  box-shadow: 0 0 14px rgba(28, 110, 164, 0.9);
}
.office__kind { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
html[lang="ar"] .office__kind { letter-spacing: 0; }
.office__city { margin: 18px 0 6px; font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: -0.01em; }
.office__coords { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }
.office__addr { margin: 16px 0 0; font-size: 15px; line-height: 1.8; color: var(--on-dark-2); }
.office-card__strip {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 48px;
  display: flex; align-items: center; gap: 22px;
}
.office-card__strip span:first-child { flex: none; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.office-card__dash {
  flex: 1; height: 2px;
  background-image: linear-gradient(90deg, rgba(28, 110, 164, 0.85) 55%, transparent 55%);
  background-size: 18px 2px;
  background-repeat: repeat-x;
  animation: dashFlow .9s linear infinite;
}
.office-card__strip svg { flex: none; width: 22px; height: 22px; stroke: var(--amber); }

/* ---------- Brands page --------------------------------------------------- */

.brand-groups { background: var(--blue-050); }
.brand-groups .shell { padding-block: 80px 100px; display: flex; flex-direction: column; gap: 64px; }
.brand-group__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: 8px; }
.brand-group__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.01em; color: var(--ink-strong); }
html[lang="ar"] .brand-group__head h2 { font-weight: 800; letter-spacing: 0; }
.brand-group__count { font-size: 14px; font-weight: 700; color: var(--blue); }
.brand-group__desc { margin: 0 0 26px; max-width: 720px; font-size: 15px; line-height: 1.7; color: var(--muted-2); }
.brand-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.brand-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Top padding clears the WhatsApp button in the corner: the button ends at
     8px inset + 30px = 38px, so content starts below that at any viewport
     width. At the old 18px, logos ran under the button on narrow screens. */
  padding: 40px 14px 18px;
  color: inherit;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-cell:hover { transform: translateY(-4px); box-shadow: var(--sh-card-sm); border-color: var(--blue); color: inherit; }
.brand-cell:active { transform: translateY(-1px); }
/* The tile used to be a single <a> pointing at WhatsApp, so the whole brands
   page emitted 48 outbound links and no inbound ones. It now carries two:
   the body goes to the matching section of the products page, the corner
   button keeps the WhatsApp request. Anchors cannot nest, so the cell became a
   container and the body link inherited its old flex layout. */
.brand-cell__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  color: inherit;
}
.brand-cell__wa {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-050);
  transition: background .2s ease;
}
.brand-cell__wa svg { width: 16px; height: 16px; fill: var(--wa-green-bright); }
.brand-cell__wa:hover { background: var(--wa-green-bright); }
.brand-cell__wa:hover svg { fill: #fff; }
/* Logos vary wildly in aspect (132×28 for Festo, 168×168 for Cummins), so the
   cap is on height and the width follows — every logo reads at the same optical
   weight without any of them being stretched. alt="" is deliberate: the brand
   name sits right below as real text, so a description here would make screen
   readers announce the same brand twice. */
.brand-cell__logo { max-width: 100%; max-height: 40px; width: auto; object-fit: contain; }
.brand-cell__name { font-size: 15px; font-weight: 800; color: var(--ink-strong); line-height: 1.2; }

/* ---------- Contact page -------------------------------------------------- */

.contact-section { background: var(--blue-050); }
.contact-section .shell {
  padding-block: 80px 100px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  padding: clamp(28px, 4vw, 42px);
  box-shadow: 0 24px 50px rgba(15, 30, 48, 0.08);
}
.contact-form-card h2 { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 28px); font-weight: 900; letter-spacing: -0.01em; color: var(--ink-strong); }
html[lang="ar"] .contact-form-card h2 { font-weight: 800; letter-spacing: 0; }
.contact-form-card__lead { margin: 0 0 28px; font-size: 15px; line-height: 1.65; color: var(--muted-2); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line-field);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--field-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 110, 164, 0.18);
}
/* Keyboard focus keeps the site-wide amber outline (text inputs also match
   :focus-visible on pointer focus) instead of the near-invisible blue glow. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
/* On-brand invalid state. :user-invalid flags a field only after the user has
   interacted with it (or on submit), so empty required fields don't turn red on
   first paint the way :invalid would. */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid,
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16);
}
/* Текст ошибки под полем — создаётся в site.js из el.validationMessage и
   связывается с полем через aria-describedby. Нативный балун показывается
   параллельно, но исчезает; этот текст остаётся. */
.field__error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--error);
}
/* Без явного цвета плейсхолдер берёт UA-дефолт, который на очень светлом
   --field-bg местами не добирает 4.5:1. --muted-2 даёт ≈5.3:1. */
.field input::placeholder, .field textarea::placeholder {
  color: var(--muted-2);
  opacity: 1;
}
.contact-form__req { grid-column: 1 / -1; margin: 0 0 -4px; font-size: 12.5px; color: var(--muted-2); }
.contact-form__req span { color: var(--error); font-weight: 700; }
.contact-form__status:not(:empty) {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(28, 110, 164, 0.08);
  border: 1px solid rgba(28, 110, 164, 0.2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-hover);
}
.contact-form__actions { grid-column: 1 / -1; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: 4px; }
.contact-form__note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.contact-form__consent { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.contact-form__consent a { color: var(--blue); text-decoration: underline; }
.contact-form__consent a:hover { color: var(--blue-hover); }

/* Видно только при выключенном JS — тогда же обе кнопки формы остаются
   disabled, и это сообщение объясняет, куда идти вместо них. */
.contact-form__noscript {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-field);
  border-radius: var(--r-md);
  background: var(--blue-050);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
/* Кнопки формы приезжают из разметки выключенными и включаются в site.js. */
.btn[disabled], .btn-wa-outline[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.btn[disabled]:hover, .btn-wa-outline[disabled]:hover { transform: none; }
.btn-wa-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  background: rgba(37, 211, 102, 0.1);
  border: 1.5px solid rgba(37, 211, 102, 0.55);
  color: var(--wa-green-text);
  font-size: 14.5px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .18s ease;
}
.btn-wa-outline:hover { background: rgba(37, 211, 102, 0.2); color: var(--wa-green-text); }
.btn-wa-outline svg { width: 17px; height: 17px; fill: var(--wa-green); }

.contact-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-card { display: block; border-radius: var(--r-2xl); padding: 28px 30px; transition: transform .2s ease, box-shadow .2s ease; }
.contact-card--wa { background: linear-gradient(135deg, var(--wa-green-darker), var(--wa-green-deep)); color: #fff; }
.contact-card--wa:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(18, 140, 75, 0.35); color: #fff; }
.contact-card--email { background: #fff; border: 1px solid var(--line); color: inherit; }
.contact-card--email:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(15, 30, 48, 0.12); color: inherit; }
.contact-card__row { display: flex; align-items: center; gap: var(--space-3); }
.contact-card__ic {
  flex: none;
  width: 50px; height: 50px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.contact-card__ic svg { width: 26px; height: 26px; fill: var(--wa-green-bright); }
.contact-card__kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
html[lang="ar"] .contact-card__kicker { letter-spacing: 0; }
.contact-card--wa .contact-card__kicker { color: rgba(255, 255, 255, 0.65); }
.contact-card--email .contact-card__kicker { color: var(--blue); }
.contact-card__big { font-size: 20px; font-weight: 800; margin-top: 2px; }
.contact-card--email .contact-card__big { font-size: 18px; color: var(--ink-strong); margin-top: 6px; }
.contact-card__text { margin: 16px 0 0; font-size: 14px; line-height: 1.65; }
.contact-card--wa .contact-card__text { color: rgba(255, 255, 255, 0.75); }
.contact-card--email .contact-card__text { color: var(--muted-2); }
.contact-offices { background: var(--navy-800); border-radius: var(--r-2xl); padding: 28px 30px; color: #fff; }
.contact-offices__kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
html[lang="ar"] .contact-offices__kicker { letter-spacing: 0; }
.contact-offices__list { margin-top: 14px; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-offices__item + .contact-offices__item { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; }
.contact-offices__item b { display: block; font-size: 16px; font-weight: 800; }
.contact-offices__item p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--on-dark-3); }

/* ---------- 404 ----------------------------------------------------------- */

.notfound {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-700) 70%, var(--navy-600) 100%);
  position: relative;
  overflow: hidden;
}
.notfound__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.notfound__inner { position: relative; padding: 120px 28px; max-width: 620px; }
.notfound__code { font-size: clamp(90px, 18vw, 160px); font-weight: 900; line-height: 1; color: #fff; letter-spacing: -0.03em; }
.notfound__code span { color: var(--amber); }
.notfound__title { margin: 8px 0 14px; font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: #fff; }
html[lang="ar"] .notfound__title { font-weight: 800; }
.notfound__text { margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: var(--on-dark); }
.notfound__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* ---------- Footer -------------------------------------------------------- */

.site-footer { background: var(--footer-bg); color: var(--on-dark); font-family: var(--font-sans); }
html[lang="ar"] .site-footer { font-family: var(--font-ar); }
.site-footer__grid {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 76px var(--shell-pad) 0;
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 52px);
}
.site-footer__logo-link { display: inline-block; border-radius: 6px; }
.site-footer__logo { height: 58px; width: auto; }
.site-footer__blurb { margin: 20px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--on-dark-3); max-width: 330px; }
.site-footer__wa {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: var(--wa-green-bright);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  transition: background .18s ease;
}
.site-footer__wa:hover { background: rgba(37, 211, 102, 0.22); color: var(--wa-green-bright); }
.site-footer__wa svg { width: 16px; height: 16px; fill: currentColor; }
.site-footer__col h3 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
html[lang="ar"] .site-footer__col h3 { letter-spacing: 0; }
.site-footer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 5px 0;
  color: var(--on-dark-3);
  font-size: 14.5px;
}
.site-footer__link:hover { color: var(--amber); }
.site-footer address { font-style: normal; }
.site-footer__contact {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 4px 0;
}
.site-footer__contact:hover { color: var(--amber); }
.site-footer__office { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--on-dark-faint); }
.site-footer__bar {
  max-width: var(--shell-max);
  margin: 56px auto 0;
  padding: 22px var(--shell-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.site-footer__bar p { margin: 0; font-size: 13px; color: var(--on-dark-faint); }
.site-footer__legal { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__legal a { font-size: 13px; color: var(--on-dark-faint); }
.site-footer__legal a:hover { color: var(--amber); }

/* Legal pages (privacy, terms) — readable prose column */
.legal { padding-block: clamp(48px, 6vw, 80px); }
.legal__body { max-width: 760px; }
.legal__updated { margin: 0 0 36px; font-size: 13.5px; color: var(--muted-2); }
.legal__body h2 { margin: 40px 0 12px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.01em; color: var(--ink-strong); }
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.legal__body p, .legal__body li { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.legal__body p { margin: 0 0 14px; }
.legal__body ul, .legal__body ol { margin: 0 0 16px; padding-inline-start: 22px; }
.legal__body li { margin: 0 0 6px; }
.legal__body a { color: var(--blue); text-decoration: underline; }
.legal__body a:hover { color: var(--blue-hover); }
.legal__body strong { color: var(--ink-strong); }
.legal__note { margin-top: 40px; padding: 16px 20px; border-radius: var(--r-md); background: var(--blue-050); font-size: 14px; line-height: 1.7; color: var(--muted); }

/* Floating WhatsApp */
.wa-float {
  position: fixed;
  bottom: 26px; inset-inline-end: 26px;
  z-index: var(--z-wa);
  width: 58px; height: 58px;
  border-radius: var(--r-pill);
  background: var(--wa-green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
  transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.1); }
.wa-float:active { transform: scale(1.02); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Scroll reveal ------------------------------------------------- */

[data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-pending { opacity: 0; transform: translateY(26px); }
[data-reveal="90"].is-pending, [data-reveal="80"].is-pending { transition-delay: .09s; }
[data-reveal="120"].is-pending, [data-reveal="110"].is-pending { transition-delay: .12s; }
[data-reveal="140"].is-pending, [data-reveal="160"].is-pending { transition-delay: .16s; }
[data-reveal="180"].is-pending { transition-delay: .18s; }
[data-reveal="220"].is-pending, [data-reveal="240"].is-pending { transition-delay: .22s; }
[data-reveal="270"].is-pending { transition-delay: .27s; }

/* ---------- Keyframes ----------------------------------------------------- */

@keyframes heroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes heroPan { 0% { transform: scale(1.05) translate(0, 0); } 100% { transform: scale(1.13) translate(-2.5%, -1.8%); } }
@keyframes heroDrift { 0% { transform: translate3d(-7%, -4%, 0) scale(1); } 100% { transform: translate3d(8%, 5%, 0) scale(1.18); } }
@keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes dashFlow { to { background-position: 18px 0; } }
@keyframes preLogoIn { 0% { opacity: 0; transform: scale(.78); filter: blur(12px); } 58% { opacity: 1; transform: scale(1.03); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes preSun { 0% { opacity: 0; transform: scale(.45) translateY(46px); } 50% { opacity: .95; } 100% { opacity: .6; transform: scale(1.06) translateY(0); } }
@keyframes preLine { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes preFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes preStripL { 0% { transform: translateX(0); } 100% { transform: translateX(-104%); } }
@keyframes preStripR { 0% { transform: translateX(0); } 100% { transform: translateX(104%); } }

/* RTL strips reverse direction */
[dir="rtl"] .preloader__strip:nth-child(odd) { animation-name: preStripR; }
[dir="rtl"] .preloader__strip:nth-child(even) { animation-name: preStripL; }

/* ---------- Reduced motion ------------------------------------------------ */

/* Кнопки паузы движения на сайте больше нет (убрана по просьбе клиента), так
   что единственный способ остановить бесконечные анимации — системное
   «Уменьшение движения». Марка брендов дополнительно замирает на
   :hover/:focus-within. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__img { animation: none; transform: none; }
  .marquee__track { animation: none !important; }
  [data-reveal].is-pending { opacity: 1; transform: none; }
  .preloader { display: none; }
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .how__steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .how__line { display: none; }
  .values__grid { grid-template-columns: 1fr; }
  .brand-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header__bar { position: relative; }
  .site-header__logo img { height: 76px; }
  .site-nav {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: var(--shell-pad);
    z-index: var(--z-nav-panel);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    background: rgba(11, 28, 48, 0.96);
    border-radius: var(--r-lg);
    min-width: 220px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: none;
  }
  .site-nav[data-open] { display: flex; }
  .site-nav__link { min-height: var(--tap); justify-content: flex-start; }
  .about .shell { grid-template-columns: 1fr; }
  .about__figure { margin-bottom: 26px; }
  .about__badge { inset-inline-end: 16px; }
  .story .shell { grid-template-columns: 1fr; }
  .contact-section .shell { grid-template-columns: 1fr; }
  .office-card__grid { grid-template-columns: 1fr; }
  .office:first-child { border-inline-end: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .brands__head { padding-block: 80px 24px; }
}

@media (max-width: 720px) {
  :root { --shell-pad: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .brand-list { grid-template-columns: repeat(3, 1fr); }
  .contact-form { grid-template-columns: 1fr; }
  .section-head, .brands__head { align-items: flex-start; }
  .page-hero .shell { padding-top: 130px; }
  .hero__body { padding-inline: 24px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__col--brand { grid-column: 1 / -1; }
  .cta .shell { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  .site-header__logo img { height: 60px; }
  /* Плавающая кнопка WhatsApp (fixed) наезжала на главный CTA в hero: на 360px
     пересечение 6×31px, на 320px — 46×58px, и клик по правому краю CTA попадал
     в WhatsApp вместо формы. Поднять hero отступом снизу нельзя — он выше
     вьюпорта, отступ только удлинял секцию. Подгонять ширину CTA под текст
     тоже нельзя: французское «Envoyer une demande» на 25% длиннее английского.
     Поэтому убираем декоративную стрелку (она aria-hidden, смысла не несёт) —
     это снимает ~66px в любом языке — и ужимаем саму плавающую кнопку до
     50+16=66px от края вместо 58+26=84px. */
  .hero__cta-icon { display: none; }
  .hero__cta { gap: 0; padding: 14px 26px; font-size: 17px; }
  html[lang="ar"] .hero__cta { padding: 14px 26px; }
  .wa-float { width: 50px; height: 50px; bottom: 16px; inset-inline-end: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
  /* Лого + гамбургер + три языка не помещаются в 375px при обычных отступах —
     поджимаем зазор в баре и внутренние отступы переключателя. */
  .site-header__bar { gap: var(--space-2); }
  .lang-switch { padding-inline: 4px; }
  .lang-switch__cur, .lang-switch__alt { padding-inline: 6px; }
  /* Две колонки по ~148px здесь уже тесные, а во французской версии длинные
     слова («disponibilité,», «l’expédition») задают min-content шире колонки и
     распирают сетку за пределы экрана. Одна колонка снимает и то, и другое. */
  .how__steps { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .brand-list { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; }
}