/* ============================================================
   TOP page — diagonal photo marquee (Business → Interview)
   Two rows of photos in a rotated band that drift horizontally
   (opposite directions) with scroll. TOP-only; loaded via
   page-top.css + driven by js/page-top.js. overflow:hidden on
   .dmq clips the rotated corners so no horizontal scroll appears.
   ============================================================ */
.dmq{position:relative;overflow:hidden;background:var(--mercury);
  height:clamp(400px,44vw,640px);isolation:isolate}
.dmq-rot{position:absolute;top:50%;left:50%;width:158%;
  display:flex;flex-direction:column;gap:clamp(1rem,1.8vw,1.8rem);
  transform:translate(-50%,-50%) rotate(-14deg);transform-origin:center center}
.dmq-row{position:relative}
.dmq-track{display:flex;gap:clamp(1rem,1.8vw,1.8rem);width:max-content;
  transform:translateX(0)}
/* second row starts pushed left so the two rows offset like the reference */
.dmq-track[data-dmq="b"]{margin-left:-8vw}
.dmq-cell{flex:0 0 auto;width:clamp(280px,26vw,440px);aspect-ratio:3/4;overflow:hidden;
  border-radius:3px;background:var(--navy)}
.dmq-cell img{width:100%;height:100%;object-fit:cover;display:block}

/* PC: extra breathing room above (VIEW ALL BUSINESS) and below (Interview) the marquee.
   Applied as padding on the mercury-backed sections, NOT margin on .dmq — a transparent
   margin here reveals the dark fixed hero behind the scroll content (shows as a black band). */
@media(min-width:901px){
  .sv-all{margin-top:clamp(4.5rem,7vw,7rem)}   /* more space above the VIEW ALL BUSINESS button */
  .services{padding-bottom:clamp(7rem,11vw,11rem)}
  /* Interview only: double the side margin (1.5rem → 3rem) */
  .projects{padding-top:clamp(7rem,12vw,11.5rem);padding-left:3rem;padding-right:3rem}
}

@media(max-width:900px){
  .dmq{height:clamp(300px,82vw,440px)}
  .dmq-rot{width:172%;transform:translate(-50%,-50%) rotate(-15deg)}
  .dmq-cell{width:clamp(190px,50vw,280px)}
}
@media(prefers-reduced-motion:reduce){
  .dmq-track{transform:none !important}
}