@charset "UTF-8";

/* Homepage layout only. Framework, controls and typography come from shared modules. */
.bgvp-site {
  overflow-x: clip;
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-surface-paper);
}

/* ---------- Hero stage: the brand film, then the poster hero (bgvp-hero-stage.js) ---------- */
/* Both slides share one grid cell, so the poster's own height sizes the stage and the film fills it.
   The dot capsule floats in the same cell on the bottom edge; the poster keeps a floor clear for it. */
.bgvp-site .bgvp-hero-stage {
  /* Capsule height, its distance from the bottom edge, and the clear floor the poster keeps under its content. */
  --bgvp-hero-stage-dots-height: 2.25rem;
  --bgvp-hero-stage-dots-gap: 1rem;
  --bgvp-hero-stage-floor: calc(var(--bgvp-hero-stage-dots-height) + var(--bgvp-hero-stage-dots-gap) + 1rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.bgvp-site .bgvp-hero-stage-slide {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  /* Sideways drags belong to the stage swipe (and the photo carousel inside the poster); vertical ones scroll. */
  touch-action: pan-y pinch-zoom;
}

.bgvp-site .bgvp-hero-stage-slide[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* While the capsule is there, the poster's bottom padding grows to the floor where it is shorter (narrow
   screens), so the capsule never sits on the photo count and tagline. */
.bgvp-site .bgvp-hero-stage:has(> [data-hero-stage-nav]) .hero-layout {
  padding-bottom: max(var(--bgvp-hero-pad-bottom), var(--bgvp-hero-stage-floor));
}

.bgvp-site .bgvp-hero-film-slide {
  position: relative;
  display: none;
  overflow: hidden;
  background: #0b1424;
}

/* The film slide shows once the stage script runs it, or before first paint where the browser can draw it
   (bgvp-motion-boot.js), so the poster never flashes first. */
html.bgvp-hero-film .bgvp-site .bgvp-hero-film-slide,
.bgvp-site .bgvp-hero-stage[data-hero-stage-ready] .bgvp-hero-film-slide {
  display: block;
}

html.bgvp-hero-film .bgvp-site .bgvp-hero-stage:not([data-hero-stage-ready]) [data-hero-stage-slide="poster"] {
  visibility: hidden;
}

.bgvp-site .bgvp-hero-film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The capsule: frosted glass that reads on the daylight poster, and turns to smoked glass over the night film.
   Each dot is a slot as wide as --bgvp-hero-stage-slot; the thumb (a short pill) slides to the slide on show
   (--hero-stage-index) and fills with its progress (--hero-stage-progress), both set by the stage script. */
.bgvp-site .bgvp-hero-stage-nav {
  --bgvp-hero-stage-slot: 1.875rem;
  --bgvp-hero-stage-thumb: 1.375rem;
  --bgvp-hero-stage-glass: rgba(255, 255, 255, 0.62);
  --bgvp-hero-stage-rim: rgba(21, 33, 45, 0.08);
  --bgvp-hero-stage-ink: var(--bgvp-color-brand-ink);
  --bgvp-hero-stage-dot: rgba(21, 33, 45, 0.3);
  --bgvp-hero-stage-dot-hover: rgba(21, 33, 45, 0.62);
  --bgvp-hero-stage-track: rgba(39, 71, 117, 0.18);
  --bgvp-hero-stage-hover: rgba(21, 33, 45, 0.07);
  --bgvp-hero-stage-accent: var(--bgvp-color-brand-blue);
  position: relative;
  z-index: 3;
  display: flex;
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: center;
  align-items: center;
  height: var(--bgvp-hero-stage-dots-height);
  margin-bottom: var(--bgvp-hero-stage-dots-gap);
  padding-inline: 0.25rem;
  background: var(--bgvp-hero-stage-glass);
  border: 1px solid var(--bgvp-hero-stage-rim);
  border-radius: 999px;
  box-shadow: 0 10px 26px -18px rgba(16, 24, 48, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.bgvp-site .bgvp-hero-stage[data-hero-stage-active="film"] .bgvp-hero-stage-nav {
  --bgvp-hero-stage-glass: rgba(255, 255, 255, 0.07);
  --bgvp-hero-stage-rim: rgba(255, 255, 255, 0.16);
  --bgvp-hero-stage-ink: rgba(255, 255, 255, 0.86);
  --bgvp-hero-stage-dot: rgba(255, 255, 255, 0.4);
  --bgvp-hero-stage-dot-hover: rgba(255, 255, 255, 0.85);
  --bgvp-hero-stage-track: rgba(255, 255, 255, 0.2);
  --bgvp-hero-stage-hover: rgba(255, 255, 255, 0.12);
  --bgvp-hero-stage-accent: var(--bgvp-color-cyan);
  /* Where the stage runs past the screen (phones), the capsule rides the screen's bottom edge over the film
     until the stage's foot scrolls into view. Over the poster it stays on the floor, clear of the copy. */
  position: sticky;
  bottom: max(var(--bgvp-hero-stage-dots-gap), env(safe-area-inset-bottom));
  box-shadow: none;
}

.bgvp-site .bgvp-hero-stage-nav[hidden] {
  display: none;
}

.bgvp-site .bgvp-hero-stage-dots {
  position: relative;
  display: flex;
}

.bgvp-site .bgvp-hero-stage-dot {
  display: grid;
  width: var(--bgvp-hero-stage-slot);
  height: var(--bgvp-hero-stage-dots-height);
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.bgvp-site .bgvp-hero-stage-dot::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--bgvp-hero-stage-dot);
  border-radius: 50%;
}

.bgvp-site .bgvp-hero-stage-dot:hover::before {
  background: var(--bgvp-hero-stage-dot-hover);
}

/* The thumb covers the dot on show. */
.bgvp-site .bgvp-hero-stage-dot[aria-current="true"]::before {
  opacity: 0;
}

.bgvp-site .bgvp-hero-stage-dot:focus-visible {
  outline: 2px solid var(--bgvp-hero-stage-accent);
  outline-offset: -5px;
}

.bgvp-site .bgvp-hero-stage-thumb {
  position: absolute;
  top: calc(50% - 3px);
  left: calc((var(--bgvp-hero-stage-slot) - var(--bgvp-hero-stage-thumb)) / 2);
  width: var(--bgvp-hero-stage-thumb);
  height: 6px;
  overflow: hidden;
  background: var(--bgvp-hero-stage-track);
  border-radius: 999px;
  pointer-events: none;
  transform: translate3d(calc(var(--hero-stage-index, 0) * var(--bgvp-hero-stage-slot)), 0, 0);
}

/* The fill slides in whole (translate draws sub-pixel smooth; a scaled edge steps pixel by pixel). */
.bgvp-site .bgvp-hero-stage-thumb > span {
  position: absolute;
  inset: 0;
  background: var(--bgvp-hero-stage-accent);
  border-radius: inherit;
  transform: translate3d(calc((var(--hero-stage-progress, 0) - 1) * 100%), 0, 0);
}

/* The pause control closes the capsule, set off by a short hairline. */
.bgvp-site .bgvp-hero-stage-toggle {
  position: relative;
  display: grid;
  width: var(--bgvp-hero-stage-slot);
  height: var(--bgvp-hero-stage-slot);
  place-items: center;
  padding: 0;
  color: var(--bgvp-hero-stage-ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Without the film the capsule keeps only the pause control, so the hairline and its gap follow the dots. */
.bgvp-site .bgvp-hero-stage-dots + .bgvp-hero-stage-toggle {
  margin-left: 0.4375rem;
}

.bgvp-site .bgvp-hero-stage-dots + .bgvp-hero-stage-toggle::before {
  position: absolute;
  top: calc(50% - 0.4375rem);
  left: -0.25rem;
  width: 1px;
  height: 0.875rem;
  content: "";
  background: var(--bgvp-hero-stage-rim);
}

.bgvp-site .bgvp-hero-stage-toggle[hidden] {
  display: none;
}

.bgvp-site .bgvp-hero-stage-toggle:hover {
  background: var(--bgvp-hero-stage-hover);
}

.bgvp-site .bgvp-hero-stage-toggle:focus-visible {
  outline: 2px solid var(--bgvp-hero-stage-accent);
  outline-offset: 1px;
}

.bgvp-site .bgvp-hero-stage-toggle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bgvp-site .bgvp-hero-stage-toggle .bgvp-hero-stage-icon-play {
  fill: currentColor;
  stroke: none;
}

.bgvp-site .bgvp-hero-stage-toggle[data-state="playing"] .bgvp-hero-stage-icon-play,
.bgvp-site .bgvp-hero-stage-toggle[data-state="paused"] .bgvp-hero-stage-icon-pause {
  display: none;
}

.bgvp-site .promise-bar {
  position: relative;
  z-index: 4;
  color: rgba(255, 255, 255, 0.92);
  background: #080d16;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.bgvp-site .promise-item {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--bgvp-space-3);
  padding: var(--bgvp-space-4);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.bgvp-site .promise-symbol {
  color: #76a7ff;
  font-size: var(--bgvp-type-metadata);
}

.bgvp-site .promise-item strong,
.bgvp-site .promise-item span {
  display: block;
}

.bgvp-site .promise-item strong {
  margin-bottom: var(--bgvp-space-1);
  font-size: var(--bgvp-type-control);
}

.bgvp-site .promise-item span {
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--bgvp-type-metadata);
}

.bgvp-site .section-space {
  padding-block: var(--bgvp-section-gap);
}

.bgvp-site .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bgvp-space-6);
  margin-bottom: var(--bgvp-space-6);
}

.bgvp-site .section-heading h2,
.bgvp-site .home-brand-heading h2 {
  margin: 0;
  font-size: var(--bgvp-type-page-title);
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-wrap: balance;
}

.bgvp-site .section-heading p {
  max-width: var(--bgvp-reading-measure);
  margin: var(--bgvp-space-3) 0 0;
  color: var(--bgvp-color-storefront-muted);
  line-height: 1.75;
}

.bgvp-site .text-link {
  display: inline-flex;
  min-height: var(--bgvp-compact-control-height);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--bgvp-space-2);
  color: var(--bgvp-color-brand-ink);
  font-size: var(--bgvp-type-metadata);
  font-weight: 750;
  text-decoration: none;
}

.bgvp-site .text-link:hover,
.bgvp-site .text-link:focus-visible {
  color: var(--bgvp-color-brand-blue);
}

.bgvp-site .home-brand-portfolio {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(72, 124, 224, 0.12), transparent 30rem),
    linear-gradient(180deg, #eef3fa 0%, #f8fafc 100%);
}

.bgvp-site .home-brand-portfolio::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45, 85, 151, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 85, 151, 0.04) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 72%);
  pointer-events: none;
}

