/* BlackLava V2.5 · shared responsive corrections, loaded last across all demos. */
html{scroll-padding-top:90px}
html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
body *{box-sizing:border-box}
img,video,iframe,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,li,a,button,label{overflow-wrap:break-word}
/* A single, readable demo disclosure: remove redundant template ribbons. */
body>.demo-strip,body>.demo-ribbon,body>.demo-banner{display:none!important}
.bl-demo-banner{position:relative!important;top:auto!important;left:auto!important;right:auto!important;z-index:1200!important;width:100%;min-height:0!important;display:flex!important;align-items:center;justify-content:space-between;gap:6px 18px;flex-wrap:wrap;padding:10px clamp(15px,4vw,28px)!important;line-height:1.4!important;font-family:system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif!important;font-size:clamp(9px,2.4vw,11px)!important;letter-spacing:.025em!important;box-shadow:none}
.bl-demo-banner span{flex:1 1 210px;max-width:100%!important;min-width:0}
.bl-demo-banner a{flex:0 1 auto;max-width:100%;display:inline-flex;align-items:center;min-height:28px;font-size:inherit;white-space:normal}
.blacklava-lang-switch{bottom:12px!important;right:12px!important;max-width:calc(100vw - 24px)}
@media(max-width:780px){
  html{scroll-padding-top:82px}
  body{overflow-x:clip}
  .bl-demo-banner{padding:9px 14px!important;gap:3px 12px!important;justify-content:flex-start;letter-spacing:0!important}
  .bl-demo-banner span,.bl-demo-banner a{flex-basis:100%;line-height:1.35!important}
  .bl-demo-banner a{min-height:24px}
  /* Allow navs and expanded menus to remain above page art. */
  .site-header,.main-header,#site-header{isolation:isolate}
  .nav-links,.site-nav,.main-nav,.nav{max-width:100vw}
  h1,h2,h3{hyphens:auto;overflow-wrap:anywhere}
  p,li{overflow-wrap:break-word}
  .container,.shell,.layout-wrap,.nav-shell,.hero-inner,.nav-container{max-width:100%}
  .hero-actions,.hero-ctas,.button-row,.hero .actions{flex-wrap:wrap;gap:12px}
  .hero-actions>a,.hero-ctas>a{max-width:100%}
  input,textarea,select,button{max-width:100%}
  .blacklava-lang-switch{bottom:8px!important;right:8px!important}
  .blacklava-lang-switch button{min-width:38px;min-height:38px}
}
@media(max-width:420px){
  .bl-demo-banner{font-size:10px!important}
  .bl-demo-banner span{letter-spacing:0}
  .brand,.wordmark,.logo{max-width:calc(100% - 55px);min-width:0}
  .brand-copy,.logo-label{min-width:0}
  .brand-copy b,.wordmark,.logo-label{overflow-wrap:break-word}
  .hero h1,.page-hero h1,.inner-hero h1,.hero-copy h1,.inner-hero-grid h1,.detail-content h1{font-size:clamp(2.3rem,10.2vw,3.2rem)!important;line-height:1.06!important;letter-spacing:-.035em!important}
  .section h2,.section-heading h2,.inner-hero h2,.intro-copy h2,.text-pane h2,.cta-band h2,.split-copy h2,.story h2{font-size:clamp(1.8rem,8.5vw,2.75rem)!important;line-height:1.13!important}
  .hero,.page-hero,.inner-hero{min-width:0}
  .blacklava-lang-switch{bottom:8px!important;right:8px!important}
}

/* Per-demo corrections below are loaded via body data-demo. */


/* BlackLava V2.6 · stronger hero centering for small screens */
@media(max-width:780px){
  .hero,.page-hero,.inner-hero,.detail-hero,.home-hero{overflow:hidden}
  .hero .container,
  .page-hero .container,
  .detail-hero .container,
  .home-hero .container,
  .hero-inner,
  .hero-content,
  .hero-copy,
  .hero-body,
  .inner-hero,
  .inner-hero-grid,
  .detail-content{
    width:min(100%, calc(100% - 32px))!important;
    max-width:720px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:16px!important;
    padding-right:16px!important;
    min-width:0!important;
  }
  .hero-inner,
  .hero-content,
  .hero-copy,
  .hero-body,
  .inner-hero,
  .detail-content,
  .home-hero .container,
  .page-hero .container,
  .hero .container,
  .inner-hero-grid{
    text-align:center!important;
    justify-items:center!important;
    align-items:center!important;
  }
  .hero h1,.page-hero h1,.inner-hero h1,.hero-copy h1,.detail-content h1,
  .home-hero h1,.inner-hero-grid h1{
    margin-left:auto!important;
    margin-right:auto!important;
    max-width:12ch!important;
    text-wrap:balance;
  }
  .hero p,.page-hero p,.inner-hero p,.detail-hero p,.hero-copy p,.hero-content p,
  .home-hero p,.detail-content p,.inner-hero-grid p,
  .hero .lead,.page-hero .lead,.inner-hero .lead,.detail-content .lead{
    margin-left:auto!important;
    margin-right:auto!important;
    max-width:34ch!important;
  }
  .eyebrow,.hero .eyebrow,.page-hero .eyebrow,.inner-hero .eyebrow,.detail-content .eyebrow,
  .hero-index,.inner-index,.hero-footnote,.small-mark{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    justify-content:center!important;
  }
  .hero-actions,.hero-ctas,.button-row,.hero .actions,.hero-bottom,.hero-float,.small-mark{
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero-actions > *, .hero-ctas > *, .button-row > *, .hero .actions > *{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media(max-width:420px){
  .hero .container,
  .page-hero .container,
  .detail-hero .container,
  .home-hero .container,
  .hero-inner,
  .hero-content,
  .hero-copy,
  .hero-body,
  .inner-hero,
  .inner-hero-grid,
  .detail-content{
    width:min(100%, calc(100% - 24px))!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .hero h1,.page-hero h1,.inner-hero h1,.hero-copy h1,.detail-content h1,
  .home-hero h1,.inner-hero-grid h1{
    max-width:11ch!important;
  }
  .hero p,.page-hero p,.inner-hero p,.detail-hero p,.hero-copy p,.hero-content p,
  .home-hero p,.detail-content p,.inner-hero-grid p{
    max-width:30ch!important;
  }
}