:root {
  --ima-primary: #9b0f1c;
  --ima-primary-dark: #7e0a15;
  --ima-primary-soft: #b3121f;
  --ima-ink: #221f20;
  --ima-accent: #00753a;
  --ima-accent-dark: #006b2d;
  --ima-gold: #f2c200;
  --ima-gold-light: #f7d64f;
  --ima-emblem-green: #00a040;
  --ima-emblem-green-dark: #008738;
  --ima-muted: #6b5f60;
  --ima-bg: #f7f3f3;
  --ima-surface: #ffffff;
  --ima-line: #e8dede;
  --ima-shadow-soft: 0 1px 2px rgba(48, 6, 11, 0.05), 0 2px 8px rgba(48, 6, 11, 0.06);
  --ima-shadow: 0 2px 6px rgba(48, 6, 11, 0.06), 0 12px 32px rgba(48, 6, 11, 0.12);
  --ima-shadow-lift: 0 6px 14px rgba(48, 6, 11, 0.1), 0 20px 44px rgba(48, 6, 11, 0.16);
  --ima-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --ima-sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --ima-gold-rule: linear-gradient(90deg, var(--ima-gold), var(--ima-gold-light));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  color: var(--ima-ink);
  background: var(--ima-bg);
  font-family: var(--ima-sans);
  font-size: 1.02rem;
  letter-spacing: 0;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ima-serif);
  color: var(--ima-primary);
  line-height: 1.25;
  font-weight: 700;
}

a {
  color: var(--ima-emblem-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--ima-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ima-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  z-index: 2000;
  background: #fff;
  color: var(--ima-primary);
  border: 2px solid var(--ima-primary);
  border-radius: 4px;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ------------------------------------------------------------------ header */

.site-header {
  background: #fff;
}

.topbar {
  background: linear-gradient(180deg, var(--ima-primary-dark), #071426);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(212, 180, 106, 0.28);
}

.topbar .container {
  min-height: 30px;
}

.topbar a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.topbar a:hover,
.topbar a:focus {
  color: var(--ima-gold-light);
}

.topbar-identity {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.topbar-link,
.nav-link,
.quick-link,
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.logo-row {
  position: relative;
  z-index: 1030;
  background:
    radial-gradient(1100px 320px at 8% -60%, rgba(176, 141, 62, 0.1), transparent 60%),
    radial-gradient(900px 300px at 96% 160%, rgba(48, 6, 11, 0.06), transparent 60%),
    #fff;
  border-bottom: 1px solid var(--ima-line);
}

.brand-emblem {
  width: 66px;
  height: auto;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(176, 141, 62, 0.55);
  box-shadow: 0 0 0 4px rgba(48, 6, 11, 0.05), 0 8px 20px rgba(48, 6, 11, 0.14);
  padding: 3px;
}

.brand-name {
  font-family: var(--ima-serif);
  font-size: 1.42rem;
  font-weight: 900;
  color: var(--ima-primary);
  line-height: 1.15;
}

.brand-sub {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ima-accent);
  font-weight: 700;
  margin-top: 0.15rem;
}

/* legacy: kept for any remaining usages */
.navbar-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--ima-primary);
  border: 2px solid var(--ima-gold);
  color: #fff;
  font-family: var(--ima-serif);
  font-size: 1.1rem;
  font-weight: 700;
}

.quick-link {
  min-height: 38px;
  padding: 0.5rem 0.85rem;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  background: var(--ima-primary);
}

.quick-link:hover {
  color: #fff;
  background: var(--ima-primary-soft);
}

.quick-link-red,
.quick-link-teal,
.quick-link-gold,
.quick-link-ink {
  background: var(--ima-primary);
}

.header-search {
  display: flex;
  align-items: stretch;
  min-width: min(100%, 230px);
  max-width: 280px;
}

.header-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--ima-line);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 0.45rem 0.85rem;
  background: #fff;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-search input:focus {
  border-color: var(--ima-primary);
  box-shadow: 0 0 0 0.18rem rgba(48, 6, 11, 0.12);
  outline: none;
}

.header-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 46px;
  border: 1px solid var(--ima-primary);
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--ima-primary-soft), var(--ima-primary));
  color: #fff;
  padding: 0.45rem 0.85rem;
  transition: filter 0.15s ease;
}

.header-search button:hover {
  filter: brightness(1.15);
}

/* ---------------------------------------------------------------- main nav */

.site-mega-nav {
  position: relative;
  z-index: 1025;
  min-height: 52px;
  background: linear-gradient(180deg, var(--ima-primary-soft), var(--ima-primary) 78%);
  padding-block: 0;
  border-top: 2px solid var(--ima-gold);
  box-shadow: 0 6px 18px rgba(8, 24, 48, 0.22);
  transition: box-shadow 0.2s ease;
}

.site-mega-nav.is-stuck {
  box-shadow: 0 10px 28px rgba(8, 24, 48, 0.35);
}

.site-mega-nav .nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.05rem;
}

.site-mega-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0.45rem;
  height: 2px;
  background: var(--ima-gold-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.site-mega-nav .nav-link.dropdown-toggle::after {
  content: "";
  border: 0;
  vertical-align: initial;
}

.site-mega-nav .nav-link.active,
.site-mega-nav .nav-link:hover,
.site-mega-nav .nav-link:focus,
.site-mega-nav .show > .nav-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.site-mega-nav .nav-link.active::after,
.site-mega-nav .nav-link:hover::after,
.site-mega-nav .nav-link:focus::after {
  transform: scaleX(1);
}

.site-mega-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
  margin-block: 0.45rem;
}

