@charset "UTF-8";
/* ==========================================================================
   موقع تسنيم جمال — Tasnim Gamal Group (Eldawlya Co.)
   Single stylesheet for all pages (RTL, mobile-first, Vanilla CSS only).

   Section map (later tasks append below):
     1. Design Tokens          (Task 2.1)
     2. Base Resets            (Task 2.1)
     3. Typography Base        (Task 2.1)
     4. Body / RTL Base        (Task 2.1)
     5. Components             (Task 2.2)
     6. Header / Nav           (Task 10.1)
     7. Footer                 (Task 10.2)
     8. Eco Chat               (Task 10.3)
     9. Responsive (>=768px)   (Task 11.1)
    10. Responsive (>=1024px)  (Task 11.1)
   ========================================================================== */


/* === 1. Design Tokens =====================================================
   Requirements: 3.1, 3.2, 3.3
   Exact color values from spec — do not adjust without updating Requirement 3.1.
   ========================================================================== */
:root {
  /* Brand palette — navy + gold + accent green */
  --navy-dark:  #0A1628;
  --navy-mid:   #112240;
  --navy-light: #1A3A5C;
  --gold:       #C9A84C;
  --gold-light: #E8C97A;
  --gold-pale:  #F5E8C0;
  --green:      #2ECC71;
  --white:      #FFFFFF;
  --text-soft:  #8A9BB0;

  /* Surface / radius / elevation */
  --radius-sm: 8px;
  --radius-md: 16px;
  --shadow-card: 0 8px 24px rgba(10, 22, 40, 0.18);

  /* Layout */
  --container-max: 1200px;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-h1:   clamp(2rem,    4.5vw + 1rem,    3.5rem);
  --fs-h2:   clamp(1.5rem,  3vw   + 0.5rem,  2.25rem);
  --fs-h3:   clamp(1.25rem, 2vw   + 0.25rem, 1.5rem);
  --fs-body: 1rem;
}


/* === 2. Base Resets =======================================================
   Requirements: 2.3, 2.4 (RTL base), 14.4 (no @import overhead)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* === 3. Typography Base ===================================================
   Requirements: 3.3, 3.5, 17.3
   Cairo for body/UI; Tajawal layered onto headings in Task 2.2.
   System-font fallback chain guarantees readable text if Google Fonts fail.
   ========================================================================== */
html {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* === 4. Body / RTL Base ===================================================
   Requirements: 2.3, 2.4
   Default text alignment matches the document direction (right for RTL).
   ========================================================================== */
body {
  background-color: var(--white);
  color: var(--navy-dark);
  font-size: var(--fs-body);
  text-align: right;
  min-height: 100vh;
  overflow-x: hidden;
}


/* === 5. Components =======================================================
   Requirements: 3.2, 3.3, 3.6, 3.7, 3.8, 5.7, 16.6, 16.7, 2.5, 2.6
   Reusable building blocks shared across all pages: headings, buttons,
   hero gradient, service cards (glassmorphism), before/after columns,
   FAQ, contact form, utility helpers, and focus indicators.
   ========================================================================== */


/* --- 5.1 Headings --------------------------------------------------------
   Requirement 3.2 — Tajawal: H1 = 900, H2/H3 = 800, line-height 1.1–1.4.
   System-font fallback retains weight semantics if Google Fonts fail.
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  color: var(--navy-dark);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
}


/* --- 5.2 Paragraph & Button Typography -----------------------------------
   Requirement 3.3 — Cairo for paragraphs, buttons, CTA links, form fields.
   Weights: 400 (body), 600 (semibold accents), 700 (buttons). LH 1.5–1.8.
   -------------------------------------------------------------------------- */
p {
  font-weight: 400;
  line-height: 1.7;
}

p strong,
.is-semibold {
  font-weight: 600;
}

button,
.btn,
input,
textarea,
select {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}


/* --- 5.3 Buttons ---------------------------------------------------------
   Requirement 3.6 — WhatsApp CTA: --green background, white text, ≥4.5:1.
   Requirement 12.9 — Touch target ≥ 44×44 px on every interactive element.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease,
              box-shadow 200ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn:active {
  transform: translateY(0);
}

.btn--whatsapp {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background-color: #27ae60; /* darker green for hover */
  color: var(--white);
  border-color: #27ae60;
}

.btn--ghost {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--white);
  color: var(--navy-dark);
  border-color: var(--white);
}


/* --- 5.4 Hero Gradient ---------------------------------------------------
   Requirement 3.7 — linear-gradient(135deg, --navy-dark, --navy-mid).
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-mid));
  color: var(--white);
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  overflow: hidden;
}

.hero h1,
.hero h2,
.hero h3 {
  color: var(--white);
}

.hero__title {
  margin-bottom: 1rem;
}

.hero__subtitle {
  max-width: 70ch;
  margin: 0 0 2rem;
  color: var(--white);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}


/* --- 5.5 Service Card (Glassmorphism) ------------------------------------
   Requirement 3.8 — exact glassmorphism values, gold border ≤ 30% alpha.
   Both -webkit-backdrop-filter and backdrop-filter are required for Safari.
   -------------------------------------------------------------------------- */
.service-card {
  background-color: rgba(26, 58, 92, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--white);
  transition: transform 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.service-card h3 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

.service-card p {
  color: var(--text-soft);
  margin-bottom: 1rem;
}

.service-card a {
  color: var(--gold-light);
  font-weight: 600;
  text-decoration: none;
}

.service-card a:hover {
  color: var(--gold);
  text-decoration: underline;
}


/* --- 5.6 Before / After --------------------------------------------------
   Requirement 5.7 — emphasize "after" column: gold border + gold-pale bg
   + 10% larger text.
   Mobile is a single column (after-card placed second in DOM); the
   responsive task (11.1) switches to two columns at ≥ 768 px.
   -------------------------------------------------------------------------- */
.before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 3rem) 1rem;
}

.ba-col {
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.1);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--navy-dark);
}

.ba-col h3 {
  margin-bottom: 1rem;
}

.ba-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ba-col li {
  position: relative;
  padding-right: 1.5rem; /* RTL: bullet is on the right side */
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.ba-col li::before {
  content: "•";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--text-soft);
  font-weight: 700;
}

.ba-col--before li::before {
  color: var(--text-soft);
}

.ba-col--after {
  border: 2px solid var(--gold);
  background-color: var(--gold-pale);
  font-size: 1.1em; /* 10% larger text */
}

.ba-col--after li::before {
  content: "✓";
  color: var(--green);
}


/* --- 5.7 FAQ -------------------------------------------------------------
   Uses native <details>/<summary> for built-in a11y. Chevron is mirrored
   for RTL via transform: scaleX(-1) (Requirement 2.5).
   -------------------------------------------------------------------------- */
.faq {
  padding: clamp(2rem, 5vw, 3rem) 1rem;
}

.faq h2 {
  margin-bottom: 1.5rem;
}

.faq__item {
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq__item summary {
  list-style: none; /* hide default marker */
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "▾";
  display: inline-block;
  color: var(--gold);
  font-size: 0.9em;
  transition: transform 200ms ease;
  /* RTL: mirror directional chevron horizontally */
  transform: scaleX(-1);
}

.faq__item[open] summary::after {
  transform: scaleX(-1) rotate(180deg);
}

.faq__answer {
  padding: 0 1.25rem 1rem;
  color: var(--navy-dark);
  line-height: 1.7;
}


/* --- 5.8 Contact Form ----------------------------------------------------
   Requirements 2.6, 7.x — RTL alignment, Arabic placeholders, error states.
   Errors are revealed by removing the [hidden] attribute via JS, and the
   field gets aria-invalid="true" handled by main.js.
   -------------------------------------------------------------------------- */
.contact-form {
  display: grid;
  gap: 1.25rem;
  max-width: 640px;
  margin: 0 auto;
}

.contact-form .field {
  display: grid;
  gap: 0.4rem;
}

.contact-form label {
  font-weight: 600;
  color: var(--navy-dark);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 22, 40, 0.2);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--navy-dark);
  font-size: 1rem;
  line-height: 1.5;
  text-align: right;          /* Requirement 2.6 — RTL alignment */
  direction: rtl;
}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-soft);
  text-align: right;          /* Requirement 2.6 — RTL placeholders */
  opacity: 1;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--navy-light);
}

.contact-form [aria-invalid="true"] {
  border-color: #c0392b;
  background-color: #fff5f4;
}

.contact-form .error {
  color: #c0392b;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}


/* --- 5.9 Utilities -------------------------------------------------------
   .visually-hidden — accessible-only labels (used by Eco input, etc.).
   -------------------------------------------------------------------------- */
.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;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: 1rem;
}


/* --- 5.10 Focus Indicator ------------------------------------------------
   Requirement 16.7 — visible :focus-visible ring with --gold, ≥ 2px.
   Applied to every interactive element across the site.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Remove default outline only when :focus-visible is supported, to keep
   keyboard-only users seeing the gold ring while suppressing the default
   focus on mouse/touch. */
:focus:not(:focus-visible) {
  outline: none;
}


/* === 6. Header / Nav =====================================================
   Requirements: 13.1, 13.3, 13.5, 13.9, 2.5
   Sticky top bar with the logo on the visual right (RTL inline flow start),
   a horizontal primary nav, and a Services dropdown whose chevron is
   mirrored for RTL. Active link highlight is driven by `body[data-page]`
   matching `[data-nav]` on each link. Hamburger and mobile-panel base
   visuals live here too — Section 9/10 (Responsive, Task 11.1) controls
   their visibility per breakpoint.
   ========================================================================== */


/* --- 6.1 Site Header (sticky) -------------------------------------------
   Requirement 13.1 — header sticky to top of viewport while scrolling.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--navy-dark);
  color: var(--white);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding-block: 0.5rem;
}


/* --- 6.2 Site Logo (right side in RTL) ----------------------------------
   Requirement 13.5 — logo sits on the visual right. In RTL, flex children
   flow right-to-left so the first child (the logo) lands on the right
   automatically; no order overrides needed.
   -------------------------------------------------------------------------- */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.site-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
}

.site-logo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}


/* --- 6.3 Hamburger Button (visuals) -------------------------------------
   Display/visibility is finalized in Task 11.1 (hidden at ≥ 1024 px).
   Three-line icon built from spans; collapses into an X when the toggle
   reports aria-expanded="true".
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;          /* Requirement 12.9 — touch target ≥ 44×44 */
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--white);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--white);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --- 6.4 Primary Nav (horizontal base) ----------------------------------
   Requirement 13.3 — links to Home, Services, About, Contact.
   Default look here is the Desktop horizontal bar; Task 11.1 reshapes it
   into a vertical mobile panel below 1024 px.
   -------------------------------------------------------------------------- */
.primary-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav li {
  list-style: none;
}

.primary-nav a,
.primary-nav > ul > li > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;     /* Requirement 12.9 — touch target ≥ 44×44 */
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease,
              box-shadow 200ms ease;
}

.primary-nav a:hover,
.primary-nav > ul > li > button:hover,
.primary-nav a:focus-visible,
.primary-nav > ul > li > button:focus-visible {
  color: var(--gold-light);
  background-color: rgba(255, 255, 255, 0.06);
}


/* --- 6.5 Services Dropdown ----------------------------------------------
   Requirement 2.5 — directional chevron `▾` mirrored for RTL via
   transform: scaleX(-1), matching the FAQ pattern in 5.7.
   The dropdown opens on hover, focus-within (keyboard tab into it), and
   when JS sets aria-expanded="true" on the trigger button.
   -------------------------------------------------------------------------- */
.has-dropdown {
  position: relative;
}

.has-dropdown > button::after {
  content: "▾";
  display: inline-block;
  margin-inline-start: 0.25rem;
  color: var(--gold);
  font-size: 0.85em;
  transition: transform 200ms ease;
  transform: scaleX(-1);   /* RTL: mirror horizontally */
}

.has-dropdown > button[aria-expanded="true"]::after {
  transform: scaleX(-1) rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;          /* RTL: anchor under the parent on the right edge */
  left: auto;
  min-width: 240px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background-color: var(--navy-mid);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease,
              visibility 200ms ease;
  z-index: 110;
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown > button[aria-expanded="true"] + .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--white);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  text-align: right;          /* RTL alignment */
  transition: background-color 200ms ease, color 200ms ease;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background-color: rgba(201, 168, 76, 0.12);
  color: var(--gold-light);
}


/* --- 6.6 Active Link Highlight -----------------------------------------
   Requirement 13.9 — current page is visually distinguished.
   Pages set <body data-page="..."> and nav links carry [data-nav="..."].
   When the two match, the link gets a gold tint plus a 2 px gold underline
   (rendered as inset box-shadow so it doesn't shift layout).
   The "الخدمات" parent button also lights up whenever the visitor is on
   any of the six service pages.
   -------------------------------------------------------------------------- */
body[data-page="home"]            .primary-nav [data-nav="home"],
body[data-page="about"]           .primary-nav [data-nav="about"],
body[data-page="contact"]         .primary-nav [data-nav="contact"],
body[data-page="import-export"]   .primary-nav [data-nav="import-export"],
body[data-page="shipping"]        .primary-nav [data-nav="shipping"],
body[data-page="customs"]         .primary-nav [data-nav="customs"],
body[data-page="storage"]         .primary-nav [data-nav="storage"],
body[data-page="feasibility"]     .primary-nav [data-nav="feasibility"],
body[data-page="supplier-check"]  .primary-nav [data-nav="supplier-check"] {
  color: var(--gold);
  background-color: rgba(201, 168, 76, 0.10);
  box-shadow: inset 0 -2px 0 var(--gold);
}

