/* Service cards follow the supplied hover reference. All rules are section scoped. */
.services-section { padding-block:132px 120px; }
.services-section .services-title { max-width:1100px; margin:0 auto 64px; text-align:center; }
.services-section .services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.services-section .service-item { --service-inset:clamp(12px,1.38889vw,20px); --service-rest-inset:0px; --service-unit:clamp(44px,5vw,72px); --service-step:calc(var(--service-unit) + 4px); --service-wire:rgba(244,244,244,.65); --service-face-fill:rgba(244,244,244,.07); position:relative; min-width:0; border-radius:8px; background:transparent; transition:background-color var(--motion-hover) var(--motion-ease); }
.services-section .service-item--design { --service-tile:var(--purple); --service-tint:var(--tint-purple); }
.services-section .service-item--development { --service-tile:var(--ink); --service-tint:var(--tint-ink); }
.services-section .service-item--complete { --service-tile:var(--lime); --service-tint:var(--tint-lime); --service-rest-inset:var(--service-inset); --service-wire:rgba(32,29,29,.5); --service-face-fill:rgba(32,29,29,.04); background:var(--service-tint); }
.services-section .service-badge { position:absolute; z-index:1; top:calc(var(--service-inset) + 14px); left:calc(var(--service-inset) + 14px); display:inline-flex; align-items:center; padding:6px 10px; border-radius:4px; color:var(--paper); background:var(--ink); font-size:14px; font-weight:500; line-height:1.2; letter-spacing:-.01em; }
.services-section .service-card-inner { height:100%; padding:0; }
.services-section .service-media { position:relative; width:100%; aspect-ratio:1; }
.services-section .service-visual { position:absolute; inset:var(--service-rest-inset); display:grid; place-items:center; width:auto; height:auto; overflow:hidden; border-radius:8px; background:var(--service-tile); perspective:900px; transition:inset var(--motion-hover) var(--motion-ease); }
.services-section .service-copy { display:flow-root; padding:0 var(--service-inset) var(--service-inset); }
.services-section .service-object { width:60%; aspect-ratio:1; display:grid; place-items:center; transform-style:preserve-3d; }
.services-section .service-cluster { position:relative; width:var(--service-unit); height:var(--service-unit); transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(-32deg); transition:transform 700ms var(--motion-ease); }
.services-section .service-unit { position:absolute; inset:0; display:block; transform-style:preserve-3d; transform:translate3d(calc(var(--cube-x) * var(--service-step)),calc(var(--cube-y) * var(--service-step)),calc(var(--cube-z) * var(--service-step))); transition:transform 700ms var(--motion-ease); }
.services-section .service-face { position:absolute; inset:0; display:block; border:1px solid var(--service-wire); background:var(--service-face-fill); }
.services-section .service-face--front { transform:translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-face--back { transform:rotateY(180deg) translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-face--left { transform:rotateY(-90deg) translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-face--right { transform:rotateY(90deg) translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-face--top { transform:rotateX(90deg) translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-face--bottom { transform:rotateX(-90deg) translateZ(calc(var(--service-unit) / 2)); }
.services-section .service-item h3 { margin:28px 0 16px; font-size:var(--card-title-size); font-weight:var(--card-title-weight); line-height:var(--card-title-line); letter-spacing:var(--card-title-tracking); }
.services-section .service-item p { max-width:38ch; margin:0; font-size:18px; font-weight:450; line-height:1.45; letter-spacing:-.01em; }
@media (hover:hover) and (pointer:fine) {
  .services-section .service-item:hover { --service-step:calc(var(--service-unit) + 22px); background:var(--service-tint); }
  .services-section .service-item:hover .service-visual { inset:var(--service-inset); }
  .services-section .service-item:hover .service-cluster { transform:rotateX(-14deg) rotateY(38deg); }
  .services-section .service-item--development:hover .service-cluster { transform:rotateX(18deg) rotateY(-62deg); }
  .services-section .service-item--complete:hover .service-cluster { transform:rotateX(-35deg) rotateY(25deg); }
}
@media (max-width:1100px) {
  .services-section { padding-block:112px; }
  .services-section .services-title { margin-bottom:56px; }
}
@media (max-width:760px) {
  .services-section { padding-block:88px; }
  .services-section .services-title { margin-bottom:40px; text-align:left; }
  .services-section .services-grid { grid-template-columns:1fr; gap:32px; }
  .services-section .service-item { --service-inset:16px; --service-rest-inset:16px; background:var(--service-tint); }
  .services-section .service-item h3 { margin:8px 0 16px; }
  .services-section .service-item p { max-width:44ch; font-size:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .services-section .service-item,
  .services-section .service-card-inner,
  .services-section .service-visual,
  .services-section .service-cluster,
  .services-section .service-unit { transition:none; }
  .services-section .service-item,
  .services-section .service-item:hover { --service-step:calc(var(--service-unit) + 4px); }
  .services-section .service-item .service-cluster,
  .services-section .service-item:hover .service-cluster { transform:rotateX(-22deg) rotateY(-32deg); }
  .services-section .service-item:hover .service-visual { inset:var(--service-rest-inset); }
}