/* ============================================================
   Rotating 3D logo cube (Services section gap filler)
   ============================================================ */
.logo-cube-scene {
    flex: 0 0 auto;            /* don't stretch to fill the column */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    /* depth of field for the 3D rotation */
    perspective: 1000px;
    /* a little room for the cube to spin without clipping */
    margin-top: 0;
    padding: 10px 0;
}

/* keep the description text and the cube tight together */
.section-services .col-left p { margin-bottom: 0; }
/* The 260px gap below the text block (set in styles.css) is what pushed the cube
   far down. logo-cube.css loads AFTER styles.css, so this override wins — pull the
   cube up close to the paragraph. */
@media (min-width: 992px) {
  .section-services .col-left { margin-bottom: 72px; }
  .section-services .services-image { margin-top: 58px; }
}
@media (max-width: 991px) {
  .section-services .col-left { margin-bottom: 28px; }
  .section-services .services-image { margin-top: 28px; }
}

.logo-cube {
    position: relative;
    width: 168px;
    height: 168px;
    transform-style: preserve-3d;
    animation: logo-cube-spin 16s linear infinite;
    will-change: transform;
}

.logo-cube__face {
    position: absolute;
    inset: 0;
    width: 168px;
    height: 168px;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    backface-visibility: hidden;
}

.logo-cube__face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* half of width/height = 84px push-out for each face */
.logo-cube__face--front  { transform: rotateY(0deg)    translateZ(84px); }
.logo-cube__face--back    { transform: rotateY(180deg)  translateZ(84px); }
.logo-cube__face--right   { transform: rotateY(90deg)   translateZ(84px); }
.logo-cube__face--left    { transform: rotateY(-90deg)  translateZ(84px); }
.logo-cube__face--top     { transform: rotateX(90deg)   translateZ(84px); }
.logo-cube__face--bottom  { transform: rotateX(-90deg)  translateZ(84px); }

/* rotate on two axes so every side comes into view */
@keyframes logo-cube-spin {
    0%   { transform: rotateX(-20deg) rotateY(0deg); }
    50%  { transform: rotateX(160deg) rotateY(180deg); }
    100% { transform: rotateX(340deg) rotateY(360deg); }
}

/* pause the motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-cube { animation: none; transform: rotateX(-18deg) rotateY(-24deg); }
}

@media (max-width: 1199.98px) {
    .logo-cube-scene { min-height: 0; padding: 8px 0; margin-top: 0; }
    .logo-cube,
    .logo-cube__face { width: 140px; height: 140px; }
    .logo-cube__face--front  { transform: rotateY(0deg)   translateZ(70px); }
    .logo-cube__face--back    { transform: rotateY(180deg) translateZ(70px); }
    .logo-cube__face--right   { transform: rotateY(90deg)  translateZ(70px); }
    .logo-cube__face--left    { transform: rotateY(-90deg) translateZ(70px); }
    .logo-cube__face--top     { transform: rotateX(90deg)  translateZ(70px); }
    .logo-cube__face--bottom  { transform: rotateX(-90deg) translateZ(70px); }
}