body[data-page="import-export"]  .primary-nav .has-dropdown > button,
body[data-page="shipping"]       .primary-nav .has-dropdown > button,
body[data-page="customs"]        .primary-nav .has-dropdown > button,
body[data-page="storage"]        .primary-nav .has-dropdown > button,
body[data-page="feasibility"]    .primary-nav .has-dropdown > button,
body[data-page="supplier-check"] .primary-nav .has-dropdown > button {
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}


/* === 7. Footer ============================================================
   Requirements: 13.2, 13.4
   Site-wide footer carrying quick-links nav (Home, six services, About,
   Contact), contact details (tel/mailto/WhatsApp), and a copyright line.
   Mobile-first: a single stacked column. Task 11.1 (Responsive ≥ 768 px)
   will add the breakpoint that re-flows the columns into a multi-column
   grid for Tablet/Desktop.
   ========================================================================== */


/* --- 7.1 Footer Container ------------------------------------------------
   Navy-dark surface with a soft gold hairline at the top to echo the
   header's gold-tinted bottom border. Default text uses --text-soft so
   that headings/links in white pop above body lines.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--navy-dark);
  color: var(--text-soft);
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  padding: clamp(2rem, 5vw, 3rem) 1rem 0;
  text-align: right;          /* RTL alignment for every column */
  direction: rtl;
}

.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;     /* Mobile: single stacked column */
  gap: 2rem;
}


/* --- 7.2 Footer Column ---------------------------------------------------
   Each column groups one related block (about, quick links, services,
   contact). Headings get the same Tajawal weight cascade as the rest of
   the site so the visual hierarchy stays consistent.
   -------------------------------------------------------------------------- */
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__heading {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 0.25rem;
}


/* --- 7.3 Quick-links Nav -------------------------------------------------
   Vertical link list for Home / six services / About / Contact. Anchors
   keep a 44 px touch target (Requirement 12.9) by way of vertical
   padding. The gold hover/focus state mirrors the primary nav.
   -------------------------------------------------------------------------- */
.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-footer__nav li {
  list-style: none;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* --- 7.4 Contact details -------------------------------------------------
   Inline icon + text for tel:, mailto:, and WhatsApp. Each entry is a
   block-level anchor so the whole row is tappable and clears the 44 px
   touch target. The WhatsApp entry borrows the brand --green for
   instant recognition.
   -------------------------------------------------------------------------- */
.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-footer__contact li {
  list-style: none;
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  /* Phone numbers and emails are LTR strings inside an RTL flow; isolate
     them so the bidi algorithm doesn't reorder + and digits visually. */
  unicode-bidi: plaintext;
  transition: color 200ms ease;
  word-break: break-word;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__contact a[href^="https://wa.me/"] {
  color: var(--green);
}

.site-footer__contact a[href^="https://wa.me/"]:hover,
.site-footer__contact a[href^="https://wa.me/"]:focus-visible {
  color: #58d98a;             /* lighter green for hover on dark bg */
}


/* --- 7.5 Footer Copyright ------------------------------------------------
   Full-width band beneath the columns, separated by a faint hairline.
   Always centered visually; in RTL the inline content still reads
   right-to-left thanks to the inherited `direction: rtl` on .site-footer.
   -------------------------------------------------------------------------- */
.site-footer__copyright {
  margin-top: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}


/* === 8. Eco Chat ==========================================================
   Requirements: 9.1, 9.2, 9.11, 12.6, 12.7, 16.3
   Floating Eco_Trigger_Button (fixed bottom-right) and the Eco_Chat_Window
   dialog it opens. The JS module (`js/eco-chat.js`) drives visibility by
   toggling the HTML5 `[hidden]` attribute and the `.is-open` class:

     - `[hidden]` is the source of truth for the a11y tree / tab order.
     - `.is-open` flips the visual state (opacity + translate) so the
       browser can run the 300 ms transition smoothly.
     - On open: JS removes `[hidden]`, then `requestAnimationFrame` adds
       `.is-open` so the layout flush precedes the transition.
     - On close: JS removes `.is-open`, then re-applies `[hidden]` ~300 ms
       later (after the reverse transition finishes).

   Mobile defaults live here; Section 9 (Responsive ≥ 768 px, Task 11.1)
   will refine the window width to a fixed 360–420 px on Tablet/Desktop.
   ========================================================================== */


/* --- 8.1 Pulse Keyframe --------------------------------------------------
   Requirement 9.2 — gentle 2 s pulse around the trigger to draw the eye
   without being distracting. Built as a layered box-shadow so it stacks
   with the elevation shadow without being clipped by border-radius.
   Honors `prefers-reduced-motion: reduce` further down (8.2).
   -------------------------------------------------------------------------- */
@keyframes eco-pulse {
  0% {
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.25),
                0 0 0 0 rgba(46, 204, 113, 0.55);
  }
  70% {
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.25),
                0 0 0 16px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.25),
                0 0 0 0 rgba(46, 204, 113, 0);
  }
}


/* --- 8.2 Eco_Trigger_Button ---------------------------------------------
   Requirements 9.1, 9.2, 12.6, 12.7, 16.3
   Fixed bottom-right floating action button. ≥ 56×56 px so it clears
   the touch-target ceiling (Requirement 12.6) and remains a visible
   anchor while scrolling. z-index 200 keeps it above the sticky header
   (z-index 100) and any in-page content.
   -------------------------------------------------------------------------- */
.eco-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;

  /* Touch target — 56 px exceeds the 44 px floor (Req 12.9). */
  min-width: 56px;
  min-height: 56px;
  width: 56px;
  height: 56px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--green);
  color: var(--white);
  border: 0;
  border-radius: 50%;          /* circular pill */

  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;

  /* Initial elevation; the pulse animation re-asserts the same shadow on
     each loop so it does not "jump" between states. */
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.25);

  animation: eco-pulse 2s ease-out infinite;
  transition: transform 200ms ease, background-color 200ms ease;
}

.eco-trigger:hover,
.eco-trigger:focus-visible {
  background-color: #27ae60;   /* darker green on hover, matches .btn--whatsapp */
  transform: scale(1.05);
}

/* Stronger ring on the trigger so it stands out on every page bg.
   Augments the global :focus-visible rule from Section 5.10. */
.eco-trigger:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.eco-trigger__icon {
  display: inline-block;
  pointer-events: none;
  /* Counter-pulse the icon very subtly so it feels "alive". */
  font-size: 1.5rem;
  line-height: 1;
}

/* Honor users who request reduced motion (Req 16.x a11y). */
@media (prefers-reduced-motion: reduce) {
  .eco-trigger {
    animation: none;
  }
}


/* --- 8.3 Eco_Chat_Window (dialog) ---------------------------------------
   Requirements 9.1, 9.11, 16.3
   Mobile-first sizing: full viewport width minus a 16 px gutter on each
   side, with a fluid height that respects the keyboard and the viewport
   (clamp 480 px ↔ 70 vh). Section 9 (Task 11.1) caps the width to a
   fixed 360–420 px for ≥ 768 px viewports.

   Visibility / transition contract:
     1. Layout (`display: flex`, dimensions, position) lives on
        `.eco-window` itself so it has no JS-toggled side effects.
     2. `[hidden]` re-asserted as `display: none` so the dialog is
        excluded from layout / tab order while closed.
     3. Opacity + translate-Y handle the open/close transition; the
        `.is-open` class flips them on once layout has flushed.
   -------------------------------------------------------------------------- */
.eco-window {
  position: fixed;
  bottom: 96px;                /* sits above the 24 + 56 px trigger + gap */
  right: 16px;
  z-index: 210;                /* one layer above the trigger */

  /* Mobile: full width minus 16 px gutter on each side, capped at 420 px
     so very wide phones (e.g., landscape tablets at <768 px) still feel
     framed rather than edge-to-edge. */
  width: calc(100vw - 32px);
  max-width: 420px;

  /* Fluid height keeps the dialog usable on short viewports while
     preventing it from dominating tall screens. */
  height: clamp(480px, 70vh, 640px);
  max-height: calc(100vh - 112px);  /* leave room for the trigger + gutters */

  display: flex;
  flex-direction: column;
  overflow: hidden;            /* contains the scrollable log */

  background-color: var(--white);
  color: var(--navy-dark);
  border: 1px solid rgba(10, 22, 40, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.28);

  /* Closed-but-not-[hidden] state used during the reverse transition. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;

  direction: rtl;              /* RTL alignment inside the dialog */
  text-align: right;
}

/* HTML5 `[hidden]` defaults to display: none. Re-asserting it here
   guarantees the more-specific `.eco-window[hidden]` selector wins
   over the layout `display: flex` declared above. */
.eco-window[hidden] {
  display: none;
}

/* The open/visible state. `.is-open` is added by JS on the next
   animation frame after `[hidden]` is removed, so the transition
   always fires. */
.eco-window.is-open {
  opacity: 1;
  transform: translateY(0);
}


/* --- 8.4 Window Header --------------------------------------------------
   Requirement 9.11 — header carries the bot name "إيكو · ECO Assistant",
   the live status "● متاح الآن · 24/7", and the X close button on the
   visual-end (left in RTL — last flex child in an `direction: rtl` flow).
   -------------------------------------------------------------------------- */
.eco-window__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;

  background-color: var(--navy-dark);
  color: var(--white);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.eco-window__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  min-width: 0;                /* let inner text truncate cleanly */
  color: var(--white);
}

.eco-window__title strong {
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--white);
}

.eco-window__sub {
  font-size: 0.875rem;
  color: var(--gold-light);
  font-weight: 600;
}

.eco-status {
  display: inline-flex;
  align-items: center;
  width: 100%;                 /* drops to its own line below the name */
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--green);
  /* The leading "●" lives in markup; isolate it so the bidi algorithm
     doesn't reorder it inside the right-to-left line. */
  unicode-bidi: plaintext;
}

.eco-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;

  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease;
}

.eco-close:hover,
.eco-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--gold);
  color: var(--gold-light);
}


/* --- 8.5 Message Log (scroll area) --------------------------------------
   Vertical, scrollable list. Flex column so each <li> can use
   `align-self` to anchor itself to the user side (right in RTL flex)
   or the bot side (left in RTL flex).
   -------------------------------------------------------------------------- */
.eco-log {
  flex: 1 1 auto;
  min-height: 0;               /* lets flex child shrink and scroll */
  overflow-y: auto;
  overscroll-behavior: contain;

  list-style: none;
  margin: 0;
  padding: 1rem;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  background-color: #f7f9fc;   /* very light neutral so bubbles pop */
}

.eco-log li {
  list-style: none;
}

/* Message bubbles. Both variants use a max-width of 80% so very long
   replies wrap cleanly inside a 360–420 px window. */
.eco-msg {
  max-width: 80%;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* User on the visual right (start in RTL flex). Squared bottom-start
   corner so the bubble "points" toward the user side. */
.eco-msg--user {
  align-self: flex-start;
  background-color: var(--gold-pale);
  color: var(--navy-dark);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 14px 14px 14px 4px;   /* TL TR BR BL — squared BL (RTL start) */
}

/* Bot on the visual left (end in RTL flex). Squared bottom-end corner
   on the opposite side. */
.eco-msg--bot {
  align-self: flex-end;
  background-color: var(--white);
  color: var(--navy-dark);
  border: 1px solid rgba(10, 22, 40, 0.1);
  border-radius: 14px 14px 4px 14px;   /* TL TR BR BL — squared BR (RTL end) */
}

.eco-bubble {
  display: block;
  white-space: pre-wrap;       /* preserve newlines in REPLIES text */
}

.eco-link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--navy-mid);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eco-link:hover,
.eco-link:focus-visible {
  color: var(--green);
}


/* --- 8.6 Quick-reply Chips ----------------------------------------------
   Pill-shaped buttons, gold border + gold text, tappable ≥ 36 px high.
   Sit between the log and the input row so the user can pick a topic
   without typing.
   -------------------------------------------------------------------------- */
.eco-quick {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background-color: var(--white);
  border-top: 1px solid rgba(10, 22, 40, 0.06);
}

/* Hide the quick-reply strip when JS empties it, so the input row sits
   flush against the log. `:empty` matches when no children are present. */
.eco-quick:empty {
  display: none;
}

.eco-quick__btn {
  min-height: 36px;
  padding: 0.35rem 0.85rem;

  background-color: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 999px;        /* pill shape */

  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease;
}

.eco-quick__btn:hover,
.eco-quick__btn:focus-visible {
  background-color: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
}


/* --- 8.7 Input Row ------------------------------------------------------
   Requirements 9.8, 16.3, 16.5
   Flex row: text input grows to fill, send button hugs the visual-end
   side (left in RTL — last flex child). The input respects MAX_INPUT
   via the `maxlength` attribute applied by JS.
   -------------------------------------------------------------------------- */
.eco-input {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;

  background-color: var(--white);
  border-top: 1px solid rgba(10, 22, 40, 0.1);
}

.eco-input input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;            /* Req 12.9 — touch target */
  padding: 0.55rem 0.85rem;

  background-color: var(--white);
  color: var(--navy-dark);
  border: 1px solid rgba(10, 22, 40, 0.2);
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: right;           /* RTL alignment inside the field */
  direction: rtl;
}

.eco-input input::placeholder {
  color: var(--text-soft);
  text-align: right;
  opacity: 1;
}

.eco-input input:hover {
  border-color: var(--navy-light);
}

