/* ==========================================================================
   JHEWA SABAH - OFFICIAL DESIGN SYSTEM & INTERACTIVE ANIMATIONS
   Modern, Award-Winning UI for Jabatan Hal Ehwal Wanita Sabah
   ========================================================================== */

:root {
  /* ==========================================================================
     JHEWA OFFICIAL BRAND COLOR PALETTE (From JHEWA Official Logo & Ministry Identity)
     Cerise Magenta (#F2007C) + Royal Velvet Plum (#2D0B3D) + Radiant Sabah Gold (#FFB300)
     ========================================================================== */
  --jhewa-magenta: #F2007C;
  --jhewa-magenta-dark: #C20063;
  --jhewa-magenta-light: #FF3B9D;
  --jhewa-magenta-glow: rgba(242, 0, 124, 0.35);

  --jhewa-plum: #2D0B3D;
  --jhewa-plum-dark: #1A0426;
  --jhewa-plum-light: #4D1566;
  --jhewa-plum-surface: #3B0E54;

  --jhewa-gold: #FFB300;
  --jhewa-gold-bright: #FFD54F;
  --jhewa-gold-glow: rgba(255, 179, 0, 0.45);
  --jhewa-amber: #FF8F00;

  --jhewa-rose-soft: #FF80AB;
  --jhewa-rose-subtle: #FFF0F6;
  --jhewa-peach: #FFB2C9;

  /* Compatible Sabah Parks mapped aliases for seamless theme integration */
  --sp-primary: var(--jhewa-plum);
  --sp-primary-dark: var(--jhewa-plum-dark);
  --sp-primary-light: var(--jhewa-plum-light);
  --sp-teal: #7A186F;
  --sp-teal-dark: #581050;
  --sp-teal-light: #A32495;
  --sp-accent-gold: var(--jhewa-gold);
  --sp-accent-yellow: var(--jhewa-gold-bright);
  --sp-accent-lime: var(--jhewa-magenta-light);
  --sp-accent-leaf: var(--jhewa-rose-soft);
  --sp-marine: var(--jhewa-magenta);
  --sp-deep-ocean: #16031F;
  --sp-coral-dark: #0F0214;

  /* Neutral Palette - Silky Pearl & Rose Velvet */
  --sp-bg-light: #FFF8FA;
  --sp-card-bg: #ffffff;
  --sp-text-main: #241628;
  --sp-text-muted: #6B556F;
  --sp-text-light: #9B82A0;
  --sp-border: rgba(242, 0, 124, 0.15);
  --sp-border-subtle: rgba(77, 21, 102, 0.08);

  /* Dark Mode Palette - Velvet Midnight Plum & Neon Magenta Glow */
  --sp-dark-bg: #120217;
  --sp-dark-surface: #1E0626;
  --sp-dark-surface-elevated: #2C0B38;
  --sp-dark-text: #FDF4FC;
  --sp-dark-muted: #BFA5C5;
  --sp-dark-border: rgba(242, 0, 124, 0.25);

  /* Fonts */
  --font-serif: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions & Shadows */
  --sp-transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --sp-shadow-sm: 0 3px 12px rgba(45, 11, 61, 0.06);
  --sp-shadow-md: 0 10px 28px rgba(45, 11, 61, 0.14);
  --sp-shadow-lg: 0 20px 48px rgba(26, 4, 38, 0.22);
  --sp-shadow-glow: 0 0 28px rgba(242, 0, 124, 0.4);
  --sp-shadow-gold: 0 0 28px rgba(255, 179, 0, 0.45);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--sp-text-main);
  background-color: var(--sp-bg-light);
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  min-height: 100vh;
}

body.dark-mode {
  color: var(--sp-dark-text);
  background-color: var(--sp-dark-bg);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

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

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 20px;
  background: var(--sp-accent-gold);
  color: #000;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
}

/* ==========================================================================
   1. HOMEPAGE PRELOADER
   ========================================================================== */
.homepage-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at center, #3B0E54 0%, #1A0426 100%);
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, visibility 0.25s;
}

[data-first-home-visit] .homepage-loader {
  display: flex;
}

.homepage-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.homepage-loader__content {
  text-align: center;
  color: #fff;
}

.homepage-loader__logo {
  display: block;
  width: 144px;
  height: 144px;
  padding: 16px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}

.homepage-loader__foothills {
  fill: none;
  stroke: rgba(255, 59, 157, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.homepage-loader__mountain {
  fill: none;
  stroke: #F2007C;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mountainDraw 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.homepage-loader__ridge {
  fill: none;
  stroke: rgba(255, 179, 0, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.homepage-loader__cloud {
  fill: rgba(255, 255, 255, 0.3);
  animation: loaderCloudDrift 6s ease-in-out infinite alternate;
}

.homepage-loader__cloud--front {
  fill: rgba(255, 255, 255, 0.5);
  animation-duration: 4.5s;
}

.homepage-loader__name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.25rem;
}

.homepage-loader__status {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sp-accent-lime);
  opacity: 0.85;
}

@keyframes mountainDraw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0.2;
  }

  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes loaderCloudDrift {
  0% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(12px);
  }
}

/* ==========================================================================
   2. TOPBAR WITH WOVEN EDGE MOTIFS & SHORTCUTS
   ========================================================================== */
.topbar-v4 {
  --topbar-background: rgba(236, 230, 247, 0.92);
  --topbar-ink: #40304e;
  --topbar-link: #554060;
  --topbar-accent: #793f72;
  --topbar-on-accent: #fff;
  --topbar-control: rgba(102, 65, 108, 0.08);
  --topbar-border: rgba(97, 65, 102, 0.14);
  --topbar-thread: #9b763d;
  position: relative;
  background-color: var(--topbar-background);
  color: var(--topbar-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0.78rem;
  z-index: 102;
  border-bottom: 1px solid var(--topbar-border);
  overflow: hidden;
}

[data-theme="dark"] .topbar-v4 {
  --topbar-background: rgba(31, 23, 40, 0.84);
  --topbar-ink: #f5eef6;
  --topbar-link: #ddd0e3;
  --topbar-accent: #f0bfdf;
  --topbar-on-accent: #251b2d;
  --topbar-control: rgba(235, 211, 234, 0.12);
  --topbar-border: rgba(230, 180, 220, 0.16);
  --topbar-thread: #d9b981;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.topbar-v4 :is(a, button):focus-visible {
  outline: 2px solid var(--topbar-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.topbar-v4__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
}

.topbar-v4__weave {
  position: absolute;
  top: 0;
  width: clamp(64px, 8vw, 160px);
  height: 42px;
  pointer-events: none;
  opacity: 0.44;
  mask-image: linear-gradient(90deg, #000 35%, transparent);
}

.topbar-v4__weave svg {
  width: 100%;
  height: 100%;
}

.topbar-v4__weave--left {
  left: 0;
}

.topbar-v4__weave--right {
  right: 0;
  transform: scaleX(-1);
}

.topbar-v4__weave-lines {
  fill: none;
  stroke: var(--topbar-accent);
  stroke-width: 1.2;
}

.topbar-v4__weave-thread {
  fill: var(--topbar-thread);
}

.topbar-v4__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.topbar-v4__state-crest {
  height: 20px;
  width: auto;
}

.topbar-v4__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-v4__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-v4__systems {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.topbar-v4__system-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--topbar-accent);
  color: var(--topbar-on-accent);
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .2s;
}

.topbar-v4__system-link:hover {
  color: var(--topbar-on-accent);
  opacity: .82;
}

.topbar-v4__contact-link {
  color: var(--topbar-link);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.topbar-v4__contact-link:hover {
  color: var(--topbar-accent);
}

.topbar-v4__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--topbar-control);
  color: var(--topbar-ink);
  transition: var(--sp-transition);
}

.topbar-v4__search-btn:hover {
  background: var(--topbar-accent);
  color: var(--topbar-on-accent);
}

.topbar-v4__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-v4__social::before {
  content: "|";
  color: var(--topbar-link);
  font-size: 1rem;
  opacity: .6;
}

.topbar-v4__social ul {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
}

.topbar-v4__social :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--topbar-border);
  border-radius: 9px;
  background: var(--topbar-control);
  color: var(--topbar-ink);
  transition: background-color .2s, border-color .2s, color .2s;
}

.topbar-v4__social svg {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

.topbar-v4__social :is(a, button):hover {
  border-color: var(--topbar-accent);
  background: var(--topbar-accent);
  color: var(--topbar-on-accent);
}

.topbar-v4 .topbar-v4__social :is(a, button):focus-visible {
  outline: 2px solid var(--topbar-accent);
  outline-offset: 1px;
}

body.qr-dialog-open {
  overflow: hidden;
}

.qr-code-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 2, 23, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.qr-code-dialog.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.qr-code-dialog__panel {
  position: relative;
  width: min(680px, 100%);
  padding: 38px clamp(20px, 5vw, 54px) 42px;
  border: 1px solid rgba(121, 63, 114, .16);
  border-radius: 24px;
  background: #fff;
  color: var(--sp-text-main);
  box-shadow: var(--sp-shadow-lg);
  transform: translateY(18px) scale(.98);
  transition: transform .22s ease;
}

.qr-code-dialog.is-open .qr-code-dialog__panel {
  transform: translateY(0) scale(1);
}

[data-theme="dark"] .qr-code-dialog__panel {
  border-color: var(--sp-dark-border);
  background: var(--sp-dark-surface-elevated);
  color: var(--sp-dark-text);
}

.qr-code-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(121, 63, 114, .18);
  border-radius: 50%;
  background: rgba(121, 63, 114, .08);
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.qr-code-dialog__close:hover,
.qr-code-dialog__close:focus-visible {
  background: var(--jhewa-magenta);
  color: #fff;
}

.qr-code-dialog h2 {
  margin: 0 34px 30px;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.45;
  text-align: center;
}

.qr-code-dialog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 8vw, 72px);
  align-items: start;
}

.qr-code-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(26, 4, 38, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.qr-code-card:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26, 4, 38, .2);
}

.qr-code-card:focus-visible {
  outline: 3px solid var(--jhewa-magenta);
  outline-offset: 4px;
}

.qr-code-card img {
  display: block;
  width: 100%;
  height: auto;
  padding: 16px;
  background: #fff;
}

.qr-code-card span {
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: 12px;
  background: #111;
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 560px) {
  .qr-code-dialog {
    padding: 14px;
  }

  .qr-code-dialog__panel {
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    padding: 48px 18px 22px;
  }

  .qr-code-dialog h2 {
    margin: 0 24px 22px;
  }

  .qr-code-dialog__grid {
    gap: 14px;
  }

  .qr-code-card span {
    min-height: 58px;
    font-size: .78rem;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .topbar-v4__social {
    display: none;
  }
}

@media (max-width: 991px) {
  .topbar-v4 {
    display: none;
  }
}

/* ==========================================================================
   3. HEADER & MEGA NAVIGATION
   ========================================================================== */
#header {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  z-index: 101;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, top 0.3s ease;
}

@media (max-width: 991px) {
  #header {
    top: 0;
  }
}

#header.is-sticky {
  position: fixed;
  top: 0;
  background: rgba(26, 4, 38, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242, 0, 124, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

#logo a {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-crest-img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.brand-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.25);
}

.brand-logo-img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.brand-text-block {
  display: flex;
  flex-direction: column;
}

.brand-title-main {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.brand-title-sub {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-accent-lime);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Nav Menu */
.sp-main-nav {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 6px;
}

.sp-main-nav>li {
  position: relative;
}

.sp-main-nav>li>a,
.sp-main-nav>li>button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: var(--sp-transition);
}

.sp-main-nav>li>a:hover,
.sp-main-nav>li>button:hover,
.sp-main-nav>li.current>a {
  color: var(--sp-accent-yellow);
  background: rgba(255, 255, 255, 0.08);
}

/* Mega Dropdown Panels */
.corporate-dropdown {
  --corporate-background: var(--home-surface, var(--sp-bg-light));
  --corporate-ink: var(--home-ink, var(--sp-text-main));
  --corporate-soft: var(--home-soft, #f3eef7);
  --corporate-border: var(--home-border, var(--sp-border));
  --corporate-accent: var(--home-accent, var(--sp-primary));
}

[data-theme="dark"] .corporate-dropdown {
  --corporate-background: var(--home-surface, var(--sp-dark-surface));
  --corporate-ink: var(--home-ink, var(--sp-dark-text));
  --corporate-soft: var(--home-soft, rgba(240, 191, 223, .1));
  --corporate-border: var(--home-border, var(--sp-dark-border));
  --corporate-accent: var(--home-accent, var(--jhewa-rose-soft));
}

.corporate-panel,
.corporate-submenu {
  position: absolute;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--corporate-border);
  border-radius: 14px;
  background: var(--corporate-background);
  color: var(--corporate-ink);
  box-shadow: var(--sp-shadow-md);
  z-index: 200;
}

.corporate-panel {
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
}

.corporate-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}

.corporate-group {
  position: relative;
}

.corporate-submenu {
  top: -8px;
  left: calc(100% + 8px);
  width: 340px;
}

.corporate-submenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}

.information-dropdown>.corporate-panel {
  left: auto;
  right: 0;
}

.information-group--integrity>.corporate-submenu {
  top: auto;
  bottom: -8px;
}

.corporate-panel a,
.corporate-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--corporate-ink);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.corporate-panel svg {
  flex: none;
}

.corporate-panel a:hover,
.corporate-panel button:hover,
.corporate-panel button.is-active {
  background: var(--corporate-soft);
  color: var(--corporate-accent);
}

.corporate-panel :is(a, button):focus-visible {
  outline: 2px solid var(--corporate-accent);
  outline-offset: -2px;
}

@media (max-width:1400px) {
  .corporate-submenu {
    left: auto;
    right: calc(100% + 8px);
  }

  .corporate-submenu::before {
    left: auto;
    right: -8px;
  }

  .corporate-group>button>svg {
    transform: rotate(180deg);
  }
}

.sp-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: rgba(35, 6, 48, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 0, 124, 0.2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 12px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.4, 1);
  z-index: 200;
}

.sp-main-nav>li:hover .sp-nav-panel,
.sp-main-nav>li:focus-within .sp-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sp-nav-panel li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.86rem;
  transition: var(--sp-transition);
}

.sp-nav-panel li a:hover {
  background: rgba(204, 229, 117, 0.12);
  color: var(--sp-accent-yellow);
  padding-left: 24px;
}

.sp-nav-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sp-accent-lime);
  flex-shrink: 0;
}

.sp-nav-panel--mega {
  width: 720px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 20px;
  gap: 16px;
}

.sp-main-nav>li:hover .sp-nav-panel--mega {
  transform: translateX(-50%) translateY(0);
}

.sp-mega-column h4 {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-accent-lime);
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

/* Header Extras (Language & Search Trigger) */
.header-extras {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  transition: var(--sp-transition);
}

.lang-switch-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--sp-accent-gold);
}

.lang-switch-chevron {
  flex: none;
}

.lang-switch-btn[aria-expanded="true"] .lang-switch-chevron {
  transform: rotate(180deg);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 110;
  width: 200px;
  padding: 8px;
  border: 1px solid var(--home-border, var(--sp-border));
  border-radius: 16px;
  background: var(--home-surface, var(--sp-bg-light));
  color: var(--home-ink, var(--sp-text-main));
  box-shadow: var(--sp-shadow-md);
}

.lang-switch-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 500;
}

.lang-switch-menu a:hover,
.lang-switch-menu a[aria-current="page"] {
  background: var(--home-soft, #f3eef7);
}

.lang-switch-menu a:focus-visible {
  outline: 2px solid var(--home-accent, var(--sp-primary));
  outline-offset: -2px;
}

[data-theme="dark"] .lang-switch-menu {
  background: var(--home-surface, var(--sp-dark-surface));
  color: var(--home-ink, var(--sp-dark-text));
  border-color: var(--home-border, var(--sp-dark-border));
}

[data-theme="dark"] .lang-switch-menu a:hover,
[data-theme="dark"] .lang-switch-menu a[aria-current="page"] {
  background: var(--home-soft, rgba(240, 191, 223, .1));
}

[data-theme="dark"] .lang-switch-menu a:focus-visible {
  outline-color: var(--home-accent, var(--jhewa-rose-soft));
}

@media (max-width: 600px) {
  .header-extras {
    gap: 8px;
  }

  .lang-switch-btn {
    padding-inline: 8px;
    gap: 4px;
  }

  .lang-switch-menu {
    width: 180px;
  }
}

.nav-search-trigger {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--sp-transition);
}

.nav-search-trigger:hover {
  background: var(--sp-accent-gold);
  color: #0a2627;
  transform: scale(1.05);
}

/* Mobile Toggle */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  padding: 10px;
}

.mobile-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
  border-radius: 2px;
  transition: var(--sp-transition);
}

@media (max-width: 991px) {
  .desktop-only-nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }
}

/* ==========================================================================
   4. SLIDE-DOWN SEARCH OVERLAY
   ========================================================================== */
#siteSearchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(26, 4, 38, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(242, 0, 124, 0.25);
  padding: 30px 0 40px;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#siteSearchOverlay.is-open {
  transform: translateY(0);
}

.search-overlay-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.search-overlay-close {
  position: absolute;
  top: -10px;
  right: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.6rem;
  transition: color 0.2s;
}

.search-overlay-close:hover {
  color: var(--sp-accent-yellow);
}

.search-overlay-form {
  margin-top: 15px;
  position: relative;
}

.search-overlay-input {
  width: 100%;
  padding: 18px 60px 18px 24px;
  font-size: 1.25rem;
  font-family: var(--font-sans);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  outline: none;
  transition: var(--sp-transition);
}

.search-overlay-input:focus {
  border-color: var(--sp-accent-gold);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 25px rgba(240, 196, 25, 0.25);
}

.search-overlay-submit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sp-accent-gold);
  color: #0a2627;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-overlay-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.search-tag-chip {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #fff;
  font-size: 0.8rem;
  transition: var(--sp-transition);
}

.search-tag-chip:hover {
  background: var(--sp-accent-yellow);
  color: #0a2627;
}

/* ==========================================================================
   5. ADEII PARALLAX HERO - CITRA KECEMERLANGAN WANITA SABAH
   Sabah Parks-inspired multi-layer interactive parallax tailored to JHEWA
   ========================================================================== */
#slider {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
  background: #2D0B3D;
  transition: background 0.5s ease;
}

@media (max-width: 600px) {
  #slider {
    height: 100vh;
    height: 100svh;
  }
}

.adeii {
  position: relative;
  width: 100%;
  height: 100%;
}

.adeii_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
  pointer-events: none;
}

/* Layer 0: Aurora of Women's Hope & Vision Sky */
#adeii-0 {
  background: linear-gradient(180deg, #1A0426 0%, #350847 38%, #5C105A 68%, #A81267 88%, #F2007C 100%);
  z-index: 1;
}

body.dark-mode #adeii-0 {
  background: radial-gradient(ellipse at 70% 30%, #2A0636 0%, #15021D 60%, #0A010F 100%);
}

/* Soft radiant dawn backlight behind horizon */
#adeii-0-0 {
  --glow-x: 68%;
  --glow-y: 82%;
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  z-index: 2;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y),
      rgba(255, 224, 130, 0.8) 0%,
      rgba(255, 179, 0, 0.45) 30%,
      rgba(242, 0, 124, 0.28) 55%,
      rgba(242, 0, 124, 0) 75%);
  opacity: 0.75;
  animation: glowIn 1.4s ease-out forwards;
}

body.dark-mode #adeii-0-0 {
  background: radial-gradient(circle at 75% 35%,
      rgba(255, 179, 0, 0.35) 0%,
      rgba(242, 0, 124, 0.22) 35%,
      rgba(45, 11, 61, 0) 70%);
  opacity: 0.6;
}

