/*
 * EMMA Internazionale — Website Brand System
 * Authoritative digital translation of EMMA-WEBSITE-BRAND-REFERENCE.md.
 * Loaded last so every route shares one palette, type hierarchy and UI grammar.
 */

:root {
  --color-brand-red: #e80505;
  --color-brand-black: #151719;
  --color-brand-gray: #414042;
  --color-brand-white: #ffffff;

  --emma-red: var(--color-brand-red);
  --emma-red-dark: #b80404;
  --emma-black: var(--color-brand-black);
  --emma-ink: var(--color-brand-black);
  --emma-gray: var(--color-brand-gray);
  --emma-paper: var(--color-brand-white);
  --emma-white: var(--color-brand-white);
  --emma-white-dim: rgba(255, 255, 255, .68);
  --emma-muted: rgba(255, 255, 255, .58);
  --emma-gold: var(--color-brand-gray);

  --font-primary: "Montserrat", Arial, sans-serif;
  --font-secondary: "Almarai", Arial, sans-serif;
  --font-arabic: "Almarai", Arial, sans-serif;
  --font-display: var(--font-primary);
  --font-body: var(--font-secondary);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  --brand-border-dark: rgba(21, 23, 25, .16);
  --brand-border-light: rgba(255, 255, 255, .16);
  --brand-focus: 0 0 0 3px rgba(232, 5, 5, .28);
  --brand-panel-radius: 48px;
  --brand-card-radius: 4px;
}

html {
  color-scheme: light;
  font-family: var(--font-primary);
}

body {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  line-height: 1.55;
}

html[lang="ar"],
html[dir="rtl"],
[lang="ar"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
  font-family: var(--font-arabic);
}

html[lang="ar"] *,
html[dir="rtl"] * {
  font-family: var(--font-arabic);
}

/* Display typography: bold, upright, and consistently Montserrat Black. */
:is(
  .hero-title,
  .fp-stand-title,
  .section-heading,
  .home-story-title,
  .home-about-title,
  .home-partner-title,
  .home-dual-link h2,
  .bp-hero h1,
  .bp-title,
  .bp-quote,
  .bp-cta h2,
  .page-hero-heading,
  .detail-hero-heading
) {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .03em;
}

em,
i {
  font-style: normal;
}

.bp-hero h1 {
  font-size: clamp(3.2rem, 7.5vw, 7rem);
  line-height: .9;
}

.bp-hero h1 em,
.fp-stand-title em,
.home-about-title em {
  font-style: inherit;
}

.bp-title {
  font-size: clamp(2.5rem, 5.4vw, 5.25rem);
  line-height: .96;
}

.fp-stand-title {
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: .94;
}

:is(p, li, input, textarea, select) {
  font-family: var(--font-body);
}

:is(
  .nav-link,
  .nav-cta,
  .bp-nav-center a,
  .bp-nav-label,
  .page-nav-link,
  .section-badge,
  .bp-eyebrow,
  .bp-kicker,
  .ticker-track,
  button
) {
  font-family: var(--font-display);
}

/* Official palette and restrained screen gradients. */
body.brand-page {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.bp-section--ink,
#about-emma,
#why-emma,
#performance {
  background-color: var(--color-brand-black);
}

.bp-section--paper,
#stories,
#featured-products,
.products-page-body,
.detail-page-body {
  background-color: var(--color-brand-white);
  color: var(--color-brand-black);
}

.bp-section--red,
.bp-cta,
#partners {
  background: var(--color-brand-red);
  color: var(--color-brand-white);
}

#partners.home-built-section {
  background: var(--color-brand-white);
  color: var(--color-brand-black);
}

.bp-hero {
  background:
    linear-gradient(90deg, rgba(21, 23, 25, .98) 0%, rgba(21, 23, 25, .82) 48%, rgba(65, 64, 66, .22) 100%),
    var(--hero-image, url("../assets/showroom.png")) center / cover;
}

.page-hero,
.detail-hero {
  background:
    linear-gradient(110deg, rgba(232, 5, 5, .11) 0%, rgba(65, 64, 66, .08) 44%, rgba(255, 255, 255, 1) 100%),
    var(--color-brand-white);
}

#hero::before {
  background:
    linear-gradient(
      96deg,
      var(--color-brand-red) 0%,
      rgba(232, 5, 5, .96) 34%,
      rgba(232, 5, 5, .82) 48%,
      rgba(232, 5, 5, .28) 57%,
      rgba(232, 5, 5, .06) 62%,
      transparent 66%
    );
}

.red-line,
.cat-rule,
.detail-rule,
.pg-card::after {
  background: linear-gradient(90deg, var(--color-brand-red), var(--color-brand-gray), transparent);
}