.site-mega-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

.mega-dropdown {
  padding: 0;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(640px 220px at 94% -50%, rgba(176, 141, 62, 0.09), transparent 55%),
    radial-gradient(520px 200px at 2% 130%, rgba(48, 6, 11, 0.05), transparent 55%),
    #fff;
  box-shadow: 0 12px 24px rgba(8, 24, 48, 0.1), 0 32px 64px rgba(8, 24, 48, 0.22);
  border-bottom: 3px solid var(--ima-gold);
}

.mega-column {
  min-height: 100%;
  padding: 0.5rem 0;
}

.mega-heading {
  margin-bottom: 1rem;
  color: var(--ima-primary);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mega-heading::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 0.5rem;
  border-radius: 1px;
  background: var(--ima-gold-rule);
}

.mega-link {
  position: relative;
  display: block;
  padding: 0.48rem 0;
  color: var(--ima-ink);
  font-weight: 500;
  font-size: 0.97rem;
  text-decoration: none;
  transition: color 0.16s ease, padding-left 0.2s ease;
}

.mega-link::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0.32rem;
  color: var(--ima-gold);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mega-link:hover,
.mega-link:focus {
  color: var(--ima-accent);
  padding-left: 0.95rem;
}

.mega-link:hover::before,
.mega-link:focus::before {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- foundations */

.page-kicker {
  max-width: 760px;
}

.btn,
.card,
.form-control,
.form-select,
.alert,
.dropdown-menu,
.badge {
  border-radius: 4px;
}

.btn {
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.15s ease, filter 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  --bs-btn-bg: var(--ima-accent);
  --bs-btn-border-color: var(--ima-accent);
  --bs-btn-hover-bg: var(--ima-accent-dark);
  --bs-btn-hover-border-color: var(--ima-accent-dark);
  --bs-btn-active-bg: var(--ima-accent-dark);
  --bs-btn-active-border-color: var(--ima-accent-dark);
  box-shadow: 0 4px 14px rgba(158, 27, 50, 0.28);
}

.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(158, 27, 50, 0.36);
}

.btn-outline-primary {
  --bs-btn-color: var(--ima-accent);
  --bs-btn-border-color: var(--ima-accent);
  --bs-btn-hover-bg: var(--ima-accent);
  --bs-btn-hover-border-color: var(--ima-accent);
  --bs-btn-active-bg: var(--ima-accent-dark);
  --bs-btn-active-border-color: var(--ima-accent-dark);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ima-primary);
  --bs-btn-border-color: var(--ima-primary);
  --bs-btn-hover-bg: var(--ima-primary);
  --bs-btn-hover-border-color: var(--ima-primary);
  --bs-btn-active-bg: var(--ima-primary-dark);
  --bs-btn-active-border-color: var(--ima-primary-dark);
}

.eyebrow {
  color: var(--ima-accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

.rule-gold {
  width: 44px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--ima-gold-rule);
  opacity: 1;
  margin: 0.35rem 0 1rem;
}

.breadcrumbs {
  font-size: 0.82rem;
  color: var(--ima-muted);
  letter-spacing: 0.02em;
}

.breadcrumbs a {
  color: var(--ima-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--ima-primary);
  text-decoration: underline;
}

.section-band {
  padding: 4rem 0;
}

.section-band-white {
  background:
    radial-gradient(1200px 400px at 90% -20%, rgba(48, 6, 11, 0.04), transparent 60%),
    #fff;
}

.page-hero {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  padding: 3.6rem 0 3.9rem;
  border-bottom: 3px solid;
  border-image: var(--ima-gold-rule) 1;
  background:
    radial-gradient(760px 300px at 88% -40%, rgba(176, 141, 62, 0.28), transparent 62%),
    radial-gradient(680px 320px at 4% 130%, rgba(158, 27, 50, 0.24), transparent 60%),
    linear-gradient(158deg, var(--ima-primary-soft) 0%, var(--ima-primary) 46%, var(--ima-primary-dark) 100%);
}

.page-hero::after {
  content: none;
}

.page-hero .display-6 {
  font-size: clamp(2.1rem, 1.5rem + 1.9vw, 2.95rem);
  line-height: 1.14;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}

.page-hero .lead {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: #fff;
  background-image:
    linear-gradient(100deg, rgba(6, 18, 36, 0.97) 0%, rgba(8, 24, 48, 0.93) 38%, rgba(10, 29, 56, 0.72) 60%, rgba(48, 6, 11, 0.34) 100%),
    url("../img/ima-ap-hero.webp");
  background-size: cover;
  background-position: center right;
  border-bottom: 3px solid;
  border-image: var(--ima-gold-rule) 1;
}

.hero .display-4 {
  font-size: clamp(2.5rem, 1.5rem + 3.1vw, 4rem);
  line-height: 1.08;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
}

.hero::after {
  content: none;
}

.hero-copy {
  max-width: 730px;
  padding: 5.5rem 0 6rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ima-gold-light);
  border: 1px solid rgba(212, 180, 106, 0.55);
  border-left: 3px solid var(--ima-gold);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0.45rem 0.8rem;
  box-shadow: none;
}

.hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.hero-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--ima-gold);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0.5rem 0.85rem;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: none;
}

.hero-assurance .icon {
  color: var(--ima-gold-light);
}

/* The returning-member line under the hero actions: quieter than the buttons,
   but the link stays gold so it reads as an action on the navy masthead. */
.hero-member-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

.hero-member-note a {
  color: var(--ima-gold-light);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 180, 106, 0.5);
}

.hero-member-note a:hover,
.hero-member-note a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

/* ------------------------------------------------------------ notice strip */

.notice-strip {
  position: relative;
  z-index: 2;
  margin-top: -1.9rem;
}

.notice-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ima-line);
  border-radius: 6px;
  box-shadow: var(--ima-shadow);
}

.notice-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1.15rem;
  background: linear-gradient(135deg, var(--ima-primary-soft), var(--ima-primary-dark));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-right: 3px solid var(--ima-gold);
}

.notice-links {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  align-items: center;
  padding: 0.75rem 1.15rem;
}

.notice-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ima-ink);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
}

.notice-links a .icon {
  color: var(--ima-gold);
  transition: transform 0.18s ease;
}

.notice-links a:hover,
.notice-links a:focus {
  color: var(--ima-accent);
}

.notice-links a:hover .icon {
  transform: translate(2px, -2px);
}

/* ------------------------------------------------------------------- cards */

.lift-card,
.feature-tile,
.news-card,
.event-row,
.branch-chip,
.metric-card {
  position: relative;
  border: 1px solid var(--ima-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--ima-shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden;
}

.feature-tile::before,
.news-card::before,
.event-row::before,
.branch-chip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ima-gold-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.feature-tile:hover,
.news-card:hover,
.event-row:hover,
.branch-chip:hover,
.metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(48, 6, 11, 0.32);
  box-shadow: var(--ima-shadow-lift);
}

.feature-tile:hover::before,
.news-card:hover::before,
.event-row:hover::before,
.branch-chip:hover::before {
  transform: scaleX(1);
}

.feature-tile,
.news-card {
  padding: 1.5rem;
}

.event-row {
  padding: 1rem 1.15rem;
}

.news-card h3 a,
.news-card .h5 a {
  color: var(--ima-primary);
}

.news-card h3 a:hover,
.news-card .h5 a:hover {
  color: var(--ima-accent);
}

.platform-pathways {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.platform-pathways a {
  display: block;
  border: 1px solid var(--ima-line);
  border-left: 3px solid var(--ima-gold);
  background: #fff;
  padding: 0.8rem 1.05rem;
  color: var(--ima-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: var(--ima-shadow-soft);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.platform-pathways a:hover {
  color: var(--ima-accent);
  border-left-color: var(--ima-accent);
  transform: translateX(4px);
  box-shadow: var(--ima-shadow);
}

.benefit-panel {
  height: 100%;
  border: 1px solid var(--ima-line);
  border-left: 3px solid var(--ima-gold);
  background: #fff;
  border-radius: 4px;
  padding: 1.05rem 1.2rem;
  color: var(--ima-primary);
  font-weight: 600;
  box-shadow: var(--ima-shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.benefit-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--ima-shadow);
}

.membership-badge {
  padding: 0.55rem 0.8rem;
  color: var(--ima-primary);
  font-weight: 600;
}

.mini-panel {
  min-height: 48px;
  border: 1px solid var(--ima-line);
  border-radius: 4px;
  background: #fff;
  padding: 0.65rem 0.9rem;
  color: var(--ima-primary);
  font-weight: 600;
  box-shadow: var(--ima-shadow-soft);
}

.metric {
  border-left: 3px solid var(--ima-gold);
  padding-left: 1rem;
}

.metric-card {
  min-height: 148px;
  border-top: 3px solid var(--ima-gold);
  padding: 1.35rem;
}

.metric-card .h2 {
  font-family: var(--ima-serif);
  font-weight: 900;
  color: var(--ima-primary);
  font-size: 2.1rem;
}

.metric-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--ima-accent);
  margin-bottom: 0.8rem;
}

.event-date {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--ima-primary-soft), var(--ima-primary-dark));
  border-bottom: 3px solid var(--ima-gold);
  color: #fff;
  box-shadow: 0 6px 14px rgba(8, 24, 48, 0.25);
}

.event-date strong {
  font-family: var(--ima-serif);
  font-size: 1.35rem;
  line-height: 1.1;
}

