/* ============================================================
   04 · UTILITIES  (container, reveals, shared interaction polish)
   ============================================================ */

/* page container */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(24px,6vw,72px)}

/* Shared arrow glyph. The width/height MUST be here on the base rule: an
   inline <svg> with no CSS size falls back to the replaced-element default
   (300x150), so any new context that doesn't have its own `.arw` rule would
   render a 150px-tall arrow and blow the button open. Context rules below
   (.case .view .arw, .tile .arw, ...) still override this. */
.arw{width:18px;height:18px;flex:0 0 auto}

/* shared marquee scroll — used by the clients carousel (.ctrack) and the
   CTA bands (.mtrack). Lives here so any page can use it without loading
   the clients section stylesheet. */
@keyframes mslide{to{transform:translateX(-100%)}}

/* ---- scroll reveals (toggled by js/ui/reveals.js) ---- */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

.sec.html .rv{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sec.html .rv.in{opacity:1;transform:none}

/* staggered rows (js also sets an inline delay) */
.svc-list .srow.rv{transition-delay:calc(var(--i,0)*55ms)}

/* ---- cursor + focus ---- */
a,button,.srow,.tile,.case,[role="button"]{cursor:pointer}
a:focus-visible,.srow:focus-visible,.tile:focus-visible,.case:focus-visible{
  outline:2px solid var(--b500);outline-offset:3px;border-radius:4px}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .rv,.sec.html .rv{opacity:1;transform:none}
  .case,.tile,.srow{transition:none}
}