/* Reinforce the focus ring on the chat input (Req 16.3, 16.7). */
.eco-input input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}

.eco-input button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--green);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-sm);

  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.eco-input button:hover,
.eco-input button:focus-visible {
  background-color: #27ae60;   /* matches .btn--whatsapp hover */
  transform: translateY(-1px);
}

.eco-input button:active {
  transform: translateY(0);
}


/* === 9. Responsive (>=768px) =============================================
   Requirements: 12.1, 12.2, 12.4, 12.5, 12.7, 12.8, 13.6, 13.7, 4.5, 5.7
   Mobile-first responsive layer #1. The block opens with the *mobile*
   adjustments that override the desktop-leaning base of Section 6 — the
   primary nav reshapes into a vertical hamburger panel below 1024 px so
   Mobile and Tablet share the collapsed shell — then the
   `@media (min-width: 768px)` query lifts the layout to the Tablet
   breakpoint: Before/After becomes two columns, Footer flows into a
   multi-column row, and the Eco_Chat_Window pins to a fixed 360–420 px
   width.
   Mobile-first principle: we DO NOT use max-width queries here. The
   "mobile" overrides below are unconditional defaults; Section 10
   (>=1024 px) reverts them to restore the horizontal Desktop nav.
   ========================================================================== */


/* --- 9.1 Mobile Hamburger Panel (active < 1024 px) ---------------------
   Requirements 12.4, 13.6, 13.7
   Section 6 paints the horizontal Desktop bar that ships at >=1024 px.
   Below that breakpoint the primary nav collapses into a vertical panel
   anchored to the bottom of the sticky header (z-index just below the
   header's 100 so the gold hairline stays visible). JS toggles
   `.is-open` on `.primary-nav` to reveal it; the `max-height` transition
   keeps the open animation cheap (no layout thrash).
   -------------------------------------------------------------------------- */
.primary-nav {
  position: absolute;
  top: 100%;                    /* sits flush under the sticky header */
  right: 0;
  left: 0;
  z-index: 95;                  /* below header (100), above page body */

  background-color: var(--navy-mid);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.4);

  /* Closed by default; .is-open animates the panel open. */
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}

.primary-nav.is-open {
  max-height: calc(100vh - 64px);   /* leave room for the 64 px header */
  overflow-y: auto;
}

.primary-nav > ul {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.5rem 1rem;
}

.primary-nav a,
.primary-nav > ul > li > button {
  width: 100%;
  justify-content: flex-start;  /* RTL flex-start = right edge */
  min-height: 44px;             /* Req 12.9 + 13.6 — >= 44 px touch target */
  padding: 0.75rem 0.9rem;
}

/* On mobile the Services dropdown is rendered inline, always-visible,
   so every service link is reachable with one tap from inside the open
   hamburger panel (Req 13.6 — full nav exposed in the panel). */
.primary-nav .has-dropdown {
  position: static;
}

.primary-nav .dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 1rem 0.5rem;        /* RTL: indent service links from the right */
  margin: 0;
  min-width: 0;
  transition: none;
}

.primary-nav .dropdown a {
  color: var(--text-soft);
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
}

.primary-nav .dropdown a:hover,
.primary-nav .dropdown a:focus-visible {
  color: var(--gold-light);
  background-color: rgba(201, 168, 76, 0.10);
}

/* Suppress the Section 6.5 chevron rotation on mobile — the dropdown is
   permanently expanded inside the panel, so a static chevron would be
   misleading. Hide the marker entirely below 1024 px. */
.primary-nav .has-dropdown > button::after {
  display: none;
}


/* --- 9.2 Hero / Container Overflow Guard (320 px – 1920 px) ------------
   Requirements 12.5, 12.8, 4.5
   The body already sets `overflow-x: hidden`; reinforce per-element so
   individual hero containers never push past the viewport edge, and so
   exceptionally long Arabic words, URLs, or pasted content wrap rather
   than blow out the layout at 320 px. `overflow-wrap: anywhere` is the
   modern preferred value with a `word-wrap: break-word` fallback for
   older engines.
   -------------------------------------------------------------------------- */
.hero,
.hero__title,
.hero__subtitle,
.hero__cta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.hero > * {
  max-width: 100%;
}


/* --- 9.3 Tablet breakpoint (>= 768 px) --------------------------------- */
@media (min-width: 768px) {

  /* 9.3.1 Before/After — switch from single column (Mobile, after-card
     listed second in DOM) to two side-by-side columns. Requirement 5.7
     keeps the After column visually emphasized via Section 5.6 styles. */
  .before-after {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* 9.3.2 Footer — collapse the single Mobile column into a multi-column
     row (Quick Links / Services / Contact / About each get their own
     column). flex-wrap keeps narrower tablets from squeezing columns
     below their 220 px floor. Requirement 13.4. */
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
  }

  .site-footer__col {
    flex: 1 1 220px;
    min-width: 0;               /* allow text to wrap inside narrow cols */
  }

  /* 9.3.3 Eco_Chat_Window — pin to a fixed 360–420 px width on Tablet
     and Desktop (Requirement 12.7). `min()` caps the width to the
     viewport-minus-gutter on edge cases (e.g., side-by-side iPad split
     view at exactly 768 px). */
  .eco-window {
    width: min(420px, calc(100vw - 32px));
    min-width: 360px;
  }
}


/* === 10. Responsive (>=1024px) ===========================================
   Requirements: 12.3, 12.9, 13.8
   Desktop layer. Hamburger disappears, the primary nav reverts to its
   Section 6 horizontal-bar form (we strip the mobile panel overrides
   from 9.1 so the dropdown re-enables hover/focus-driven popups), and
   container padding gets a small bump for the wider page width. No
   layout below this point — Task 11.1 is the final CSS section.
   ========================================================================== */
@media (min-width: 1024px) {

  /* 10.1 Hide hamburger button (Requirement 13.8). */
  .nav-toggle {
    display: none;
  }

  /* 10.2 Restore the horizontal Desktop nav.
     The properties here are the inverse of 9.1 — anything 9.1 changed
     is reset to the Section 6 base so the original horizontal bar +
     hover-driven dropdown behavior is back in effect. */
  .primary-nav {
    position: static;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    border-top: 0;
    box-shadow: none;
    transition: none;
  }

  .primary-nav > ul {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
  }

  .primary-nav a,
  .primary-nav > ul > li > button {
    width: auto;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    min-height: 44px;           /* Req 12.9 — touch target stays >= 44 px */
  }

  /* 10.3 Re-enable the dropdown popup behavior from Section 6.5. */
  .primary-nav .has-dropdown {
    position: relative;
  }

  .primary-nav .has-dropdown > button::after {
    display: inline-block;      /* restore the mirrored chevron */
  }

  .primary-nav .dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;                   /* RTL: anchor on the right edge */
    left: auto;
    min-width: 240px;
    margin: 0;
    padding: 0.5rem;

    background-color: var(--navy-mid);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease,
                visibility 200ms ease;
  }

  .primary-nav .has-dropdown:hover > .dropdown,
  .primary-nav .has-dropdown:focus-within > .dropdown,
  .primary-nav .has-dropdown > button[aria-expanded="true"] + .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .primary-nav .dropdown a {
    color: var(--white);
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
  }

  .primary-nav .dropdown a:hover,
  .primary-nav .dropdown a:focus-visible {
    background-color: rgba(201, 168, 76, 0.12);
    color: var(--gold-light);
  }

  /* 10.4 Container padding bump — extra breathing room at Desktop width. */
  .container {
    padding-inline: 1.5rem;
  }
}


/* === 11. Section Spacing & About Page =====================================
   General section padding and About_Page specific styles (numbers grid).
   ========================================================================== */

.section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.section-lead {
  max-width: 65ch;
  margin-bottom: 2rem;
  color: var(--text-soft);
  font-size: 1.1rem;
}

/* --- About: Company Story ------------------------------------------------ */
.about-story p {
  max-width: 75ch;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--navy-dark);
}

/* --- About: Numbers Grid ------------------------------------------------- */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.number-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background-color: var(--white);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, border-color 200ms ease;
}

.number-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.number-card__value {
  display: block;
  font-family: 'Tajawal', 'Cairo', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.number-card__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-dark);
  line-height: 1.5;
}


/* ==========================================================================
   === 11. v2 OVERHAUL — Light Header + Bigger Logo + Language Toggle
   ==========================================================================
   This block intentionally appears at the bottom so its rules win over the
   earlier dark-header section (cascade by source order). It introduces:
     - A light, premium-looking header with a gold accent line.
     - A noticeably bigger logo (68 px on Mobile, 80 px on Desktop).
     - A circular language-toggle button (`.lang-toggle`) that flips
       AR ↔ EN. The active locale is reflected on `<html lang>` / `<dir>`.
     - LTR overrides (alignment, dropdown anchor, footer direction) keyed
       on `html[dir="ltr"]` so the same markup serves both languages.
   ========================================================================== */

/* ----- 11.1 Light Header --------------------------------------------------
   Swap the navy surface for an off-white gradient and add a 2 px gold
   accent line at the bottom so the header reads as a premium ribbon.
   Nav links inherit the dark ink color for AAA legibility on the cream.
   -------------------------------------------------------------------------- */
.site-header {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f4ea 100%);
  color: var(--navy-dark);
  border-bottom: 0;
  box-shadow:
    0 1px 0 rgba(201, 168, 76, 0.45),
    0 4px 12px rgba(10, 22, 40, 0.06);
}

.site-header__inner {
  min-height: 88px;
}

.site-header .primary-nav a,
.site-header .primary-nav > ul > li > button {
  color: var(--navy-mid);
  font-weight: 700;
}

.site-header .primary-nav a:hover,
.site-header .primary-nav > ul > li > button:hover,
.site-header .primary-nav a:focus-visible,
.site-header .primary-nav > ul > li > button:focus-visible {
  color: var(--navy-dark);
  background-color: rgba(201, 168, 76, 0.14);
}

.site-header .has-dropdown > button::after {
  color: var(--gold);
}

/* Active link on the light header — gold underline + soft tint */
body[data-page="home"]            .site-header .primary-nav [data-nav="home"],
body[data-page="about"]           .site-header .primary-nav [data-nav="about"],
body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"],
body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"],
body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"],
body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"],
body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"],
body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"],
body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"] {
  color: var(--navy-dark);
  background-color: rgba(201, 168, 76, 0.14);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* Hamburger contrast on the new light header */
.site-header .nav-toggle {
  color: var(--navy-dark);
  border-color: rgba(10, 22, 40, 0.18);
}

.site-header .nav-toggle span {
  background-color: var(--navy-dark);
}

.site-header .nav-toggle:hover {
  background-color: rgba(201, 168, 76, 0.10);
  border-color: var(--gold);
}

/* Dropdown panel — keep navy pop on hover for clear depth */
.site-header .dropdown {
  background-color: var(--white);
  border-color: rgba(201, 168, 76, 0.30);
  box-shadow:
    0 4px 14px rgba(10, 22, 40, 0.10),
    0 1px 0 rgba(201, 168, 76, 0.45);
}

.site-header .dropdown a {
  color: var(--navy-mid);
}

.site-header .dropdown a:hover,
.site-header .dropdown a:focus-visible {
  background-color: rgba(201, 168, 76, 0.14);
  color: var(--navy-dark);
}


/* ----- 11.2 Bigger Logo ---------------------------------------------------
   Logo grows from 40 px to 68 px on Mobile and 80 px on ≥ 768 px viewports
   so it dominates the header band. We swap source between the Arabic word
   mark (Logo-arabic.png) and the English title block (logo-title.png) via
   `.is-ar` / `.is-en` toggles set by js/i18n.js.
   -------------------------------------------------------------------------- */
.site-logo img {
  height: 68px;
  max-height: 68px;
  max-width: 260px;
}

@media (min-width: 768px) {
  .site-logo img {
    height: 80px;
    max-height: 80px;
    max-width: 320px;
  }
}

/* Hide the inactive logo image — the i18n module sets these classes. */
html[lang="ar"]  .site-logo .logo--en,
html[dir="rtl"]  .site-logo .logo--en { display: none; }

html[lang="en"]  .site-logo .logo--ar,
html[dir="ltr"]  .site-logo .logo--ar { display: none; }


/* ----- 11.3 Language Toggle Button ----------------------------------------
   Circular icon button with a globe glyph. Sits between the hamburger and
   the nav on Mobile, and between the logo and the nav on Desktop. The label
   (`AR` / `EN`) flips on click; aria-label updates accordingly.
   -------------------------------------------------------------------------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  background-color: var(--navy-dark);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 200ms ease,
              background-color 200ms ease,
              color 200ms ease,
              box-shadow 200ms ease;
  unicode-bidi: plaintext;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background-color: var(--gold);
  color: var(--navy-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.45);
}

.lang-toggle__globe {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.lang-toggle__label {
  font-feature-settings: "tnum";
}


/* ==========================================================================
   === 12. Hero v2 — Image Backdrop + Decorative Layers
   ==========================================================================
   `.hero--showcase` overlays a deep navy gradient onto a high-quality
   backdrop image (provided per-page through the inline `--hero-bg` CSS
   custom property). Result: a cinematic banner that still passes WCAG AA
   for white-on-navy text contrast.
   ========================================================================== */