.event-date small {
  color: var(--ima-gold-light);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.branch-chip {
  border-left: 3px solid var(--ima-accent);
  padding: 1.05rem 1.2rem;
}

.section-band .bg-white.border,
.admin-content .bg-white.border {
  border-color: var(--ima-line) !important;
  border-radius: 6px;
  box-shadow: var(--ima-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.section-band .bg-white.border:hover {
  border-color: rgba(48, 6, 11, 0.3) !important;
  box-shadow: var(--ima-shadow);
}

.badge.text-bg-light {
  background: rgba(176, 141, 62, 0.1) !important;
  border: 1px solid rgba(176, 141, 62, 0.4);
  color: var(--ima-primary) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 0.4em 0.7em;
}

.feature-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.feature-list li {
  padding: 0.38rem 0 0.38rem 1.55rem;
  position: relative;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.98rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--ima-gold);
}

.status-pill {
  min-width: 88px;
  text-transform: capitalize;
}

/* --------------------------------------------------- home widgets & links */

.events-tabs {
  border-bottom: 2px solid var(--ima-line);
  gap: 0.25rem;
}

.events-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -2px;
  color: var(--ima-muted);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.6rem 1rem;
  background: transparent;
}

.events-tabs .nav-link:hover,
.events-tabs .nav-link:focus {
  color: var(--ima-primary);
  border-bottom-color: var(--ima-line);
}

.events-tabs .nav-link.active {
  color: var(--ima-primary);
  background: transparent;
  border-bottom-color: var(--ima-gold);
}

.notice-board {
  border-radius: 6px;
  border-top: 3px solid var(--ima-gold) !important;
  box-shadow: var(--ima-shadow-soft);
}

.notice-board-item {
  padding: 0.75rem 0;
}

.notice-board-item + .notice-board-item {
  border-top: 1px solid var(--ima-line);
}

.notice-board-item a {
  color: var(--ima-primary);
}

.notice-board-item a:hover {
  color: var(--ima-accent);
}

.bearer-avatar {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--ima-bg);
  border: 1px solid var(--ima-line);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px rgba(176, 141, 62, 0.45);
  color: var(--ima-muted);
  font-size: 2rem;
}

.bearer-avatar .icon {
  width: 2rem;
  height: 2rem;
}

.bearer-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(176, 141, 62, 0.55), 0 8px 20px rgba(48, 6, 11, 0.18);
}

.bearer-photo-sm {
  width: 96px;
  height: 96px;
}

.ext-link-card {
  display: block;
  border: 1px solid var(--ima-line);
  border-left: 3px solid var(--ima-gold);
  border-radius: 4px;
  background: #fff;
  padding: 1rem 1.15rem;
  color: var(--ima-primary);
  text-decoration: none;
  box-shadow: var(--ima-shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ext-link-card:hover,
.ext-link-card:focus {
  color: var(--ima-primary);
  transform: translateY(-3px);
  border-color: rgba(48, 6, 11, 0.32);
  border-left-color: var(--ima-accent);
  box-shadow: var(--ima-shadow);
}

.ext-link-card .icon {
  color: var(--ima-gold);
  margin-top: 0.2rem;
}

.footer-links .icon {
  width: 0.8em;
  height: 0.8em;
  opacity: 0.6;
}

/* ---------------------------------------------------------------- reveals */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

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

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
}

/* ------------------------------------------------------------------- forms */

.form-label {
  font-weight: 600;
  color: var(--ima-primary);
  font-size: 0.92rem;
}

.form-control,
.form-select {
  border-color: var(--ima-line);
  padding: 0.55rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ima-primary);
  box-shadow: 0 0 0 0.2rem rgba(48, 6, 11, 0.12);
}

/* ------------------------------------------------------------------- admin */

.admin-shell {
  min-height: 100vh;
  background: var(--ima-bg);
}

.admin-sidebar {
  background: linear-gradient(180deg, var(--ima-primary-dark), #060f1d);
}

.admin-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 4px;
  border-left: 3px solid transparent;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
  color: #fff;
  background: var(--ima-primary-soft);
  border-left-color: var(--ima-gold);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.35rem;
}

.admin-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 0.55rem 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.admin-group-toggle:hover,
.admin-group-toggle:focus,
.admin-group-toggle:not(.collapsed) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.admin-group-toggle:not(.collapsed) .admin-group-chev {
  transform: rotate(180deg);
}

.admin-group-chev {
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.admin-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.25rem 0 0.5rem 0.85rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(212, 180, 106, 0.3);
}

.admin-group-items .nav-link {
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
}

/* --------------------------------------------------- collapsible sidebar */

.admin-sidebar {
  width: 260px;
  flex: 0 0 260px;
  padding: 0.85rem;
  transition: width 0.18s ease, flex-basis 0.18s ease;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  min-height: 44px;
}

.admin-brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}

.admin-brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.admin-brand-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* The collapse control sits beside the emblem, mirroring the rail it opens. */
.admin-sidebar-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-sidebar-toggle:hover,
.admin-sidebar-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--ima-gold);
  color: #fff;
}

