/* ---------------------------------------------------------------------------
   Beyond Fiction redesign system. Self-contained: every selector is prefixed
   .bf-* so nothing here can leak into the Webflow template styles used by
   the rest of the site. Palette is taken from the cream + sage reference
   background. Used by the homepage (hero / video / domains / team teaser)
   and by /team (team details / founder / resource persons).
   --------------------------------------------------------------------------- */

/* Thin scroll-progress hairline — global, so it lives outside .bf-top and
   uses its own hardcoded brand colors rather than inheriting scoped vars. */
.bf-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #6F7F67, #C6A15B);
  z-index: 999;
  transition: width 0.1s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bf-scroll-progress { transition: none; }
}

.bf-top {
  --bf-cream: #F6F1E7;
  --bf-cream-soft: #FBF8F1;
  --bf-beige: #EFE8DA;
  --bf-sage: #6F7F67;
  --bf-green: #24382B;
  --bf-green-hover: #16261B;
  --bf-ink: #16303C;
  --bf-body: #6A7570;
  --bf-gold: #C6A15B;
  --bf-line: #DED4C0;
  --bf-sage-light: #7E9273;

  position: relative;
  background-color: var(--bf-cream);
  background-image: url("/home-bg.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-bottom: 5rem;
  overflow: hidden;
}
/* /team has no Hero above it to clear the template's absolute-positioned
   navbar (see .bf-hero's own top padding for the same 44px bar + 69px nav
   math) — .bf-top-team adds that clearance for pages that open straight on
   Founder/Resource Persons content. */
.bf-top-team { padding-top: 9rem; }
.bf-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Decorative dot grids, echoing the reference layout */
.bf-dots {
  position: absolute;
  width: 74px;
  height: 74px;
  background-image: radial-gradient(var(--bf-line) 1.6px, transparent 1.6px);
  background-size: 13px 13px;
  opacity: 0.75;
  pointer-events: none;
  animation: bf-drift 11s ease-in-out infinite;
}
.bf-dots.is-left { top: 130px; left: 28px; }
.bf-dots.is-right { top: 40px; right: 30px; animation-delay: -5.5s; }
@keyframes bf-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* --- Navbar --------------------------------------------------------------
   The shared Webflow navbar is position:absolute and was styled white for the
   old dark hero. .bf-nav-light is added to the navbar in index.html only, so
   these rules never touch the navbar on any other page. */
.bf-nav-light .menu-text {
  color: #16303C;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
}
/* Homepage header carries no logo — the menu takes its place on the left and
   the emblem lives in the hero instead. .navbar-wrapper is space-between, so
   removing the brand pushes the menu to the far left on its own. */
.bf-nav-light .brand-logo-link { display: none; }
/* The Webflow nav container is 1310px/15px padding while the page content is
   1240px/2rem, which left the menu sitting ~30px further left than the hero.
   Match it so "Home" lines up with the eyebrow pill and heading below. */
.bf-nav-light .container {
  max-width: 1240px;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (max-width: 991px) {
  /* Collapsed nav: the menu becomes an overlay behind the hamburger, so the
     logo comes back on the left (light-background version) and the hamburger
     sits on the right. */
  .bf-nav-light .brand-logo-link { display: block; }
  .bf-nav-light .navbar-wrapper { justify-content: space-between; align-items: center; }
  .bf-nav-light .brand-image { height: 30px; width: auto; }
  /* The collapsed dropdown panel has a black background (Webflow default),
     but .menu-text above is forced dark for the light desktop bar — override
     back to white here so the links are readable on that black panel. */
  .bf-nav-light .nav-menu-wrap .menu-text { color: #FFFFFF; }
}
/* Menu icon. The template's hamburger was two lazy-loaded CDN SVGs that never
   fetched, so they collapsed to 0 height and the button was invisible. This is
   a self-contained inline icon instead — always visible, dark on the cream nav. */
.bf-nav-light .hamburger-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}
.bf-nav-light .bf-burger {
  display: block;
  width: 28px;
  height: 28px;
  color: #16303C;
  /* Icon is decorative only — pointer-events:none makes every tap in the 30px
     button area fall straight through to .menu-button (which Webflow's nav
     script is bound to), instead of depending on hitting the stroked lines of
     an SVG path with fill:none, whose gaps don't register a hit. */
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .bf-nav-light .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.bf-nav-light .nav-button-wrap .primary-button,
.bf-nav-light .nav-button-wrap .primary-bg {
  background-color: #24382B;
}
.bf-nav-light .nav-button-wrap .primary-btn-text { color: #FFFFFF; }
.bf-nav-light .nav-button-wrap .primary-btn-icon { filter: brightness(0) invert(1); }

/* --- Hero -----------------------------------------------------------------
   Top padding clears the announcement bar (44px) + absolute navbar (69px).
   min-height fills the first screen so the next section ("Why Beyond
   Fiction?") never peeks into view on load — matches that section's own
   100vh treatment. flex + justify-content:center then re-balances the
   content vertically inside that taller box instead of leaving it pinned
   to the top with dead space below on shorter viewports. flex-direction:
   column keeps the cross axis (horizontal) on stretch, so the grid child
   still gets its normal full-width/centered layout. */
.bf-hero {
  padding: 8rem 0 1.5rem;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bf-hero-grid {
  display: grid;
  /* Left column pinned to a fixed width instead of an fr share: its own
     copy caps out at 27rem (432px) anyway, so anything wider is wasted,
     and pinning it (rather than a fr ratio, which only handed the right
     column a little extra and still left .bf-hero-visual's max-width
     capped below its own limit) hands ALL the remaining space to the
     image column so it can actually grow to the size set below. */
  grid-template-columns: 380px 1fr;
  gap: 3.5rem;
  /* stretch (not start): both columns become the same height as the taller
     one (the left column's text stack), which is what lets .bf-hero-btns's
     margin-top:auto below push the buttons down to line up with the
     bottom of the left column's paragraph, instead of floating high with
     dead space beneath them. */
  align-items: stretch;
}
.bf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem 0.8rem 0.6rem;
  border-radius: 100px;
  background-color: var(--bf-sage-light);
  font-family: "Inter Tight", sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  /* Now that the left column is pinned to a fixed 380px (see .bf-hero-grid)
     to free up room for the bigger hero image, that column is narrower
     than this badge's text naturally needs, so without this it wraps to
     two lines. nowrap keeps it on one line, overflowing slightly past the
     column into the gap — safe, since the right column's own content is
     centered well clear of that space. Reset back to wrapping below
     767px, where the pill is meant to wrap. */
  white-space: nowrap;
}
.bf-eyebrow-logo {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  background-color: #FFFFFF;
}
.bf-hero-headrow {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.bf-hero-emblem {
  flex: none;
  width: 118px;
  height: 118px;
  object-fit: contain;
  border-radius: 50%;
}
.bf-hero-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--bf-ink);
  text-transform: none;
  text-align: left;
}
.bf-hero-tagline {
  margin: 1rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #2F4A45;
}
.bf-hero-copy {
  max-width: 27rem;
  margin: 1rem 0 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bf-body);
  text-align: left;
}

/* Staggered entry — three distinct moves instead of one repeated fade:
   badge pops in with a soft overshoot, the emblem spins in while the
   heading rises right behind it, then the tagline/copy settle in last. */
@keyframes bf-badge-pop {
  0%   { opacity: 0; transform: scale(0.8) translateY(10px); }
  65%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bf-logo-spin-in {
  from { opacity: 0; transform: scale(0.55) rotate(-28deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes bf-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* These sit invisible (in their keyframes' "from" pose) until the preloader
   script adds .bf-preloader-done to <html> — otherwise, on a fast/cached
   load, the whole sequence below can run and finish while still hidden
   behind the black preloader overlay, so it's never actually seen. Gating
   the animation start on that class means the entrance always plays the
   instant the preloader lifts, every time. */
.bf-eyebrow { opacity: 0; transform: scale(0.8) translateY(10px); }
.bf-hero-emblem { opacity: 0; transform: scale(0.55) rotate(-28deg); }
.bf-hero-line { display: inline-block; opacity: 0; transform: translateY(18px); }
.bf-hero-tagline { opacity: 0; transform: translateY(18px); }
.bf-hero-copy { opacity: 0; transform: translateY(18px); }
.bf-hero-script { opacity: 0; transform: translateY(18px); }
.bf-hero-script-rule { transform-origin: left center; opacity: 0; transform: scaleX(0); }
.bf-hero-visual { opacity: 0; transform: scale(0.94); }
.bf-hero-btns { opacity: 0; transform: translateY(18px); }

html.bf-preloader-done .bf-eyebrow {
  animation: bf-badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}
html.bf-preloader-done .bf-hero-emblem {
  animation: bf-logo-spin-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}
html.bf-preloader-done .bf-hero-line {
  animation: bf-fade-up 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
html.bf-preloader-done .bf-hero-line:nth-of-type(1) { animation-delay: 0.36s; }
html.bf-preloader-done .bf-hero-line:nth-of-type(2) { animation-delay: 0.46s; }
html.bf-preloader-done .bf-hero-line:nth-of-type(3) { animation-delay: 0.56s; }
html.bf-preloader-done .bf-hero-tagline {
  animation: bf-fade-up 0.65s cubic-bezier(0.16, 0.84, 0.44, 1) 0.7s both;
}
html.bf-preloader-done .bf-hero-copy {
  animation: bf-fade-up 0.65s cubic-bezier(0.16, 0.84, 0.44, 1) 0.78s both;
}
/* Right column carries the sequence on: caption -> underline draws in ->
   image scales up into place -> buttons settle last. The entrance scale
   lives on the .bf-hero-visual wrapper so the inner <img> is free to run
   its own separate, infinite float loop without the two transforms
   fighting over the same property. */
@keyframes bf-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bf-rule-draw {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes bf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
html.bf-preloader-done .bf-hero-script {
  animation: bf-fade-up 0.65s cubic-bezier(0.16, 0.84, 0.44, 1) 0.3s both;
}
html.bf-preloader-done .bf-hero-script-rule {
  animation: bf-rule-draw 0.5s ease-out 0.5s both;
}
html.bf-preloader-done .bf-hero-visual {
  animation: bf-scale-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
.bf-hero-ring {
  animation: bf-float 5.5s ease-in-out 1.2s infinite;
}
html.bf-preloader-done .bf-hero-btns {
  animation: bf-fade-up 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.95s both;
}
@media screen and (max-width: 767px) {
  .bf-hero-ring { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-eyebrow,
  .bf-hero-emblem,
  .bf-hero-line,
  .bf-hero-tagline,
  .bf-hero-copy,
  .bf-hero-script,
  .bf-hero-script-rule,
  .bf-hero-visual,
  .bf-hero-btns {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .bf-hero-ring,
  .bf-dots {
    animation: none;
  }
}
.bf-hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  /* Pushes just this row to the bottom of .bf-hero-right (now stretched to
     match the left column's height) instead of a fixed gap, so the buttons
     land level with the end of the left column's paragraph rather than
     floating above a patch of empty space. */
  margin-top: auto;
}
.bf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border-radius: 100px;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .22s ease, color .22s ease, transform .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}
.bf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(36, 56, 43, 0.16);
}
.bf-btn span { transition: transform .22s ease; }
.bf-btn:hover span { transform: translateX(4px); }
.bf-btn-primary {
  background-color: var(--bf-green);
  color: #FFFFFF;
}
.bf-btn-primary:hover { background-color: var(--bf-green-hover); }
.bf-btn-ghost {
  background-color: #FFFFFF;
  border: 1px solid var(--bf-line);
  color: var(--bf-ink);
}
.bf-btn-ghost:hover { border-color: var(--bf-green); }

.bf-hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 0.3rem;
}
.bf-hero-script {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--bf-ink);
  line-height: 1;
}
.bf-hero-script-rule {
  width: 120px;
  height: 8px;
  margin: 0.5rem 0 1.5rem;
  color: var(--bf-gold);
}
.bf-hero-visual {
  width: 100%;
  /* Column is 740px wide at the container's own 1240px max-width (380px
     left + 3.5rem gap leaves the rest to this column) — capped a little
     above that as headroom, so the column itself is what actually limits
     the size, not this number. */
  max-width: 760px;
  display: block;
}
.bf-hero-ring {
  width: 100%;
  height: auto;
  display: block;
}

/* project-v1 ("Why Beyond Fiction") carries the Webflow template's generic
   .section class, which pads top/bottom by ~140px — huge dead space right
   after the already-compact Hero. Override down to match the rest of the
   .bf-* rhythm (a small top gap, since the section above already has its
   own bottom padding). */
.section.project-v1 { padding-top: 1rem; padding-bottom: 2rem; }
/* The template ships .why-card with no hover state at all — add one. */
.why-card {
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .32s ease;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(36, 56, 43, 0.12);
}
.why-card:hover .why-card-arrow { transform: translateX(4px); }
.why-card-arrow { display: inline-block; transition: transform .22s ease; }

/* Generic scroll-reveal: add class="bf-reveal" to any element and the
   IntersectionObserver near the end of the page adds .is-visible the first
   time it scrolls into view. Used here on the "Why Beyond Fiction" heading
   and its 4 cards (staggered), independent of Webflow's own IX system. */
.bf-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.bf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Same idea, but the entering element scales up instead of rising —
   used for media (video, hero-style imagery) rather than text/cards. */
.bf-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.bf-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}
.bf-sec-sub.bf-reveal { transition-delay: 0.12s; }
.why-cards-wrap .why-card.bf-reveal:nth-of-type(1) { transition-delay: 0s; }
.why-cards-wrap .why-card.bf-reveal:nth-of-type(2) { transition-delay: 0.1s; }
.why-cards-wrap .why-card.bf-reveal:nth-of-type(3) { transition-delay: 0.2s; }
.why-cards-wrap .why-card.bf-reveal:nth-of-type(4) { transition-delay: 0.3s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(1) { transition-delay: 0s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(2) { transition-delay: 0.06s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(3) { transition-delay: 0.12s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(4) { transition-delay: 0.18s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(5) { transition-delay: 0.24s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(6) { transition-delay: 0.3s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(7) { transition-delay: 0.36s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(8) { transition-delay: 0.42s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(9) { transition-delay: 0.48s; }
.bf-domain-grid .bf-domain-card.bf-reveal:nth-of-type(10) { transition-delay: 0.54s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(1) { transition-delay: 0s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(2) { transition-delay: 0.05s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(3) { transition-delay: 0.1s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(4) { transition-delay: 0.15s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(5) { transition-delay: 0.2s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(6) { transition-delay: 0.25s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(7) { transition-delay: 0.3s; }
.bf-faq-list .bf-faq-item.bf-reveal:nth-of-type(8) { transition-delay: 0.35s; }
.bf-resource-grid .bf-resource-card.bf-reveal:nth-of-type(1) { transition-delay: 0s; }
.bf-resource-grid .bf-resource-card.bf-reveal:nth-of-type(2) { transition-delay: 0.08s; }
.bf-resource-grid .bf-resource-card.bf-reveal:nth-of-type(3) { transition-delay: 0.16s; }
.bf-resource-grid .bf-resource-card.bf-reveal:nth-of-type(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .bf-reveal, .bf-reveal-scale { opacity: 1; transform: none; transition: none; }
}

/* --- Video card ----------------------------------------------------------- */
/* position:relative scopes its .bf-dots.is-right decoration to this
   section's own box instead of .bf-top's — needed because that dot uses a
   hardcoded pixel offset from the nearest positioned ancestor, and this
   section no longer sits at a fixed distance from .bf-top's own top edge
   now that it's been moved right under the hero. */
.bf-video { position: relative; padding: 1rem 0 3.5rem; }
.bf-video-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 2rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(222, 212, 192, 0.7);
  backdrop-filter: blur(4px);
}
.bf-kicker {
  font-family: "Inter Tight", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A9490;
}
.bf-video-title {
  margin: 0.7rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--bf-ink);
  text-transform: none;
}
.bf-video-copy {
  margin: 0.75rem 0 0;
  max-width: 22rem;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--bf-body);
}
.bf-video-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--bf-line);
}
.bf-video-rule::before,
.bf-video-rule::after {
  content: "";
  height: 1px;
  background-color: currentColor;
  flex: 1;
}
.bf-video-rule i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--bf-line);
  flex: none;
}
.bf-video-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  background-color: #0D1512;
}
.bf-video-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Domains -------------------------------------------------------------- */
.bf-domains { padding: 4rem 0 2rem; }
.bf-sec-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.bf-sec-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--bf-ink);
  text-align: center;
  text-transform: none;
  line-height: 1.15;
}
.bf-flourish {
  flex: none;
  width: 150px;
  height: 12px;
  color: #B9AE97;
}
.bf-sec-sub {
  margin: 0.6rem 0 0;
  text-align: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.875rem;
  color: var(--bf-body);
}
.bf-domain-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 3.2rem;
}
.bf-domain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.85rem 1.4rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(222, 212, 192, 0.65);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bf-domain-card:hover {
  transform: translateY(-5px);
  border-color: var(--bf-sage);
  box-shadow: 0 14px 30px rgba(36, 56, 43, 0.09);
}
.bf-domain-thumb {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: #0C1116;
}
.bf-domain-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bf-domain-card:hover .bf-domain-thumb img { transform: scale(1.05); }
.bf-domain-badge { transition: transform .3s ease; }
.bf-domain-card:hover .bf-domain-badge { transform: scale(1.08); }
.bf-domain-badge {
  position: absolute;
  top: -16px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid rgba(222, 212, 192, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(36, 56, 43, 0.08);
}
.bf-domain-badge svg { width: 19px; height: 19px; }
.bf-domain-name {
  margin-top: 0.9rem;
  text-align: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bf-ink);
}

/* --- Founder / Team Details ------------------------------------------------ */
.bf-founder { padding: 1rem 0 2rem; }
.bf-founder-card {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 2.2rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(222, 212, 192, 0.65);
}
/* Fixed box (not a max-width/aspect-ratio guess) so the photo renders at a
   known, compact size instead of stretching to fill the grid column. */
.bf-founder-photo {
  width: 340px;
  height: 380px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(222, 212, 192, 0.8);
  box-shadow: 0 10px 26px rgba(36, 56, 43, 0.1);
}
.bf-founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bf-founder-role {
  display: inline-block;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-sage);
}
.bf-founder-name {
  margin: 0.5rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--bf-ink);
  text-transform: none;
}
.bf-founder-bio {
  margin: 0.9rem 0 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--bf-body);
}

/* --- Resource Persons ------------------------------------------------------ */
.bf-resources { padding: 1rem 0 2rem; }
.bf-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 2.4rem;
}
.bf-resource-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.7rem 1rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px dashed rgba(222, 212, 192, 0.9);
  text-align: center;
}
.bf-resource-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #EFE8DA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-sage);
}
.bf-resource-avatar svg { width: 24px; height: 24px; }
.bf-resource-name {
  margin-top: 0.85rem;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bf-ink);
}
.bf-resource-role {
  margin-top: 0.2rem;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.75rem;
  color: var(--bf-body);
}

/* --- Team page teaser (Home page only — full bio lives on /team) ---------- */
.bf-team-teaser { padding: 1rem 0 2rem; }
.bf-team-teaser-btn {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

/* --- FAQ -------------------------------------------------------------------
   Sits outside .bf-top (it lives among the plain Webflow-template sections),
   so it declares its own copy of the palette tokens it needs rather than
   relying on inheriting .bf-top's. */
.bf-faq {
  --bf-cream: #F6F1E7;
  --bf-ink: #16303C;
  --bf-body: #6A7570;
  --bf-line: #DED4C0;
  --bf-sage: #6F7F67;
  background-color: var(--bf-cream);
  padding: 4.5rem 0;
}
.bf-faq-list {
  max-width: 46rem;
  margin: 2.6rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.bf-faq-item {
  border-radius: 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--bf-line);
  overflow: hidden;
}
.bf-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: "Inter Tight", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bf-ink);
}
.bf-faq-q::-webkit-details-marker { display: none; }
.bf-faq-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--bf-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-sage);
}
.bf-faq-icon::before {
  content: "+";
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}
.bf-faq-item[open] .bf-faq-icon::before { content: "\2013"; }
.bf-faq-a { padding: 0 1.4rem 1.3rem; }
.bf-faq-p {
  margin: 0.8rem 0 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--bf-body);
}
.bf-faq-p:first-child { margin-top: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .bf-domain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-flourish { width: 90px; }
}
@media screen and (max-width: 900px) {
  .bf-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .bf-hero-right { order: 2; }
  .bf-hero-visual { max-width: 420px; margin: 0 auto; }
  /* Below the two-column breakpoint, the left column's content (logo,
     heading, tagline, copy) switches from the desktop's left-aligned
     text-next-to-badge layout to full-width and centered — logo stacks
     above the heading instead of sitting beside it. */
  .bf-hero-headrow {
    flex-direction: column;
    justify-content: center;
  }
  .bf-hero-title,
  .bf-hero-tagline {
    text-align: center;
  }
  .bf-hero-copy {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .bf-video-card { grid-template-columns: 1fr; }
  .bf-video-media { order: -1; }
  .bf-sec-head h2 { font-size: 2rem; }
  .bf-flourish { display: none; }
  .bf-founder-card { grid-template-columns: 1fr; }
  .bf-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .bf-container { padding: 0 1.25rem; }
  .bf-top { padding-bottom: 3rem; }
  .bf-top-team { padding-top: 7rem; }
  .bf-hero { padding: 7rem 0 1.5rem; }
  .bf-eyebrow-logo { width: 20px; height: 20px; }
  .bf-hero-headrow { gap: 1.3rem; margin-top: 1.3rem; }
  .bf-hero-emblem { width: 150px; height: 150px; }
  .bf-hero-title { font-size: 2.15rem; }
  .bf-hero-tagline { font-size: 1.05rem; }
  .bf-hero-script { font-size: 1.15rem; }
  .bf-hero-copy { font-size: 0.9375rem; }
  .bf-btn { font-size: 0.9375rem; }
  /* Wraps to two lines at this width — centre it so both lines sit evenly
     inside the pill instead of hanging off the logo on the left. Switched
     from inline-flex (shrink-to-fit) to a full-width flex block so the
     badge stretches edge-to-edge with the rest of the column instead of
     sitting as a narrower pill with side margins. Font bumped up from an
     unreadable 0.45rem now that the badge has the full column width to
     wrap in, rather than the old narrow pill it was sized down to fit. */
  .bf-eyebrow {
    display: flex;
    width: 100%;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.9rem;
    white-space: normal;
  }
  .bf-hero-visual { max-width: 340px; }
  .bf-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .bf-kicker { font-size: 0.8125rem; }
  .bf-video-title { font-size: 1.5rem; }
  .bf-video-copy { font-size: 0.9375rem; }
  .bf-domain-name { font-size: 0.9375rem; }
  .bf-sec-sub { font-size: 0.9375rem; }
  .bf-dots { display: none; }
  .bf-founder-card { padding: 1.5rem; }
  .bf-founder-photo { width: 280px; height: 320px; }
  .bf-founder-role { font-size: 0.8125rem; }
  .bf-resource-grid { grid-template-columns: 1fr; }
  .bf-resource-name { font-size: 0.9375rem; }
  .bf-resource-role { font-size: 0.8125rem; }
  .bf-faq { padding: 3.5rem 0; }
  .bf-faq-q { font-size: 0.9375rem; padding: 1rem 1.1rem; }
  .bf-faq-a { padding: 0 1.1rem 1.1rem; }
}
@media screen and (max-width: 479px) {
  .bf-hero-title { font-size: 1.85rem; }
  .bf-hero-copy { max-width: 100%; }
  .bf-hero-visual { max-width: 290px; }
  .bf-sec-head h2 { font-size: 1.6rem; }
}