/* ============================================================
   HORIZON BY MIHWARIY CONSULTANCY — styles.css
   Design System · All Pages · Contact Modal · Footer
   ============================================================ */

/* ── 0. LOCAL FONT — FUSTAT (VARIABLE) ───────────────────────
   Primary display/heading typeface. Loaded locally (no CDN
   dependency) as a single variable-weight file spanning the
   200–800 axis, so every weight below is rendered from one
   download with no extra HTTP requests.                     */
@font-face {
  font-family: 'Fustat';
  src: url('../fonts/Fustat-Variable.ttf') format('truetype-variations'),
       url('../fonts/Fustat-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy:        #0B1F35;
  --navy-mid:    #112845;
  --navy-light:  #1A3A5C;
  --blue:        #1F5AA6;
  --blue-hover:  #2D6FCA;
  --blue-dark:   #174483;
  --gold:        #F3D35B;
  --gold-deep:   #C9A820;
  --gold-mid:    #D4B430;
  --gold-text:   #806414; /* WCAG AA-compliant gold for text on light backgrounds (gold-deep fails at 2.3:1) */
  --red:         #FF4040;
  --red-dark:    #D93535;
  --gradient-hover: linear-gradient(90deg, var(--red) 0%, var(--blue) 50%, var(--gold) 100%);
  --white:       #FFFFFF;
  --off-white:   #FAFBFC;
  --gray-50:     #F5F7FA;
  --gray-100:    #EEF1F6;
  --gray-200:    #DDE3ED;
  --gray-400:    #A0ADBD;
  --gray-500:    #6B7686;
  --gray-600:    #5D6B80;
  --gray-700:    #3D4654;
  --dark:        #111827;

  /* Typography
     Fustat (local, variable 200–800) drives headings, nav, buttons,
     badges, and labels — the brand's geometric "premium" voice.
     Inter remains the body workhorse for long-form reading. */
  --font-display: 'Fustat', 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Container */
  --max-w:       1280px;
  --container-x: clamp(1.25rem, 5vw, 3.5rem);

  /* Border radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(11,31,53,.07);
  --sh-sm: 0 2px 8px rgba(11,31,53,.09), 0 1px 3px rgba(11,31,53,.06);
  --sh-md: 0 4px 20px rgba(11,31,53,.12), 0 2px 6px rgba(11,31,53,.07);
  --sh-lg: 0 10px 40px rgba(11,31,53,.16), 0 4px 12px rgba(11,31,53,.09);
  --sh-xl: 0 20px 64px rgba(11,31,53,.22);
  --sh-gold: 0 6px 24px rgba(243,211,91,.30);
  --sh-blue: 0 6px 24px rgba(31,90,166,.30);
  --sh-red:  0 6px 24px rgba(255,64,64,.28);

  /* Animation */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-mid:    320ms;
  --dur-slow:   500ms;

  /* Nav height — used for scroll offset */
  --nav-h: 72px;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
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; }
svg  { display: block; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Light-background components need a darker secondary ring layered behind the
   gold one, since gold-on-white only measures 1.47:1 (fails WCAG's 3:1 minimum
   for focus indicators) while gold-on-navy measures 11.3:1 and needs no help.
   Scoped to the specific components that actually sit on white/light
   backgrounds site-wide, rather than applied globally (which broke the navbar
   and other dark-context links by adding a visible dark smudge on dark bg). */
.faq-question:focus-visible,
.btn.btn-primary:focus-visible,
.btn.btn-outline-navy:focus-visible,
.filter-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(11,31,53,.55);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 3. SKIP NAV ──────────────────────────────────────────── */
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 10000;
  background: var(--blue); color: #fff;
  padding: .75rem 1.5rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: .875rem;
  transition: top .1s;
}
.skip-link:focus { top: 1rem; }

/* ── 4. LAYOUT UTILITIES ──────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.section      { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-sm   { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section-lg   { padding: clamp(5rem, 10vw, 9rem) 0; }
.section-dark { background: var(--navy); color: #fff; }
.section-navy { background: var(--navy-mid); color: #fff; }
.section-gray { background: var(--gray-50); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 5. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.025em; }

.display-2xl { font-size: clamp(2.75rem, 6.6vw, 6.25rem);  font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.display-xl  { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.display-lg  { font-size: clamp(2rem, 4vw, 3.5rem);    font-weight: 700; letter-spacing: -.03em; }
.display-md  { font-size: clamp(2rem, 4vw, 3.25rem);   font-weight: 700; letter-spacing: -.03em; }
.display-sm  { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; }

.lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--gray-600); line-height: 1.78;
}
.lead-light { color: rgba(255,255,255,.7); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--gold); flex-shrink: 0;
}
.eyebrow-light { color: var(--gold); }
.eyebrow-light::before { background: var(--gold); }

.text-gold  { color: var(--gold); }
.text-blue  { color: var(--blue); }
.text-white { color: #fff; }
.text-muted { color: var(--gray-600); }

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .9rem; font-weight: 700;
  padding: .875rem 1.875rem;
  border-radius: var(--r-md); border: 2px solid transparent;
  transition:
    transform   var(--dur-fast) var(--ease),
    box-shadow  var(--dur-fast) var(--ease),
    background  var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color       var(--dur-fast) var(--ease);
  white-space: nowrap; cursor: pointer; will-change: transform;
  text-decoration: none;
}
.btn:active { transform: scale(.97) !important; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Primary */
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); transform: translateY(-2px); box-shadow: var(--sh-blue); }

/* Gold */
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: #f7dc6a; border-color: #f7dc6a; transform: translateY(-2px); box-shadow: var(--sh-gold); }

/* Outline white (for dark backgrounds) */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* Outline navy (for light backgrounds) */
.btn-outline-navy { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline-navy:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

/* Outline light (for dark backgrounds, e.g. the Islamic Companion hero) —
   was referenced in HTML but never defined, rendering with no color/border
   at all (near-invisible dark-on-dark text). */
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); }

/* Red — for urgent/limited-availability CTAs (e.g. "Few Seats Left") */
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: var(--sh-red); }

/* Sizes */
.btn-lg  { font-size: 1rem; padding: 1.1rem 2.25rem; }
.btn-sm  { font-size: .82rem; padding: .625rem 1.25rem; border-radius: var(--r-sm); }
.btn-full { width: 100%; justify-content: center; }

/* Arrow icon inside button */
.btn-arrow {
  display: inline-block; width: 18px; height: 18px;
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ── 7. NAVIGATION ────────────────────────────────────────── */
#site-nav {
  position: fixed; inset: 0 0 auto; z-index: 900;
  padding: 0;
  /* Fully transparent by default — only gains background on scroll */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background     var(--dur-mid) var(--ease-std),
              box-shadow     var(--dur-mid) var(--ease-std),
              border-color   var(--dur-mid) var(--ease-std),
              backdrop-filter var(--dur-mid) var(--ease-std);
}
#site-nav.is-scrolled {
  background: rgba(11, 31, 53, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 8px 32px rgba(11,31,53,.28), 0 1px 0 rgba(255,255,255,.06);
}

.nav-container {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--container-x);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Logo */
.nav-logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav-logo-icon { width: 38px; height: 38px; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 900;
  letter-spacing: .08em; color: #fff;
}
.nav-logo-sub {
  font-size: .58rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: 2px;
}

/* Desktop links — a row that can scroll horizontally with a hidden
   scrollbar if the tab count ever outgrows the viewport, so the nav
   degrades gracefully instead of wrapping or clipping. */
.nav-links {
  display: flex; align-items: center; gap: .25rem; margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  position: relative;
  display: flex; align-items: center;
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.72); padding: .55rem 1rem; border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}
.nav-links a:active { transform: translateY(0) scale(.98); }

/* Active page — refined pill + glow treatment, instantly recognisable
   and built from the brand gold accent rather than a plain underline. */
.nav-links a[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  box-shadow: 0 2px 16px rgba(243,211,91,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-links a[aria-current="page"]:hover {
  color: var(--navy);
  background: linear-gradient(135deg, #f7dc6a 0%, var(--gold) 100%);
  transform: translateY(-1px);
}

/* Right side */
.nav-actions { display: flex; align-items: center; gap: .875rem; flex-shrink: 0; }

/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; padding: .5rem;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.nav-hamburger:hover { background: rgba(255,255,255,.1); }
.nav-hamburger:focus-visible { outline: 2px solid var(--gold); }
.nav-hamburger span {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. MOBILE MENU ───────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 850;
  background: var(--navy);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--container-x);
  opacity: 0; pointer-events: none;
  transform: translateX(100%);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
  overflow: hidden;
}
.mobile-menu.is-open { opacity: 1; pointer-events: all; transform: translateX(0); }

.mobile-menu-close {
  position: absolute; top: 1.5rem; right: var(--container-x);
  width: 40px; height: 40px; border-radius: var(--r-sm);
  color: #fff; font-size: 1.375rem; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.mobile-menu-close:hover { background: rgba(255,255,255,.1); }

.mobile-nav { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--sp-6); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.5vw, 1.75rem); font-weight: 700;
  color: rgba(255,255,255,.8); padding: .625rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mobile-nav a:hover  {
  background: var(--gradient-hover);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-left: .875rem;
}
.mobile-nav a.active { color: var(--gold); }
.mobile-nav a:focus-visible { outline: 2px solid var(--gold); }

.mobile-brand {
  position: absolute; bottom: 2rem; left: var(--container-x);
  font-size: .75rem; color: rgba(255,255,255,.25); font-weight: 500;
}

/* ── 9. HERO — HOME ───────────────────────────────────────── */
.hero {
  position: relative; height: 100svh;
  background: var(--navy);
  display: flex; align-items: center; overflow: hidden;
}

/* Atmospheric gradient background */
.hero-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 28%, rgba(31,90,166,.42) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 75%, rgba(243,211,91,.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 8%  55%, rgba(255,64,64,.05)  0%, transparent 55%);
}

/* Subtle grid */
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 78%);
}

/* Geometric logo-inspired shapes */
.hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.hero-shape  { position: absolute; will-change: transform; }

