/* vb-chrome.v1.css — shared header + footer. Hand-written; no Elementor classes,
 * no per-page selectors, no inline styles. Palette is the main site's own tokens.
 *
 * Edit this file to restyle the header/footer everywhere.
 */

.vb-header, .vb-footer, .vb-nav__scrim {
  --vb-navy: #0F1E2E;
  --vb-navy-2: #16293C;
  --vb-gold: #BFA15A;   /* muted brand gold — matches the footer */
  --vb-sand: #D8CFC4;   /* warm cream, the original nav colour */
  --vb-ink: #10161d;
  --vb-muted: #8A9099;
  --vb-line: #E6E6E6;
  --vb-bar-h: 122px;   /* measured on the original header */
  box-sizing: border-box;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vb-header *, .vb-footer * { box-sizing: border-box; }

/* Visible only when focused — first tab stop on every page. */
.vb-skip {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--vb-navy); color: #fff; padding: 10px 16px;
  border-radius: 0 0 4px 4px; font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.vb-skip:focus { top: 0; }

/* ------------------------------------------------------------------ header */
/* Every value below was MEASURED off the original Elementor header rendered in a
 * browser, not chosen: background #0F1E2E, bar 122px, logo 195x48, nav #D8CFC4
 * 18px/600 Oswald uppercase with 10px gaps, CTA #FFC132 on #0F1E2E 16px/800
 * Oswald at 12px 24px / 3px radius, phone #FFC132 18px/400 Roboto.
 * Note: the original nav is CREAM #D8CFC4, not white, and the original phone has
 * NO box or border — both flagged to Bar. */
.vb-header {
  position: sticky; top: 0; z-index: 900;
  background: linear-gradient(180deg, var(--vb-navy) 0%, var(--vb-navy-2) 100%);
  border-bottom: 1px solid rgba(191, 161, 90, .30);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.vb-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  min-height: var(--vb-bar-h);
  display: flex; align-items: center; gap: 24px;
}
.vb-logo { flex: 0 0 auto; line-height: 0; }
.vb-logo img { height: 48px; width: auto; display: block; }

.vb-nav { margin-left: auto; }
.vb-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
}
.vb-nav__item { position: relative; }
/* Desktop: keep the label and its caret on one line. Without this the li's
   block flow drops the caret button onto a second row under the label. */
@media (min-width: 1025px) {
  .vb-nav__item { display: flex; align-items: center; }
}
.vb-nav__link {
  position: relative;
  display: inline-block; padding: 10px 12px;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 18px; font-weight: 600; text-transform: uppercase;
  color: var(--vb-sand); text-decoration: none; white-space: nowrap;
  transition: color .22s ease;
}
/* creative: gold underline that grows from centre on hover / active */
.vb-nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--vb-gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .26s ease;
}
.vb-nav__link--static { cursor: default; }
.vb-nav__link--static::after { display: none; }
.vb-nav__link:hover, .vb-nav__item:focus-within > .vb-nav__link,
.vb-nav__link[aria-current="page"] { color: var(--vb-gold); }
.vb-nav__link:hover::after, .vb-nav__item:focus-within > .vb-nav__link::after,
.vb-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* The caret button is the mobile accordion control. On desktop it is decorative
 * and pointer-inert, so hovering the row opens the submenu instead. */
.vb-nav__toggle {
  border: 0; background: none; padding: 10px 6px 10px 0; margin-left: -8px;
  cursor: pointer; color: #fff;
}
.vb-caret {
  display: inline-block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: color .22s ease;
}
/* Caret turns gold with its label on hover / focus / when the menu is open. */
.vb-nav__item:hover > .vb-nav__toggle,
.vb-nav__item:focus-within > .vb-nav__toggle,
.vb-nav__item--has-sub > .vb-nav__toggle[aria-expanded="true"] { color: var(--vb-gold); }

