
.s-brands{position:relative;overflow:hidden;overflow:clip;isolation:isolate;background:var(--ink)}
.s-brands .br-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--ink)}
.s-brands .br-bg-l{position:absolute;inset:-8%;background:var(--ink) center/cover no-repeat;opacity:0;transform:scale(1.04)}
.s-brands .br-bg-l:first-child{opacity:1}
.s-brands .br-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink) 0,rgba(11,12,14,0) 20%,rgba(11,12,14,0) 78%,var(--ink) 100%),
  linear-gradient(90deg,rgba(11,12,14,.92) 0,rgba(11,12,14,.74) 36%,rgba(11,12,14,.5) 66%,rgba(11,12,14,.56) 100%)}
.s-brands .br-wrap{position:relative;padding-top:clamp(64px,9vh,112px);padding-bottom:clamp(36px,6vh,72px)}
.s-brands .br-head{grid-area:head;display:grid}
.s-brands .br-head .eyebrow{margin-bottom:18px}
.s-brands .br-title{max-width:12ch}
.s-brands .br-h2l{white-space:nowrap}
.s-brands .br-list{grid-area:list;list-style:none;margin:clamp(24px,3.6vh,44px) 0 0;padding:0;border-top:1px solid var(--line)}
.s-brands .br-list li{margin:0}
.s-brands .br-item{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 0;
  text-align:left;color:var(--dim);border-bottom:1px solid var(--line);transition:color .2s}
