/* ─── IRANSansX — Persian UI font (same family the admin uses). Local
 *   woff2/woff in fonts/. font-display:swap → text paints immediately in
 *   the fallback, then swaps to IRANSansX once loaded. ─────────────── */
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Thin.woff2") format("woff2"), url("fonts/IRANSansX-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Light.woff2") format("woff2"), url("fonts/IRANSansX-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Regular.woff2") format("woff2"), url("fonts/IRANSansX-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Medium.woff2") format("woff2"), url("fonts/IRANSansX-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-DemiBold.woff2") format("woff2"), url("fonts/IRANSansX-DemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Bold.woff2") format("woff2"), url("fonts/IRANSansX-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-ExtraBold.woff2") format("woff2"), url("fonts/IRANSansX-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Black.woff2") format("woff2"), url("fonts/IRANSansX-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

/* ============================================================
 * Tehran Jonoob — Variant 3 (Aramco-style editorial)
 *
 * Premium state-energy company feel, editorial layout. Brand colours
 * are Tehran Jonoob's corporate navy + gold (سرمه‌ای / طلایی), matched
 * to the admin panel. NOTE: the CSS variables are still named
 * `--v3-teal*` for historical reasons but now hold NAVY values.
 * Defining characteristics:
 *   • Deep navy primary (#14213D) on warm cream backgrounds
 *   • Generous whitespace, breathing room between everything
 *   • Cormorant Garamond serif for big editorial headlines
 *   • Clean Inter sans for body
 *   • Photo-driven hero + spotlights — photography is the star
 *   • Gold accent (#C8963E) — links/buttons hover to gold, key marks
 *   • Hover: image-zoom + thin underline reveal under links
 *   • Stat numbers in large serif, separated by thin navy rules
 *   • Sustainability/responsibility framing in copy
 * ============================================================ */

:root {
  /* Brand navy — Tehran Jonoob's corporate سرمه‌ای (navy), matched to the
     admin panel's ink ladder. The variable names keep the historical
     "teal" spelling so the hundreds of downstream rules don't churn —
     only the VALUES are navy now. Gold (--v3-warm) is the accent. */
  --v3-teal:        #14213D;   /* primary navy — links, buttons, accents */
  --v3-teal-dark:   #0F1A33;   /* hover / darker navy */
  --v3-teal-deep:   #0B1326;   /* deepest navy — dark bands & overlays */
  --v3-teal-light:  #5B82B8;   /* steel-blue accent on dark navy */
  --v3-teal-mist:   #E3E7F0;   /* pale navy tint — soft backgrounds */

  /* Surfaces — smoky neutral grey (دودی). The var names still say
     "cream" for historical reasons but now hold grey values; pairs with
     navy + gold. Cards stay near-white (--v3-paper) for depth. */
  --v3-cream:       #E8E9EC;   /* main page background — smoky light grey */
  --v3-cream-2:     #DBDDE2;   /* deeper grey — panels, bands, card fills */
  --v3-paper:       #FFFFFF;   /* cards & light surfaces (the admin «سطوح» zone) */
  --v3-paper-band:  #FFFFFF;   /* white SECTION bands (careers/contact) — kept
                                  separate from cards so recolouring «سطوح»
                                  doesn't repaint whole sections; each section
                                  is recoloured via its own admin colour zone. */

  /* Ink */
  --v3-ink:         #181A1D;
  --v3-ink-2:       #45484D;
  --v3-ink-3:       #6E7179;   /* muted (cooled to match the grey) */
  --v3-ink-4:       #9B9EA6;

  /* Lines */
  --v3-line:        #D7D9DE;
  --v3-line-2:      #C4C7CE;
  --v3-line-soft:   rgba(20, 22, 26, 0.08);

  /* Brand gold — طلایی, matched to the admin panel's gold. Now the
     primary accent (links/buttons hover to gold, key marks, stat numbers). */
  --v3-warm:        #C8963E;
  --v3-warm-hi:     #D6A64F;

  /* Fonts */
  --v3-serif:       "Cormorant Garamond", "Times New Roman", serif;
  --v3-fa:          "IRANSansX", "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --v3-sans:        "Inter", system-ui, sans-serif;

  /* Sizes */
  --v3-max:         1380px;
  --v3-content:     1180px;
  --v3-gutter:      72px;
}

/* ─── Reset ─── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: var(--v3-cream);
  /* Redundant root-level guard at the real viewport scroll container, so the
     hard "no mobile horizontal scroll" invariant holds even if a child breaks
     out. clip after hidden as a progressive-enhancement fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}
body.v3-body {
  font-family: var(--v3-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--v3-ink);
  background-color: var(--v3-cream);
  /* Faint flowing-curve backdrop so the grey areas aren't a flat empty wash.
     Fixed + cover = one calm composition behind everything; the grey
     surfaces below (.v3-section.cream, .v3-subpage) are transparent so it
     shows through, while paper/navy sections stay opaque over it. */
  background-image: url("/assets/bg/curves.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[dir="rtl"] body.v3-body { font-family: var(--v3-fa); }
/* On phones, fixed+cover is jank on Android and a no-op/zoomed on iOS Safari
   (and makes screenshots hang), so let the backdrop scroll. Desktop stays fixed. */
@media (max-width: 820px) {
  body.v3-body { background-attachment: scroll; }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--v3-teal); color: var(--v3-paper); }

/* ─── TOP UTILITY BAR ──────────────────────────────────────────
 * Floats transparently over the hero photo, fades out as the
 * user scrolls past it. Sits above the main nav (also fixed).
 * On deeper scroll the page surface comes up underneath the nav
 * so the utility bar would compete — it just hides itself. */
.v3-utility {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  color: var(--v3-paper);
  font-family: var(--v3-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  z-index: 51;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
.v3-utility.faded { opacity: 0; pointer-events: none; transform: translateY(-100%); }
html[dir="rtl"] .v3-utility { font-family: var(--v3-fa); font-size: 13px; }
.v3-utility-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 10px var(--v3-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.v3-utility-left,
.v3-utility-right {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.v3-utility a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.v3-utility a:hover { color: var(--v3-paper); }
.v3-utility .sep {
  width: 1px; height: 12px;
  background: rgba(255, 255, 255, 0.22);
}
.v3-utility-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v3-paper);
}
.v3-utility-lang button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: inherit;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.v3-utility-lang button:hover,
.v3-utility-lang button.active {
  color: var(--v3-paper);
}

/* ─── MAIN NAV ─────────────────────────────────────────────────
 * Fixed at the very top, transparent over the hero photo so the
 * imagery extends edge-to-edge under the menu (Aramco-style).
 * Once the user scrolls past the hero, the nav fills with a near-
 * opaque white surface + blur so the menu remains legible over
 * any body content. */
.v3-nav {
  position: fixed;
  top: 0;          /* utility bar removed — nav sits at the very top */
  left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, top 0.4s ease;
}
.v3-nav.scrolled {
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--v3-line);
  box-shadow: 0 4px 22px -12px rgba(0, 0, 0, 0.22);
}

/* Over-hero: every interactive element is white with a soft text-
 * shadow for legibility against bright sky photos. */
.v3-nav:not(.scrolled) .v3-nav-logo-text { color: var(--v3-paper); text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.v3-nav:not(.scrolled) .v3-nav-link {
  color: var(--v3-paper);
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.v3-nav:not(.scrolled) .v3-nav-link::after { background: var(--v3-paper); }
.v3-nav:not(.scrolled) .v3-nav-link:hover { color: var(--v3-warm-hi); }
.v3-nav:not(.scrolled) .v3-nav-cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--v3-paper);
}
.v3-nav:not(.scrolled) .v3-nav-cta:hover {
  background: var(--v3-paper);
  color: var(--v3-teal);
  border-color: var(--v3-paper);
}
.v3-nav:not(.scrolled) .v3-nav-burger span { background: var(--v3-paper); }
.v3-nav-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 9px var(--v3-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.v3-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.v3-nav-logo img { height: 76px; width: auto; }
.v3-nav-logo-text {
  font-family: var(--v3-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--v3-teal);
  letter-spacing: 0.01em;
  line-height: 1;
}
html[dir="rtl"] .v3-nav-logo-text { font-family: var(--v3-fa); font-weight: 800; font-size: 19px; }

.v3-nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  margin: 0 auto;
}
.v3-nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--v3-ink);
  padding: 8px 0;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.v3-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 1.5px;
  background: var(--v3-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.v3-nav-link:hover { color: var(--v3-teal); }
.v3-nav-link:hover::after { transform: scaleX(1); }
html[dir="rtl"] .v3-nav-link { font-size: 15px; font-weight: 600; }

.v3-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  background: var(--v3-teal);
  color: var(--v3-paper);
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.v3-nav-cta:hover { background: var(--v3-warm); color: #14213D; }
.v3-nav-cta svg { width: 14px; height: 14px; }

/* Compact language toggle in the nav (relocated from the old utility bar). */
.v3-nav-lang { display: inline-flex; align-items: center; gap: 7px; margin-inline-start: 8px; font-family: var(--v3-sans); font-size: 12.5px; font-weight: 600; }
.v3-nav-lang button { background: none; border: none; padding: 2px; cursor: pointer; font: inherit; color: var(--v3-ink-3); transition: color 0.2s ease; }
.v3-nav-lang button:hover { color: var(--v3-ink); }
.v3-nav-lang button.active { color: var(--v3-teal); }
.v3-nav-lang .div { color: var(--v3-line-2); }
.v3-nav:not(.scrolled) .v3-nav-lang button { color: rgba(255, 255, 255, 0.72); }
.v3-nav:not(.scrolled) .v3-nav-lang button:hover { color: #fff; }
.v3-nav:not(.scrolled) .v3-nav-lang button.active { color: var(--v3-warm-hi); }
.v3-nav:not(.scrolled) .v3-nav-lang .div { color: rgba(255, 255, 255, 0.35); }

/* Mobile sheet language toggle. */
.v3-nav-sheet-lang { display: flex; gap: 10px; padding: 16px 0 4px; }
.v3-nav-sheet-lang button { flex: 1; padding: 11px; border: 1px solid var(--v3-line-2); background: none; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--v3-ink-2); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.v3-nav-sheet-lang button.active { background: var(--v3-teal); color: #fff; border-color: var(--v3-teal); }
html[dir="rtl"] .v3-nav-sheet-lang button { font-family: var(--v3-fa); }
html[dir="rtl"] .v3-nav-cta { font-size: 14px; font-weight: 600; }

.v3-nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.v3-nav-burger span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--v3-ink);
  transform: translateX(-50%);
  transition: all 0.3s ease;
}
.v3-nav-burger span:nth-child(1) { top: 13px; }
.v3-nav-burger span:nth-child(2) { top: 20px; }
.v3-nav-burger span:nth-child(3) { top: 27px; }
.v3-nav-burger.is-open span:nth-child(1) { top: 20px; transform: translateX(-50%) rotate(45deg); }
.v3-nav-burger.is-open span:nth-child(2) { opacity: 0; }
.v3-nav-burger.is-open span:nth-child(3) { top: 20px; transform: translateX(-50%) rotate(-45deg); }

.v3-nav-sheet {
  position: fixed;
  top: 78px;
  left: 16px;
  right: 16px;
  z-index: 49;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.25);
  padding: 16px 8px;
  /* Closed state — CSS-driven (not framer-motion) for reliability.
     visibility:hidden + pointer-events:none guarantee the closed sheet
     never intercepts taps on the page beneath it. The visibility delay
     keeps it interactive until the fade-out finishes. */
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.v3-nav-sheet.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.v3-nav-sheet a {
  display: block;
  padding: 14px 18px;
  font-size: 16px;
  color: var(--v3-ink);
  border-bottom: 1px solid var(--v3-line);
  cursor: pointer;
}
.v3-nav-sheet a:last-child { border-bottom: none; }
.v3-nav-sheet a:hover { color: var(--v3-teal); background: var(--v3-cream); }

/* ─── HERO ─────────────────────────────────────────────────────
 * Full-viewport hero. Nav + utility bar overlay the photo, so the
 * imagery extends edge-to-edge top to bottom. Slide indicators
 * pin to the bottom row. */
.v3-hero {
  position: relative;
  min-height: 100vh;
  max-height: 900px;
  overflow: hidden;
  background: var(--v3-ink);
  isolation: isolate;
}
.v3-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: #0b1326;   /* navy backstop — never let pure black show through */
  overflow: hidden;
}
/* Each slide is absolutely positioned over the previous; opacity is the
 * only thing the JS toggles via the .is-active class. The parallax hook
 * writes `--py` on .v3-hero-photo and we read it on every slide so the
 * crossfade and the parallax can layer. */
.v3-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: brightness(0.78);
  opacity: 0;
  transform: scale(1.08);
  transform-origin: center;
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 18s linear;  /* slow ken-burns zoom while shown */
  will-change: opacity, transform;
}
.v3-hero-slide.is-active {
  opacity: 1;
  transform: scale(1.14);  /* gentle ken-burns zoom — no parallax shift */
}
.v3-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.65) 100%);
}
.v3-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--v3-max);
  margin: 0 auto;
  /* Top padding clears the transparent nav + utility bar; bottom
   * padding clears the slide tab bar so headline never collides. */
  padding: 180px var(--v3-gutter) 160px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  justify-content: flex-end;
}
/* Semi-transparent readability box behind hero copy (۱۴۰۵/۰۵ review):
   keeps the headline/lede legible over bright slide photos without
   dimming the whole image. Fit-content so it hugs the text block. */
.v3-hero-scrim {
  align-self: flex-start;
  width: fit-content;
  max-width: min(100%, 860px);
  background: rgba(11, 19, 38, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 26px 32px 28px;
  backdrop-filter: blur(4px) saturate(1.03);
  -webkit-backdrop-filter: blur(4px) saturate(1.03);
}
.v3-hero-scrim-sub {
  padding: 18px 26px 20px;
  border-radius: 14px;
  background: rgba(11, 19, 38, 0.2);
}
@media (max-width: 640px) {
  .v3-hero-scrim { padding: 18px 20px; border-radius: 14px; }
  .v3-hero-scrim-sub { padding: 14px 18px 16px; }
}

.v3-hero-eyebrow {
  font-family: var(--v3-sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-warm-hi);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.v3-hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--v3-warm-hi);
}
html[dir="rtl"] .v3-hero-eyebrow {
  font-family: var(--v3-fa);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 14px;
}
.v3-hero-headline {
  font-family: var(--v3-serif);
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--v3-paper);
  max-width: 920px;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.v3-hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--v3-warm-hi);
}
html[dir="rtl"] .v3-hero-headline {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(34px, 5.5vw, 72px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .v3-hero-headline em {
  font-style: normal;
  color: var(--v3-warm-hi);
}
.v3-hero-lede {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 580px;
  margin: 0 0 36px;
}
html[dir="rtl"] .v3-hero-lede { font-size: 16px; line-height: 2; }

.v3-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ─── BUTTON / CTA — Aramco-flat style ─── */
.v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--v3-teal);
  color: var(--v3-paper);
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.v3-btn:hover { background: var(--v3-teal-dark); transform: translateX(-2px); }
html[dir="ltr"] .v3-btn:hover { transform: translateX(2px); }
.v3-btn svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.v3-btn:hover svg { transform: translateX(-3px); }
html[dir="ltr"] .v3-btn:hover svg { transform: translateX(3px); }
.v3-btn.outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--v3-paper);
}
.v3-btn.outline:hover {
  background: rgba(255, 255, 255, 0.10);
}
.v3-btn.dark {
  background: var(--v3-ink);
}
.v3-btn.dark:hover { background: var(--v3-teal); }
html[dir="rtl"] .v3-btn { font-size: 15px; font-weight: 600; }

/* ─── Inline text link with underline reveal ─── */
.v3-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--v3-teal);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  padding-bottom: 3px;
}
.v3-link::after {
  content: '';
  position: absolute;
  left: 0; right: 22px;
  bottom: 0;
  height: 1px;
  background: var(--v3-teal);
  transform-origin: left;
  transition: transform 0.3s ease;
}
html[dir="rtl"] .v3-link::after { left: 22px; right: 0; transform-origin: right; }
.v3-link:hover::after { transform: scaleX(0.96); }
.v3-link svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.v3-link:hover svg { transform: translateX(-4px); }
html[dir="ltr"] .v3-link:hover svg { transform: translateX(4px); }
html[dir="rtl"] .v3-link { font-size: 15px; font-weight: 600; }

/* ─── HERO SLIDE TABS ──────────────────────────────────────────
 * Horizontal row pinned to the bottom of the hero. Each tab is a
 * section label; the active tab has a teal progress bar that
 * fills 0→100% over the slide's duration. Hovering or clicking
 * any tab jumps to that slide. */
.v3-hero-tabs {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 3;
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 0 var(--v3-gutter);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
}
.v3-hero-tab {
  position: relative;
  background: transparent;
  border: none;
  padding: 22px 18px 26px;
  cursor: pointer;
  font-family: var(--v3-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: start;
  transition: color 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.v3-hero-tab:hover { color: rgba(255, 255, 255, 0.85); }
.v3-hero-tab.is-active { color: var(--v3-paper); }
html[dir="rtl"] .v3-hero-tab {
  font-family: var(--v3-fa);
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 13.5px;
  font-weight: 600;
}
.v3-hero-tab-label {
  display: inline-block;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.v3-hero-tab-bar {
  position: relative;
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
/* Fill is a full-width strip; JS drives its scaleX from 0..1.
 * Using transform (GPU-composited) instead of width avoids layout
 * reflow on every rAF tick and lets the bar reach 100% reliably. */
.v3-hero-tab-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--v3-paper);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
html[dir="rtl"] .v3-hero-tab-fill { transform-origin: right center; }
.v3-hero-tab.is-active .v3-hero-tab-fill { background: var(--v3-paper); }

/* On mobile the 4 tabs become slim story-style progress bars (no labels),
   pinned along the bottom — instead of 4 stacked rows that overlap the CTA. */
@media (max-width: 820px) {
  .v3-hero-tabs {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    padding: 0 24px 22px;
  }
  .v3-hero-tab { padding: 0; gap: 0; }
  .v3-hero-tab-label { display: none; }
  .v3-hero-tab-bar { height: 3px; border-radius: 2px; }
}


/* ─── SECTION basics ─── */
.v3-section {
  /* Full-bleed band: the background spans the whole viewport while the
     content stays centred at --v3-max. (Was max-width + margin:auto, which
     made paper sections look like rectangular boxes floating on grey.) */
  padding-block: 110px;
  padding-inline: max(var(--v3-gutter), calc((100% - var(--v3-max)) / 2 + var(--v3-gutter)));
}
.v3-section.cream { background: transparent; }   /* reveal the body curve backdrop */
.v3-section.paper { background: var(--v3-paper-band); }
.v3-section.teal-mist { background: var(--v3-teal-mist); }

/* Gold-diamond divider sitting on the seam between two full-bleed bands.
   Zero-height element → no gap; the ornament floats on the boundary. */
.v3-band-divider { position: relative; height: 0; z-index: 4; }
.v3-band-divider::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: min(240px, 46%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v3-warm) 50%, transparent);
  opacity: 0.7;
}
.v3-band-divider::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--v3-warm);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

.v3-section-band {
  background: var(--v3-paper);
  margin: 0;
  max-width: none;
}
.v3-section-band .v3-section-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 110px var(--v3-gutter);
}

/* Section eyebrow + heading */
.v3-eyebrow {
  font-family: var(--v3-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-teal);
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.v3-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--v3-teal);
}
html[dir="rtl"] .v3-eyebrow {
  font-family: var(--v3-fa);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 13.5px;
  font-weight: 600;
}

.v3-h2 {
  font-family: var(--v3-serif);
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.08;
  font-weight: 500;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  text-wrap: balance;
  max-width: 22ch;
}
.v3-h2 em {
  font-style: italic;
  color: var(--v3-teal);
  font-weight: 400;
}
html[dir="rtl"] .v3-h2 {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .v3-h2 em { font-style: normal; color: var(--v3-teal); }

.v3-lede {
  font-size: 18px;
  line-height: 1.75;
  color: var(--v3-ink-2);
  max-width: 640px;
  margin: 0 0 50px;
}
html[dir="rtl"] .v3-lede { font-size: 16px; line-height: 2; }

/* ─── PURPOSE — large statement on cream ─── */
.v3-purpose {
  /* Asymmetric bottom: the Projects (wheel) section right below already has
     88px of top nav-clearance, so a full 120px here just doubled the dead
     space above the «میدان عمل» heading. Tighten the bottom only. */
  padding: 120px var(--v3-gutter) 40px;
  max-width: var(--v3-max);
  margin: 0 auto;
  text-align: start;
}
.v3-purpose-inner { max-width: 980px; }
/* Two-column variant: supporting photo fills the side that was empty
   (left in RTL). Image is admin-editable via about.image. */
.v3-purpose-inner.has-media {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: stretch;
}
.v3-purpose-inner.has-media .v3-purpose-text { align-self: center; max-width: 640px; }
.v3-purpose-media {
  position: relative;
  min-height: 440px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--v3-line);
  box-shadow: 0 30px 60px -34px rgba(11, 19, 38, 0.5);
}
.v3-purpose-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* subtle gold accent along the inner edge — brand touch */
.v3-purpose-media::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--v3-warm);
}
.v3-purpose-statement {
  font-family: var(--v3-serif);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
  margin: 28px 0 50px;
  text-wrap: balance;
}
.v3-purpose-statement em {
  font-style: italic;
  color: var(--v3-teal);
}
html[dir="rtl"] .v3-purpose-statement {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
html[dir="rtl"] .v3-purpose-statement em { font-style: normal; color: var(--v3-teal); }

/* About body — supporting paragraphs under the purpose statement. */
.v3-purpose-body { max-width: 680px; margin: 26px 0 6px; display: grid; gap: 16px; }
.v3-purpose-body p { font-size: 16px; line-height: 1.9; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-purpose-body p { font-family: var(--v3-fa); font-size: 15.5px; line-height: 2.1; }

/* ─── SPOTLIGHT — featured project, photo + text side by side ─── */
.v3-spotlight {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.v3-spotlight-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--v3-cream-2);
}
.v3-spotlight-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-spotlight-photo:hover img { transform: scale(1.04); }
.v3-spotlight-tag {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  background: var(--v3-paper);
  color: var(--v3-teal);
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}
html[dir="rtl"] .v3-spotlight-tag { font-family: var(--v3-fa); letter-spacing: 0.06em; text-transform: none; font-size: 12.5px; }

.v3-spotlight-body {
  padding-right: 20px;
}
html[dir="rtl"] .v3-spotlight-body { padding-right: 0; padding-left: 20px; }
.v3-spotlight-headline {
  font-family: var(--v3-serif);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 22px;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
}
html[dir="rtl"] .v3-spotlight-headline {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.4;
}
.v3-spotlight-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--v3-ink-2);
  margin: 0 0 28px;
}
html[dir="rtl"] .v3-spotlight-text { font-size: 15.5px; line-height: 2; }
.v3-spotlight-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
.v3-spotlight-meta > div {
  display: flex; flex-direction: column; gap: 4px;
}
.v3-spotlight-meta .l {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 500;
}
.v3-spotlight-meta .v {
  font-family: var(--v3-serif);
  font-size: 20px;
  color: var(--v3-ink);
  font-weight: 500;
}
html[dir="rtl"] .v3-spotlight-meta .l {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12.5px;
}
html[dir="rtl"] .v3-spotlight-meta .v {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 16px;
}

/* ─── OPERATIONS — 4-card photo grid ─── */
.v3-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.v3-op-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--v3-cream-2);
  cursor: pointer;
}
.v3-op-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-op-card:hover img { transform: scale(1.06); }
.v3-op-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.85) 100%);
}
.v3-op-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 36px 32px;
  color: var(--v3-paper);
}
.v3-op-text .num {
  font-family: var(--v3-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--v3-warm-hi);
  margin-bottom: 10px;
}
.v3-op-text h3 {
  font-family: var(--v3-serif);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.18;
  font-weight: 500;
  margin: 0 0 10px;
  text-wrap: balance;
}
html[dir="rtl"] .v3-op-text h3 {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
}
.v3-op-text p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 420px;
}
html[dir="rtl"] .v3-op-text p { font-size: 14px; line-height: 1.85; }

.v3-op-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--v3-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
html[dir="rtl"] .v3-op-arrow { right: auto; left: 24px; }
.v3-op-card:hover .v3-op-arrow {
  background: var(--v3-teal);
  color: var(--v3-paper);
  transform: rotate(-25deg);
}