.hero--showcase {
  position: relative;
  background:
    linear-gradient(135deg, rgba(10, 22, 40, 0.86), rgba(17, 34, 64, 0.78)),
    var(--hero-bg, linear-gradient(135deg, var(--navy-dark), var(--navy-mid)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(4rem, 10vw, 7rem) 1rem;
  isolation: isolate;
}

/* Soft gold blob in the corner for visual rhythm */
.hero--showcase::before {
  content: "";
  position: absolute;
  inset: auto -8% -30% auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(201, 168, 76, 0.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero--showcase .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background-color: rgba(201, 168, 76, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  text-transform: none;
  unicode-bidi: plaintext;
}

.hero--showcase .hero__title {
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero--showcase .hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  max-width: 64ch;
  margin-bottom: 2rem;
  opacity: 0.92;
}

.hero--showcase .hero__cta {
  margin-top: 1.5rem;
}


/* ==========================================================================
   === 13. Stats Strip — Numbers that build trust
   ==========================================================================
   Sits right under the Hero on the home page (and the about page). Four
   metric cards arranged in a grid that collapses to 2 cols on Mobile.
   ========================================================================== */
.stats-strip {
  background-color: var(--navy-mid);
  color: var(--white);
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.stats-strip__grid {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats-strip__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  text-align: center;
  padding: 1rem;
}

.stat-card__value {
  display: block;
  font-family: 'Tajawal', 'Cairo', sans-serif;
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.4rem;
  unicode-bidi: plaintext;
}

.stat-card__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.5;
}


/* ==========================================================================
   === 14. Section Wrapper + Decorative Headings
   ==========================================================================
   Standard padded section block used by the new Mission / Why / Industries
   blocks. Section heading gains a centered eyebrow + gold underline accent.
   ========================================================================== */
.section-block {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
}

.section-block__container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.section-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head__eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
  unicode-bidi: plaintext;
  margin-bottom: 0.5rem;
}

.section-head h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}

.section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--gold);
  border-radius: 999px;
}

.section-head__lede {
  max-width: 70ch;
  margin: 1rem auto 0;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.section-block--alt {
  background-color: #fbfaf6;
}


/* ==========================================================================
   === 15. Why-Choose Grid — three pillars from the real site
   ==========================================================================
   Speed / Credibility / Solutions — translated from eldawlya-co.com and
   re-laid out as three premium cards with icon, title, body.
   ========================================================================== */
.why-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why-card {
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.05);
  transition: transform 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease;
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.10);
}

.why-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-light));
  color: var(--navy-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.why-card__icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.why-card h3 {
  margin-bottom: 0.5rem;
}

.why-card p {
  color: var(--text-soft);
  line-height: 1.7;
}


/* ==========================================================================
   === 16. Service Cards v2 — image header + cleaner body
   ==========================================================================
   Rich variant of the existing .service-card used on Home. Each card now
   carries a coloured top band with an inline SVG icon plus the service
   description, on a white surface for stronger contrast / scannability.
   ========================================================================== */
.services-grid--v2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .services-grid--v2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .services-grid--v2 { grid-template-columns: repeat(3, 1fr); }
}

.service-card--v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.05);
  transition: transform 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease;
}

.service-card--v2:hover,
.service-card--v2:focus-within {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(10, 22, 40, 0.10);
}

.service-card--v2 .service-card__media {
  position: relative;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-mid);
}

.service-card--v2 .service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.10) 0%, rgba(10, 22, 40, 0.55) 100%);
}

.service-card--v2 .service-card__icon {
  position: absolute;
  bottom: -22px;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(10, 22, 40, 0.18);
}

html[dir="ltr"] .service-card--v2 .service-card__icon {
  right: auto;
  left: 1.25rem;
}

.service-card--v2 .service-card__body {
  padding: 1.75rem 1.25rem 1.25rem;
}

.service-card--v2 .service-card__title {
  color: var(--navy-dark);
  margin-bottom: 0.5rem;
}

.service-card--v2 .service-card__desc {
  color: var(--text-soft);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.service-card--v2 .service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  transition: color 200ms ease, gap 200ms ease;
}

.service-card--v2 .service-card__link::after {
  content: "←";
  display: inline-block;
  transition: transform 200ms ease;
}

html[dir="ltr"] .service-card--v2 .service-card__link::after {
  content: "→";
}

.service-card--v2 .service-card__link:hover {
  color: #b1922f;
  gap: 0.7rem;
}


/* ==========================================================================
   === 17. Industries Grid — Sectors we serve
   ========================================================================== */
.industries-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .industries-grid { grid-template-columns: repeat(6, 1fr); }
}

.industry-chip {
  background-color: var(--white);
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: var(--radius-sm);
  padding: 1rem 0.75rem;
  text-align: center;
  font-weight: 700;
  color: var(--navy-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: transform 200ms ease, border-color 200ms ease;
}

.industry-chip:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.industry-chip__icon {
  font-size: 2rem;
  line-height: 1;
}


/* ==========================================================================
   === 18. Testimonials — quote cards
   ========================================================================== */
.testimonials-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonial-card {
  position: relative;
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.05);
}

.testimonial-card::before {
  content: "“";
  position: absolute;
  top: -8px;
  right: 1rem;
  font-family: 'Tajawal', serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.45;
}

html[dir="ltr"] .testimonial-card::before {
  right: auto;
  left: 1rem;
}

.testimonial-card__quote {
  color: var(--navy-mid);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid rgba(10, 22, 40, 0.08);
  padding-top: 1rem;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}

.testimonial-card__name {
  font-weight: 700;
  color: var(--navy-dark);
  display: block;
}

.testimonial-card__role {
  font-size: 0.85rem;
  color: var(--text-soft);
}


/* ==========================================================================
   === 19. CTA Banner — final big call-to-action band
   ========================================================================== */
.cta-banner {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) 1rem;
  background:
    linear-gradient(135deg, rgba(10, 22, 40, 0.92), rgba(26, 58, 92, 0.85)),
    radial-gradient(circle at 30% 30%, rgba(201, 168, 76, 0.30), transparent 45%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: 1rem;
}

.cta-banner p {
  max-width: 60ch;
  margin: 0 auto 2rem;
  color: var(--white);
  opacity: 0.9;
  font-size: 1.05rem;
}

.cta-banner .hero__cta {
  justify-content: center;
}


/* ==========================================================================
   === 20. Mission / Vision split block
   ========================================================================== */
.mv-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mv-grid { grid-template-columns: 1fr 1fr; }
}

.mv-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.95)),
    linear-gradient(135deg, var(--gold-pale), transparent);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}

.mv-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -20% auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(closest-side, rgba(201, 168, 76, 0.18), transparent 70%);
}

.mv-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mv-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy-dark);
  color: var(--gold);
  border-radius: 10px;
}

.mv-card__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mv-card p {
  color: var(--navy-mid);
  line-height: 1.8;
}


/* ==========================================================================
   === 21. Image figure utility (rounded)
   ========================================================================== */
.figure-rounded {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(10, 22, 40, 0.12);
}

.figure-rounded img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   === 22. LTR overrides — flip alignment when html[dir="ltr"]
   ==========================================================================
   The whole stylesheet is RTL-first. These rules unwind the right-anchored
   layout when the language toggle switches to English so the page reads
   left-to-right naturally.
   ========================================================================== */
html[dir="ltr"] body                    { text-align: left; }
html[dir="ltr"] .site-footer            { text-align: left; direction: ltr; }
html[dir="ltr"] .contact-form input,
html[dir="ltr"] .contact-form textarea  { text-align: left; direction: ltr; }
html[dir="ltr"] .contact-form input::placeholder,
html[dir="ltr"] .contact-form textarea::placeholder { text-align: left; }

/* RTL bullet sits on the right; LTR puts it on the left. */
html[dir="ltr"] .ba-col li               { padding-right: 0; padding-left: 1.5rem; }
html[dir="ltr"] .ba-col li::before       { right: auto; left: 0; }

/* Dropdown anchors under the parent on the left in LTR. */
html[dir="ltr"] .dropdown                { right: auto; left: 0; }
html[dir="ltr"] .dropdown a              { text-align: left; }

/* Chevron stops mirroring in LTR. */
html[dir="ltr"] .has-dropdown > button::after  { transform: none; }
html[dir="ltr"] .faq__item summary::after      { transform: none; }
html[dir="ltr"] .faq__item[open] summary::after { transform: rotate(180deg); }

/* Eco trigger sits on the left in LTR for thumb reach on mobile. */
html[dir="ltr"] .eco-trigger             { right: auto; left: 1.5rem; }


/* ==========================================================================
   === 23. Locale visibility helpers — show/hide elements per language
   ==========================================================================
   `[data-show-lang="ar"]` is visible only when html[lang="ar"]; `[data-show-lang="en"]`
   only when html[lang="en"]. Used for one-off blocks where translating
   in-place via [data-i18n] is awkward (e.g., long marketing paragraphs).
   ========================================================================== */
html[lang="en"] [data-show-lang="ar"] { display: none !important; }
html[lang="ar"] [data-show-lang="en"] { display: none !important; }


/* ==========================================================================
   === 24. Small utilities — for new HTML
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
  unicode-bidi: plaintext;
}

.brand-strong {
  color: var(--gold);
  font-weight: 800;
}


/* ==========================================================================
   === 25. v3 — Lang Picker Dropdown + Mobile Drawer + Nav Icons + Polish
   ==========================================================================
   Lightweight dropdown around #lang-toggle, slide-over mobile drawer with
   backdrop, and nav-link icons rendered through CSS pseudo-elements so we
   don't have to touch the HTML on every page.
   ========================================================================== */

/* ----- 25.1 Lang Picker Dropdown -----------------------------------------
   The trigger keeps the existing `.lang-toggle` chip; JS wraps it in
   `.lang-picker` and appends `.lang-picker__menu` next to it.
   -------------------------------------------------------------------------- */
.lang-picker {
  position: relative;
  display: inline-flex;
}

.lang-toggle__flag {
  font-size: 1.05rem;
  line-height: 1;
}

.lang-toggle__chev {
  display: inline-block;
  font-size: 0.7rem;
  margin-inline-start: 0.2rem;
  transform: scaleX(-1);
  transition: transform 200ms ease;
  color: var(--gold);
}

html[dir="ltr"] .lang-toggle__chev { transform: none; }

.lang-toggle[aria-expanded="true"] .lang-toggle__chev {
  transform: scaleX(-1) rotate(180deg);
}

html[dir="ltr"] .lang-toggle[aria-expanded="true"] .lang-toggle__chev {
  transform: rotate(180deg);
}

.lang-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 200px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--white);
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(10, 22, 40, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  z-index: 250;
  animation: lang-menu-in 180ms ease both;
}

@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.lang-picker__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  color: var(--navy-mid);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.lang-picker__item:hover,
.lang-picker__item:focus-visible {
  background-color: rgba(201, 168, 76, 0.14);
  color: var(--navy-dark);
  outline: none;
}

.lang-picker__item[aria-selected="true"] {
  background-color: rgba(46, 204, 113, 0.10);
  color: var(--navy-dark);
}

.lang-picker__flag {
  font-size: 1.2rem;
  line-height: 1;
}

.lang-picker__name {
  flex: 1;
  font-size: 0.95rem;
}

.lang-picker__check {
  opacity: 0;
  color: var(--green);
  font-weight: 800;
  transition: opacity 150ms ease;
}

.lang-picker__item[aria-selected="true"] .lang-picker__check {
  opacity: 1;
}


/* ----- 25.2 Mobile Drawer (slide-over panel + backdrop) ------------------
   The hamburger now opens a full-height side drawer instead of a plain
   in-flow accordion. Backdrop dims the page for focus. Drawer slides
   from the inline-end (right in RTL, left in LTR).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .primary-nav {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    max-height: 100vh;
    background:
      linear-gradient(180deg, var(--navy-dark), var(--navy-mid));
    color: var(--white);
    padding: 5rem 1.25rem 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms ease;
    z-index: 220;
    box-shadow: -10px 0 30px rgba(10, 22, 40, 0.3);
  }

  html[dir="ltr"] .primary-nav {
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(10, 22, 40, 0.3);
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  /* Backdrop — generated dynamically by sibling rule */
  .primary-nav.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(10, 22, 40, 0.55);
    z-index: -1;
    animation: backdrop-in 200ms ease both;
  }

  @keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .primary-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  /* Mobile nav links — large, padded, with icon-style emoji prefix */
  .primary-nav a,
  .primary-nav > ul > li > button {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1rem;
    color: var(--white) !important;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    justify-content: flex-start;
    text-align: start;
  }

  .primary-nav a:hover,
  .primary-nav > ul > li > button:hover,
  .primary-nav a:focus-visible,
  .primary-nav > ul > li > button:focus-visible {
    background-color: rgba(201, 168, 76, 0.18) !important;
    color: var(--gold-light) !important;
  }

  /* Active link highlight on mobile drawer */
  body[data-page="home"]            .primary-nav [data-nav="home"],
  body[data-page="about"]           .primary-nav [data-nav="about"],
  body[data-page="contact"]         .primary-nav [data-nav="contact"],
  body[data-page="import-export"]   .primary-nav [data-nav="import-export"],
  body[data-page="shipping"]        .primary-nav [data-nav="shipping"],
  body[data-page="customs"]         .primary-nav [data-nav="customs"],
  body[data-page="storage"]         .primary-nav [data-nav="storage"],
  body[data-page="feasibility"]     .primary-nav [data-nav="feasibility"],
  body[data-page="supplier-check"]  .primary-nav [data-nav="supplier-check"] {
    color: var(--navy-dark) !important;
    background-color: var(--gold) !important;
    box-shadow: none;
  }

  /* Mobile dropdown — flat list (chevron flips, no positioning) */
  .has-dropdown { position: static; }
  .dropdown {
    position: static !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-top: 0.25rem;
    padding-inline-start: 0.5rem;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown,
  .has-dropdown > button[aria-expanded="true"] + .dropdown {
    display: block;
  }

  .dropdown a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem;
    padding-inline-start: 1rem;
  }

  /* Show services dropdown on mobile by default (no click-to-expand needed) */
  .primary-nav .has-dropdown > .dropdown { display: block !important; }
  .primary-nav .has-dropdown > button { pointer-events: none; opacity: 0.7; }

  /* Lang picker menu becomes wider on mobile */
  .lang-picker__menu { min-width: 220px; }

  /* Lock scroll when drawer open */
  body.is-nav-open { overflow: hidden; }
}