@keyframes glowIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 0.85;
    transform: scale(1);
  }
}

/* Animated Golden Butterflies & Doves of Transformation (Metamorfosis & Harapan Wanita) */
.beddyfly {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.bird-container {
  position: absolute;
  top: 18%;
  left: -100px;
  transform: scale(0) translateX(-10vw);
  animation-name: flyAcross;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bird-container-one {
  animation-duration: 22s;
  animation-delay: 1s;
  top: 14%;
}

.bird-container-two {
  animation-duration: 28s;
  animation-delay: 7s;
  top: 24%;
}

.bird-container-three {
  animation-duration: 20s;
  animation-delay: 13s;
  top: 18%;
}

.bird-container-four {
  animation-duration: 32s;
  animation-delay: 4s;
  top: 30%;
}

.bird {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 35 C38 10, 8 16, 12 45 C15 62, 34 66, 50 50 C66 66, 85 62, 88 45 C92 16, 62 10, 50 35 Z M50 50 Q50 78, 48 88 Q52 78, 50 50 Z' fill='%23FFB300' opacity='0.92' filter='drop-shadow(0 2px 6px rgba(242,0,124,0.6))'/%3E%3Ccircle cx='34' cy='36' r='4' fill='%23FFF' opacity='0.7'/%3E%3Ccircle cx='66' cy='36' r='4' fill='%23FFF' opacity='0.7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
  animation: birdFlap 0.7s ease-in-out infinite alternate;
}

body.dark-mode .bird {
  filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 179, 0, 0.8));
}

@keyframes flyAcross {
  0% {
    transform: scale(0.65) translateX(-100px) translateY(0px);
  }

  50% {
    transform: scale(0.8) translateX(55vw) translateY(-35px);
  }

  100% {
    transform: scale(0.95) translateX(110vw) translateY(-10px);
  }
}

@keyframes birdFlap {
  0% {
    transform: scaleY(1) rotate(-5deg);
  }

  100% {
    transform: scaleY(0.42) rotate(5deg);
  }
}

/* Layer 1: Grand Sabahan Mountain Horizon & Dawn Rim */
#adeii-1 {
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 540 Q 220 480, 420 510 T 840 460 T 1160 380 Q 1280 260, 1400 320 T 1640 440 Q 1780 470, 1920 420 L1920 1000 Z' fill='%234D1566' opacity='0.75'/%3E%3C/svg%3E");
  background-size: cover;
}

body.dark-mode #adeii-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 540 Q 220 480, 420 510 T 840 460 T 1160 380 Q 1280 260, 1400 320 T 1640 440 Q 1780 470, 1920 420 L1920 1000 Z' fill='%231F052A' opacity='0.85'/%3E%3C/svg%3E");
}

/* Layer 2: Empowered Sabahan Horizon & Flowing Ribbon Silhouette */
#adeii-2 {
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 630 C 240 560, 480 620, 720 570 C 960 520, 1200 600, 1440 540 C 1680 480, 1820 560, 1920 520 L1920 1000 Z' fill='%233B0E54' opacity='0.88'/%3E%3C/svg%3E");
  background-size: cover;
}

body.dark-mode #adeii-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 630 C 240 560, 480 620, 720 570 C 960 520, 1200 600, 1440 540 C 1680 480, 1820 560, 1920 520 L1920 1000 Z' fill='%23170321' opacity='0.92'/%3E%3C/svg%3E");
}

/* Seamless Luminous Silk Ribbons (No vertical steps or rectangular artifacts) */
.clouds {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.clouds .cloud-layer {
  position: absolute;
  bottom: 220px;
  width: 200%;
  height: 280px;
  background-repeat: repeat-x;
  background-size: 1000px 280px;
  opacity: 0.35;
  animation: cloudDrift linear infinite;
}

.clouds .cloud-layer--1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Cpath d='M0,200 C250,140 250,260 500,200 C750,140 750,260 1000,200 L1000,300 L0,300 Z' fill='%23FFF0F6' opacity='0.75'/%3E%3C/svg%3E");
  animation-duration: 45s;
}

.clouds .cloud-layer--2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Cpath d='M0,230 C250,170 250,290 500,230 C750,170 750,290 1000,230 L1000,300 L0,300 Z' fill='%23FFE0B2' opacity='0.5'/%3E%3C/svg%3E");
  animation-duration: 68s;
  bottom: 260px;
}

@keyframes cloudDrift {
  0% {
    transform: translateX(0);
  }

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

/* Layer 3: Central Grand Title */
#adeii-3 {
  z-index: 7;
  pointer-events: none;
}

.parallax-title-v4 {
  position: absolute;
  top: calc(100% - 730px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 880px);
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 28px rgba(26, 4, 38, 0.65);
}

.parallax-title-v4__welcome {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFD54F;
  margin-bottom: 0.85rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.parallax-title-v4__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6.2vw, 5.2rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(26, 4, 38, 0.8),
    0 10px 40px rgba(242, 0, 124, 0.55),
    0 0 35px rgba(255, 179, 0, 0.35);
  margin-bottom: 0.4rem;
}

.parallax-title-v4__line {
  display: block;
}

.parallax-title-v4__tagline {
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  max-width: 42em;
  margin: 1.2rem auto 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.parallax-title-v4__tagline::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 0 auto 0.9rem;
  border-radius: 2px;
  background: var(--jhewa-magenta);
  box-shadow: 0 0 14px var(--jhewa-magenta);
}

@media (min-width: 601px) {
  .parallax-title-v4__heading .parallax-title-v4__line {
    display: inline;
  }
}

/* Hero Storytelling Impact Strip */
.hero-impact-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 1.6rem;
  padding: 10px 24px;
  background: rgba(30, 6, 40, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 0, 124, 0.35);
  border-radius: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero-impact-strip {
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 18px;
    padding: 12px 14px;
  }
}

.hero-impact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}

.hero-impact-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 768px) {
  .hero-impact-item:not(:last-child) {
    border-right: none;
  }
}

.hero-impact-number {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--jhewa-gold-bright);
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-impact-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

/* Layer 4 & 5: Waves of Empowerment Tenunan Patterns */
#adeii-4 {
  z-index: 8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 720 Q 340 650, 680 700 T 1360 670 T 1920 710 L1920 1000 Z' fill='%232D0B3D'/%3E%3C/svg%3E");
  background-size: cover;
}

body.dark-mode #adeii-4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 720 Q 340 650, 680 700 T 1360 670 T 1920 710 L1920 1000 Z' fill='%23120217'/%3E%3C/svg%3E");
}

#adeii-5 {
  z-index: 9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 790 C 280 740, 520 800, 840 760 C 1160 720, 1440 780, 1720 740 Q 1820 730, 1920 750 L1920 1000 Z' fill='%2322062E'/%3E%3C/svg%3E");
  background-size: cover;
}

body.dark-mode #adeii-5 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 790 C 280 740, 520 800, 840 760 C 1160 720, 1440 780, 1720 740 Q 1820 730, 1920 750 L1920 1000 Z' fill='%230D0112'/%3E%3C/svg%3E");
}

/* Layer 6: Civic Centre Archway & Empowered Community Silhouette */
#adeii-6 {
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 850 C 220 820, 380 870, 600 840 C 820 810, 1080 860, 1320 830 C 1540 800, 1760 850, 1920 830 L1920 1000 Z' fill='%231A0426'/%3E%3C/svg%3E");
  background-size: cover;
}

body.dark-mode #adeii-6 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000 L0 850 C 220 820, 380 870, 600 840 C 820 810, 1080 860, 1320 830 C 1540 800, 1760 850, 1920 830 L1920 1000 Z' fill='%2307000A'/%3E%3C/svg%3E");
}

/* Floating Golden & Cerise Stardust Sparkles */
.hero-fireflies-layer-v4 {
  z-index: 11;
}

.hero-fireflies-v4 span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jhewa-gold);
  box-shadow: 0 0 14px 4px rgba(242, 0, 124, 0.7);
  opacity: 0.85;
  animation: fireflyFloat 8s ease-in-out infinite alternate;
}

.hero-fireflies-v4 span:nth-child(1) {
  top: 65%;
  left: 15%;
  animation-duration: 9s;
  animation-delay: 0s;
}

.hero-fireflies-v4 span:nth-child(2) {
  top: 72%;
  left: 32%;
  animation-duration: 11s;
  animation-delay: 2s;
  width: 8px;
  height: 8px;
  background: #FFF;
  box-shadow: 0 0 16px 5px var(--jhewa-magenta);
}

.hero-fireflies-v4 span:nth-child(3) {
  top: 60%;
  left: 54%;
  animation-duration: 7s;
  animation-delay: 1.5s;
}

.hero-fireflies-v4 span:nth-child(4) {
  top: 78%;
  left: 70%;
  animation-duration: 10s;
  animation-delay: 3s;
  width: 7px;
  height: 7px;
}

.hero-fireflies-v4 span:nth-child(5) {
  top: 68%;
  left: 85%;
  animation-duration: 8.5s;
  animation-delay: 4s;
}

.hero-fireflies-v4 span:nth-child(6) {
  top: 82%;
  left: 45%;
  animation-duration: 12s;
  animation-delay: 1s;
  background: var(--jhewa-gold-bright);
}

@keyframes fireflyFloat {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0.35;
  }

  50% {
    transform: translate(25px, -35px) scale(1.35);
    opacity: 1;
  }

  100% {
    transform: translate(-20px, -60px) scale(0.9);
    opacity: 0.45;
  }
}

/* Golden Sunrays streaming from Top-Right (Dawn of Sabah Maju Jaya) */
.sunrays {
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
  height: 1000px;
  pointer-events: none;
  z-index: 12;
  mix-blend-mode: screen;
  opacity: 0.8;
  background: radial-gradient(circle at 100% 0%, rgba(255, 213, 79, 0.45) 0%, rgba(242, 0, 124, 0.18) 45%, rgba(0, 0, 0, 0) 70%);
  animation: sunraysPulse 6s ease-in-out infinite alternate;
}

body.dark-mode .sunrays {
  display: none;
}

@keyframes sunraysPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.98);
  }

  100% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Hero Embedded Search Bar */
.hero-search-v4 {
  position: absolute;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 680px);
  z-index: 15;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
  border-radius: 50px;
  padding: 8px 10px 8px 24px;
  display: flex;
  align-items: center;
  transition: var(--sp-transition);
}

.hero-search-v4:focus-within {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(240, 196, 25, 0.3);
}

.hero-search-v4__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-sans);
}

.hero-search-v4__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.hero-search-v4__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 30px;
  background: var(--sp-accent-yellow);
  color: #0a2627;
  font-weight: 600;
  font-size: 0.88rem;
  transition: var(--sp-transition);
}

.hero-search-v4__button:hover {
  background: #fff;
  transform: scale(1.03);
}

/* Hero Invitation Pill: "Scroll to discover" */
.hero-invitation-v4 {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
}

.hero-invitation-v4__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: var(--sp-transition);
}

.hero-invitation-v4__link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--sp-accent-yellow);
}

.hero-invitation-v4__arrow {
  animation: bounceDown 1.8s ease-in-out infinite;
}

@keyframes bounceDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

/* ==========================================================================
/* ==========================================================================
   6. EMPOWERMENT PILLARS & STORYTELLING SECTION
   ========================================================================== */
.our-parks {
  position: relative;
  background-color: var(--sp-bg-light);
  padding-top: 70px;
  padding-bottom: 90px;
  transition: background-color 0.4s ease;
}

body.dark-mode .our-parks {
  background-color: var(--sp-dark-bg);
}

.become-volunteer-one__shape-1 {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 80px;
  background-image: radial-gradient(ellipse at 50% -20%, transparent 60%, var(--sp-bg-light) 61%);
  pointer-events: none;
  z-index: 10;
}

body.dark-mode .become-volunteer-one__shape-1 {
  background-image: radial-gradient(ellipse at 50% -20%, transparent 60%, var(--sp-dark-bg) 61%);
}

.empowerment-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 30px;
  background: rgba(242, 0, 124, 0.1);
  border: 1px solid rgba(242, 0, 124, 0.28);
  color: var(--jhewa-magenta);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

body.dark-mode .empowerment-badge-pill {
  background: rgba(242, 0, 124, 0.2);
  color: var(--jhewa-gold-bright);
  border-color: rgba(242, 0, 124, 0.45);
}

/* Heading Section */
.parks-v4-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.parks-v4-heading__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sp-teal);
  margin-bottom: 8px;
}

body.dark-mode .parks-v4-heading__eyebrow {
  color: var(--sp-accent-lime);
}

.parks-v4-heading__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  color: var(--sp-primary);
  margin-bottom: 12px;
}

body.dark-mode .parks-v4-heading__title {
  color: #fff;
}

.parks-v4-heading__desc {
  color: var(--sp-text-muted);
  font-size: 1rem;
}

body.dark-mode .parks-v4-heading__desc {
  color: var(--sp-dark-muted);
}

/* ==========================================================================
   7. CORE SERVICES GRID (THE PARKS OF SABAH EQUIVALENT)
   ========================================================================== */
.parks-v4-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 50px;
}

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

@media (max-width: 640px) {
  .parks-v4-grid {
    grid-template-columns: 1fr;
  }
}

.parks-v4-card {
  position: relative;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.parks-v4-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(18, 63, 64, 0.22);
}

.parks-v4-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
}

.parks-v4-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.parks-v4-card:hover .parks-v4-card__image {
  transform: scale(1.08);
}

.parks-v4-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 4, 38, 0.15) 0%, rgba(45, 11, 61, 0.6) 55%, rgba(20, 3, 29, 0.96) 100%);
  transition: background 0.35s ease;
}

.parks-v4-card:hover .parks-v4-card__veil {
  background: linear-gradient(180deg, rgba(242, 0, 124, 0.12) 0%, rgba(59, 14, 84, 0.65) 50%, rgba(20, 3, 29, 0.98) 100%);
}

.parks-v4-card__topline {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.parks-v4-card__status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sp-accent-yellow);
  color: #000;
}

.parks-v4-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.parks-v4-card__meta {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-accent-lime);
  margin-bottom: 4px;
  font-weight: 600;
}

.parks-v4-card__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.parks-v4-card:hover .parks-v4-card__title {
  color: var(--sp-accent-yellow);
}

.parks-v4-card__description {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.parks-v4-card__action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sp-accent-lime);
}

.parks-v4-card__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  transition: var(--sp-transition);
}

.parks-v4-card:hover .parks-v4-card__arrow {
  background: var(--sp-accent-yellow);
  color: #0a2627;
  transform: translateX(4px);
}

/* ==========================================================================
   8. FEATURED PROGRAMMES & MICROSITES RAIL (CAROUSEL)
   ========================================================================== */
.featured-programmes-v4 {
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid var(--sp-border);
}

body.dark-mode .featured-programmes-v4 {
  border-color: var(--sp-dark-border);
}

.featured-programmes-v4__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.featured-programmes-v4__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-teal);
  display: block;
  margin-bottom: 4px;
}

body.dark-mode .featured-programmes-v4__eyebrow {
  color: var(--sp-accent-lime);
}

.featured-programmes-v4__title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--sp-primary);
}

body.dark-mode .featured-programmes-v4__title {
  color: #fff;
}

.featured-programmes-v4__title span {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--sp-text-muted);
  margin-left: 8px;
}

.featured-programmes-v4__stage {
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--sp-teal) transparent;
}

.featured-programmes-v4__rail {
  display: flex;
  gap: 20px;
}

.featured-programmes-v4__card {
  flex: 0 0 320px;
  height: 220px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-programmes-v4__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.featured-programmes-v4__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
}

.featured-programmes-v4__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-programmes-v4__card:hover .featured-programmes-v4__image {
  transform: scale(1.06);
}

.featured-programmes-v4__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 25, 40, 0.2) 0%, rgba(6, 25, 40, 0.85) 100%);
}

.featured-programmes-v4__type {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-accent-yellow);
  z-index: 2;
}

.featured-programmes-v4__content {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.featured-programmes-v4__card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
}

.featured-programmes-v4__arrow svg {
  width: 22px;
  height: 22px;
  stroke: var(--sp-accent-yellow);
  stroke-width: 2;
  fill: none;
  transition: transform 0.2s;
}

.featured-programmes-v4__card:hover .featured-programmes-v4__arrow svg {
  transform: translateX(4px);
}

/* ==========================================================================
   9. LATEST NEWS, NOTICEBOARD & SOCIAL FEED
   ========================================================================== */
.homepage-updates-v4-v2 {
  position: relative;
  padding: 80px 0;
  background-color: #f2f6f7;
  transition: background-color 0.4s ease;
}

body.dark-mode .homepage-updates-v4-v2 {
  background-color: var(--sp-dark-surface);
}

.homepage-updates-v4-v2__header {
  margin-bottom: 36px;
}

.homepage-updates-v4-v2__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-teal);
  display: block;
  margin-bottom: 6px;
}

body.dark-mode .homepage-updates-v4-v2__eyebrow {
  color: var(--sp-accent-lime);
}

.homepage-updates-v4-v2__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--sp-primary);
}

body.dark-mode .homepage-updates-v4-v2__title {
  color: #fff;
}

.homepage-updates-v4-v2__grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .homepage-updates-v4-v2__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .homepage-updates-v4-v2__grid {
    grid-template-columns: 1fr;
  }
}

/* News Track */
.homepage-updates-v4-v2__news-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.homepage-updates-v4-v2__news-card {
  background: var(--sp-card-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--sp-border-subtle);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .homepage-updates-v4-v2__news-card {
  background: var(--sp-dark-surface-elevated);
  border-color: var(--sp-dark-border);
}

.homepage-updates-v4-v2__news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.homepage-updates-v4-v2__news-link {
  display: grid;
  grid-template-columns: 1fr 130px;
  padding: 18px 20px;
  gap: 18px;
  align-items: center;
}

.homepage-updates-v4-v2__news-card--lead .homepage-updates-v4-v2__news-link {
  grid-template-columns: 1fr 200px;
}

.homepage-updates-v4-v2__news-media img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.homepage-updates-v4-v2__news-card--lead .homepage-updates-v4-v2__news-media img {
  height: 140px;
}

.homepage-updates-v4-v2__news-meta time {
  font-size: 0.76rem;
  color: var(--sp-text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

body.dark-mode .homepage-updates-v4-v2__news-meta time {
  color: var(--sp-dark-muted);
}

.homepage-updates-v4-v2__news-title {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--sp-primary);
  margin-bottom: 8px;
  transition: color 0.2s;
}

body.dark-mode .homepage-updates-v4-v2__news-title {
  color: #fff;
}

.homepage-updates-v4-v2__news-card:hover .homepage-updates-v4-v2__news-title {
  color: var(--sp-teal);
}

body.dark-mode .homepage-updates-v4-v2__news-card:hover .homepage-updates-v4-v2__news-title {
  color: var(--sp-accent-yellow);
}

.homepage-updates-v4-v2__read-more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sp-teal);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.dark-mode .homepage-updates-v4-v2__read-more {
  color: var(--sp-accent-lime);
}

/* Official Noticeboard */
.homepage-updates-v4-v2__noticeboard {
  background: linear-gradient(145deg, #2D0B3D 0%, #1A0426 60%, #3B0E54 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 12px 32px rgba(45, 11, 61, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(242, 0, 124, 0.28);
  position: relative;
  overflow: hidden;
}

.homepage-updates-v4-v2__noticeboard::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(242, 0, 124, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.homepage-updates-v4-v2__notice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.homepage-updates-v4-v2__notice-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--jhewa-gold);
  color: #1A0426;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 179, 0, 0.4);
}

.homepage-updates-v4-v2__notice-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.homepage-updates-v4-v2__notice-summary {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.homepage-updates-v4-v2__notice-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jhewa-gold-bright);
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 0.2s, transform 0.2s;
  position: relative;
  z-index: 2;
}

