/* ── Semantic H1 — match breadcrumb H2 styling ─────────────── */
/* The template uses <h2> for page titles; we promote them to <h1>
   for SEO/accessibility. These rules mirror the template's H2 styles
   so the visual output is identical. */
.breadcrumb-area .title h1 {
  font-size: 40px;
  line-height: 1.2em;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: -0.02em;
}

.breadcrumb-area__inner .title h1 {
  color: #ffffff;
  margin: 0;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb-area .title h1 {
    font-size: 36px;
  }
}

/* Homepage slider H1 — match the existing slider H2 styling
   Source: 02-banner-section.css  .main-slider .main-slider-content .big-title h2
   Responsive: responsive.css breakpoints at 768–991px and ≤767px */
.main-slider .main-slider-content .big-title h1 {
  color: #ffffff;
  font-size: 60px;
  line-height: 1.2em;
  font-weight: 500;
  text-transform: inherit;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .main-slider .main-slider-content .big-title h1 {
    font-size: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .main-slider .main-slider-content .big-title h1 {
    font-size: 40px;
  }

  .main-slider .main-slider-content .big-title h1 br {
    display: none;
  }
}

/* ==========================================================================
   VICBOSA brand colours
   Rebrands the Finbank palette to the VICBOSA blue/navy identity. Loaded
   after the Finbank stylesheets; most accents recolour via --thm-base, with
   targeted rules below for elements that carry hard-coded template colours.
   ========================================================================== */

/* Static language indicator — replaces the fragile Finbank polyglot
   language-switcher plugin markup. Plain HTML/CSS, no plugin/JS dependency,
   so it stays visible and stable in the top utility bar beside Search.
   English only. The `.language-switcher` class is kept so the Finbank header
   positions it; the rule below overrides any plugin-era height. */
.main-header-style1-top__right .language-switcher.vicbosa-language-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  line-height: 20px;
  cursor: default;
  color: #7f7873;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--thm-font);
}

.vicbosa-language-static__label {
  white-space: nowrap;
}

.vicbosa-language-static__chevron {
  display: inline-block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Top utility bar — keep the secondary header row visually consistent with
   the landing page across both full-template and scaffolded pages. */
.main-header-style1-top .outer-box {
  gap: 14px 28px;
}

.main-header-style1-top__right {
  column-gap: 0;
  row-gap: 10px;
}

.main-header-style1-top .header-menu-style1 ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 25px;
}

.main-header-style1-top .header-menu-style1 ul li {
  float: none;
  margin-right: 0;
}

.main-header-style1-top .nearest-branch a,
.main-header-style1-top .nearest-branch span,
.main-header-style1-top .header-menu-style1 ul li a,
.main-header-style1-top .box-search-style1 a {
  color: #7f7873;
  font-weight: 400;
  transition: color 200ms ease;
}

.main-header-style1-top .nearest-branch a:hover,
.main-header-style1-top .header-menu-style1 ul li a:hover,
.main-header-style1-top .box-search-style1 a:hover {
  color: var(--vb-blue);
}

.main-header-style1-top .nearest-branch span,
.main-header-style1-top .box-search-style1 a span {
  font-size: 16px;
}

@media (max-width: 767px) {
  .main-header-style1-top .auto-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-header-style1-top .outer-box,
  .main-header-style1-top__left,
  .main-header-style1-top__right {
    justify-content: center;
  }

  .main-header-style1-top__right {
    width: 100%;
  }

  .main-header-style1-top .header-menu-style1 ul {
    justify-content: center;
    gap: 8px 16px;
  }

  .main-header-style1-top .box-search-style1 {
    margin-left: 16px;
    margin-right: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

:root {
  /* Finbank theme accent variable -> VICBOSA primary blue */
  --thm-base: #2f7dbd;
  --thm-base-rgb: 47, 125, 189;

  /* VICBOSA palette */
  --vb-blue: #2f7dbd;
  --vb-navy: #111827;
  --vb-light-blue: #eaf4ff;
  --vb-white: #ffffff;
  --vb-gray: #f3f4f6;
  --vb-text: #1f2937;
}

/* Replace hard-coded Finbank red/magenta chrome with VICBOSA blue. */
.logo-box-style1,
.stricky-header .logo-box-style1,
.main-header-style1-bottom .outer-box::before {
  background-image: linear-gradient(0deg, #246da6 0%, var(--vb-blue) 100%) !important;
  background-color: var(--vb-blue) !important;
}

.logo-box-style1 a,
.stricky-header .logo-box-style1 a {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.logo-box-style1 img {
  display: block;
  max-width: 132px;
  max-height: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--vb-white);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.18);
}

.stricky-header .logo-box-style1 img {
  max-width: 78px;
  max-height: 78px;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.14);
}

/* Sticky/scrolled header only: narrow the blue logo block so the left/right
   blue padding matches the top/bottom. The block is 90px tall and the white
   logo card is square and centred, so a width close to the 90px height gives
   even blue padding on all four sides. Finbank sets it to 250px wide; reduced
   to 92px. Height (90px), flex-centering, the logo image/card size, and the
   default (non-sticky) header logo block are all left unchanged. */
.stricky-header .logo-box-style1 {
  width: 92px;
}

.mobile-nav__content .logo-box img {
  display: block;
  max-width: 108px;
  max-height: 108px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--vb-white);
  border-radius: 12px;
  padding: 4px;
}

.footer-logo-style1 img {
  display: block;
  max-width: 116px;
  max-height: 116px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--vb-white);
  border-radius: 12px;
  padding: 4px;
}

@media only screen and (max-width: 1199px) {
  .main-menu-style1 .main-menu__wrapper-inner {
    justify-content: space-between;
  }

  .main-menu-style1-left {
    min-height: 100px;
    width: 100%;
    padding-left: 136px !important;
    justify-content: flex-end;
  }

  .main-menu-style1-left .main-menu-box {
    margin-left: auto;
    text-align: right;
  }

  .logo-box-style1 {
    left: 0;
    width: 128px !important;
    height: 100px !important;
    justify-content: center;
  }

  .logo-box-style1 img {
    max-width: 88px;
    max-height: 88px;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.14);
  }
}

/* Desktop header logo — sized to fit inside the fixed 250x140px blue logo
   block (`.logo-box-style1`). The white card (image + 6px padding + 1px
   border) stays well within the 140px block height, so the logo never
   increases the header height. White-card treatment is inherited from the
   base `.logo-box-style1 img` rule; mobile/tablet rules above
   (max-width: 1199px) are untouched. */
@media only screen and (min-width: 1200px) {
  .logo-box-style1 img {
    max-width: 110px;
    max-height: 110px;
    padding: 6px;
    border-radius: 10px;
  }
}

.slider-buttom-box a:hover,
.slider-buttom-box a.style2 {
  background-color: var(--vb-navy) !important;
}

.slider-buttom-box a.style2:hover {
  background-color: var(--vb-blue) !important;
}

.cards-text-box ul li::before,
.single-partner-logo-box::before {
  background-color: var(--vb-blue) !important;
}

.overview-content-box-two .inner-title h5 {
  color: var(--vb-blue) !important;
}

/* Updates / ticker bar — match the original Finbank layout.
   In the template the visible coloured bar is the `.outer-box::before`
   pseudo-element (position:absolute; left:250px; right:0) — it starts after
   the logo block and ends at the container's right edge, as a contained
   strip. `.outer-box::before` is already coloured blue by the brand rule
   near the top of this file. Keeping this outer element transparent (instead
   of painting it `var(--vb-blue)`) stops the bar spanning the full browser
   width and restores that contained strip. `.auto-container` is left alone. */
.main-header-style1-bottom {
  background-color: transparent !important;
}
.main-header-style1-bottom,
.main-header-style1-bottom p,
.main-header-style1-bottom h4,
.main-header-style1-bottom a {
  color: var(--vb-white) !important;
}

/* Main navigation: active + hover state */
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a {
  color: var(--vb-blue) !important;
}

/* CTA / theme buttons + form buttons */
.btn-one,
.thm-btn,
.header-btn-one a,
button[type="submit"],
input[type="submit"] {
  background-color: var(--vb-blue) !important;
  border-color: var(--vb-blue) !important;
  color: var(--vb-white) !important;
}
/* Finbank's .btn-one shows a white :after layer in its default (non-hover)
   state. With the white button text above, the label was invisible until
   hover. Make that default layer blue so the white text is visible at rest. */
.btn-one:after {
  background-color: var(--vb-blue) !important;
}
.btn-one:hover,
.thm-btn:hover,
.header-btn-one a:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--vb-navy) !important;
  border-color: var(--vb-navy) !important;
}
.header-btn-one a.style2 {
  background-color: var(--vb-navy) !important;
  border-color: var(--vb-navy) !important;
}
.header-btn-one a.style2:hover {
  background-color: var(--vb-blue) !important;
  border-color: var(--vb-blue) !important;
}

/* Section labels / eyebrow taglines + icon accents */
[class*="__tagline"],
.sec-title span,
.section-title span {
  color: var(--vb-blue) !important;
}

/* Service-card overlays */
[class*="service"] [class*="overlay"] {
  background-color: rgba(47, 125, 189, 0.92) !important;
}

/* Hide unconfirmed template logo/flag strips until VICBOSA confirms partners. */
.money-exchange-value-area,
.partner-area {
  display: none !important;
}

/* Scroll-to-top control */
.scroll-to-top,
.scroll-to-target {
  background-color: var(--vb-blue) !important;
  color: var(--vb-white) !important;
}
.scroll-to-top:hover {
  background-color: var(--vb-navy) !important;
}

/* Slider controls / pagination */
.swiper-pagination-bullet-active,
.owl-dot.active span,
.main-slider .swiper-button-next:hover,
.main-slider .swiper-button-prev:hover {
  background-color: var(--vb-blue) !important;
}

/* Footer highlights */
.footer-area a:hover,
.footer-area .footer-widget-links ul li a:hover,
.footer-bottom .footer-menu ul li a:hover {
  color: var(--vb-blue) !important;
}

/* Generic links */
a:hover {
  color: var(--vb-blue);
}

/* Mobile/tablet only: keep the header (logo block + hamburger row) pinned
   to the top while scrolling. position:sticky is unreliable here because
   .page-wrapper has `overflow: hidden`, so position:fixed is used with a
   matching top offset on .page-wrapper. At this breakpoint the top utility
   bar and ticker are already `display:none`, so only the ~100px nav row is
   fixed. The accepted mobile logo rules and right-aligned hamburger are not
   touched. z-index 990 keeps it above the hero/slider but below the mobile
   navigation overlay (z-index 999) so the menu still opens over it. */