/* ----- 25.3 Nav-link icons via pseudo-element ----------------------------
   We attach an emoji glyph to each link based on its `[data-nav]` value.
   Works in both desktop and mobile, RTL-aware via `margin-inline-end`.
   -------------------------------------------------------------------------- */
.primary-nav [data-nav]::before,
.dropdown [data-nav]::before {
  display: inline-block;
  margin-inline-end: 0.5rem;
  font-size: 1.05em;
  vertical-align: -1px;
}

.primary-nav [data-nav="home"]::before          { content: "🏠"; }
.primary-nav [data-nav="about"]::before         { content: "🏢"; }
.primary-nav [data-nav="contact"]::before       { content: "📞"; }
.dropdown    [data-nav="import-export"]::before { content: "📦"; }
.dropdown    [data-nav="shipping"]::before      { content: "🚢"; }
.dropdown    [data-nav="customs"]::before       { content: "🏛️"; }
.dropdown    [data-nav="storage"]::before       { content: "🏬"; }
.dropdown    [data-nav="feasibility"]::before   { content: "📊"; }
.dropdown    [data-nav="supplier-check"]::before{ content: "🔎"; }

/* On desktop keep the icons subtle (only show on dropdown items) */
@media (min-width: 1024px) {
  .primary-nav > ul > li > a[data-nav]::before  { display: none; }
}


/* ----- 25.4 Dropdown polish ----------------------------------------------
   Wider dropdown panel on desktop with a thin gold left/right accent.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .dropdown {
    min-width: 280px;
    padding: 0.5rem;
    border-top: 3px solid var(--gold);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .dropdown a {
    border-radius: 8px;
    transition: background-color 200ms ease, padding 200ms ease;
  }

  .dropdown a:hover {
    padding-inline-start: 1.2rem;
  }
}


/* ----- 25.5 Hamburger upgrades on light header ---------------------------
   Stronger contrast + slightly bigger so it reads on the light surface.
   -------------------------------------------------------------------------- */
.site-header .nav-toggle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}


/* ==========================================================================
   === 26. Service-page hero — smaller, premium — when paired with a backdrop
   ========================================================================== */
.hero--showcase .hero__title {
  text-shadow: 0 2px 12px rgba(10, 22, 40, 0.4);
}

.hero--showcase .hero__subtitle {
  text-shadow: 0 1px 6px rgba(10, 22, 40, 0.45);
}


/* ==========================================================================
   === 27. Smooth-fade for [data-i18n] swaps so language change doesn't flash
   ========================================================================== */
[data-i18n], [data-i18n-ph] {
  transition: opacity 120ms ease;
}


/* ==========================================================================
   === 28. World-map ribbon (decorative, used on home/about)
   ========================================================================== */
.globe-ribbon {
  background:
    linear-gradient(180deg, var(--white), #fbf7e8);
  padding: 2rem 1rem;
  border-block: 1px solid rgba(201, 168, 76, 0.25);
  text-align: center;
  overflow: hidden;
}

.globe-ribbon__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-mid);
}

.globe-ribbon__line span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.globe-ribbon__line strong {
  color: var(--gold);
  font-weight: 800;
}


/* ==========================================================================
   === 29. Global polish — service cards on tablet need a tighter grid
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .services-grid--v2 { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   === 30. Smooth scroll for in-page anchors
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ==========================================================================
   === 31. Visual badge on numbers — pulse hover
   ========================================================================== */
.stat-card__value {
  position: relative;
  display: inline-block;
}

.stat-card__value::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(201, 168, 76, 0.0);
  border-radius: 50%;
  transition: border-color 250ms ease, transform 350ms ease;
  pointer-events: none;
}

.stat-card:hover .stat-card__value::after {
  border-color: rgba(201, 168, 76, 0.45);
  transform: rotate(45deg);
}


/* ==========================================================================
   === 32. Section block — pad-fix when followed by another section block
   ========================================================================== */
.section-block + .section-block,
.section-block + .section-block--alt {
  padding-top: 0;
}


/* ==========================================================================
   === 33. Body lock when mobile nav drawer open (set by main.js)
   ========================================================================== */
body.is-nav-open { overflow: hidden; }


/* ==========================================================================
   === 34. v4 — Service-page polish + About-page expansion + RTL/LTR fixes
   ==========================================================================
   This block:
     a) Styles `.values-grid` + `.value-card` so the "إيه بنقدمه" sections
        on every service page render as polished icon cards (matching the
        Home why-cards pattern).
     b) Adds `.service-process` numbered-step timeline.
     c) Adds `.timeline-block`, `.values-pillars`, `.locations-grid` for
        the expanded About page.
     d) Hardens RTL/LTR alignment so EN/ZH layouts read naturally.
     e) Refines color palette accents (more luxe shadows, smoother
        gradients, cleaner whites).
   ========================================================================== */


/* --- 34.1 Refined color tokens (additive — keeps cascade safe) ----------- */
:root {
  --surface-cream:     #fbf7ee;
  --surface-cream-2:   #f4ecd6;
  --shadow-soft:       0 4px 16px rgba(10, 22, 40, 0.06);
  --shadow-elev:       0 14px 36px rgba(10, 22, 40, 0.10);
  --shadow-deep:       0 22px 60px rgba(10, 22, 40, 0.18);
  --gold-grad:         linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 65%, #b08d2f 100%);
  --navy-grad:         linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
}


/* --- 34.2 Service-page value-card grid (rebuilt) -------------------------- */
.values-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (min-width: 768px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

.value-card {
  position: relative;
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  isolation: isolate;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto auto;
  width: 110px;
  height: 110px;
  background: radial-gradient(closest-side, rgba(201, 168, 76, 0.18), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

html[dir="ltr"] .value-card::before { inset: -1px auto auto -1px; }

.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-elev);
}

.value-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  color: var(--navy-dark);
  font-size: 1.15rem;
}

/* Auto-prepend a gold square icon based on common keyword in title.
   We use a generic decorative icon — pages may override per-card. */
.value-card h3::before {
  content: "✦";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-grad);
  color: var(--navy-dark);
  border-radius: 10px;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(201, 168, 76, 0.35);
}

.value-card p {
  color: #5d6b7c;
  font-size: 0.97rem;
  line-height: 1.7;
  margin: 0;
}


/* --- 34.3 Service Process — numbered steps timeline ---------------------- */
.service-process {
  background: linear-gradient(180deg, var(--surface-cream), var(--white));
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
}

.process-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  counter-reset: stepCounter;
}

@media (min-width: 768px)  { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }

.process-step {
  position: relative;
  background-color: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 16px;
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: start;
  counter-increment: stepCounter;
  box-shadow: var(--shadow-soft);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.process-step::before {
  content: counter(stepCounter, decimal-leading-zero);
  position: absolute;
  top: -18px;
  inset-inline-start: 1.25rem;
  width: 56px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-grad);
  color: var(--gold);
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  border-radius: 10px;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 14px rgba(10, 22, 40, 0.20);
}

.process-step:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: var(--shadow-elev);
}

.process-step__icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  filter: drop-shadow(0 4px 6px rgba(201, 168, 76, 0.25));
}

.process-step h3 {
  font-size: 1.05rem;
  color: var(--navy-dark);
  margin-bottom: 0.4rem;
}

.process-step p {
  color: #5d6b7c;
  font-size: 0.93rem;
  line-height: 1.65;
  margin: 0;
}


/* --- 34.4 About page — Values Pillars (4-card vertical icons) ----------- */
.values-pillars {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px)  { .values-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 16px;
  padding: 2rem 1.25rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-elev);
}

.pillar__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-grad);
  color: var(--navy-dark);
  border-radius: 18px;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.30);
}

.pillar__icon svg { width: 28px; height: 28px; fill: currentColor; }

.pillar h3 { color: var(--navy-dark); margin-bottom: 0.5rem; font-size: 1.1rem; }
.pillar p  { color: #5d6b7c; font-size: 0.95rem; line-height: 1.7; }


/* --- 34.5 About — Timeline (12-year journey) ---------------------------- */
.timeline-block {
  position: relative;
  padding: 1rem 0 0;
}

.timeline-block::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 22px;
  width: 3px;
  background: var(--gold-grad);
  border-radius: 999px;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .timeline-block::before { inset-inline-start: 50%; transform: translateX(-50%); }
  html[dir="ltr"] .timeline-block::before { inset-inline-start: 50%; transform: translateX(-50%); }
}

.timeline-item {
  position: relative;
  padding: 0.5rem 0 1.5rem 3.5rem;
  margin-bottom: 1rem;
}

html[dir="ltr"] .timeline-item { padding: 0.5rem 3.5rem 1.5rem 0; }
html[dir="rtl"] .timeline-item { padding: 0.5rem 3.5rem 1.5rem 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-start: 14px;
  width: 18px;
  height: 18px;
  background: var(--gold);
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-item {
    width: 50%;
    padding: 0.5rem 0;
  }
  .timeline-item:nth-child(odd)  { padding-inline-end: 3rem; }
  .timeline-item:nth-child(even) { margin-inline-start: 50%; padding-inline-start: 3rem; }
  .timeline-item:nth-child(odd)::before  { inset-inline-start: auto; inset-inline-end: -10px; }
  .timeline-item:nth-child(even)::before { inset-inline-start: -10px; }
}

.timeline-item__year {
  display: inline-block;
  background: var(--navy-dark);
  color: var(--gold);
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  unicode-bidi: plaintext;
}

.timeline-item__card {
  background: var(--white);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-soft);
}

.timeline-item__title {
  color: var(--navy-dark);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.timeline-item__body {
  color: #5d6b7c;
  font-size: 0.92rem;
  line-height: 1.65;
}


/* --- 34.6 About — Locations Grid (offices map) -------------------------- */
.locations-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px)  { .locations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .locations-grid { grid-template-columns: repeat(4, 1fr); } }

.location-card {
  background: linear-gradient(180deg, var(--white), var(--surface-cream));
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.location-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-elev);
}

.location-card__flag { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
.location-card__city { font-weight: 800; color: var(--navy-dark); font-size: 1rem; margin-bottom: 0.2rem; }
.location-card__country { color: var(--text-soft); font-size: 0.85rem; }


/* --- 34.7 RTL/LTR — alignment fixes for new sections -------------------- */
html[dir="ltr"] .hero,
html[dir="ltr"] .hero--showcase,
html[dir="ltr"] .stats-strip,
html[dir="ltr"] .section-block,
html[dir="ltr"] .cta-banner,
html[dir="ltr"] .globe-ribbon { text-align: left; }

html[dir="ltr"] .section-head,
html[dir="ltr"] .stats-strip__grid,
html[dir="ltr"] .stat-card,
html[dir="ltr"] .cta-banner,
html[dir="ltr"] .globe-ribbon__line { text-align: center; }

html[dir="ltr"] .hero__cta,
html[dir="ltr"] .cta-banner .hero__cta { justify-content: flex-start; }

html[dir="ltr"] .cta-banner .hero__cta { justify-content: center; }

html[dir="ltr"] .why-card,
html[dir="ltr"] .value-card,
html[dir="ltr"] .pillar,
html[dir="ltr"] .testimonial-card,
html[dir="ltr"] .service-card--v2 .service-card__body,
html[dir="ltr"] .mv-card,
html[dir="ltr"] .timeline-item__card,
html[dir="ltr"] .process-step { text-align: left; }

html[dir="ltr"] .pillar,
html[dir="ltr"] .location-card,
html[dir="ltr"] .stat-card { text-align: center; }

html[dir="ltr"] .hero__subtitle { margin-inline-start: 0; }


/* --- 34.8 Lang picker — anchor properly in LTR -------------------------- */
html[dir="ltr"] .lang-picker__menu {
  inset-inline-end: auto;
  inset-inline-start: 0;
}


/* --- 34.9 Bigger logo on tall headers ----------------------------------- */
@media (min-width: 1024px) {
  .site-logo img { height: 88px; max-height: 88px; max-width: 360px; }
  .site-header__inner { min-height: 100px; }
}


/* --- 34.10 Slightly softer hero on smaller screens ---------------------- */
@media (max-width: 767.98px) {
  .hero--showcase {
    padding: clamp(2.5rem, 8vw, 4rem) 1rem;
  }
  .hero--showcase .hero__title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .hero--showcase .hero__subtitle { font-size: 0.98rem; }
}


/* --- 34.11 Section block alt — better contrast ------------------------- */
.section-block--alt {
  background: linear-gradient(180deg, var(--surface-cream) 0%, #faf6e6 100%);
}


/* --- 34.12 Service card v2 — slightly richer hover --------------------- */
.service-card--v2:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-deep);
}


/* --- 34.13 Pillar 'large' variant for mission/vision (about) ----------- */
.mv-card h3 { font-size: 1.4rem; }
.mv-card p  { font-size: 1.02rem; }


