/* --------------------------------------------------
   Base Reset
-------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: sans-serif;
  background: #fff;
}

.company,
.tagline,
.cardTitle,
.cardDesc {
  text-align: center;
}

/* Remove Safari inline-gap on images */
img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
   Card Layout (Desktop)
-------------------------------------------------- */
.Card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 28px auto;
  padding: 0;
}

/* Full-image, no-cropping wrapper */
.imgWrap {
  width: 100%;
  height: 420px;              /* adjust as needed */
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;        /* clean boutique background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-image, no-cropping image */
.imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* ← shows entire .webp */
  object-position: center;
  background: #ffffff;        /* fills letterbox space */
}

/* Title */
.cardTitle {
  font-size: 26px;
  margin: 18px 0 10px 0;
  padding: 0 16px;
}

/* Description */
.cardDesc {
  font-size: 18px;
  line-height: 1.4;
  padding: 0 16px 20px;
  color: #444;
}

/* --------------------------------------------------
   Mobile Override
-------------------------------------------------- */
@media (max-width: 700px) {

  .imgWrap {
    width: 100%;
    height: 70svh;            /* full-screen mobile */
    border-radius: 0;
    background: #ffffff;
  }

  .imgWrap img {
    object-fit: contain;      /* still full image */
    background: #ffffff;
  }

  .cardTitle {
    font-size: 22px;
    margin-top: 14px;
  }

  .cardDesc {
    font-size: 16px;
    padding: 0 16px 20px;
  }
}