.s-brands .br-item-n{font-size:11px;transition:color .2s}
.s-brands .br-item-t{font:500 16px/1.25 var(--display);font-variation-settings:'wdth' 100}
.s-brands .br-item-c{font-size:10.5px;opacity:.85}
.s-brands .br-item.is-on{color:var(--bone)}
.s-brands .br-item.is-on .br-item-n{color:var(--tally)}
@media (hover:hover){.s-brands .br-item:hover{color:var(--bone)}}
.s-brands .br-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.s-brands .br-bar i{display:block;height:100%;background:var(--tally);transform-origin:0 50%;transform:scaleX(0)}
.s-brands .br-stage{grid-area:stage;position:relative}
.s-brands .br-frame{position:relative;border-radius:var(--r);background:#050506;transform-origin:50% 50%;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.s-brands .br-frame.corners::before,.s-brands .br-frame.corners::after{z-index:6}
.s-brands .br-glow{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 60px rgba(255,65,39,.15);opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .s-brands .br-frame[data-cursor="play"]{cursor:pointer}
  .s-brands .br-frame[data-cursor="play"]:hover .br-glow{opacity:1}
}
.s-brands .br-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;container-type:size;isolation:isolate;background:#050506}
.s-brands .br-media{position:absolute;inset:0}
.s-brands .br-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.s-brands .br-iris{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
.s-brands .br-iris .base{fill:#060607}
.s-brands .br-iris .bl{fill:#0c0d10;stroke:rgba(236,234,228,.13);stroke-width:1;stroke-linejoin:round}
.s-brands .br-iris .bl.b2{fill:#111216}
.s-brands .br-iris .bl.b3{fill:#0e0f13}
.s-brands .br-fmt{position:absolute;top:10px;left:36px;z-index:6;padding:5px 8px 4px;border-radius:999px;background:rgba(5,5,6,.6);color:var(--bone);font-size:10px;white-space:nowrap;pointer-events:none}
.s-brands .br-media.no-auto::after{content:"▶ Play";position:absolute;right:12px;top:12px;z-index:4;padding:6px 9px 5px;border-radius:999px;background:rgba(5,5,6,.7);
  font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.s-brands .br-sheet{position:absolute;inset:0;display:grid;align-content:center;justify-content:center;
  --g:max(6px,1.2cqw);--cw:calc((100cqw - 12cqw - 3 * var(--g)) / 4);grid-template-columns:repeat(4,var(--cw));column-gap:var(--g);row-gap:max(24px,3.4cqw)}
.s-brands .br-cell{position:relative;margin:0}
.s-brands .br-cell img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px;outline:1px solid rgba(236,234,228,.1);outline-offset:0;background-color:#111216}
.s-brands .br-cell figcaption{position:absolute;left:0;top:calc(100% + 6px);font-size:9.5px;color:var(--dim);line-height:1}
.s-brands .br-cell.is-hero{z-index:2}
.s-brands .br-cell.is-picked img{outline:2px solid var(--tally);outline-offset:2px}
.s-brands .br-cell.is-flying img{outline-color:transparent;border-radius:0}
.s-brands .br-stamp{position:absolute;left:-6px;top:-11px;z-index:3;background:var(--tally);color:var(--ink);font-size:9.5px;line-height:1;padding:5px 7px 4px;border-radius:2px;white-space:nowrap;opacity:0;transform:rotate(-4deg)}
.s-brands .br-shot{position:absolute;inset:0;z-index:4;opacity:0;background:#050506}
.s-brands .br-stills{position:absolute;inset:0;background:#e6e6e3}
.s-brands .br-still{position:absolute;inset:0;overflow:hidden;opacity:0}
.s-brands .br-still.is-on{opacity:1}
.s-brands .br-still img{transform-origin:50% 55%}
.s-brands .br-sbar{position:absolute;left:36px;right:36px;bottom:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px}
.s-brands .br-sname{background:rgba(11,12,14,.72);border-color:rgba(236,234,228,.14)}
.s-brands .br-snums{display:flex;gap:6px}
.s-brands .br-snum{min-width:44px;height:44px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.06em;background:rgba(11,12,14,.72);color:var(--dim);border:1px solid rgba(236,234,228,.14);transition:color .2s,border-color .2s}
.s-brands .br-snum[aria-pressed="true"]{color:var(--bone);border-color:var(--tally)}
.s-brands .br-caps{grid-area:caps;display:grid;align-content:start;padding-top:clamp(20px,3.4vh,40px)}
.s-brands .br-cap{grid-area:1/1;display:grid;gap:14px;align-content:start;visibility:hidden;opacity:0}
.s-brands .br-cap.is-on{visibility:visible;opacity:1}
.s-brands .br-tag{color:var(--tally);margin:0}
.s-brands .br-h{max-width:19ch}
.s-brands .br-p{max-width:44ch}
.s-brands .br-motto{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.s-brands .br-motto .serif{font-size:clamp(20px,1.6vw,24px);line-height:1.2;color:var(--bone)}
.s-brands .br-motto .mono{color:var(--dim);font-size:10px}
.s-brands .br-acts{margin-top:6px;display:flex;flex-wrap:wrap;gap:10px}
.s-brands .br-tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--tally)}
.s-brands .br-nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px}
.s-brands .br-count{margin:0;color:var(--dim);font-size:12px}
.s-brands .br-count b{color:var(--bone);font-weight:500}
.s-brands .br-arrows{display:flex;gap:8px}
.s-brands .br-arrow{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--bone);background:rgba(11,12,14,.35);transition:border-color .2s}
@media (hover:hover){.s-brands .br-arrow:hover{border-color:var(--bone)}}
.s-brands .br-cta{margin-top:clamp(28px,4vh,48px)}
@media (min-width:1100px){
  .s-brands .br-grid{display:grid;grid-template-columns:minmax(360px,5fr) 7fr;grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"head stage" "list stage" "caps stage" "caps nav";column-gap:clamp(40px,4.5vw,96px);
    min-height:max(600px,calc(100vh - clamp(64px,9vh,112px) - clamp(36px,6vh,72px)))}
  .s-brands .br-nav{justify-content:center;gap:18px;padding-top:16px}
  .s-brands .br-arrows{display:contents}
  .s-brands .br-arrow[data-step="-1"]{order:-1}
  .s-brands .br-arrow[data-step="1"]{order:1}
  .s-brands .br-stage{container-type:size;min-height:520px}
  .s-brands .br-frame{position:absolute;inset:0;margin:auto}
  .s-brands .br-frame.is-v{--fw:min(100cqw, 100cqh * 9 / 16, 78vh * 9 / 16);width:var(--fw);height:calc(var(--fw) * 16 / 9)}
  .s-brands .br-frame.is-h{--fw:min(100cqw, 56vw, 100cqh * 16 / 9);width:var(--fw);height:calc(var(--fw) * 9 / 16)}
  .s-brands .br-frame.is-sq{--fw:min(88cqw, 88cqh, 66vh);width:var(--fw);height:var(--fw)}
}
@media (min-width:768px) and (max-width:1099px){
  .s-brands .br-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;grid-template-areas:"head head" "stage stage" "list caps" "nav caps";column-gap:40px}
  .s-brands .br-stage{container-type:size;height:min(64svh,760px);min-height:380px;margin:clamp(28px,4vh,44px) 0 8px}
  .s-brands .br-frame{position:absolute;inset:0;margin:auto}
  .s-brands .br-frame.is-v{--fw:min(100cqw, 100cqh * 9 / 16);width:var(--fw);height:calc(var(--fw) * 16 / 9)}
  .s-brands .br-frame.is-h{--fw:min(100cqw, 100cqh * 16 / 9);width:var(--fw);height:calc(var(--fw) * 9 / 16)}
  .s-brands .br-frame.is-sq{--fw:min(100cqw, 100cqh);width:var(--fw);height:var(--fw)}
  .s-brands .br-list{margin-top:24px}
  .s-brands .br-caps{padding-top:24px}
  .s-brands .br-title{max-width:16ch}
}
@supports not (width:1cqw){
  @media (min-width:1100px){
    .s-brands .br-frame.is-v{width:min(43.8vh,30vw);height:min(78vh,53.3vw)}
    .s-brands .br-frame.is-h{width:min(56vw,100vh);height:min(31.5vw,56vh)}
    .s-brands .br-frame.is-sq{width:min(60vh,40vw);height:min(60vh,40vw)}
  }
  @media (min-width:768px) and (max-width:1099px){
    .s-brands .br-frame.is-v{width:min(36svh,100%);height:64svh}
    .s-brands .br-frame.is-h{width:100%;height:auto;aspect-ratio:16/9}
    .s-brands .br-frame.is-sq{width:min(64svh,100%);height:auto;aspect-ratio:1}
  }
}
@media (max-width:767px){
  .s-brands .br-wrap{padding-top:76px;padding-bottom:0}
  .s-brands .br-bg::after{background:
    linear-gradient(180deg,var(--ink) 0,rgba(11,12,14,.6) 14%,rgba(11,12,14,.5) 60%,var(--ink) 100%)}
  .s-brands .br-grid{--fw:min(100%, calc(86svh * 9 / 16));display:grid;grid-template-columns:100%;grid-template-areas:"head" "stage" "nav"}
  .s-brands .br-head{margin-bottom:24px}
  .s-brands .br-title{max-width:none}
  .s-brands .br-stage{display:grid;justify-items:center}
  .s-brands .br-frame{width:var(--fw);height:auto;aspect-ratio:9/16}
  .s-brands .br-frame.corners::before,.s-brands .br-frame.corners::after,.s-brands .br-fmt{display:none}
  .s-brands .br-list{grid-area:stage;align-self:start;justify-self:center;position:relative;z-index:7;width:var(--fw);margin:0;padding:0 8px;border:0;display:flex;gap:4px;
    background:linear-gradient(180deg,rgba(5,5,6,.6),rgba(5,5,6,0));border-radius:var(--r) var(--r) 0 0}
  .s-brands .br-list li{flex:1}
  .s-brands .br-item{display:block;min-height:44px;padding:0;border:0}
  .s-brands .br-item>span:not(.br-bar){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .s-brands .br-bar{top:18px;bottom:auto;height:2px;border-radius:2px;background:rgba(236,234,228,.3)}
  .s-brands .br-caps{grid-area:stage;align-self:end;justify-self:center;position:relative;z-index:7;width:var(--fw);padding:0;pointer-events:none}
  .s-brands .br-cap{align-self:end;gap:10px;padding:96px 16px 16px;border-radius:0 0 var(--r) var(--r);
    background:linear-gradient(0deg,rgba(5,5,6,.96) 0,rgba(5,5,6,.9) 58%,rgba(5,5,6,.55) 80%,rgba(5,5,6,0) 100%)}
  .s-brands .br-cap .br-acts{pointer-events:auto}
  .s-brands .br-h{max-width:none}
  .s-brands .br-p{font-size:15px;line-height:1.5}
  .s-brands .br-motto .serif{font-size:20px}
  .s-brands .br-acts{margin-top:4px}
  .s-brands .br-nav{width:var(--fw);justify-self:center;padding-top:12px}
  .s-brands .br-sheet{inset:52px 0 auto 0;height:calc(54cqh - 52px);align-content:start;
    --ch:calc((54cqh - 52px - 24px) / 4);--cw:calc(var(--ch) * 16 / 9);grid-template-columns:repeat(2,var(--cw));column-gap:8px;row-gap:8px}
  .s-brands .br-cell figcaption{top:5px;left:6px;color:var(--bone);text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .s-brands .br-shot{inset:auto 0 auto 0;top:calc(52px + (54cqh - 52px - 100cqw * 9 / 16) / 2);height:calc(100cqw * 9 / 16)}
  .s-brands .br-stills{inset:0 0 auto 0;height:100cqw}
  .s-brands .br-sbar{left:10px;right:10px;bottom:10px}
  .s-brands .br-media.no-auto::after{top:52px}
}
.s-brands:not(.br-js) .br-grid,.s-brands.is-static .br-grid{display:block}
.s-brands:not(.br-js) .br-stage,.s-brands:not(.br-js) .br-nav,.s-brands:not(.br-js) .br-list,
.s-brands.is-static .br-stage,.s-brands.is-static .br-nav,.s-brands.is-static .br-list{display:none}
.s-brands:not(.br-js) .br-caps,.s-brands.is-static .br-caps{gap:40px;padding-top:40px;pointer-events:auto}
.s-brands:not(.br-js) .br-cap,.s-brands.is-static .br-cap{grid-area:auto;visibility:visible;opacity:1;background:none;padding:0;transform:none}
.s-brands:not(.br-js) .br-acts,.s-brands.is-static .br-acts{display:none}