.admin-nav-footer {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-nav {
  min-height: calc(100vh - 5.5rem);
}

/* ---- collapsed rail: icons only ---- */

.sidebar-collapsed .admin-sidebar {
  width: 68px;
  flex: 0 0 68px;
}

.sidebar-collapsed .admin-brand {
  flex-direction: column;
  gap: 0.4rem;
}

.sidebar-collapsed .admin-brand-text,
.sidebar-collapsed .admin-nav-label,
.sidebar-collapsed .admin-group-chev {
  display: none;
}

.sidebar-collapsed .admin-sidebar .nav-link,
.sidebar-collapsed .admin-group-toggle {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  gap: 0;
  border-left-width: 0;
  border-bottom: 3px solid transparent;
}

.sidebar-collapsed .admin-sidebar .nav-link.active {
  border-bottom-color: var(--ima-gold);
}

/* Sub-items stay hidden on the rail; the group icon alone marks the section. */
.sidebar-collapsed .admin-group-items {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.sidebar-collapsed .admin-group.is-active-group .admin-group-toggle {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-collapsed .admin-brand-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

/* ---- small screens: the sidebar becomes a normal stacked block ---- */

@media (max-width: 991.98px) {
  .admin-sidebar,
  .sidebar-collapsed .admin-sidebar {
    width: auto;
    flex-basis: auto;
  }

  .admin-nav {
    min-height: 0;
  }

  /* On a phone the whole nav folds away behind the same control. */
  .sidebar-collapsed .admin-nav {
    display: none;
  }

  .sidebar-collapsed .admin-brand {
    flex-direction: row;
    margin-bottom: 0;
  }

  .sidebar-collapsed .admin-brand-text {
    display: block;
  }
}
/* ------------------------------------------------- sortable table headers */

.table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.table-sort:hover,
.table-sort:focus-visible {
  color: var(--ima-accent);
}

.table-sort-icon {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

.table-sort:hover .table-sort-icon {
  opacity: 0.7;
}

.table-sort.is-sorted {
  color: var(--ima-primary);
  font-weight: 700;
}

.table-sort.is-sorted .table-sort-icon {
  opacity: 1;
  color: var(--ima-accent);
}

/* The brand is just the emblem and a short mark, so the rail stays narrow. */
.admin-brand-text {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.admin-content {
  min-width: 0;
}

.table td,
.table th {
  vertical-align: middle;
}

.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ima-muted);
  border-bottom-width: 2px;
}

.object-fit-cover {
  object-fit: cover;
}

.gallery-thumb {
  height: 220px;
}

/* ------------------------------------------------------------------ footer */

.footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-links li + li {
  margin-top: 0.5rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.15s ease, padding-left 0.18s ease;
}

.footer-links a:hover,
.footer-links a:focus {
  color: var(--ima-gold-light);
  padding-left: 3px;
}

.site-footer,
footer.bg-dark {
  background:
    radial-gradient(1100px 420px at 90% -30%, rgba(176, 141, 62, 0.1), transparent 55%),
    linear-gradient(180deg, var(--ima-primary), var(--ima-primary-dark)) !important;
  border-top: 3px solid;
  border-image: var(--ima-gold-rule) 1;
}

.footer-emblem {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(212, 180, 106, 0.7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  flex: 0 0 auto;
}

.footer-emblem img {
  width: 54px;
  height: auto;
}

.footer-brand-name {
  font-family: var(--ima-serif);
  font-size: 1.12rem;
  color: #fff;
}

.footer-heading {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid;
  border-image: var(--ima-gold-rule) 1;
  display: inline-block;
}

.footer-office {
  margin-top: 0.85rem;
}

/* Phone, email and hours read as one line rather than a stacked list. */
.footer-office-meta {
  font-size: 0.88rem;
  line-height: 1.4;
}

.footer-office-meta > * + *::before {
  content: "b7";
  margin: 0 0.45rem;
  color: rgba(255, 255, 255, 0.35);
}

.footer-office-meta a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer-office-meta a:hover,
.footer-office-meta a:focus {
  color: var(--ima-gold-light);
}

/* Bootstrap's .text-white-50 measures 3.28:1 against the emblem green — below
   the 4.5:1 AA threshold. Raised to 72% opacity, which measures 5.06:1. */
.site-footer .text-white-50,
.admin-sidebar .text-white-50 {
  color: rgba(255, 255, 255, 0.72) !important;
}

.footer-policy-links {
  gap: 0.15rem 1rem;
  margin-top: 0.6rem;
}

.footer-policy-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.84rem;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.footer-policy-links a:hover,
.footer-policy-links a:focus {
  color: var(--ima-gold-light);
}

.footer-office .footer-heading {
  margin-top: 0.25rem;
}

.footer-utility {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
}

.footer-utility-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.15s ease;
}

.footer-utility-links a:hover,
.footer-utility-links a:focus {
  color: var(--ima-gold-light);
}

.footer-disclaimer {
  color: rgba(255, 255, 255, 0.5);
}

.footer-credit a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------ sign-in in the menu bar */

/* Compact dropdown for the short menus, styled to match the mega panel. */
/* Leading panel of a mega menu: says what the section covers before the links. */
.mega-intro {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(48, 6, 11, 0.1);
  height: 100%;
}

.mega-intro-text {
  color: var(--ima-ink-soft, #55617a);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.mega-intro-link {
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ima-accent);
  text-decoration: none;
}

.mega-intro-link:hover,
.mega-intro-link:focus {
  color: var(--ima-primary);
}

@media (max-width: 1199.98px) {
  .mega-intro {
    border-right: 0;
    padding-right: 0;
    margin-bottom: 0.75rem;
  }
}

.nav-dropdown {
  border: 0;
  border-top: 3px solid var(--ima-accent);
  border-radius: 0 0 5px 5px;
  padding: 0.4rem 0;
  min-width: 15rem;
  box-shadow: 0 18px 40px rgba(8, 24, 48, 0.18);
}

.nav-dropdown .dropdown-item {
  padding: 0.42rem 1.1rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ima-primary);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
  background: rgba(48, 6, 11, 0.05);
  border-left-color: var(--ima-gold);
  color: var(--ima-accent);
}

.nav-account {
  flex: 0 0 auto;
}

.btn-nav-login,
.btn-nav-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  padding: 0.42rem 0.95rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* The one clearly actionable item in the bar, so it carries the accent colour. */
.btn-nav-login {
  background: var(--ima-accent);
  border: 1px solid var(--ima-accent);
  color: #fff;
}

.btn-nav-login:hover,
.btn-nav-login:focus-visible {
  background: var(--ima-primary);
  border-color: var(--ima-gold);
  color: #fff;
  transform: translateY(-1px);
}

.btn-nav-login .icon {
  width: 1em;
  height: 1em;
}

/* Register sits beside it as the quieter of the two. */
/* The bar itself is --ima-primary, so the ghost button has to sit in white on
   it; the earlier primary-on-primary rule rendered "Register" invisible. */
.btn-nav-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-nav-ghost:hover,
.btn-nav-ghost:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--ima-primary);
}

