/* ===== Homepage (mockup 6A) ===== */
.bsx-eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4eee6;
  margin-bottom: 20px;
}
.bsx-eyebrow-dark { color: var(--bsx-mauve); }

/* gradient overlays: ux_banner's bg_overlay only takes flat colors, so the
   attr just creates the .overlay div and we paint it here (design 6A). */
.bsx-hero .overlay {
  /* design 6A: dark enough behind the left-aligned text to keep it readable
     over the bright window shot, clearing to the photo by ~74% */
  background: linear-gradient(90deg, rgba(20,17,14,.72) 0%, rgba(20,17,14,.5) 32%, rgba(20,17,14,.18) 56%, rgba(20,17,14,0) 74%) !important;
}
.bsx-cats .banner .overlay {
  background: linear-gradient(0deg, rgba(28,26,23,.4), rgba(28,26,23,0) 55%) !important;
}

/* hero text colors — .dark banner context repaints p to #f1f1f1, force design values */
.banner p.bsx-eyebrow { color: #f4eee6; }
.banner p.bsx-hero-p { color: #f2ece4; }

/* h1.: flatsome's .banner h1{font-size:3.5em} (=56px) beats a lone class */
.banner h1.bsx-hero-h {
  font-size: 66px;
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.005em;
}
.bsx-hero-h em { font-style: italic; color: #f0e2d8; }
.bsx-hero-p { color: #f2ece4; font-size: 16px; max-width: 420px; }

/* Hero CTAs. !important needed: .dark .button forces #fff text and
   .button.is-outline forces color:currentColor!important in flatsome.css. */
.bsx-btn-light.button {
  background: #fff;
  color: var(--bsx-ink) !important;
  border-radius: 8px;
}
.bsx-btn-light.button:hover {
  background: var(--bsx-cream);
  color: var(--bsx-ink) !important;
  box-shadow: none;
}
.bsx-btn-ghost.button {
  border: 1px solid rgba(255,255,255,.85);
  color: #fff !important;
  background: rgba(28,26,23,.25);
  border-radius: 8px;
  display: none; /* TEMP: NEW DROP hidden per 2026-07-09 request — delete this line to bring it back */
}
.bsx-btn-ghost.button:hover {
  background: rgba(28,26,23,.45);
  border-color: #fff;
}

.bsx-h2 { font-size: 34px; }
.bsx-cats .banner { border-radius: 12px; overflow: hidden; }
.bsx-cats h3 { color: #fff; font-size: 26px; margin: 0; }
.bsx-cats p { color: #f2ece4; font-size: 12px; letter-spacing: 0.04em; margin: 4px 0 0; }

.bsx-underline-link {
  font-weight: 600; font-size: 14px; color: var(--bsx-ink);
  border-bottom: 1px solid var(--bsx-ink); padding-bottom: 3px;
}
.bsx-underline-link:hover { color: var(--bsx-mauve); border-color: var(--bsx-mauve); }

@media (max-width: 549px) {
  .banner h1.bsx-hero-h { font-size: 38px; }
  .bsx-h2 { font-size: 26px; }
  /* design 6A mobile: text sits at the bottom, so the gradient darkens
     bottom-up instead of left-to-right */
  .bsx-hero .overlay {
    /* stops pulled higher than the design's (60%/55%) because our banner is
       taller and the text block sits at ~45-80% of it, not pinned to the foot */
    background: linear-gradient(0deg, rgba(28,26,23,.68) 0%, rgba(28,26,23,.52) 45%, rgba(28,26,23,.3) 75%, rgba(28,26,23,.08) 100%) !important;
  }
}