.hero-shape-a {
  right: -6%; top: -4%; width: 55%; height: 110%;
  background: linear-gradient(145deg, rgba(31,90,166,.26) 0%, transparent 65%);
  clip-path: polygon(100% 0%, 100% 100%, 28% 100%, 0% 50%, 28% 0%);
  animation: heroFloat 22s ease-in-out infinite;
}
.hero-shape-b {
  right: 5%; bottom: -22%; width: 38%; height: 80%;
  background: linear-gradient(145deg, rgba(243,211,91,.06) 0%, transparent 60%);
  clip-path: polygon(100% 0%, 100% 100%, 22% 100%, 0% 50%, 22% 0%);
  animation: heroFloat 28s ease-in-out infinite; animation-delay: -8s;
}
.hero-shape-c {
  left: -3%; top: 18%; width: 25%; height: 62%;
  background: linear-gradient(320deg, rgba(255,64,64,.055) 0%, transparent 60%);
  clip-path: polygon(0% 50%, 22% 0%, 100% 0%, 100% 100%, 22% 100%);
  animation: heroFloat 30s ease-in-out infinite; animation-delay: -14s;
}

@keyframes heroFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-1.8%) rotate(.5deg); }
  66%     { transform: translateY(.9%)  rotate(-.4deg); }
}

.hero-body {
  position: relative; z-index: 2; width: 100%;
}
.hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  /* Larger bottom padding pushes text block well above the dot row */
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) var(--container-x) clamp(6rem, 12vw, 9rem);
}

/* Hero entrance animations */
.hero-chip {
  display: inline-flex; align-items: center; gap: .625rem;
  background: rgba(243,211,91,.1); border: 1px solid rgba(243,211,91,.28);
  color: var(--gold); font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem 1rem; border-radius: var(--r-pill); margin-bottom: var(--sp-6);
  opacity: 0; transform: translateY(16px);
  animation: revealUp var(--dur-slow) var(--ease) .2s both;
}
.chip-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.38;transform:scale(.7)} }

.hero-headline {
  color: #fff; max-width: 100%; margin-bottom: var(--sp-6);
  opacity: 0; transform: translateY(20px);
  animation: revealUp var(--dur-slow) var(--ease) .4s both;
}
.hero-headline em { color: var(--gold); font-style: normal; }

.hero-lead {
  max-width: 55ch; margin-bottom: var(--sp-6);
  opacity: 0; transform: translateY(20px);
  animation: revealUp var(--dur-slow) var(--ease) .58s both;
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-2);
  opacity: 0; transform: translateY(20px);
  animation: revealUp var(--dur-slow) var(--ease) .74s both;
}

.hero-tags {
  display: flex; flex-wrap: wrap; gap: .625rem;
  opacity: 0; transform: translateY(20px);
  animation: revealUp var(--dur-slow) var(--ease) .9s both;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.55); padding: .4rem .875rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.hero-tag:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.055); }
.hero-tag-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.dot-b { background: rgba(150,200,255,.9); }
.dot-g { background: var(--gold); }
.dot-r { background: var(--red); }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.32); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; animation: revealUp .8s var(--ease) 1.4s both;
}
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.28));
  animation: scrollBob 2.2s ease-in-out infinite;
}
@keyframes scrollBob { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(.5);opacity:.38} }

/* ── 9b. HERO SLIDESHOW ───────────────────────────────────── */
.hero-slideshow {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }

/* Overlay: balanced gradient — dark enough on the left for text legibility,
   light enough on the right that the photo is clearly visible and slide
   changes are perceptible. This is the SINGLE source of truth for the
   overlay; do not redeclare elsewhere. */
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(11,31,53,.86) 0%,
      rgba(11,31,53,.68) 28%,
      rgba(11,31,53,.38) 58%,
      rgba(11,31,53,.52) 100%),
    linear-gradient(to bottom,
      rgba(11,31,53,.12) 0%,
      transparent 30%,
      transparent 72%,
      rgba(11,31,53,.42) 100%);
}

/* Slideshow nav (arrows + dots) */
.hero-slide-nav {
  position: absolute;
  bottom: 1.75rem; /* pinned to very bottom of hero */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .875rem;
  z-index: 10;
}

.hero-slide-prev,
.hero-slide-next {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.hero-slide-prev:hover,
.hero-slide-next:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.45);
  transform: scale(1.1);
}
.hero-slide-prev:focus-visible,
.hero-slide-next:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hero-slide-dots {
  display: flex; align-items: center; gap: .5rem;
}
.hero-slide-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.32);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition:
    background var(--dur-fast) var(--ease),
    width 200ms var(--ease),
    border-radius 200ms var(--ease);
}
.hero-slide-dot.active {
  background: var(--gold);
  width: 26px;
  border-radius: 4px;
}
.hero-slide-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Reduced motion: disable slide transitions & auto-advance */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide-dot { transition: none; }
}

/* ── 10. PAGE HERO (inner pages) ──────────────────────────── */
/* In-page anchor links (footer "Gallery"/"Press"/etc., services.html's
   "#certification-framework", etc.) scroll a section flush to the top of
   the viewport — but the nav is `position: fixed`, so without this it
   covers the section's heading. This applies scroll-margin-top to any
   section used as an anchor target, site-wide. */
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.page-hero {
  position: relative; padding-top: var(--nav-h);
  min-height: clamp(360px, 55vh, 520px);
  background: var(--navy);
  display: flex; align-items: center; overflow: hidden;
}
.page-hero-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 65% at 65% 40%, rgba(31,90,166,.38) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 10% 60%, rgba(255,64,64,.045) 0%, transparent 55%);
}
.page-hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.page-hero-shape-a {
  right: -5%; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(145deg, rgba(31,90,166,.2) 0%, transparent 70%);
  clip-path: polygon(100% 0%, 100% 100%, 30% 100%, 0% 50%, 30% 0%);
}
.page-hero-shape-b {
  right: 8%; top: 50%; transform: translateY(-50%);
  width: 260px; height: 260px;
  background: rgba(243,211,91,.04); border-radius: 50%;
}
.page-hero-body {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(3rem, 7vw, 5rem) var(--container-x);
}
.page-hero-eyebrow { margin-bottom: var(--sp-4); }
.page-hero-title   { color: #fff; margin-bottom: var(--sp-5); }
.page-hero-title em { color: var(--gold); font-style: normal; }
.page-hero-lead { max-width: 56ch; }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* ── 11. STATS STRIP ──────────────────────────────────────── */
.stats-strip { background: #fff; border-bottom: 1px solid var(--gray-100); }
.stats-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.stat-cell {
  padding: var(--sp-8) var(--sp-4); text-align: center; position: relative;
}
.stat-cell + .stat-cell::before {
  content: ''; position: absolute; left: 0; top: 22%; height: 56%;
  width: 1px; background: var(--gray-100);
}

/* Small geometric accent icon above each stat — rotates through the
   three brand colours (blue/gold/red) so every accent colour gets
   visible representation across the strip */
.stat-geo-icon {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-3);
  width: 28px; height: 28px;
}
.stat-geo-icon-shape {
  width: 11px; height: 11px;
  transform: rotate(45deg);
  background: var(--blue);
  border-radius: 2px;
}
.stat-cell:nth-of-type(2) .stat-geo-icon-shape { background: var(--gold); }
.stat-cell:nth-of-type(3) .stat-geo-icon-shape { background: var(--red); }
.stat-cell:nth-of-type(4) .stat-geo-icon-shape { background: var(--gold); }
.stat-cell:nth-of-type(5) .stat-geo-icon-shape { background: var(--blue); }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--blue); margin-bottom: .375rem;
}
.stat-number sup { font-size: 55%; vertical-align: .5em; color: var(--gold-deep); }
.stat-label { font-size: .8rem; font-weight: 600; color: var(--gray-600); letter-spacing: .02em; }

/* ── 12. SECTION HEADERS ──────────────────────────────────── */
.section-hd        { margin-bottom: var(--sp-12); }
.section-hd-center { text-align: center; }
.section-hd-center .section-title {
  max-width: 100%;           /* let container width decide — no artificial ch cap */
  margin: 0 auto;
  text-wrap: balance;        /* browser-native balanced line breaks when wrapping is needed */
}
.section-hd-center .lead { max-width: 56ch; margin: var(--sp-4) auto 0; }

.section-title {
  margin-top: .875rem;       /* uniform gap below eyebrow label — removes need for inline style */
  margin-bottom: var(--sp-4);
}
.section-title em { color: var(--blue); font-style: normal; }
.section-title-white { color: #fff; }
.section-title-white em { color: var(--gold); }

/* ── 13. PROGRAM CARDS ────────────────────────────────────── */
.programs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}

.program-card {
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-8);
  border: 1.5px solid var(--gray-100);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
  cursor: default;
}
.program-card .btn,
.program-card > a.program-link { margin-top: auto; align-self: flex-start; }
.program-card .program-desc:last-of-type { margin-bottom: var(--sp-6); }
.program-card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.program-card:hover::after { transform: scaleX(1); }

.program-card.c-blue::after  { background: var(--blue); }
.program-card.c-gold::after  { background: var(--gold-deep); }
.program-card.c-red::after   { background: var(--red); }
.program-card.c-navy::after  { background: var(--navy); }

.program-icon {
  width: 72px; height: 72px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-6);
  transition: transform var(--dur-mid) var(--ease);
}
.program-icon img { width: 100%; height: 100%; display: block; }
.program-card:hover .program-icon { transform: scale(1.1); }

.ic-blue  { background: rgba(31,90,166,.1); }
.ic-gold  { background: rgba(201,168,32,.14); }
.ic-red   { background: rgba(255,64,64,.08); }
.ic-navy  { background: rgba(11,31,53,.07); }

.program-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: .625rem; }
.program-desc  { font-size: .875rem; color: var(--gray-600); line-height: 1.7; margin-bottom: var(--sp-6); }
.program-link  {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: var(--blue);
  transition: gap var(--dur-fast) var(--ease);
}
.program-link:hover { gap: .75rem; }
.program-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* ── 14. FEATURE GRID (why choose / benefits) ─────────────── */
.feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6);
}

