/* ThreeUI <KoiStudies /> as the "Planned and checked by people" deck. The wrapper and frame
   carry the component's own inline styles (KoiStudies.tsx); only the height is ours. The four
   tiles stay underneath as plain links, so every service is one tap away without the deck. */
.koi-studies {
  position: relative;
  overflow: hidden;
  background: #05070a;
  pointer-events: auto;
  height: clamp(560px, 82vh, 860px);
  margin: var(--space-4, 32px) 0 0;
  width: 100%;
  border-radius: 14px;
}
.koi-studies iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05070a;
}
.koi-studies[data-state="loading"] iframe { opacity: 0; }
.koi-studies iframe { transition: opacity .5s ease; }

.tile-row.tile-row--links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-4, 32px); margin-top: var(--space-4, 32px); }
.tile-row--links picture { display: none; }
.tile-row--links li { padding: 16px 0; border-top: 1px solid var(--rule); }
.tile-row--links h3 { margin: 0 0 6px; }
.tile-row--links h3 a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
@media (max-width: 860px) { .tile-row.tile-row--links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .koi-studies { height: 600px; }
  .tile-row.tile-row--links { grid-template-columns: 1fr; }
}

/* One link under the deck, following the card on top (koi-deck.js). The four-link list stays for
   screen readers and crawlers, hidden from sight only once the deck has reported in. */
.koi-link { margin: var(--space-3, 20px) 0 0; text-align: center; }
.koi-link a {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap, 44px);
  font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.koi-link a b { font-weight: 400; color: var(--accent); }
.koi-link a:hover, .koi-link a:focus-visible { color: var(--text); }
.koi-studies:not(.is-live) + .koi-link { display: none; }
.tile-row--links.is-behind-deck {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}