/* COSTAN V6.6 — only requested homepage section fixes */

/* ---------------------------------------------------------
   BUILT FOR YOUR DAY
   All 4 category media cards use ONE common 9:16 size/ratio.
   No individual video can create a different card height.
   --------------------------------------------------------- */
.categories .category-grid{
  height:auto !important;
  align-items:start !important;
}
.categories .cat{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:9 / 16 !important;
  overflow:hidden !important;
}
.categories .cat video,
.categories .cat img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Tablet/mobile: keep EXACTLY the same card ratio */
@media(max-width:1024px){
  .categories .cat{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:9 / 16 !important;
  }
}
@media(max-width:700px){
  .categories .cat{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:9 / 16 !important;
  }
}

/* ---------------------------------------------------------
   04 / WHY COSTAN
   Compact section: smaller overall height + smaller video.
   --------------------------------------------------------- */
.brand#plant{
  min-height:0 !important;
  height:auto !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

/* Override older tall brand-media rules */
.brand#plant .brand-media{
  position:relative !important;
  width:100% !important;
  height:520px !important;
  min-height:0 !important;
  max-height:520px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  background:#000 !important;
}
.brand#plant .brand-media video{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.brand#plant .brand-copy{
  min-height:0 !important;
  height:auto !important;
  padding:48px clamp(28px,4vw,64px) !important;
  align-self:stretch !important;
}
.brand#plant .brand-copy h2{
  margin-top:10px !important;
  margin-bottom:18px !important;
}
.brand#plant .brand-copy > p{
  margin-top:0 !important;
  margin-bottom:22px !important;
}
.brand#plant .points{
  margin-top:18px !important;
  gap:0 !important;
}
.brand#plant .point{
  padding-top:12px !important;
  padding-bottom:12px !important;
}

/* Tablet */
@media(max-width:1024px){
  .brand#plant{
    grid-template-columns:1fr !important;
  }
  .brand#plant .brand-media{
    height:430px !important;
    max-height:430px !important;
  }
  .brand#plant .brand-copy{
    padding:38px 24px !important;
  }
}

/* Mobile */
@media(max-width:700px){
  .brand#plant .brand-media{
    height:340px !important;
    max-height:340px !important;
  }
  .brand#plant .brand-copy{
    padding:32px 18px !important;
  }
  .brand#plant .brand-copy h2{
    margin-bottom:14px !important;
  }
  .brand#plant .brand-copy > p{
    margin-bottom:16px !important;
  }
  .brand#plant .points{
    margin-top:12px !important;
  }
  .brand#plant .point{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}