.bgvp-site .home-brand-portfolio > .container {
  position: relative;
  z-index: 1;
}

.bgvp-site .home-brand-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.bgvp-site .home-brand-heading p {
  max-width: 34rem;
  margin: 0;
  color: var(--bgvp-color-storefront-muted);
  line-height: 1.85;
}

.bgvp-site .home-brand-layout {
  display: grid;
  gap: var(--bgvp-space-5);
}

.bgvp-site .home-primary-brand,
.bgvp-site .home-retail-brands {
  min-width: 0;
  border-radius: clamp(1.25rem, 2vw, 2rem);
}

.bgvp-site .home-primary-brand {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.65fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 3.25rem);
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(80, 137, 255, 0.42), transparent 22rem),
    linear-gradient(130deg, #07101f 0%, #0d1d3a 52%, #173875 100%);
  box-shadow: var(--bgvp-shadow-elevated);
}

.bgvp-site .home-primary-brand::before,
.bgvp-site .home-primary-brand::after {
  position: absolute;
  border: 1px solid rgba(141, 178, 255, 0.22);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.bgvp-site .home-primary-brand::before { top: -12rem; right: -7rem; width: 28rem; height: 28rem; }
.bgvp-site .home-primary-brand::after { right: 6rem; bottom: -16rem; width: 25rem; height: 25rem; }
.bgvp-site .home-primary-brand > * { position: relative; z-index: 1; }
.bgvp-site .home-primary-brand-copy { align-self: center; }

.bgvp-site .home-primary-brand-mark {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bgvp-space-2) var(--bgvp-space-4);
  width: fit-content;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: rgba(189, 211, 255, 0.78);
  font-size: var(--bgvp-type-micro);
  font-weight: 750;
  letter-spacing: 0.16em;
}

