/* ================================================================
   Partner Sites — Custom Stylesheet
   Bootstrap 5 native. Zero jQuery / Canvas theme dependencies.

   Trimmed from GTR's custom-v4.css (2026-08-09) — kept only the
   sections that apply to trade-association/partner sites. GTR-only
   feature sections (destination cards, TSP results page, places-to-
   stay cards, article cards, industry/business section, newsletter
   band, community section, editorial colour-coding badges) were left
   out on purpose: no matching markup exists on the partner sites, so
   shipping that CSS to every client domain would be dead weight.
   The untouched original is kept alongside as
   "custom-v4 - GTR - copy.css" for reference.

   Structure:
   01. Design Tokens (:root)
   02. Base Reset & Typography
   03. Navbar & Topbar
   04. Mobile App Menu
   05. Social Share Sidebar
   06. Hero Section
   06-B. Page Hero — standard page title component
   07. Marquee Strip
   08. Section Labels (eyebrow / sh2 / sdesc)
   09. Buttons
   10. Events Section
   10-B. News List Item
   10-C. Event Card
   10-D. Member Card
   10-E. Board/Team Member Card
   10-F. News Row
   11. Footer
   12. Legal Pages
   13. Utility Helpers
   14. Klaro Cookie Consent
   15. Gallery Strip (filterable)
   16. Article Body
   17. Error Pages
   18. Article Hero
   19. Contact Page

   Last trimmed: 2026-08-09
================================================================ */

/* ================================================================
   01. DESIGN TOKENS
================================================================ */
:root {
  /* Brand colours are intentionally NOT defined here. This file is the shared,
     client-agnostic base every partner site loads before its own _base/<client>/
     <client>.css runs — baking one client's colours in as the "default" made every
     other client silently inherit that client's brand whenever they forgot to
     override a token. Each client file must declare all four tokens itself:
     --brand-dark, --brand-primary, --accent-primary, --accent-secondary. A client
     file that omits one gets an undefined variable (visibly broken), by design —
     that's a build-time bug to fix in that file, not something this file should
     paper over with a silent fallback. */

  /* Structural/neutral tokens — these ARE shared across every client regardless
     of brand, so they belong here. */
  --text-base: #1e0e0d; /* Base body text colour — near-black */
  --text-prose: #2a1f3d; /* Long-form/editorial text — more neutral than --brand-dark */
  --surface: #f4f6fa; /* Default page background — off-white */
  --surface-alt: #eceaf4; /* Alternate section background — tinted white */
  --surface-white: #ffffff; /* Pure white background — use where a section must not carry --surface's cool undertone */
  --text-muted: #6b5f7a; /* Secondary/muted text */
  --rule: rgba(89, 45, 140, 0.12); /* Subtle divider colour */

  /* Font stacks */
  --ff-h: "Plus Jakarta Sans", sans-serif; /* Headings & UI */
  --ff-b: "Plus Jakarta Sans", sans-serif; /* Body */
  --ff-s: "Source Serif 4", Georgia, serif; /* Editorial / italic */

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ff-b);
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--text-base);

  /* Background relief images */
  --bg-img-yellow: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-yellow.jpg");
  --bg-img-green: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-green.jpg");
  --bg-img-purple: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-purple.jpg");
  --bg-img-light-purple: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-light-purple.jpg");
  --bg-img-white: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-white.jpg");
  --bg-img-dark-purple: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-relief-dark-purple.jpg");
  --bg-img-white-green: url("https://core.ghanatrvl.com/images/backgrounds/ghanatrvl-background-white-relief-green.jpg");
  --bg-card-green: #c5dc6470;
}

/* ================================================================
   02. BASE RESET & TYPOGRAPHY
================================================================ */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--ff-b);
  background: var(--surface);
  color: var(--text-base);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky footer — #wrapper holds menu/hero/#content/#footer as siblings on every
   page template. Without this, a short page (e.g. an empty listing) leaves the
   footer floating wherever the content happens to end instead of pinned to the
   bottom of the viewport. #gotoTop and .social-share-sidebar are both
   position: fixed, so they sit outside this flow and aren't affected. */
#wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#content {
  flex: 1 0 auto;
}

/* Background relief utility classes */
.bg-img-purple {
  background-image: var(--bg-img-purple);
}
.bg-img-yellow {
  background-image: var(--bg-img-yellow);
}
.bg-img-green {
  background-image: var(--bg-img-green);
}
.bg-img-light-purple {
  background-image: var(--bg-img-light-purple);
}
.bg-img-dark-purple {
  background-image: var(--bg-img-dark-purple);
}
.bg-img-white {
  background-image: var(--bg-img-white);
}
.bg-img-white-green {
  background-image: var(--bg-img-white-green);
}
.card-bg-green {
  background-color: var(--bg-card-green) !important;
}

/* Scroll offset for sticky navbar — applies to all anchor targets */
h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 90px;
}

.fa-stack {
  vertical-align: middle;
  width: 1.25em;
  height: 1em;
  line-height: 1.25em;
}

.fa-stack-1x {
  line-height: inherit;
}

/* ================================================================
   03. NAVBAR & TOPBAR
   .gt-nav        — main sticky navbar
   .gt-topbar     — Ghana flag colour bar, nested inside .gt-nav so it stays sticky
   .navbar-main   — alias used on the same <nav> element
   .navbar-brand  — logo wrapper
   .logo-default  — the logo <img>
   Dropdown menu classes: .dropdown-menu.w-70, .dropdown-header-panel,
   .dropdown-section-title, .dropdown-item
================================================================ */

/* Sticky navbar */
.gt-nav {
  background: var(--surface) !important;
  min-height: 64px;
  box-shadow: 0 4px 20px rgba(35, 15, 66, 0.15);
  transition:
    min-height 0.3s,
    box-shadow 0.3s;
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Scrolled state — toggled by JS when user passes 60px */
.gt-nav.scrolled {
  min-height: 48px;
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.25);
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.gt-nav.scrolled .nav-link {
  padding: 0.35rem 0.7rem !important;
}
.gt-nav.scrolled .btn-cta {
  padding: 7px 15px;
  font-size: 10.5px;
}
.gt-nav.scrolled .logo-default {
  max-height: 42px;
}

/* Logo */
.navbar-brand {
  display: inline-flex;
  align-items: center;
}
.logo-default {
  max-height: 60px;
  width: auto;
  transition: max-height 0.3s;
}

/* Nav links */
.gt-nav .nav-link,
.navbar-main .nav-link {
  font-family: var(--ff-h);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--brand-dark) !important;
  border-bottom: 2px solid transparent;
  padding: 0.5rem clamp(0.35rem, 0.5vw, 0.75rem);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.gt-nav .nav-link:hover,
.gt-nav .nav-link.active,
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
  color: var(--brand-primary) !important;
  border-bottom-color: var(--brand-primary);
}

/* Mega dropdown — full-width centred panel */
.navbar .dropdown-menu.w-70 {
  width: clamp(280px, 70vw, 1500px);
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 0;
  border: none;
  border-top: 3px solid var(--brand-primary);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(35, 15, 66, 0.14);
  padding: 0;
  overflow: hidden;
}

/* Dark image-backed header panel inside dropdown */
.dropdown-header-panel {
  color: var(--surface);
  padding: 1.25rem 1.5rem;
}
.dropdown-header-panel h6 {
  color: var(--surface);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.dropdown-header-panel p {
  color: rgba(244, 246, 250, 0.9);
  font-size: 0.8rem;
  margin: 0;
}

/* Section title inside dropdown columns */
.dropdown-section-title {
  font-family: var(--ff-h);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 0.85rem 0.75rem 0.3rem;
}

/* Second sub-heading in a stacked column
   needs extra clearance from the group above */
.dropdown-col .dropdown-section-title:not(:first-child) {
  padding-top: 1.25rem;
}

/* Dropdown items — transparent at rest,
   shape defined by margin and border-radius */
.dropdown-item {
  font-family: var(--ff-b);
  font-size: clamp(0.8rem, 0.8vw, 0.875rem);
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  margin: 1px 6px;
  border-radius: 5px;
  color: var(--text-base);
  position: relative;
  background: transparent !important;
  white-space: normal;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.dropdown-item:hover {
  background: transparent !important;
  color: var(--brand-primary);
  box-shadow: none;
}

.dropdown-item:hover::before {
  content: "";
  position: absolute;
  inset: 0 6px 0 0;
  background: rgba(89, 45, 140, 0.08);
  border-radius: 5px;
  box-shadow: inset 6px 0 0 var(--brand-primary);
  z-index: -1;
}

/* Column vertical separator */
.dropdown-col {
  padding: 0.5rem 4px 0.5rem 0;
  overflow: hidden;
  border-right: 1px solid var(--rule);
}
.dropdown-col:last-child {
  border-right: none;
}

/* Mobile (< lg) — .dropdown-col switches from col-3 (25% each, desktop) to
   col-12 (full width) in the menu markup, so the panel needs to stack
   inside the navbar-collapse instead of floating as a centred fixed-width
   overlay, and the column separators need to run horizontal, not vertical. */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu.w-70 {
    position: static;
    width: 100%;
    left: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .dropdown-col {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0;
  }
  .dropdown-col:last-child {
    border-bottom: none;
  }

  /* #navbarMain sits inside .gt-nav (position:sticky, top:0). An opened
     mega-menu can grow taller than the viewport, and a stuck sticky element
     that overflows the viewport traps that overflow — page-level scroll
     can't reach it. Bounding the panel and scrolling it internally instead
     avoids that trap. */
  #navbarMain {
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Ghana flag topbar — nested inside .gt-nav so it scrolls with the sticky
   nav instead of being left behind above it. .gt-nav carries
   navbar-expand-lg, which forces flex-wrap:nowrap at lg+ breakpoints —
   so a flex-basis:100% item can't force its own line. Taking it out of
   flex flow with absolute positioning avoids that; .gt-nav's
   position:sticky already gives it a positioning context. */
.gt-topbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  transition: height 0.3s;
  background: linear-gradient(
    90deg,
    #cf0921 0%,
    #cf0921 33%,
    var(--accent-primary) 33%,
    var(--accent-primary) 66%,
    #006b3f 66%,
    #006b3f 100%
  );
}

/* Half height once .gt-nav.scrolled is toggled (JS, 60px scroll threshold) */
.gt-nav.scrolled .gt-topbar {
  height: 3px;
}

/* CTA button in nav */
.btn-cta {
  background: var(--accent-primary);
  color: var(--brand-dark);
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  padding: 9px 18px;
  border-radius: 24px;
  text-decoration: none;
  transition: background 0.18s;
  white-space: nowrap;
}
.btn-cta:hover {
  background: var(--accent-secondary);
  color: var(--brand-dark);
}

/* ================================================================
   04. MOBILE APP MENU
   .app-menu, .app-menu-container, .app-menu-item,
   .app-menu-link, .app-menu-style-2
   Fixed bottom tab bar on small screens (d-lg-none)
================================================================ */
.app-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 16px rgba(35, 15, 66, 0.1);
}

.app-menu-container {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.app-menu-item {
  flex: 1;
}

.app-menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 10px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  gap: 3px;
  transition: color 0.2s;
}
.app-menu-link i {
  font-size: 1.2rem;
}
.app-menu-link:hover,
.app-menu-link.active {
  color: var(--brand-primary);
}

/* ================================================================
   05. SOCIAL SHARE SIDEBAR
   .social-share-sidebar, .si-icon, .si-label
   Fixed right-edge expand-on-hover share buttons
   Colour classes set inline from DB: .bg-facebook etc
================================================================ */
.social-share-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.social-share-sidebar a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 38px;
  width: 38px;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  text-decoration: none;
  color: #f4f6fa;
  transition:
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s;
}
.social-share-sidebar a:hover {
  width: 148px;
}
.social-share-sidebar a:hover .si-label {
  opacity: 1;
  transform: translateX(0);
}

