/* DCAST Systems HD image quality layer — 2026-08-24 */
.sys-hero-visual{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;
}
.sys-hero-property{
  position:static!important;
  inset:auto!important;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.sys-hero-stack{
  position:static!important;
  inset:auto!important;
  display:contents!important;
}
.sys-hero-property img,
.sys-hero-stack img,
.sys-card-media img,
.sys-project-card img{
  image-rendering:auto;
  backface-visibility:hidden;
}
.sys-projects{
  padding:0 0 92px;
  background:#fff;
}
.sys-projects .sys-section-head{
  margin-bottom:34px;
}
.sys-projects-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.sys-project-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--sys-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,31,63,.08);
  transition:transform .28s ease,box-shadow .28s ease;
}
.sys-project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(15,31,63,.15);
}
.sys-project-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#e9eef4;
}
.sys-project-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(5,25,52,.8));
  pointer-events:none;
}
.sys-project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.sys-project-card:hover img{
  transform:scale(1.045);
}
.sys-project-card h3{
  position:absolute;
  z-index:2;
  right:14px;
  bottom:14px;
  left:14px;
  margin:0;
  color:#fff;
  font-size:.88rem;
  line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
@media(max-width:1180px){
  .sys-projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .sys-projects{padding-bottom:70px}
  .sys-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  .sys-projects-grid{grid-template-columns:1fr}
  .sys-project-media{aspect-ratio:4/3}
}