@media only screen and (max-width: 1199px) {
  .main-header-style1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
  }

  .page-wrapper {
    padding-top: 100px;
  }

  /* Mobile/tablet header row: full VICBOSA-blue background, end to end.
     This also keeps the fixed header opaque so the hero/slider underneath
     does not show through. The blue logo block and its white logo card are
     unaffected. */
  .main-header-style1,
  .main-menu-style1,
  .main-menu-style1 .main-menu__wrapper,
  .main-menu-style1 .main-menu__wrapper-inner {
    background-color: var(--vb-blue) !important;
  }

  /* Hamburger icon white for contrast on the blue header (the template
     colours it var(--thm-base), which would be blue-on-blue). */
  .main-menu-style1 .mobile-nav__toggler,
  .main-menu-style1 .mobile-nav__toggler:hover,
  .main-menu-style1 .mobile-nav__toggler i {
    color: #ffffff !important;
  }
}


/* ==========================================================================
   Our Partners section
   Scoped to .vb-partners-area. A calm, spacious logo strip that replaces the
   former homepage membership section. Tiles are text placeholders (bordered
   "logo" cards) until official partner logos are supplied; a tile can later
   hold a .vb-partner-tile__logo <img> instead of the text label.
   ========================================================================== */
.vb-partners-area {
  padding: 96px 0;
  background: #ffffff;
}

.vb-partners__head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}

.vb-partners__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vb-blue);
  background: var(--vb-light-blue);
  border-radius: 999px;
}

.vb-partners__title {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--vb-navy);
}

.vb-partners__subtitle {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: #6b7280;
}

/* Logo grid — equal-height tiles via stretched flex columns */
.vb-partners__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.vb-partners__grid > [class*="col-"] {
  display: flex;
  margin-bottom: 24px;
}

.vb-partner-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  padding: 18px 14px;
  text-align: center;
  background: var(--vb-white);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.vb-partner-tile:hover {
  border-color: var(--vb-blue);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.10);
  transform: translateY(-3px);
}

.vb-partner-tile__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b919c;
  transition: color 0.2s ease;
}

.vb-partner-tile:hover .vb-partner-tile__label {
  color: var(--vb-navy);
}

/* Optional real-logo image — muted by default, full colour on hover */
.vb-partner-tile__logo {
  max-height: 46px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.vb-partner-tile:hover .vb-partner-tile__logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* CTA below the grid */
.vb-partners__cta {
  margin-top: 20px;
  text-align: center;
}

@media only screen and (max-width: 991px) {
  .vb-partners-area {
    padding: 72px 0;
  }
  .vb-partners__title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .vb-partners-area {
    padding: 56px 0;
  }
}

/* ==========================================================================
   News Room section — "Latest From News Room"
   Scoped to .vb-news-area. Reuses the Finbank `blog-style2` header markup and
   the base `single-blog-style1` card (styled by 08-blog-section.css); these
   rules rebuild it as a clean three-card grid: equal-height white cards, a
   16:10 cropped image, a floating metadata strip, a light divider, and a
   muted footer row (read time, comments, share). Replaces the homepage FAQ.
   ========================================================================== */
.vb-news-area {
  padding: 110px 0 !important;
  background: #fbfcfe !important;
}

.vb-news-area .blog-style2-area__top {
  padding-bottom: 50px;
}

.vb-news-area .blog-style2-area__top .sec-title h2 {
  color: var(--vb-navy);
  font-weight: 800;
}

.vb-news-area .blog-style2-area__top .sub-title p {
  color: #6b7280;
}

/* Three-card grid — columns stretch so every card matches the tallest,
   regardless of headline length. */
.vb-news-row {
  display: flex;
  flex-wrap: wrap;
}

.vb-news-row > [class*="col-"] {
  display: flex;
  margin-bottom: 30px;
}

.vb-news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-right: 0;
  margin-bottom: 0;
  background: var(--vb-white);
  border: 1px solid #e8ebf0;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.07);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vb-news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(17, 24, 39, 0.12);
}

/* Image — fixed 16:10 crop, full colour (override the template's luminosity
   blend so authentic VICBOSA rider/SACCO photos keep their colour). */
.vb-news-card .img-holder .inner {
  background-color: transparent;
}

.vb-news-card .img-holder .inner img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
  mix-blend-mode: normal;
}

/* Floating metadata strip — kept within the card, white panel, blue accent */
.vb-news-card .img-holder .category-date-box {
  left: 18px;
  right: 18px;
  bottom: 18px;
  border-radius: 10px;
  padding: 12px 18px;
}

.vb-news-card .category-date-box .category span {
  color: var(--vb-blue);
}

.vb-news-card .category-date-box .category h5 {
  color: var(--vb-navy);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.vb-news-card .category-date-box .date {
  padding-left: 28px;
}

.vb-news-card .category-date-box .date:before {
  left: 11px;
}

.vb-news-card .category-date-box .date h5 {
  font-size: 13px;
  color: #b26a00;
}

/* Text area — grows so the footer row stays flush at the card bottom */
.vb-news-card .text-holder {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 20px;
}

/* Headline — charcoal, tight, above a light divider */
.vb-news-card .text-holder .blog-title {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef0f4;
}

.vb-news-card .text-holder .blog-title a {
  color: var(--vb-navy);
}

.vb-news-card .text-holder .blog-title a:hover {
  color: var(--vb-blue);
}

/* Footer metadata row — muted text, blue icons, share aligned right */
.vb-news-card .text-holder .bottom {
  margin-top: auto;
  padding-top: 16px;
}

.vb-news-card .meta-box .meta-info li {
  font-size: 14px;
  margin-right: 18px;
}

.vb-news-card .meta-box .meta-info li,
.vb-news-card .meta-box .meta-info li span {
  color: #9ca3af;
}

.vb-news-card .meta-box .meta-info li .icon-clock,
.vb-news-card .meta-box .meta-info li .icon-comment {
  color: var(--vb-blue);
}

.vb-news-card .share-btn a {
  color: #9ca3af;
  transition: color 0.2s ease;
}

.vb-news-card .share-btn a:hover {
  color: var(--vb-blue);
}

/* Tablet: 2 cards per row, third wraps cleanly */
@media only screen and (max-width: 1199px) {
  .vb-news-area {
    padding: 76px 0 !important;
  }
}

/* Mobile: single column, full-width images, simplified spacing */
@media only screen and (max-width: 575px) {
  .vb-news-area {
    padding: 56px 0 !important;
  }
  .vb-news-card .text-holder .blog-title {
    font-size: 18px;
  }
  .vb-news-card .img-holder .category-date-box {
    left: 12px;
    right: 12px;
    padding: 10px 14px;
  }
  .vb-news-card .meta-box .meta-info li {
    margin-right: 14px;
  }
}

/* ==========================================================================
   Stay Connected section — "Stay Connected With VICBOSA"
   A centered white card with a CSS-only Mobile/Email toggle. The two radio
   inputs are visually hidden; their `:checked` state drives the active tab
   styling and swaps the matching input — no JavaScript required (the page
   strips inline <script> from injected content). Submits to the office
   mailbox via `mailto:`; no backend.
   ========================================================================== */
.vb-connect-area {
  padding: 0 0 110px;
  background: #fbfcfe;
}

.vb-connect-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 56px;
  text-align: center;
  background: var(--vb-white);
  border: 1px solid #e8ebf0;
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(17, 24, 39, 0.10);
}

.vb-connect__title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--vb-navy);
}

.vb-connect__subtitle {
  margin: 0 auto 28px;
  max-width: 540px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #6b7280;
}

/* Visually hide the toggle radios — labels remain the interactive surface */
.vb-connect__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Segmented Mobile / Email toggle */
.vb-connect__modes {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 5px;
  background: var(--vb-gray);
  border-radius: 999px;
}

.vb-connect__tab {
  margin: 0;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.vb-connect__radio--phone:checked ~ .vb-connect__modes .vb-connect__tab--phone,
.vb-connect__radio--email:checked ~ .vb-connect__modes .vb-connect__tab--email {
  background: var(--vb-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(47, 125, 189, 0.32);
}

/* Keyboard focus indicator carried onto the active tab label */
.vb-connect__radio--phone:focus-visible ~ .vb-connect__modes .vb-connect__tab--phone,
.vb-connect__radio--email:focus-visible ~ .vb-connect__modes .vb-connect__tab--email {
  outline: 2px solid var(--vb-blue);
  outline-offset: 2px;
}

/* Input + button row */
.vb-connect__row {
  display: flex;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
}

.vb-connect__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  font-size: 15px;
  color: var(--vb-text);
  background: var(--vb-gray);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.vb-connect__input::placeholder {
  color: #9ca3af;
}

.vb-connect__input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--vb-blue);
  box-shadow: 0 0 0 4px rgba(47, 125, 189, 0.14);
}

/* Show the phone input by default; swap to email when its tab is selected */
.vb-connect__input--email {
  display: none;
}

.vb-connect__radio--email:checked ~ .vb-connect__row .vb-connect__input--email {
  display: block;
}

.vb-connect__radio--email:checked ~ .vb-connect__row .vb-connect__input--phone {
  display: none;
}

.vb-connect__btn {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: var(--vb-blue);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
}

.vb-connect__btn:hover {
  background: #246da6;
  transform: translateY(-1px);
}

.vb-connect__note {
  margin: 18px auto 0;
  max-width: 480px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9ca3af;
}

/* Tablet / mobile: full-width stacked input + button */
@media only screen and (max-width: 575px) {
  .vb-connect-area {
    padding: 0 0 56px;
  }
  .vb-connect-card {
    padding: 34px 22px;
  }
  .vb-connect__title {
    font-size: 25px;
  }
  .vb-connect__row {
    flex-direction: column;
  }
  .vb-connect__btn {
    width: 100%;
  }
}

/* ==========================================================================
   About VICBOSA section
   Scoped to .vb-about-area. A two-column institutional section (image left,
   content right) that replaces the former homepage savings calculator.
   ========================================================================== */
.vb-about-area {
  padding: 104px 0;
  background: #fbfcfe;
}

.vb-about-row {
  align-items: center;
}

/* --- Left image --- */
.vb-about-media {
  position: relative;
  padding-bottom: 18px;
}

.vb-about-media__img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 52px rgba(17, 24, 39, 0.16);
}

.vb-about-media__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Floating badge over the lower-left of the image */
.vb-about-media__badge {
  position: absolute;
  left: 24px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--vb-white);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.16);
}