.homepage-updates-v4-v2__notice-action:hover {
  color: #fff;
  transform: translateX(4px);
}

.homepage-updates-v4-v2__secondary-notice {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(242, 0, 124, 0.2);
  position: relative;
  z-index: 2;
}

.homepage-updates-v4-v2__secondary-notice span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--jhewa-gold-bright);
  font-weight: 700;
  margin-bottom: 4px;
}

.homepage-updates-v4-v2__secondary-notice strong {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  font-weight: 500;
}

/* Social Feed Card Button */
.homepage-updates-v4-v2__social {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  min-height: 300px;
  display: block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.homepage-updates-v4-v2__social img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.homepage-updates-v4-v2__social:hover img {
  transform: scale(1.08);
}

.homepage-updates-v4-v2__social::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 119, 242, 0.2) 0%, rgba(10, 38, 39, 0.88) 100%);
}

.homepage-updates-v4-v2__social-copy {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
  color: #fff;
}

.homepage-updates-v4-v2__social-label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-accent-yellow);
  display: block;
  font-weight: 700;
}

.homepage-updates-v4-v2__social-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  display: block;
  margin-bottom: 6px;
}

/* ==========================================================================
   10. SERVICES ISLAND & GOVERNMENT AGENCIES SECTION
   ========================================================================== */
.services-island-v4 {
  position: relative;
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #FFF8FA 0%, #FCEEF5 45%, #F5DEEC 100%);
  overflow: hidden;
}

body.dark-mode .services-island-v4 {
  background: linear-gradient(180deg, #120217 0%, #1A0426 50%, #250734 100%);
}

.services-island-v4__heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.services-island-v4__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jhewa-magenta);
  display: block;
  margin-bottom: 6px;
}

body.dark-mode .services-island-v4__eyebrow {
  color: var(--jhewa-gold-bright);
}

.services-island-v4__heading h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--sp-primary);
  margin-bottom: 8px;
}

body.dark-mode .services-island-v4__heading h2 {
  color: #fff;
}

.services-island-v4__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

@media (max-width: 1024px) {
  .services-island-v4__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .services-island-v4__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.services-island-v4__card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(45, 11, 61, 0.06);
  border: 1px solid rgba(242, 0, 124, 0.12);
  transition: var(--sp-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.dark-mode .services-island-v4__card {
  background: rgba(30, 6, 38, 0.85);
  border-color: rgba(242, 0, 124, 0.22);
}

.services-island-v4__card:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(242, 0, 124, 0.18);
  border-color: var(--jhewa-magenta);
}

body.dark-mode .services-island-v4__card:hover {
  background: var(--sp-dark-surface-elevated);
}

.services-island-v4__icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jhewa-magenta) 0%, var(--jhewa-plum) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1.4rem;
  box-shadow: 0 4px 14px rgba(242, 0, 124, 0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}

.services-island-v4__card:hover .services-island-v4__icon-wrap {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, var(--jhewa-gold) 0%, #E69B00 100%);
  color: #1A0426;
}

.services-island-v4__card-copy small {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sp-text-muted);
  margin-bottom: 4px;
}

body.dark-mode .services-island-v4__card-copy small {
  color: var(--sp-dark-muted);
}

.services-island-v4__card-copy strong {
  display: block;
  font-size: 0.92rem;
  color: var(--sp-primary);
  font-weight: 600;
  line-height: 1.3;
}

body.dark-mode .services-island-v4__card-copy strong {
  color: #fff;
}

/* State Agencies Grid */
.agency-ocean-v4 {
  padding: 60px 0 70px;
  background-color: #ffffff;
  transition: background-color 0.4s ease;
}

body.dark-mode .agency-ocean-v4 {
  background-color: var(--sp-dark-bg);
}

.agency-ocean-v4__heading {
  text-align: center;
  margin-bottom: 30px;
}

.agency-ocean-v4__heading h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--sp-primary);
}

body.dark-mode .agency-ocean-v4__heading h2 {
  color: #fff;
}

.agency-ocean-v4__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.agency-ocean-v4__card {
  flex: 0 0 calc(18% - 16px);
  min-width: 170px;
  background: var(--sp-bg-light);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--sp-border-subtle);
  transition: var(--sp-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body.dark-mode .agency-ocean-v4__card {
  background: var(--sp-dark-surface);
  border-color: var(--sp-dark-border);
}

.agency-ocean-v4__card:hover {
  transform: translateY(-4px);
  border-color: var(--sp-teal);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.agency-ocean-v4__logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.agency-ocean-v4__card span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sp-text-main);
  line-height: 1.3;
}

body.dark-mode .agency-ocean-v4__card span {
  color: var(--sp-dark-text);
}

/* ==========================================================================
   11. OCEAN SURFACE TRANSITION & CORAL REEF DEEP-SEA FOOTER
   ========================================================================= */
.ocean-entry-v4 {
  position: relative;
  height: 180px;
  background: linear-gradient(180deg, #FFF8FA 0%, #FADCEB 30%, #4D1566 75%, #1A0426 100%);
  overflow: hidden;
}

body.dark-mode .ocean-entry-v4 {
  background: linear-gradient(180deg, var(--sp-dark-bg) 0%, #250530 35%, #1E0427 70%, #100115 100%);
}

.ocean-entry-v4__wave-drift {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q 150 0, 300 60 T 600 60 T 900 60 T 1200 60 L1200 120 L0 120 Z' fill='%231A0426' opacity='0.95'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 600px 90px;
  animation: waveRoll 18s linear infinite;
}

@keyframes waveRoll {
  0% {
    transform: translateX(0);
  }

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

/* Rising Golden & Cerise Stardust Motes */
.ocean-entry-v4__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ocean-entry-v4__bubbles span {
  position: absolute;
  bottom: -20px;
  background: var(--jhewa-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(242, 0, 124, 0.6);
  animation: sparkleRise 6s linear infinite;
}

.ocean-entry-v4__bubbles span:nth-child(1) {
  left: 10%;
  width: 7px;
  height: 7px;
  animation-duration: 5s;
  animation-delay: 0s;
}

.ocean-entry-v4__bubbles span:nth-child(2) {
  left: 25%;
  width: 10px;
  height: 10px;
  animation-duration: 7s;
  animation-delay: 2s;
  background: #fff;
}

.ocean-entry-v4__bubbles span:nth-child(3) {
  left: 40%;
  width: 6px;
  height: 6px;
  animation-duration: 4.5s;
  animation-delay: 1s;
}

.ocean-entry-v4__bubbles span:nth-child(4) {
  left: 60%;
  width: 11px;
  height: 11px;
  animation-duration: 6.5s;
  animation-delay: 3s;
  background: var(--jhewa-magenta);
}

.ocean-entry-v4__bubbles span:nth-child(5) {
  left: 75%;
  width: 8px;
  height: 8px;
  animation-duration: 5.5s;
  animation-delay: 1.5s;
}

.ocean-entry-v4__bubbles span:nth-child(6) {
  left: 90%;
  width: 9px;
  height: 9px;
  animation-duration: 7.5s;
  animation-delay: 0.5s;
}

@keyframes sparkleRise {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-220px) scale(1.25);
    opacity: 0;
  }
}

/* Wadah & Jaringan Pemerkasaan Wanita Sabah Footer */
.footer-ocean-v4 {
  position: relative;
  background-color: var(--jhewa-plum-dark);
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 30px;
}

.footer-ocean-v4__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.footer-ocean-v4__water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #3B0E54 0%, #1A0426 65%, #0D0112 100%);
  opacity: 0.95;
}

.footer-ocean-v4__light-shaft {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  background: linear-gradient(135deg, rgba(242, 0, 124, 0.18) 0%, rgba(255, 179, 0, 0.12) 40%, rgba(242, 0, 124, 0) 70%);
  mix-blend-mode: screen;
}

/* Jaringan Komuniti 27 Daerah Sabah (Constellation Network) */
.footer-ocean-v4__turtle,
.footer-constellation-network {
  position: absolute;
  top: 25%;
  left: 5%;
  width: 220px;
  height: auto;
  opacity: 0.45;
  filter: drop-shadow(0 0 16px rgba(242, 0, 124, 0.5));
  animation: networkPulse 14s ease-in-out infinite alternate;
}

@keyframes networkPulse {
  0% {
    transform: scale(0.96) translate(0, 0);
    opacity: 0.35;
  }

  100% {
    transform: scale(1.04) translate(25px, -15px);
    opacity: 0.6;
  }
}

/* Floating Tenunan & Golden Ribbon of Excellence */
.footer-ocean-v4__whale-shark,
.footer-empowerment-ribbon {
  position: absolute;
  bottom: 12%;
  right: 5%;
  width: 260px;
  height: auto;
  opacity: 0.38;
  animation: ribbonDrift 20s ease-in-out infinite alternate;
}

@keyframes ribbonDrift {
  0% {
    transform: translate(0, 0) rotate(-1.5deg);
  }

  100% {
    transform: translate(-40px, -12px) rotate(2deg);
  }
}

/* Footer Content Container */
.footer-content {
  position: relative;
  z-index: 5;
}

.footer-content-v4__panel {
  background: rgba(35, 8, 48, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 0, 124, 0.25);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  .footer-content-v4__panel {
    padding: 24px;
  }
}

.footer-content-v4__grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  gap: 36px;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .footer-content-v4__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer-content-v4__grid {
    grid-template-columns: 1fr;
  }
}

.footer-content-v4__brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-content-v4__brand-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 6px;
}

.footer-content-v4__brand-sub {
  font-size: 0.8rem;
  color: var(--jhewa-gold-bright);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.footer-content-v4__address {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.footer-content-v4__address strong {
  color: #fff;
}

.footer-content-v4__links h4,
.footer-content-v4__connect h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.footer-content-v4__links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-content-v4__links li a {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s, padding-left 0.2s;
}

.footer-content-v4__links li a:hover {
  color: var(--jhewa-gold-bright);
  padding-left: 6px;
}

.footer-content-v4__social {
  display: flex;
  list-style: none;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 22px;
}

.footer-content-v4__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: var(--sp-transition);
}

.footer-content-v4__social a:hover {
  background: var(--sp-accent-gold);
  color: #0a2627;
  transform: translateY(-3px);
}

/* Web Visitor Statistics Trigger Button */
.footer-content-v4__statistics {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(85, 174, 176, 0.25) 0%, rgba(18, 63, 64, 0.35) 100%);
  border: 1px solid rgba(85, 174, 176, 0.4);
  border-radius: 30px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--sp-transition);
}

.footer-content-v4__statistics:hover {
  background: linear-gradient(135deg, var(--sp-teal) 0%, var(--sp-primary) 100%);
  border-color: var(--sp-accent-gold);
  color: var(--sp-accent-yellow);
  box-shadow: 0 4px 16px rgba(85, 174, 176, 0.35);
}

.footer-content-v4__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 640px) {
  .footer-content-v4__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ==========================================================================
   12. VISITOR STATISTICS MODAL (MATCHING SABAH PARKS STAT MODAL)
   ========================================================================== */
.visitor-stat-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 16, 25, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.visitor-stat-modal-wrap.is-open {
  opacity: 1;
  visibility: visible;
}

.visitor-stat-modal {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  max-width: 820px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.visitor-stat-modal-wrap.is-open .visitor-stat-modal {
  transform: translateY(0);
}

body.dark-mode .visitor-stat-modal {
  background: var(--sp-dark-surface);
  color: #fff;
}

.visitor-stat-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
}

@media (max-width: 768px) {
  .visitor-stat-layout {
    grid-template-columns: 1fr;
  }
}

.visitor-stat-image {
  position: relative;
  background: #123f40;
  min-height: 250px;
}

.visitor-stat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visitor-stat-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 63, 64, 0.3) 0%, rgba(10, 38, 39, 0.9) 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.visitor-stat-image-overlay h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.visitor-stat-image-overlay p {
  font-size: 0.8rem;
  color: var(--sp-accent-lime);
}

.visitor-stat-content {
  padding: 32px 30px;
}

.visitor-stat-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--sp-text-main);
  z-index: 10;
  transition: var(--sp-transition);
}

body.dark-mode .visitor-stat-close {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.visitor-stat-close:hover {
  background: var(--sp-accent-yellow);
  color: #000;
}

.visitor-stat-heading {
  margin-bottom: 20px;
}

.visitor-stat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-teal);
  margin-bottom: 4px;
}

.visitor-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.visitor-stat-heading h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--sp-primary);
  margin-bottom: 4px;
}

body.dark-mode .visitor-stat-heading h2 {
  color: #fff;
}

.visitor-stat-primary {
  background: linear-gradient(135deg, rgba(37, 113, 137, 0.12) 0%, rgba(18, 63, 64, 0.06) 100%);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(37, 113, 137, 0.2);
}

.visitor-stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-text-muted);
  margin-bottom: 2px;
}

.visitor-stat-primary strong {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--sp-primary);
  line-height: 1;
}

body.dark-mode .visitor-stat-primary strong {
  color: var(--sp-accent-yellow);
}

.visitor-stat-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.visitor-stat-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}

body.dark-mode .visitor-stat-card {
  background: rgba(255, 255, 255, 0.05);
}

.visitor-stat-card span {
  display: block;
  font-size: 0.72rem;
  color: var(--sp-text-muted);
  margin-bottom: 4px;
}

.visitor-stat-card strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sp-primary);
}

body.dark-mode .visitor-stat-card strong {
  color: #fff;
}

.visitor-stat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--sp-text-light);
  border-top: 1px solid var(--sp-border-subtle);
  padding-top: 14px;
}

/* ==========================================================================
   13. DAY/NIGHT THEME TUMBLER & FLOATING CONTROLS
   ========================================================================== */
.tumbler-wrapper {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

body.dark-mode .tumbler-wrapper {
  background: rgba(20, 36, 48, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.tumbler-wrapper:hover {
  transform: scale(1.1) rotate(15deg);
}

.tumbler-icon {
  width: 26px;
  height: 26px;
  transition: transform 0.4s ease;
}

.tumbler-icon--sun {
  display: block;
}

.tumbler-icon--moon {
  display: none;
}

body.dark-mode .tumbler-icon--sun {
  display: none;
}

body.dark-mode .tumbler-icon--moon {
  display: block;
}

/* Dark Mode Tooltip */
.dark-tooltip {
  position: fixed;
  bottom: 88px;
  right: 26px;
  z-index: 9998;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dark-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.tooltip-text {
  position: relative;
  background-color: #123f40;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

body.dark-mode .tooltip-text {
  background-color: #e2e8f0;
  color: #0a2627;
}

.tooltip-text::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 18px;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #123f40 transparent transparent;
}

body.dark-mode .tooltip-text::after {
  border-color: #e2e8f0 transparent transparent;
}

/* Scroll To Top Button */
#scrollTop {
  position: fixed;
  bottom: 86px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sp-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

#scrollTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTop:hover {
  background: var(--sp-primary);
  transform: translateY(-3px);
}

/* ==========================================================================
   14. QUICK INFO MODAL FOR SERVICES
   ========================================================================== */
.service-quick-view-dialog {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(4, 16, 25, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.service-quick-view-dialog.is-open {
  opacity: 1;
  visibility: visible;
}

.service-quick-view-box {
  background: #ffffff;
  border-radius: 20px;
  max-width: 780px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
}

.service-quick-view-dialog.is-open .service-quick-view-box {
  transform: translateY(0);
}

body.dark-mode .service-quick-view-box {
  background: var(--sp-dark-surface);
  color: #fff;
}

.service-quick-view-header {
  position: relative;
  height: 220px;
}

.service-quick-view-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-quick-view-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 25, 40, 0.2) 0%, rgba(6, 25, 40, 0.9) 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.service-quick-view-header-overlay span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-accent-yellow);
  font-weight: 700;
}

.service-quick-view-header-overlay h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
}

.service-quick-view-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: var(--sp-transition);
}

.service-quick-view-close:hover {
  background: var(--sp-accent-yellow);
  color: #000;
}

.service-quick-view-body {
  padding: 28px;
}

.service-quick-view-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sp-text-muted);
  margin-bottom: 20px;
}

body.dark-mode .service-quick-view-body p {
  color: var(--sp-dark-muted);
}

.service-quick-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.service-quick-view-item {
  background: var(--sp-bg-light);
  border-radius: 10px;
  padding: 14px 16px;
}

body.dark-mode .service-quick-view-item {
  background: var(--sp-dark-surface-elevated);
}

.service-quick-view-item small {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-teal);
  font-weight: 700;
  margin-bottom: 2px;
}

body.dark-mode .service-quick-view-item small {
  color: var(--sp-accent-lime);
}

.service-quick-view-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--sp-primary);
}

body.dark-mode .service-quick-view-item strong {
  color: #fff;
}

.service-quick-view-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--sp-border-subtle);
  padding-top: 20px;
}

.service-quick-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--sp-primary);
  color: #fff;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--sp-transition);
}

.service-quick-view-btn:hover {
  background: var(--sp-teal);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 113, 137, 0.35);
}

/* ==========================================================================
   15. INNER PAGES STYLING (CONTENT & SEARCH VIEW)
   Aligned with JHEWA Brand: Royal Velvet Plum, Cerise Magenta & Sabah Gold
   ========================================================================== */
body.jhewa-inner-page {
  background-color: #FCFBF7 !important;
  color: #33263E;
  font-family: 'Poppins', sans-serif;
}

body.jhewa-inner-page.dark-mode {
  background-color: #17131E !important;
  color: #F5F0F3;
}

.page-banner-sp {
  position: relative;
  padding: 135px 0 65px;
  background-color: #D9DCE5;
  background-image:
    linear-gradient(90deg, rgba(28, 3, 38, 0.86) 0%, rgba(45, 11, 61, 0.68) 38%, rgba(45, 11, 61, 0.24) 70%, rgba(45, 11, 61, 0.08) 100%),
    url('/images/inner-page-banner-day-v1.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 179, 0, 0.35);
  box-shadow: 0 10px 30px rgba(28, 3, 38, 0.35);
}

body.dark-mode .page-banner-sp {
  background-color: #16031F;
  background-image:
    linear-gradient(90deg, rgba(16, 2, 24, 0.88) 0%, rgba(34, 5, 45, 0.64) 40%, rgba(34, 5, 45, 0.22) 72%, rgba(16, 2, 24, 0.1) 100%),
    url('/images/inner-page-banner-night-v1.webp');
}

.page-banner-sp__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-banner-sp__pattern {
  display: none;
}

.page-banner-sp__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 4, 38, 0.08), transparent 45%, rgba(26, 4, 38, 0.25));
}

.page-banner-sp__container {
  position: relative;
  z-index: 2;
}

.page-banner-sp__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.page-banner-sp__crumb-text {
  color: rgba(255, 255, 255, 0.8);
}

.page-banner-sp__crumb-sep {
  color: rgba(255, 179, 0, 0.7);
  font-size: 0.95rem;
}

.page-banner-sp__crumb-current {
  color: #ffffff;
  font-weight: 600;
}

.page-banner-sp__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.page-banner-sp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB300;
  box-shadow: 0 0 10px #FFB300, 0 0 18px rgba(255, 179, 0, 0.7);
  flex-shrink: 0;
}

.page-banner-sp__eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFD54F;
  font-weight: 750;
}

.page-banner-sp__title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 4px 28px rgba(26, 4, 38, 0.45);
}

/* ==========================================================================
   INNER CONTENT LAYOUT & ELEVATED ARTICLE CARD
   ========================================================================== */
.inner-content-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 36px;
  padding: 40px 0 90px;
  align-items: start;
}

.inner-content-layout:has(.kad-digital-container, .formal-table-container, .video-gallery-container, .contact-hub-container) .article-card-elevated {
  padding: 32px 34px;
}

