/* ============================================
   GWC — Premium Design System v3.0
   Production-ready refinement pass
   ============================================ */

@import url('fonts-local.css');

/* ══════════════════════════════════════════════
   1. DESIGN TOKENS — Refined & Systematic
   Palette derived from official GWC posters:
   Dusty Rose · Deep Teal · Warm Cream · Dome Gold
   ══════════════════════════════════════════════ */
:root {
  /* ── Rose (PRIMARY — warmth, femininity, solidarity) ── */
  --rose-50:  #FDF4F7;
  --rose-100: #F9E1E9;
  --rose-200: #F0BFD0;
  --rose-300: #E29CB4;
  --rose-400: #D17C99;
  --rose-500: #B85B7A;   /* brand primary */
  --rose-600: #9C4564;
  --rose-700: #7E3450;
  --rose-glow: rgba(184, 91, 122, .12);
  --rose-soft: rgba(184, 91, 122, .06);

  /* ── Teal (SECONDARY — depth, dignity) ── */
  --teal-50:  #EDF5F7;
  --teal-100: #D1E5E9;
  --teal-200: #A0C4CB;
  --teal-300: #6FA3AE;
  --teal-400: #3F8290;
  --teal-500: #2D7B8E;
  --teal-600: #1E5A6E;   /* dark heading bg */
  --teal-700: #154655;
  --teal-800: #0F3441;
  --teal-900: #0A2630;
  --teal-glow: rgba(30, 90, 110, .10);

  /* ── Cream/Sand (warm backgrounds) ── */
  --cream-50:  #FCF8F2;
  --cream-100: #FAF5EC;
  --cream-200: #F4ECE0;
  --cream-300: #EBDFCC;
  --cream-400: #DDC9AC;

  /* ── Sage (subtle accent) ── */
  --sage-200: #D4E3DF;
  --sage-300: #B9D2CC;
  --sage-500: #8FAFA8;

  /* ── Legacy aliases (keep working — redirected to new palette) ── */
  --midnight: var(--teal-900);
  --navy: var(--teal-700);
  --deep: var(--teal-600);
  --steel: var(--teal-500);
  --ocean: var(--teal-500);
  --sky: var(--teal-300);
  --ice: var(--teal-100);
  --frost: var(--cream-100);
  --cloud: var(--cream-50);

  /* ── Gold (sacred accent — used sparingly, Dome of the Rock) ── */
  --gold: #D4A44C;
  --gold-light: #E8C97E;
  --gold-bright: #F0D99A;
  --gold-dark: #B8863A;
  --gold-glow: rgba(212, 164, 76, .12);

  /* ── Rose legacy aliases ── */
  --rose: var(--rose-400);
  --rose-light: var(--rose-200);

  /* ── Neutrals — warm-tinted (slight rose undertone for warmth) ── */
  --white: #FFFFFF;
  --off-white: #FCFAF7;
  --gray-50: #F7F4F0;
  --gray-100: #EDE8E1;
  --gray-200: #D7CFC5;
  --gray-300: #ADA39A;
  --gray-400: #7E7468;
  --gray-500: #58504A;
  /* WCAG AA on white for body text */
  --gray-600: #423B36;
  --gray-700: #2E2925;
  /* primary body text */
  --gray-800: #1B1816;
  --gray-900: #0F0D0C;
  --black: #060504;

  /* ── Semantic ── */
  --success: #2DA87A;
  --error: #D94444;

  /* ── Brand semantic shortcuts ── */
  --brand-primary: var(--rose-500);
  --brand-primary-dark: var(--rose-600);
  --brand-secondary: var(--teal-600);
  --brand-accent: var(--gold);
  --brand-bg-warm: var(--cream-100);
  --brand-bg-deep: var(--teal-800);
  --shadow-brand: 0 4px 20px rgba(184, 91, 122, .18);
  --shadow-teal: 0 4px 20px rgba(30, 90, 110, .15);

  /* ══ TYPOGRAPHY — Proper scale with line-heights ══ */
  --font-heading: 'Playfair Display', 'Noto Kufi Arabic', serif;
  --font-body: 'Poppins', 'IBM Plex Sans Arabic', sans-serif;
  --font-display: 'Poppins', 'IBM Plex Sans Arabic', sans-serif;

  /*
   * Type scale: Minor Third (1.2) with custom hero sizes
   * Each step has: size / line-height / letter-spacing
   */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px — refined from 14px for labels */
  --text-base: 0.9375rem;
  /* 15px — optimal body for Arabic + Latin */
  --text-md: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.3125rem;
  /* 21px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.375rem;
  /* 38px */
  --text-5xl: clamp(2.5rem, 4vw, 3.25rem);
  /* 40-52px */
  --text-6xl: clamp(2.75rem, 5.5vw, 3.86rem);
  /* 44-64px */
  --text-7xl: clamp(3rem, 6.5vw, 5rem);
  /* 48-80px */

  /* Line-heights per context */
  --lh-tight: 1.15;
  /* hero titles, display */
  --lh-heading: 1.25;
  /* h2, h3 */
  --lh-snug: 1.4;
  /* h4, card titles */
  --lh-body: 1.75;
  /* body copy */
  --lh-loose: 1.9;
  /* Arabic paragraph text (needs more) */

  /* Letter-spacing */
  --ls-tight: -0.025em;
  /* large headings */
  --ls-normal: 0;
  --ls-wide: 0.02em;
  /* buttons, meta */
  --ls-wider: 0.06em;
  /* eyebrow, labels */
  --ls-widest: 0.12em;
  /* all-caps labels */

  /* ══ SPACING — strict 4px base, 8px rhythm ══ */
  --sp-0: 0;
  --sp-1: 0.25rem;
  /*  4px */
  --sp-2: 0.5rem;
  /*  8px */
  --sp-3: 0.75rem;
  /* 12px */
  --sp-4: 1rem;
  /* 16px */
  --sp-5: 1.25rem;
  /* 20px */
  --sp-6: 1.5rem;
  /* 24px */
  --sp-7: 1.75rem;
  /* 28px */
  --sp-8: 2rem;
  /* 32px */
  --sp-10: 2.5rem;
  /* 40px */
  --sp-12: 3rem;
  /* 48px */
  --sp-14: 3.5rem;
  /* 56px */
  --sp-16: 4rem;
  /* 64px */
  --sp-20: 5rem;
  /* 80px */
  --sp-24: 6rem;
  /* 96px */
  --sp-32: 8rem;
  /* 128px */

  /* ── Radius ── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Shadows — refined depth scale ── */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-sm: 0 1px 4px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
  --sh-md: 0 2px 6px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --sh-lg: 0 4px 12px rgba(0, 0, 0, .04), 0 16px 48px rgba(0, 0, 0, .08);
  --sh-xl: 0 8px 20px rgba(0, 0, 0, .05), 0 32px 64px rgba(0, 0, 0, .10);
  --sh-glow: 0 0 40px rgba(90, 156, 192, .10);
  --sh-gold: 0 4px 20px rgba(212, 164, 76, .20);
  --sh-blue: 0 4px 20px rgba(59, 107, 138, .18);

  /* ── Blue semantic tokens for consistent usage ── */
  --blue-glow: rgba(59, 107, 138, .08);
  --blue-border: rgba(59, 107, 138, .12);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .15s var(--ease-out);
  --t-base: .25s var(--ease-out);
  --t-medium: .4s var(--ease-expo);
  --t-slow: .6s var(--ease-expo);

  /* ── Layout ── */
  --max-w: 1280px;
  --max-narrow: 720px;
  --max-wide: 1440px;
  --header-h: 72px;
  --section-py: clamp(80px, 10vw, 120px);
  --section-py-sm: clamp(56px, 7vw, 80px);

  /* ── Z-index ── */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-lightbox: 500;
}

/* ── RTL font swap ── */
[dir="rtl"] {
  --font-body: 'IBM Plex Sans Arabic', 'Poppins', sans-serif;
  --font-heading: 'Noto Kufi Arabic', 'Playfair Display', sans-serif;
  --font-display: 'Noto Kufi Arabic', 'Poppins', sans-serif;
  --lh-body: 1.8;
  --lh-loose: 1.95;
  --lh-heading: 1.3;
  --lh-tight: 1.2;
}


/* ══════════════════════════════════════════════
   2. RESET & BASE — Accessibility-first
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; */
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Arabic body — naturally heavier strokes, keep at 400 */
[dir="rtl"] body {
  font-weight: 400;
}

/* Reduced motion — respect user accessibility setting */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t-base);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* Focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}


/* ══════════════════════════════════════════════
   3. LAYOUT
   ══════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-5), 4vw, var(--sp-8));
}

.container--narrow {
  max-width: var(--max-narrow);
}

.container--wide {
  max-width: var(--max-wide);
}

.section {
  padding-block: var(--section-py);
  position: relative;
}


/* ══════════════════════════════════════════════
   4. TYPOGRAPHY SYSTEM
   ══════════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--navy);
}

p {
  max-width: 68ch;
}

/* optimal reading width */

/* ── Eyebrow ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--rose-500);
  margin-bottom: var(--sp-5);
}

.eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--rose-400);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Section heading ── */
.section-heading {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}

/* ── Section description ── */
.section-desc {
  font-size: var(--text-md);
  color: var(--steel);
  max-width: 52ch;
  line-height: var(--lh-body);
}

.section-header {
  margin-bottom: var(--sp-14);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-desc {
  margin-inline: auto;
}

.section-header--center .eyebrow {
  justify-content: center;
}

.section-header--center .eyebrow::after {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--rose-400);
  border-radius: 2px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   5. BUTTONS — Refined hierarchy
   ══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 32px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-full);
  transition: all var(--t-base);
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}

.btn i {
  font-size: .95em;
  transition: transform var(--t-base);
  flex-shrink: 0;
}

/* Primary = Rose (brand primary) */
.btn--gold {
  background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-600) 100%);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(184, 91, 122, .30);
  filter: brightness(1.06);
}

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

/* New: dedicated rose button (semantic) */
.btn--rose {
  background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-600) 100%);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}

.btn--rose:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(184, 91, 122, .30);
  filter: brightness(1.06);
}
.btn--rose i{
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}
/* Real gold button — for "sacred" CTAs (Dome of the Rock theme) */
.btn--gold-pure {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--white);
  box-shadow: var(--sh-gold);
}

.btn--gold-pure:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(212, 164, 76, .30);
  filter: brightness(1.06);
}

/* White (on dark) */
.btn--white {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--sh-sm);
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Outline White (on dark backgrounds) */
.btn--outline-white {
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: var(--white);
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .06);
}

.btn--outline-white:hover {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}

/* Dark solid */
.btn--dark {
  background: var(--navy);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--deep);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Outline (on light backgrounds) */
.btn--outline {
  border: 1.5px solid var(--gray-200);
  color: var(--gray-600);
}

.btn--outline:hover {
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
}

/* Sizes */
.btn--lg {
  padding: 18px 44px;
  font-size: var(--text-base);
  font-weight: 700;
}

.btn--sm {
  padding: 10px 22px;
  font-size: var(--text-xs);
}


/* ══════════════════════════════════════════════
   6. HEADER — Glass morphism with proper states
   ══════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: var(--z-header);
  transition: all .4s var(--ease-expo);
  background: linear-gradient(180deg, rgba(12, 27, 42, .35) 0%, transparent 100%);
}

/* Scrolled state */
.header--scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--blue-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
  height: 64px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-5), 4vw, var(--sp-8));
}

/* Logo — FIXED: was 110px which is way too tall */
.header__logo {
  display: flex;
  align-items: center;
  z-index: 10;
}

.header__logo img {
  height: 68px;
  width: auto;
  transition: height .3s var(--ease-expo);
}

.header__logo-dark {
  display: none;
}

.header--scrolled .header__logo-white {
  display: none;
}

.header--scrolled .header__logo-dark {
  display: block;
}

.header--scrolled .header__logo img {
  height: 68px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__link {
  padding: 8px 16px;
  font-weight: 500;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .8);
  border-radius: var(--r-sm);
  transition: all var(--t-base);
  position: relative;
}

.header--scrolled .nav__link {
  color: var(--gray-500);
}

.nav__link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .06);
}

.header--scrolled .nav__link:hover {
  color: var(--navy);
  background: var(--gray-50);
}

.nav__link--active {
  color: var(--white) !important;
  font-weight: 600;
}

.header--scrolled .nav__link--active {
  color: var(--navy) !important;
}

/* Active indicator — ocean underline (blue identity in nav) */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--sky);
  border-radius: 2px;
  transition: width var(--t-base);
}
.header--scrolled .nav__link::after {
  background: var(--ocean);
}

.nav__link--active::after,
.nav__link:hover::after {
  width: 20px;
}

/* Header search icon */
.header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .06);
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
  flex-shrink: 0;
}

.header__search:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

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

.header--scrolled .header__search {
  background: var(--cream-50);
  border-color: var(--rose-100);
  color: var(--teal-800);
}

.header--scrolled .header__search:hover {
  background: var(--rose-50);
  border-color: var(--rose-200);
  color: var(--rose-600);
}

/* Language switcher */
.lang-switcher {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .06);
}

.header--scrolled .lang-switcher {
  background: var(--gray-50);
  border-color: var(--gray-100);
}

.lang-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  border-radius: var(--r-full);
  transition: all var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header--scrolled .lang-btn {
  color: var(--gray-400);
}

.lang-btn--active {
  background: var(--rose-500) !important;
  color: var(--white) !important;
}

.lang-btn:hover:not(.lang-btn--active) {
  color: rgba(255, 255, 255, .9);
}

.header--scrolled .lang-btn:hover:not(.lang-btn--active) {
  color: var(--gray-700);
  background: var(--gray-100);
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  z-index: 10;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .3s var(--ease-expo);
  transform-origin: center;
}

.header--scrolled .menu-toggle span {
  background: var(--gray-700);
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* ══════════════════════════════════════════════
   7. HERO — Cinematic with proper hierarchy
   ══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--teal-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.55) saturate(1.05);
}

/* Layered gradient — warm rose + deep teal for emotional tone */
.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(15, 52, 65, .55) 0%, rgba(15, 52, 65, .15) 35%, rgba(15, 52, 65, .15) 55%, rgba(15, 52, 65, .92) 100%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184, 91, 122, .25), transparent 70%),
    radial-gradient(ellipse 50% 35% at 10% 90%, rgba(212, 164, 76, .12), transparent 70%);
}

/* Static atmospheric glow — replaces animated orbs (eye-comfort) */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 2;
  pointer-events: none;
}

.hero__orb--1 {
  width: 520px;
  height: 520px;
  background: var(--teal-400);
  top: -18%;
  right: -10%;
  opacity: .14;
}

.hero__orb--2 {
  width: 360px;
  height: 360px;
  background: var(--rose-500);
  bottom: -10%;
  left: 5%;
  opacity: .12;
}

.hero__orb--3 {
  width: 200px;
  height: 200px;
  background: var(--gold);
  top: 35%;
  right: 28%;
  opacity: .05;
}

/* Content */
.hero__content {
  position: relative;
  z-index: 5;
  max-width: 880px;
  padding-block: 140px 180px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 20px;
  background: rgba(184, 91, 122, .15);
  border: 1px solid rgba(229, 156, 180, .30);
  border-radius: var(--r-full);
  color: var(--rose-200);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  backdrop-filter: blur(8px);
  margin-bottom: var(--sp-8);
}

.hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose-300);
  animation: pulse-dot 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .4;
    transform: scale(.6);
  }
}

/* HERO TITLE — the most important typographic moment */
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-7xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-8);
}

.hero__title em {
  font-style: normal;
  color: var(--rose-200);
  position: relative;
}

.hero__title em::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--rose-400);
  border-radius: 3px;
  margin-top: var(--sp-2);
  opacity: .7;
}

[dir="rtl"] .hero__title em::after {
  margin-inline-start: 0;
}

.hero__desc {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, .72);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-10);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Stats strip at bottom */
.hero__stats-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: rgba(12, 27, 42, .45);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.hero__stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-5), 4vw, var(--sp-8));
}

.hero__stat {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-inline-end: 1px solid rgba(255, 255, 255, .05);
}

.hero__stat:last-child {
  border: none;
}

.hero__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--rose-200);
  line-height: 1;
  margin-bottom: var(--sp-1);
  letter-spacing: var(--ls-tight);
}

.hero__stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255, 255, 255, .28);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight: 600;
}

.hero__scroll-line {
  width: 1px;
  height: 44px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--rose-300);
  animation: scroll-line 2.2s ease-in-out infinite;
}

@keyframes scroll-line {
  0% {
    top: -50%;
  }

  100% {
    top: 150%;
  }
}


/* ══════════════════════════════════════════════
   8. CARD SYSTEM — Unified design language
   ══════════════════════════════════════════════ */

/* ── Events Section ── */
.events-section {
  background: var(--cloud);
}

/* Asymmetric showcase */
.events-showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-5);
}

/* Base event card */
.event-story {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease-expo), border-color .4s var(--ease-expo);
  border: 1px solid var(--gray-100);
}

.event-story:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(59, 107, 138, .18);
}

/* Hero card variant */
.event-story--hero {
  grid-row: span 2;
  min-height: 520px;
}

.event-story--hero .event-story__image {
  height: 100%;
}

/* Card image */
.event-story__image {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.event-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}

.event-story:hover .event-story__image img {
  transform: scale(1.04);
}

.event-story__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(12, 27, 42, .8) 100%);
  transition: opacity var(--t-base);
}

.event-story:hover .event-story__image-overlay {
  opacity: .9;
}

/* Tag badge */
.event-story__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 5px 14px;
  background: var(--rose-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  box-shadow: 0 2px 8px rgba(184, 91, 122, .30);
}

[dir="rtl"] .event-story__tag {
  left: auto;
  right: var(--sp-4);
}

/* Date chip */
.event-story__date-chip {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--white);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  box-shadow: var(--sh-sm);
  line-height: 1;
}

[dir="rtl"] .event-story__date-chip {
  right: auto;
  left: var(--sp-4);
}

.event-story__date-chip .day {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--navy);
}

.event-story__date-chip .month {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

/* Hero card: overlaid body */
.event-story--hero .event-story__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-8);
  color: var(--white);
  z-index: 2;
}

.event-story--hero .event-story__title {
  color: var(--white);
  font-size: var(--text-2xl);
}

.event-story--hero .event-story__meta-item {
  color: rgba(255, 255, 255, .55);
}

.event-story--hero .event-story__meta-item i {
  color: var(--gold-light);
}

.event-story--hero .event-story__link {
  color: var(--gold-light);
}

/* Card body */
.event-story__body {
  padding: var(--sp-6);
}

.event-story__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-story__title a:hover {
  color: var(--ocean);
}

.event-story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.event-story__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-400);
}

.event-story__meta-item i {
  color: var(--ocean);
  font-size: .8em;
}

.event-story__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-100);
}

.event-story__gallery-count {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-400);
}

.event-story__gallery-count i {
  color: var(--gold);
}

.event-story__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: var(--ls-wide);
}

.event-story__link i {
  font-size: .75em;
  transition: transform var(--t-base);
}

.event-story:hover .event-story__link i {
  transform: translateX(3px);
}

[dir="rtl"] .event-story:hover .event-story__link i {
  transform: translateX(-3px);
}

.events-cta {
  text-align: center;
  margin-top: var(--sp-14);
}


/* ══════════════════════════════════════════════
   9. MEDIA SECTION — Dark cinematic
   ══════════════════════════════════════════════ */
.media-section {
  background: var(--midnight);
  color: var(--white);
  overflow: hidden;
}

.media-section .section-heading {
  color: var(--white);
}

.media-section .section-desc {
  color: rgba(255, 255, 255, .58);
}

.media-section .eyebrow {
  color: var(--rose-200);
}

.media-section .eyebrow::before,
.media-section .eyebrow::after {
  background: rgba(229, 156, 180, .5);
}

/* Mosaic grid — featured card dominates */
.media-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: var(--sp-4);
}

.media-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease-expo);
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}

.media-card:hover img {
  transform: scale(1.04);
}

.media-card--featured {
  grid-row: span 2;
}

.media-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12, 27, 42, .82) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
  transition: background var(--t-medium);
}

.media-card:hover .media-card__overlay {
  background: linear-gradient(180deg, rgba(12, 27, 42, .1) 0%, rgba(12, 27, 42, .88) 100%);
}

.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
  transition: transform .4s var(--ease-spring);
}

.media-card__play i {
  color: var(--navy);
  font-size: 1.2rem;
  margin-inline-start: 3px;
}

.media-card:hover .media-card__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.media-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 4px 12px;
  background: rgba(184, 91, 122, .92);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

[dir="rtl"] .media-card__badge {
  left: auto;
  right: var(--sp-3);
}

.media-card__title {
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

.media-card__subtitle {
  color: rgba(255, 255, 255, .6);
  font-size: var(--text-xs);
}

/* ── Reels section header ── */
.reels-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-5);
}

.reels-heading {
  color: var(--rose-200);
  font-size: var(--text-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}
.reels-heading i { opacity: .5; font-size: .9em; }

/* Nav arrows */
.reels-nav-controls {
  display: flex;
  gap: var(--sp-2);
}
.reels-nav-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--t-base);
}
.reels-nav-btn:hover {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-color: rgba(255,255,255,.2);
}
.reels-nav-btn.swiper-button-disabled {
  opacity: .25;
  cursor: default;
}
.reels-nav-btn.swiper-button-disabled:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.1);
}

.reels-row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.reels-row::-webkit-scrollbar {
  display: none;
}

/* ── Swiper Reels Slider ── */
.reels-swiper {
  overflow: hidden;
  padding-bottom: var(--sp-4);
}
.reels-swiper .swiper-slide {
  width: 210px;
  height: auto;
}
.reels-swiper .reel-card {
  width: 100%;
}

/* Overrides for homepage reels (inside dark media-section) */
.media-section .reels-swiper {
  margin-inline: max(var(--sp-6), calc((100vw - var(--max-w)) / 2 + var(--sp-6)));
}

/* Overrides for media page reels (full-bleed) */
.media-reels-section .reels-swiper {
  padding-inline: max(var(--sp-6), calc((100vw - var(--max-w)) / 2 + var(--sp-6)));
}

@media (max-width: 768px) {
  .reels-swiper .swiper-slide { width: 170px; }
}
@media (max-width: 480px) {
  .reels-swiper .swiper-slide { width: 150px; }
}

.reel-card {
  flex: 0 0 180px;
  aspect-ratio: 9/16;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .3s var(--ease-expo);
}

.reel-card:hover {
  transform: scale(1.03);
}

.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
}

.reel-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease-spring);
}

.reel-card:hover .reel-card__play {
  transform: translate(-50%, -50%) scale(1.12);
}

.reel-card__title {
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
}

.reel-card__views {
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  margin-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.media-section .events-cta {
  margin-top: var(--sp-10);
}


/* ══════════════════════════════════════════════
   10. IMPACT — Counter section
   ══════════════════════════════════════════════ */
.impact-section {
  background: linear-gradient(145deg, var(--teal-700) 0%, var(--teal-800) 50%, var(--teal-900) 100%);
  position: relative;
  overflow: hidden;
}

.impact-section::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .14), transparent 70%);
}

