/* ==========================================================================
   भक्ति Vilas, home page art direction
   --------------------------------------------------------------------------
   Home only, loaded after site.css. The shared system (sections, display
   type, kicker, buttons, page-header band, all reveal motion) lives in
   site.css; this file holds only what the landing page itself needs.

   Hand-written on purpose. The Tailwind CDN only emits rules for classes
   present at its first scan, so nothing here may depend on a utility class.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */

.bv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bv-maroon-deep);
}
.bv-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  /* the source photo is cool and slightly flat; warm it toward the brand */
  filter: saturate(1.06) contrast(1.04);
}

/* Directional oxblood scrim rather than a flat black wash. The photograph
   keeps its warmth on the right, the type side goes properly dark on the
   left, and a floor gradient carries the eye into the next section. */
.bv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(42, 2, 8, 0.94) 0%, rgba(42, 2, 8, 0.34) 34%, rgba(42, 2, 8, 0) 62%),
    linear-gradient(105deg, rgba(42, 2, 8, 0.86) 0%, rgba(42, 2, 8, 0.5) 38%, rgba(60, 3, 12, 0.08) 72%);
}

.bv-hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px) clamp(56px, 8vh, 104px);
  color: var(--bv-cream);
}
.bv-hero__copy { max-width: min(760px, 92%); }
.bv-hero__lede { max-width: 44ch; }

.bv-hero h2.bv-dsp {
  margin: 18px 0 0;
  max-width: 15ch;   /* the headline wraps, the column does not shrink with it */
  text-shadow: 0 2px 26px rgba(42, 2, 8, 0.5);
}
.bv-hero__rule {
  width: 76px;
  height: 2px;
  margin: 26px 0;
  background: var(--bv-gold);
}
.bv-hero .bv-lede {
  margin: 0;
  color: rgba(255, 248, 245, 0.9);
  line-height: 1.7; /* light-on-dark needs the extra leading */
}

.bv-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Scroll cue. Sits on the hero floor, hidden once the user has moved. */
.bv-hero__cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: Manrope, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 248, 245, 0.55);
  transition: opacity 0.4s ease;
}
.bv-hero__cue i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255, 248, 245, 0.5), transparent);
}
body.bv-scrolled .bv-hero__cue { opacity: 0; }

@media (max-width: 720px) {
  .bv-hero__copy { max-width: none; }
  .bv-hero__cue { display: none; }
  /* the mobile bottom nav is fixed at 80px tall and was sitting on top of
     the hero CTAs, which are the whole point of the fold */
  .bv-hero__in { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .bv-hero { min-height: calc(100svh - 12px); }
}
/* --------------------------------------------------------------- manifesto */
/* The brand's thesis, moved up to second on the page. Drenched oxblood, the
   goldring mandala turned up from decorative to structural. The opening line
   is the largest type on the page after the hero; the argument below it sits
   in a single readable column. Copy is the user's, verbatim. */

.bv-manifesto {
  overflow: hidden;
  text-align: center;
}
.bv-manifesto .bv-sec__in { max-width: 980px; }

.bv-manifesto .bv-kicker { margin-bottom: 30px; }
.bv-manifesto .bv-kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.bv-manifesto__lead {
  margin: 0 auto;
  max-width: 17ch;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bv-cream);
  text-wrap: balance;
}
.bv-manifesto__lead em {
  font-style: italic;
  color: var(--bv-gold-soft);
}

.bv-manifesto__rule {
  width: 1px;
  height: 58px;
  margin: 40px auto;
  background: linear-gradient(to bottom, var(--bv-gold), transparent);
}

.bv-manifesto__body {
  margin: 0 auto;
  max-width: 68ch;
  font-family: Manrope, sans-serif;
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.78;
  color: rgba(255, 248, 245, 0.86);
  text-wrap: pretty;
}
.bv-manifesto__body p + p { margin-top: 1.4em; }
.bv-manifesto__body strong {
  font-weight: 600;
  color: var(--bv-cream);
}

/* the ring wants to be felt here, not hunted for */
.bv-manifesto .bv-goldring__a,
.bv-manifesto .bv-goldring__b { opacity: 0.17; }
.bv-manifesto .bv-goldring svg { stroke-width: 0.6; }

/* ------------------------------------------------------------- two paths */