/* --- 34.14 Industries chip refinement ---------------------------------- */
.industry-chip {
  background: linear-gradient(180deg, var(--white), var(--surface-cream));
  box-shadow: var(--shadow-soft);
}

.industry-chip:hover {
  box-shadow: var(--shadow-elev);
  border-color: var(--gold);
}


/* --- 34.15 Polished CTA banner ----------------------------------------- */
.cta-banner {
  border-block: 1px solid rgba(201, 168, 76, 0.30);
}


/* --- 34.16 Footer LTR overrides (no copyright misalignment) ----------- */
html[dir="ltr"] .site-footer__copyright { text-align: center; }


/* --- 34.17 Stats: bigger, bolder numbers on hero pages ----------------- */
.stat-card__value {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* --- 34.18 General typography tightening ------------------------------- */
.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw + 0.5rem, 2.4rem);
}

.hero--showcase .hero__title {
  font-size: clamp(1.9rem, 4.2vw + 1rem, 3.4rem);
}


/* --- 34.19 Mobile-only — drawer extra polish --------------------------- */
@media (max-width: 1023.98px) {
  .primary-nav { padding-top: 4.5rem; }
  .primary-nav > ul > li { width: 100%; }
}


/* --- 34.20 Force consistent gold focus ring everywhere ----------------- */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}


/* ==========================================================================
   === 35. v5 — BRAND PALETTE FROM THE LOGO (definitive override)
   ==========================================================================
   This block is the FINAL palette source, extracted directly from the
   three project PNGs (Logo-arabic.png / logo-title.png / Logo-icon.png).
   Dominant brand colors:
     #002460 (27%) — primary Navy Royal
     #001854 (26%) — Navy Deep
     #000C48 (12%) — Navy Darkest (header / footer)
     #006CB4 (15%) — Bright Blue accent (used wherever gold used to live)
     #003078 (rare) — Royal Navy mid

   Everything below overrides the older gold/navy values via CSS cascade
   order so we don't have to rip out the previous sections.
   ========================================================================== */

:root {
  /* Primary brand pulled directly from the logo */
  --brand-navy:        #002460;   /* 27% of pixels — the hero color */
  --brand-deep:        #001854;   /* 26% — for inner backgrounds */
  --brand-darkest:     #000C48;   /* deepest header / footer surface */
  --brand-blue:        #006CB4;   /* the bright blue accent */
  --brand-blue-light:  #4A9BD9;
  --brand-blue-pale:   #E8F2FB;
  --brand-sky:         #DCE9F7;
  --brand-mid:         #003078;

  /* Map the old custom-properties to the new palette so existing rules
     pick up the new colors without rewriting them. */
  --navy-dark:  var(--brand-darkest);
  --navy-mid:   var(--brand-deep);
  --navy-light: var(--brand-mid);

  /* The bright blue replaces gold across the site */
  --gold:       var(--brand-blue);
  --gold-light: var(--brand-blue-light);
  --gold-pale:  var(--brand-blue-pale);

  /* Surface / shadow refinement */
  --surface-cream:    var(--brand-blue-pale);
  --surface-cream-2:  var(--brand-sky);

  --shadow-soft:      0 4px 16px rgba(0, 36, 96, 0.08);
  --shadow-elev:      0 14px 36px rgba(0, 36, 96, 0.14);
  --shadow-deep:      0 22px 60px rgba(0, 24, 84, 0.22);

  --gold-grad:        linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue) 65%, var(--brand-mid) 100%);
  --navy-grad:        linear-gradient(135deg, var(--brand-darkest) 0%, var(--brand-navy) 100%);
}


/* ----- 35.1 Header — keep the light cream surface but replace gold accents
   with the bright blue from the logo ------------------------------------- */
.site-header {
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-blue-pale) 100%);
  box-shadow:
    0 1px 0 rgba(0, 108, 180, 0.50),
    0 4px 12px rgba(0, 36, 96, 0.06);
}


/* ----- 35.2 Lang picker recolor --------------------------------------- */
.lang-toggle {
  background-color: var(--brand-navy);
  color: var(--white);
  border-color: var(--brand-blue);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background-color: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 108, 180, 0.45);
}

.lang-toggle__chev { color: var(--brand-blue); }


/* ----- 35.3 Hero — bluer overlay matches the brand --------------------- */
.hero--showcase {
  background:
    linear-gradient(135deg, rgba(0, 12, 72, 0.88), rgba(0, 36, 96, 0.78)),
    var(--hero-bg, linear-gradient(135deg, var(--brand-darkest), var(--brand-navy)));
}

.hero--showcase::before {
  background: radial-gradient(closest-side, rgba(0, 108, 180, 0.30), transparent 70%);
}

.hero--showcase .hero__eyebrow {
  background-color: rgba(0, 108, 180, 0.22);
  border-color: rgba(0, 108, 180, 0.55);
  color: var(--brand-blue-light);
}


/* ----- 35.4 Stats strip — blue bg, white labels, sky-blue digits ------ */
.stats-strip {
  background: var(--brand-navy);
  border-block: 1px solid rgba(0, 108, 180, 0.30);
}

.stat-card__value {
  background: linear-gradient(135deg, #9DCBEC 0%, #4A9BD9 50%, #006CB4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ----- 35.5 Why-card icons — blue gradient instead of gold ------------ */
.why-card__icon {
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
  color: var(--white);
}


/* ----- 35.6 Service cards v2 — refresh icon and link colors ----------- */
.service-card--v2 .service-card__icon {
  background: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(0, 108, 180, 0.35);
}

.service-card--v2 .service-card__link {
  color: var(--brand-blue);
}

.service-card--v2 .service-card__link:hover {
  color: var(--brand-mid);
}

.service-card--v2:hover {
  border-color: var(--brand-blue);
}


/* ----- 35.7 Industries grid recolor ----------------------------------- */
.industry-chip {
  background: linear-gradient(180deg, var(--white), var(--brand-blue-pale));
  border-color: rgba(0, 108, 180, 0.35);
  color: var(--brand-navy);
}

.industry-chip:hover {
  border-color: var(--brand-blue);
}


/* ----- 35.8 Testimonials — quote mark in brand blue ------------------- */
.testimonial-card::before {
  color: var(--brand-blue);
  opacity: 0.45;
}

.testimonial-card__avatar {
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
  color: var(--white);
}


/* ----- 35.9 CTA banner — blue overlay --------------------------------- */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(0, 12, 72, 0.92), rgba(0, 36, 96, 0.86)),
    radial-gradient(circle at 30% 30%, rgba(0, 108, 180, 0.40), transparent 45%);
  border-block: 1px solid rgba(0, 108, 180, 0.30);
}


/* ----- 35.10 Mission/Vision card — blue tint instead of gold-pale ----- */
.mv-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.96)),
    linear-gradient(135deg, var(--brand-blue-pale), transparent);
  border: 1px solid rgba(0, 108, 180, 0.35);
}

.mv-card::before {
  background: radial-gradient(closest-side, rgba(0, 108, 180, 0.18), transparent 70%);
}

.mv-card__icon {
  background-color: var(--brand-darkest);
  color: var(--brand-blue-light);
}


/* ----- 35.11 Buttons — keep WhatsApp green, but ghost gets blue border  */
.btn--ghost {
  border-color: var(--white);
  color: var(--white);
}


/* ----- 35.12 FAQ chevron + section-head accent in brand blue ---------- */
.section-head h2::after {
  background-color: var(--brand-blue);
}

.section-head__eyebrow {
  color: var(--brand-blue);
}

.eyebrow {
  color: var(--brand-blue);
}

.faq__item summary::after {
  color: var(--brand-blue);
}


/* ----- 35.13 Mobile drawer — keep dark navy, recolor active link ------ */
@media (max-width: 1023.98px) {
  body[data-page="home"]            .primary-nav [data-nav="home"],
  body[data-page="about"]           .primary-nav [data-nav="about"],
  body[data-page="contact"]         .primary-nav [data-nav="contact"],
  body[data-page="import-export"]   .primary-nav [data-nav="import-export"],
  body[data-page="shipping"]        .primary-nav [data-nav="shipping"],
  body[data-page="customs"]         .primary-nav [data-nav="customs"],
  body[data-page="storage"]         .primary-nav [data-nav="storage"],
  body[data-page="feasibility"]     .primary-nav [data-nav="feasibility"],
  body[data-page="supplier-check"]  .primary-nav [data-nav="supplier-check"] {
    background-color: var(--brand-blue) !important;
    color: var(--white) !important;
  }
}


/* ----- 35.14 Active link on light header ------------------------------ */
body[data-page="home"]            .site-header .primary-nav [data-nav="home"],
body[data-page="about"]           .site-header .primary-nav [data-nav="about"],
body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"],
body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"],
body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"],
body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"],
body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"],
body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"],
body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"] {
  background-color: rgba(0, 108, 180, 0.12);
  box-shadow: inset 0 -3px 0 var(--brand-blue);
  color: var(--brand-darkest);
}


/* ----- 35.15 Service-page values cards — blue icon -------------------- */
.value-card h3::before {
  background: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(0, 108, 180, 0.40);
}


/* ----- 35.16 Process step numbers ------------------------------------- */
.process-step::before {
  background: var(--navy-grad);
  color: var(--brand-blue-light);
}


/* ----- 35.17 Pillar icon backgrounds ---------------------------------- */
.pillar__icon {
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
  color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 108, 180, 0.30);
}


/* ----- 35.18 Timeline gold line → blue line --------------------------- */
.timeline-block::before {
  background: linear-gradient(180deg, var(--brand-blue-light), var(--brand-blue));
}

.timeline-item::before {
  background: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 108, 180, 0.25);
}

.timeline-item__year {
  background: var(--brand-darkest);
  color: var(--brand-blue-light);
}


/* ----- 35.19 Locations cards ------------------------------------------ */
.location-card {
  background: linear-gradient(180deg, var(--white), var(--brand-blue-pale));
  border-color: rgba(0, 108, 180, 0.35);
}

.location-card:hover { border-color: var(--brand-blue); }


/* ----- 35.20 Globe ribbon recolor ------------------------------------- */
.globe-ribbon {
  background: linear-gradient(180deg, var(--white), var(--brand-blue-pale));
  border-block: 1px solid rgba(0, 108, 180, 0.25);
}

.globe-ribbon__line strong { color: var(--brand-blue); }


/* ----- 35.21 Service card glassmorphism — blue tint ------------------- */
.service-card {
  background-color: rgba(0, 36, 96, 0.40);
  border: 1px solid rgba(0, 108, 180, 0.40);
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--brand-blue);
}

.service-card a {
  color: var(--brand-blue-light);
}


/* ----- 35.22 Force focus ring to brand blue -------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 3px !important;
}


/* ----- 35.23 Lang picker dropdown — blue tints ------------------------ */
.lang-picker__menu {
  border: 1px solid rgba(0, 108, 180, 0.30);
}

.lang-picker__item:hover,
.lang-picker__item:focus-visible {
  background-color: rgba(0, 108, 180, 0.14);
}

.lang-picker__item[aria-selected="true"] {
  background-color: rgba(0, 108, 180, 0.10);
}

.lang-picker__check { color: var(--brand-blue); }


/* ----- 35.24 BA card — accent column blue ----------------------------- */
.ba-col--after {
  border: 2px solid var(--brand-blue);
  background-color: var(--brand-blue-pale);
}

.ba-col--after li::before {
  color: var(--green);   /* keep green check for clarity */
}


/* ----- 35.25 Service cards (rich v2) — link arrow color -------------- */
.service-card--v2 .service-card__link::after {
  color: var(--brand-blue);
}


/* ==========================================================================
   === 36. v6 — ORANGE GRADIENT FROM THE LOGO (replaces the sky-blue look)
   ==========================================================================
   The logo's warm tones, extracted directly:
     #FA8200 (19%) — primary orange
     #FA9614, #FA8C0A — orange variants
     #FAA01E — amber
     #FAC850, #FAD25A — gold honey
     #FADC64 — sun yellow

   We swap the cool sky-blue gradients (`--gold-grad`, hero accents,
   stat numbers, etc.) with a warm sunset-style orange→amber gradient
   that blends with the navy already on the page. Brand navy stays.
   ========================================================================== */

:root {
  /* New warm palette pulled straight from the logo */
  --brand-orange:        #FA8200;
  --brand-orange-deep:   #E37200;
  --brand-amber:         #FAA01E;
  --brand-honey:         #FAC850;
  --brand-sun:           #FADC64;
  --brand-orange-pale:   #FFEFD5;

  /* The single source-of-truth gradient we use everywhere a "shine"
     accent is needed (icons, eyebrows, stats, focus). */
  --warm-grad:           linear-gradient(135deg,
                                         var(--brand-sun)  0%,
                                         var(--brand-honey) 35%,
                                         var(--brand-amber) 65%,
                                         var(--brand-orange) 100%);

  --warm-grad-strong:    linear-gradient(135deg,
                                         var(--brand-amber)  0%,
                                         var(--brand-orange) 60%,
                                         var(--brand-orange-deep) 100%);

  /* Override the older blue-leaning aliases so existing rules pick up
     the warm gradient without hand-editing each one. */
  --gold-grad:           var(--warm-grad-strong);
  --gold:                var(--brand-orange);
  --gold-light:          var(--brand-amber);
  --gold-pale:           var(--brand-orange-pale);
}


/* ----- 36.1 Header — keep cream surface but the bottom accent is now
   warm orange instead of brand-blue ------------------------------------- */
.site-header {
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-orange-pale) 100%);
  box-shadow:
    0 1px 0 var(--brand-orange),
    0 4px 12px rgba(250, 130, 0, 0.12);
}