.impact-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 164, 76, .08), transparent 70%);
  pointer-events: none;
}

.impact-section .section-heading {
  color: var(--white);
}

.impact-section .section-desc {
  color: rgba(255, 255, 255, .58);
}

.impact-section .eyebrow {
  color: var(--rose-200);
}

.impact-section .eyebrow::before,
.impact-section .eyebrow::after {
  background: rgba(229, 156, 180, .5);
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  position: relative;
  z-index: 2;
}

.impact-card {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid rgba(229, 156, 180, .14);
  border-radius: var(--r-xl);
  transition: all .35s var(--ease-expo);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.impact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose-400), transparent);
  opacity: .6;
}

.impact-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(160deg, rgba(184, 91, 122, .12) 0%, rgba(255, 255, 255, .04) 100%);
  border-color: rgba(229, 156, 180, .35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25), 0 0 0 1px rgba(229, 156, 180, .08);
}

.impact-card:hover::before {
  opacity: 1;
}

.impact-card__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(184, 91, 122, .22), rgba(184, 91, 122, .10));
  border-radius: var(--r-lg);
  font-size: 1.5rem;
  color: var(--rose-200);
  border: 1px solid rgba(229, 156, 180, .28);
  box-shadow: 0 4px 16px rgba(184, 91, 122, .18);
  transition: transform .35s var(--ease-spring);
}

.impact-card:hover .impact-card__icon {
  transform: scale(1.08) rotate(-3deg);
}

.impact-card__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 2px 12px rgba(184, 91, 122, .25);
}

.impact-card__label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .82);
  letter-spacing: var(--ls-wider);
  font-weight: 600;
}


/* ══════════════════════════════════════════════
   11. TIMELINE — Modern single-column
   ══════════════════════════════════════════════ */
.timeline-section {
  background: var(--white);
}

.timeline {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-inline-start: 40px;
}

/* Vertical accent line */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--ocean), var(--ice));
  border-radius: 2px;
}

.timeline__item {
  display: flex;
  gap: 0;
  position: relative;
  padding-bottom: var(--sp-8);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Marker column */
.timeline__marker {
  position: absolute;
  inset-inline-start: -40px;
  top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ocean);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.timeline__item:first-child .timeline__dot {
  width: 16px;
  height: 16px;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(59, 107, 138, .18);
}

/* Content card */
.timeline__content {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
  box-shadow: var(--sh-sm);
  transition: all .3s var(--ease-expo);
}

.timeline__content:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(59, 107, 138, .18);
}

.timeline__year {
  display: inline-block;
  padding: 4px 14px;
  background: var(--rose-50);
  color: var(--rose-600);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
  letter-spacing: var(--ls-wider);
  border: 1px solid var(--rose-100);
}

.timeline__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}

.timeline__desc {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: var(--lh-body);
}

.timeline__location {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--sp-3);
}

.timeline__location i {
  color: var(--ocean);
  font-size: .8em;
}


/* ══════════════════════════════════════════════
   12. STORIES / TESTIMONIALS
   ══════════════════════════════════════════════ */
.stories-section {
  background: var(--cloud);
  position: relative;
}

.stories-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.story-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  border: 1px solid var(--gray-100);
  transition: all .3s var(--ease-expo);
  display: flex;
  flex-direction: column;
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: rgba(59, 107, 138, .15);
}

.story-card__quote-icon {
  font-size: 2.2rem;
  color: var(--rose-400);
  margin-bottom: var(--sp-5);
  line-height: 1;
  opacity: .4;
}

.story-card__text {
  font-size: var(--text-base);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: auto;
  padding-bottom: var(--sp-6);
  font-style: italic;
}

.story-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--gray-100);
}

.story-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--frost), var(--ice));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--ocean);
  flex-shrink: 0;
}

.story-card__name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gray-800);
}

.story-card__role {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: 2px;
}


/* ══════════════════════════════════════════════
   13. GLOBAL PRESENCE
   ══════════════════════════════════════════════ */
.presence-section {
  background: var(--cream-50);
  position: relative;
  overflow: hidden;
}

.presence-section::before {
  content: '';
  position: absolute;
  bottom: -150px;
  inset-inline-start: -100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .08), transparent 70%);
  pointer-events: none;
}

.presence-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-14);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ── Presence Visual — photo-driven, layered glass ── */
.presence-visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-8);
  box-shadow: 0 24px 64px rgba(15, 52, 65, .30), 0 6px 18px rgba(184, 91, 122, .14);
  border: 1px solid rgba(229, 156, 180, .18);
  isolation: isolate;
}

.presence-visual__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.presence-visual__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.7) saturate(1.1);
  transition: transform 1.2s var(--ease-expo);
}

.presence-visual:hover .presence-visual__photo img {
  transform: scale(1.05);
}

.presence-visual__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(15, 52, 65, .65) 80%),
    linear-gradient(180deg, rgba(15, 52, 65, .30) 0%, rgba(15, 52, 65, .55) 50%, rgba(10, 38, 48, .92) 100%),
    linear-gradient(135deg, rgba(184, 91, 122, .20) 0%, transparent 60%);
}

/* Top chip */
.presence-visual__top {
  display: flex;
  justify-content: flex-start;
}

.presence-visual__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(229, 156, 180, .30);
  border-radius: var(--r-full);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.presence-visual__chip i {
  color: var(--gold-light);
  font-size: .9em;
}

/* Center stack */
.presence-visual__center {
  text-align: center;
  padding-block: var(--sp-6);
}

.presence-visual__counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) var(--sp-10);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(229, 156, 180, .22);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  margin-bottom: var(--sp-5);
}

.presence-visual__big {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 7rem);
  font-weight: 800;
  background: linear-gradient(135deg, #FCE5EC 0%, var(--rose-300) 60%, var(--rose-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  text-shadow: 0 4px 24px rgba(184, 91, 122, .35);
}

.presence-visual__big-label {
  display: block;
  color: rgba(255, 255, 255, .88);
  font-size: var(--text-md);
  margin-top: var(--sp-2);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

.presence-visual__quote {
  color: rgba(255, 255, 255, .80);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  font-style: italic;
  max-width: 28ch;
  margin: 0 auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-weight: 500;
}

/* Flags row */
.presence-visual__flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(229, 156, 180, .15);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.presence-visual__flags .fi {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 0 0 1.5px rgba(255, 255, 255, .25);
  transition: transform var(--t-base);
  cursor: default;
}

.presence-visual__flags .fi:hover {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 91, 122, .4), 0 0 0 2px rgba(229, 156, 180, .6);
}

@media (max-width: 1024px) {
  .presence-visual {
    min-height: 460px;
  }
}

@media (max-width: 480px) {
  .presence-visual {
    padding: var(--sp-6);
    min-height: 420px;
  }
  .presence-visual__counter {
    padding: var(--sp-5) var(--sp-8);
  }
}

.countries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.country-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  transition: all .25s var(--ease-out);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(184, 91, 122, .04);
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  position: relative;
}

.country-chip:hover {
  border-color: var(--rose-300);
  background: var(--rose-50);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .14);
  transform: translateY(-2px);
}

.country-chip.is-active {
  border-color: var(--rose-500);
  background: linear-gradient(135deg, var(--rose-50), rgba(212, 164, 76, .08));
  box-shadow: 0 8px 22px rgba(184, 91, 122, .22);
}

.country-chip.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--rose-500), var(--rose-600));
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
}

[dir="rtl"] .country-chip.is-active::before {
  border-radius: 2px 0 0 2px;
}

.country-chip.is-active .country-chip__name {
  color: var(--rose-600);
  font-weight: 700;
}


/* Stat block under the chips */
.countries-stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, rgba(184, 91, 122, .05), rgba(212, 164, 76, .03));
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
}

.countries-stat__num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.countries-stat__label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--teal-800);
}


/* ─── Presence Map (replaces presence-visual on homepage) ─── */
.presence-map {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--white) 0%, var(--cream-50) 100%);
  border: 1px solid var(--rose-100);
  box-shadow:
    0 24px 60px rgba(15, 52, 65, .10),
    0 4px 12px rgba(184, 91, 122, .06);
  padding: 4px;
  isolation: isolate;
}

.presence-map__canvas {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: calc(var(--r-2xl) - 6px);
  background: var(--cream-50);
  position: relative;
  z-index: 1;
}

.presence-map__canvas .leaflet-tile-pane {
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  filter: saturate(.7) hue-rotate(-8deg) contrast(.95) brightness(1.02);
}

.presence-map__canvas.is-ready .leaflet-tile-pane { opacity: 1; }

/* Theme-styled zoom controls */
.presence-map__canvas .leaflet-bar {
  border: 1px solid var(--rose-100);
  box-shadow: 0 6px 18px rgba(15, 52, 65, .10);
  border-radius: var(--r-md);
  overflow: hidden;
}
.presence-map__canvas .leaflet-bar a {
  background: var(--white);
  color: var(--teal-800);
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 700;
  border-bottom-color: var(--rose-100) !important;
  transition: background var(--t-base), color var(--t-base);
}
.presence-map__canvas .leaflet-bar a:hover {
  background: var(--rose-50);
  color: var(--rose-600);
}

/* Caption pill — top-right of map */
.presence-map__caption {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-800);
  box-shadow: 0 4px 14px rgba(15, 52, 65, .08);
  pointer-events: none;
}

.presence-map__caption i {
  color: var(--gold);
  font-size: 14px;
}

/* Custom markers reuse the world-map pin styles defined elsewhere
   (.map-pin, .map-pin__dot, .map-pin__pulse) — see Section 42 */

/* Popup styling — light, on-brand */
.presence-map__canvas .leaflet-popup-content-wrapper {
  background: var(--white);
  color: var(--teal-800);
  border-radius: 10px;
  border: 1px solid var(--rose-100);
  box-shadow: 0 10px 24px rgba(15, 52, 65, .15), 0 2px 6px rgba(184, 91, 122, .08);
  padding: 0;
}
.presence-map__canvas .leaflet-popup-content {
  margin: 8px 12px;
  font-family: var(--font-heading);
  line-height: 1.3;
}
.presence-map__canvas .leaflet-popup-tip {
  background: var(--white);
  box-shadow: -1px 1px 0 var(--rose-100);
}

@media (max-width: 1024px) {
  .presence-map__canvas { aspect-ratio: 4 / 3; }
  .countries-stat { margin-top: var(--sp-5); }
}

@media (max-width: 540px) {
  .presence-map__canvas { aspect-ratio: 5 / 4; }
  .presence-map__caption {
    top: 10px;
    inset-inline-start: 10px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .countries-stat__num { font-size: 32px; }
}

/* Flag icons (lipis/flag-icons) — square, properly sized */
.country-chip__flag {
  font-size: 1.3rem; /* fallback for emoji */
}
.country-chip__flag.fi {
  font-size: 0; /* override emoji sizing */
  width: 24px;
  height: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  flex-shrink: 0;
  background-size: cover;
}

.country-chip__name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.country-chip:hover .country-chip__name {
  color: var(--rose-600);
}


/* ══════════════════════════════════════════════
   14. CTA SECTION
   ══════════════════════════════════════════════ */
.cta-section {
  background: linear-gradient(145deg, var(--cream-100) 0%, var(--rose-50) 60%, var(--rose-100) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .12), transparent 70%);
  pointer-events: none;
}

[dir="rtl"] .cta-section::before {
  right: auto;
  left: -100px;
}

.cta-section .section-heading {
  color: var(--teal-800);
}

.cta-section .section-desc {
  margin-inline: auto;
  color: var(--gray-600);
  margin-bottom: var(--sp-10);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}


/* ══════════════════════════════════════════════
   15. FOOTER
   ══════════════════════════════════════════════ */
.footer {
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(184, 91, 122, .14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 100%, rgba(212, 164, 76, .06), transparent 60%),
    linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%);
  color: rgba(255, 255, 255, .72);
  position: relative;
  border-top: 1px solid rgba(229, 156, 180, .08);
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rose-500) 30%, var(--gold) 50%, var(--rose-500) 70%, transparent);
}

.footer__top {
  padding: var(--sp-20) 0 var(--sp-12);
  position: relative;
  z-index: 2;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--sp-10);
}

.footer__brand {
  max-width: 300px;
}

.footer__logo {
  height: 80px;
  width: auto;
  margin-bottom: var(--sp-5);
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
}

.footer__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
  color: rgba(255, 255, 255, .70);
}

.footer__social {
  display: flex;
  gap: var(--sp-2);
}

.footer__social-link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(229, 156, 180, .18);
  color: rgba(255, 255, 255, .85);
  font-size: 1rem;
  transition: all var(--t-base);
}

.footer__social-link:hover {
  background: var(--rose-500);
  border-color: var(--rose-500);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .35);
}

.footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-6);
  position: relative;
  padding-bottom: var(--sp-3);
}

.footer__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2.5px;
  background: var(--rose-400);
  border-radius: 2px;
}

[dir="rtl"] .footer__heading::after {
  left: auto;
  right: 0;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .72);
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
}

.footer__link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rose-400);
  opacity: 0;
  transition: opacity var(--t-base);
}

.footer__link:hover {
  color: var(--rose-200);
  transform: translateX(-3px);
}

[dir="rtl"] .footer__link:hover {
  transform: translateX(3px);
}

.footer__link:hover::before {
  opacity: 1;
}

.footer__newsletter-form {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.footer__newsletter-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(229, 156, 180, .20);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: var(--text-sm);
  transition: all var(--t-base);
}

.footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.footer__newsletter-input:focus {
  border-color: var(--rose-400);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 3px rgba(184, 91, 122, .15);
}

.footer__newsletter-btn {
  padding: 10px 18px;
  background: var(--rose-500);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--text-xs);
  transition: background var(--t-base);
  white-space: nowrap;
}

.footer__newsletter-btn:hover {
  background: var(--rose-600);
}

.footer__newsletter-btn:disabled {
  opacity: .7;
  cursor: progress;
}

.footer__newsletter-form.is-invalid .footer__newsletter-input {
  animation: nl-shake .35s ease;
  border-color: #f5677d !important;
}

@keyframes nl-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.footer__newsletter-success {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(45, 168, 122, .14);
  border: 1px solid rgba(45, 168, 122, .35);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .92);
  font-size: var(--text-xs);
  animation: nl-fade-in .4s var(--ease-out);
}

.footer__newsletter-success__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--success, #2DA87A);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  margin-bottom: 2px;
}

.footer__newsletter-success strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
}

.footer__newsletter-success span {
  color: rgba(255, 255, 255, .72);
  line-height: 1.4;
}

@keyframes nl-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer__bottom {
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(229, 156, 180, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .60);
  position: relative;
  z-index: 2;
}

.footer__bottom-links {
  display: flex;
  gap: var(--sp-6);
}

.footer__bottom a {
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
  transition: color var(--t-base);
}

.footer__bottom a:hover {
  color: var(--rose-200);
}


/* ══════════════════════════════════════════════
   16. INNER PAGE HERO — refreshed with optional photo bg
   ══════════════════════════════════════════════ */
.page-hero {
  padding: 160px 0 96px;
  background: linear-gradient(145deg, var(--teal-800) 0%, var(--teal-900) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .14), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  inset-inline-start: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 164, 76, .08), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Optional background photo behind hero */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.32) saturate(1.1);
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(15, 52, 65, .55) 0%, rgba(15, 52, 65, .85) 100%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(184, 91, 122, .22), transparent 70%);
  pointer-events: none;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 16px;
  background: rgba(184, 91, 122, .18);
  border: 1px solid rgba(229, 156, 180, .30);
  border-radius: var(--r-full);
  color: var(--rose-200);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.page-hero__eyebrow i {
  font-size: .85em;
  opacity: .85;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--sp-4);
  position: relative;
  z-index: 2;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

.page-hero__desc {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, .80);
  max-width: 560px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
  line-height: var(--lh-loose);
  font-weight: 400;
}

@media (max-width: 768px) {
  .page-hero {
    padding: 130px 0 72px;
  }
  .page-hero__title {
    font-size: var(--text-4xl);
  }
}


/* ══════════════════════════════════════════════
   17. EVENTS LIST PAGE — Filters
   ══════════════════════════════════════════════ */
.filters-bar {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-lg);
  margin-top: -36px;
  position: relative;
  z-index: 10;
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid var(--gray-100);
}

.filter-group {
  flex: 1;
  min-width: 160px;
}

.filter-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-2);
}

.filter-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  color: var(--gray-700);
  font-weight: 500;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--t-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237C8C9E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

[dir="rtl"] .filter-select {
  background-position: left 12px center;
  padding-right: 14px;
  padding-left: 32px;
}

.filter-select:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(59, 107, 138, .08);
}

.filter-search {
  flex: 2;
  min-width: 240px;
  position: relative;
}

.filter-search i {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: var(--gray-300);
  font-size: .85em;
}

[dir="rtl"] .filter-search i {
  left: auto;
  right: 14px;
}

.filter-search__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  color: var(--gray-700);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: border-color var(--t-base);
}

[dir="rtl"] .filter-search__input {
  padding: 10px 38px 10px 14px;
}

.filter-search__input:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(59, 107, 138, .08);
}

/* Events grid (list page) */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}


/* ══════════════════════════════════════════════
   18. EVENT DETAIL PAGE
   ══════════════════════════════════════════════ */
.event-detail-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
}

.event-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.35);
}

.event-detail-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 27, 42, .25) 0%, rgba(12, 27, 42, .88) 100%);
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--sp-12);
}

.event-detail-hero__type {
  display: inline-block;
  padding: 6px 18px;
  background: var(--rose-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  box-shadow: 0 4px 14px rgba(184, 91, 122, .35);
}

.event-detail-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--sp-5);
  max-width: 760px;
  line-height: var(--lh-tight);
}

.event-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.event-detail-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .55);
}

.event-detail-hero__meta-item i {
  color: var(--rose-300);
}

.event-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: calc(var(--sp-12) * -1);
  position: relative;
  z-index: 5;
  margin-bottom: var(--sp-12);
}

.event-info-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-md);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid var(--gray-100);
}

.event-info-card__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-50);
  border-radius: var(--r-md);
  color: var(--rose-500);
  font-size: 1.2rem;
}

.event-info-card__label {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: 600;
}

.event-info-card__value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--gray-800);
}

.event-description {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--gray-600);
  max-width: var(--max-narrow);
  margin-bottom: var(--sp-14);
}

.event-description p {
  margin-bottom: var(--sp-6);
}

/* Gallery tabs */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.gallery-tab {
  padding: 9px 24px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-400);
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray-200);
  transition: all var(--t-base);
  cursor: pointer;
}

.gallery-tab:hover {
  border-color: var(--rose-400);
  color: var(--rose-500);
}

.gallery-tab--active {
  background: var(--rose-500);
  border-color: var(--rose-500);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(184, 91, 122, .25);
}

/* Masonry */
.masonry-grid {
  columns: 4;
  column-gap: var(--sp-3);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform .5s var(--ease-expo);
}

.masonry-item:hover img {
  transform: scale(1.04);
}

.masonry-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 27, 42, .55);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--t-base);
}

.masonry-item:hover .masonry-item__overlay {
  opacity: 1;
}

.masonry-item__overlay i {
  color: var(--white);
  font-size: 1.3rem;
}


/* ══════════════════════════════════════════════
   19. LIGHTBOX
   ══════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 20, .95);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-medium);
  backdrop-filter: blur(8px);
}

.lightbox--open {
  opacity: 1;
  visibility: visible;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background var(--t-base);
  cursor: pointer;
  z-index: 2;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, .12);
}

.lightbox__image {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background var(--t-base);
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, .12);
}

.lightbox__nav--prev {
  left: 20px;
}

.lightbox__nav--next {
  right: 20px;
}

.lightbox__caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: var(--text-sm);
  text-align: center;
  background: rgba(12, 27, 42, .5);
  padding: 8px 24px;
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
}

.lightbox__counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .35);
  font-size: var(--text-xs);
  font-weight: 500;
}


/* ══════════════════════════════════════════════
   20. MEDIA PAGE — Tabs, Video, Reels
   ══════════════════════════════════════════════ */
.media-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
  flex-wrap: wrap;
}

.media-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 24px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-400);
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray-200);
  transition: all var(--t-base);
  cursor: pointer;
}

.media-tab:hover {
  border-color: var(--ocean);
  color: var(--ocean);
}

.media-tab--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-6);
}

.video-card {
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  border: 1px solid var(--gray-100);
  transition: all .3s var(--ease-expo);
}

.video-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-md);
  transition: transform .3s var(--ease-spring);
}

.video-card__play-btn i {
  color: var(--navy);
  font-size: 1.3rem;
  margin-inline-start: 3px;
}

.video-card:hover .video-card__play-btn {
  transform: translate(-50%, -50%) scale(1.06);
}

.video-card__duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  background: rgba(6, 13, 20, .75);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-xs);
}

[dir="rtl"] .video-card__duration {
  right: auto;
  left: 10px;
}

.video-card__body {
  padding: var(--sp-5);
}

.video-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--sp-1);
}

.video-card__info {
  font-size: var(--text-xs);
  color: var(--gray-400);
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}


/* ══════════════════════════════════════════════
   21. ABOUT PAGE — Storytelling Experience
   ══════════════════════════════════════════════ */

/* ── About Hero — Cinematic with image ── */
.about-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--midnight);
}
.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.2) saturate(1.2);
}
.about-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(12,27,42,.5) 0%, transparent 35%),
    linear-gradient(180deg, transparent 45%, rgba(12,27,42,.95) 100%),
    linear-gradient(90deg, rgba(12,27,42,.65) 0%, transparent 50%);
}
.about-hero__content {
  position: relative;
  z-index: 5;
  max-width: 760px;
}
.about-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.about-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.55);
  line-height: var(--lh-loose);
  max-width: 520px;
  text-shadow: 0 1px 8px rgba(0,0,0,.2);
}

/* ── Who We Are ── */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-14);
  align-items: center;
}
.about-content__text h2 {
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-5);
  letter-spacing: var(--ls-tight);
}
.about-content__text p {
  font-size: var(--text-md);
  color: var(--gray-500);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-loose);
}
.about-content__btn {
  margin-top: var(--sp-4);
}
.about-content__image {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  position: relative;
}
.about-content__image::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 80px;
  height: 80px;
  background: var(--gold-glow);
  border-radius: var(--r-lg);
  z-index: -1;
}
.about-content__image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}
.about-content__image:hover img {
  transform: scale(1.03);
}

/* ── Vision & Mission ── */
.about-vm-section {
  background: var(--gray-50);
}

.vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.vm-card {
  padding: var(--sp-10);
  border-radius: var(--r-2xl);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-expo);
}
.vm-card:hover {
  transform: translateY(-4px);
}

.vm-card--vision {
  background: linear-gradient(145deg, var(--navy), var(--deep));
  color: var(--white);
  box-shadow: 0 8px 32px rgba(19,47,76,.2);
}
.vm-card--vision::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(212,164,76,.06);
}