.feature-item {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--gray-100);
  align-items: start;
  transition: padding-left var(--dur-fast) var(--ease);
  cursor: default;
}
.feature-item:hover { padding-left: .625rem; }
.feature-num { font-family: var(--font-display); font-size: .72rem; font-weight: 800; color: var(--blue); padding-top: .175rem; letter-spacing: .06em; }
.feature-title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.feature-desc  { font-size: .875rem; color: var(--gray-600); line-height: 1.65; }

/* ── 15. EVENT CARDS ──────────────────────────────────────── */
.events-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}
.events-grid.two-col { grid-template-columns: repeat(2, 1fr); }

.event-card {
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--gray-100);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
  cursor: default; display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }

.event-card-dark {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1);
  color: #fff;
}
.event-card-dark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }

.event-img {
  width: 100%; overflow: hidden; position: relative;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.event-img-main { aspect-ratio: 16/9; }
.event-img-sm   { aspect-ratio: 3/2; }

/* Featured/hero event card — image beside copy on wider screens.
   Was previously an inline style with no responsive fallback, which kept
   forcing this 2-column grid on phones too and squeezed/cropped the
   poster image. Falls back to the default .event-card flex-column
   (image stacked above copy) below 860px. */
.event-card-featured {
  position: relative; grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.4fr 1fr;
}
.event-img-featured { min-height: 280px; }
@media (max-width: 860px) {
  .event-card-featured { display: flex; }
  .event-img-featured { min-height: 0; }
}

.event-badge {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  font-family: var(--font-display); font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: var(--r-pill);
}
.eb-blue { background: var(--blue);     color: #fff; }
.eb-gold { background: var(--gold);     color: var(--navy); }
.eb-red  { background: var(--red);      color: #fff; }
.eb-navy { background: var(--navy);     color: #fff; }

/* Limited-availability inline badge — used next to Register CTAs */
.availability-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  color: var(--red-dark);
  letter-spacing: .02em;
}
.availability-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: pulseDot 1.8s ease-in-out infinite;
}

.event-body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.event-body-sm { padding: var(--sp-5); }

.event-date  { font-family: var(--font-display); font-size: .72rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .05em; margin-bottom: .5rem; }
.event-date-light { color: var(--gold); }
.event-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: .625rem; line-height: 1.3; }
.event-title-light { color: #fff; }
.event-title-sm { font-size: .9375rem; }
.event-desc  { font-size: .875rem; color: var(--gray-600); line-height: 1.65; margin-bottom: var(--sp-5); flex: 1; }
.event-desc-light { color: rgba(255,255,255,.62); }
.event-meta  { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: var(--sp-5); }
.event-meta-item {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; color: var(--gray-400);
}
.event-meta-item-light { color: rgba(255,255,255,.45); }

/* Filter tabs */
.filter-tabs {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--sp-10);
}
.filter-tab {
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  padding: .625rem 1.25rem; border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--gray-600);
  border: 1.5px solid var(--gray-100);
  transition: all var(--dur-fast) var(--ease); cursor: pointer;
}
.filter-tab:hover  { background: var(--gray-200); color: var(--navy); }
.filter-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── 16. TESTIMONIAL CARDS ────────────────────────────────── */
.stories-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}

.story-card {
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-8);
  border: 1.5px solid var(--gray-100);
  display: flex; flex-direction: column; gap: var(--sp-6);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.story-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }
.story-card.featured { background: var(--blue); border-color: var(--blue); }

.story-stars { display: flex; gap: .25rem; }
.story-stars span { color: var(--gold-deep); font-size: .875rem; }
.story-card.featured .story-stars span { color: var(--gold); }

.story-quote { font-size: .9375rem; color: var(--dark); line-height: 1.75; flex: 1; }
.story-card.featured .story-quote  { color: rgba(255,255,255,.92); }

.story-author { display: flex; align-items: center; gap: var(--sp-4); }
.author-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
}
.story-name { font-family: var(--font-display); font-size: .875rem; font-weight: 700; color: var(--navy); }
.story-card.featured .story-name { color: #fff; }
.story-role { font-size: .75rem; color: var(--gray-600); }
.story-card.featured .story-role { color: rgba(255,255,255,.6); }
/* ── 17. PARTNERS STRIP ───────────────────────────────────── */

.partners-strip {
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  overflow: hidden;
  padding: 1.5rem 0;
}

/* ==========================================
   Partners Carousel
========================================== */

.partners-outer {
  overflow: hidden;
  position: relative;
  cursor: default;

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.partners-track {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;

  animation: scrollPartners 40s linear infinite;
  will-change: transform;
}

/* Pause animation on hover */

.partners-track.is-paused,
.partners-outer:hover .partners-track {
  animation-play-state: paused;
}

/* ==========================================
   Logo Items
========================================== */

.partner-logo {
  flex: 0 0 auto;

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

  min-width: 220px;
  height: 160px;
  padding: 0.09rem;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.partner-logo:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.partner-logo::before,
.partner-logo::after {
  display: none !important;
}

.partner-logo img {
  width: auto;
  height: auto;

  max-width: 100px;
  max-height: 100px;

  object-fit: contain;
  object-position: center;

  display: block;

  opacity: 0.95;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.partner-logo:hover img {
  transform: scale(1.08);
  opacity: 1;
}

/* ==========================================
   Infinite Scroll Animation
========================================== */

@keyframes scrollPartners {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ==========================================
   Responsive
========================================== */

@media (max-width: 768px) {

  .partners-track {
    gap: 1.5rem;
    animation-duration: 28s;
  }

  .partner-logo {
    min-width: 160px;
    height: 120px;
    padding: 0.5rem;
  }

  .partner-logo img {
    max-width: 100px;
    max-height: 100px;
  }

}

/* Partners strip section label */
.partners-lbl {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400);
  text-align: center; margin-bottom: var(--sp-6);
}
.partners-lbl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* ── 18. WHY CARD (navy dark card) ────────────────────────── */
.why-card {
  background: var(--navy); border-radius: var(--r-xl); padding: var(--sp-10);
  position: relative; overflow: hidden; color: #fff;
}
.why-card-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 80% 12%, rgba(31,90,166,.5) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 85%, rgba(243,211,91,.08) 0%, transparent 60%);
}
.why-card-inner { position: relative; z-index: 1; }
.why-card-eyebrow { color: var(--gold); margin-bottom: var(--sp-4); }
.why-card-eyebrow::before { background: var(--gold); }
.why-card-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.22; margin-bottom: var(--sp-4); }
.why-card-title span { color: var(--gold); }
.why-card-body { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: var(--sp-8); }

.sector-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-8); }
.sector-tag {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  padding: .42rem .875rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}
.sector-tag-gold { background: rgba(243,211,91,.14); border-color: rgba(243,211,91,.3); color: var(--gold); }

/* ── 19. CTA BANNER ───────────────────────────────────────── */
.cta-banner {
  position: relative; overflow: hidden; text-align: center;
  background: var(--navy);
}
.cta-banner-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(31,90,166,.38) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 92% 15%, rgba(255,64,64,.07) 0%, transparent 70%);
}
/* .cta-geo-l / .cta-geo-r — single source of truth in islamic-design.css
   (section 11). Do not redeclare here — a previous duplicate declaration
   with conflicting position/clip-path properties caused malformed shapes. */
.cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-title { color: #fff; margin-bottom: var(--sp-4); }
.cta-title em { color: var(--gold); font-style: normal; }
.cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* ── 20. ABOUT SPLIT ──────────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}

.about-visual { position: relative; }
.about-img-main {
  width: 100%; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 55%, #0d2640 100%);
  display: flex; align-items: center; justify-content: center;
}
.about-img-accent {
  position: absolute; bottom: -1.75rem; right: -1.75rem;
  width: 52%; aspect-ratio: 4/3;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  box-shadow: var(--sh-xl); border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.about-accent-text {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 900;
  color: var(--navy); text-align: center; line-height: 1.25;
}
.about-badge {
  position: absolute; top: 2rem; left: -1.75rem;
  background: #fff; border-radius: var(--r-md); padding: 1.25rem 1.5rem; box-shadow: var(--sh-lg);
}
.about-badge-num { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--blue); line-height: 1; }
.about-badge-lbl { font-size: .7rem; color: var(--gray-600); font-weight: 600; margin-top: 2px; }

.about-text { padding: .5rem 0; }
.about-values {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-8);
}
.value-card {
  padding: var(--sp-5); border: 1.5px solid var(--gray-100); border-radius: var(--r-md);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.value-card:hover { border-color: var(--blue); box-shadow: var(--sh-md); transform: translateY(-3px); }
.value-card-icon  { margin-bottom: var(--sp-4); }
.value-card-title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.value-card-desc  { font-size: .8125rem; color: var(--gray-600); line-height: 1.6; }

/* ── 21. GLOBAL HALAL ECONOMY OPPORTUNITIES ECOSYSTEM ───────
   Replaces the earlier orbital region-dot map. Eight industry
   cards built on the same visual language as .program-card
   (radius, shadow, hover-lift, top accent bar, icon treatment)
   so the section reads as native to the rest of the site.    */

.opp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  margin: var(--sp-12) auto 0; text-align: left;
}

.opp-card {
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-6);
  border: 1.5px solid var(--gray-100);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.opp-card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.opp-card:hover,
.opp-card:focus-within { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.opp-card:hover::after,
.opp-card:focus-within::after { transform: scaleX(1); }

.opp-card.c-blue::after { background: var(--blue); }
.opp-card.c-gold::after { background: var(--gold-deep); }
.opp-card.c-navy::after { background: var(--navy); }
.opp-card.c-red::after  { background: var(--red); }

.opp-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); flex-shrink: 0;
  transition: transform var(--dur-mid) var(--ease);
}
.opp-card:hover .opp-icon { transform: scale(1.1); }

.opp-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; letter-spacing: -.01em; }
.opp-desc  { font-size: .8125rem; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--sp-4); }

.opp-block { margin-bottom: var(--sp-4); }
.opp-block-label {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold-text);
  margin-bottom: .4rem;
}
.opp-list { list-style: none; margin: 0; padding: 0; }
.opp-list li {
  font-size: .8125rem; color: var(--gray-700); line-height: 1.55;
  padding-left: .9rem; position: relative; margin-bottom: .2rem;
}
.opp-list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--gold); transform: rotate(45deg);
}