.vb-about-media__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vb-blue);
  color: #ffffff;
  font-size: 12px;
}

.vb-about-media__badge-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--vb-navy);
}

/* --- Right content --- */
.vb-about-content {
  max-width: 580px;
}

.vb-about__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vb-blue);
  background: var(--vb-light-blue);
  border-radius: 999px;
}

.vb-about__title {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--vb-navy);
}

.vb-about__subtitle {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--vb-text);
}

.vb-about__body {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.75;
  color: #6b7280;
}

/* Key points */
.vb-about__points {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.vb-about__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--vb-text);
}

.vb-about__points li:last-child {
  margin-bottom: 0;
}

.vb-about__check {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--vb-blue);
  color: #ffffff;
  font-size: 10px;
}

/* CTA buttons */
.vb-about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.vb-about__btn-secondary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vb-blue);
  background: var(--vb-white);
  border: 1.5px solid var(--vb-blue);
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.vb-about__btn-secondary:hover {
  background: var(--vb-blue);
  color: #ffffff;
}

/* Tablet / mobile: stack image above content */
@media only screen and (max-width: 1199px) {
  .vb-about-area {
    padding: 72px 0;
  }
  .vb-about-media {
    margin-bottom: 44px;
  }
  .vb-about-content {
    max-width: 100%;
  }
}

@media only screen and (max-width: 575px) {
  .vb-about-area {
    padding: 56px 0;
  }
  .vb-about__title {
    font-size: 29px;
  }
  .vb-about__cta {
    gap: 12px;
  }
  .vb-about__cta .btn-one,
  .vb-about__btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   "How VICBOSA Supports Riders" carousel — uniform card images
   Scoped to .wealth-secure-area only. The six pillar photos have different
   native aspect ratios, so the template (which sizes the image only by
   width: 100%) renders cards of uneven height. These rules give every image
   wrapper a fixed height and crop the photo with object-fit: cover, so all
   six cards look uniformly designed. No other section is affected.
   ========================================================================== */
.wealth-secure-area .single-wealth-secure-box .img-box-inner {
  height: 280px;
}

.wealth-secure-area .single-wealth-secure-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media only screen and (max-width: 991px) {
  .wealth-secure-area .single-wealth-secure-box .img-box-inner {
    height: 250px;
  }
}

@media only screen and (max-width: 575px) {
  .wealth-secure-area .single-wealth-secure-box .img-box-inner {
    height: 230px;
  }
}

/* ==========================================================================
   "Your Member Journey & Support Desk" (Features Style 2) — CTA spacing
   Scoped to .features-style2-area. The repurposed tabs add a per-tab CTA
   button below the link list; this gives it room from the list above.
   ========================================================================== */
.features-style2-area .features-style2-text-box .btns-box.vb-fs2-cta {
  margin-top: 28px;
}

/* ==========================================================================
   "Rider Growth Programs" (deals-area) — section-title clipping fix
   The repurposed section gained a centred .sec-title, but the template's
   .deals-area ships with no top padding and `overflow: hidden`. The global
   .sec-title carries `margin-top: -8px`, which pulled the heading above the
   section box and clipped its top edge. Adding scoped top padding and
   neutralising the negative margin within this section restores the heading.
   ========================================================================== */
.deals-area {
  padding-top: 96px;
}

.deals-area .sec-title {
  margin-top: 0;
}

@media only screen and (max-width: 991px) {
  .deals-area {
    padding-top: 70px;
  }
}

@media only screen and (max-width: 575px) {
  .deals-area {
    padding-top: 56px;
  }
}

/* ==========================================================================
   Contact page breadcrumb hero — subtitle
   The template's .breadcrumb-area .title card ships with an <h2> only. The
   Contact hero adds a one-line subtitle (.vb-breadcrumb-subtitle) inside the
   same white card; this constrains its width so the card stays compact and
   matches the breadcrumb-menu's muted text colour.
   ========================================================================== */
.breadcrumb-area .title .vb-breadcrumb-subtitle {
  margin: 10px 0 0;
  max-width: 440px;
  color: #7f7873;
  font-size: 16px;
  line-height: 1.6em;
  font-weight: 400;
}

@media only screen and (max-width: 575px) {
  .breadcrumb-area .title .vb-breadcrumb-subtitle {
    max-width: 100%;
    font-size: 15px;
  }
}

/* ==========================================================================
   Contact page — inquiry form (Main Contact Form Area, right column)
   The template's .contact-form styles only cover text/email inputs and the
   textarea. These scoped rules add the form heading block, style the
   inquiry-type <select> to match those inputs, and lay out the consent
   checkbox and the "submission coming soon" note. The form is frontend-only:
   it has no backend and uses a mailto: fallback (see contact.html).
   ========================================================================== */
.contact-form .vb-inquiry-form__head {
  margin-bottom: 28px;
}

.contact-form .vb-inquiry-form__head h2 {
  font-size: 30px;
  line-height: 38px;
  margin: 0 0 10px;
}

/* Inquiry-type select — matched to the template's input[type="text"] look. */
.contact-form form select.vb-inquiry-form__select {
  position: relative;
  display: block;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #e2deda;
  color: #7f7873;
  font-size: 16px;
  font-family: var(--thm-font);
  padding: 0 18px;
  border-radius: 0;
  transition: all 500ms ease;
  cursor: pointer;
}

.contact-form form select.vb-inquiry-form__select:focus {
  border-color: var(--thm-base);
  outline: none;
}

/* Consent checkbox — compact row, overrides the template's 18px form label. */
.contact-form form .vb-inquiry-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #7f7873;
  cursor: pointer;
}

.contact-form form .vb-inquiry-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--thm-base);
  cursor: pointer;
}

/* ==========================================================================
   Contact page — office location & map
   Replaces the template's placeholder .google-map section (and its fake
   branch-locator search) with a responsive, keyless Google Maps embed
   (?q=<plus code>&output=embed) for the verified VICBOSA office Plus Code,
   paired with a clean location card. Scoped to .vb-location-area; the modest
   border-radius is intentional here only, not a global change.
   ========================================================================== */
.vb-location {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 30px;
  align-items: stretch;
}

.vb-location__map {
  position: relative;
  min-height: 420px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.vb-location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vb-location__card {
  display: flex;
  flex-direction: column;
  background: #f7f1eb;
  border: 1px solid #f2ece7;
  border-radius: 10px;
  padding: 38px 34px;
}

.vb-location__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--thm-base);
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 22px;
}

.vb-location__name {
  font-size: 24px;
  line-height: 1.3em;
  margin: 0 0 12px;
}

.vb-location__address {
  font-size: 16px;
  line-height: 27px;
  color: #7f7873;
  margin: 0 0 10px;
}

.vb-location__pluscode {
  font-size: 15px;
  line-height: 24px;
  color: #6f6862;
  margin: 0 0 24px;
}

.vb-location__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 24px;
  background: var(--thm-base);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 200ms ease;
}

.vb-location__link:hover {
  background: var(--thm-black);
  color: #ffffff;
}

@media only screen and (max-width: 991px) {
  .vb-location {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vb-location__map {
    min-height: 340px;
  }
}

/* ==========================================================================
   Top utility bar — "Membership" dropdown (.vb-looking)
   Swaps ONLY the template's native <select> ("Looking → Membership")
   nice-select control for a plugin-free HTML/CSS hover + focus dropdown, so
   it never degrades to a raw browser select regardless of script timing or
   hydration. The approved deployed-header layout is kept intact: the markup
   reuses the template's .looking-banking-box / .inner-title / .select-box
   wrappers, so the binoculars + "Looking" label and the 170px control slot
   are unchanged. These rules only style the dropdown inside that slot.
   ========================================================================== */
.vb-looking__box {
  position: relative;
}

.vb-looking__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 20px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #7f7873;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--thm-font);
  transition: color 200ms ease;
}

.vb-looking__chevron {
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease, margin-top 200ms ease;
}

.vb-looking:hover .vb-looking__trigger,
.vb-looking:focus-within .vb-looking__trigger {
  color: var(--vb-blue);
}

.vb-looking:hover .vb-looking__chevron,
.vb-looking:focus-within .vb-looking__chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}

.vb-looking__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 196px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border-top: 2px solid var(--vb-blue);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 99;
}

.vb-looking:hover .vb-looking__menu,
.vb-looking:focus-within .vb-looking__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vb-looking__menu li {
  display: block;
}

.vb-looking__menu li a {
  display: block;
  padding: 8px 18px;
  color: #7f7873;
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

.vb-looking__menu li a:hover {
  background: #f7f1eb;
  color: var(--vb-blue);
}

/* ==========================================================================
   Homepage CTA — "Ready to Ride Forward With VICBOSA?" (.vb-cta)
   Restyles the template slogan-area into a premium rounded conversion panel:
   a full-bleed VICBOSA riders image under a VICBOSA navy-to-blue overlay,
   sitting on a calm cream section. Scoped to .vb-cta — the template slogan
   classes are only overridden inside this section.
   ========================================================================== */
.vb-cta.slogan-area {
  background-color: #f7f1eb;
  padding: 90px 0;
}

.vb-cta .slogan-content-box {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 18px;
  overflow: hidden;
  padding: 78px 60px;
  gap: 40px;
}

.vb-cta .slogan-content-box-bg {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center center;
}

.vb-cta .slogan-content-box-bg:before {
  background: linear-gradient(
    100deg,
    rgba(17, 24, 39, 0.94) 0%,
    rgba(17, 24, 39, 0.82) 52%,
    rgba(47, 125, 189, 0.62) 100%
  );
}

.vb-cta .inner-title {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.vb-cta .inner-title h2 {
  font-size: 42px;
  line-height: 1.2em;
  font-weight: 700;
  margin: 0 0 14px;
}

.vb-cta .inner-title p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.75em;
  margin: 0;
}

/* CTA buttons — softly rounded; VICBOSA-blue treatment is inherited from the
   template's --thm-base (already rebranded to VICBOSA blue). */
.vb-cta .get-app-box ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.vb-cta .get-app-box ul li {
  float: none;
  margin-right: 0;
}

.vb-cta .get-app-box ul li a {
  border-radius: 10px;
  padding: 18px 28px;
}

@media only screen and (max-width: 991px) {
  .vb-cta.slogan-area {
    padding: 64px 0;
  }

  .vb-cta .slogan-content-box {
    padding: 54px 32px;
    gap: 30px;
  }

  .vb-cta .inner-title h2 {
    font-size: 32px;
  }
}

@media only screen and (max-width: 575px) {
  .vb-cta .slogan-content-box {
    padding: 44px 24px;
  }

  .vb-cta .inner-title h2 {
    font-size: 26px;
  }
}

/* ==========================================================================
   About page — VICBOSA institutional body (.vb-about-*)
   Replaces the Finbank intro / choose / statements / facts / statistics /
   awards template sections with VICBOSA institutional content. Scoped to the
   .vb-about-* section classes; alternating white/cream backgrounds match the
   rest of the site, accents from --vb-blue.
   ========================================================================== */
.vb-about-overview,
.vb-about-support,
.vb-about-membership,
.vb-about-cta {
  background: #ffffff;
  padding: 96px 0;
}

.vb-about-mv,
.vb-about-leadership,
.vb-about-contact {
  background: #f7f1eb;
  padding: 96px 0;
}

.vb-about__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vb-blue);
  background: var(--vb-light-blue);
  border-radius: 4px;
}