/* Muted per-platform treatment for the sidebar specifically: solid var(--surface)
   background, border and icon/label text in that platform's own brand colour. */
.social-share-sidebar a {
  border: 1.5px solid;
  background-color: var(--surface) !important;
}
.social-share-sidebar a.bg-facebook {
  border-color: #3b5998;
  color: #3b5998;
}
.social-share-sidebar a.bg-linkedin {
  border-color: #0e76a8;
  color: #0e76a8;
}
.social-share-sidebar a.bg-whatsapp {
  border-color: #25d366;
  color: #25d366;
}
.social-share-sidebar a.bg-x-twitter {
  border-color: #010101;
  color: #010101;
}
.social-share-sidebar a.bg-pinterest {
  border-color: #c8232c;
  color: #c8232c;
}
.social-share-sidebar a.bg-rss {
  border-color: #ee802f;
  color: #ee802f;
}
.social-share-sidebar a.bg-email3 {
  border-color: #6567a5;
  color: #6567a5;
}
/* .si-label hardcodes color:#f4f6fa (white) for the original dark-background design,
   which read as white-on-white against the new var(--surface) fill. Higher specificity
   than the plain .si-label rule, so this wins without needing !important. */
.social-share-sidebar a .si-label {
  color: inherit;
}

.si-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  order: 2;
}
.si-label {
  font-family: var(--ff-h);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 12px;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 0.18s 0.06s ease,
    transform 0.18s 0.06s ease;
  order: 1;
  color: #f4f6fa;
}

/* ================================================================
   06. HERO SECTION
   .hero — full-height section with background image
   Overlay layers (stacked bottom→top):
     .h-scrim  — uniform dark coat
     .h-grad   — directional gradient
     .h-atm    — brand violet tints
     .h-patt   — subtle Kente-inspired grid
     .h-circle — rotating decorative ring
     .h-bar    — accent vertical line
   Content:
     .hero-inner, .h-eyebrow, .hero-h1, .hero-intro
     .aud-pills, .ap (.t / .b variants)
     .hsearch
     .h-event-box, .h-article-box (right-column cards)
     .h-statsbar, .hstat, .hstat-n, .hstat-l
================================================================ */

.hero {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Hero background image — replaces CSS background-image */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Layer 1 — base scrim */
.h-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

/* Layer 2 — directional gradient */
.h-grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10, 4, 22, 0.72) 0%,
      rgba(10, 4, 22, 0.35) 35%,
      rgba(10, 4, 22, 0.1) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 4, 22, 0.8) 0%,
      rgba(10, 4, 22, 0.2) 45%,
      transparent 85%
    );
  pointer-events: none;
}

/* Layer 3 — brand atmosphere */
.h-atm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 70% at 80% 15%,
      rgba(89, 45, 140, 0.4) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 55% at 5% 85%,
      rgba(35, 15, 66, 0.55) 0%,
      transparent 55%
    );
  pointer-events: none;
}

/* Layer 4 — Kente-inspired grid texture */
.h-patt {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 30px,
      rgba(246, 238, 39, 0.04) 30px,
      rgba(246, 238, 39, 0.04) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 60px,
      rgba(197, 220, 100, 0.02) 60px,
      rgba(197, 220, 100, 0.02) 62px
    );
  pointer-events: none;
}

/* Decorative rotating ring */
.h-circle {
  position: absolute;
  right: -80px;
  top: 30px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(246, 238, 39, 0.1);
  animation: spin 60s linear infinite;
  pointer-events: none;
}
.h-circle::before {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(197, 220, 100, 0.07);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Accent vertical bar */
.h-bar {
  position: absolute;
  top: 0;
  right: 220px;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent-primary) 30%,
    var(--accent-secondary) 70%,
    transparent
  );
  opacity: 0.22;
  pointer-events: none;
}

/* Hero content wrapper */
.hero-inner {
  position: relative;
  z-index: 10;
  padding-bottom: 0;
}

/* Eyebrow label */
.h-eyebrow {
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  animation: up 0.8s ease both;
}
.h-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent-primary);
  display: block;
  flex-shrink: 0;
}

/* Main heading */
.hero-h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  animation: up 0.8s 0.1s ease both;
}

.hero-h1-span {
  color:var(--accent-primary);
}

/* Intro paragraph */
.hero-intro {
  font-family: var(--ff-s);
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 520px;
  margin-bottom: 28px;
  animation: up 0.8s 0.2s ease both;
}
.hero-intro strong {
  font-style: normal;
  font-family: var(--ff-h);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* Audience pills */
.aud-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  animation: up 0.8s 0.3s ease both;
}

.ap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 2px;
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.2s;
}
.ap.t {
  background: var(--accent-primary);
  color: var(--brand-dark);
  border-color: var(--accent-primary);
}
.ap.t:hover {
  background: var(--accent-secondary);
  color: var(--brand-dark);
}
.ap.b {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}
.ap.b:hover {
  background: rgba(89, 45, 140, 0.5);
  border-color: rgba(246, 238, 39, 0.4);
  color: var(--accent-primary);
}

/* Hero search bar */
.hsearch {
  display: flex;
  max-width: 500px;
  border: 2px solid rgba(246, 238, 39, 0.3);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s;
  animation: up 0.8s 0.4s ease both;
}
.hsearch:focus-within {
  border-color: var(--accent-primary);
}
.hsearch input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  padding: 13px 16px;
  font-family: var(--ff-b);
  font-size: 14px;
  color: #fff;
  outline: none;
}
.hsearch input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.hsearch button {
  background: var(--accent-primary);
  border: none;
  padding: 0 20px;
  font-family: var(--ff-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  cursor: pointer;
  transition: background 0.18s;
}
.hsearch button:hover {
  background: var(--accent-secondary);
}

/* Right-column: event box */
.h-event-box {
  background: rgba(89, 45, 140, 0.35);
  border: 1px solid rgba(246, 238, 39, 0.15);
  border-radius: 4px;
  padding: 18px 20px;
  max-width: 300px;
  width: 100%;
  text-align: center;
}
.h-event-img {
  max-height: 180px;
}
.h-event-eyebrow {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  color: var(--accent-primary);
  margin-bottom: 10px;
  gap: 7px;
}
.h-event-title {
  font-family: var(--ff-h);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.h-event-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
}

/* Right-column: article box */
.h-article-box {
  background: rgba(35, 15, 66, 0.65);
  border: 1px solid rgba(197, 220, 100, 0.15);
  border-radius: 4px;
  padding: 16px 20px;
  max-width: 270px;
  width: 100%;
  text-align: center;
}
.h-article-img {
  max-height: 90px;
}
.h-article-eyebrow {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  color: var(--accent-secondary);
  margin-bottom: 10px;
  gap: 7px;
}
.h-article-title {
  font-family: var(--ff-h);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.h-article-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 4px;
  font-weight: 300;
}

/* Shared small button used in hero boxes */
.h-button {
  font-size: 11px;
  padding: 6px 14px;
}

/* Stats bar below hero */
.h-statsbar {
  position: relative;
  z-index: 10;
  background: rgba(35, 15, 66, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(246, 238, 39, 0.15);
}
.hstat {
  padding: 14px 16px;
  border-right: 1px solid rgba(246, 238, 39, 0.1);
}
.hstat:last-child {
  border-right: none;
}
.hstat-n {
  font-family: var(--ff-h);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hstat-l {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.4;
}
.hstat-l strong {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 1px;
}

/* Shared animation keyframe */
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   06-B. PAGE HERO — standard page title component
   __page_title.php
   Distinct from .hero (homepage, 90vh).

   Structure:
     .page-hero                 — base with background image
     .page-hero--text-only      — no image variant (legal/policy pages)
     .page-hero--grad           — directional gradient overlay (z-index 1)
     .page-hero--atm            — brand atmosphere overlay (z-index 2)
     .page-hero--inner          — content wrapper (z-index 10)
     .page-hero--h1             — H1 style
     .page-hero--subtitle       — subtitle paragraph
     .meta-pill                 — shared with legal-hero, already defined
     .breadcrumb-bar            — shared with legal-hero, already defined
================================================================ */

.page-hero {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: clamp(200px, 26vh, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 3px solid var(--accent-primary);
  margin-bottom: 3rem;
}

/* Text-only variant — no image, no overlay layers, flat --brand-dark surface */
.page-hero--text-only {
  background-image: none !important;
  min-height: auto;
  padding: 2.5rem 0 2rem;
}

/* Overlay layer 1 — directional gradient. 2026-08-10: this selector was
   ".page-hero--accent-secondaryad" until now — an earlier find/replace token
   rename (--gr -> --accent-secondary) matched the "--gr" inside "--grad" by
   accident, since it's a BEM modifier name, not a CSS custom property. The
   overlay HTML (__page_title.php) always said "page-hero--grad", so this rule
   had been silently unmatched — no darkening overlay was ever rendering,
   which is a big part of why titles were washing out against bright photos. */
.page-hero--grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(10, 4, 22, 0.72) 0%,
      rgba(10, 4, 22, 0.48) 50%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 4, 22, 0.7) 0%,
      rgba(10, 4, 22, 0.15) 40%,
      transparent 75%
    );
  pointer-events: none;
  z-index: 1;
}
/* Overlay layer 2 — brand atmosphere, violet radial tints */
.page-hero--atm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 70% at 80% 15%,
      rgba(89, 45, 140, 0.2) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 55% at 5% 85%,
      rgba(35, 15, 66, 0.3) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 2;
}

