/* ==========================================================================
   OLM Design System — theme tokens and modern UI layer
   Loaded AFTER template.css and custom.css so it can normalise the legacy
   styling without editing thousands of legacy declarations.

   Palette (supplied by the department):
     Primary    #910742
     Secondary  #881E23
     Background (creamish)  #FFF9F0
     Background (light grey / light pink / light purple) — derived below
   Gradients are intentionally replaced by flat brand fills.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --olm-primary: #910742;
  --olm-primary-dark: #6d0531;
  --olm-primary-light: #b02a5f;
  --olm-primary-soft: #f7e9ef;
  --olm-secondary: #881e23;
  --olm-secondary-dark: #66161a;
  --olm-secondary-light: #a8383d;
  --olm-secondary-soft: #f9ecec;

  /* ---- Surfaces ---- */
  --olm-cream: #fff9f0;
  --olm-cream-deep: #fdf2e3;
  --olm-cream-soft: #fffdf8;                                  /* button fill on cream */
  --olm-grey: #f4f5f7;
  --olm-grey-deep: #eceef1;
  --olm-pink: #fbeff3;
  /* Section surfaces are limited to cream, light grey and light pink. The old
     light purple has been retired; the token is kept pointing at light grey so
     any stray reference cannot reintroduce it. */
  --olm-purple: #f4f5f7;
  --olm-white: #ffffff;

  /* ---- Text ---- */
  --olm-ink: #1f2328;
  --olm-body: #3d434b;
  --olm-muted: #6b7280;
  --olm-on-brand: #ffffff;

  /* ---- Lines ---- */
  --olm-line: #e8e2d9;
  --olm-line-strong: #d8d0c4;
  --olm-focus: #b02a5f;

  /* ---- Radius ---- */
  --olm-r-xs: 6px;
  --olm-r-sm: 10px;
  --olm-r-md: 14px;
  --olm-r-lg: 18px;
  --olm-r-xl: 24px;
  --olm-r-pill: 999px;

  /* ---- Elevation ---- */
  --olm-shadow-xs: 0 1px 2px rgba(31, 35, 40, .06);
  --olm-shadow-sm: 0 2px 8px rgba(31, 35, 40, .06);
  --olm-shadow-md: 0 6px 20px rgba(31, 35, 40, .08);
  --olm-shadow-lg: 0 14px 38px rgba(31, 35, 40, .12);
  --olm-shadow-brand: 0 10px 28px rgba(145, 7, 66, .18);

  /* ---- Motion (deliberately restrained) ---- */
  --olm-t-fast: 140ms;
  --olm-t-base: 240ms;
  --olm-t-slow: 420ms;
  --olm-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Type scale ----
     Six steps, replacing the sixteen ad-hoc size/weight pairs the page had
     accumulated. Sizes are fluid so they hold up from phone to wide desktop. */
  --olm-fs-display: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);   /* section headings */
  --olm-fs-heading: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);  /* panel headings   */
  --olm-fs-title: 1rem;                                       /* card titles      */
  --olm-fs-body: 0.9375rem;                                   /* paragraphs       */
  --olm-fs-small: 0.8125rem;                                  /* meta, captions   */
  --olm-fs-micro: 0.6875rem;                                  /* badges, eyebrows */

  --olm-lh-tight: 1.25;
  --olm-lh-snug: 1.4;
  --olm-lh-body: 1.6;

  /* ---- Spacing rhythm ---- */
  --olm-space-1: 4px;
  --olm-space-2: 8px;
  --olm-space-3: 12px;
  --olm-space-4: 16px;
  --olm-space-5: 24px;
  --olm-space-6: 32px;
  --olm-space-7: 48px;
  --olm-space-8: 64px;

  /* Legacy variable names still referenced by template.css */
  --primary-color: #910742;
  --secondary-color: #881e23;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html,
body {
  /* Full-bleed sections and marquees used to push a horizontal scrollbar. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--olm-cream);
  color: var(--olm-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--olm-ink);
  letter-spacing: -0.01em;
}

a {
  transition: color var(--olm-t-fast) var(--olm-ease);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 2px;
  border-radius: var(--olm-r-xs);
}

::selection {
  background: var(--olm-primary);
  color: #fff;
}

/* Section rhythm: alternate cream / white / tinted so pages read as a system */
section {
  position: relative;
}

/* Alternating surfaces so each block reads as its own band. Every one of these
   used to be transparent, which merged the whole page into a single slab.

   Three tints only, cycling pink -> cream -> grey down the page, so no two
   neighbouring bands share a surface and the rhythm is predictable. */
.eduexplore.aboutus_section,
.aboutus_section        { background-color: var(--olm-pink) !important; }   /* 1 */
.activity_section       { background-color: var(--olm-cream) !important; }  /* 2 */
.project_section        { background-color: var(--olm-grey) !important; }   /* 3 */
.news_highlight_section { background-color: var(--olm-pink) !important; }   /* 4 */
.social_section         { background-color: var(--olm-cream) !important; }  /* 5 */
.social_tab             { background-color: var(--olm-grey) !important; }   /* 6 */
.gallery_section        { background-color: var(--olm-pink) !important; }   /* 7 */
.our_brand_logo         { background-color: var(--olm-grey) !important; }   /* 9 */

/* Hairline between adjacent bands, and a consistent vertical rhythm. */
.aboutus_section,
.activity_section,
.project_section,
.news_highlight_section,
.social_section,
.social_tab,
.gallery_section,
.external_link_section {
  border-top: 1px solid var(--olm-line);
  /* Tightened from 40-72px: the bands were carrying more empty space above and
     below their content than the content itself needed. */
  padding-top: clamp(30px, 3.4vw, 52px) !important;
  padding-bottom: clamp(30px, 3.4vw, 52px) !important;
}

/* Section heading block: consistent spacing above the content it introduces. */
.activity_section > .container > .text-center,
.project_section > .container > .text-center,
.social_section > .container > .text-center,
.gallery_section .study-heading,
.news_highlight_section .study-heading {
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.olm-surface-cream { background-color: var(--olm-cream); }
.olm-surface-white { background-color: var(--olm-white); }
.olm-surface-grey  { background-color: var(--olm-grey); }
.olm-surface-pink  { background-color: var(--olm-pink); }
.olm-surface-purple{ background-color: var(--olm-purple); }

/* ==========================================================================
   2. Kill legacy gradients — flat brand fills instead
   ========================================================================== */

.gradient-head,
.btn-gradient-primary,
.allHeading,
.quick_links,
.dashboard_head-first,
.latestEventNews h3,
.header-top,
.top_header,
.nav_menu_section,
.footer_section,
.terms {
  background-image: none !important;
}

/* ==========================================================================
   3. Typography — section headings
   ========================================================================== */

.allHeading,
.main-heading {
  position: relative;
  display: inline-block;
  padding-bottom: var(--olm-space-3);
  margin-bottom: var(--olm-space-2);
  color: var(--olm-primary);
  font-weight: 700;
  letter-spacing: -0.015em;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

/* The bar starts at the left edge of the heading text, because almost every
   heading on the site is left-aligned; a centred bar under left-aligned type
   reads as a stray line. Centred headings put it back under the middle in the
   rule below. */
.allHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  transform: none;
  width: 64px;
  height: 3px;
  border-radius: var(--olm-r-pill);
  background: var(--olm-primary);
  transition: width var(--olm-t-base) var(--olm-ease);
}

.text-center .allHeading::after,
.allHeading.text-center::after,
.study-heading .allHeading::after {
  left: 50%;
  transform: translateX(-50%);
}

section:hover > .container > .text-center > .allHeading::after,
section:hover .study-heading .allHeading::after {
  width: 92px;
}

/* Panel headings that sit on a brand bar (Latest News, Video Gallery) */
.latestEventNews h3 {
  background-color: var(--olm-primary) !important;
  color: var(--olm-on-brand) !important;
  border-radius: var(--olm-r-md) var(--olm-r-md) 0 0 !important;
  padding: var(--olm-space-3) var(--olm-space-4);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.latestEventNews h3::after { display: none; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn,
.view_more,
.common_button,
.readMore {
  border-radius: var(--olm-r-pill);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color var(--olm-t-base) var(--olm-ease),
              color var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease),
              transform var(--olm-t-base) var(--olm-ease);
}

.btn-primary,
.aboutContent .btn,
.dashboard_btn .btn-primary {
  background-color: var(--olm-primary) !important;
  border-color: var(--olm-primary) !important;
  color: var(--olm-on-brand) !important;
  box-shadow: var(--olm-shadow-xs);
}

.btn-primary:hover,
.aboutContent .btn:hover,
.dashboard_btn .btn-primary:hover {
  background-color: var(--olm-primary-dark) !important;
  border-color: var(--olm-primary-dark) !important;
  box-shadow: var(--olm-shadow-brand);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--olm-secondary) !important;
  border-color: var(--olm-secondary) !important;
  color: var(--olm-on-brand) !important;
}

.btn-secondary:hover {
  background-color: var(--olm-secondary-dark) !important;
  border-color: var(--olm-secondary-dark) !important;
}

.btn-outline-primary {
  color: var(--olm-primary) !important;
  border-color: var(--olm-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--olm-primary) !important;
  color: var(--olm-on-brand) !important;
}

.view_more {
  display: inline-flex;
  align-items: center;
  gap: var(--olm-space-2);
  padding: 10px 22px;
  background-color: var(--olm-primary);
  color: var(--olm-on-brand) !important;
  text-decoration: none;
  font-size: .92rem;
}

.view_more::after {
  content: "\f105"; /* FontAwesome angle-right */
  font-family: FontAwesome;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.view_more:hover {
  background-color: var(--olm-primary-dark);
  box-shadow: var(--olm-shadow-brand);
}

.view_more:hover::after { transform: translateX(3px); }

/* ==========================================================================
   5. Cards — one shared card language across every page
   ========================================================================== */

.card,
.projects,
.socialWall,
.Socialwall_img,
.highlight-card,
.activity-card,
.olm-card {
  background-color: var(--olm-white);
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
  box-shadow: var(--olm-shadow-sm);
  overflow: hidden;
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease),
              border-color var(--olm-t-base) var(--olm-ease);
}

.card:hover,
.projects:hover,
.socialWall:hover,
.Socialwall_img:hover,
.highlight-card:hover,
.olm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--olm-shadow-md);
  border-color: var(--olm-primary-soft);
}

.card-img-top,
.projects img,
.socialWall img,
.highlight-image img {
  border-radius: 0;
  transition: transform var(--olm-t-slow) var(--olm-ease);
}

.card:hover .card-img-top,
.projects:hover img,
.socialWall:hover img,
.highlight-card:hover .highlight-image img {
  transform: scale(1.035);
}

.card-body { padding: var(--olm-space-4); }

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--olm-ink);
  margin-bottom: var(--olm-space-2);
}

/* Media frame: consistent aspect + no layout shift */
.olm-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--olm-grey);
}

.olm-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.olm-media-16x9 { aspect-ratio: 16 / 9; }
.olm-media-4x3  { aspect-ratio: 4 / 3; }
.olm-media-1x1  { aspect-ratio: 1 / 1; }

/* Scheme cards */
.projects {
  height: 100%;
  text-align: center;
}

.projects a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.projects h5 {
  padding: var(--olm-space-4);
  margin: 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--olm-ink);
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--olm-t-base) var(--olm-ease);
}

.projects:hover h5 { color: var(--olm-primary); }

/* ==========================================================================
   6. Header
   ========================================================================== */

.header-top,
.top_header {
  background-color: var(--olm-secondary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.top_header a,
.header-top a { color: #fff !important; }

.top_header a:hover,
.header-top a:hover { color: #ffd9e4 !important; }

.top_header .partition,
.header-top .partition { color: rgba(255, 255, 255, .35) !important; }

/* The utility links wrapped onto three lines between roughly 900 and 1100px.
   They stay on one line and drop their labels instead. */
.header-top .row,
.top_header .row { flex-wrap: nowrap; align-items: center; }

.header-top a,
.top_header a { white-space: nowrap; }

@media (min-width: 992px) and (max-width: 1279.98px) {
  .header-top,
  .top_header { font-size: 11px; }

  .top-header-left { gap: 10px !important; }
  .top-header-left img { display: none; }
}

@media (max-width: 991.98px) {
  .top-header-left span:not(.partition) { display: none !important; }
}

@media (max-width: 991.98px) {
  .header-top .partition,
  .top_header .partition { display: none; }

  .header-top,
  .top_header { font-size: 11px; }
}

.top_header .active-lang,
.header-top .active-lang {
  background: rgba(255, 255, 255, .16);
  border-radius: var(--olm-r-pill);
  padding: 2px 10px;
}

.header-area,
.header-white {
  background-color: var(--olm-white) !important;
  border-bottom: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-xs) !important;
}

.name_designation { color: var(--olm-ink); }
.name_designation small { color: var(--olm-muted); }

/* CM portrait — brand ring instead of the stray blue border */
.header-area img[alt="CM Photo"] {
  border: 2px solid var(--olm-primary) !important;
  box-shadow: 0 0 0 4px var(--olm-primary-soft);
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.header-area img[alt="CM Photo"]:hover { transform: none; }

/* ==========================================================================
   7. Primary navigation
   ========================================================================== */

.nav_menu_section {
  background-color: var(--olm-primary) !important;
  box-shadow: var(--olm-shadow-sm);
}

.nav_menu_section .navbar-nav {
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav_menu_section .nav-link {
  position: relative;
  color: #fff !important;
  font-weight: 500;
  font-size: .92rem;
  padding: 13px 15px !important;
  border-radius: var(--olm-r-xs) var(--olm-r-xs) 0 0;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.nav_menu_section .nav-link:hover,
.nav_menu_section .nav-item.show > .nav-link,
.nav_menu_section .nav-link.active {
  background-color: rgba(255, 255, 255, .12);
  color: #fff !important;
}

/* Remove all underlines and pseudo-element indications from nav menu */
.nav_menu_section .nav-link::after,
.nav_menu_section .nav-link:hover::after,
.nav_menu_section .nav-item.show > .nav-link::after,
.nav_menu_section .nav-link.active::after,
.nav_menu_section .dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Downward indicating arrow next to nav menu button text */
.nav_menu_section .nav-dropdown-arrow {
  display: inline-block;
  font-size: 10px;
  margin-left: 5px;
  vertical-align: 1px;
  transition: transform var(--olm-t-fast) var(--olm-ease);
  opacity: .85;
}

.nav_menu_section .navbar-nav > .nav-item.dropdown:hover > .nav-link .nav-dropdown-arrow,
.nav_menu_section .navbar-nav > .nav-item.dropdown.show > .nav-link .nav-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.nav_menu_section .dropdown-menu {
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-md);
  box-shadow: var(--olm-shadow-md);
  padding: var(--olm-space-2);
  margin-top: 4px;
  min-width: 240px;
  background: var(--olm-white);
  animation: olmMenuIn var(--olm-t-base) var(--olm-ease) both;
}

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

.nav_menu_section .dropdown-item {
  border-radius: var(--olm-r-xs);
  padding: 9px 12px;
  font-size: .9rem;
  color: var(--olm-body);
  white-space: normal;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease),
              padding-left var(--olm-t-fast) var(--olm-ease);
}

.nav_menu_section .dropdown-item:hover,
.nav_menu_section .dropdown-item:focus {
  background-color: var(--olm-primary-soft);
  color: var(--olm-primary);
  padding-left: 17px;
}

/* Third level */
.dropdown-submenu { position: relative; }

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  display: none;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu > .dropdown-menu.show { display: block; }

.dropdown-submenu > a.dropdown-item::after {
  display: none !important;
  content: none !important;
}

/* Mobile drawer */
.mobile-drawer {
  background: var(--olm-white);
  border-right: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-lg);
}

.mobile-drawer .nav-link,
.mobile-drawer .dropdown-item {
  color: var(--olm-ink) !important;
  border-radius: var(--olm-r-xs);
}

.mobile-drawer .nav-link:hover,
.mobile-drawer .dropdown-item:hover {
  background: var(--olm-primary-soft);
  color: var(--olm-primary) !important;
}

.mobile-drawer .btn-close {
  background-color: var(--olm-primary);
  border-radius: var(--olm-r-pill);
  opacity: 1;
  padding: 10px;
}

.navbar-toggler {
  color: #fff;
  border-radius: var(--olm-r-xs);
}

.navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   8. Hero banner — continuous wipe transition
   ========================================================================== */

/* The legacy sheet pinned this section to a fixed height (620/300/200px per
   breakpoint, all with !important) while its content was taller, so the banner
   was cropped and the Latest News bar overlapped it. The stage owns the height
   now; the section just wraps it. Selectors match the legacy specificity. */
.banner_section,
.banner_section.banner,
.banner_section.banner.position-relative {
  height: auto !important;
  min-height: 0 !important;
  background: var(--olm-cream);
  overflow: hidden;
  --olm-banner-bar-h: 34px;
}

/* Taller hero. Height follows the viewport width but is clamped so the banner
   never dominates a laptop screen or collapses on a small one. */
.banner_section .olm-banner-stage,
.banner_section.banner .olm-banner-stage {
  height: clamp(460px, 46vw, 720px) !important;
  overflow: hidden;
}

.banner_section .carousel-item { height: 100%; }

.banner_section .carousel-item img,
.banner_section.banner #carouselExampleIndicators .carousel-inner .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767.98px) {
  .banner_section .olm-banner-stage,
  .banner_section.banner .olm-banner-stage {
    height: clamp(260px, 56vw, 420px) !important;
  }
}

/* Slow push in on whichever slide is on screen: the photograph is shown whole
   first, then eases closer. Restarts by itself because Bootstrap re-applies
   .active. */
.banner_section .carousel-item.active img {
  animation: olmBannerZoom 9s var(--olm-ease) forwards;
}

@keyframes olmBannerZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.085); }
}

