body { --teal-dot: rgba(185, 216, 202, .14); background-image: radial-gradient(circle, var(--teal-dot) .8px, transparent 1.1px); background-size: 24px 24px; }
.hero-card:has(.capability-stage) { padding-bottom: 0; }
.capability-stage { margin-top: clamp(48px, 6vw, 88px); margin-inline: calc(-1 * var(--card-pad)); overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); text-align: left; }

#reel { scroll-margin-top: -96px; }
.capability-grid { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; color: var(--paper); }

.grid-tiles { --tile-height: clamp(250px, 27vw, 390px); --tile-gap: clamp(16px, 2vw, 28px); position: relative; height: clamp(540px, 51vw, 760px); }
.capability-grid { padding: 0; background: #07282b; background-image: radial-gradient(circle, var(--teal-dot) .8px, transparent 1.1px); background-size: 24px 24px; }
.capability-grid::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 62% 28% at 50% 50%, #07282be0 0%, #07282b90 48%, #07282b00 100%); }
.grid-tile { --duration: 32s; --phase: 0; position: absolute; top: 0; width: 30%; height: var(--tile-height); overflow: hidden; border-radius: clamp(10px, 1.3vw, 20px); background: #07282b; box-shadow: 0 4px 10px #00141640, 0 20px 38px #00141666, 0 48px 80px -16px #00141699; transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); animation: grid-flow var(--duration) linear infinite; animation-delay: calc(var(--duration) * var(--phase) / -3); }
.grid-tile:nth-child(3n+1) { left: 2%; }
.grid-tile:nth-child(3n+2) { left: 35%; --duration: 38s; animation-direction: reverse; }
.grid-tile:nth-child(3n) { left: 68%; --duration: 35s; }
.grid-tile:nth-child(n+4):nth-child(-n+6) { --phase: 1; }
.grid-tile:nth-child(n+7) { --phase: 2; }
@keyframes grid-flow { from { translate: 0 calc(-100% - var(--tile-gap)); } to { translate: 0 calc(200% + 2 * var(--tile-gap)); } }
.capability-stage[data-paused="true"] .grid-tile { animation-play-state: paused; }
.grid-tile.is-changing { opacity: 0; transform: translateY(14px); }
.grid-tile.is-placeholder { background: repeating-linear-gradient(-45deg, #193f42 0 14px, #234a4c 14px 28px); box-shadow: inset 0 0 0 1px #b9d8ca25, 0 4px 10px #00141640, 0 20px 38px #00141666, 0 48px 80px -16px #00141699; }
.grid-tile.is-placeholder video, .grid-tile.is-placeholder img, .grid-tile video[hidden], .grid-tile img[hidden] { display: none; }
.grid-tile video, .grid-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; background: #e3ebe8; }

.grid-tile { isolation: isolate; backface-visibility: hidden; }
.grid-tile video, .grid-tile img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: translateZ(0); backface-visibility: hidden; }
.grid-tile[data-piece="47-fell"] video, .grid-tile[data-piece="47-fell"] img { background: #050708; }

.grid-tile[data-piece="54-map-editor"] video, .grid-tile[data-piece="54-map-editor"] img { object-fit: contain; object-position: center; background: #19211f; }

.grid-tile[data-piece="56-atlas-terminal"] video, .grid-tile[data-piece="56-atlas-terminal"] img { object-fit: contain; object-position: center; background: #171a1d; }
.grid-tile[data-piece="57-folio-grid"] video, .grid-tile[data-piece="57-folio-grid"] img { object-fit: contain; object-position: center; background: #f8f8f5; }
.grid-tile[data-piece="58-forma-editor"] video, .grid-tile[data-piece="58-forma-editor"] img { object-fit: contain; object-position: center; background: #171717; }
.grid-tile:not(.is-placeholder)::after { content: ""; position: absolute; inset: 0; background: var(--deep); opacity: .12; pointer-events: none; }
.grid-tile::after { transition: opacity 1s var(--ease-out); }
.capability-stage.has-featured-tile .grid-tile:not(.is-featured)::after { opacity: .26; }
.grid-tile.is-featured { z-index: 1; box-shadow: 0 14px 50px #00141688; }
.grid-tile.is-featured::after { opacity: .02; }
.grid-lockup { position: absolute; z-index: 2; top: 50%; left: 20px; right: 20px; transform: translateY(-50%); text-align: center; pointer-events: none; text-shadow: 0 3px 36px #001b20b0; }
.grid-eyebrow { color: var(--sea-glass); font-size: clamp(11px, 1vw, 14px); }
.grid-lockup h2 { margin: 0 auto; max-width: 1050px; font-size: clamp(54px, 8.5vw, 140px); line-height: .9; font-weight: 600; letter-spacing: -.045em; }
.grid-description { display: table; max-width: min(700px, 100%); margin: clamp(16px, 1.8vw, 26px) auto 0; padding: 10px 20px; border-radius: 999px; background: #04393d80; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #cfdfd9; font-size: clamp(12px, 1.15vw, 16px); line-height: 1.5; text-wrap: balance; opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .4s var(--ease-out); }
.grid-lockup.tags-visible:not(.is-changing) .grid-description { opacity: 1; transform: translateY(0); }
.grid-title-word { display: inline-block; overflow: hidden; overflow: clip; vertical-align: top; padding: .12em .04em .2em; margin: -.12em -.04em -.2em; }
.grid-title-letter { display: inline-block; animation: grid-title-in 650ms var(--ease-out) calc(var(--letter-index) * 22ms) both; }
.grid-lockup.is-changing .grid-title-letter { animation: grid-title-out 220ms cubic-bezier(.55, 0, 1, .45) calc(var(--letter-index) * 8ms) both; }
@keyframes grid-title-in {
  from { transform: translateY(115%) rotate(3deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}
@keyframes grid-title-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-115%); opacity: 0; }
}
.grid-index { position: absolute; z-index: 2; right: 20px; top: 50%; transform: translateY(-50%); font-size: 11px; font-variant-numeric: tabular-nums; color: #b9d8ca80; writing-mode: vertical-rl; letter-spacing: .1em; }
@media (max-width: 700px) {
  .hero-card:has(.capability-stage) { --card-pad: 20px; }
  .capability-grid { padding: 0; }
  .grid-tiles { --tile-height: clamp(160px, 36vw, 250px); height: 510px; }
  .grid-tile { display: block; width: 44%; --phase: 0; animation-name: grid-flow-mobile; animation-delay: calc(var(--duration) * var(--phase) / -4); }
  .grid-tile:nth-child(odd) { left: 4%; --duration: 32s; animation-direction: normal; }
  .grid-tile:nth-child(even) { left: 52%; --duration: 38s; animation-direction: reverse; }
  .grid-tile:nth-child(n+3):nth-child(-n+4) { --phase: 1; }
  .grid-tile:nth-child(n+5):nth-child(-n+6) { --phase: 2; }
  .grid-tile:nth-child(n+7):nth-child(-n+8) { --phase: 3; }
  .grid-tile:nth-child(n+9) { display: none; }
  .grid-lockup { left: 18px; right: 18px; }
  .grid-lockup h2 { font-size: clamp(48px, 12vw, 76px); }
  .grid-index { display: none; }
}
@keyframes grid-flow-mobile { from { translate: 0 calc(-100% - var(--tile-gap)); } to { translate: 0 calc(300% + 3 * var(--tile-gap)); } }
@media (prefers-reduced-motion: reduce) {
  .grid-tile, .grid-lockup, .grid-description { transition: none; }
  .grid-tile::after { transition: none; }
  .grid-title-letter, .grid-lockup.is-changing .grid-title-letter { animation: none; }
  .grid-tile { animation: none; translate: none; }
  .grid-tile:nth-child(n+4) { top: calc(var(--tile-height) + var(--tile-gap)); }
  .grid-tile:nth-child(n+7) { display: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .grid-tile:nth-child(-n+2) { top: 0; }
  .grid-tile:nth-child(n+3):nth-child(-n+4) { top: calc(var(--tile-height) + var(--tile-gap)); }
  .grid-tile:nth-child(n+5):nth-child(-n+6) { top: calc(2 * (var(--tile-height) + var(--tile-gap))); }
}

.grid-pause { position: absolute; z-index: 3; right: 20px; bottom: 20px; padding: 10px 16px; border: 1px solid #b9d8ca66; border-radius: 999px; background: #04393dcc; color: var(--paper); font: 500 12px/1.4 var(--sans); cursor: pointer; }
.grid-pause[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .grid-pause { display: none; } }