/* Content wrapper — sits above both overlay layers */
.page-hero--inner {
  position: relative;
  z-index: 10;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* H1 */
.page-hero--h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: normal;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.5rem;
}

/* Subtitle */
.page-hero--subtitle {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
  max-width: 640px;
}

.page-hero .meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-family: var(--ff-h);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}
.page-hero .meta-pill i {
  font-size: 0.7rem;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .page-hero {
    min-height: clamp(180px, 30vh, 260px);
  }
  /* 2026-08-10: was ".page-hero__inner" (underscore) — never matched
     ".page-hero--inner" (dash), pre-existing dead rule, unrelated to the
     --grad rename bug above. Fixed while already in this section. */
  .page-hero--inner {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* ================================================================
   07. MARQUEE STRIP
   .mstrip, .mtrack
================================================================ */
.mstrip {
  background: var(--accent-primary);
  overflow: hidden;
  white-space: nowrap;
  padding: 13px 0;
}
.mtrack {
  display: inline-flex;
  gap: 44px;
  animation: mq 80s linear infinite;
  padding-right: 44px;
}
.mtrack span {
  font-family: var(--ff-s);
  font-size: 13px;
  color: var(--brand-dark);
  white-space: nowrap;
}
.mtrack .st {
  font-family: var(--ff-b);
  font-style: normal;
  font-size: 0.7rem;
  color: var(--brand-primary);
  align-self: center;
}
@keyframes mq {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ================================================================
   08. SECTION LABELS
   .eyebrow / .eyebrow-mv (same intent, dark section variant)
   .eyebrow-ye (light section variant — yellow text)
   .sh2 — section heading
   .sdesc — section description
================================================================ */
.eyebrow,
.eyebrow-mv {
  font-family: var(--ff-h);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.eyebrow::before,
.eyebrow-mv::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--accent-primary);
  display: block;
  flex-shrink: 0;
}

.eyebrow-ye {
  font-family: var(--ff-h);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.eyebrow-ye::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--accent-primary);
  display: block;
  flex-shrink: 0;
}

.sh2 {
  font-family: var(--ff-h);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.sh2 em {
  font-style: italic;
  color: var(--brand-primary);
  text-transform: none;
}

.sdesc {
  font-family: var(--ff-b);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ── Tier icon pill — geometry only, colour via tier-* classes ── */
.tier-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
}

/* tier level colour */
.tier-starter {
  color: var(--text-muted);
  background-color: rgba(107, 95, 122, 0.15);
}
.tier-silver {
  color: var(--brand-primary);
  background-color: rgba(89, 45, 140, 0.15);
}
.tier-gold {
  color: var(--brand-dark);
  background-color: rgba(246, 238, 39, 0.4);
}
.tier-platinum {
  color: var(--brand-dark);
  background-color: rgba(197, 220, 100, 0.4);
}
.tier-gold-web {
  color: var(--brand-dark);
  background-color: rgba(246, 238, 39, 0.85);
}
.tier-platinum-web {
  color: var(--brand-dark);
  background-color: rgba(197, 220, 100, 0.85);
}

/* ================================================================
   09. BUTTONS
   .btn-p — primary (yellow fill)
   .btn-o — outline (dark purple border)
   .btn-g — ghost (semi-transparent, for dark backgrounds)
================================================================ */
.btn-p {
  background: var(--accent-primary);
  color: var(--brand-dark);
  border: none;
  padding: 11px 22px;
  font-family: var(--ff-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 24px;
  text-decoration: none;
  display: inline-block;
  transition:
    background 0.18s,
    transform 0.2s;
}
.btn-p:hover {
  background: var(--accent-secondary);
  color: var(--brand-dark);
  transform: translateY(-2px);
}

.btn-o {
  background: transparent;
  color: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  padding: 9px 20px;
  font-family: var(--ff-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 24px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.18s;
}
.btn-o:hover {
  background: var(--brand-dark);
  color: var(--accent-primary);
}

.btn-g {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  padding: 8px 18px;
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 24px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.18s;
}
.btn-g:hover {
  background: rgba(89, 45, 140, 0.5);
  border-color: rgba(246, 238, 39, 0.4);
  color: var(--accent-primary);
}

/* List a TSP button — used in .site-header context */
.btn-list-tsp {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--accent-primary);
  color: var(--brand-dark);
  border: none;
  border-radius: 4px;
  padding: 0.45rem 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition:
    background 0.15s,
    transform 0.1s;
}
.btn-list-tsp:hover {
  background: #fffb6e;
  color: var(--brand-dark);
  transform: translateY(-1px);
}

/* Button size modifier — large */
.btn-p.btn--lg,
.btn-o.btn--lg,
.btn-g.btn--lg {
  font-size: 14px;
  padding: 16px 40px;
  letter-spacing: 0.12em;
}

/* Button size modifier — small (compact inline actions, e.g. .nrow-actions) */
.btn-p.btn--sm,
.btn-o.btn--sm,
.btn-g.btn--sm {
  font-size: 10px;
  padding: 6px 14px;
  letter-spacing: 0.06em;
}

/* ================================================================
   10. EVENTS SECTION
   .eitem, .ebox, .eday, .emon, .etitle, .eloc, .etag, .eimg
   .evt-box (submit CTA panel)
================================================================ */
.eitem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.eitem:first-child {
  border-top: 1px solid var(--rule);
}
.eitem:hover {
  background: rgba(89, 45, 140, 0.04);
  margin: 0 -8px;
  padding: 14px 8px;
}

.ebox {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  background: var(--brand-dark);
  border-radius: 4px;
  padding: 8px 4px;
}
.eday {
  font-family: var(--ff-h);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.emon {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.eimg {
  height: 100px;
  width: max-content;
  max-width: none !important;
}
.etitle {
  font-family: var(--ff-h);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 2px;
  line-height: 1.2;
}
.eloc {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 300;
}
.etag {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: rgba(89, 45, 140, 0.1);
  padding: 2px 7px;
  border-radius: 2px;
  display: inline-block;
  margin-top: 3px;
}

.evt-box {
  background: var(--brand-dark);
  border-radius: 4px;
  padding: 26px 28px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.evt-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 30%,
    rgba(89, 45, 140, 0.5) 0%,
    transparent 60%
  );
}

/* ================================================================
   10-B. NEWS LIST ITEM
   .nitem, .nitem-img, .nitem-body, .nitem-meta, .nitem-title
   Compact thumbnail + title row, used in sidebar/listing contexts
   (e.g. __block_news_sidebar.php). Same list-row family as .eitem
   above, but with a real thumbnail image instead of a date box.
================================================================ */
.nitem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.nitem:first-child {
  border-top: 1px solid var(--rule);
}
.nitem:hover {
  background: rgba(89, 45, 140, 0.04);
}
.nitem-img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
}
.nitem-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nitem-meta {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.nitem-title {
  font-family: var(--ff-h);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.3;
  margin: 0;
}
.nitem-title a {
  color: inherit;
  text-decoration: none;
}
.nitem-title a:hover {
  color: var(--brand-primary);
}

/* ================================================================
   10-C. EVENT CARD
   .ecard, .ecard-img-wrap, .ecard-badge, .ecard-body, .ecard-date,
   .ecard-title, .ecard-loc, .ecard--past (modifier)
   Image-forward card used in __block_events_current_bar.php,
   __block_events_current.php and __block_events_past.php. Native
   Bootstrap grid handles the layout (row g-4 / col-*) — no carousel,
   the old owl-carousel markup relied on jQuery that no longer loads.
================================================================ */
.ecard {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.08);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.ecard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(35, 15, 66, 0.14);
  color: inherit;
}
.ecard-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-alt);
}
.ecard-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ecard-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--surface);
  color: var(--brand-dark);
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}
.ecard-body {
  padding: 1rem 1.1rem 1.25rem;
}
.ecard-date {
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
.ecard-title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-dark);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.ecard-loc {
  font-family: var(--ff-b);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Past-event variant — used in __block_events_past.php to visually separate
   "already happened" from "upcoming" without a second card component. The
   original code had a grayscale filter for this but on a class with no CSS
   rule behind it, so it never actually applied. */
.ecard--past .ecard-img-wrap img {
  filter: grayscale(85%);
}
.ecard--past:hover .ecard-img-wrap img {
  filter: grayscale(0%);
}
.ecard--past .ecard-date {
  color: var(--text-muted);
}

/* ================================================================
   10-D. MEMBER CARD
   .mcard, .mcard-logo-wrap, .mcard-name
   Logo-forward card used in __block_associations.php (and reusable
   anywhere else a member/partner logo grid is needed). object-fit:
   contain, not cover, since these are logos, not photos — cropping
   a logo the way .ecard crops a photo would distort it.
================================================================ */
.mcard {
  display: block;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.08);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.mcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(35, 15, 66, 0.14);
  color: inherit;
}
.mcard-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 0.75rem;
}
.mcard-logo-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.mcard-name {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-dark);
}

/* ================================================================
   10-E. BOARD/TEAM MEMBER CARD
   .bmcard, .bmcard-img-wrap, .bmcard-img, .bmcard-body, .bmcard-name, .bmcard-role
   Portrait-forward card used in __block_board_members.php. Trust in a board
   comes from actually being able to see the person — the previous design used
   a 110px circular thumbnail that read as almost decorative. This gives the
   photo most of the card: a fixed portrait aspect-ratio box with object-fit:
   cover (crop, not squash), name/role stacked below.
================================================================ */
.bmcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-white);
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.bmcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(35, 15, 66, 0.14);
}
.bmcard-img-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-alt);
}
.bmcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s ease;
}
.bmcard-img-wrap:hover .bmcard-img {
  transform: scale(1.04);
}
.bmcard-body {
  padding: 1.1rem 1rem 1.25rem;
  text-align: center;
}
.bmcard-name {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
  margin-bottom: 0.15rem;
}
.bmcard-role {
  font-family: var(--ff-b);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

/* ================================================================
   SECTION SPACING STANDARD
   .section — every home-page content band (__block_home_intro.php,
   __block_testimonials.php, __block_partner_logo_bar.php) shares this
   class. Baseline bottom margin so consecutive sections don't sit flush
   against each other -- matches Bootstrap's mb-5 (3rem) rather than
   adding that utility class individually to every instance.
================================================================ */
.section {
  margin-bottom: 3rem;
}

/* ================================================================
   WELCOME MESSAGE SECTION
   .welcome-msg-section — full-bleed tinted band behind the home page's
   chairperson/president's-message card (see __block_home_intro.php),
   so it reads as a distinct section instead of blending into the plain
   page background above and below it. Background is a light mix of the
   client's own --brand-primary rather than a flat neutral tint, so it
   picks up each client's actual brand colour instead of looking the
   same on every site.
================================================================ */
.welcome-msg-section {
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-white));
}