/* ─── STATS — by the numbers ─── */
.v3-stats-band {
  background: var(--v3-teal-deep);
  color: var(--v3-paper);
  padding: 100px 0;
}
.v3-stats-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 0 var(--v3-gutter);
}
.v3-stats-head {
  max-width: 720px;
  margin-bottom: 70px;
}
.v3-stats-head .v3-eyebrow { color: var(--v3-warm-hi); }
.v3-stats-head .v3-eyebrow::before { background: var(--v3-warm-hi); }
.v3-stats-head h2 {
  font-family: var(--v3-serif);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  font-weight: 500;
  margin: 0;
  color: var(--v3-paper);
  letter-spacing: -0.005em;
}
.v3-stats-head h2 em { font-style: italic; color: var(--v3-warm-hi); font-weight: 400; }
html[dir="rtl"] .v3-stats-head h2 {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.35;
}
html[dir="rtl"] .v3-stats-head h2 em { font-style: normal; color: var(--v3-warm-hi); }

.v3-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.v3-stat {
  padding: 28px 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
html[dir="rtl"] .v3-stat { border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.18); }
.v3-stat:first-child { border-left: none; }
html[dir="rtl"] .v3-stat:first-child { border-right: none; }
.v3-stat-value {
  font-family: var(--v3-serif);
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  font-weight: 500;
  color: var(--v3-warm-hi);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}
.v3-stat-value .unit {
  font-size: 24px;
  color: var(--v3-paper);
  letter-spacing: 0.02em;
}
html[dir="rtl"] .v3-stat-value {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  flex-wrap: wrap;          /* long fa units (e.g. «میلیارد دلار») wrap, never overflow */
  max-width: 100%;
}
html[dir="rtl"] .v3-stat-value .unit { font-family: var(--v3-fa); font-size: 18px; }
.v3-stat { min-width: 0; }   /* let the grid cell shrink instead of forcing overflow */
.v3-stat-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 6px;
}
.v3-stat-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}
html[dir="rtl"] .v3-stat-label { font-size: 14px; }
html[dir="rtl"] .v3-stat-sub { font-size: 13px; line-height: 1.85; }

/* ═══════════════════════════════════════════════════════════════
   WORKFORCE — human-capital charts (growth area + department donut)
   ═══════════════════════════════════════════════════════════════ */
.v3-wf {
  background:
    radial-gradient(120% 100% at 0% 0%, var(--v3-cream) 0%, var(--v3-cream) 55%, var(--v3-cream-2) 100%);
  padding: 110px 0;
  border-top: 1px solid var(--v3-line);
}
.v3-wf-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 0 var(--v3-gutter);
}
.v3-wf-head { max-width: 760px; margin-bottom: 56px; }
.v3-wf-head .v3-h2 { margin-top: 6px; }
.v3-wf-lede {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--v3-ink-2);
  max-width: 660px;
}
html[dir="rtl"] .v3-wf-lede { font-size: 16px; line-height: 2.05; }

.v3-wf-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 30px;
  align-items: stretch;
}
.v3-wf-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }
.v3-wf-col { display: flex; }
.v3-wf-card {
  flex: 1;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  padding: 30px 32px 34px;
  box-shadow: 0 24px 60px -38px rgba(11, 19, 38, 0.5);
  display: flex;
  flex-direction: column;
}
.v3-wf-card-head { margin-bottom: 18px; }
.v3-wf-card-head h3 {
  margin: 0;
  font-family: var(--v3-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--v3-teal-deep);
  letter-spacing: -0.005em;
}
html[dir="rtl"] .v3-wf-card-head h3 { font-family: var(--v3-fa); font-weight: 700; font-size: 21px; }
.v3-wf-card-head span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--v3-ink-3);
  letter-spacing: 0.01em;
}

/* ── Growth area chart ── */
.v3-wf-growth { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.v3-wf-growth-svg { width: 100%; height: auto; display: block; overflow: visible; }
.v3-wf-gl { stroke: var(--v3-line); stroke-width: 1; }
.v3-wf-gl.base { stroke: var(--v3-line-2); }
.v3-wf-yl { font-family: var(--v3-sans); font-size: 13px; fill: var(--v3-ink-4); }
.v3-wf-xl { font-family: var(--v3-sans); font-size: 14px; fill: var(--v3-ink-3); font-weight: 500; }
html[dir="rtl"] .v3-wf-xl, html[dir="rtl"] .v3-wf-yl { font-family: var(--v3-fa); }
.v3-wf-val { font-family: var(--v3-sans); font-size: 15px; font-weight: 700; fill: var(--v3-teal-dark); opacity: 0; transition: opacity 0.5s ease; }
html[dir="rtl"] .v3-wf-val { font-family: var(--v3-fa); }
.v3-wf-area { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s; }
.v3-wf-growth.is-drawn .v3-wf-area { opacity: 1; transform: translateY(0); }
.v3-wf-line {
  stroke: var(--v3-teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  transition: stroke-dashoffset 1.7s cubic-bezier(0.45, 0, 0.15, 1);
}
.v3-wf-pt { opacity: 0; transition: opacity 0.45s ease; }
.v3-wf-pt .v3-wf-dot, .v3-wf-pt .v3-wf-dot-halo {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v3-wf-dot { fill: var(--v3-paper); stroke: var(--v3-teal); stroke-width: 3; }
.v3-wf-dot-halo { fill: var(--v3-teal); opacity: 0.16; }
.v3-wf-growth.is-drawn .v3-wf-pt { opacity: 1; }
.v3-wf-growth.is-drawn .v3-wf-pt .v3-wf-dot,
.v3-wf-growth.is-drawn .v3-wf-pt .v3-wf-dot-halo { transform: scale(1); }
.v3-wf-growth.is-drawn .v3-wf-val { opacity: 1; transition-delay: 1.1s; }

/* ── KPI summary strip — anchored to the bottom of the growth card so it
   fills the empty space and balances the taller donut card. ── */
.v3-wf-kpis {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--v3-line);
}
.v3-wf-kpi { text-align: center; padding: 4px 10px; }
.v3-wf-kpi + .v3-wf-kpi { border-inline-start: 1px solid var(--v3-line); }
.v3-wf-kpi-num {
  font-family: var(--v3-serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--v3-teal-deep);
  line-height: 1;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .v3-wf-kpi-num { font-family: var(--v3-fa); font-weight: 800; font-size: 28px; }
.v3-wf-kpi-num small {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-warm);
  margin-inline-start: 4px;
}
html[dir="rtl"] .v3-wf-kpi-num small { font-size: 12.5px; margin-inline-start: 5px; }
/* Machinery / fleet — summary card (big total) on the About page */
.v3-fleet-summary { display: flex; flex-direction: column; }
.v3-fleet-total { text-align: center; padding: 24px 0 6px; }
.v3-fleet-total-num { font-family: var(--v3-serif); font-size: clamp(52px, 7vw, 88px); font-weight: 600; line-height: 1; color: var(--v3-warm); }
html[dir="rtl"] .v3-fleet-total-num { font-family: var(--v3-fa); font-weight: 800; }
.v3-fleet-total-lbl { font-size: 14px; line-height: 1.7; color: var(--v3-ink-3); margin: 12px auto 0; max-width: 280px; }
html[dir="rtl"] .v3-fleet-total-lbl { font-family: var(--v3-fa); }

/* ── Interactive fleet showcase (Apple-style dark module in a light section) ── */
.v3-mshow {
  display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 28px;
  align-items: stretch; margin: 6px 0 44px; padding: 26px; border-radius: 24px;
  background: linear-gradient(160deg, #10192f, #0b1220);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -42px rgba(11, 19, 38, 0.55);
}
.v3-mshow-side { display: flex; gap: 14px; align-items: flex-start; }
.v3-mshow-nav { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding-top: 4px; }
.v3-mshow-arrow {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.v3-mshow-arrow:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.v3-mshow-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 6px; }
.v3-mshow-list::-webkit-scrollbar { width: 8px; }
.v3-mshow-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 8px; }
.v3-mshow-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }
.v3-mshow-list::-webkit-scrollbar-track { background: transparent; }
.v3-mshow-btn {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: start; font: inherit;
  padding: 15px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9); transition: background 0.25s ease, border-color 0.25s ease;
}
.v3-mshow-btn:hover { background: rgba(255, 255, 255, 0.12); }
.v3-mshow-item.is-active .v3-mshow-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(200, 150, 62, 0.42); }
.v3-mshow-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.7); font-size: 17px; line-height: 1;
}
.v3-mshow-item.is-active .v3-mshow-mark { border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); }
.v3-mshow-name { font-family: var(--v3-fa); font-weight: 700; font-size: 16px; color: #fff; }
html[dir="ltr"] .v3-mshow-name { font-family: var(--v3-sans); }
.v3-mshow-desc {
  margin: 12px 10px 2px; padding: 16px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.82);
  font-family: var(--v3-fa); font-size: 14.5px; line-height: 2;
  animation: v3-pp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[dir="ltr"] .v3-mshow-desc { font-family: var(--v3-sans); line-height: 1.75; }
.v3-mshow-media { position: relative; border-radius: 18px; overflow: hidden; background: #0a1120; min-height: 340px; }
.v3-mshow-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.v3-mshow-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-mshow-noimg { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.4); font-family: var(--v3-fa); font-size: 13px; }
html[dir="ltr"] .v3-mshow-noimg { font-family: var(--v3-sans); }
.v3-mshow-media-cap {
  position: absolute; inset-inline-start: 16px; bottom: 14px; font-family: var(--v3-fa); font-weight: 700; font-size: 15px; color: #fff;
  background: rgba(11, 19, 38, 0.55); padding: 6px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[dir="ltr"] .v3-mshow-media-cap { font-family: var(--v3-sans); }
@media (max-width: 820px) {
  .v3-mshow { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .v3-mshow-media { min-height: 240px; order: -1; }
}
.v3-wf-kpi-lbl {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--v3-ink-3);
  line-height: 1.5;
}
html[dir="rtl"] .v3-wf-kpi-lbl { font-size: 11.5px; }

/* ── Department donut ── */
.v3-wf-donut-wrap { display: flex; flex-direction: column; align-items: center; }
.v3-wf-donut { position: relative; width: 100%; max-width: 280px; margin: 4px auto 26px; }
.v3-wf-donut-svg { width: 100%; height: auto; display: block; }
.v3-wf-arc {
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              stroke-width 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}
.v3-wf-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.v3-wf-donut-num {
  position: relative;
  font-family: var(--v3-serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: var(--v3-teal-deep);
}
html[dir="rtl"] .v3-wf-donut-num { font-family: var(--v3-fa); font-weight: 800; font-size: 40px; }
.v3-wf-donut-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-teal-dark);
}
.v3-wf-donut-center.is-ov .v3-wf-donut-num .num { opacity: 0; }
.v3-wf-donut-cap {
  margin-top: 8px;
  font-family: var(--v3-sans);
  font-size: 12.5px;
  color: var(--v3-ink-3);
  letter-spacing: 0.01em;
  max-width: 150px;
  line-height: 1.4;
}
html[dir="rtl"] .v3-wf-donut-cap { font-family: var(--v3-fa); }

.v3-wf-legend { list-style: none; margin: 0; padding: 0; width: 100%; }
.v3-wf-leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.v3-wf-leg:hover, .v3-wf-leg.is-hover { background: var(--v3-cream-2); }
.v3-wf-leg-dot { order: 1; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.v3-wf-leg-name { order: 2; flex: 1; min-width: 0; font-size: 14px; color: var(--v3-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-wf-leg-num {
  order: 3;
  text-align: end;
  font-family: var(--v3-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--v3-teal-deep);
  line-height: 1.05;
  white-space: nowrap;
}
html[dir="rtl"] .v3-wf-leg-num { font-family: var(--v3-fa); font-weight: 700; font-size: 16px; }
.v3-wf-leg-num small { font-family: var(--v3-sans); font-size: 11px; font-weight: 500; color: var(--v3-ink-4); margin-inline-start: 6px; }
html[dir="rtl"] .v3-wf-leg-num small { font-family: var(--v3-fa); }
.v3-wf-leg-bar {
  order: 4;
  flex-basis: 100%;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--v3-line);
  overflow: hidden;
}
.v3-wf-leg-fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 920px) {
  .v3-wf-grid { grid-template-columns: 1fr; gap: 24px; }
  .v3-wf-donut { max-width: 240px; }
}
@media (max-width: 560px) {
  .v3-wf { padding: 72px 0; }
  .v3-wf-card { padding: 24px 20px 26px; border-radius: 13px; }
  .v3-wf-val { font-size: 17px; }
  .v3-wf-xl { font-size: 16px; }
  .v3-wf-yl { font-size: 15px; }
}

/* ─── STORIES — news grid ─── */
.v3-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.v3-story-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.v3-story-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v3-cream-2);
  margin-bottom: 20px;
}
.v3-story-photo img,
.v3-story-empty {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-story-empty {
  background: linear-gradient(135deg, var(--v3-teal) 0%, var(--v3-teal-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-paper);
  font-family: var(--v3-serif);
  font-size: 60px;
  opacity: 0.5;
}
.v3-story-card:hover .v3-story-photo img { transform: scale(1.06); }
.v3-story-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-teal);
  font-weight: 600;
  margin-bottom: 12px;
}
html[dir="rtl"] .v3-story-tag {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12.5px;
}
.v3-story-date {
  font-size: 12px;
  color: var(--v3-ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.v3-story-card h4 {
  font-family: var(--v3-serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0 0 14px;
  text-wrap: balance;
  transition: color 0.3s ease;
}
.v3-story-card:hover h4 { color: var(--v3-teal); }

/* Story card excerpt + read-more reveal on hover. The excerpt is
 * collapsed by default (max-height 0 + opacity 0) so the card reads
 * as a clean tag/date/headline tile; on hover it expands smoothly. */
.v3-story-excerpt {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              margin 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-story-card:hover .v3-story-excerpt,
.v3-story-card:focus-within .v3-story-excerpt {
  max-height: 200px;
  opacity: 1;
  margin: 0 0 16px;
}

.v3-story-more {
  transform: translateY(-4px);
  opacity: 0.55;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
}
.v3-story-card:hover .v3-story-more {
  transform: translateY(0);
  opacity: 1;
}
html[dir="rtl"] .v3-story-card h4 {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
}
.v3-story-excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--v3-ink-2);
}
html[dir="rtl"] .v3-story-excerpt { font-size: 14px; line-height: 1.9; }
.v3-story-more {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--v3-teal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.v3-story-more svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.v3-story-card:hover .v3-story-more svg { transform: translateX(-3px); }
html[dir="ltr"] .v3-story-card:hover .v3-story-more svg { transform: translateX(3px); }

/* ─── NEWS MARQUEE — left↔right scrolling ticker of news cards ─────
 * Replaces the old static .v3-stories-grid with an infinitely-looping
 * horizontal strip. The track holds two copies of the list and
 * translates by -50% so the second copy snaps in seamlessly. Hover
 * pauses; RTL flips the scroll direction.
 *
 * The outer .v3-news-marquee stretches across the entire section
 * (cancelling the section's gutter padding via negative margins),
 * while the section title sits inside the normal column padding
 * above it. Gradient fades on the left/right edges soften the
 * entry/exit so cards don't hard-cut at the section edge.
 *
 * IMPORTANT: parent (.v3-section) is a flex column, so we must
 * `align-self: stretch` and use a percentage width (not 100vw +
 * negative-half-viewport, which collapses to 0 inside a flex
 * column on some layouts). */
.v3-news-marquee {
  position: relative;
  display: block;
  /* LTR layout context so the wide (max-content) track aligns to the
   * LEFT and the transform math is predictable. On the RTL page an
   * rtl container would right-align the 6000px+ track and push it
   * thousands of px off-screen to the left — which is exactly why the
   * news looked empty. Card *text* is switched back to rtl below. */
  direction: ltr;
  width: auto;
  margin-inline: calc(var(--v3-gutter) * -1);
  margin-block-start: 36px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
/* Restore RTL inside each card so Persian text aligns + reads correctly,
 * even though the strip itself is laid out left→right. */
html[dir="rtl"] .v3-news-card { direction: rtl; }
.v3-news-track {
  display: flex;
  /* Force LTR layout so the flex cards always lay out left→right and
   * the transform math is predictable regardless of the page's RTL
   * direction. Without this, on the Persian (rtl) page the cards
   * stacked from the right edge and the mask clipped them to slivers
   * — which read as "no news showing". */
  direction: ltr;
  gap: 28px;
  width: max-content;
  padding-block: 8px;
  /* Cards drift left → right across the strip. Starting the keyframe
   * at -50% means the visible window is already FULL of cards at t=0
   * (no empty run-in), and because the track holds two identical
   * copies the wrap from 0 → -50% is seamless. */
  animation: v3-news-roll 38s linear infinite;
  will-change: transform;
}
.v3-news-marquee:hover .v3-news-track,
.v3-news-marquee:focus-within .v3-news-track {
  animation-play-state: paused;
}
/* Touch devices have no hover to pause the auto-scroll, and cards moving
 * under the finger cause mis-taps. On touch, stop the auto-marquee and
 * let the user swipe the strip horizontally instead. */
@media (hover: none) {
  .v3-news-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .v3-news-marquee::-webkit-scrollbar { display: none; }
  .v3-news-track { animation-play-state: paused; }
}

@keyframes v3-news-roll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Credentials ticker on the About page — reuses the news-marquee engine
   (.v3-news-marquee/.v3-news-track) with the credential cards. The
   credentials section sits OUTSIDE .v3-subpage-inner, so it already spans
   the full subpage width; width:100% (not 100vw, which adds the scrollbar
   width and causes overflow) keeps it edge-to-edge with zero page scroll. */
.v3-cred-mq { margin-inline: 0; width: 100%; margin-block-start: 14px; }
.v3-cred-mq .v3-news-track { gap: 22px; align-items: stretch; padding-block: 14px; }
.v3-cred-mq .v3-cred-card { flex: 0 0 auto; width: 360px; cursor: default; }
.v3-cred-mq .v3-cred-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .v3-cred-mq .v3-cred-card { width: 290px; } }

.v3-news-card {
  flex: 0 0 auto;
  width: 320px;
  background: var(--v3-paper, #FFFFFF);
  border: 1px solid var(--v3-line, #D2D6DE);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  text-decoration: none;
  color: inherit;
}
.v3-news-card:hover {
  transform: translateY(-6px);
  border-color: var(--v3-teal);
  box-shadow: 0 18px 36px -16px rgba(11, 19, 38, 0.22);
}
.v3-news-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--v3-cream-2, #DBDDE2);
  overflow: hidden;
}
.v3-news-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.v3-news-card:hover .v3-news-photo img { transform: scale(1.06); }
.v3-news-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--v3-teal-mist, #E3E7F0), var(--v3-cream-2, #DBDDE2));
  font-family: var(--v3-serif, "Cormorant Garamond", serif);
  font-size: 56px;
  color: var(--v3-teal);
  opacity: 0.6;
}
.v3-news-tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--v3-teal);
  padding: 5px 11px;
  font-family: var(--v3-sans, "Inter", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
}
html[dir="rtl"] .v3-news-tag {
  font-family: var(--v3-fa, "Vazirmatn", sans-serif);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11.5px;
  font-weight: 700;
}
.v3-news-meta {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.v3-news-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3, #6E7585);
}
html[dir="rtl"] .v3-news-date { font-family: var(--v3-fa, "Vazirmatn", sans-serif); letter-spacing: 0.02em; font-size: 12px; }
.v3-news-title {
  font-family: var(--v3-serif, "Cormorant Garamond", serif);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--v3-ink, #131722);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.v3-news-card:hover .v3-news-title { color: var(--v3-teal); }
html[dir="rtl"] .v3-news-title {
  font-family: var(--v3-fa, "Vazirmatn", sans-serif);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.55;
}
.v3-news-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v3-sans, "Inter", system-ui, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v3-teal);
  text-transform: uppercase;
  padding-top: 6px;
}
html[dir="rtl"] .v3-news-more { font-family: var(--v3-fa, "Vazirmatn", sans-serif); text-transform: none; font-size: 13px; letter-spacing: 0; font-weight: 700; }
.v3-news-more svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.v3-news-card:hover .v3-news-more svg { transform: translateX(3px); }
html[dir="rtl"] .v3-news-card:hover .v3-news-more svg { transform: translateX(-3px); }

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

/* ─── PEOPLE — 3D card-stack (ported from v2 ManagerCardStack) ─────
 * 3D fan of portrait cards: active card front-and-centre, the rest
 * fan out behind with rotate+translate+depth. Drag the active card
 * to swipe; click any visible side card to make it active; arrow
 * keys + auto-advance keep it moving.
 *
 * Geometry mirrors the v2 version the user already approved. Only
 * the palette is swapped from gold-on-navy to teal-on-paper to
 * match v3. */
.v3-mgr-stack {
  width: 100%;
  user-select: none;
  margin-top: 32px;
}
.v3-mgr-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  outline: none;
  touch-action: pan-y;
  /* Clip only the x-axis so any residual fan bleed (spring overshoot
     or an active-card drag) never spills into horizontal page scroll;
     overflow-y stays visible so the lifted active card + its shadow
     are not cut. */
  overflow-x: clip;
}
/* Keyboard-focus ring — the stage is arrow-key interactive, so replace the
   removed outline with a visible focus indicator (mirrors .v3-wheel-card). */
.v3-mgr-stage:focus-visible {
  outline: 3px solid var(--v3-warm);
  outline-offset: 4px;
}
.v3-mgr-spotlight {
  position: absolute;
  inset-inline: 0;
  margin: 0 auto;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(60px);
}
.v3-mgr-spotlight.top    { top: 6%;   height: 30%; width: 60%; background: rgba(20, 33, 61, 0.08); }
.v3-mgr-spotlight.bottom { bottom: 0; height: 30%; width: 70%; background: rgba(11, 19, 38, 0.10); }

.v3-mgr-fan {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.v3-mgr-card {
  position: absolute;
  bottom: 24px;
  border-radius: 18px;
  border: 3px solid rgba(11, 19, 38, 0.06);
  overflow: hidden;
  background: var(--v3-cream-2);
  cursor: pointer;
  box-shadow:
    0 18px 38px -14px rgba(11, 19, 38, 0.30),
    0 6px 12px rgba(11, 19, 38, 0.10);
  will-change: transform;
}
.v3-mgr-card.active {
  cursor: grab;
  border-color: rgba(20, 33, 61, 0.45);
  box-shadow:
    0 32px 60px -16px rgba(11, 19, 38, 0.42),
    0 10px 18px rgba(11, 19, 38, 0.18);
}
.v3-mgr-card.active:active { cursor: grabbing; }

.v3-mgr-photo { position: absolute; inset: 0; }
.v3-mgr-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
.v3-mgr-no-photo {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--v3-teal-mist) 0%, var(--v3-cream-2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--v3-serif);
  font-size: 104px;
  color: var(--v3-teal);
  opacity: 0.55;
}