/* Logo lockups: official artwork, protected scale and clear breathing room. */
.nav-logo-img,
.bp-logo img,
.page-nav-logo-img {
  width: 180px;
  min-width: 180px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

.nav-logo,
.bp-logo,
.page-nav-logo {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  flex: 0 0 auto;
}

.hero-copy-logo {
  width: clamp(299px, 22.1vw, 377px);
  margin-bottom: 16px;
}

.footer-logo img,
.bp-footer-brand img {
  width: 220px;
  height: auto;
}

/* Navigation remains crisp, industrial and high-contrast. */
.hero-nav {
  min-height: 56px;
  padding: 3px 32px;
}

.hero-nav.nav-scrolled {
  padding: 3px 32px;
  background: var(--hero-nav-background, rgba(255, 255, 255, .97));
  border-bottom: 1px solid var(--hero-nav-border, var(--brand-border-dark));
}

.bp-nav {
  height: 56px;
  padding-inline: 24px;
  background: rgba(21, 23, 25, .92);
  border-color: var(--brand-border-light);
}

.bp-hero::before {
  inset-block-start: 56px;
}

.emma-page-nav {
  height: 56px;
  padding-inline: 32px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--brand-border-dark);
}

.products-page-body,
.detail-page-body {
  padding-top: 56px;
}

:is(.nav-link, .bp-nav-center a, .page-nav-link) {
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
}

.bp-nav-center {
  gap: 20px;
}

/* Distinctive EMMA CTA: arched leading edge, squared trailing edge. */
:is(
  .hero-cta-primary,
  .hero-cta-secondary,
  .contact-primary,
  .contact-secondary,
  .fp-view-all,
  .bp-button,
  .bp-submit,
  .detail-cta-btn,
  .detail-notfound-back
) {
  min-height: 48px;
  border-radius: 999px 0 0 999px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Compact navigation controls use a calm medium weight, never display bold. */
:is(
  .nav-link,
  .nav-cta,
  .hero-lang-btn,
  .bp-nav-center a,
  .bp-nav-label,
  .bp-menu-toggle,
  .page-nav-link,
  .lang-btn
) {
  font-weight: var(--weight-medium);
}

.nav-cta {
  min-height: 34px;
  padding: 6px 17px;
}

html[dir="rtl"] :is(
  .hero-cta-primary,
  .hero-cta-secondary,
  .contact-primary,
  .contact-secondary,
  .fp-view-all,
  .bp-button,
  .bp-submit,
  .detail-cta-btn,
  .detail-notfound-back
) {
  border-radius: 0 999px 999px 0;
}

/* The contact form submit action is a complete pill in every language. */
.contact-form .contact-primary,
html[dir="rtl"] .contact-form .contact-primary {
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}

:is(.hero-cta-primary, .hero-cta-secondary) {
  border-radius: 0;
}

.nav-cta,
html[dir="rtl"] .nav-cta {
  border-radius: 0;
}

:is(
  .nav-cta,
  .hero-cta-primary,
  .contact-primary,
  .bp-submit,
  .detail-cta-btn
) {
  color: var(--color-brand-white);
  background: var(--color-brand-red);
  border: 2px solid var(--color-brand-red);
}

:is(
  .contact-secondary,
  .bp-button,
  .detail-notfound-back
) {
  background: transparent;
  border: 2px solid currentColor;
}

.hero-cta-secondary {
  color: var(--color-brand-black);
  background: var(--color-brand-white);
  border: 2px solid var(--color-brand-white);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.hero-cta-secondary:hover {
  color: var(--color-brand-white);
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
}

:is(
  .nav-cta,
  .hero-cta-primary,
  .contact-primary,
  .bp-submit,
  .detail-cta-btn
):hover {
  color: var(--color-brand-white);
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  box-shadow: none;
}

/* Product and information surfaces stay square, controlled and technical. */
:is(.bp-card, .bp-product-card, .pg-card, .fp-card, .spec-cell) {
  border-radius: var(--brand-card-radius);
}

:is(.home-about-visual, .bp-split-media, .detail-visual) {
  border-radius: 0 var(--brand-panel-radius) 0 0;
}

.bp-card:hover,
.pg-card:hover,
.fp-card:hover {
  border-color: var(--color-brand-red);
  box-shadow: 0 18px 44px rgba(21, 23, 25, .12);
}

.bp-card:hover {
  background: rgba(232, 5, 5, .055);
}

/* Official icon pattern is used only as a low-contrast supporting device. */
.bp-section--ink::before,
#why-emma::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../UI/pattern.png") center / 420px auto repeat;
  opacity: .018;
  pointer-events: none;
}

.bp-section--ink > *,
#why-emma > * {
  position: relative;
  z-index: 1;
}

/* Accessible state language. */
:is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--color-brand-red);
  outline-offset: 3px;
  box-shadow: var(--brand-focus);
}

:is(button, .button, a)[aria-disabled="true"],
:is(button, .button):disabled {
  opacity: .45;
  filter: grayscale(.45);
  pointer-events: none;
}

::selection {
  color: var(--color-brand-white);
  background: var(--color-brand-red);
}

@media (max-width: 1180px) {
  .nav-logo-img,
  .bp-logo img,
  .page-nav-logo-img {
    width: 128px;
    min-width: 128px;
  }

  .bp-nav-center {
    gap: 14px;
  }

  :is(.bp-nav-center a, .page-nav-link, .nav-link) {
    font-size: 10px;
  }
}