.opp-footer { margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--gray-200); }
.opp-growth {
  display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  color: var(--blue); background: rgba(31,90,166,.08); border-radius: var(--r-pill);
  padding: .3rem .7rem; margin-bottom: .5rem;
}
.opp-source { display: block; font-size: .68rem; color: var(--gray-500); line-height: 1.5; }

/* Sources note beneath the whole section */
.opp-sources-note {
  margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--gray-100);
  font-size: .75rem; color: var(--gray-500); text-align: center; line-height: 1.8;
}
.opp-sources-note strong { color: var(--gray-600); font-weight: 600; }

/* ── 21b. ECONOMY STATS (enhanced) ──────────────────────────── */
.economy-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-10);
}
.econ-stat {
  background: var(--gray-50); border-radius: var(--r-md); border: 1.5px solid var(--gray-100);
  padding: var(--sp-6) var(--sp-4); text-align: center;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.econ-stat:hover { border-color: var(--blue); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.econ-val { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; color: var(--blue); letter-spacing: -.03em; }
.econ-lbl { font-size: .78rem; font-weight: 600; color: var(--gray-600); margin-top: .3rem; }
.econ-src { font-size: .68rem; color: var(--gray-400); margin-top: .25rem; }

/* ── 22. MEDIA PAGE — GALLERY ─────────────────────────────── */

/* ── 22a. FACEBOOK EVENT GALLERY CARDS ────────────────────────
   NEW — previously referenced in media.html markup (.fbgal-*) and driven
   by fb-gallery.js, but never actually styled anywhere in this file. That
   left the buttons rendering with default browser button styling (full
   width, block-level) and the icon <img> inside at its native pixel size
   with nothing constraining it — hence the single oversized card with a
   giant icon instead of a proper 3-up grid of compact event cards. */
.fbgal-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.fbgal-event-card {
  display: flex; flex-direction: column;
  text-align: left;
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--gray-100);
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.fbgal-event-card:hover,
.fbgal-event-card:focus-visible {
  transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent;
}
.fbgal-event-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.fbgal-event-cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center;
}
.fbgal-event-cover-img {
  width: 56px; height: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: transform var(--dur-mid) var(--ease);
}
.fbgal-event-card:hover .fbgal-event-cover-img { transform: scale(1.1); }

.fbgal-event-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.fbgal-event-title {
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  color: var(--navy); line-height: 1.35; margin-bottom: .5rem;
}
.fbgal-event-meta { font-size: .78rem; color: var(--gray-600); margin-bottom: var(--sp-4); }
.fbgal-event-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: var(--blue);
  transition: gap var(--dur-fast) var(--ease);
}
.fbgal-event-card:hover .fbgal-event-cta { gap: .75rem; }
.fbgal-event-count { color: var(--gray-400); font-weight: 500; }

@media (max-width: 1080px) {
  .fbgal-events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fbgal-events-grid { grid-template-columns: 1fr; }
}

/* ── 22b. FACEBOOK ALBUM MODAL — grid streamed page-by-page ──
   Also new: #fbgal-modal, .fbgal-grid, .fbgal-status, etc. had no rules
   at all, so the album modal opened by fb-gallery.js would have rendered
   unstyled/unpositioned (plain document flow instead of a centered
   overlay). Styled to match .modal-backdrop/.modal-box's visual language. */
#fbgal-modal {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(7,17,30,.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.25rem, 5vh, 3rem) var(--sp-4);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 0ms linear 260ms;
}
#fbgal-modal.is-open {
  opacity: 1; pointer-events: all; visibility: visible;
  transition: opacity 260ms var(--ease), visibility 0ms linear 0ms;
}
.fbgal-modal-inner {
  background: #fff; border-radius: var(--r-xl);
  width: 100%; max-width: 1000px; margin: auto;
  box-shadow: 0 32px 80px rgba(7,17,30,.38);
  display: flex; flex-direction: column;
  max-height: 90vh; overflow: hidden;
}
.fbgal-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.fbgal-modal-eyebrow {
  font-family: var(--font-display); font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
  margin-bottom: .25rem;
}
.fbgal-modal-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--navy); }
#fbgal-modal-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-100); color: var(--gray-600); font-size: 1.375rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
#fbgal-modal-close:hover { background: var(--gray-200); color: var(--navy); }
.fbgal-modal-body {
  padding: var(--sp-6) var(--sp-7);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.fbgal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.fbgal-grid img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--r-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.fbgal-grid img:hover { transform: scale(1.03); }
.fbgal-status { text-align: center; padding: var(--sp-5) 0; font-size: .8125rem; color: var(--gray-500); }

@media (max-width: 640px) {
  .fbgal-modal-header { padding: var(--sp-5); }
  .fbgal-modal-body { padding: var(--sp-5); }
  .fbgal-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-2); }
}

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.gallery-item {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--gray-100); cursor: pointer;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--sh-lg); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item-inner {
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center;
}
.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,31,53,.85) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease);
  display: flex; align-items: flex-end; padding: var(--sp-5);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-caption { color: #fff; font-family: var(--font-display); font-size: .875rem; font-weight: 700; }

.gallery-item.span-2 { grid-column: span 2; }
.gallery-item.span-2 .gallery-item-inner { aspect-ratio: 8/3; }

/* Lightbox
 * FIX: this previously targeted class selectors (.lightbox,
 * .lightbox-inner, .lightbox-close, .lightbox-caption) that don't exist
 * anywhere in the actual markup — media.html's #lightbox uses a totally
 * different naming scheme (#lightbox, .lb-inner, #lb-close, #lb-img,
 * #lb-caption, .lb-nav/.lb-prev/.lb-next), and main.js's openLightbox()
 * drives those same IDs. So none of this ever applied: the "lightbox"
 * rendered with zero positioning/sizing, showing as a plain block in
 * normal document flow instead of a centered full-screen overlay — the
 * caption text and unstyled nav buttons ran together because nothing was
 * absolutely positioned. Rewritten below to target what's actually in
 * the DOM, plus added positioning for .lb-nav (prev/next), which had no
 * rule at all before. */
#lightbox {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
  /* FIX: these real Facebook photos can carry their full post caption as
     the photo's alt/name text — sometimes several paragraphs. .lb-inner
     below is only height-capped, not scroll-contained, so a caption long
     enough to push the total content past the viewport height had
     nowhere to go but to spill out past this overlay's own edge,
     visually "leaking" onto the page underneath. overflow-y here gives
     any excess content a scrollbar instead of spilling out. */
  overflow-y: auto;
}
#lightbox.is-open { opacity: 1; pointer-events: all; }
#lightbox .lb-inner {
  position: relative; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  margin: auto; /* keeps it centered when short, scrollable when tall enough to need overflow-y above */
}
#lightbox #lb-img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: var(--r-md); display: block; }
#lb-close {
  position: absolute; top: -2.75rem; right: 0;
  color: rgba(255,255,255,.7); font-size: 1.75rem; line-height: 1; padding: .5rem;
  background: none; border: none; cursor: pointer;
  transition: color var(--dur-fast);
}
#lb-close:hover, #lb-close:focus-visible { color: #fff; }
/* Hidden per request — photo captions (pulled straight from each
   Facebook photo's own name/message field) are being kept out of the
   viewer entirely rather than shown in any contained/scrollable form.
   #lb-caption is left in the markup and still gets its text set by
   main.js on every photo change, in case this should come back later —
   this is the only line that needs to change to re-enable it. */
#lb-caption { display: none; }

.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 1101;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.lb-nav:hover, .lb-nav:focus-visible { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.lb-nav:disabled, .lb-nav.is-hidden { opacity: 0; pointer-events: none; }
.lb-prev { left: var(--sp-5); }
.lb-next { right: var(--sp-5); }
@media (max-width: 640px) {
  .lb-nav { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
  .lb-prev { left: var(--sp-3); }
  .lb-next { right: var(--sp-3); }
}

/* Video grid */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.video-card {
  display: block;
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--gray-100);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }
.video-thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.video-play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.video-thumb:hover .video-play-btn { background: var(--gradient-hover); border-color: transparent; transform: scale(1.1); }
.video-play-btn svg { margin-left: 3px; }
.video-info { padding: var(--sp-5); }
.video-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .375rem; }
.video-meta  { font-size: .78rem; color: var(--gray-600); }

/* Press / Downloads */
.press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.press-card {
  padding: var(--sp-6); background: #fff; border-radius: var(--r-lg);
  border: 1.5px solid var(--gray-100);
  display: flex; gap: var(--sp-5); align-items: flex-start;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.press-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.press-icon {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  background: rgba(31,90,166,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.press-tag   { font-family: var(--font-display); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--blue); margin-bottom: .375rem; }
.press-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: .375rem; }
.press-date  { font-size: .78rem; color: var(--gray-600); }

/* ── Halal News Intelligence Hub (media.html #press) ─────── */
.news-toolbar { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.news-search {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; max-width: 460px;
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--r-pill);
  padding: .7rem 1.25rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.news-search:focus-within { border-color: var(--blue); }
.news-search svg { flex-shrink: 0; }
.news-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: .875rem; color: var(--navy);
}
.news-search input::placeholder { color: var(--gray-500); }

.news-filters { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-8); }
.news-filter-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.125rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-600);
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.news-filter-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.news-filter-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.news-filter-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Featured article */
.news-featured { margin-bottom: var(--sp-8); }
.news-featured-link {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #fff; border-radius: var(--r-xl); border: 1.5px solid var(--gray-100);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.news-featured-link:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.news-featured-media {
  position: relative; aspect-ratio: 16/11; min-height: 280px;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 100%);
  overflow: hidden;
}
.news-featured-body { padding: var(--sp-8) var(--sp-8) var(--sp-7); display: flex; flex-direction: column; justify-content: center; }
.news-featured-title {
  font-family: var(--font-display); font-weight: 800; color: var(--navy);
  font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.28; margin-bottom: .75rem;
}
.news-featured-cta { width: fit-content; margin-top: 1.125rem; display: inline-flex; align-items: center; gap: .5rem; }

/* Grid + cards */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.news-card {
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--gray-100);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }
.news-card-link { display: block; }
.news-card-link { color: inherit; text-decoration: none; }

