/* ====== BRANDS SECTION ====== */
.brands-section { 
  position: relative; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.brands-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 0;
}

.brands-section > * {
  position: relative;
  z-index: 1;
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* Head: title + CTA */
.brands-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 50px; }
.brands-title { font-family: Inter, system-ui, Arial, sans-serif; font-weight: 700; font-size: 48px; line-height: 1.1; margin: 0; position: relative; color: #000; }
.brands-title > span { position: relative; display: inline-block; }
.brands-title > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
  height: 5px; background: currentColor; border-radius: 5px;
}
.brands-cta {
  font-family: Inter, system-ui, Arial, sans-serif; font-weight: 700; font-size: 28px;
  text-decoration: none; color: #111; background: #fff; padding: 14px 22px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.brands-intro { margin: 56px auto 0; font-family: Inter, system-ui, Arial, sans-serif; font-size: 26px; line-height: 1.4; color: #111; }

.brands-row { margin-top: 56px; }      /* distance from intro to first row */
.brands-row + .brands-row { margin-top: 40px; }  /* vertical gap between rows */
.brands-section { padding-bottom: 98px; } /* distance below second row */

/* Row scaffold */
.brands-row .mask { overflow: hidden; position: relative; }
.brands-row .track { display: flex; gap: 20px; will-change: transform; }
.brands-row .card { list-style: none; flex: 0 0 626px; }
.brands-row .card-link { display: block; position: relative; border-radius: 25px; overflow: hidden; text-decoration: none; color: #fff; height: 203px; }

/* Texture background (one for all cards) */
.brands-row .card-bg {
  position: absolute; inset: 0; background-image: var(--card-texture);
  background-size: cover; background-position: center; filter: none;
  border-radius: 25px;
}

/* Card inner */
.brands-row .card-inner {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: 152px 1fr; align-items: center; gap: 24px;
  padding: 22px 26px; /* inner padding */
}
.card-logo { width: 152px; height: 152px; object-fit: contain; }
.brands-row .card-copy .card-title, .brands-row .card-title { margin: 0 0 6px; font: 400 24px/normal Inter, system-ui, Arial, sans-serif !important; letter-spacing: 0 !important; }
.card-desc { margin: 0; font: 400 20px/1.35 Inter, system-ui, Arial, sans-serif; color: #fff; opacity: .95; }

/* Animation controls */
.brands-row[data-paused="true"] .track { animation-play-state: paused !important; }

/* Responsive */
@media (max-width: 900px) {
  .brands-title { font-size: 40px; }
  .brands-intro { font-size: 22px; }
  .brands-row .card { flex-basis: min(86vw, 600px); }
  .brands-row .card-link { height: 203px; } /* keep height, adapt width */
}

@media (max-width: 600px) {
  .brands-title { font-size: 34px; }
  .brands-intro { font-size: 20px; }
  .brands-row .card { flex-basis: 86vw; }
  .card-title { font-size: 22px; }
  .card-desc { font-size: 18px; }
}

/* Mobile Phone Specific Styles */
@media (max-width: 767px) {
  .brands-title > span::after {
    display: none; /* Remove underline on phone */
  }
  
  .brands-cta {
    display: none; /* Hide "View all brands" button on phone */
  }
  
  .brands-row .card-copy .card-title,
  .brands-row .card-title {
    font-size: 16px !important; /* Make card text font 16px on phone */
    line-height: 1.3;
  }
  
  .brands-head {
    justify-content: flex-start; /* Left align the title */
    padding-top: 40px;
  }
  
  .brands-title {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .brands-title { 
    font-size: 30px; 
    text-align: left;
  }
  
  .brands-intro { 
    font-size: 18px; 
    text-align: left;
    margin: 40px auto 0;
  }
  
  .brands-row .card-copy .card-title,
  .brands-row .card-title {
    font-size: 16px !important;
    line-height: 1.4;
  }
  
  .brands-head {
    padding-top: 30px;
  }
}

@media (max-width: 360px) {
  .brands-title { 
    font-size: 26px; 
  }
  
  .brands-intro { 
    font-size: 16px; 
    margin: 30px auto 0;
  }
  
  .brands-row .card-copy .card-title,
  .brands-row .card-title {
    font-size: 16px !important;
    line-height: 1.3;
  }
}