.vm-card--mission {
  background: var(--frost);
  color: var(--gray-800);
  border: 1px solid var(--gray-100);
  box-shadow: var(--sh-sm);
}

.vm-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  font-size: 1.4rem;
  margin-bottom: var(--sp-6);
}
.vm-card--vision .vm-card__icon {
  background: rgba(212,164,76,.12);
  color: var(--gold);
  border: 1px solid rgba(212,164,76,.15);
}
.vm-card--mission .vm-card__icon {
  background: rgba(59,107,138,.08);
  color: var(--ocean);
  border: 1px solid rgba(59,107,138,.1);
}

.vm-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.vm-card--vision .vm-card__title { color: var(--white); }

.vm-card__desc {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  opacity: .85;
}

/* ── Countries section ── */
.about-countries-section {
  background: var(--white);
}

/* ── About CTA — Dark gradient ── */
.about-cta-section {
  background: linear-gradient(145deg, var(--navy) 0%, var(--deep) 50%, var(--midnight) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,164,76,.05), transparent 70%);
}
.about-cta-section .section-heading {
  color: var(--white);
}
.about-cta-section .section-desc {
  color: rgba(255,255,255,.45);
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .about-hero { min-height: 55vh; }
  .about-hero__title { font-size: var(--text-4xl); }
  .about-hero__content { text-align: center; }
  .about-hero__desc { margin-inline: auto; }
  .about-content { grid-template-columns: 1fr; }
  .vision-mission { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   22. CONTACT PAGE — Premium Polish
   ══════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-10);
  align-items: start;
}

.contact-info {
  padding: var(--sp-2) 0;
}

.contact-info__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--sp-4);
  letter-spacing: var(--ls-tight);
}

.contact-info__desc {
  font-size: var(--text-md);
  color: var(--gray-500);
  margin-bottom: var(--sp-8);
  line-height: var(--lh-body);
}

.contact-info__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.contact-info__item-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  color: var(--rose-500);
  font-size: 1.1rem;
}

.contact-info__item-label {
  font-size: var(--text-xs);
  color: var(--gray-400);
  font-weight: 500;
}

.contact-info__item-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-700);
}

.contact-social {
  display: flex;
  gap: var(--sp-2);
}

.contact-social__link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  color: var(--gray-500);
  font-size: 1rem;
  transition: all var(--t-base);
}

.contact-social__link:hover {
  background: var(--rose-500);
  border-color: var(--rose-500);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .25);
}

.contact-form {
  background: var(--white);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  box-shadow: var(--sh-md);
  border: 1px solid var(--gray-100);
}

.form-group {
  margin-bottom: var(--sp-5);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: var(--sp-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  color: var(--gray-800);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--rose-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(184, 91, 122, .12);
}

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* ── Contact-specific additions ── */

/* Social heading (was inline style) */
.contact-social__heading {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin-bottom: var(--sp-3);
}

/* Form header */
.contact-form__header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--gray-100);
}
.contact-form__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: var(--sp-2);
}
.contact-form__desc {
  font-size: var(--text-xs);
  color: var(--gray-400);
  font-weight: 500;
}

/* Submit button full-width */
.contact-form__submit {
  width: 100%;
}

/* Map section */
.contact-map-section {
  position: relative;
  background: var(--gray-50);
  overflow: hidden;
}
.contact-map-section iframe {
  display: block;
  width: 100%;
  height: 400px;
  filter: saturate(.7) brightness(1.05) contrast(1.02);
}
.contact-map__label {
  position: absolute;
  top: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 24px;
  background: var(--white);
  border-radius: var(--r-full);
  box-shadow: var(--sh-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}
.contact-map__label i {
  color: var(--rose-500);
  font-size: .85em;
}

/* ── Responsive — Contact page ── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-map-section iframe {
    height: 300px;
  }
}


/* ══════════════════════════════════════════════
   23. BREADCRUMBS
   ══════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  margin-bottom: var(--sp-4);
}

.breadcrumb a {
  color: rgba(255, 255, 255, .45);
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.breadcrumb__sep {
  color: rgba(255, 255, 255, .2);
  font-size: .65em;
}

.breadcrumb__current {
  color: var(--white);
  font-weight: 500;
}


/* ══════════════════════════════════════════════
   24. SCROLL TO TOP
   ══════════════════════════════════════════════ */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  box-shadow: var(--sh-md);
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .3s var(--ease-expo);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .08);
}

[dir="rtl"] .scroll-top {
  right: auto;
  left: 28px;
}

.scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--rose-500);
  transform: translateY(-3px);
}


/* ══════════════════════════════════════════════
   25. AOS — Scroll Animations
   ══════════════════════════════════════════════ */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-expo);
}

[data-aos="fade-up"] {
  transform: translateY(20px);
}

[data-aos="fade-down"] {
  transform: translateY(-20px);
}

[data-aos="fade-right"] {
  transform: translateX(-20px);
}

[data-aos="fade-left"] {
  transform: translateX(20px);
}

[data-aos="zoom-in"] {
  transform: scale(.96);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}


/* ══════════════════════════════════════════════
   26. RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .events-showcase {
    grid-template-columns: 1fr;
  }

  .event-story--hero {
    grid-row: span 1;
    min-height: 380px;
  }

  .media-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 200px;
  }

  .media-card--featured {
    grid-row: span 1;
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stories-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .masonry-grid {
    columns: 3;
  }

  .presence-layout {
    grid-template-columns: 1fr;
  }

  .timeline {
    padding-inline-start: 32px;
  }
  .timeline__content {
    padding: var(--sp-5) var(--sp-6);
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  /* ── Mobile Menu — premium redesign ── */
  .header__nav {
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 90% 0%, rgba(184, 91, 122, .22), transparent 60%),
      radial-gradient(ellipse 55% 35% at 0% 100%, rgba(212, 164, 76, .08), transparent 65%),
      linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 96px var(--sp-6) var(--sp-8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s var(--ease-expo), visibility .35s, transform .35s var(--ease-expo);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header__nav::before {
    /* subtle dome silhouette decoration */
    content: '';
    position: absolute;
    bottom: -120px;
    inset-inline-end: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 156, 180, .08), transparent 70%);
    pointer-events: none;
  }

  .header__nav::after {
    /* eyebrow chip on top */
    content: 'القائمه';
    position: absolute;
    top: 90px;
    inset-inline-start: var(--sp-6);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--rose-200);
    opacity: .7;
    padding: 4px 12px;
    background: rgba(184, 91, 122, .12);
    border: 1px solid rgba(229, 156, 180, .25);
    border-radius: var(--r-full);
  }

  [lang="en"] .header__nav::after { content: 'Menu'; }
  [lang="tr"] .header__nav::after { content: 'Menü'; }

  .header__nav--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__list {
    counter-reset: navcounter;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: var(--sp-10);
    padding-block: var(--sp-3);
    position: relative;
    z-index: 2;
  }

  .nav__list li {
    width: 100%;
    border-bottom: 1px solid rgba(229, 156, 180, .10);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s var(--ease-expo), transform .4s var(--ease-expo);
  }

  [dir="rtl"] .nav__list li {
    transform: translateX(8px);
  }

  .nav__list li:last-child {
    border-bottom: none;
  }

  .header__nav--open .nav__list li {
    opacity: 1;
    transform: translateX(0);
  }

  .header__nav--open .nav__list li:nth-child(1) { transition-delay: .08s; }
  .header__nav--open .nav__list li:nth-child(2) { transition-delay: .14s; }
  .header__nav--open .nav__list li:nth-child(3) { transition-delay: .20s; }
  .header__nav--open .nav__list li:nth-child(4) { transition-delay: .26s; }
  .header__nav--open .nav__list li:nth-child(5) { transition-delay: .32s; }

  .nav__link {
    counter-increment: navcounter;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: rgba(255, 255, 255, .92) !important;
    padding: var(--sp-5) var(--sp-3);
    border-radius: var(--r-md);
    background: transparent;
    transition: all var(--t-base);
    line-height: 1.2;
  }

  .nav__link::before {
    content: counter(navcounter, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--rose-300);
    opacity: .55;
    letter-spacing: var(--ls-wider);
    flex-shrink: 0;
    min-width: 28px;
  }

  .nav__link::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .65em;
    color: rgba(255, 255, 255, .35);
    background: none !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    border-radius: 0;
    transition: color var(--t-base), transform var(--t-base);
  }

  [dir="rtl"] .nav__link::after {
    content: '\f053';
  }

  .nav__link:hover,
  .nav__link--active {
    background: linear-gradient(90deg, rgba(184, 91, 122, .22) 0%, rgba(184, 91, 122, .04) 100%) !important;
    color: var(--rose-200) !important;
    padding-inline-start: var(--sp-5);
  }

  [dir="rtl"] .nav__link:hover,
  [dir="rtl"] .nav__link--active {
    background: linear-gradient(270deg, rgba(184, 91, 122, .22) 0%, rgba(184, 91, 122, .04) 100%) !important;
  }

  .nav__link:hover::after,
  .nav__link--active::after {
    color: var(--rose-300);
    transform: translateX(-3px) !important;
  }

  [dir="rtl"] .nav__link:hover::after,
  [dir="rtl"] .nav__link--active::after {
    transform: translateX(3px) !important;
  }

  /* Search button inside mobile menu — full-width pill */
  .header__nav .header__search {
    align-self: stretch;
    width: auto;
    height: 52px;
    border-radius: var(--r-md);
    margin-top: var(--sp-6);
    padding: 0 var(--sp-5);
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(229, 156, 180, .18);
    color: var(--white) !important;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    gap: var(--sp-3);
    justify-content: flex-start;
  }

  .header__nav .header__search::after {
    content: 'البحث الشامل';
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
  }

  [lang="en"] .header__nav .header__search::after { content: 'Search'; }
  [lang="tr"] .header__nav .header__search::after { content: 'Arama'; }

  .header__nav .header__search:hover {
    background: rgba(184, 91, 122, .22) !important;
    border-color: var(--rose-300);
    transform: none;
  }

  /* Lang switcher inside mobile menu */
  .header__nav .lang-switcher {
    margin-top: var(--sp-3);
    padding-top: var(--sp-6);
    align-self: flex-start;
    background: transparent;
    border: none;
    gap: var(--sp-2);
  }

  .header__nav .lang-btn {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(229, 156, 180, .15);
    color: rgba(255, 255, 255, .75) !important;
    padding: 10px 18px !important;
    font-size: var(--text-xs) !important;
    font-weight: 700;
    border-radius: var(--r-sm);
  }

  .header__nav .lang-btn--active {
    background: var(--rose-500) !important;
    border-color: var(--rose-500);
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(184, 91, 122, .35);
  }

  /* Force white logo + light hamburger when menu is open (ignore scrolled state) */
  .header:has(.header__nav--open) .header__logo-white,
  .header.header--scrolled:has(.header__nav--open) .header__logo-white {
    display: block;
  }
  .header:has(.header__nav--open) .header__logo-dark,
  .header.header--scrolled:has(.header__nav--open) .header__logo-dark {
    display: none;
  }
  .header:has(.header__nav--open) .menu-toggle span {
    background: var(--white) !important;
  }

  /* Boost hamburger touch target & visibility */
  .menu-toggle {
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 11;
  }
  .menu-toggle span {
    width: 26px;
  }

  .hero__title {
    font-size: var(--text-5xl);
  }

  .hero__content {
    text-align: center;
    max-width: 100%;
    padding-block: 110px 190px;
  }

  .hero__desc {
    max-width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__actions .btn--lg {
    padding: 16px 32px;
    font-size: var(--text-sm);
    width: 100%;
    justify-content: center;
  }

  .hero__stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stat {
    padding: var(--sp-4) var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
  }

  .hero__stat-number {
    font-size: var(--text-2xl);
  }

  .hero__scroll {
    display: none;
  }

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

  .section-heading {
    font-size: var(--text-3xl);
  }

  .section-header {
    margin-bottom: var(--sp-10);
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .media-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .media-card--featured {
    grid-row: span 1;
    min-height: 260px;
  }

  .media-card {
    min-height: 180px;
  }

  .impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .impact-card {
    padding: var(--sp-6) var(--sp-4);
  }

  .impact-card__icon {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
    margin-bottom: var(--sp-4);
  }

  .impact-card__number {
    font-size: var(--text-3xl);
  }

  .stories-grid {
    grid-template-columns: 1fr;
  }

  .story-card {
    padding: var(--sp-6);
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .vision-mission {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .event-info-grid {
    grid-template-columns: 1fr;
  }

  .filters-bar {
    flex-direction: column;
  }

  .filter-group,
  .filter-search {
    min-width: 100%;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand {
    max-width: 100%;
    margin-inline: auto;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__heading::after {
    margin-inline: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  [dir="rtl"] .footer__heading::after {
    right: 50%;
    left: auto;
    transform: translateX(50%);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
  }

  .footer__bottom-links {
    justify-content: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .reels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .countries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry-grid {
    columns: 2;
  }

  .event-detail-hero__title {
    font-size: var(--text-3xl);
  }

  .event-detail-hero__meta {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-4xl);
  }

  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .impact-card {
    padding: var(--sp-5) var(--sp-3);
  }

  .hero__stats-inner {
    grid-template-columns: 1fr 1fr;
  }

  .masonry-grid {
    columns: 1;
  }

  .reels-grid {
    grid-template-columns: 1fr 1fr;
  }

  .countries-grid {
    grid-template-columns: 1fr 1fr;
  }

  .reel-card {
    flex: 0 0 140px;
  }

  .btn--lg {
    padding: 14px 28px;
    font-size: var(--text-sm);
  }

  .timeline {
    padding-inline-start: 24px;
  }

  .timeline__content {
    padding: var(--sp-4) var(--sp-5);
  }

  .timeline__marker {
    inset-inline-start: -24px;
  }

  .timeline::before {
    inset-inline-start: 5px;
  }

  .footer__grid {
    gap: var(--sp-6);
  }

  .presence-layout {
    gap: var(--sp-8);
  }
}


/* ── RTL Overrides ── */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .section-header--center {
  text-align: center;
}

[dir="rtl"] .hero__content {
  text-align: right;
}

[dir="rtl"] .event-story__link i {
  transform: rotate(180deg);
}

[dir="rtl"] .event-story:hover .event-story__link i {
  transform: translateX(-3px) rotate(180deg);
}

[dir="rtl"] .breadcrumb__sep {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  [dir="rtl"] .hero__content {
    text-align: center;
  }
}


/* ══════════════════════════════════════════════
   27. MEDIA PAGE — Premium Polish v2
   ══════════════════════════════════════════════ */

/*
 * FIXES APPLIED:
 * 1. Hero: stronger overlay, subtitle weight 400→500, bigger play circle,
 *    meta items brighter, text-shadow for readability
 * 2. Cards: unified shadow system, stronger gradients, tighter spacing
 * 3. Typography: no weight below 400, Arabic-safe line-clamp, better sizes
 * 4. Spacing: reduced gaps, consistent padding inside cards
 * 5. Depth: layered shadows on cards, glow on hover
 * 6. CTA: custom dark gradient background for media page
 * 7. Contrast: photos section uses navy-tinted bg, reels stronger gradient
 * 8. Mobile: proper breakpoints, reel play always visible on touch
 * 9. Reels play button visible by default (was opacity:0 = invisible on mobile)
 */

/* ─────────────────────────────────
   MEDIA HERO — Cinematic Featured
   ───────────────────────────────── */
.media-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--midnight);
}

.media-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.media-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* FIX: was .28 — too dark, lost image detail. .22 gives cinematic depth while keeping image visible */
  filter: brightness(.22) saturate(1.2);
  transition: transform 10s ease;
}
.media-hero:hover .media-hero__bg img {
  transform: scale(1.04);
}

.media-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* FIX: stronger left-side gradient for text readability, deeper bottom for stats/scroll */
  background:
    linear-gradient(180deg, rgba(12,27,42,.55) 0%, transparent 35%),
    linear-gradient(180deg, transparent 40%, rgba(12,27,42,.97) 100%),
    linear-gradient(90deg, rgba(12,27,42,.72) 0%, transparent 55%);
}

/* Hero eyebrow — light variant (no inline styles) */
.media-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--gold-light);
  margin-bottom: var(--sp-5);
}
.media-hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: .5;
}

.media-hero__content {
  position: relative;
  z-index: 5;
  max-width: 620px;
}

.media-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-tight);
  /* FIX: text-shadow for guaranteed readability over any bg image */
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.media-hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  /* FIX: was 400 — too thin for Arabic. 500 is minimum readable */
  font-weight: 500;
  /* FIX: was .6 opacity — too faint. .7 gives clear secondary hierarchy */
  color: rgba(255,255,255,.72);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-6);
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}

.media-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.media-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  /* FIX: was .45 — too faint. .55 passes WCAG on dark bg */
  color: rgba(255,255,255,.58);
  font-weight: 500;
}
.media-hero__meta-item i {
  color: var(--gold-light);
  font-size: .85em;
}

.media-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Play circle — right side of hero */
.media-hero__play-circle {
  position: absolute;
  top: 50%;
  right: 14%;
  transform: translate(50%, -50%);
  z-index: 5;
  /* FIX: was 100px — too small for the hero scale. 120px is more prominent */
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .4s var(--ease-expo);
  color: var(--white);
  font-size: 1.8rem;
}
[dir="rtl"] .media-hero__play-circle {
  right: auto;
  left: 14%;
  transform: translate(-50%, -50%);
}
.media-hero__play-circle i {
  margin-inline-start: 5px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.media-hero__play-circle:hover {
  background: rgba(212,164,76,.15);
  border-color: rgba(212,164,76,.5);
  transform: translate(50%, -50%) scale(1.08);
  box-shadow: 0 0 60px rgba(212,164,76,.15);
}
[dir="rtl"] .media-hero__play-circle:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Pulsing ring */
.media-hero__play-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: play-ring-pulse 3s ease-out infinite;
}
@keyframes play-ring-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}


/* ─────────────────────────────────
   STICKY TAB NAV
   ───────────────────────────────── */
.media-nav-strip {
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--gray-100);
  padding: var(--sp-3) 0;
}
.media-nav-strip .media-tabs {
  margin-bottom: 0;
  justify-content: flex-start;
  gap: var(--sp-2);
}
.media-nav-strip .media-tab {
  border: none;
  padding: 8px 20px;
  background: transparent;
  color: var(--gray-400);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--r-full);
  transition: all var(--t-base);
  text-decoration: none;
}
.media-nav-strip .media-tab:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}
.media-nav-strip .media-tab--active {
  background: var(--navy);
  color: var(--white);
}


/* ─────────────────────────────────
   VIDEO CARD SYSTEM — Unified
   ───────────────────────────────── */
.vid-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  /* FIX: was single flat border. Layered shadow + subtle border = more depth */
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: var(--sh-sm);
  transition: all .35s var(--ease-expo);
  cursor: pointer;
}
.vid-card:hover {
  transform: translateY(-5px);
  /* FIX: stronger hover shadow with blue tint for brand consistency */
  box-shadow:
    0 8px 24px rgba(19,47,76,.08),
    0 20px 48px rgba(12,27,42,.10);
  border-color: transparent;
}

.vid-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.vid-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}
.vid-card:hover .vid-card__thumb img {
  transform: scale(1.05);
}

.vid-card__gradient {
  position: absolute;
  inset: 0;
  /* FIX: was only bottom gradient. Adding top tint for badge readability */
  background:
    linear-gradient(180deg, rgba(12,27,42,.2) 0%, transparent 25%),
    linear-gradient(180deg, transparent 45%, rgba(12,27,42,.65) 100%);
  pointer-events: none;
  transition: opacity .3s;
}
.vid-card:hover .vid-card__gradient {
  opacity: .85;
}

/* Play button */
.vid-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* FIX: layered shadow for floating effect */
  box-shadow:
    0 2px 8px rgba(0,0,0,.1),
    0 8px 24px rgba(0,0,0,.08);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.vid-card__play i {
  color: var(--navy);
  font-size: 1rem;
  margin-inline-start: 2px;
}
.vid-card:hover .vid-card__play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    0 12px 32px rgba(0,0,0,.10);
}

/* Badge */
.vid-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 4px 12px;
  background: var(--gold);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  box-shadow: 0 2px 8px rgba(212,164,76,.25);
  z-index: 2;
}
[dir="rtl"] .vid-card__badge { left: auto; right: var(--sp-3); }

/* Duration chip */
.vid-card__duration {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  background: rgba(6,13,20,.8);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-xs);
  backdrop-filter: blur(4px);
  z-index: 2;
}
[dir="rtl"] .vid-card__duration { right: auto; left: var(--sp-3); }
.vid-card__duration i { font-size: .75em; opacity: .8; }

/* Card info area */
.vid-card__info {
  padding: var(--sp-4) var(--sp-5);
}
.vid-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-800);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vid-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--gray-400);
  font-weight: 500;
}
.vid-card__meta span {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.vid-card__meta i {
  font-size: .8em;
  color: var(--ocean);
}


/* ─────────────────────────────────
   FEATURED LAYOUT — 1 large + 2 stacked
   ───────────────────────────────── */
.media-featured-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* FIX: was sp-5 (20px). sp-4 (16px) is tighter and more intentional */
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* Featured (hero) card */
.vid-card--featured {
  grid-row: span 2;
  position: relative;
}
.vid-card--featured .vid-card__thumb {
  aspect-ratio: auto;
  height: 100%;
}
.vid-card--featured .vid-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  z-index: 2;
}
.vid-card--featured .vid-card__title {
  color: var(--white);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.vid-card--featured .vid-card__meta {
  color: rgba(255,255,255,.55);
}
.vid-card--featured .vid-card__meta i {
  color: var(--gold-light);
}
.vid-card--featured .vid-card__gradient {
  /* FIX: stronger gradient for text readability on featured card */
  background:
    linear-gradient(180deg, rgba(12,27,42,.15) 0%, transparent 30%),
    linear-gradient(180deg, transparent 25%, rgba(12,27,42,.9) 100%);
}
.vid-card--featured .vid-card__play {
  width: 72px;
  height: 72px;
}
.vid-card--featured .vid-card__play i {
  font-size: 1.3rem;
  margin-inline-start: 3px;
}

/* More videos row */
.vid-more-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* Compact card variant */
.vid-card--compact .vid-card__thumb {
  aspect-ratio: 16/10;
}
.vid-card--compact .vid-card__play {
  width: 42px;
  height: 42px;
  opacity: .85;
}
.vid-card--compact .vid-card__play i {
  font-size: .8rem;
}
.vid-card--compact:hover .vid-card__play {
  opacity: 1;
}
.vid-card--compact .vid-card__info {
  padding: var(--sp-3) var(--sp-4);
}
.vid-card--compact .vid-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.vid-card--compact .vid-card__meta {
  gap: var(--sp-3);
}


/* ─────────────────────────────────
   REELS — Dark cinematic section
   ───────────────────────────────── */
.media-reels-section {
  background: var(--midnight);
  /* FIX: subtle top border for visual separation from white section above */
  border-top: 1px solid rgba(255,255,255,.03);
}
.media-reels-section .section-heading { color: var(--white); }
.media-reels-section .section-desc { color: rgba(255,255,255,.42); }
.media-reels-section .eyebrow { color: var(--gold-light); }
.media-reels-section .eyebrow::before { background: rgba(212,164,76,.4); }
.media-reels-section .eyebrow::after {
  content: '';
  width: 32px;
  height: 2px;
  background: rgba(212,164,76,.4);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Full-bleed carousel */
.reels-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-4);
}
.reels-carousel::-webkit-scrollbar { display: none; }