.bv-paths__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.bv-paths__head .bv-dsp { color: var(--bv-maroon); }
.bv-paths__head p {
  margin: 0;
  max-width: 34ch;
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bv-muted);
}

.bv-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.bv-path {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--bv-line);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.bv-path:hover {
  transform: translateY(-5px);
  border-color: rgba(60, 3, 12, 0.24);
  box-shadow: 0 30px 60px -34px rgba(42, 2, 8, 0.55);
}

.bv-path__media {
  position: relative;
  height: clamp(240px, 30vw, 330px);
  overflow: hidden;
  background: var(--bv-cream-3);
}
.bv-path__media img {
  width: 100%;
  height: 118%;      /* headroom for the scroll parallax */
  object-fit: cover;
  display: block;
  will-change: transform;
}
.bv-path:hover .bv-path__media img { transform: scale(1.04); }
.bv-path__media img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

/* the name of the path, set into the photograph */
.bv-path__label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px 9px 13px;
  border-radius: 999px;
  background: rgba(42, 2, 8, 0.82);
  color: var(--bv-cream);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 1.06rem;
}
.bv-path__label svg { width: 19px; height: 19px; color: var(--bv-gold); }
.bv-path__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(42, 2, 8, 0.55), transparent 46%);
}

.bv-path__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(24px, 2.6vw, 34px);
}
.bv-path__body p {
  margin: 0 0 24px;
  font-family: Manrope, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4a3b38;
}
.bv-path__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 4px;
  background: none;
  border: 0;
  border-bottom: 2px solid rgba(60, 3, 12, 0.22);
  font-family: Manrope, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bv-maroon);
  cursor: pointer;
  transition: gap 0.24s ease, border-color 0.24s ease;
}
.bv-path__more:hover { gap: 15px; border-color: var(--bv-maroon); }
.bv-path__more:focus-visible { outline: 2px solid var(--bv-maroon); outline-offset: 4px; }
.bv-path__more svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- why band */
/* Replaces the four identical bordered boxes. Asymmetric: a standing
   statement on the left, the four claims on the right as a hairline-ruled
   list with the first one carrying more weight. No repeated card, no icon
   above every heading. */

.bv-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
/* the standing statement holds its position while the claims scroll past it,
   which is what earns the asymmetry instead of leaving a void on the left */
.bv-why__stmt {
  position: sticky;
  top: 116px;
}
.bv-why__stmt .bv-kicker { margin-bottom: 24px; }
.bv-why__stmt .bv-dsp { color: var(--bv-cream); }
.bv-why__stmt p {
  margin: 26px 0 0;
  max-width: 38ch;
  font-family: Manrope, sans-serif;
  font-size: 1.04rem;
  line-height: 1.72;
  color: rgba(255, 248, 245, 0.72);
}

.bv-why__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 248, 245, 0.16);
}
.bv-why__item {
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid rgba(255, 248, 245, 0.16);
}
.bv-why__item h3 {
  margin: 0 0 9px;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bv-cream);
}
.bv-why__item p {
  margin: 0;
  max-width: 54ch;
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
  color: rgba(255, 248, 245, 0.7);
}
/* the lead claim gets the weight, the rest support it */
.bv-why__item--lead h3 {
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  color: var(--bv-gold-soft);
}
.bv-why__item--lead p { color: rgba(255, 248, 245, 0.82); }

@media (max-width: 900px) {
  .bv-why__grid { grid-template-columns: 1fr; }
  .bv-why__stmt { position: static; }
}

/* --------------------------------------------------- launching soon, home */
/* The shared .bv-soon cards are reused verbatim so the launch sheet keeps
   working; this only turns up their presence on the home page. */

.bv-soonwrap .bv-soon { gap: clamp(16px, 1.8vw, 22px); }
.bv-soonwrap .bv-soon__card {
  padding: 28px 26px 26px;
  border-radius: 20px;
}
.bv-soonwrap .bv-soon__mark {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--bv-maroon);
  border-color: transparent;
}
.bv-soonwrap .bv-soon__mark svg { width: 30px; height: 30px; }
.bv-soonwrap .bv-soon__mark svg [fill="#3c030c"] { fill: var(--bv-gold); }
.bv-soonwrap .bv-soon__mark svg { stroke: var(--bv-cream); }
.bv-soonwrap .bv-soon__card:hover .bv-soon__mark { background: var(--bv-maroon-deep); }
.bv-soonwrap .bv-soon__card b { font-size: 1.3rem; }
.bv-soonwrap .bv-soon__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -28px rgba(42, 2, 8, 0.5);
}