/* Section 1 — Who We Are */
.vb-about-overview__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
}

.vb-about-overview__text h2 {
  font-size: 38px;
  line-height: 1.2em;
  margin: 0 0 20px;
}

.vb-about-overview__text p {
  font-size: 16px;
  line-height: 1.75em;
  color: #7f7873;
  margin: 0 0 16px;
}

.vb-about-overview__text p:last-child {
  margin-bottom: 0;
}

.vb-about-overview__media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* Section 2 — Mission & Vision */
.vb-about-mv__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.vb-about-mv__card {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-top: 4px solid var(--vb-blue);
  border-radius: 14px;
  padding: 44px 40px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
}

.vb-about-mv__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 26px;
  margin-bottom: 22px;
}

.vb-about-mv__card h3 {
  font-size: 24px;
  margin: 0 0 12px;
}

.vb-about-mv__card p {
  font-size: 16px;
  line-height: 1.75em;
  color: #7f7873;
  margin: 0;
}

/* Section 3 — What VICBOSA Supports */
.vb-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 12px;
}

.vb-support-card {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 34px 30px;
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.vb-support-card:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.vb-support-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 24px;
  margin-bottom: 20px;
}

.vb-support-card h3 {
  font-size: 19px;
  line-height: 1.35em;
  margin: 0 0 10px;
}

.vb-support-card p {
  font-size: 15px;
  line-height: 1.65em;
  color: #7f7873;
  margin: 0;
}

/* Section 4 — Leadership */
.vb-leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 12px;
}

.vb-leader-card {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 38px 24px;
  text-align: center;
}

.vb-leader-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin-bottom: 20px;
  background: var(--vb-blue);
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vb-leader-card h3 {
  font-size: 19px;
  margin: 0 0 6px;
}

.vb-leader-card p {
  font-size: 15px;
  color: var(--vb-blue);
  font-weight: 600;
  margin: 0;
}

/* Section 5 — Membership */
.vb-fees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  gap: 26px;
  justify-content: center;
  margin-top: 8px;
}

.vb-fee-card {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
}

.vb-fee-card h3 {
  font-size: 18px;
  margin: 0 0 14px;
}

.vb-fee-card__amount {
  font-size: 34px;
  font-weight: 700;
  color: var(--vb-blue);
  line-height: 1.1em;
  margin-bottom: 8px;
}

.vb-fee-card p {
  font-size: 14px;
  color: #7f7873;
  margin: 0;
}

.vb-fees__note {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6em;
  color: #6f6862;
}

/* Section 6 — Visit or Contact */
.vb-about-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 12px;
}

.vb-about-contact__item {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 42px 38px;
  text-align: center;
}

.vb-about-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 22px;
  margin-bottom: 18px;
}

.vb-about-contact__item h4 {
  font-size: 17px;
  margin: 0 0 10px;
}

.vb-about-contact__item p {
  font-size: 16px;
  line-height: 1.7em;
  color: #7f7873;
  margin: 0;
}

.vb-about-contact__item a {
  color: #7f7873;
  transition: color 200ms linear;
}

.vb-about-contact__item a:hover {
  color: var(--vb-blue);
}

/* Email: keep on one line where it fits; only wrap on very small screens. */
.vb-about-contact__email {
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* Google Maps reference sits inside the office/location card. */
.vb-about-contact__mapref {
  margin-top: 14px;
  font-size: 14px;
}

.vb-about-contact__mapref span {
  display: block;
  margin-bottom: 2px;
  color: var(--vb-blue);
  font-weight: 600;
}

/* Section 7 — CTA */
.vb-about-cta__panel {
  position: relative;
  border-radius: 18px;
  padding: 70px 40px;
  text-align: center;
  background: linear-gradient(120deg, var(--vb-navy) 0%, #1b3a5e 55%, var(--vb-blue) 100%);
  overflow: hidden;
}

.vb-about-cta__panel h2 {
  color: #ffffff;
  font-size: 36px;
  line-height: 1.2em;
  margin: 0 0 16px;
}

.vb-about-cta__panel p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.7em;
  max-width: 680px;
  margin: 0 auto 30px;
}

.vb-about-cta__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vb-about-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

.vb-about-cta__btn--primary {
  background: #ffffff;
  color: var(--vb-navy);
}

.vb-about-cta__btn--primary:hover {
  background: var(--vb-light-blue);
  color: var(--vb-navy);
}

.vb-about-cta__btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.vb-about-cta__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

@media only screen and (max-width: 991px) {
  .vb-about-overview,
  .vb-about-mv,
  .vb-about-support,
  .vb-about-leadership,
  .vb-about-membership,
  .vb-about-contact,
  .vb-about-cta {
    padding: 64px 0;
  }

  .vb-about-overview__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vb-about-mv__grid,
  .vb-support-grid,
  .vb-leaders-grid,
  .vb-about-contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575px) {
  .vb-about-mv__grid,
  .vb-support-grid,
  .vb-leaders-grid,
  .vb-about-contact__grid,
  .vb-fees {
    grid-template-columns: 1fr;
  }

  .vb-about-overview__text h2,
  .vb-about-cta__panel h2 {
    font-size: 28px;
  }

  .vb-about-cta__panel {
    padding: 50px 24px;
  }
}

/* ==========================================================================
   Membership page (/membership) — .vb-membership-*
   Reuses shared components (.sec-title, .vb-fees/.vb-fee-card,
   .vb-support-grid/.vb-support-card, .vb-about-contact*, .vb-about-cta*) and
   adds membership-specific section wrappers and blocks. Scoped to
   .vb-membership-* (plus the shared component classes).
   ========================================================================== */
.vb-membership-section {
  background: #ffffff;
  padding: 96px 0;
}

.vb-membership-section--alt {
  background: #f7f1eb;
}

/* Why Join — two-column intro with hero CTAs */
.vb-membership-why {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
}

.vb-membership-why__text h2 {
  font-size: 38px;
  line-height: 1.2em;
  margin: 0 0 18px;
}

.vb-membership-why__text p {
  font-size: 16px;
  line-height: 1.75em;
  color: #7f7873;
  margin: 0 0 26px;
}

.vb-membership-why__media img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.vb-membership-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.vb-membership-hero__btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

.vb-membership-hero__btn--primary {
  background: var(--vb-blue);
  color: #ffffff;
}

.vb-membership-hero__btn--primary:hover {
  background: var(--vb-navy);
  color: #ffffff;
}

.vb-membership-hero__btn--ghost {
  background: transparent;
  color: var(--vb-blue);
  border: 1px solid var(--vb-blue);
}

.vb-membership-hero__btn--ghost:hover {
  background: var(--vb-blue);
  color: #ffffff;
}

/* Who Can Join — centered pill list */
.vb-membership-who {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.vb-membership-who li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 50px;
  padding: 14px 24px;
  font-size: 16px;
  color: var(--vb-text);
}

.vb-membership-who li span {
  color: var(--vb-blue);
  font-size: 20px;
}

.vb-membership-note {
  max-width: 680px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6em;
  color: #6f6862;
}

/* Requirements — two-column checklist */
.vb-membership-reqs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 30px;
  max-width: 900px;
  margin: 8px auto 0;
  padding: 0;
  list-style: none;
}

.vb-membership-reqs li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.5em;
  color: var(--vb-text);
}

.vb-membership-reqs li span {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vb-blue);
  font-size: 18px;
}

/* How to Join — numbered steps grid */
.vb-membership-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.vb-membership-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 28px 26px;
}

.vb-membership-steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vb-blue);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.vb-membership-steps li p {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.55em;
  color: #7f7873;
}

@media only screen and (max-width: 991px) {
  .vb-membership-section {
    padding: 64px 0;
  }

  .vb-membership-why {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vb-membership-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575px) {
  .vb-membership-why__text h2 {
    font-size: 28px;
  }

  .vb-membership-reqs,
  .vb-membership-steps {
    grid-template-columns: 1fr;
  }

  .vb-membership-who li {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Savings page (/savings) — .vb-savings-* dynamic polish
   Adds a highlight card over the intro image, a connected step timeline, and
   a highlighted note card. Scoped to .vb-savings-*; the page reuses the
   shared VICBOSA components for everything else.
   ========================================================================== */
/* How to Start Saving — connected step timeline */
.vb-savings-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.vb-savings-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #e2deda;
  z-index: 0;
}

.vb-savings-steps li {
  position: relative;
  z-index: 1;
  text-align: center;
}

.vb-savings-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vb-blue);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 0 0 8px #ffffff;
}

.vb-savings-steps li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55em;
  color: #7f7873;
}

/* Savings & Membership — highlighted note card */
.vb-savings-note-card {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-left: 4px solid var(--vb-blue);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.vb-savings-note-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 20px;
}

.vb-savings-note-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6em;
  color: #6f6862;
}

@media only screen and (max-width: 991px) {
  .vb-savings-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .vb-savings-steps::before {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .vb-savings-steps {
    grid-template-columns: 1fr;
  }

  .vb-savings-note-card {
    flex-direction: column;
    text-align: center;
  }
}

/* Build More From Your Savings — feature matrix */
.vb-savings-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-top: 8px;
}

/* Single white box, 2x2 cells separated by thin internal dividers (reference
   "Get More From Your Money" .overview-content-box-one treatment). */
.vb-savings-matrix__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
}

.vb-savings-matrix__item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid #f2ece7;
  border-bottom: 1px solid #f2ece7;
}

.vb-savings-matrix__item:nth-child(2n) {
  border-right: none;
}

.vb-savings-matrix__item:nth-child(n + 3) {
  border-bottom: none;
}

.vb-savings-matrix__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid #e2deda;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 24px;
  margin: 0 auto 16px;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

