/* ============================================================
   brand index — typographic, cursor-follow preview
   ============================================================ */
/* the section above already leaves plenty of air — this one does not need its own */
/* this one keeps its bottom: the tinted block below starts right at the edge,
   and without it the closing link sits against the change of colour */
.brands{padding-block:var(--space-lg)}
/* the descriptor sits beside the heading and stays on one line on desktop */
@media (min-width:1025px){.brands>.sec-head .sec-sub{max-width:none}}
.bi{border-top:1px solid var(--line-soft)}
.bi__row{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(14px,2vw,34px);padding:clamp(13px,1.5vw,20px) 0;
  border-bottom:1px solid var(--line-soft);position:relative;
}
.bi__i{font-size:var(--t-label);color:var(--ink-25);font-variant-numeric:tabular-nums;letter-spacing:.12em;
  transition:color .35s var(--ease),transform .3s var(--ease)}
.bi__n{
/* same ramp as Trending now — a serif simply carries more weight at the same size */
  font-family:var(--display);font-weight:300;font-size:clamp(1.875rem,2.2vw,2.5rem);
  line-height:1.08;letter-spacing:-.018em;
  transition:color .35s var(--ease),transform .3s var(--ease);
}
.bi__tag{font-size:var(--t-meta);color:var(--ink-45);display:none;text-align:right;
  transition:color .35s var(--ease),transform .3s var(--ease)}
.bi__go{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-25);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.bi__row:hover .bi__go{color:var(--ink)}
.bi__row:hover .bi__n{color:var(--ink)}

/* hover gathers the row inward: the name steps right, the right-hand pair steps left */
@media (hover:hover) and (min-width:900px){
  .bi__row:hover .bi__i{transform:translateX(10px)}
  .bi__row:hover .bi__n{transform:translateX(13px)}
  .bi__row:hover .bi__tag,.bi__row:hover .bi__go{transform:translateX(-16px)}
}
.bi__row::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--ivory);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--slow);
}
.bi__row:hover::before{transform:scaleY(1)}

.bpreview{
  position:fixed;top:0;left:0;z-index:40;width:clamp(170px,14vw,230px);aspect-ratio:4/5;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease),transform .6s var(--slow);overflow:hidden;background:var(--stone);border-radius:var(--radius-md);
}
.bpreview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bpreview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.bpreview img.on{opacity:1}
.brands__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:var(--space-md);flex-wrap:wrap}
@media (min-width:900px){.bi__tag{display:block}}
/* the index column was 40px for a 15px number — 25px of dead space holding the
   brand away from its own number. Sized to the digits plus the row gap, it
   matches the numbered list in "What does your skin need?". tabular-nums keeps
   every number the same width, so nothing shifts down the list. */
@media (max-width:900px){.bi__row{grid-template-columns:26px 1fr auto}.bpreview{display:none}}
@media (max-width:640px){.bi__n{font-size:clamp(1.35rem,5.6vw,1.75rem)}.bi__row{padding-block:11px}}