/* ================================================================
   MEMBERS -- home page bar + full listing page
   .members-bar-section, .member-line — home page, __block_members_bar.php
   .mfilter-bar, .mfilter-count — search/location/rating filter, __block_members_entities.php
   .mcard, .mcard-img-wrap, .mcard-img, .mcard-body, .mcard-type, .mcard-name,
   .mcard-rating, .mcard-location, .mcard-map-link, .mcard-summary — member card,
   __block_members_entities.php. Uniform across every member regardless of GTR
   subscription tier -- no tier-based ordering or styling here, deliberately
   (see __block_members_entities.php's own header comment for why).
================================================================ */
.members-bar-section {
  padding: 2rem 0;
}
.member-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  background: var(--surface-white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-base);
  font-family: var(--ff-h);
  font-weight: 600;
  font-size: 0.9rem;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.member-line:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  color: var(--brand-primary);
}
.member-line i {
  font-size: 1rem;
  flex-shrink: 0;
}

.malpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.malpha-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  background: var(--surface-white);
  border-radius: 8px;
  font-family: var(--ff-h);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.malpha-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.malpha-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.mfilter-bar {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.mfilter-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-white);
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.mcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(35, 15, 66, 0.14);
}
.mcard-img-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-alt);
}
.mcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcard-body {
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mcard-type {
  font-family: var(--ff-h);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcard-name {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
  margin-bottom: 0.3rem;
}
.mcard-name a {
  color: inherit;
  text-decoration: none;
}
.mcard-name a:hover {
  color: var(--brand-primary);
}
.mcard-rating {
  font-size: 0.8rem;
  color: var(--accent-primary);
  margin-bottom: 0.4rem;
}
.mcard-location {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.mcard-map-link {
  margin-left: 6px;
  color: var(--brand-primary);
  text-decoration: underline;
}
.mcard-summary {
  font-size: 0.85rem;
  color: var(--text-base);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   10-F. NEWS ROW
   .nrow, .nrow-img-wrap, .nrow-badge, .nrow-body, .nrow-date, .nrow-title,
   .nrow-snippet, .nrow-actions, .nrow--hidden
   Horizontal listing row used in __block_news_all.php (/news/). Distinct
   from .nitem (10-B), which is a compact sidebar teaser — this row carries
   more content per item (snippet text, up to three action links) since a
   news/article table can mix a bare snippet with a linked article, an
   external source, and/or a downloadable PDF on the same record.
   .nrow--hidden is toggled by the plain-JS "load more" control at the
   bottom of __block_news_all.php — no extra request, everything's already
   in the DOM, just display:none until revealed.
================================================================ */
.nrow {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.nrow:first-child {
  padding-top: 0;
}
.nrow--hidden {
  display: none;
}
.nrow-img-wrap {
  position: relative;
  flex-shrink: 0;
  width: 250px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-alt);
}
.nrow-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nrow-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--surface);
  color: var(--brand-dark);
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
.nrow-body {
  flex: 1 1 auto;
  min-width: 0;
}
.nrow-date {
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.3rem;
}
.nrow-title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-dark);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.nrow-title a {
  color: inherit;
  text-decoration: none;
}
.nrow-title a:hover {
  color: var(--brand-primary);
}
.nrow-snippet {
  font-family: var(--ff-b);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.nrow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* nws_bln_current = 0 -- grayscale-until-hover, same treatment as .ecard--past on Events */
.nrow--past .nrow-img-wrap img {
  filter: grayscale(85%);
}
.nrow--past:hover .nrow-img-wrap img {
  filter: grayscale(0%);
}
.nrow--past .nrow-date {
  color: var(--text-muted);
}

@media (max-width: 575.98px) {
  .nrow {
    flex-direction: column;
  }
  .nrow-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ================================================================
   GHANATRVL CREDIT BAR
   .gtr-credit-bar — quiet "developed & hosted by GhanaTRVL" strip,
   lives at the top of #footer itself (see __footer.php /
   __ghanatrvl_bar.php) -- styled for the footer's dark background, not
   the light page body. Site-wide, but only the homepage version is an
   actual <a> link (.gtr-credit-static is the plain-text version shown
   on every other page) -- both share the same look, only the hover
   state and cursor differ, since only one of them is interactive.
================================================================ */
.gtr-credit-bar {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
  text-align: center;
}
.gtr-credit-bar a,
.gtr-credit-bar .gtr-credit-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}
.gtr-credit-bar a {
  transition: color 0.18s;
}
.gtr-credit-bar a:hover {
  color: var(--accent-primary);
}
.gtr-credit-bar img {
  height: 18px;
  width: auto;
  opacity: 0.6;
}
.gtr-credit-bar a img {
  transition: opacity 0.18s;
}
.gtr-credit-bar a:hover img {
  opacity: 0.9;
}
.gtr-credit-bar strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* ================================================================
   11. FOOTER
   Structure: <footer id="footer" class="dark">
     #footer — outer wrapper, dark background
     .footer-widgets-wrap — inner padded content area
     .col-mb-50 — row spacing utility (Canvas replacement)
     .widget — column content block
     .footer-logo — logo image
     .footer-text — intro blurb + hashtag
     .footer-icons — social icon row
     .footer-links — nav link columns (Travellers / Businesses / etc.)
     .title-font — column heading style
     .social-icon.si-small + .h-bg-* — social icon buttons
     #copyrights — bottom bar
     .copyright-links — legal links in bottom bar
================================================================ */

/* ── Outer footer wrapper ── */
#footer {
  background-color: var(--brand-dark);
  border-top: 4px solid rgba(246, 238, 39, 0.2);
  color: rgba(255, 255, 255, 0.75);
  position: relative;
}

/* ── Inner content padding ── */
#footer .footer-widgets-wrap {
  padding: 4rem 0 2.5rem;
}

/* ── Dark theme text & link colours (class="dark" on <footer>) ── */
#footer .footer-widgets-wrap,
.dark#footer .footer-widgets-wrap {
  color: rgba(255, 255, 255, 0.7);
}
#footer .footer-widgets-wrap a,
.dark#footer .footer-widgets-wrap a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s;
}
#footer .footer-widgets-wrap a:hover,
.dark#footer .footer-widgets-wrap a:hover {
  color: var(--accent-primary);
}

/* ── col-mb spacing utility — Bootstrap-native replacement for Canvas col-mb-* ── */
[class*="col-mb-"] {
  margin-bottom: 0;
} /* reset Canvas negative margin trick */
[class*="col-mb-"] > .col,
[class*="col-mb-"] > [class*="col-"] {
  padding-bottom: var(--col-mb, 50px);
}
.col-mb-30 {
  --col-mb: 30px;
}
.col-mb-50 {
  --col-mb: 50px;
}
.col-mb-80 {
  --col-mb: 80px;
}

/* ── Widget blocks ── */
.widget {
  position: relative;
  margin-top: 0;
}
.widget p {
  line-height: 1.7;
}
.widget:first-child {
  margin-top: 0;
}

/* ── Logo ── */
.footer-logo {
  display: block;
  height: 48px;
  width: auto;
  margin-bottom: 16px;
}

/* ── Intro text block ── */
.footer-text {
  font-family: var(--ff-b);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  padding: 0;
}

/* ── Social icons row ── */
.footer-icons {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Social icon base ──
   Two <i> tags stack vertically inside a fixed-height overflow:hidden
   container. At rest: first icon visible. On hover: both shift up by
   one icon-height, hiding the first and revealing the second (which
   carries the brand colour background via .h-bg-* on the <a>).
── */
.social-icon {
  --si-size: 2rem;
  --si-fs: 0.875rem;
  position: relative;
  display: inline-flex;
  flex-direction: column; /* stack icons vertically */
  align-items: center;
  width: var(--si-size);
  height: var(--si-size);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  overflow: hidden; /* clips the second icon until hover */
  transition:
    border-color 0.2s,
    color 0.2s;
  flex-shrink: 0;
}
.social-icon.si-small {
  --si-size: 2rem;
  --si-fs: 0.875rem;
}

/* Each icon fills exactly one slot height */
.social-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--si-size);
  height: var(--si-size);
  font-size: var(--si-fs);
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

/* On hover: shift both icons up by one slot together — first hides, second appears.
   2026-08-12 - Claude - Was margin-top (only on i:first-child, relying on flex reflow to carry
   i:last-child up with it). Confirmed live that margin-top had zero effect on this element even
   set inline with !important, while width/height/transform all applied normally on the same
   element in the same test -- some margin-specific quirk, cause unconfirmed. transform sidesteps
   it entirely (and doesn't trigger reflow), so both icons are moved explicitly here instead of
   relying on one shifting the other. */
.social-icon:hover i {
  transform: translateY(calc(var(--si-size) * -1));
}

/* Second icon always white (sits on brand colour background) */
.social-icon i:last-child {
  color: #fff;
}

.social-icon:hover {
  border-color: transparent;
  color: #fff;
}

/* ── Social brand colours — all platforms used in footer & share sidebar ── */
.bg-facebook,
.h-bg-facebook:hover {
  background-color: #3b5998 !important;
}
.bg-linkedin,
.h-bg-linkedin:hover {
  background-color: #0e76a8 !important;
}
.bg-whatsapp,
.h-bg-whatsapp:hover {
  background-color: #25d366 !important;
}
.bg-twitter,
.h-bg-twitter:hover {
  background-color: #00acee !important;
}
.bg-x-twitter,
.h-bg-x-twitter:hover {
  background-color: #010101 !important;
}
.bg-instagram,
.h-bg-instagram:hover {
  background-color: #e1306c !important;
}
.bg-youtube,
.h-bg-youtube:hover {
  background-color: #ff0000 !important;
}
.bg-tiktok,
.h-bg-tiktok:hover {
  background-color: #010101 !important;
}
.bg-pinterest,
.h-bg-pinterest:hover {
  background-color: #c8232c !important;
}
.bg-rss,
.h-bg-rss:hover {
  background-color: #ee802f !important;
}
.bg-email3,
.h-bg-email3:hover {
  background-color: #6567a5 !important;
}