.content-sidebar-sp {
  align-self: start;
}

@media (max-width: 991px) {
  .inner-content-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 0 70px;
  }

  .article-body-sp {
    order: 1;
  }

  .content-sidebar-sp {
    order: 2;
  }
}

.article-card-elevated {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  box-shadow: 0 14px 44px rgba(45, 11, 61, 0.04), 0 2px 6px rgba(45, 11, 61, 0.02);
  padding: 44px 50px;
  color: #362940;
}

@media (max-width: 768px) {
  .article-card-elevated {
    padding: 26px 20px;
    border-radius: 16px;
  }
}

body.dark-mode .article-card-elevated {
  background: var(--sp-dark-surface);
  border-color: var(--sp-dark-border);
  color: var(--sp-dark-text);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
}

/* Article Typography */
.article-content-wrapper {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  max-width: 72ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.2vw + 0.96rem, 1.08rem);
  line-height: 1.9;
  letter-spacing: -0.006em;
  text-wrap: pretty;
  color: #362940;
}

body.dark-mode .article-content-wrapper {
  color: #FDF4FC;
}

.article-content-wrapper p {
  margin: 0 0 1.55em;
}

.article-content-wrapper p:first-of-type {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

body.dark-mode .article-content-wrapper p:first-of-type {
  color: #FFFFFF;
}

.article-content-wrapper h2,
.article-content-wrapper h3,
.article-content-wrapper h4 {
  font-family: var(--font-serif);
  color: #2D0B3D;
  line-height: 1.25;
  text-wrap: balance;
  margin-top: 1.9em;
  margin-bottom: 0.72em;
}

body.dark-mode .article-content-wrapper h2,
body.dark-mode .article-content-wrapper h3,
body.dark-mode .article-content-wrapper h4 {
  color: #FFD54F;
}

.article-content-wrapper h2 {
  font-size: 1.9rem;
  border-bottom: 2px solid rgba(255, 179, 0, 0.35);
  padding-bottom: 8px;
}

.article-content-wrapper h3 {
  font-size: 1.45rem;
}

.article-content-wrapper blockquote {
  border-left: 4px solid #C20063;
  background: #FFF4F9;
  padding: 20px 26px;
  border-radius: 0 14px 14px 0;
  font-style: italic;
  color: #4D1566;
  margin: 26px 0;
}

body.dark-mode .article-content-wrapper blockquote {
  background: rgba(242, 0, 124, 0.1);
  color: #FFB2C9;
}

.article-content-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 22px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #D8CFDE;
  font-size: 0.86rem;
  line-height: 1.45;
}

.article-content-wrapper th {
  background: #2D0B3D;
  color: #ffffff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid #FFB300;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.article-content-wrapper th:last-child {
  border-right: none;
}

.article-content-wrapper td {
  padding: 8px 14px;
  border-bottom: 1px solid #EBE4F0;
  border-right: 1px solid #EFE8F3;
  vertical-align: middle;
}

.article-content-wrapper td:last-child {
  border-right: none;
}

.article-content-wrapper tbody tr:nth-child(even) {
  background-color: #FAF8FC;
}

.article-content-wrapper tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}

.article-content-wrapper tbody tr:hover {
  background-color: #F3EDF7;
}

/* Default Drupal pagination styling inside article content */
.article-content-wrapper nav h4 {
  display: none;
}

.article-content-wrapper nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.article-content-wrapper nav li {
  margin: 0;
  padding: 0;
}

.article-content-wrapper nav a,
.article-content-wrapper nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A3B52;
  text-decoration: none !important;
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.1);
  transition: all 0.2s ease;
}

.article-content-wrapper nav a:hover {
  background: #FFF0F6;
  color: #C20063;
  border-color: rgba(242, 0, 124, 0.3);
}

.article-content-wrapper nav span {
  background: linear-gradient(135deg, #2D0B3D 0%, #4D1566 100%);
  color: #FFB300 !important;
  border-color: #2D0B3D;
  cursor: default;
}

.article-content-wrapper ul {
  padding-left: 1.5rem;
  list-style: disc outside;
  margin-bottom: 22px;
}

.article-content-wrapper ol {
  padding-left: 0;
  margin-bottom: 22px;
  list-style: none;
  counter-reset: article-list;
}

.article-content-wrapper li {
  margin-bottom: 0.55em;
  padding-left: 0.2em;
}

.article-content-wrapper ol>li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  padding-left: 0;
  counter-increment: article-list;
}

.article-content-wrapper ol>li::before {
  content: counter(article-list) ".";
  color: #5E4C65;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.article-content-wrapper li::marker {
  color: #C20063;
}

.article-content-wrapper a {
  color: #C20063;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.article-content-wrapper a:hover {
  color: #2D0B3D;
}

body.dark-mode .article-content-wrapper a {
  color: #FF80AB;
}

body.dark-mode .article-content-wrapper ol>li::before {
  color: #FFFFFF;
}

.article-card--strategic-plan .article-content-wrapper {
  max-width: none;
}

.article-card--strategic-plan .article-content-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

/* Directorate functions and staff directory */
.directorate-content {
  max-width: none;
}

.directorate-content article>header {
  display: none;
}

.directorate-content article>div>div:first-child {
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(45, 11, 61, 0.12);
}

.directorate-content article>div>div:first-child h2 {
  margin-top: 0;
  padding: 0;
  border: 0;
  font-size: 1.6rem;
}

.directorate-content article>div>div:first-child p {
  margin-bottom: 0;
}

.directorate-content article>div>div:first-child p+p {
  display: none;
}

.directorate-content article>div>div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.directorate-content article>div>div:nth-child(2)>div {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(45, 11, 61, 0.1);
  border-radius: 16px;
  background: #FCFAFC;
}

.directorate-content article>div>div:nth-child(2)>div>div {
  height: 100%;
  padding-bottom: 22px;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:first-child {
  display: flex;
  justify-content: center;
  height: 220px;
  padding: 20px 20px 0;
  margin-bottom: 20px;
  background: linear-gradient(145deg, #F0EBF0, #F8F5F7);
}

.directorate-content article img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:not(:first-child) {
  padding-inline: 20px;
  overflow-wrap: anywhere;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:nth-child(2) {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: #2D0B3D;
  margin-bottom: 6px;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:nth-child(3) {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  color: #79536E;
  margin-bottom: 16px;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:nth-child(n+4) {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #625768;
  margin-top: 6px;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:nth-child(n+4)::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.directorate-content article>div>div:nth-child(2)>div>div>div:nth-child(5)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3l2 5-2 2a16 16 0 0 0 6 6l2-2 5 2Z'/%3E%3C/svg%3E");
}

body.jhewa-inner-page.dark-mode .directorate-content article>div>div:first-child,
body.jhewa-inner-page.dark-mode .directorate-content article>div>div:nth-child(2)>div {
  border-color: var(--inner-dark-border);
}

body.jhewa-inner-page.dark-mode .directorate-content article>div>div:nth-child(2)>div {
  background: var(--inner-dark-elevated);
}

body.jhewa-inner-page.dark-mode .directorate-content article>div>div:nth-child(2)>div>div>div:first-child {
  background: linear-gradient(145deg, #2A252E, #211D25);
}

body.jhewa-inner-page.dark-mode .directorate-content article>div>div:nth-child(2)>div>div>div:not(:first-child) {
  color: #FFFFFF;
}

@media (max-width: 600px) {
  .directorate-content article>div>div:nth-child(2) {
    grid-template-columns: 1fr;
  }
}

/* Activity archive */
.inner-content-layout:has(.activity-post) {
  grid-template-columns: minmax(0, 1fr);
}

.activity-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px 40px;
}

.activity-post > .activity-post__meta {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.activity-post > .activity-slider,
.activity-post > .activity-post__body {
  min-width: 0;
}

.activity-post > .activity-post__body {
  margin-top: 0;
}

.activity-post:not(:has(.activity-slider)) > .activity-post__body {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .activity-post {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.article-card-elevated:has(.activity-post) {
  padding: 28px;
}

.activity-post__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  color: #69576C;
}

.activity-post__meta a,
.activity-post__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.activity-post__meta a:hover {
  text-decoration: underline;
}

.activity-post__meta .icon {
  width: 16px;
  height: 16px;
}

.activity-slider__stage {
  overflow: hidden;
  border-radius: 14px;
  background: #F1EDF2;
  touch-action: pan-y;
}

.activity-slider__slide {
  margin: 0;
}

.activity-slider__preview-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
}

.activity-slider__preview-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 20px;
  background: rgba(17, 16, 21, 0.8);
  color: #FFFFFF;
  font-size: 0.75rem;
}

dialog.activity-preview {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(96vw, 1600px);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: #111015;
  color: #FFFFFF;
}

.activity-preview::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.activity-preview__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.activity-preview__toolbar button {
  width: 44px;
  height: 44px;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.activity-preview__viewer {
  position: relative;
  isolation: isolate;
}

.activity-preview__viewer > img {
  width: 100%;
  height: auto;
  max-height: calc(94dvh - 110px);
  object-fit: contain;
}

.activity-preview__viewer > button {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(17, 16, 21, 0.85);
  color: #FFFFFF;
}

.activity-preview__viewer > button:hover {
  background: #45304C;
}

.activity-preview__viewer .icon {
  width: 22px;
  height: 22px;
}

.activity-preview__previous {
  left: 8px;
}

.activity-preview__previous .icon {
  transform: rotate(180deg);
}

.activity-preview__next {
  right: 8px;
}

body:has(dialog.activity-preview[open]) {
  overflow: hidden;
}

.activity-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.activity-slider__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.activity-slider__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(125, 110, 130, 0.25);
  border-radius: 50%;
  color: inherit;
}

.activity-slider__controls button:first-child .icon {
  transform: rotate(180deg);
}

.activity-slider__controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

.activity-slider__controls .icon {
  width: 18px;
  height: 18px;
}

.activity-slider__thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 3px;
}

.activity-slider__thumbnails button {
  flex: 0 0 76px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 10px;
}

.activity-slider__thumbnails button[aria-pressed="true"] {
  border-color: #A9728E;
}

.activity-slider__thumbnails img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
}

.activity-slider button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.activity-post__body {
  margin-top: 36px;
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: normal;
}

.activity-post__body p {
  margin-bottom: 1.2em;
}

.activity-post__body h2 {
  font-size: 1.4rem;
}

.activity-post__body h3 {
  font-size: 1.2rem;
}

.activity-post__body h4 {
  font-size: 1.05rem;
}

body.jhewa-inner-page.dark-mode .activity-post__meta,
body.jhewa-inner-page.dark-mode .activity-slider__controls {
  color: #FFFFFF;
}

body.jhewa-inner-page.dark-mode .activity-slider__stage {
  background: var(--inner-dark-canvas);
}

@media (max-width: 600px) {
  .article-card-elevated:has(.activity-post) {
    padding: 18px;
  }

  .activity-slider__slide img {
    aspect-ratio: 4 / 3;
  }
}

.photo-pagination .kad-pagination {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.article-card-elevated:has(.photo-blog) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.photo-blog {
  max-width: none;
}

.photo-blog h3 {
  margin: 0 0 24px;
  font-size: 1.5rem;
}

.photo-blog ul:not(nav ul) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.photo-blog ul:not(nav ul) > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.1);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(45, 11, 61, 0.045);
}

.photo-blog li > div:first-child {
  order: -2;
}

.photo-blog li > div:first-child a {
  display: block;
  overflow: hidden;
}

.photo-blog li img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.photo-blog li:hover img {
  transform: scale(1.025);
}

.photo-blog li > div:nth-child(3) {
  order: -1;
  padding: 20px 22px 0;
  font-size: 0.78rem;
  color: #756477;
}

.photo-blog li > div:nth-child(3) div {
  display: inline;
}

.photo-blog li time {
  margin-right: 4px;
}

.photo-blog li h2 {
  margin: 10px 0 0;
  padding: 0 22px 26px;
  border: 0;
  font-size: 1.25rem;
  line-height: 1.45;
}

.photo-blog li h2 a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.photo-blog li h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.photo-blog a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.photo-blog nav {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(125, 110, 130, 0.2);
}

.photo-blog nav h4 {
  display: none;
}

.photo-blog nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.photo-blog nav li {
  margin: 0;
  padding: 0;
}

.article-content-wrapper.photo-blog nav li > a,
.article-content-wrapper.photo-blog nav li > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(125, 110, 130, 0.25);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  background: #FFFFFF;
  color: #45374E !important;
}

.article-content-wrapper.photo-blog nav li > a:hover {
  background: #F2EDF2;
  border-color: #A58B9C;
}

.article-content-wrapper.photo-blog nav li > span {
  background: #45304C;
  border-color: #45304C;
  color: #FFFFFF !important;
}

.article-content-wrapper.photo-blog nav a span {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit !important;
  font: inherit;
  cursor: inherit;
}

body.jhewa-inner-page.dark-mode .article-content-wrapper.photo-blog nav li > a {
  background: var(--inner-dark-surface);
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF !important;
}

body.jhewa-inner-page.dark-mode .article-content-wrapper.photo-blog nav li > a:hover,
body.jhewa-inner-page.dark-mode .article-content-wrapper.photo-blog nav li > span {
  background: #3B303C;
  border-color: #8B6F82;
  color: #FFFFFF !important;
}

body.jhewa-inner-page.dark-mode .article-card-elevated:has(.photo-blog) {
  background: transparent;
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .photo-blog ul:not(nav ul) > li {
  background: var(--inner-dark-surface);
  border-color: var(--inner-dark-border);
}

body.jhewa-inner-page.dark-mode .photo-blog li > div:nth-child(3),
body.jhewa-inner-page.dark-mode .photo-blog li h2 a {
  color: #FFFFFF;
}

@media (max-width: 600px) {
  .photo-blog ul:not(nav ul) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-blog li:hover img {
    transform: none;
  }
}

/* Former Directors */
.article-card--former-directors {
  padding: 34px;
}

.article-card--former-directors .article-content-wrapper {
  max-width: none;
}

.article-card--former-directors .article-content-wrapper article>header,
.article-card--former-directors .article-content-wrapper>section>a {
  display: none;
}

.article-card--former-directors .article-content-wrapper article>div>div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  counter-reset: former-director;
}

.article-card--former-directors .article-content-wrapper article>div>div>div {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF7FB 0%, #FFFFFF 58%);
  border: 1px solid rgba(77, 21, 102, 0.12);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(45, 11, 61, 0.08);
  counter-increment: former-director;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.article-card--former-directors .article-content-wrapper article>div>div>div:not(:has(img)) {
  display: none;
}

.article-card--former-directors .article-content-wrapper article>div>div>div:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 0, 124, 0.3);
  box-shadow: 0 20px 42px rgba(45, 11, 61, 0.14);
}

.article-card--former-directors .article-content-wrapper article>div>div>div::before {
  content: counter(former-director, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(45, 11, 61, 0.82);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
}

.article-card--former-directors .article-content-wrapper article>div>div>div>div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-card--former-directors .article-content-wrapper article>div>div>div>div>div:first-child {
  display: grid;
  place-items: end center;
  height: 250px;
  padding: 24px 20px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 110%, rgba(242, 0, 124, 0.16), transparent 56%),
    linear-gradient(145deg, #F8EEF7 0%, #F4EAF1 100%);
}

.article-card--former-directors .article-content-wrapper article img {
  width: auto;
  height: 100%;
  max-height: 226px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 15px rgba(45, 11, 61, 0.16));
}

.article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(2) {
  padding: 22px 22px 8px;
  color: var(--jhewa-plum);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.35;
}

.article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(3) {
  align-self: flex-start;
  margin: auto 22px 22px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(242, 0, 124, 0.08);
  color: var(--jhewa-magenta-dark);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

body.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div {
  background: linear-gradient(180deg, #2B0B37 0%, #1E0626 62%);
  border-color: rgba(255, 128, 171, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

body.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:first-child {
  background:
    radial-gradient(circle at 50% 110%, rgba(242, 0, 124, 0.24), transparent 58%),
    linear-gradient(145deg, #3A1745 0%, #27102F 100%);
}

body.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(2) {
  color: #FFFFFF;
}

body.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(3) {
  background: rgba(255, 179, 0, 0.12);
  color: var(--jhewa-gold-bright);
}

@media (max-width: 760px) {
  .article-card--former-directors {
    padding: 22px;
  }

  .article-card--former-directors .article-content-wrapper article>div>div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 520px) {
  .article-card--former-directors .article-content-wrapper article>div>div {
    grid-template-columns: 1fr;
  }

  .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:first-child {
    height: 280px;
  }

  .article-card--former-directors .article-content-wrapper article img {
    max-height: 256px;
  }
}

/* Article Alerts */
.article-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 28px;
  font-size: 0.88rem;
  font-weight: 500;
}

.article-alert--preview {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  color: #92400E;
}

.article-alert__badge {
  background: #F59E0B;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
}

.article-alert--translation {
  background: #FFF0F6;
  border: 1px solid rgba(242, 0, 124, 0.25);
  color: #4D1566;
}

/* Article Media Download Card */
.article-media-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #FFF0F6 0%, #FAF4F9 100%);
  border: 1px solid rgba(242, 0, 124, 0.22);
  padding: 20px 24px;
  border-radius: 16px;
  margin-bottom: 32px;
}

body.dark-mode .article-media-card {
  background: rgba(45, 11, 61, 0.5);
  border-color: rgba(242, 0, 124, 0.3);
}

.article-media-card__info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.article-media-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2D0B3D, #4D1566);
  color: #FFB300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(45, 11, 61, 0.2);
}

.article-media-card__icon svg {
  width: 22px;
  height: 22px;
}

.article-media-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2D0B3D;
  margin: 0 0 4px;
  word-break: break-all;
}

body.dark-mode .article-media-card__name {
  color: #ffffff;
}

.article-media-card__meta {
  font-size: 0.8rem;
  color: #6B556F;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.article-media-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(242, 0, 124, 0.35);
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-media-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(242, 0, 124, 0.45);
}

.article-preview-link-wrap {
  margin-top: 24px;
}

.article-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C20063;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-preview-link:hover {
  color: #2D0B3D;
  text-decoration: underline;
}

/* Article Footer Metadata */
.article-footer-meta {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(45, 11, 61, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.article-footer-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F8F4F9;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  color: #695870;
  font-weight: 500;
}

body.dark-mode .article-footer-meta__date {
  background: rgba(255, 255, 255, 0.08);
  color: #C0B7C2;
}

.article-footer-meta__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C20063;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.article-footer-meta__source:hover {
  color: #2D0B3D;
  transform: translateX(2px);
}

/* ==========================================================================
   SIDEBAR CARDS (RELATED & ASSISTANCE)
   ========================================================================== */
.sidebar-card-sp {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  box-shadow: 0 10px 32px rgba(45, 11, 61, 0.04);
  margin-bottom: 24px;
}

body.dark-mode .sidebar-card-sp {
  background: var(--sp-dark-surface);
  border-color: var(--sp-dark-border);
}

.sidebar-card-sp h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: #2D0B3D;
  margin-bottom: 18px;
  border-bottom: 2px solid #FFB300;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.dark-mode .sidebar-card-sp h3 {
  color: #ffffff;
}

/* ==========================================================================
   SIDEBAR NAVIGATION (CATEGORIES & SUBCATEGORIES)
   ========================================================================== */
.sidebar-card-nav {
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(45, 11, 61, 0.05);
  margin-bottom: 24px;
}

body.dark-mode .sidebar-card-nav {
  background: var(--sp-dark-surface);
  border-color: rgba(255, 179, 0, 0.2);
}

.sidebar-nav-header {
  margin-bottom: 18px;
}

.sidebar-nav-header__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.sidebar-category-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FFF0F6 0%, #FCE4EC 100%);
  color: #C20063;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(242, 0, 124, 0.18);
  display: inline-flex;
  align-items: center;
}