.vb-savings-matrix__item:hover .vb-savings-matrix__icon {
  background: var(--vb-blue);
  color: #ffffff;
  border-color: var(--vb-blue);
}

.vb-savings-matrix__item h3 {
  font-size: 18px;
  line-height: 1.35em;
  margin: 0;
}

.vb-savings-matrix__aside h3 {
  font-size: 26px;
  line-height: 1.25em;
  margin: 0 0 16px;
}

.vb-savings-matrix__aside p {
  font-size: 16px;
  line-height: 1.75em;
  color: #7f7873;
  margin: 0 0 16px;
}

.vb-savings-matrix__aside .vb-membership-hero__btns {
  margin-top: 8px;
}

/* Savings & Membership Requirements — document/requirement cards */
.vb-savings-reqs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.vb-savings-req-card {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 30px 26px;
}

.vb-savings-req-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 22px;
  margin-bottom: 18px;
}

.vb-savings-req-card h3 {
  font-size: 18px;
  margin: 0 0 16px;
}

.vb-savings-req-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vb-savings-req-card li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.55em;
  color: #7f7873;
}

.vb-savings-req-card li:last-child {
  margin-bottom: 0;
}

.vb-savings-req-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vb-blue);
  font-weight: 700;
}

@media only screen and (max-width: 991px) {
  .vb-savings-matrix {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vb-savings-reqs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575px) {
  .vb-savings-matrix__grid {
    grid-template-columns: 1fr;
  }

  .vb-savings-reqs-grid {
    grid-template-columns: 1fr;
  }
}

/* Member Savings Benefits — open icon cells with faint divider lines
   (reference "Our Savings Account Benefits" treatment: centered icon/title/
   text, subtle dividers between cells, not heavy card boxes). */
.vb-savings-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
}

.vb-savings-benefit {
  position: relative;
  text-align: center;
  padding: 40px 32px;
}

/* vertical divider between columns (not on the right edge) */
.vb-savings-benefit:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 0;
  height: 64%;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(47, 125, 189, 0) 0%,
    rgba(47, 125, 189, 0.32) 50%,
    rgba(47, 125, 189, 0) 100%
  );
}

/* horizontal divider under the first row (items 1-3) */
.vb-savings-benefit:nth-child(-n + 3)::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(47, 125, 189, 0) 0%,
    rgba(47, 125, 189, 0.32) 50%,
    rgba(47, 125, 189, 0) 100%
  );
}

.vb-savings-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 30px;
  margin-bottom: 22px;
}

.vb-savings-benefit h3 {
  font-size: 20px;
  line-height: 1.3em;
  margin: 0 0 12px;
}

.vb-savings-benefit p {
  font-size: 15px;
  line-height: 1.65em;
  color: #7f7873;
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .vb-savings-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  /* reset desktop dividers for the 2-column layout */
  .vb-savings-benefit::after,
  .vb-savings-benefit::before {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .vb-savings-benefits {
    grid-template-columns: 1fr;
  }

  .vb-savings-benefit {
    padding: 30px 20px;
  }
}

/* ==========================================================================
   Savings page — tab/action bar (reference "page-contains" scroll bar).
   CSS-only radio tabs: getFinbankHtml strips <script>, so no JS is used —
   hidden radios + :checked sibling selectors switch panels. Default Benefits
   is checked; if CSS somehow fails, panels are not hidden (graceful).
   ========================================================================== */
.vb-savings-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vb-savings-tabbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 44px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.vb-savings-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 22px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--vb-text);
  font-size: 15px;
  font-weight: 600;
  transition: color 200ms ease, background-color 200ms ease;
}

.vb-savings-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 26%;
  height: 48%;
  width: 1px;
  background: #f2ece7;
}

.vb-savings-tab:hover {
  color: var(--vb-blue);
}

.vb-savings-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e2deda;
  color: var(--vb-blue);
  font-size: 11px;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

/* Active tab */
#vbst-benefits:checked ~ .vb-savings-tabbar label[for="vbst-benefits"],
#vbst-eligibility:checked ~ .vb-savings-tabbar label[for="vbst-eligibility"],
#vbst-documents:checked ~ .vb-savings-tabbar label[for="vbst-documents"],
#vbst-guidance:checked ~ .vb-savings-tabbar label[for="vbst-guidance"],
#vbst-faq:checked ~ .vb-savings-tabbar label[for="vbst-faq"] {
  color: #ffffff;
  background: var(--vb-blue);
}

#vbst-benefits:checked ~ .vb-savings-tabbar label[for="vbst-benefits"] .vb-savings-tab__icon,
#vbst-eligibility:checked ~ .vb-savings-tabbar label[for="vbst-eligibility"] .vb-savings-tab__icon,
#vbst-documents:checked ~ .vb-savings-tabbar label[for="vbst-documents"] .vb-savings-tab__icon,
#vbst-guidance:checked ~ .vb-savings-tabbar label[for="vbst-guidance"] .vb-savings-tab__icon,
#vbst-faq:checked ~ .vb-savings-tabbar label[for="vbst-faq"] .vb-savings-tab__icon {
  background: #ffffff;
  color: var(--vb-blue);
  border-color: #ffffff;
}

/* Panels */
.vb-savings-panel {
  display: none;
}

#vbst-benefits:checked ~ .vb-savings-tabs__panels #panel-benefits,
#vbst-eligibility:checked ~ .vb-savings-tabs__panels #panel-eligibility,
#vbst-documents:checked ~ .vb-savings-tabs__panels #panel-documents,
#vbst-guidance:checked ~ .vb-savings-tabs__panels #panel-guidance,
#vbst-faq:checked ~ .vb-savings-tabs__panels #panel-faq {
  display: block;
}

/* Savings Guidance — single centred card */
.vb-savings-guidance-card {
  max-width: 760px;
  margin: 0 auto;
}

/* Member FAQ's */
.vb-savings-faq {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin: 8px auto 0;
}

.vb-savings-faq__item {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-left: 4px solid var(--vb-blue);
  border-radius: 12px;
  padding: 24px 26px;
}

.vb-savings-faq__item h4 {
  font-size: 18px;
  line-height: 1.4em;
  margin: 0 0 8px;
}

.vb-savings-faq__item p {
  font-size: 15px;
  line-height: 1.65em;
  color: #7f7873;
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .vb-savings-tab {
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .vb-savings-tabbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vb-savings-tab {
    flex: 0 0 auto;
  }

  .vb-savings-tab:not(:last-child)::after {
    display: none;
  }
}

/* ==========================================================================
   FAQs page (/faqs) — .vb-faq-*
   Category-grouped accordion built on native <details>/<summary>, so it works
   with no JavaScript (getFinbankHtml strips all <script> tags). Styled to
   match the savings FAQ cards (white card, blue left accent, soft border).
   ========================================================================== */
.vb-faq {
  max-width: 900px;
  margin: 0 auto;
}

.vb-faq__group {
  margin-bottom: 44px;
}

.vb-faq__group:last-child {
  margin-bottom: 0;
}

.vb-faq__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  line-height: 1.3em;
  margin: 0 0 20px;
  color: var(--vb-navy);
}

.vb-faq__group-title .vb-faq__group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 18px;
  flex: 0 0 auto;
}

.vb-faq__item {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-left: 4px solid var(--vb-blue);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}

.vb-faq__item:last-child {
  margin-bottom: 0;
}

.vb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4em;
  color: var(--vb-navy);
  cursor: pointer;
  list-style: none;
  transition: color 200ms ease;
}

/* hide native disclosure marker (Safari/Chrome/Firefox) */
.vb-faq__q::-webkit-details-marker {
  display: none;
}

.vb-faq__q::marker {
  content: "";
}

.vb-faq__q:hover {
  color: var(--vb-blue);
}

.vb-faq__q .vb-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e2deda;
  color: var(--vb-blue);
  font-size: 12px;
  flex: 0 0 auto;
  transition: transform 250ms ease, background-color 200ms ease,
    color 200ms ease, border-color 200ms ease;
}

.vb-faq__item[open] .vb-faq__q {
  color: var(--vb-blue);
}

.vb-faq__item[open] .vb-faq__q .vb-faq__icon {
  transform: rotate(90deg);
  background: var(--vb-blue);
  color: #ffffff;
  border-color: var(--vb-blue);
}

.vb-faq__a {
  padding: 0 24px 22px;
}

.vb-faq__a p {
  font-size: 15px;
  line-height: 1.7em;
  color: #7f7873;
  margin: 0;
}

.vb-faq__a p + p {
  margin-top: 12px;
}

.vb-faq__a a {
  color: var(--vb-blue);
  font-weight: 600;
}

@media only screen and (max-width: 575px) {
  .vb-faq__q {
    font-size: 16px;
    padding: 16px 18px;
  }

  .vb-faq__a {
    padding: 0 18px 18px;
  }

  .vb-faq__group-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   Officials page (/officials) — role-based leadership cards.
   Reuses .vb-leaders-grid / .vb-leader-card from the About page. The avatar
   holds a role icon (not initials), and the placeholder name line is muted so
   it clearly reads as "to be confirmed", never as a real person.
   ========================================================================== */
.vb-officials-grid .vb-leader-card__avatar {
  font-size: 30px;
}

.vb-officials-grid .vb-leader-card p {
  color: #9a938d;
  font-weight: 500;
  font-style: italic;
}

/* ==========================================================================
   Member Stories — Finbank testimonial-style layout, public-safe content.
   Keeps the reference card rhythm while avoiding fake ratings/names/dates.
   ========================================================================== */
.vb-member-stories-wall {
  background: #ffffff;
}

.vb-member-stories-wall .sec-title {
  margin-bottom: 48px;
}

.vb-story-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #f2ece7;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.vb-story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12);
}

.vb-story-card__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--vb-blue);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vb-story-card__label span {
  font-size: 18px;
  line-height: 1;
}

.vb-story-card .top .date-box p {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47, 125, 189, 0.1);
  color: var(--vb-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.vb-story-card .text-box p {
  color: #5f5a55;
  font-size: 16px;
  line-height: 1.78em;
}

.vb-story-card .customer-info .img-box {
  width: 62px;
  height: 62px;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
}

.vb-story-card .customer-info .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

.vb-story-card .customer-info .title-box h3 {
  color: var(--vb-navy);
  font-size: 21px;
}

.vb-story-card .customer-info .title-box span {
  display: inline-block;
  color: #8a817a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35em;
  margin-top: 4px;
}

.vb-story-wall-note {
  margin-top: 12px;
}

@media only screen and (max-width: 575px) {
  .vb-story-card {
    padding: 28px 24px 30px;
  }

  .vb-story-card .top {
    display: block;
  }

  .vb-story-card .top .date-box {
    margin-top: 14px;
  }
}

/* ==========================================================================
   Sitemap completion pages: Calendar, Offers, Calculator, Strategic Plan.
   These are public-safe structure pages with confirmed-content placeholders.
   ========================================================================== */
.vb-structure-section,
.vb-structure-band {
  padding: 96px 0;
  background: #ffffff;
}

.vb-structure-band {
  background: #f7f1eb;
}

.vb-structure-intro {
  max-width: 820px;
  margin-bottom: 34px;
}

.vb-structure-intro h2,
.vb-structure-panel h2 {
  color: var(--vb-navy);
  font-size: 38px;
  line-height: 1.2em;
  margin: 0 0 16px;
}

.vb-structure-intro p,
.vb-structure-panel p {
  color: #7f7873;
  font-size: 16px;
  line-height: 1.75em;
  margin: 0 0 12px;
}

.vb-structure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.vb-structure-card {
  min-height: 100%;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.06);
}

.vb-structure-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 24px;
  margin-bottom: 20px;
}

.vb-structure-card h3 {
  color: var(--vb-navy);
  font-size: 20px;
  line-height: 1.35em;
  margin: 0 0 10px;
}

.vb-structure-card p {
  color: #7f7873;
  font-size: 15px;
  line-height: 1.65em;
  margin: 0;
}

.vb-structure-card__pending {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 20px;
  background: #fff3e2;
  color: #b26a00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vb-download-btn {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
}

.vb-structure-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  background: #ffffff;
  border-left: 5px solid var(--vb-blue);
  border-radius: 16px;
  padding: 42px;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.08);
}

/* ==========================================================================
   Premium Gallery page: mixed photo and future-video media layout.
   ========================================================================== */
.vb-gallery-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111827;
}

.vb-gallery-hero__media,
.vb-gallery-hero__media::after {
  position: absolute;
  inset: 0;
}

.vb-gallery-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-gallery-hero__media::after {
  content: "";
  background: linear-gradient(90deg, rgba(17, 24, 39, 0.88) 0%, rgba(17, 24, 39, 0.58) 48%, rgba(17, 24, 39, 0.18) 100%);
}

.vb-gallery-hero .container {
  position: relative;
  z-index: 1;
}

.vb-gallery-hero__content {
  max-width: 760px;
  padding: 170px 0 92px;
}

.vb-gallery__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  background: rgba(47, 125, 189, 0.14);
  color: var(--vb-blue);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-gallery-hero__content h1 {
  color: #ffffff;
  font-size: 58px;
  line-height: 1.05em;
  margin: 0 0 20px;
}

.vb-gallery-hero__content p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  line-height: 1.7em;
  margin: 0;
}

.vb-gallery-section,
.vb-gallery-video {
  padding: 96px 0;
  background: #ffffff;
}

.vb-gallery-video {
  background: #f7f1eb;
}

.vb-gallery-heading {
  max-width: 820px;
  margin-bottom: 34px;
}

.vb-gallery-heading h2 {
  color: var(--vb-navy);
  font-size: 38px;
  line-height: 1.2em;
  margin: 0 0 14px;
}

.vb-gallery-heading p {
  color: #7f7873;
  font-size: 16px;
  line-height: 1.7em;
  margin: 0;
}

.vb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 250px;
  gap: 18px;
}

.vb-gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  background: #111827;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.16);
}

.vb-gallery-card--large {
  grid-column: span 2;
  grid-row: span 2;
}

.vb-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 400ms ease;
}

.vb-gallery-card:hover img {
  transform: scale(1.06);
}

.vb-gallery-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px;
  color: #ffffff;
  background: linear-gradient(0deg, rgba(17, 24, 39, 0.86), rgba(17, 24, 39, 0));
}

.vb-gallery-card figcaption span,
.vb-video-card__body span {
  display: block;
  color: #b9dcff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vb-gallery-card figcaption strong {
  display: block;
  font-size: 18px;
  line-height: 1.3em;
}

.vb-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.vb-video-card {
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.1);
}

.vb-video-card__poster {
  position: relative;
  min-height: 230px;
  background-size: cover;
  background-position: center;
}

.vb-video-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.28);
}

.vb-video-card__play {
  position: absolute;
  z-index: 1;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.22);
}

.vb-video-card__body {
  padding: 28px;
}

.vb-video-card__body h3 {
  color: var(--vb-navy);
  font-size: 21px;
  line-height: 1.35em;
  margin: 0 0 10px;
}

.vb-video-card__body p {
  color: #7f7873;
  font-size: 15px;
  line-height: 1.65em;
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .vb-structure-grid,
  .vb-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-gallery-hero__content h1 {
    font-size: 46px;
  }
}

@media only screen and (max-width: 767px) {
  .vb-structure-section,
  .vb-structure-band,
  .vb-gallery-section,
  .vb-gallery-video {
    padding: 72px 0;
  }

  .vb-structure-grid,
  .vb-video-grid,
  .vb-gallery-grid {
    grid-template-columns: 1fr;
  }

  .vb-gallery-grid {
    grid-auto-rows: auto;
  }

  .vb-gallery-card,
  .vb-gallery-card--large {
    grid-column: auto;
    grid-row: auto;
    min-height: 260px;
  }

  .vb-structure-panel {
    display: block;
    padding: 30px;
  }

  .vb-structure-panel .btn-one {
    margin-top: 24px;
  }

  .vb-structure-intro h2,
  .vb-structure-panel h2,
  .vb-gallery-heading h2 {
    font-size: 30px;
  }

  .vb-gallery-hero {
    min-height: 520px;
  }

  .vb-gallery-hero__content {
    padding: 140px 0 70px;
  }

  .vb-gallery-hero__content h1 {
    font-size: 38px;
  }
}

/* ==========================================================================
   Structure-page breadcrumb hero (calendar / offers / calculator /
   strategic-plan). These pages set an inline background-image on
   .breadcrumb-area and wrap the title + menu in .breadcrumb-area__inner,
   instead of the legacy .breadcrumb-area-bg child + .inner-content. The
   :has() guard scopes these rules to that variant only, so the 13 existing
   pages (which use .breadcrumb-area-bg) are left untouched.
   ========================================================================== */
.breadcrumb-area:has(.breadcrumb-area__inner) {
  background-color: var(--vb-navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

.breadcrumb-area:has(.breadcrumb-area__inner)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.58);
  z-index: 0;
}

.breadcrumb-area__inner {
  position: relative;
  z-index: 1;
  padding: 130px 0 56px;
  text-align: center;
}

/* Reset the legacy absolute "white card" title treatment for this variant. */
.breadcrumb-area__inner .title {
  position: static;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.breadcrumb-area__inner .title::before {
  display: none;
}

.breadcrumb-area__inner .title h2 {
  color: #ffffff;
  margin: 0;
}

.breadcrumb-area__inner .breadcrumb-menu {
  position: static;
  margin-top: 14px;
}

.breadcrumb-area__inner .breadcrumb-menu ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

@media only screen and (max-width: 767px) {
  .breadcrumb-area__inner {
    padding: 96px 0 40px;
  }
}

/* ==========================================================================
   News page (/news) — Finbank blog-page-one grid, VICBOSA-safe.
   Reuses the template's .single-blog-style1 card (08-blog-section.css). Scoped
   under .vb-news so it never affects other pages. Adds an excerpt paragraph
   (not in the base card), tidies the title divider, marks the status badge,
   and styles the "no live posts yet" note.
   ========================================================================== */
.vb-news .single-blog-style1 {
  margin-bottom: 30px;
}

/* Uniform card images: every news image fills a fixed 3:2 box and is
   center-cropped, so all cards line up regardless of source dimensions.
   .img-holder .inner already has overflow:hidden, so the hover zoom is clipped. */
.vb-news .single-blog-style1 .img-holder img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* the base card underlines the title; with an excerpt below we move the
   divider to sit above the meta row instead */
.vb-news .single-blog-style1 .text-holder .blog-title {
  border-bottom: none;
  padding-bottom: 12px;
}

.vb-news-excerpt {
  font-size: 15px;
  line-height: 1.7em;
  color: #7f7873;
  margin: 0 0 4px;
}

.vb-news .single-blog-style1 .text-holder .bottom {
  border-top: 1px solid #e6ebe9;
  margin-top: 4px;
}

/* "Pending" status badge in the category-date-box reads as a status, not a date */
.vb-news .single-blog-style1 .img-holder .category-date-box .date h5 {
  color: #b26a00;
}

.vb-news-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 900px;
  margin: 22px auto 0;
  padding: 22px 26px;
  background: var(--vb-light-blue);
  border: 1px solid #d8e9fb;
  border-radius: 14px;
}

.vb-news-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 18px;
}

.vb-news-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7em;
  color: var(--vb-text);
}

@media only screen and (max-width: 575px) {
  .vb-news-note {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }
}

/* ==========================================================================
   News page (/news) — "Latest News & Updates" in the Finbank blog-2
   (blog-page-three) list + sidebar style. Reuses single-blog-style1--style3
   and the sidebar widget classes (08-blog-section.css). Scoped under
   .vb-news-list so no other page is affected.
   ========================================================================== */

/* Uniform card images: each horizontal card's image fills its column height
   and is center-cropped, so every card lines up. Full colour (the base card
   applies mix-blend-mode: luminosity). */
.vb-news-list .single-blog-style1--style3 .image-colum,
.vb-news-list .single-blog-style1--style3 .image-colum .img-holder,
.vb-news-list .single-blog-style1--style3 .image-colum .inner {
  height: 100%;
}

.vb-news-list .single-blog-style1--style3 .image-colum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}

/* "Pending" reads as a status, tinted amber (matches the rest of the site) */
.vb-news-list .single-blog-style1 .img-holder .category-date-box .date h5 {
  color: #b26a00;
}

.vb-news-list .sidebar-blog-post-single .title-box .post-date {
  color: #b26a00;
}

/* Sidebar contact card — lightweight replacement for the template banner box */
.vb-news-aside-cta {
  text-align: center;
}

.vb-news-aside-cta h3 {
  font-size: 20px;
  line-height: 1.3em;
  margin: 0 0 10px;
  color: var(--vb-navy);
}

.vb-news-aside-cta p {
  font-size: 14px;
  line-height: 1.7em;
  color: #7f7873;
  margin: 0 0 18px;
}