.bgvp-site .home-primary-brand-mark span + span {
  padding-left: var(--bgvp-space-4);
  border-left: 1px solid rgba(189, 211, 255, 0.38);
}

.bgvp-site .home-primary-brand .section-kicker { color: #9bbdff; }

.bgvp-site .home-primary-brand h3 {
  margin-bottom: var(--bgvp-space-4);
  font-size: clamp(3rem, 6.5vw, 5.3rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.bgvp-site .home-primary-brand p {
  max-width: 39rem;
  margin-bottom: var(--bgvp-space-5);
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.85;
}

.bgvp-site .home-primary-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bgvp-space-3);
}

.bgvp-site .home-primary-brand-service {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(174, 202, 255, 0.22);
}

.bgvp-site .home-primary-brand-service-label {
  margin-bottom: var(--bgvp-space-4);
  color: rgba(178, 204, 255, 0.72);
  font-size: var(--bgvp-type-micro);
  font-weight: 750;
  letter-spacing: 0.18em;
}

.bgvp-site .home-primary-brand-service ul,
.bgvp-site .home-retail-brands ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bgvp-site .home-primary-brand-service li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--bgvp-space-3);
  padding: var(--bgvp-space-4) 0;
  border-top: 1px solid rgba(174, 202, 255, 0.18);
}