.v3-mgr-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 19, 38, 0.00)  0%,
    rgba(11, 19, 38, 0.00) 38%,
    rgba(11, 19, 38, 0.55) 72%,
    rgba(11, 19, 38, 0.92) 100%);
  pointer-events: none;
}
.v3-mgr-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 24px 24px;
  z-index: 2;
  color: var(--v3-paper);
}
.v3-mgr-role {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-warm);
  margin-bottom: 6px;
  display: inline-block;
}
html[dir="rtl"] .v3-mgr-role {
  font-family: var(--v3-fa);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 600;
}
.v3-mgr-name {
  font-family: var(--v3-serif);
  font-size: 24px;
  letter-spacing: 0.015em;
  font-weight: 500;
  line-height: 1.15;
  color: var(--v3-paper);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  margin: 0;
}
html[dir="rtl"] .v3-mgr-name {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
}
.v3-mgr-bio {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[dir="rtl"] .v3-mgr-bio { font-family: var(--v3-fa); font-size: 13px; line-height: 1.9; }

/* Dots */
.v3-mgr-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.v3-mgr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(11, 19, 38, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.v3-mgr-dot:hover { background: rgba(11, 19, 38, 0.5); }
.v3-mgr-dot.active {
  background: var(--v3-teal);
  width: 26px;
  border-radius: 6px;
}

@media (max-width: 720px) {
  .v3-mgr-card { transform-origin: center bottom; }
  .v3-mgr-name { font-size: 18px; }
}
/* Phones — cards shrink (JS-driven), so tighten the overlay text +
   chrome to match the smaller card and reduce vertical dead space. */
@media (max-width: 560px) {
  .v3-mgr-stack { margin-top: 22px; }
  .v3-mgr-meta { padding: 15px 16px 17px; }
  .v3-mgr-name { font-size: 17px; }
  html[dir="rtl"] .v3-mgr-name { font-size: 16px; line-height: 1.35; }
  .v3-mgr-role { font-size: 9.5px; margin-bottom: 4px; }
  html[dir="rtl"] .v3-mgr-role { font-size: 11px; }
  .v3-mgr-no-photo { font-size: 72px; }
  .v3-mgr-bio { -webkit-line-clamp: 2; font-size: 11.5px; margin-top: 7px; }
  html[dir="rtl"] .v3-mgr-bio { font-size: 12px; line-height: 1.7; }
  .v3-mgr-dots { margin-top: 18px; }
}

/* ─── CERTS — minimalist row of seals ─── */
.v3-certs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--v3-line);
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
.v3-cert-item {
  background: var(--v3-paper);
  padding: 40px 32px;
  text-align: center;
  transition: background 0.3s ease;
}
.v3-cert-item:hover { background: var(--v3-cream); }
.v3-cert-code {
  font-family: var(--v3-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--v3-teal);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.v3-cert-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.v3-cert-issuer {
  font-size: 13px;
  color: var(--v3-ink-3);
  line-height: 1.55;
}
html[dir="rtl"] .v3-cert-issuer { font-size: 13.5px; line-height: 1.85; }

/* ─── SUSTAINABILITY BAND ─── */
.v3-sustain {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--v3-ink);
  isolation: isolate;
}
.v3-sustain-photo {
  position: absolute; inset: 0;
  z-index: 0;
}
.v3-sustain-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.v3-sustain-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 19, 38, 0.65) 0%, rgba(11, 19, 38, 0) 60%);
}
html[dir="rtl"] .v3-sustain-photo::after {
  background: linear-gradient(270deg, rgba(11, 19, 38, 0.65) 0%, rgba(11, 19, 38, 0) 60%);
}
.v3-sustain-inner {
  position: relative;
  z-index: 2;
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 100px var(--v3-gutter);
  color: var(--v3-paper);
}
.v3-sustain-eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-warm-hi);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.v3-sustain-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--v3-warm-hi);
}
html[dir="rtl"] .v3-sustain-eyebrow {
  font-family: var(--v3-fa);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 14px;
}
.v3-sustain-headline {
  font-family: var(--v3-serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 500;
  margin: 0 0 24px;
  max-width: 720px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.v3-sustain-headline em { font-style: italic; color: var(--v3-warm-hi); font-weight: 400; }
html[dir="rtl"] .v3-sustain-headline {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.3;
}
html[dir="rtl"] .v3-sustain-headline em { font-style: normal; }
.v3-sustain-text {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 0 36px;
}
html[dir="rtl"] .v3-sustain-text { font-size: 15.5px; line-height: 2; }

/* ─── CAREERS ─── */
.v3-careers {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.v3-careers-side h2 { margin-bottom: 20px; }
.v3-careers-list {
  display: flex;
  flex-direction: column;
}
.v3-career-item { border-bottom: 1px solid var(--v3-line); }
/* the clickable header row (toggles the detail open) */
.v3-career-head {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  background: none;
  border: none;
  font-family: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
  transition: padding 0.3s ease;
}
.v3-career-head:hover { padding-inline-start: 14px; }
.v3-career-title {
  font-family: var(--v3-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--v3-ink);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}
.v3-career-head:hover .v3-career-title,
.v3-career-item.is-open .v3-career-title { color: var(--v3-teal); }
html[dir="rtl"] .v3-career-title { font-family: var(--v3-fa); font-weight: 700; font-size: 18px; }
.v3-career-sub {
  font-size: 13px;
  color: var(--v3-ink-3);
  letter-spacing: 0.04em;
}
html[dir="rtl"] .v3-career-sub { font-size: 13.5px; }
.v3-career-toggle {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--v3-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-ink-3);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s ease;
}
.v3-career-head:hover .v3-career-toggle { border-color: var(--v3-teal); color: var(--v3-teal); }
.v3-career-item.is-open .v3-career-toggle {
  background: var(--v3-teal);
  border-color: var(--v3-teal);
  color: var(--v3-paper);
  transform: rotate(180deg);
}
/* expanded role detail */
.v3-career-detail { padding: 2px 0 30px; max-width: 760px; animation: v3-career-open 0.32s ease both; }
@keyframes v3-career-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v3-career-desc { font-size: 16px; line-height: 1.85; color: var(--v3-ink-2); margin: 0 0 18px; }
html[dir="rtl"] .v3-career-desc { font-family: var(--v3-fa); font-size: 15px; line-height: 2.05; }
.v3-career-desc.is-empty { color: var(--v3-ink-3); font-style: italic; }
.v3-career-reqs { margin: 0 0 22px; }
.v3-career-reqs-h {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--v3-ink-3); margin-bottom: 10px;
}
html[dir="rtl"] .v3-career-reqs-h { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-career-reqs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v3-career-reqs li {
  position: relative; padding-inline-start: 20px;
  font-size: 15px; line-height: 1.7; color: var(--v3-ink-2);
}
html[dir="rtl"] .v3-career-reqs li { font-family: var(--v3-fa); font-size: 14px; }
.v3-career-reqs li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--v3-warm);
}
.v3-career-apply {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--v3-teal); color: var(--v3-paper);
  border: none; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.25s ease, transform 0.25s ease;
}
html[dir="rtl"] .v3-career-apply { font-family: var(--v3-fa); }
.v3-career-apply:hover { background: var(--v3-ink); transform: translateY(-1px); }
.v3-career-apply svg { transition: transform 0.25s ease; }
.v3-career-apply:hover svg { transform: translateX(3px); }
html[dir="rtl"] .v3-career-apply:hover svg { transform: translateX(-3px); }

/* ─── NEWSLETTER / CONNECT BAND ─── */
.v3-connect {
  background: var(--v3-paper-band);
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
.v3-connect-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
  padding: 90px var(--v3-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.v3-connect-body h2 {
  font-family: var(--v3-serif);
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
}
.v3-connect-body h2 em { font-style: italic; color: var(--v3-teal); font-weight: 400; }
html[dir="rtl"] .v3-connect-body h2 {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.35;
}
html[dir="rtl"] .v3-connect-body h2 em { font-style: normal; }
.v3-connect-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--v3-ink-2);
  margin: 0;
  max-width: 460px;
}
html[dir="rtl"] .v3-connect-body p { font-size: 15px; line-height: 1.95; }

/* Company contact channels (address / phone / email) under the intro. */
.v3-contact-info { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.v3-contact-info li { display: flex; flex-direction: column; gap: 3px; }
.v3-contact-info-label {
  font-family: var(--v3-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--v3-warm);
}
html[dir="rtl"] .v3-contact-info-label { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.v3-contact-info-value { font-size: 15px; line-height: 1.6; color: var(--v3-ink); }
html[dir="rtl"] .v3-contact-info-value { font-family: var(--v3-fa); }
.v3-contact-info-value.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  direction: ltr; unicode-bidi: plaintext; letter-spacing: 0.02em; font-size: 14px;
}
html[dir="rtl"] .v3-contact-info-value.mono { display: inline-block; }

.v3-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v3-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-field { display: flex; flex-direction: column; gap: 6px; }
.v3-field label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 600;
}
html[dir="rtl"] .v3-field label { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; font-size: 12.5px; }
/* Résumé form (Connect) field titles → brand navy for a crisper, on-brand look */
.v3-connect .v3-field label { color: var(--v3-teal); }
.v3-field input,
.v3-field textarea {
  font-family: inherit;
  font-size: 15px;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--v3-line-2);
  padding: 10px 0;
  color: var(--v3-ink);
  outline: none;
  transition: border-color 0.25s ease;
}
.v3-field textarea { min-height: 100px; resize: vertical; }
.v3-field input:focus,
.v3-field textarea:focus {
  border-bottom-color: var(--v3-teal);
}
/* ─── Résumé drop-zone (PDF upload inside the careers form) ──────
 * A click-or-drag-and-drop target that swaps between an empty
 * "drop here" prompt and a compact "attached file" chip after a
 * PDF is selected. Dashed teal border highlights when the user
 * is dragging a file over it. */
.v3-resume-drop {
  border: 1.5px dashed var(--v3-line-2);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--v3-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
  min-height: 96px;
  text-align: start;
}
.v3-resume-drop:hover {
  border-color: var(--v3-teal);
  background: var(--v3-teal-mist);
}
.v3-resume-drop.is-over {
  border-color: var(--v3-teal);
  background: var(--v3-teal-mist);
  transform: scale(1.01);
}
.v3-resume-drop.is-attached {
  border-style: solid;
  border-color: var(--v3-teal);
  background: var(--v3-paper);
  cursor: default;
}
.v3-resume-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--v3-ink-3);
}
.v3-resume-prompt svg { color: var(--v3-teal); flex: 0 0 auto; }
.v3-resume-prompt strong {
  display: block;
  font-family: var(--v3-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  margin-bottom: 2px;
}
html[dir="rtl"] .v3-resume-prompt strong { font-family: var(--v3-fa); font-weight: 700; font-size: 14.5px; }
.v3-resume-prompt span {
  display: block;
  font-size: 12.5px;
  color: var(--v3-ink-3);
}
html[dir="rtl"] .v3-resume-prompt span { font-family: var(--v3-fa); font-size: 13px; }

.v3-resume-attached {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.v3-resume-attached > svg { color: var(--v3-teal); flex: 0 0 auto; }
.v3-resume-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.v3-resume-name {
  font-family: var(--v3-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[dir="rtl"] .v3-resume-name { font-family: var(--v3-fa); font-weight: 700; font-size: 14.5px; }
.v3-resume-size {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--v3-ink-3);
  letter-spacing: 0.04em;
}
.v3-resume-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--v3-line-2);
  color: var(--v3-ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.v3-resume-remove:hover {
  background: var(--v3-teal);
  border-color: var(--v3-teal);
  color: var(--v3-paper);
}
.v3-resume-error {
  margin-top: 8px;
  font-size: 12.5px;
  color: #B83A3A;
  letter-spacing: 0.02em;
}
html[dir="rtl"] .v3-resume-error { font-family: var(--v3-fa); font-size: 13px; }

.v3-form-submit {
  align-self: flex-start;
  margin-top: 14px;
}
.v3-form-success {
  padding: 14px 18px;
  background: var(--v3-teal-mist);
  color: var(--v3-teal-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
html[dir="rtl"] .v3-form-success { font-family: var(--v3-fa); font-size: 14px; }
/* Failure counterpart — a lost message must never show the success banner. */
.v3-form-error {
  padding: 14px 18px;
  background: rgba(196, 80, 59, 0.1);
  color: #A33F2E;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
html[dir="rtl"] .v3-form-error { font-family: var(--v3-fa); font-size: 14px; }

/* ─── FOOTER ─── */
.v3-footer {
  background: var(--v3-teal-deep);
  color: var(--v3-paper);
  padding: 80px var(--v3-gutter) 28px;
}
.v3-footer-inner {
  max-width: var(--v3-max);
  margin: 0 auto;
}
.v3-footer-top {
  display: grid;
  /* Brand block + however many footer columns the admin defines (--fcols,
     set inline from cols.length). Static fallback first for old browsers
     that don't support repeat(var()); modern browsers use the exact count.
     Responsive media queries below override the column count at breakpoints. */
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-columns: 1.5fr repeat(var(--fcols, 3), minmax(0, 1fr));
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.v3-footer-brand h3 {
  font-family: var(--v3-serif);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--v3-paper);
}
html[dir="rtl"] .v3-footer-brand h3 { font-family: var(--v3-fa); font-weight: 800; font-size: 22px; }
.v3-footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: var(--v3-warm-hi);
  font-weight: 600;
  margin: -6px 0 16px;
  max-width: 320px;
  letter-spacing: 0.01em;
}
html[dir="rtl"] .v3-footer-tagline { font-size: 12.5px; line-height: 1.9; }
.v3-footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.74);
  max-width: 320px;
  margin: 0 0 20px;
}
html[dir="rtl"] .v3-footer-brand p { font-size: 13.5px; line-height: 1.95; }
.v3-footer-social {
  display: inline-flex;
  gap: 12px;
}
.v3-footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  transition: all 0.25s ease;
}
.v3-footer-social a:hover {
  background: var(--v3-warm);
  border-color: var(--v3-warm);
  color: var(--v3-ink);
}
/* Social icon whose link isn't set in the admin yet: shown (so the row reads
   as a complete design) but dimmed + non-interactive — no dead navigation. */
.v3-footer-social a.v3-social-off {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.v3-footer-col h5 {
  font-family: var(--v3-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-warm-hi);
  margin: 0 0 18px;
  font-weight: 600;
}
html[dir="rtl"] .v3-footer-col h5 {
  font-family: var(--v3-fa);
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 13px;
}
.v3-footer-col a {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.74);
  padding: 5px 0;
  transition: color 0.2s ease;
  cursor: pointer;
}
.v3-footer-col a:hover { color: var(--v3-paper); }
html[dir="rtl"] .v3-footer-col a { font-size: 13.5px; }

.v3-footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.02em;
}
.v3-footer-bottom a:hover { color: var(--v3-paper); }
.v3-footer-other {
  display: inline-flex;
  gap: 18px;
}
html[dir="rtl"] .v3-footer-bottom { font-size: 12.5px; }

/* ═════════════════════════════════════════════════════════════
 * PROJECTS WHEEL — 3D pointer-driven drum
 *
 * Section is exactly one viewport tall (set inline). The cylinder is
 * spun by WHEEL EVENTS captured on .v3-wheel-stage, not by page-scroll
 * position — so the reader is never trapped scrolling through every
 * card. At the first/last card the wheel releases and the page scrolls
 * on; scrolling over the info panel always scrolls the page. The inner
 * is height:100vh, so with a 100vh section `position:sticky` has no
 * travel and simply behaves as a normal block.
 * ──────────────────────────────────────────────────────────── */
.v3-wheel-section {
  position: relative;
  background: var(--v3-cream);
  /* height set inline (100vh) — no scroll-trap */
  /* Pull up under the About section's tail. The sticky inner keeps its own
     88px top nav-clearance, so the «میدان عمل» heading still clears the nav
     when pinned (verified ~13px gap); this only reclaims the dead space seen
     while scrolling past. Same bg as the page so the overlap is seamless.
     Reset on mobile (below) where the section isn't sticky. */
  margin-top: -56px;
}
/* Mobile: a flat stack of project cards (replaces the desktop 3D drum,
   which can't be spun by touch). */
.v3-wheel-section.is-mobile { height: auto; padding: 72px 0 36px; }
.v3-wheel-mhead { padding: 0 24px 26px; }
.v3-wheel-mhead .v3-h2 { margin: 6px 0 0; }
.v3-wheel-mlist { display: flex; flex-direction: column; gap: 18px; padding: 0 24px; }
.v3-wheel-mcard {
  display: block; background: var(--v3-paper);
  border: 1px solid var(--v3-line); border-radius: 16px; overflow: hidden;
  cursor: pointer; text-align: start;
  box-shadow: 0 16px 34px -24px rgba(11, 19, 38, 0.45);
}
.v3-wheel-mcard-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--v3-cream-2); }
.v3-wheel-mcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-wheel-mcard-body { padding: 16px 18px 20px; }
.v3-wheel-mcard-name { font-family: var(--v3-serif); font-size: 21px; font-weight: 500; color: var(--v3-ink); margin: 9px 0 9px; line-height: 1.25; }
html[dir="rtl"] .v3-wheel-mcard-name { font-family: var(--v3-fa); font-weight: 700; font-size: 19px; }
.v3-wheel-mcard .v3-wheel-card-read { display: inline-flex; margin-top: 12px; opacity: 1; }
.v3-wheel-section.is-mobile .v3-wheel-overlay { position: static; margin: 28px auto 0; display: flex; justify-content: center; padding: 0 24px; }
.v3-wheel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 88px;  /* clear the fixed nav */
}
.v3-wheel-header {
  flex: 0 0 auto;
  max-width: var(--v3-max);
  width: 100%;
  margin: 0 auto;
  padding: 6px var(--v3-gutter) 4px;
}
/* Tighten the eyebrow→title gap in the wheel context so the 3D stage
 * below gets every spare pixel of vertical room (taller cards). */
.v3-wheel-header .v3-eyebrow { margin-bottom: 5px; }
/* Wheel context shrinks the h2 a notch so the stage below gets the
 * vertical room it needs to render a full portrait card without the
 * footer (location + read link) being clipped by overflow:hidden. */
.v3-wheel-header .v3-h2 {
  margin-bottom: 0;
  max-width: 22ch;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.05;
}
html[dir="rtl"] .v3-wheel-header .v3-h2 {
  font-size: clamp(22px, 2.9vw, 36px);
  line-height: 1.25;
}

/* Split layout: 3D drum on physical-left, contextual info on
 * physical-right. Grid is forced LTR so column 1 is always the
 * physical leading edge of the viewport regardless of html dir;
 * the info panel restores RTL text inside for Persian. */
.v3-wheel-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  column-gap: 32px;
  min-height: 0;
  direction: ltr;
  max-width: var(--v3-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--v3-gutter);
}
/* Restore RTL text inside both columns when the page is RTL. */
html[dir="rtl"] .v3-wheel-stage,
html[dir="rtl"] .v3-wheel-info { direction: rtl; }

/* Perspective container — the cylinder math lives in here. A larger
 * perspective distance softens the foreshortening so cards far from
 * the camera don't crush to nothing; perspective-origin sits slightly
 * below middle to give a faint "look up at the cylinder" feel.
 *
 * 4800 (was 3600) flattens the foreshortening a touch more: the front
 * card is magnified less by perspective, so it can be rendered TALLER
 * without poking past the stage clip — and side cards stay close to the
 * front card's on-screen height, so rotated body text reads comfortably.
 * NOTE: the wheel JS mirrors this value as `PERSP` to size cards clip-safe;
 * keep the two in sync. */
.v3-wheel-stage {
  position: relative;
  perspective: 4800px;
  perspective-origin: 50% 50%;  /* centred — a 56% origin added a height-dependent vertical shift that clipped the card top on tall screens */
  overflow: hidden;
  /* Grow the drum UPWARD into the header's empty (RTL → left) band so the
     front card is taller. With align-self:stretch a negative top margin
     pins the BOTTOM and lifts the top, and offsetHeight grows — so the wheel
     JS (which sizes the card from stageH) renders a taller card, all the
     extra height added at the top. -88px ≈ the header height, lifting the
     stage to the nav-clearance line so the card (even hover-scaled) never
     tucks under the fixed nav when the section is pinned. Reset on mobile. */
  margin-top: -88px;
}
.v3-wheel-track {
  position: absolute;
  top: calc(50% - 10px);   /* fixed 10px nudge up (not %) so the front card's bottom (+shadow) clears the view-all row equally at every viewport height */
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /* No CSS transition — JS writes the transform every rAF. */
  will-change: transform;
}

/* Each card sits on the cylinder surface; layout (transform incl.
 * rotateY + translateZ + size) is computed in JS so the wheel
 * adapts to N projects and viewport width. */
.v3-wheel-card {
  position: absolute;
  top: 0; left: 0;
  background: var(--v3-paper);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow:
    0 32px 64px -32px rgba(11, 19, 38, 0.55),
    0 6px 14px -6px rgba(11, 19, 38, 0.18);
  backface-visibility: hidden;
  /* opacity / filter / pointer-events are driven by JS depth-fade
   * per frame; the rest of the visual response lives in CSS so it
   * stays buttery even during fast scroll. */
  transition: opacity 0.25s linear, filter 0.25s linear,
              scale 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.v3-wheel-card.is-active {
  scale: 1.055;     /* gentle "star of the show" — eased so the card itself can be taller */
}
.v3-wheel-card.is-active:hover {
  scale: 1.075;
  box-shadow:
    0 44px 90px -32px rgba(20, 33, 61, 0.55),
    0 12px 22px -6px rgba(11, 19, 38, 0.22);
}
.v3-wheel-card.is-active:hover .v3-wheel-card-photo img { scale: 1.04; }
.v3-wheel-card.is-active:hover .v3-wheel-card-read {
  color: var(--v3-teal-dark);
  gap: 12px;
}
.v3-wheel-card.is-active:hover .v3-wheel-card-read::before {
  transform: scaleX(1);
}
.v3-wheel-card-photo img {
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-wheel-card:focus-visible {
  outline: 3px solid var(--v3-warm);
  outline-offset: 4px;
}

/* Inline "read more" link at the foot of the body. Teal text + a
 * thin underline that animates in on hover. Replaces the absolute
 * CTA chip — feels more like a magazine article than a button. */
.v3-wheel-card-read {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;          /* push to bottom of body, regardless of body height */
  font-family: var(--v3-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--v3-teal);
  transition: gap 0.3s ease, color 0.3s ease;
  align-self: flex-start;
  padding-bottom: 3px;
}
.v3-wheel-card-read::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .v3-wheel-card-read::before { transform-origin: right; }
html[dir="rtl"] .v3-wheel-card-read {
  font-family: var(--v3-fa);
  font-size: 14px;
  letter-spacing: 0;
}
.v3-wheel-card-photo {
  flex: 1;
  overflow: hidden;
  background: var(--v3-cream-2);
  min-height: 140px;     /* never collapse below this even on short cards */
}
.v3-wheel-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Soft top→bottom shade across the photo so the status pill stays
 * legible without us having to apply a contrasting bg to the pill. */
.v3-wheel-card-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(11, 19, 38, 0.55) 100%);
  pointer-events: none;
}

/* Status pill — sits in the photo's top-trailing corner. Two flavours:
 * gold-warm for "ongoing", green-signal for "delivered". The dot
 * pulses subtly on the active card so it reads as live data. */
.v3-wheel-card-status {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(10, 15, 30, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--v3-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-paper);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
html[dir="rtl"] .v3-wheel-card-status {
  font-family: var(--v3-fa);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 11.5px;
}
.v3-wheel-card-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.v3-wheel-card-status.ongoing  .dot { background: var(--v3-warm-hi); box-shadow: 0 0 8px rgba(217, 180, 93, 0.7); }
.v3-wheel-card-status.completed .dot { background: #5B82B8;          box-shadow: 0 0 8px rgba(91, 130, 184, 0.7); }
.v3-wheel-card.is-active .v3-wheel-card-status .dot { animation: v3-pulse-dot 1.8s infinite; }
@keyframes v3-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Body — meta row + serif name + location + read link. The "read"
 * link is inline at the end, not an absolute chip, so the card reads
 * as a single coherent rhythm rather than a body + floating overlay.
 *
 * min-height guarantees the body fits its content (meta + 2-line
 * name + location + read) even when the card overall is short. The
 * photo above will shrink to absorb the remaining space. */
.v3-wheel-card-body {
  flex: 0 0 auto;
  min-height: 150px;
  padding: 14px 18px 16px;     /* was 20/24/24 — tighter for shorter cards */
  background: var(--v3-paper);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;                     /* was 8 */
}

/* Meta row: year • type. Tabular-mono for year so digits align. */
.v3-wheel-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--v3-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-teal);
  font-weight: 600;
  margin-bottom: 8px;
}
.v3-wheel-card-meta .year { font-feature-settings: 'tnum' 1; }
.v3-wheel-card-meta .dot-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--v3-teal);
  opacity: 0.55;
  display: inline-block;
}
html[dir="rtl"] .v3-wheel-card-meta {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12.5px;
  font-weight: 700;
}

/* Project name — serif, tight line-height, max 2 lines clipped. */
.v3-wheel-card-name {
  font-family: var(--v3-serif);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.v3-wheel-card.is-active:hover .v3-wheel-card-name { color: var(--v3-teal); }
html[dir="rtl"] .v3-wheel-card-name {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
}

/* Location row with a tiny inline map-pin icon (drawn from SVG path
 * in the markup, sized 12px). */
.v3-wheel-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--v3-ink-3);
  line-height: 1.3;
}
.v3-wheel-card-loc svg {
  flex: 0 0 auto;
  color: var(--v3-teal);
  opacity: 0.85;
}
html[dir="rtl"] .v3-wheel-card-loc { font-size: 12.5px; }

/* Bottom overlay band: active card's meta (client / year / status)
 * plus a "01 / 06" counter. Stays put while cards rotate behind. */
/* ─── Right-side INFO PANEL ────────────────────────────────────
 * Sits in column 2 of the wheel layout. As the active card changes,
 * the inner motion.div re-mounts and fades up with the new project's
 * details. Vertically centred so the eye lands here naturally
 * alongside the cylinder's centre. */
.v3-wheel-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 12px 4px;
  min-width: 0;
}
.v3-wheel-info-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* "PROJECT 03 / 06" eyebrow */
.v3-wheel-info-num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--v3-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-teal);
}
.v3-wheel-info-num .num { font-feature-settings: 'tnum' 1; font-size: 13px; }
.v3-wheel-info-num .sep { opacity: 0.5; }
.v3-wheel-info-num .total { font-feature-settings: 'tnum' 1; opacity: 0.6; }
html[dir="rtl"] .v3-wheel-info-num {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 13px;
  font-weight: 700;
}

/* Project name — large serif, clamped to 3 lines so the panel
 * stays the same height across short and long names. */
