/* ============================================================
   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;
  --gold-hover: #cf9d58;
  --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: 5px;
  text-align: center; white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem); font-weight: 500; line-height: 1.2;
  padding: 10px clamp(7px, 0.85vw, 13px); 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;
}
.lang-switcher.open .lang-menu,
.lang-switcher:focus-within .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.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-strong); font-weight: 600; }
.t-dark .tile-sub { color: var(--gold-soft); }
.t-red .tile-sub, .t-gold .tile-sub { color: inherit; opacity: 0.85; }

.tile-bg-icon {
  position: absolute; inset-inline-end: -14px; bottom: -14px;
  width: 120px; height: 120px; opacity: 0.09; 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.16; }

.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); border-color: var(--gold); color: var(--basalt); transform: translateY(-2px); }

/* ============ 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);
}
.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; }

/* ============ 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 ============ */
.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) ============ */
.page-hero {
  background:
    linear-gradient(115deg, rgba(50, 48, 49, 0.96) 30%, rgba(50, 48, 49, 0.78)),
    repeating-linear-gradient(-45deg, #3d3b3d 0 22px, #353335 22px 44px);
  color: #fff; padding-block: clamp(60px, 9vw, 110px); position: relative; overflow: hidden;
}
.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 ============ */
/* Between the mobile breakpoint and ~1200px the six nav labels + logo + both
   buttons no longer fit on one row. Drop the header CTA first — it is repeated
   in the hero and in the closing band — rather than letting the bar overflow
   (which pushed the whole page into horizontal scroll). */
@media (max-width: 1200px) {
  .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;
}
/* 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; } }