/* Marketing composition. Keep these expressive treatments out of product UI. */
.button { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); border-radius: var(--ds-radius-control); min-height: 44px; transition: background var(--ds-duration) var(--ds-ease), transform var(--ds-duration) var(--ds-ease); }
.nav-cta, .film-toggle { border-radius: var(--ds-radius-control); }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
.tile { border-radius: var(--ds-radius-panel); border-color: var(--ds-border); transition: transform var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease); }
.tile:hover, .tile:focus-within { border-color: var(--tile-color); }
.tile-top, .tile-copy { padding-left: var(--ds-space-8); padding-right: var(--ds-space-8); }
.tile-top { padding-block: var(--ds-space-6); }
.tile-copy { padding-block: var(--ds-space-8); }
.tile-copy .stage { font-size: 10px; line-height: 1.5; letter-spacing: 1px; color: var(--ds-muted); }
.tile p { color: var(--ds-muted); }
.tile-cta { font-size: 12px; }
.hive { --tile-color: var(--ds-hive); }
.net { --tile-color: var(--ds-net); }
.galaxy { --tile-color: var(--ds-galaxy); }
.curriculum { --tile-color: var(--ds-curriculum); }
.vision { --tile-color: var(--ds-vision); }
.tiles { gap: var(--ds-space-6); padding-bottom: var(--ds-space-12); }
.section { border-top: 1px solid var(--ds-border); }
.service { padding: var(--ds-space-6); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); background: linear-gradient(145deg, #14232b88, #10192333); }
.services { gap: var(--ds-space-6); }
.service h3 { margin-top: var(--ds-space-8); }
.service p { font-size: 14px; min-height: 0; }
.service ul { font-size: 12px; }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-6); }
.contact-actions .text-link { color: var(--ds-muted); }
.hero-copy h1 em, .contact h2 em { font-family: var(--ds-serif); }
@media (max-width: 700px) {
  .tile-top, .tile-copy, .vision .tile-copy { padding-left: var(--ds-space-6); padding-right: var(--ds-space-6); }
  .service { padding: var(--ds-space-6); }
  .film-toggle { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .button { transition: none; } }