/* Container grid: 3 columns on desktop, 1 column on narrow screens */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Card wrapper */
.card {
  background: #1f1f2e;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

/* 1. Force the container to a fixed/minimum height */

.card__image {
  position: relative;
  overflow: hidden;

  /* pick whatever height you need – 200px is just an example */

  min-height: 240px;
}

/* 2. Stretch the img to fill the container */

.card__image img {
  width: 100%;
  height: 100%;    

  /* 3. Crop where necessary, preserving aspect ratio */

  object-fit: cover;  
}


/* Badge in top-right */
.card__badge {
  /* make it a fixed square: */
  width: 90px;
  height: 90px;

  /* turn square into circle: */
  border-radius: 50%;

  /* keep your background & text styles */
  background: #e5680c;
  color: #fff;
  font-size: 1rem;
  line-height:1.2;
  font-weight: 600;

  /* center the label inside the circle: */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  /* if you still want it offset from the corner */
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Body/content area */
.card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #ffffff;
}

.card__subtitle {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: #ffffff;
  line-height: 1.4;
  font-weight:600;
}

/* Set unique colours for subtitles */

.payg {color:#e5680c;}
.bespoke {color:#e84138;}
.dedicated {color:#756eaf;}

/* Feature list with custom bullets */
.card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.card__features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.card__features li::before {
  content: "\f058";
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
  font-weight: bold;
}

/* Button */
.card__button {
  margin-top: auto;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border: 1px solid #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  transition: background 0.2s, color 0.2s;
}
.card__button:hover {
  color: #ffffff;
}

.card__payg_button {
  color: #e5680c;
}

.card__payg_button:hover {
  background: #e5680c;
  color: #ffffff;
}

.card__bespoke_button {
  color: #e84138;
}

.card__bespoke_button:hover {
  background: #e84138;
  color: #ffffff;
}

.card__dedicated_button {
  color: #756eaf;
}

.card__dedicated_button:hover {
  background: #756eaf;
  color: #ffffff;
}

/* Stack to one column at <= 768px */

@media (max-width: 998px) {
  .service-cards {
    grid-template-columns: 1fr;
  }

  .card__badge {
  /* Reduce the size of the badge on smaller screens: */

}

  /* force every image container to the same height */

  .card__image {
    /* choose whatever exact height you like */
    height: 300px;
    overflow: hidden;
  }

  /* fill that container and crop neatly */

  .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }