/* V2.6 brand polish: public-facing Vibrant Family lockup, preferred kids artwork,
   and a centered mobile identity. Loaded after V2.5 overrides. */
.brand{
  gap:9px;
  min-width:0;
}
.brand-kids{
  width:66px;
  height:50px;
  overflow:visible;
}
.brand-kids img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:none;
}
.brand-wordmark-wrap{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand-wordmark{
  width:clamp(190px,16.5vw,235px);
  max-height:50px;
}
.footer-brand .brand-wordmark{
  width:min(255px,22vw);
  max-height:55px;
}
.site-footer .brand-kids{
  width:72px;
  height:54px;
  filter:none;
}
.brand-inverse .brand-wordmark{
  filter:brightness(0) invert(1);
  opacity:.96;
}

@media (max-width:1100px){
  .brand-kids{width:58px;height:44px}
  .brand-wordmark{width:190px;max-height:44px}
}

/* Mobile header mirrors the stronger centered lockup from the visual mockup:
   menu at left, brand centered, balanced empty space at right. */
@media (max-width:900px){
  .header-inner{
    position:relative;
    grid-template-columns:48px minmax(0,1fr) 48px;
    gap:8px;
  }
  .header-inner>.menu-toggle{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  .header-inner>.brand{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    justify-content:center;
    max-width:100%;
  }
  .header-inner:after{
    content:"";
    grid-column:3;
    grid-row:1;
    width:48px;
    height:1px;
  }
  .primary-nav{grid-column:1/-1}
  .brand-kids{width:50px;height:38px}
  .brand-wordmark{width:190px;max-height:41px}
}

@media (max-width:620px){
  .header-inner{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:5px;
  }
  .header-inner:after{width:42px}
  .brand{gap:5px}
  .brand-kids{width:43px;height:33px}
  .brand-wordmark{width:150px;max-height:34px}
  .footer-brand .brand{
    justify-content:center;
    margin-inline:auto;
  }
  .footer-brand .brand-kids{width:60px;height:45px}
  .footer-brand .brand-wordmark{width:min(220px,64vw);max-height:47px}
  .footer-brand p{text-align:center;margin-inline:auto}
}

@media (max-width:390px){
  .header-inner{grid-template-columns:38px minmax(0,1fr) 38px}
  .header-inner:after{width:38px}
  .brand-kids{width:38px;height:30px}
  .brand-wordmark{width:132px;max-height:31px}
}

/* Keep the current raster preferred-kids artwork crisp in its larger Company-page use. */
.brand-roots-art img{width:min(66%,320px);max-height:245px}