body.dark-mode .sidebar-category-badge {
  background: rgba(242, 0, 124, 0.2);
  color: #FF80AB;
  border-color: rgba(242, 0, 124, 0.35);
}

.sidebar-nav-badge-pill {
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7E6C84;
}

body.dark-mode .sidebar-nav-badge-pill {
  color: #A999AF;
}

.sidebar-nav-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: #2D0B3D;
  margin: 0 0 12px;
  line-height: 1.3;
}

body.dark-mode .sidebar-nav-title {
  color: #ffffff;
}

.sidebar-nav-divider {
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FFB300 0%, #F2007C 50%, rgba(242, 0, 124, 0.08) 100%);
}

.sidebar-nav-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Subcategory Groups (Accordion) */
.sidebar-subcat-group {
  border: 1px solid rgba(45, 11, 61, 0.06);
  border-radius: 12px;
  overflow: hidden;
  background: #FAF7FA;
  transition: all 0.25s ease;
}

body.dark-mode .sidebar-subcat-group {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}

.sidebar-subcat-group.is-active-group {
  border-color: rgba(242, 0, 124, 0.22);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(45, 11, 61, 0.04);
}

body.dark-mode .sidebar-subcat-group.is-active-group {
  background: rgba(45, 11, 61, 0.35);
  border-color: rgba(242, 0, 124, 0.35);
}

.sidebar-subcat-summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  font-size: 0.88rem;
  font-weight: 700;
  color: #362940;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-subcat-summary::-webkit-details-marker {
  display: none;
}

.sidebar-subcat-summary:hover {
  background: rgba(242, 0, 124, 0.04);
  color: #C20063;
}

body.dark-mode .sidebar-subcat-summary {
  color: #E6DAEA;
}

body.dark-mode .sidebar-subcat-summary:hover {
  background: rgba(242, 0, 124, 0.12);
  color: #FF80AB;
}

.sidebar-subcat-group.is-active-group .sidebar-subcat-summary {
  color: #2D0B3D;
  background: rgba(242, 0, 124, 0.03);
}

body.dark-mode .sidebar-subcat-group.is-active-group .sidebar-subcat-summary {
  color: #ffffff;
  background: rgba(242, 0, 124, 0.08);
}

.sidebar-subcat-summary__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-subcat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C20063;
  flex-shrink: 0;
}

.sidebar-subcat-group.is-active-group .sidebar-subcat-icon {
  color: #FFB300;
}

.sidebar-subcat-summary__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-subcat-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(45, 11, 61, 0.06);
  color: #695870;
}

body.dark-mode .sidebar-subcat-count {
  background: rgba(255, 255, 255, 0.08);
  color: #C0B7C2;
}

.sidebar-subcat-chevron {
  color: #8E7A93;
  transition: transform 0.25s ease;
}

.sidebar-subcat-group[open] .sidebar-subcat-chevron {
  transform: rotate(180deg);
  color: #C20063;
}

/* Subcategory List & Items */
.sidebar-subcat-list {
  list-style: none;
  padding: 4px 8px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-subcat-list.is-single {
  padding: 0;
  gap: 6px;
}

.sidebar-nav-item {
  position: relative;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #45374E;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 3px solid transparent;
}

.sidebar-nav-link:hover {
  background: rgba(242, 0, 124, 0.05);
  color: #C20063;
  transform: translateX(3px);
  border-left-color: rgba(242, 0, 124, 0.4);
}

.sidebar-nav-link__text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sidebar-nav-arrow {
  color: #C20063;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.sidebar-nav-link:hover .sidebar-nav-arrow {
  transform: translateX(3px);
}

/* Active Page State */
.sidebar-nav-item.is-current .sidebar-nav-link {
  background: linear-gradient(90deg, rgba(242, 0, 124, 0.09) 0%, rgba(242, 0, 124, 0.02) 100%);
  border-left: 3.5px solid #FFB300 !important;
  color: #2D0B3D;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(45, 11, 61, 0.04);
}

body.dark-mode .sidebar-nav-item.is-current .sidebar-nav-link {
  background: rgba(242, 0, 124, 0.18);
  border-left-color: #FFB300 !important;
  color: #ffffff;
}

.sidebar-nav-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 179, 0, 0.18);
  color: #92400E;
  border: 1px solid rgba(255, 179, 0, 0.45);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

body.dark-mode .sidebar-nav-current-pill {
  background: rgba(255, 179, 0, 0.2);
  color: #FFD54F;
  border-color: rgba(255, 179, 0, 0.4);
}

.sidebar-nav-current-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
  display: inline-block;
}

body.dark-mode .sidebar-nav-link {
  color: #D2C4D8;
}

body.dark-mode .sidebar-nav-link:hover {
  background: rgba(242, 0, 124, 0.12);
  color: #FF80AB;
  border-left-color: rgba(242, 0, 124, 0.6);
}

/* Legacy related list fallback styles */
.sidebar-related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.sidebar-related-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #362940;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-related-link:hover {
  background: #FFF0F6;
  color: #C20063;
  transform: translateX(4px);
}

.sidebar-related-link .arrow {
  color: #C20063;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.sidebar-related-link:hover .arrow {
  transform: translateX(3px);
}

body.dark-mode .sidebar-related-link {
  color: #E2D7E6;
}

body.dark-mode .sidebar-related-link:hover {
  background: rgba(242, 0, 124, 0.15);
  color: #FF80AB;
}

/* Sidebar Assistance Card */
.sidebar-card-assistance {
  background: linear-gradient(145deg, #1C0326 0%, #2D0B3D 50%, #4D1566 100%) !important;
  border: 1px solid rgba(255, 179, 0, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 40px rgba(26, 4, 38, 0.28) !important;
  position: relative;
  overflow: hidden;
}

.sidebar-card-assistance__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  bottom: -80px;
  right: -80px;
  background: radial-gradient(circle, rgba(255, 179, 0, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-card-assistance h3 {
  color: #ffffff !important;
  border-color: #FFB300 !important;
}

.sidebar-card-assistance p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 22px;
}

.sidebar-assistance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #FFB300 0%, #FF8F00 100%);
  color: #1A0426 !important;
  font-weight: 800;
  font-size: 0.92rem;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(255, 179, 0, 0.4);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-assistance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 179, 0, 0.55);
}

.sidebar-assistance-btn svg {
  flex-shrink: 0;
}

.sidebar-assistance-btn span:last-child {
  margin-left: auto;
}

/* ==========================================================================
   SEARCH RESULTS PAGE STYLING
   ========================================================================== */
.search-banner-box {
  max-width: 720px;
  margin-top: 24px;
}

.search-banner-form {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 8px 6px 22px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 179, 0, 0.4);
}

.search-banner-form__icon {
  color: #773b71;
  margin-right: 12px;
  flex-shrink: 0;
}

.search-banner-form__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  color: #2D0B3D;
  background: transparent;
  min-width: 0;
}

.search-banner-form__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #ffffff;
  font-weight: 750;
  font-size: 0.9rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(242, 0, 124, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-banner-form__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(242, 0, 124, 0.45);
}

/* Search Sidebar Filter */
.sidebar-filter-card {
  position: sticky;
  top: 100px;
}

.downloads-active-filter {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  margin-bottom:18px;
  border:1px solid var(--sp-border-subtle);
  border-radius:10px;
  font-size:.8rem;
}

.downloads-active-filter button,
.downloads-doc-table .formal-table-empty button {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  min-height:44px;
}

.search-filter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-filter-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #6B556F;
}

.search-filter-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(45, 11, 61, 0.15);
  background: #FFF8FA;
  font-family: inherit;
  font-size: 0.88rem;
  color: #2D0B3D;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-filter-select:focus {
  border-color: #F2007C;
  box-shadow: 0 0 0 3px rgba(242, 0, 124, 0.15);
}

.search-filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.search-filter-submit {
  flex: 1;
  padding: 11px 18px;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(242, 0, 124, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.search-filter-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(242, 0, 124, 0.4);
}

.search-filter-clear {
  padding: 11px 18px;
  border: 1px solid rgba(45, 11, 61, 0.2);
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6B556F;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.search-filter-clear:hover {
  border-color: #C20063;
  color: #C20063;
  background: #FFF0F6;
}

/* Results Column */
.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(45, 11, 61, 0.1);
}

.search-results-header__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: #2D0B3D;
}

.search-results-header__title em {
  color: #C20063;
  font-style: normal;
}

.search-results-header__count {
  font-size: 0.85rem;
  color: #6B556F;
  font-weight: 600;
  background: #FFF0F6;
  padding: 4px 12px;
  border-radius: 20px;
}

.search-correction-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF4E5;
  border: 1px solid #FFD54F;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #8C5300;
  margin-bottom: 22px;
}

.search-correction-box a {
  font-weight: 750;
  color: #C20063;
  text-decoration: underline;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-item-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 26px 30px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  box-shadow: 0 6px 24px rgba(45, 11, 61, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.search-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(45, 11, 61, 0.08);
  border-color: rgba(242, 0, 124, 0.3);
}

body.dark-mode .search-item-card {
  background: var(--sp-dark-surface);
  border-color: var(--sp-dark-border);
}

.search-item-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.76rem;
  margin-bottom: 10px;
  color: #6B556F;
}

.search-item-card__badge {
  padding: 3px 10px;
  border-radius: 6px;
  background: #FFF0F6;
  color: #C20063;
  border: 1px solid rgba(242, 0, 124, 0.18);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-item-card__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.search-item-card__title a {
  color: #2D0B3D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.search-item-card__title a:hover {
  color: #F2007C;
}

body.dark-mode .search-item-card__title a {
  color: #ffffff;
}

.search-item-card__excerpt {
  font-size: 0.93rem;
  color: #6B556F;
  line-height: 1.7;
  margin-bottom: 16px;
}

.search-item-card__actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

.search-item-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #C20063;
  text-decoration: none;
  transition: all 0.2s ease;
}

.search-item-card__link:hover {
  color: #2D0B3D;
  transform: translateX(3px);
}

.search-item-card__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2D0B3D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.search-item-card__download:hover {
  color: #F2007C;
}

/* Search Empty State */
.search-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  box-shadow: 0 8px 30px rgba(45, 11, 61, 0.04);
}

.search-empty-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #FFF0F6;
  color: #C20063;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-empty-state h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: #2D0B3D;
  margin-bottom: 8px;
}

.search-empty-state p {
  color: #6B556F;
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.65;
}


/* ==========================================================================
   16. MOBILE NAVIGATION DRAWER
   ========================================================================== */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: rgba(26, 4, 38, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
  z-index: 1200;
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.mobile-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--sp-transition);
}

.mobile-drawer-close:hover {
  background: var(--jhewa-magenta);
  color: #fff;
}

.mobile-drawer-body {
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-drawer-section-title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jhewa-gold);
  font-weight: 700;
  padding: 16px 8px 6px;
}

.mobile-corporate-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .9);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.mobile-corporate-group summary::-webkit-details-marker {
  display: none;
}

.mobile-corporate-group summary::marker {
  content: '';
}

.mobile-corporate-group summary svg {
  flex: none;
}

.mobile-corporate-group details[open]>summary svg {
  transform: rotate(90deg);
}

.mobile-corporate-group summary:hover {
  background: rgba(242, 0, 124, .12);
}

.mobile-corporate-group summary:focus-visible {
  outline: 2px solid var(--jhewa-rose-soft);
  outline-offset: 2px;
}

.mobile-corporate-group ul {
  list-style: none;
  margin: 4px 0 10px 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.mobile-drawer-list .mobile-corporate-group li a {
  font-size: .85rem;
  line-height: 1.5;
}

.mobile-drawer-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  font-weight: 500;
  transition: var(--sp-transition);
}

.mobile-drawer-list li a:hover {
  background: rgba(242, 0, 124, 0.2);
  color: var(--jhewa-gold-bright);
  padding-left: 18px;
}

.mobile-icon {
  font-size: 1.1rem;
}

.mobile-drawer-footer {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-stat-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 25px;
  background: rgba(242, 0, 124, 0.18);
  border: 1px solid var(--jhewa-magenta);
  color: var(--jhewa-gold);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--sp-transition);
}

.mobile-stat-btn:hover {
  background: var(--jhewa-magenta);
  color: #fff;
}

/* Continuous JHEWA journey: home, support, skills and participation. */
body.homepage-version-4 {
  isolation: isolate;
  background-color: #1a0426;
  --hero-topbar-height: 43px;
  --hero-nav-height: 84px;
  --story-wash-edge: rgba(255, 248, 250, 0.66);
  --story-wash-center: rgba(255, 248, 250, 0.94);
}

body.homepage-version-4.dark-mode {
  --story-wash-edge: rgba(18, 2, 23, 0.22);
  --story-wash-center: rgba(18, 2, 23, 0.72);
}

.jhewa-story {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #1a0426;
  contain: strict;
}

.jhewa-story__landscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: max(115svh, 150vw);
  object-fit: cover;
  object-position: center top;
  transform: translate3d(0, var(--story-y, 0px), 0);
  will-change: transform;
}

.jhewa-story::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 3, 30, 0.42), rgba(20, 3, 30, 0.12) 55%, rgba(20, 3, 30, 0.3));
}

.jhewa-story__foreground {
  position: absolute;
  inset: auto 0 -40px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.55;
  transform: translate3d(0, var(--story-depth, 0px), 0);
}

.jhewa-story__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 92% 20%, rgba(255, 179, 0, 0.13), transparent 48%),
    radial-gradient(ellipse at 5% 85%, rgba(242, 0, 124, 0.12), transparent 42%);
  animation: jhewa-story-light 9s ease-in-out infinite alternate;
}

@keyframes jhewa-story-light {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 0.85;
  }
}

.homepage-version-4 #slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2dvh, 24px);
  height: auto;
  min-height: calc(100vh - var(--hero-topbar-height));
  min-height: calc(100dvh - var(--hero-topbar-height));
  padding: calc(var(--hero-nav-height) + 16px) 20px max(20px, env(safe-area-inset-bottom));
  background: transparent;
}

.homepage-version-4 #header:not(.is-sticky) {
  top: var(--hero-topbar-height);
}

.homepage-version-4 #header .header-inner {
  height: var(--hero-nav-height);
  min-height: var(--hero-nav-height);
  gap: 16px;
}

.homepage-version-4 #slider #adeii-3 {
  position: relative;
  inset: auto;
  flex: 1 0 auto;
  height: auto;
  will-change: auto;
}

.homepage-version-4 .parallax-title-v4 {
  position: static;
  width: min(100%, 880px);
  margin-inline: auto;
  transform: none;
}

.homepage-version-4 .parallax-title-v4__heading {
  font-size: clamp(1.75rem, 6vw, 5.2rem);
}

.homepage-version-4 .hero-impact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homepage-version-4 .hero-search-v4,
.homepage-version-4 .hero-invitation-v4 {
  position: relative;
  inset: auto;
  flex-shrink: 0;
  max-width: 100%;
  transform: none;
}

.homepage-version-4 .hero-search-v4>svg,
.homepage-version-4 .hero-search-v4__button {
  flex-shrink: 0;
}

.homepage-version-4 .hero-search-v4 form,
.homepage-version-4 .hero-search-v4__input {
  min-width: 0;
}

.homepage-version-4 .hero-search-v4__input {
  min-height: 44px;
}

.homepage-version-4 .hero-search-v4 {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

@media (max-width: 1199px) {
  .homepage-version-4 .desktop-only-nav {
    display: none;
  }

  .homepage-version-4 .mobile-nav-toggle {
    display: flex;
  }
}

@media (max-width: 991px) {
  body.homepage-version-4 {
    --hero-topbar-height: 0px;
  }
}

@media (max-width: 600px) {
  .homepage-version-4 #slider {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .homepage-version-4 .tumbler-wrapper {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .homepage-version-4 #header .header-inner {
    padding-inline: 16px;
    gap: 12px;
  }

  .homepage-version-4 .brand-logos {
    flex-shrink: 0;
    gap: 6px;
  }

  .homepage-version-4 :is(.brand-crest-img, .brand-logo-img) {
    height: 40px;
    max-width: none;
  }

  .homepage-version-4 .parallax-title-v4__welcome {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .homepage-version-4 .parallax-title-v4__tagline {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-top: 12px;
  }

  .homepage-version-4 .hero-impact-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
  }

  .homepage-version-4 .hero-impact-item {
    padding-inline: 0;
  }

  .homepage-version-4 .hero-impact-label {
    line-height: 1.35;
  }

  .homepage-version-4 .hero-search-v4 {
    padding-left: 14px;
  }
}

@media (max-width: 480px) {
  .homepage-version-4 .brand-text-block {
    display: none;
  }
}

@media (max-height: 650px) {
  body.homepage-version-4 {
    --hero-nav-height: 64px;
  }

  .homepage-version-4 #slider {
    gap: 8px;
    padding-top: calc(var(--hero-nav-height) + 12px);
  }

  .homepage-version-4 .parallax-title-v4__heading {
    font-size: clamp(1.5rem, min(6vw, 6dvh), 3rem);
  }

  .homepage-version-4 .parallax-title-v4__welcome {
    font-size: 0.65rem;
    margin-bottom: 8px;
  }

  .homepage-version-4 .parallax-title-v4__tagline {
    font-size: 0.7rem;
    margin-top: 8px;
  }

  .homepage-version-4 .parallax-title-v4__tagline::before {
    margin-bottom: 8px;
  }

  .homepage-version-4 .hero-impact-strip {
    margin-top: 12px;
    padding: 8px 14px;
    gap: 8px;
  }

  .homepage-version-4 .hero-impact-number {
    font-size: 1.1rem;
  }

  .homepage-version-4 .hero-impact-label {
    font-size: 0.6rem;
  }

  .homepage-version-4 .hero-invitation-v4__link {
    font-size: 0.65rem;
    padding: 4px 12px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .homepage-version-4 #slider {
    display: grid;
    grid-template-columns: minmax(0, 680px) auto;
    grid-template-rows: 1fr auto;
    justify-content: center;
    gap: 12px 16px;
    padding-top: calc(var(--hero-nav-height) + 8px);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .homepage-version-4 #slider #adeii-3 {
    grid-column: 1 / -1;
  }

  .homepage-version-4 .parallax-title-v4__heading {
    font-size: clamp(1.35rem, 5dvh, 1.8rem);
  }

  .homepage-version-4 .parallax-title-v4__line {
    display: inline;
  }

  .homepage-version-4 .parallax-title-v4__welcome {
    font-size: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }

  .homepage-version-4 .parallax-title-v4__tagline {
    font-size: 0.65rem;
    line-height: 1.4;
    margin-top: 6px;
  }

  .homepage-version-4 .parallax-title-v4__tagline::before {
    margin-bottom: 6px;
  }

  .homepage-version-4 .hero-impact-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
    padding-block: 6px;
  }

  .homepage-version-4 .hero-impact-item {
    padding-inline: 0;
  }

  .homepage-version-4 .hero-search-v4 {
    width: 100%;
  }

  .homepage-version-4 .hero-invitation-v4 {
    align-self: center;
    margin-right: 70px;
  }

  .homepage-version-4 .hero-invitation-v4__link {
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .homepage-version-4 .hero-invitation-v4__link span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .homepage-version-4 .hero-invitation-v4__arrow {
    font-size: 1rem;
  }
}

.homepage-version-4 #slider::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 27%, rgba(26, 4, 38, 0.58), transparent 72%),
    linear-gradient(180deg, rgba(26, 4, 38, 0.24), transparent 65%, rgba(26, 4, 38, 0.3));
}

.homepage-version-4 #slider .adeii_layer:not(#adeii-3),
.homepage-version-4 #slider :is(.beddyfly, .clouds, .sunrays),
.homepage-version-4 .become-volunteer-one__shape-1,
.homepage-version-4 .ocean-entry-v4>*,
.homepage-version-4 .footer-ocean-v4__scene {
  display: none;
}