.bv-soonwrap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.bv-soonwrap__head .bv-dsp { color: var(--bv-maroon); }
.bv-soonwrap__head p {
  margin: 0;
  max-width: 36ch;
  font-family: Manrope, sans-serif;
  color: var(--bv-muted);
  line-height: 1.6;
}
/* The section header now lives in the page, not in the mounted markup.
   mountLaunches() writes its heading row with an inline display:flex, and an
   inline style outranks any selector, so this needs !important to win. */
.bv-soonwrap .bv > div:first-child { display: none !important; }

/* -------------------------------------------------------------- belonging */

.bv-belong {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 66vh, 720px);
}
.bv-belong__media {
  position: relative;
  overflow: hidden;
  background: var(--bv-cream-3);
}
.bv-belong__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bv-belong__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 92px);
  background: var(--bv-maroon);
  color: var(--bv-cream);
}
.bv-belong__body .bv-dsp { color: var(--bv-cream); }
.bv-belong__body p {
  margin: 28px 0 0;
  max-width: 42ch;
  font-family: Manrope, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.75;
  color: rgba(255, 248, 245, 0.82);
}
.bv-belong__body .bv-cta { margin-top: 36px; align-self: flex-start; }

@media (max-width: 860px) {
  .bv-belong { grid-template-columns: 1fr; }
  .bv-belong__media { min-height: 300px; }
}

/* ------------------------------------------------------------------ stats */

/* One ruled band, not four cards. The numbers carry the section; the rules
   only separate them. */
.bv-hstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.bv-hstat {
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
  text-align: center;
  border-left: 1px solid rgba(255, 248, 245, 0.16);
}
.bv-hstat:first-child { border-left: 0; }
@media (max-width: 800px) {
  .bv-hstat:nth-child(odd) { border-left: 0; }
  .bv-hstat:nth-child(n+3) { border-top: 1px solid rgba(255, 248, 245, 0.16); }
}
.bv-hstat__n {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(3rem, 5.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bv-gold);
  font-variant-numeric: tabular-nums;
}
.bv-hstat__l {
  margin-top: 14px;
  font-family: Manrope, sans-serif;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255, 248, 245, 0.72);
}

/* ------------------------------------------------------------------ quote */

.bv-quote {
  text-align: center;
  overflow: hidden;
  /* the oversized quote mark adds visual weight at the top, so symmetric
     padding reads as a dead zone underneath. Trim the bottom to match. */
  padding-bottom: clamp(52px, 6vw, 88px);
}
.bv-quote .bv-sec__in { max-width: 900px; }
.bv-quote__mark {
  display: block;
  margin: 0 auto 6px;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 0.7;
  color: rgba(60, 3, 12, 0.16);
}
.bv-quote blockquote {
  margin: 0;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.65rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--bv-maroon);
  text-wrap: balance;
}
.bv-quote__by {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bv-muted);
}
.bv-quote__by::before,
.bv-quote__by::after {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(60, 3, 12, 0.28);
}

/* ================================================================= motion */
/* Keyframes and the .bv-rv reveal system live in site.css. This is only the
   hero's own load choreography, staggered by role. */

/* hero: one orchestrated load, staggered by role rather than by section */
.bv-hero__copy > *  { animation: bvRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.bv-hero .bv-kicker { animation-delay: 0.10s; }
.bv-hero h2.bv-dsp  { animation-delay: 0.20s; }
.bv-hero__rule      { animation: bvGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
                      transform-origin: left center; }
.bv-hero__lede      { animation-delay: 0.34s; }
.bv-hero__cta       { animation-delay: 0.46s; }
.bv-hero__media     { animation: bvFade 1.5s ease both; }
.bv-hero__cue       { animation: bvFade 1s ease 1.1s both; }

@media (prefers-reduced-motion: reduce) {
  .bv-hero__copy > *,
  .bv-hero__rule,
  .bv-hero__media,
  .bv-hero__cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bv-path__media img,
  .bv-path { transition: none !important; }
}