/* =========================================================================
   V8 INNER PAGES — shared components
   Built on the v1 design system (tokens.css / base.css / folds.css). This
   file adds what that system doesn't already have and multiple inner pages
   share: the breadcrumb, the hero banner, and the About-style narrative
   layout. Everything else (.numbers-tag, .btn, .advantage/.adv row, the
   .call consultation band, the whole header and footer) is the shared
   folds.css component, unmodified.
   ========================================================================= */

/* --- breadcrumb ----------------------------------------------------------- */
.vbs-crumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}
.vbs-crumb a { color: var(--ink-mid); text-decoration: none; }
.vbs-crumb a:hover { color: var(--ink); }
.vbs-crumb span[aria-hidden] { color: var(--ink-quiet); }
.vbs-crumb b { color: var(--ink); font-weight: 600; }

/* --- hero ------------------------------------------------------------------
   Full-bleed studio photograph, dark from the ground up so the header
   (transparent until scrolled) and the title both stay legible over any
   crop of the image. */
.vbs-hero {
  position: relative;
  padding: clamp(9rem, 20vw, 13rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--void);
}
.vbs-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vbs-hero-plate img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.vbs-hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--void-rgb), 0.55) 0%, rgba(var(--void-rgb), 0.72) 55%, var(--void) 100%),
    linear-gradient(90deg, rgba(var(--void-rgb), 0.55) 0%, transparent 55%);
}
.vbs-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
}
/* .vbs-hero-inner is a plain block, not a flex column, so .numbers-tag's own
   align-self: flex-start (folds.css) never engages here — without an
   explicit width the pill defaults to block and spans the full column,
   reading as a solid gold bar rather than a chip. Forced to content width
   directly, so this can't recur on any future inner-page hero. */
.vbs-hero .numbers-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.vbs-hero-h {
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  max-width: 16ch;
  font-family: var(--font-poster);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.vbs-hero-lead {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-mid);
}
.vbs-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* --- about / narrative ------------------------------------------------------ */
.vbs-about {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: var(--void);
}
.vbs-about-inner {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.vbs-about-title { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.vbs-about-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.vbs-about-body { display: flex; flex-direction: column; gap: 1.25rem; }
.vbs-about-body p { margin: 0; font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-mid); }
.vbs-about-body p:first-child { color: var(--ink); font-size: 1.2rem; }

@media (max-width: 900px) {
  .vbs-about-inner { grid-template-columns: minmax(0, 1fr); }
}

/* The consultation band is the homepage's own .call / #demo component,
   reused as-is (folds.css) — every inner page now ends on it verbatim,
   so there is no page-specific consult/form CSS here any more. */