.bgvp-site .home-primary-brand-service li > span {
  color: #76a8ff;
  font-size: var(--bgvp-type-micro);
  font-weight: 750;
}

.bgvp-site .home-primary-brand-service strong,
.bgvp-site .home-primary-brand-service small { display: block; }
.bgvp-site .home-primary-brand-service strong { margin-bottom: var(--bgvp-space-1); color: #fff; font-size: var(--bgvp-type-control); }
.bgvp-site .home-primary-brand-service small { color: rgba(255, 255, 255, 0.6); font-size: var(--bgvp-type-metadata); line-height: 1.5; }

.bgvp-site .home-retail-brands {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(183, 200, 224, 0.72);
  box-shadow: var(--bgvp-shadow-card);
  backdrop-filter: blur(10px);
}

.bgvp-site .home-retail-brands-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--bgvp-space-5);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bgvp-site .home-retail-brands :is(h2, h3) {
  margin: 0;
  font-size: var(--bgvp-type-section-title);
  font-weight: 820;
  letter-spacing: -0.04em;
}

.bgvp-site .home-retail-brands-count {
  display: flex;
  align-items: baseline;
  gap: var(--bgvp-space-2);
  color: #72809a;
}

.bgvp-site .home-retail-brands-count strong {
  color: #18396f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.9;
}

.bgvp-site .home-retail-brands-count span {
  font-size: var(--bgvp-type-micro);
  font-weight: 750;
  letter-spacing: 0.14em;
}

.bgvp-site .home-retail-brands ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr));
  gap: var(--bgvp-space-2);
}

.bgvp-site .home-retail-brands li { min-width: 0; }