/* Stack the horizontal cards on tablet / mobile */
@media only screen and (max-width: 991px) {
  .vb-news-list .single-blog-style1--style3 {
    flex-direction: column;
  }

  .vb-news-list .single-blog-style1--style3 .image-colum {
    max-width: 100%;
  }

  .vb-news-list .single-blog-style1--style3 .image-colum .img-holder,
  .vb-news-list .single-blog-style1--style3 .image-colum .inner {
    height: auto;
  }

  .vb-news-list .single-blog-style1--style3 .image-colum img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .vb-news-list .single-blog-style1--style3 .text-colum {
    padding-left: 30px;
  }
}

/* ==========================================================================
   News page (/news) — CSS-only category filter + article detail styles.
   Filter uses hidden radios in .container (siblings of .vb-news-filter and
   .row), so labels toggle visible cards with no JavaScript (static-export
   safe, same pattern as the savings tabs). Scoped under .vb-news-list /
   .vb-news-single — no global effect.
   ========================================================================== */

/* Filter target anchors — empty spans in .container (before .vb-news-filter
   and .row). The URL hash drives :target on the matching span; scroll-margin
   keeps the anchor jump clear of the sticky header. Deep-linkable from the
   article sidebars (e.g. /news#safety-training). */
.vb-news-list .vb-news-target {
  display: block;
  height: 0;
  scroll-margin-top: 150px;
}

/* Pill filter bar */
.vb-news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 46px;
  max-width: 920px;
}

.vb-news-filter__pill {
  margin: 0;
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid #e2deda;
  background: #ffffff;
  color: var(--vb-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.vb-news-filter__pill:hover {
  color: var(--vb-blue);
  border-color: var(--vb-blue);
}

/* Active pill (matches the current URL hash) */
#all:target ~ .vb-news-filter a[href="#all"],
#official-notices:target ~ .vb-news-filter a[href="#official-notices"],
#member-updates:target ~ .vb-news-filter a[href="#member-updates"],
#safety-training:target ~ .vb-news-filter a[href="#safety-training"],
#sacco-development:target ~ .vb-news-filter a[href="#sacco-development"],
#financial-education:target ~ .vb-news-filter a[href="#financial-education"],
#community-updates:target ~ .vb-news-filter a[href="#community-updates"] {
  background: var(--vb-blue);
  border-color: var(--vb-blue);
  color: #ffffff;
}

/* Filter the cards (no hash or #all shows everything, so needs no rule) */
#official-notices:target ~ .row .single-blog-style1--style3:not([data-category="official-notices"]),
#member-updates:target ~ .row .single-blog-style1--style3:not([data-category="member-updates"]),
#safety-training:target ~ .row .single-blog-style1--style3:not([data-category="safety-training"]),
#sacco-development:target ~ .row .single-blog-style1--style3:not([data-category="sacco-development"]),
#financial-education:target ~ .row .single-blog-style1--style3:not([data-category="financial-education"]),
#community-updates:target ~ .row .single-blog-style1--style3:not([data-category="community-updates"]) {
  display: none;
}

/* Sidebar "Update Categories" filter links: active state matches the hash
   (base .sidebar-categories-box styling handles the rest). */
#all:target ~ .row .vb-news-cat-filter a[href="#all"],
#official-notices:target ~ .row .vb-news-cat-filter a[href="#official-notices"],
#member-updates:target ~ .row .vb-news-cat-filter a[href="#member-updates"],
#safety-training:target ~ .row .vb-news-cat-filter a[href="#safety-training"],
#sacco-development:target ~ .row .vb-news-cat-filter a[href="#sacco-development"],
#community-updates:target ~ .row .vb-news-cat-filter a[href="#community-updates"],
#financial-education:target ~ .row .vb-news-cat-filter a[href="#financial-education"] {
  color: var(--vb-blue);
}

/* Card "Read Full Update" action */
.vb-news-list .vb-news-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vb-blue);
  white-space: nowrap;
}

.vb-news-list .vb-news-readmore .icon-right-arrow {
  font-size: 12px;
  transition: transform 200ms ease;
}

.vb-news-list .vb-news-readmore:hover {
  color: var(--vb-navy);
}

.vb-news-list .vb-news-readmore:hover .icon-right-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   News article detail (/news/<slug>) — blog-single style, VICBOSA-safe.
   ========================================================================== */
.vb-news-single .blog-details-img-box .inner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  mix-blend-mode: normal;
  border-radius: 10px;
}

.vb-news-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 16px;
}

.vb-news-single__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 13px;
  font-weight: 600;
}

.vb-news-single__status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 30px;
  background: #fff5e6;
  border: 1px solid #f3e1c6;
  color: #b26a00;
  font-size: 13px;
  font-weight: 600;
}

.vb-news-single .blog-details-title {
  margin-bottom: 18px;
}

.vb-news-single .blog-details-text-box p {
  font-size: 16px;
  line-height: 1.8em;
  color: #7f7873;
  margin: 0 0 18px;
}

.vb-news-single__notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--vb-light-blue);
  border: 1px solid #d8e9fb;
  border-radius: 14px;
}

.vb-news-single__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 18px;
}

.vb-news-single__notice h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

.vb-news-single__notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7em;
  color: var(--vb-text);
}

.vb-news-single__actions {
  margin-top: 26px;
}

.vb-news-single__back {
  margin-top: 24px;
}

.vb-news-single__back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--vb-blue);
}

.vb-news-single__back a .icon-right-arrow {
  transform: rotate(180deg);
  font-size: 12px;
}

.vb-news-single__back a:hover {
  color: var(--vb-navy);
}

/* article sidebar */
.vb-news-single .sidebar-categories-box li.current a {
  color: var(--vb-blue);
  font-weight: 700;
}

.vb-news-sidebar-note {
  text-align: center;
}

.vb-news-sidebar-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  font-size: 20px;
  margin-bottom: 12px;
}

.vb-news-sidebar-note h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--vb-navy);
}

.vb-news-sidebar-note p {
  font-size: 14px;
  line-height: 1.7em;
  color: #7f7873;
  margin: 0;
}

/* ==========================================================================
   News article (/news/<slug>) — premium blog-single polish.
   ========================================================================== */
/* White article card with a soft shadow around the whole details box */
.vb-news-single .blog-details-box {
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
  padding: 16px;
}

.vb-news-single .blog-details-img-box {
  margin: 0;
}

.vb-news-single .blog-details-text-box {
  padding: 6px 22px 20px;
}

/* Elegant divider line under the title */
.vb-news-single .blog-details-title {
  padding-bottom: 18px;
  border-bottom: 1px solid #eef1f0;
}

/* Lead intro paragraph (more specific than the base body-paragraph rule) */
.vb-news-single .blog-details-text-box p.vb-news-single__lead {
  font-size: 18px;
  line-height: 1.7em;
  font-weight: 500;
  color: var(--vb-navy);
  margin: 18px 0 18px;
}

/* Safe highlight / quote block (adapted from the Finbank quote box) */
.vb-news-single__quote {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 26px 0;
  padding: 24px 26px;
  background: var(--vb-light-blue);
  border-left: 4px solid var(--vb-blue);
  border-radius: 0 14px 14px 0;
}

.vb-news-single__quote-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 17px;
}

.vb-news-single .blog-details-text-box .vb-news-single__quote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65em;
  font-weight: 600;
  color: var(--vb-navy);
}

/* Sidebar search — uses the reference .sidebar-search-box / .search-form
   styling (input + square icon button) but is a <div>, never a <form>, so it
   cannot submit. .search-form needs position:relative for the absolute icon
   button; the button is VICBOSA-branded. */
.vb-news-search .search-form {
  position: relative;
  display: block;
  width: 100%;
}

.vb-news-search .search-form button {
  background: var(--vb-light-blue);
  color: var(--vb-blue);
  cursor: pointer;
}

.vb-news-search .search-form button:hover {
  background: var(--vb-blue);
  color: #ffffff;
}

.vb-news-search__hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: #9a938d;
}

/* Sidebar Categories — boxed list with circular bullets + active state */
.vb-news-category-list {
  margin-top: 22px;
  padding: 6px 20px;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.vb-news-category-list li {
  border-bottom: 1px solid #f2ece7;
}

.vb-news-category-list li:last-child {
  border-bottom: none;
}

.vb-news-category-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--vb-text);
  transition: color 200ms ease;
}

.vb-news-category-list li a::after {
  content: none;
}

.vb-news-category-list li a::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--vb-blue);
  transition: background-color 200ms ease;
}

.vb-news-category-list li a:hover {
  color: var(--vb-blue);
}

.vb-news-category-list li a:hover::before,
.vb-news-category-list li.current a::before {
  background: var(--vb-blue);
}

.vb-news-category-list li.current a {
  color: var(--vb-blue);
}

/* Related Updates — heading row with previous / next arrow buttons.
   (The reference's arrows come from an owl-carousel built by JS, which the
   renderer strips; these are static links to the adjacent article instead.) */
.vb-news-related__head {
  justify-content: space-between;
  width: 100%;
}

.vb-news-related__title {
  display: flex;
  align-items: center;
}

.vb-news-related-nav {
  display: flex;
  gap: 8px;
}

.vb-news-related-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e2deda;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 11px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.vb-news-related-nav__btn[hidden] {
  display: none;
}

.vb-news-related-nav__btn:hover {
  background: var(--vb-blue);
  color: #ffffff;
  border-color: var(--vb-blue);
}

.vb-news-related-nav__btn--prev .icon-right-arrow {
  display: inline-block;
  transform: rotate(180deg);
}

/* /news listing: fill the circular bullet for the active (hash-matched) category
   in the boxed sidebar list, mirroring the article sidebar's .current state. */
#all:target ~ .row .vb-news-category-list a[href="#all"]::before,
#official-notices:target ~ .row .vb-news-category-list a[href="#official-notices"]::before,
#member-updates:target ~ .row .vb-news-category-list a[href="#member-updates"]::before,
#safety-training:target ~ .row .vb-news-category-list a[href="#safety-training"]::before,
#sacco-development:target ~ .row .vb-news-category-list a[href="#sacco-development"]::before,
#financial-education:target ~ .row .vb-news-category-list a[href="#financial-education"]::before,
#community-updates:target ~ .row .vb-news-category-list a[href="#community-updates"]::before {
  background: var(--vb-blue);
}

/* ==========================================================================
   Gallery page (/gallery) — premium archive: hero note, featured, album rail,
   filters, grid "View Photo" overlay, load-more, media notice, CTA.
   Scoped to .vb-gallery-* ; reuses .vb-gallery-card / .vb-video-card / .vb-about-cta.
   ========================================================================== */