body.homepage-version-4 :is(.our-parks, .homepage-updates-v4-v2, .services-island-v4, .agency-ocean-v4) {
  background: linear-gradient(90deg, var(--story-wash-edge), var(--story-wash-center) 28%, var(--story-wash-center) 72%, var(--story-wash-edge));
}

body.homepage-version-4 .our-parks {
  isolation: isolate;
  background: transparent;
}

.homepage-version-4 .our-parks::before {
  content: '';
  position: absolute;
  inset: -120px 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--story-wash-edge), var(--story-wash-center) 28%, var(--story-wash-center) 72%, var(--story-wash-edge));
  mask-image: linear-gradient(180deg, transparent, #000 120px);
}

body.homepage-version-4 .ocean-entry-v4 {
  background: linear-gradient(90deg, var(--story-wash-edge), var(--story-wash-center) 28%, var(--story-wash-center) 72%, var(--story-wash-edge));
  mask-image: linear-gradient(180deg, #000, transparent);
}

body.homepage-version-4 .footer-ocean-v4 {
  background: linear-gradient(180deg, transparent, rgba(15, 2, 20, 0.72));
}

@media (max-width: 600px) {
  .jhewa-story__landscape {
    height: max(130svh, 178vw);
  }

  .jhewa-story__foreground {
    opacity: 0.3;
  }

  body.homepage-version-4 {
    --story-wash-edge: rgba(255, 248, 250, 0.88);
    --story-wash-center: rgba(255, 248, 250, 0.95);
  }

  body.homepage-version-4.dark-mode {
    --story-wash-edge: rgba(18, 2, 23, 0.52);
    --story-wash-center: rgba(18, 2, 23, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {

  .jhewa-story__landscape,
  .jhewa-story__foreground {
    transform: none;
    will-change: auto;
  }

  .jhewa-story__light {
    animation: none;
  }
}

@media print {
  .jhewa-story {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE FOOTER CONTACT DETAILS ALIGNMENT
   ========================================================================== */
.home-footer__contact-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.home-footer__contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: fit-content !important;
  min-height: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

.home-footer__contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  color: var(--home-accent, #773b71) !important;
}

.home-footer__contact-icon .icon,
.home-footer__contact-icon svg,
.home-footer__contact-row>svg.icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  color: var(--home-accent, #773b71) !important;
}

.home-footer__contact-text {
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  color: var(--home-muted, #69616d) !important;
  word-break: break-word !important;
}

.home-footer__contact-row p {
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  color: var(--home-muted, #69616d) !important;
}

.home-footer__contact-row span {
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   GLOBAL JHEWA FOOTER (HOME & INNER PAGES)
   ========================================================================== */
.home-footer {
  position: relative;
  --home-bg: #fcfbf7;
  --home-surface: #ffffff;
  --home-soft: #f1f4ec;
  --home-ink: #33263e;
  --home-muted: #69616d;
  --home-accent: #773b71;
  --home-border: #e3dfdf;
  --chapter-bg: #f1e7dc;
  background: var(--chapter-bg, #f1e7dc);
  color: var(--home-ink, #33263e);
  padding: 85px 0 35px;
  border-top: 1px solid rgba(45, 11, 61, 0.08);
}

[data-theme="dark"] .home-footer,
body.dark-mode .home-footer {
  --home-bg: #17131e;
  --home-surface: #24202b;
  --home-soft: #1d2827;
  --home-ink: #f5f0f3;
  --home-muted: #c0b7c2;
  --home-accent: #e6b4dc;
  --home-border: #3b3443;
  --chapter-bg: #171321;
  background: var(--chapter-bg, #171321);
  color: var(--home-ink, #f5f0f3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-footer .home-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}

.home-footer .home-content {
  position: relative;
  z-index: 2;
}

.home-footer__intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 50px;
}

.home-footer__intro h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--home-ink);
  margin: 0;
}

.home-footer__intro h2 em {
  color: #F2007C;
  font-style: normal;
}

.home-footer .home-eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFB300;
  margin-bottom: 8px;
}

.home-footer__mission p {
  color: var(--home-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.home-footer .home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #F2007C;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.home-footer .home-text-link:hover {
  color: #2D0B3D;
  gap: 12px;
}

body.dark-mode .home-footer .home-text-link:hover {
  color: #FFB300;
}

.home-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 50px;
  padding: 40px 0;
  border-top: 1px solid var(--home-border);
}

.home-footer__logos {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.home-footer__logos img {
  max-height: 48px;
  width: auto;
}

.home-footer h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--home-ink);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.home-footer__grid nav a {
  display: block;
  width: fit-content;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--home-muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.home-footer__grid nav a:hover {
  color: #F2007C;
  transform: translateX(4px);
  text-decoration: none;
}

.home-footer__social p {
  color: var(--home-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

.home-footer__social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--home-ink);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-footer__social-link:hover {
  border-color: #F2007C;
  background: #F2007C;
  color: #fff;
  transform: translateY(-2px);
}

.home-footer__social-link svg {
  display: block;
  flex: none;
}

.home-staff-links {
  border-top: 1px solid var(--home-border);
  padding: 16px 0;
}

.home-staff-links summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--home-ink);
  list-style: none;
  padding: 8px 0;
}

.home-staff-links summary::-webkit-details-marker {
  display: none;
}

.home-staff-links summary span {
  font-size: 1.3rem;
  color: #F2007C;
}

.home-staff-links>p {
  color: var(--home-muted);
  font-size: 0.82rem;
  padding-bottom: 14px;
}

.home-staff-links ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 28px;
  list-style: none;
  padding: 10px 0 25px;
}

.home-staff-links :is(a, h2, h3, p) {
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--home-muted);
}

.home-staff-links a:hover {
  color: #F2007C;
}

.home-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--home-border);
  padding-top: 24px;
  font-size: 0.78rem;
  color: var(--home-muted);
}

.home-footer__bottom a {
  color: var(--home-muted);
  text-decoration: none;
}

.home-footer__bottom a:hover {
  color: #F2007C;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .home-footer__intro {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
  }

  .home-footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .home-staff-links ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .home-footer {
    padding: 60px 0 30px;
  }

  .home-footer .home-container {
    padding-inline: 20px;
  }

  .home-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-staff-links ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DIGITAL GREETING CARDS (KAD UCAPAN DIGITAL)
   ========================================================================== */
.kad-digital-container {
  width: 100%;
}

.kad-digital-banner {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.04) 0%, rgba(242, 0, 124, 0.06) 100%);
  border: 1px solid rgba(242, 0, 124, 0.16);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

body.dark-mode .kad-digital-banner {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.6) 0%, rgba(242, 0, 124, 0.12) 100%);
  border-color: rgba(255, 179, 0, 0.25);
}

.kad-digital-banner__content {
  max-width: 650px;
}

.kad-digital-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #C20063;
  margin-bottom: 8px;
}

body.dark-mode .kad-digital-banner__eyebrow {
  color: #FF80AB;
}

.kad-digital-banner__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 800;
  color: #2D0B3D;
  margin: 0 0 8px;
  line-height: 1.25;
}

body.dark-mode .kad-digital-banner__title {
  color: #ffffff;
}

.kad-digital-banner__desc {
  font-size: 0.92rem;
  color: #55445C;
  line-height: 1.55;
  margin: 0;
}

body.dark-mode .kad-digital-banner__desc {
  color: #D2C5D6;
}

.kad-digital-banner__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kad-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(45, 11, 61, 0.1);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #362940;
  box-shadow: 0 2px 8px rgba(45, 11, 61, 0.04);
}

body.dark-mode .kad-stat-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #E2D6E6;
}

.kad-stat-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

.kad-stat-pill--accent {
  background: #FFF0F6;
  border-color: rgba(242, 0, 124, 0.25);
  color: #C20063;
}

body.dark-mode .kad-stat-pill--accent {
  background: rgba(242, 0, 124, 0.2);
  color: #FF80AB;
}

/* Gallery Grid */
.kad-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

@media (max-width: 680px) {
  .kad-gallery-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.kad-card {
  background: #ffffff;
  border: 1px solid rgba(45, 11, 61, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(45, 11, 61, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.kad-card:hover {
  transform: translateY(-8px);
  border-color: rgba(242, 0, 124, 0.38);
  box-shadow: 0 20px 48px rgba(45, 11, 61, 0.14);
}

body.dark-mode .kad-card {
  background: var(--sp-dark-surface);
  border-color: rgba(255, 179, 0, 0.16);
}

body.dark-mode .kad-card:hover {
  border-color: #FFB300;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}

.kad-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1C0326;
  overflow: hidden;
}

.kad-digital-container--poster .kad-card__media {
  aspect-ratio: 3 / 4;
}

.kad-digital-container--poster .kad-card__img {
  object-position: top center;
}

.kad-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7A6980;
  font-size: 1rem;
  grid-column: 1 / -1;
}

body.dark-mode .kad-empty-state {
  color: #B9B1BA;
}

.kad-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.kad-card:hover .kad-card__img {
  transform: scale(1.05);
}

.kad-card__date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(28, 3, 38, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFB300;
  border: 1px solid rgba(255, 179, 0, 0.35);
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.kad-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(28, 3, 38, 0.82) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.kad-card:hover .kad-card__overlay {
  opacity: 1;
}

.kad-card__overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #2D0B3D;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}

.kad-card:hover .kad-card__overlay-btn {
  transform: translateY(0);
}

.kad-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

body.dark-mode .kad-card__body {
  background: var(--sp-dark-surface);
}

.kad-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2D0B3D;
  line-height: 1.35;
  margin: 0;
  transition: color 0.25s ease;
}

.kad-card:hover .kad-card__title {
  color: #C20063;
}

body.dark-mode .kad-card__title {
  color: #ffffff;
}

body.dark-mode .kad-card:hover .kad-card__title {
  color: #FFB300;
}

/* Pagination */
.kad-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.kad-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 40px;
  border: 1px solid rgba(45, 11, 61, 0.08);
  box-shadow: 0 4px 16px rgba(45, 11, 61, 0.04);
}

body.dark-mode .kad-pagination {
  background: var(--sp-dark-surface);
  border-color: rgba(255, 179, 0, 0.2);
}

.kad-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4A3B52;
  text-decoration: none;
  transition: all 0.2s ease;
}

.kad-page-btn:hover {
  background: #FFF0F6;
  color: #C20063;
}

body.dark-mode .kad-page-btn {
  color: #D2C5D6;
}

body.dark-mode .kad-page-btn:hover {
  background: rgba(242, 0, 124, 0.15);
  color: #FF80AB;
}

.kad-page-btn.is-active {
  background: linear-gradient(135deg, #2D0B3D 0%, #4D1566 100%);
  color: #FFB300 !important;
  box-shadow: 0 4px 12px rgba(45, 11, 61, 0.25);
  cursor: default;
}

.kad-page-btn.is-nav-arrow {
  font-size: 1.15rem;
  font-weight: 800;
}

/* Lightbox Modal */
.kad-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.kad-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.kad-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 2, 25, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kad-modal__container {
  position: relative;
  z-index: 2;
  max-width: 700px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.kad-modal__content {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 179, 0, 0.3);
  display: flex;
  flex-direction: column;
}

body.dark-mode .kad-modal__content {
  background: #1C0326;
}

.kad-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(28, 3, 38, 0.7);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kad-modal__close:hover {
  background: #F2007C;
  transform: rotate(90deg);
}

.kad-modal__image-wrap {
  width: 100%;
  max-height: 65vh;
  background: #12021A;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kad-modal__image {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  display: block;
}

.kad-modal__details {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #FAF7FA;
  border-top: 1px solid rgba(45, 11, 61, 0.08);
}

body.dark-mode .kad-modal__details {
  background: #170220;
  border-color: rgba(255, 255, 255, 0.08);
}

.kad-modal__info {
  flex: 1;
  min-width: 200px;
}

.kad-modal__date {
  font-size: 0.78rem;
  font-weight: 700;
  color: #C20063;
  margin-bottom: 4px;
  display: inline-block;
}

body.dark-mode .kad-modal__date {
  color: #FFB300;
}

.kad-modal__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2D0B3D;
  margin: 0;
  line-height: 1.3;
}

body.dark-mode .kad-modal__title {
  color: #ffffff;
}

.kad-modal__download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(242, 0, 124, 0.35);
  transition: all 0.2s ease;
}

.kad-modal__download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(242, 0, 124, 0.45);
}

/* ==========================================================================
   FORMAL DOCUMENT TABLE (KERATAN AKHBAR & FORMAL REGISTERS)
   ========================================================================== */
.formal-table-container {
  width: 100%;
}

.formal-doc-header {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.04) 0%, rgba(242, 0, 124, 0.04) 100%);
  border: 1px solid rgba(45, 11, 61, 0.1);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

body.dark-mode .formal-doc-header,
body.jhewa-inner-page.dark-mode .formal-doc-header {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.45) 0%, rgba(242, 0, 124, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.formal-doc-header__info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.formal-doc-header__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #2D0B3D;
  color: #FFB300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(45, 11, 61, 0.2);
}

body.dark-mode .formal-doc-header__icon,
body.jhewa-inner-page.dark-mode .formal-doc-header__icon {
  background: #3B124E;
  color: #FFB300;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.formal-doc-header__title {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 800;
  color: #2D0B3D;
  margin: 0 0 2px;
  line-height: 1.25;
}

body.dark-mode .formal-doc-header__title,
body.jhewa-inner-page.dark-mode .formal-doc-header__title {
  color: #FFFFFF;
}

.formal-doc-header__subtitle {
  font-size: 0.82rem;
  color: #695673;
  margin: 0;
  line-height: 1.4;
}

body.dark-mode .formal-doc-header__subtitle,
body.jhewa-inner-page.dark-mode .formal-doc-header__subtitle {
  color: #B9B1BA;
}

.formal-doc-header__actions {
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  justify-content: flex-end;
  max-width: 420px;
}

.formal-table-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.formal-table-search__icon {
  position: absolute;
  left: 14px;
  color: #7B6885;
  pointer-events: none;
}

.formal-table-search__input {
  padding: 9px 34px 9px 38px;
  border-radius: 24px;
  border: 1px solid rgba(45, 11, 61, 0.16);
  background: #FFFFFF;
  font-size: 0.85rem;
  font-family: inherit;
  color: #2D0B3D;
  width: 100%;
  min-width: 280px;
  transition: all 0.25s ease;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.formal-table-search__input:focus {
  border-color: #C20063;
  box-shadow: 0 0 0 3px rgba(242, 0, 124, 0.12);
}

body.dark-mode .formal-table-search__input,
body.jhewa-inner-page.dark-mode .formal-table-search__input {
  background: #17141B;
  border-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

body.dark-mode .formal-table-search__input:focus,
body.jhewa-inner-page.dark-mode .formal-table-search__input:focus {
  border-color: #FF80AB;
}

.formal-table-search__clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #7B6885;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.formal-doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  color: #362940;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(45, 11, 61, 0.03);
}

body.dark-mode .formal-doc-badge,
body.jhewa-inner-page.dark-mode .formal-doc-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #E2D6E6;
}

.formal-doc-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

/* Formal Document Table Wrapper */
.formal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #D8CFDE;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(45, 11, 61, 0.04);
  background: #FFFFFF;
  margin-bottom: 28px;
  container-type: inline-size;
}

body.dark-mode .formal-table-wrap,
body.jhewa-inner-page.dark-mode .formal-table-wrap {
  background: var(--inner-dark-surface);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Formal Document Table */
.formal-doc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.formal-doc-table thead th {
  background: #2D0B3D;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11px 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid #FFB300 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.formal-doc-table thead th:last-child {
  border-right: none;
}

body.dark-mode .formal-doc-table thead th,
body.jhewa-inner-page.dark-mode .formal-doc-table thead th {
  background: #251F2A;
  border-bottom-color: #FFB300 !important;
}

.formal-doc-table tbody tr {
  transition: background-color 0.15s ease;
}

.formal-doc-table tbody tr:nth-child(even) {
  background-color: #FAF8FC;
}

.formal-doc-table tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}

.formal-doc-table tbody tr:hover {
  background-color: #F3EDF7;
}

body.dark-mode .formal-doc-table tbody tr:nth-child(even),
body.jhewa-inner-page.dark-mode .formal-doc-table tbody tr:nth-child(even) {
  background-color: #1A1720;
}

body.dark-mode .formal-doc-table tbody tr:nth-child(odd),
body.jhewa-inner-page.dark-mode .formal-doc-table tbody tr:nth-child(odd) {
  background-color: #16131A;
}

body.dark-mode .formal-doc-table tbody tr:hover,
body.jhewa-inner-page.dark-mode .formal-doc-table tbody tr:hover {
  background-color: rgba(242, 0, 124, 0.12);
}

.formal-doc-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #EBE4F0;
  border-right: 1px solid #EFE8F3;
  vertical-align: middle;
}

.formal-doc-table tbody td:last-child {
  border-right: none;
}

.formal-doc-table tbody tr:last-child td {
  border-bottom: none;
}

body.dark-mode .formal-doc-table tbody td,
body.jhewa-inner-page.dark-mode .formal-doc-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-right-color: rgba(255, 255, 255, 0.05);
}

/* Columns */
.formal-doc-table .th-no,
.formal-doc-table .td-no {
  width: 52px;
  min-width: 48px;
  max-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #7B6885;
  font-size: 0.8rem;
}

body.dark-mode .formal-doc-table .td-no,
body.jhewa-inner-page.dark-mode .formal-doc-table .td-no {
  color: #A89CB0;
}

.formal-doc-table .th-date,
.formal-doc-table .td-date {
  width: 125px;
  min-width: 115px;
  max-width: 140px;
  text-align: center;
  white-space: nowrap;
}

.formal-table-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8rem;
  color: #43314F;
}

body.dark-mode .formal-table-date,
body.jhewa-inner-page.dark-mode .formal-table-date {
  color: #E2D6E6;
}

.formal-table-date__icon {
  color: #C20063;
  flex-shrink: 0;
}

body.dark-mode .formal-table-date__icon,
body.jhewa-inner-page.dark-mode .formal-table-date__icon {
  color: #FFB300;
}

.formal-doc-table .th-title,
.formal-doc-table .td-title {
  text-align: left;
  min-width: 280px;
}

.formal-table-title-link {
  color: #2D0B3D !important;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.42;
  text-decoration: none !important;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 0.2s ease;
}

