/* base card */
.rt-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  transform-origin: center center;
}

/* desktop hover */
.rt-card:hover {
  transform: scale(1.025); /* very small, just enough to feel “alive” */
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.45);
}

/* active state (from your JS for mobile/in-view) */
.rt-card--active {
  transform: scale(1.01);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.28);
  border-color: rgba(59, 130, 246, 0.6);
}

/* optional: on really small screens, make the scale even smaller so it doesn't touch neighbors */
@media (max-width: 640px) {
  .rt-card:hover {
    transform: scale(1.008);
  }
}


  @media (min-width:768px){
    /* Panel hidden by default */
    #servicesContainer #servicesPanel{
      visibility:hidden; opacity:0; transform:translateY(0.25rem); pointer-events:none;
      transition:opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
    }
    /* The gap/buffer wrapper: no height or events until open */
    #servicesContainer .buffer{ padding-top:0; pointer-events:none; }

    /* Open state when hovering or focusing within the container */
    #servicesContainer:hover #servicesPanel,
    #servicesContainer:focus-within #servicesPanel{
      visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
      transition:opacity .15s ease-out, transform .15s ease-out;
    }
    #servicesContainer:hover .buffer,
    #servicesContainer:focus-within .buffer{
      padding-top:0.5rem; /* adds the comfortable gap ONLY when open */
      pointer-events:auto; /* lets you move the cursor into the panel */
    }
  }