/* Studio interpretation of The Grid's command rail and inset display. */
.grid-suite,
.drift-spotlight {
  --grid-accent: #75efed;
  --grid-rgb: 117 239 237;
  --grid-base: #08121d;
  --grid-muted: #b3c7d6;
  --grid-rim: rgb(var(--grid-rgb) / .32);
  --grid-trace: rgb(var(--grid-rgb) / .1);
}

.grid-suite[data-sector="cybersecurity-development"],
[data-sector="cybersecurity-development"] .grid-suite {
  --grid-accent: #ffb981;
  --grid-rgb: 255 185 129;
}

.grid-suite {
  position: relative;
  isolation: isolate;
  margin-block: clamp(16px, 3vw, 36px) clamp(70px, 9vw, 143px);
}

.grid-suite::before {
  content: "";
  position: absolute;
  inset: -20px -16px -54px;
  z-index: -2;
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(var(--grid-trace) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, var(--grid-trace) 1px, transparent 1px) 0 0 / 36px 36px;
  mask-image: radial-gradient(ellipse at 35% 15%, #000 10%, transparent 72%);
}

.grid-suite .eyebrow, .grid-suite .text-link, .grid-suite .article-body a {
  color: var(--grid-accent);
}

.grid-suite a:focus-visible,
.grid-motion-control:focus-visible {
  outline-color: var(--grid-accent, var(--cyan));
}

.grid-back,
.grid-motion-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  border: 1px solid var(--grid-rim, #4d737c);
  background: #0c202b;
  color: var(--grid-accent, var(--cyan));
  padding: .55rem .85rem;
  font: 500 .75rem/1.4 var(--mono);
  text-align: start;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.grid-back {
  margin-bottom: 16px;
}

.grid-back:hover,
.grid-motion-control:hover {
  border-color: var(--grid-accent, var(--cyan));
  background: #183444;
  color: #fff;
}

.grid-console {
  position: relative;
  isolation: isolate;
  min-height: clamp(295px, 35vw, 505px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--grid-rim);
  background: var(--grid-base);
}

/* Draw the corner markers above the image without clipping focus outlines. */
.grid-console::before,
.grid-frame::before,
.drift-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-accent), var(--grid-accent)) left top / 22px 2px no-repeat,
    linear-gradient(var(--grid-accent), var(--grid-accent)) left top / 2px 22px no-repeat,
    linear-gradient(var(--grid-accent), var(--grid-accent)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--grid-accent), var(--grid-accent)) right bottom / 2px 22px no-repeat;
}

.grid-console::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #070f1af9 1%, #070f1ae8 30%, #070f1a59 73%, #070f1a34),
    linear-gradient(0deg, #070f1ae6, transparent 67%),
    repeating-linear-gradient(180deg, transparent 0 3px, rgb(145 226 232 / .045) 3px 4px);
}

.grid-console-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
  object-position: 66% 50%;
}

.grid-console-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  max-width: 925px;
  padding: clamp(26px, 5vw, 70px);
}

.grid-console-content h1 {
  font-size: clamp(3.3rem, 7.5vw, 7.2rem);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.grid-console-content .intro {
  max-width: 57ch;
  margin-bottom: 0;
}

.grid-console .grid-motion-control {
  position: absolute;
  inset: 11px 11px auto auto;
  z-index: 3;
  min-height: 44px;
  background: #0a1925ef;
}

.grid-radar {
  position: absolute;
  z-index: 0;
  top: clamp(63px, 5vw, 84px);
  right: clamp(18px, 4vw, 56px);
  width: clamp(108px, 18vw, 238px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--grid-rim);
  border-radius: 50%;
  opacity: .52;
  pointer-events: none;
  box-shadow: 0 0 34px rgb(var(--grid-rgb) / .13), inset 0 0 30px rgb(var(--grid-rgb) / .09);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--grid-rim) 50%, transparent calc(50% + 1px)),
    linear-gradient(transparent calc(50% - 1px), var(--grid-rim) 50%, transparent calc(50% + 1px)),
    repeating-radial-gradient(circle, transparent 0 19%, var(--grid-rim) 20%, transparent 21% 24%);
}

.grid-sweep {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 291deg, rgb(var(--grid-rgb) / .04) 310deg, rgb(var(--grid-rgb) / .34) 357deg, var(--grid-accent) 359deg, transparent 360deg);
  animation: grid-sweep 16s linear infinite;
}

.grid-radar i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grid-accent);
  box-shadow: 0 0 10px var(--grid-accent);
}

.grid-radar i:nth-of-type(1) { left: 65%; top: 31%; }
.grid-radar i:nth-of-type(2) { left: 27%; top: 52%; }
.grid-radar i:nth-of-type(3) { left: 72%; top: 62%; }

@keyframes grid-sweep {
  to { transform: rotate(1turn); }
}

.grid-bench {
  display: grid;
  grid-template-columns: minmax(195px, 250px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 38px);
  margin-top: clamp(20px, 3vw, 42px);
}

.grid-rail {
  position: sticky;
  top: 96px;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--grid-rim);
  background: linear-gradient(135deg, #112734, #08131f 55%);
}