/* ── Footer link columns ── */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.875rem;
}
/* Chevron bullet using FontAwesome Light (fa-light fa-chevron-right) */
.footer-links li::before {
  content: "\f054";
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-size: 0.6rem;
  color: var(--accent-primary);
  flex-shrink: 0;
  opacity: 0.8;
}
.footer-links li a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s;
  font-weight: 300;
}
.footer-links li a:hover {
  color: var(--accent-primary);
}

/* ── Column headings (Travellers / Businesses / etc.) ── */
.title-font {
  font-family: var(--ff-h);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Colour utility used on the #GhanaTRVL hashtag line ── */
.color-yellow {
  color: var(--accent-primary) !important;
}

/* ── Copyrights bar ── */
#copyrights {
  padding: 1.25rem 0;
  background-color: rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.6;
}

.copyright-links {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.35);
}
.copyright-links a {
  display: inline-block;
  margin: 0 0.35rem;
  color: rgba(255, 255, 255, 0.35);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s;
}
.copyright-links a:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.copyright-links a:first-child {
  margin-left: 0;
}

/* ================================================================
   12. LEGAL PAGES
   .legal-hero, .breadcrumb-bar, .legal-doc-nav,
   .legal-body, .legal-sidebar, .legal-content (sidebar+content split is a plain
   Bootstrap row/col-lg-3/col-lg-9 in the markup, not a custom class),
   .toc-label, .toc-list, .sidebar-divider, .sidebar-contact-note,
   .content-lead, .legal-section, .section-rule, .legal-highlight, .contact-card,
   .meta-pill
================================================================ */

/* Hero band */
.legal-hero {
  background: var(--brand-dark);
  padding: 2.5rem 0 2rem;
  border-bottom: 3px solid var(--accent-primary);
}
.legal-hero h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  line-height: 1.15;
}
.legal-hero .subtitle {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
}
.legal-hero .meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-family: var(--ff-h);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}
.legal-hero .meta-pill i {
  font-size: 0.7rem;
}

/* Breadcrumb bar */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.breadcrumb-bar a,
.breadcrumb-bar span {
  font-family: var(--ff-h);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.breadcrumb-bar a:hover {
  color: var(--accent-primary);
}
.breadcrumb-bar .sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}
.breadcrumb-bar .current {
  color: var(--accent-primary);
}

/* Doc type nav tabs */
.legal-doc-nav {
  background: var(--brand-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* .page-hero carries margin-bottom: 3rem as a general fix for every page (deliberate, see §06-B) --
   on the three legal pages it just leaves a grey gap between the hero and .legal-doc-nav (the first
   thing inside #content on those pages), which reads wrong, as if the tab bar weren't part of the
   same header unit as the hero. Zeroing the hero's own margin only in that specific case, via
   :has(), rather than touching the shared 3rem default that every other page relies on. */
.page-hero:has(+ #content .legal-doc-nav) {
  margin-bottom: 0;
}
.legal-doc-nav .nav-link {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 0.75rem 1.1rem;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.legal-doc-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.legal-doc-nav .nav-link.active {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary);
}

/* Page body */
.legal-body {
  background: var(--surface);
  min-height: 60vh;
}

/* Sidebar + content split — plain Bootstrap row/col-lg-3/col-lg-9 in the markup (see
   __block_legal_content.php), not a custom grid. The fixed-240px approach this replaced left a
   growing dead gap on wide screens once the content column's own max-width capped out before the
   row did; col-9 always fills whatever space col-3 doesn't use, at any container width. Bootstrap's
   own breakpoint collapse (col-lg-3/col-lg-9 -> stacked below lg) handles the responsive fold too,
   paired with d-none d-lg-block on the sidebar in the markup — no custom media query needed here. */

/* Sidebar */
.legal-sidebar {
  position: sticky;
  top: 58px;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-right: 1px solid var(--rule);
  background: #fff;
  min-height: calc(100vh - 58px);
}
.toc-label {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 1.5rem;
  margin-bottom: 0.75rem;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.toc-list li a {
  display: block;
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.35rem 1.5rem;
  border-left: 3px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  line-height: 1.4;
}
.toc-list li a:hover {
  color: var(--brand-primary);
  background: var(--surface);
  border-left-color: var(--rule);
}
.toc-list li a.active {
  color: var(--brand-dark);
  font-weight: 500;
  border-left-color: var(--accent-primary);
  background: #fafbff;
}
.sidebar-divider {
  height: 1px;
  background: var(--rule);
  margin: 1rem 1.5rem 1.5rem;
}
.sidebar-contact-note {
  padding: 0 1.5rem;
}
.sidebar-contact-note p {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.sidebar-contact-note a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
}
.sidebar-contact-note a:hover {
  text-decoration: underline;
}

/* Main content — fills col-lg-9, no max-width cap: the point of the col-3/col-9 split is that the
   text uses whatever width the sidebar doesn't, at any container size. Only top/bottom padding set
   here deliberately — left/right must stay untouched so Bootstrap's own gutter-driven column
   padding (from g-5 on the row) still applies; a shorthand `padding: Xrem 0 Yrem` here previously
   zeroed the horizontal padding outright and collapsed the sidebar/content gap to 0px. */
.legal-content {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (max-width: 1199.98px) {
  .legal-content {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
}

.content-lead {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: 1.0625rem;
  color: #3d3050;
  line-height: 1.7;
  border-left: 4px solid var(--accent-primary);
  padding: 1rem 1.25rem;
  background: #fffef0;
  border-radius: 0 6px 6px 0;
  margin-bottom: 2.5rem;
}

/* The TOC/"On this page" links point at .legal-section (the wrapper div carrying the id), not at
   the <h2> inside it -- scroll-margin-top on .legal-content h2/h3 below only helps if a link
   targeted the heading directly, which none of them do. This is the one that actually stops the
   sticky top navbar covering the heading text after a jump. */
.legal-section {
  scroll-margin-top: 80px;
}

.legal-content h2 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  color: var(--brand-dark);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  scroll-margin-top: 80px;
}
.legal-content h3 {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
  color: var(--brand-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 80px;
}
.legal-content p,
.legal-content ul,
.legal-content ol {
  font-family: var(--ff-b);
  font-weight: 300;
  font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
  color: var(--text-prose);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.legal-content ul,
.legal-content ol {
  padding-left: 1.5rem;
}
.legal-content ul li,
.legal-content ol li {
  margin-bottom: 0.35rem;
}
.legal-content a {
  color: var(--brand-primary);
  font-weight: 500;
  text-underline-offset: 3px;
}
.legal-content a:hover {
  color: var(--brand-dark);
}

.section-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.legal-highlight {
  background: #f0ecff;
  border: 1px solid #d6cef7;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--brand-dark);
  line-height: 1.6;
}
.legal-highlight strong {
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.contact-card {
  background: var(--brand-dark);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  margin-top: 3rem;
}
.contact-card h3 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
}
.contact-card p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.35rem;
}
.contact-card a {
  color: var(--accent-secondary);
  font-weight: 500;
  text-decoration: none;
}
.contact-card a:hover {
  color: var(--surface);
}

/* ================================================================
   13. UTILITY HELPERS
================================================================ */

/* Inline article / doc links */
.a-link {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}
.a-link:hover {
  color: #fff !important;
  font-weight: 700 !important;
  background-color: var(--accent-secondary) !important;
}
.a-link:not(.btn-link):not(.text-decoration-underline):not(.more-link) {
  text-decoration: underline !important;
}

/* Text colour shortcuts */
.white {
  color: #fff !important;
}
.color-purple {
  color: var(--brand-primary) !important;
}
.color-dark {
  color: var(--brand-dark) !important;
}
.color-orange {
  color: #ffa604 !important;
}
.cancelled {
  color: red !important;
}

/* Text transform */
.caps {
  text-transform: uppercase;
}

/* Bootstrap .lead override -- default is 1.25rem (20px), too heavy for the page/section intro
   blurb pattern used across the home intro, news, tours, events, and board members pages. */
.lead {
  font-size: 1rem;
}

/* Bootstrap fs extension */
.fs-7 {
  font-size: 0.9rem !important;
}
.fs-8 {
  font-size: 0.8rem !important;
}
.fs-9 {
  font-size: 0.7rem !important;
}
.fs-10 {
  font-size: 0.6rem !important;
}

/* Legacy f-* sizes (used in older partials) */
.f-12 {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
}
.f-15 {
  font-size: 15px;
  line-height: 20px;
  display: inline-block;
}
.f-16 {
  font-size: 16px;
  line-height: 25px;
  display: inline-block;
}
.f-18 {
  font-size: 18px;
  line-height: 26px;
  display: inline-block;
}
.f-24 {
  font-size: 24px;
  line-height: 28px;
  display: inline-block;
}

/* Opacity helpers */
.opacity-9 {
  opacity: 0.9 !important;
}
.opacity-8 {
  opacity: 0.8 !important;
}
.opacity-7 {
  opacity: 0.7 !important;
}
.opacity-6 {
  opacity: 0.6 !important;
}
.opacity-5 {
  opacity: 0.5 !important;
}

/* Image helpers */
.img-rounded {
  border-radius: 6px;
}
/* Chairperson/president's-message headshot -- same fixed-box + object-fit: cover technique as
   .bmcard-img-wrap (see 10-E. BOARD/TEAM MEMBER CARD), square rather than portrait here, rounded
   corners, never circular -- this site deliberately doesn't use round photos anywhere (the board
   cards moved away from a circular thumbnail for the same reason). The old .img-rounded here only
   added a corner radius with nothing capping actual size, which is why a full-resolution upload
   would overflow its narrow column. */
.chm-msg-photo-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-alt);
}
.chm-msg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.h-200 {
  max-height: 200px;
  height: 100%;
}
.w-200 {
  max-width: 200px;
  width: 100%;
}
.w-150 {
  max-width: 150px;
  width: 100%;
}
.w-100-std {
  width: 100%;
}

/* Drop shadow for card-like links */
.drop-shadow {
  text-decoration: none !important;
  box-shadow:
    -11px -11px 25px rgba(255, 255, 255, 0.35),
    11px 13px 25px rgba(165, 181, 208, 0.6);
}

/* Modal width override */
.modal {
  --bs-modal-width: 1000px !important;
}

/* Back-to-top button */
#gotoTop {
  position: fixed;
  bottom: 30px;
  right: 14px;
  z-index: 1000;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--brand-dark);
  background: var(--accent-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#gotoTop:hover {
  transform: translateY(-3px);
}

/* ================================================================
   14. KLARO COOKIE CONSENT
   Bootstrap 5 / brand-aligned overrides. All colours reference
   :root tokens. Load klaro-no-css.js (not klaro.js) to prevent
   Klaro's bundled styles from conflicting.
================================================================ */

/* Base typography + box model */
.klaro,
.klaro button {
  font-family: var(--ff-b);
  font-size: 14px;
  box-sizing: border-box;
}
.klaro.cm-as-context-notice {
  height: 100%;
  padding: 12px;
}

/* Service toggle list */
.klaro .cookie-modal .cm-switch-container,
.klaro .context-notice .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom: 1px solid var(--rule);
  display: block;
  position: relative;
  padding: 10px 10px 10px 66px;
  line-height: 20px;
  vertical-align: middle;
  min-height: 40px;
}
.klaro .cookie-modal .cm-switch-container:last-child,
.klaro .context-notice .cm-switch-container:last-child,
.klaro .cookie-notice .cm-switch-container:last-child {
  border-bottom: 0;
}
.klaro .cookie-modal .cm-switch-container:first-child,
.klaro .context-notice .cm-switch-container:first-child,
.klaro .cookie-notice .cm-switch-container:first-child {
  margin-top: 0;
}
.klaro .cookie-modal .cm-switch-container p,
.klaro .context-notice .cm-switch-container p,
.klaro .cookie-notice .cm-switch-container p {
  margin-top: 0;
}

.klaro .cookie-modal .cm-switch,
.klaro .context-notice .cm-switch,
.klaro .cookie-notice .cm-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
}

/* Toggle on — brand green */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--accent-secondary);
}