/* ----- 36.2 Lang toggle — navy bg, orange border, orange chevron ------- */
.lang-toggle {
  background-color: var(--brand-darkest);
  color: var(--white);
  border-color: var(--brand-orange);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--warm-grad-strong);
  color: var(--brand-darkest);
  box-shadow: 0 4px 12px rgba(250, 130, 0, 0.45);
}

.lang-toggle__chev { color: var(--brand-orange); }


/* ----- 36.3 Hero overlay gets a warm halo ----------------------------- */
.hero--showcase::before {
  background: radial-gradient(closest-side, rgba(250, 130, 0, 0.32), transparent 70%);
}

.hero--showcase .hero__eyebrow {
  background: linear-gradient(135deg, rgba(250, 130, 0, 0.22), rgba(250, 200, 80, 0.18));
  border: 1px solid rgba(250, 130, 0, 0.50);
  color: var(--brand-sun);
}


/* ----- 36.4 Stats numbers — warm gradient text ----------------------- */
.stat-card__value {
  background: var(--warm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ----- 36.5 Why-card icons — warm gradient --------------------------- */
.why-card__icon {
  background: var(--warm-grad-strong);
  color: var(--white);
}


/* ----- 36.6 Service-card icon (rich v2) — warm ----------------------- */
.service-card--v2 .service-card__icon {
  background: var(--warm-grad-strong);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(250, 130, 0, 0.45);
}

.service-card--v2 .service-card__link        { color: var(--brand-orange); }
.service-card--v2 .service-card__link:hover  { color: var(--brand-orange-deep); }
.service-card--v2 .service-card__link::after { color: var(--brand-orange); }
.service-card--v2:hover                      { border-color: var(--brand-orange); }


/* ----- 36.7 Industries chip - warm ----------------------------------- */
.industry-chip {
  background: linear-gradient(180deg, var(--white), var(--brand-orange-pale));
  border-color: rgba(250, 130, 0, 0.45);
  color: var(--brand-darkest);
}

.industry-chip:hover { border-color: var(--brand-orange); }


/* ----- 36.8 Testimonials — warm quote mark + warm avatars ------------ */
.testimonial-card::before {
  background: var(--warm-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.7;
}

.testimonial-card__avatar {
  background: var(--warm-grad-strong);
  color: var(--white);
}


/* ----- 36.9 CTA banner — keep the deep navy but layer warm halos ----- */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(0, 12, 72, 0.92), rgba(0, 36, 96, 0.85)),
    radial-gradient(circle at 30% 30%, rgba(250, 130, 0, 0.45), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(250, 220, 100, 0.20), transparent 50%);
  border-block: 1px solid rgba(250, 130, 0, 0.30);
}


/* ----- 36.10 Mission/Vision card — warm tint ------------------------- */
.mv-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.97)),
    linear-gradient(135deg, var(--brand-orange-pale), transparent);
  border: 1px solid rgba(250, 130, 0, 0.35);
}

.mv-card::before {
  background: radial-gradient(closest-side, rgba(250, 130, 0, 0.22), transparent 70%);
}

.mv-card__icon {
  background: var(--brand-darkest);
  color: var(--brand-amber);
}


/* ----- 36.11 Section heading underline + eyebrow -- warm ------------- */
.section-head h2::after  { background: var(--warm-grad); }
.section-head__eyebrow   { color: var(--brand-orange); }
.eyebrow                 { color: var(--brand-orange); }
.faq__item summary::after { color: var(--brand-orange); }


/* ----- 36.12 Active link — warm bottom-border on light header --------- */
body[data-page="home"]            .site-header .primary-nav [data-nav="home"],
body[data-page="about"]           .site-header .primary-nav [data-nav="about"],
body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"],
body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"],
body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"],
body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"],
body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"],
body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"],
body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"] {
  background-color: rgba(250, 130, 0, 0.14);
  box-shadow: inset 0 -3px 0 var(--brand-orange);
  color: var(--brand-darkest);
}

@media (max-width: 1023.98px) {
  body[data-page="home"]            .primary-nav [data-nav="home"],
  body[data-page="about"]           .primary-nav [data-nav="about"],
  body[data-page="contact"]         .primary-nav [data-nav="contact"],
  body[data-page="import-export"]   .primary-nav [data-nav="import-export"],
  body[data-page="shipping"]        .primary-nav [data-nav="shipping"],
  body[data-page="customs"]         .primary-nav [data-nav="customs"],
  body[data-page="storage"]         .primary-nav [data-nav="storage"],
  body[data-page="feasibility"]     .primary-nav [data-nav="feasibility"],
  body[data-page="supplier-check"]  .primary-nav [data-nav="supplier-check"] {
    background: var(--warm-grad-strong) !important;
    color: var(--brand-darkest) !important;
  }
}


/* ----- 36.13 Service-page value card icons -- warm ------------------- */
.value-card h3::before {
  background: var(--warm-grad-strong);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(250, 130, 0, 0.45);
}


/* ----- 36.14 Process step badges — warm ------------------------------ */
.process-step::before {
  background: linear-gradient(135deg, var(--brand-darkest), var(--brand-navy));
  color: var(--brand-amber);
}


/* ----- 36.15 Pillar icon — warm -------------------------------------- */
.pillar__icon {
  background: var(--warm-grad-strong);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(250, 130, 0, 0.35);
}


/* ----- 36.16 Timeline dots / year pill - warm ----------------------- */
.timeline-block::before {
  background: var(--warm-grad);
}

.timeline-item::before {
  background: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(250, 130, 0, 0.25);
}

.timeline-item__year {
  background: var(--brand-darkest);
  color: var(--brand-amber);
}


/* ----- 36.17 Locations cards - warm border --------------------------- */
.location-card {
  background: linear-gradient(180deg, var(--white), var(--brand-orange-pale));
  border-color: rgba(250, 130, 0, 0.35);
}

.location-card:hover { border-color: var(--brand-orange); }


/* ----- 36.18 Globe ribbon recolor ------------------------------------ */
.globe-ribbon {
  background: linear-gradient(180deg, var(--white), var(--brand-orange-pale));
  border-block: 1px solid rgba(250, 130, 0, 0.30);
}

.globe-ribbon__line strong { color: var(--brand-orange); }


/* ----- 36.19 BA card after-column - warm ---------------------------- */
.ba-col--after {
  border: 2px solid var(--brand-orange);
  background-color: var(--brand-orange-pale);
}


/* ----- 36.20 Buttons — WhatsApp green stays, primary becomes warm --- */
.btn--whatsapp {
  background-color: var(--green);
}

/* "primary" warm button class (use where ghost is too subtle) */
.btn--warm {
  background: var(--warm-grad-strong);
  color: var(--brand-darkest);
  border-color: transparent;
  font-weight: 800;
}

.btn--warm:hover,
.btn--warm:focus-visible {
  background: var(--warm-grad);
  box-shadow: 0 6px 18px rgba(250, 130, 0, 0.45);
}


/* ----- 36.21 Service-card glassmorphism — warm border ---------------- */
.service-card {
  border: 1px solid rgba(250, 130, 0, 0.40);
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--brand-orange);
}

.service-card a       { color: var(--brand-amber); }
.service-card a:hover { color: var(--brand-orange); }


/* ----- 36.22 Lang picker dropdown — warm tints ----------------------- */
.lang-picker__menu {
  border: 1px solid rgba(250, 130, 0, 0.35);
}

.lang-picker__item:hover,
.lang-picker__item:focus-visible {
  background-color: rgba(250, 130, 0, 0.14);
}

.lang-picker__item[aria-selected="true"] {
  background-color: rgba(250, 130, 0, 0.10);
}

.lang-picker__check { color: var(--brand-orange); }


/* ----- 36.23 Focus ring -- warm ------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-orange) !important;
  outline-offset: 3px !important;
}


/* ----- 36.24 Stats strip background keeps deep navy, accent-line warm  */
.stats-strip {
  background: var(--brand-darkest);
  border-block: 1px solid rgba(250, 130, 0, 0.30);
}


/* ----- 36.25 Hero subtitle — slight warm glow -------------------- */
.hero--showcase .hero__title {
  text-shadow: 0 2px 18px rgba(250, 130, 0, 0.18);
}


/* ==========================================================================
   === 37. v7 — White header + reorder (logo right · lang · burger far left)
   ==========================================================================
   Pure white header surface, no cream tint. Layout via flex `order` so the
   visual order in RTL becomes:  [logo  ………  lang  burger]
   And in LTR (English / Chinese): [burger  lang  ………  logo].

   This keeps the existing HTML untouched on every page — markup stays in
   the order: logo → burger → nav → lang.
   ========================================================================== */

/* ---- 37.1 Pure white header --------------------------------------------- */
.site-header {
  background: var(--white);
  box-shadow:
    0 1px 0 rgba(0, 36, 96, 0.08),
    0 4px 16px rgba(0, 36, 96, 0.04);
  border-bottom: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}


/* ---- 37.2 Reorder children — logo / nav / lang / burger ----------------- */
.site-header .site-logo  { order: 1; margin-inline-end: auto; }
.site-header .primary-nav { order: 2; }
.site-header .lang-picker,
.site-header #lang-toggle { order: 3; }
.site-header .nav-toggle  { order: 4; }


/* ---- 37.3 Burger button — minimal pill on the far end ------------------ */
.site-header .nav-toggle {
  background: var(--brand-orange-pale);
  border: 1px solid rgba(250, 130, 0, 0.35);
  color: var(--brand-darkest);
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.site-header .nav-toggle span { background-color: var(--brand-darkest); }

.site-header .nav-toggle:hover {
  background: var(--warm-grad);
  border-color: var(--brand-orange);
}


/* ---- 37.4 New lang picker chip — flag + native name + soft chevron ----- */
.lang-toggle {
  background: var(--white);
  color: var(--brand-darkest);
  border: 1px solid rgba(0, 36, 96, 0.12);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0, 36, 96, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease,
              border-color 200ms ease, background-color 200ms ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brand-orange);
  background: var(--brand-orange-pale);
  color: var(--brand-darkest);
  box-shadow: 0 6px 16px rgba(250, 130, 0, 0.20);
}

/* The flag is now a circular badge */
.lang-toggle__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--brand-orange-pale);
  border: 1px solid rgba(250, 130, 0, 0.30);
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
}

.lang-toggle__label {
  display: inline-block;
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.lang-toggle__chev {
  font-size: 0.7rem;
  opacity: 0.55;
  margin-inline-start: 0.15rem;
  transition: transform 200ms ease, opacity 200ms ease;
}

.lang-toggle:hover .lang-toggle__chev,
.lang-toggle[aria-expanded="true"] .lang-toggle__chev {
  opacity: 1;
}


/* ---- 37.5 Lang menu items — bigger, classier --------------------------- */
.lang-picker__menu {
  min-width: 220px;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid rgba(0, 36, 96, 0.10);
  border-radius: 16px;
  box-shadow:
    0 16px 40px rgba(0, 36, 96, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.lang-picker__item {
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  gap: 0.7rem;
}

.lang-picker__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--brand-orange-pale);
  border: 1px solid rgba(250, 130, 0, 0.30);
  border-radius: 50%;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.lang-picker__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-darkest);
}

.lang-picker__item[aria-selected="true"] .lang-picker__flag {
  background: var(--warm-grad);
  border-color: var(--brand-orange);
}


/* ---- 37.6 Mobile-only: tighten spacing on the new layout --------------- */
@media (max-width: 767.98px) {
  .site-header__inner {
    gap: 0.35rem;
  }
  .lang-toggle {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  .lang-toggle__label { display: none; } /* on tiny screens keep flag-only chip */
  .lang-toggle__flag  { width: 26px; height: 26px; }

  .site-logo img {
    height: 56px;
    max-height: 56px;
    max-width: 200px;
  }
}


/* ---- 37.7 Header active link — keep warm orange tint ------------------ */
body[data-page="home"]            .site-header .primary-nav [data-nav="home"],
body[data-page="about"]           .site-header .primary-nav [data-nav="about"],
body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"],
body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"],
body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"],
body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"],
body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"],
body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"],
body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"] {
  background-color: var(--brand-orange-pale);
  box-shadow: inset 0 -3px 0 var(--brand-orange);
  color: var(--brand-darkest);
}

.site-header .primary-nav a,
.site-header .primary-nav > ul > li > button {
  color: var(--brand-darkest);
  font-weight: 700;
}

.site-header .primary-nav a:hover,
.site-header .primary-nav > ul > li > button:hover,
.site-header .primary-nav a:focus-visible,
.site-header .primary-nav > ul > li > button:focus-visible {
  color: var(--brand-orange-deep);
  background-color: var(--brand-orange-pale);
}

.site-header .has-dropdown > button::after { color: var(--brand-orange); }


/* ---- 37.8 Logo wrapper margin guarantees burger on far end ----------- */
.site-header .site-logo { flex-shrink: 0; }


/* ==========================================================================
   === 38. v8 — Desktop nav becomes its own bar UNDER the header
   ==========================================================================
   On ≥ 1024 px viewports we lift `.primary-nav` out of `.site-header__inner`
   and pin it as a second sticky band directly below the header. Mobile
   keeps the slide-over drawer behavior unchanged.
   ========================================================================== */
