/* ============================================================
   Knooz Watad Mining — Design System (Brand Edition)
   Style: Industrial Minimalism + Bento accents
   Brand colors:  Gold #dcaf6f · Charcoal #424143/#323031 · Red #c8102e
   Brand fonts:   Outfit (EN) · Readex Pro (AR) — self-hosted
   ============================================================ */

/* ---------------- Fonts ---------------- */
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("../fonts/ReadexPro-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* ---------------- Tokens ---------------- */
:root {
  /* brand charcoal (kept under legacy var names) */
  --basalt: #323031;
  --basalt-800: #3a393b;
  --basalt-700: #424143;
  /* brand gold */
  --gold: #dcaf6f;
  /* hover/accent tone kept LIGHTER than the base gold — client feedback:
     the darker #d2a15e-range tone felt heavy on hover states */
  --gold-hover: #e9cb96;
  --gold-strong: #9a7340;
  --gold-soft: #eedcbc;
  --gold-tint: #f8f0e0;
  /* brand red — accent only */
  --red: #c8102e;
  --red-dark: #a30d26;
  --red-tint: #fbe8ec;
  /* neutrals */
  --sand-bg: #f7f4ee;
  --surface: #ffffff;
  --line: #e7e1d4;
  --ink: #2f2e30;
  --muted: #67666a;
  --success: #2e7d4f;
  --error: #c8102e;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(50, 48, 49, 0.06);
  --shadow-md: 0 10px 30px rgba(50, 48, 49, 0.13);
  --shadow-lg: 0 24px 60px rgba(50, 48, 49, 0.2);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--sand-bg);
  color: var(--ink);
  font-family: "Readex Pro", "Outfit", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* Brand typography system:
   EN — Outfit: Bold titles / Medium subtitles / Regular text
   AR — Readex Pro: SemiBold titles / Regular subtitles / Light text */
html[data-lang="en"] body { font-family: "Outfit", "Readex Pro", system-ui, sans-serif; font-weight: 400; line-height: 1.7; }
html[data-lang="ar"] body { font-weight: 300; }

h1, h2, h3, h4 { line-height: 1.32; color: var(--basalt); font-weight: 700; }
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3, html[data-lang="ar"] h4 { font-weight: 600; }

/* ---- Language visibility ---- */
html[data-lang="ar"] .lang-en { display: none !important; }
html[data-lang="en"] .lang-ar { display: none !important; }

[dir="ltr"] { unicode-bidi: isolate; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: min(1180px, 92%); margin-inline: auto; }
.container-narrow { width: min(880px, 92%); margin-inline: auto; }

section { padding-block: clamp(56px, 8vw, 96px); }

/* ---- Kicker / section heads — brand dual-color divider (red → gold) ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-strong); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px;
}
.kicker::before {
  content: ""; width: 42px; height: 3px; border-radius: 2px; display: inline-block;
  background: linear-gradient(to right, var(--red) 0 45%, var(--gold) 45% 100%);
}
html[dir="rtl"] .kicker::before { background: linear-gradient(to left, var(--red) 0 45%, var(--gold) 45% 100%); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head p.lead { color: var(--muted); max-width: 720px; margin-top: 12px; font-size: 1.05rem; }
.section-head.center { text-align: center; }
.section-head.center p.lead { margin-inline: auto; }

.on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p { color: rgba(255, 255, 255, 0.78); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 0.95rem; font-family: inherit; cursor: pointer;
  text-align: center; line-height: 1.25;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn .arrow { transition: transform 0.3s var(--ease); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }

.btn-primary { background: var(--gold); color: var(--basalt); }
.btn-primary:hover { background: var(--gold-hover); color: var(--basalt); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(220, 175, 111, 0.45); }

.btn-outline { border-color: var(--basalt); color: var(--basalt); background: transparent; }
.btn-outline:hover { background: var(--basalt); color: #fff; transform: translateY(-2px); }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--basalt); transform: translateY(-2px); }

.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(50, 48, 49, 0.97);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 1.5vw, 20px); height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 12px; color: #fff; flex: 0 0 auto; }
.logo-mark { flex: 0 0 auto; color: #fff; } /* matches brand lockup: white mark on charcoal */
/* Client-supplied white lockup. Scales with the viewport so it never crowds
   the nav; width follows the image's own aspect ratio. */
.logo-lockup { display: block; height: clamp(30px, 3.2vw, 40px); width: auto; }
.footer-lockup { height: 44px; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > li { position: relative; }
/* Labels are centred and must never wrap to a second line — the bar shrinks
   its padding and type before it will break a label. */
.main-nav a.nav-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  text-align: center; white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.76rem, 0.88vw, 0.88rem); font-weight: 500; line-height: 1.2;
  padding: 10px clamp(6px, 0.7vw, 10px); border-radius: 8px;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.08); }