.reels-carousel__track {
  display: flex;
  gap: var(--sp-4);
  padding-inline: max(var(--sp-6), calc((100vw - var(--max-w)) / 2 + var(--sp-6)));
}

/* Reel card */
.reel-card {
  flex: 0 0 210px;
  aspect-ratio: 9/16;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .3s var(--ease-expo);
  /* FIX: subtle ring shadow for depth against dark bg */
  box-shadow:
    0 4px 16px rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.reel-card:hover {
  transform: scale(1.04);
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.1);
}
.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-expo);
}
.reel-card:hover img { transform: scale(1.06); }

.reel-card__gradient {
  position: absolute;
  inset: 0;
  /* FIX: stronger bottom gradient for text readability */
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 25%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

/* FIX: play button was opacity:0 — invisible on mobile (no hover).
   Now: always visible at .4 opacity, brightens on hover */
.reel-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1rem;
  transition: all .3s var(--ease-spring);
  opacity: .45;
  backdrop-filter: blur(4px);
}
.reel-card__play i {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.reel-card:hover .reel-card__play {
  opacity: 1;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  transform: translate(-50%, -50%) scale(1.08);
}

.reel-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4);
  z-index: 2;
}

.reel-card__tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(212,164,76,.85);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-2);
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

.reel-card__title {
  display: block;
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-1);
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

.reel-card__views {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 500;
}
.reel-card__views i { font-size: .85em; }


/* ─────────────────────────────────
   PHOTOS — Gallery section
   ───────────────────────────────── */
.media-photos-section {
  /* FIX: was flat gray-50. Navy-tinted frost gives brand identity */
  background: linear-gradient(180deg, var(--cloud) 0%, var(--frost) 100%);
}


/* ─────────────────────────────────
   MEDIA PAGE CTA — Override
   ───────────────────────────────── */
.media-photos-section + .cta-section {
  /* FIX: generic frost CTA is weak. Dark gradient CTA is stronger on media page */
  background: linear-gradient(145deg, var(--navy) 0%, var(--deep) 50%, var(--midnight) 100%);
}
.media-photos-section + .cta-section .section-heading {
  color: var(--white);
}
.media-photos-section + .cta-section .section-desc {
  color: rgba(255,255,255,.5);
}
.media-photos-section + .cta-section .btn--outline {
  border-color: rgba(255,255,255,.2);
  color: var(--white);
}
.media-photos-section + .cta-section .btn--outline:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
}


/* ─────────────────────────────────
   RESPONSIVE — Media page
   ───────────────────────────────── */
@media (max-width: 1024px) {
  .media-featured-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .vid-card--featured {
    grid-row: span 1;
    min-height: 340px;
  }
  .vid-more-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .media-hero__play-circle { display: none; }
  .reel-card { flex: 0 0 190px; }
}

@media (max-width: 768px) {
  .media-hero { min-height: 70vh; }
  .media-hero__title { font-size: var(--text-3xl); }
  .media-hero__subtitle { font-size: var(--text-lg); font-weight: 500; }
  .media-hero__content { text-align: center; }
  .media-hero__meta { justify-content: center; }
  .media-hero__actions { justify-content: center; }

  .media-nav-strip { top: 64px; }
  .media-nav-strip .media-tabs { justify-content: center; }

  /* FIX: 2 columns on tablet, 1 column on phone. Was jumping to 1 too early */
  .vid-more-row { grid-template-columns: repeat(2, 1fr); }
  .reel-card { flex: 0 0 165px; }

  /* FIX: play button always visible on touch devices */
  .reel-card__play { opacity: .5; }
}

@media (max-width: 540px) {
  .media-hero { min-height: 65vh; }
  .media-hero__meta {
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
  }
  /* FIX: compact cards go single column on small phones */
  .vid-more-row { grid-template-columns: 1fr; }
  .reel-card { flex: 0 0 150px; }
}


/* ══════════════════════════════════════════════
   27b. EVENT DETAIL PAGE — Section Polish
   ══════════════════════════════════════════════ */

/* Description section — reduced top padding since info cards float above */
.evdetail-desc-section {
  padding-top: 0;
}

/* Gallery section — soft blue bg for visual separation */
.evdetail-gallery-section {
  background: var(--cloud);
}

/* Video masonry items — always-visible play overlay */
.masonry-item--video {
  cursor: pointer;
}
.masonry-item__overlay--video {
  opacity: 1;
  background: rgba(12,27,42,.45);
}
.masonry-item__overlay--video i {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}
.masonry-item--video:hover .masonry-item__overlay--video {
  background: rgba(12,27,42,.6);
}

/* Related events section — light gray bg */
.evdetail-related-section {
  background: var(--gray-50);
}


/* ══════════════════════════════════════════════
   28. EVENTS PAGE — Premium Card System
   ══════════════════════════════════════════════ */

/*
 * COMPLETE REDESIGN of event cards:
 * - Image-first: ALL text overlaid on image (no separate body)
 * - Unified gradient overlay system
 * - Featured card spans full width with taller height
 * - Hover: image zoom + overlay darken + CTA reveal
 * - Date badge integrated into card
 * - Zero inline styles
 */

/* ── Filters wrap (replaces inline style) ── */
.events-filters-wrap {
  padding-bottom: var(--sp-8);
}

/* ── Listing section ── */
.events-listing-section {
  background: var(--off-white);
  padding-top: 0;
}

/* ── Event Grid — Mixed sizes ── */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

/* ── Base Event Card ── */
.ev-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: all .4s var(--ease-expo);
}
.ev-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 8px 24px rgba(19,47,76,.08),
    0 20px 48px rgba(12,27,42,.10);
}

.ev-card__inner {
  display: block;
  position: relative;
  height: 500px;
  overflow: hidden;
  color: var(--white);
}

/* Image */
.ev-card__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-expo);
}
.ev-card:hover .ev-card__inner img {
  transform: scale(1.06);
}

/* Gradient overlay */
.ev-card__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,27,42,.15) 0%, transparent 30%),
    linear-gradient(180deg, transparent 35%, rgba(12,27,42,.88) 100%);
  pointer-events: none;
  transition: opacity .3s;
}
.ev-card:hover .ev-card__gradient {
  background:
    linear-gradient(180deg, rgba(12,27,42,.2) 0%, transparent 25%),
    linear-gradient(180deg, transparent 25%, rgba(12,27,42,.92) 100%);
}

/* Date badge */
.ev-card__date {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--white);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  z-index: 2;
}
[dir="rtl"] .ev-card__date { right: auto; left: var(--sp-4); }

.ev-card__date-day {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--teal-700);
}
.ev-card__date-month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--rose-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

/* Category tag */
.ev-card__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 5px 14px;
  background: var(--rose-500);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  box-shadow: 0 2px 10px rgba(184, 91, 122, .35);
  z-index: 2;
}
[dir="rtl"] .ev-card__tag { left: auto; right: var(--sp-4); }

/* Content overlay (bottom) */
.ev-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-6);
  z-index: 2;
}

.ev-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

.ev-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ev-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
.ev-card__meta-item i {
  color: var(--rose-300);
  font-size: .8em;
}

/* CTA — reveals on hover */
.ev-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rose-200);
  letter-spacing: var(--ls-wide);
  opacity: 0;
  transform: translateY(8px);
  transition: all .35s var(--ease-expo);
}
.ev-card__cta i {
  font-size: .75em;
  transition: transform var(--t-base);
}
.ev-card:hover .ev-card__cta {
  opacity: 1;
  transform: translateY(0);
}
.ev-card:hover .ev-card__cta i {
  transform: translateX(3px);
}
[dir="rtl"] .ev-card:hover .ev-card__cta i {
  transform: translateX(-3px);
}

/* ── FEATURED card — full width, taller ── */
.ev-card--featured {
  grid-column: 1 / -1;
}
.ev-card--featured .ev-card__inner {
  height: 520px;
}
.ev-card--featured .ev-card__title {
  font-size: var(--text-2xl);
}
.ev-card--featured .ev-card__content {
  padding: var(--sp-8);
}
.ev-card--featured .ev-card__meta {
  gap: var(--sp-5);
}
.ev-card--featured .ev-card__meta-item {
  font-size: var(--text-sm);
}

/* ── No events message (cleaned from inline styles) ── */
.no-events-message {
  display: none;
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
}
.no-events-message i {
  font-size: 2.5rem;
  color: var(--gray-300);
  margin-bottom: var(--sp-5);
  display: block;
}
.no-events-message p {
  font-size: var(--text-lg);
  color: var(--gray-500);
  font-weight: 500;
  max-width: 100%;
}


/* ── Responsive — Events page ── */
@media (max-width: 1024px) {
  .ev-card--featured .ev-card__inner { height: 360px; }
}

@media (max-width: 768px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-card__inner { height: 280px; }
  .ev-card--featured .ev-card__inner { height: 320px; }
  .ev-card--featured .ev-card__title { font-size: var(--text-xl); }
  .ev-card--featured .ev-card__content { padding: var(--sp-6); }
  /* CTA always visible on touch */
  .ev-card__cta { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .ev-card__inner { height: 260px; }
  .ev-card--featured .ev-card__inner { height: 280px; }
  .ev-card__title { font-size: var(--text-base); }
}


/* ══════════════════════════════════════════════
   SEARCH PAGE
   ══════════════════════════════════════════════ */
.search-page {
  max-width: var(--max-narrow);
  margin-inline: auto;
}

.search-page__bar {
  position: relative;
  margin-bottom: var(--sp-10);
}

.search-page__bar i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--sp-5);
  color: var(--gray-300);
  font-size: var(--text-lg);
}

[dir="rtl"] .search-page__bar i {
  left: auto;
  right: var(--sp-5);
}

.search-page__input {
  width: 100%;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-14);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-xl);
  color: var(--gray-800);
  font-weight: 500;
  font-size: var(--text-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base);
  box-shadow: var(--sh-sm);
}

[dir="rtl"] .search-page__input {
  padding: var(--sp-5) var(--sp-14) var(--sp-5) var(--sp-5);
}

.search-page__input:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: var(--sh-md), 0 0 0 4px rgba(59, 107, 138, .08);
}

.search-page__results {
  margin-top: var(--sp-8);
}

.search-page__count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-6);
}

.search-page__empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
}

.search-page__empty i {
  font-size: var(--text-4xl);
  color: var(--gray-200);
  margin-bottom: var(--sp-6);
  display: block;
}

.search-page__empty h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: var(--sp-3);
}

.search-page__empty p {
  font-size: var(--text-base);
  color: var(--gray-400);
  margin-bottom: var(--sp-8);
  line-height: var(--lh-body);
}


/* ══════════════════════════════════════════════
   JOIN / VOLUNTEER PAGE
   ══════════════════════════════════════════════ */

/* ── Join Hero — Cinematic (reuses about-hero pattern) ── */
.join-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--midnight);
}
.join-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.join-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.join-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.55);
  line-height: var(--lh-loose);
  max-width: 540px;
}

/* ── Ways to Participate ── */
.join-ways-section {
  background: var(--off-white, #f8f8f6);
}
.join-ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.join-way-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  transition: transform .35s var(--ease-expo), box-shadow .35s var(--ease-expo), border-color .35s var(--ease-expo);
  border: 1px solid var(--rose-100);
}
.join-way-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(184, 91, 122, .14);
  border-color: var(--rose-200);
}
.join-way-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-6);
  font-size: 1.6rem;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(184, 91, 122, .25);
}
.join-way-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-4);
}
.join-way-card__desc {
  font-size: var(--text-base);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-6);
}
.join-way-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--rose-500);
  transition: gap .3s var(--ease-expo), color .3s var(--ease-expo);
}
.join-way-card__link:hover {
  gap: var(--sp-3);
  color: var(--rose-600);
}
.join-way-card__link i {
  font-size: .85em;
}
[dir="rtl"] .join-way-card__link i {
  transform: rotate(180deg);
}

/* ── Join Form Section ── */
.join-form-section {
  background: var(--white);
}

/* ── Join Page Responsive ── */
@media (max-width: 768px) {
  .join-hero { min-height: 55vh; }
  .join-hero__title { font-size: var(--text-4xl); }
  .join-hero .about-hero__content { text-align: center; }
  .join-hero__desc { margin-inline: auto; }
  .join-ways-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   404 ERROR PAGE
   ══════════════════════════════════════════════ */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--midnight) 0%, var(--navy) 60%, var(--deep) 100%);
  text-align: center;
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}

.error-page::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .15), transparent 70%);
  pointer-events: none;
}

.error-page::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 164, 76, .08), transparent 70%);
  pointer-events: none;
}

.error-page__content {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.error-page__logo {
  width: 280px;
  height: auto;
  margin: auto;
  margin-bottom: var(--sp-10);
  opacity: .85;
}

.error-page__code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--rose-300) 0%, var(--rose-500) 50%, var(--rose-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-4);
}

.error-page__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-heading);
}

.error-page__desc {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, .55);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-10);
  max-width: 44ch;
  margin-inline: auto;
}

.error-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-14);
}

.error-page__actions .btn--outline {
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .75);
}

.error-page__actions .btn--outline:hover {
  border-color: rgba(255, 255, 255, .7);
  color: var(--white);
}

.error-page__copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .25);
  line-height: var(--lh-body);
}


/* ══════════════════════════════════════════════
   LEGAL CONTENT (Privacy & Terms)
   ══════════════════════════════════════════════ */
.legal-content {
  padding-block: var(--sp-4);
}

.legal-content__section {
  margin-bottom: var(--sp-12);
}

.legal-content__section:last-child {
  margin-bottom: 0;
}

.legal-content__section h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--gray-100);
  line-height: var(--lh-heading);
}

.legal-content__section p {
  font-size: var(--text-base);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-4);
}

.legal-content__section p:last-child {
  margin-bottom: 0;
}

.legal-content__section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5) 0;
}

.legal-content__section ul li {
  position: relative;
  padding-right: var(--sp-6);
  padding-bottom: var(--sp-3);
  font-size: var(--text-base);
  color: var(--gray-600);
  line-height: var(--lh-body);
}

.legal-content__section ul li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.legal-content__section ul li:last-child {
  padding-bottom: 0;
}

.legal-content__section ul li strong {
  color: var(--gray-800);
  font-weight: 700;
}

.legal-content__section a {
  color: var(--ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-base);
}

.legal-content__section a:hover {
  color: var(--gold);
}

@media (max-width: 768px) {
  .error-page__actions {
    flex-direction: column;
  }

  .error-page__actions .btn {
    width: 100%;
  }

  .legal-content__section h2 {
    font-size: var(--text-xl);
  }
}


/* ══════════════════════════════════════════════
   MEDIA DETAIL PAGE
   ══════════════════════════════════════════════ */
.mdetail-hero {
  background: var(--midnight);
  padding: 120px 0 var(--sp-8);
}
.mdetail-hero .breadcrumb { margin-bottom: var(--sp-6); }

.mdetail-player {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-xl); background: var(--black);
}
.mdetail-player__wrapper {
  position: relative; padding-bottom: 56.25%; height: 0;
}
.mdetail-player__wrapper iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}

.mdetail-info-section { background: var(--white); }
.mdetail-info {
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--sp-10); align-items: start;
}
.mdetail-info__badge {
  display: inline-block; padding: 4px 14px;
  background: var(--gold); color: var(--white);
  font-size: 10px; font-weight: 700;
  border-radius: var(--r-full); text-transform: uppercase;
  letter-spacing: var(--ls-wider); margin-bottom: var(--sp-4);
}
.mdetail-info__title {
  font-size: var(--text-3xl); font-weight: 800;
  letter-spacing: var(--ls-tight); margin-bottom: var(--sp-5);
}
.mdetail-info__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-bottom: var(--sp-8); padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--gray-100);
}
.mdetail-info__meta-item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--gray-400); font-weight: 500;
}
.mdetail-info__meta-item i { color: var(--ocean); font-size: .85em; }
.mdetail-info__desc { margin-bottom: var(--sp-8); }
.mdetail-info__desc p {
  font-size: var(--text-md); color: var(--gray-600);
  line-height: var(--lh-loose); margin-bottom: var(--sp-5);
}

.mdetail-share {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-top: var(--sp-6); border-top: 1px solid var(--gray-100);
}
.mdetail-share__label {
  font-size: var(--text-sm); font-weight: 600; color: var(--gray-500);
  display: flex; align-items: center; gap: var(--sp-2);
}
.mdetail-share__label i { color: var(--ocean); }
.mdetail-share__links { display: flex; gap: var(--sp-2); }
.mdetail-share__link {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--gray-50);
  border: 1px solid var(--gray-100); color: var(--gray-500);
  font-size: .9rem; transition: all var(--t-base);
}
.mdetail-share__link:hover {
  background: var(--navy); border-color: var(--navy);
  color: var(--white); transform: translateY(-2px);
}

.mdetail-sidebar__card {
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--r-xl); padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.mdetail-sidebar__heading {
  font-size: var(--text-sm); font-weight: 700; color: var(--gray-800);
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--gray-200);
}
.mdetail-sidebar__item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--gray-100);
}
.mdetail-sidebar__item:last-child { border: none; }
.mdetail-sidebar__label { font-size: var(--text-xs); color: var(--gray-400); font-weight: 500; }
.mdetail-sidebar__value { font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); }
.mdetail-sidebar__value a { color: var(--ocean); }
.mdetail-sidebar__value a:hover { color: var(--navy); }

.mdetail-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mdetail-tag {
  padding: 4px 12px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 500; color: var(--gray-600);
  transition: all var(--t-base);
}
.mdetail-tag:hover { border-color: var(--ocean); color: var(--ocean); }
.mdetail-related-section { background: var(--gray-50); }

@media (max-width: 1024px) { .mdetail-info { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .mdetail-hero { padding-top: 100px; }
  .mdetail-info__title { font-size: var(--text-2xl); }
  .mdetail-info__meta { flex-direction: column; gap: var(--sp-2); }
  .mdetail-share { flex-direction: column; align-items: flex-start; }
}


/* ── Print ── */
@media print {

  .header,
  .footer,
  .scroll-top,
  .lightbox {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 40pt;
  }

  .section {
    padding: 20pt 0;
  }

  * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* ══════════════════════════════════════════════
   28. ACTIVE CAMPAIGN — emotional spotlight
   ══════════════════════════════════════════════ */
.campaign-section {
  background: var(--cream-100);
  position: relative;
  overflow: hidden;
}

.campaign-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .10), transparent 70%);
  pointer-events: none;
}

[dir="rtl"] .campaign-section::before {
  right: auto;
  left: -100px;
}

.campaign-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
  background: var(--white);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(184, 91, 122, .12), 0 2px 8px rgba(0, 0, 0, .04);
  border: 1px solid var(--rose-100);
  position: relative;
  z-index: 2;
}

.campaign-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--rose-50);
}

.campaign-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-expo);
}

.campaign-card:hover .campaign-card__media img {
  transform: scale(1.03);
}

.campaign-card__pattern {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 65%, rgba(15, 52, 65, .3) 100%);
  pointer-events: none;
}

.campaign-card__live-badge {
  position: absolute;
  top: var(--sp-5);
  inset-inline-end: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: var(--rose-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border-radius: var(--r-full);
  box-shadow: 0 4px 16px rgba(184, 91, 122, .35);
}

.campaign-card__live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.campaign-card__body {
  padding: var(--sp-12) var(--sp-10) var(--sp-12) 0;
}

[dir="rtl"] .campaign-card__body {
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-10);
}

.campaign-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rose-500);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.campaign-card__eyebrow i {
  font-size: .9em;
  opacity: .7;
}

.campaign-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--teal-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}

.campaign-card__title em {
  font-style: normal;
  color: var(--rose-500);
}

.campaign-card__desc {
  font-size: var(--text-md);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-8);
  max-width: 50ch;
}

.campaign-card__stats {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--rose-100);
}

.campaign-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--teal-700);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-2);
}

.campaign-stat__label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: 600;
}

.campaign-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 1024px) {
  .campaign-card {
    grid-template-columns: 1fr;
  }
  .campaign-card__media {
    aspect-ratio: 16 / 10;
  }
  .campaign-card__body,
  [dir="rtl"] .campaign-card__body {
    padding: var(--sp-8);
  }
}


/* ══════════════════════════════════════════════
   29. UPCOMING WEBINAR — countdown spotlight
   ══════════════════════════════════════════════ */
.webinar-section {
  background:
    linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 60%, #08202C 100%);
  position: relative;
  overflow: hidden;
  color: var(--white);
}

.webinar-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(184, 91, 122, .14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 85%, rgba(212, 164, 76, .08), transparent 70%);
  pointer-events: none;
}

.webinar-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-14);
  align-items: center;
  position: relative;
  z-index: 2;
}

.webinar-content .eyebrow {
  color: var(--rose-200);
}

.webinar-content .eyebrow::before {
  background: var(--rose-300);
}

.webinar-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}

.webinar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .65);
}

.webinar-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.webinar-meta__item i {
  color: var(--rose-300);
  font-size: .9em;
}

.webinar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.webinar-poster {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 6px 20px rgba(184, 91, 122, .15);
  border: 1px solid rgba(255, 255, 255, .08);
}

.webinar-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webinar-poster__decoration {
  position: absolute;
  bottom: -20px;
  inset-inline-start: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .35), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ── Countdown ── */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  max-width: 480px;
  direction: ltr;            /* keep days→hours→mins→secs left-to-right in RTL too */
  unicode-bidi: isolate;
}

.countdown__unit { direction: ltr; }
.countdown__label { direction: rtl; unicode-bidi: isolate; }
[dir="ltr"] .countdown__label { direction: ltr; }

.countdown__unit {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  transition: all var(--t-base);
}

.countdown__unit:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(229, 156, 180, .25);
}

.countdown__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--rose-200);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  display: block;
  margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: 11px;
  color: rgba(255, 255, 255, .82);
  letter-spacing: var(--ls-wider);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .webinar-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .webinar-poster {
    max-width: 360px;
    margin-inline: auto;
  }
  .webinar-title {
    font-size: var(--text-4xl);
  }
  .countdown {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .countdown {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
  }
  .countdown__unit {
    padding: var(--sp-3) var(--sp-2);
  }
  .countdown__value {
    font-size: var(--text-2xl);
  }
}


/* ══════════════════════════════════════════════
   30. RESPONSIVE — homepage v2 sections
   (campaign · webinar · presence · hero polish)
   ══════════════════════════════════════════════ */

/* iPad landscape & smaller (1024px) */
@media (max-width: 1024px) {
  .campaign-card__stats {
    gap: var(--sp-6);
  }
  .webinar-meta {
    gap: var(--sp-4);
  }
}