.grid-rail :is(header, h2, h3, .eyebrow) {
  margin: 0;
  padding: .62rem .72rem;
  color: var(--grid-accent);
  font: 500 .74rem/1.35 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.grid-rail header :is(h2, h3, .eyebrow) { padding: 0; }
.grid-rail :is(ul, ol) { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }

.grid-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .62rem .74rem;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  background: #0c1a26;
  color: #d7e7ef;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.32;
  overflow-wrap: anywhere;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.grid-rail a:hover,
.grid-rail a:focus-visible {
  border-color: var(--grid-rim);
  color: #fff;
  background: #173141;
}

.grid-rail a[data-active] {
  border-left-color: var(--grid-rim);
  color: var(--grid-accent);
}

.grid-rail a[aria-current="page"] {
  border-color: var(--grid-rim);
  border-left-color: var(--grid-accent);
  background: linear-gradient(90deg, rgb(var(--grid-rgb) / .17), transparent), #132635;
  color: #fff;
}

.grid-rail a[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-left: auto;
  background: var(--grid-accent);
  box-shadow: 0 0 10px rgb(var(--grid-rgb) / .68);
}

.grid-content { min-width: 0; }
.grid-content > h2 { font-size: clamp(2.5rem, 4.7vw, 4.5rem); }

.grid-topic-list {
  display: grid;
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.grid-topic {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 18px;
  align-items: start;
  min-height: 76px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid var(--grid-rim);
  border-left: 3px solid var(--grid-rim);
  background: linear-gradient(105deg, #102332, #0b1722 72%);
}

.grid-topic:hover,
.grid-topic:focus-visible {
  border-left-color: var(--grid-accent);
  background: linear-gradient(105deg, #183849, #0f1d2c 72%);
}

.grid-topic strong {
  grid-area: 1 / 1;
  color: var(--white);
  font: 800 clamp(1.6rem, 3.5vw, 2.55rem)/1.05 var(--display);
}

.grid-topic p {
  grid-area: 2 / 1;
  margin: 0;
  color: var(--grid-muted);
  line-height: 1.55;
  font-size: .91rem;
}

.grid-topic > span:last-child {
  grid-area: 1 / 2 / span 2;
  align-self: center;
  color: var(--grid-accent);
  font-size: 1.25rem;
}

.grid-discipline {
  grid-template-columns: clamp(104px, 18vw, 198px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.1vw, 24px);
}

.grid-discipline img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--grid-rim);
  object-fit: cover;
}

.grid-discipline p { margin-top: 5px; }
.grid-topic.grid-discipline > span:last-child { grid-area: auto; }

.grid-frame,
.drift-spotlight {
  position: relative;
  min-width: 0;
  border: 1px solid var(--grid-rim);
  background: linear-gradient(138deg, #102430, #0a1522 70%);
}

.grid-frame {
  padding: clamp(21px, 3.4vw, 43px);
}

.grid-frame > :last-child,
.grid-module-aside > :last-child { margin-bottom: 0; }
.grid-topic-list + .grid-frame,
.grid-frame + .grid-module-aside { margin-top: 18px; }
.grid-frame h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.grid-frame :is(p, li) { max-width: 74ch; }
.grid-frame .text-link { align-items: center; min-height: 44px; margin-inline-end: 18px; }
.grid-frame .text-link:last-child { margin-inline-end: 0; }

.grid-module-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.grid-module-aside > aside { grid-column: 1 / -1; }
.grid-module-aside .grid-frame { padding: clamp(16px, 2.7vw, 28px); }
.grid-module-aside h2 { font-size: clamp(1.85rem, 3.1vw, 2.65rem); }
.grid-module-aside ul:not(.grid-signal-tags) { padding-inline-start: 1.15em; }

.grid-signal-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-block: 17px 0;
  padding: 0;
  list-style: none;
}

.grid-signal-tags > * {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--grid-rim);
  background: #0a1723;
  color: var(--grid-muted);
  font: 500 .68rem/1.35 var(--mono);
  letter-spacing: .05em;
}

.drift-spotlight .feature-label { border-color: var(--grid-rim); color: var(--grid-accent); }
.drift-spotlight .video-frame { border-color: var(--grid-rim); }
.drift-spotlight .video-frame video { aspect-ratio: 7 / 3; }

.grid-pulse {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-inline-end: .46rem;
  border-radius: 50%;
  background: var(--grid-accent, var(--cyan));
  vertical-align: .06em;
  animation: grid-pulse 2.8s ease-in-out infinite;
}

@keyframes grid-pulse {
  50% { opacity: .58; box-shadow: 0 0 12px var(--grid-accent, var(--cyan)); }
}

body:not([data-motion-ready]) :is(.grid-sweep, .grid-pulse),
body[data-motion-paused] :is(.grid-sweep, .grid-pulse) {
  animation-play-state: paused;
}

@media (max-width: 780px) {
  .grid-bench { grid-template-columns: minmax(0, 1fr); }
  .grid-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-rail :is(header, h2, h3, .eyebrow, ul, ol) { grid-column: 1 / -1; }
  .grid-rail :is(ul, ol) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-suite::before { inset-inline: -8px; }
}

@media (max-width: 492px) {
  .grid-console::after {
    background:
      linear-gradient(90deg, #070f1aea, #070f1a69),
      linear-gradient(0deg, #070f1af7 10%, #070f1a17 92%);
  }
  .grid-console-content { padding: 32px 18px 24px; }
  .grid-console-content h1 { font-size: clamp(2.65rem, 12.5vw, 3.8rem); }
  .grid-radar { opacity: .25; }
  .grid-rail a { padding-inline: .52rem; }
  .grid-discipline { grid-template-columns: 76px minmax(0, 1fr); }
  .grid-topic.grid-discipline > span:last-child { display: none; }
  .grid-module-aside { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.grid-sweep, .grid-pulse) { animation: none; }
}