.main-nav a.nav-link.active { color: var(--gold); }

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  min-width: 320px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 10px; border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown.open .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem;
  color: var(--ink); transition: background-color 0.2s var(--ease), color 0.2s var(--ease), padding 0.25s var(--ease);
}
.dropdown-menu a:hover { background: var(--gold-tint); color: var(--gold-strong); padding-inline-start: 20px; }
.dropdown-menu a strong { display: block; font-weight: 600; }
.dropdown-menu a span.d-sub { font-size: 0.76rem; color: var(--muted); }
.caret { transition: transform 0.25s var(--ease); }
.has-dropdown:hover .caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Header buttons: centred type, single line, never squeezed by the nav. */
.header-actions .btn, .header-actions .lang-switch { white-space: nowrap; flex: 0 0 auto; }
.header-cta { padding-inline: clamp(14px, 1.4vw, 22px); }

/* ---- Globe language switcher ---- */
.lang-switcher { position: relative; flex: 0 0 auto; }
.lang-globe {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  font-family: inherit; line-height: 1;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang-globe:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }
.lang-globe:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang-globe .lang-caret { transition: transform 0.25s var(--ease); opacity: 0.75; }
.lang-switcher.open .lang-globe { background: var(--gold); border-color: var(--gold); color: var(--basalt); }
.lang-switcher.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 1200;
  min-width: 172px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
/* Open state is driven by the .open class ONLY. A :focus-within rule used to
   sit here too — but the clicked option keeps focus after selection, which
   held the menu open after the language had already switched. */
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li { list-style: none; }
.lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink);
  padding: 10px 13px; border-radius: 8px; text-align: start;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-menu button:hover { background: var(--gold-tint); color: var(--gold-strong); }