@media (max-width: 1199.98px) {
  /* Stacked menu: the buttons go full width under the links. */
  /* Compact dropdown for the short menus, styled to match the mega panel. */
/* Leading panel of a mega menu: says what the section covers before the links. */
.mega-intro {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(48, 6, 11, 0.1);
  height: 100%;
}

.mega-intro-text {
  color: var(--ima-ink-soft, #55617a);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.mega-intro-link {
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ima-accent);
  text-decoration: none;
}

.mega-intro-link:hover,
.mega-intro-link:focus {
  color: var(--ima-primary);
}

@media (max-width: 1199.98px) {
  .mega-intro {
    border-right: 0;
    padding-right: 0;
    margin-bottom: 0.75rem;
  }
}

.nav-dropdown {
  border: 0;
  border-top: 3px solid var(--ima-accent);
  border-radius: 0 0 5px 5px;
  padding: 0.4rem 0;
  min-width: 15rem;
  box-shadow: 0 18px 40px rgba(8, 24, 48, 0.18);
}

.nav-dropdown .dropdown-item {
  padding: 0.42rem 1.1rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ima-primary);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
  background: rgba(48, 6, 11, 0.05);
  border-left-color: var(--ima-gold);
  color: var(--ima-accent);
}

.nav-account {
    width: 100%;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid rgba(48, 6, 11, 0.1);
    margin-top: 0.5rem;
  }

  .btn-nav-login,
  .btn-nav-ghost {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------------------------------------------------- footer, tightened up */

/* The footer inherited the 4rem section rhythm and the 1.7 body line-height,
   which left it very airy. It is a reference block, not reading copy, so it
   sets its own tighter measure. */
.site-footer .section-band {
  padding: 2.1rem 0 1.4rem;
}

.site-footer p {
  line-height: 1.45;
  margin-bottom: 0.6rem;
}

.site-footer address {
  line-height: 1.4;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}

.footer-heading {
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
}

.footer-links li + li {
  margin-top: 0;
}

/* The <li> inherits the 1.7 body line-height, and an inline-block anchor adds a
   baseline gap on top of it — together that was the remaining space between
   rows. Setting the line-height on the item and making the link a block removes
   both. */
.footer-links li {
  line-height: 1.25;
}

.footer-links a {
  display: block;
  line-height: 1.25;
  font-size: 0.9rem;
  padding: 0.12rem 0;
}

.footer-brand-block {
  margin-bottom: 0.85rem;
}

.footer-office {
  margin-top: 0.85rem;
}

/* Phone, email and hours read as one line rather than a stacked list. */
.footer-office-meta {
  font-size: 0.88rem;
  line-height: 1.4;
}

.footer-office-meta > * + *::before {
  content: "b7";
  margin: 0 0.45rem;
  color: rgba(255, 255, 255, 0.35);
}

.footer-office-meta a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer-office-meta a:hover,
.footer-office-meta a:focus {
  color: var(--ima-gold-light);
}

.footer-policy-links {
  gap: 0.15rem 1rem;
  margin-top: 0.6rem;
}

.footer-policy-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.84rem;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.footer-policy-links a:hover,
.footer-policy-links a:focus {
  color: var(--ima-gold-light);
}

.footer-office .footer-heading {
  margin-top: 0.25rem;
}

.footer-utility {
  margin-top: 1.1rem;
  padding-top: 0.8rem;
}

.footer-utility-links {
  gap: 0.35rem 1.25rem !important;
  margin-bottom: 0.6rem !important;
}

.footer-disclaimer {
  line-height: 1.5;
  margin-bottom: 0 !important;
}

.footer-bottom {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

@media (min-width: 992px) {
  /* Pull the three link columns in a little so they read as one group beside
     the wider brand and address columns. */
  .footer-links-col {
    padding-left: 1.25rem;
  }
}
.footer-bottom {
  background: rgba(4, 10, 20, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--ima-gold-light);
}

footer .h4,
footer .h6 {
  color: #fff;
}

/* -------------------------------------------------------------- back to top */

/* Social accounts. The same set of links is shown twice: as small icons at the
   right of the dark top bar, and again in the first footer column. Both sit on
   dark ground, so they are white and turn gold on hover. */
.topbar-social {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.topbar-social-link,
.footer-social-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.topbar-social-link .icon,
.footer-social-link .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.topbar-social-link:hover,
.topbar-social-link:focus-visible,
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--ima-gold-light);
  background: rgba(255, 255, 255, 0.12);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 1rem;
}

.footer-social-link {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  border-color: var(--ima-gold);
  transform: translateY(-2px);
}

/* Floating WhatsApp button. It keeps WhatsApp's own green — recognised
   instantly, and never confused with the Association's own buttons — and is
   stacked above the back-to-top control, which occupies the same corner. */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 5rem;
  z-index: 1500;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(8, 24, 48, 0.35);
  transition: transform 0.18s ease, background-color 0.15s ease;
}

