#brandflow-next .bn-hero .bf-material-layer{transition:opacity .5s ease}
#brandflow-next .bn-hero .bf-material-one{background:radial-gradient(ellipse 62% 38% at 72% 30%,#858b7045 0%,#6167542d 34%,#393e2f14 60%,transparent 85%);animation-name:bf-living-one;animation-duration:16s;animation-delay:-3s}
#brandflow-next .bn-hero .bf-material-two{background:radial-gradient(ellipse 62% 42% at 61% 55%,#06080995 0%,#0c0f1260 42%,transparent 83%);animation-name:bf-living-two;animation-duration:20s;animation-delay:-9s}
#brandflow-next .bn-hero .bf-material-three{background:radial-gradient(ellipse 70% 30% at 48% 54%,#969e7930 0%,#656d4920 43%,transparent 82%);animation-name:bf-living-three;animation-duration:14s;animation-delay:-5s;opacity:.76}
@keyframes bf-living-one{0%,100%{transform:translate(8%,-6%) scale(1.03,.98) rotate(-4deg)}50%{transform:translate(-10%,7%) scale(1.12,1.04) rotate(3deg)}}
@keyframes bf-living-two{0%,100%{transform:translate(-7%,5%) scale(1.06) rotate(2deg)}50%{transform:translate(8%,-7%) scale(.98,1.09) rotate(-3deg)}}
@keyframes bf-living-three{0%,100%{transform:translate(9%,4%) scale(1)}50%{transform:translate(-9%,-6%) scale(1.12,.96)}}
#brandflow-next .bn-hero h1 .bf-substance-word{display:inline-block;position:relative;color:inherit;white-space:nowrap;transition:color .4s cubic-bezier(.2,.65,.3,1)}
#brandflow-next .bn-hero h1 .bf-substance-word:after{content:'';position:absolute;left:2%;bottom:-.055em;width:93%;height:2px;border-radius:60% 20% 60% 30%;background:linear-gradient(90deg,#b5c39c15,#b5c39ccc 16%,#b5c39cbb 78%,#b5c39c00);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .45s cubic-bezier(.2,.65,.3,1),opacity .35s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){#brandflow-next .bn-hero h1 .bf-substance-word:hover{color:#c8d4b6}#brandflow-next .bn-hero h1 .bf-substance-word:hover:after{transform:scaleX(1);opacity:1}#brandflow-next .bn-hero:has(.bf-substance-word:hover) .bf-material-three{opacity:1}}
@media(prefers-reduced-motion:reduce){#brandflow-next .bn-hero .bf-material-layer{animation:none!important;transform:none!important;transition:none;will-change:auto}#brandflow-next .bn-hero h1 .bf-substance-word,#brandflow-next .bn-hero h1 .bf-substance-word:after{transition:none}}

/* Mobile spacing tweak: moderate reduction of vertical gap under the headline
	without changing desktop/tablet layouts. Keeps generous spacing but makes
	the CTA appear slightly earlier on typical smartphones. */
@media(max-width:650px){
  #brandflow-next .bn-hero .bf-type-composition{margin-top:14px;margin-bottom:8px;padding-bottom:6px}
  #brandflow-next .bn-hero h1{padding-bottom:6px}
  #brandflow-next .bn-hero .bn-hero-bottom{margin-top:6px;padding-bottom:14px;gap:18px}
  #brandflow-next .bn-hero .bn-actions{margin-top:12px}
}

/* Fix: remove large fixed/viewport hero heights on small screens for homepage only.
   Addresses the empty dark gap by letting the hero size to its content. */
@media(max-width:650px){
  #brandflow-next .bn-hero.bn-hero--compact-mobile{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-bottom:14px; /* keep a small breathing room */
    justify-content:flex-start; /* ensure content stacks naturally */
  }
  /* Extend the work-lead gradient further down on mobile so the transition
     to the light section fully covers the seam (removes thin dark strip). */
  #brandflow-next .bn-hero.bn-hero--compact-mobile .bf-work-lead:before{
    inset:-24px 0 -32px; /* top right bottom left -> extend bottom */
  }
}

/* Inline SVG arrow defaults (used where emoji arrows were removed). Inherit color and
	respect existing .bn-arrow hover transform declared in brandflow-base.css */
.mobile-br{display:none}

@media(max-width:650px){
  /* compact variant only for the homepage hero (scoped via class added to index.html) */
  #brandflow-next .bn-hero.bn-hero--compact-mobile .mobile-br{display:block}
  #brandflow-next .bn-hero.bn-hero--compact-mobile .bf-type-composition{margin-top:10px;margin-bottom:6px;padding-bottom:4px}
  #brandflow-next .bn-hero.bn-hero--compact-mobile h1{padding-bottom:4px;font-size:clamp(38px,9.6vw,56px);line-height:1.02;max-width:92%}
  #brandflow-next .bn-hero.bn-hero--compact-mobile .bn-hero-bottom{margin-top:8px;padding-bottom:12px;gap:14px}
  #brandflow-next .bn-hero.bn-hero--compact-mobile .bn-actions{margin-top:10px}
}

.icon-arrow{display:inline-block;width:1em;height:1em;vertical-align:middle}
.icon-arrow svg{width:1em;height:1em;display:block}