.news-thumb, .news-featured-media {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(145deg, var(--blue-dark) 0%, var(--navy) 100%);
}
.news-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.news-card:hover .news-thumb-img, .news-featured-link:hover .news-thumb-img { transform: scale(1.06); }
.news-thumb-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.news-thumb:not(.has-image) .news-thumb-img,
.news-featured-media:not(.has-image) .news-thumb-img { display: none; }
.news-thumb:not(.has-image) .news-thumb-fallback,
.news-featured-media:not(.has-image) .news-thumb-fallback { display: flex; }

.news-cat-tag {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(255,255,255,.95); color: var(--navy);
  font-family: var(--font-display); font-size: .64rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: var(--r-pill);
}
.news-cat-tag-featured { background: var(--gold); color: var(--navy); }
.news-cat-tag-trade,
.news-cat-tag-innovation { background: var(--red); color: #fff; }
.news-cat-tag-certification,
.news-cat-tag-events { background: var(--blue); color: #fff; }
.news-cat-tag-tourism,
.news-cat-tag-market { background: var(--gold); color: var(--navy); }
.news-cat-tag-finance,
.news-cat-tag-business { background: var(--navy); color: #fff; }

.news-info { padding: var(--sp-5); }
.news-date { font-size: .72rem; color: var(--gray-500); font-weight: 600; margin-bottom: .4rem; }
.news-title {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 1rem; line-height: 1.38; margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-excerpt {
  font-size: .84rem; color: var(--gray-600); line-height: 1.62; margin-bottom: .875rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-featured-body .news-excerpt { -webkit-line-clamp: 3; font-size: .9rem; }
.news-source-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .78rem; }
.news-source { color: var(--gray-600); font-weight: 600; }
.news-readmore { color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.news-card:hover .news-readmore { color: var(--blue-hover); }

/* Skeleton loading state */
.news-skeleton { pointer-events: none; }
.news-skel-thumb { aspect-ratio: 16/9; background: var(--gray-100); animation: newsPulse 1.5s ease-in-out infinite; }
.news-skel-line { height: .7rem; border-radius: 4px; background: var(--gray-100); margin-bottom: .65rem; animation: newsPulse 1.5s ease-in-out infinite; }
.news-skel-line-sm { width: 35%; height: .6rem; }
.news-skel-line-md { width: 55%; }
.news-skel-line-lg { width: 90%; }
@keyframes newsPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .news-skel-thumb, .news-skel-line { animation: none; opacity: .7; }
}

/* Load more + empty state */
.news-loadmore-wrap { text-align: center; margin-top: var(--sp-8); }
.news-loadmore-wrap [hidden] { display: none !important; }
.news-empty-state { text-align: center; padding: var(--sp-16) var(--sp-6); }
.news-empty-state svg { margin-bottom: var(--sp-4); }
.news-empty-msg { color: var(--gray-600); font-size: .9375rem; max-width: 36ch; margin: 0 auto var(--sp-5); }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-featured-link { grid-template-columns: 1fr; }
  .news-featured-media { aspect-ratio: 16/9; min-height: 0; }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
  .news-filter-btn { flex-shrink: 0; }
}

.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.download-card {
  padding: var(--sp-6); background: var(--gray-50); border-radius: var(--r-lg);
  border: 1.5px solid var(--gray-100); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.download-card:hover { border-color: var(--blue); box-shadow: var(--sh-md); }
.download-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(31,90,166,.1); display: flex; align-items: center; justify-content: center;
}
.download-name { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--navy); }
.download-desc { font-size: .8125rem; color: var(--gray-600); }

/* ── 23. SERVICES PAGE EXTRAS ─────────────────────────────── */
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  counter-reset: step-counter;
}
.process-step {
  position: relative;
  counter-increment: step-counter;
  padding-top: var(--sp-12);
}
.process-step::before {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: 3rem; font-weight: 900;
  line-height: 1; color: rgba(31,90,166,.12); letter-spacing: -.04em;
}
.process-step::after {
  content: '';
  position: absolute; top: var(--sp-6); left: calc(100% / 2 + 1.5rem); right: calc(-100% / 2 + 1.5rem);
  height: 1px; background: var(--gray-100);
}
.process-step:last-child::after { display: none; }
.process-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(31,90,166,.1);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4);
}
.process-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.process-desc  { font-size: .875rem; color: var(--gray-600); line-height: 1.65; }

/* Audience grid */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.audience-card {
  padding: var(--sp-6); background: #fff; border-radius: var(--r-lg); border: 1.5px solid var(--gray-100);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  transition: all var(--dur-mid) var(--ease);
}
.audience-card:hover { border-color: var(--blue); box-shadow: var(--sh-md); transform: translateY(-3px); }
.audience-icon {
  width: 88px; height: 88px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.audience-icon img { width: 100%; height: 100%; display: block; }
.audience-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy); }
.audience-desc  { font-size: .85rem; color: var(--gray-600); line-height: 1.65; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--gray-100);
}
.faq-item:first-child { border-top: 1px solid var(--gray-100); }

.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; width: 100%;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy);
  text-align: left;
  transition: color var(--dur-fast);
}
.faq-question:hover { color: var(--blue); }
.faq-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-mid) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); }
.faq-icon svg { fill: var(--gray-400); transition: fill var(--dur-fast); }
.faq-item.is-open .faq-icon svg { fill: #fff; }

.faq-answer {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease), padding var(--dur-mid) var(--ease);
}
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding-bottom: var(--sp-5); font-size: .9375rem; color: var(--gray-600); line-height: 1.75; }

/* ── 24. CONTACT MODAL ────────────────────────────────────── */

/* ── Backdrop: full-screen dimmer, scrolls itself ─────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;

  /* Scroll the backdrop so tall forms on short screens work */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Dark overlay */
  background: rgba(7, 17, 30, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Flex centering — aligns to start so modal scrolls up naturally */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.25rem, 5vh, 3rem) var(--sp-4) clamp(1.25rem, 5vh, 3rem);

  /* Hidden until open */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1),
              visibility 0ms linear 260ms;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1),
              visibility 0ms linear 0ms;
}

/* ── Modal box: white card inside the backdrop ────────────── */
.modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 640px;

  /* Let the box grow as tall as it needs — the backdrop scrolls */
  flex-shrink: 0;
  margin: auto; /* vertically centres when content is short */

  box-shadow:
    0 32px 80px rgba(7,17,30,.38),
    0 8px 24px rgba(7,17,30,.18);

  /* Slide+scale entrance */
  transform: translateY(28px) scale(.97);
  transition: transform 340ms cubic-bezier(0.22,1,0.36,1);

  /* Clip inner elements to rounded corners without blocking scroll */
  overflow: clip;
}

.modal-backdrop.is-open .modal-box {
  transform: translateY(0) scale(1);
}

/* ── Modal header ──────────────────────────────────────────── */
.modal-header {
  position: relative;
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  background: linear-gradient(140deg, var(--navy) 0%, #1a3a5c 100%);
  overflow: hidden;
}
.modal-header-atmo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(31,90,166,.5) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(243,211,91,.12) 0%, transparent 70%);
  pointer-events: none;
}
.modal-header-inner { position: relative; z-index: 1; }
.modal-logo { margin-bottom: var(--sp-4); }
.modal-logo-img {
  height: 36px; width: 36px;
  object-fit: contain;
}
.modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .375rem;
  letter-spacing: -.02em;
}
.modal-subtitle {
  font-size: .9rem;
  color: rgba(255,255,255,.58);
  margin: 0;
}
.modal-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.modal-close:hover {
  background: rgba(255,255,255,.24);
  transform: scale(1.1);
}
.modal-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Modal body ────────────────────────────────────────────── */
.modal-body {
  padding: var(--sp-7);
}

/* ── Form states ───────────────────────────────────────────── */
.form-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-7);
  gap: var(--sp-4);
  min-height: 280px;
}
.state-icon { width: 56px; height: 56px; }
.state-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.state-body { color: var(--gray-500); font-size: .95rem; margin: 0; }

/* ── Body scroll lock while any modal is open (iOS Safari safe) ── */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
/* #site-nav's z-index (900) is already below every modal's (2000/3000),
   which should be enough on its own — but it wasn't rendering behind the
   cuisine-modal in practice, so this forces it explicitly rather than
   relying on an implicit stacking comparison that isn't behaving as
   expected. Also blocks clicks reaching the now-hidden-behind nav links. */
body.modal-open #site-nav {
  z-index: 1;
  pointer-events: none;
}

/* ── Mobile bottom-sheet on small phones ──────────────────── */
@media (max-width: 480px) {
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: 1.5rem 1.5rem 0 0;
    max-height: 92dvh;
    /* Scroll inside on very short phones */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }
  .modal-header  { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .modal-body    { padding: var(--sp-5); }
}

/* Modal header */
.modal-header {
  background: var(--navy); padding: var(--sp-8) var(--sp-8) var(--sp-6);
  position: relative;
}
.modal-header-atmo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 80% 20%, rgba(31,90,166,.5) 0%, transparent 65%);
}
.modal-header-inner { position: relative; z-index: 1; }
.modal-logo { display: flex; align-items: center; gap: .625rem; margin-bottom: var(--sp-4); }
.modal-logo-icon { width: 28px; height: 28px; }
.modal-logo-name { font-family: var(--font-display); font-size: 1rem; font-weight: 900; letter-spacing: .08em; color: #fff; }
.modal-title    { color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: .375rem; letter-spacing: -.02em; }
.modal-subtitle { color: rgba(255,255,255,.65); font-size: .875rem; }
.modal-close {
  position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 2;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.6); font-size: 1.375rem; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.modal-close:focus-visible { outline: 2px solid var(--gold); }

/* Modal body */
.modal-body { padding: var(--sp-8); }

/* Form layout */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: var(--sp-4); }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--navy);
}
.form-label .req { color: var(--red); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width: 100%; padding: .875rem 1.1rem;
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md); font-size: .9375rem; color: var(--dark);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-std),
              box-shadow   var(--dur-fast) var(--ease-std),
              background   var(--dur-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,90,166,.13);
  background: #fff;
}
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,64,64,.1); }

.form-textarea { resize: vertical; min-height: 110px; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D6B80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}