/* iPad portrait & large mobile (768px) */
@media (max-width: 768px) {
  /* Hero — preserve readability with the new banner */
  .hero__media img {
    object-position: 30% center;
  }
  .hero__title {
    line-height: 1.18;
  }
  .hero__title em::after {
    width: 60px;
    height: 2px;
    margin-top: var(--sp-1);
  }
  .hero__content {
    padding-block: 100px 200px;
  }
  .hero__desc {
    font-size: var(--text-md);
    line-height: var(--lh-body);
    margin-bottom: var(--sp-8);
  }

  /* Campaign card */
  .campaign-card__body,
  [dir="rtl"] .campaign-card__body {
    padding: var(--sp-6) var(--sp-5);
  }
  .campaign-card__title {
    font-size: var(--text-3xl);
  }
  .campaign-card__stats {
    gap: var(--sp-4);
    padding-block: var(--sp-4);
  }
  .campaign-stat__value {
    font-size: var(--text-xl);
  }
  .campaign-stat__label {
    font-size: 10px;
  }
  .campaign-card__live-badge {
    top: var(--sp-3);
    inset-inline-end: var(--sp-3);
    padding: 5px 12px;
  }

  /* Webinar */
  .webinar-title {
    font-size: var(--text-3xl);
  }
  .webinar-meta {
    gap: var(--sp-3);
    font-size: var(--text-xs);
  }
  .webinar-poster {
    max-width: 280px;
  }
  .webinar-actions {
    width: 100%;
  }
  .webinar-actions .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }

  /* Countdown — keep 4 cols but smaller numbers */
  .countdown__value {
    font-size: var(--text-3xl);
  }
  .countdown__label {
    font-size: 9px;
  }
  .countdown__unit {
    padding: var(--sp-4) var(--sp-2);
  }

  /* Presence visual */
  .presence-visual {
    min-height: 480px;
    padding: var(--sp-8);
  }
  .presence-visual__big-label {
    font-size: var(--text-sm);
  }
  .presence-visual__quote {
    font-size: var(--text-xs);
    max-width: 32ch;
  }
  .presence-visual__flags .fi {
    width: 20px;
    height: 20px;
  }
  .presence-visual__chip {
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Impact cards — bigger touch targets, tighter padding */
  .impact-card {
    padding: var(--sp-8) var(--sp-4);
  }
  .impact-card__icon {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
    margin-bottom: var(--sp-4);
  }
}

/* Small mobile (540px) */
@media (max-width: 540px) {
  .campaign-card__title {
    font-size: var(--text-2xl);
  }
  .campaign-card__stats {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .campaign-stat {
    flex: 1 1 80px;
  }
  .campaign-card__actions {
    flex-direction: column;
    width: 100%;
  }
  .campaign-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .webinar-actions {
    flex-direction: column;
    width: 100%;
  }
  .webinar-actions .btn {
    width: 100%;
  }
}

/* Tiny mobile (380px) */
@media (max-width: 380px) {
  .countdown {
    gap: 4px;
  }
  .countdown__unit {
    padding: var(--sp-3) 4px;
  }
  .countdown__value {
    font-size: var(--text-2xl);
  }
  .presence-visual__flags {
    padding: var(--sp-2) var(--sp-3);
  }
  .presence-visual__flags .fi {
    width: 18px;
    height: 18px;
  }
}

/* Touch-device hover suppression — avoid sticky hover states on mobile */
@media (hover: none) {
  .impact-card:hover,
  .country-chip:hover,
  .event-story:hover,
  .media-card:hover,
  .campaign-card:hover .campaign-card__media img,
  .presence-visual:hover .presence-visual__photo img {
    transform: none;
  }
  .impact-card:hover .impact-card__icon {
    transform: none;
  }
}

/* Header logo — scale on mobile to fit shorter header */
@media (max-width: 768px) {
  .header__logo img,
  .header--scrolled .header__logo img {
    height: 50px;
  }
}

@media (max-width: 480px) {
  .header__logo img,
  .header--scrolled .header__logo img {
    height: 44px;
  }
}


/* ══════════════════════════════════════════════
   31. ABOUT PAGE v2 — Real content sections
   ══════════════════════════════════════════════ */

/* Hero title — split structure (no inline HTML, i18n-safe) */
.about-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.about-hero__title-pre {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.about-hero__title-main {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--rose-200);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  position: relative;
  display: inline-block;
  width: fit-content;
}

.about-hero__title-main::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--rose-400), transparent);
  border-radius: 4px;
  margin-top: var(--sp-3);
  opacity: .7;
}

.media-hero__eyebrow i {
  font-size: .85em;
  opacity: .7;
}


/* ── About Story Section (founding 2014) ── */
.about-story-section {
  background: var(--white);
}

.about-story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-14);
  align-items: center;
}

.about-story__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 18px;
  background: var(--cream-100);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  color: var(--gray-700);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-5);
}

.about-story__badge i {
  color: var(--rose-500);
}

.about-story__badge strong {
  color: var(--rose-600);
  font-weight: 800;
}

.about-story__text h2 {
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-5);
  color: var(--teal-800);
}

.about-story__text p {
  font-size: var(--text-md);
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-loose);
}

.about-story__text p strong {
  color: var(--teal-700);
  font-weight: 700;
}

.about-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.about-story__visual {
  position: relative;
}

.about-story__photo {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(184, 91, 122, .15), 0 4px 12px rgba(15, 52, 65, .08);
  position: relative;
}

.about-story__photo::before {
  content: '';
  position: absolute;
  top: -16px;
  inset-inline-end: -16px;
  width: 90px;
  height: 90px;
  border-radius: var(--r-lg);
  background: var(--rose-100);
  z-index: -1;
}

.about-story__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease-expo);
}

.about-story__visual:hover .about-story__photo img {
  transform: scale(1.04);
}

.about-story__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: 8px 16px;
  background: var(--rose-50);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-style: italic;
}

.about-story__caption i {
  color: var(--rose-500);
  font-size: .9em;
}


/* ── Vision Feature ── */
.about-vision-section {
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(184, 91, 122, .06), transparent 70%),
    var(--cream-100);
  text-align: center;
  position: relative;
}

.vision-feature {
  max-width: 900px;
  margin-inline: auto;
  position: relative;
}

.vision-feature__quote-mark {
  font-size: 4rem;
  color: var(--rose-300);
  opacity: .35;
  line-height: 1;
  margin-bottom: var(--sp-4);
}

.vision-feature__eyebrow {
  justify-content: center;
}

.vision-feature__eyebrow::after {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--rose-400);
  border-radius: 2px;
  flex-shrink: 0;
}

.vision-feature__text {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 600;
  color: var(--teal-800);
  line-height: 1.45;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-6);
}

.vision-feature__text em {
  font-style: normal;
  color: var(--rose-500);
  font-weight: 700;
}

.vision-feature__divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rose-400), transparent);
  margin-inline: auto;
  margin-bottom: var(--sp-4);
  border-radius: 3px;
}

.vision-feature__sub {
  font-size: var(--text-md);
  color: var(--gray-500);
  font-style: italic;
}


/* ── Objectives Grid (8 cards) ── */
.about-objectives-section {
  background: var(--white);
}

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.obj-card {
  position: relative;
  padding: var(--sp-8) var(--sp-6) var(--sp-8);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  transition: all .35s var(--ease-expo);
  isolation: isolate;
  overflow: hidden;
}

.obj-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--rose-300), var(--rose-500));
  transform: scaleX(0);
  transform-origin: inset-inline-start;
  transition: transform .4s var(--ease-expo);
}

.obj-card:hover {
  transform: translateY(-5px);
  border-color: var(--rose-300);
  box-shadow: 0 14px 36px rgba(184, 91, 122, .14);
}

.obj-card:hover::before {
  transform: scaleX(1);
}

.obj-card__num {
  position: absolute;
  top: var(--sp-4);
  inset-inline-end: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--rose-100);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  z-index: -1;
  transition: color .3s var(--ease-expo);
}

.obj-card:hover .obj-card__num {
  color: var(--rose-200);
}

.obj-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-50), var(--cream-100));
  border: 1px solid var(--rose-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--rose-500);
  margin-bottom: var(--sp-5);
  transition: all .35s var(--ease-spring);
}

.obj-card:hover .obj-card__icon {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  transform: scale(1.05) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(184, 91, 122, .25);
}

.obj-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.obj-card__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
}

@media (max-width: 1024px) {
  .objectives-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .objectives-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}


/* ── Org Structure (4 cards) ── */
.about-structure-section {
  background: var(--cream-50);
  position: relative;
  overflow: hidden;
}

.about-structure-section::before {
  content: '';
  position: absolute;
  top: -120px;
  inset-inline-end: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .08), transparent 70%);
  pointer-events: none;
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  position: relative;
}

.struct-card {
  padding: var(--sp-8) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  text-align: center;
  transition: all .35s var(--ease-expo);
  position: relative;
  overflow: hidden;
}

.struct-card:hover {
  transform: translateY(-6px);
  border-color: var(--rose-300);
  box-shadow: 0 16px 40px rgba(184, 91, 122, .15);
}

.struct-card__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.7rem;
  margin-bottom: var(--sp-5);
  box-shadow: 0 8px 20px rgba(184, 91, 122, .25);
  transition: transform .35s var(--ease-spring);
}

.struct-card:hover .struct-card__icon {
  transform: scale(1.08);
}

.struct-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-3);
}

.struct-card__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
}

@media (max-width: 1024px) {
  .structure-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .structure-grid { grid-template-columns: 1fr; }
}


/* ── Leadership Grid ── */
.about-leadership-section {
  background: var(--white);
}

/* Leaders Swiper wrapper */
.leaders-swiper-wrap {
  position: relative;
  padding: 0 var(--sp-2);
}

.leaders-swiper {
  overflow: hidden;
  padding: var(--sp-3) var(--sp-2) var(--sp-12);
}

.leaders-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.leader-card {
  padding: var(--sp-8) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  text-align: center;
  transition: all .35s var(--ease-expo);
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.leader-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 80px;
  background: linear-gradient(135deg, var(--rose-50) 0%, var(--cream-100) 100%);
  z-index: 0;
}

.leader-card:hover {
  transform: translateY(-5px);
  border-color: var(--rose-300);
  box-shadow: 0 16px 40px rgba(184, 91, 122, .15);
}

.leader-card--featured {
  grid-column: span 1;
  background: linear-gradient(160deg, var(--cream-100) 0%, var(--white) 60%);
  border: 1px solid var(--rose-200);
}

.leader-card--featured::before {
  background: linear-gradient(135deg, var(--rose-200), var(--rose-100));
}

.leader-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  color: var(--white);
  font-size: 2rem;
  position: relative;
  z-index: 2;
  border: 4px solid var(--white);
  box-shadow: 0 8px 24px rgba(184, 91, 122, .25);
  overflow: hidden;
}

.leader-card__avatar--photo {
  background: var(--gray-100);
}

.leader-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.leader-card__role {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rose-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-2);
  position: relative;
  z-index: 2;
}

.leader-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-3);
  position: relative;
  z-index: 2;
}

.leader-card__quote {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  font-style: italic;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rose-100);
  position: relative;
  z-index: 2;
  margin-top: auto;
}


/* Leaders Swiper navigation */
.leaders-swiper-nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.leaders-prev,
.leaders-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rose-200);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--t-base);
}

.leaders-prev:hover,
.leaders-next:hover {
  background: var(--rose-500);
  color: var(--white);
  border-color: var(--rose-500);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .25);
  transform: translateY(-2px);
}

.leaders-prev.swiper-button-disabled,
.leaders-next.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Leaders Swiper pagination */
.leaders-swiper__pagination {
  position: absolute;
  bottom: var(--sp-3);
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.leaders-swiper__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--rose-200);
  opacity: 1;
  border-radius: var(--r-full);
  transition: all var(--t-base);
  cursor: pointer;
  margin: 0;
}

.leaders-swiper__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--rose-500);
}


/* ── Projects Showcase ── */
.about-projects-section {
  background: var(--cream-50);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.proj-card {
  padding: var(--sp-8) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  transition: all .35s var(--ease-expo);
  display: flex;
  flex-direction: column;
}

.proj-card:hover {
  transform: translateY(-5px);
  border-color: var(--rose-300);
  box-shadow: 0 16px 40px rgba(184, 91, 122, .14);
}

.proj-card--featured {
  background: linear-gradient(160deg, var(--rose-50) 0%, var(--white) 50%);
  border-color: var(--rose-200);
}

.proj-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--sp-4);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .22);
}

.proj-card__date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: var(--ls-wide);
  display: block;
  margin-bottom: var(--sp-2);
}

.proj-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-3);
}

.proj-card__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
  flex: 1;
}

.proj-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--rose-500);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: gap .25s var(--ease-expo), color .25s var(--ease-expo);
  align-self: flex-start;
}

.proj-card__link i {
  font-size: .85em;
  transition: transform var(--t-base);
}

[dir="rtl"] .proj-card__link i {
  transform: rotate(180deg);
}

.proj-card__link:hover {
  color: var(--rose-600);
  gap: var(--sp-3);
}

@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .projects-grid { grid-template-columns: 1fr; }
}


/* ── Membership Section ── */
.membership-section {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184, 91, 122, .08), transparent 70%),
    var(--white);
}

.membership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  max-width: 980px;
  margin-inline: auto;
}

.member-card {
  position: relative;
  padding: var(--sp-10) var(--sp-8);
  background: var(--white);
  border: 1.5px solid var(--rose-100);
  border-radius: var(--r-2xl);
  text-align: center;
  transition: all .35s var(--ease-expo);
  overflow: hidden;
}

.member-card:hover {
  transform: translateY(-6px);
  border-color: var(--rose-300);
  box-shadow: 0 20px 48px rgba(184, 91, 122, .18);
}

.member-card--featured {
  background: linear-gradient(160deg, var(--rose-50) 0%, var(--cream-50) 60%, var(--white) 100%);
  border: 1.5px solid var(--rose-300);
  box-shadow: 0 12px 32px rgba(184, 91, 122, .12);
}

.member-card__badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  padding: 4px 12px;
  background: var(--rose-500);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  box-shadow: 0 3px 10px rgba(184, 91, 122, .3);
}

.member-card__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin-bottom: var(--sp-5);
  box-shadow: 0 10px 28px rgba(184, 91, 122, .28);
}

.member-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--teal-800);
  margin-bottom: var(--sp-4);
}

.member-card__desc {
  font-size: var(--text-md);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-6);
}

.member-card__list {
  text-align: start;
  margin-bottom: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: rgba(184, 91, 122, .04);
  border-radius: var(--r-md);
  border: 1px solid var(--rose-100);
}

.member-card__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-weight: 500;
}

.member-card__list i {
  color: var(--rose-500);
  font-size: .85em;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rose-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.member-card__btn {
  width: 100%;
}

@media (max-width: 768px) {
  .membership-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}


/* ── About Page Responsive ── */
@media (max-width: 1024px) {
  .about-story {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .about-hero__title-main {
    font-size: var(--text-5xl);
  }
}

@media (max-width: 768px) {
  .about-story__photo::before {
    width: 60px;
    height: 60px;
  }
  .vision-feature__text {
    font-size: var(--text-2xl);
  }
}


/* ══════════════════════════════════════════════
   32. EXPLORE DUO — about page CTA pair
   ══════════════════════════════════════════════ */
.about-explore-section {
  background: var(--white);
}

.explore-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.explore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-10) var(--sp-8);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: all .35s var(--ease-expo);
  text-decoration: none;
  color: inherit;
}

.explore-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity .35s var(--ease-expo);
}

.explore-card--projects {
  background: linear-gradient(140deg, var(--cream-100) 0%, var(--rose-50) 80%);
  border: 1px solid var(--rose-100);
}

.explore-card--projects::before {
  background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(184, 91, 122, .12), transparent 70%);
}

.explore-card--join {
  background: linear-gradient(140deg, var(--teal-700) 0%, var(--teal-900) 100%);
  color: var(--white);
  border: 1px solid rgba(229, 156, 180, .18);
}

.explore-card--join::before {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(184, 91, 122, .25), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 100%, rgba(212, 164, 76, .10), transparent 70%);
}

.explore-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .12);
}

.explore-card--join:hover {
  box-shadow: 0 20px 48px rgba(15, 52, 65, .35);
}

.explore-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  transition: transform .35s var(--ease-spring);
}

.explore-card--projects .explore-card__icon {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  box-shadow: 0 8px 22px rgba(184, 91, 122, .25);
}

.explore-card--join .explore-card__icon {
  background: rgba(229, 156, 180, .18);
  border: 1px solid rgba(229, 156, 180, .35);
  color: var(--rose-200);
}

.explore-card:hover .explore-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

.explore-card__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.explore-card--projects .explore-card__eyebrow { color: var(--rose-500); }
.explore-card--join .explore-card__eyebrow { color: var(--rose-200); }

.explore-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.explore-card--projects .explore-card__title { color: var(--teal-800); }
.explore-card--join .explore-card__title { color: var(--white); }

.explore-card__desc {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  margin: 0;
}

.explore-card--projects .explore-card__desc { color: var(--gray-600); }
.explore-card--join .explore-card__desc { color: rgba(255, 255, 255, .85); }

.explore-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  margin-top: auto;
  align-self: flex-start;
  transition: gap .25s var(--ease-expo);
}

.explore-card--projects .explore-card__cta { color: var(--rose-600); }
.explore-card--join .explore-card__cta { color: var(--rose-200); }

.explore-card__cta i {
  font-size: .85em;
  transition: transform var(--t-base);
}

[dir="rtl"] .explore-card__cta i { transform: rotate(180deg); }

.explore-card:hover .explore-card__cta { gap: var(--sp-3); }

@media (max-width: 768px) {
  .explore-duo { grid-template-columns: 1fr; gap: var(--sp-4); }
  .explore-card { padding: var(--sp-8) var(--sp-6); }
}


/* ══════════════════════════════════════════════
   33. PROJECTS PAGE V2 — System-aligned design
   Rhythm: dark hero → white feature (with photo) →
           cream cover-grid → white numbers → cream/rose CTA → dark footer
   ══════════════════════════════════════════════ */

/* ── Featured Project — split with real photo ── */
.project-featured-section { background: var(--white); }

.project-feature {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-12);
  align-items: center;
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--rose-50) 100%);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(184, 91, 122, .10);
}

/* Real photo with overlay + decorative elements */
.project-feature__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(15, 52, 65, .25), 0 6px 18px rgba(184, 91, 122, .15);
  border: 1px solid rgba(255, 255, 255, .15);
  isolation: isolate;
}

.project-feature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-expo);
}

.project-feature:hover .project-feature__photo img {
  transform: scale(1.04);
}

.project-feature__photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 52, 65, .15) 0%, rgba(15, 52, 65, .55) 80%, rgba(15, 52, 65, .85) 100%),
    linear-gradient(135deg, rgba(184, 91, 122, .25) 0%, transparent 50%);
  pointer-events: none;
}

.project-feature__floating-icon {
  position: absolute;
  bottom: var(--sp-6);
  inset-inline-start: var(--sp-6);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.8rem;
  box-shadow: 0 14px 32px rgba(184, 91, 122, .45);
  border: 3px solid rgba(255, 255, 255, .9);
  z-index: 2;
}

.project-feature__live-badge {
  position: absolute;
  top: var(--sp-5);
  inset-inline-end: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--rose-600);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  z-index: 2;
}

.project-feature__live-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-500);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Body */
.project-feature__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
}

.project-feature__date i { color: var(--rose-500); font-size: .9em; }

.project-feature__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--teal-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}

.project-feature__tagline {
  font-size: var(--text-md);
  color: var(--rose-600);
  font-weight: 600;
  margin-bottom: var(--sp-6);
  letter-spacing: var(--ls-wide);
}

.project-feature__story p {
  font-size: var(--text-md);
  color: var(--gray-700);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-4);
  max-width: 100%;
}

.project-feature__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-7);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--rose-100);
}

.pillar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  box-shadow: 0 1px 3px rgba(184, 91, 122, .04);
}

.pillar i { color: var(--rose-500); font-size: .9em; }

.project-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 1024px) {
  .project-feature {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: var(--sp-7);
  }
  .project-feature__photo {
    aspect-ratio: 16 / 10;
    max-width: 100%;
  }
  .project-feature__title {
    font-size: var(--text-4xl);
  }
}


/* ── Cover-card grid (other projects) ── */
.project-grid-section {
  background: var(--cream-50);
  position: relative;
  overflow: hidden;
}

.project-grid-section::before {
  content: '';
  position: absolute;
  top: -120px;
  inset-inline-end: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .08), transparent 70%);
  pointer-events: none;
}

.projects-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  position: relative;
}

.proj-cover-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
  transition: all .4s var(--ease-expo);
}

.proj-cover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(184, 91, 122, .14), 0 4px 12px rgba(0, 0, 0, .06);
}

.proj-cover-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Cover (top with icon + tag) */
.proj-cover-card__cover {
  position: relative;
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.proj-cover-card__icon {
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: var(--white);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
  transition: transform .4s var(--ease-spring);
  position: relative;
  z-index: 2;
}

.proj-cover-card:hover .proj-cover-card__icon {
  transform: scale(1.12) rotate(-6deg);
}

.proj-cover-card__tag {
  position: absolute;
  top: var(--sp-4);
  inset-inline-end: var(--sp-4);
  padding: 5px 14px;
  background: rgba(255, 255, 255, .95);
  color: var(--gray-700);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  z-index: 3;
  backdrop-filter: blur(6px);
}

.proj-cover-card__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle 1.5px at 20% 30%, rgba(255, 255, 255, .18) 1.5px, transparent 1.5px),
    radial-gradient(circle 1.5px at 80% 70%, rgba(255, 255, 255, .15) 1.5px, transparent 1.5px),
    radial-gradient(circle 1px at 50% 50%, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 32px 32px, 28px 28px, 20px 20px;
  opacity: .7;
}

/* Color variants — distinct per project, all in palette */
.proj-cover-card--rose .proj-cover-card__cover {
  background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-600) 100%);
}
.proj-cover-card--rose .proj-cover-card__tag {
  color: var(--rose-600);
}

.proj-cover-card--teal .proj-cover-card__cover {
  background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%);
}
.proj-cover-card--teal .proj-cover-card__tag {
  color: var(--teal-700);
}

.proj-cover-card--gold .proj-cover-card__cover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}
.proj-cover-card--gold .proj-cover-card__tag {
  color: var(--gold-dark);
}

.proj-cover-card--sage .proj-cover-card__cover {
  background: linear-gradient(135deg, var(--sage-500) 0%, var(--teal-500) 100%);
}
.proj-cover-card--sage .proj-cover-card__tag {
  color: var(--teal-600);
}

/* Photo-cover variant (real project posters) */
.proj-cover-card--has-photo .proj-cover-card__cover {
  background: var(--cream-100);
  aspect-ratio: 16 / 9;
}

.proj-cover-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease-expo);
  z-index: 1;
}

.proj-cover-card--has-photo:hover .proj-cover-card__bg {
  transform: scale(1.06);
}

.proj-cover-card--has-photo .proj-cover-card__tag {
  background: rgba(255, 255, 255, .96);
  color: var(--rose-600);
  z-index: 3;
}