.vb-sub {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--vb-line); border-top: 3px solid var(--vb-gold);
  border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px rgba(15, 30, 46, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.vb-sub--mega {
  right: auto; left: 50%; transform: translate(-50%, 6px);
  width: min(760px, calc(100vw - 48px));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px;
}
.vb-sub li { margin: 0; }
.vb-sub a {
  display: block; padding: 9px 12px; border-radius: 4px;
  font-size: 14px; color: var(--vb-ink); text-decoration: none;
}
.vb-sub a:hover, .vb-sub a:focus-visible { background: rgba(216, 207, 196, .35); color: var(--vb-navy); }
.vb-sub a[aria-current="page"] { background: rgba(216, 207, 196, .35); box-shadow: inset 3px 0 0 var(--vb-gold); }

/* Third-level flyout: hovering Residential / Commercial opens its services to the side */
.vb-sub li { position: relative; }
.vb-sub__item--has-sub2 > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vb-sub__arrow {
  flex: 0 0 auto; width: 6px; height: 6px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .55; transition: opacity .2s ease;
}
.vb-sub__item--has-sub2:hover > a .vb-sub__arrow { opacity: 1; }
.vb-sub2 {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: -9px; left: 100%; min-width: 240px;
  background: #fff; border: 1px solid var(--vb-line); border-top: 3px solid var(--vb-gold);
  border-radius: 0 8px 8px 8px; box-shadow: 0 18px 40px rgba(15, 30, 46, .16);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.vb-sub2--wide { width: 470px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.vb-sub2 li { margin: 0; }
.vb-sub2 a {
  display: block; padding: 9px 12px; border-radius: 4px;
  font-size: 14px; color: var(--vb-ink); text-decoration: none; white-space: nowrap;
}
.vb-sub2 a:hover, .vb-sub2 a:focus-visible { background: rgba(216, 207, 196, .35); color: var(--vb-navy); }
.vb-sub2 a[aria-current="page"] { background: rgba(216, 207, 196, .35); box-shadow: inset 3px 0 0 var(--vb-gold); }

@media (hover: hover) and (min-width: 1025px) {
  .vb-nav__item--has-sub:hover > .vb-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .vb-nav__item--mega:hover > .vb-sub--mega { transform: translate(-50%, 0); }
  .vb-sub__item--has-sub2:hover > .vb-sub2 { opacity: 1; visibility: visible; transform: translateX(0); }
}
.vb-sub__item--has-sub2:focus-within > .vb-sub2 { opacity: 1; visibility: visible; transform: translateX(0); }
/* Keyboard parity: focus inside the item opens it too. */
.vb-nav__item--has-sub:focus-within > .vb-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.vb-nav__item--mega:focus-within > .vb-sub--mega { transform: translate(-50%, 0); }
.vb-nav__item--has-sub > .vb-nav__toggle[aria-expanded="true"] + .vb-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.vb-header__actions { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.vb-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 18px; font-weight: 400; color: var(--vb-gold);
  text-decoration: none; white-space: nowrap;
}
.vb-phone:hover { text-decoration: underline; }
/* Handset drawn in CSS rather than relying on Font Awesome, which the shared
 * include cannot assume is loaded. */
.vb-phone__icon {
  width: 15px; height: 15px; flex: 0 0 15px; margin: 0;
  background: var(--vb-gold);
  -webkit-mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.7 1.2 5.4 1c.3 0 .6.2.7.5l.8 2.3c.1.3 0 .6-.2.8l-1 .8c.7 1.5 1.9 2.7 3.4 3.4l.8-1c.2-.2.5-.3.8-.2l2.3.8c.3.1.5.4.5.7l-.2 1.7c0 .4-.4.7-.8.7C6.6 12.2 1.8 7.4 1.8 2c0-.4.3-.7.7-.8Z" fill="black"/></svg>');
  mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.7 1.2 5.4 1c.3 0 .6.2.7.5l.8 2.3c.1.3 0 .6-.2.8l-1 .8c.7 1.5 1.9 2.7 3.4 3.4l.8-1c.2-.2.5-.3.8-.2l2.3.8c.3.1.5.4.5.7l-.2 1.7c0 .4-.4.7-.8.7C6.6 12.2 1.8 7.4 1.8 2c0-.4.3-.7.7-.8Z" fill="black"/></svg>');
}
.vb-cta {
  display: inline-block; padding: 13px 24px; border-radius: 6px;
  background: var(--vb-gold); color: var(--vb-navy);
  font-size: 14px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(191, 161, 90, .28);
  transition: box-shadow .18s ease, transform .18s ease;
}
.vb-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(191, 161, 90, .46); }

/* Desktop bar: render the phone number as an outlined gold button that pairs with
   the filled CTA. Scoped to .vb-header__actions so the mobile panel phone is untouched. */
.vb-header__actions .vb-phone {
  padding: 11px 20px; border: 1.5px solid rgba(191, 161, 90, .55); border-radius: 6px;
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vb-header__actions .vb-phone:hover {
  background: var(--vb-gold); border-color: var(--vb-gold); color: var(--vb-navy);
  text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(191, 161, 90, .32);
}
.vb-header__actions .vb-phone:hover .vb-phone__icon { background: var(--vb-navy); }

.vb-burger { display: none; }
.vb-nav__actions { display: none; }
.vb-nav__scrim { display: none; }

/* ------------------------------------------------------- header, mobile */
@media (max-width: 1024px) {
  .vb-header__inner { gap: 12px; }
  .vb-header__actions { display: none; }

  .vb-burger {
    display: block; margin-left: auto; order: 3;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(216, 207, 196, .45); border-radius: 4px;
    background: transparent; cursor: pointer;
  }
  .vb-burger__bars,
  .vb-burger__bars::before,
  .vb-burger__bars::after {
    display: block; position: relative; margin: 0 auto;
    width: 20px; height: 2px; background: #D8CFC4;
    transition: transform .18s ease, opacity .18s ease;
  }
  .vb-burger__bars::before, .vb-burger__bars::after { content: ""; position: absolute; left: 0; }
  .vb-burger__bars::before { top: -6px; }
  .vb-burger__bars::after  { top: 6px; }
  .vb-burger[aria-expanded="true"] .vb-burger__bars { background: transparent; }
  .vb-burger[aria-expanded="true"] .vb-burger__bars::before { transform: translateY(6px) rotate(45deg); }
  .vb-burger[aria-expanded="true"] .vb-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .vb-nav {
    position: fixed; left: 0; right: 0; top: var(--vb-bar-h);
    max-height: calc(100vh - var(--vb-bar-h)); overflow-y: auto;
    margin: 0; padding: 8px 20px 28px;
    background: #fff; border-top: 1px solid var(--vb-line);
    box-shadow: 0 24px 48px rgba(15, 30, 46, .18);
    display: none; z-index: 901;
  }
  .vb-nav.is-open { display: block; }
  .vb-nav__list { display: block; }
  .vb-nav__item { border-bottom: 1px solid var(--vb-line); }
  .vb-nav__link { display: block; padding: 15px 44px 15px 2px; font-size: 17px; color: var(--vb-navy); }
  .vb-nav__link::after { display: none; }

  /* Caret becomes a real, hit-target-sized accordion button. On the white mobile
     panel it must be navy, not the desktop bar's white. */
  .vb-nav__toggle {
    position: absolute; right: 0; top: 0; margin: 0;
    width: 44px; height: 54px; padding: 0;
    display: grid; place-items: center; color: var(--vb-navy);
  }
  .vb-nav__toggle[aria-expanded="true"] .vb-caret { transform: rotate(225deg) translateY(-2px); }

  .vb-sub, .vb-sub--mega {
    position: static; display: none; width: auto; min-width: 0;
    opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr;
    border: 0; border-top: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 10px 10px; background: transparent;
  }
  .vb-nav__toggle[aria-expanded="true"] + .vb-sub { display: block; }
  .vb-sub a { padding: 11px 10px; font-size: 15px; }
  /* Third-level flyout collapses to a static indented list on mobile. */
  .vb-sub2, .vb-sub2--wide {
    position: static; display: block; width: auto; min-width: 0;
    opacity: 1; visibility: visible; transform: none; grid-template-columns: 1fr;
    border: 0; border-top: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 6px 14px; margin: 2px 0 6px; background: transparent;
  }
  .vb-sub2 a { padding: 9px 10px; font-size: 14px; color: var(--vb-navy); }
  .vb-sub__item--has-sub2 > a { display: block; }
  .vb-sub__arrow { display: none; }

  .vb-nav__actions {
    display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
  }
  .vb-nav__actions .vb-phone { font-size: 19px; text-align: center; padding: 10px; }
  .vb-nav__actions .vb-cta { text-align: center; padding: 15px; font-size: 15px; }

  .vb-nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 899;
    background: rgba(15, 30, 46, .45);
  }
  .vb-nav__scrim[hidden] { display: none; }
  body.vb-nav-open { overflow: hidden; }
}

/* ------------------------------------------------------------------ footer */
.vb-footer { background: var(--vb-navy); color: #D7DCE2; }
.vb-footer__inner {
  max-width: 1280px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; gap: 36px 40px;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
}
.vb-footer__tagline {
  margin: 0 0 18px; font-size: 22px; line-height: 1.3;
  font-weight: 800; color: #fff;
}
.vb-footer__h {
  margin: 0 0 14px; font-size: 12px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: var(--vb-gold);
}
.vb-footer__col ul { list-style: none; margin: 0; padding: 0; }
.vb-footer__col li { margin-bottom: 12px; }
.vb-footer__col a, .vb-footer__contact a, .vb-social a, .vb-footer__profiles a {
  color: #D7DCE2; text-decoration: none; font-size: 14px; line-height: 1.45;
}
.vb-footer__col a:hover, .vb-footer__contact a:hover,
.vb-social a:hover, .vb-footer__profiles a:hover { color: var(--vb-gold); text-decoration: underline; }
.vb-footer__region {
  margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: #fff;
}
.vb-footer__region:first-of-type { margin-top: 0; }

.vb-social { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.vb-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); color: #D8CFC4;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.vb-social a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.vb-social a:hover, .vb-social a:focus-visible {
  border-color: var(--vb-gold); color: var(--vb-gold);
  background: rgba(191, 161, 90, .12); text-decoration: none; transform: translateY(-2px);
}
.vb-footer__contact { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.8; }
.vb-footer__contact a { font-size: 15px; font-weight: 700; }

.vb-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: 1280px; margin: 0 auto; padding: 18px 20px 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.vb-footer__bar p { margin: 0; font-size: 13px; color: var(--vb-muted); }
.vb-footer__profiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vb-footer__profiles a { font-size: 13px; color: var(--vb-muted); }

@media (max-width: 1024px) {
  .vb-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .vb-footer__inner { grid-template-columns: 1fr; padding: 40px 20px 28px; }
  .vb-footer__bar { padding: 16px 20px 26px; }
}

/* ------------------------------------------------------------ a11y floors */
.vb-header a:focus-visible, .vb-header button:focus-visible,
.vb-footer a:focus-visible {
  outline: 2px solid var(--vb-gold); outline-offset: 2px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vb-sub, .vb-cta, .vb-skip,
  .vb-burger__bars, .vb-burger__bars::before, .vb-burger__bars::after { transition: none; }
  .vb-cta:hover { transform: none; }
}

/* NAP block — three real postal addresses, carried over from the blog footer. */
.vb-footer__nap { font-style: normal; }
.vb-footer__addr { display: block; font-size: 14px; line-height: 1.5; margin-bottom: 10px; color: #D7DCE2; }
.vb-footer__nap .vb-footer__region { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: #fff; }
.vb-footer__nap .vb-footer__region:first-child { margin-top: 0; }


/* --- measured-original overrides -------------------------------------------
 * Two earlier edits to this file silently failed to match, leaving nav at 400
 * weight / Roboto and the CTA at 14px. Set explicitly so the measured values
 * cannot be missed again: nav 18px/600 Oswald, CTA 16px/800 Oswald at 12px 24px.
 */
.vb-header .vb-nav__list > .vb-nav__item > .vb-nav__link {
  font-family: "Oswald", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
.vb-header .vb-header__actions .vb-cta,
.vb-header .vb-nav__actions .vb-cta {
  font-family: "Oswald", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 12px 24px !important;
  letter-spacing: normal !important;
}
/* Match the desktop CTA to the outlined phone-number button: gold outline, same size, fills on hover. */
.vb-header .vb-header__actions .vb-cta {
  background: transparent !important; color: var(--vb-gold) !important;
  border: 1.5px solid rgba(191, 161, 90, .55) !important; border-radius: 6px !important;
  padding: 11px 20px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vb-header .vb-header__actions .vb-cta:hover {
  background: var(--vb-gold) !important; border-color: var(--vb-gold) !important; color: var(--vb-navy) !important;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(191, 161, 90, .32);
}
@media (max-width: 1024px) {
  /* Panel sits on the navy bar; cream links keep the original palette. */
  .vb-nav { background: var(--vb-navy); border-top-color: rgba(216, 207, 196, .25); }
  .vb-nav__item { border-bottom-color: rgba(216, 207, 196, .18); }
  .vb-nav .vb-sub a { color: #D8CFC4; }
  .vb-nav .vb-sub a:hover, .vb-nav .vb-sub a:focus-visible { background: rgba(216,207,196,.12); color: #fff; }
}

/* ------------------------------------------------------------ single footer */
/* Remove the legacy Elementor footer (Privacy/Terms + Copyright) that renders
 * right after the shared navy footer, so there is ONE footer site-wide. */
.vb-footer + .elementor-top-section,
.vb-footer + section.elementor-section { display: none !important; }
/* Bottom bar: Privacy | Terms | Trex | Thumbtack | Yelp on one line, separated. */
.vb-footer__profiles { gap: 8px 0; }
.vb-footer__profiles li:not(:last-child)::after {
  content: "|"; color: var(--vb-muted); opacity: .4; margin: 0 14px;
}

/* =========================================== footer: minimalist (v3) === */
/* Calmer, more spacious take: flat navy field, one thin gold hairline, quiet
   wide-tracked headings, muted links with a simple colour shift, more air.
   The glow blob, moving underlines and link slide from v2 are removed. */
.vb-footer{
  --vb-gold:#BFA15A;
  position:relative; overflow:hidden;
  background:#0B1622;
  background-image:
    radial-gradient(60% 120% at 88% -10%, rgba(191,161,90,.14) 0%, rgba(191,161,90,0) 55%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, 24px 24px;
}
/* single thin gold hairline along the very top edge */
.vb-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(191,161,90,.6),transparent);z-index:2}
.vb-footer::after{content:none}
.vb-footer__cta,.vb-footer__inner,.vb-footer__bar{position:relative;z-index:1}

/* ---- top CTA band ---- */
.vb-footer__cta{border-bottom:1px solid rgba(255,255,255,.08)}
.vb-footer__cta-inner{max-width:1200px;margin:0 auto;padding:34px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.vb-footer__cta-eyebrow{display:block;margin:0 0 8px;color:var(--vb-gold);
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.vb-footer__cta-title{margin:0;color:#fff;max-width:640px;
  font-family:"Oswald","Montserrat",system-ui,sans-serif;font-weight:600;font-size:26px;line-height:1.15;letter-spacing:.2px}
.vb-footer__cta-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  background:var(--vb-gold);color:#0B1622;border-radius:999px;padding:15px 30px;
  font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:15px;text-decoration:none;
  box-shadow:0 14px 30px rgba(191,161,90,.28);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.vb-footer__cta-btn:hover{background:#CBB06A;transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(191,161,90,.4);text-decoration:none;color:#0B1622!important}
.vb-footer__cta-btn span{transition:transform .2s ease}
.vb-footer__cta-btn:hover span{transform:translateX(4px)}
@media (max-width:640px){
  .vb-footer__cta-inner{padding:26px 20px}
  .vb-footer__cta-title{font-size:21px}
  .vb-footer__cta-btn{width:100%;justify-content:center}
}

/* compact spacing (shorter footer) */
.vb-footer__inner{padding:44px 24px 30px;gap:26px 48px}
.vb-footer__bar{padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.08)}

/* tagline: refined, with a short gold accent rule */
.vb-footer__tagline{padding-top:0;margin-bottom:16px;font-size:19px;font-weight:700;line-height:1.3}
.vb-footer__tagline::before{content:none}
.vb-footer__tagline::after{content:"";display:block;width:46px;height:3px;border-radius:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--vb-gold),rgba(191,161,90,.12))}

/* headings: quiet, wide-tracked gold */
.vb-footer__h{position:static;padding-bottom:0;margin-bottom:13px;text-transform:uppercase;
  font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--vb-gold);opacity:.95}
.vb-footer__h::after{content:none}

/* links: muted, tight spacing, gold hover */
.vb-footer__col li{margin-bottom:8px}
.vb-footer__col a{position:static;display:inline-block;color:#AEB8C4;font-size:13.5px;line-height:1.35;
  transition:color .16s ease,padding-left .16s ease}
.vb-footer__col a::after{content:none}
.vb-footer__col a:hover{color:var(--vb-gold)!important;transform:none;text-decoration:none!important}

/* social: subtle gold hover */
.vb-social a{width:34px;height:34px;border-color:rgba(255,255,255,.16);color:#AEB8C4}
.vb-social a:hover,.vb-social a:focus-visible{border-color:var(--vb-gold);color:var(--vb-gold);
  background:rgba(191,161,90,.1);transform:none;text-decoration:none}

/* contact rows with small gold icons */
.vb-footer__contact{font-weight:600;line-height:1.7}
.vb-footer__contact a{display:inline-flex;align-items:center;gap:9px;color:#D7DCE2}
.vb-footer__contact a:hover{color:var(--vb-gold)}
.vb-footer__contact svg{width:15px;height:15px;fill:var(--vb-gold);flex:0 0 auto}

/* NAP + regions, calmer tones */
.vb-footer__addr{color:#AEB8C4;font-size:13px;margin-bottom:8px;line-height:1.45}
.vb-footer__nap .vb-footer__region{color:#fff;font-weight:600;font-size:12.5px}

/* bottom bar: muted */
.vb-footer__bar p{font-size:12.5px;color:#8593A3}
.vb-footer__profiles a{color:#8593A3;font-size:12.5px}
.vb-footer__profiles a:hover{color:var(--vb-gold)!important}
.vb-footer__profiles li:not(:last-child)::after{color:#8593A3;opacity:.35;margin:0 14px}

@media (prefers-reduced-motion:reduce){
  .vb-footer__col a,.vb-social a{transition:none}
}

/* ============================================================
   vb-hero — canonical page banner (replica across every page
   except the homepage). Background image is set per-page via an
   inline style on .vb-hero; everything else is defined here so
   all heroes share identical height, spacing, and title position.
   ============================================================ */
.vb-hero{position:relative;overflow:hidden;padding:100px 0 96px;
  background-color:#0b1018;background-position:center 30%;background-size:cover;background-repeat:no-repeat}
.vb-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,16,24,.92) 0%,rgba(9,16,24,.70) 46%,rgba(9,16,24,.36) 100%)}
.vb-hero__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px;text-align:left}
.vb-hero__title{margin:0;color:#fff;font-family:"Oswald",system-ui,sans-serif;font-weight:800;
  font-size:54px;line-height:1.06;text-transform:uppercase;position:relative;display:inline-block;
  opacity:0;transform:translateY(12px);animation:vbHeroUp .6s .14s ease forwards}
.vb-hero__title::after{content:"";position:absolute;left:2px;bottom:-12px;width:78px;height:5px;
  border-radius:3px;background:linear-gradient(90deg,#D8CFC4,#BFA15A);box-shadow:0 4px 14px rgba(191,161,90,.45)}
.vb-hero__sub{position:relative;z-index:1;max-width:600px;margin:34px 0 0;color:#E6E6E6;
  font-family:"Montserrat","Open Sans",system-ui,sans-serif;font-size:18px;line-height:1.6;
  opacity:0;transform:translateY(12px);animation:vbHeroUp .6s .28s ease forwards}
@keyframes vbHeroUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vb-hero__title,.vb-hero__sub{animation:none;opacity:1;transform:none}}
@media(max-width:767px){.vb-hero{padding:64px 0 60px}.vb-hero__title{font-size:34px}.vb-hero__sub{font-size:16px;margin-top:28px}}