.field-error { font-size: .72rem; color: var(--red); min-height: 1rem; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Turnstile */
.turnstile-wrap { display: flex; flex-direction: column; gap: .5rem; }
.cf-turnstile { min-height: 65px; }

/* Form states */
.form-state {
  display: none; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-4); padding: var(--sp-8);
}
.form-state.is-visible { display: flex; }

.spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--gray-200); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.state-icon { width: 56px; height: 56px; }
.state-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--navy); }
.state-body  { font-size: .9375rem; color: var(--gray-600); line-height: 1.65; max-width: 34ch; }

.form-legal { font-size: .72rem; color: var(--gray-400); margin-top: var(--sp-4); }
.form-legal a { color: var(--blue); text-decoration: underline; }

/* ── 25. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: #0a1928; color: #fff;
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}


.footer-logo-row { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-4); }
.footer-logo-icon { width: 32px; height: 32px; }
.footer-logo-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; letter-spacing: .08em; }
.footer-tagline { font-size: .875rem; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 27ch; margin-bottom: var(--sp-5); }

.footer-social { display: flex; gap: .625rem; }
.footer-soc-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.footer-soc-btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.footer-soc-btn:focus-visible { outline: 2px solid var(--gold); }
.footer-soc-btn svg { fill: rgba(255,255,255,.55); transition: fill var(--dur-fast); }
.footer-soc-btn:hover svg { fill: #fff; }

.footer-col-title {
  font-family: var(--font-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-bottom: var(--sp-4);
}
.footer-col-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-col-links a {
  font-size: .875rem; color: rgba(255,255,255,.58);
  transition: color var(--dur-fast);
}
.footer-col-links a:hover { color: var(--red); }
.footer-col-links a:focus-visible { outline: 2px solid var(--gold); border-radius: 3px; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
}
.footer-copy  { font-size: .78rem; color: rgba(255,255,255,.25); }
.footer-credit { font-size: .78rem; color: rgba(255,255,255,.4); margin-top: .9rem; }
.footer-credit strong { color: rgba(255,255,255,.7); font-weight: 700; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: .78rem; color: rgba(255,255,255,.25); transition: color var(--dur-fast); }
.footer-legal a:hover { color: rgba(255,255,255,.65); }

/* ── 26. RESPONSIVE ───────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --nav-h: 80px; }
  .programs-grid { gap: 2rem; }
}

@media (max-width: 1080px) {
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .footer-brand  { grid-column: 1/-1; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-step::after { display: none; }
  .gallery-grid  { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.span-2 { grid-column: auto; }
  .gallery-item.span-2 .gallery-item-inner { aspect-ratio: 4/3; }
}

@media (max-width: 820px) {
  .about-grid  { grid-template-columns: 1fr; }
  .about-badge { left: 1rem; }
  .about-img-accent { display: none; }
  .about-img-main   { aspect-ratio: 3/2; }
  .about-values     { grid-template-columns: 1fr; }
  .feature-grid     { grid-template-columns: 1fr; }
  .economy-stats    { grid-template-columns: repeat(2, 1fr); }
  .opp-grid         { grid-template-columns: repeat(2, 1fr); }
  .audience-grid    { grid-template-columns: repeat(2, 1fr); }
  .download-grid    { grid-template-columns: repeat(2, 1fr); }
  .video-grid       { grid-template-columns: repeat(2, 1fr); }
  .press-grid       { grid-template-columns: 1fr; }
  .stories-grid     { grid-template-columns: 1fr; }
  .form-row         { grid-template-columns: 1fr; }
}

/* Why Horizon section 2-col layout — base/desktop rule.
   (Mobile override for this class lives in the 768px block below.) */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
    --container-x: 1.25rem;
  }
  .nav-links  { display: none; }
  .nav-actions .btn { display: none; }
  .nav-hamburger    { display: flex; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-cell:nth-child(3n)::before { display: none; }

  .programs-grid  { grid-template-columns: 1fr; }
  .events-grid    { grid-template-columns: 1fr; }
  .gallery-grid   { grid-template-columns: 1fr; }
  .gallery-item.span-2 { grid-column: auto; }
  .video-grid     { grid-template-columns: 1fr; }
  .audience-grid  { grid-template-columns: 1fr; }
  .download-grid  { grid-template-columns: 1fr; }
  .opp-grid       { grid-template-columns: 1fr; }
  .process-steps  { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .footer-brand   { grid-column: auto; }

  .hero-inner { text-align: center; }
  .hero-headline { margin: 0 auto var(--sp-6); font-size: clamp(1.85rem, 8.6vw, 2.5rem); line-height: 1.12; }
  .hero-lead { margin: 0 auto var(--sp-8); }
  .hero-ctas { justify-content: center; }

  /* Slideshow nav repositioning on mobile */
  .hero-slide-nav { bottom: 4.5rem; gap: .625rem; }
  .hero-slide-prev,
  .hero-slide-next { width: 34px; height: 34px; }

  /* Why Horizon section grid → stack on mobile */
  .why-grid { grid-template-columns: 1fr !important; }

  .page-hero-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 300px; justify-content: center; }
  .modal-body { padding: var(--sp-5); }
  .modal-header { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2n)::before { display: none; }
  .economy-stats { grid-template-columns: 1fr 1fr; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .filter-tabs { gap: .375rem; }
}

@media (min-width: 1920px) {
  :root { --max-w: 1440px; }
}

/* ============================================================
   IMAGE ENHANCEMENTS (appended v2)
   ============================================================ */

/* Nav logo image */
.nav-logo-img {
  height: 44px; width: auto; object-fit: contain;
  /* No filter — keep original colored logo (blue/gold/red geometric mark) */
  transition: opacity var(--dur-fast);
}
.nav-logo-img:hover { opacity: .88; }

/* Footer logo image */
.footer-logo-img {
  height: 40px; width: auto; object-fit: contain;
  /* No filter — show original colors */
}

/* Modal logo image */
.modal-logo-img {
  height: 32px; width: auto; object-fit: contain;
  /* No filter — show original colors */
}

/* Hero with photo background */
.hero { position: relative; }
.hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 30%;
  will-change: transform;
  overflow: hidden;
}
.hero-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(11,31,53,.93) 0%,
    rgba(11,31,53,.80) 50%,
    rgba(26,58,92,.86) 100%);
}
.hero-atmo, .hero-grid-bg, .hero-shapes, .hero-body { z-index: 1; }

/* About section - real image */
.about-img-main { overflow: hidden; }
.about-img-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.about-img-main:hover img { transform: scale(1.04); }

/* Event card images */
.event-img { overflow: hidden; position: relative; }
.event-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.event-card:hover .event-img img { transform: scale(1.06); }

/* Page hero with photo */
.page-hero { overflow: hidden; }
.page-hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.page-hero-bg-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(11,31,53,.90) 0%,
    rgba(11,31,53,.75) 60%,
    rgba(26,58,92,.82) 100%);
}
.page-hero-atmo, .page-hero-shapes, .page-hero-body { z-index: 1; }

/* Gallery hover overlay */
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Img loaded fade */
img.img-loaded { animation: revealFade .5s ease both; }
/* revealFade keyframe lives in animations.css (loaded alongside this file on
   every page) — removed the duplicate that used to be defined here too. */

/* Program icon pill (for card images in services) */
.prog-card-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin: calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-6);
  width: calc(100% + var(--sp-8) * 2);
}

/* Testimonial avatar image */
.author-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* Video thumbnail image */
.video-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.video-thumb:hover .video-thumb-img { transform: scale(1.05); }
.video-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(11,31,53,.75) 100%);
}

/* ── 27. PERFORMANCE — CSS CONTAINMENT ────────────────────── */
/* Contain paint/layout for isolated components to reduce repaint scope */
.program-card,
.event-card,
.story-card,
.value-card,
.audience-card,
.econ-stat,
.faq-item,
.partner-logo {
  contain: layout style;
}

/* Partners strip — contain to prevent layout thrash from animation */
.partners-strip { contain: layout; }

/* Hero slideshow — isolated paint context (avoid `contain:strict`'s size
   containment, which can conflict with inset:0 sizing in some engines) */
.hero-slideshow { contain: layout paint; }

/* ── 28. PERFORMANCE — WILL-CHANGE DISCIPLINE ─────────────── */
/* Apply will-change only when animation is imminent (JS toggles .is-animating) */
/* Static will-change on hero shapes handled via float-* keyframe classes */

/* Explicitly release will-change on non-animated images */
.gallery-item img,
.event-img img,
.about-img-main img {
  /* will-change is set in animations.css only on hover via .card-img-wrap */
  /* Ensure static images don't hold compositor layers */
  will-change: auto;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img,
.event-card:hover .event-img img,
.about-img-main:hover img {
  will-change: transform;
}

/* ── 29. ULTRA-WIDE DISPLAY ADJUSTMENTS ───────────────────── */
@media (min-width: 1728px) {
  .hero-inner { max-width: 900px; }
  .partners-track { gap: 2.5rem; }
}


/* ── 30. NAV LOGO WORDMARK ───────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 44px; width: 44px;
  object-fit: contain;
  flex-shrink: 0;
  /* No filter — keep original colored logo */
}
.nav-logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.nav-logo-brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  display: block;
}
.nav-logo-sub {
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.48);
  display: block;
  white-space: nowrap;
}

/* ── 31. FOOTER LOGO WORDMARK ────────────────────────────── */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: var(--sp-4);
}
.footer-logo-img {
  height: 40px; width: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.footer-logo-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  display: block;
}
.footer-logo-sub {
  font-family: var(--font-body);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,.4);
  display: block;
}

/* ── 32. SLIDESHOW DOTS — ARROWS REMOVED FROM MARKUP ─────── */
/* Arrow buttons were removed from the HTML entirely (dots-only design).
   .hero-slide-prev/.hero-slide-next rules above are now dead CSS kept
   only in case arrows are reintroduced; no markup currently uses them. */

/* ── 33. (superseded) ──────────────────────────────────────
   Active-page styling for .nav-links now lives in section 7
   as a gold pill + glow treatment, applied at the source rule
   so it isn't overridden by this later cascade position. */

