/* toolkit.css — Toolkit rail (tool names carousel and VIEW ALL grid). */

.collaborators{ display: flex; align-items: center; gap: 50px; border-top: 1px solid var(--line); margin-top: 42px; padding-top: 29px; }
.collaborators > span{ font-size: 9px; color: var(--muted); line-height: 1.8; flex-shrink: 0; }
.collaborators strong{ font-weight: 500; color: var(--ink); }
.collaborators > div{ display: flex; align-items: center; justify-content: space-between; flex: 1 1 0%; gap: 35px; }
.collaborators img{ width: clamp(55px, 7.2vw, 110px); height: 44px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.3s, opacity 0.3s; }
.collaborators img:hover{ filter: none; opacity: 1; }

@media (max-width: 800px){
.collaborators{ gap: 25px; margin-top: 30px; }
.collaborators > div{ gap: 20px; }
.collaborators img{ width: 64px; height: 36px; }
.collaborators > span{ font-size: 8px; }
}

@media (max-width: 600px){
.collaborators{ flex-direction: column; align-items: start; gap: 19px; padding-top: 22px; margin-top: 27px; }
.collaborators > span{ font-size: 8px; line-height: 1.6; }
.collaborators > span br{ display: none; }
.collaborators > span strong{ margin-left: 6px; }
.collaborators > div{ width: 100%; gap: 13px; }
.collaborators img{ height: 29px; width: calc(20% - 10.4px); max-width: 70px; }
}

.brand-section{ margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); min-width: 0px; }
.brand-heading{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.brand-heading > p{ font-size: 10px; line-height: 1.7; color: var(--muted); }
.brand-heading strong{ color: var(--ink); font-weight: 500; }
.brand-heading > div{ display: flex; gap: 7px; align-items: center; }
.brand-heading .icon-button{ width: 44px; height: 44px; border: 0px; color: var(--muted); }
.brand-all{ font-size: 10px; min-height: 44px; display: flex; align-items: center; gap: 13px; margin-right: 12px; }
.brand-all:hover{ color: var(--red); }
.brand-viewport{ overflow-x: auto; scrollbar-width: none; max-width: 100%; overscroll-behavior-x: contain; min-height: 92px; }
.brand-viewport::-webkit-scrollbar{ display: none; }
.brand-rail, .brand-set{ display: flex; width: max-content; align-items: center; }
.brand-set{ gap: 40px; padding-right: 40px; }
.brand-logo{ width: 150px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-logo > img{ width: 130px; height: 55px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s, opacity 0.3s, transform 0.3s; }
.brand-logo:hover > img{ opacity: 1; filter: none; transform: scale(1.06); }
.brand-full-grid{ display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 24px 22px; padding-bottom: 10px; }
.brand-full-grid > .brand-logo{ width: auto; height: 105px; flex-direction: column; gap: 13px; }
.brand-full-grid > .brand-logo > span{ font-size: 9px; color: var(--muted); text-align: center; line-height: 1.5; }
.brand-full-grid > .brand-logo > img{ max-width: 100%; height: 55px; }

@media (max-width: 800px){
.brand-set{ gap: 30px; padding-right: 30px; }
.brand-logo{ width: 120px; }
.brand-logo > img{ width: 110px; }
.brand-full-grid{ grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px; }
}

@media (max-width: 600px){
.brand-section{ margin-top: 26px; padding-top: 18px; }
.brand-heading{ gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.brand-heading > p{ font-size: 8px; }
.brand-heading > div{ gap: 0px; margin-left: auto; }
.brand-heading .icon-button{ width: 32px; min-width: 32px; height: 44px; }
.brand-all{ font-size: 8px; gap: 7px; margin-right: 6px; }
.brand-logo{ width: 96px; height: 66px; }
.brand-logo > img{ width: 84px; height: 39px; }
.brand-set{ gap: 23px; padding-right: 23px; }
.brand-viewport{ min-height: 72px; }
.brand-full-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px 12px; }
.brand-full-grid > .brand-logo{ height: 90px; gap: 9px; }
.brand-full-grid > .brand-logo > img{ width: 86px; height: 40px; }
.brand-full-grid > .brand-logo > span{ font-size: 8px; }
.brand-pause{ display: none; }
.brand-heading .icon-button{ width: 44px; min-width: 44px; }
.brand-pause{ display: inline-flex; }
.collaborators > span{ font-size: 9px; }
}

.bl{font-family:Anton,sans-serif;font-size:22px;letter-spacing:.06em;color:#6f6a69;white-space:nowrap}
.brand-viewport.open{overflow:visible}
.brand-viewport.open .brand-rail{width:auto;display:block}
.brand-viewport.open .brand-set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;padding:0;gap:14px}
.brand-viewport.open .brand-logo{width:auto;border:1px solid var(--line)}
.brand-all[aria-expanded=true] svg{transform:rotate(45deg)}

@media(max-width:720px){
.brand-viewport.open .bl{font-size:clamp(14px,4.2vw,22px)}
.brand-viewport.open .brand-set{grid-template-columns:repeat(2,minmax(0,1fr))}
}