.whatsapp-float .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1da851;
  color: #fff;
  transform: translateY(-3px);
}
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1500;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(212, 180, 106, 0.6);
  border-radius: 50%;
  background: var(--ima-primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 24, 48, 0.35);
  transition: transform 0.18s ease, background-color 0.15s ease;
}

.back-to-top:hover {
  background: var(--ima-primary-soft);
  transform: translateY(-3px);
}

.message-preview {
  max-width: 360px;
}

.message-preview summary {
  cursor: pointer;
  color: var(--ima-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------- responsive */

/* =========================================================== dark bands */

.section-band-navy {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(720px 320px at 88% -30%, rgba(176, 141, 62, 0.26), transparent 62%),
    radial-gradient(640px 300px at 0% 120%, rgba(158, 27, 50, 0.26), transparent 60%),
    linear-gradient(158deg, var(--ima-primary-soft) 0%, var(--ima-primary) 48%, var(--ima-primary-dark) 100%);
}

.section-band-navy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ima-gold-rule);
}

.section-band-navy h1,
.section-band-navy h2,
.section-band-navy h3,
.section-band-navy h4,
.section-band-navy .h1,
.section-band-navy .h2,
.section-band-navy .h3,
.section-band-navy .h4 {
  color: #fff;
}

.section-band-navy .eyebrow {
  color: var(--ima-gold-light);
}

.section-band-navy .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.section-band-navy a:not(.btn) {
  color: #fff;
}

.section-band-navy a:not(.btn):hover {
  color: var(--ima-gold-light);
}

.section-band-navy .benefit-panel {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: var(--ima-gold);
  color: #fff;
  box-shadow: none;
}

.section-band-navy .benefit-panel:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.section-band-navy .btn-outline-primary,
.section-band-navy .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--ima-primary);
  --bs-btn-hover-border-color: #fff;
}

/* ------------------------------------------------------- inverted heroes */

.hero .lead {
  color: rgba(255, 255, 255, 0.85) !important;
}

.hero .btn-outline-secondary,
.page-hero .btn-outline-secondary,
.page-hero .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--ima-primary);
  --bs-btn-hover-border-color: #fff;
}

.page-hero h1,
.page-hero h2,
.page-hero .h1,
.page-hero .h2 {
  color: #fff;
}

.page-hero .eyebrow {
  color: var(--ima-gold-light);
}

.page-hero .text-muted {
  color: rgba(255, 255, 255, 0.78) !important;
}

.page-hero .breadcrumbs,
.page-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.68);
}

/* The trail sits in the top right corner of the sub-page masthead so the page
   title leads the eye instead of competing with it. */
.page-hero .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  text-align: right;
}

@media (max-width: 575.98px) {
  /* On a phone the trail wraps, so keep it left rather than ragged-right. */
  .page-hero .breadcrumbs {
    justify-content: flex-start;
    text-align: left;
  }
}

.page-hero .breadcrumbs a:hover {
  color: #fff;
}

.page-hero a:not(.btn) {
  color: #fff;
}

.page-hero .badge.text-bg-light {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(212, 180, 106, 0.55);
  color: var(--ima-gold-light) !important;
}

.notice-panel {
  box-shadow: var(--ima-shadow-lift);
}

/* ----------------------------------------------------------- stat figures */

.stat-band {
  padding: 3.4rem 0;
}

.stat-band .metric-card {
  min-height: 0;
  border: 0;
  border-left: 1px solid var(--ima-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0.15rem 0 0.15rem 1.6rem;
}

.stat-band .metric-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 42px;
  background: var(--ima-gold-rule);
}

.stat-band .metric-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ima-line);
}

.stat-band .metric-icon {
  display: none;
}

.stat-band .metric-card .h2 {
  font-size: clamp(2.6rem, 1.9rem + 2.1vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem !important;
}

.stat-band .metric-card .text-muted {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.45;
}

/* --------------------------------------------------------- closing appeal */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 3.6rem 0;
  color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(700px 280px at 85% -40%, rgba(212, 180, 106, 0.32), transparent 60%),
    linear-gradient(118deg, var(--ima-accent-dark) 0%, var(--ima-accent) 58%, #7a1225 100%);
  border-top: 3px solid;
  border-image: var(--ima-gold-rule) 1;
}

.cta-band h2 {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem);
}

.cta-band .eyebrow {
  color: var(--ima-gold-light);
}

.cta-band .btn-light {
  --bs-btn-color: var(--ima-primary);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--ima-gold-light);
  --bs-btn-hover-color: var(--ima-primary-dark);
  --bs-btn-hover-border-color: var(--ima-gold-light);
  font-weight: 700;
}

.cta-band .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.6);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--ima-accent-dark);
  --bs-btn-hover-border-color: #fff;
  font-weight: 700;
}

/* ------------------------------------------------- type scale & card feel */

.section-band h2:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {
  font-size: clamp(1.75rem, 1.3rem + 1.35vw, 2.35rem);
  letter-spacing: -0.01em;
}

.feature-tile,
.news-card {
  padding: 1.65rem;
}