.formal-table-title-link:hover {
  color: #C20063 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

body.dark-mode .formal-table-title-link,
body.jhewa-inner-page.dark-mode .formal-table-title-link {
  color: #F5EFF8 !important;
}

body.dark-mode .formal-table-title-link:hover,
body.jhewa-inner-page.dark-mode .formal-table-title-link:hover {
  color: #FF80AB !important;
}

.formal-table-link-arrow {
  color: #A89CB0;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

.formal-table-title-link:hover .formal-table-link-arrow {
  transform: translate(1px, -1px);
  color: #C20063;
}

body.dark-mode .formal-table-title-link:hover .formal-table-link-arrow,
body.jhewa-inner-page.dark-mode .formal-table-title-link:hover .formal-table-link-arrow {
  color: #FF80AB;
}

.formal-table-title-text {
  color: #2D0B3D;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.42;
}

body.dark-mode .formal-table-title-text,
body.jhewa-inner-page.dark-mode .formal-table-title-text {
  color: #F5EFF8;
}

.formal-doc-table .th-source,
.formal-doc-table .td-source {
  width: 145px;
  min-width: 130px;
  max-width: 160px;
  text-align: left;
  white-space: nowrap;
}

.formal-source-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #F6F1F8;
  color: #43314F;
  border: 1px solid #E4DAE8;
}

body.dark-mode .formal-source-badge,
body.jhewa-inner-page.dark-mode .formal-source-badge {
  background: rgba(255, 255, 255, 0.05);
  color: #E0D4E4;
  border-color: rgba(255, 255, 255, 0.1);
}

.formal-source-empty {
  color: #A89CB0;
  font-weight: 600;
  padding-left: 6px;
}

.formal-table-empty {
  text-align: center;
  padding: 32px 16px !important;
  color: #7B6885;
  font-size: 0.9rem;
}

body.dark-mode .formal-table-empty,
body.jhewa-inner-page.dark-mode .formal-table-empty {
  color: #B9B1BA;
}

.formal-table-pagination {
  margin-top: 10px;
  margin-bottom: 10px;
}

@media (max-width: 680px) {
  .formal-doc-header__actions {
    max-width: 100%;
    width: 100%;
  }

  .formal-table-search__input {
    min-width: 100%;
  }
}

/* ==========================================================================
   DOWNLOADS DIRECTORY TABLE SPECIFICS
   ========================================================================== */
.container:has(.downloads-table-container, .contact-hub-container) {
  max-width: 1400px;
}

.inner-content-layout:has(.downloads-table-container, .contact-hub-container) {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

.inner-content-layout:has(.downloads-table-container) .article-card-elevated {
  padding: 24px 26px;
}

.downloads-table-container .formal-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.downloads-doc-table {
  table-layout: fixed;
  width: 100%;
}

.downloads-doc-table thead th {
  white-space: normal;
}

.downloads-doc-table .th-no,
.downloads-doc-table .td-no {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 12px 6px;
  text-align: center;
}

.downloads-doc-table .th-desc,
.downloads-doc-table .td-desc {
  width: 27%;
  padding: 12px 14px;
  vertical-align: top;
  word-break: break-word;
}

.downloads-doc-table .th-files,
.downloads-doc-table .td-files {
  width: auto;
  padding: 12px 14px;
  vertical-align: top;
}

.downloads-cat-title {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2D0B3D;
  line-height: 1.38;
  margin-bottom: 0;
  word-break: break-word;
}

body.dark-mode .downloads-cat-title,
body.jhewa-inner-page.dark-mode .downloads-cat-title {
  color: #FFFFFF;
}

.downloads-cat-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #C20063;
  background: #FFF0F6;
  border: 1px solid rgba(194, 0, 99, 0.15);
  padding: 2px 7px;
  border-radius: 10px;
}

body.dark-mode .downloads-cat-meta,
body.jhewa-inner-page.dark-mode .downloads-cat-meta {
  color: #FFB300;
  background: rgba(255, 179, 0, 0.12);
  border-color: rgba(255, 179, 0, 0.25);
}

.downloads-files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.downloads-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(45, 11, 61, 0.02);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.downloads-file-item:hover {
  border-color: rgba(242, 0, 124, 0.35);
  background: #FFF9FC;
  box-shadow: 0 3px 8px rgba(45, 11, 61, 0.06);
}

body.dark-mode .downloads-file-item,
body.jhewa-inner-page.dark-mode .downloads-file-item {
  background: #1C1822;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.dark-mode .downloads-file-item:hover,
body.jhewa-inner-page.dark-mode .downloads-file-item:hover {
  background: #241D2C;
  border-color: #FFB300;
}

.downloads-file-main,
.downloads-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.downloads-format-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #FFF0F6;
  color: #C20063;
  border: 1px solid rgba(194, 0, 99, 0.2);
  flex-shrink: 0;
}

body.dark-mode .downloads-format-tag,
body.jhewa-inner-page.dark-mode .downloads-format-tag {
  background: rgba(242, 0, 124, 0.2);
  color: #FF80AB;
  border-color: rgba(242, 0, 124, 0.35);
}

.downloads-file-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: #2D0B3D;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  cursor: pointer;
}

.downloads-file-name:hover {
  color: #C20063;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.dark-mode .downloads-file-name,
body.jhewa-inner-page.dark-mode .downloads-file-name {
  color: #FFFFFF;
}

body.dark-mode .downloads-file-name:hover,
body.jhewa-inner-page.dark-mode .downloads-file-name:hover {
  color: #FFB300;
}

.downloads-file-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.downloads-file-size {
  font-size: 0.70rem;
  font-weight: 600;
  color: #7B6885;
  background: rgba(45, 11, 61, 0.05);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

body.dark-mode .downloads-file-size,
body.jhewa-inner-page.dark-mode .downloads-file-size {
  color: #B9B1BA;
  background: rgba(255, 255, 255, 0.08);
}

.downloads-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2D0B3D 0%, #4D1566 100%);
  color: #ffffff !important;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(45, 11, 61, 0.15);
  transition: all 0.2s ease;
}

.downloads-file-btn:hover {
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(242, 0, 124, 0.28);
}

body.dark-mode .downloads-file-btn,
body.jhewa-inner-page.dark-mode .downloads-file-btn {
  background: #FFB300;
  color: #1C0326 !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.dark-mode .downloads-file-btn:hover,
body.jhewa-inner-page.dark-mode .downloads-file-btn:hover {
  background: #FFC233;
}

@media (max-width: 768px) {
  .inner-content-layout:has(.downloads-table-container) {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .downloads-doc-table .th-desc,
  .downloads-doc-table .td-desc {
    width: 32%;
  }

  .downloads-file-item {
    flex-wrap: wrap;
    gap: 8px;
  }

  .downloads-file-actions {
    margin-left: auto;
  }
}

.downloads-file-empty {
  color: #7B6885;
  font-style: italic;
  font-size: 0.82rem;
}

/* ==========================================================================
   VIDEO GALLERY (VIDEO JHEWA)
   ========================================================================== */
.video-gallery-container {
  width: 100%;
}

.video-gallery-banner {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.04) 0%, rgba(242, 0, 124, 0.06) 100%);
  border: 1px solid rgba(242, 0, 124, 0.16);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

body.dark-mode .video-gallery-banner,
body.jhewa-inner-page.dark-mode .video-gallery-banner {
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.6) 0%, rgba(242, 0, 124, 0.12) 100%);
  border-color: rgba(255, 179, 0, 0.25);
}

.video-gallery-banner__content {
  max-width: 100%;
}

.video-gallery-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #C20063;
  margin-bottom: 8px;
}

body.dark-mode .video-gallery-banner__eyebrow,
body.jhewa-inner-page.dark-mode .video-gallery-banner__eyebrow {
  color: #FF80AB;
}

.video-gallery-banner__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 800;
  color: #2D0B3D;
  margin: 0 0 8px;
  line-height: 1.25;
}

body.dark-mode .video-gallery-banner__title,
body.jhewa-inner-page.dark-mode .video-gallery-banner__title {
  color: #ffffff;
}

.video-gallery-banner__desc {
  font-size: 0.92rem;
  color: #55445C;
  line-height: 1.55;
  margin: 0;
}

body.dark-mode .video-gallery-banner__desc,
body.jhewa-inner-page.dark-mode .video-gallery-banner__desc {
  color: #D2C5D6;
}

.video-gallery-banner__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(45, 11, 61, 0.1);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #362940;
  box-shadow: 0 2px 8px rgba(45, 11, 61, 0.04);
}

body.dark-mode .video-stat-pill,
body.jhewa-inner-page.dark-mode .video-stat-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #E2D6E6;
}

.video-stat-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF0000;
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.7);
}

.video-stat-pill--accent {
  background: #FFF0F6;
  border-color: rgba(242, 0, 124, 0.25);
  color: #C20063;
}

body.dark-mode .video-stat-pill--accent,
body.jhewa-inner-page.dark-mode .video-stat-pill--accent {
  background: rgba(242, 0, 124, 0.2);
  color: #FF80AB;
}

/* Video Grid */
.video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}

@media (max-width: 680px) {
  .video-gallery-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.video-card {
  background: #ffffff;
  border: 1px solid rgba(45, 11, 61, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(45, 11, 61, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 0, 124, 0.38);
  box-shadow: 0 20px 48px rgba(45, 11, 61, 0.14);
}

body.dark-mode .video-card,
body.jhewa-inner-page.dark-mode .video-card {
  background: var(--inner-dark-surface, #1A171E);
  border-color: rgba(255, 179, 0, 0.18);
}

body.dark-mode .video-card:hover,
body.jhewa-inner-page.dark-mode .video-card:hover {
  border-color: #FFB300;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}

.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #12021A;
  overflow: hidden;
}

.video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .video-card__thumb {
  transform: scale(1.06);
}

.video-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 2, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-card__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF0000;
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
}

.video-card__play-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.video-card__play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(242, 0, 124, 0.55);
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  padding-left: 3px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.video-card:hover .video-card__play-btn {
  transform: scale(1.15);
  box-shadow: 0 8px 28px rgba(242, 0, 124, 0.75);
}

.video-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18, 2, 26, 0.85) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.video-card:hover .video-card__overlay {
  opacity: 1;
}

.video-card__overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #2D0B3D;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s ease;
}

.video-card:hover .video-card__overlay-btn {
  transform: translateY(0);
}

.video-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background: #ffffff;
}

body.dark-mode .video-card__body,
body.jhewa-inner-page.dark-mode .video-card__body {
  background: var(--inner-dark-surface, #1A171E);
}

.video-card__title {
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: #2D0B3D;
  line-height: 1.45;
  margin: 0 0 14px;
  transition: color 0.25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card:hover .video-card__title {
  color: #C20063;
}

body.dark-mode .video-card__title,
body.jhewa-inner-page.dark-mode .video-card__title {
  color: #ffffff;
}

body.dark-mode .video-card:hover .video-card__title,
body.jhewa-inner-page.dark-mode .video-card:hover .video-card__title {
  color: #FFB300;
}

.video-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(45, 11, 61, 0.06);
}

body.dark-mode .video-card__footer,
body.jhewa-inner-page.dark-mode .video-card__footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.video-card__action-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #C20063;
}

body.dark-mode .video-card__action-text,
body.jhewa-inner-page.dark-mode .video-card__action-text {
  color: #FFB300;
}

.video-card__action-arrow {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.video-card:hover .video-card__action-arrow {
  transform: translateX(4px);
}

.video-card__external-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7A6980;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.video-card__external-link:hover {
  color: #FF0000;
  background: rgba(255, 0, 0, 0.08);
}

body.dark-mode .video-card__external-link,
body.jhewa-inner-page.dark-mode .video-card__external-link {
  color: #B9B1BA;
}

body.dark-mode .video-card__external-link:hover,
body.jhewa-inner-page.dark-mode .video-card__external-link:hover {
  color: #FF4D4D;
  background: rgba(255, 77, 77, 0.15);
}

.video-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: #7A6980;
}

body.dark-mode .video-empty-state,
body.jhewa-inner-page.dark-mode .video-empty-state {
  color: #B9B1BA;
}

/* ==========================================================================
   VIDEO LIGHTBOX MODAL DIALOG (MODERN HTML <dialog>)
   ========================================================================== */
dialog.video-modal:modal {
  overscroll-behavior: contain;
  border: none;
  padding: 0;
  background: transparent;
  max-width: 860px;
  width: calc(100% - 36px);
  margin: auto;
  outline: none;
  box-shadow: none;
}

dialog.video-modal::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(15, 2, 22, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.video-modal__content {
  background: #1C0326;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 179, 0, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
}

.video-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: rgba(28, 3, 38, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 16px;
}

.video-modal__header-info {
  flex: 1;
  min-width: 0;
}

.video-modal__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #FFB300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.video-modal__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-modal__close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.video-modal__close-btn:hover {
  background: #F2007C;
  border-color: #F2007C;
  transform: rotate(90deg);
}

.video-modal__player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000000;
}

.video-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(18, 2, 26, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 12px;
}

.video-modal__tip {
  font-size: 0.78rem;
  color: #B9B1BA;
}

.video-modal__yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FF0000;
  color: #ffffff !important;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.video-modal__yt-btn:hover {
  background: #CC0000;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.5);
}