/* ---- Control strip beneath the banner ---- */

/* The strip sits flush along the bottom of the banner artwork right at the
   boundary with the Latest News section. */
.olm-banner-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--olm-space-3, 12px);
  height: 28px;
  padding: 0 clamp(16px, 3vw, 44px);
  background: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100%);
  border: none;
  pointer-events: none;
}

.olm-banner-bar > * { pointer-events: auto; }

/* Slide indicator dots at the start / left of the line */
.olm-banner-bar__dots.carousel-indicators {
  position: static;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex: none;
  z-index: auto;
}

.olm-banner-bar__dots [data-bs-target],
.banner_section.banner .olm-banner-bar__dots.carousel-indicators [data-bs-target] {
  width: 6px !important;
  height: 6px !important;
  padding: 0 !important;
  margin: 0;
  border-radius: var(--olm-r-pill);
  border: none;
  background-color: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  opacity: 1;
  text-indent: 0;
  transition: width var(--olm-t-base) var(--olm-ease),
              background-color var(--olm-t-base) var(--olm-ease);
}

.olm-banner-bar__dots [data-bs-target]:hover { background-color: #fff; }

.olm-banner-bar__dots .active,
.banner_section.banner .olm-banner-bar__dots.carousel-indicators .active {
  width: 16px !important;
  border-radius: var(--olm-r-pill) !important;
  background-color: var(--olm-bar-mid, #910742);
}

/* The line that grows across while the current banner is showing */
.olm-banner-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--olm-r-pill);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.olm-banner-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: var(--olm-r-pill);
  background: var(--olm-bar-mid, #910742);
}

.olm-banner-bar__fill.is-growing {
  animation: olmBannerGrow var(--olm-banner-interval, 6000ms) linear forwards;
}

/* Pause progress line when banner is user-paused */
.banner_section.is-paused .olm-banner-bar__fill {
  animation-play-state: paused !important;
}

@keyframes olmBannerGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* Pause / play on the extreme right of the line (WCAG 2.2.2) */
.olm-banner-bar__toggle {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--olm-r-pill);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background-color var(--olm-t-fast) var(--olm-ease), transform var(--olm-t-fast) var(--olm-ease);
}

.olm-banner-bar__toggle:hover {
  background: rgba(0, 0, 0, .75);
  transform: scale(1.1);
}

.olm-banner-bar__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.olm-banner-bar__toggle::before {
  content: "";
  display: block;
  width: 6px;
  height: 7px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.olm-banner-bar__toggle.is-paused::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 4px solid transparent;
  border-left: 6px solid #fff;
  border-right: none;
}

@media (max-width: 575.98px) {
  .banner_section { --olm-banner-bar-h: 24px; }
  .olm-banner-bar { gap: var(--olm-space-2, 8px); padding: 0 12px; height: 24px; }
}

/* Slides cross-fade underneath the travelling line. Bootstrap's own
   .carousel-fade rules do the fading; only the timing is retuned here so the
   change lands while the light is still sweeping across. */
.banner_section.carousel-fade .carousel-item,
.banner_section .carousel-fade .carousel-item {
  transition-duration: 620ms;
  transition-timing-function: var(--olm-ease);
}

/* Controls: no dark overlay panels, only a soft circular affordance.
   They stop above the control strip so they never cover the dots. */
.banner_section .carousel-control-prev,
.banner_section .carousel-control-next {
  width: 56px;
  bottom: var(--olm-banner-bar-h);
  opacity: 0;
  transition: opacity var(--olm-t-base) var(--olm-ease);
}

.banner_section:hover .carousel-control-prev,
.banner_section:hover .carousel-control-next,
.banner_section .carousel-control-prev:focus-visible,
.banner_section .carousel-control-next:focus-visible { opacity: 1; }

.banner_section .carousel-control-prev-icon,
.banner_section .carousel-control-next-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--olm-r-pill);
  background-color: rgba(145, 7, 66, .78);
  background-size: 42% 42%;
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   9. Latest-news ticker
   ========================================================================== */

/* The ticker text is white (it has always sat on a dark bar), so the bar stays
   dark. On the pink surface the headlines were invisible. */
