/* Our services on about.html: the lab's take 15 (Overlay), ported.
   Tall Geospatial plume tile on the left with its copy on a soft scrim; Business ERP network and words-only
   Public on the right. Source: services-bento-variations.html, V15. */

/* .grid (marzex.css, marzex-site.css) sets the container width and gutter, the same as the heading above */
.sb__grid { list-style: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: .75rem; }
.sb__tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 1.25rem; background: #0e0e10; color: #f4f4f2; border: 1px solid rgba(255, 255, 255, .07); }

.sb__body { margin-top: auto; padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: .5rem; max-width: none; }
.sb__obj { margin: 0; color: rgba(244, 244, 242, .72); }
.sb__obj .dim { color: rgba(244, 244, 242, .48); }
.sb__title { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.sb__blurb { margin: 0; color: rgba(244, 244, 242, .74); font-size: .875rem; line-height: 1.45; }
.sb__apps { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sb__apps li { padding: .35rem .7rem; border-radius: var(--r-pill, 100px); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .75rem; line-height: 1.2; }

/* Geospatial: plume fills the tall tile, copy sits over its bottom edge */
.sb__geo { grid-column: 1; grid-row: 1 / 3; min-height: 32rem; }
.sb__geo .sb__plume { position: absolute; inset: 0; }
.sb__geo .sb__plume canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sb__geo .sb__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 7rem 2rem 2rem; gap: .5rem; background: linear-gradient(to top, #0e0e10 52%, rgba(14, 14, 16, 0)); }

/* Business: ERP network above its copy */
.sb__biz { grid-column: 2; grid-row: 1; }
.sb__bi { display: grid; gap: .875rem; padding: 1rem 1.25rem 0; }
.sb__biz .sb__body { padding: 1.25rem 1.5rem 1.5rem; }

/* Public: words only */
.sb__pub { grid-column: 2; grid-row: 2; }
.sb__pub .sb__body { margin-top: auto; padding: 1.25rem 1.5rem 1.5rem; }

/* ERP network: modules are nodes, users sit on the edges, dash trails run user -> module -> module -> user */
.erp { display: block; width: 100%; height: auto; overflow: visible; }
.erp__link { stroke: rgba(244, 244, 242, .16); stroke-width: 1; }
.erp__flow { stroke: #f4f4f2; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 90; animation: erp-run var(--d, 5s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes erp-run { to { stroke-dashoffset: -100; } }
.erp__mod rect { fill: #121212; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.erp__mod text { fill: rgba(244, 244, 242, .94); font-size: 12px; font-weight: 500; font-family: inherit; }
.erp__mod .erp__sub { fill: rgba(244, 244, 242, .5); font-size: 9.5px; font-weight: 400; }
.erp__user circle { fill: #0b0b0b; stroke: rgba(255, 255, 255, .42); stroke-width: 1; }
.erp__ini { fill: #f4f4f2; font-size: 10.5px; font-weight: 500; font-family: inherit; }
.erp__name { fill: rgba(244, 244, 242, .56); font-size: 10px; font-family: inherit; }
@media (prefers-reduced-motion: reduce) { .erp__flow { display: none; } }

/* Small screens: one column, Geospatial first, every card keeps its copy */
@media (max-width: 768px) {
  .sb__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sb__tile { grid-column: 1 / -1; grid-row: auto; }
  .sb__geo { min-height: 30rem; }
  .sb__geo .sb__body { padding: 7rem 1.5rem 1.5rem; }
}