/* Body */
.proj-cover-card__body {
  padding: var(--sp-7) var(--sp-6);
}

.proj-cover-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-3);
}

.proj-cover-card__date i {
  color: var(--rose-400);
  font-size: .85em;
}

.proj-cover-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--teal-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-3);
  transition: color .25s var(--ease-expo);
}

.proj-cover-card:hover .proj-cover-card__title {
  color: var(--rose-600);
}

.proj-cover-card__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
}

.proj-cover-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rose-100);
  list-style: none;
  padding-inline-start: 0;
}

.proj-cover-card__features li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-700);
  font-weight: 500;
}

.proj-cover-card__features i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rose-50);
  color: var(--rose-500);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.proj-cover-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--rose-500);
  letter-spacing: var(--ls-wide);
  transition: gap .25s var(--ease-expo), color .25s var(--ease-expo);
}

.proj-cover-card__cta i {
  font-size: .85em;
  transition: transform var(--t-base);
}

[dir="rtl"] .proj-cover-card__cta i {
  transform: rotate(180deg);
}

.proj-cover-card:hover .proj-cover-card__cta {
  gap: var(--sp-3);
  color: var(--rose-600);
}

@media (max-width: 1024px) {
  .projects-grid-v2 { grid-template-columns: 1fr; }
}


/* ── Numbers Strip ── */
.project-numbers-section {
  background: var(--white);
  padding-block: clamp(var(--sp-12), 8vw, var(--sp-16));
}

.proj-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  max-width: 980px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--rose-50) 100%);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  position: relative;
  overflow: hidden;
}

.proj-numbers::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .10), transparent 70%);
  pointer-events: none;
}

.proj-num {
  text-align: center;
  position: relative;
  padding: var(--sp-3);
}

.proj-num + .proj-num {
  border-inline-start: 1px solid var(--rose-100);
}

.proj-num__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--rose-600);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}

.proj-num__label {
  font-size: var(--text-xs);
  color: var(--gray-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

@media (max-width: 768px) {
  .proj-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
  .proj-num + .proj-num {
    border-inline-start: none;
  }
  .proj-num:nth-child(odd) + .proj-num {
    border-inline-start: 1px solid var(--rose-100);
  }
}


/* ══════════════════════════════════════════════
   34. JOIN PAGE V2 — Process · Forms · FAQ
   ══════════════════════════════════════════════ */

.join-membership-section { background: var(--white); }

/* Process Steps */
.join-process-section {
  background: var(--cream-50);
  position: relative;
  overflow: hidden;
}

.join-process-section::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .06), transparent 70%);
  pointer-events: none;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  position: relative;
  max-width: 980px;
  margin-inline: auto;
}

.process-step {
  position: relative;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  transition: all .35s var(--ease-expo);
}

.process-step:hover {
  transform: translateY(-5px);
  border-color: var(--rose-300);
  box-shadow: 0 16px 40px rgba(184, 91, 122, .14);
}

.process-step__num {
  position: absolute;
  top: -16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .35);
  border: 4px solid var(--cream-50);
}

[dir="rtl"] .process-step__num { transform: translateX(50%); }

.process-step__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: var(--sp-5) auto var(--sp-4);
}

.process-step__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-3);
}

.process-step__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
}

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* Form Section with Aside */
.join-form-section { background: var(--white); }
.join-form-section--alt { background: var(--cream-50); }

.join-form-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-12);
  align-items: start;
}

.join-form-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.join-form-aside__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--sp-5);
  box-shadow: 0 8px 22px rgba(184, 91, 122, .25);
}

.join-form-aside--alt .join-form-aside__icon {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  box-shadow: 0 8px 22px rgba(15, 52, 65, .25);
}

.join-form-aside__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--teal-800);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-tight);
}

.join-form-aside__desc {
  font-size: var(--text-md);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-8);
  max-width: 100%;
}

.join-form-aside__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.join-form-aside__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  transition: all var(--t-base);
}

.join-form-aside__points li:hover {
  border-color: var(--rose-300);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(184, 91, 122, .12);
}

.join-form-aside__points li > i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(184, 91, 122, .25);
}

.join-form-aside__points li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.join-form-aside__points li strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--teal-800);
}

.join-form-aside__points li > div span {
  font-size: var(--text-xs);
  color: var(--gray-600);
}

.join-form { width: 100%; }

/* Form Checkbox */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3);
  background: var(--cream-50);
  border-radius: var(--r-sm);
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rose-500);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.form-checkbox label {
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  line-height: var(--lh-body);
}

.form-checkbox label a {
  color: var(--rose-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-checkbox label a:hover { color: var(--rose-600); }

@media (max-width: 1024px) {
  .join-form-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .join-form-aside { position: static; }
}


/* FAQ */
.join-faq-section { background: var(--white); }

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--t-base);
}

.faq-item:hover { border-color: var(--rose-200); }

.faq-item[open] {
  background: var(--white);
  border-color: var(--rose-300);
  box-shadow: 0 8px 24px rgba(184, 91, 122, .10);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.faq-item summary i {
  color: var(--rose-500);
  font-size: .85em;
  transition: transform var(--t-base);
  flex-shrink: 0;
}

.faq-item[open] summary i { transform: rotate(180deg); }

.faq-item p {
  padding: 0 var(--sp-6) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-loose);
  margin: 0;
}


/* ══════════════════════════════════════════════
   35. EVENTS V2 — State System + Tabs + Featured
   ══════════════════════════════════════════════ */

/* ── Featured Upcoming Banner ── */
.events-featured-section {
  background: var(--white);
  padding-block-start: var(--sp-12);
  padding-block-end: var(--sp-8);
}

.events-featured {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: var(--sp-10);
  align-items: stretch;
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%);
  border-radius: var(--r-2xl);
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(15, 52, 65, .25);
}

.events-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(184, 91, 122, .25), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 100%, rgba(212, 164, 76, .12), transparent 70%);
  pointer-events: none;
}

.events-featured__media {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  isolation: isolate;
}

.events-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-featured__live-badge {
  position: absolute;
  top: var(--sp-5);
  inset-inline-start: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  background: rgba(255, 255, 255, .96);
  color: var(--rose-600);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  z-index: 2;
}

.events-featured__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-500);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.events-featured__body {
  padding: var(--sp-10) var(--sp-8);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}

.events-featured__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rose-200);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.events-featured__eyebrow i {
  color: var(--gold-light);
  font-size: .9em;
}

.events-featured__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-3);
}

.events-featured__subtitle {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, .80);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
  font-weight: 500;
}

.events-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  padding-block: var(--sp-5);
  border-block: 1px solid rgba(229, 156, 180, .18);
}

.events-featured__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}

.events-featured__meta-item i {
  color: var(--rose-300);
  font-size: .9em;
}

.events-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.countdown--inline {
  max-width: 100%;
  margin-bottom: 0;
}

.countdown--inline .countdown__unit {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(229, 156, 180, .15);
}

@media (max-width: 1024px) {
  .events-featured {
    grid-template-columns: 1fr;
  }
  .events-featured__media {
    min-height: 280px;
  }
  .events-featured__body {
    padding: var(--sp-8) var(--sp-6);
  }
  .events-featured__title {
    font-size: var(--text-4xl);
  }
}


/* ── State Tabs ── */
.events-tabs-section {
  background: var(--white);
  padding-block: var(--sp-6);
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--rose-100);
}

.events-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--sp-2);
}

.events-tabs::-webkit-scrollbar { display: none; }

.events-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 20px;
  background: var(--white);
  border: 1.5px solid var(--rose-100);
  border-radius: var(--r-full);
  color: var(--gray-600);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.events-tab:hover {
  border-color: var(--rose-300);
  color: var(--rose-600);
  background: var(--rose-50);
}

.events-tab--active {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  border-color: var(--rose-500);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .30);
}

.events-tab__arrow {
  font-size: .85em;
  opacity: .8;
}

[dir="rtl"] .events-tab__arrow.fa-arrow-right {
  transform: rotate(180deg);
}

.events-tab__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose-500);
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.events-tab--active .events-tab__live-dot {
  background: var(--white);
}

.events-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: rgba(184, 91, 122, .12);
  color: var(--rose-600);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.events-tab--active .events-tab__count {
  background: rgba(255, 255, 255, .25);
  color: var(--white);
}


/* ── Filters Bar v2 ── */
.events-filters-wrap {
  padding-block-start: var(--sp-8);
}

.filters-bar--v2 {
  margin-top: 0;
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: 1.5fr auto auto;
  grid-template-areas:
    "search country year"
    "chips chips chips";
  gap: var(--sp-4);
  align-items: end;
}

.filters-bar--v2 .filter-search { grid-area: search; }
.filters-bar--v2 .filter-group:nth-of-type(1) { grid-area: country; min-width: 140px; }
.filters-bar--v2 .filter-group:nth-of-type(2) { grid-area: year; min-width: 120px; }
.filters-bar--v2 .filter-chips { grid-area: chips; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rose-100);
}

.filter-chip {
  padding: 7px 16px;
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  color: var(--gray-700);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  letter-spacing: var(--ls-wide);
}

.filter-chip:hover {
  border-color: var(--rose-300);
  background: var(--white);
}

.filter-chip--active {
  background: var(--rose-500);
  border-color: var(--rose-500);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(184, 91, 122, .25);
}

@media (max-width: 768px) {
  .filters-bar--v2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "country"
      "year"
      "chips";
  }
}


/* ── Active filters strip ── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  background: var(--cream-100);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
}

.active-filters__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: var(--ls-wide);
  margin-inline-end: var(--sp-2);
}

.active-filters__label i { color: var(--rose-500); }

.active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--rose-200);
  color: var(--rose-600);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
}

.active-filters__chip:hover {
  background: var(--rose-50);
  border-color: var(--rose-400);
}

.active-filters__chip i { font-size: .75em; opacity: .7; }

.active-filters__clear-all {
  margin-inline-start: auto;
  padding: 4px 12px;
  background: transparent;
  border: none;
  color: var(--rose-500);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.active-filters__clear-all:hover { color: var(--rose-700); }


/* ── Event Cards V2 — State variants ── */
.ev-grid--v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 768px) {
  .ev-grid--v2 { grid-template-columns: 1fr; }
}

.ev-card { position: relative; }

/* State badges (top-start, replaces old tag position) */
.ev-state-badge {
  position: absolute;
  top: var(--sp-4);
  inset-inline-start: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(8px);
}

/* When state badge is present, push the type tag to bottom-start of cover */
.ev-card[data-state] .ev-card__tag {
  top: auto;
  bottom: var(--sp-4);
  inset-inline-start: var(--sp-4);
  inset-inline-end: auto;
  left: auto;
  right: auto;
}
[dir="rtl"] .ev-card[data-state] .ev-card__tag {
  left: auto;
  right: auto;
}

.ev-state-badge i { font-size: .85em; }

.ev-state-badge--upcoming {
  background: rgba(45, 123, 142, .92);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(45, 123, 142, .4);
}

.ev-state-badge--live {
  background: rgba(217, 68, 68, .94);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(217, 68, 68, .4);
}

.ev-state-badge__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.ev-state-badge--ended {
  background: rgba(124, 116, 104, .85);
  color: var(--white);
}

.ev-card--ended .ev-card__inner img {
  filter: grayscale(.6) brightness(.85);
  transition: filter .4s var(--ease-expo);
}

.ev-card--ended:hover .ev-card__inner img {
  filter: grayscale(.2) brightness(.95);
}

.ev-card--live {
  border: 2px solid rgba(217, 68, 68, .35);
  box-shadow: 0 8px 24px rgba(217, 68, 68, .15), var(--sh-sm);
}

.ev-card--live::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(217, 68, 68, .25);
  pointer-events: none;
  animation: live-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes live-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.01); }
}

.ev-card--live .ev-card__date--live .ev-card__date-day {
  color: var(--error);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: .04em;
}


/* Mini countdown — inline pill, only on upcoming cards */
.ev-card__mini-countdown {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: var(--sp-3);
  background: rgba(255, 255, 255, .14);
  color: var(--rose-100);
  border: 1px solid rgba(229, 156, 180, .28);
  align-self: flex-start;
  width: fit-content;
  backdrop-filter: blur(6px);
}

.ev-card--upcoming .ev-card__mini-countdown { display: inline-flex; }

.ev-card__mini-countdown i { color: var(--rose-200); font-size: .9em; }


/* ── No Events Message v2 ── */
.no-events-message {
  text-align: center;
  padding: var(--sp-14) var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  background: var(--cream-50);
  border: 1px dashed var(--rose-200);
  border-radius: var(--r-xl);
  margin-top: var(--sp-8);
}

.no-events-message i {
  font-size: 2.4rem;
  color: var(--rose-300);
  margin-bottom: var(--sp-2);
}

.no-events-message h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--teal-800);
  font-weight: 700;
  margin: 0;
}

.no-events-message p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  max-width: 380px;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: var(--sp-3);
  line-height: var(--lh-body);
}

.no-events-message .btn {
  padding: 10px 22px;
  font-size: var(--text-xs);
}


/* ══════════════════════════════════════════════
   36. EVENT DETAIL V2 — Sticky bar · Hero · Sidebar · Agenda · Speakers
   ══════════════════════════════════════════════ */

/* Sticky bar */
.evd-sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--rose-200);
  box-shadow: 0 4px 16px rgba(184, 91, 122, .10);
  transform: translateY(-100%);
  transition: transform .35s var(--ease-expo);
  padding: var(--sp-3) 0;
}

.evd-sticky-bar--visible {
  transform: translateY(0);
}

.evd-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.evd-sticky-bar__info {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.evd-sticky-bar__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evd-sticky-bar__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 12px;
  background: var(--rose-50);
  border-radius: var(--r-full);
  color: var(--rose-600);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.evd-sticky-bar__date i {
  font-size: .85em;
}

@media (max-width: 540px) {
  .evd-sticky-bar__title {
    font-size: var(--text-sm);
  }
  .evd-sticky-bar__date {
    display: none;
  }
}


/* Event Detail Hero */
.evd-hero {
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-900));
}

.evd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.evd-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.32) saturate(1.1);
}

.evd-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 52, 65, .5) 0%, rgba(15, 52, 65, .85) 100%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184, 91, 122, .25), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 90%, rgba(212, 164, 76, .12), transparent 70%);
}

.evd-hero__content {
  max-width: 880px;
}

.evd-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.evd-state-badge,
.evd-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.evd-state-badge--upcoming {
  background: rgba(45, 123, 142, .85);
  color: var(--white);
  border: 1px solid rgba(159, 195, 203, .35);
}

.evd-type-badge {
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .92);
  border: 1px solid rgba(229, 156, 180, .25);
}

.evd-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

.evd-hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, .92);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-8);
  font-weight: 500;
  font-family: var(--font-heading);
}

.evd-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(229, 156, 180, .18);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  margin-bottom: var(--sp-7);
}

.evd-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.evd-hero__meta-item > i {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(229, 156, 180, .15);
  color: var(--rose-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 1px solid rgba(229, 156, 180, .25);
}

.evd-hero__meta-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: 700;
  margin-bottom: 2px;
}

.evd-hero__meta-value {
  display: block;
  font-size: var(--text-sm);
  color: var(--white);
  font-weight: 700;
}

.evd-countdown {
  max-width: 580px;
  margin: 0;
}

.evd-countdown.countdown .countdown__unit {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(229, 156, 180, .18);
}

.evd-countdown.countdown .countdown__value {
  color: var(--rose-200);
}

@media (max-width: 1024px) {
  .evd-hero__meta { grid-template-columns: repeat(2, 1fr); }
  .evd-hero__title { font-size: var(--text-5xl); }
}

@media (max-width: 540px) {
  .evd-hero__meta { grid-template-columns: 1fr; }
  .evd-hero__title { font-size: var(--text-4xl); }
  .evd-hero__subtitle { font-size: var(--text-md); }
}


/* Main Layout */
.evd-layout-section {
  background: var(--white);
}

.evd-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-10);
  align-items: start;
}

.evd-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

@media (max-width: 1024px) {
  .evd-layout {
    grid-template-columns: 1fr;
  }
}


/* Block component (used for description, agenda, speakers, etc.) */
.evd-block__header {
  margin-bottom: var(--sp-7);
}

.evd-block__header .eyebrow {
  margin-bottom: var(--sp-3);
}

.evd-block__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--teal-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}

.evd-block__desc {
  font-size: var(--text-md);
  color: var(--gray-600);
  line-height: var(--lh-body);
}

.evd-block__body p {
  font-size: var(--text-md);
  color: var(--gray-700);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-4);
  max-width: 100%;
}


/* Agenda Timeline */
.evd-agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.evd-agenda::before {
  content: '';
  position: absolute;
  top: 32px;
  bottom: 32px;
  inset-inline-start: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--rose-200), var(--rose-300), var(--rose-200));
  border-radius: 2px;
}

.evd-agenda__item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  margin-inline-start: var(--sp-12);
  transition: all var(--t-base);
}

.evd-agenda__item::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: -36px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--rose-300);
  z-index: 1;
}

.evd-agenda__item:hover {
  border-color: var(--rose-300);
  box-shadow: 0 8px 24px rgba(184, 91, 122, .10);
  transform: translateX(-2px);
}

[dir="rtl"] .evd-agenda__item:hover { transform: translateX(2px); }

.evd-agenda__item--main {
  background: linear-gradient(135deg, var(--rose-50) 0%, var(--cream-100) 100%);
  border-color: var(--rose-300);
}

.evd-agenda__item--main::before {
  background: var(--rose-500);
  border-color: var(--rose-200);
  box-shadow: 0 0 0 4px rgba(184, 91, 122, .12);
}

.evd-agenda__time {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--rose-600);
  align-self: start;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}

.evd-agenda__chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--rose-500);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.evd-agenda__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-2);
}

.evd-agenda__speaker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--rose-600);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.evd-agenda__speaker i { font-size: .85em; opacity: .7; }

.evd-agenda__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
}

@media (max-width: 540px) {
  .evd-agenda__item {
    grid-template-columns: 1fr;
    margin-inline-start: var(--sp-10);
  }
  .evd-agenda__item::before { inset-inline-start: -37px; }
  .evd-agenda::before { inset-inline-start: 16px; }
}


/* Speakers Grid */
.evd-speakers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.evd-speaker {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  transition: all var(--t-base);
  position: relative;
}

.evd-speaker:hover {
  border-color: var(--rose-300);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(184, 91, 122, .12);
}

.evd-speaker--moderator {
  background: linear-gradient(135deg, var(--cream-100), var(--white));
  border-color: var(--rose-200);
}

.evd-speaker__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
  margin-bottom: var(--sp-4);
  border: 4px solid var(--white);
  box-shadow: 0 8px 20px rgba(184, 91, 122, .25);
}

.evd-speaker__badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--gold);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.evd-speaker__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-1);
}

.evd-speaker__role {
  display: block;
  font-size: var(--text-xs);
  color: var(--rose-500);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.evd-speaker__bio {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
}

@media (max-width: 768px) {
  .evd-speakers { grid-template-columns: 1fr; }
}


/* Resources */
.evd-resources {
  display: grid;
  gap: var(--sp-3);
}

.evd-resource {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
}

.evd-resource:hover {
  background: var(--white);
  border-color: var(--rose-300);
  box-shadow: 0 8px 22px rgba(184, 91, 122, .12);
  transform: translateY(-2px);
}

.evd-resource__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(184, 91, 122, .25);
}

.evd-resource__icon--image {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  box-shadow: 0 4px 12px rgba(45, 123, 142, .25);
}

.evd-resource__icon--doc {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 4px 12px rgba(212, 164, 76, .25);
}

.evd-resource__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: 2px;
}

.evd-resource__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
}

.evd-resource__cta {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rose-50);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
  transition: all var(--t-base);
  flex-shrink: 0;
}

.evd-resource:hover .evd-resource__cta {
  background: var(--rose-500);
  color: var(--white);
  transform: scale(1.08);
}


/* Co-organizer partners */
.evd-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

.evd-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  height: 110px;
  transition: all var(--t-base);
}

.evd-partner:hover {
  border-color: var(--rose-300);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(184, 91, 122, .12);
}

.evd-partner img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  filter: grayscale(.4);
  transition: filter var(--t-base);
}

.evd-partner:hover img {
  filter: grayscale(0);
}

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


/* ─── SIDEBAR ─── */
.evd-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.evd-side-card {
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}

.evd-side-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rose-100);
}

.evd-side-card__title i {
  color: var(--rose-500);
  font-size: .9em;
}

.evd-side-card__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-5);
}


/* Registration Card */
.evd-register-card {
  background: linear-gradient(160deg, var(--rose-50) 0%, var(--cream-100) 60%, var(--white) 100%);
  border-color: var(--rose-200);
  box-shadow: 0 12px 32px rgba(184, 91, 122, .12);
}

.evd-register-card .evd-side-card__title {
  font-size: var(--text-lg);
  border-color: var(--rose-200);
}

.evd-register-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.evd-register-form .form-group {
  margin-bottom: 0;
}

.evd-register-form__submit {
  width: 100%;
  margin-top: var(--sp-4);
  gap: var(--sp-3);
  padding: 14px 24px;
  font-size: var(--text-base);
}

.evd-register-form__submit i { font-size: 1em; }

.evd-register-success {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}

.evd-register-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: var(--sp-4);
  box-shadow: 0 8px 22px rgba(45, 168, 122, .35);
}

.evd-register-success h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--teal-800);
  margin-bottom: var(--sp-2);
  font-weight: 700;
}

.evd-register-success p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
}


/* Calendar buttons */
.evd-calendar-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.evd-calendar-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  width: 100%;
}

.evd-calendar-btn:hover {
  background: var(--rose-50);
  border-color: var(--rose-300);
  color: var(--rose-600);
  transform: translateX(-2px);
}

[dir="rtl"] .evd-calendar-btn:hover { transform: translateX(2px); }

.evd-calendar-btn i {
  width: 22px;
  text-align: center;
  color: var(--rose-500);
  font-size: 1rem;
}


/* Multi-timezone */
.evd-timezones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.evd-tz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-sm);
}

.evd-tz__city {
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-weight: 600;
}

.evd-tz__time {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--rose-600);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}


/* Share */
.evd-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.evd-share__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}

.evd-share__btn:hover {
  transform: translateY(-3px);
  color: var(--white);
  border-color: transparent;
}

.evd-share__btn--whatsapp:hover { background: #25D366; }
.evd-share__btn--telegram:hover { background: #229ED9; }
.evd-share__btn--twitter:hover { background: #000; }
.evd-share__btn--facebook:hover { background: #1877F2; }
.evd-share__btn--copy:hover { background: var(--rose-500); }

.evd-share__hint {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin: 0;
  font-style: italic;
}


/* ══════════════════════════════════════════════
   37. PARTNERS — Real organizations strip
   ══════════════════════════════════════════════ */
.partners-section {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(184, 91, 122, .06), transparent 70%),
    var(--white);
  position: relative;
  overflow: hidden;
}

/* ── Partners Swiper ── */
.partners-swiper-wrap {
  position: relative;
}

.partners-swiper {
  overflow: hidden;
  padding: var(--sp-3) var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.partners-swiper .swiper-slide {
  width: 200px;
  height: auto;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all .35s var(--ease-expo);
  cursor: pointer;
}

.partner-logo:hover {
  border-color: var(--rose-300);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(184, 91, 122, .15);
}

.partner-logo img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  filter: grayscale(.55) opacity(.78);
  transition: filter var(--t-base);
}

.partner-logo:hover img {
  filter: grayscale(0) opacity(1);
}

/* Nav buttons */
.partners-swiper-nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.partners-prev,
.partners-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rose-200);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--t-base);
}