.feature-tile:hover,
.news-card:hover,
.branch-chip:hover {
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

/* "Read more" on a linked wing tile. The whole tile is the click target via
   .stretched-link, so this is a cue rather than a second link. */
.read-more {
  color: var(--ima-accent);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  transition: color 0.18s ease;
}

.feature-tile:hover .read-more {
  color: var(--ima-primary);
}

.feature-tile .badge.text-bg-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.9rem;
  height: 2.9rem;
  padding: 0 0.55rem;
  border: 0;
  border-bottom: 2px solid var(--ima-gold);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--ima-primary-soft), var(--ima-primary-dark)) !important;
  color: var(--ima-gold-light) !important;
  font-family: var(--ima-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 16px rgba(8, 24, 48, 0.22);
}


/* ------------------------------------------------------ office-bearer cards */

.bearer-card {
  padding: 2.15rem 1.5rem 1.9rem;
  background:
    linear-gradient(180deg, rgba(48, 6, 11, 0.04) 0%, rgba(255, 255, 255, 0) 118px),
    #fff;
}

.bearer-card .bearer-photo-sm {
  width: 116px;
  height: 116px;
}

.bearer-card h3,
.bearer-card .h5 {
  font-size: 1.2rem;
  margin-top: 0.2rem;
}

.bearer-card .eyebrow {
  font-size: 0.7rem;
}

.bearer-card::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin: 1rem auto 0;
  background: var(--ima-gold-rule);
}


/* ------------------------------- light surfaces sitting inside a dark band */
/* The dark-band rules above invert every descendant. White cards, panels and
   form fields dropped into a dark band must keep their normal ink. */

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) {
  color: var(--ima-ink);
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--ima-primary);
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) .text-muted {
  color: var(--ima-muted) !important;
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) .eyebrow {
  color: var(--ima-accent);
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) a:not(.btn) {
  color: var(--ima-emblem-green);
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card, .accordion, .table) a:not(.btn):hover {
  color: var(--ima-accent);
}

:is(.page-hero, .section-band-navy, .cta-band) :is(.bg-white, .lift-card, .feature-tile, .news-card, .event-row, .branch-chip, .notice-board, .notice-panel, .card) :is(.btn-outline-primary, .btn-outline-secondary) {
  --bs-btn-color: var(--ima-primary);
  --bs-btn-border-color: var(--ima-primary);
  --bs-btn-hover-bg: var(--ima-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--ima-primary);
}

:is(.page-hero, .section-band-navy, .cta-band) .form-control,
:is(.page-hero, .section-band-navy, .cta-band) .form-select {
  color: var(--ima-ink);
}

@media (min-width: 1200px) {
  .site-mega-nav .mega-dropdown {
    inset: 100% auto auto 50%;
    width: 70vw;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .site-mega-nav .mega-menu-item:hover > .mega-dropdown,
  .site-mega-nav .mega-menu-item:focus-within > .mega-dropdown {
    display: block;
  }

  .mega-inner {
    padding: 2.5rem 3rem 2.25rem;
  }

  .mega-dropdown .col-xl-4 + .col-xl-4 .mega-column {
    border-left: 1px solid var(--ima-line);
    padding-left: 2rem;
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .site-mega-nav .mega-menu-item:hover > .mega-dropdown,
  .site-mega-nav .mega-menu-item:focus-within > .mega-dropdown,
  .site-mega-nav .mega-dropdown.show {
    animation: mega-in 0.26s ease both;
  }
}

@keyframes mega-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1199.98px) {
  .site-mega-nav {
    padding-block: 0.2rem;
  }

  .site-mega-nav .navbar-collapse {
    padding: 0.5rem 0 1rem;
  }

  .site-mega-nav .nav-link {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-mega-nav .nav-link::after {
    content: none;
  }

  .mega-dropdown {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    border-bottom: 0;
  }

  .mega-column {
    padding: 1rem;
  }
}

@media (max-width: 767.98px) {
  .topbar .container {
    justify-content: center !important;
  }

  /* Bootstrap keeps .navbar-brand on one line; at 1.42rem the masthead title
     is wider than a phone screen and drags the whole page sideways. */
  .navbar-brand {
    white-space: normal;
  }

  .brand-emblem {
    width: 52px;
  }

  .brand-name {
    font-size: 1.1rem;
  }

  .brand-sub {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }

  .stat-band .metric-card {
    padding-left: 1.1rem;
  }

  .cta-band .justify-content-lg-end {
    justify-content: flex-start !important;
  }

  .topbar-identity {
    display: none;
  }

  .hero {
    min-height: 520px;
    background-image:
      linear-gradient(180deg, rgba(6, 18, 36, 0.9) 0%, rgba(8, 24, 48, 0.93) 55%, rgba(8, 24, 48, 0.97) 100%),
      url("../img/ima-ap-hero.webp");
    background-position: 62% center;
  }

  .hero-copy {
    padding: 3.5rem 0 4.5rem;
  }

  .masthead-actions,
  .header-search {
    width: 100%;
    max-width: none;
  }

  .notice-strip {
    margin-top: -1rem;
  }

  .notice-title,
  .notice-links {
    width: 100%;
  }

  .notice-title {
    border-right: 0;
    border-bottom: 3px solid var(--ima-gold);
  }

  .section-band {
    padding: 3.25rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-header,
  .site-footer,
  footer,
  .back-to-top,
  .whatsapp-float,
  .notice-strip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}