.klaro
  .cookie-modal
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider,
.klaro
  .context-notice
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider,
.klaro
  .cookie-notice
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider {
  background-color: var(--accent-secondary);
  opacity: 0.6;
}
.klaro
  .cookie-modal
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider::before,
.klaro
  .context-notice
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider::before,
.klaro
  .cookie-notice
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .slider::before {
  transform: translateX(10px);
}

/* Required — muted purple */
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: var(--text-muted);
  opacity: 0.8;
}
.klaro
  .cookie-modal
  .cm-list-input.only-required
  + .cm-list-label
  .slider::before,
.klaro
  .context-notice
  .cm-list-input.only-required
  + .cm-list-label
  .slider::before,
.klaro
  .cookie-notice
  .cm-list-input.only-required
  + .cm-list-label
  .slider::before {
  transform: translateX(10px);
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--text-muted);
  opacity: 0.8;
  cursor: not-allowed;
}

/* Slider track & knob */
.klaro .cookie-modal .cm-list-input,
.klaro .context-notice .cm-list-input,
.klaro .cookie-notice .cm-list-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 50px;
  height: 30px;
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: var(--surface-alt);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  width: 50px;
  display: inline-block;
  box-shadow:
    0 4px 6px 0 rgba(0, 0, 0, 0.2),
    5px 5px 10px 0 rgba(0, 0, 0, 0.19);
}
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: var(--surface);
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  transition: 0.4s;
}
.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .context-notice .cm-list-label .slider.round,
.klaro .cookie-notice .cm-list-label .slider.round {
  border-radius: 30px;
}
.klaro .cookie-modal .cm-list-label .slider.round::before,
.klaro .context-notice .cm-list-label .slider.round::before,
.klaro .cookie-notice .cm-list-label .slider.round::before {
  border-radius: 50%;
}

.klaro .cookie-modal .cm-list-label input:focus + .slider,
.klaro .context-notice .cm-list-label input:focus + .slider,
.klaro .cookie-notice .cm-list-label input:focus + .slider {
  box-shadow: 0 0 0 2px var(--accent-primary);
}

.klaro .cookie-modal .cm-list-label input:checked + .slider::before,
.klaro .context-notice .cm-list-label input:checked + .slider::before,
.klaro .cookie-notice .cm-list-label input:checked + .slider::before {
  transform: translateX(20px);
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(20px);
}

/* Service list text */
.klaro .cookie-modal .cm-list-title,
.klaro .context-notice .cm-list-title,
.klaro .cookie-notice .cm-list-title {
  font-size: 0.9em;
  font-weight: 600;
}
.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: var(--text-muted);
  font-size: 0.9em;
  padding-top: 4px;
}
.klaro .cookie-modal .cm-list-label .cm-switch,
.klaro .context-notice .cm-list-label .cm-switch,
.klaro .cookie-notice .cm-list-label .cm-switch {
  position: absolute;
  left: 0;
}
.klaro .cookie-modal .cm-link,
.klaro .context-notice .cm-link,
.klaro .cookie-notice .cm-link {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Links */
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: var(--accent-primary);
  text-decoration: none;
}
.klaro .cookie-modal a:hover,
.klaro .context-notice a:hover,
.klaro .cookie-notice a:hover {
  color: var(--accent-secondary);
}

/* Body text (on dark bg) */
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice strong,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
  color: var(--surface);
}

.klaro .cookie-modal p,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  margin-top: 0.7em;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal h4,
.klaro .cookie-modal h5,
.klaro .cookie-modal h6,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice h3,
.klaro .context-notice h4,
.klaro .context-notice h5,
.klaro .context-notice h6,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice h3,
.klaro .cookie-notice h4,
.klaro .cookie-notice h5,
.klaro .cookie-notice h6 {
  font-family: var(--ff-h);
}

/* Buttons */
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--surface);
  background-color: var(--brand-primary);
  border-radius: 24px;
  border: none;
  padding: 8px 16px;
  margin-right: 0.5em;
  cursor: pointer;
  transition:
    background 0.18s,
    transform 0.2s;
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover {
  background-color: var(--brand-dark);
  transform: translateY(-1px);
}
.klaro .cookie-modal .cm-btn:disabled,
.klaro .context-notice .cm-btn:disabled,
.klaro .cookie-notice .cm-btn:disabled {
  opacity: 0.5;
}

/* Accept all — yellow */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: var(--accent-primary);
  color: var(--brand-dark);
}
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background-color: var(--accent-secondary);
  color: var(--brand-dark);
}

/* Save my choices — green */
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: var(--accent-secondary);
  color: var(--brand-dark);
}

/* Manage preferences — medium purple */
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: var(--brand-primary);
  color: var(--surface);
}

/* Close — subtle outline */
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background-color: transparent;
  color: var(--surface);
  border: 1.5px solid rgba(244, 246, 250, 0.35);
}
.klaro .cookie-modal .cm-btn.cm-btn-close:hover,
.klaro .context-notice .cm-btn.cm-btn-close:hover,
.klaro .cookie-notice .cm-btn.cm-btn-close:hover {
  background-color: rgba(244, 246, 250, 0.1);
}

/* Context notice (inline embed) */
.klaro .context-notice {
  border-radius: 4px;
  border: 1px solid var(--rule);
  background-color: var(--surface-alt);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: 100%;
}
.klaro .context-notice.cm-dark {
  background-color: var(--brand-dark);
  border-color: var(--brand-primary);
}
.klaro .context-notice.cm-dark p {
  color: var(--surface);
}
.klaro .context-notice.cm-dark p a {
  color: var(--accent-primary);
}
.klaro .context-notice p {
  color: var(--text-base);
  flex-grow: 0;
  text-align: center;
  padding-top: 0;
  margin-top: 0;
}
.klaro .context-notice p a {
  color: var(--brand-primary);
}
.klaro .context-notice p.cm-buttons {
  margin-top: 12px;
}
.klaro .context-notice p.ccn-description-empty-store {
  margin-top: 24px;
  font-size: 14px;
}

/* Cookie modal overlay */
.klaro .cookie-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 1040;
}
.klaro .cookie-modal.cm-embedded {
  position: relative;
  height: inherit;
  width: inherit;
  left: inherit;
  right: inherit;
  z-index: 0;
}
.klaro .cookie-modal.cm-embedded .cm-modal.cm-klaro {
  position: relative;
  transform: none;
}
.klaro .cookie-modal .cm-bg {
  background: rgba(35, 15, 66, 0.65);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

/* Modal panel */
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: var(--brand-dark);
  color: var(--surface);
  z-index: 1001;
  box-shadow:
    0 4px 6px 0 rgba(0, 0, 0, 0.3),
    5px 5px 10px 0 rgba(0, 0, 0, 0.2);
  width: 100%;
  max-height: 98%;
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
  overflow: auto;
}
@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 8px;
    position: relative;
    margin: 0 auto;
    max-width: 640px;
    height: auto;
    width: auto;
  }
}

