:root{
  --brand-hero-position:center center;
  --brand-hero-mobile-position:center center;
}

.brand-page>.brand-hero{
  width:100%;
  height:clamp(620px,calc(100svh - 24px),1200px)!important;
  min-height:0!important;
  margin:0;
  overflow:hidden;
}

.brand-page>.brand-hero>img,
.brand-page>.brand-hero>picture{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
}

.brand-page>.brand-hero>img,
.brand-page>.brand-hero>picture>img{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:var(--brand-hero-position);
}

.brand-page.theme-heritage{--brand-hero-mobile-position:50% 50%}
.brand-page.theme-stone{--brand-hero-mobile-position:50% 50%}
.brand-page.theme-ivory{--brand-hero-mobile-position:50% 50%}
.brand-page.theme-graphite{--brand-hero-mobile-position:52% 50%}

.brand-page .brand-section-title,
.brand-page .surfaces-section .section-heading .eyebrow,
.brand-page .collections .section-heading .eyebrow{
  font-family:"Noto Sans","Segoe UI",Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
}

@media(max-width:1199px){
  .brand-page>.brand-hero{
    height:clamp(520px,78svh,760px)!important;
  }
}

@media(max-width:699px){
  .brand-page>.brand-hero{
    height:clamp(540px,82svh,680px)!important;
  }

  .brand-page>.brand-hero:has(.hero-content--cta-only){
    height:clamp(300px,72svh,520px)!important;
  }

  .brand-page>.brand-hero>img,
  .brand-page>.brand-hero>picture>img{
    object-position:var(--brand-hero-mobile-position);
  }
}

/* Keep the brand banner inside the viewport and preserve its bottom lettering. */
.brand-page>.brand-hero{
  height:calc(100svh - 24px)!important;
  height:calc(100dvh - 24px)!important;
  min-height:0!important;
  overflow:hidden;
}
.brand-page>.brand-hero>img,
.brand-page>.brand-hero>picture>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.brand-page>.brand-hero .hero-content--cta-only{
  position:absolute;
  inset:auto 0 28px;
  height:auto;
  padding:0;
  justify-content:center;
  align-items:center;
}

/* Performa uses the Slim section treatment: surfaces beige, collections white. */
.brand-page.theme-graphite .surfaces-section{background:#f7f3ec!important}
.brand-page.theme-graphite .collections{background:#fff!important}
/* Surface cards follow the existing collection card's rendered dimensions. */
.brand-page.theme-graphite #performaSurfaces{
 --performa-surface-width:calc((100% - 80px)/5);
 display:flex!important;gap:20px!important;align-items:flex-start;
}
.brand-page.theme-graphite #performaSurfaces>a{
 display:block!important;box-sizing:border-box;flex:0 0 var(--performa-surface-width)!important;
 width:var(--performa-surface-width)!important;max-width:var(--performa-surface-width)!important;
 min-width:0!important;padding:0;margin:0;scroll-snap-align:start;
}
.brand-page.theme-graphite #performaSurfaces .surface-card__image{
 display:block!important;width:100%!important;height:var(--performa-surface-image-height,auto)!important;
 aspect-ratio:1/1!important;position:relative;min-height:0!important;overflow:hidden;margin:0 0 14px!important;
}
.brand-page.theme-graphite #performaSurfaces .surface-card__image img{
 position:absolute!important;inset:0;display:block;width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;object-fit:cover;
}
.brand-page.theme-graphite #performaSurfaces h3{
 margin:0 0 5px!important;font-size:15px!important;font-weight:400!important;
}
@media(max-width:900px){.brand-page.theme-graphite #performaSurfaces{--performa-surface-width:calc((100% - 40px)/3)}}
@media(max-width:650px){.brand-page.theme-graphite #performaSurfaces{--performa-surface-width:calc((100% - 20px)/2)}}
@media(max-width:699px){
  .brand-filter-rail{
    top:48%!important;
    right:0!important;
    bottom:auto!important;
    height:auto!important;
    padding:13px 9px!important;
    writing-mode:vertical-rl!important;
    transform:rotate(180deg)!important;
  }

  .brand-page>.brand-hero{
    aspect-ratio:4/5;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .brand-page>.brand-hero .hero-content--cta-only{
    inset:auto 0 34px;
  }
  .brand-page>.brand-hero .hero-content:not(.hero-content--cta-only){
    padding-bottom:74px!important;
  }
  .brand-page>.brand-hero .hero-cta{
    min-height:38px!important;
    padding:10px 14px!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
}