@media (max-width: 980px) {
  .bp-nav {
    grid-template-columns: 1fr auto;
  }

  .bp-nav-center {
    top: 56px;
    background: var(--color-brand-black);
  }
}

@media (max-width: 820px) {
  .hero-nav,
  .hero-nav.nav-scrolled {
    min-height: 52px;
    padding: 2px 16px;
  }

  .nav-logo-img,
  .page-nav-logo-img {
    width: 142px;
    min-width: 142px;
  }

  .hero-copy-logo {
    width: 260px;
  }

  .emma-page-nav {
    height: 52px;
    padding-inline: 14px;
  }

  .products-page-body,
  .detail-page-body {
    padding-top: 52px;
  }

  .fp-stand-title {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════
   SHARED SITE NAVIGATION
   One canonical navbar is mounted on every public route.
═══════════════════════════════════════════════════════════ */
body.shared-nav-mounted:not(.shared-nav-home) {
  padding-top: 64px !important;
}

nav.shared-site-nav,
nav.shared-site-nav.nav-scrolled,
nav.shared-site-nav.shared-nav-scrolled {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9000;
  width: 100%;
  height: 64px;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 0 40px;
  color: var(--hero-nav-fg, #151719);
  background: var(--hero-nav-background, rgba(255, 255, 255, 0.97));
  border-bottom: 1px solid var(--hero-nav-border, rgba(21, 23, 25, 0.12));
  box-shadow: 0 6px 24px rgba(21, 23, 25, 0.035);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transition:
    color 0.32s ease,
    background 0.42s cubic-bezier(.22, 1, .36, 1),
    border-color 0.32s ease,
    box-shadow 0.42s cubic-bezier(.22, 1, .36, 1),
    opacity 0.42s cubic-bezier(.22, 1, .36, 1),
    transform 0.42s cubic-bezier(.22, 1, .36, 1);
}

nav.shared-site-nav.nav-section-light {
  --hero-nav-fg: #151719;
  --hero-nav-muted: rgba(21, 23, 25, .58);
  --hero-nav-hover: #151719;
  --hero-nav-accent: #e80505;
  --hero-nav-active-bg: #e80505;
  --hero-nav-active-fg: #fff;
  --hero-nav-active-border: #e80505;
  --hero-nav-logo-filter: none;
  --hero-nav-border: rgba(21, 23, 25, .16);
}

nav.shared-site-nav.nav-section-dark {
  --hero-nav-fg: #fff;
  --hero-nav-muted: rgba(255, 255, 255, .72);
  --hero-nav-hover: #fff;
  --hero-nav-accent: #e80505;
  --hero-nav-active-bg: #e80505;
  --hero-nav-active-fg: #fff;
  --hero-nav-active-border: #e80505;
  --hero-nav-logo-filter: brightness(0) invert(1);
  --hero-nav-border: rgba(255, 255, 255, .18);
}

nav.shared-site-nav.nav-section-red {
  --hero-nav-fg: #fff;
  --hero-nav-muted: rgba(255, 255, 255, .8);
  --hero-nav-hover: #fff;
  --hero-nav-accent: #fff;
  --hero-nav-active-bg: #fff;
  --hero-nav-active-fg: #151719;
  --hero-nav-active-border: #fff;
  --hero-nav-logo-filter: brightness(0) invert(1);
  --hero-nav-border: rgba(255, 255, 255, .24);
}

/* Landing-page cinematic states must take precedence over the section theme.
   The showroom whiteout is a light surface even though its scroll runway is
   declared dark; the later portfolio overlay returns the navbar to dark. */
body.shared-nav-home nav.shared-site-nav.is-car-entry-dimming {
  --hero-nav-fg: rgb(var(--car-nav-foreground-rgb));
  --hero-nav-muted: rgb(var(--car-nav-foreground-rgb) / .72);
  --hero-nav-hover: rgb(var(--car-nav-foreground-rgb));
  --hero-nav-logo-filter: brightness(0) invert(var(--car-nav-logo-invert));
  --hero-nav-border: rgb(255 255 255 / .12);
}

body.shared-nav-home nav.shared-site-nav.is-car-whiteout {
  --hero-nav-fg: #151719;
  --hero-nav-muted: rgba(21, 23, 25, .58);
  --hero-nav-hover: #151719;
  --hero-nav-accent: #e80505;
  --hero-nav-active-bg: #e80505;
  --hero-nav-active-fg: #fff;
  --hero-nav-active-border: #e80505;
  --hero-nav-logo-filter: none;
  --hero-nav-border: rgba(21, 23, 25, .16);
  --hero-nav-background: rgba(255, 255, 255, .97);
}

body.shared-nav-home nav.shared-site-nav.is-car-whiteout.is-portfolio-overlay {
  --hero-nav-fg: #fff;
  --hero-nav-muted: rgba(255, 255, 255, .72);
  --hero-nav-hover: #fff;
  --hero-nav-accent: #e80505;
  --hero-nav-active-bg: #e80505;
  --hero-nav-active-fg: #fff;
  --hero-nav-active-border: #e80505;
  --hero-nav-logo-filter: brightness(0) invert(1);
  --hero-nav-border: rgba(255, 255, 255, .16);
  --hero-nav-background: rgba(21, 23, 25, .97);
}

nav.shared-site-nav:not(.is-car-section-fading):not(.is-car-section-hidden) {
  opacity: 1;
  visibility: visible;
  transform: none;
}

nav.shared-site-nav.is-car-section-fading {
  opacity: var(--car-nav-opacity, 1) !important;
  transform: translateY(calc((1 - var(--car-nav-opacity, 1)) * -16px));
}

nav.shared-site-nav.is-car-section-hidden {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(-110%);
  pointer-events: none;
}

.shared-nav-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  text-decoration: none;
}

.shared-site-nav .nav-logo-img {
  display: block;
  width: 178px;
  min-width: 178px;
  height: auto;
  max-height: 48px;
  filter: var(--hero-nav-logo-filter, none);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .42s cubic-bezier(.22, 1, .36, 1),
    transform .42s cubic-bezier(.22, 1, .36, 1),
    filter .42s cubic-bezier(.22, 1, .36, 1);
}

.shared-nav-links {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.7vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shared-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--hero-nav-muted, rgba(21, 23, 25, 0.6));
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.shared-nav-link::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: var(--hero-nav-accent, #e80505);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}

.shared-nav-link:hover,
.shared-nav-link.is-active {
  color: var(--hero-nav-hover, #151719);
}

.shared-nav-link:hover::after,
.shared-nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.shared-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.shared-site-nav .nav-search-trigger {
  color: var(--hero-nav-muted, rgba(21, 23, 25, .72));
  background: color-mix(in srgb, var(--hero-nav-background, #fff) 86%, transparent);
  border-color: var(--hero-nav-border, rgba(21, 23, 25, .16));
}

.shared-site-nav .nav-search-trigger:hover,
.shared-site-nav .nav-search-trigger:focus-visible,
.shared-site-nav .nav-search-trigger[aria-expanded="true"] {
  color: var(--hero-nav-hover, #151719);
  background: color-mix(in srgb, var(--hero-nav-background, #fff) 94%, transparent);
  border-color: var(--hero-nav-accent, #e80505);
}

.shared-nav-languages {
  display: flex;
  align-items: center;
  gap: 2px;
}

.shared-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 5px 7px;
  color: var(--hero-nav-muted, rgba(21, 23, 25, 0.46));
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.shared-lang-btn:hover {
  color: var(--hero-nav-hover, #151719);
}

.shared-lang-btn.lang-btn--active {
  color: var(--hero-nav-active-fg, #fff);
  background: var(--hero-nav-active-bg, #e80505);
  border-color: var(--hero-nav-active-border, #e80505);
}

.shared-lang-btn .lang-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}

.shared-nav-cta {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 6px 16px;
  color: var(--hero-nav-active-fg, #fff);
  background: var(--hero-nav-active-bg, #e80505);
  border: 1px solid var(--hero-nav-active-border, #e80505);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.shared-nav-cta b {
  font-size: 15px;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.shared-nav-cta:hover {
  color: var(--hero-nav-fg, #fff);
  background: transparent;
  border-color: var(--hero-nav-fg, #151719);
}

.shared-nav-cta:hover b {
  transform: translate(3px, -3px);
}

/* Hero slides mix dark artwork with a light product stage. Give every control
   its own reliable contrast instead of assuming one background color. */
#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-link,
#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-link:hover {
  color: #fff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .78),
    0 0 10px rgba(0, 0, 0, .42);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-link::after {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .nav-search-trigger {
  color: rgba(21, 23, 25, .82);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(21, 23, 25, .24);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .nav-search-trigger:hover,
#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .nav-search-trigger:focus-visible,
#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .nav-search-trigger[aria-expanded="true"] {
  color: #151719;
  background: #fff;
  border-color: var(--emma-red);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-languages {
  padding: 2px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(21, 23, 25, .12);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-lang-btn:not(.lang-btn--active) {
  color: rgba(21, 23, 25, .68);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-lang-btn.lang-btn--active {
  color: #151719;
  background: #fff;
  border-color: rgba(21, 23, 25, .22);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-cta {
  color: #151719;
  background: rgba(255, 255, 255, .9);
  border-color: rgba(21, 23, 25, .18);
}

#hero:not(.hero-theme-paper) .shared-site-nav:not(.nav-outside-hero)
  .shared-nav-cta:hover {
  color: #fff;
  background: var(--emma-red);
  border-color: var(--emma-red);
}

.shared-nav-menu {
  display: none;
  width: 38px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--hero-nav-border, rgba(21, 23, 25, 0.16));
  background: transparent;
  cursor: pointer;
}

.shared-nav-menu span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: var(--hero-nav-fg, #151719);
  transition: transform 0.2s ease;
}

@media (max-width: 1320px) {
  nav.shared-site-nav,
  nav.shared-site-nav.nav-scrolled {
    gap: 18px;
    padding-inline: 24px;
  }

  .shared-site-nav .nav-logo-img {
    width: 148px;
    min-width: 148px;
  }

  .shared-nav-links { gap: 15px; }
  .shared-nav-link { font-size: 9px; }
  .shared-nav-actions { gap: 7px; }
  .nav-search-trigger kbd { display: none; }
}

@media (max-width: 1080px) {
  .shared-nav-languages .shared-lang-btn:not(.lang-btn--active) { display: none; }
}

@media (max-width: 900px) {
  body.shared-nav-mounted:not(.shared-nav-home) {
    padding-top: 56px !important;
  }

  nav.shared-site-nav,
  nav.shared-site-nav.nav-scrolled,
  nav.shared-site-nav.shared-nav-scrolled {
    height: 56px;
    min-height: 56px;
    grid-template-columns: auto 1fr;
    padding: 0 16px;
  }

  .shared-site-nav .nav-logo-img {
    width: 142px;
    min-width: 142px;
  }

  .shared-nav-links {
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 8px 16px 16px;
    color: var(--hero-nav-fg, #151719);
    background: var(--hero-nav-background, rgba(255, 255, 255, 0.985));
    border-bottom: 1px solid var(--hero-nav-border, rgba(21, 23, 25, 0.12));
    box-shadow: 0 18px 34px rgba(21, 23, 25, 0.1);
  }

  .shared-site-nav.is-menu-open .shared-nav-links {
    display: grid;
  }

  .shared-nav-link,
  .shared-nav-link[href="about.html"] {
    display: flex;
    min-height: 44px;
    padding: 0 10px;
    border-bottom: 1px solid var(--hero-nav-border, rgba(21, 23, 25, 0.08));
  }

  .shared-nav-actions { gap: 6px; }
  .shared-nav-menu { display: block; }
  .shared-nav-cta { display: none; }
  .nav-search-trigger span { display: none; }
  .nav-search-trigger { min-width: 36px; justify-content: center; }

  .shared-site-nav.is-menu-open .shared-nav-menu span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  .shared-site-nav.is-menu-open .shared-nav-menu span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
}

@media (max-width: 560px) {
  .shared-nav-languages { display: none; }
  .shared-nav-links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bp-logo img {
    width: 118px;
    min-width: 118px;
  }

  .bp-nav {
    height: 52px;
    padding-inline: 10px;
  }

  .bp-nav-center {
    top: 52px;
  }

  .bp-hero::before {
    inset-block-start: 52px;
  }

  :is(.home-about-visual, .bp-split-media, .detail-visual) {
    border-start-end-radius: 32px;
  }
}

/* Search trigger follows the same surface state as the shared navbar. */
nav.shared-site-nav.nav-section-light .nav-search-trigger,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout:not(.is-portfolio-overlay) .nav-search-trigger {
  color: rgba(21, 23, 25, .72) !important;
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(21, 23, 25, .18) !important;
}

nav.shared-site-nav.nav-section-light .nav-search-trigger:hover,
nav.shared-site-nav.nav-section-light .nav-search-trigger:focus-visible,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout:not(.is-portfolio-overlay) .nav-search-trigger:hover,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout:not(.is-portfolio-overlay) .nav-search-trigger:focus-visible {
  color: #151719 !important;
  background: #fff !important;
  border-color: var(--color-brand-red, #e80505) !important;
}

nav.shared-site-nav:is(.nav-section-dark, .nav-section-red) .nav-search-trigger,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout.is-portfolio-overlay .nav-search-trigger {
  color: rgba(255, 255, 255, .82) !important;
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

nav.shared-site-nav:is(.nav-section-dark, .nav-section-red) .nav-search-trigger:hover,
nav.shared-site-nav:is(.nav-section-dark, .nav-section-red) .nav-search-trigger:focus-visible,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout.is-portfolio-overlay .nav-search-trigger:hover,
body.shared-nav-home nav.shared-site-nav.is-car-whiteout.is-portfolio-overlay .nav-search-trigger:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
  border-color: var(--hero-nav-accent, #e80505) !important;
}

/* ═══════════════════════════════════════════════════════════
   SHARED PROFESSIONAL FOOTER
═══════════════════════════════════════════════════════════ */
.shared-site-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(232, 5, 5, .13), transparent 25%),
    #08090a;
}

.shared-site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../UI/pattern.png') center / 460px auto repeat;
  opacity: .02;
  pointer-events: none;
}

.shared-footer-accent {
  height: 3px;
  background: linear-gradient(90deg, #009246 0 33.333%, #fff 33.333% 66.666%, #e80505 66.666% 100%);
}

.shared-footer-inner {
  width: min(1420px, calc(100% - 96px));
  margin: 0 auto;
}

.shared-footer-callout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  padding: clamp(48px, 5vw, 76px) 0 clamp(42px, 4.5vw, 66px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.shared-footer-callout > div > span,
.shared-footer-column > strong {
  display: block;
  color: var(--color-brand-red, #e80505);
  font: 750 9px/1 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.shared-footer-callout h2 {
  max-width: 860px;
  margin: 16px 0 0;
  color: #fff;
  font: 900 clamp(38px, 4.7vw, 74px)/.92 var(--font-display);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.shared-footer-callout > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 52px;
  padding: 0 22px;
  color: #fff;
  background: var(--color-brand-red, #e80505);
  border: 1px solid var(--color-brand-red, #e80505);
  font: 750 9px/1 var(--font-display);
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.shared-footer-callout > a > span {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.shared-footer-callout > a:hover {
  color: #151719;
  background: #fff;
  border-color: #fff;
}

.shared-footer-callout b {
  font: 400 18px/1 var(--font-body);
}

.shared-footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(34px, 5vw, 78px);
  padding: clamp(48px, 5vw, 72px) 0;
}

.shared-footer-brand img {
  display: block;
  width: 190px;
  height: auto;
}

.shared-footer-brand p {
  max-width: 390px;
  margin: 22px 0 18px;
  color: rgba(255, 255, 255, .6);
  font: 400 13px/1.7 var(--font-body);
}

.shared-footer-brand > span {
  color: rgba(255, 255, 255, .35);
  font: 650 8px/1 var(--font-display);
  letter-spacing: .17em;
  text-transform: uppercase;
}

.shared-footer-column > strong {
  margin-bottom: 24px;
}

.shared-footer-column a,
.shared-footer-column address {
  display: block;
  margin: 12px 0;
  color: rgba(255, 255, 255, .66);
  font: normal 400 13px/1.55 var(--font-body);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

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

.shared-footer-contact a:first-of-type {
  color: #fff;
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 0 30px;
  color: rgba(255, 255, 255, .34);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font: 500 10px/1.4 var(--font-body);
}

@media (max-width: 980px) {
  .shared-footer-inner {
    width: min(calc(100% - 48px), 760px);
  }

  .shared-footer-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .shared-footer-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}

@media (max-width: 560px) {
  .shared-footer-inner {
    width: calc(100% - 36px);
  }

  .shared-footer-callout h2 {
    font-size: clamp(34px, 11vw, 50px);
  }

  .shared-footer-callout > a {
    width: 100%;
    justify-content: space-between;
  }

  .shared-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shared-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ARABIC / RTL — LANDING-PAGE COMPOSITION
   Arabic changes reading direction without mirroring brand artwork,
   product photography, coordinates, telephone numbers, or the logo.
═══════════════════════════════════════════════════════════ */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

.scroll-float-locale--ar,
.scroll-float-locale--it { display: none; }
html[dir="rtl"] .scroll-float-locale--en { display: none; }
html[dir="rtl"] .scroll-float-locale--ar { display: inline; }
html[lang="it"] .scroll-float-locale--en { display: none; }
html[lang="it"] .scroll-float-locale--it { display: inline; }

/* Italian remains LTR, with a Latin type rhythm tuned for longer wording. */
html[lang="it"] {
  --font-body: "Montserrat", Arial, sans-serif;
  --font-display: "Montserrat", Arial, sans-serif;
  direction: ltr;
}

html[lang="it"] body {
  direction: ltr;
  font-family: var(--font-body);
  text-align: left;
}

html[lang="it"] :is(
  p, h1, h2, h3, h4, li, label, button, a,
  .home-profile-content-points,
  .home-portfolio-capabilities,
  .nav-search-result-main
) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

html[lang="it"] :is(.shared-nav-link, .shared-nav-cta, .nav-search-trigger) {
  letter-spacing: .055em;
}

html[lang="it"] .shared-nav-link {
  font-size: 9.4px;
}

html[lang="it"] :is(
  .home-car-scroll-actions button span,
  .home-portfolio-division-list button strong,
  .home-about-partnership-actions button span
) {
  letter-spacing: .07em;
  line-height: 1.3;
}

html[lang="it"] .home-car-scroll-copy--with-actions h3 {
  line-height: 1.14;
}

html[lang="it"] .home-car-profile-details p,
html[lang="it"] .home-profile-content p,
html[lang="it"] .home-portfolio-capabilities p {
  line-height: 1.6;
}

html[lang="it"] :is(.contact-field label, .contact-form-head span, .contact-location-card > span) {
  letter-spacing: .11em;
}

@media (max-width: 1180px) {
  html[lang="it"] .shared-nav-link { font-size: 8.8px; }
}

/* Keep the artwork geometrically contained when the desktop hero columns
   reverse for Arabic. The product photography itself remains unmirrored. */
@media (min-width: 821px) {
  /* Mirror the campaign canvas itself for Arabic. This moves the dense color
     edge and its fading artwork to the right without flipping foreground
     logos, copy, or product photography. */
  html[dir="rtl"] #hero::before {
    inset: 0 0 41px auto;
    width: 72%;
    background: var(--hero-panel-background);
  }

  html[dir="rtl"] :is(
    .hero-banner-automotive-watermark,
    .hero-banner-logistics-watermark,
    .hero-banner-development-watermark
  ) {
    inset: 0 0 41px auto;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(
      270deg,
      #000 0%,
      #000 62%,
      rgba(0, 0, 0, .84) 72%,
      rgba(0, 0, 0, .34) 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      270deg,
      #000 0%,
      #000 62%,
      rgba(0, 0, 0, .84) 72%,
      rgba(0, 0, 0, .34) 86%,
      transparent 100%
    );
  }

  html[dir="rtl"] .hero-booth-wrap {
    direction: ltr;
    transform: translateX(2.5vw);
  }

  html[dir="rtl"] .hero-booth-wrap::after {
    box-shadow: 28px 2px 44px -12px rgba(21, 23, 25, .24);
  }

  html[dir="rtl"] .hero-circle-extension {
    right: 50%;
    left: -2.5vw;
  }

  html[dir="rtl"] body.shared-nav-home .shared-site-nav:not(.nav-scrolled) .nav-search-trigger {
    color: rgba(21, 23, 25, .78) !important;
    background: rgba(255, 255, 255, .82) !important;
    border-color: rgba(21, 23, 25, .18) !important;
  }

  html[dir="rtl"] body.shared-nav-home .shared-site-nav:not(.nav-scrolled) .shared-lang-btn {
    color: rgba(21, 23, 25, .58) !important;
  }

  html[dir="rtl"] body.shared-nav-home .shared-site-nav:not(.nav-scrolled) .shared-lang-btn.lang-btn--active {
    color: #151719 !important;
    background: rgba(255, 255, 255, .9) !important;
  }
}

html[dir="rtl"] #hero {
  --hero-panel-background:
    linear-gradient(270deg, #9f0012 0%, #c90018 30%, #e80505 56%, rgba(232, 5, 5, .64) 74%, rgba(232, 5, 5, .16) 91%, transparent 100%);
}

html[dir="rtl"] #hero.hero-theme-red {
  --hero-panel-background:
    linear-gradient(270deg, #9f0012 0%, #c90018 30%, #e80505 56%, rgba(232, 5, 5, .64) 74%, rgba(232, 5, 5, .16) 91%, transparent 100%);
}

html[dir="rtl"] #hero.hero-theme-ink {
  --hero-panel-background:
    linear-gradient(270deg, #050607 0%, #111315 48%, rgba(21, 23, 25, .66) 74%, rgba(21, 23, 25, .16) 91%, transparent 100%);
}

html[dir="rtl"] #hero.hero-theme-paper {
  --hero-panel-background:
    linear-gradient(270deg, #d8d1c8 0%, #ebe6df 50%, rgba(238, 234, 228, .68) 74%, rgba(238, 234, 228, .18) 91%, transparent 100%);
}

html[dir="rtl"] :is(
  .hero-banner-automotive-watermark,
  .hero-banner-logistics-watermark,
  .hero-banner-development-watermark
) {
  transform: scaleX(-1);
  transform-origin: center;
}

html[dir="rtl"] :is(.hero-cta-primary > span:last-child, .hero-cta-secondary .hero-cta-arrow) {
  transform: scaleX(-1);
}

html[dir="rtl"] :is(
  .shared-nav-link, .shared-nav-cta, .nav-search-trigger,
  .hero-copy, .hero-eyebrow, .hero-title, .hero-description,
  .hero-cta-primary, .hero-cta-secondary, .fp-filter,
  .home-car-scroll-copy, .home-car-scroll-actions button,
  .home-portfolio-ecosystem, .home-about-partnership-reveal,
  .home-profile-content, .home-story-section, #contact,
  .shared-site-footer
) {
  letter-spacing: 0;
}

/* Arabic needs a larger optical size than the compact Latin CTA labels. */
html[dir="rtl"] :is(.hero-cta-primary, .hero-cta-secondary) {
  font-size: 15px;
  line-height: 1.35;
}

/* Keep banner controls visually identical to English while the copy stays RTL. */
html[dir="rtl"] :is(.hero-cta-primary, .hero-cta-secondary, .hero-banner-link) {
  direction: ltr;
}

html[dir="rtl"] :is(.hero-cta-primary, .hero-cta-secondary, .hero-banner-link) > span:first-child {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] :is(
  .hero-cta-primary > span:last-child,
  .hero-cta-secondary .hero-cta-arrow,
  .hero-banner-link b
) {
  transform: none;
}

html[dir="rtl"] .hero-banner-link {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .hero-cta-secondary:hover .hero-cta-arrow {
  transform: translate(2px, -2px);
}

html[dir="rtl"] .hero-banner-link:hover b {
  transform: translate(4px, -4px);
}

html[dir="rtl"] .home-car-scroll-actions :is(a, button) {
  font-size: 13px;
  line-height: 1.35;
}

/* Preserve Arabic ascenders and dots inside the animated About headings. */
html[dir="rtl"] .home-about-badge {
  min-height: 1.7em;
  align-items: center;
}

html[dir="rtl"] .home-about-header-label {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .home-about-header-label--rome {
  transform: translate3d(0, calc(var(--about-partner-reveal-progress) * -1.9em), 0);
}

html[dir="rtl"] .home-about-header-label--partnership {
  transform: translate3d(0, calc((1 - var(--about-partner-reveal-progress)) * 1.9em), 0);
}

html[dir="rtl"] .home-about-title {
  line-height: 1.14;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .home-about-title-counter {
  height: 1.42em;
}

html[dir="rtl"] .home-about-title-counter-item {
  padding-block: .08em .14em;
}

html[dir="rtl"] .home-about-title-counter-item--rome {
  transform: translate3d(0, calc(var(--about-partner-reveal-progress) * -1.55em), 0);
}

html[dir="rtl"] .home-about-title-counter-item--partnership {
  transform: translate3d(0, calc((1 - var(--about-partner-reveal-progress)) * 1.55em), 0);
}

html[dir="rtl"] .home-profile-content-kicker {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .home-about-partnership-actions :is(a, button) {
  min-height: 64px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] :is(
  .hero-copy, .hero-description, .hero-stats,
  .home-car-scroll-copy--with-actions,
  .home-portfolio-ecosystem-header,
  .home-portfolio-division-detail,
  .home-about-partnership-copy,
  .home-profile-content,
  .home-story-top, .home-story-card,
  .contact-intro, .contact-form, .contact-location-card,
  .shared-footer-brand, .shared-footer-column
) {
  text-align: right;
}

html[dir="rtl"] .shared-site-nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[dir="rtl"] .shared-nav-actions {
  justify-content: flex-start;
}

html[dir="rtl"] .shared-nav-link::after {
  transform-origin: left;
}

html[dir="rtl"] .shared-nav-link:hover::after,
html[dir="rtl"] .shared-nav-link.is-active::after {
  transform-origin: right;
}

html[dir="rtl"] :is(
  .home-car-scroll-actions button i,
  .home-portfolio-division-list button i,
  .home-portfolio-channel-bar a i,
  .contact-primary > span:last-child,
  .fp-card-cta svg
) {
  transform: scaleX(-1);
}

html[dir="rtl"] .home-car-scroll-copy--with-actions::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .home-portfolio-divisions > h3 {
  padding-right: 18px;
  padding-left: 0;
}

html[dir="rtl"] .home-portfolio-divisions > h3::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .home-portfolio-divisions > h3 span {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .home-portfolio-division-list button {
  min-height: 60px;
  text-align: right;
}

html[dir="rtl"] .home-portfolio-division-list button strong {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .home-portfolio-division-list button span {
  font-size: 13px;
}

/* Arabic featured heading: منتجات [EMMA] المميزة. */
html[dir="rtl"] .fp-stand-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .12em;
  direction: ltr;
}

html[dir="rtl"] .fp-stand-title > em {
  order: 3;
  direction: rtl;
}

html[dir="rtl"] .fp-stand-title > .fp-stand-title-logo {
  order: 2;
  margin: 0;
}

html[dir="rtl"] .fp-stand-title > span:not(.fp-stand-title-logo) {
  order: 1;
  direction: rtl;
}

html[dir="rtl"] .home-portfolio-division-list button:hover,
html[dir="rtl"] .home-portfolio-division-list button:focus-visible {
  transform: translateX(-5px);
}

html[dir="rtl"] .contact-intro-copy {
  padding: 0 22px 9px 0;
  border-right: 2px solid var(--emma-red);
  border-left: 0;
}

html[dir="rtl"] :is(.hero-copy-slide--paper .hero-description, .hero-copy-slide--red .hero-description) {
  border-right: 3px solid var(--emma-red);
  border-left: 0;
}

html[dir="rtl"] .hero-copy-slide--red .hero-description {
  border-right-color: #fff;
}

html[dir="rtl"] .hero-copy-slide--ink .hero-slide-facts {
  border-right: 3px solid var(--emma-red);
  border-left: 0;
}

html[dir="rtl"] :is(.hero-stat, .hero-slide-facts > span) {
  padding-right: 0;
  padding-left: 18px;
  border-right: 0;
  border-left: 1px solid rgba(255,255,255,.22);
}

html[dir="rtl"] :is(.hero-stat + .hero-stat, .hero-slide-facts > span + span) {
  padding-right: 18px;
  padding-left: 18px;
}

html[dir="rtl"] :is(.hero-stat:last-child, .hero-slide-facts > span:last-child) {
  border-left: 0;
}

html[dir="rtl"] .contact-detail {
  text-align: right;
}

html[dir="rtl"] :is(.contact-field input, .contact-field select, .contact-field textarea, .nav-search-field input) {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] :is(
  input[type="email"], input[type="tel"],
  a[href^="mailto:"], a[href^="tel:"],
  .home-about-foot span:first-child
) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

html[dir="rtl"] .shared-footer-column a:hover {
  transform: translateX(-3px);
}

html[dir="rtl"] .nav-search-panel,
html[dir="rtl"] .nav-search-result,
html[dir="rtl"] .nav-search-empty {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] :is(.nav-search-close, .nav-search-count, kbd, .fp-filter-number, .home-portfolio-division-meta b) {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .shared-footer-callout {
  text-align: right;
}

@media (max-width: 900px) {
  html[dir="rtl"] .shared-nav-links {
    right: auto;
    left: 18px;
    text-align: right;
  }
}