.bgvp-site .home-retail-brand-item {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  min-height: 3.8rem;
  align-items: center;
  gap: var(--bgvp-space-2);
  padding: 0.75rem 0.85rem;
  color: #19365f;
  background: #f7f9fd;
  border: 1px solid transparent;
  border-radius: var(--bgvp-control-radius);
  font-size: var(--bgvp-type-metadata);
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bgvp-site .home-retail-brand-item.is-static { grid-template-columns: 1.8rem minmax(0, 1fr); color: #4f6079; }
.bgvp-site .home-retail-brand-number { color: #8a9bb5; font-size: var(--bgvp-type-micro); }
.bgvp-site .home-retail-brand-name { min-width: 0; overflow-wrap: anywhere; }
.bgvp-site .home-retail-brand-arrow { color: #6f96db; }

.bgvp-site a.home-retail-brand-item:hover,
.bgvp-site a.home-retail-brand-item:focus-visible {
  color: #174fa8;
  background: #edf4ff;
  border-color: #c9daf6;
  transform: translateY(-1px);
}

.bgvp-site .home-retail-brands-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--bgvp-space-5);
}

.bgvp-site .home-retail-brands-toggle {
  display: inline-flex;
  min-height: var(--bgvp-button-height);
  align-items: center;
  justify-content: center;
  gap: var(--bgvp-space-3);
  padding: 0.65rem 0.75rem 0.65rem 1.2rem;
  color: #1c4e9b;
  background: #fff;
  border: 1px solid #bdd0ee;
  border-radius: var(--bgvp-radius-pill);
  font-size: var(--bgvp-type-control);
  font-weight: 800;
}

.bgvp-site .home-retail-brands-toggle[hidden] { display: none; }
.bgvp-site .home-retail-brands-toggle:hover,
.bgvp-site .home-retail-brands-toggle:focus-visible { color: #fff; background: #245fb9; border-color: #245fb9; }

.bgvp-site .home-retail-brands-toggle-icon {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #245fb9;
  border-radius: 50%;
}

.bgvp-site .home-retail-brands-toggle:hover .home-retail-brands-toggle-icon,
.bgvp-site .home-retail-brands-toggle:focus-visible .home-retail-brands-toggle-icon { color: #245fb9; background: #fff; }

.bgvp-site .home-retail-brands-note {
  display: flex;
  gap: var(--bgvp-space-3);
  margin: var(--bgvp-space-6) 0 0;
  padding-top: var(--bgvp-space-5);
  color: var(--bgvp-color-storefront-muted);
  font-size: var(--bgvp-type-metadata);
  line-height: 1.7;
}

.bgvp-site .home-retail-brands-note > span { flex: 0 0 auto; color: #4f78c4; }

.bgvp-site .product-section {
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

@media (max-width: 991.98px) {

  .bgvp-site .home-brand-heading,
  .bgvp-site .home-primary-brand { grid-template-columns: 1fr; }
  .bgvp-site .home-brand-heading p { max-width: 48rem; }
  .bgvp-site .home-primary-brand-service { padding-top: var(--bgvp-space-5); padding-left: 0; border-top: 1px solid rgba(174, 202, 255, 0.22); border-left: 0; }
  .bgvp-site .home-primary-brand-service ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bgvp-space-4); }
}

@media (max-width: 767.98px) {
  .bgvp-site .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: var(--bgvp-space-6); }
  .bgvp-site .promise-item { min-height: 4.5rem; justify-content: flex-start; padding: var(--bgvp-space-3) var(--bgvp-space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
}

@media (max-width: 575.98px) {

  .bgvp-site .home-brand-heading { margin-bottom: var(--bgvp-space-5); }
  .bgvp-site .home-primary-brand,
  .bgvp-site .home-retail-brands { padding: var(--bgvp-space-5); border-radius: var(--bgvp-radius-card); }
  .bgvp-site .home-primary-brand { gap: var(--bgvp-space-5); }
  .bgvp-site .home-primary-brand-mark { margin-bottom: var(--bgvp-space-6); }
  .bgvp-site .home-primary-brand h3 { font-size: clamp(2.35rem, 14vw, 3.4rem); }
  .bgvp-site .home-primary-brand-actions .btn,
  .bgvp-site .home-retail-brands-toggle { width: 100%; }
  .bgvp-site .home-primary-brand-service ul { grid-template-columns: 1fr; gap: 0; }
  .bgvp-site .home-retail-brands-heading { align-items: flex-start; }
  .bgvp-site .home-retail-brands ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgvp-space-2); }
  .bgvp-site .home-retail-brand-item,
  .bgvp-site .home-retail-brand-item.is-static { grid-template-columns: 1.45rem minmax(0, 1fr); min-height: 3.6rem; gap: var(--bgvp-space-2); padding: 0.7rem 0.55rem; }
  .bgvp-site .home-retail-brand-arrow { display: none; }
}

@media (max-width: 359.98px) {
  .bgvp-site .home-retail-brands ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bgvp-site *,
  .bgvp-site *::before,
  .bgvp-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Compact homepage sections: reduce visual chrome, keep buttons and copy readable. */
.bgvp-site .section-heading {
  gap: var(--bgvp-space-4);
  margin-bottom: var(--bgvp-space-5);
}

.bgvp-site .home-primary-brand {
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.bgvp-site .home-primary-brand-mark {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.bgvp-site .home-primary-brand h3 {
  font-size: clamp(2.25rem, 4.5vw, 3.6rem);
  margin-bottom: 0.65rem;
}

.bgvp-site .home-primary-brand p {
  margin-bottom: 1rem;
  line-height: 1.65;
}

.bgvp-site .home-primary-brand-service {
  padding-left: clamp(0.9rem, 1.5vw, 1.25rem);
}

.bgvp-site .home-primary-brand-service li {
  padding-block: 0.75rem;
}

.bgvp-site .home-retail-brands {
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.bgvp-site .home-retail-brands-heading {
  margin-bottom: 1rem;
}

.bgvp-site .home-retail-brands-count strong {
  font-size: clamp(2rem, 3vw, 2.5rem);
}

.bgvp-site .home-retail-brand-item {
  min-height: 3.25rem;
  padding: 0.55rem 0.7rem;
}

.bgvp-site .home-retail-brands-note {
  margin-top: 1rem;
  padding-top: 0.75rem;
}

@media (max-width: 575.98px) {
  .bgvp-site .home-primary-brand,
  .bgvp-site .home-retail-brands {
    padding: 1rem;
  }

  .bgvp-site .home-primary-brand {
    gap: 1rem;
  }

  .bgvp-site .home-primary-brand h3 {
    font-size: clamp(2rem, 12vw, 2.8rem);
  }

  .bgvp-site .home-primary-brand-service {
    padding-top: 0.75rem;
  }

  .bgvp-site .home-retail-brand-item,
  .bgvp-site .home-retail-brand-item.is-static {
    min-height: 3rem;
    padding: 0.55rem 0.5rem;
  }
}

/* Issue #82: editorial homepage. The carousel is the single Hero image source;
   managed media remains optional and its empty state stays usable. */

.bgvp-site .promise-bar {
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-paper);
  border-block: 1px solid var(--bgvp-color-storefront-line);
}

.bgvp-site .promise-item {
  min-height: 4.8rem;
  border-color: var(--bgvp-color-storefront-line);
}

.bgvp-site .promise-symbol {
  color: var(--bgvp-color-brand-blue);
}

.bgvp-site .promise-item span {
  color: var(--bgvp-color-storefront-muted);
}

.bgvp-site .home-brand-portfolio,
.bgvp-site .product-section {
  background: var(--bgvp-color-storefront-canvas);
}

.bgvp-site .home-brand-portfolio {
  isolation: isolate;
}

.bgvp-site .home-brand-portfolio::before {
  display: none;
}

.bgvp-site .home-brand-heading,
.bgvp-site .home-brand-layout {
  position: relative;
  z-index: 1;
}

.bgvp-site .home-brand-technical-art {
  position: absolute;
  z-index: 0;
  top: clamp(1rem, 3vw, 3rem);
  right: max(0.5rem, var(--bgvp-page-gutter));
  width: min(50%, 42rem);
  margin: 0;
  pointer-events: none;
}

.bgvp-site .home-brand-technical-art img {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  object-position: right top;
  opacity: 0.16;
}

.bgvp-site .home-primary-brand {
  gap: clamp(1.25rem, 3vw, 3rem);
  color: var(--bgvp-color-brand-ink);
  background: var(--bgvp-color-paper-veil);
  border: 1px solid var(--bgvp-color-storefront-line);
  border-radius: 8px;
  box-shadow: none;
}

.bgvp-site .home-primary-brand::before,
.bgvp-site .home-primary-brand::after {
  display: none;
}

.bgvp-site .home-primary-brand-mark,
.bgvp-site .home-primary-brand .section-kicker,
.bgvp-site .home-primary-brand-service-label {
  color: var(--bgvp-color-brand-blue);
}

.bgvp-site .home-primary-brand-mark span + span {
  border-color: var(--bgvp-color-storefront-line);
}

.bgvp-site .home-primary-brand h3,
.bgvp-site .home-primary-brand-service strong {
  color: var(--bgvp-color-brand-ink);
}

.bgvp-site .home-primary-brand p,
.bgvp-site .home-primary-brand-service small {
  color: var(--bgvp-color-storefront-muted);
}

.bgvp-site .home-primary-brand-service {
  padding-left: clamp(1rem, 2vw, 2rem);
  border-color: var(--bgvp-color-storefront-line);
}

.bgvp-site .home-primary-brand-service li {
  border-color: var(--bgvp-color-storefront-line);
}

.bgvp-site .home-primary-brand-service li > span {
  color: var(--bgvp-color-brand-blue);
}

.bgvp-site .home-retail-brands {
  padding: clamp(1.25rem, 2vw, 2rem) 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bgvp-site .home-retail-brands ul {
  --home-retail-grid-columns: 5;
  grid-template-columns: repeat(var(--home-retail-grid-columns), minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--bgvp-color-storefront-line);
  border-left: 1px solid var(--bgvp-color-storefront-line);
  background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--bgvp-color-storefront-line) calc(100% - 1px));
  background-size: calc(100% / var(--home-retail-grid-columns)) 100%;
  background-repeat: repeat-x;
  box-shadow: inset 0 -1px 0 var(--bgvp-color-storefront-line);
}

.bgvp-site .home-retail-brands li {
  border-bottom: 1px solid var(--bgvp-color-storefront-line);
}

.bgvp-site .home-retail-brand-item,
.bgvp-site .home-retail-brand-item.is-static {
  min-height: 3.5rem;
  color: var(--bgvp-color-brand-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.bgvp-site a.home-retail-brand-item:hover,
.bgvp-site a.home-retail-brand-item:focus-visible {
  color: var(--bgvp-color-brand-blue);
  background: var(--bgvp-color-brand-blue-soft);
  border-color: var(--bgvp-color-storefront-line);
  transform: none;
}

.bgvp-site .home-retail-brands-toggle {
  border-radius: 6px;
}

.bgvp-site .product-section {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 991.98px) {

  .bgvp-site .home-retail-brands ul {
    --home-retail-grid-columns: 3;
  }

  .bgvp-site .home-brand-technical-art {
    top: 3rem;
    width: min(70%, 34rem);
  }

  .bgvp-site .home-primary-brand-service {
    padding-top: var(--bgvp-space-5);
    padding-left: 0;
    border-top: 1px solid var(--bgvp-color-storefront-line);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {

  .bgvp-site .home-retail-brands ul {
    --home-retail-grid-columns: 2;
  }
}

@media (max-width: 575.98px) {

  .bgvp-site .home-primary-brand-actions .btn {
    width: auto;
    min-width: 9rem;
    min-height: var(--bgvp-button-height);
    white-space: nowrap;
  }

  .bgvp-site .home-brand-technical-art {
    top: 7rem;
    right: 0;
    width: 85%;
  }

  .bgvp-site .home-brand-technical-art img {
    opacity: 0.12;
  }
}

@media (max-width: 359.98px) {

  .bgvp-site .home-retail-brands ul {
    --home-retail-grid-columns: 1;
  }
}