.klaro .cookie-modal .cm-modal .hide {
  border: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
.klaro .cookie-modal .cm-modal .hide svg {
  stroke: var(--surface);
}
.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid var(--brand-primary);
  padding: 1em;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  font-size: 0.8em;
  padding-top: 4px;
  text-align: right;
  padding-right: 8px;
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: var(--text-muted);
}
.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid var(--brand-primary);
  padding: 1em;
  padding-right: 24px;
}
.klaro .cookie-modal .cm-modal .cm-header h1 {
  margin: 0;
  font-size: 1.4em !important;
  font-family: var(--ff-h);
  display: block;
}
.klaro .cookie-modal .cm-modal .cm-header h1.title {
  padding-right: 20px;
}
.klaro .cookie-modal .cm-modal .cm-body {
  padding: 1em;
}
.klaro .cookie-modal .cm-modal .cm-body ul {
  display: block;
}
.klaro .cookie-modal .cm-modal .cm-body span {
  display: inline-block;
  width: auto;
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes {
  padding: 0;
  margin: 0;
}
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-services
  li.cm-purpose
  .cm-services
  .cm-caret,
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-purposes
  li.cm-purpose
  .cm-services
  .cm-caret {
  color: var(--text-muted);
}
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-services
  li.cm-purpose
  .cm-services
  .cm-content,
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-purposes
  li.cm-purpose
  .cm-services
  .cm-content {
  margin-left: -40px;
  display: none;
}
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-services
  li.cm-purpose
  .cm-services
  .cm-content.expanded,
.klaro
  .cookie-modal
  .cm-modal
  .cm-body
  ul.cm-purposes
  li.cm-purpose
  .cm-services
  .cm-content.expanded {
  margin-top: 10px;
  display: block;
}
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
  position: relative;
  line-height: 20px;
  vertical-align: middle;
  padding-left: 60px;
  min-height: 40px;
}
.klaro .cookie-modal .cm-modal .cm-body ul li:first-child {
  margin-top: 0;
}
.klaro .cookie-modal .cm-modal .cm-body ul li p {
  margin-top: 0;
}
.klaro .cookie-modal .cm-modal .cm-body ul li p.purposes {
  color: var(--text-muted);
  font-size: 0.8em;
}
.klaro .cookie-modal .cm-modal .cm-body ul li.cm-toggle-all {
  border-top: 1px solid var(--brand-primary);
  padding-top: 1em;
}
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-list-title {
  font-weight: 600;
}
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul li span.cm-required {
  color: var(--text-muted);
  padding-left: 0.2em;
  font-size: 0.8em;
}

/* ----------------------------------------------------------------
   COOKIE NOTICE BANNER — Option B
   Placement strategy:
     Mobile  (< 992px)  : full-width bar, bottom: 64px (above app-menu)
     Tablet  (992–1023px): full-width bar, bottom: 0 (app-menu hidden at lg)
     Desktop (≥ 1024px) : bottom-centre floating card, max-width 600px

   z-index hierarchy:
     .gt-nav       1020
     .app-menu     1030
     .klaro notice 1035  ← always above both
     .klaro modal  1040
---------------------------------------------------------------- */

/* MOBILE BASE — full-width bar floating above the app-menu tab bar */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: var(--brand-primary);
  box-sizing: border-box !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 64px !important; /* height of .app-menu tab bar */
  width: 100vw !important;
  max-width: 100vw !important;
  z-index: 1035;
  border-radius: 0;
  border-top: 3px solid var(--accent-primary);
  box-shadow: 0 -6px 24px rgba(35, 15, 66, 0.55);
}

/* TABLET — app-menu is hidden at Bootstrap lg (992px); bar goes flush to bottom */
@media (min-width: 992px) and (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: 0 !important;
    border-top: 3px solid var(--accent-primary);
  }
}

/* DESKTOP — bottom-centre floating card */
@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    width: auto !important;
    min-width: 480px;
    max-width: 600px !important;
    transform: translateX(-50%);
    border-radius: 12px;
    border: 2px solid var(--accent-primary); /* full border on the floating card — visible on all sides */
    box-shadow:
      0 8px 40px rgba(35, 15, 66, 0.55),
      0 2px 8px rgba(35, 15, 66, 0.3);
  }
}

/* Embedded variant — resets all fixed positioning */
.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded {
  position: relative !important;
  left: inherit !important;
  right: inherit !important;
  bottom: inherit !important;
  top: inherit !important;
  width: inherit !important;
  max-width: inherit !important;
  transform: none;
  border-top: none;
  box-shadow: none;
  z-index: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body {
  padding-top: 0.5em;
}

/* Body content */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  margin: 0;
  padding: 1.1em 1.25em;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin-bottom: 0.5em;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes {
  text-decoration: underline;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
  display: inline-block;
  flex-grow: 1;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: inline-block;
  margin-top: -0.5em;
}
@media (max-width: 384px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    width: 100%;
  }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width: calc(50% - 0.5em);
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  margin-top: 0.5em;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin-top: -0.5em;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
  margin-top: 0.5em;
}

/* Cookie modal-notice (full modal variant) */
.klaro .cookie-modal-notice {
  background-color: var(--brand-dark);
  color: var(--surface);
  z-index: 1001;
  box-shadow:
    0 4px 6px 0 rgba(0, 0, 0, 0.3),
    5px 5px 10px 0 rgba(0, 0, 0, 0.2);
  width: 100%;
  max-height: 98%;
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
  overflow: auto;
  padding: 1em;
  padding-top: 0.2em;
}
@media (min-width: 400px) {
  .klaro .cookie-modal-notice {
    border-radius: 8px;
    position: relative;
    margin: 0 auto;
    max-width: 420px;
    height: auto;
    width: auto;
  }
}
.klaro .cookie-modal-notice .cn-ok {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
}
.klaro .cookie-notice-hidden {
  display: none !important;
}

/* ================================================================
   15. GALLERY STRIP (filterable)
   Shared by any partner gallery/entity gallery pages. Isotope
   manages positioning — .art-gallery is the container, .gal-thumb
   is each item. See _javascript.php for the Isotope + GLightbox
   wiring.
================================================================ */
.art-gallery {
  position: relative;
  margin-bottom: .5rem;
}

/* Each Isotope item — width drives the column count */
.gal-thumb {
  width: 25%;          /* 4 columns */
  padding: 2.5px;
  box-sizing: border-box;
}

/* Inner wrapper — this carries the aspect ratio, image and overlay */
.gal-thumb-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-alt);
  cursor: pointer;
  display: block;
}

/* The lightbox anchor must fill the inner wrapper completely */
.gal-thumb-inner a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image fills the anchor */
.gal-thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gal-thumb-inner:hover img { transform: scale(1.07); }

/* Overlay fills the inner wrapper */
.gal-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(35,15,66,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;  /* let clicks pass through to the <a> */
}
.gal-thumb-inner:hover .gal-item-overlay { opacity: 1; }

.gal-item-title {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 4px;
}
.gal-item-credit {
  font-family: var(--ff-h);
  font-size: 9px;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 4px;
}
.gal-item-credit a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .15s;
}
.gal-item-credit a:hover { color: var(--accent-primary); }

/* Responsive */
@media (max-width: 767.98px) { .gal-thumb { width: 33.333%; } }
@media (max-width: 575.98px) { .gal-thumb { width: 50%; } }

/* Filter bar -- label and count are fixed, only the pill strip between them scrolls. Pill labels
   are full editorial headlines (some 80+ characters), so flex-wrap alone let a handful of filters
   push the bar to 200px+ tall across multiple rows; a scrolling single row plus a truncated label
   (see galTruncateLabel() in __block_gallery.php) is what keeps this from growing with story count. */
.gal-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.gal-filter-lbl {
  flex: 0 0 auto;
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}
.gal-filter-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;          /* required for overflow-x to kick in on a flex child instead of growing */
  overflow-x: auto;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* legacy Edge */
}
.gal-filter-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.gal-filter-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all .18s;
}
.gal-filter-nav:hover   { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.gal-filter-nav:disabled,
.gal-filter-nav.is-hidden { display: none; }
.gal-fpill {
  flex: 0 0 auto;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.gal-fpill:hover  { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.gal-fpill.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.gal-count {
  flex: 0 0 auto;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ================================================================
   16. ARTICLE BODY
   .article-col, .art-prose (+ intro-p/h2/h3/p/ul/ol/strong), .art-cta,
   .sec-label, .art-toc-widget/.toc-head/.toc-list (article context),
   .art-tags/.art-tag, .art-highlight (+ .art-warning/.art-fact),
   .art-img-wrap/.art-img-credit/.art-prose-clearfix

   Ported from GTR's __DEFAULTS/article-addon-v4.css (2026-08-12) for
   __block_article_body.php — the shared renderer for /about-us/,
   /membership/ and (later) TSP/Association-authored articles, all fed
   by the same itrvl_articles_api dataset (b_line_* fields). Token names
   translated from GTR's originals to this file's purpose-based tokens:
   --dv->--brand-dark, --mv->--brand-primary, --ye->--accent-primary,
   --gr->--accent-secondary, --tx->--text-prose, --mu->--text-muted,
   --wh->--surface, --wh2->--surface-alt. Only the prose/content-type
   styling needed for the current scope is ported — GTR's hero,
   breadcrumb, map card, gallery and newsletter-widget CSS were left
   behind on purpose (not relevant to a trade-association About Us/
   Membership page; the existing .page-hero already covers the title).
================================================================ */

/* Article column — white surface, matches the reading-pane treatment
   used everywhere else prose is the main content. */
.article-col {
  background: var(--surface-white);
  padding: 2.5rem 2.5rem 3rem;
}
@media (max-width: 767.98px) {
  .article-col {
    padding: 2rem 1.25rem 2.5rem;
  }
}

/* Article typography — scoped under .art-prose to avoid bleed into
   sidebars/widgets. This is deliberately a cleaner, token-driven
   replacement for the old .ln-type-* per-client CSS overrides: since
   h2/h3 already pick up --brand-dark/--accent-primary etc., per-client
   branding happens automatically through the token system without
   needing a parallel set of per-client heading rules. */
.art-prose .intro-p {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.85;
  color: #3d3050;
  border-left: 4px solid var(--accent-primary);
  padding: 0.85rem 1.25rem;
  background: #fffef0;
  border-radius: 0 5px 5px 0;
  margin-bottom: 1.5rem;
}
.art-prose h2 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent-primary);
  display: inline-block;
}
.art-prose h2:first-of-type {
  margin-top: 0;
}
.art-prose h3 {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  color: var(--brand-primary);
  margin: 1.75rem 0 0.5rem;
  padding-left: 10px;
  border-left: 3px solid var(--accent-secondary);
}
.art-prose p {
  font-family: var(--ff-s);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.9;
  color: var(--text-prose);
  margin-bottom: 1rem;
}
.art-prose ul,
.art-prose ol {
  font-family: var(--ff-s);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.85;
  color: var(--text-prose);
  margin: 0 0 1rem 1rem;
  padding-left: 1rem;
}
.art-prose ul li,
.art-prose ol li {
  margin-bottom: 0.35rem;
}
.art-prose strong {
  font-weight: 700;
  color: var(--brand-dark);
}

/* Inline CTA band — light surface, accent bar. Button is optional. */
.art-cta {
  background: #fffef0;
  border: 1px solid rgba(197, 220, 100, 0.5);
  border-left: 5px solid var(--accent-secondary);
  border-radius: 0 6px 6px 0;
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.art-cta p {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-prose);
  line-height: 1.7;
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.art-cta-btn {
  flex-shrink: 0;
  background: var(--brand-dark);
  color: var(--accent-primary);
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s;
}
.art-cta-btn:hover {
  background: var(--brand-primary);
  color: #fff;
}
@media (max-width: 767.98px) {
  .art-cta {
    flex-direction: column;
  }
}

/* Section divider label — accent bar + heading + full-width rule.
   Used before tags/related-reading/author sections. */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2.5rem 0 1.25rem;
}
.sec-label::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 2px;
}
.sec-label span {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  white-space: nowrap;
}
.sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Article TOC widget — light card, distinct from the dark legal-page
   sidebar (custom-v4.css §12). .toc-head is shared with any other
   sidebar widget that wants the same header band (not scoped to
   .art-toc-widget specifically). */
.art-toc-widget {
  background: var(--surface-white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.toc-head {
  background: var(--brand-dark);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.toc-head span {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
}
.toc-head i {
  font-size: 12px;
  color: rgba(246, 238, 39, 0.6);
}
.art-toc-widget .toc-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  counter-reset: toc-counter;
}
.art-toc-widget .toc-list li {
  counter-increment: toc-counter;
}
.art-toc-widget .toc-list li a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ff-h);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brand-dark);
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.art-toc-widget .toc-list li a::before {
  content: counter(toc-counter);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.art-toc-widget .toc-list li a:hover {
  color: var(--brand-primary);
  background: var(--surface-alt);
  border-left-color: var(--rule);
}
.art-toc-widget .toc-list li a:hover::before {
  background: var(--brand-primary);
  color: #fff;
}
.art-toc-widget .toc-list li a.active {
  color: var(--brand-dark);
  font-weight: 700;
  background: rgba(246, 238, 39, 0.08);
  border-left-color: var(--accent-primary);
}
.art-toc-widget .toc-list li a.active::before {
  background: var(--accent-primary);
  color: var(--brand-dark);
}

/* Tag cloud */
.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.art-tag {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 16px;
  background: var(--surface-alt);
  color: var(--brand-primary);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.art-tag:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

/* Highlight/tip box — three semantic variants via modifier class.
   .art-tip (default, no modifier) / .art-warning / .art-fact */
.art-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  border-left: 4px solid var(--accent-secondary);
  background: rgba(197, 220, 100, 0.08);
}
.art-highlight-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.art-highlight-icon i {
  font-size: 14px;
  color: var(--brand-dark);
}
.art-highlight-body {
  flex: 1;
  min-width: 0;
}
.art-highlight-label {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-secondary);
  margin-bottom: 5px;
  display: block;
}
.art-highlight-text {
  font-family: var(--ff-s);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-prose);
  margin: 0;
}
.art-highlight-text a {
  color: var(--brand-primary);
  font-weight: 600;
  text-underline-offset: 2px;
}
.art-highlight.art-warning {
  border-left-color: var(--accent-primary);
  background: rgba(246, 238, 39, 0.07);
}
.art-highlight.art-warning .art-highlight-icon {
  background: var(--accent-primary);
}
.art-highlight.art-warning .art-highlight-label {
  color: #a89900;
}
.art-highlight.art-fact {
  border-left-color: var(--brand-primary);
  background: rgba(89, 45, 140, 0.07);
}
.art-highlight.art-fact .art-highlight-icon {
  background: var(--brand-primary);
}
.art-highlight.art-fact .art-highlight-icon i {
  color: #fff;
}
.art-highlight.art-fact .art-highlight-label {
  color: var(--brand-primary);
}