.partners-prev:hover,
.partners-next:hover {
  background: var(--rose-500);
  color: var(--white);
  border-color: var(--rose-500);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .25);
  transform: translateY(-2px);
}

.partners-prev.swiper-button-disabled,
.partners-next.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .partners-swiper .swiper-slide { width: 150px; }
  .partner-logo { height: 90px; padding: var(--sp-3); }
  .partner-logo img { max-height: 54px; }
}


/* CTA below partners */
.partners-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding: var(--sp-5) var(--sp-7);
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  max-width: 640px;
  margin-inline: auto;
}

.partners-cta__text {
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-weight: 600;
  margin: 0;
}

@media (max-width: 540px) {
  .partners-cta {
    flex-direction: column;
    border-radius: var(--r-xl);
  }
}


/* ══════════════════════════════════════════════
   38. EVENTS CALENDAR VIEW
   ══════════════════════════════════════════════ */

/* Tabs row with view toggle */
.events-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.ev-view-toggle {
  display: inline-flex;
  background: var(--cream-100);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}

.ev-view-toggle__btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ev-view-toggle__btn:hover {
  color: var(--rose-500);
}

.ev-view-toggle__btn--active {
  background: var(--rose-500);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(184, 91, 122, .25);
}


/* Calendar */
.ev-calendar {
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
  box-shadow: 0 8px 28px rgba(184, 91, 122, .08);
}

.ev-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rose-100);
}

.ev-calendar__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose-50);
  color: var(--rose-500);
  border: 1px solid var(--rose-100);
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ev-calendar__nav:hover {
  background: var(--rose-500);
  color: var(--white);
  border-color: var(--rose-500);
}

.ev-calendar__month {
  flex: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--teal-800);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.ev-calendar__today {
  padding: 7px 16px;
  background: var(--rose-500);
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  letter-spacing: var(--ls-wide);
}

.ev-calendar__today:hover {
  background: var(--rose-600);
  transform: translateY(-1px);
}

.ev-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.ev-calendar__weekdays span {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rose-600);
  padding: 8px 4px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.ev-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}

.ev-cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px;
  background: var(--cream-50);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  transition: all var(--t-base);
}

.ev-cal-day__num {
  font-size: var(--text-md);
  font-weight: 700;
}

.ev-cal-day--out {
  color: var(--gray-300);
  background: transparent;
}

.ev-cal-day--out span { font-size: var(--text-sm); font-weight: 500; }

.ev-cal-day--today {
  background: var(--rose-500);
  color: var(--white);
  font-weight: 800;
}

.ev-cal-day--today .ev-cal-day__num {
  color: var(--white);
}

.ev-cal-day--has-events {
  cursor: pointer;
  background: var(--rose-50);
  border-color: var(--rose-200);
}

.ev-cal-day--has-events:hover {
  background: var(--white);
  border-color: var(--rose-400);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .15);
  transform: translateY(-2px);
}

.ev-cal-day--today.ev-cal-day--has-events {
  background: var(--rose-500);
  border-color: var(--rose-600);
}

.ev-cal-day--today.ev-cal-day--has-events:hover {
  background: var(--rose-600);
  border-color: var(--rose-700);
}

.ev-cal-day__dots {
  display: flex;
  gap: 3px;
  margin-top: auto;
  padding-bottom: 4px;
}

.ev-cal-day__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ev-cal-day__dot--upcoming { background: var(--teal-500); }
.ev-cal-day__dot--live { background: var(--error); animation: pulse-dot 1.5s ease-in-out infinite; }
.ev-cal-day__dot--ended { background: var(--gray-400); }

.ev-cal-day--today .ev-cal-day__dot--upcoming,
.ev-cal-day--today .ev-cal-day__dot--live,
.ev-cal-day--today .ev-cal-day__dot--ended { background: var(--white); }

/* Calendar legend */
.ev-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rose-100);
}

.ev-calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-600);
  font-weight: 600;
}

.ev-calendar__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ev-calendar__legend-dot--upcoming { background: var(--teal-500); }
.ev-calendar__legend-dot--live { background: var(--error); }
.ev-calendar__legend-dot--ended { background: var(--gray-400); }


/* Day Events Panel */
.ev-cal-panel {
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  box-shadow: 0 8px 24px rgba(184, 91, 122, .12);
  animation: panel-in .3s var(--ease-expo);
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ev-cal-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rose-100);
}

.ev-cal-panel__date {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin: 0;
}

.ev-cal-panel__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rose-50);
  color: var(--rose-500);
  border: 1px solid var(--rose-100);
  cursor: pointer;
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ev-cal-panel__close:hover {
  background: var(--rose-500);
  color: var(--white);
}

.ev-cal-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ev-cal-panel__link {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
}

.ev-cal-panel__link:hover {
  background: var(--white);
  border-color: var(--rose-300);
  transform: translateX(-3px);
}

[dir="rtl"] .ev-cal-panel__link:hover { transform: translateX(3px); }

.ev-cal-panel__time {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--rose-600);
  letter-spacing: var(--ls-tight);
}

.ev-cal-panel__tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--rose-100);
  color: var(--rose-700);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-1);
}

.ev-cal-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--teal-800);
  margin: 0;
  line-height: var(--lh-snug);
}

.ev-cal-panel__link i {
  color: var(--rose-500);
  font-size: .85em;
}

[dir="rtl"] .ev-cal-panel__link i {
  transform: rotate(180deg);
}

@media (max-width: 540px) {
  .ev-calendar { padding: var(--sp-4); }
  .ev-calendar__header { flex-wrap: wrap; }
  .ev-calendar__month { font-size: var(--text-md); order: -1; width: 100%; margin-bottom: var(--sp-3); }
  .ev-calendar__weekdays span { font-size: 10px; padding: 6px 2px; }
  .ev-cal-day__num { font-size: var(--text-sm); }
  .ev-cal-day__dot { width: 4px; height: 4px; }
}


/* ══════════════════════════════════════════════
   39. NEWS · BLOG — Featured · Tabs · Cards
   ══════════════════════════════════════════════ */

/* ── Featured article banner ── */
.news-featured-section {
  background: var(--white);
  padding-block-start: var(--sp-12);
  padding-block-end: var(--sp-8);
}

.news-featured {
  display: block;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(184, 91, 122, .10);
  transition: all .4s var(--ease-expo);
}

.news-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(184, 91, 122, .18);
  border-color: var(--rose-200);
}

.news-featured__link {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

.news-featured__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
}

.news-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-expo);
}

.news-featured:hover .news-featured__media img {
  transform: scale(1.04);
}

.news-featured__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(15, 52, 65, .5) 100%);
  pointer-events: none;
}

.news-featured__category {
  position: absolute;
  top: var(--sp-5);
  inset-inline-start: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  background: rgba(184, 91, 122, .92);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(184, 91, 122, .35);
  z-index: 2;
}

.news-featured__category i { font-size: .85em; }

.news-featured__body {
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.news-featured__date,
.news-featured__read-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

.news-featured__date i,
.news-featured__read-time i { color: var(--rose-500); font-size: .9em; }

.news-featured__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--teal-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}

.news-featured__excerpt {
  font-size: var(--text-md);
  color: var(--gray-700);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-7);
  max-width: 100%;
  font-style: italic;
}

.news-featured__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
}

.news-featured__author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.news-featured__author-label {
  display: block;
  font-size: 10px;
  color: var(--rose-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: 2px;
}

.news-featured__author-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--teal-800);
  font-weight: 700;
}

.news-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--rose-600);
  letter-spacing: var(--ls-wide);
  align-self: flex-start;
  transition: gap .25s var(--ease-expo);
}

.news-featured__cta i { font-size: .85em; }

[dir="rtl"] .news-featured__cta i { transform: rotate(180deg); }

.news-featured:hover .news-featured__cta { gap: var(--sp-3); }

@media (max-width: 1024px) {
  .news-featured__link { grid-template-columns: 1fr; }
  .news-featured__media { aspect-ratio: 16 / 9; }
  .news-featured__body { padding: var(--sp-8) var(--sp-6); }
  .news-featured__title { font-size: var(--text-3xl); }
}


/* ── Tabs ── */
.news-tabs-section {
  background: var(--cream-50);
  padding-block: var(--sp-6);
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky);
  backdrop-filter: blur(12px) saturate(1.4);
  background: rgba(252, 248, 242, .94);
  border-bottom: 1px solid var(--rose-100);
}

.news-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.news-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.news-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 18px;
  background: var(--white);
  border: 1.5px solid var(--rose-100);
  border-radius: var(--r-full);
  color: var(--gray-600);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}

.news-tab:hover {
  border-color: var(--rose-300);
  color: var(--rose-600);
  background: var(--rose-50);
}

.news-tab--active {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  border-color: var(--rose-500);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .28);
}

.news-tab i { font-size: .9em; }

.news-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  background: var(--rose-100);
  color: var(--rose-700);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
}

.news-tab--active .news-tab__count {
  background: rgba(255, 255, 255, .25);
  color: var(--white);
}


/* Search */
.news-search {
  position: relative;
  min-width: 280px;
  flex: 1;
  max-width: 360px;
}

.news-search i {
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  transform: translateY(-50%);
  color: var(--rose-400);
  font-size: .9em;
}

.news-search input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  color: var(--gray-800);
  font-family: inherit;
  transition: all var(--t-base);
}

[dir="rtl"] .news-search input {
  padding: 10px 38px 10px 16px;
}

.news-search input:focus {
  outline: none;
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px rgba(184, 91, 122, .12);
}

@media (max-width: 768px) {
  .news-search { max-width: 100%; min-width: 100%; }
}


/* ── News Grid ── */
.news-listing-section {
  background: var(--white);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
}

.news-card {
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: all .35s var(--ease-expo);
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--rose-300);
  box-shadow: 0 18px 40px rgba(184, 91, 122, .14);
}

.news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-100);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-expo);
}

.news-card:hover .news-card__media img {
  transform: scale(1.06);
}

.news-card__cat {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.news-card__cat--news {
  background: rgba(45, 123, 142, .92);
  color: var(--white);
}

.news-card__cat--blog {
  background: rgba(184, 91, 122, .92);
  color: var(--white);
}

.news-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.news-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

.news-card__date i { color: var(--rose-400); font-size: .9em; }

.news-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  line-height: var(--lh-snug);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s var(--ease-expo);
}

.news-card:hover .news-card__title { color: var(--rose-600); }

.news-card__excerpt {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__author-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 10px;
  background: var(--rose-50);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--rose-700);
  width: fit-content;
}

.news-card__author-mini i { color: var(--rose-500); font-size: .85em; }

.news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--rose-500);
  letter-spacing: var(--ls-wide);
  margin-top: auto;
  padding-top: var(--sp-2);
  transition: gap .25s var(--ease-expo);
}

.news-card__cta i { font-size: .85em; }

[dir="rtl"] .news-card__cta i { transform: rotate(180deg); }

.news-card:hover .news-card__cta { gap: var(--sp-3); color: var(--rose-600); }


/* ── Newsletter strip ── */
.newsletter-strip-section { background: var(--cream-50); }

.newsletter-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-7) var(--sp-8);
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--rose-50) 100%);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  position: relative;
  overflow: hidden;
}

.newsletter-strip::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -100px;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .1), transparent 70%);
  pointer-events: none;
}

.newsletter-strip__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(184, 91, 122, .25);
  position: relative;
  z-index: 2;
}

.newsletter-strip__body { position: relative; z-index: 2; }

.newsletter-strip__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--teal-800);
  margin-bottom: var(--sp-1);
  letter-spacing: var(--ls-tight);
}

.newsletter-strip__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 0;
  line-height: var(--lh-body);
}

.newsletter-strip__form {
  display: flex;
  gap: var(--sp-2);
  position: relative;
  z-index: 2;
}

.newsletter-strip__form input {
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--text-sm);
  min-width: 240px;
  transition: all var(--t-base);
}

.newsletter-strip__form input:focus {
  outline: none;
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(184, 91, 122, .15);
}

.newsletter-strip__form button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .25);
}

.newsletter-strip__form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(184, 91, 122, .35);
}

@media (max-width: 768px) {
  .newsletter-strip {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
  }
  .newsletter-strip__icon { margin-inline: auto; }
  .newsletter-strip__form { flex-direction: column; }
  .newsletter-strip__form input { min-width: 0; }
}


/* ══════════════════════════════════════════════
   40. ARTICLE READING PAGE — Hero · Body · Sidebar · Nav
   ══════════════════════════════════════════════ */

/* Reading progress bar */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rose-50);
  z-index: 1000;
  pointer-events: none;
}

.article-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rose-500), var(--rose-700));
  transition: width .15s ease-out;
  box-shadow: 0 0 8px rgba(184, 91, 122, .4);
}


/* Article hero */
.article-hero {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-900));
}

.article-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.article-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.30) saturate(1.1);
}

.article-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 52, 65, .5) 0%, rgba(15, 52, 65, .92) 100%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184, 91, 122, .25), transparent 70%);
}

.article-hero__breadcrumb {
  margin-bottom: var(--sp-6);
}

.article-hero__content {
  max-width: 880px;
}

.article-hero__category {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: rgba(184, 91, 122, .92);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  backdrop-filter: blur(8px);
}

.article-hero__category i { font-size: .85em; opacity: .85; }

.article-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-7);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

.article-hero__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(229, 156, 180, .25);
}

.article-hero__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.article-hero__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 3px solid rgba(255, 255, 255, .2);
}

.article-hero__author-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
}

.article-hero__author-role {
  display: block;
  font-size: 11px;
  color: var(--rose-200);
  letter-spacing: var(--ls-wide);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.article-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
}

.article-hero__meta-item i { color: var(--rose-300); font-size: .85em; }

@media (max-width: 768px) {
  .article-hero__title { font-size: var(--text-4xl); }
  .article-hero__byline { flex-direction: column; align-items: flex-start; }
}


/* Article layout */
.article-layout-section { background: var(--white); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-12);
  align-items: start;
}

@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* Article body */
.article-body {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--gray-800);
  max-width: 720px;
  margin-inline: auto;
}

.article-body p {
  margin-bottom: var(--sp-5);
  max-width: 100%;
}

.article-body__intro {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--rose-600);
  font-weight: 600;
  line-height: var(--lh-snug);
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(135deg, var(--rose-50), var(--cream-100));
  border-inline-start: 4px solid var(--rose-500);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-7) !important;
  font-style: italic;
}

.article-body h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--teal-800);
  letter-spacing: var(--ls-tight);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--rose-100);
  position: relative;
}

.article-body h2::before {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 60px;
  height: 2px;
  background: var(--rose-500);
}

.article-body h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--teal-700);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}

.article-quote {
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--rose-50) 100%);
  border-inline-start: 4px solid var(--rose-500);
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-md);
  margin: var(--sp-7) 0;
  position: relative;
}

.article-quote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  inset-inline-start: var(--sp-5);
  font-size: 4rem;
  color: var(--rose-300);
  font-family: serif;
  line-height: 1;
}

.article-quote p {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--teal-800);
  font-weight: 600;
  font-style: italic;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
  text-align: center;
}

.article-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--rose-600);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-align: center;
  text-transform: uppercase;
}

.article-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-200), transparent);
  margin: var(--sp-10) 0;
}

.article-body__continue-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-100);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-style: italic;
  border: 1px dashed var(--rose-200);
}

.article-body__continue-note i {
  color: var(--rose-500);
  font-size: 1.1em;
  flex-shrink: 0;
}


/* Article tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rose-100);
}

.article-tags__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-600);
  margin-inline-end: var(--sp-2);
}

.article-tag {
  padding: 5px 14px;
  background: var(--rose-50);
  color: var(--rose-700);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--t-base);
}

.article-tag:hover {
  background: var(--rose-500);
  color: var(--white);
  border-color: var(--rose-500);
  transform: translateY(-1px);
}


/* Author card */
.article-author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-7);
  background: linear-gradient(135deg, var(--cream-100), var(--rose-50));
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  margin-top: var(--sp-8);
}

.article-author-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-400), var(--rose-600));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border: 4px solid var(--white);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .22);
  flex-shrink: 0;
}

.article-author-card__label {
  display: block;
  font-size: 10px;
  color: var(--rose-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-bottom: var(--sp-1);
}

.article-author-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: var(--sp-2);
}

.article-author-card__bio {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 100%;
}

@media (max-width: 540px) {
  .article-author-card { grid-template-columns: 1fr; text-align: center; }
  .article-author-card__avatar { margin-inline: auto; }
}


/* Article Sidebar */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.article-side-card {
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}

.article-side-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rose-100);
}

.article-side-card__title i { color: var(--rose-500); font-size: .9em; }

.article-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.article-toc__list a {
  display: block;
  padding: 8px 12px;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  border-inline-start: 3px solid transparent;
  transition: all var(--t-base);
  line-height: var(--lh-snug);
}

.article-toc__list a:hover {
  background: var(--rose-50);
  border-inline-start-color: var(--rose-400);
  color: var(--rose-600);
}


/* Related articles */
.article-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.article-related-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--sp-3);
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--t-base);
}

.article-related-item:hover {
  background: var(--rose-50);
}

.article-related-item img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--rose-100);
}

.article-related-item__date {
  display: block;
  font-size: 10px;
  color: var(--rose-500);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  margin-bottom: 4px;
}

.article-related-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal-800);
  margin: 0;
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Prev/Next nav */
.article-nav-section { background: var(--cream-50); }

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
}

.article-nav__item:hover {
  border-color: var(--rose-300);
  background: var(--cream-50);
  box-shadow: 0 12px 28px rgba(184, 91, 122, .10);
}

.article-nav__item--next {
  text-align: end;
  align-items: flex-end;
}

.article-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rose-500);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.article-nav__label i { font-size: .85em; transition: transform var(--t-base); }

[dir="rtl"] .article-nav__label i { transform: rotate(180deg); }

.article-nav__item:hover .article-nav__label i { transform: translateX(0); }

[dir="rtl"] .article-nav__item--prev:hover .article-nav__label i { transform: rotate(180deg) translateX(-3px); }

.article-nav__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__item--next { text-align: start; align-items: flex-start; }
}


/* ══════════════════════════════════════════════
   41. GLOBAL ENHANCEMENTS
   Skip-to-content · Cookie banner · WhatsApp button
   ══════════════════════════════════════════════ */

/* ── Skip-to-content (A11y) ── */
.skip-to-content {
  position: absolute;
  top: -60px;
  inset-inline-start: var(--sp-3);
  z-index: 9999;
  padding: 10px 18px;
  background: var(--rose-500);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(184, 91, 122, .35);
  transition: top .25s var(--ease-expo);
}

.skip-to-content:focus {
  top: var(--sp-3);
  outline: 3px solid var(--rose-200);
  outline-offset: 2px;
}


/* ── Cookie Banner ── */
.cookie-banner {
  position: fixed;
  inset-inline-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 950;
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(15, 52, 65, .25), 0 8px 22px rgba(184, 91, 122, .15);
  opacity: 0;
  transform: translateY(120%);
  transition: opacity .4s var(--ease-expo), transform .4s var(--ease-expo);
  max-width: 640px;
  margin-inline: auto;
}

.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
}

.cookie-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-100), var(--cream-200));
  color: var(--rose-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cookie-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  margin: 0 0 4px;
}

.cookie-banner__desc {
  font-size: var(--text-xs);
  color: var(--gray-600);
  line-height: var(--lh-body);
  margin: 0;
}

.cookie-banner__desc a {
  color: var(--rose-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__desc a:hover {
  color: var(--rose-700);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: all var(--t-base);
  border: 1px solid transparent;
  white-space: nowrap;
}

.cookie-banner__btn i { font-size: .85em; }

.cookie-banner__btn--decline {
  background: var(--cream-100);
  color: var(--gray-700);
  border-color: var(--rose-100);
}

.cookie-banner__btn--decline:hover {
  background: var(--white);
  border-color: var(--rose-300);
}

.cookie-banner__btn--accept {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(184, 91, 122, .25);
}

.cookie-banner__btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(184, 91, 122, .35);
}

@media (max-width: 640px) {
  .cookie-banner {
    inset-inline-start: var(--sp-2);
    inset-inline-end: var(--sp-2);
    bottom: var(--sp-2);
  }
  .cookie-banner__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--sp-5);
  }
  .cookie-banner__icon { margin-inline: auto; }
  .cookie-banner__actions { justify-content: center; }
}


/* ── WhatsApp Floating Button ── */
.wa-float {
  position: fixed;
  bottom: 92px;
  inset-inline-start: var(--sp-5);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: var(--white);
  border-radius: var(--r-full);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 4px 12px rgba(0, 0, 0, .15);
  transition: all var(--t-base);
  isolation: isolate;
}

[dir="rtl"] .wa-float {
  padding: 12px 14px 12px 18px;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 36px rgba(37, 211, 102, .45), 0 6px 18px rgba(0, 0, 0, .2);
  color: var(--white);
}

.wa-float i {
  font-size: 1.4rem;
  line-height: 1;
}

.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: rgba(37, 211, 102, .5);
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .5; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@media (max-width: 540px) {
  .wa-float {
    bottom: 80px;
    inset-inline-start: var(--sp-3);
    padding: 14px;
    width: 56px;
    height: 56px;
    overflow: hidden;
  }
  .wa-float__label {
    display: none;
  }
  .wa-float i {
    font-size: 1.6rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wa-float__pulse { animation: none; }
}


/* ══════════════════════════════════════════════
   42. WORLD MAP — Projects page interactive map
   ══════════════════════════════════════════════ */
.world-map-section {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(184, 91, 122, .05), transparent 70%),
    var(--cream-50);
  position: relative;
  overflow: hidden;
}

.world-map-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 25% at 80% 80%, rgba(212, 164, 76, .06), transparent 70%);
  pointer-events: none;
}

.world-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-6);
  align-items: stretch;
  position: relative;
}

.world-map__canvas {
  position: relative;
  background: linear-gradient(160deg, var(--white) 0%, var(--cream-50) 100%);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  padding: 4px;
  box-shadow:
    0 24px 60px rgba(15, 52, 65, .08),
    0 4px 12px rgba(184, 91, 122, .05);
  overflow: hidden;
}

/* Leaflet container — proportional sizing via aspect-ratio */
.world-map__leaflet {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-2xl) - 6px);
  background: var(--cream-50);
  position: relative;
  z-index: 1;
}

.world-map__leaflet .leaflet-tile-pane {
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  /* Tone down OSM tiles — soften grays so theme dominates */
  filter: saturate(.7) hue-rotate(-8deg) contrast(.95) brightness(1.02);
}