.vb-gallery-hero__note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7em;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
}

/* Featured media: one large image full-width + supporting row */
.vb-gallery-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.vb-gallery-featured__main {
  grid-column: 1 / -1;
}

.vb-gallery-featured__main img {
  aspect-ratio: 12 / 5;
}

.vb-gallery-featured__grid .vb-gallery-card:not(.vb-gallery-featured__main) img {
  aspect-ratio: 4 / 3;
}

/* Hover "View Photo" cue on grid cards (lightbox-ready markup) */
.vb-gallery-card__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.vb-gallery-card:hover .vb-gallery-card__view,
.vb-gallery-card:focus-within .vb-gallery-card__view {
  opacity: 1;
  transform: translateY(0);
}

.vb-gallery-card__view .icon-right-arrow {
  font-size: 11px;
}

/* Albums & events rail */
.vb-gallery-albums__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  max-width: none;
}

.vb-gallery-album-nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.vb-gallery-album-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e2deda;
  background: #ffffff;
  color: var(--vb-blue);
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.vb-gallery-album-nav__btn:hover {
  background: var(--vb-blue);
  color: #ffffff;
  border-color: var(--vb-blue);
}

.vb-gallery-album-nav__btn--prev .icon-right-arrow {
  display: inline-block;
  transform: rotate(180deg);
}

.vb-gallery-album-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 1fr);
  gap: 22px;
  margin-top: 26px;
  padding: 6px 4px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.vb-gallery-album-rail:focus-visible {
  outline: 2px solid var(--vb-blue);
  outline-offset: 4px;
}

.vb-gallery-album-card {
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #f2ece7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.vb-gallery-album-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.vb-gallery-album-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

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

.vb-gallery-album-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.vb-gallery-album-card__cat {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vb-blue);
}

.vb-gallery-album-card__body h3 {
  font-size: 18px;
  line-height: 1.3em;
  margin: 0;
}

.vb-gallery-album-card__status {
  font-size: 13px;
  color: #b26a00;
  font-weight: 600;
}

.vb-gallery-album-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vb-blue);
}

.vb-gallery-album-card__cta .icon-right-arrow {
  font-size: 12px;
  transition: transform 200ms ease;
}

.vb-gallery-album-card__cta:hover .icon-right-arrow {
  transform: translateX(4px);
}

/* Category filter pills */
.vb-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 36px;
  max-width: 940px;
}

.vb-gallery-filters__pill {
  margin: 0;
  padding: 9px 20px;
  border-radius: 30px;
  border: 1px solid #e2deda;
  background: #ffffff;
  color: var(--vb-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.vb-gallery-filters__pill:hover {
  color: var(--vb-blue);
  border-color: var(--vb-blue);
}

.vb-gallery-filters__pill.is-active {
  background: var(--vb-blue);
  border-color: var(--vb-blue);
  color: #ffffff;
}

/* Load more */
.vb-gallery-loadmore {
  margin-top: 36px;
  text-align: center;
}

.vb-gallery-loadmore__hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: #9a938d;
}

@media only screen and (max-width: 991px) {
  .vb-gallery-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vb-gallery-featured__main img {
    aspect-ratio: 16 / 9;
  }
}

@media only screen and (max-width: 767px) {
  .vb-gallery-albums__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .vb-gallery-album-rail {
    grid-auto-columns: minmax(220px, 80%);
  }
}

@media only screen and (max-width: 575px) {
  .vb-gallery-featured__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Gallery interactions — full-card open button, active album state, lightbox.
   ========================================================================== */
/* Transparent full-card button so clicking/keyboard-activating opens the lightbox */
.vb-gallery-card__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.vb-gallery-card__open:focus-visible {
  outline: 3px solid #b9dcff;
  outline-offset: -3px;
}

/* Active album card (after "View Album") */
.vb-gallery-album-card.vb-gallery-filter-active {
  border-color: var(--vb-blue);
  box-shadow: 0 0 0 2px var(--vb-blue), 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ---- Lightbox ---- */
.vb-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(10, 13, 20, 0.92);
}

.vb-gallery-lightbox[hidden] {
  display: none;
}

.vb-gallery-lightbox-content {
  position: relative;
  max-width: 980px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.vb-gallery-lightbox-media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vb-gallery-lightbox-media img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.vb-gallery-lightbox-caption {
  text-align: center;
  color: #ffffff;
  padding: 16px 8px 0;
}

.vb-gallery-lightbox__cat {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9dcff;
  margin-bottom: 6px;
}

.vb-gallery-lightbox-caption strong {
  display: block;
  font-size: 19px;
  line-height: 1.35em;
}

.vb-gallery-lightbox__album {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.vb-gallery-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease;
}

.vb-gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.vb-gallery-lightbox-nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease;
}

.vb-gallery-lightbox-nav:hover {
  background: var(--vb-blue);
}

.vb-gallery-lightbox-nav--prev .icon-right-arrow {
  display: inline-block;
  transform: rotate(180deg);
}

.vb-gallery-lightbox__close:focus-visible,
.vb-gallery-lightbox-nav:focus-visible {
  outline: 3px solid #b9dcff;
  outline-offset: 2px;
}

@media only screen and (max-width: 767px) {
  .vb-gallery-lightbox {
    padding: 14px;
    gap: 4px;
  }
  .vb-gallery-lightbox-nav {
    width: 44px;
    height: 44px;
  }
  .vb-gallery-lightbox-media img {
    max-height: 64vh;
  }
}

/* ==========================================================================
   Album-centric gallery: full-card open button, description, coming-soon CTA,
   and the empty-category state. (Album rail / card / filter pill / lightbox
   styles are defined above and reused.)
   ========================================================================== */
.vb-gallery-album-card {
  position: relative;
}

.vb-gallery-album-card__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.vb-gallery-album-card__open:focus-visible {
  outline: 3px solid var(--vb-blue);
  outline-offset: -3px;
  border-radius: 16px;
}

.vb-gallery-album-card__desc {
  font-size: 13px;
  line-height: 1.6em;
  color: #7f7873;
  margin: 2px 0 0;
}

.vb-gallery-album-card__cta--soon {
  color: #b26a00;
  cursor: default;
}

.vb-gallery-album-card:hover .vb-gallery-album-card__cta:not(.vb-gallery-album-card__cta--soon) .icon-right-arrow {
  transform: translateX(4px);
}

.vb-gallery-empty {
  margin: 14px 0 0;
  padding: 30px;
  text-align: center;
  border: 1px dashed #d8d2cc;
  border-radius: 14px;
  background: #ffffff;
  color: #7f7873;
  font-size: 15px;
}

/* ==========================================================================
   Video Collections (below the photo albums) — placeholder cards + an
   informational "pending approval" notice modal (never a fake player).
   Reuses .vb-video-grid / .vb-video-card / .vb-video-card__poster / __body
   and .vb-gallery-filters__pill defined above.
   ========================================================================== */
.vb-gallery-videos {
  background: #f7f1eb;
}

.vb-video-card {
  position: relative;
}

.vb-video-card__open {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.vb-video-card__open:focus-visible {
  outline: 3px solid var(--vb-blue);
  outline-offset: -3px;
  border-radius: 16px;
}

/* Pending badge on the poster (shown instead of a play button) */
.vb-video-status {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  color: #b26a00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.18);
}

/* ---- Video notice modal ---- */
.vb-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 13, 20, 0.78);
}

.vb-video-modal[hidden] {
  display: none;
}

.vb-video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 16px;
  padding: 38px 34px 34px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.vb-video-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.06);
  color: var(--vb-navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease;
}

.vb-video-modal-close:hover {
  background: rgba(17, 24, 39, 0.12);
}

.vb-video-modal__cat {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vb-blue);
  margin-bottom: 8px;
}

.vb-video-modal__dialog h3 {
  font-size: 24px;
  line-height: 1.3em;
  color: var(--vb-navy);
  margin: 0 0 14px;
}

.vb-video-modal__status {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  border-radius: 30px;
  background: #fff3e2;
  color: #b26a00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vb-video-modal__note {
  font-size: 15px;
  line-height: 1.7em;
  color: #5b5550;
  margin: 0;
}

.vb-video-modal-close:focus-visible {
  outline: 3px solid var(--vb-blue);
  outline-offset: 2px;
}

@media only screen and (max-width: 575px) {
  .vb-video-modal__dialog {
    padding: 30px 22px 26px;
  }
}

/* ── Legal / admin pages ───────────────────────────────────── */
.vb-legal-content {
  max-width: 820px;
  margin: 0 auto 60px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.8em;
  color: #3c3632;
}

.vb-legal-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--vb-dark, #1b1b1b);
  margin: 36px 0 12px;
}

.vb-legal-content p {
  margin: 0 0 16px;
}

.vb-legal-content ul {
  margin: 0 0 20px 20px;
  padding: 0;
  list-style: disc;
}

.vb-legal-content ul li {
  margin: 0 0 8px;
}

.vb-legal-content a {
  color: var(--vb-blue, #0056b3);
  text-decoration: underline;
}

.vb-legal-content a:hover {
  color: var(--vb-blue-dark, #003d80);
}

@media only screen and (max-width: 767px) {
  .vb-legal-content {
    font-size: 15px;
    margin-bottom: 40px;
  }

  .vb-legal-content h3 {
    font-size: 18px;
    margin-top: 28px;
  }
}

/* ==========================================================================
   Features-style1 cards — iOS WebKit rendering fix
   Decorative shapes (.shape-left, .shape-bottom) are absolutely positioned
   <img> elements without explicit dimensions; iOS WebKit may fail to size
   them. The .counting-box-bg uses an inline background-image without
   background-size/position/repeat, causing inconsistent rendering on iOS.
   ========================================================================== */

/* Decorative shape images: explicit dimensions so iOS renders them */
.single-features-style1-box .shape-left img {
  display: block;
  width: 99px;
  height: 236px;
}

.single-features-style1-box .shape-bottom img {
  display: block;
  width: 236px;
  height: 98px;
}

/* Counting-box background: explicit sizing props for iOS WebKit */
.single-features-style1-box .counting-box .counting-box-bg {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Force GPU compositing on the card so iOS stacking contexts resolve */
.single-features-style1-box .counting-box {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Button icon hover gradient: add standard linear-gradient fallback */
.single-features-style1-box .text-box .btn-box a i:after {
  background-image: linear-gradient(90deg, rgb(138, 15, 61) 0%, rgb(207, 23, 60) 100%);
}