@media (min-width: 1024px) {

  /* The header's inner row no longer hosts the nav — just logo + lang */
  .site-header__inner {
    min-height: 96px;
  }

  /* Pull the nav OUT of normal flow inside the header and position it
     absolutely below the header band. Sticky on the parent <header>
     keeps it stuck to the top during scroll. */
  .site-header { position: sticky; top: 0; z-index: 100; }

  .site-header .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--brand-darkest);
    border-block: 1px solid rgba(250, 130, 0, 0.30);
    box-shadow: 0 6px 20px rgba(0, 36, 96, 0.10);
    padding: 0;
  }

  /* Inner ul becomes a centered horizontal flex with consistent spacing */
  .site-header .primary-nav > ul {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
  }

  .site-header .primary-nav a,
  .site-header .primary-nav > ul > li > button {
    color: var(--white) !important;
    font-weight: 700;
    font-size: 0.98rem;
    min-height: 56px;
    padding: 0.85rem 1.1rem;
    border-radius: 0;
    background: transparent;
    border: 0;
    position: relative;
  }

  /* Hover/focus — gentle warm underline that grows */
  .site-header .primary-nav a::after,
  .site-header .primary-nav > ul > li > button::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--warm-grad-strong);
    border-radius: 2px 2px 0 0;
    transition: width 220ms ease;
  }

  .site-header .primary-nav a:hover::after,
  .site-header .primary-nav a:focus-visible::after,
  .site-header .primary-nav > ul > li > button:hover::after,
  .site-header .primary-nav > ul > li > button:focus-visible::after {
    width: 80%;
  }

  .site-header .primary-nav a:hover,
  .site-header .primary-nav a:focus-visible,
  .site-header .primary-nav > ul > li > button:hover,
  .site-header .primary-nav > ul > li > button:focus-visible {
    color: var(--brand-amber) !important;
    background: rgba(250, 130, 0, 0.10);
  }

  /* Active link — full warm underline + light orange tint background */
  body[data-page="home"]            .site-header .primary-nav [data-nav="home"],
  body[data-page="about"]           .site-header .primary-nav [data-nav="about"],
  body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"],
  body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"],
  body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"],
  body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"],
  body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"],
  body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"],
  body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"] {
    background: rgba(250, 130, 0, 0.18);
    color: var(--brand-amber) !important;
    box-shadow: none;
  }

  body[data-page="home"]            .site-header .primary-nav [data-nav="home"]::after,
  body[data-page="about"]           .site-header .primary-nav [data-nav="about"]::after,
  body[data-page="contact"]         .site-header .primary-nav [data-nav="contact"]::after,
  body[data-page="import-export"]   .site-header .primary-nav [data-nav="import-export"]::after,
  body[data-page="shipping"]        .site-header .primary-nav [data-nav="shipping"]::after,
  body[data-page="customs"]         .site-header .primary-nav [data-nav="customs"]::after,
  body[data-page="storage"]         .site-header .primary-nav [data-nav="storage"]::after,
  body[data-page="feasibility"]     .site-header .primary-nav [data-nav="feasibility"]::after,
  body[data-page="supplier-check"]  .site-header .primary-nav [data-nav="supplier-check"]::after {
    width: 80%;
  }

  /* Burger hidden on desktop (drawer is mobile-only) */
  .site-header .nav-toggle { display: none; }

  /* Dropdown anchor — relative to the link cell, hangs below nav band */
  .site-header .has-dropdown { position: relative; }

  .site-header .dropdown {
    top: 100%;
    margin-top: 0;
    background: var(--brand-darkest);
    border: 1px solid rgba(250, 130, 0, 0.30);
    border-top: 3px solid var(--brand-orange);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 12px 30px rgba(0, 36, 96, 0.25);
    min-width: 280px;
  }

  .site-header .dropdown a {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent;
  }

  .site-header .dropdown a::after { display: none; } /* no underline inside dropdown */

  .site-header .dropdown a:hover,
  .site-header .dropdown a:focus-visible {
    background: rgba(250, 130, 0, 0.18) !important;
    color: var(--brand-amber) !important;
    padding-inline-start: 1.4rem;
  }

  /* Page main content — push down so the nav band doesn't cover the hero */
  body main {
    padding-top: 56px;  /* matches nav-bar min-height */
  }

  /* Add header height to scroll-anchor offset for in-page links */
  html {
    scroll-padding-top: calc(96px + 56px + 8px);
  }
}

/* On mobile we revert to the existing drawer (Section 25.2) — the absolute
   positioning above is desktop-only. */


/* ==========================================================================
   === 39. v9 — Maps Section (3 offices in tabs, before footer)
   ========================================================================== */

.maps-section {
  background: linear-gradient(180deg, var(--white), var(--brand-orange-pale));
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  border-top: 1px solid rgba(250, 130, 0, 0.18);
}

.maps-section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Tabs row */
.maps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid rgba(0, 36, 96, 0.08);
}

.maps-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0.85rem 1.1rem;
  margin-bottom: -2px;
  color: var(--navy-mid);
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
  border-radius: 8px 8px 0 0;
}

.maps-tabs__btn:hover {
  color: var(--brand-orange);
  background: rgba(250, 130, 0, 0.06);
}

.maps-tabs__btn[aria-selected="true"] {
  color: var(--brand-darkest);
  border-bottom-color: var(--brand-orange);
}

.maps-tabs__flag {
  font-size: 1.2rem;
  line-height: 1;
}

.maps-tabs__pill {
  margin-inline-start: auto;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: var(--warm-grad-strong);
  color: var(--brand-darkest);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Panel — embedded map + address card side-by-side */
.maps-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .maps-panel { grid-template-columns: 2fr 1fr; }
}

.maps-panel[hidden] { display: none; }

.maps-panel__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 36, 96, 0.10);
  box-shadow: var(--shadow-elev);
  background: #eef2f7;
}

.maps-panel__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.maps-panel__info {
  background: var(--white);
  border: 1px solid rgba(250, 130, 0, 0.30);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.maps-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: var(--warm-grad);
  color: var(--brand-darkest);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
}

.maps-panel__city {
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand-darkest);
  margin: 0;
}

.maps-panel__addr {
  color: var(--navy-mid);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

.maps-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.7rem 1rem;
  background: var(--brand-darkest);
  color: var(--white);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}

.maps-panel__cta:hover {
  background: var(--warm-grad-strong);
  color: var(--brand-darkest);
  transform: translateY(-1px);
}


/* ==========================================================================
   === 40. v10 — Bigger logo + matching button colors + flag SVG chip
   ========================================================================== */

/* ---- 40.1 LOGO sizes — bigger again -------------------------------- */
.site-logo img { height: 72px; max-height: 72px; max-width: 300px; }

@media (min-width: 768px) {
  .site-logo img { height: 88px; max-height: 88px; max-width: 360px; }
}

@media (min-width: 1024px) {
  .site-logo img  { height: 100px; max-height: 100px; max-width: 420px; }
  .site-header__inner { min-height: 120px; }
}

@media (max-width: 480px) {
  .site-logo img { height: 60px; max-height: 60px; max-width: 240px; }
}


/* ---- 40.2 Burger button — solid orange filled --------------------------- */
.site-header .nav-toggle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--warm-grad-strong);
  border: 0;
  color: var(--brand-darkest);
  box-shadow: 0 6px 16px rgba(250, 130, 0, 0.32);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.site-header .nav-toggle span { background-color: var(--brand-darkest); height: 3px; width: 24px; }

.site-header .nav-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(250, 130, 0, 0.42);
}


/* ---- 40.3 Lang chip — matches burger style, with real flag SVG --------- */
.lang-toggle {
  width: auto;
  height: 52px;
  padding: 0 0.85rem 0 0.5rem;
  background: var(--white);
  color: var(--brand-darkest);
  border: 1px solid rgba(0, 36, 96, 0.12);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 36, 96, 0.08);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--brand-orange);
  background: linear-gradient(180deg, var(--white), var(--brand-orange-pale));
  box-shadow: 0 8px 18px rgba(250, 130, 0, 0.25);
}

.lang-toggle__flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.lang-toggle__flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-toggle__chev {
  font-size: 0.65rem;
  opacity: 0.55;
  margin-inline-start: 0.15rem;
  transition: transform 200ms ease;
}


/* ---- 40.4 Lang menu items — flag circles matching the chip ------------ */
.lang-picker__flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.lang-picker__flag svg { width: 100%; height: 100%; display: block; }

.lang-picker__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--brand-darkest);
}

.lang-picker__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 1px;
}


/* ---- 40.5 Mobile only — keep label on chip, no truncation -------------- */
@media (max-width: 480px) {
  .lang-toggle { height: 48px; padding: 0 0.65rem 0 0.4rem; gap: 0.4rem; }
  .lang-toggle__flag { width: 30px; height: 30px; }
  .lang-toggle__label { font-size: 0.85rem; }
  .site-header .nav-toggle { width: 48px; height: 48px; border-radius: 12px; }
}


/* ==========================================================================
   === 41. v11 — Infinite-scroll flag slider (globe ribbon replacement)
   ========================================================================== */

.ribbon-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.ribbon-slider__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: ribbon-scroll 30s linear infinite;
}

html[dir="ltr"] .ribbon-slider__track {
  animation-name: ribbon-scroll-ltr;
}

@keyframes ribbon-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

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

.ribbon-slider__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.ribbon-slider__item img {
  width: 40px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.ribbon-slider__item span {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-darkest);
}

/* Pause on hover for readability */
.ribbon-slider:hover .ribbon-slider__track {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ribbon-slider__track { animation: none; }
}


/* ==========================================================================
   === 42. v12 — Shrink burger + lang buttons 20% on mobile
   ========================================================================== */
@media (max-width: 767.98px) {
  .site-header .nav-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .site-header .nav-toggle span {
    width: 18px;
    height: 2.5px;
  }

  .lang-toggle {
    height: 40px;
    padding: 0 0.6rem 0 0.35rem;
    gap: 0.35rem;
    border-radius: 20px;
  }

  .lang-toggle__flag {
    width: 28px;
    height: 28px;
  }

  .lang-toggle__label {
    font-size: 0;       /* hide text, keep flag only */
    width: 0;
    overflow: hidden;
  }

  .lang-toggle__chev {
    font-size: 0.55rem;
    margin-inline-start: 0;
  }
}


/* ==========================================================================
   === 43. v13 — Pure white header, no shadows, orange lines only
   ========================================================================== */

/* Header: pure white, no shadow, no gradient — just a bottom orange line */
.site-header {
  background: var(--white) !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--brand-orange) !important;
}

/* Burger: white background, orange lines (stripes) */
.site-header .nav-toggle {
  background: var(--white) !important;
  border: 2px solid var(--brand-orange) !important;
  box-shadow: none !important;
}

.site-header .nav-toggle span {
  background-color: var(--brand-orange) !important;
}

.site-header .nav-toggle:hover {
  background: var(--brand-orange-pale) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Lang chip: white, no shadow, thin border */
.lang-toggle {
  background: var(--white) !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(0, 36, 96, 0.12) !important;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--white) !important;
  border-color: var(--brand-orange) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Flag circle: no shadow */
.lang-toggle__flag {
  box-shadow: none !important;
}


/* ==========================================================================
   === 44. Kill the navy nav-bar shadow that sits below the header on desktop
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header .primary-nav {
    box-shadow: none !important;
    border-top: 0 !important;
  }
}

/* Also kill any residual border-bottom from older sections */
.site-header::after { display: none !important; }


/* ==========================================================================
   === 45. Remove ALL borders/shadows from header area — only orange bottom
   ========================================================================== */
.site-header,
.site-header *,
.site-header::before,
.site-header::after {
  box-shadow: none !important;
}

.site-header {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* The desktop nav bar below header — remove its top border too */
@media (min-width: 1024px) {
  .site-header .primary-nav {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
}


/* ==========================================================================
   === 46. Live Currency Strip
   ========================================================================== */
.currency-strip {
  background: var(--brand-darkest);
  color: var(--white);
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  border-bottom: 2px solid var(--brand-orange);
}

.currency-strip__grid {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .currency-strip__grid { grid-template-columns: repeat(4, 1fr); }
}

.currency-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(250, 130, 0, 0.20);
  transition: border-color 200ms ease;
}

.currency-card:hover { border-color: var(--brand-orange); }

.currency-card__flags {
  font-size: 1.1rem;
  line-height: 1;
}

.currency-card__pair {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-amber);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.currency-card__value {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  unicode-bidi: plaintext;
}

.currency-strip__updated {
  margin: 0.75rem auto 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}


/* ==========================================================================
   === 47. Globe ribbon — white background + subtle bottom stroke
   ========================================================================== */
.globe-ribbon {
  background: var(--white) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(0, 36, 96, 0.10) !important;
  padding: 1rem !important;
}


/* ==========================================================================
   === 48. News Marquee — live trade headlines ticker
   ========================================================================== */
.news-marquee {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border-bottom: 1px solid rgba(0, 36, 96, 0.10);
  padding: 0.65rem 1rem;
  overflow: hidden;
}

.news-marquee__icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  background: var(--brand-orange);
  color: var(--white);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 800;
}

.news-marquee__slider {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.news-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: news-scroll 45s linear infinite;
}

html[dir="ltr"] .news-marquee__track {
  animation-name: news-scroll-ltr;
}

@keyframes news-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

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

.news-marquee__item {
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-darkest);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.news-marquee__item::before {
  content: "•";
  color: var(--brand-orange);
  font-size: 1.2em;
}

.news-marquee:hover .news-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .news-marquee__track { animation: none; }
}


/* ==========================================================================
   === 49. Social Media Icons in Footer
   ========================================================================== */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.social-icon:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  transform: translateY(-2px);
  color: var(--brand-darkest);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}