/* Inline float images — case 4. .art-img-wrap carries the float,
   .art-img-credit is the attribution line below it. */
.art-img-wrap {
  max-width: 340px;
  margin-bottom: 1.25rem;
}
.art-img-wrap.float-left {
  float: left;
  margin-right: 1.75rem;
  margin-top: 0.25rem;
}
.art-img-wrap.float-right {
  float: right;
  margin-left: 1.75rem;
  margin-top: 0.25rem;
}
.art-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}
.art-img-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
}
.art-img-credit i {
  font-size: 11px;
  color: var(--brand-primary);
  flex-shrink: 0;
  opacity: 0.7;
}
.art-img-credit a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.art-img-credit a:hover {
  color: var(--brand-primary);
}
.art-prose-clearfix::after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 767.98px) {
  .art-img-wrap.float-left,
  .art-img-wrap.float-right {
    float: none;
    max-width: 100%;
    margin: 0 0 1.25rem 0;
  }
}

/* ================================================================
   17. ERROR PAGES
   .error-hero (+ __overlay/__content/__code/__title/__desc/__actions)

   Full-viewport variant of .page-hero's background-image pattern --
   error pages have nothing below the hero, so it fills the screen
   rather than sitting as a strip above a content column. .btn-o is
   overridden here to a light/inverted style since its default (dark
   text, dark border) is illegible over this hero's dark overlay.
================================================================ */
.error-hero {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .72) 100%);
}

.error-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  padding: 2rem 1.5rem;
}

.error-hero__code {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 5.5rem);
  line-height: 1;
  color: var(--accent-primary);
  margin-bottom: .75rem;
}

.error-hero__title {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #fff;
  margin-bottom: .75rem;
}

.error-hero__desc {
  font-family: var(--ff-s);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 2rem;
}

.error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.error-hero__actions .btn-o {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.error-hero__actions .btn-o:hover {
  color: var(--brand-dark);
  background: #fff;
  border-color: #fff;
}

/* ================================================================
   18. ARTICLE HERO
   .art-hero (+ hero-bg-img/art-hero-inner/art-hero-h1/art-hero-lead/
   art-hero-meta/art-hero-meta-item), .art-breadcrumb (+ bc-sep/bc-cur)

   Ported from GTR's article-addon-v4.css. .h-eyebrow/.h-patt are
   NOT redefined here -- both already exist for the homepage hero
   (§07) and are reused unchanged, same tokens/look everywhere a
   hero eyebrow label appears on this site.
================================================================ */
.art-hero {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center 35%;
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 55vh, 600px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.art-hero .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
.art-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 4, 22, .62) 0%, rgba(10, 4, 22, .32) 45%, rgba(10, 4, 22, .05) 100%),
    linear-gradient(to top, rgba(10, 4, 22, .60) 0%, rgba(10, 4, 22, .12) 50%, transparent 85%);
  z-index: 1;
}
.art-hero .h-patt {
  z-index: 2;
}
.art-hero-inner {
  position: relative;
  z-index: 10;
  padding: 3rem 0 1.5rem;
}
.art-hero-h1 {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem;
}
.art-hero-lead {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, .6);
  max-width: 560px;
  margin-bottom: 1rem;
}
.art-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.art-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, .45);
}
.art-hero-meta-item i {
  color: rgba(246, 238, 39, .55);
  font-size: 12px;
}

.art-breadcrumb {
  background: var(--brand-dark);
  border-bottom: 1px solid rgba(246, 238, 39, .1);
  padding: 9px 0;
}
.art-breadcrumb a,
.art-breadcrumb span {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .35);
  text-decoration: none;
}
.art-breadcrumb a:hover {
  color: rgba(255, 255, 255, .6);
}
.art-breadcrumb .bc-sep {
  color: rgba(255, 255, 255, .15);
  font-size: 9px;
  margin: 0 4px;
}
.art-breadcrumb .bc-cur {
  color: rgba(255, 255, 255, .55);
}

/* ================================================================
   19. CONTACT PAGE
   .contact-info-card / .contact-form-card — two-column layout
   .contact-detail-row — icon + text rows (email/phone/whatsapp/address)
   .contact-map / .ent-map-pin / .ent-map-popup-* — Leaflet single-pin map
   .contact-social — social icon row
   .form-status — JS-driven submit feedback banner
================================================================ */
.contact-info-card {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .85);
  border-radius: 20px;
  padding: 2.75rem 2.5rem;
  height: 100%;
}
.contact-info-card h3 {
  font-family: var(--ff-h);
  font-weight: 800;
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.contact-info-card .contact-lead {
  font-family: var(--ff-s);
  font-style: italic;
  color: rgba(255, 255, 255, .55);
  font-size: .9rem;
  margin-bottom: 1.75rem;
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1.1rem;
}
.contact-detail-row i {
  color: var(--accent-primary);
  font-size: 15px;
  width: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}
.contact-detail-row a,
.contact-detail-row address {
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  line-height: 1.6;
  text-decoration: none;
  font-style: normal;
}
.contact-detail-row a:hover {
  color: var(--accent-primary);
}

.contact-social {
  display: flex;
  gap: 10px;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  transition: all .18s;
}
.contact-social a:hover {
  background: var(--accent-primary);
  color: var(--brand-dark);
  transform: translateY(-2px);
}

.contact-map {
  height: 240px;
  width: 100%;
  border-radius: 14px;
  margin-top: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
/* Leaflet's own tile/control chrome must stay above the map's rounded-corner
   overflow clip but below everything else on the page. */
.contact-map.leaflet-container {
  background: var(--surface);
  font-family: var(--ff-b);
}
.ent-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  color: var(--brand-primary);
  font-size: 30px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}
.ent-map-popup-name {
  display: block;
  font-family: var(--ff-h);
  font-size: 13px;
  color: var(--brand-dark);
}
.ent-map-popup-city {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.contact-form-card {
  background: var(--surface-white);
  border-radius: 20px;
  padding: 2.75rem 2.5rem;
  height: 100%;
  box-shadow: 0 2px 12px rgba(35, 15, 66, 0.08);
}
.contact-form-card h3 {
  font-family: var(--ff-h);
  font-weight: 800;
  color: var(--brand-dark);
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}
.contact-form-card .form-label {
  font-family: var(--ff-h);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.contact-form-card .form-control {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .65rem .9rem;
  font-size: .9rem;
}
.contact-form-card .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(89, 45, 140, .12);
}
.contact-form-card .form-check-label {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.contact-form-card .form-check-label a {
  color: var(--brand-primary);
}

.form-status {
  border-radius: 10px;
  padding: .85rem 1.1rem;
  font-size: .85rem;
  margin-bottom: 1.25rem;
  display: none;
}
.form-status.is-success {
  display: block;
  background: rgba(197, 220, 100, .25);
  color: #2d4a0f;
}
.form-status.is-error {
  display: block;
  background: rgba(220, 53, 69, .12);
  color: #a3202e;
}

@media (max-width: 991.98px) {
  .contact-info-card,
  .contact-form-card {
    padding: 2rem 1.5rem;
  }
}