.v3-wheel-info-name {
  font-family: var(--v3-serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[dir="rtl"] .v3-wheel-info-name {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
}

/* Thin gold rule under the name — visual anchor before the meta. */
.v3-wheel-info-rule {
  display: block;
  width: 56px;
  height: 1.5px;
  background: var(--v3-warm-hi);
  margin: 4px 0 6px;
}

/* Meta grid — 2 columns × 2-3 rows of dt/dd pairs. */
.v3-wheel-info-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  row-gap: 14px;
  margin: 0;
}
.v3-wheel-info-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v3-wheel-info-meta dt {
  font-family: var(--v3-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  margin: 0;
}
html[dir="rtl"] .v3-wheel-info-meta dt {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
}
.v3-wheel-info-meta dd {
  font-family: var(--v3-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html[dir="rtl"] .v3-wheel-info-meta dd {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 14px;
}

/* Project description — short paragraphs clamped to 4 lines total
 * so it doesn't blow up the panel on long projects. */
.v3-wheel-info-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-wheel-info-desc p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--v3-ink-2);
  margin: 0 0 10px;
}
.v3-wheel-info-desc p:last-child { margin-bottom: 0; }
html[dir="rtl"] .v3-wheel-info-desc p { font-size: 13.5px; line-height: 1.95; }

/* CTA — same underline-reveal as the in-card "read more". */
.v3-wheel-info-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 4px;
  font-family: var(--v3-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--v3-teal);
  cursor: pointer;
  align-self: flex-start;
  transition: gap 0.3s ease, color 0.3s ease;
}
.v3-wheel-info-cta::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .v3-wheel-info-cta::before { transform-origin: right; }
.v3-wheel-info-cta:hover { color: var(--v3-teal-dark); gap: 12px; }
.v3-wheel-info-cta:hover::before { transform: scaleX(1); }
html[dir="rtl"] .v3-wheel-info-cta {
  font-family: var(--v3-fa);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Slim "X / Y" counter band that anchors the stage from below.
 * No meta — that lives on the card now — just a calm catalogue
 * marker. Padding intentionally tight so the stage above gets
 * as much vertical room as possible for the cards. */
.v3-wheel-overlay {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px var(--v3-gutter) 8px;
  max-width: var(--v3-max);
  width: 100%;
  margin: 0 auto;
}
.v3-wheel-overlay-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--v3-serif);
  color: var(--v3-teal);
}
.v3-wheel-overlay-counter .num   { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -0.005em; }
.v3-wheel-overlay-counter .sep   { font-size: 20px; color: var(--v3-ink-3); }
.v3-wheel-overlay-counter .total { font-size: 16px; color: var(--v3-ink-3); letter-spacing: 0.02em; }
html[dir="rtl"] .v3-wheel-overlay-counter .num,
html[dir="rtl"] .v3-wheel-overlay-counter .sep,
html[dir="rtl"] .v3-wheel-overlay-counter .total {
  font-family: var(--v3-fa);
  font-weight: 700;
}
/* Tablet — narrower split: tighter gap + narrower cards. */
@media (max-width: 1100px) {
  .v3-wheel-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 22px;
  }
  .v3-wheel-info-meta { column-gap: 18px; row-gap: 11px; }
}

@media (max-width: 820px) {
  .v3-wheel-section { height: auto !important; margin-top: 0; }   /* opt out of sticky + desktop pull-up on mobile */
  .v3-wheel-sticky {
    position: relative;
    height: auto;
    padding: 110px 24px 60px;
  }
  /* Mobile: stack the split layout — wheel collapses into a simple
   * vertical card list (handled below), info panel goes above it. */
  .v3-wheel-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 0;
  }
  .v3-wheel-info {
    order: -1;          /* info first, then cards */
    padding: 0;
  }
  .v3-wheel-info-inner { gap: 10px; }
  .v3-wheel-info-meta  { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 10px; }
  .v3-wheel-info-desc { -webkit-line-clamp: 3; }

  .v3-wheel-stage {
    perspective: none;
    height: auto;
    overflow: visible;
    margin-top: 0;   /* desktop drum-grow doesn't apply to the flat mobile stack */
  }
  .v3-wheel-track {
    position: static;
    transform: none !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%; height: auto;
  }
  .v3-wheel-card {
    position: relative !important;
    top: auto; left: auto;
    width: 100% !important; height: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    aspect-ratio: 5 / 4;
  }
  .v3-wheel-card.is-active { scale: 1; }
  .v3-wheel-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 24px 32px;
  }
}

/* ─── Section anchor dots — pinned scrollspy on the side ─────
 * Fixed-position vertical strip of dots, one per main section.
 * The active dot grows into a small horizontal bar and shows the
 * section label inline. The dots disappear during the hero (which
 * has its own scroll cue) and on mobile (no room). */
.v3-anchors {
  position: fixed;
  top: 50%;
  inset-inline-start: 22px;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.v3-anchors.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.v3-anchor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: var(--v3-ink-3);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
html[dir="rtl"] .v3-anchor {
  font-family: var(--v3-fa);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
}
.v3-anchor-dot {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              background 0.3s ease;
}
.v3-anchor-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
html[dir="rtl"] .v3-anchor-label { transform: translateX(6px); }
.v3-anchor:hover .v3-anchor-label,
.v3-anchor.is-active .v3-anchor-label {
  opacity: 1;
  transform: translateX(0);
}
.v3-anchor:hover .v3-anchor-dot { opacity: 0.8; width: 22px; }
.v3-anchor.is-active {
  color: var(--v3-teal);
}
.v3-anchor.is-active .v3-anchor-dot {
  background: var(--v3-teal);
  opacity: 1;
  width: 30px;
}
@media (max-width: 1100px) { .v3-anchors { display: none; } }

/* Projects decade rail — reuses .v3-anchors; the pre-record (empty) tiers
   are dimmed and non-interactive so the full seven-decade span still shows. */
.v3-tl-anchor.is-empty { opacity: 0.3; cursor: default; }
.v3-tl-anchor.is-empty .v3-anchor-dot { opacity: 0.5; }

/* Search + category tools on the projects archive */
.v3-proj-tools { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 32px; }
.v3-proj-tools .v3-archive-filters { margin: 0; }
.v3-proj-search { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 12px; padding: 0 14px; color: var(--v3-ink-3); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.v3-proj-search:focus-within { border-color: var(--v3-teal); box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.08); color: var(--v3-teal); }
.v3-proj-search-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 13px 0; font-family: inherit; font-size: 15px; color: var(--v3-ink); outline: none; }
html[dir="rtl"] .v3-proj-search-input { font-family: var(--v3-fa); }
.v3-proj-search-input::placeholder { color: var(--v3-ink-3); }
.v3-proj-search-input::-webkit-search-cancel-button { display: none; }
.v3-proj-search-clear { flex: 0 0 auto; border: none; background: var(--v3-cream-2); color: var(--v3-ink-2); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.v3-proj-search-clear:hover { background: var(--v3-teal); color: #fff; }
.v3-timeline-decade { scroll-margin-top: 90px; }

/* Self-hosted Nastaliq face for the intro slogan (arabic subset covers
   Persian). Self-hosting + preload means it's ready before the splash reveals,
   so the slogan never flashes a fallback face. */
@font-face {
  font-family: 'Gulzar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Gulzar-arabic.woff2') format('woff2');
}

/* ─── Intro splash — slogan on the grey backdrop, then fade to the site ─── */
.v3-splash {
  position: fixed; inset: 0; z-index: 300;
  background: var(--v3-cream);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; text-align: center;
  overflow: hidden;
  opacity: 1; transition: opacity 1.6s ease;
}
.v3-splash.is-out { opacity: 0; pointer-events: none; }
/* Emblem-on-box composition (see cover.png): the TJ derrick emblem overlaps
   the top edge of an outlined box that carries the slogan. The stage sits
   invisible until the JS confirms the calligraphic font is loaded. */
.v3-splash-stage {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(18px) scale(0.98);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-splash-stage.is-in { opacity: 1; transform: none; }
.v3-splash-emblem {
  display: block; position: relative; z-index: 1;
  width: clamp(168px, 27vw, 264px);
  /* cream backing + side padding knock the box border out behind the mark,
     exactly like the printed cover */
  background: var(--v3-cream);
  padding: 0 28px;
  margin-bottom: calc(clamp(168px, 27vw, 264px) * -0.30);
}
.v3-splash-box {
  border: 2px solid #083060;
  width: min(90vw, 780px);
  padding: calc(clamp(168px, 27vw, 264px) * 0.30 + 30px) 32px 44px;
  display: flex; align-items: center; justify-content: center;
}
.v3-splash-slogan {
  margin: 0; color: var(--v3-teal); white-space: nowrap;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: clamp(18px, 3.6vw, 32px); line-height: 1.6;
}
html[dir="rtl"] .v3-splash-slogan {
  font-family: 'Gulzar', var(--v3-fa), serif; font-style: normal; font-weight: 400;
  font-size: clamp(20px, 4.1vw, 36px); line-height: 2;
}
/* «ایران» — gold with its underline, exactly like the old splash styling;
   shared by the splash box, the flyer and the header slot. */
.v3-splash-slogan em,
.v3-splash-flyer em,
.v3-nav-slogan em {
  font-style: normal; color: var(--v3-warm);
  border-bottom: 2px solid var(--v3-warm);
  padding-bottom: 2px;
}
.v3-nav-slogan em { border-bottom-width: 1px; padding-bottom: 1px; }
@media (max-width: 480px) {
  .v3-splash-slogan { white-space: normal; max-width: 24ch; }
}
/* The FLIP clone that carries the slogan from the box up into the header.
   position:fixed → can never create page overflow. */
.v3-splash-flyer {
  position: fixed; z-index: 310; margin: 0;
  color: var(--v3-teal); white-space: nowrap;
  transform-origin: top left;
  transition: transform 1.6s cubic-bezier(0.3, 0.9, 0.25, 1), color 1.6s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .v3-splash-stage { transition: opacity 0.6s ease; transform: none; }
}

/* Permanent header slogan — sits beside (inline-after) the language switcher;
   invisible until the splash lands it there. */
.v3-nav-slogan {
  opacity: 0; pointer-events: none; white-space: nowrap;
  color: var(--v3-teal);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13.5px; line-height: 1.2;
  transition: opacity 0.9s ease, color 0.4s ease;
}
html[dir="rtl"] .v3-nav-slogan {
  font-family: 'Gulzar', var(--v3-fa), serif; font-style: normal;
  font-size: 14.5px;
}
.v3-nav:not(.scrolled) .v3-nav-slogan { color: var(--v3-paper); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.v3-nav-slogan.is-landed { opacity: 1; }
@media (max-width: 1199px) { .v3-nav-slogan { display: none; } }

/* ─── Variant switcher pill (bottom right) ─── */
.v3-switch-pill {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: inline-flex;
  gap: 0;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line-2);
  padding: 4px;
}
.v3-switch-pill a {
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  color: var(--v3-ink-2);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.v3-switch-pill a:hover { color: var(--v3-teal); }
.v3-switch-pill a.active {
  background: var(--v3-teal);
  color: var(--v3-paper);
}

/* ════════════════════════════════════════════════════════════
 * SCROLL / VIEW ANIMATIONS
 * One global "v3-in" class that the JS adds to elements once
 * they enter the viewport. Different base classes pick which
 * animation plays.
 * ──────────────────────────────────────────────────────────── */

/* Fade-up — the default workhorse */
.v3-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-reveal.v3-in { opacity: 1; transform: translateY(0); }

/* Word-stagger — used on big headlines. Each word is wrapped in
 * a `.v3-word` span which animates separately with its own delay
 * set inline (--d). The clip mask uses a flex wrapper so RTL is
 * automatic without any inline-direction logic. */
.v3-words {
  display: inline;
}
.v3-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin: 0 0.05em 0 0;
}
html[dir="rtl"] .v3-word { margin: 0 0 0 0.05em; }
.v3-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              opacity   0.65s ease;
  transition-delay: calc(var(--d, 0) * 70ms);
}
.v3-words.v3-in .v3-word > span {
  transform: translateY(0);
  opacity: 1;
}

/* Image clip-reveal — photo emerges with a vertical wipe.
 * Initial state: hidden via a mask that occludes the photo from
 * its leading edge. As the element enters the viewport, the mask
 * retreats, revealing the photo. RTL flips the direction so the
 * wipe always starts from the reading-start side. */
.v3-clip {
  position: relative;
  overflow: hidden;
}
.v3-clip > img,
.v3-clip > picture {
  transform: scale(1.08);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-clip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--v3-cream);
  z-index: 2;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
html[dir="rtl"] .v3-clip::before { transform-origin: right center; }
.v3-clip.v3-in::before { transform: scaleX(0); }
.v3-clip.v3-in > img,
.v3-clip.v3-in > picture { transform: scale(1); }

/* Variant: clip on a dark surface (e.g. hero/sustain photo)
 * just needs the curtain colour to be dark. */
.v3-clip.dark::before { background: var(--v3-ink); }
.v3-clip.teal::before { background: var(--v3-teal-deep); }

/* When ClipReveal is used inside an aspect-ratio'd photo container
 * (spotlight, ops cards, story cards, sustain band), it fills the
 * container so the curtain covers the whole frame. */
.v3-spotlight-photo > .v3-clip,
.v3-op-card > .v3-clip,
.v3-story-photo > .v3-clip,
.v3-sustain-photo > .v3-clip {
  position: absolute;
  inset: 0;
}
.v3-spotlight-photo > .v3-clip > img,
.v3-op-card > .v3-clip > img,
.v3-story-photo > .v3-clip > img,
.v3-sustain-photo > .v3-clip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spotlight already animates with the clip-reveal — hover-zoom would
 * fight the entrance, so we drop the hover scale and keep a subtle
 * tag-slide-up instead. */
.v3-spotlight-photo:hover .v3-clip > img { transform: scale(1.02); }

/* Rule-grow — the small gold/teal line before eyebrow text. Used
 * inline before the eyebrow label. Already on .v3-eyebrow::before
 * we just animate the width when the parent's parent has .v3-in. */
.v3-reveal .v3-eyebrow::before,
.v3-reveal.v3-eyebrow::before {
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.v3-reveal.v3-in .v3-eyebrow::before,
.v3-reveal.v3-in.v3-eyebrow::before {
  width: 32px;
}

/* H2 underline grow — a thin teal line that draws under h2 once
 * visible. Applied via the .v3-rule wrapper that hosts the
 * heading + the rule. */
.v3-h2-rule {
  display: block;
  width: 0;
  height: 1.5px;
  background: var(--v3-teal);
  margin: -10px 0 28px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.v3-reveal.v3-in .v3-h2-rule { width: 88px; }

/* ════════════════════════════════════════════════════════════
 * HERO PHOTO — gentle ken-burns ZOOM only (no parallax shift, which
 * could drift the image and reveal the backdrop). The .v3-hero-slide
 * rules above own the scale; the active slide animates 1.08 → 1.14. */

/* ════════════════════════════════════════════════════════════
 * MARQUEE TICKER
 * Horizontal infinite-scroll band. We render the items twice
 * back-to-back; the inner track animates by -50% of its width
 * which lands exactly on the start of the duplicate. The
 * animation is linear so it never decelerates. RTL flips the
 * direction so it reads right-to-left.
 * ──────────────────────────────────────────────────────────── */
.v3-marquee {
  position: relative;
  background: var(--v3-teal-deep);
  color: var(--v3-paper);
  padding: 30px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.v3-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  animation: v3-marquee-scroll 40s linear infinite;
  will-change: transform;
}
html[dir="rtl"] .v3-marquee-track {
  animation-direction: reverse;
}
.v3-marquee:hover .v3-marquee-track { animation-play-state: paused; }
.v3-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--v3-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.v3-marquee-item::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--v3-warm-hi);
  border-radius: 50%;
}
html[dir="rtl"] .v3-marquee-item {
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 19px;
}
@keyframes v3-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Edge-fade gradients so the items fade in at the strip's edges */
.v3-marquee::before,
.v3-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.v3-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--v3-teal-deep) 0%, transparent 100%);
}
.v3-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--v3-teal-deep) 0%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════
 * CARD HOVER REFINEMENTS
 * Light lift on story / spotlight / operation cards.
 * ──────────────────────────────────────────────────────────── */
