/* Section */
.sg-colours{
  padding: 90px 0;
  background: #f6f7f8;
}

/* Header */
.sg-colours .section-head{
  text-align: center;
  max-width: 700px;
  margin: 0 auto 36px;
}

/* Grid */
.sg-colour-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* Card */
.sg-colour-card{
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

/* Swatch */
.sg-swatch{
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid #e2e6ea;
  flex-shrink: 0;
}

/* Specific colours */
.sg-white{
  background: #f7f7f7;
}

.sg-brown{
  background: #3b2b24;
}

.sg-silver{
  background: linear-gradient(135deg, #cfd4d9, #9ea4aa);
}

/* Text */
.sg-colour-meta strong{
  display: block;
  font-size: 15px;
  color: #123257;
}

.sg-colour-meta span{
  font-size: 13px;
  color: #6b7683;
}

/* RAL block */
.sg-colour-ral{
  margin-top: 10px;
}

.sg-ral-inner{
  background: #ffffff;
  border-radius: 16px;
  padding: 26px 30px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.sg-ral-inner h3{
  margin: 0 0 10px;
  font-size: 24px;
  color: #123257;
}

.sg-ral-inner p{
  margin: 0 0 16px;
  font-size: 15px;
  color: #55606d;
}

/* Responsive */
@media (max-width: 767px){

  .sg-colour-grid{
    grid-template-columns: 1fr;
  }

  .sg-colours{
    padding: 70px 0;
  }

}