.lang-menu button .lang-check { opacity: 0; flex: 0 0 auto; color: var(--gold-strong); }
.lang-menu button.active { color: var(--gold-strong); font-weight: 600; background: var(--gold-tint); }
.lang-menu button.active .lang-check { opacity: 1; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative; background: var(--basalt); color: #fff; overflow: hidden;
  padding-block: clamp(80px, 12vw, 150px);
}
.hero-media {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(50, 48, 49, 0.94) 20%, rgba(50, 48, 49, 0.6) 60%, rgba(50, 48, 49, 0.5)),
    repeating-linear-gradient(-45deg, #3d3b3d 0 22px, #353335 22px 44px);
}
html[dir="rtl"] .hero-media {
  background:
    linear-gradient(-115deg, rgba(50, 48, 49, 0.94) 20%, rgba(50, 48, 49, 0.6) 60%, rgba(50, 48, 49, 0.5)),
    repeating-linear-gradient(45deg, #3d3b3d 0 22px, #353335 22px 44px);
}
.hero-media-tag {
  position: absolute; bottom: 18px; inset-inline-end: 18px;
  background: rgba(0, 0, 0, 0.45); border: 1px dashed rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.75); font-size: 0.7rem; letter-spacing: 0.06em;
  padding: 7px 12px; border-radius: 8px; max-width: 340px; line-height: 1.5;
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero h1 {
  color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.25;
  margin-bottom: 20px;
}
html[data-lang="ar"] .hero h1 { font-weight: 600; }
.hero h1 .gold { color: var(--gold); }
.hero p.sub { color: rgba(255, 255, 255, 0.85); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 640px; margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============ BENTO GRID (2026 accent) ============ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bento-tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.bento-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.row-2 { grid-row: span 2; }

.t-dark { background: linear-gradient(150deg, #3a393b, #323031); border-color: #323031; }
.t-dark:hover { border-color: var(--gold); }
.t-gold { background: linear-gradient(150deg, var(--gold), var(--gold-hover)); border-color: transparent; }
.t-red { background: linear-gradient(150deg, var(--red), var(--red-dark)); border-color: transparent; }

.t-dark h3, .t-dark .tile-value { color: #fff; }
.t-dark p, .t-dark .tile-label { color: rgba(255, 255, 255, 0.75); }
.t-dark .tile-value { color: var(--gold); }
.t-gold h3, .t-gold .tile-value { color: var(--basalt); }
.t-gold p, .t-gold .tile-label { color: rgba(50, 48, 49, 0.78); }
.t-red h3, .t-red .tile-value { color: #fff; }
.t-red p, .t-red .tile-label { color: rgba(255, 255, 255, 0.82); }

.tile-value {
  font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.15;
  font-variant-numeric: tabular-nums; direction: ltr; color: var(--basalt);
  font-family: "Outfit", "Readex Pro", sans-serif;
}
.row-2 .tile-value { font-size: clamp(2.6rem, 5vw, 4rem); }
.tile-label { font-size: 0.88rem; color: var(--muted); }
.tile-sub { font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-strong); font-weight: 600; }
.row-2 .tile-sub { font-size: 1.15rem; }
.t-dark .tile-sub { color: var(--gold-soft); }
.t-red .tile-sub, .t-gold .tile-sub { color: inherit; opacity: 0.85; }

/* Watermark icon: faint, and always BEHIND the tile's text — the tile's real
   content is lifted onto its own layer so the icon can never overlap it. */
.bento-tile > *:not(.tile-bg-icon) { position: relative; z-index: 1; }
.tile-bg-icon {
  position: absolute; inset-inline-end: -14px; bottom: -14px; z-index: 0;
  width: 120px; height: 120px; opacity: 0.05; pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.bento-tile:hover .tile-bg-icon { transform: scale(1.12) rotate(-6deg); opacity: 0.09; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--sand-bg); color: var(--ink);
  border-radius: 999px; padding: 4px 14px; font-size: 0.82rem; font-weight: 500;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--basalt); transform: translateY(-2px); }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* ============ CARDS ============ */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.93rem; }

.icon-chip {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-tint); color: var(--gold-strong); margin-bottom: 18px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover .icon-chip { background: var(--gold); color: var(--basalt); transform: scale(1.06) rotate(-3deg); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* ============ REAL PHOTOGRAPHY ============ */
/* Replaces the dashed .ph placeholders as artwork arrives. The tinted
   background holds the space in brand colour while the file decodes. */
.media {
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--radius); background: var(--gold-tint);
  transition: box-shadow 0.3s var(--ease);
}
/* Site-wide photo hover: soft shadow + thin gold ring (a box-shadow ring, not
   a border, so the layout never shifts). Same --gold as the card hover border,
   so photos and boxes light up identically. */
.media:hover { box-shadow: 0 0 0 1.5px var(--gold), var(--shadow-md); }
.media-16x9 { aspect-ratio: 16 / 9; }
.media-4x3 { aspect-ratio: 4 / 3; }
/* product cards clip the image to the card's own top corners */
.product-card > .media { border-radius: 0; }
/* photos dropped directly into a padded card need air before the heading */
.card:not(.product-card):not(.post-card) > .media { margin-bottom: 18px; }

/* ============ IMAGE PLACEHOLDERS ============ */
.ph {
  position: relative; border: 2px dashed #d3bf95; border-radius: var(--radius);
  background:
    linear-gradient(160deg, #f5eddd, #ecdfc4),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(220, 175, 111, 0.08) 26px 52px);
  display: grid; place-items: center; overflow: hidden; text-align: center;
  transition: border-color 0.3s var(--ease);
}
.ph:hover { border-color: var(--gold); }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-inner { padding: 20px; display: grid; justify-items: center; gap: 8px; }
.ph-inner svg { color: #b9a26c; width: 42px; height: 42px; }
.ph-tag {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #a3874f; border: 1px solid #d3bf95; padding: 3px 10px; border-radius: 999px;
}
.ph-caption { font-size: 0.8rem; color: #8d773f; max-width: 420px; line-height: 1.5; }

/* ============ VALUE CHAIN ============ */
.chain { position: relative; margin-top: 20px; }
.chain-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.chain-track::before {
  content: ""; position: absolute; top: 37px; inset-inline: 9%; height: 2px;
  background: linear-gradient(to right, var(--red) 0 12%, var(--gold) 12% 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.6s var(--ease) 0.2s;
}
html[dir="rtl"] .chain-track::before {
  transform-origin: 100% 50%;
  background: linear-gradient(to left, var(--red) 0 12%, var(--gold) 12% 100%);
}
.chain.in-view .chain-track::before { transform: scaleX(1); }
.chain-step { text-align: center; cursor: pointer; position: relative; background: none; border: none; font-family: inherit; }
.chain-node {
  width: 74px; height: 74px; margin-inline: auto; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--gold); color: var(--gold-strong);
  display: grid; place-items: center; position: relative; z-index: 2;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.chain-step:hover .chain-node, .chain-step.active .chain-node {
  background: var(--gold); color: var(--basalt); transform: scale(1.08); box-shadow: 0 8px 22px rgba(220, 175, 111, 0.5);
}
.chain-step .chain-idx {
  position: absolute; top: -6px; inset-inline-end: calc(50% - 46px); z-index: 3;
  width: 24px; height: 24px; border-radius: 50%; background: var(--basalt); color: #fff;
  font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; direction: ltr;
}
.chain-step.active .chain-idx { background: var(--red); }
.chain-step h4 { margin-top: 14px; font-size: 0.98rem; }
.chain-detail {
  max-width: 720px; margin: 26px auto 0; background: var(--surface); border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm);
  opacity: 0; max-height: 0; overflow: hidden; padding-block: 0;
  transition: opacity 0.4s var(--ease), max-height 0.5s var(--ease), padding 0.4s var(--ease);
}
.chain-detail.open { opacity: 1; max-height: 320px; padding-block: 22px; }
.chain-detail p { color: var(--muted); font-size: 0.93rem; }
.chain-detail h4 { color: var(--gold-strong); margin-bottom: 6px; }

/* ============ PRODUCT CARDS ============ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
.filter-chip {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
  padding: 9px 20px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 0.86rem; font-weight: 600;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.filter-chip:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-2px); }
.filter-chip.active { background: var(--basalt); border-color: var(--basalt); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
.product-card .ph { border-radius: 0; border: none; border-bottom: 2px dashed #d3bf95; }
.product-card .product-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-card .spec-pill {
  align-self: flex-start; background: var(--gold-tint); color: var(--gold-strong);
  font-size: 0.78rem; font-weight: 700; padding: 5px 14px; border-radius: 999px; direction: ltr;
}
.product-card .product-cta { margin-top: auto; padding-top: 10px; }
/* Filtered-out products leave the layout entirely. `display:flex` on the card
   would otherwise beat the hidden attribute, hence !important here. */
.product-card[hidden] { display: none !important; }

/* When a filter is active the remaining cards centre instead of clinging to
   the start of the row, so a single result doesn't look stranded. */
.product-grid.is-filtered { justify-content: center; }
.product-grid.is-filtered .product-card { max-width: 400px; }

/* `backwards` (not `both`) on purpose: it holds the start frame through the
   stagger delay, but releases to the element's normal style once finished —
   so a card can never get stranded at opacity 0 if the animation is
   interrupted or never runs. */
.product-grid.filtering .product-card:not([hidden]) {
  animation: productIn 0.45s var(--ease) backwards;
}
.product-grid.filtering .product-card:not([hidden]):nth-child(2) { animation-delay: 0.06s; }
.product-grid.filtering .product-card:not([hidden]):nth-child(3) { animation-delay: 0.12s; }
.product-grid.filtering .product-card:not([hidden]):nth-child(4) { animation-delay: 0.18s; }
.product-grid.filtering .product-card:not([hidden]):nth-child(5) { animation-delay: 0.24s; }
@keyframes productIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.filter-count {
  text-align: center; color: var(--muted); font-size: 0.86rem;
  margin: -14px 0 26px;
}

/* ============ TABLES ============ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
table.spec-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.spec-table th, .spec-table td { padding: 14px 20px; text-align: start; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.spec-table thead th { background: var(--basalt); color: #fff; font-weight: 600; white-space: nowrap; }
.spec-table tbody tr { transition: background-color 0.25s var(--ease); }
.spec-table tbody tr:hover { background: var(--gold-tint); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table td.val { font-weight: 600; color: var(--basalt); direction: ltr; text-align: start; white-space: nowrap; }

/* grade tabs (glass product, mobile) */
.grade-tabs { display: none; gap: 8px; margin-bottom: 14px; }
.grade-tab {
  flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: var(--surface); font-family: inherit; font-weight: 600; cursor: pointer; font-size: 0.86rem;
  transition: all 0.3s var(--ease);
}
.grade-tab.active { background: var(--basalt); color: #fff; border-color: var(--basalt); }
@media (max-width: 640px) {
  .grade-tabs { display: flex; }
  .glass-table.show-clear .col-coloured { display: none; }
  .glass-table.show-coloured .col-clear { display: none; }
}

/* ============ PILLARS ============ */
/* All four tiles rest white and flip to brand charcoal on hover; every child
   (title, copy, icon, watermark number) recolours in the same transition. */
.bento-tile.pillar { background: var(--surface); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease); }
.bento-tile.pillar h3, .bento-tile.pillar p, .bento-tile.pillar .pillar-num { transition: color 0.35s var(--ease); }
.bento-tile.pillar:hover { background: var(--basalt); border-color: var(--basalt); }
.bento-tile.pillar:hover h3 { color: #fff; }
.bento-tile.pillar:hover p { color: rgba(255, 255, 255, 0.75); }
.bento-tile.pillar:hover .icon-chip { background: rgba(220, 175, 111, 0.18); color: var(--gold); transform: scale(1.06) rotate(-3deg); }
.bento-tile.pillar:hover .pillar-num { color: rgba(255, 255, 255, 0.1); }

.pillar { position: relative; overflow: hidden; }
.pillar::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 3px;
  background: linear-gradient(to right, var(--red) 0 30%, var(--gold) 30% 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
html[dir="rtl"] .pillar::after {
  transform-origin: 100% 50%;
  background: linear-gradient(to left, var(--red) 0 30%, var(--gold) 30% 100%);
}
.pillar:hover::after { transform: scaleX(1); }
/* The watermark number sits in the corner OPPOSITE the icon.
   `direction: ltr` is needed so "01" renders in the right order, but it also
   makes `inset-inline-end` resolve against the number's own LTR direction —
   which planted it on the right in Arabic, directly on top of the icon.
   Physical sides, flipped per document direction, avoid that entirely. */
.pillar .pillar-num {
  position: absolute; top: 14px; right: 20px; left: auto;
  font-size: 2.6rem; font-weight: 800;
  color: var(--gold-tint); line-height: 1; direction: ltr;
  font-family: "Outfit", sans-serif; pointer-events: none;
}
html[dir="rtl"] .pillar .pillar-num { right: auto; left: 20px; }
.t-dark .pillar-num { color: rgba(255, 255, 255, 0.09); }
.t-gold .pillar-num { color: rgba(255, 255, 255, 0.35); }

/* ============ SPLIT LAYOUTS ============ */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split.reverse { direction: ltr; }
html[dir="rtl"] .split.reverse { direction: rtl; }

/* ============ CTA BAND ============ */
.cta-band {
  background:
    linear-gradient(120deg, rgba(50, 48, 49, 0.97), rgba(58, 57, 59, 0.92)),
    repeating-linear-gradient(-45deg, #353335 0 20px, #3d3b3d 20px 40px);
  color: #fff; text-align: center;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--red), var(--gold)) 1;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 640px; margin: 0 auto 30px; }

/* ============ PAGE HERO (inner pages) ============ */
/* Client-supplied dusk-dunes photograph (already very dark — luma 17–41), with
   a light directional wash to guarantee contrast where the white text sits.
   The image URL carries its own ?v — bump it manually if the file is replaced. */
.page-hero {
  background:
    linear-gradient(115deg, rgba(50, 48, 49, 0.55) 25%, rgba(50, 48, 49, 0.2) 70%),
    url("../img/page-hero-bg.webp?v=1") center bottom / cover no-repeat,
    var(--basalt);
  color: #fff; padding-block: clamp(60px, 9vw, 110px); position: relative; overflow: hidden;
}
html[dir="rtl"] .page-hero {
  background:
    linear-gradient(-115deg, rgba(50, 48, 49, 0.55) 25%, rgba(50, 48, 49, 0.2) 70%),
    url("../img/page-hero-bg.webp?v=1") center bottom / cover no-repeat,
    var(--basalt);
}
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.9rem); margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, 0.82); max-width: 700px; font-size: 1.02rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.breadcrumbs a { color: var(--gold-soft); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--gold); }

/* ============ ACCORDION (FAQ) ============ */
.accordion { display: grid; gap: 14px; }
.acc-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.acc-item.open { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.acc-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; font-family: inherit; text-align: start; cursor: pointer;
  padding: 18px 22px; font-size: 1rem; font-weight: 600; color: var(--basalt);
}
.acc-q .acc-icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-tint); color: var(--gold-strong); font-size: 1.1rem;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.acc-item.open .acc-icon { transform: rotate(45deg); background: var(--gold); color: var(--basalt); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.acc-a-inner { padding: 0 22px 20px; color: var(--muted); font-size: 0.94rem; }

/* ============ TABS (media center) ============ */
.tabs-bar { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 2px solid var(--line); margin-bottom: 34px; }
.tab-btn {
  background: none; border: none; font-family: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--muted); cursor: pointer; padding: 12px 20px; position: relative;
  transition: color 0.3s var(--ease);
}
.tab-btn::after {
  content: ""; position: absolute; bottom: -2px; inset-inline: 0; height: 2px;
  background: linear-gradient(to right, var(--red) 0 30%, var(--gold) 30% 100%);
  transform: scaleX(0); transition: transform 0.35s var(--ease);
}
html[dir="rtl"] .tab-btn::after { background: linear-gradient(to left, var(--red) 0 30%, var(--gold) 30% 100%); }
.tab-btn:hover { color: var(--basalt); }
.tab-btn.active { color: var(--basalt); }
.tab-btn.active::after { transform: scaleX(1); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp 0.5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============ FORMS ============ */
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; color: var(--basalt); }
.form-field label .req { color: var(--red); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.93rem; color: var(--ink); background: var(--sand-bg);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(220, 175, 111, 0.2);
}
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: var(--red); }
.field-error { display: none; color: var(--red); font-size: 0.78rem; margin-top: 6px; }
.form-field.invalid .field-error { display: block; }
.form-note { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.honeypot { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-success { display: none; text-align: center; padding: 44px 24px; }
.form-success.show { display: block; animation: fadeUp 0.5s var(--ease); }
.form-success .success-icon {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(46, 125, 79, 0.12);
  color: var(--success); display: grid; place-items: center; margin: 0 auto 20px;
}
.captcha-note {
  display: flex; align-items: center; gap: 10px; background: var(--sand-bg); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.8rem; color: var(--muted);
}

/* ============ CONTACT ============ */
.contact-info-card { display: flex; align-items: flex-start; gap: 16px; }
.route-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }

/* ============ EXPORT MAP ============ */
.export-map-wrap {
  background: linear-gradient(150deg, #3a393b, #323031);
  border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 44px);
  position: relative; overflow: hidden;
}
.export-map-wrap svg { width: 100%; height: auto; display: block; }
.map-line {
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 6 7; opacity: 0.75;
  animation: dashMove 2.6s linear infinite;
}
@keyframes dashMove { to { stroke-dashoffset: -26; } }
.map-node { cursor: pointer; }
.map-node circle.dot { fill: var(--gold); transition: r 0.3s var(--ease); }
.map-node:hover circle.dot { r: 8; }
.map-node circle.pulse { fill: none; stroke: var(--gold); opacity: 0.5; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { r: 6; opacity: 0.55; } 100% { r: 22; opacity: 0; } }
.map-node text { fill: #fff; font-size: 13px; font-family: inherit; font-weight: 600; }
.map-node .port-tip { opacity: 0; transition: opacity 0.3s var(--ease); }
.map-node:hover .port-tip { opacity: 1; }
.map-node .port-tip rect { fill: rgba(255, 255, 255, 0.97); }
.map-node .port-tip text { fill: var(--basalt); font-size: 11px; font-weight: 500; }
.center-node circle.dot { fill: var(--red); }
.center-node circle.pulse { stroke: var(--red); }
.center-node text { fill: #fff; font-weight: 700; font-size: 15px; }

/* ============ FOOTER ============ */
.site-footer { background: var(--basalt); color: rgba(255, 255, 255, 0.75); padding-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-grid h4::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 34px; height: 2px;
  background: linear-gradient(to right, var(--red) 0 40%, var(--gold) 40% 100%);
}
html[dir="rtl"] .footer-grid h4::after { background: linear-gradient(to left, var(--red) 0 40%, var(--gold) 40% 100%); }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a { font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); transition: color 0.25s var(--ease), padding 0.25s var(--ease); }
.footer-grid a:hover { color: var(--gold-soft); padding-inline-start: 5px; }
.footer-about p { font-size: 0.88rem; margin-top: 16px; max-width: 300px; }
.footer-contact-line { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; margin-bottom: 12px; }
.footer-contact-line svg { color: var(--gold); flex: 0 0 auto; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.8rem;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.65); }
.footer-bottom a:hover { color: var(--gold-soft); }

/* ============ 404 ============ */
.page-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.page-404 .code {
  font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; color: var(--gold-tint); line-height: 1;
  -webkit-text-stroke: 2px var(--gold); direction: ltr;
  font-family: "Outfit", sans-serif;
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============ RESPONSIVE ============ */
/* With seven nav labels (Home restored) + logo + actions, the CTA no longer
   fits below ~1360px. Drop it first — it is repeated in the hero and the
   closing band — rather than letting the bar overflow into horizontal scroll. */
@media (max-width: 1360px) {
  .header-cta { display: none; }
}

@media (max-width: 1024px) {
  .main-nav { display: none; position: fixed; top: var(--header-h); inset-inline: 0;
    background: var(--basalt); flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px; box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a.nav-link { padding: 14px 16px; border-radius: 8px; justify-content: space-between; }
  .dropdown-menu { position: static; opacity: 1; visibility: hidden; display: none; transform: none;
    box-shadow: none; border: none; background: rgba(255, 255, 255, 0.05); min-width: 0; margin-top: 4px;
  }
  .has-dropdown.open .dropdown-menu { display: block; visibility: visible; }
  .dropdown-menu a { color: rgba(255, 255, 255, 0.8); }
  .dropdown-menu a span.d-sub { color: rgba(255, 255, 255, 0.45); }
  .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .nav-toggle { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-cta { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2 { grid-column: span 2; }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .split { grid-template-columns: 1fr; }
  .route-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  /* Value chain on mobile: two columns instead of one tall stack.
     Five stages leave an odd one out, so the final stage spans the full
     width — it reads as the conclusion of the journey rather than a gap. */
  .chain-track { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .chain-track::before { display: none; }
  .chain-step:last-child { grid-column: 1 / -1; }
  .chain-node { width: 66px; height: 66px; }
  .chain-node svg { width: 24px; height: 24px; }
  .chain-step .chain-idx { inset-inline-end: calc(50% - 41px); width: 22px; height: 22px; font-size: 0.68rem; }
  .chain-step h4 { margin-top: 10px; font-size: 0.9rem; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .span-2, .row-2 { grid-column: auto; grid-row: auto; }
}

/* ============ SCROLL-TRIGGERED HERO ============ */
/* padding:0 is essential — the generic `section` rule adds up to 96px block
   padding, which pushed the sticky pane down and left dark bands above and
   below the video. svh keeps the pane stable while mobile URL bars hide/show. */
.hero-scroll {
  position: relative; padding: 0; background: var(--basalt);
  height: 320vh; height: 320svh;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* zoom-crop hides the Gemini watermark in the corner of the generated
     footage; remove once a clean (watermark-free) export replaces the file */
  transform: scale(1.14);
}
/* readability overlay above the video (WCAG contrast for hero text) */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(50, 48, 49, 0.9) 20%, rgba(50, 48, 49, 0.55) 60%, rgba(50, 48, 49, 0.45));
}
html[dir="rtl"] .hero-overlay {
  background: linear-gradient(-115deg, rgba(50, 48, 49, 0.9) 20%, rgba(50, 48, 49, 0.55) 60%, rgba(50, 48, 49, 0.45));
}
.hero-sticky {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden; color: #fff;
}
.hero-stage-wrap { position: relative; z-index: 2; height: 100%; }
.hero-stage {
  position: absolute; inset-inline: 0; top: 50%;
  transform: translateY(calc(-50% + 44px));
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0.55s;
}
.hero-scroll[data-active="0"] .hero-stage[data-stage="0"],
.hero-scroll[data-active="1"] .hero-stage[data-stage="1"],
.hero-scroll[data-active="2"] .hero-stage[data-stage="2"] {
  opacity: 1; visibility: visible; transform: translateY(-50%);
}
.hero-scroll h1 {
  color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.25; max-width: 820px;
}
html[data-lang="ar"] .hero-scroll h1 { font-weight: 600; }
.hero-scroll h1 .gold, .journey-heading .gold { color: var(--gold); }
.hero-scroll .sub { color: rgba(255, 255, 255, 0.85); font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 680px; margin-bottom: 34px; }
.journey-heading { color: #fff; font-size: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 10px; }

.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.scroll-cue .wheel { width: 22px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 12px; position: relative; flex: 0 0 auto; }
.scroll-cue .wheel::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 4px; height: 7px; margin-left: -2px;
  border-radius: 2px; background: var(--gold); animation: wheelDrop 1.6s var(--ease) infinite;
}
@keyframes wheelDrop { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.journey { display: flex; justify-content: space-between; gap: clamp(8px, 2vw, 22px); max-width: 940px; margin-top: 40px; position: relative; }
.journey-line { position: absolute; top: 33px; inset-inline: 40px; height: 2px; background: rgba(255, 255, 255, 0.14); z-index: 1; }
.journey-line span { display: block; height: 100%; width: 0; background: linear-gradient(to right, var(--red) 0 10%, var(--gold) 10% 100%); transition: width 0.2s linear; }
html[dir="rtl"] .journey-line span { background: linear-gradient(to left, var(--red) 0 10%, var(--gold) 10% 100%); }
.j-item { flex: 1; text-align: center; opacity: 0; transform: translateY(22px) scale(0.9); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); position: relative; z-index: 2; }
.j-item.on { opacity: 1; transform: none; }
.j-icon {
  width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--gold);
  background: rgba(50, 48, 49, 0.85); color: var(--gold);
  display: grid; place-items: center; margin-inline: auto;
}
.j-item.on .j-icon { box-shadow: 0 8px 26px rgba(220, 175, 111, 0.35); }
.j-item h4 { color: #fff; margin-top: 12px; font-size: 0.95rem; }
.j-item p { color: rgba(255, 255, 255, 0.6); font-size: 0.76rem; margin-top: 2px; }

.hero-progress { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, 0.12); z-index: 3; }
.hero-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--gold)); }

/* ---- Mobile: keep the scroll story, but compact it so a stage fits one screen ---- */
@media (max-width: 820px) {
  .hero-scroll { height: 280svh; }
  .hero-scroll h1 { font-size: clamp(1.45rem, 6.6vw, 2.1rem); }
  .hero-scroll .sub { font-size: 0.95rem; margin-bottom: 26px; }
  .hero-ctas .btn { width: 100%; }
  .journey-heading { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .journey { flex-direction: column; gap: 10px; margin-top: 20px; }
  .journey-line { display: none; }
  .j-item {
    display: flex; align-items: center; gap: 14px; text-align: start;
    transform: translateY(14px); background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px 12px;
  }
  .j-item.on { transform: none; }
  .j-icon { width: 42px; height: 42px; margin-inline: 0; flex: 0 0 auto; }
  .j-icon svg { width: 20px; height: 20px; }
  .j-item h4 { margin-top: 0; font-size: 0.88rem; }
  .j-item p { font-size: 0.72rem; margin-top: 1px; }
  .scroll-cue { margin-top: 26px; font-size: 0.78rem; }
}

/* static fallback: reduced motion only */
.hero-scroll.hero-static { height: auto; }
.hero-static .hero-sticky { position: relative; top: 0; height: auto; overflow: visible; padding-block: clamp(70px, 10vw, 120px); }
.hero-static .hero-stage-wrap { height: auto; display: grid; gap: 44px; }
.hero-static .hero-stage { position: static; opacity: 1; visibility: visible; transform: none; }
.hero-static .scroll-cue, .hero-static .hero-progress { display: none; }
.hero-static .j-item { opacity: 1; transform: none; }
.hero-static .journey-line span { width: 100%; }
@media (max-width: 820px) {
  .hero-static .journey { flex-direction: column; gap: 22px; }
  .hero-static .journey-line { display: none; }
  .hero-static .j-item { display: flex; align-items: center; gap: 16px; text-align: start; }
  .hero-static .j-icon { margin-inline: 0; width: 54px; height: 54px; flex: 0 0 auto; }
}

/* ============ POST CARDS (dynamic articles) ============ */
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: var(--radius-lg); }
.post-card .post-cover { aspect-ratio: 16 / 9; }
.post-card .post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .post-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.76rem; color: var(--muted); }
.post-meta .post-cat { color: var(--red); font-weight: 600; }
.post-card h3 { font-size: 1.05rem; margin: 0; }
.post-card .post-excerpt { color: var(--muted); font-size: 0.9rem; }
.post-link { margin-top: auto; padding-top: 8px; color: var(--gold-strong); font-weight: 600; font-size: 0.88rem; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { background: var(--gold-tint); color: var(--gold-strong); border-radius: 999px; padding: 3px 12px; font-size: 0.76rem; font-weight: 600; }

/* ============ ARTICLE PAGE ============ */
.article-body { font-size: 1.02rem; line-height: 2; color: var(--ink); }
.article-body p { margin-bottom: 1.2em; }

/* ============ ADMIN DASHBOARD ============ */
.admin-bar {
  position: sticky; top: 0; z-index: 1000; background: rgba(50, 48, 49, 0.97);
  color: #fff; backdrop-filter: blur(10px);
}
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.admin-bar .admin-title { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.admin-bar .admin-title img { width: 38px; }
.admin-bar .admin-title small { display: block; font-size: 0.68rem; color: var(--gold-soft); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-note {
  background: var(--gold-tint); border: 1px dashed var(--gold); color: var(--gold-strong);
  border-radius: var(--radius-sm); padding: 10px 16px; font-size: 0.82rem; margin-bottom: 26px;
}
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }
.admin-toolbar .spacer { flex: 1; }
.admin-toolbar input[type="search"] {
  padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-family: inherit;
  font-size: 0.88rem; background: var(--surface); min-width: 220px;
}
.admin-toolbar input[type="search"]:focus { outline: none; border-color: var(--gold); }

.admin-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table th, .admin-table td { padding: 13px 18px; text-align: start; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.admin-table thead th { background: var(--basalt); color: #fff; font-weight: 600; white-space: nowrap; }
.admin-table tbody tr { transition: background-color 0.2s var(--ease); }
.admin-table tbody tr:hover { background: var(--gold-tint); }
.admin-table .row-actions { display: flex; gap: 8px; white-space: nowrap; }
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.badge-news { background: var(--red-tint); color: var(--red); }
.badge-blog { background: var(--gold-tint); color: var(--gold-strong); }
.badge-published { background: rgba(46, 125, 79, 0.12); color: var(--success); }
.badge-draft { background: #ececec; color: var(--muted); }
.btn-icon {
  background: var(--sand-bg); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  padding: 7px 10px; color: var(--muted); font-family: inherit; font-size: 0.8rem; font-weight: 600;
  transition: all 0.25s var(--ease);
}
.btn-icon:hover { border-color: var(--gold); color: var(--gold-strong); }
.btn-icon.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-tint); }

.editor-panel { display: none; margin-top: 34px; }
.editor-panel.open { display: block; animation: fadeUp 0.4s var(--ease); }
.lang-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lang-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--sand-bg); }
.lang-col > h4 {
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-strong);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.lang-col > h4::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--red) 0 45%, var(--gold) 45% 100%); }
.editor-panel .form-field { margin-bottom: 14px; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
@media (max-width: 820px) { .lang-cols { grid-template-columns: 1fr; } }