/* ── 34. (overlay consolidated — see section 9b) ────────── */
/* ── 35. (partner-logo typography merged into base rule, section 17) ── */
/* ── 36. (mobile modal sheet consolidated — see section 24) ── */

/* ── 37. ISLAMIC DESIGN — HERO GEOMETRIC FRAME ──────────── */
/* Gold bismillah line accent above hero headline */
.hero-headline::before {
  display: none; /* reserved for future use */
}

/* ── 38. NAV LOGO — SCROLLED STATE ──────────────────────── */
/* When nav scrolls, brand stays white/gold — no change needed */
.is-scrolled .nav-logo-brand { color: #fff; }
.is-scrolled .nav-logo-sub   { color: rgba(255,255,255,.45); }


/* ═══════════════════════════════════════════════════════════
   HALAL CUISINE SECTION & MODAL
   ═══════════════════════════════════════════════════════════ */

/* ── Section header ──────────────────────────────────────── */
.cuisine-section { background: var(--gray-50); }

.cuisine-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.cuisine-header .lead {
  max-width: 58ch;
  margin: .875rem auto 0;
  color: var(--gray-500);
}

/* ── Featured 6-card grid ────────────────────────────────── */
.cuisine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) {
  .cuisine-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cuisine-grid { grid-template-columns: 1fr; }
}

/* ── Cuisine card ────────────────────────────────────────── */
.cuisine-card {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--gray-100);
  transition:
    transform 320ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 320ms cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}
.cuisine-card:hover,
.cuisine-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
  outline: none;
}
.cuisine-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.cuisine-card-img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.cuisine-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 480ms cubic-bezier(0.22,1,0.36,1);
  display: block;
}
.cuisine-card:hover .cuisine-card-img { transform: scale(1.06); }

/* Category badge on card image */
.cuisine-card-badge {
  position: absolute;
  top: .875rem; left: .875rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cuisine-badge-chicken {
  background: rgba(31,90,166,.9);
  color: #fff;
}
.cuisine-badge-beef {
  background: rgba(255,64,64,.92);
  color: #fff;
}
.cuisine-badge-snack {
  background: rgba(243,211,91,.94);
  color: var(--navy);
}

.cuisine-card-body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.cuisine-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.01em;
}
.cuisine-card-desc {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--gray-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── View All CTA row ────────────────────────────────────── */
.cuisine-view-all {
  text-align: center;
  margin-top: var(--sp-10);
}
.cuisine-view-all-note {
  margin-top: var(--sp-3);
  font-size: .82rem;
  color: var(--gray-400);
}

/* ── btn-blue variant ────────────────────────────────────── */
.btn-blue {
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue);
}
.btn-blue:hover { background: var(--navy); border-color: var(--navy); }

/* ═══════════════════════════════════════════════════════════
   CUISINE MODAL
   ═══════════════════════════════════════════════════════════ */

.cuisine-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000; /* above contact modal */
  background: rgba(7,17,30,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem,4vh,2.5rem) var(--sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 260ms cubic-bezier(0.22,1,0.36,1),
    visibility 0ms linear 260ms;
}
.cuisine-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition:
    opacity 260ms cubic-bezier(0.22,1,0.36,1),
    visibility 0ms linear 0ms;
}

.cuisine-modal-box {
  background: #fff;
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 920px;
  flex-shrink: 0;
  margin: auto;
  box-shadow: 0 40px 100px rgba(7,17,30,.42), 0 8px 24px rgba(7,17,30,.18);
  overflow: clip;
  transform: translateY(32px) scale(.97);
  transition: transform 340ms cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
}
.cuisine-modal-backdrop.is-open .cuisine-modal-box { transform: none; }

/* ── Cuisine modal header ────────────────────────────────── */
.cuisine-modal-header {
  position: relative;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: linear-gradient(140deg, var(--navy) 0%, #142d4a 100%);
  flex-shrink: 0;
  overflow: hidden;
}
.cuisine-modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 2L34 14L46 8L40 20L52 24L40 28L46 40L34 34L30 46L26 34L14 40L20 28L8 24L20 20L14 8L26 14Z' fill='none' stroke='rgba(243,211,91,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}
.cuisine-modal-header-inner { position: relative; z-index: 1; }
.cuisine-modal-eyebrow {
  color: rgba(243,211,91,.85) !important;
  margin-bottom: var(--sp-2);
}
.cuisine-modal-eyebrow::before,
.cuisine-modal-eyebrow::after { background: linear-gradient(90deg, rgba(243,211,91,.4), rgba(243,211,91,.8)) !important; }
.cuisine-modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .375rem;
  letter-spacing: -.02em;
}
.cuisine-modal-subtitle { font-size: .9rem; color: rgba(255,255,255,.55); margin: 0; }
.cuisine-modal-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 160ms, transform 160ms;
}
.cuisine-modal-close:hover { background: rgba(255,255,255,.24); transform: scale(1.1); }
.cuisine-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Filter tabs ─────────────────────────────────────────── */
.cuisine-modal-filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
  flex-shrink: 0;
}
.cuisine-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.125rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  transition:
    background 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 120ms var(--ease);
}
.cuisine-filter-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.cuisine-filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.cuisine-filter-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 800;
  padding: 0 5px;
}
.cuisine-filter-btn:not(.active) .filter-count {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* ── Scrollable body ─────────────────────────────────────── */
.cuisine-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(65vh, 640px);
  padding: var(--sp-7) var(--sp-8);
  flex: 1;
}

/* ── Modal food grid ─────────────────────────────────────── */
.cuisine-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 760px) {
  .cuisine-modal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cuisine-modal-grid { grid-template-columns: 1fr; }
  .cuisine-modal-filters { padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }
  .cuisine-modal-body { padding: var(--sp-5); }
  .cuisine-modal-header { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* ── Individual modal card ───────────────────────────────── */
.cm-card {
  perspective: 1400px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cm-card.is-hidden {
  display: none;
}

.cm-card-inner {
  position: relative;
  height: 440px;
  transition: transform 600ms cubic-bezier(0.22,1,0.36,1);
  transform-style: preserve-3d;
}
.cm-card.is-flipped .cm-card-inner { transform: rotateY(180deg); }

.cm-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-100);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cm-card-front { transition: box-shadow 260ms ease; }
.cm-card.is-flipped .cm-card-front { box-shadow: none; }
.cm-card:hover .cm-card-front { box-shadow: var(--sh-md); }

.cm-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--navy), #14304f);
  color: #fff;
  padding: var(--sp-5);
  justify-content: center;
}

.cm-card-img {
  width: 100%; height: 180px;
  object-fit: cover;
  display: block;
  flex: none;
  transition: transform 420ms cubic-bezier(0.22,1,0.36,1);
}
.cm-card:hover .cm-card-img { transform: scale(1.05); }

.cm-card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; min-height: 0; }

.cm-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
  width: fit-content;
}

.cm-card-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 var(--sp-1);
  letter-spacing: -.01em;
}
.cm-card-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--gray-500);
  margin: 0;
  overflow-y: auto;
}

/* ── Flip button (front) and back-navigation button (back) ─── */
.cm-card-flip-btn {
  display: block;
  margin: var(--sp-3) var(--sp-4) var(--sp-4);
  padding: .6rem .9rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--gold-deep);
  background: transparent;
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cm-card-flip-btn:hover { background: var(--gold); color: var(--navy); }
.cm-card-flip-back {
  margin: auto var(--sp-4) var(--sp-4);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.cm-card-flip-back:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Pricing content on the back face ────────────────────── */
.cm-card-back-body { flex: 1; overflow-y: auto; }
.cm-price-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--sp-3);
}
.cm-price-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: .55rem; }
.cm-price-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: .82rem; color: rgba(255,255,255,.85);
  padding-bottom: .55rem; border-bottom: 1px dashed rgba(255,255,255,.18);
}
.cm-price-list li strong { color: var(--gold); font-family: var(--font-display); font-size: .95rem; white-space: nowrap; }
.cm-price-order { font-size: .78rem; color: rgba(255,255,255,.68); margin: 0; line-height: 1.6; }
.cm-price-order a { color: var(--gold); font-weight: 700; text-decoration: none; }
.cm-price-order a:hover { text-decoration: underline; }

/* ── Modal footer ────────────────────────────────────────── */
.cuisine-modal-footer {
  padding: var(--sp-4) var(--sp-8);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  text-align: center;
  font-size: .8rem;
  color: var(--gray-400);
  flex-shrink: 0;
}
.cuisine-modal-footer strong { color: var(--blue); }

/* ── "No results" empty state ────────────────────────────── */
.cuisine-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-12);
  color: var(--gray-400);
  font-size: .9rem;
}


/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE — Program row layout & feature checklists
   (replaces repeated inline styles across camps/conferences/trade-fairs)
   ═══════════════════════════════════════════════════════════ */
.svc-program-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.svc-program-row:not(:last-child) { margin-bottom: clamp(4rem, 8vw, 7rem); }

.svc-feature-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.svc-feature-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: var(--gray-600); }
.svc-feature-list .svc-check { color: var(--blue); font-weight: 800; flex-shrink: 0; }

/* Service-area category badges (HALAL01 / HALAL02 / HALAL03) */
.svc-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: .65rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: var(--r-pill);
  margin-bottom: var(--sp-4); margin-right: .375rem;
}
.program-card > .svc-tag:first-child { margin-bottom: var(--sp-5); align-self: flex-start; }
.svc-tag-gold { background: rgba(201,168,32,.14); color: var(--gold-text); }
.svc-tag-blue { background: rgba(31,90,166,.1);  color: var(--blue); }
.svc-tag-navy { background: rgba(11,31,53,.08);  color: var(--navy); }
.svc-tag-red  { background: rgba(255,64,64,.1);  color: var(--red-dark); }
.eyebrow-islamic .svc-tag { margin-bottom: 0; }

@media (max-width: 768px) {
  .svc-program-row { grid-template-columns: 1fr; }
  .svc-program-row > div { order: 1 !important; }
  .svc-program-row > .reveal-left,
  .svc-program-row > .reveal-right { order: 2 !important; }
}

/* ═══════════════════════════════════════════════════════════
   BEFORE / AFTER HALAL CERTIFICATION FRAMEWORK (services.html)
   Sourced from the Mihwariy Consultancy framework diagram
   ═══════════════════════════════════════════════════════════ */