.world-map__leaflet.is-ready .leaflet-tile-pane {
  opacity: 1;
}

@media (max-width: 1024px) {
  .world-map__leaflet { aspect-ratio: 16 / 11; }
}
@media (max-width: 540px) {
  .world-map__leaflet { aspect-ratio: 4 / 3; }
}

/* Cleaner Leaflet zoom controls (theme them) */
.world-map__leaflet .leaflet-bar {
  border: 1px solid var(--rose-100);
  box-shadow: 0 6px 18px rgba(15, 52, 65, .10);
  border-radius: var(--r-md);
  overflow: hidden;
}

.world-map__leaflet .leaflet-bar a {
  background: var(--white);
  color: var(--teal-800);
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-weight: 700;
  border-bottom-color: var(--rose-100) !important;
  transition: background var(--t-base), color var(--t-base);
}

.world-map__leaflet .leaflet-bar a:hover {
  background: var(--rose-50);
  color: var(--rose-600);
}

.world-map__leaflet .leaflet-bar a:first-child {
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.world-map__leaflet .leaflet-bar a:last-child {
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}

/* Attribution — small + subtle */
.world-map__leaflet .leaflet-control-attribution {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  font-size: 10px;
  color: var(--gray-500);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rose-100);
}

.world-map__leaflet .leaflet-control-attribution a {
  color: var(--rose-600);
  text-decoration: none;
  font-weight: 600;
}

/* ─── Custom DivIcon Pins ─── */
/* Container is 40x40 for a generous 44-ish hit area; visible dot is smaller and centered. */
/* DO NOT set `position` here — Leaflet sets `position: absolute` on
   .leaflet-marker-icon and translate3d() positions the marker at lat/lng.
   Overriding that breaks every pin's location on the map. */
.world-map__leaflet .map-pin {
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  border: 0;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-map__leaflet .map-pin:focus-visible {
  outline: none;
}

.world-map__leaflet .map-pin:focus-visible .map-pin__dot {
  box-shadow: 0 0 0 3px var(--rose-300), 0 2px 6px rgba(184, 91, 122, .35);
}

/* The visible dot — clean flat disc with a thick white ring */
.map-pin__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose-500);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 4px rgba(184, 91, 122, .35),
    0 4px 10px rgba(0, 0, 0, .18);
  z-index: 2;
  transition: transform .25s var(--ease-out), background var(--t-base);
}

/* Soft outer pulse */
.map-pin__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--rose-500);
  opacity: .35;
  animation: pin-pulse 2.4s var(--ease-out) infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes pin-pulse {
  0%   { transform: scale(.6); opacity: .45; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.map-pin:hover .map-pin__dot {
  transform: scale(1.25);
  background: var(--rose-600);
}

/* HQ — gold, larger */
.map-pin--hq .map-pin__dot {
  width: 16px;
  height: 16px;
  background: var(--gold);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 5px rgba(212, 164, 76, .45),
    0 6px 14px rgba(212, 164, 76, .35);
}
.map-pin--hq .map-pin__pulse {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  background: var(--gold);
  opacity: .45;
  animation-duration: 2s;
}
.map-pin--hq:hover .map-pin__dot {
  background: var(--gold-dark);
}

/* Focus — teal, mid-size */
.map-pin--focus .map-pin__dot {
  width: 14px;
  height: 14px;
  background: var(--teal-700);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 4px rgba(15, 52, 65, .40),
    0 4px 12px rgba(15, 52, 65, .30);
}
.map-pin--focus .map-pin__pulse {
  background: var(--teal-700);
  animation-duration: 2.6s;
}
.map-pin--focus:hover .map-pin__dot {
  background: var(--teal-800);
}

/* Mobile: slightly larger so still tappable / visible */
@media (max-width: 540px) {
  .map-pin__dot              { width: 14px; height: 14px; }
  .map-pin--hq .map-pin__dot { width: 18px; height: 18px; }
  .map-pin--focus .map-pin__dot { width: 16px; height: 16px; }
}

/* ─── Custom popup styling — light, refined ─── */
.world-map__leaflet .leaflet-popup-content-wrapper {
  background: var(--white);
  color: var(--teal-800);
  border-radius: 10px;
  border: 1px solid var(--rose-100);
  box-shadow:
    0 10px 24px rgba(15, 52, 65, .12),
    0 2px 6px rgba(184, 91, 122, .08);
  padding: 0;
}

.world-map__leaflet .leaflet-popup-content {
  margin: 8px 12px;
  font-family: var(--font-heading);
  line-height: 1.3;
}

.world-map__leaflet .leaflet-popup-tip-container {
  width: 18px;
  height: 10px;
  margin-top: -1px;
}

.world-map__leaflet .leaflet-popup-tip {
  background: var(--white);
  width: 10px;
  height: 10px;
  box-shadow: -1px 1px 0 var(--rose-100);
}

.map-popup {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
  max-width: 200px;
  white-space: nowrap;
}

.map-popup__role {
  font-size: 9px;
  font-weight: 800;
  color: var(--rose-600);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.map-popup__name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0;
  line-height: 1.25;
}

/* Variant: HQ popup — gold accent */
.map-popup--hq .map-popup__role { color: var(--gold-dark); }
.map-popup--focus .map-popup__role { color: var(--teal-700); }

/* ─── Reset / globe button ─── */
.world-map__leaflet .map-reset {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  font-size: 14px;
  color: var(--rose-600) !important;
  background: var(--white);
  margin-top: 6px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--rose-100) !important;
  transition: background var(--t-base), color var(--t-base);
}

.world-map__leaflet .map-reset:hover {
  background: var(--rose-50);
  color: var(--rose-700) !important;
}

/* Gesture-handling overlay theming */
.leaflet-gesture-handling-touch-warning::after,
.leaflet-gesture-handling-scroll-warning::after {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  background: rgba(15, 52, 65, .82);
  backdrop-filter: blur(6px);
  border-radius: var(--r-md);
}

/* ─── Sidebar — redesigned ─── */
.world-map__list {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  max-height: 450px;
  overflow: hidden;        /* hide outer overflow; inner scroll-area handles it */
  box-shadow: 0 14px 38px rgba(15, 52, 65, .06);
}

/* Single inner scroll container — no per-group scrollbars */
.world-map__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) 0;
}

.world-map__scroll::-webkit-scrollbar { width: 6px; }
.world-map__scroll::-webkit-scrollbar-track { background: transparent; }
.world-map__scroll::-webkit-scrollbar-thumb { background: var(--rose-200); border-radius: 3px; }
.world-map__scroll::-webkit-scrollbar-thumb:hover { background: var(--rose-400); }
.world-map__scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--rose-200) transparent;
}

/* ─── Hero stat card ─── */
.world-map__hero {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background:
    linear-gradient(135deg, rgba(184, 91, 122, .08) 0%, rgba(212, 164, 76, .06) 100%),
    var(--cream-50);
  border-bottom: 1px solid var(--rose-100);
  position: relative;
  overflow: hidden;
}

.world-map__hero::before {
  content: '';
  position: absolute;
  top: -30%;
  inset-inline-end: -10%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 91, 122, .12) 0%, transparent 65%);
  pointer-events: none;
}

.world-map__hero-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(184, 91, 122, .30);
  position: relative;
  z-index: 1;
}

.world-map__hero-number {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.world-map__hero-unit {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  opacity: .85;
  margin-top: 2px;
}

.world-map__hero-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.world-map__hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--teal-800);
  line-height: 1.2;
}

.world-map__hero-sub {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-600);
}


/* ─── Filter pills ─── */
.world-map__filters {
  display: flex;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rose-100);
}

.world-map__filter {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--cream-50);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
}

.world-map__filter em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--rose-600);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-display);
}

.world-map__filter:hover {
  background: var(--white);
  border-color: var(--rose-200);
  color: var(--rose-600);
}

.world-map__filter.is-active {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(184, 91, 122, .25);
}

.world-map__filter.is-active em {
  background: rgba(255, 255, 255, .25);
  color: var(--white);
}


/* ─── Groups ─── */
.world-map__group {
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.world-map__group + .world-map__group {
  margin-top: var(--sp-4);
}

.world-map__group.is-hidden {
  display: none;
}

.world-map__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 6px;
  margin-bottom: 2px;
}

.world-map__group-rule {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose-300);
  flex-shrink: 0;
}

.world-map__group[data-group="anchor"]  .world-map__group-rule { background: var(--gold); }
.world-map__group[data-group="partner"] .world-map__group-rule { background: var(--rose-500); }
.world-map__group[data-group="default"] .world-map__group-rule { background: var(--teal-700); opacity: .55; }

.world-map__group-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--gray-700);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.world-map__group-count {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--cream-100);
  color: var(--gray-700);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
}


/* ─── Items ─── */
.world-map__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.world-map__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  text-align: start;
  position: relative;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), padding-inline-start .18s var(--ease-out);
}

.world-map__item.is-hidden {
  display: none;
}

/* Color marker — small dot indicating role */
.world-map__item-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose-400);
  flex-shrink: 0;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--rose-200);
  transition: transform .25s var(--ease-out), background var(--t-base);
}

.world-map__item[data-kind="hq"]      .world-map__item-marker { background: var(--gold); box-shadow: 0 0 0 1px rgba(212, 164, 76, .35); }
.world-map__item[data-kind="focus"]   .world-map__item-marker { background: var(--teal-700); box-shadow: 0 0 0 1px rgba(15, 52, 65, .25); }
.world-map__item[data-kind="partner"] .world-map__item-marker { background: var(--rose-500); }
.world-map__item[data-kind="default"] .world-map__item-marker { background: transparent; border-color: var(--rose-300); box-shadow: 0 0 0 1px var(--rose-200); }

.world-map__item .fi {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* Compact items (partner + default groups): name only */
.world-map__item-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Featured items (hq + focus): name + role + arrow */
.world-map__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.world-map__item-body .world-map__item-name {
  font-size: 13px;
}

.world-map__item-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--rose-600);
}

.world-map__item--hq .world-map__item-role    { color: var(--gold-dark); }
.world-map__item--focus .world-map__item-role { color: var(--teal-700); }

.world-map__item-arrow {
  font-size: 10px;
  color: var(--gray-500);
  opacity: 0;
  transition: opacity var(--t-base), transform var(--t-base);
}

[dir="rtl"] .world-map__item-arrow { transform: scaleX(-1); }

/* Hover / active */
.world-map__item:hover,
.world-map__item.is-active {
  background: var(--cream-50);
  border-color: var(--rose-200);
  padding-inline-start: 14px;
}

.world-map__item:hover .world-map__item-marker,
.world-map__item.is-active .world-map__item-marker {
  transform: scale(1.2);
}

.world-map__item:hover .world-map__item-arrow,
.world-map__item.is-active .world-map__item-arrow {
  opacity: 1;
  transform: translateX(-2px);
}

[dir="rtl"] .world-map__item:hover .world-map__item-arrow,
[dir="rtl"] .world-map__item.is-active .world-map__item-arrow {
  transform: scaleX(-1) translateX(-2px);
}

/* Featured-item variants */
.world-map__item--hq {
  background: linear-gradient(135deg, rgba(212, 164, 76, .04), transparent);
  border-color: rgba(212, 164, 76, .15);
}

.world-map__item--hq:hover,
.world-map__item--hq.is-active {
  background: linear-gradient(135deg, rgba(212, 164, 76, .12), rgba(212, 164, 76, .04));
  border-color: var(--gold-light);
}

.world-map__item--focus {
  background: linear-gradient(135deg, rgba(15, 52, 65, .03), transparent);
  border-color: rgba(15, 52, 65, .10);
}

.world-map__item--focus:hover,
.world-map__item--focus.is-active {
  background: linear-gradient(135deg, rgba(15, 52, 65, .06), rgba(15, 52, 65, .02));
  border-color: rgba(15, 52, 65, .25);
}


/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .world-map {
    grid-template-columns: 1fr;
  }
  .world-map__list {
    position: static;
    max-height: none;
  }
  .world-map__hero {
    padding: var(--sp-4);
  }
  .world-map__hero-num {
    width: 56px;
    height: 56px;
  }
  .world-map__hero-number {
    font-size: 24px;
  }
  /* Items become 2-column grid on tablet for better space use */
  .world-map__group[data-group="partner"] .world-map__items,
  .world-map__group[data-group="default"] .world-map__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
  }
}

@media (max-width: 540px) {
  .world-map__filters {
    padding: var(--sp-2) var(--sp-3);
  }
  .world-map__filter {
    padding: 6px 8px;
    font-size: 11px;
  }
  .world-map__group {
    padding: 0 var(--sp-3) var(--sp-3);
  }
  .world-map__item {
    padding: 7px 8px;
    font-size: 12px;
  }
  .world-map__hero-num {
    width: 48px;
    height: 48px;
  }
  .world-map__hero-number {
    font-size: 20px;
  }
}

@media (max-width: 540px) {
  .world-map__canvas {
    padding: var(--sp-3);
  }
  .world-map__items {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin__pulse {
    animation: none;
    opacity: 0;
  }
}


/* ══════════════════════════════════════════════
   43. SEARCH PAGE — Live, fuzzy, filtered
   ══════════════════════════════════════════════ */
.page-hero--compact {
  min-height: auto;
  padding-block-start: 140px;   /* clear the fixed header (72px) + breathing room */
  padding-block-end:   var(--sp-10);
}

@media (max-width: 768px) {
  .page-hero--compact {
    padding-block-start: 120px;
    padding-block-end: var(--sp-8);
  }
}

@media (max-width: 540px) {
  .page-hero--compact {
    padding-block-start: 110px;
    padding-block-end: var(--sp-6);
  }
}

.search-section {
  background: var(--cream-50);
  position: relative;
}

/* Sticky search bar */
.search-bar-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-block-end: var(--sp-6);
  padding-block: var(--sp-3);
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-50) 80%, transparent 100%);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 18px;
  background: var(--white);
  border: 2px solid var(--rose-100);
  border-radius: var(--r-full);
  box-shadow:
    0 12px 32px rgba(15, 52, 65, .08),
    0 2px 6px rgba(184, 91, 122, .04);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: text;
}

.search-bar:focus-within {
  border-color: var(--rose-300);
  box-shadow:
    0 16px 40px rgba(184, 91, 122, .14),
    0 0 0 4px rgba(184, 91, 122, .08);
}

.search-bar__icon {
  color: var(--rose-500);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--gray-700);
  padding: 0;
}

.search-bar__input::placeholder {
  color: var(--gray-500);
  font-weight: 500;
}

.search-bar__input::-webkit-search-cancel-button { display: none; }

.search-bar__clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--cream-100);
  color: var(--gray-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
  flex-shrink: 0;
}

.search-bar__clear:hover {
  background: var(--rose-500);
  color: var(--white);
  transform: rotate(90deg);
}

.search-bar__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--cream-100);
  border: 1px solid var(--rose-100);
  color: var(--gray-600);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.search-bar:focus-within .search-bar__kbd { display: none; }


/* Filter tabs */
.search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

.search-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
}

.search-tab:hover:not([disabled]) {
  border-color: var(--rose-300);
  color: var(--rose-600);
  transform: translateY(-1px);
}

.search-tab.is-active {
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(184, 91, 122, .25);
}

.search-tab[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

.search-tab i {
  font-size: .9em;
  opacity: .85;
}

.search-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--cream-100);
  color: var(--rose-600);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-display);
}

.search-tab.is-active .search-tab__count {
  background: rgba(255, 255, 255, .25);
  color: var(--white);
}


/* Result count */
.search-count {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 0 0 var(--sp-4);
  line-height: 1.6;
}

.search-count strong {
  color: var(--teal-800);
  font-weight: 800;
}


/* Results list */
.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.search-result {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}

.search-result:hover {
  border-color: var(--rose-300);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(184, 91, 122, .10);
}

.search-result__media {
  width: 140px;
  height: 100px;
  overflow: hidden;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: var(--cream-100);
}

.search-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base);
}

.search-result:hover .search-result__media img {
  transform: scale(1.05);
}

.search-result__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--rose-50);
  color: var(--rose-600);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  width: fit-content;
}

.search-result__type i { font-size: .9em; }

.search-result__type--event   { background: rgba(184, 91, 122, .10); color: var(--rose-600); }
.search-result__type--project { background: var(--gold-glow); color: var(--gold-dark); }
.search-result__type--news    { background: rgba(45, 123, 142, .10); color: var(--teal-700); }
.search-result__type--media   { background: rgba(15, 52, 65, .08); color: var(--teal-800); }

.search-result__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--teal-800);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  margin-top: 4px;
}

.search-result__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-result__meta i {
  color: var(--rose-400);
  font-size: .9em;
}

.search-result__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream-50);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
  flex-shrink: 0;
}

.search-result:hover .search-result__arrow {
  background: var(--rose-500);
  color: var(--white);
  transform: translateX(4px);
}

[dir="rtl"] .search-result:hover .search-result__arrow {
  transform: translateX(-4px);
}

/* Highlight matches */
.search-mark {
  background: linear-gradient(180deg, transparent 60%, rgba(212, 164, 76, .35) 60%);
  color: var(--teal-800);
  padding: 0 1px;
  font-weight: 800;
  border-radius: 2px;
}


/* States */
.search-state {
  background: var(--white);
  border: 1px dashed var(--rose-200);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-5);
}

.search-state--empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.search-state__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.search-state__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-state__row-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--gray-600);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.search-state__row-label i {
  color: var(--rose-500);
}

.search-state__clear-btn {
  border: none;
  background: transparent;
  color: var(--rose-600);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: background var(--t-base);
}

.search-state__clear-btn:hover {
  background: var(--rose-50);
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  background: var(--cream-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
}

.search-chip:hover {
  background: var(--rose-500);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(184, 91, 122, .20);
}

.search-chip--recent {
  background: var(--white);
  color: var(--gray-700);
}

.search-chip--recent i {
  color: var(--rose-500);
  font-size: .85em;
}

.search-chip--recent:hover i {
  color: var(--white);
}


/* Keyboard shortcut hint */
.search-state__shortcut {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sp-3);
  background: var(--cream-50);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  color: var(--gray-600);
  align-self: center;
  margin-top: var(--sp-2);
}

.search-state__shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--white);
  border: 1px solid var(--rose-100);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--teal-800);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}


/* No-results */
.search-state--noresults {
  text-align: center;
  border-style: solid;
  background: var(--white);
}

.search-state__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-50), var(--cream-100));
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.search-state__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 var(--sp-2);
}

.search-state__title span {
  color: var(--rose-600);
}

.search-state__desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 0 0 var(--sp-5);
}

.search-state__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.search-state--hint {
  text-align: center;
  color: var(--gray-600);
  font-size: var(--text-sm);
}

.search-state--hint p { margin: 0; }


/* Responsive */
@media (max-width: 768px) {
  .search-result {
    grid-template-columns: 90px 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .search-result__media {
    width: 90px;
    height: 80px;
  }
  .search-result__arrow {
    display: none;
  }
  .search-result__title { font-size: var(--text-sm); }
  .search-result__desc { -webkit-line-clamp: 2; line-clamp: 2; }
  .search-tab { padding: 6px 12px; font-size: var(--text-xs); }
  .search-tab__count { min-width: 18px; height: 18px; font-size: 10px; }
  .search-bar { padding: 10px 14px; }
  .search-bar__kbd { display: none; }
}

@media (max-width: 540px) {
  .search-result__type span:not(:first-child) {
    display: none;
  }
}


/* ══════════════════════════════════════════════
   44. MOBILE POLISH — Cross-cutting refinements
   Loaded last so it wins source-order tie-breaks.
   ══════════════════════════════════════════════ */

/* ─── Phone-sized screens (< 540px) ─── */
@media (max-width: 540px) {
  /* Tighter section vertical rhythm */
  .section { padding-block: clamp(56px, 9vw, 80px); }

  /* Section heading scales down */
  .section-heading { font-size: var(--text-3xl); line-height: 1.15; }
  .section-header  { margin-bottom: var(--sp-8); }

  /* Hero / page-hero / evd-hero / article-hero — reclaim viewport */
  .page-hero    { padding: 110px 0 56px; }
  .evd-hero     { padding: 110px 0 56px; }
  .article-hero { padding: 100px 0 56px; }

  /* About hero gets ergonomic min-height (was 70vh) */
  .about-hero { min-height: 60vh; }

  /* Make full-width buttons when wrapped (better tap targets) */
  .hero__actions .btn,
  .cta-actions .btn,
  .events-featured__actions .btn,
  .project-feature__actions .btn,
  .about-story__actions .btn,
  .evd-hero__content .btn,
  .error-page__actions .btn {
    width: 100%;
    max-width: 320px;
  }
  .hero__actions,
  .cta-actions,
  .events-featured__actions,
  .project-feature__actions,
  .about-story__actions,
  .error-page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Reduce btn-lg padding for narrow viewports */
  .btn--lg {
    padding: 14px 24px;
    font-size: var(--text-sm);
  }

  /* Eyebrow line shrinks (less awkward wrap) */
  .eyebrow {
    font-size: 10px;
    gap: var(--sp-2);
  }
  .eyebrow::before,
  .section-header--center .eyebrow::after {
    width: 20px;
  }

  /* Floating buttons — reposition for smaller screens */
  .scroll-top {
    bottom: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  /* Cookie banner edge-to-edge */
  .cookie-banner {
    inset-inline-start: 8px;
    inset-inline-end: 8px;
    bottom: 8px;
  }

  /* Newsletter form — buttons full-width below input on tiny screens */
  .footer__newsletter-form {
    flex-direction: column;
  }
  .footer__newsletter-input,
  .footer__newsletter-btn {
    width: 100%;
  }

  /* Long words / URLs / emails — break instead of overflow */
  .article-body p,
  .article-hero__title,
  .news-card__title,
  .ev-card__title,
  .evd-hero__title,
  .search-result__title,
  .map-popup__name {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Search bar input — comfortable tap height */
  .search-bar { padding: 12px 14px; }
  .search-bar__input { font-size: 16px; }  /* prevents iOS zoom-on-focus */
}


/* ─── Very small screens (< 380px) ─── */
@media (max-width: 380px) {
  .section-heading { font-size: var(--text-2xl); }
  .page-hero__title,
  .evd-hero__title,
  .article-hero__title { font-size: var(--text-3xl); }

  /* Tighter countdown */
  .countdown { gap: 6px; }
  .countdown__unit { padding: 10px 4px; }
  .countdown__value { font-size: var(--text-xl); }
  .countdown__label { font-size: 9px; }

  /* Container side padding tighter */
  .container { padding-inline: 14px; }
}


/* ─── Touch device polish ─── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only transforms that feel weird on touch */
  .ev-card:hover,
  .news-card:hover,
  .proj-cover-card:hover,
  .leader-card:hover,
  .btn:hover {
    transform: none;
  }

  /* But keep visual feedback on press */
  .btn:active,
  .ev-card:active,
  .news-card:active,
  .proj-cover-card:active {
    transform: scale(.98);
    transition-duration: .1s;
  }
}


/* ─── Prevent iOS form-zoom on focus (16px minimum on input) ─── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  .footer__links{
    align-items: center;
  }
}