.latestNews {
  background-color: var(--olm-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 0;
}

.latestNews,
.latestNews p,
.latestNews a { color: #fff; }

.latestNews .text-bold {
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--olm-r-pill);
  padding: 5px 14px;
}

.latestNews .marquee p {
  font-size: .95rem;
  line-height: 1.5;
}

.latestNews a:hover { color: #ffd9e4; }

.news-badge-new {
  background-color: var(--olm-secondary);
  color: #fff;
  border-radius: var(--olm-r-pill);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.news-date-badge-single {
  background-color: var(--olm-primary-soft);
  color: var(--olm-primary);
  border-radius: var(--olm-r-xs);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
}

.latestEvent {
  border-bottom: 1px solid var(--olm-line);
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.latestEvent:hover { background-color: var(--olm-cream); }

.latestEvent .news-link {
  display: flex;
  align-items: center;
  gap: var(--olm-space-3);
  padding: 10px 14px;
  text-decoration: none;
  color: var(--olm-body);
}

.latestEvent .news-title {
  font-size: .87rem;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latestEvent:hover .news-title { color: var(--olm-primary); }

/* ==========================================================================
   10. Quick Links — chakra artwork deliberately left untouched
   ========================================================================== */

.external_link_section.olm-quick-links-section {
  background-color: var(--olm-cream) !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
  padding: clamp(45px, 4.5vw, 65px) 0 !important;
}

/* Heading styling on light background */
.external_link_section .olm-head__title {
  color: var(--olm-primary, #7a162b) !important;
}

.external_link_section .olm-head__slogan {
  color: var(--olm-ink-soft, #64748b) !important;
}

/* Main Row */
.olm-ql-main-row {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

/* 1st Column: Sidebar with 2 Bars (Equally distributed vertically, semi-rounded on left) */
.olm-ql-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 250px;
  gap: 20px;
}

.olm-ql-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 20px 28px;
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid rgba(145, 7, 66, 0.22) !important;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 
              0 0 20px rgba(145, 7, 66, 0.22), 
              inset 0 0 12px rgba(145, 7, 66, 0.03) !important;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  min-height: 85px;
  position: relative;
}

.olm-ql-bar:hover {
  background: #ffffff !important;
  color: var(--olm-primary, #910742) !important;
  border-color: rgba(145, 7, 66, 0.55) !important;
  transform: translateX(-4px);
  box-shadow: 0 8px 26px rgba(145, 7, 66, 0.28), 
              0 0 30px rgba(145, 7, 66, 0.4) !important;
}

/* Active Bar: Glowing Theme Primary with White Text */
.olm-ql-bar.active-tab {
  background: var(--olm-primary, #910742) !important;
  background: linear-gradient(135deg, var(--olm-primary, #910742) 0%, var(--olm-secondary, #881e23) 100%) !important;
  color: #ffffff !important;
  border-color: #b02a5f !important;
  box-shadow: 0 10px 30px rgba(145, 7, 66, 0.45), 
              0 0 26px rgba(176, 42, 95, 0.5), 
              0 0 48px rgba(145, 7, 66, 0.3) !important;
  transform: translateX(-4px);
}

.olm-ql-bar-text {
  flex: 1;
  line-height: 1.35;
  font-weight: inherit;
}

/* Glowing Arrow Container */
.olm-ql-bar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(145, 7, 66, 0.08);
  color: var(--olm-primary, #910742);
  border: 1.5px solid rgba(145, 7, 66, 0.25);
  box-shadow: 0 0 14px rgba(145, 7, 66, 0.22), 0 0 6px rgba(145, 7, 66, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.olm-ql-bar-arrow svg {
  display: block;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(145, 7, 66, 0.35));
}

.olm-ql-bar:hover .olm-ql-bar-arrow {
  background: var(--olm-primary, #910742);
  color: #ffffff;
  border-color: #b02a5f;
  box-shadow: 0 0 20px rgba(145, 7, 66, 0.7), 0 0 35px rgba(176, 42, 95, 0.45);
  transform: scale(1.06);
}

.olm-ql-bar:hover .olm-ql-bar-arrow svg {
  transform: translateX(3px);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* Active Bar: Glowing White Arrow radiating theme glow */
.olm-ql-bar.active-tab .olm-ql-bar-arrow {
  background: #ffffff;
  color: var(--olm-primary, #910742);
  border-color: #ffffff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 32px rgba(255, 255, 255, 0.6), 0 0 48px rgba(176, 42, 95, 0.5);
  animation: olmArrowPulse 2s ease-in-out infinite;
}

.olm-ql-bar.active-tab .olm-ql-bar-arrow svg {
  filter: drop-shadow(0 0 4px rgba(145, 7, 66, 0.5));
}

@keyframes olmArrowPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 28px rgba(255, 255, 255, 0.55), 0 0 40px rgba(176, 42, 95, 0.4);
    transform: translateX(0) scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 38px rgba(255, 255, 255, 0.8), 0 0 55px rgba(176, 42, 95, 0.65);
    transform: translateX(4px) scale(1.08);
  }
}

/* Active and Inactive Content Sections */
.olm-ql-stage .content-section {
  display: none;
}

.olm-ql-stage .content-section.active {
  display: block;
  animation: olmFadeUp 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* 2nd Column: Clickable Links List on Light Surface */
.olm-ql-links-list {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.olm-ql-link-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  color: #1e293b !important;
  font-size: 1.06rem;
  font-weight: 600;
  transition: all 0.22s ease-in-out;
}

.olm-ql-link-row:last-child {
  border-bottom: none;
}

.olm-ql-link-quote {
  color: var(--olm-primary, #910742);
  margin-right: 12px;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  transition: transform 0.22s ease, color 0.22s ease;
}

.olm-ql-link-text {
  flex: 1;
  transition: color 0.22s ease;
}

.olm-ql-link-row:hover {
  color: var(--olm-primary, #910742) !important;
  transform: translateX(5px);
}

.olm-ql-link-row:hover .olm-ql-link-quote {
  color: var(--olm-primary-light, #b02a5f);
  transform: translateX(2px);
}

.olm-ql-link-row:hover .olm-ql-link-text {
  color: var(--olm-primary, #910742) !important;
}

/* 3rd Column: Related Image Card with Theme Colored Border & Glow */
.olm-ql-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.olm-ql-image-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--olm-primary-soft, #f7e9ef);
  border: 3.5px solid var(--olm-primary, #910742);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 
              0 0 22px rgba(145, 7, 66, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* Hover glow & animation with theme colors */
.olm-ql-image-card:hover {
  transform: translateY(-5px) scale(1.025);
  border-color: var(--olm-primary-light, #b02a5f);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18),
              0 0 32px rgba(145, 7, 66, 0.55),
              0 0 50px rgba(176, 42, 95, 0.3);
}

.olm-ql-image-card .olm-ql-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.olm-ql-image-card:hover .olm-ql-thumb-img {
  transform: scale(1.05);
}

/* Shimmer pass on hover */
.olm-ql-image-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: rotate(25deg) translateY(-120%);
  transition: transform 0.75s ease;
  pointer-events: none;
}

.olm-ql-image-card:hover::after {
  transform: rotate(25deg) translateY(120%);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .olm-ql-sidebar {
    min-height: auto;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 24px;
  }
  .olm-ql-bar {
    border-radius: 40px 0 0 40px !important;
    font-size: 1rem;
    padding: 14px 18px;
    min-height: 65px;
  }
  .olm-ql-image-card {
    max-width: 100%;
    margin-top: 16px;
  }
}

@media (max-width: 767.98px) {
  .olm-ql-sidebar {
    flex-direction: column;
  }
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.footer_section {
  background-color: var(--olm-pink, #fbeff3) !important;
  color: var(--olm-body);
  padding-top: var(--olm-space-7);
  padding-bottom: var(--olm-space-5);
}

.footer_section h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: var(--olm-space-4);
}

.footer_section h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  border-radius: var(--olm-r-pill);
  background: rgba(255, 255, 255, .55);
}

.footer_section ul { list-style: none; padding: 0; }

.footer_section a,
.footer_section li { color: rgba(255, 255, 255, .86); text-decoration: none; }

.footer_section a:hover { color: #fff; }

.footer_section .footer-logo ul li i,
.footer_section .fa { color: rgba(255, 255, 255, .75); margin-right: 8px; }

.footer_section .footer_social-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .9rem;
  transition: transform var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.footer_section .footer_social-list a:hover { transform: translateX(3px); }

.footer_social-icon {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 10px;
}

.footer_social-icon a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(145, 7, 66, 0.2) !important;
  color: var(--olm-primary, #910742) !important;
  font-size: 1.25rem !important;
  box-shadow: 0 4px 12px rgba(145, 7, 66, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  text-decoration: none !important;
}

.footer_social-icon a.is-linkedin:hover {
  background: #0a66c2 !important;
  border-color: #0a66c2 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.45) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.footer_social-icon a.is-facebook:hover {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.45) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.footer_social-icon a.is-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
  border-color: #d6249f !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(214, 36, 159, 0.45) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.footer_social-icon a i,
.footer_social-icon a .fa {
  color: var(--olm-primary, #910742) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  transition: color 0.25s ease !important;
}

.footer_social-icon a:hover i,
.footer_social-icon a:hover .fa {
  color: #ffffff !important;
}

.footer_social-icon a.is-youtube:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.45) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.footer-map-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--olm-r-md);
  padding: var(--olm-space-5);
  text-align: center;
}

.footer-map-pin { font-size: 1.8rem; color: #fff; }
.footer-map-text { color: rgba(255, 255, 255, .85); margin: var(--olm-space-3) 0; }

.btn-footer-map {
  background: #fff;
  color: var(--olm-secondary) !important;
  border-radius: var(--olm-r-pill);
  font-weight: 600;
}

.btn-footer-map:hover { background: var(--olm-cream); }

.footer-map-wrapper { border-radius: var(--olm-r-md); overflow: hidden; }

.terms {
  background-color: var(--olm-bar-dark, #5e0329) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 0 !important;
}

.terms ul {
  list-style: none;
  display: flex;
  gap: var(--olm-space-4);
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
}

.terms a,
.terms p,
.terms li,
.terms .terms-copyright {
  color: #ffffff !important;
  font-size: .875rem !important;
}

.terms a:hover {
  color: #ffd9e4 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   12. Brand marquee
   ========================================================================== */

.our_brand_logo {
  position: relative;
  background-color: var(--olm-grey, #f4f5f7) !important;
  border-top: 1px solid var(--olm-line, #e2e8f0);
  border-bottom: 1px solid var(--olm-line, #e2e8f0);
  padding: 22px 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Disable full-bleed pseudo elements from legacy custom.css */
.our_brand_logo::before,
.our_brand_logo::after {
  display: none !important;
}

/* Brand carousel wrapper inside page container margin */
.olm-brand-carousel-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Side gradient shadows inside container so start & end blend seamlessly at the page margins */
.olm-brand-carousel-wrap::before,
.olm-brand-carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.olm-brand-carousel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--olm-grey, #f4f5f7) 0%, rgba(244, 245, 247, 0) 100%) !important;
  box-shadow: none;
}

.olm-brand-carousel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--olm-grey, #f4f5f7) 0%, rgba(244, 245, 247, 0) 100%) !important;
  box-shadow: none;
}

.our_brand_logo .logo_items {
  display: flex;
  align-items: center;
  width: max-content;
  position: relative;
  z-index: 1;
  animation: scroll 45s linear infinite;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 1) calc(100% - 70px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 1) calc(100% - 70px), transparent 100%);
}

/* Pause animation on hover */
.our_brand_logo:hover .logo_items,
.our_brand_logo:focus-within .logo_items {
  animation-play-state: paused !important;
}

/* Scrolling Logo Cards */
.our_brand_logo .logo_items a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 88px;
  margin: 10px 14px;
  flex-shrink: 0;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 12px 18px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Logo image inside card */
.our_brand_logo .logo_items img {
  max-height: 52px;
  max-width: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover on card: slight zoom and elevated shadow */
.our_brand_logo .logo_items a:hover {
  transform: scale(1.08) translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 1px rgba(122, 22, 43, 0.25) !important;
  border-color: rgba(122, 22, 43, 0.28) !important;
  z-index: 12;
}

.our_brand_logo .logo_items a:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   13. Swiper controls
   ========================================================================== */

.swiper-button-next,
.swiper-button-prev {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--olm-r-pill);
  background-color: var(--olm-white);
  border: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-sm);
  color: var(--olm-primary) !important;
  transition: background-color var(--olm-t-base) var(--olm-ease),
              color var(--olm-t-base) var(--olm-ease),
              transform var(--olm-t-base) var(--olm-ease);
}

.swiper-button-next::after,
.swiper-button-prev::after { font-size: 15px !important; font-weight: 700; }

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--olm-primary);
  color: #fff !important;
  transform: scale(1.06);
}

.swiper-pagination-bullet-active { background: var(--olm-primary) !important; }

/* Arrows sit outside the track wherever the container's side margin allows it,
   so they never cover the photography. Below that width they overlay the edge
   of the track and only appear while the slider is hovered or focused. */
.activitySectionSwiper,
.gallerySectionSwiper,
.highlightSectionSwiper { position: relative; }

.activitySectionSwiper .swiper-button-next,
.activitySectionSwiper .swiper-button-prev,
.gallerySectionSwiper .swiper-button-next,
.gallerySectionSwiper .swiper-button-prev,
.highlightSectionSwiper .swiper-button-next,
.highlightSectionSwiper .swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.activitySectionSwiper .swiper-button-prev,
.gallerySectionSwiper .swiper-button-prev,
.highlightSectionSwiper .swiper-button-prev { left: 0; }

.activitySectionSwiper .swiper-button-next,
.gallerySectionSwiper .swiper-button-next,
.highlightSectionSwiper .swiper-button-next { right: 0; }

.activitySectionSwiper .swiper-button-next:hover,
.activitySectionSwiper .swiper-button-prev:hover,
.gallerySectionSwiper .swiper-button-next:hover,
.gallerySectionSwiper .swiper-button-prev:hover,
.highlightSectionSwiper .swiper-button-next:hover,
.highlightSectionSwiper .swiper-button-prev:hover {
  transform: translateY(-50%) scale(1.06);
}

/* Below 1400px there is no room beside the container, so the arrows overlay the
   track edge and stay out of the way until the reader reaches for them. */
@media (max-width: 1399.98px) {
  .activitySectionSwiper .swiper-button-next,
  .activitySectionSwiper .swiper-button-prev,
  .gallerySectionSwiper .swiper-button-next,
  .gallerySectionSwiper .swiper-button-prev,
  .highlightSectionSwiper .swiper-button-next,
  .highlightSectionSwiper .swiper-button-prev {
    opacity: 0;
    transition: opacity var(--olm-t-base) var(--olm-ease),
                background-color var(--olm-t-base) var(--olm-ease),
                color var(--olm-t-base) var(--olm-ease);
  }

  .activitySectionSwiper:hover .swiper-button-next,
  .activitySectionSwiper:hover .swiper-button-prev,
  .gallerySectionSwiper:hover .swiper-button-next,
  .gallerySectionSwiper:hover .swiper-button-prev,
  .highlightSectionSwiper:hover .swiper-button-next,
  .highlightSectionSwiper:hover .swiper-button-prev,
  .swiper-button-next:focus-visible,
  .swiper-button-prev:focus-visible { opacity: 1; }
}

@media (min-width: 1400px) {
  .activitySectionSwiper .swiper-button-prev,
  .gallerySectionSwiper .swiper-button-prev,
  .highlightSectionSwiper .swiper-button-prev { left: -56px; }

  .activitySectionSwiper .swiper-button-next,
  .gallerySectionSwiper .swiper-button-next,
  .highlightSectionSwiper .swiper-button-next { right: -56px; }
}

.swiper-button-disabled { opacity: .35 !important; }

/* ==========================================================================
   14. Tabs (social feed)
   ========================================================================== */

.socialFeed .nav-tabs {
  border-bottom: 1px solid var(--olm-line);
  padding: 6px 6px 0;
  gap: 4px;
  background: var(--olm-cream);
}

.socialFeed .nav-tabs .nav-link {
  border: none;
  border-radius: var(--olm-r-sm) var(--olm-r-sm) 0 0;
  color: var(--olm-muted);
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 14px;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.socialFeed .nav-tabs .nav-link:hover { color: var(--olm-primary); }

.socialFeed .nav-tabs .nav-link.active {
  background: var(--olm-white);
  color: var(--olm-primary);
  box-shadow: inset 0 -2px 0 var(--olm-primary);
}

/* ==========================================================================
   15. Modals
   ========================================================================== */

.modal-content {
  border: none;
  border-radius: var(--olm-r-xl);
  box-shadow: var(--olm-shadow-lg);
  overflow: hidden;
}

/* One header bar for every public modal.

   custom.css already painted the bar maroon for five modals by id
   (`#infoModal`, `#infoModal2`, `#infoModal12`, `#imageModal`,
   `#partnershipModal`), plus `.success_story_modal` and `.Lakhpati_modal` —
   and twelve templates ask for `btn-close-white`, which only reads on a dark
   bar. Any modal outside that id list got a cream bar and a dark close button
   instead, which is where the mismatch came from. The bar is the house style,
   so it is stated once here for all of them.
   This file is loaded by the public shell only; the admin has its own. */
.modal-header {
  background: var(--olm-primary);
  border-bottom: none;
  padding: var(--olm-space-4) var(--olm-space-5);
}

.modal-title { color: #fff; font-weight: 700; font-size: var(--olm-fs-heading); }

.modal-header .btn-close {
  background-color: rgba(255, 255, 255, .18);
  border-radius: var(--olm-r-pill);
  padding: 10px;
  filter: brightness(0) invert(1);
  opacity: 1;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.modal-header .btn-close:hover { background-color: rgba(255, 255, 255, .32); }

/* custom.css gives the success-story modal a solid white square through a
   deeper selector, which outranks the rule above; matched here so it carries
   the same pill as every other modal. */
.success_story_modal .modal-header .btn-close { background-color: rgba(255, 255, 255, .18); }
.success_story_modal .modal-header .btn-close:hover { background-color: rgba(255, 255, 255, .32); }

.modal-body { padding: var(--olm-space-5); }

.modal-footer {
  background: var(--olm-cream);
  border-top: 1px solid var(--olm-line);
}

.modal-backdrop.show { opacity: .55; }

/* Editor content that carries its own modal skeleton.

   Some records were saved from a page that already had the markup around them,
   so the stored HTML opens with `<div class="modal-content"><div
   class="modal-body">` — the Kabita Singh success story is one. Injected into a
   real modal that nests a panel inside the panel: doubled padding, a second
   radius and shadow, and worst of all the outer rules for height apply to the
   inner box too, so `max-height: 92vh` with `overflow: hidden` silently cut the
   story off with no way to scroll to the rest.

   The stored HTML is the department's and is not edited. These rules simply
   stop a nested skeleton from behaving like a panel. The `.modal` on the front
   of each selector is deliberate: it outranks `.olm-modal--split .modal-content`
   further down the file, which is the rule that was doing the clipping. */
.modal .modal-body .modal-content {
  /* Bootstrap makes `.modal-content` a flex column. A flex container is its own
     formatting context, so the nested one refused to sit beside the floated
     image rail and pushed the entire story below the images, leaving a column
     of white to their left. As plain content it wraps around the rail. */
  display: block;
  max-height: none;
  min-height: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.modal .modal-body .modal-body,
.modal .modal-body .modal-dialog {
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
}

/* A header inside the copy is a heading, not the modal's own bar. */
.modal .modal-body .modal-header {
  background: transparent;
  padding: 0;
  border: none;
}

.modal .modal-body .modal-header .modal-title { color: var(--olm-primary); }

/* Content modal with an image rail on the right.

   The Lakhpati Didi modal is the reference for every split modal: a wide centred
   dialog, a brand header bar, and the imagery floated right of the text. Float
   rather than grid, so the text wraps under the rail once it has passed it
   instead of leaving a tall empty column beside a short paragraph. */
.olm-modal-split { display: block; }
.olm-modal-split::after { content: ""; display: block; clear: both; }

.olm-modal-split__text { min-width: 0; }

/* The text half is usually authored as `col-sm-7` beside a `col-sm-5` of
   imagery. The imagery has moved to the rail, so the text now owns the pane;
   left at 7/12 it stopped short with 40% of the modal empty beside it. */
.olm-modal-split__text [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* A plain block box ignores a float and slides under it — only its inline text
   wraps. The panelled blocks in these modals (cards, accordion items) have a
   border and a background, so sliding under the rail would draw them through
   the imagery. `flow-root` makes each one its own formatting context, so it
   sits beside the rail and takes the full width once it is past it. */
.olm-modal-split__text .card,
.olm-modal-split__text .accordion,
.olm-modal-split__text .accordion-item { display: flow-root; }

/* A table cannot be flow-root, but it already avoids floats on its own. */
.olm-modal-split__text .table-responsive { display: flow-root; overflow-x: auto; }

.olm-modal-split__media {
  float: right;
  width: clamp(300px, 38%, 560px);
  margin: 0 0 var(--olm-space-5) var(--olm-space-6);
  padding: var(--olm-space-3);
  border-radius: var(--olm-r-lg);
  background: var(--olm-cream);
  border: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-sm);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

/* A lifted image block, stripped of the grid class it no longer sits in. */
.olm-modal-split__figure { padding: 0; margin: 0; }
.olm-modal-split__figure + .olm-modal-split__figure { margin-top: var(--olm-space-3); }

.olm-modal-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--olm-r-md);
  box-shadow: var(--olm-shadow-sm);
  cursor: zoom-in;
}

.olm-modal-split__media img[data-olm-no-zoom] { cursor: default; }

@media (max-width: 767.98px) {
  .olm-modal-split__media {
    float: none;
    width: 100%;
    margin: 0 0 var(--olm-space-4);
  }
}

/* Popup modal on the home page: no heavy overlay panels */
.pageLoadPopup .modal-header { background: transparent; border-bottom: none; }
.pageLoadPopup .modal-footer { background: transparent; border-top: none; }

/* ==========================================================================
   16. Image lightbox
   ========================================================================== */

.olm-zoomable { cursor: zoom-in; }

/* No zoom feature for any image in header or footer */
header img,
footer img,
.footer_section img,
.footer-logo img,
.footer-logo2 img,
.terms img,
.our_brand_logo img,
.cm_photo_section img,
.inner_banner img,
img[src*="menu-banners"],
img[src*="menu_banners"],
img[src*="innerBanner"],
.Lakhpati_modal img,
#exampleModal2 img,
#secondModal img {
  cursor: default !important;
}

header a img,
footer a img,
.footer_section a img,
.footer-logo a img,
.footer-logo2 a img,
.terms a img,
.our_brand_logo a img,
.navbar-brand img {
  cursor: pointer !important;
}

header img:hover,
footer img:hover,
.footer_section img:hover,
.footer-logo img:hover,
.terms img:hover,
.cm_photo_section img:hover,
.inner_banner img:hover,
img[src*="menu-banners"]:hover,
img[src*="menu_banners"]:hover,
img[src*="innerBanner"]:hover {
  transform: none !important;
}

.olm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 12, 16, .86);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--olm-t-base) var(--olm-ease),
              visibility var(--olm-t-base) var(--olm-ease);
}

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

.olm-lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--olm-space-3);
  transform: scale(.97);
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-lightbox.is-open .olm-lightbox__figure { transform: scale(1); }

.olm-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: var(--olm-r-md);
  background: #fff;
  box-shadow: var(--olm-shadow-lg);
}

.olm-lightbox__caption {
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  text-align: center;
  max-width: 70ch;
}

.olm-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: var(--olm-r-pill);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.olm-lightbox__btn:hover { background: rgba(255, 255, 255, .3); }
.olm-lightbox__btn--prev { left: 18px; }
.olm-lightbox__btn--next { right: 18px; }

.olm-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
}

.olm-lightbox__counter {
  position: absolute;
  top: 24px;
  left: 24px;
  color: rgba(255, 255, 255, .8);
  font-size: .85rem;
  letter-spacing: .04em;
}

/* ==========================================================================
   17. Restrained page animations
   ========================================================================== */

@keyframes olmFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.olm-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--olm-ease), transform 520ms var(--olm-ease);
  will-change: opacity, transform;
}

.olm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Never animate for users who ask not to */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .olm-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. Forms
   ========================================================================== */

.form-control,
.form-select {
  border-radius: var(--olm-r-sm);
  border: 1px solid var(--olm-line-strong);
  padding: 10px 14px;
  transition: border-color var(--olm-t-fast) var(--olm-ease),
              box-shadow var(--olm-t-fast) var(--olm-ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--olm-primary);
  box-shadow: 0 0 0 3px var(--olm-primary-soft);
}

/* ==========================================================================
   19. Tables
   ========================================================================== */

.table {
  border-radius: var(--olm-r-md);
  overflow: hidden;
}

.table > thead {
  background-color: var(--olm-primary-soft);
  color: var(--olm-primary);
}

.table > thead th {
  border-bottom: 1px solid var(--olm-line);
  font-weight: 600;
  font-size: .88rem;
}

.table > tbody > tr:hover > * { background-color: var(--olm-cream); }

/* ==========================================================================
   20. Utilities
   ========================================================================== */

.olm-stack-4 > * + * { margin-top: var(--olm-space-4); }
.olm-text-primary { color: var(--olm-primary) !important; }
.olm-text-secondary { color: var(--olm-secondary) !important; }
.olm-bg-primary { background-color: var(--olm-primary) !important; color: #fff !important; }
.olm-bg-secondary { background-color: var(--olm-secondary) !important; color: #fff !important; }
.olm-radius-lg { border-radius: var(--olm-r-lg) !important; }
.olm-shadow { box-shadow: var(--olm-shadow-sm) !important; }

/* Skip link target must not be hidden under the sticky header */
[id="Skip-to-Main-Content"] { scroll-margin-top: 120px; }

/* ==========================================================================
   21. Card refinements
   -------------------------------------------------------------------------
   The shared card language above sets the shell. These rules fix what the
   individual card types were getting wrong: ragged heights, titles and body
   text running to different lengths, and images shrink-wrapping their frames.
   ========================================================================== */

/* Equal-height slides so a long title never leaves a short card stranded. */
.activitySectionSwiper .swiper-wrapper,
.gallerySectionSwiper .swiper-wrapper,
.highlightSectionSwiper .swiper-wrapper {
  align-items: stretch;
}

.activitySectionSwiper .swiper-slide,
.gallerySectionSwiper .swiper-slide,
.highlightSectionSwiper .swiper-slide {
  height: auto;
  display: flex;
}

.activitySectionSwiper .swiper-slide > .card,
.gallerySectionSwiper .swiper-slide > .card,
.highlightSectionSwiper .swiper-slide > .highlight-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Left-aligned copy: centred multi-line body text is harder to scan and made
   the cards look ragged when the descriptions differed in length. */
.activitySectionSwiper .card-body,
.activitySectionSwiper .card-body.text-center,
.highlightSectionSwiper .highlight-content,
.highlightSectionSwiper .highlight-content.text-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: var(--olm-space-4);
  text-align: left !important;
}

/* Titles: two lines maximum, then ellipsis, so every card aligns. */
.activitySectionSwiper .card-title,
.highlight-card .activity-title,
.projects h5,
.socialWall h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--olm-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body copy: three lines, muted, never pushing the card taller. */
.activity-desc,
.highlight-card .activity-description {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--olm-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-desc p:last-child { margin-bottom: 0; }

/* A thin brand rule appears under the title on hover: movement without noise. */
.activitySectionSwiper .card-body::after,
.highlight-card .highlight-content::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: auto;
  border-radius: var(--olm-r-pill);
  background: var(--olm-primary);
  transition: width var(--olm-t-base) var(--olm-ease);
}

.activitySectionSwiper .card:hover .card-body::after,
.highlight-card:hover .highlight-content::after { width: 40px; }

/* Highlights: image and copy side by side once there is room for it. */
.highlight-card .highlight-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--olm-grey);
}

.highlight-card .highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scheme cards: the title block is the whole hit area, so give it real padding. */
.projects h5 {
  padding: var(--olm-space-4);
  min-height: 76px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* Wall of Fame: name and role stacked, role muted and single line. */
.socialWall .text-center { padding: var(--olm-space-4) !important; }

.socialWall h5 { text-align: center; margin-bottom: 4px; }

.socialWall p {
  font-size: .82rem;
  color: var(--olm-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gallery cards are pure imagery: no empty body, no stray padding. */
.gallerySectionSwiper .card > .olm-media { border-radius: inherit; }

/* Latest-news panel and the video panel: same shell as everything else. */
.latestEventNews {
  border: 1px solid var(--olm-line) !important;
  border-radius: var(--olm-r-lg) !important;
  box-shadow: var(--olm-shadow-sm) !important;
  overflow: hidden;
}

/* The organisation-head card sits on a tinted surface, so the role needs to be
   darker than the general muted grey to clear the 4.5:1 contrast floor. */
.cm_photo_section .head-info-content p,
.single_section .head-info-content p,
.head-info-content p { color: var(--olm-body) !important; }

/* Footer legal row: the list items were inheriting body ink on a dark bar. */
.terms li { color: rgba(255, 255, 255, .82); }

/* One corner radius across every panel. The page was mixing 8, 10, 14 and 18px
   because several blocks still carried legacy or inline radii. */
.card,
.card.socialFeed,
.card.latestEventNews,
.projects,
.socialWall,
.Socialwall_img,
.highlight-card,
.olm-card,
.content-container,
.video-player-wrapper,
.video-iframe-wrapper,
.video-offline-placeholder,
.social-feed-frame-wrapper + div {
  border-radius: var(--olm-r-lg) !important;
}

.menu-tab,
.accordion-button { border-radius: var(--olm-r-md) !important; }

/* Utility bar controls were 14-22px tall, below the 24px minimum target size. */
.header-top a,
.top_header a,
.header-top button,
.top_header button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 4px;
  border-radius: var(--olm-r-xs);
}

.header-top a:hover,
.top_header a:hover { background: rgba(255, 255, 255, .1); }

.header-top #btn-decrease,
.header-top #btn-orig,
.header-top #btn-increase,
.top_header #btn-decrease,
.top_header #btn-orig,
.top_header #btn-increase {
  justify-content: center;
  min-width: 28px;
}

/* "Welcome to" eyebrow above the About heading. The legacy sheet painted this
   span brand-maroon and left the text dark, so it read as a solid block. */
.aboutContent > span,
.eduexplore_left-content > span,
.aboutContent > .olm-eyebrow + span,
.eduexplore_left-content > .olm-eyebrow + span {
  display: none !important;
}

.aboutContent .allHeading,
.eduexplore_left-content .allHeading {
  text-align: left;
  padding-bottom: 0 !important;
}

.aboutContent .allHeading::after,
.eduexplore_left-content .allHeading::after,
.aboutus_section .allHeading::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   22. Second-pass corrections
   ========================================================================== */

/* ---- Type scale applied -------------------------------------------------
   The page was using sixteen different size/weight pairs. Everything now maps
   onto the six steps declared in :root. */

.allHeading,
.main-heading {
  font-size: var(--olm-fs-display);
  line-height: var(--olm-lh-tight);
}

.latestEventNews h3,
.footer_section h3,
.modal-title {
  font-size: var(--olm-fs-heading);
  line-height: var(--olm-lh-snug);
}

.card-title,
.projects h5,
.socialWall h5,
.highlight-card .activity-title,
.olm-story-card h5 {
  font-size: var(--olm-fs-title);
  line-height: var(--olm-lh-snug);
  font-weight: 600;
}

.activity-desc,
.highlight-card .activity-description,
.aboutContent p,
.external_link_section .tab_content a,
.footer_section li,
.footer_section a {
  font-size: var(--olm-fs-body);
  line-height: var(--olm-lh-body);
}

.news-date-badge-single,
.olm-story-card p,
.socialWall p,
.terms a,
.terms p,
.latestEvent .news-title {
  font-size: var(--olm-fs-small);
  line-height: var(--olm-lh-snug);
}

.news-badge-new,
.aboutContent > span,
.olm-story-card__cue {
  font-size: var(--olm-fs-micro);
}

/* ---- Footer links -------------------------------------------------------
   These were rendering as #434141 on the maroon bar (about 1.3:1). A legacy
   rule further down the sheet was winning, so the override is explicit. */
.footer_section a,
.footer_section ul li a,
.footer_section .footer_social-list a,
.footer_section .footer-logo ul li,
.footer_section .footer-logo a {
  color: rgba(255, 255, 255, .88) !important;
}

.footer_section a:hover,
.footer_section ul li a:hover,
.footer_section .footer_social-list a:hover {
  color: #fff !important;
}

.footer_section .footer-logo img { max-width: 220px; height: auto; }

/* ---- Banner: clipped, never a scroll container --------------------------
   overflow-x:hidden on its own computes the other axis to auto, which turned
   the banner into a box you could scroll vertically inside. Both axes are
   clipped explicitly.

   overscroll-behavior is deliberately NOT set here. On a box that cannot
   scroll it stops the wheel chaining to the page, so the whole document froze
   whenever the pointer was over the banner. */
.banner_section,
.banner_section .carousel,
.banner_section .carousel-inner,
.banner_section .carousel-item {
  max-width: 100%;
  overflow: hidden;
}

.banner_section .carousel-item img { max-width: 100%; }

/* ---- Banner caption ----------------------------------------------------- */
.olm-banner-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: flex-start;
  /* Extra room at the foot so the caption clears the dots and the line. */
  padding: clamp(20px, 4vw, 56px);
  padding-bottom: calc(var(--olm-banner-bar-h) + clamp(12px, 2vw, 24px));
  /* A scrim only where the text sits, so the artwork stays legible. */
  background: linear-gradient(to top, rgba(20, 8, 14, .72), rgba(20, 8, 14, 0));
  pointer-events: none;
}

.olm-banner-caption__inner {
  max-width: min(620px, 90%);
  pointer-events: auto;
}

.olm-banner-caption__title {
  color: #fff;
  font-size: var(--olm-fs-display);
  line-height: var(--olm-lh-tight);
  font-weight: 700;
  margin: 0 0 var(--olm-space-2);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.olm-banner-caption__text {
  color: rgba(255, 255, 255, .92);
  font-size: var(--olm-fs-body);
  line-height: var(--olm-lh-body);
  margin: 0 0 var(--olm-space-4);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.olm-banner-caption__cta { padding: 10px 24px; }

@media (max-width: 575.98px) {
  .olm-banner-caption { padding: 16px; }
  .olm-banner-caption__text { display: none; }
}

/* ---- Success story cards ------------------------------------------------
   These were not links at all, and the legacy sheet pinned their images to a
   fixed 185px so the aspect ratio was ignored. */
.olm-story-card {
  text-decoration: none;
  color: inherit;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.Socialwall_img.olm-story-card img,
.socialWall.olm-story-card img,
.olm-story-card .olm-media img {
  height: 100% !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
}

.olm-story-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  padding: var(--olm-space-4);
  text-align: left;
}

.olm-story-card__body h5 { margin: 0; }

.olm-story-card__body p {
  color: var(--olm-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.olm-story-card__cue {
  margin-top: auto;
  padding-top: var(--olm-space-3);
  color: var(--olm-primary);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.olm-story-card__cue::after {
  content: "\f105";
  font-family: FontAwesome;
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-story-card:hover .olm-story-card__cue::after { transform: translateX(3px); }

/* ---- Scheme cards -------------------------------------------------------
   The reserved description slot left a dead band under the label. The title
   block now sizes to its own content. */
.projects h5 {
  min-height: 0;
  padding: var(--olm-space-3) var(--olm-space-4);
}

.projects a { justify-content: flex-start; }

/* A lower profile keeps the four scheme cards to a single screen band. */
.projects .olm-media { aspect-ratio: 16 / 10; }

/* ---- Quick Links --------------------------------------------------------
   The section carried a purple-blue texture that fought the brand palette.
   The chakra artwork (.rotateme) is deliberately untouched. */
.external_link_section {
  overflow: hidden;
}

.external_link_section .content-container {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.external_link_section .content-section.active {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.external_link_section .tab_thumb_img img {
  max-height: 240px;
  object-fit: contain;
}

/* ---- Partner logos ------------------------------------------------------
   Greyscale at 0.68 opacity made several of these effectively invisible. */
.our_brand_logo .logo_items img {
  filter: grayscale(.65);
  opacity: .9;
}

.our_brand_logo .logo_items a:hover img { filter: grayscale(0); opacity: 1; }

/* ---- Section headings ---------------------------------------------------
   Alternating them produced an arbitrary pattern (left, centre, centre, left…)
   because the sections do not share a markup shape. One rule for all of them
   reads as deliberate; only the About block, which is a two-column intro
   rather than a section header, stays left-aligned. */
.activity_section > .container > .text-center,
.project_section > .container > .text-center,
.social_section > .container > .text-center,
.gallery_section .study-heading,
.news_highlight_section .study-heading {
  text-align: center !important;
}

.activity_section .allHeading::after,
.project_section .allHeading::after,
.social_section .allHeading::after,
.gallery_section .allHeading::after,
.news_highlight_section .allHeading::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Moving content must be pausable ------------------------------------
   The headline ticker, the vertical news list and the partner marquee all
   start on their own and run indefinitely. Hovering or tabbing into any of
   them now stops the motion (WCAG 2.2.2). */
.vertical-news-marquee:hover,
.vertical-news-marquee:focus-within,
.our_brand_logo:hover .logo_items,
.our_brand_logo:focus-within .logo_items,
.latestNews:hover .marquee p,
.latestNews:focus-within .marquee p {
  animation-play-state: paused !important;
}

.latestNews .marquee p {
  animation-play-state: running;
}

/* ---- Highlights row balance ---------------------------------------------
   The Latest News panel was 402px next to a 278px slider, so the row read as
   lopsided. Both columns now stretch to the taller of the two. */
.news_highlight_section .row.g-4 { align-items: stretch; }

.news_highlight_section .highlights-swiper-container,
.news_highlight_section .highlightSectionSwiper {
  height: 100%;
}

.news_highlight_section .highlightSectionSwiper .swiper-slide { height: auto; }

/* ---- Empty states -------------------------------------------------------
   Sections with no records used to render as blank space. */
.olm-empty {
  margin: 0;
  padding: var(--olm-space-6) var(--olm-space-4);
  text-align: center;
  color: var(--olm-muted);
  font-size: var(--olm-fs-body);
  background: var(--olm-white);
  border: 1px dashed var(--olm-line-strong);
  border-radius: var(--olm-r-lg);
}

/* ==========================================================================
   23. Chakra, dot fields and Odisha line-art motifs
   --------------------------------------------------------------------------
   Every pattern below is drawn in CSS or as an inline SVG data URI. No image
   files are added, and nothing here carries meaning — it is texture only, sat
   behind the content at low opacity and ignored by screen readers.
   ========================================================================== */

/* ---- The rotating chakra in Quick Links ---------------------------------
   The artwork was still in the page and still turning, but the legacy rule
   parks it at top:-47% / left:-17%, and the overflow:hidden added to keep it
   from widening the page on phones clipped it away entirely. It is pulled back
   inside the section and tinted to the brand colour. The artwork, the element
   and its rotation are otherwise untouched. */
.external_link_section img.rotateme.roate-event-bg:not(.olm-chakra) {
  left: -7% !important;
  top: 4% !important;
  width: clamp(300px, 34vw, 480px);
  height: auto;
  opacity: .38;
  /* Colourises the artwork to the primary maroon regardless of its own hues. */
  filter: brightness(0) saturate(100%) invert(13%) sepia(58%) saturate(3466%)
          hue-rotate(324deg) brightness(93%) contrast(97%);
  pointer-events: none;
  z-index: 0;
}

.external_link_section .container { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .external_link_section img.rotateme.roate-event-bg:not(.olm-chakra) {
    left: -22% !important;
    top: -8% !important;
    opacity: .30;
  }
}

/* ---- Dot field ----------------------------------------------------------
   A halftone burst: an even grid of small dots, faded out from one corner with
   a mask so it reads as a spray rather than wallpaper. */
/* Wall of Fame carries both a vine rule and a dot field, so its dots live on
   ::after — ::before is already spoken for by the .social_section vine. */
.olm-dots::before,
.external_link_section::before,
.activity_section::before,
.social_tab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 16px 16px;
  color: var(--olm-primary);
  opacity: .11;
  -webkit-mask-image: radial-gradient(120% 90% at 88% 8%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 74%);
  mask-image: radial-gradient(120% 90% at 88% 8%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 74%);
}

/* Mirror the burst on alternate bands so it does not look stamped. */
.social_tab::after {
  -webkit-mask-image: radial-gradient(110% 85% at 10% 92%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  mask-image: radial-gradient(110% 85% at 10% 92%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  color: var(--olm-secondary);
}

.activity_section::before {
  -webkit-mask-image: radial-gradient(100% 80% at 6% 10%, #000 0%, rgba(0, 0, 0, .45) 38%, transparent 70%);
  mask-image: radial-gradient(100% 80% at 6% 10%, #000 0%, rgba(0, 0, 0, .45) 38%, transparent 70%);
  opacity: .09;
}

/* Content must sit above the texture. */
.activity_section > .container,
.social_tab > .container { position: relative; z-index: 1; }

/* ---- Konark wheel, drawn as thin concentric rings with radial ticks ------ */
.aboutus_section::after {
  display: none !important;
}

@keyframes olmMotifTurn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.aboutus_section > .container { position: relative; z-index: 1; }

/* ---- Temple silhouette, as a single hairline outline -------------------- */
.gallery_section::before {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 0;
  width: clamp(180px, 20vw, 300px);
  height: clamp(150px, 17vw, 250px);
  pointer-events: none;
  z-index: 0;
  opacity: .2;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20200'%3E%3Cg%20fill='none'%20stroke='%23881e23'%20stroke-width='1'%20stroke-linejoin='round'%3E%3Cpath%20d='M30%20198V150q0-52%2028-78Q86%2098%2086%20150v48'/%3E%3Cpath%20d='M44%20198v-46q0-38%2014-56'/%3E%3Cpath%20d='M72%20198v-46q0-38-14-56'/%3E%3Ccircle%20cx='58'%20cy='60'%20r='6'/%3E%3Cpath%20d='M52%2054q6-14%2012%200'/%3E%3Cpath%20d='M120%20198V128q0-64%2034-96%2034%2032%2034%2096v70'/%3E%3Cpath%20d='M136%20198v-66q0-46%2018-70'/%3E%3Cpath%20d='M172%20198v-66q0-46-18-70'/%3E%3Ccircle%20cx='154'%20cy='22'%20r='7'/%3E%3Cpath%20d='M147%2015q7-16%2014%200'/%3E%3Cpath%20d='M18%20198h204'/%3E%3C/g%3E%3C/svg%3E");
}

.gallery_section > .container { position: relative; z-index: 1; }

/* ---- Pattachitra-style running vine, used as a section rule ------------- */
.news_highlight_section::before,
.social_section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  pointer-events: none;
  z-index: 0;
  opacity: .3;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 26px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2026'%3E%3Cg%20fill='none'%20stroke='%23910742'%20stroke-width='0.9'%20stroke-linecap='round'%3E%3Cpath%20d='M0%2013q15-13%2030%200t30%200q15-13%2030%200t30%200'/%3E%3Cpath%20d='M15%206.5q4-5%208%200-4%205-8%200z'/%3E%3Cpath%20d='M45%2019.5q4-5%208%200-4%205-8%200z'/%3E%3Cpath%20d='M75%206.5q4-5%208%200-4%205-8%200z'/%3E%3Cpath%20d='M105%2019.5q4-5%208%200-4%205-8%200z'/%3E%3C/g%3E%3C/svg%3E");
}

.social_section::before { opacity: .22; }

.news_highlight_section > .container,
.social_section > .container { position: relative; z-index: 1; }

/* The textures are decoration; drop them when motion or contrast is a concern. */
@media (prefers-reduced-motion: reduce) {
  .aboutus_section::after { animation: none; }
}

@media (prefers-contrast: more) {
  .olm-dots::before,
  .external_link_section::before,
  .activity_section::before,
  .social_tab::after,
  .aboutus_section::after,
  .gallery_section::before,
  .news_highlight_section::before,
  .social_section::before { display: none; }
}

/* Small screens carry less texture: the patterns compete with the content. */
@media (max-width: 575.98px) {
  .aboutus_section::after,
  .gallery_section::before { opacity: .12; }

  .olm-dots::before,
  .external_link_section::before,
  .activity_section::before,
  .social_tab::after { opacity: .07; }
}

/* ==========================================================================
   24. Third pass
   ========================================================================== */

/* ---- Brand bar hierarchy ------------------------------------------------
   One hue, three depths: the utility bar is the darkest, the main navigation
   sits in the middle at the brand colour, and the news ticker is the lightest
   of the three. */
:root {
  --olm-bar-dark: #5e0329;   /* utility bar   */
  --olm-bar-mid: #910742;    /* navigation    */
  --olm-bar-light: #b3255f;  /* news ticker   */
}

.header-top,
.top_header {
  background-color: var(--olm-bar-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav_menu_section { background-color: var(--olm-bar-mid) !important; }

.latestNews {
  background-color: var(--olm-bar-light) !important;
  border-bottom: none;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

/* ---- Banner ------------------------------------------------------------- */

/* The zoom was repainting on every frame and the two slides fought over the
   same pixels during the cross-fade, which read as a shimmer. Promoting both
   to their own layer and rounding the transform settles it. */
.banner_section .carousel-item,
.banner_section .carousel-item img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
}

.banner_section .carousel-item img {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.banner_section .carousel-item.active img {
  animation: olmBannerZoom 14s linear both;
}

@keyframes olmBannerZoom {
  from { transform: translateZ(0) scale(1); }
  to   { transform: translateZ(0) scale(1.06); }
}

/* A paused banner holds its frame instead of drifting on. */
.banner_section.is-paused .carousel-item.active img { animation-play-state: paused; }

/* The hero is a slideshow, not a scroller: horizontal drag does nothing, but
   a vertical swipe or wheel must still scroll the page through it. */
.banner_section,
.banner_section .carousel,
.banner_section .carousel-inner,
.banner_section .carousel-item {
  touch-action: pan-y;
}

.banner_section .carousel-item img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Progress line: near solid, as asked. */
.olm-banner-bar__track { background: rgba(255, 255, 255, .9); }

.olm-banner-bar__fill {
  background: var(--olm-bar-mid);
  box-shadow: none;
}

.olm-banner-bar__dots [data-bs-target],
.banner_section.banner .olm-banner-bar__dots.carousel-indicators [data-bs-target] {
  background-color: rgba(255, 255, 255, .9);
}

.olm-banner-bar__dots .active,
.banner_section.banner .olm-banner-bar__dots.carousel-indicators .active {
  background-color: var(--olm-bar-mid);
}

/* ---- Chakra as the recurring section mark -------------------------------
   The drawn wheel and the temple outline are dropped. The department's own
   chakra artwork is used instead, placed once per band at a different corner
   and size so it reads as a watermark rather than a repeat. */
.aboutus_section::after,
.gallery_section::before { content: none !important; }

/* The chakra marks are real elements now, written once in
   resources/views/frontend/partials/chakra.blade.php and placed per band.
   See section 26 for their positioning. */
/* ---- Photo gallery ------------------------------------------------------
   The row was reading as clutter: seven looping slides with mismatched crops,
   arrows sitting on the photographs and no breathing room between cards. */
.gallery_section .gallerySectionSwiper {
  padding: 4px 0 8px;
  overflow: hidden;
}

.gallery_section .swiper-slide > .card {
  border-radius: var(--olm-r-lg) !important;
  overflow: hidden;
}

.gallery_section .olm-media { aspect-ratio: 3 / 2; }

.gallery_section .swiper-button-next,
.gallery_section .swiper-button-prev {
  background-color: rgba(255, 255, 255, .96);
  box-shadow: var(--olm-shadow-md);
}

/* ---- Footer: light pink ------------------------------------------------- */
.footer_section {
  background-color: var(--olm-pink, #fbeff3) !important;
  color: var(--olm-body);
  border-top: 1px solid var(--olm-line);
}

.footer_section h3 { color: var(--olm-primary); }
.footer_section h3::after { background: var(--olm-primary); }

.footer_section a,
.footer_section ul li a,
.footer_section .footer_social-list a,
.footer_section .footer-logo ul li,
.footer_section .footer-logo a,
.footer_section li,
.footer_section p {
  color: var(--olm-body) !important;
}

.footer_section a:hover,
.footer_section ul li a:hover,
.footer_section .footer_social-list a:hover { color: var(--olm-primary) !important; }

.footer_section .footer-logo ul li i,
.footer_section .fa { color: var(--olm-primary); }

/* (footer social icons styled with .footer_social-icon) */

.footer-map-card {
  background: var(--olm-white);
  border: 1px solid var(--olm-line);
}

.footer-map-pin { color: var(--olm-primary); }
.footer-map-text { color: var(--olm-body); }

.btn-footer-map {
  background: var(--olm-primary);
  color: #fff !important;
}

.btn-footer-map:hover { background: var(--olm-primary-dark); color: #fff !important; }

/* The legal strip matches the dark utility top bar */
.terms {
  background-color: var(--olm-bar-dark, #5e0329) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 0 !important;
}

.terms a,
.terms p,
.terms li,
.terms .terms-copyright {
  color: #ffffff !important;
}

.terms a:hover {
  color: #ffd9e4 !important;
  text-decoration: underline !important;
}

/* ---- Lakhpati Didi modal, and every other split modal -------------------
   The Lakhpati modal was a narrow modal-lg with the copy squeezed into a column
   beside a panel of empty space. It is now a wide stage with the artwork
   floated to the right of the text so the paragraphs run alongside it. Every
   modal the splitter touches — Capacity Building, Livelihoods, Marketing, KMC,
   Convergence — is dressed the same way, so one shell serves all of them.

   `.olm-modal--split` is added by olm-ui.js when a modal is actually split, and
   removed again when the same modal opens with content that has no imagery. */
.Lakhpati_modal .modal-dialog,
.olm-modal--split .modal-dialog {
  max-width: min(90vw, 1440px);
  width: min(90vw, 1440px);
  margin: 3vh auto;
}

.Lakhpati_modal .modal-content,
.olm-modal--split .modal-content {
  max-height: 92vh;
}

/* The Lakhpati modal alone holds a 16:9 stage: its swiper needs the room even
   when the copy is short. The content modals size to their own content. */
.Lakhpati_modal .modal-content {
  min-height: min(86vh, calc(min(90vw, 1440px) * 9 / 16));
}

.Lakhpati_modal .modal-header,
.olm-modal--split .modal-header {
  background: var(--olm-primary);
  border-bottom: none;
  padding: var(--olm-space-4) var(--olm-space-5);
}

.Lakhpati_modal .modal-title,
.olm-modal--split .modal-title {
  color: #fff;
  font-size: var(--olm-fs-heading);
  font-weight: 700;
}

.Lakhpati_modal .modal-header .btn-close,
.olm-modal--split .modal-header .btn-close {
  background-color: rgba(255, 255, 255, .18);
  border-radius: var(--olm-r-pill);
  padding: 10px;
  filter: brightness(0) invert(1);
  opacity: 1;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.Lakhpati_modal .modal-header .btn-close:hover,
.olm-modal--split .modal-header .btn-close:hover { background-color: rgba(255, 255, 255, .32); }

.Lakhpati_modal .modal-body,
.olm-modal--split .modal-body { padding: var(--olm-space-5) var(--olm-space-6); }

/* Swiper container and image sizing for Lakhpati Didi modal */
.Lakhpati_modal .LakhpatiSectionSwiper {
  position: relative;
  padding-top: 0 !important;
}

.Lakhpati_modal .LakhpatiSectionSwiper .swiper-slide {
  height: auto;
}

.Lakhpati_modal .LakhpatiSectionSwiper img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  border-radius: var(--olm-r-md) !important;
  display: block;
}

.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-next,
.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-prev {
  width: 32px !important;
  height: 32px !important;
  top: auto;
  bottom: 10px;
  transform: none;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-sm);
}

.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-prev { left: auto; right: 52px; }
.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-next { right: 12px; }

.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-next::after,
.Lakhpati_modal .LakhpatiSectionSwiper .swiper-button-prev::after { font-size: 12px !important; }

@media (max-width: 767.98px) {
  .Lakhpati_modal .modal-dialog { max-width: 96vw; width: 96vw; margin: 2vh auto; }
  .Lakhpati_modal .modal-content { min-height: 0; }
  .Lakhpati_modal .modal-body { padding: var(--olm-space-4); }

  .Lakhpati_modal .olm-modal-split__media {
    float: none;
    width: 100%;
    margin: 0 0 var(--olm-space-4);
  }
}


/* ==========================================================================
   26. Rotating chakra placements
   --------------------------------------------------------------------------
   The department's own chakra artwork, turning slowly, placed once or twice
   per band. Rendered from resources/views/frontend/partials/chakra.blade.php
   so the markup is written in one place.
   ========================================================================== */

.olm-chakra {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* Readable as a chakra, visible in background while sitting behind body copy. */
  opacity: .38;
  /* Tint the artwork to the brand maroon whatever its own colours are. */
  filter: brightness(0) saturate(100%) invert(13%) sepia(58%) saturate(3466%)
          hue-rotate(324deg) brightness(93%) contrast(97%);
  /* .rotateme in custom.css supplies a 10s spin. Every wheel on the page turns
     at the same slow rate instead, so none of them draws the eye. */
  animation-duration: 110s !important;
  animation-timing-function: linear !important;
}

/* The Quick Links wheel predates the partial and still carried the legacy 10s
   spin, so it turned eleven times faster than every other mark. */
.external_link_section img.rotateme.roate-event-bg,
img.rotateme {
  animation-duration: 110s !important;
  animation-timing-function: linear !important;
}

/* Several bands force img { width: 100% } on their own cards, which stretched
   the watermark across the whole section, so the sizes are pinned. */
img.olm-chakra { height: auto !important; max-width: none !important; }

img.olm-chakra,
img.olm-chakra--sm,
img.olm-chakra--md,
img.olm-chakra--lg { width: clamp(260px, 28vw, 420px) !important; }

/* Every mark sits inside its band. The earlier negative offsets pushed most of
   each wheel past the section edge, where overflow:hidden clipped it away —
   nineteen of thirty were under a third visible and several were gone entirely. */
.olm-chakra--left        { left: 1.5%;  top: 50%; transform: translateY(-50%); }
.olm-chakra--right       { right: 1.5%; top: 50%; transform: translateY(-50%); }
.olm-chakra--top-left    { left: 2.5%;  top: 5%; }
.olm-chakra--top-right   { right: 2.5%; top: 5%; }
.olm-chakra--bottom-left { left: 2.5%;  bottom: 5%; }
.olm-chakra--bottom-right{ right: 2.5%; bottom: 5%; }

/* Quarter positions, for bands tall enough to carry a third or fourth mark
   without it landing on one of the first two. */
.olm-chakra--upper-left  { left: 16%;  top: 6%; }
.olm-chakra--upper-right { right: 18%; top: 6%; }
.olm-chakra--lower-left  { left: 20%;  bottom: 6%; }
.olm-chakra--lower-right { right: 16%; bottom: 6%; }

/* Edge positions: half at the left or right edge */
.olm-chakra--edge-left        { left: -180px; top: 50%; transform: translateY(-50%); }
.olm-chakra--edge-right       { right: -180px; top: 50%; transform: translateY(-50%); }
.olm-chakra--edge-top-left    { left: -160px; top: -30px; }
.olm-chakra--edge-top-right   { right: -160px; top: -30px; }
.olm-chakra--edge-bottom-left { left: -160px; bottom: -40px; }
.olm-chakra--edge-bottom-right{ right: -160px; bottom: -40px; }

/* The news ticker is only a bar tall, so its pair is scaled to fit inside it. */
.latestNews .olm-chakra {
  width: 46px !important;
  top: 50%;
}

.latestNews .olm-chakra--left  { left: 8px; }
.latestNews .olm-chakra--right { right: 8px; }

/* The spin uses transform, so the centring offset above has to live in the
   keyframes for the two vertically centred placements. */
.olm-chakra--left,
.olm-chakra--right,
.olm-chakra--edge-left,
.olm-chakra--edge-right { animation-name: olmChakraSpinCentred !important; }

@keyframes olmChakraSpinCentred {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* On the dark news ticker the maroon tint would disappear, so that one mark is
   painted white instead. */
.latestNews .olm-chakra {
  filter: brightness(0) invert(1);
  opacity: .35;
}

/* Announcements / Ticker typography and badge reset */
.latestNews .badge-info,
.latestNews .olm-ticker-wrap {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.latestNews .olm-ticker-wrap,
.latestNews .marquee {
  width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.latestNews .marquee p {
  display: inline-block !important;
  white-space: nowrap !important;
  padding-left: 100% !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: inherit !important;
  animation: scroll-left 28s linear infinite !important;
  will-change: transform;
}

.latestNews .marquee span,
.latestNews .marquee a,
.latestNews .olm-ticker-text,
.latestNews .olm-ticker-sep,
.latestNews span {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  top: auto !important;
  position: static !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  display: inline !important;
  line-height: inherit !important;
  align-items: baseline !important;
}

.latestNews .olm-ticker-sep {
  opacity: 0.7;
}

.latestNews .marquee a:hover {
  text-decoration: underline !important;
  color: #fff !important;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Bands that hold a chakra need a stacking context and their content lifted
   above it. */
.latestNews,
.aboutus_section,
.activity_section,
.project_section,
.news_highlight_section,
.social_section,
.social_tab,
.gallery_section,
.external_link_section,
.our_brand_logo { position: relative; overflow: hidden; }

/* project_section uses overflow: clip so programmatic child scrolling cannot shift the section horizontally */
.project_section { overflow: clip !important; overflow-x: clip !important; }

.latestNews > .container,
.external_link_section > .container { position: relative; z-index: 1; }

.aboutus_section > .container,
.activity_section > .container,
.project_section > .container,
.news_highlight_section > .container,
.social_section > .container,
.gallery_section > .container,
.our_brand_logo > .logo_items { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .olm-chakra { animation: none !important; }
}

@media (prefers-contrast: more) {
  .olm-chakra { display: none; }
}

/* One smaller mark per band on a phone. */
@media (max-width: 767.98px) {
  .olm-chakra { opacity: .30; }
  img.olm-chakra,
  img.olm-chakra--sm,
  img.olm-chakra--md,
  img.olm-chakra--lg { width: clamp(170px, 24vw, 230px) !important; }
  .olm-chakra--second { display: none; }
}

/* ==========================================================================
   27. Section eyebrow and the Activities mosaic
   ========================================================================== */

/* ---- Shared eyebrow ------------------------------------------------------
   A small brand label above a heading. Used by the Activities band and by the
   About intro, so both read the same way. */
.olm-eyebrow {
  display: block;
  font-size: var(--olm-fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olm-primary);
  margin-bottom: var(--olm-space-2);
}

/* The About block already carried a "Welcome to" line; the eyebrow sits above
   it and that line becomes the softer sub-label. */
.aboutContent > .olm-eyebrow + span,
.eduexplore_left-content > .olm-eyebrow + span {
  /* Body ink rather than muted grey: on the pink surface the muted tone fell
     to 4.31:1, just under the 4.5 floor. */
  color: var(--olm-body) !important;
  letter-spacing: .04em;
  font-weight: 600;
}

/* ---- Section head: label and heading left, action right ----------------- */
.olm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--olm-space-5);
  margin-bottom: clamp(20px, 2.6vw, 34px);
  text-align: left;
}

.olm-section-head__title {
  margin: 0;
  text-align: left;
}

.olm-section-head__title::after { left: 0; transform: none; }

.olm-activity-explore {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  white-space: nowrap;
}

.olm-activity-explore::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-activity-explore:hover::after { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .olm-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--olm-space-4);
  }
}

/* ---- Mosaic -------------------------------------------------------------
   One tall feature panel, a medium column of two, and a narrow column of
   three. Anything beyond six records keeps stacking in the narrow column. */
.olm-activity-mosaic {
  display: grid;
  grid-template-columns: 1.55fr 1.25fr 0.95fr;
  /* Six equal rows: the feature spans all of them, the two middle panels take
     three each, and the three narrow panels take two each. */
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(10px, 1vw, 16px);
  height: clamp(340px, 30vw, 420px);
}

.olm-activity.is-slot-0 { grid-column: 1; grid-row: 1 / 7; }
.olm-activity.is-slot-1 { grid-column: 2; grid-row: 1 / 4; }
.olm-activity.is-slot-2 { grid-column: 2; grid-row: 4 / 7; }
.olm-activity.is-slot-3 { grid-column: 3; grid-row: 1 / 3; }
.olm-activity.is-slot-4 { grid-column: 3; grid-row: 3 / 5; }
.olm-activity.is-slot-5 { grid-column: 3; grid-row: 5 / 7; }

.olm-activity {
  position: relative;
  border-radius: var(--olm-r-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--olm-grey);
  isolation: isolate;
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

/* The feature and the two middle panels carry the larger corner radius. */
.olm-activity.is-feature,
.olm-activity.is-mid { border-radius: var(--olm-r-lg); }

.olm-activity:hover,
.olm-activity:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--olm-shadow-md);
  outline: none;
}

/* The legacy sheet pins .activity_section img to 200px, which left the taller
   panels half empty, so these dimensions are forced. */
.activity_section .olm-activity .olm-activity__img,
.olm-activity__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--olm-t-slow) var(--olm-ease),
              opacity var(--olm-t-base) var(--olm-ease);
}

.olm-activity:hover .olm-activity__img { transform: scale(1.04); }

/* Scrim, so the caption stays readable over any photograph. */
.olm-activity::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(12, 8, 10, .82) 0%,
              rgba(12, 8, 10, .55) 34%,
              rgba(12, 8, 10, .08) 66%,
              rgba(12, 8, 10, 0) 100%);
  pointer-events: none;
}

.olm-activity__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(12px, 1.2vw, 22px);
  color: #fff;
  /* The caption covers the whole panel, so it must not swallow the click that
     opens the image. The panel itself handles it. */
  pointer-events: none;
}

.olm-activity__title {
  margin: 0 0 6px;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.olm-activity__desc {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The feature and middle panels have room for larger type. */
.olm-activity.is-feature .olm-activity__title,
.olm-activity.is-mid .olm-activity__title { font-size: .92rem; }

.olm-activity.is-feature .olm-activity__desc,
.olm-activity.is-mid .olm-activity__desc { font-size: .9rem; }

.olm-activity.is-feature .olm-activity__desc { -webkit-line-clamp: 4; }

/* Records past the sixth are not part of the mosaic; they still take their
   turn in the feature slot as the rotation comes round. */
.olm-activity.is-spare { display: none; }

@media (max-width: 991.98px) {
  .olm-activity-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
    grid-auto-rows: 170px;
  }

  .olm-activity[class*="is-slot-"] { grid-column: auto; grid-row: span 1; }
  .olm-activity.is-slot-0 { grid-column: 1 / -1; grid-row: span 2; }
}

@media (max-width: 575.98px) {
  .olm-activity-mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 190px; }
  .olm-activity.is-slot-0 { grid-row: span 1; }
}

/* ==========================================================================
   28. Wall of Fame
   --------------------------------------------------------------------------
   One wide lead story with its opening lines pulled out as a quote, then the
   remaining stories as portrait cards.
   ========================================================================== */

/* Sub-label under a section heading, e.g. "Our Changemakers". */
.olm-section-head__sub {
  display: block;
  margin-top: -4px;
  font-size: var(--olm-fs-small);
  color: var(--olm-muted);
}

.olm-stories {
  display: grid;
  /* The lead takes about two-fifths of the row; the rest share what is left. */
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
  align-items: stretch;
}

.olm-story {
  display: flex;
  flex-direction: column;
  background: var(--olm-white);
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
  overflow: hidden;
  box-shadow: var(--olm-shadow-sm);
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

.olm-story:hover {
  transform: translateY(-3px);
  box-shadow: var(--olm-shadow-md);
}

/* ---- Lead story: image beside a tinted panel --------------------------- */
.olm-story--lead {
  grid-column: 1;
  flex-direction: row;
  background: var(--olm-cream);
}

.olm-story--lead .olm-story__media {
  flex: 0 0 45%;
  aspect-ratio: auto;
}

.olm-story--lead .olm-story__panel {
  flex: 1 1 auto;
  justify-content: center;
  padding: clamp(18px, 1.8vw, 30px);
}

.olm-story__mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  line-height: .8;
  color: var(--olm-primary);
  margin-bottom: var(--olm-space-2);
}

.olm-story__quote {
  margin: 0 0 var(--olm-space-4);
  font-size: .96rem;
  line-height: 1.6;
  color: var(--olm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Media -------------------------------------------------------------- */
.olm-story__media {
  position: relative;
  overflow: hidden;
  background: var(--olm-grey);
  aspect-ratio: 4 / 3;
}

/* The legacy sheet pins success-story images to a fixed 185px. */
.olm-story__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: zoom-in;
  transition: transform var(--olm-t-slow) var(--olm-ease);
}

.olm-story:hover .olm-story__media img { transform: scale(1.04); }

/* ---- Panel -------------------------------------------------------------- */
.olm-story__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--olm-space-4);
}

.olm-story__name {
  margin: 0 0 2px;
  font-size: var(--olm-fs-title);
  font-weight: 700;
  color: var(--olm-ink);
  line-height: 1.3;
}

.olm-story__meta {
  margin: 0;
  font-size: var(--olm-fs-small);
  line-height: 1.45;
  color: var(--olm-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.olm-story--lead .olm-story__name { font-size: 1.05rem; }
.olm-story--lead .olm-story__meta { -webkit-line-clamp: 3; }

.olm-story__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--olm-space-4);
  font-size: var(--olm-fs-small);
  font-weight: 700;
  color: var(--olm-primary);
  text-decoration: none;
  align-self: flex-start;
}

/* Plain arrow rather than an icon font: the .fa font-family is overridden on
   this page, so the glyph fell back to a missing-character box. */
.olm-story__cue::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-story__cue:hover { color: var(--olm-primary-dark); }
.olm-story__cue:hover::after { transform: translateX(4px); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .olm-stories { grid-template-columns: repeat(3, 1fr); }
  .olm-story--lead { grid-column: 1 / -1; }
  .olm-story--lead .olm-story__media { flex-basis: 40%; }
}

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

@media (max-width: 575.98px) {
  .olm-stories { grid-template-columns: 1fr; }
  .olm-story--lead { flex-direction: column; }
  .olm-story--lead .olm-story__media { flex-basis: auto; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   29. Section header
   --------------------------------------------------------------------------
   One header for every band: heading left with a slogan beneath it, and an
   optional text link on the right. Replaces the centred heading with the
   underline rule that each section used to draw for itself.
   ========================================================================== */

.olm-head {
  display: flex;
  /* Top-aligned: the actions track the heading line. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--olm-space-5);
  margin-bottom: clamp(12px, 1.3vw, 18px);
  text-align: left;
}

.olm-head__text { min-width: 0; }

/* Arrows and the view control travel together on the right. */
.olm-head__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.olm-head__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.olm-head__navbtn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--olm-line-strong);
  border-radius: var(--olm-r-sm);
  background: var(--olm-cream-soft);
  color: var(--olm-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              border-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.olm-head__navbtn:hover {
  background: var(--olm-cream-deep);
  border-color: var(--olm-primary);
  color: var(--olm-primary-dark);
}

.olm-head__navbtn:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 2px;
}

/* Nothing to move: shown, but plainly out of action. */
.olm-head__navbtn[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* The arrow glyphs are drawn as text so no icon font is involved. */
.olm-head__navbtn::before { content: "\2039"; font-size: 1.35em; }
.olm-head__navbtn[data-olm-nav-next]::before { content: "\203A"; }

/* The legacy sheet sizes h2 inside several bands, so these are forced. */
.olm-head__title,
.activity_section .olm-head__title,
.project_section .olm-head__title,
.news_highlight_section .olm-head__title,
.social_section .olm-head__title,
.gallery_section .olm-head__title,
.external_link_section .olm-head__title {
  margin: 0 !important;
  color: var(--olm-primary);
  /* Lands near 30px on a laptop: a section label, not a page title. */
  font-size: clamp(1.5rem, 1.24rem + 0.78vw, 1.95rem) !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  /* No rule underneath: the slogan does that job now. */
  padding: 0 !important;
  background: none;
}

.olm-head__title::after { content: none; }

/* Sits tight under the heading — the two are one unit, not two lines that
   happen to be near each other. Legacy paragraph margins are cleared. */
.olm-head__slogan,
.activity_section .olm-head__slogan,
.project_section .olm-head__slogan,
.news_highlight_section .olm-head__slogan,
.social_section .olm-head__slogan,
.gallery_section .olm-head__slogan,
.external_link_section .olm-head__slogan {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  font-size: var(--olm-fs-small);
  line-height: 1.35;
  /* Body ink, not muted grey: on the cream and pink bands the muted tone
     measured 4.31-4.43:1, just under the 4.5 floor. */
  color: var(--olm-body);
}

/* One control, used by every band: a compact cream button with a maroon label.
   The same rules drive the standalone .view_more links further down the page so
   there is only one "view" affordance on the homepage. */
.olm-head__cta,
.view_more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--olm-line-strong);
  border-radius: var(--olm-r-sm);
  background: var(--olm-cream-soft);
  box-shadow: none;
  font-size: var(--olm-fs-small);
  font-weight: 700;
  color: var(--olm-primary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              border-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.view_more::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.view_more:hover::after { transform: translateX(4px); }

.olm-head__cta::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-head__cta:hover,
.view_more:hover {
  background: var(--olm-cream-deep);
  border-color: var(--olm-primary);
  color: var(--olm-primary-dark);
}

.olm-head__cta:hover::after { transform: translateX(4px); }

.olm-head__cta:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 3px;
  border-radius: var(--olm-r-xs);
}

@media (max-width: 575.98px) {
  .olm-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--olm-space-3);
  }
}

/* The Quick Links heading was styled separately; it uses the shared header now. */
.external_link_section .olm-head__title { color: var(--olm-primary); }

/* The legacy sheet gives .view_more its own pill; this wins it back. */
.view_more,
.gallery_section .view_more,
.project_section .view_more {
  background: var(--olm-cream-soft) !important;
  color: var(--olm-primary) !important;
  border-radius: var(--olm-r-sm) !important;
  padding: 7px 14px !important;
  font-size: var(--olm-fs-small) !important;
}

/* The Explore control keeps its hook for the script; the look is the shared one. */
.olm-head__cta.olm-activity-explore,
.olm-head__cta.olm-scheme-explore,
.olm-head__cta.olm-highlight-explore { box-shadow: none; }
.olm-head__cta.olm-activity-explore:hover,
.olm-head__cta.olm-scheme-explore:hover,
.olm-head__cta.olm-highlight-explore:hover { box-shadow: none; transform: none; }

/* --------------------------------------------------------------------------
   29a. Schemes: one scheme on a stage, the set as a thumbnail strip
   The photograph runs on the left with the name and its link beside it. The
   strip beneath swaps which scheme is on the stage.
   -------------------------------------------------------------------------- */

.olm-scheme {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8vw, 36px);
  padding-top: clamp(8px, 1vw, 16px);
  width: 100%;
}

.olm-scheme__stage {
  position: relative;
  width: 100%;
}

.olm-scheme__panel {
  display: none;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  padding: clamp(18px, 2.2vw, 30px);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}

.olm-scheme__panel.is-active {
  display: flex;
  animation: olmSchemeIn 320ms var(--olm-ease) both;
}

@keyframes olmSchemeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.olm-scheme__media {
  flex: 0 0 54%;
  max-width: 54%;
  border-radius: var(--olm-r-lg);
  overflow: hidden;
  background: var(--olm-cream);
  box-shadow: var(--olm-shadow-sm);
  cursor: zoom-in;
}

.olm-scheme__media img {
  display: block;
  width: 100% !important;
  height: clamp(280px, 25vw, 360px) !important;
  object-fit: cover;
  transition: transform var(--olm-t-slow) var(--olm-ease);
}

.olm-scheme__media:hover img { transform: scale(1.03); }

.olm-scheme__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6px, 1vw, 16px) clamp(8px, 1.2vw, 20px);
}

.olm-scheme__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olm-primary);
  background: rgba(187, 52, 90, 0.08);
  border: 1px solid rgba(187, 52, 90, 0.18);
  border-radius: var(--olm-r-pill);
  padding: 4px 12px;
  margin-bottom: 12px;
}

.olm-scheme__name {
  margin: 0 0 10px !important;
  color: var(--olm-primary);
  font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2.1rem) !important;
  font-weight: 700;
  line-height: 1.25;
}

.olm-scheme__subtitle {
  margin: 0 0 12px !important;
  color: #1e2329;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem) !important;
  font-weight: 600;
  line-height: 1.5;
}

.olm-scheme__desc {
  margin: 0 0 22px !important;
  color: #555c63;
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1.02rem) !important;
  line-height: 1.65;
}

.olm-scheme__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 22px;
  background: var(--olm-primary);
  color: #ffffff !important;
  border-radius: var(--olm-r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(187, 52, 90, 0.25);
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              transform var(--olm-t-fast) var(--olm-ease),
              box-shadow var(--olm-t-fast) var(--olm-ease);
}

.olm-scheme__cta:hover {
  background: var(--olm-primary-dark);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(187, 52, 90, 0.35);
}

/* ---- Thumbnail strip ---- */

.olm-scheme__thumbs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(20px, 2.5vw, 36px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 6px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(187, 52, 90, 0.28) rgba(187, 52, 90, 0.05);
}

.olm-scheme__thumbs::-webkit-scrollbar {
  height: 6px;
}

.olm-scheme__thumbs::-webkit-scrollbar-track {
  background: rgba(187, 52, 90, 0.05);
  border-radius: 999px;
}

.olm-scheme__thumbs::-webkit-scrollbar-thumb {
  background: rgba(187, 52, 90, 0.25);
  border-radius: 999px;
}

.olm-scheme__thumbs::-webkit-scrollbar-thumb:hover {
  background: rgba(187, 52, 90, 0.45);
}

.olm-scheme__thumb {
  flex: 1 0 240px;
  min-width: 230px;
  max-width: 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  transition: transform var(--olm-t-fast) var(--olm-ease);
}

.olm-scheme__thumb-media {
  display: block;
  width: 100%;
  border: 2.5px solid transparent;
  border-radius: var(--olm-r-md);
  overflow: hidden;
  box-shadow: var(--olm-shadow-sm);
  transition: border-color var(--olm-t-fast) var(--olm-ease),
              transform var(--olm-t-fast) var(--olm-ease),
              box-shadow var(--olm-t-fast) var(--olm-ease);
}

.olm-scheme__thumb img {
  display: block;
  width: 100% !important;
  height: clamp(100px, 9vw, 135px) !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.olm-scheme__thumb-name {
  display: block;
  margin-top: 10px;
  font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
  font-weight: 600;
  color: var(--olm-body);
  line-height: 1.35;
  transition: color var(--olm-t-fast) var(--olm-ease);
}

.olm-scheme__thumb:hover .olm-scheme__thumb-media {
  transform: translateY(-3px);
  box-shadow: var(--olm-shadow-md);
}

.olm-scheme__thumb.is-active .olm-scheme__thumb-media {
  border-color: var(--olm-primary);
  box-shadow: 0 4px 12px rgba(187, 52, 90, 0.2);
}

.olm-scheme__thumb.is-active .olm-scheme__thumb-name {
  color: var(--olm-primary);
  font-weight: 700;
}

.olm-scheme__thumb.is-active::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 6px auto 0;
  border-radius: var(--olm-r-pill);
  background: var(--olm-primary);
}

.olm-scheme__thumb:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 3px;
  border-radius: var(--olm-r-md);
}

@media (max-width: 991.98px) {
  .olm-scheme__panel.is-active {
    flex-direction: column;
    align-items: stretch;
  }
  .olm-scheme__media {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
  .olm-scheme__thumbs {
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   29a-2. Photo gallery: responsive cards in a smooth horizontal track
   Connected to header navigation arrows; each card has crisp photography,
   subtle elevation, zoom hint overlay, and full lightbox integration.
   -------------------------------------------------------------------------- */

.olm-gallery-strip {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 4px 18px;
  margin: 6px -4px 0;
}

.olm-gallery-strip::-webkit-scrollbar { display: none; }

/* 4 cards on desktop, 3 on laptop, 2 on tablet, 1+ on mobile */
.olm-gallery-card {
  flex: 0 0 calc((100% - 3 * 20px) / 4);
  max-width: calc((100% - 3 * 20px) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--olm-r-md, 14px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.olm-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(122, 22, 43, 0.12);
  border-color: rgba(122, 22, 43, 0.25);
}

.olm-gallery-card:focus-visible {
  outline: 2px solid var(--olm-primary, #7a162b);
  outline-offset: 2px;
}

.olm-gallery-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--olm-cream, #f9f8f6);
}

.olm-gallery-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s var(--olm-ease, ease);
}

.olm-gallery-card:hover .olm-gallery-card__media img {
  transform: scale(1.05);
}

.olm-gallery-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.olm-gallery-card:hover .olm-gallery-card__overlay {
  opacity: 1;
}

.olm-gallery-card__zoom-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--olm-primary, #7a162b);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: scale(0.85);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}

.olm-gallery-card:hover .olm-gallery-card__zoom-btn {
  transform: scale(1);
}

.olm-gallery-card__body {
  padding: 12px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  flex-grow: 1;
}

.olm-gallery-card__info {
  min-width: 0;
  flex: 1;
}

.olm-gallery-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--olm-primary, #7a162b);
  background: rgba(122, 22, 43, 0.07);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.olm-gallery-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.olm-gallery-card:hover .olm-gallery-card__title {
  color: var(--olm-primary, #7a162b);
}

.olm-gallery-card__cue {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.olm-gallery-card:hover .olm-gallery-card__cue {
  color: var(--olm-primary, #7a162b);
  transform: translateX(2px);
}

/* Responsive tracks */
@media (max-width: 1199.98px) {
  .olm-gallery-strip {
    gap: 16px;
  }
  .olm-gallery-card {
    flex: 0 0 calc((100% - 2 * 16px) / 3);
    max-width: calc((100% - 2 * 16px) / 3);
  }
}

@media (max-width: 991.98px) {
  .olm-gallery-card {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
}

@media (max-width: 575.98px) {
  .olm-gallery-strip {
    gap: 12px;
    padding-bottom: 12px;
  }
  .olm-gallery-card {
    flex: 0 0 calc(85% - 12px);
    max-width: calc(85% - 12px);
  }
}

/* ==========================================================================
   29c. Photo and Video Gallery (Flanking Showcase & Dual-Track Conveyor)
   Matches layout with 2 large showcase cards flanking a two-row thumbnail grid.
   Features continuous right-to-left systematic shift transition,
   zoom on hover for photos, pulsing play button for videos, and video modal.
   ========================================================================== */

.olm-pv-gallery {
  position: relative;
  overflow: hidden;
  padding: 30px 0 24px !important;
}

.olm-pv-stage {
  display: grid;
  grid-template-columns: 390px 1fr 390px;
  gap: 20px;
  align-items: stretch;
  margin-top: 6px;
  margin-bottom: 16px;
  position: relative;
  user-select: none;
}

/* Showcase Columns */
.olm-pv-col--left,
.olm-pv-col--right {
  display: flex;
  flex-direction: column;
}

.olm-pv-card--showcase {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 366px;
  border-radius: var(--olm-r-lg, 16px);
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.olm-pv-card--showcase:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(122, 22, 43, 0.2);
  border-color: rgba(122, 22, 43, 0.35);
}

.olm-pv-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.olm-pv-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.olm-pv-card:hover .olm-pv-card__img {
  transform: scale(1.06);
}

/* Center Dual Tracks Column */
.olm-pv-col--center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  position: relative;
}

.olm-pv-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--olm-r-md, 14px);
  padding: 2px 0;
  container-type: inline-size;
}

.olm-pv-track {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

/* Thumbnail Cards inside Tracks (exactly 2 columns visible in center) */
.olm-pv-card--thumb {
  flex: 0 0 230px;
  width: 230px;
  flex: 0 0 calc((100cqw - 16px) / 2);
  width: calc((100cqw - 16px) / 2);
  height: 175px;
  position: relative;
  border-radius: var(--olm-r-md, 14px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.olm-pv-card--thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(122, 22, 43, 0.16);
  border-color: rgba(122, 22, 43, 0.3);
  z-index: 2;
}

/* Overlays & Badges */
.olm-pv-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 1;
}

/* Card with NO title: completely remove dark gradient and unwanted shadow */
.olm-pv-card.no-title,
.olm-pv-card--showcase.no-title,
.olm-pv-card--thumb.no-title {
  box-shadow: none !important;
}

.olm-pv-card.no-title .olm-pv-card__overlay,
.olm-pv-card--showcase.no-title .olm-pv-card__overlay,
.olm-pv-card--thumb.no-title .olm-pv-card__overlay {
  background: transparent !important;
}

.olm-pv-card.no-title:hover .olm-pv-card__overlay,
.olm-pv-card--showcase.no-title:hover .olm-pv-card__overlay,
.olm-pv-card--thumb.no-title:hover .olm-pv-card__overlay {
  background: rgba(0, 0, 0, 0.12) !important;
}

.olm-pv-card.no-title .olm-pv-card__caption {
  display: none !important;
}

/* Card WITH title: keep gradient shadow so title text is crisp and legible */
.olm-pv-card.has-title .olm-pv-card__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.85) 100%);
}

.olm-pv-card--thumb.has-title .olm-pv-card__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.82) 100%);
}

.olm-pv-card.has-title:hover .olm-pv-card__overlay {
  background: linear-gradient(180deg, rgba(122,22,43,0.15) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.92) 100%);
}

/* Hide Photo/Video overlay badges & tags */
.olm-pv-card__badge-wrap,
.olm-pv-badge,
.olm-pv-card__tag {
  display: none !important;
}

/* Play Button Styling with Pulsing Ring */
.olm-pv-play-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(122, 22, 43, 0.95);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(122, 22, 43, 0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.3s ease;
  z-index: 2;
}

.olm-pv-card--thumb .olm-pv-play-btn {
  width: 44px;
  height: 44px;
}

.olm-pv-card--thumb .olm-pv-play-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.olm-pv-play-btn svg {
  margin-left: 3px;
}

.olm-pv-play-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: olmPlayPulse 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

@keyframes olmPlayPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  60% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.olm-pv-card:hover .olm-pv-play-btn {
  transform: scale(1.12);
  background: #a31d3b;
  box-shadow: 0 8px 26px rgba(163, 29, 59, 0.6);
}

/* Zoom Button for Photos */
.olm-pv-zoom-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #7a162b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, background-color 0.2s ease;
  z-index: 2;
}

.olm-pv-card--thumb .olm-pv-zoom-btn {
  width: 40px;
  height: 40px;
}

.olm-pv-card:hover .olm-pv-zoom-btn {
  opacity: 1;
  transform: scale(1);
}

/* Caption and Titles */
.olm-pv-card__caption {
  position: relative;
  z-index: 2;
  padding: 16px 18px;
  width: 100%;
}

.olm-pv-card--thumb .olm-pv-card__caption {
  padding: 10px 12px;
}

.olm-pv-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.olm-pv-card--thumb .olm-pv-card__title {
  font-size: 0.82rem;
  -webkit-line-clamp: 1;
}

/* Video Modal Styling */
.olm-video-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.olm-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.olm-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.olm-video-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(92vw, 900px);
  max-width: 900px;
  margin: auto;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.olm-video-modal.is-open .olm-video-modal__dialog {
  transform: scale(1);
}

.olm-video-modal__content {
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.olm-video-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
}

.olm-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.olm-video-modal__body {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  background: #000000;
}

.olm-video-modal__body iframe,
.olm-video-modal__body video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.olm-video-modal__caption {
  padding: 16px 20px;
  background: #1e293b;
}

.olm-video-modal__caption h4 {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

/* Responsive Rules for Gallery Stage */
@media (max-width: 1199.98px) {
  .olm-pv-stage {
    grid-template-columns: 310px 1fr 310px;
    gap: 16px;
  }
  .olm-pv-card--showcase {
    min-height: 330px;
  }
  .olm-pv-card--thumb {
    height: 157px;
    flex: 0 0 calc((100% - 14px) / 2);
    width: calc((100% - 14px) / 2);
  }
}

@media (max-width: 991.98px) {
  .olm-pv-stage {
    grid-template-columns: 1fr 1fr;
  }
  .olm-pv-col--left {
    grid-column: 1;
  }
  .olm-pv-col--right {
    grid-column: 2;
  }
  .olm-pv-col--center {
    grid-column: 1 / span 2;
    order: 3;
    margin-top: 10px;
  }
  .olm-pv-card--showcase {
    min-height: 270px;
  }
  .olm-pv-card--thumb {
    height: 150px;
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
  }
}

@media (max-width: 639.98px) {
  .olm-pv-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .olm-pv-card--showcase {
    min-height: 220px;
  }
  .olm-pv-col--right {
    display: none;
  }
  .olm-pv-track-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .olm-pv-track-wrapper::-webkit-scrollbar {
    display: none;
  }
  .olm-pv-card--thumb {
    flex: 0 0 190px;
    width: 190px;
    height: 125px;
  }
}

/* --------------------------------------------------------------------------
   29b. Wall of Fame rotation
   All four stories carry the same markup; the script decides which one is in
   the lead panel, so a card can be promoted without rebuilding it.
   -------------------------------------------------------------------------- */

/* The row matters as much as the column. Placing a card in column 4 without
   naming its row let grid auto-placement start a second row for the cards that
   follow it in the markup — so one press of Next split the strip in two. Every
   slot is pinned to row 1, whatever order the cards sit in. */
@media (min-width: 1201px) {
  .olm-story.is-wof-0 { grid-column: 1; grid-row: 1; }
  .olm-story.is-wof-1 { grid-column: 2; grid-row: 1; }
  .olm-story.is-wof-2 { grid-column: 3; grid-row: 1; }
  .olm-story.is-wof-3 { grid-column: 4; grid-row: 1; }
}

/* Below that the grid has fewer columns than there are slots, so the cards
   flow in their own order rather than being forced into a column that the
   grid does not have. */
@media (max-width: 1200px) {
  .olm-story.is-wof-0 { order: 0; }
  .olm-story.is-wof-1 { order: 1; }
  .olm-story.is-wof-2 { order: 2; }
  .olm-story.is-wof-3 { order: 3; }
}

.olm-story.is-wof-spare { display: none; }

/* The shift between slots is animated by script; this keeps the card from
   fighting the movement with its own hover transition. */
.olm-stories.is-shifting .olm-story { pointer-events: none; }
.olm-stories.is-shifting .olm-story:hover { transform: none; }

/* The pulled-out quote belongs to the lead panel only — the same record still
   supplies it when that card takes its turn in the lead. */
.olm-story:not(.olm-story--lead) .olm-story__mark,
.olm-story:not(.olm-story--lead) .olm-story__quote { display: none; }

/* The cue reads "Read Full Story" in the lead panel and "Read story" elsewhere;
   both labels ship with every card so promotion needs no rewrite. */
.olm-story__cue-lead,
.olm-story--lead .olm-story__cue-rest { display: none; }
.olm-story--lead .olm-story__cue-lead { display: inline; }

@media (min-width: 992px) {
  .olm-story { transition: grid-column 0s; }
}

@media (max-width: 991.98px) {
  .olm-story.is-wof-0,
  .olm-story.is-wof-1,
  .olm-story.is-wof-2,
  .olm-story.is-wof-3 { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   29c. Band spacing
   -------------------------------------------------------------------------- */

.activity_section {
  padding-top: clamp(26px, 2.8vw, 44px) !important;
  padding-bottom: clamp(26px, 2.8vw, 44px) !important;
}

@media (max-width: 575.98px) {
  .olm-head__actions { align-self: flex-start; }
}

/* ==========================================================================
   30. Highlights
   --------------------------------------------------------------------------
   Latest News as a column of cards on the left, then the highlights as image
   panels with the caption over them — the same treatment the Activities
   mosaic uses.
   ========================================================================== */

.olm-highlights {
  --olm-hl-gap: clamp(20px, 2.4vw, 36px);

  display: grid;
  /* The news column carries a headline plus a date on every card, so it needs
     more room than a plain list did. */
  grid-template-columns: 348px 1fr;
  gap: var(--olm-hl-gap);
  /* Both panels take the height of the taller one. */
  align-items: stretch;
}

/* ---- The two panels ---- */

.olm-highlights__news,
.olm-highlights__cards {
  padding: clamp(12px, 1.2vw, 18px);
  /* A shade deeper than the plain cream, so the white cards inside stand off
     it now that they carry no border. */
  background: var(--olm-cream-deep);
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
}

/* The rule that divides the two, drawn down the middle of the gap. */
.olm-highlights__news {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.olm-highlights__news::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: calc(var(--olm-hl-gap) / -2);
  width: 1px;
  background: var(--olm-line-strong);
}

/* ---- Latest News ---- */

/* The heading sits on a card of its own, matching the news items beneath it. */
.olm-highlights__news-heading {
  margin: 0 0 10px !important;
  padding: 12px 14px !important;
  color: var(--olm-ink) !important;
  font-size: 1.15rem !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: left !important;
  background: var(--olm-white) !important;
  border-radius: var(--olm-r-md);
  box-shadow: var(--olm-shadow-sm);
}

.olm-highlights__news-heading::after { content: none !important; }

/* The scroll box carries no panel of its own: each item is its own card. It
   takes whatever height the panel has left under the heading. */
.news_highlight_section .vertical_scroll_latestNews {
  flex: 1 1 auto;
  min-height: 0;
  height: clamp(300px, 26vw, 360px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.olm-highlights__news .vertical-news-marquee { gap: 10px; }

.olm-highlights__news .latestEvent {
  border: none;
  border-radius: var(--olm-r-md);
  background: var(--olm-white);
  box-shadow: var(--olm-shadow-sm);
  /* The legacy sheet insets these by 12px each side, which left them narrower
     than the heading card above them. */
  margin: 0 0 10px;
  transition: transform var(--olm-t-fast) var(--olm-ease),
              box-shadow var(--olm-t-fast) var(--olm-ease),
              border-color var(--olm-t-fast) var(--olm-ease);
}

.olm-highlights__news .latestEvent:hover {
  transform: translateY(-2px);
  box-shadow: var(--olm-shadow-md);
  background: var(--olm-white) !important;
}

.olm-highlights__news .latestEvent .news-link {
  display: grid;
  /* Dot, headline, date — the date holds the right edge and the headline takes
     whatever is left. */
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.news-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--olm-primary);
  flex: none;
}

.olm-highlights__news .news-text-content {
  display: block;
  min-width: 0;
}

.olm-highlights__news .news-title {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--olm-ink);
  /* One line with an ellipsis, so every card is the same height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Date and the optional New mark hold the right edge of the card. */
.olm-highlights__news .news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* Lighter than the headline, still well above the 4.5:1 floor. */
.olm-highlights__news .news-date-badge-single {
  display: block;
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0;
  font-size: .75rem;
  font-weight: 500;
  color: #5f545a;
  white-space: nowrap;
  transition: color var(--olm-t-fast) var(--olm-ease);
}

/* The date darkens with the card. */
.olm-highlights__news .latestEvent:hover .news-date-badge-single {
  background: none !important;
  border: none !important;
  color: var(--olm-ink);
}

.olm-highlights__news .latestEvent:hover .news-title { color: var(--olm-primary); }

/* ---- Highlight panels ---- */

.olm-highlights__cards {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  /* The news panel sets the height; the panels fill it. */
  min-height: clamp(300px, 26vw, 360px);
}

.olm-highlight {
  position: relative;
  min-width: 0;
  border-radius: var(--olm-r-lg);
  overflow: hidden;
  background: var(--olm-grey);
  isolation: isolate;
  cursor: zoom-in;
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

.olm-highlight:hover,
.olm-highlight:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--olm-shadow-md);
  outline: none;
}

/* The lead panel spans both rows; the next two stack beside it. */
.olm-highlight.is-lead { grid-column: 1; grid-row: 1 / 3; }
.olm-highlight.is-side-0 { grid-column: 2; grid-row: 1; }
.olm-highlight.is-side-1 { grid-column: 2; grid-row: 2; }
.olm-highlight.is-spare { display: none; }

.news_highlight_section .olm-highlight .olm-highlight__img,
.olm-highlight__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--olm-t-slow) var(--olm-ease);
}

.olm-highlight:hover .olm-highlight__img { transform: scale(1.04); }

/* Scrim, so the caption stays readable over any photograph. */
.olm-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(12, 8, 10, .82) 0%,
              rgba(12, 8, 10, .55) 34%,
              rgba(12, 8, 10, .08) 66%,
              rgba(12, 8, 10, 0) 100%);
  pointer-events: none;
}

.olm-highlight__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(12px, 1.2vw, 22px);
  color: #fff;
  /* The caption covers the panel, so it must not swallow the click that opens
     the image. The panel itself handles it. */
  pointer-events: none;
}

.olm-highlight__title {
  margin: 0 0 6px !important;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.olm-highlight__desc {
  margin: 0 !important;
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The lead panel has room for larger type; the side panels carry the title. */
.olm-highlight.is-lead .olm-highlight__title { font-size: .92rem; }
.olm-highlight.is-lead .olm-highlight__desc { font-size: .9rem; -webkit-line-clamp: 4; }
.olm-highlight:not(.is-lead) .olm-highlight__desc { display: none; }

@media (max-width: 991.98px) {
  .olm-highlights { grid-template-columns: 1fr; }

  /* Stacked: the rule runs under the news panel instead of beside it. */
  .olm-highlights__news::after {
    top: auto;
    left: 8%;
    right: 8%;
    bottom: calc(var(--olm-hl-gap) / -2);
    width: auto;
    height: 1px;
  }
}

@media (max-width: 575.98px) {
  .olm-highlights__cards {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 190px);
    height: auto;
  }

  .olm-highlight.is-lead   { grid-column: 1; grid-row: 1; }
  .olm-highlight.is-side-0 { grid-column: 1; grid-row: 2; }
  .olm-highlight.is-side-1 { grid-column: 1; grid-row: 3; }
}

/* ==========================================================================
   31. Social Media Corner
   --------------------------------------------------------------------------
   One card per platform, side by side, with the video records stacked in the
   fourth column. The embeds and their links are the ones already configured
   in admin — only the arrangement changed.
   ========================================================================== */

/* Four across. The widgets have minimum widths well above a quarter column, so
   each embed is rendered at its natural width and scaled down to fit — the
   whole feed is on screen, just smaller. */
.olm-social {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  align-items: stretch;
}

.olm-social-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--olm-white);
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
  box-shadow: var(--olm-shadow-sm);
  overflow: hidden;
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

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

/* ---- Card head ---- */

.olm-social-card__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.olm-social-card__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* Brand marks, flat — each platform's own colour. */
.olm-social-card__mark.is-facebook  { background: #1877f2; }
.olm-social-card__mark.is-instagram { background: #e1306c; }
.olm-social-card__mark.is-x         { background: #0f1419; font-size: .95rem; }
.olm-social-card__mark.is-video     { background: #ff0000; }

.olm-social-card__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--olm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subscribe sits at the right of the YouTube card's header. */
.olm-social-card__subscribe {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--olm-r-pill);
  /* A shade below YouTube red: white on #ff0000 measures 4.00:1, under the
     floor for text this size. */
  background: #c50000;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.olm-social-card__subscribe:hover { background: #9d0000; color: #fff; }

.olm-social-card__subscribe:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 2px;
}

/* ---- Card body: the configured embed ---- */

.olm-social-card__body {
  flex: 1 1 auto;
  position: relative;
  /* Tall enough for a timeline to show several posts rather than one. */
  height: clamp(300px, 24vw, 360px);
  border-top: 1px solid var(--olm-line);
  border-bottom: 1px solid var(--olm-line);
  background: var(--olm-cream);
  overflow: hidden;
}

.olm-social-card__body.is-scrollable { overflow-y: auto; }

/* The embed keeps its own width and is scaled to the card. The script sets
   both custom properties from the measured card width. */
.olm-social-card__zoom {
  width: var(--olm-embed-w, 500px);
  height: var(--olm-embed-h, 100%);
  transform: scale(var(--olm-embed-scale, 1));
  transform-origin: top left;
}

.olm-social-card__zoom > iframe,
.olm-social-card__zoom > .twitter-timeline-rendered,
.olm-social-card__zoom > .twitter-timeline-rendered > iframe {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: none;
}

.social_section .olm-social-card__body iframe,
.olm-social-card__body iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.olm-social-card__empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: var(--olm-fs-small);
  color: var(--olm-body);
}

.olm-social-card__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

a.olm-social-card__fallback:hover { background: var(--olm-cream-deep); }

.olm-social-card__fallback h5 {
  color: var(--olm-ink);
  font-size: 1rem;
  font-weight: 700;
}

.olm-social-card__fallback.is-hidden { display: none; }

.olm-social-card__fallback .olm-social-card__mark {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
}

/* Button out to the profile, shown when X will not serve its own frame. */
.olm-social-card__xbtn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--olm-r-pill);
  background: #0f1419;
  color: #fff;
  font-size: var(--olm-fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.olm-social-card__xbtn:hover { background: #2b3239; color: #fff; }

.olm-social-card__xbtn:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 2px;
}

.olm-social-card__fallback .fa { font-size: 2.4rem; color: #1da1f2; }
.olm-social-card__fallback h5 { margin: 0; font-size: 1rem; color: var(--olm-ink); }

.olm-social-card__fallback p {
  margin: 0;
  font-size: var(--olm-fs-small);
  line-height: 1.5;
  color: var(--olm-body);
}

/* ---- Card foot ---- */

.olm-social-card__cue {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--olm-primary);
  font-size: var(--olm-fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--olm-t-fast) var(--olm-ease),
              color var(--olm-t-fast) var(--olm-ease);
}

.olm-social-card__cue::after {
  content: "→";
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-social-card__cue:hover {
  background: var(--olm-cream);
  color: var(--olm-primary-dark);
}

.olm-social-card__cue:hover::after { transform: translateX(4px); }

.olm-social-card__cue:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: -3px;
}

/* ---- Video column ---- */

.olm-social-card__videos {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 14px);
  height: clamp(300px, 24vw, 360px);
  padding: 0 14px 14px;
}

.olm-social-video {
  position: relative;
  min-height: 0;
  border-radius: var(--olm-r-md);
  overflow: hidden;
  background: #000;
}

.social_section .olm-social-video video,
.social_section .olm-social-video iframe,
.olm-social-video video,
.olm-social-video iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: none;
  object-fit: cover;
}

/* Poster frame with our own play control: no YouTube wordmark or title bar
   over the artwork until the player is loaded. */
.olm-social-video--facade {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
}

.social_section .olm-social-video--facade img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform var(--olm-t-slow) var(--olm-ease);
}

.olm-social-video--facade:hover img { transform: scale(1.03); }

.olm-social-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 40px;
  border-radius: 10px;
  background: rgba(12, 8, 10, .72);
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.olm-social-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border: 9px solid transparent;
  border-left: 15px solid #fff;
  border-right: none;
}

.olm-social-video--facade:hover .olm-social-video__play { background: #ff0000; }

.olm-social-video--facade:focus-visible {
  outline: 3px solid var(--olm-focus);
  outline-offset: 2px;
}

.olm-social-video--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--olm-cream);
  border: 1px solid var(--olm-line);
  color: var(--olm-body);
  font-size: var(--olm-fs-small);
}

.olm-social-video--empty .fa { font-size: 1.5rem; opacity: .6; }

/* The X timeline is rendered into an iframe by widgets.js; it needs the same
   fill as the other embeds. */
.olm-social-card__body .twitter-timeline,
.olm-social-card__body .twitter-timeline-rendered { width: 100% !important; }

@media (max-width: 1199.98px) {
  .olm-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .olm-social { grid-template-columns: 1fr; }

  .olm-social-card__body,
  .olm-social-card__videos { height: clamp(360px, 80vw, 460px); }
}

/* ---- Posts drawn from an API, rather than from the network's own widget ---

   `.olm-xfeed` is the X card and `.olm-postfeed` the Facebook one. They are the
   same object — avatar and name, then the words, then the picture — so every
   rule below carries both names rather than being written twice. */

.olm-xfeed,
.olm-postfeed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.olm-xfeed__item + .olm-xfeed__item,
.olm-postfeed__item + .olm-postfeed__item { border-top: 1px solid var(--olm-line); }

.olm-xfeed__item > a,
.olm-postfeed__item > a {
  display: block;
  padding: 12px 14px;
  color: var(--olm-body);
  text-decoration: none;
  transition: background-color var(--olm-t-fast) var(--olm-ease);
}

.olm-xfeed__item > a:hover,
.olm-postfeed__item > a:hover { background: var(--olm-cream); }

.olm-xfeed__text,
.olm-postfeed__text {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--olm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.olm-xfeed__media,
.olm-postfeed__media {
  display: block;
  margin-top: 8px;
  border-radius: var(--olm-r-sm);
  overflow: hidden;
}

.social_section .olm-xfeed__media img,
.social_section .olm-postfeed__media img {
  display: block;
  width: 100% !important;
  height: 110px !important;
  object-fit: cover;
}

.olm-xfeed__meta,
.olm-postfeed__meta {
  display: flex;
  gap: 12px;
  margin-top: 7px;
  font-size: .72rem;
  color: #5f545a;
}

/* "View more" closes the list and hands over to the profile. */
.olm-xfeed__item--more > a,
.olm-postfeed__item--more > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--olm-primary);
  font-size: var(--olm-fs-small);
  font-weight: 700;
}

.olm-xfeed__item--more > a::after,
.olm-postfeed__item--more > a::after {
  content: "→";
  transition: transform var(--olm-t-base) var(--olm-ease);
}

.olm-xfeed__item--more > a:hover::after,
.olm-postfeed__item--more > a:hover::after { transform: translateX(4px); }

/* ---- X card: account heading and post layout ---------------------------- */

.social_section .olm-social-card__avatar {
  flex: none;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  object-fit: cover;
  background: var(--olm-cream);
}

.olm-social-card__ident {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.olm-social-card__handle {
  font-size: .74rem;
  font-weight: 500;
  color: #5f545a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The X mark moves to the corner once the account picture leads the header. */
.olm-social-card__mark.is-corner {
  width: 22px;
  height: 22px;
  font-size: .72rem;
}

/* A post: picture, then who, then the words. */
.olm-xfeed__head,
.olm-postfeed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.social_section .olm-xfeed__avatar,
.social_section .olm-postfeed__avatar {
  flex: none;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
}

.olm-xfeed__who,
.olm-postfeed__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.olm-xfeed__author,
.olm-postfeed__author {
  font-size: .78rem;
  font-weight: 700;
  color: var(--olm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olm-xfeed__handle,
.olm-postfeed__handle {
  font-size: .7rem;
  color: #5f545a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olm-xfeed__text,
.olm-postfeed__text { display: block; }

/* ==========================================================================
   32. Inner page banner
   Every inner page shows the same band whatever the source image measures:
   full width, 300px tall, cropped from the centre. custom.css sets 200px.
   ========================================================================== */

.inner_banner {
  display: block;
  width: 100%;
  overflow: hidden;
}

.inner_banner img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* A 300px band eats most of a phone screen, so it steps down below the
   tablet breakpoint while keeping the same crop. */
@media (max-width: 767.98px) {
  .inner_banner img { height: 200px !important; }
}

@media (max-width: 479.98px) {
  .inner_banner img { height: 160px !important; }
}

/* ==========================================================================
   33. Inner page heading scale
   Content headings had drifted larger than the page titles above them: an
   accordion row on Institution Building was 36px against a 30px page title,
   and the About/Vision titles were 35px and 40px where every other page used
   30px. One scale for every inner page, page title largest.
   Homepage headings (.olm-head__title) are not touched.
   ========================================================================== */

/* Inner pages title with h1 or h3; the homepage uses h2.allHeading, which is
   left alone. */
h1.allHeading,
h3.allHeading,
.mission_vision_section .allHeading,
.about_section .allHeading,
.team_section .allHeading,
.faq_section .allHeading,
.contact_section .allHeading {
  /* custom.css sets .mission_vision_section h3 to 30px !important, so the
     page title needs the same weapon to come down. */
  font-size: 26px !important;
  line-height: 1.3;
}

.mission_vision_section h2:not(.allHeading),
.about_section h2:not(.allHeading),
.team_section h2:not(.allHeading),
.faq_section h2:not(.allHeading),
.contact_section h2:not(.allHeading),
h2.accordion-header,
.mission_vision_section h2.card-title,
.about_section h2.card-title {
  font-size: 20px;
  line-height: 1.4;
}

.mission_vision_section h3:not(.allHeading),
.about_section h3:not(.allHeading),
.team_section h3:not(.allHeading),
.faq_section h3:not(.allHeading),
.contact_section h3:not(.allHeading) {
  font-size: 19px !important;
  line-height: 1.4;
}

.mission_vision_section h4,
.about_section h4,
.team_section h4 {
  font-size: 18px;
  line-height: 1.45;
}

.mission_vision_section h5,
.about_section h5,
.team_section h5 {
  font-size: 17px;
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  .mission_vision_section .allHeading,
  .about_section .allHeading,
  .team_section .allHeading,
  .faq_section .allHeading,
  .contact_section .allHeading,
  h1.allHeading,
  h3.allHeading { font-size: 22px !important; }

  .mission_vision_section h2:not(.allHeading),
  .about_section h2:not(.allHeading),
  h2.accordion-header { font-size: 19px; }
}

/* Maroon cards on the Components pages carry white text, but their headings
   inherited the dark body ink — 1.74:1, effectively unreadable. */
.capacity_building_section .card,
.capacity_building_section .card h1,
.capacity_building_section .card h2,
.capacity_building_section .card h3,
.capacity_building_section .card h4,
.capacity_building_section .card h5,
.capacity_building_section .card h6,
.capacity_building_section .card p,
.capacity_building_section .card li,
.capacity_building_section .card span,
.community_staff .card-back,
.community_staff .card-back h1,
.community_staff .card-back h2,
.community_staff .card-back h3,
.community_staff .card-back h4,
.community_staff .card-back h5,
.community_staff .card-back h6,
.community_staff .card-back p,
.community_staff .card-back li,
.community_staff .card-back span {
  color: #ffffff;
}

/* ==========================================================================
   34. Component pages: tabs, accordions, media
   Institution Building and its sisters (Livelihoods, Market Linkage, Financial
   Inclusion, Social Inclusion, M&S and MIS, KMC) share one markup. This gives
   them the same card system as the rest of the portal: a segmented tab bar, a
   white panel instead of a pink slab, accordions that show they can be opened,
   and uniform picture tiles. Content and imagery are untouched.
   ========================================================================== */

/* ---- Tab bar: a segmented control on a cream track --------------------- */
.livelihood_section .nav-tabs {
  background: var(--olm-cream) !important;
  border: 1px solid var(--olm-line);
  border-radius: 999px;
  padding: 6px;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.livelihood_section .nav-tabs .nav-item { margin: 0; }

.livelihood_section .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--olm-primary) !important;
  background: transparent !important;
  transition: background var(--olm-t-base) var(--olm-ease),
              color var(--olm-t-base) var(--olm-ease);
}

.livelihood_section .nav-tabs .nav-link:hover {
  background: var(--olm-white) !important;
}

.livelihood_section .nav-tabs .nav-link.active {
  background: var(--olm-primary) !important;
  color: var(--olm-white) !important;
  box-shadow: var(--olm-shadow-sm);
}

.livelihood_section .nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--olm-primary);
  outline-offset: 2px;
}

/* ---- The panel the tabs open ------------------------------------------ */
.livelihood_section .tab-content {
  background: var(--olm-white) !important;
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
  margin-top: 16px;
}

.livelihood_section .tab-pane {
  padding: clamp(16px, 2vw, 30px) !important;
}

/* ---- Accordions -------------------------------------------------------- */
.mission_vision_section .accordion-item {
  border: 1px solid var(--olm-line) !important;
  border-radius: var(--olm-r-md) !important;
  background: var(--olm-white);
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

.mission_vision_section .accordion-item:hover { border-color: var(--olm-primary) !important; }

.mission_vision_section .accordion-button {
  background: var(--olm-cream) !important;
  color: var(--olm-primary) !important;
  font-weight: 600;
  padding: 14px 18px;
  box-shadow: none !important;
  gap: 12px;
}

.mission_vision_section .accordion-button:not(.collapsed),
.mission_vision_section .accordion-button[aria-expanded="true"] {
  background: #fbe9ef !important;
}

.mission_vision_section .accordion-button:focus-visible {
  outline: 2px solid var(--olm-primary);
  outline-offset: -2px;
}

/* The chevron was hidden on these sections, which left nothing to show the
   row could be opened. It is drawn here rather than relying on the Bootstrap
   sprite, so it takes the portal's own colour. */
.mission_vision_section .accordion-button::after,
.cbo_section .accordion-button::after,
.modal_card .cbosCss .accordion-button::after {
  display: block !important;
  content: "" !important;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-right: 2px solid var(--olm-primary);
  border-bottom: 2px solid var(--olm-primary);
  background: none !important;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--olm-t-base) var(--olm-ease);
}

/* Keyed off aria-expanded as well as the class: Bootstrap sets both, and the
   attribute cannot be beaten by a stale class list. */
.mission_vision_section .accordion-button:not(.collapsed)::after,
.cbo_section .accordion-button:not(.collapsed)::after,
.mission_vision_section .accordion-button[aria-expanded="true"]::after,
.cbo_section .accordion-button[aria-expanded="true"]::after {
  transform: rotate(-135deg) !important;
}

.mission_vision_section .accordion-body {
  padding: 18px !important;
  color: var(--olm-body);
}

.mission_vision_section .accordion-body .inclusion_listing {
  padding-left: 20px;
  margin-bottom: 0;
  list-style: disc;
}

.mission_vision_section .accordion-body .inclusion_listing li {
  margin-bottom: 8px;
  line-height: 1.65;
}

.mission_vision_section .accordion-body .inclusion_listing li::marker { color: var(--olm-primary); }

/* ---- Picture tiles ----------------------------------------------------- */
.mission_vision_section .lakhpati img,
.mission_vision_section .cbo_section img,
.mission_vision_section .ibo_section img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--olm-r-md) !important;
  border: 1px solid var(--olm-line);
  box-shadow: var(--olm-shadow-sm);
  transition: transform var(--olm-t-base) var(--olm-ease),
              box-shadow var(--olm-t-base) var(--olm-ease);
}

.mission_vision_section .lakhpati img:hover {
  transform: translateY(-2px);
  box-shadow: var(--olm-shadow-md);
}

/* ---- Rhythm ------------------------------------------------------------ */
.mission_vision_section .ibo_section p { line-height: 1.7; }
.mission_vision_section h5.py-3 { margin-top: 8px; }

@media (max-width: 575.98px) {
  .livelihood_section .nav-tabs { border-radius: var(--olm-r-md); }
  .livelihood_section .nav-tabs .nav-link { width: 100%; text-align: left; }
}

/* The Community Support Staff photographs are circles by design. The tile
   treatment above reaches them through .ibo_section and would square them off,
   so their own shape is restored here. */
.mission_vision_section .community_staff .card-front img,
.community_staff .card-front img {
  width: 200px !important;
  height: 200px !important;
  aspect-ratio: auto !important;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

.mission_vision_section .community_staff .card-front img:hover { transform: none; }

/* ==========================================================================
   35. The heading rule belongs to headings only

   `.allHeading` carries two jobs at once: the maroon bold type, and the 64px
   bar its ::after paints under the text. A few places borrow the class for the
   colour alone -- an accordion title span, an icon -- and inherit a stray bar
   that reads as a misaligned line. The bar is the section-opener signature; it
   means nothing repeated under every row, so it is switched off anywhere the
   element is not a real heading tag.
   ========================================================================== */

span.allHeading::after,
i.allHeading::after,
svg.allHeading::after,
em.allHeading::after,
strong.allHeading::after,
b.allHeading::after,
a.allHeading::after,
label.allHeading::after,
button.allHeading::after,
li.allHeading::after,
td.allHeading::after,
.accordion-button .allHeading::after,
.accordion-header .allHeading::after,
.card .allHeading::after,
.nav-link .allHeading::after { content: none !important; }

/* Those borrowed spots still want the colour and the weight, without the
   positioning context the bar needed. */
span.allHeading,
i.allHeading { position: static; padding-bottom: 0; margin-bottom: 0; }

/* ==========================================================================
   36. Cards inside a content modal

   `.modal_card .card` in custom.css carries a lift-on-hover and a 25px blue
   shadow (`rgba(102, 126, 234, .3)`) borrowed from the clickable tiles on the
   page behind it. Inside the modal these are not clickable — they are just
   sections of copy — so a card that rises when the pointer crosses it reads as
   broken. Flat panels on the brand line instead, and the row gutters removed
   so the copy sits against the card padding rather than 12px inside it.
   ========================================================================== */

.modal_card .card {
  border: 1px solid var(--olm-line);
  border-radius: var(--olm-r-lg);
  box-shadow: none;
  padding: var(--olm-space-4);
  transition: none;
}

.modal_card .card:hover {
  transform: none;
  box-shadow: none;
}

.modal_card .card > .row,
.modal_card > .row {
  margin-left: calc(-1 * var(--olm-space-2, 8px));
  margin-right: calc(-1 * var(--olm-space-2, 8px));
}

.modal_card .card > .row > [class*="col-"] {
  padding-left: var(--olm-space-2, 8px);
  padding-right: var(--olm-space-2, 8px);
}

/* The column keeps the `mb-4` it was authored with; against the card's own
   padding that doubled the space under the last list. */
.modal_card .card > .row > [class*="col-"]:last-child { margin-bottom: 0 !important; }

.modal_card .card img {
  max-width: 100%;
  height: auto;
  border-radius: var(--olm-r-md);
  box-shadow: var(--olm-shadow-xs);
}

.modal_card .card p:last-child,
.modal_card .card ul:last-child { margin-bottom: 0; }

/* ==========================================================================
   Scroll to Top Floating Action Button
   Stays on the right as a fixed overlay and appears after scrolling down.
   ========================================================================== */

.olm-scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--olm-primary, #910742);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(145, 7, 66, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1045;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.88);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s,
              background-color 0.2s,
              box-shadow 0.2s,
              border-color 0.2s;
  outline: none;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

.olm-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.olm-scroll-top:hover {
  background-color: var(--olm-primary-dark, #6d0531);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 22px rgba(145, 7, 66, 0.45), 0 4px 10px rgba(0, 0, 0, 0.18);
}

.olm-scroll-top:active {
  transform: translateY(-1px) scale(0.96);
  box-shadow: 0 3px 10px rgba(145, 7, 66, 0.3);
}

.olm-scroll-top:focus-visible {
  outline: 3px solid rgba(176, 42, 95, 0.65);
  outline-offset: 3px;
}

.olm-scroll-top__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.olm-scroll-top:hover .olm-scroll-top__icon {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .olm-scroll-top {
    bottom: 22px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
  .olm-scroll-top__icon {
    width: 18px;
    height: 18px;
  }
}

@media print {
  .olm-scroll-top {
    display: none !important;
  }
}