.v3-story-card,
.v3-op-card {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-story-card:hover { transform: translateY(-6px); }
.v3-op-card:hover    { transform: translateY(-4px); }

/* Subtle shadow rise on story photo wrapper for depth */
.v3-story-photo {
  transition: box-shadow 0.4s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.v3-story-card:hover .v3-story-photo {
  box-shadow: 0 18px 40px -18px rgba(11, 19, 38, 0.30);
}

/* ════════════════════════════════════════════════════════════
 * NAV MORPH ON DEEP SCROLL
 * Already had `.scrolled` for the shadow; now also lifts the
 * border-bottom + adds a slight cream-tinted backdrop on deep
 * scroll so the nav reads as "swept-up paper" past the hero.
 * ──────────────────────────────────────────────────────────── */
.v3-nav { transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
/* Auto-hide on scroll-down, slide back on scroll-up (class toggled by MainNav).
   translateY(-100%) tucks the fixed bar above the viewport; the transform
   transition above makes both directions smooth. */
.v3-nav.is-hidden { transform: translateY(-100%); }
.v3-nav.deep {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

/* ════════════════════════════════════════════════════════════
 * STICKY-CAPTION STORYTELLING
 * Used by the spotlight area on wide screens: text panel sticks
 * in viewport while the image scrolls past it. Reuses the
 * existing .v3-spotlight grid; only adds a sticky on the body
 * column at wide widths.
 * ──────────────────────────────────────────────────────────── */
@media (min-width: 1101px) {
  .v3-spotlight-body { position: sticky; top: 120px; }
}

/* ════════════════════════════════════════════════════════════
 * NUMBER COUNTER ANIMATION
 * The numeric value lives in a span; JS smoothly tweens its
 * textContent. Nothing CSS-side to do, but we add a tiny
 * baseline-shift so the unit suffix sits where you'd expect.
 * ──────────────────────────────────────────────────────────── */
.v3-stat-value .num { font-variant-numeric: tabular-nums; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  :root { --v3-gutter: 40px; }
  .v3-nav-links { gap: 24px; }
  .v3-nav-link { font-size: 13.5px; }
  .v3-spotlight { grid-template-columns: 1fr; gap: 50px; }
  .v3-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-stat { padding: 24px 28px; }
  .v3-stat:nth-child(odd) { border-left: none; }
  html[dir="rtl"] .v3-stat:nth-child(odd) { border-right: none; }
  .v3-stat:nth-child(even) { border-top: none; }
  .v3-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .v3-stories-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-careers { grid-template-columns: 1fr; gap: 40px; }
  .v3-connect-inner { grid-template-columns: 1fr; gap: 40px; }
  .v3-footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
}

@media (max-width: 820px) {
  :root { --v3-gutter: 24px; }
  .v3-utility-inner { padding: 10px 24px; }
  .v3-utility-left { gap: 14px; }
  .v3-utility-right { gap: 14px; }
  .v3-nav-inner { padding: 10px 24px; }
  .v3-nav-logo img { height: 60px; }
  .v3-nav-links { display: none; }
  .v3-nav-burger { display: inline-flex; }
  .v3-nav-cta { display: none; }
  .v3-nav-lang { display: none; }   /* lives in the mobile sheet instead */
  .v3-nav-logo-text { font-size: 18px; }

  .v3-hero { min-height: 84vh; }
  .v3-hero-inner { padding: 100px 24px 70px; }
  .v3-hero-actions { gap: 12px; }
  .v3-btn { padding: 12px 20px; font-size: 13px; }

  .v3-section { padding: 70px 24px; }
  .v3-purpose { padding: 80px 24px; }
  .v3-purpose-inner.has-media { grid-template-columns: 1fr; gap: 32px; }
  .v3-purpose-inner.has-media .v3-purpose-text { max-width: none; }
  .v3-purpose-media { min-height: 0; aspect-ratio: 16 / 10; }

  .v3-ops-grid { grid-template-columns: 1fr; gap: 22px; }
  .v3-stats-band { padding: 70px 0; }
  .v3-stats-inner { padding: 0 24px; }
  .v3-stats-head { margin-bottom: 50px; }
  .v3-stats-grid { grid-template-columns: 1fr; }
  .v3-stat {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 24px 0;
  }
  .v3-stat:last-child { border-bottom: none; }

  .v3-stories-grid { grid-template-columns: 1fr; gap: 32px; }
  .v3-certs-row { grid-template-columns: repeat(2, 1fr); }
  .v3-sustain-inner { padding: 70px 24px; }
  .v3-form-row { grid-template-columns: 1fr; gap: 14px; }
  .v3-connect-inner { padding: 60px 24px; }
  .v3-footer { padding: 60px 24px 24px; }
  .v3-footer-top { grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 40px; }

  .v3-switch-pill { bottom: 14px; inset-inline-end: 14px; padding: 3px; }
  .v3-switch-pill a { font-size: 10px; padding: 5px 10px; }
}

@media (max-width: 480px) {
  .v3-utility-inner { font-size: 11.5px; padding: 8px 20px; }
  .v3-hero-headline { font-size: 36px; }
  html[dir="rtl"] .v3-hero-headline { font-size: 28px; }
  .v3-h2 { font-size: 32px; }
  html[dir="rtl"] .v3-h2 { font-size: 24px; }
  .v3-footer-top { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════
   SUB-PAGES — project/news detail + archive listings (#/… routes)
   ════════════════════════════════════════════════════════════════ */
.v3-subpage {
  background: transparent;        /* reveal the body curve backdrop */
  min-height: 100vh;
  padding-top: 84px;           /* clear the fixed nav */
}
.v3-subpage-inner {
  max-width: var(--v3-content);
  margin: 0 auto;
  padding-inline: var(--v3-gutter);
}

/* Back link */
.v3-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--v3-ink-3);
  font-family: var(--v3-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}
html[dir="rtl"] .v3-back { font-family: var(--v3-fa); }
.v3-back:hover { color: var(--v3-teal); gap: 12px; }

.v3-notfound { padding: 120px var(--v3-gutter); text-align: center; }
.v3-notfound h1 { font-family: var(--v3-serif); font-size: 38px; color: var(--v3-ink); margin: 0 0 20px; }
html[dir="rtl"] .v3-notfound h1 { font-family: var(--v3-fa); font-weight: 800; }

/* "View all" links from homepage sections */
.v3-section-viewall {
  max-width: var(--v3-content);
  margin: 28px auto 0;
  padding-inline: var(--v3-gutter);
  display: flex;
  justify-content: center;
}
.v3-viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--v3-line-2);
  color: var(--v3-ink);
  font-family: var(--v3-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
html[dir="rtl"] .v3-viewall { font-family: var(--v3-fa); font-weight: 700; }
.v3-viewall:hover { background: var(--v3-warm); color: #14213D; border-color: var(--v3-warm); }
.v3-viewall svg { width: 14px; height: 14px; }
.v3-viewall.onlight { margin-top: 14px; border-color: var(--v3-line-2); }

/* ─── Project detail ─── */
.v3-pd-hero {
  position: relative;
  height: min(64vh, 560px);
  overflow: hidden;
  margin-bottom: 48px;
}
.v3-pd-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-pd-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 19, 38,0.15) 0%, rgba(11, 19, 38,0.0) 30%, rgba(11, 19, 38,0.55) 75%, rgba(11, 19, 38,0.85) 100%);
}
.v3-pd-hero-inner {
  position: absolute;
  inset-inline: 0; bottom: 0;
  max-width: var(--v3-content);
  margin: 0 auto;
  padding: 0 var(--v3-gutter) 40px;
  color: #fff;
  /* Stack the children (back-link · status chip · title · location) each on
     its own line — otherwise the inline back-link and status chip collide on
     one row, which looked cramped. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.v3-pd-hero-inner .v3-back { margin-bottom: 6px; }
.v3-pd-hero-inner .v3-back { color: rgba(255,255,255,0.85); }
.v3-pd-hero-inner .v3-back:hover { color: #fff; }
.v3-pd-status {
  display: inline-block;
  margin: 8px 0 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--v3-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
html[dir="rtl"] .v3-pd-status { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; }
.v3-pd-status.done    { background: rgba(91, 130, 184,0.85); color: #0B1326; }
.v3-pd-status.ongoing { background: rgba(200,162,74,0.9); color: #3a2c05; }
.v3-pd-hero-inner h1 {
  font-family: var(--v3-serif);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.08;
  font-weight: 500;
  margin: 0 0 14px;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
html[dir="rtl"] .v3-pd-hero-inner h1 { font-family: var(--v3-fa); font-weight: 800; font-size: clamp(26px, 4vw, 44px); line-height: 1.35; }
.v3-pd-loc { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255,255,255,0.9); }
html[dir="rtl"] .v3-pd-loc { font-family: var(--v3-fa); }

.v3-pd-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.v3-pd-block { margin-bottom: 44px; }
.v3-pd-h2 {
  font-family: var(--v3-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v3-line);
}
html[dir="rtl"] .v3-pd-h2 { font-family: var(--v3-fa); font-weight: 800; font-size: 22px; }
.v3-pd-main p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--v3-ink-2);
  margin: 0 0 16px;
}
html[dir="rtl"] .v3-pd-main p { font-size: 15.5px; line-height: 2.1; }

.v3-pd-scope { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v3-pd-scope li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15.5px; color: var(--v3-ink-2); line-height: 1.6;
}
html[dir="rtl"] .v3-pd-scope li { font-family: var(--v3-fa); }
.v3-pd-scope-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px; margin-top: 8px;
  border-radius: 50%;
  background: var(--v3-teal);
}

/* Phases / sections of a merged multi-phase project — a year timeline */
.v3-pd-phases { list-style: none; margin: 0; padding: 0; position: relative; }
.v3-pd-phases::before { content: ""; position: absolute; inset-inline-start: 7px; top: 7px; bottom: 9px; width: 2px; background: var(--v3-line); }
.v3-pd-phase { position: relative; display: flex; gap: 16px; padding: 0 0 22px; }
.v3-pd-phase:last-child { padding-bottom: 0; }
.v3-pd-phase-yr { flex: 0 0 auto; position: relative; z-index: 1; min-width: 46px; font-family: var(--v3-sans); font-weight: 700; font-size: 13px; color: var(--v3-warm); padding-inline-start: 24px; }
html[dir="rtl"] .v3-pd-phase-yr { font-family: var(--v3-fa); }
.v3-pd-phase-yr::before { content: ""; position: absolute; inset-inline-start: 1px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--v3-teal); border: 3px solid var(--v3-paper); box-shadow: 0 0 0 1px var(--v3-line); }
.v3-pd-phase-body { display: flex; flex-direction: column; gap: 3px; }
.v3-pd-phase-title { font-size: 15px; color: var(--v3-ink); line-height: 1.55; }
html[dir="rtl"] .v3-pd-phase-title { font-family: var(--v3-fa); }
.v3-pd-phase-meta { font-size: 12.5px; color: var(--v3-ink-2); }
html[dir="rtl"] .v3-pd-phase-meta { font-family: var(--v3-fa); }

.v3-pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-pd-gallery-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--v3-cream-2); }
.v3-pd-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.v3-pd-gallery-item:hover img { transform: scale(1.05); }
.v3-pd-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(transparent, rgba(11, 19, 38,0.8));
  color: #fff; font-size: 12.5px;
}
html[dir="rtl"] .v3-pd-cap { font-family: var(--v3-fa); }

/* Project detail sidebar */
.v3-pd-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.v3-pd-spec, .v3-pd-mapcard {
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  padding: 22px 24px;
}
.v3-pd-spec h3, .v3-pd-mapcard h3 {
  font-family: var(--v3-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  margin: 0 0 16px;
}
html[dir="rtl"] .v3-pd-spec h3, html[dir="rtl"] .v3-pd-mapcard h3 { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.v3-pd-spec dl { margin: 0; display: grid; gap: 14px; }
.v3-pd-spec dl > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--v3-line); }
.v3-pd-spec dl > div:last-child { border-bottom: none; padding-bottom: 0; }
.v3-pd-spec dt { font-family: var(--v3-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v3-ink-3); }
html[dir="rtl"] .v3-pd-spec dt { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.v3-pd-spec dd { font-family: var(--v3-serif); font-size: 17px; font-weight: 500; color: var(--v3-ink); margin: 0; }
html[dir="rtl"] .v3-pd-spec dd { font-family: var(--v3-fa); font-weight: 700; font-size: 15px; }
.v3-pd-mapcoords { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--v3-ink); margin-bottom: 10px; letter-spacing: 0.02em; }
.v3-pd-maplink { font-size: 13px; font-weight: 600; color: var(--v3-teal); cursor: pointer; text-decoration: none; }
html[dir="rtl"] .v3-pd-maplink { font-family: var(--v3-fa); }
.v3-pd-cta {
  background: var(--v3-teal);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 18px 22px;
  font-family: var(--v3-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  text-align: start;
  transition: background 0.25s ease, color 0.25s ease;
}
html[dir="rtl"] .v3-pd-cta { font-family: var(--v3-fa); font-weight: 700; }
.v3-pd-cta:hover { background: var(--v3-warm); color: #14213D; }

/* ─── Archive grids (projects + news) ─── */
.v3-archive-head { padding: 16px 0 36px; }
.v3-archive-h1 {
  font-family: var(--v3-serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  color: var(--v3-ink);
  margin: 10px 0 14px;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .v3-archive-h1 { font-family: var(--v3-fa); font-weight: 800; font-size: clamp(28px, 4vw, 44px); }
.v3-archive-head p { font-size: 16px; line-height: 1.8; color: var(--v3-ink-2); max-width: 620px; margin: 0; }
html[dir="rtl"] .v3-archive-head p { font-family: var(--v3-fa); font-size: 15px; line-height: 2; }
.v3-archive-filters { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.v3-archive-filter {
  background: transparent;
  border: 1px solid var(--v3-line-2);
  color: var(--v3-ink-2);
  font-family: var(--v3-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
html[dir="rtl"] .v3-archive-filter { font-family: var(--v3-fa); font-weight: 700; }
.v3-archive-filter:hover { border-color: var(--v3-teal); color: var(--v3-teal); }
.v3-archive-filter.active { background: var(--v3-teal); color: #fff; border-color: var(--v3-teal); }

/* ── News room: filter bar ───────────────────────────────────── */
.v3-newsf { display: flex; flex-direction: column; gap: 13px; padding: 26px 0 16px; margin-bottom: 30px; border-bottom: 1px solid var(--v3-line); }
.v3-newsf-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v3-newsf-label { flex: none; min-width: 62px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v3-ink-3); }
html[dir="rtl"] .v3-newsf-label { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-newsf-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.v3-newsf-chip {
  appearance: none; -webkit-appearance: none; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--v3-ink-2);
  background: var(--v3-paper); border: 1px solid var(--v3-line);
  border-radius: 999px; padding: 7px 15px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
html[dir="rtl"] .v3-newsf-chip { font-family: var(--v3-fa); }
.v3-newsf-chip:hover { border-color: var(--v3-teal); color: var(--v3-teal); }
.v3-newsf-chip.is-active { background: var(--v3-teal); color: #fff; border-color: var(--v3-teal); }
.v3-newsf-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.v3-newsf-count { font-size: 13px; color: var(--v3-ink-3); }
html[dir="rtl"] .v3-newsf-count { font-family: var(--v3-fa); }
.v3-newsf-clear { appearance: none; -webkit-appearance: none; background: none; border: none; font-family: inherit; font-size: 13px; color: var(--v3-teal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html[dir="rtl"] .v3-newsf-clear { font-family: var(--v3-fa); }

/* ── News room: featured story ───────────────────────────────── */
.v3-news-feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--v3-paper); border: 1px solid var(--v3-line);
  border-radius: 18px; overflow: hidden; cursor: pointer; margin-bottom: 40px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.v3-news-feature:hover { box-shadow: 0 30px 60px -34px rgba(11,19,38,.5); border-color: var(--v3-line-2); }
.v3-news-feature-photo { position: relative; min-height: 320px; overflow: hidden; }
.v3-news-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.v3-news-feature:hover .v3-news-feature-photo img { transform: scale(1.04); }
.v3-news-feature-photo .v3-archive-badge { position: absolute; top: 16px; inset-inline-start: 16px; }
.v3-news-feature-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.v3-news-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--v3-ink-3); }
html[dir="rtl"] .v3-news-feature-meta { font-family: var(--v3-fa); }
.v3-news-feature-meta span:not(:first-child)::before { content: "·"; margin-inline-end: 10px; color: var(--v3-line-2); }
.v3-news-feature-proj { color: var(--v3-teal); font-weight: 600; }
.v3-news-feature-title { font-family: var(--v3-serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 500; color: var(--v3-ink); margin: 0; }
html[dir="rtl"] .v3-news-feature-title { font-family: var(--v3-fa); font-weight: 800; line-height: 1.5; font-size: clamp(20px, 2.4vw, 28px); }
.v3-news-feature-excerpt { font-size: 15.5px; line-height: 1.8; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-news-feature-excerpt { font-family: var(--v3-fa); font-size: 14.5px; line-height: 2; }
.v3-news-feature-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--v3-teal); margin-top: 4px; }
html[dir="rtl"] .v3-news-feature-link { font-family: var(--v3-fa); }
.v3-news-feature-link svg { transition: transform .25s ease; }
.v3-news-feature:hover .v3-news-feature-link svg { transform: translateX(3px); }
html[dir="rtl"] .v3-news-feature:hover .v3-news-feature-link svg { transform: translateX(-3px); }
@media (max-width: 760px) {
  .v3-news-feature { grid-template-columns: 1fr; }
  .v3-news-feature-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .v3-news-feature-body { padding: 26px 24px; }
}

.v3-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 80px;
}
.v3-archive-card {
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.v3-archive-card:hover {
  transform: translateY(-6px);
  border-color: var(--v3-teal);
  box-shadow: 0 20px 40px -18px rgba(11, 19, 38,0.25);
}
.v3-archive-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--v3-cream-2); }
.v3-archive-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.v3-archive-card:hover .v3-archive-photo img { transform: scale(1.06); }
.v3-archive-badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  padding: 5px 12px; border-radius: 4px;
  font-family: var(--v3-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.94);
}
html[dir="rtl"] .v3-archive-badge { font-family: var(--v3-fa); letter-spacing: 0.03em; text-transform: none; font-size: 11.5px; }
.v3-archive-badge.done { color: #14213D; }
.v3-archive-badge.ongoing { color: #9a6f17; }
.v3-archive-badge.news { color: var(--v3-teal); }
.v3-archive-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v3-archive-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--v3-ink-3); }
.v3-archive-meta span:not(:first-child)::before { content: "·"; margin-inline-end: 8px; color: var(--v3-line-2); }
.v3-archive-proj { color: var(--v3-teal); font-weight: 600; }
html[dir="rtl"] .v3-archive-meta { font-family: var(--v3-fa); }
.v3-archive-title {
  font-family: var(--v3-serif);
  font-size: 20px; line-height: 1.25; font-weight: 500;
  color: var(--v3-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.2s ease;
}
.v3-archive-card:hover .v3-archive-title { color: var(--v3-teal); }
html[dir="rtl"] .v3-archive-title { font-family: var(--v3-fa); font-weight: 700; font-size: 17px; line-height: 1.55; }
.v3-archive-tag {
  align-self: flex-start;
  font-family: var(--v3-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--v3-teal);
  border: 1px solid var(--v3-teal-mist); border-radius: 4px; padding: 3px 9px;
  margin-top: auto;
}
html[dir="rtl"] .v3-archive-tag { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-archive-excerpt { font-size: 13.5px; line-height: 1.7; color: var(--v3-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[dir="rtl"] .v3-archive-excerpt { font-family: var(--v3-fa); font-size: 13px; line-height: 1.85; }
.v3-archive-empty { padding: 60px; text-align: center; color: var(--v3-ink-3); font-size: 15px; }
html[dir="rtl"] .v3-archive-empty { font-family: var(--v3-fa); }

/* ═══════════════════════════════════════════════════════════════
   NEWSROOM (/news) — two streams · tabs · search · combobox · video
   ═══════════════════════════════════════════════════════════════ */
/* Type pill — "in the media" (navy) vs "daily report" (gold). */
.v3-news-kind {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--v3-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
html[dir="rtl"] .v3-news-kind { font-family: var(--v3-fa); letter-spacing: 0.01em; text-transform: none; font-size: 12px; }
.v3-news-kind--media { background: rgba(20, 33, 61, 0.1); color: var(--v3-teal); }
.v3-news-kind--daily { background: rgba(200, 150, 62, 0.18); color: #8a6526; }
.v3-news-kind--archive { background: rgba(20, 33, 61, 0.1); color: var(--v3-teal); }

/* Toolbar: tabs (left) + search & combobox (right) */
.v3-news-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between;
  padding: 6px 0 18px; border-bottom: 1px solid var(--v3-line); margin-bottom: 18px;
}
.v3-news-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-news-tab {
  appearance: none; -webkit-appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--v3-sans); font-size: 13px; font-weight: 600; color: var(--v3-ink-2);
  background: var(--v3-paper, #fff); border: 1px solid var(--v3-line);
  padding: 9px 16px; border-radius: 999px; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
html[dir="rtl"] .v3-news-tab { font-family: var(--v3-fa); font-weight: 700; font-size: 14px; }
.v3-news-tab:hover { color: var(--v3-ink); border-color: var(--v3-ink-3); }
.v3-news-tab.is-active { background: var(--v3-teal); color: #fff; border-color: var(--v3-teal); }

.v3-news-tools { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.v3-news-search {
  display: inline-flex; align-items: center; gap: 8px; color: var(--v3-ink-3);
  background: var(--v3-paper, #fff); border: 1px solid var(--v3-line); border-radius: 10px;
  padding: 0 12px; height: 42px; min-width: min(320px, 64vw); transition: border-color 0.2s, box-shadow 0.2s;
}
.v3-news-search:focus-within { border-color: var(--v3-teal); box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.08); }
.v3-news-search input { appearance: none; border: none; background: none; outline: none; flex: 1; min-width: 0; font-family: var(--v3-sans); font-size: 14px; color: var(--v3-ink); }
html[dir="rtl"] .v3-news-search input { font-family: var(--v3-fa); }
.v3-news-search-x { appearance: none; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--v3-ink-3); padding: 0 2px; }
.v3-news-search-x:hover { color: var(--v3-ink); }
.v3-news-combo { position: relative; display: inline-flex; }
.v3-news-combo select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: var(--v3-sans); font-size: 13.5px; font-weight: 600; color: var(--v3-ink);
  background: var(--v3-paper, #fff); border: 1px solid var(--v3-line); border-radius: 10px;
  height: 42px; padding: 0 38px 0 14px;
}
html[dir="rtl"] .v3-news-combo select { font-family: var(--v3-fa); font-weight: 700; padding: 0 14px 0 38px; }
.v3-news-combo select:focus { outline: none; border-color: var(--v3-teal); }
.v3-news-combo-caret { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px; color: var(--v3-ink-3); pointer-events: none; }

.v3-news-count { font-family: var(--v3-sans); font-size: 12.5px; letter-spacing: 0.04em; color: var(--v3-ink-3); margin: 0 0 18px; }
html[dir="rtl"] .v3-news-count { font-family: var(--v3-fa); }

/* Hero band: big lead + "top stories" rail (ABC-style) */
.v3-news-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--v3-line); }
.v3-news-hero.is-solo { grid-template-columns: 1fr; padding-bottom: 0; border-bottom: none; }

.v3-feat { background: var(--v3-paper, #fff); border: 1px solid var(--v3-line); border-radius: 18px; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(11, 19, 38, 0.4); }
.v3-feat-media { position: relative; aspect-ratio: 16 / 9; background: var(--v3-cream-2, #e4e7ee); overflow: hidden; }
.v3-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-feat-media-shade { position: absolute; inset: 0; cursor: pointer; }
.v3-feat-playbtn {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.93); color: var(--v3-teal); border: none;
  padding: 13px 22px 13px 18px; border-radius: 999px;
  font-family: var(--v3-sans); font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 32px -10px rgba(11, 19, 38, 0.5); transition: transform 0.2s, background 0.2s;
}
html[dir="rtl"] .v3-feat-playbtn { font-family: var(--v3-fa); }
.v3-feat-playbtn:hover { transform: scale(1.05); background: #fff; }
.v3-feat-media .v3-aparat { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.v3-feat-body { padding: 22px 26px 26px; }
.v3-feat-body .v3-news-kind { margin-bottom: 12px; }
.v3-feat-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font-family: var(--v3-sans); font-size: 12px; color: var(--v3-ink-3); margin-bottom: 10px; }
html[dir="rtl"] .v3-feat-meta { font-family: var(--v3-fa); }
.v3-feat-proj { color: var(--v3-teal); }
.v3-feat-title { font-family: var(--v3-serif); font-size: clamp(23px, 2.5vw, 33px); line-height: 1.18; font-weight: 600; color: var(--v3-ink); margin: 0 0 12px; cursor: pointer; text-wrap: balance; }
html[dir="rtl"] .v3-feat-title { font-family: var(--v3-fa); font-weight: 800; line-height: 1.45; font-size: clamp(19px, 2.2vw, 27px); }
.v3-feat-title:hover { color: var(--v3-teal); }
.v3-feat-excerpt { font-size: 15px; line-height: 1.75; color: var(--v3-ink-2); margin: 0 0 16px; }
html[dir="rtl"] .v3-feat-excerpt { font-family: var(--v3-fa); font-size: 14.5px; line-height: 2; }
.v3-feat-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--v3-sans); font-weight: 700; font-size: 13.5px; color: var(--v3-teal); transition: gap 0.2s; }
html[dir="rtl"] .v3-feat-link { font-family: var(--v3-fa); }
.v3-feat-link:hover { gap: 12px; }
.v3-feat--text { border-inline-start: 4px solid var(--v3-warm); }
.v3-feat--text .v3-feat-body { padding: 30px 32px 34px; cursor: pointer; }
.v3-feat--text .v3-feat-title { font-size: clamp(25px, 3vw, 38px); }
.v3-feat--text .v3-feat-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── Dramatic overlay hero lead — headline set over the image ── */
/* Height via min-height ONLY (never aspect-ratio + min-height together — that
   makes the ratio expand the WIDTH past its grid column on narrow layouts). */
.v3-feat--hero { position: relative; min-height: clamp(420px, 46vh, 540px); border: none; display: block; }
.v3-feat--hero .v3-feat-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.v3-feat--hero .v3-feat-media img { transition: transform 6s ease; }
.v3-feat--hero:hover .v3-feat-media img { transform: scale(1.045); }
.v3-feat-grad { position: absolute; inset: 0; cursor: pointer; background: linear-gradient(to top, rgba(8, 14, 28, 0.94) 0%, rgba(8, 14, 28, 0.7) 24%, rgba(8, 14, 28, 0.18) 52%, rgba(8, 14, 28, 0) 75%); }
.v3-feat--hero .v3-feat-playbtn { z-index: 3; }
.v3-feat-overlay { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 32px 34px 30px; cursor: pointer; }
.v3-feat-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.v3-feat--hero .v3-news-kind { background: rgba(255, 255, 255, 0.2); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v3-feat-kicker { font-family: var(--v3-fa); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: var(--v3-warm-hi, #e6bd6e); text-transform: uppercase; }
html[dir="ltr"] .v3-feat-kicker { font-family: var(--v3-sans); }
.v3-feat--text .v3-feat-kicker { color: #9a6f24; }
.v3-feat--hero .v3-feat-title { color: #fff; font-size: clamp(25px, 2.9vw, 40px); line-height: 1.16; margin: 0 0 11px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
html[dir="rtl"] .v3-feat--hero .v3-feat-title { line-height: 1.4; font-size: clamp(21px, 2.5vw, 33px); }
.v3-feat--hero .v3-feat-title:hover { color: #fff; opacity: 0.92; }
.v3-feat--hero .v3-feat-excerpt { color: rgba(255, 255, 255, 0.88); margin: 0 0 13px; max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-feat--hero .v3-feat-meta { color: rgba(255, 255, 255, 0.78); margin: 0; }
.v3-feat--hero .v3-feat-proj { color: var(--v3-warm-hi, #e6bd6e); }
.v3-feat--portrait { background: #101b31; }
.v3-feat--portrait .v3-feat-media img { position: absolute; left: 0; right: auto; width: 58%; object-fit: cover; }
.v3-feat--portrait .v3-feat-grad { background: linear-gradient(90deg, rgba(16,27,49,0) 25%, rgba(16,27,49,.65) 53%, #101b31 72%); }
.v3-feat--portrait .v3-feat-overlay { right: 0; left: auto; width: 58%; box-sizing: border-box; }

/* Category kicker above card headlines */
.v3-nc-kicker { font-family: var(--v3-fa); font-weight: 800; font-size: 11.5px; letter-spacing: 0.02em; color: #9a6f24; text-transform: uppercase; }
html[dir="ltr"] .v3-nc-kicker { font-family: var(--v3-sans); letter-spacing: 0.06em; }
.v3-news-mosaic .v3-nc.is-lg .v3-nc-kicker { font-size: 12.5px; }

/* Section divider with a gold-underlined label */
.v3-news-secrule { display: flex; align-items: flex-end; border-bottom: 1px solid var(--v3-line); margin: 32px 0 22px; }
.v3-news-secrule span { font-family: var(--v3-fa); font-weight: 800; font-size: 18px; color: var(--v3-ink); padding-bottom: 9px; border-bottom: 2px solid var(--v3-warm); margin-bottom: -1px; }
html[dir="ltr"] .v3-news-secrule span { font-family: var(--v3-serif); font-weight: 600; }

/* ── Featured BANNER — two-column split: text on the LEFT, narrower image RIGHT.
   The grid is forced LTR so column 1 (text) is always the physical left and the
   image the physical right; Persian text inside the left column is set back to
   RTL. On phones it stacks with the image on top. ── */
.v3-news-banner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  direction: ltr;
  box-sizing: border-box;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto 32px;
  padding: clamp(20px, 2.5vw, 36px) var(--v3-gutter);
  border-bottom: 1px solid var(--v3-line);
}
.v3-news-banner--text { grid-template-columns: 1fr; max-width: 1060px; }
.v3-news-banner-text { display: flex; flex-direction: column; align-items: flex-start; }
html[dir="rtl"] .v3-news-banner-text { direction: rtl; text-align: right; }
.v3-news-banner-tags { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.v3-news-banner-badge { font-family: var(--v3-fa); font-weight: 800; font-size: 12px; color: #1b2540; background: var(--v3-warm); padding: 5px 12px; border-radius: 999px; }
html[dir="ltr"] .v3-news-banner-badge { font-family: var(--v3-sans); letter-spacing: 0.08em; }
.v3-news-banner-kicker { font-family: var(--v3-fa); font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em; color: #9a6f24; text-transform: uppercase; }
html[dir="ltr"] .v3-news-banner-kicker { font-family: var(--v3-sans); }
.v3-news-banner-title { font-family: var(--v3-fa); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: 1.32; color: var(--v3-ink); margin: 0 0 14px; cursor: pointer; }
html[dir="ltr"] .v3-news-banner-title { font-family: var(--v3-serif); font-weight: 600; line-height: 1.1; font-size: clamp(28px, 3.4vw, 46px); }
.v3-news-banner-title:hover { color: var(--v3-teal); }
.v3-news-banner-excerpt { font-size: 16px; line-height: 1.85; color: var(--v3-ink-2); margin: 0 0 22px; max-width: 56ch; }
html[dir="rtl"] .v3-news-banner-excerpt { font-family: var(--v3-fa); font-size: 15px; line-height: 2.05; }
.v3-news-banner-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-news-banner-read, .v3-news-banner-play { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: none; border-radius: 10px; font-family: var(--v3-fa); font-weight: 700; font-size: 14px; padding: 12px 22px; transition: transform 0.2s ease, background 0.2s ease; }
html[dir="ltr"] .v3-news-banner-read, html[dir="ltr"] .v3-news-banner-play { font-family: var(--v3-sans); }
.v3-news-banner-read { background: var(--v3-teal); color: #fff; }
.v3-news-banner-read:hover { background: var(--v3-teal-deep, #0e1830); transform: translateY(-2px); }
.v3-news-banner-play { background: var(--v3-warm); color: #1b2540; }
.v3-news-banner-play:hover { transform: translateY(-2px); }
.v3-news-banner-metaline { font-family: var(--v3-fa); font-size: 13px; color: var(--v3-ink-3); margin-top: 16px; }
html[dir="ltr"] .v3-news-banner-metaline { font-family: var(--v3-sans); }
.v3-news-banner-figure { position: relative; aspect-ratio: 16 / 10; max-height: 600px; border-radius: 16px; overflow: hidden; background: var(--v3-cream-2, #e4e7ee); box-shadow: 0 30px 64px -32px rgba(11, 19, 38, 0.5); }
.v3-news-banner-figure img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.v3-news-banner-figure .v3-aparat { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.v3-news-banner-figplay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.94); color: var(--v3-teal); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(11, 19, 38, 0.5); transition: transform 0.2s; }
.v3-news-banner-figplay:hover { transform: scale(1.08); }
.v3-news-banner-figplay svg { width: 30px; height: 30px; margin-inline-start: 3px; }
@media (max-width: 760px) {
  .v3-news-banner { grid-template-columns: 1fr; gap: 20px; direction: inherit; }
  .v3-news-banner-figure { order: -1; aspect-ratio: 16 / 10; }
  .v3-news-banner-title { font-size: clamp(22px, 6.5vw, 30px); }
}

.v3-news-top { display: flex; flex-direction: column; }
.v3-news-top-head { font-family: var(--v3-fa); font-weight: 800; font-size: 16px; color: var(--v3-ink); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--v3-warm); }
html[dir="ltr"] .v3-news-top-head { font-family: var(--v3-serif); font-weight: 600; letter-spacing: 0.01em; }
.v3-news-top-list { list-style: none; margin: 0; padding: 0; }
.v3-news-top-item { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; cursor: pointer; border-bottom: 1px solid var(--v3-line); }
.v3-news-top-item:last-child { border-bottom: none; }
.v3-news-top-item:hover .v3-news-top-title { color: var(--v3-teal); }
.v3-news-top-thumb { position: relative; flex: 0 0 auto; width: 92px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--v3-cream-2, #e4e7ee); }
.v3-news-top-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-news-top-vid { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); color: var(--v3-teal); border-radius: 50%; }
.v3-news-top-vid svg { width: 15px; height: 15px; margin-inline-start: 2px; }
.v3-news-top-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-news-top-body .v3-news-kind { align-self: flex-start; }
.v3-news-top-title { font-family: var(--v3-fa); font-weight: 700; font-size: 15px; line-height: 1.55; color: var(--v3-ink); transition: color 0.18s; }
html[dir="ltr"] .v3-news-top-title { font-family: var(--v3-serif); font-weight: 600; font-size: 16px; line-height: 1.3; }

/* Card grid (related list) + mixed-size mosaic (archive body) */
.v3-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 24px; }
.v3-news-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; grid-auto-flow: row dense; }
/* Large tiles span two columns with a big landscape image — the priority
   stories, ABC-style. Standard + text-only tiles keep one column. */
.v3-news-mosaic .v3-nc.is-lg { grid-column: span 2; }
.v3-news-mosaic .v3-nc.is-lg .v3-nc-photo { aspect-ratio: 16 / 9; }
.v3-news-mosaic .v3-nc.is-lg .v3-nc-title { font-size: 21px; }
html[dir="ltr"] .v3-news-mosaic .v3-nc.is-lg .v3-nc-title { font-size: 24px; line-height: 1.18; }
.v3-news-mosaic .v3-nc.is-lg .v3-nc-excerpt { -webkit-line-clamp: 3; }
.v3-nc { background: var(--v3-paper, #fff); border: 1px solid var(--v3-line); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; }
.v3-nc:hover { transform: translateY(-4px); box-shadow: 0 22px 42px -26px rgba(11, 19, 38, 0.42); }
.v3-nc-photo { position: relative; aspect-ratio: 16 / 10; background: var(--v3-cream-2, #e4e7ee); overflow: hidden; }
.v3-nc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.v3-nc:hover .v3-nc-photo img { transform: scale(1.05); }
.v3-nc-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--v3-teal); border-radius: 50%; box-shadow: 0 8px 20px -6px rgba(11, 19, 38, 0.5); transition: transform 0.2s; }
.v3-nc:hover .v3-nc-play { transform: scale(1.08); }
.v3-nc-play svg { margin-inline-start: 3px; }
.v3-nc-photo .v3-news-kind { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; }
.v3-news-photo-note { position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 5; pointer-events: none; border: 1px solid rgba(255,255,255,.48); border-radius: 999px; background: rgba(11,19,38,.76); color: #fff; padding: 5px 10px; font: 700 10px/1.3 var(--v3-sans); letter-spacing: .07em; white-space: nowrap; }
html[dir="rtl"] .v3-news-photo-note { font-family: var(--v3-fa); font-size: 11px; letter-spacing: 0; }
.v3-news-photo-note.is-inline { position: static; display: inline-flex; background: rgba(11,19,38,.7); }
.v3-news-top-note { display: block; margin-top: 3px; color: var(--v3-ink-3); font-size: 11px; }
.v3-nc-tag { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgba(11, 19, 38, 0.78); color: #fff; font-family: var(--v3-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; }
html[dir="rtl"] .v3-nc-tag { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.v3-nc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.v3-nc-title { font-family: var(--v3-fa); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--v3-ink); margin: 0; }
html[dir="ltr"] .v3-nc-title { font-family: var(--v3-serif); font-weight: 600; font-size: 19px; line-height: 1.26; }
.v3-nc-excerpt { font-size: 13px; line-height: 1.7; color: var(--v3-ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[dir="rtl"] .v3-nc-excerpt { font-family: var(--v3-fa); font-size: 12.5px; line-height: 1.95; }
.v3-nc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--v3-sans); font-size: 11.5px; color: var(--v3-ink-3); margin-top: auto; padding-top: 4px; }
html[dir="rtl"] .v3-nc-meta { font-family: var(--v3-fa); }
.v3-nc-proj { color: var(--v3-teal); }
.v3-nc--text { background: linear-gradient(162deg, var(--v3-paper, #fff), var(--v3-cream, #f3f4f7)); border-inline-start: 3px solid var(--v3-warm); padding: 20px 20px 18px; gap: 11px; }
.v3-nc--text .v3-nc-texttop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v3-nc--text .v3-nc-tag { position: static; background: none; color: var(--v3-ink-3); padding: 0; letter-spacing: 0.04em; }
.v3-nc--text .v3-nc-title { font-size: 18px; }
html[dir="ltr"] .v3-nc--text .v3-nc-title { font-size: 20px; }

/* Aparat / video embed — fixed 16:9 */
.v3-aparat { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.v3-aparat iframe, .v3-aparat video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }

/* Article page additions */
.v3-article-player { margin: 0 0 24px; }
.v3-article-hero-tags { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.v3-article-hero-tags .v3-news-kind--media { background: rgba(255, 255, 255, 0.16); color: #fff; }
.v3-article-hero-tags .v3-news-kind--archive { background: rgba(255, 255, 255, 0.16); color: #fff; }
.v3-article-hero--text { background: linear-gradient(125deg, #14213d, #253c62); }

@media (max-width: 980px) {
  .v3-news-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .v3-news-hero { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .v3-news-toolbar { gap: 12px; }
  .v3-news-tools { width: 100%; }
  .v3-news-search { min-width: 0; flex: 1; }
  .v3-news-grid, .v3-news-mosaic { grid-template-columns: 1fr; gap: 18px; }
  .v3-news-mosaic .v3-nc.is-lg { grid-column: span 1; }
  .v3-news-mosaic .v3-nc.is-lg .v3-nc-photo { aspect-ratio: 16 / 10; }
  .v3-feat--hero { min-height: 440px; }
  .v3-feat-overlay { padding: 24px 20px 22px; }
  .v3-feat-grad { background: linear-gradient(to top, rgba(8, 14, 28, 0.96) 0%, rgba(8, 14, 28, 0.82) 34%, rgba(8, 14, 28, 0.28) 62%, rgba(8, 14, 28, 0) 84%); }
}

/* Editorial masthead (replaces the generic banner photo on /news) */
.v3-news-masthead { padding: 4px 0 20px; }
.v3-news-masthead .v3-eyebrow { margin-bottom: 10px; }
.v3-news-masthead-title { font-family: var(--v3-serif); font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 600; color: var(--v3-ink); margin: 0; letter-spacing: -0.01em; }
html[dir="rtl"] .v3-news-masthead-title { font-family: var(--v3-fa); font-weight: 800; font-size: clamp(27px, 4.4vw, 46px); line-height: 1.22; }
.v3-news-masthead-sub { font-family: var(--v3-sans); font-size: 15px; color: var(--v3-ink-2); margin: 12px 0 0; max-width: 62ch; }
html[dir="rtl"] .v3-news-masthead-sub { font-family: var(--v3-fa); line-height: 1.9; }

/* Article video player — a touch of depth */
.v3-article-player .v3-aparat { box-shadow: 0 22px 54px -26px rgba(11, 19, 38, 0.5); }

/* Gallery items become zoomable (open the lightbox) */
.v3-pd-gallery-item.is-zoomable { cursor: zoom-in; }
.v3-pd-gallery-item.is-zoomable:focus-visible { outline: 3px solid var(--v3-warm); outline-offset: 2px; }
.v3-pd-gallery-zoom {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11, 19, 38, 0.55); color: #fff; border-radius: 50%;
  opacity: 0; transform: scale(0.8); transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.v3-pd-gallery-item.is-zoomable:hover .v3-pd-gallery-zoom,
.v3-pd-gallery-item.is-zoomable:focus-visible .v3-pd-gallery-zoom { opacity: 1; transform: scale(1); }

/* ── Full-screen image lightbox ── */
.v3-lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 24, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: clamp(16px, 4vw, 56px); cursor: zoom-out;
}
.v3-lb-stage { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; cursor: default; }
.v3-lb-stage img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.v3-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: rgba(255, 255, 255, 0.92); }
.v3-lb-cap { font-family: var(--v3-fa); font-size: 14px; line-height: 1.6; }
html[dir="ltr"] .v3-lb-cap { font-family: var(--v3-sans); }
.v3-lb-count { font-family: var(--v3-sans); font-size: 13px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; letter-spacing: 0.05em; flex: 0 0 auto; }
.v3-lb-close, .v3-lb-nav { position: fixed; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.v3-lb-close { top: 18px; inset-inline-end: 18px; width: 44px; height: 44px; border-radius: 50%; }
.v3-lb-close:hover { background: rgba(255, 255, 255, 0.25); }
.v3-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; }
.v3-lb-nav:hover { background: rgba(255, 255, 255, 0.28); }
.v3-lb-prev { inset-inline-start: clamp(8px, 2vw, 28px); }
.v3-lb-next { inset-inline-end: clamp(8px, 2vw, 28px); }
html[dir="rtl"] .v3-lb-nav svg { transform: scaleX(-1); }
@media (max-width: 560px) {
  .v3-lb-nav { width: 42px; height: 42px; }
  .v3-lb-stage img { max-height: calc(100vh - 130px); }
}

/* ─── News article — rich editorial layout, built on the .v3-pd-* shell ─── */
.v3-article-hero { height: min(68vh, 600px); }
.v3-article-hero--portrait { background: #101b31; }
.v3-article-hero--portrait > img { position: absolute; left: 0; right: auto; width: 58%; object-fit: cover; }
.v3-article-hero--portrait .v3-pd-hero-shade { background: linear-gradient(90deg, rgba(16,27,49,0) 25%, rgba(16,27,49,.7) 53%, #101b31 72%); }
.v3-article-hero--portrait .v3-pd-hero-inner > h1 { max-width: 53%; }
@media (max-width: 700px) {
  .v3-feat--portrait .v3-feat-media img, .v3-article-hero--portrait > img { width: 100%; }
  .v3-feat--portrait .v3-feat-grad { background: linear-gradient(to top, #101b31 0%, rgba(16,27,49,.82) 35%, rgba(16,27,49,0) 78%); }
  .v3-feat--portrait .v3-feat-overlay { width: 100%; }
  .v3-article-hero--portrait .v3-pd-hero-shade { background: linear-gradient(to top, #101b31 0%, rgba(16,27,49,.78) 33%, rgba(16,27,49,0) 75%); }
  .v3-article-hero--portrait .v3-pd-hero-inner > h1 { max-width: none; }
}

/* Category pill in the hero — neutral translucent chip, distinct from
 * the project status pills (which carry done/ongoing colours). */
.v3-pd-status.news {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}

/* Dateline row under the hero headline: date · location · read-time. */
.v3-article-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; color: rgba(255,255,255,0.92);
}
.v3-article-hero-meta .dot { opacity: 0.55; }
html[dir="rtl"] .v3-article-hero-meta { font-family: var(--v3-fa); font-size: 13.5px; }

/* Caption under the hero photo, shown at the top of the main column. */
.v3-article-figcap {
  font-size: 13px; color: var(--v3-ink-3); font-style: italic;
  margin: 0 0 24px; padding-inline-start: 14px;
  border-inline-start: 2px solid var(--v3-line);
}
html[dir="rtl"] .v3-article-figcap { font-family: var(--v3-fa); font-style: normal; }

/* Lede — large standfirst paragraph that opens the story. */
.v3-article-lede {
  font-family: var(--v3-serif);
  font-size: 22px; line-height: 1.55; font-weight: 500;
  color: var(--v3-ink); margin: 0 0 18px;
}
html[dir="rtl"] .v3-article-lede { font-family: var(--v3-fa); font-weight: 700; font-size: 18px; line-height: 1.95; }

/* Byline */
.v3-article-byline {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--v3-ink-3); margin: 0 0 26px;
}
.v3-article-byline-dash { width: 26px; height: 1px; background: var(--v3-teal); display: inline-block; }
html[dir="rtl"] .v3-article-byline { font-family: var(--v3-fa); }

.v3-article-lead-body { margin-bottom: 8px; }

/* Key points — a cream callout card. */
.v3-article-highlights {
  background: var(--v3-cream-2);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 4px 0 40px;
}
.v3-article-highlights h2 {
  font-family: var(--v3-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--v3-teal); margin: 0 0 14px;
}
html[dir="rtl"] .v3-article-highlights h2 { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 14px; }
.v3-article-highlights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v3-article-highlights li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.6; color: var(--v3-ink); }
html[dir="rtl"] .v3-article-highlights li { font-family: var(--v3-fa); font-size: 15px; line-height: 1.85; }
.v3-article-hl-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--v3-teal); }

/* Pull-quote */
.v3-article-quote {
  margin: 32px 0; padding: 4px 0 4px 22px;
  border-inline-start: 3px solid var(--v3-teal);
}
.v3-article-quote p {
  font-family: var(--v3-serif);
  font-size: 23px; line-height: 1.45; font-weight: 500; font-style: italic;
  color: var(--v3-ink); margin: 0 0 10px;
}
html[dir="rtl"] .v3-article-quote p { font-family: var(--v3-fa); font-style: normal; font-weight: 700; font-size: 19px; line-height: 1.8; }
.v3-article-quote cite {
  font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--v3-ink-3);
}
html[dir="rtl"] .v3-article-quote cite { font-family: var(--v3-fa); }

/* Sidebar source link reuses the map-link look, shown full-width. */
.v3-article-source { display: block; text-align: center; }

.v3-article-empty { color: var(--v3-ink-3); font-style: italic; }
html[dir="rtl"] .v3-article-empty { font-family: var(--v3-fa); }

/* ═══════════════════════════════════════════════════════════════
 * DEDICATED SECTION PAGES — /about /leadership /credentials
 * /careers /contact. Photo hero (full-bleed) + cream body, premium
 * energy-corporate feel.
 * ═══════════════════════════════════════════════════════════════ */
.v3-page-photohero { height: min(58vh, 520px); margin-bottom: 44px; }
/* Stack back-link / eyebrow / title / lede so the inline back-link and
   inline-block eyebrow don't collide on one line ("خانه رهبری"). */
.v3-page-photohero .v3-pd-hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.v3-page-photohero .v3-back { margin-bottom: 4px; }
.v3-page-hero-eyebrow {
  display: inline-block; margin: 6px 0 10px;
  font-family: var(--v3-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-warm-hi);
}
html[dir="rtl"] .v3-page-hero-eyebrow { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.v3-page-hero-lede {
  max-width: 640px; margin: 14px 0 0; font-size: 17px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}
html[dir="rtl"] .v3-page-hero-lede { font-family: var(--v3-fa); font-size: 16px; line-height: 1.95; }

.v3-prose { max-width: 760px; margin: 6px 0 8px; display: grid; gap: 18px; }
.v3-prose p { font-size: 16.5px; line-height: 1.95; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-prose p { font-family: var(--v3-fa); font-size: 16px; line-height: 2.15; }
.v3-prose-lead p:first-child { font-size: 19px; line-height: 1.85; color: var(--v3-ink); }
html[dir="rtl"] .v3-prose-lead p:first-child { font-size: 18px; line-height: 2.05; }

/* ── About: consolidated sections (story · mission/vision · numbers ·
   workforce · leadership · credentials · journey) + side-rail anchoring ── */
.v3-about-sec { padding-block: 30px; scroll-margin-top: 86px; }
.v3-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.v3-mv-card {
  background: var(--v3-paper); border: 1px solid var(--v3-line);
  border-top: 3px solid var(--v3-warm); border-radius: 16px; padding: 28px 30px;
}
.v3-mv-kicker { font-family: var(--v3-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v3-warm); margin-bottom: 12px; }
html[dir="rtl"] .v3-mv-kicker { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-mv-card p { font-size: 16px; line-height: 1.85; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-mv-card p { font-family: var(--v3-fa); font-size: 15px; line-height: 2.05; }
.v3-mv-vtitle { margin-top: 44px; }
.v3-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.v3-value { background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 14px; padding: 20px 22px; }
.v3-value h4 { font-family: var(--v3-serif); font-size: 17px; font-weight: 600; color: var(--v3-ink); margin: 0 0 8px; }
html[dir="rtl"] .v3-value h4 { font-family: var(--v3-fa); font-weight: 700; }
.v3-value p { font-size: 13.5px; line-height: 1.7; color: var(--v3-ink-3); margin: 0; }
html[dir="rtl"] .v3-value p { font-family: var(--v3-fa); line-height: 1.95; }
@media (max-width: 760px) {
  .v3-mv-grid { grid-template-columns: 1fr; }
  .v3-values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) { .v3-values-grid { grid-template-columns: 1fr; } }

.v3-page-block { margin: 48px 0; }

/* About — "by the numbers" on a deep-navy band (Aramco-style stat strip) */
.v3-numbers-band { background: var(--v3-teal-deep); color: #fff; padding: 62px var(--v3-gutter); margin: 8px 0 48px; }
.v3-numbers-inner { max-width: var(--v3-content); margin: 0 auto; }
.v3-numbers-eyebrow { font-family: var(--v3-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-warm-hi); margin-bottom: 28px; }
html[dir="rtl"] .v3-numbers-eyebrow { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
/* Admin-set lede under the projects-wheel heading (projectsHead.lede —
   editable in «متون عمومی» and previously write-only).
   IMPORTANT: it must stay in the heading's own (inline-start) column —
   the 3D drum deliberately grows UP into the header's empty band
   (.v3-wheel-stage margin-top:-88px), so a centred full-width lede
   would sit underneath the front card. Start-aligned + width-capped
   keeps it beside the h2, clear of the drum. */
.v3-wheel-lede {
  max-width: min(52ch, 44vw);
  margin: 10px 0 0;
  font-size: 15px; line-height: 1.85; color: var(--v3-ink-2);
}
html[dir="rtl"] .v3-wheel-lede { font-family: var(--v3-fa); }
/* With a lede present the header is taller. In LTR the heading/lede and
   the drum share the physical-left column, so the drum must give up its
   upward growth and real padding keeps the text clear — the wheel JS
   re-measures the stage and sizes the card down. */
.v3-wheel-section.has-lede .v3-wheel-stage { margin-top: 0; }
.v3-wheel-section.has-lede .v3-wheel-header { padding-bottom: 36px; }
/* In RTL the heading+lede hug the RIGHT column while the drum owns the
   left band — no horizontal contest — so the drum keeps most of its
   upward growth and the cards stay big. (-64 not -88: the lede still
   lowers the header's text bottom a little.) */
html[dir="rtl"] .v3-wheel-section.has-lede .v3-wheel-stage { margin-top: -64px; }
html[dir="rtl"] .v3-wheel-section.has-lede .v3-wheel-header { padding-bottom: 8px; }

/* Optional admin-set heading under the eyebrow (statsHead.heading). */
.v3-numbers-heading { font-family: var(--v3-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 500; color: #fff; margin: -14px 0 28px; }
html[dir="rtl"] .v3-numbers-heading { font-family: var(--v3-fa); font-weight: 700; }
.v3-numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.v3-number { border-top: 2px solid rgba(255, 255, 255, 0.18); padding-top: 18px; min-width: 0; }
.v3-number-val { font-family: var(--v3-serif); font-size: clamp(40px, 5vw, 58px); font-weight: 500; line-height: 1; color: #fff; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; max-width: 100%; }
html[dir="rtl"] .v3-number-val { font-family: var(--v3-fa); font-weight: 700; }
.v3-number-val .unit { font-size: 0.45em; color: var(--v3-warm-hi); }
.v3-number-label { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
html[dir="rtl"] .v3-number-label { font-family: var(--v3-fa); }

/* About — history timeline: single rail + dot, RTL-safe (logical props) */
.v3-history { max-width: 720px; margin-top: 4px; }
.v3-history-row { position: relative; padding-inline-start: 34px; padding-bottom: 30px; border-inline-start: 2px solid var(--v3-line-2); }
.v3-history-row:last-child { border-color: transparent; padding-bottom: 2px; }
.v3-history-row::before { content: ''; position: absolute; top: 4px; inset-inline-start: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--v3-warm); box-shadow: 0 0 0 4px var(--v3-cream); }
.v3-history-year { font-family: var(--v3-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--v3-warm); margin-bottom: 5px; }
html[dir="rtl"] .v3-history-year { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-history-body h3 { font-family: var(--v3-serif); font-size: 20px; font-weight: 500; color: var(--v3-ink); margin: 0 0 6px; }
html[dir="rtl"] .v3-history-body h3 { font-family: var(--v3-fa); font-weight: 700; }
.v3-history-body p { font-size: 15px; line-height: 1.8; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-history-body p { font-family: var(--v3-fa); }

/* Explore-more cross-link band */
.v3-explore { background: var(--v3-cream-2); border-top: 1px solid var(--v3-line); padding: 54px 0; margin-top: 56px; }
.v3-explore-eyebrow { font-family: var(--v3-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-warm); margin-bottom: 22px; }
html[dir="rtl"] .v3-explore-eyebrow { font-family: var(--v3-fa); letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
.v3-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v3-explore-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 14px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.v3-explore-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 19, 38, 0.1); border-color: var(--v3-teal); }
.v3-explore-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v3-explore-card-label { font-family: var(--v3-serif); font-size: 19px; font-weight: 500; color: var(--v3-ink); }
html[dir="rtl"] .v3-explore-card-label { font-family: var(--v3-fa); font-weight: 700; }
.v3-explore-card-desc { font-size: 13px; color: var(--v3-ink-3); }
html[dir="rtl"] .v3-explore-card-desc { font-family: var(--v3-fa); }
.v3-explore-card-arrow { flex: 0 0 auto; color: var(--v3-teal); transition: color 0.3s ease; }
.v3-explore-card:hover .v3-explore-card-arrow { color: var(--v3-warm); }

/* Contact — head-office Google map embed */
.v3-contact-mapblock { margin-bottom: 8px; }
.v3-contact-map { max-width: var(--v3-content); margin: 18px auto 0; padding: 0 var(--v3-gutter); }
.v3-contact-map iframe { width: 100%; height: 420px; border: 0; border-radius: 16px; display: block; }
/* Click-to-load map facade — renders instantly; the heavy Google iframe
   only mounts on click, so the contact page never waits on Google Maps. */
.v3-map-facade { width: 100%; height: 420px; border: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: var(--v3-teal); color: #fff; transition: filter .2s ease; }
.v3-map-facade:hover { filter: brightness(1.1); }
.v3-map-facade-pin { color: var(--v3-warm); display: inline-flex; }
.v3-map-facade-title { font-family: var(--v3-sans); font-weight: 700; letter-spacing: .04em; font-size: 15px; }
html[dir="rtl"] .v3-map-facade-title { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-map-facade-sub { font-family: var(--v3-sans); font-size: 13px; opacity: .82; max-width: 82%; text-align: center; line-height: 1.6; }
html[dir="rtl"] .v3-map-facade-sub { font-family: var(--v3-fa); }
.v3-contact-maplink { margin-top: 12px; text-align: center; }
.v3-contact-maplink a { font-family: var(--v3-sans); font-size: 13px; font-weight: 600; color: var(--v3-warm); text-decoration: none; }
html[dir="rtl"] .v3-contact-maplink a { font-family: var(--v3-fa); }
.v3-contact-maplink a:hover { text-decoration: underline; }

/* Leadership — team grid */
.v3-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.v3-team-card { background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.v3-team-photo { aspect-ratio: 4/5; background: var(--v3-cream-2); overflow: hidden; }
.v3-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-team-nophoto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--v3-serif); font-size: 64px; color: var(--v3-teal); background: var(--v3-teal-mist); }
.v3-team-info { padding: 20px 22px 24px; }
.v3-team-role { font-family: var(--v3-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v3-warm); }
html[dir="rtl"] .v3-team-role { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 13px; }
.v3-team-name { font-family: var(--v3-serif); font-size: 22px; font-weight: 500; color: var(--v3-ink); margin: 6px 0 10px; }
html[dir="rtl"] .v3-team-name { font-family: var(--v3-fa); font-weight: 700; }
.v3-team-bio { font-size: 14.5px; line-height: 1.75; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-team-bio { font-family: var(--v3-fa); font-size: 14px; line-height: 1.95; }

/* ── Org chart (leadership flowchart) ────────────────────────────────── */
.v3-org-hint { text-align: center; font-size: 13px; color: var(--v3-ink-3); margin: 0 0 24px; }
html[dir="rtl"] .v3-org-hint { font-family: var(--v3-fa); }
.v3-org-intro { max-width: 640px; margin: 0 auto 42px; text-align: center; }
.v3-org-intro .v3-eyebrow { justify-content: center; }
.v3-org-intro-title { font-family: var(--v3-serif); font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; color: var(--v3-ink); margin: 12px 0 14px; }
html[dir="rtl"] .v3-org-intro-title { font-family: var(--v3-fa); font-weight: 800; font-size: clamp(22px, 3vw, 30px); }
.v3-org-intro-text { font-size: 16px; line-height: 1.8; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-org-intro-text { font-family: var(--v3-fa); font-size: 15px; line-height: 2.05; }
.v3-org { position: relative; }
.v3-org-scroll { overflow: visible; padding-bottom: 10px; }
@media (max-width: 900px) { .v3-org-scroll { overflow-x: auto; overflow-y: hidden; } }

/* ── Mobile org chart: vertical rank tiers (replaces the 2D canvas <900px) ──
 * The 1200×800 canvas can't fit a phone without horizontal scroll, so on
 * narrow screens OrgChart renders ranks stacked top-to-bottom; cards wrap
 * within a rank so the layout fits any width with zero horizontal scroll. */
.v3-org-tiers { display: flex; flex-direction: column; align-items: center; gap: 0; }
.v3-org-tier { width: 100%; display: flex; flex-direction: column; align-items: center; }
.v3-org-tier-conn { flex: none; width: 2px; height: 24px; background: var(--v3-line-2); }
.v3-org-tier-cards { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.v3-org-mcard {
  appearance: none; -webkit-appearance: none; color: inherit;
  flex: 1 1 240px; max-width: 380px; min-width: 0;
  display: flex; align-items: center; gap: 12px; text-align: start;
  padding: 12px 14px; border-radius: 14px;
  background: var(--v3-paper); border: 1px solid var(--v3-line);
  font-family: inherit; cursor: pointer;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease var(--d, 0s), transform .55s ease var(--d, 0s),
              box-shadow .25s ease, border-color .25s ease;
}
.v3-org.is-drawn .v3-org-mcard { opacity: 1; transform: none; }
.v3-org-mcard:hover { border-color: var(--v3-line-2); }
.v3-org-mcard.is-sel { border-color: var(--v3-warm); box-shadow: 0 0 0 2px var(--v3-warm); }
.v3-org-mdetail {
  position: relative; width: 100%; margin-top: 12px;
  background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 22px 42px -24px rgba(11, 19, 38, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .v3-org-mcard { opacity: 1; transform: none;
    transition: box-shadow .25s ease, border-color .25s ease; }
}
.v3-org-canvas {
  position: relative;
  width: 100%;
  min-width: 760px;
  aspect-ratio: 1200 / 800;
  margin: 0 auto;
  /* framed "boardroom" panel so the chart doesn't float on an empty page */
  background:
    radial-gradient(circle, rgba(20, 33, 61, 0.05) 1px, transparent 1.6px) 0 0 / 32px 32px,
    linear-gradient(165deg, #fbfcfe 0%, var(--v3-cream-2) 100%);
  border: 1px solid var(--v3-line);
  border-radius: 24px;
  box-shadow: 0 44px 80px -52px rgba(11, 19, 38, 0.42);
}
.v3-org-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.v3-org-edge {
  fill: none; stroke: var(--v3-line-2); stroke-width: 2; stroke-linecap: round;
  /* drawn line: hidden (offset 1) until the chart reveals, then draws in */
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s ease var(--ed, 0s);
}
.v3-org.is-drawn .v3-org-edge { stroke-dashoffset: 0; }
.v3-org-node {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: 212px; padding: 10px 14px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  box-shadow: 0 14px 30px -20px rgba(11, 19, 38, 0.4);
  cursor: pointer; text-align: start;
  /* hidden until the chart scrolls into view (cascade staggered by --d) */
  opacity: 0;
  transform: translate(-50%, calc(-50% + 18px)) scale(.93);
  transition:
    opacity .7s ease var(--d, 0s),
    transform .85s cubic-bezier(.2, .7, .3, 1) var(--d, 0s),
    box-shadow .25s ease, border-color .25s ease;
}
.v3-org.is-drawn .v3-org-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .v3-org-node { opacity: 1; transform: translate(-50%, -50%); transition: box-shadow .25s ease, border-color .25s ease; }
  .v3-org-edge { stroke-dashoffset: 0; transition: none; }
}
.v3-org-node:hover { box-shadow: 0 22px 42px -20px rgba(11, 19, 38, 0.55); border-color: var(--v3-line-2); }
.v3-org-node.is-sel { border-color: var(--v3-warm); box-shadow: 0 0 0 2px var(--v3-warm), 0 22px 42px -20px rgba(11, 19, 38, 0.55); }
.v3-org-node-photo {
  flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--v3-teal-deep); display: flex; align-items: center; justify-content: center;
}
.v3-org-node-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-org-node-ph { color: var(--v3-warm-hi); font-family: var(--v3-serif); font-size: 20px; font-weight: 600; }
html[dir="rtl"] .v3-org-node-ph { font-family: var(--v3-fa); }
.v3-org-node-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-org-node-name { font-size: 14px; font-weight: 700; color: var(--v3-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[dir="rtl"] .v3-org-node-name { font-family: var(--v3-fa); }
.v3-org-node-role { font-size: 11.5px; color: var(--v3-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[dir="rtl"] .v3-org-node-role { font-family: var(--v3-fa); }

/* compact profile popover anchored beside the clicked node */
.v3-org-pop {
  position: absolute;
  z-index: 6;
  width: 286px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  box-shadow: 0 26px 54px -26px rgba(11, 19, 38, 0.55);
  padding: 16px 18px 18px;
  animation: v3popfade .18s ease;
}
@keyframes v3popfade { from { opacity: 0; } to { opacity: 1; } }
.v3-org-pop.to-end   { transform: translate(118px, -50%); }
.v3-org-pop.to-start { transform: translate(calc(-100% - 118px), -50%); }
.v3-org-pop-close {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--v3-line); background: var(--v3-cream);
  color: var(--v3-ink-3); font-size: 12px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.v3-org-pop-close:hover { background: var(--v3-cream-2); color: var(--v3-ink); }
.v3-org-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-inline-end: 24px; }
.v3-org-pop-photo {
  flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
  background: var(--v3-teal-deep); display: flex; align-items: center; justify-content: center;
}
.v3-org-pop-photo img { width: 100%; height: 100%; object-fit: cover; }
.v3-org-pop-ph { color: var(--v3-warm-hi); font-family: var(--v3-serif); font-size: 22px; }
html[dir="rtl"] .v3-org-pop-ph { font-family: var(--v3-fa); }
.v3-org-pop-htext { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-org-pop-name { font-family: var(--v3-serif); font-size: 17px; font-weight: 600; color: var(--v3-teal-deep); line-height: 1.2; }
html[dir="rtl"] .v3-org-pop-name { font-family: var(--v3-fa); font-weight: 800; font-size: 16px; line-height: 1.4; }
.v3-org-pop-role { font-size: 11.5px; color: var(--v3-warm); font-weight: 600; }
html[dir="rtl"] .v3-org-pop-role { font-family: var(--v3-fa); font-size: 12px; }
.v3-org-pop-bio { font-size: 13.5px; line-height: 1.75; color: var(--v3-ink-2); margin: 0; padding-top: 12px; border-top: 1px solid var(--v3-line); }
html[dir="rtl"] .v3-org-pop-bio { font-family: var(--v3-fa); line-height: 2; font-size: 13px; }
.v3-org-pop-bio.is-empty { color: var(--v3-ink-4); }
/* mobile: the popover becomes a bottom sheet */
@media (max-width: 600px) {
  .v3-org-pop, .v3-org-pop.to-end, .v3-org-pop.to-start {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; transform: none; z-index: 90;
    border-radius: 18px 18px 0 0; padding: 22px 22px 26px;
    box-shadow: 0 -20px 50px -20px rgba(11, 19, 38, 0.5);
    animation: v3popsheet .25s cubic-bezier(.2,.7,.3,1);
  }
}
@keyframes v3popsheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Credentials — grid */
.v3-cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding-bottom: 80px; }
.v3-cred-card {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--v3-paper); border: 1px solid var(--v3-line);
  border-radius: 16px; padding: 26px 26px 28px;
  position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.v3-cred-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--v3-warm), transparent 72%);
  opacity: 0; transition: opacity .3s ease;
}
.v3-cred-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(11,19,38,.5); border-color: var(--v3-line-2); }
.v3-cred-card:hover::before { opacity: 1; }

/* Medallion seal (shown when no certificate image is uploaded) */
.v3-cred-seal {
  flex: 0 0 86px; width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(circle at 50% 32%, #213352, var(--v3-teal));
  border: 2px solid var(--v3-warm);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.06), 0 8px 20px -10px rgba(11,19,38,0.55);
}
.v3-cred-seal::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(200,150,62,0.45); }
.v3-cred-seal-code { position: relative; z-index: 1; font-family: var(--v3-serif); font-weight: 600; font-size: 19px; letter-spacing: 0.02em; color: var(--v3-warm-hi); }
html[dir="rtl"] .v3-cred-seal-code { font-family: var(--v3-fa); font-weight: 700; font-size: 17px; }

/* Uploaded certificate image (portrait) — click to view full size */
.v3-cred-logo {
  flex: 0 0 90px; width: 90px; height: 116px; border-radius: 10px;
  overflow: hidden; background: var(--v3-cream-2); border: 1px solid var(--v3-line);
  position: relative; display: block; cursor: zoom-in;
  padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none;
}
/* Certificate zoom lightbox — reuses the .v3-lb fullscreen backdrop; the
   grow-in / shrink-out is a pure CSS transition toggled by `.is-open`. */
.v3-cert-lb { opacity: 0; transition: opacity 0.28s ease; }
.v3-cert-lb.is-open { opacity: 1; }
.v3-cert-lb-stage { position: relative; margin: 0; max-width: min(92vw, 820px); max-height: 86vh; display: flex; flex-direction: column; align-items: center; cursor: default; transform: scale(0.72); opacity: 0; transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; will-change: transform, opacity; }
.v3-cert-lb.is-open .v3-cert-lb-stage { transform: scale(1); opacity: 1; }
.v3-cert-lb-stage img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); }
.v3-cert-lb-cap { margin-top: 16px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 3px; }
.v3-cert-lb-name { font-family: var(--v3-serif); font-size: 20px; font-weight: 500; }
html[dir="rtl"] .v3-cert-lb-name { font-family: var(--v3-fa); font-weight: 700; font-size: 18px; }
.v3-cert-lb-issuer { font-size: 13px; opacity: 0.75; }
html[dir="rtl"] .v3-cert-lb-issuer { font-family: var(--v3-fa); }
.v3-cred-logo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.v3-cred-logo:hover img { transform: scale(1.05); }
.v3-cred-zoom {
  position: absolute; bottom: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,33,61,0.82); color: #fff; opacity: 0; transition: opacity .25s ease;
}
.v3-cred-logo:hover .v3-cred-zoom { opacity: 1; }

.v3-cred-info { min-width: 0; padding-top: 2px; }
.v3-cred-tag { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--v3-warm); background: rgba(200,150,62,0.1); border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; }
.v3-cred-name { font-family: var(--v3-serif); font-size: 20px; font-weight: 500; color: var(--v3-ink); margin: 0 0 5px; line-height: 1.25; }
html[dir="rtl"] .v3-cred-name { font-family: var(--v3-fa); font-weight: 700; font-size: 18px; }
.v3-cred-issuer { font-size: 13px; color: var(--v3-ink-3); margin-bottom: 10px; }
html[dir="rtl"] .v3-cred-issuer { font-family: var(--v3-fa); }
.v3-cred-desc { font-size: 14px; line-height: 1.75; color: var(--v3-ink-2); margin: 0; }
html[dir="rtl"] .v3-cred-desc { font-family: var(--v3-fa); font-size: 13.5px; line-height: 2; }

/* Contact — channels + form */
.v3-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.v3-contact-channels { display: grid; gap: 18px; }
.v3-contact-card { padding: 18px 20px; background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 12px; border-inline-start: 3px solid var(--v3-warm); }
.v3-contact-card-label { font-family: var(--v3-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v3-warm); margin-bottom: 6px; }
html[dir="rtl"] .v3-contact-card-label { font-family: var(--v3-fa); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.v3-contact-card-value { font-size: 15px; line-height: 1.7; color: var(--v3-ink); }
html[dir="rtl"] .v3-contact-card-value { font-family: var(--v3-fa); }
.v3-contact-card-value.mono { font-family: "JetBrains Mono", ui-monospace, monospace; direction: ltr; unicode-bidi: plaintext; font-size: 14px; }
.v3-contact-formwrap .v3-pd-h2 { margin-bottom: 18px; }
/* ۱۴۰۵/۰۵ review: the contact / application forms sit in a proper BOX —
   a bordered paper card — instead of floating on the section background.
   .v3-form is used on the /contact page and inside /careers (Connect). */
.v3-form {
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 60px -34px rgba(20, 33, 61, 0.28);
}
@media (max-width: 640px) {
  .v3-form { padding: 18px; border-radius: 12px; }
}

@media (max-width: 980px) {
  .v3-numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .v3-team-grid    { grid-template-columns: repeat(2, 1fr); }
  .v3-cred-grid    { grid-template-columns: 1fr; }
  .v3-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .v3-explore-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .v3-numbers-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .v3-numbers-band { padding: 46px var(--v3-gutter); }
  .v3-team-grid    { grid-template-columns: 1fr; }
  .v3-contact-map iframe, .v3-map-facade { height: 320px; }
}

@media (max-width: 980px) {
  .v3-pd-grid { grid-template-columns: 1fr; gap: 0; }
  .v3-pd-side { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 44px; }
  .v3-pd-spec, .v3-pd-mapcard { flex: 1; min-width: 240px; }
  .v3-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .v3-subpage-inner, .v3-pd-hero-inner { padding-inline: 24px; }
  .v3-archive-grid { grid-template-columns: 1fr; }
  .v3-pd-gallery { grid-template-columns: 1fr; }
  .v3-pd-side { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════
   PROJECT MAP SECTION (#v3-map) — image-backed Iran map + markers
   ════════════════════════════════════════════════════════════════ */
/* The Projects drum directly above ends with its «مشاهدهٔ همهٔ پروژه‌ها»
   button, so the section's default 110px top padding (from .v3-section)
   stacked into a ~155px dead band above the «گسترهٔ فعالیت» heading.
   Trim the top only — bottom keeps 110px to breathe into the News section.
   id beats .v3-section's padding-block (desktop 110 + mobile 70), so this
   44px applies at every width; on mobile the band was already tight, fine. */
#v3-map { padding-top: 44px; }

.v3-map-lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--v3-ink-2);
  max-width: 560px;
  margin: 0 0 12px;
}
html[dir="rtl"] .v3-map-lede { font-family: var(--v3-fa); font-size: 15px; line-height: 1.95; }
.v3-map-coverage { max-width: 720px; margin: 0 0 8px; color: var(--v3-ink-3); font-size: 12px; line-height: 1.8; }
.v3-map-coverage a { color: var(--v3-teal); text-decoration: underline; text-underline-offset: 3px; }
html[dir="rtl"] .v3-map-coverage { font-family: var(--v3-fa); font-size: 13px; }

.v3-map-wrap {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
}
.v3-map-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
/* Interactive province polygons (vector map; replaces the old raster base).
 * Each province is its own <path>; hovering one scales it up, lifts it and
 * gives it a gold border + shadow, while paint-order (the hovered path is
 * moved last in the DOM) raises it above its neighbours. */
/* Water: the sea fills the whole frame and the solid land path masks it over
   Iran, so only the real coastline water shows (Gulf, Caspian, Oman). */
.v3-sea-poly { fill: #b7cee1; stroke: #ffffff; stroke-width: 0.75; pointer-events: none; }
/* Slightly darker silhouette so provinces visibly "pop" lighter as they reveal. */
.v3-map-land { fill: #ccd3df; stroke: none; pointer-events: none; }
.v3-map-sea-label {
  fill: #6f8aa6; font-family: var(--v3-fa); font-weight: 600;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  letter-spacing: 0.04em;
}
html[dir="ltr"] .v3-map-sea-label { font-family: var(--v3-sans); font-style: italic; }
.v3-map-lake-label { font-size: 12px; }

.v3-map-provs .v3-prov {
  fill: #dfe3ea;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-linejoin: round;   /* round the polygon corners — softer, curvier tiles */
  transform-box: fill-box;
  transform-origin: center;
  /* hidden / pre-reveal state: a small tile lifted up out of view */
  opacity: 0;
  transform: scale(0.46) translateY(-26px);
  pointer-events: none;
  /* gentle overshoot (y>1) so each province "pops" into place and the
     hover-lift settles with a hair of spring — smooth, not bouncy. */
  transition: transform 0.62s cubic-bezier(0.34, 1.28, 0.64, 1),
              opacity 0.5s ease,
              fill 0.4s ease, stroke 0.4s ease, filter 0.5s ease;
  will-change: transform, opacity;
  cursor: default;
}
/* Only provinces that actually hold projects invite a click. */
.v3-map-provs .v3-prov.has-proj { cursor: pointer; }
/* `is-shown` is toggled imperatively (no React re-render) as each province
   scrolls through the viewport band — the per-province pop-in/out reveal. */
.v3-map-provs .v3-prov.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.v3-map-provs .v3-prov.is-shown.is-hover {
  fill: var(--v3-teal);
  stroke: var(--v3-warm);
  stroke-width: 2;
  transform: translateY(-18px) scale(1.19);
  /* A few BLURRED, darkening shadows melt into one another to form a smooth,
     rounded "depth" beneath the lifted face — a soft curved bevel rather than a
     hard blocky wall — finished with a soft ambient shadow and a warm gold rim.
     Only the 1-2 active provinces ever carry this filter, so the map's scroll
     performance is untouched. */
  filter:
    drop-shadow(0 2px 1.5px rgba(17, 29, 56, 0.92))
    drop-shadow(0 5px 4px rgba(13, 23, 44, 0.72))
    drop-shadow(0 9px 8px rgba(11, 20, 38, 0.55))
    drop-shadow(0 17px 18px rgba(11, 19, 38, 0.45))
    drop-shadow(0 0 11px rgba(200, 150, 62, 0.5));
}
/* Clicked (selected) province stays highlighted while its list is open. */
.v3-map-provs .v3-prov.is-shown.is-selected {
  fill: var(--v3-teal);
  stroke: var(--v3-warm);
  stroke-width: 2;
  transform: translateY(-9px) scale(1.11);
  /* Same soft rounded depth as hover, a touch shallower — the selected province
     stays gently raised while its project list is open. */
  filter:
    drop-shadow(0 2px 1.5px rgba(15, 26, 49, 0.85))
    drop-shadow(0 5px 5px rgba(11, 20, 38, 0.55))
    drop-shadow(0 11px 13px rgba(11, 19, 38, 0.42))
    drop-shadow(0 0 7px rgba(200, 150, 62, 0.42));
}
.v3-map-svg.is-zoomed .v3-map-provs { pointer-events: none; }
/* Province name, shown while hovering that province */
.v3-prov-label {
  fill: #fff;
  font-family: var(--v3-fa);
  font-weight: 700;
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(11, 19, 38, 0.55);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
html[dir="ltr"] .v3-prov-label { font-family: var(--v3-sans); }

/* Hover panel — projects in the hovered province, pinned to the map's left. */
/* Two-column map stage: side panel BESIDE the map (never over it) + the map. */
/* The 100vw-based full-bleed breakout below intentionally exceeds the content
   box; it relies on the html/body `overflow-x: clip` guard (CSS-1) to stay
   from producing horizontal page scroll. Keep the 100vw math (not 100%). */
.v3-map-stage {
  /* Break out of the section's centered content box so the panel can sit far
     left; cap to a viewport-centred width with a scaling gutter (no h-scroll). */
  --tj-stage-w: min(1600px, 100vw - clamp(40px, 8vw, 160px));
  display: flex; gap: 24px; align-items: stretch;
  width: var(--tj-stage-w);
  margin: 28px calc((100% - var(--tj-stage-w)) / 2) 0;
  /* Aramco-style scroll scale (set imperatively from ProjectMap's scroll
     pass): grows in as the section arrives, full size mid-viewport, shrinks
     on the way out. will-change keeps it on its own compositor layer so the
     per-frame scale never repaints the SVG; transform doesn't affect layout,
     so the page can't gain horizontal scroll from it. */
  transform-origin: 50% 50%;
  will-change: transform;
}
html[dir="rtl"] .v3-map-stage { flex-direction: row-reverse; }
.v3-map-stage .v3-map-wrap { flex: 1 1 auto; min-width: 0; max-width: 860px; margin: 0 auto; }
/* Clip wrapper: holds the column's flex slot + the floating shadow, and
   CLIPS the slide-out so the column never extends the page (critical in RTL,
   where a left-translated child would otherwise add horizontal scroll). */
.v3-map-sidecol-wrap {
  flex: 0 0 clamp(320px, 33%, 420px); align-self: stretch;
  display: flex; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(11, 19, 38, 0.4);
  /* position context for the absolutely-filled column below. The column is
     taken out of flow so its (uncapped) content can't stretch the stage taller
     than the MAP — the wrap stretches to the map's height, the column fills it,
     and the project list scrolls inside. */
  position: relative;
}
.v3-map-sidecol {
  position: absolute; inset: 0;
  min-width: 0;
  /* Solid-ish cream panel instead of a backdrop blur — the column sits BESIDE
     the map (over the plain cream section, not over content), so the blur cost
     nothing visually but forced a re-blur every scroll frame. */
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.94), rgba(250, 248, 243, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 3px solid var(--v3-warm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  padding: 26px 24px 18px; overflow: hidden;
  text-align: start; display: flex; flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
/* When a project detail opens, the column glides OUT to the left (clipped by
   the wrap); when the project closes it glides back IN from the left.
   translateX is physical, so this is "leftwards" in both RTL and LTR. */
.v3-map-sidecol.is-tucked {
  transform: translateX(-115%);
  opacity: 0;
  pointer-events: none;
}
/* Idle state — a hint while no province is hovered. */
.v3-map-pp-idle { margin: auto 0; text-align: center; padding: 18px 6px; }
.v3-map-pp-idle-mark { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20, 33, 61, 0.07); color: var(--v3-teal); }
.v3-map-pp-idle-title { font-family: var(--v3-fa); font-weight: 800; font-size: 19px; color: var(--v3-ink); margin-bottom: 8px; }
html[dir="ltr"] .v3-map-pp-idle-title { font-family: var(--v3-serif); font-weight: 600; }
.v3-map-pp-idle-text { font-family: var(--v3-fa); font-size: 13.5px; line-height: 1.95; color: var(--v3-ink-3); margin: 0; }
html[dir="ltr"] .v3-map-pp-idle-text { font-family: var(--v3-sans); }

/* ── Smooth entrance animations for the side column + panel content ── */
@keyframes v3-pp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.v3-map-pp-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: v3-pp-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.v3-map-pp-item { opacity: 0; animation: v3-pp-rise 0.44s cubic-bezier(0.22, 1, 0.36, 1) both; }
.v3-map-panel-meta-extra, .v3-map-panel-scope { animation: v3-pp-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .v3-map-pp-inner, .v3-map-pp-item, .v3-map-panel-meta-extra, .v3-map-panel-scope { animation: none; opacity: 1; }
}
.v3-map-pp-eyebrow { display: block; font-family: var(--v3-fa); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--v3-warm); }
html[dir="ltr"] .v3-map-pp-eyebrow { font-family: var(--v3-sans); text-transform: uppercase; }
.v3-map-pp-name { margin: 5px 0 3px; font-family: var(--v3-fa); font-weight: 800; font-size: 25px; color: var(--v3-ink); line-height: 1.25; }
html[dir="ltr"] .v3-map-pp-name { font-family: var(--v3-serif); font-weight: 600; }
.v3-map-pp-count { font-family: var(--v3-fa); font-size: 13.5px; color: var(--v3-ink-2); }
html[dir="ltr"] .v3-map-pp-count { font-family: var(--v3-sans); }
.v3-map-pp-list {
  list-style: none; margin: 18px 0 2px; padding: 0; display: grid; gap: 10px;
  /* Fill the column down to its bottom, then scroll INSIDE the list — a
     province like Assaluyeh (22 projects) no longer stretches the column,
     and the scroll area is as tall as the whole column. overscroll:contain
     keeps the wheel on the list (not the page) when the pointer is over it. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 4px;
}
.v3-map-pp-list::-webkit-scrollbar { width: 8px; }
.v3-map-pp-list::-webkit-scrollbar-thumb { background: rgba(20, 33, 61, 0.22); border-radius: 8px; }
.v3-map-pp-list::-webkit-scrollbar-thumb:hover { background: rgba(20, 33, 61, 0.34); }
.v3-map-pp-list::-webkit-scrollbar-track { background: transparent; }
.v3-map-pp-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(20, 33, 61, 0.06); cursor: pointer; transition: background 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease, border-color 0.22s ease; }
.v3-map-pp-item:hover { background: #ffffff; transform: translateY(-2px); border-color: rgba(200, 150, 62, 0.45); box-shadow: 0 12px 24px -12px rgba(11, 19, 38, 0.32); }
.v3-map-pp-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--v3-warm); margin-top: 6px; transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.24s ease; }
.v3-map-pp-item:hover .v3-map-pp-dot { transform: scale(1.4); box-shadow: 0 0 0 4px rgba(200, 150, 62, 0.18); }
.v3-map-pp-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v3-map-pp-item-name { font-family: var(--v3-fa); font-weight: 700; font-size: 15.5px; color: var(--v3-ink); line-height: 1.6; }
html[dir="ltr"] .v3-map-pp-item-name { font-family: var(--v3-sans); }
.v3-map-pp-item-meta { font-family: var(--v3-fa); font-size: 12.5px; color: var(--v3-ink-3); }
html[dir="ltr"] .v3-map-pp-item-meta { font-family: var(--v3-sans); }
.v3-map-pp-empty { margin: 16px 0 8px; font-family: var(--v3-fa); font-size: 14px; color: var(--v3-ink-2); line-height: 1.8; }
html[dir="ltr"] .v3-map-pp-empty { font-family: var(--v3-sans); }

/* ── Province overlay — frosted translucent panel that floats ON the map,
   shown only after a project-bearing province is clicked. ── */
.v3-map-overlay {
  position: absolute;
  inset-block: clamp(14px, 4%, 30px);
  inset-inline-start: clamp(14px, 3%, 30px);
  width: min(340px, 46%);
  z-index: 6;
  display: flex; flex-direction: column;
  padding: 22px 22px 16px;
  border-radius: 18px;
  background: linear-gradient(158deg, rgba(16, 26, 48, 0.5), rgba(11, 19, 38, 0.4));
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
  backdrop-filter: blur(13px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--v3-warm);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  color: #fff; overflow: hidden;
  animation: v3-map-overlay-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes v3-map-overlay-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.v3-map-overlay-close {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.v3-map-overlay-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* light-on-dark overrides for the reused panel content */
.v3-map-overlay .v3-map-pp-name { color: #fff; }
.v3-map-overlay .v3-map-pp-count { color: rgba(255, 255, 255, 0.72); }
.v3-map-overlay .v3-map-pp-item { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.v3-map-overlay .v3-map-pp-item:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(200, 150, 62, 0.55); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.55); }
.v3-map-overlay .v3-map-pp-item-name { color: #fff; }
.v3-map-overlay .v3-map-pp-item-meta { color: rgba(255, 255, 255, 0.62); }
.v3-map-overlay .v3-map-pp-dot { box-shadow: 0 0 0 3px rgba(200, 150, 62, 0.18); }
.v3-map-overlay .v3-map-pp-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
.v3-map-overlay .v3-map-pp-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); }
@media (max-width: 600px) {
  .v3-map-overlay { inset-inline: 10px; width: auto; inset-block: auto; bottom: 12px; max-height: 62%; }
}
@media (max-width: 860px) {
  .v3-map-stage { display: block; }
  .v3-map-sidecol-wrap { display: none; }
  .v3-map-stage .v3-map-wrap { max-width: 920px; margin: 0 auto; }
  /* Reveal every province on touch. Provinces with projects stay tappable and
     open the on-map overlay; empty provinces do not capture taps. The marker
     layer paints above the province paths, so individual pins remain tappable. */
  .v3-map-provs .v3-prov {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .v3-map-provs .v3-prov.has-proj { pointer-events: auto !important; }
}

/* City labels above markers */
.v3-map-label {
  font-family: var(--v3-sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--v3-teal-deep);
  text-anchor: middle;
  pointer-events: none;
  opacity: 0.62;
  transition: opacity 0.25s ease, fill 0.25s ease;
  paint-order: stroke;
  stroke: var(--v3-cream);
  stroke-width: 4;
  stroke-linejoin: round;
}
.v3-map-label.is-hover { opacity: 1; fill: var(--v3-teal); }
html[dir="rtl"] .v3-map-label { font-family: var(--v3-fa); font-weight: 700; font-size: 16px; }

/* Gold pulsing markers — purely visual dots on DESKTOP (NOT clickable; the
   province is the click target, then pick a project from the side column). */
/* Pins are interactive on every viewport: hover shows the project name (tooltip)
   and clicking zooms to it. (Was pointer-events:none on desktop, which silently
   killed marker hover/click there.) */
.v3-map-marker { pointer-events: auto; cursor: pointer; }
/* Halo: a faint STATIC glow (no per-marker infinite animation — with ~190
   markers, 190 looping animations pinned the GPU and made the map sluggish).
   Only the hovered/active marker pulses (rule below), so the effect stays
   where it matters without the constant cost. */
.v3-map-marker .halo {
  fill: var(--v3-warm);
  opacity: 0.14;
  transform-origin: center;
  transform-box: fill-box;
}
.v3-map-marker:hover .halo,
.v3-map-marker.is-hover .halo {
  animation: v3-map-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.v3-map-marker .ring {
  fill: none;
  stroke: var(--v3-warm);
  stroke-width: 1.5;
  opacity: 0.7;
  transition: opacity 0.25s ease, stroke-width 0.25s ease;
}
.v3-map-marker.is-approx .ring { stroke-dasharray: 3 2; }
.v3-map-marker.is-approx .dot { opacity: 0.82; }
.v3-map-marker .dot {
  fill: var(--v3-warm);
  stroke: #fff;
  stroke-width: 1.5;
  transition: fill 0.25s ease, r 0.25s ease;
  /* drop-shadow removed: ~190 per-dot SVG filters were a heavy paint cost; the
     white stroke already separates the dot from the map. */
}
.v3-map-marker:hover .ring,
.v3-map-marker.is-hover .ring { opacity: 1; stroke-width: 2; }
.v3-map-marker:hover .dot,
.v3-map-marker.is-hover .dot { fill: var(--v3-teal); }
@keyframes v3-map-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(3.4); opacity: 0; }
}
/* Ongoing projects — live GREEN pins that keep pulsing; completed stay gold. */
.v3-map-marker.is-ongoing .dot { fill: #1FAE67; }
.v3-map-marker.is-ongoing .ring { stroke: #1FAE67; }
.v3-map-marker.is-ongoing .halo { fill: #1FAE67; animation: v3-map-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.v3-map-marker.is-ongoing:hover .dot,
.v3-map-marker.is-ongoing.is-hover .dot { fill: #14804C; }
@media (prefers-reduced-motion: reduce) {
  .v3-map-marker .halo, .v3-map-marker.is-ongoing .halo { animation: none; }
}

/* Legend */
.v3-map-legend {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  border-radius: 999px;
}
html[dir="rtl"] .v3-map-legend { font-family: var(--v3-fa); letter-spacing: 0; }
.v3-map-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.v3-map-legend-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--v3-warm);
  box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.18);
}
.v3-map-legend-dot.is-ongoing { background: #1FAE67; box-shadow: 0 0 0 4px rgba(31, 174, 103, 0.2); }
.v3-map-legend-dot.is-approx { background: transparent; border: 2px dashed var(--v3-warm); box-shadow: none; }

/* Hover tooltip (fixed, follows the marker) */
/* Small, see-through hover chip: just the project name (+ location), floating
   over the map. Frosted-translucent so the map reads through it. */
.v3-map-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(13, 21, 40, 0.42);
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
  backdrop-filter: blur(5px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  max-width: 220px;
  text-align: center;
}
.v3-map-tip-name {
  font-family: var(--v3-serif); font-size: 13.5px; line-height: 1.4; font-weight: 600;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
html[dir="rtl"] .v3-map-tip-name { font-family: var(--v3-fa); font-weight: 700; font-size: 13px; line-height: 1.65; }
.v3-map-tip-loc { font-size: 11px; color: rgba(255, 255, 255, 0.72); margin-top: 1px; }
html[dir="rtl"] .v3-map-tip-loc { font-family: var(--v3-fa); }
.v3-map-tip-approx { margin-top: 2px; font-size: 10px; color: rgba(255, 255, 255, 0.72); }
html[dir="rtl"] .v3-map-tip-approx { font-family: var(--v3-fa); }

@media (max-width: 640px) {
  .v3-map-label { font-size: 18px; }
  .v3-map-tip { min-width: 180px; }
}

/* Zoom group: the transform is set via the SVG `transform` attribute
 * (not CSS) because some browsers don't honour CSS `transform` on
 * `<g>` elements consistently. The zoom is a snap (no transition);
 * the side panel sliding in provides the visual continuity. */
.v3-map-zoomable { transform-origin: 0 0; }

/* Active marker — keep its own gold (completed) / green (ongoing) identity.
 * The 3× zoom + the side panel already make it the obvious focus, and every
 * OTHER marker is hidden while zoomed, so it has nothing to contrast against.
 * It used to flip to teal/navy, which read as a stray navy dot on the map. */
.v3-map-marker.is-active .dot   { stroke-width: 2.5; }
.v3-map-marker.is-active .ring  { opacity: 1; stroke-width: 2; }
.v3-map-label.is-active         { opacity: 1; }

/* While a project is zoomed-in (panel open) we declutter the canvas:
 * city labels would blow up to 45 px and the marker halo pulse to a
 * 70-px disc, both bleeding over the detail panel. Hide them so the
 * map reads cleanly and the panel stays the focus.
 *
 * `visibility: hidden` is used in place of `opacity: 0` because the
 * latter doesn't always take effect on SVG <text> in some renderers
 * — visibility is unambiguous and removes the element from painting. */
.v3-map-svg.is-zoomed .v3-map-label { visibility: hidden !important; }
.v3-map-svg.is-zoomed .v3-map-marker .halo { animation: none !important; visibility: hidden !important; }
.v3-map-svg.is-zoomed .v3-map-marker .ring { stroke-width: 1.2; }
.v3-map-svg.is-zoomed .v3-map-marker .dot  { stroke-width: 1.5; }
/* Markers that aren't the active one drift off-screen during the zoom
 * anyway, but on the off-chance some land at the edge, hide them. */
.v3-map-svg.is-zoomed .v3-map-marker:not(.is-active) { visibility: hidden; pointer-events: none; }

/* Reset / "zoom out" button (top-right corner of the map) */
.v3-map-reset {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line-2);
  color: var(--v3-ink-2);
  font-family: var(--v3-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  box-shadow: 0 8px 20px -10px rgba(11, 19, 38, 0.3);
}
html[dir="rtl"] .v3-map-reset { font-family: var(--v3-fa); font-weight: 700; font-size: 13px; }
.v3-map-reset.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.v3-map-reset:hover { background: var(--v3-teal); color: #fff; border-color: var(--v3-teal); }

/* Backdrop dims the map while the side panel is open */
/* Backdrop + side panel are anchored to the VIEWPORT (position: fixed)
 * rather than the map's own bounding box. The map is a normal
 * homepage section that may scroll partly off-screen; anchoring the
 * panel to the wrap would cut its content off (the user saw the
 * "view full project" button below the viewport). Fixed positioning
 * keeps the panel and the dimmer visible no matter where the user is
 * on the page. */
.v3-map-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;   /* keep the map visible behind the panel */
  z-index: 60;
  cursor: pointer;
}

/* Full-width detail panel that slides up from the bottom (photo left, info
   right). Collapsed = compact + translucent (the map shows through) and NOT
   scrollable; "More details" expands it to 75vh, more opaque, scrollable. */
.v3-map-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  min-height: 44vh; max-height: 94vh; /* JS sets min-height to grow it on expand */
  z-index: 65;
  background: rgba(255, 255, 255, 0.28);   /* JS controls background-color (collapsed .28 / expanded .9) */
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  backdrop-filter: blur(26px) saturate(1.45);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -26px 72px -28px rgba(11, 19, 38, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: min-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.55s ease, box-shadow 0.55s ease;
}
.v3-map-panel.is-expanded {
  box-shadow: 0 -32px 96px -30px rgba(11, 19, 38, 0.5);
}

.v3-map-panel-photo {
  position: relative;
  flex: 0 0 clamp(200px, 34%, 360px);
  align-self: stretch;
  background: var(--v3-cream-2);
  overflow: hidden;
}
/* On phones the horizontal bar is too tight — stack it as a bottom sheet. */
.v3-map-panel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-map-panel-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 19, 38,0) 50%, rgba(11, 19, 38,0.6) 100%);
}
.v3-map-panel-tag {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--v3-teal);
  padding: 5px 12px;
  font-family: var(--v3-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 2;
}
html[dir="rtl"] .v3-map-panel-tag { font-family: var(--v3-fa); letter-spacing: 0.03em; text-transform: none; font-size: 12px; }
.v3-map-panel-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--v3-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.v3-map-panel-close:hover { background: var(--v3-teal); color: #fff; }

.v3-map-panel-body {
  padding: 22px 26px;
  flex: 1;
  min-width: 0;
  overflow: hidden;            /* collapsed: not scrollable */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3-map-panel.is-expanded .v3-map-panel-body { overflow-y: auto; }
.v3-map-panel-name {
  font-family: var(--v3-serif);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0;
  text-wrap: balance;
}
html[dir="rtl"] .v3-map-panel-name { font-family: var(--v3-fa); font-weight: 800; font-size: 18px; line-height: 1.45; }
.v3-map-panel-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--v3-ink-3);
}
html[dir="rtl"] .v3-map-panel-loc { font-family: var(--v3-fa); font-size: 13.5px; }
.v3-map-panel-loc svg { color: var(--v3-teal); }

.v3-map-panel-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
  margin: 0;
}
.v3-map-panel-meta > div { display: flex; flex-direction: column; gap: 2px; }
.v3-map-panel-meta dt {
  font-family: var(--v3-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  margin: 0;
}
html[dir="rtl"] .v3-map-panel-meta dt { font-family: var(--v3-fa); letter-spacing: 0.03em; text-transform: none; font-size: 11.5px; font-weight: 600; }
.v3-map-panel-meta dd {
  font-family: var(--v3-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 0;
}
html[dir="rtl"] .v3-map-panel-meta dd { font-family: var(--v3-fa); font-weight: 700; font-size: 13.5px; }

.v3-map-panel-desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--v3-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-map-panel-desc.is-full { display: block; -webkit-line-clamp: unset; overflow: visible; }
html[dir="rtl"] .v3-map-panel-desc { font-family: var(--v3-fa); font-size: 12.5px; line-height: 1.95; }
.v3-map-panel-desc p { margin: 0 0 8px; }

.v3-map-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--v3-teal);
  color: #fff;
  font-family: var(--v3-sans);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.v3-map-panel-cta:hover { background: var(--v3-teal-deep); }
html[dir="rtl"] .v3-map-panel-cta { font-family: var(--v3-fa); font-weight: 700; font-size: 14.5px; }

/* Actions row (More details + View full project) pinned to the panel bottom */
.v3-map-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }
.v3-map-panel-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--v3-line-2, #c8cdd6); color: var(--v3-ink);
  font-family: var(--v3-sans); font-size: 13px; font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}
html[dir="rtl"] .v3-map-panel-more { font-family: var(--v3-fa); font-weight: 700; }
.v3-map-panel-more:hover { background: rgba(20, 33, 61, 0.05); border-color: var(--v3-teal); }
/* Extra details (only when expanded) */
.v3-map-panel-meta-extra { margin-top: 2px; }
.v3-map-panel-scope-title { font-family: var(--v3-fa); font-weight: 700; font-size: 13px; color: var(--v3-ink); margin-bottom: 8px; }
html[dir="ltr"] .v3-map-panel-scope-title { font-family: var(--v3-sans); }
.v3-map-panel-scope ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.v3-map-panel-scope li { position: relative; padding-inline-start: 16px; font-size: 12.5px; line-height: 1.6; color: var(--v3-ink-2); }
html[dir="rtl"] .v3-map-panel-scope li { font-family: var(--v3-fa); }
.v3-map-panel-scope li::before { content: '◆'; position: absolute; inset-inline-start: 0; top: 3px; color: var(--v3-warm); font-size: 8px; }

@media (max-width: 720px) {
  .v3-map-panel { flex-direction: column; max-height: 94vh; }
  .v3-map-panel.is-expanded .v3-map-panel-body { overflow-y: auto; }
  .v3-map-panel-photo { flex: 0 0 auto; aspect-ratio: 16 / 10; }
  .v3-map-panel-scope ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-map-zoomable { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   PROJECTS TIMELINE  (#/projects)
   ════════════════════════════════════════════════════════════════ */
.v3-timeline-hero {
  padding: 28px 0 8px;
}
.v3-timeline-h1 {
  font-family: var(--v3-serif);
  font-size: clamp(46px, 6.5vw, 92px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--v3-ink);
  margin: 14px 0 28px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.v3-timeline-h1 em { font-style: italic; color: var(--v3-teal); font-weight: 400; }
html[dir="rtl"] .v3-timeline-h1 {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.25;
}
html[dir="rtl"] .v3-timeline-h1 em { font-style: normal; }
.v3-timeline-hero p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--v3-ink-2);
  max-width: 720px;
  margin: 0;
}
html[dir="rtl"] .v3-timeline-hero p {
  font-family: var(--v3-fa);
  font-size: 15.5px;
  line-height: 2.1;
}

/* Stats strip — four big numbers framing the decades of work */
.v3-timeline-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 44px 0 32px;
  padding: 30px 0;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
.v3-tl-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: 28px;
  border-inline-end: 1px solid var(--v3-line);
}
.v3-tl-stat:last-child { border-inline-end: none; }
.v3-tl-stat-num {
  font-family: var(--v3-serif);
  font-size: 60px;
  line-height: 1;
  font-weight: 500;
  color: var(--v3-teal);
  letter-spacing: -0.02em;
}
html[dir="rtl"] .v3-tl-stat-num {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: 50px;
}
.v3-tl-stat-lbl {
  font-family: var(--v3-sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v3-ink-3);
  font-weight: 600;
}
html[dir="rtl"] .v3-tl-stat-lbl {
  font-family: var(--v3-fa);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}

/* Filter pills (the existing pills get a count badge in timeline mode) */
.v3-tl-filter-count {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(11, 19, 38, 0.08);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
html[dir="rtl"] .v3-tl-filter-count { font-family: var(--v3-fa); letter-spacing: 0; font-size: 12px; }
.v3-archive-filter.active .v3-tl-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Decade rail — a vertical teal line with circular markers anchoring
 * each decade section. Heading + project grid sit to the trailing
 * side of the rail (right in RTL, left in LTR via inline-start). */
.v3-timeline-rail {
  position: relative;
  padding-inline-start: 44px;
  padding-block-start: 24px;
  margin-top: 28px;
}
.v3-timeline-rail::before {
  content: '';
  position: absolute;
  inset-inline-start: 19px;
  top: 48px; bottom: 60px;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(20, 33, 61, 0.55) 0%,
    rgba(20, 33, 61, 0.45) 60%,
    rgba(20, 33, 61, 0.08) 100%);
}

.v3-timeline-decade {
  position: relative;
  padding-block: 24px 64px;
}
.v3-timeline-decade-head {
  position: relative;
  margin-bottom: 26px;
}
.v3-timeline-decade-marker {
  position: absolute;
  inset-inline-start: -36px;
  top: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--v3-cream);
  border: 3px solid var(--v3-teal);
  box-shadow: 0 0 0 5px var(--v3-cream);
}
.v3-timeline-decade-marker::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--v3-teal);
}
.v3-timeline-decade-num {
  font-family: var(--v3-serif);
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 500;
  color: var(--v3-ink);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 8px;
}
html[dir="rtl"] .v3-timeline-decade-num {
  font-family: var(--v3-fa);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px);
}
.v3-timeline-decade-range {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.v3-timeline-decade-sh {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--v3-teal);
  letter-spacing: 0.05em;
  font-weight: 700;
}
html[dir="rtl"] .v3-timeline-decade-sh {
  font-family: var(--v3-fa);
  font-size: 14.5px;
  letter-spacing: 0;
}
.v3-timeline-decade-greg {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--v3-ink-3);
  letter-spacing: 0.05em;
}
.v3-timeline-decade-count {
  font-family: var(--v3-sans);
  font-size: 13px;
  color: var(--v3-ink-3);
  font-weight: 500;
  letter-spacing: 0.04em;
}
html[dir="rtl"] .v3-timeline-decade-count {
  font-family: var(--v3-fa);
  font-size: 13.5px;
  letter-spacing: 0;
}

.v3-timeline-grid {
  padding-bottom: 0 !important;
}

/* Responsive */
@media (max-width: 980px) {
  .v3-timeline-stats { grid-template-columns: repeat(2, 1fr); border: 1px solid var(--v3-line); border-radius: 12px; padding: 0; }
  .v3-tl-stat { padding: 22px 18px; border-inline-end: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); }
  .v3-tl-stat:nth-child(2n) { border-inline-end: none; }
  .v3-tl-stat:nth-last-child(-n+2) { border-bottom: none; }
  .v3-tl-stat-num { font-size: 46px; }
  html[dir="rtl"] .v3-tl-stat-num { font-size: 38px; }
}
@media (max-width: 640px) {
  .v3-timeline-rail { padding-inline-start: 36px; }
  .v3-timeline-rail::before { inset-inline-start: 15px; }
  .v3-timeline-decade-marker { inset-inline-start: -30px; width: 22px; height: 22px; }
  .v3-timeline-decade-num { font-size: 34px; }
  html[dir="rtl"] .v3-timeline-decade-num { font-size: 26px; }
  .v3-timeline-h1 { font-size: 38px; }
  html[dir="rtl"] .v3-timeline-h1 { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════
   STAFF LAUNCHPAD (/userlogin) — unlinked sign-in + tiles for the
   company's other internal systems.
   ════════════════════════════════════════════════════════════════ */
.v3-portal {
  min-height: 100vh;
  background: var(--v3-cream);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 150px var(--v3-gutter) 90px;
}
.v3-portal-inner { width: 100%; max-width: 880px; }

.v3-portal-head { text-align: center; margin-bottom: 34px; }
.v3-portal-emblem { width: 92px; height: auto; margin: 0 auto 20px; display: block; }
.v3-portal-head h1 {
  font-family: var(--v3-serif); font-size: clamp(28px, 4vw, 42px);
  font-weight: 500; color: var(--v3-teal); margin: 0 0 10px;
}
html[dir="rtl"] .v3-portal-head h1 { font-family: var(--v3-fa); font-weight: 700; }
.v3-portal-head p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--v3-ink-2); }
html[dir="rtl"] .v3-portal-head p { font-family: var(--v3-fa); }

.v3-portal-card {
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 24px 60px -34px rgba(20, 33, 61, 0.28);
}
.v3-portal-login { max-width: 430px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.v3-portal-login .v3-btn { justify-content: center; margin-top: 4px; }
.v3-portal-login .v3-btn[disabled] { opacity: 0.6; cursor: default; }
.v3-portal-hint { margin: 0; font-size: 12.5px; color: var(--v3-ink-3); text-align: center; }
html[dir="rtl"] .v3-portal-hint { font-family: var(--v3-fa); }
.v3-portal-checking, .v3-portal-empty {
  max-width: 560px; margin: 0 auto; text-align: center;
  font-size: 14.5px; line-height: 1.9; color: var(--v3-ink-2);
}
html[dir="rtl"] .v3-portal-checking, html[dir="rtl"] .v3-portal-empty { font-family: var(--v3-fa); }

.v3-portal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.v3-portal-who { font-size: 14.5px; color: var(--v3-ink-2); }
html[dir="rtl"] .v3-portal-who { font-family: var(--v3-fa); }
.v3-portal-who strong { color: var(--v3-teal); font-weight: 700; }
.v3-portal-logout {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--v3-line-2);
  border-radius: 999px; padding: 8px 18px;
  font-family: inherit; font-size: 13px; color: var(--v3-ink-2);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.v3-portal-logout:hover { border-color: var(--v3-teal); color: var(--v3-teal); background: rgba(20, 33, 61, 0.04); }

.v3-portal-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.v3-portal-tile {
  display: flex; align-items: center; gap: 16px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  padding: 20px 22px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.v3-portal-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 150, 62, 0.5);
  box-shadow: 0 26px 54px -30px rgba(20, 33, 61, 0.4);
}
.v3-portal-tile-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: rgba(200, 150, 62, 0.12);
}
.v3-portal-tile-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-portal-tile-title { font-size: 15.5px; font-weight: 600; color: var(--v3-teal); }
html[dir="rtl"] .v3-portal-tile-title { font-family: var(--v3-fa); font-weight: 700; }
.v3-portal-tile-desc {
  font-size: 13px; line-height: 1.7; color: var(--v3-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[dir="rtl"] .v3-portal-tile-desc { font-family: var(--v3-fa); }
.v3-portal-tile-host {
  font-family: var(--v3-sans); font-size: 11.5px; color: var(--v3-ink-3);
  direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-portal-tile svg { flex: 0 0 auto; color: var(--v3-warm); }

@media (max-width: 640px) {
  .v3-portal { padding: 120px 20px 60px; }
  .v3-portal-card { padding: 22px; border-radius: 12px; }
  .v3-portal-tile { padding: 16px; gap: 12px; }
}