/* Inner pages: restrained dark palette */
body.jhewa-inner-page.dark-mode {
  --inner-dark-canvas: #111015;
  --inner-dark-surface: #1A171E;
  --inner-dark-elevated: #211D25;
  --inner-dark-border: rgba(255, 255, 255, 0.09);
  --inner-dark-text: #FFFFFF;
  --inner-dark-muted: #B9B1BA;
  --inner-dark-accent: #C28DA8;
  --inner-dark-accent-soft: rgba(194, 141, 168, 0.12);
  background-color: var(--inner-dark-canvas) !important;
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .article-card-elevated,
body.jhewa-inner-page.dark-mode .sidebar-card-sp,
body.jhewa-inner-page.dark-mode .sidebar-card-nav {
  background: var(--inner-dark-surface);
  border-color: var(--inner-dark-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper {
  color: #FFFFFF;
}

body.jhewa-inner-page.dark-mode .article-content-wrapper :is(p, li, strong, em) {
  color: #FFFFFF;
}

body.jhewa-inner-page.dark-mode .article-content-wrapper p:first-of-type,
body.jhewa-inner-page.dark-mode .article-content-wrapper h2,
body.jhewa-inner-page.dark-mode .article-content-wrapper h3,
body.jhewa-inner-page.dark-mode .article-content-wrapper h4 {
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper h2 {
  border-bottom-color: rgba(194, 141, 168, 0.32);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper a,
body.jhewa-inner-page.dark-mode .article-content-wrapper li::marker,
body.jhewa-inner-page.dark-mode .article-preview-link,
body.jhewa-inner-page.dark-mode .article-footer-meta__source {
  color: var(--inner-dark-accent);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper blockquote {
  background: var(--inner-dark-elevated);
  border-left-color: var(--inner-dark-accent);
  color: #D9CCD3;
}

body.jhewa-inner-page.dark-mode .article-content-wrapper table {
  border-color: var(--inner-dark-border);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper th {
  background: #252129;
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .article-content-wrapper td {
  border-bottom-color: var(--inner-dark-border);
}

body.jhewa-inner-page.dark-mode .article-media-card {
  background: var(--inner-dark-elevated);
  border-color: var(--inner-dark-border);
}

body.jhewa-inner-page.dark-mode .article-media-card__icon {
  background: #2A252E;
  color: var(--inner-dark-accent);
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .article-media-card__name {
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .article-media-card__meta,
body.jhewa-inner-page.dark-mode .article-footer-meta__date {
  color: var(--inner-dark-muted);
}

body.jhewa-inner-page.dark-mode .article-media-card__btn {
  background: #A9728E;
  color: #171219 !important;
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div {
  background: var(--inner-dark-elevated);
  border-color: var(--inner-dark-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div:hover {
  border-color: rgba(194, 141, 168, 0.42);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div::before {
  background: rgba(17, 16, 21, 0.78);
  border-color: rgba(255, 255, 255, 0.28);
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:first-child {
  background: linear-gradient(145deg, #2A252E 0%, #211D25 100%);
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(2) {
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .article-card--former-directors .article-content-wrapper article>div>div>div>div>div:nth-child(3) {
  background: var(--inner-dark-accent-soft);
  color: #DAB5C8;
}

body.jhewa-inner-page.dark-mode .sidebar-card-sp h3,
body.jhewa-inner-page.dark-mode .sidebar-card-assistance h3 {
  color: var(--inner-dark-text) !important;
  border-color: rgba(194, 141, 168, 0.45) !important;
}

body.jhewa-inner-page.dark-mode .sidebar-category-badge {
  background: var(--inner-dark-accent-soft);
  border-color: rgba(194, 141, 168, 0.2);
  color: #DAB5C8;
}

body.jhewa-inner-page.dark-mode .sidebar-nav-badge-pill,
body.jhewa-inner-page.dark-mode .sidebar-nav-link,
body.jhewa-inner-page.dark-mode .sidebar-card-assistance p {
  color: var(--inner-dark-muted);
}

body.jhewa-inner-page.dark-mode .sidebar-nav-title {
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .sidebar-nav-divider {
  background: rgba(194, 141, 168, 0.5);
}

body.jhewa-inner-page.dark-mode .sidebar-nav-link:hover {
  background: rgba(255, 255, 255, 0.045);
  border-left-color: rgba(194, 141, 168, 0.55);
  color: var(--inner-dark-text);
}

body.jhewa-inner-page.dark-mode .sidebar-nav-item.is-current .sidebar-nav-link {
  background: var(--inner-dark-accent-soft);
  border-left-color: var(--inner-dark-accent) !important;
  color: var(--inner-dark-text);
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .sidebar-nav-current-pill {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--inner-dark-border);
  color: #D8D0D7;
}

body.jhewa-inner-page.dark-mode .sidebar-nav-current-dot {
  background: var(--inner-dark-accent);
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .sidebar-card-assistance {
  background: var(--inner-dark-surface) !important;
  border-color: var(--inner-dark-border) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
}

body.jhewa-inner-page.dark-mode .sidebar-card-assistance__glow {
  display: none;
}

body.jhewa-inner-page.dark-mode .sidebar-assistance-btn {
  background: #A9728E;
  color: #171219 !important;
  box-shadow: none;
}

body.jhewa-inner-page.dark-mode .sidebar-assistance-btn:hover,
body.jhewa-inner-page.dark-mode .article-media-card__btn:hover {
  background: #BC88A2;
  box-shadow: none;
}

/* ==========================================================================
   CONTACT HUB (MAKLUMAT PERHUBUNGAN)
   ========================================================================== */
.contact-hub-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Hero Banner */
.contact-hero-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(45, 11, 61, 0.04) 0%, rgba(242, 0, 124, 0.07) 100%);
  border: 1px solid rgba(242, 0, 124, 0.16);
  border-radius: 16px;
  padding: 24px 28px;
}

.contact-hero-banner__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(45, 11, 61, 0.05) 1px, transparent 0);
  background-size: 16px 16px;
  pointer-events: none;
}

.contact-hero-banner__content {
  position: relative;
  z-index: 1;
}

.contact-hero-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFF0F6;
  border: 1px solid rgba(194, 0, 99, 0.2);
  color: #C20063;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.contact-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00B865;
  box-shadow: 0 0 0 2px rgba(0, 184, 101, 0.25);
  animation: contactPulse 2s infinite ease-in-out;
}

@keyframes contactPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.contact-hero-banner__title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
  color: #2D0B3D;
  margin: 0 0 8px;
  line-height: 1.25;
}

.contact-hero-banner__desc {
  font-size: 0.88rem;
  color: #6A5B72;
  margin: 0 0 14px;
  max-width: 780px;
  line-height: 1.5;
}

.contact-hero-banner__hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #2D0B3D;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(45, 11, 61, 0.08);
}

/* 3-Cards Grid */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.09);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 3px 12px rgba(45, 11, 61, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 0, 124, 0.3);
  box-shadow: 0 8px 24px rgba(45, 11, 61, 0.07);
}

.contact-info-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(45, 11, 61, 0.1);
}

.contact-icon-bubble {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF0F6;
  color: #C20063;
  border: 1px solid rgba(194, 0, 99, 0.15);
}

.contact-info-card__title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #2D0B3D;
  margin: 0 0 2px;
  line-height: 1.25;
}

.contact-info-card__tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: #7B6885;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-info-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Address Styling */
.contact-address-text {
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #554460;
}

.contact-address-text strong {
  color: #2D0B3D;
  font-size: 0.90rem;
}

.contact-action-links {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.contact-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.contact-action-btn--primary {
  background: linear-gradient(135deg, #2D0B3D 0%, #4D1566 100%);
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(45, 11, 61, 0.15);
}

.contact-action-btn--primary:hover {
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  transform: translateY(-1px);
}

.contact-action-btn--secondary {
  background: #EBF8FF;
  color: #0070B8 !important;
  border: 1px solid rgba(0, 112, 184, 0.2);
}

.contact-action-btn--secondary:hover {
  background: #0070B8;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Phone & Lines Styling */
.contact-lines-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-lines-label {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #8D7D96;
  letter-spacing: 0.04em;
}

.contact-phone-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contact-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8F5F9;
  border: 1px solid rgba(45, 11, 61, 0.1);
  color: #2D0B3D;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.contact-phone-pill:hover {
  background: #FFF0F6;
  color: #C20063;
  border-color: rgba(194, 0, 99, 0.3);
  transform: translateY(-1px);
}

.contact-fax-text {
  font-size: 0.80rem;
  font-weight: 600;
  color: #554460;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.contact-fax-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(45, 11, 61, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Email & Schedule Styling */
.contact-email-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFF0F6;
  border: 1px solid rgba(194, 0, 99, 0.2);
  color: #C20063;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  width: fit-content;
}

.contact-email-link:hover {
  background: #C20063;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.contact-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
}

.contact-schedule-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px dotted rgba(45, 11, 61, 0.08);
}

.contact-schedule-day {
  font-weight: 700;
  color: #2D0B3D;
  flex-shrink: 0;
}

.contact-schedule-time {
  color: #6A5B72;
  text-align: right;
}

.contact-schedule-closed .contact-schedule-time {
  color: #C20063;
  font-weight: 700;
}

/* Map Section */
.contact-map-section {
  width: 100%;
}

.contact-map-card {
  background: #FFFFFF;
  border: 1px solid rgba(45, 11, 61, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(45, 11, 61, 0.04);
}

.contact-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #2D0B3D 0%, #3D1052 100%);
  color: #FFFFFF;
}

.contact-map-header__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-map-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFB300;
}

.contact-map-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
}

.contact-map-subtitle {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.contact-map-ext-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFB300;
  color: #2D0B3D !important;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.contact-map-ext-btn:hover {
  background: #FFC233;
  transform: translateY(-1px);
}

.contact-map-frame-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  max-height: 480px;
  background: #EEEAEF;
}

.contact-map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: #FAF8FB;
  border-top: 1px solid rgba(45, 11, 61, 0.08);
  font-size: 0.78rem;
}

.contact-map-landmark {
  color: #554460;
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-map-landmark strong {
  color: #2D0B3D;
}

.contact-directions-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #C20063;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.contact-directions-link:hover {
  text-decoration: underline;
}

/* Assistance Callout Banner */
.contact-assistance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #FFF0F6 0%, #FFF8FA 100%);
  border: 1px solid rgba(194, 0, 99, 0.2);
  border-radius: 16px;
  padding: 22px 26px;
}

.contact-assistance-banner__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-assistance-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(194, 0, 99, 0.25);
}

.contact-assistance-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #2D0B3D;
  margin: 0 0 4px;
}

.contact-assistance-desc {
  font-size: 0.82rem;
  color: #6A5B72;
  margin: 0;
  line-height: 1.45;
}

.contact-assistance-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.contact-assistance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2D0B3D 0%, #4D1566 100%);
  color: #FFFFFF !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(45, 11, 61, 0.15);
  transition: all 0.2s ease;
}

.contact-assistance-btn:hover {
  background: linear-gradient(135deg, #F2007C 0%, #C20063 100%);
  transform: translateY(-1px);
}

.contact-assistance-btn--outline {
  background: transparent;
  color: #C20063 !important;
  border: 1px solid rgba(194, 0, 99, 0.35);
  box-shadow: none;
}

.contact-assistance-btn--outline:hover {
  background: #FFF0F6;
  border-color: #C20063;
}

/* Social Bar */
.contact-social-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #FAF8FB;
  border: 1px solid rgba(45, 11, 61, 0.08);
  border-radius: 12px;
}

.contact-social-bar__title {
  font-size: 0.80rem;
  font-weight: 700;
  color: #2D0B3D;
}

.contact-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}

.contact-social-pill--fb {
  background: #1877F2;
}

.contact-social-pill--fb:hover {
  background: #0d6efd;
  transform: translateY(-1px);
}

.contact-social-pill--tiktok {
  background: #000000;
}

.contact-social-pill--tiktok:hover {
  background: #222222;
  transform: translateY(-1px);
}

.contact-social-pill--yt {
  background: #FF0000;
}

.contact-social-pill--yt:hover {
  background: #cc0000;
  transform: translateY(-1px);
}

/* ==========================================================================
   CONTACT HUB - DARK MODE SPECIFICS
   ========================================================================== */
body.dark-mode .contact-hero-banner,
body.jhewa-inner-page.dark-mode .contact-hero-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(242, 0, 124, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .contact-hero-banner__title,
body.jhewa-inner-page.dark-mode .contact-hero-banner__title {
  color: #FFFFFF;
}

body.dark-mode .contact-hero-banner__desc,
body.jhewa-inner-page.dark-mode .contact-hero-banner__desc {
  color: #B9B1BA;
}

body.dark-mode .contact-hero-banner__hours,
body.jhewa-inner-page.dark-mode .contact-hero-banner__hours {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

body.dark-mode .contact-info-card,
body.jhewa-inner-page.dark-mode .contact-info-card {
  background: #1C1822;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body.dark-mode .contact-info-card:hover,
body.jhewa-inner-page.dark-mode .contact-info-card:hover {
  border-color: #FFB300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .contact-info-card__title,
body.jhewa-inner-page.dark-mode .contact-info-card__title {
  color: #FFFFFF;
}

body.dark-mode .contact-address-text,
body.jhewa-inner-page.dark-mode .contact-address-text {
  color: #D2CBD4;
}

body.dark-mode .contact-address-text strong,
body.jhewa-inner-page.dark-mode .contact-address-text strong {
  color: #FFFFFF;
}

body.dark-mode .contact-phone-pill,
body.jhewa-inner-page.dark-mode .contact-phone-pill {
  background: #241D2C;
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

body.dark-mode .contact-phone-pill:hover,
body.jhewa-inner-page.dark-mode .contact-phone-pill:hover {
  background: rgba(242, 0, 124, 0.25);
  color: #FF80AB;
}

body.dark-mode .contact-schedule-day,
body.jhewa-inner-page.dark-mode .contact-schedule-day {
  color: #FFFFFF;
}

body.dark-mode .contact-schedule-time,
body.jhewa-inner-page.dark-mode .contact-schedule-time {
  color: #B9B1BA;
}

body.dark-mode .contact-map-card,
body.jhewa-inner-page.dark-mode .contact-map-card {
  background: #1C1822;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .contact-map-footer,
body.jhewa-inner-page.dark-mode .contact-map-footer {
  background: #17131D;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .contact-map-landmark strong,
body.jhewa-inner-page.dark-mode .contact-map-landmark strong {
  color: #FFFFFF;
}

body.dark-mode .contact-assistance-banner,
body.jhewa-inner-page.dark-mode .contact-assistance-banner {
  background: #1C1822;
  border-color: rgba(242, 0, 124, 0.3);
}

body.dark-mode .contact-assistance-title,
body.jhewa-inner-page.dark-mode .contact-assistance-title {
  color: #FFFFFF;
}

body.dark-mode .contact-assistance-desc,
body.jhewa-inner-page.dark-mode .contact-assistance-desc {
  color: #B9B1BA;
}

body.dark-mode .contact-social-bar,
body.jhewa-inner-page.dark-mode .contact-social-bar {
  background: #1C1822;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .contact-social-bar__title,
body.jhewa-inner-page.dark-mode .contact-social-bar__title {
  color: #FFFFFF;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-assistance-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .contact-assistance-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .contact-social-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 680px) {
  .contact-hero-banner {
    padding: 18px 18px;
  }

  .contact-map-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-map-ext-btn {
    align-self: flex-start;
  }

  .contact-map-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Public mobile navigation and reading layouts. */
.mobile-section-toggle { display: none; }
.mobile-image-hint { display: none; }
.mobile-section-panel { min-width: 0; }
.mobile-nav-drawer:not([open]), #siteSearchOverlay:not([open]), .qr-code-dialog:not([open]), .kad-modal:not([open]), .visitor-stat-modal-wrap:not([open]) { display: none; }
dialog.kad-modal, dialog.visitor-stat-modal-wrap { margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; }
dialog.kad-modal { background: transparent; }
dialog.kad-modal::backdrop, dialog.visitor-stat-modal-wrap::backdrop, .qr-code-dialog::backdrop { background: transparent; }
.activity-preview__viewer > button[hidden] { display: none; }
.activity-preview__toolbar [data-image-original] { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; }
dialog.mobile-nav-drawer {
  inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(92vw, 400px); height: 100dvh; max-height: none; max-width: none;
  transform: none; overflow: hidden; color: #fff;
}
.mobile-nav-drawer::backdrop, #siteSearchOverlay::backdrop { background: #100d19a6; backdrop-filter: blur(4px); }
@keyframes mobile-menu-enter {
  from { transform: translateX(100%); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes mobile-menu-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-motion]) .mobile-nav-drawer[open] { animation: mobile-menu-enter .3s cubic-bezier(.16, 1, .3, 1) both; }
  html:not([data-a11y-motion]) .mobile-nav-drawer[open]::backdrop { animation: mobile-menu-backdrop-enter .25s ease-out both; }
}
#siteSearchOverlay::backdrop { background: transparent; backdrop-filter: none; }
.mobile-drawer-header { flex: none; padding-top: max(16px, env(safe-area-inset-top)); }
.mobile-drawer-close { width: 44px; height: 44px; flex: none; }
.mobile-drawer-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.mobile-drawer-list li a { min-height: 48px; overflow-wrap: anywhere; }
.mobile-drawer-utilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid #ffffff24; padding-top: 20px; }
.mobile-drawer-utilities :is(a, button) { display: grid; place-items: center; padding: 12px; min-height: 48px; border: 1px solid #ffffff38; border-radius: 10px; color: #fff; font-size: .85rem; }
#siteSearchOverlay { inset: 0 0 auto; max-width: none; max-height: 100dvh; margin: 0; overflow-y: auto; border: 0; color: #fff; }
#siteSearchOverlay[open] { display: block; }
#siteSearchOverlay .search-overlay-close { display: grid; place-items: center; width: 44px; height: 44px; }
.qr-code-dialog { margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; }
body:has(#mobileMenu[open], #siteSearchOverlay[open], #qrCodeDialog[open], #modalStatistic[open]) { overflow: hidden; }
@media (max-width: 1199px) {
  #siteSearchOverlay::backdrop { background: #100d19a6; backdrop-filter: blur(4px); }
  .desktop-only-nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  #header .header-inner { gap: 12px; }
  .header-extras { flex: none; }
}
@media (max-width: 991px) {
  .inner-content-layout, .inner-content-layout:has(.downloads-table-container, .contact-hub-container) {
    grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 20px 72px;
  }
  .content-sidebar-sp { order: 0; min-width: 0; }
  .article-body-sp { order: 1; min-width: 0; }
  .mobile-section-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #ded7e1; border-radius: 12px; background: #fff; color: #352c3d; font: inherit; font-size: .9rem; font-weight: 600; text-align: left; }
  .mobile-section-toggle > span:last-child { font-size: 1.3rem; }
  .mobile-section-toggle[aria-expanded="true"] > span:last-child { transform: rotate(180deg); }
  .mobile-section-toggle[aria-expanded="false"] + .mobile-section-panel { display: none; }
  .mobile-section-panel { padding-top: 16px; }
  .mobile-section-panel .sidebar-card-sp:last-child { margin-bottom: 0; }
  body.dark-mode .mobile-section-toggle { background: #211e25; color: #fff; border-color: #45404b; }
  .article-content-wrapper { overflow-wrap: anywhere; }
  .article-content-wrapper :is(img, video, iframe) { max-width: 100%; }
  .article-content-wrapper img[role="button"] { cursor: zoom-in; }
  .mobile-image-hint { display: block; font-size: .75rem; line-height: 1.5; margin-top: 8px; color: var(--sp-text-muted); }
  body.dark-mode .mobile-image-hint { color: #d6ced9; }
  .article-content-wrapper table { display: block; overflow-x: auto; max-width: 100%; }
  .article-media-card { flex-wrap: wrap; gap: 16px; }
  .article-media-card__info { min-width: 0; }
  .article-media-card__name { overflow-wrap: anywhere; }
  .qr-code-dialog__close { position: sticky; top: 0; right: 0; margin-left: auto; z-index: 2; }
  .visitor-stat-close { position: sticky; top: 12px; right: 12px; margin: 12px 12px -56px auto; z-index: 2; }
}
@media (max-width: 680px) {
  #header .header-inner { height: 76px; padding-inline: 16px; gap: 8px; }
  #logo { min-width: 0; }
  #logo a { gap: 9px; }
  .brand-logos { gap: 6px; flex: none; }
  .brand-crest-img, .brand-logo-img { height: 36px; }
  .brand-divider { height: 28px; }
  .brand-title-main { font-size: .88rem; line-height: 1.25; max-width: 13ch; }
  .brand-title-sub { font-size: .5rem; letter-spacing: .1em; margin-top: 3px; }
  .header-extras { gap: 4px; }
  .header-extras :is(.lang-switch-btn, .nav-search-trigger, .mobile-nav-toggle) { min-height: 44px; }
  .nav-search-trigger, .mobile-nav-toggle { width: 44px; flex: none; }
  .lang-switch-btn { padding-inline: 8px; font-size: .75rem; }
  .lang-switch-btn > span { display: none; }
  .page-banner-sp { padding: 108px 0 32px; }
  .page-banner-sp__title { font-size: clamp(1.75rem, 7.5vw, 2.4rem); line-height: 1.2; overflow-wrap: anywhere; }
  .page-banner-sp__breadcrumbs { flex-wrap: wrap; border-radius: 14px; gap: 5px 8px; font-size: .72rem; max-width: 100%; }
  .page-banner-sp__crumb-current { min-width: 0; overflow-wrap: anywhere; }
  .page-banner-sp__eyebrow { font-size: .65rem; letter-spacing: .06em; }
  .inner-content-layout, .inner-content-layout:has(.downloads-table-container, .contact-hub-container) { padding-inline: 16px; }
  .article-card-elevated, .inner-content-layout:has(.kad-digital-container, .formal-table-container, .video-gallery-container, .contact-hub-container) .article-card-elevated, .article-card-elevated:has(.activity-post) { padding: 22px 16px; border-radius: 16px; }
  .article-content-wrapper { font-size: 1rem; line-height: 1.8; }
  body.jhewa-inner-page :is(input, textarea, select) { font-size: 16px; }
  .sidebar-assistance-btn { padding-inline: 14px; font-size: .85rem; }
  .sidebar-nav-current-pill { flex: none; }
  .sidebar-nav-link { gap: 8px; padding-inline: 10px; }
  .formal-doc-header { padding: 16px; gap: 16px; }
  .formal-doc-header__info { align-items: flex-start; min-width: 0; gap: 10px; }
  .formal-doc-header__title { font-size: .95rem; line-height: 1.5; }
  .formal-doc-header__subtitle { font-size: .78rem; line-height: 1.6; }
  .formal-table-search, .formal-table-search__input { width: 100%; min-width: 0; }
  .formal-table-search__input { font-size: 16px; min-height: 48px; }
  .formal-table-wrap { container-type: normal; overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .formal-doc-table, .formal-doc-table tbody { display: block; width: 100%; }
  .formal-doc-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .formal-doc-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 16px; margin-bottom: 16px; border: 1px solid #ded7e1; border-radius: 14px; }
  .formal-doc-table tbody td { display: block; padding: 0; border: 0; width: auto; min-width: 0; max-width: none; text-align: left; white-space: normal; }
  .formal-doc-table .td-no { width: auto; min-width: 0; max-width: none; padding: 0; text-align: left; }
  .formal-doc-table :is(.td-files, .td-title, .td-source, .formal-table-empty) { grid-column: 1 / -1; }
  .formal-doc-table .td-date { justify-self: end; }
  .formal-doc-table :is(.td-title, .td-date, .td-source) { min-width: 0; max-width: none; width: auto; white-space: normal; }
  .downloads-doc-table .td-desc { padding: 0; width: auto; }
  .downloads-cat-title { font-size: .95rem; line-height: 1.55; }
  .downloads-files-list { gap: 10px; }
  .downloads-file-item { display: flex; flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
  .downloads-file-main { align-items: flex-start; }
  .downloads-file-name { font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
  .downloads-file-actions { justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0; gap: 8px; }
  .downloads-file-btn { justify-content: center; min-height: 44px; padding: 10px 12px; font-size: .78rem; white-space: normal; }
  .formal-table-title-link { font-size: .95rem; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; align-items: flex-start; }
  .formal-table-title-link > span { min-width: 0; }
  .formal-source-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  body.dark-mode .formal-doc-table tbody tr { border-color: #45404b; }
  .kad-pagination { flex-wrap: wrap; justify-content: center; border-radius: 18px; padding: 8px; gap: 4px; max-width: 100%; }
  .kad-page-btn { min-width: 44px; height: 44px; }
  .activity-slider__controls :is(button, a), .activity-slider__thumbnails button { min-width: 44px; min-height: 44px; }
  .activity-slider__preview-label { right: 8px; bottom: 8px; font-size: .7rem; }
  dialog.activity-preview { width: calc(100% - 16px); max-width: none; padding: 10px; }
  .activity-preview__viewer > button { width: 44px; height: 44px; }
  #siteSearchOverlay { padding: max(20px, env(safe-area-inset-top)) 0 24px; }
  .search-overlay-inner { padding-top: 56px; }
  #siteSearchOverlay .search-overlay-close { top: 0; right: 16px; }
  .search-overlay-input { width: 100%; min-width: 0; font-size: 16px; }
  .search-overlay-submit { width: 48px; height: 48px; flex: none; }
  .search-overlay-tags { flex-wrap: wrap; gap: 10px; }
  .search-tag-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .search-banner-form { padding: 6px 6px 6px 14px; }
  .search-banner-form__btn { min-height: 44px; padding: 10px 14px; }
  .search-results-header { flex-wrap: wrap; gap: 10px; }
  .search-item-card { padding: 20px 16px; }
  .search-item-card__actions { flex-wrap: wrap; }
  .qr-code-dialog { padding: 16px; overflow-y: auto; }
  .qr-code-dialog__panel { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 16px 20px 24px; }
  .qr-code-dialog__grid { grid-template-columns: 1fr; }
  .contact-card-value, .contact-hero-banner { overflow-wrap: anywhere; }
  .contact-assistance-actions :is(a, button) { white-space: normal; min-height: 48px; }
  .visitor-stat-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .visitor-stat-image { display: none; }
  .visitor-stat-close, .kad-modal__close { width: 44px; height: 44px; }
  .kad-modal__content { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .kad-modal__image-wrap, .kad-modal__image { max-height: 42dvh; }
  .kad-modal__details { padding: 16px; gap: 12px; }
  .kad-modal__info { min-width: 0; width: 100%; flex-basis: 100%; }
  .kad-modal__title { font-size: 1rem; overflow-wrap: anywhere; }
  .kad-modal__download-btn { min-height: 44px; }
  .home-footer__grid { grid-template-columns: 1fr; }
  .home-footer .home-footer__grid a { min-height: 44px; font-size: .9rem; }
  .home-footer__bottom { padding-bottom: 36px; }
  .tumbler-wrapper, .homepage-chapters .tumbler-wrapper { width: 44px; height: 44px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  #scrollTop, .homepage-chapters #scrollTop { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  #logo .brand-text-block { display: none; }
  .mobile-drawer-header, .mobile-drawer-body { padding-inline: 16px; }
}
@media (max-height: 500px) {
  .visitor-stat-modal, .kad-modal__content { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .visitor-stat-image { display: none; }
  .visitor-stat-content { padding: 24px; }
  .qr-code-dialog__panel { max-height: calc(100dvh - 32px); overflow-y: auto; }
}