.cert-framework-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  margin-top: var(--sp-10);
}

.cert-framework-col {
  background: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  border: 1.5px solid var(--gray-100);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden; /* clips the accent bar below to a clean rounded-corner cap */
}
.cert-framework-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.cert-framework-before::before { background: var(--gold); }
.cert-framework-after::before  { background: var(--blue); }

.cert-framework-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.cert-framework-before .cert-framework-label { color: var(--gold-text); }
.cert-framework-after  .cert-framework-label { color: var(--blue); }

.cert-framework-list {
  display: flex; flex-direction: column; gap: var(--sp-3);
  list-style: none; margin: 0; padding: 0;
}
.cert-framework-list li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .85rem; line-height: 1.6; color: var(--gray-600);
}
.cert-framework-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
  margin-top: .1rem;
}
.cert-framework-before .cert-framework-check { background: rgba(243,211,91,.18); color: var(--gold-text); }
.cert-framework-after  .cert-framework-check { background: rgba(31,90,166,.12); color: var(--blue); }

/* Centre shield + connecting lines */
.cert-framework-center {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 var(--sp-2);
  position: relative;
}
.cert-framework-shield {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(11,31,53,.28);
  margin-bottom: var(--sp-4);
  position: relative;
  z-index: 1;
}
/* Connecting lines from each card to the shield (desktop only) */
.cert-framework-center::before,
.cert-framework-center::after {
  content: '';
  position: absolute;
  top: 38px;
  height: 2px;
  width: var(--sp-8);
  background: linear-gradient(90deg, rgba(201,168,32,.4), rgba(31,90,166,.4));
}
.cert-framework-center::before { left: -2rem; }
.cert-framework-center::after  { right: -2rem; transform: scaleX(-1); }

.cert-framework-center-title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 800;
  color: var(--navy);
  margin: 0 0 .25rem;
  white-space: nowrap;
}
.cert-framework-center-sub {
  font-size: .75rem; color: var(--gray-500);
  max-width: 18ch;
  line-height: 1.5;
}

.cert-framework-footnote {
  text-align: center;
  font-size: .85rem;
  color: var(--gray-500);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--gray-100);
}

/* Responsive: stack to single column, hide connector lines */
@media (max-width: 900px) {
  .cert-framework-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .cert-framework-center {
    order: -1; /* shield appears first on mobile for visual anchor */
    padding: var(--sp-4) 0;
  }
  .cert-framework-center::before,
  .cert-framework-center::after { display: none; }
}

/* ── PROGRAM CARD IMAGES (replaces icon treatment) ────────── */
.program-img-wrap {
  /* Bleeds to card edges — card has padding: var(--sp-8) = 2rem */
  margin: -2rem -2rem 1.5rem;
  width: calc(100% + 4rem);
  height: 168px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
}
.program-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease);
  display: block;
}
.program-card:hover .program-img { transform: scale(1.06); }

/* ── OPP CARD IMAGES (replaces icon treatment) ────────────── */
.opp-img-wrap {
  /* Bleeds to card edges — opp-card has padding: var(--sp-6) = 1.5rem */
  margin: -1.5rem -1.5rem 1rem;
  width: calc(100% + 3rem);
  height: 130px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
}
.opp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease);
  display: block;
}
.opp-card:hover .opp-img,
.opp-card:focus-within .opp-img { transform: scale(1.06); }

/* Responsive: reduce image heights on smaller screens */
@media (max-width: 768px) {
  .program-img-wrap { height: 140px; }
  .opp-img-wrap     { height: 110px; }
}

/* ── 30. BACK TO TOP BUTTON ────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 950;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px rgba(11,31,53,.22);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms,
              background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.back-to-top svg { width: 16px; height: 16px; }
.back-to-top.is-visible {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(11,31,53,.28);
}
.back-to-top:active { transform: translateY(1px); }
.back-to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 768px) {
  .back-to-top {
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: 34px; height: 34px;
  }
  .back-to-top svg { width: 13px; height: 13px; }
}

/* Keep it clear of the mobile sticky CTA bar / footer, if present */
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 1ms, visibility 1ms; }
}

/* ── 31. HALAL CERTIFYING BODIES — FLIP CARDS ─────────────── */
@property --spread {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@property --mx {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --my {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

#certifying-bodies .container {
  max-width: 1600px;
}

.hcb-card-face {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  overflow: hidden;
}

/* Moving gloss/reflection overlay — tracks cursor position via the shared
   --mx/--my custom properties (currently unset by any active hover handler,
   so this falls back to a static center position; see @property defaults above) */
.hcb-card-face::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 49%, transparent 64%);
  background-size: 220% 220%;
  background-position: calc(50% + (var(--mx, 0) * 34%)) calc(50% + (var(--my, 0) * 34%));
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background-position 260ms ease;
}
.hcb-card-back::after { opacity: .28; mix-blend-mode: soft-light; }

.hcb-card-front {
  background: #fff;
  border: 1px solid var(--gray-100);
  box-shadow:
    0 3px 8px rgba(11,31,53,.06),
    0 15px 30px rgba(11,31,53,.10),
    0 30px 60px rgba(11,31,53,.10);
  cursor: pointer;
  font: inherit;
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
}
.hcb-card-front:hover,
.hcb-card-front:focus-visible {
  box-shadow:
    0 4px 10px rgba(11,31,53,.08),
    0 20px 40px rgba(11,31,53,.14),
    0 36px 70px rgba(11,31,53,.12);
  border-color: var(--gold);
  transform: translateY(-3px);
}
.hcb-card-front:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hcb-logo {
  width: 108px; height: 108px;
  object-fit: contain;
}
.hcb-logo-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hcb-logo-group .hcb-logo { width: 80px; height: 80px; }
.hcb-card-front > .hcb-logo { margin-bottom: var(--sp-4); }
.hcb-name {
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 30ch;
}
.hcb-flip-hint {
  margin-top: var(--sp-3);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--gray-400);
}

.hcb-card-back {
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 100%);
  color: #fff;
  transform: rotateY(180deg);
  cursor: pointer;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
  box-shadow:
    0 3px 8px rgba(11,31,53,.15),
    0 15px 30px rgba(11,31,53,.20),
    0 30px 60px rgba(11,31,53,.16);
}
.hcb-card-back::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari/Edge */
.hcb-back-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  width: 100%;
  min-height: 0;
}
.hcb-name-back {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 800;
  color: var(--gold);
  line-height: 1.15;
  text-align: center;
  flex: 0 0 auto;
  width: 34%;
  overflow-wrap: break-word;
}
.hcb-back-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: var(--sp-4);
}
.hcb-contact-list {
  list-style: none;
  display: flex; flex-direction: column; gap: .55rem;
  font-size: .8125rem;
  margin-bottom: var(--sp-3);
}
.hcb-icon {
  flex-shrink: 0;
  color: var(--gold);
  opacity: .9;
  vertical-align: -2px;
  margin-right: .3rem;
}
.hcb-contact-list a {
  color: rgba(255,255,255,.85);
  position: relative;
  z-index: 1; /* sit above the back face's own click-to-close handler */
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.hcb-contact-list a:hover {
  color: #fff;
  border-bottom-color: transparent;
  border-image: var(--gradient-hover) 1;
}
.hcb-contact-note {
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  margin-bottom: var(--sp-4);
}
.hcb-visit-link {
  font-size: .8125rem; font-weight: 700;
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.hcb-visit-link:hover { text-decoration: underline; }
.hcb-flip-hint-back {
  margin-top: var(--sp-4);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

@media (max-width: 560px) {
  .hcb-logo { width: 84px; height: 84px; }
  .hcb-logo-group .hcb-logo { width: 60px; height: 60px; }
  .hcb-name { font-size: .8125rem; max-width: 24ch; }
  .hcb-back-content { flex-direction: column; gap: var(--sp-3); }
  .hcb-name-back { width: auto; font-size: 1.5rem; }
  .hcb-back-info { border-left: none; border-top: 1px solid rgba(255,255,255,.14); padding-left: 0; padding-top: var(--sp-3); text-align: center; }
  .hcb-contact-list { align-items: center; }
}

/* ── 31. VISITOR COUNTER (floating, bottom-left) ─────────────
 * Mirrors .back-to-top's fixed/pill/shadow language (§30) but sits at
 * bottom-left since that corner is otherwise empty — .back-to-top and the
 * raffle launcher pill/toast (raffle.css) all live bottom-right. */
.hz-visitor-counter {
  position: fixed;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 940; /* below modals (2000+) and the raffle ticket pill (#hz-raffle-pill, 3800), above page content */
  display: flex; align-items: center; gap: .55rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-pill);
  padding: .55rem 1rem .55rem .7rem;
  box-shadow: 0 4px 16px rgba(11,31,53,.22);
  font-family: var(--font-body, 'Inter', sans-serif);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms,
              box-shadow 200ms var(--ease), bottom 220ms var(--ease);
}
.hz-visitor-counter.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hz-visitor-counter:hover { box-shadow: 0 8px 22px rgba(11,31,53,.28); }

.hz-visitor-counter-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #3DDC84; /* distinct from brand gold/blue — reads as an unambiguous "live" signal */
  box-shadow: 0 0 0 0 rgba(61,220,132,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .hz-visitor-counter-dot { animation: hz-visitor-pulse 2.2s ease-out infinite; }
  @keyframes hz-visitor-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(61,220,132,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(61,220,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); }
  }
}

.hz-visitor-counter-text {
  font-size: .8125rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.hz-visitor-counter-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--gold);
  display: inline-block;
}
/* Brief scale-pulse whenever the number ticks up, so "live" is felt, not
   just stated. Toggled by JS adding/removing this class after each poll
   that shows a higher count. */
.hz-visitor-counter-num.is-ticking { animation: hz-visitor-tick 420ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .hz-visitor-counter-num.is-ticking { animation: none; }
}
@keyframes hz-visitor-tick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .hz-visitor-counter { left: var(--sp-3); bottom: var(--sp-3); padding: .5rem .85rem .5rem .6rem; }
  .hz-visitor-counter-text { font-size: .75rem; }
}