:root {
  --service-bg: #091321;
  --service-panel: #10243c;
  --service-panel-strong: #142f50;
  --service-line: #2b496b;
  --service-blue: #8cc4ff;
  --service-orange: #ff965c;
  --service-white: #f4f8ff;
  --service-muted: #a5b6ca;
}

.service-body {
  background: var(--service-bg);
  color: var(--service-white);
}

.service-shell,
.article-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 110px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 26px;
  color: #7f96b0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breadcrumbs a:hover {
  color: var(--service-blue);
}

.breadcrumbs span[aria-hidden="true"] {
  color: #456482;
}

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr);
  min-height: 660px;
  border: 1px solid var(--service-line);
  overflow: hidden;
  background: #0b1829;
}

.service-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px);
  background:
    radial-gradient(circle at 0 0, rgba(61, 139, 255, .14), transparent 35rem),
    #0b1829;
}

.service-kicker,
.article-kicker,
.section-kicker {
  margin: 0;
  color: var(--service-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.service-hero h1,
.article-hero h1 {
  margin: 18px 0 24px;
  font: 800 clamp(62px, 7.7vw, 112px)/.84 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.service-hero h1 em,
.article-hero h1 em {
  color: var(--service-blue);
  font-style: normal;
}

.service-lead,
.article-lead {
  max-width: 660px;
  margin: 0;
  color: var(--service-muted);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.68;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 30px;
}

.service-actions a,
.article-cta a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid #4f9aff;
  background: #1b5fa8;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.service-actions a:hover,
.article-cta a:hover {
  border-color: #8cc4ff;
  background: #2877c8;
  transform: translateY(-2px);
}

.service-actions .secondary-service-action {
  border-color: var(--service-line);
  background: transparent;
  color: #c9d7e7;
}

.service-actions .secondary-service-action:hover {
  border-color: #5799ed;
  background: #142f50;
}

.service-hero-media,
.article-hero-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #07101b;
}

.service-hero-media picture,
.service-hero-media img,
.article-hero-media picture,
.article-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.service-hero-media img,
.article-hero-media img {
  object-fit: cover;
}

.service-hero-media::after,
.article-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b1829 0, rgba(11, 24, 41, .48) 14%, transparent 42%);
  pointer-events: none;
}

.console-platform-hero {
  grid-template-columns: 1fr;
}

.console-platform-hero .service-hero-copy {
  padding: clamp(34px, 4.5vw, 58px);
}

.console-platform-hero .service-hero-copy h1 {
  font-size: clamp(62px, 7.2vw, 102px);
}

.console-platform-hero .service-hero-media {
  min-height: 0;
  aspect-ratio: 3 / 2;
  border-top: 1px solid var(--service-line);
}

.console-platform-hero .service-hero-media picture,
.console-platform-hero .service-hero-media img {
  height: auto;
  aspect-ratio: 3 / 2;
}

.console-platform-hero .service-hero-media img {
  object-fit: contain;
}

.console-platform-hero .service-hero-media::after {
  background: linear-gradient(180deg, rgba(11, 24, 41, .32), transparent 18%);
}

.customer-launch-status.service-status {
  margin: 0 0 28px;
  padding: 17px 19px;
  border-radius: 8px;
}

.customer-launch-status.service-status strong {
  font-size: 26px;
}

.customer-launch-status.service-status span {
  font-size: 12px;
}

.service-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-right: 1px solid var(--service-line);
  border-bottom: 1px solid var(--service-line);
  border-left: 1px solid var(--service-line);
}

.service-trust div {
  min-height: 132px;
  padding: 25px;
  border-right: 1px solid var(--service-line);
}

.service-trust div:last-child {
  border-right: 0;
}

.service-trust span {
  display: block;
  margin-bottom: 20px;
  color: var(--service-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-trust strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.service-trust small {
  color: var(--service-muted);
  font-size: 11px;
  line-height: 1.55;
}

.service-section,
.article-section {
  padding: 86px 0;
  border-bottom: 1px solid var(--service-line);
}

.service-section:last-of-type,
.article-section:last-of-type {
  border-bottom: 0;
}

.service-section-head {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 34px;
}

.service-section h2,
.article-section h2 {
  margin: 10px 0 0;
  font: 800 clamp(42px, 5vw, 72px)/.9 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.service-section-head > p,
.service-section > p,
.article-section > p {
  max-width: 760px;
  margin: 0;
  color: var(--service-muted);
  font-size: 14px;
  line-height: 1.78;
}

.service-grid-2,
.service-grid-3,
.model-grid,
.guide-grid {
  display: grid;
  gap: 14px;
}

.service-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid-3,
.model-grid,
.guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-item,
.model-card,
.guide-card {
  position: relative;
  min-height: 220px;
  padding: 27px;
  border: 1px solid var(--service-line);
  background: var(--service-panel);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.guide-card {
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--service-white);
  text-decoration: none;
}

.guide-card picture,
.guide-card img {
  display: block;
  width: 100%;
}

.guide-card img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.guide-card-body {
  padding: 23px;
}

.guide-card .guide-card-body > span {
  display: block;
  color: var(--service-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.guide-card .guide-card-body h3 {
  margin: 19px 0 9px;
}

.guide-card .guide-card-body p {
  margin: 0;
}

.service-item:hover,
.model-card:hover,
.guide-card:hover {
  border-color: #5799ed;
  background: var(--service-panel-strong);
  transform: translateY(-4px);
}

.service-item > span,
.model-card > span,
.guide-card > span {
  display: block;
  color: var(--service-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.service-item h3,
.model-card h3,
.guide-card h3 {
  margin: 26px 0 10px;
  font: 700 31px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.service-item p,
.model-card p,
.guide-card p,
.service-item li,
.model-card li {
  color: var(--service-muted);
  font-size: 12px;
  line-height: 1.65;
}

.service-item ul,
.model-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.service-item li + li,
.model-card li + li {
  margin-top: 5px;
}

.service-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 48px;
  align-items: center;
}

.service-feature.reverse {
  grid-template-columns: minmax(360px, .8fr) minmax(0, 1fr);
}

.service-feature-copy p,
.service-feature-copy li {
  color: var(--service-muted);
  font-size: 14px;
  line-height: 1.75;
}

.service-feature-copy ul {
  padding-left: 19px;
}

.service-feature-media {
  min-height: 390px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--service-line);
  background: #07101b;
}

.service-feature-media picture,
.service-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.service-feature-media img {
  min-height: 390px;
  object-fit: cover;
}

.service-feature-media figcaption {
  padding: 11px 14px;
  border-top: 1px solid var(--service-line);
  background: #0d1b2e;
  color: #7f96b0;
  font-size: 10px;
  line-height: 1.5;
}

.service-callout {
  padding: 28px 30px;
  border: 1px solid #96603f;
  border-left: 5px solid var(--service-orange);
  background: rgba(117, 60, 28, .28);
}

.service-callout strong {
  display: block;
  margin-bottom: 9px;
  color: #ffd6be;
  font: 700 27px "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.service-callout p {
  margin: 0;
  color: #d6b8a7;
  font-size: 13px;
  line-height: 1.7;
}

.console-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.console-gallery figure {
  display: grid;
  grid-template-rows: auto 1fr;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--service-line);
  background: #07101b;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.console-gallery figure:hover {
  transform: translateY(-3px);
  border-color: #3f74a9;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.console-gallery-wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.58fr) minmax(260px, .42fr);
  grid-template-rows: minmax(0, 1fr) !important;
}

.console-gallery-media {
  display: block;
  overflow: hidden;
  background: #06101d;
}

.console-gallery picture,
.console-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.console-gallery img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  transition: transform 260ms ease;
}

.console-gallery figure:hover img {
  transform: scale(1.015);
}

.console-gallery figcaption {
  display: flex;
  flex-direction: column;
  min-height: 118px;
  padding: 18px 20px;
  border-top: 1px solid var(--service-line);
  background: var(--service-panel);
}

.console-gallery-wide figcaption {
  justify-content: center;
  min-height: 0;
  border-top: 0;
  border-left: 1px solid var(--service-line);
}

.console-gallery strong {
  display: block;
  font: 700 25px "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.console-gallery span {
  display: block;
  margin-top: 7px;
  color: var(--service-muted);
  font-size: 12px;
  line-height: 1.55;
}

.console-gallery figcaption a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  color: #86c0ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.console-gallery figcaption a:hover {
  color: #fff;
}

.article-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  min-height: 610px;
  border: 1px solid var(--service-line);
  background: #0b1829;
}

.article-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 25px;
  color: #7f96b0;
  font-size: 11px;
  font-weight: 700;
}

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 70px;
  padding: 76px 0;
}

.article-copy {
  max-width: 780px;
}

.article-copy h2 {
  margin: 54px 0 15px;
  font: 700 39px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.article-copy h2:first-child {
  margin-top: 0;
}

.article-copy h3 {
  margin: 34px 0 10px;
  font-size: 17px;
}

.article-copy p,
.article-copy li {
  color: #b8c7d8;
  font-size: 15px;
  line-height: 1.82;
}

.article-copy ul,
.article-copy ol {
  padding-left: 22px;
}

.article-copy li + li {
  margin-top: 8px;
}

.article-note {
  margin: 28px 0;
  padding: 22px 24px;
  border-left: 4px solid var(--service-blue);
  background: var(--service-panel);
}

.article-note.warning {
  border-left-color: var(--service-orange);
  background: rgba(117, 60, 28, .28);
}

.article-note strong {
  display: block;
  margin-bottom: 7px;
  color: #fff;
}

.article-note p {
  margin: 0;
  font-size: 13px;
}

.article-aside {
  align-self: start;
  position: sticky;
  top: 100px;
  padding: 24px;
  border: 1px solid var(--service-line);
  background: var(--service-panel);
}

.article-aside strong {
  display: block;
  margin-bottom: 15px;
  font: 700 28px "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.article-aside a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--service-line);
  color: var(--service-muted);
  font-size: 12px;
}

.article-aside a:hover {
  color: var(--service-blue);
}

.article-aside a:last-child {
  border-bottom: 0;
}

.article-cta {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-top: 20px;
  padding: 40px;
  border: 1px solid #4f9aff;
  background: linear-gradient(135deg, #174e8f, #0f345f);
}

.article-cta h2 {
  margin: 0 0 8px;
  font: 700 42px "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.article-cta p {
  margin: 0;
  color: #c3d3e5;
  font-size: 13px;
}

.article-cta p a {
  padding: 0;
  border: 0;
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1050px) {
  .service-hero,
  .article-hero {
    grid-template-columns: 1fr;
  }

  .service-hero-media,
  .article-hero-media {
    min-height: 480px;
  }

  .service-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-trust div:nth-child(2) {
    border-right: 0;
  }

  .service-trust div:nth-child(-n+2) {
    border-bottom: 1px solid var(--service-line);
  }

  .service-section-head,
  .service-feature,
  .service-feature.reverse,
  .article-body {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .article-aside {
    position: static;
  }
}

@media (max-width: 780px) {
  .service-shell,
  .article-shell {
    width: min(100% - 28px, 1240px);
  }

  .service-hero h1,
  .article-hero h1 {
    font-size: clamp(54px, 17vw, 82px);
  }

  .service-hero-copy,
  .article-hero-copy {
    padding: 30px 24px 38px;
  }

  .service-hero-media,
  .article-hero-media {
    min-height: 340px;
  }

  .service-hero-media::after,
  .article-hero-media::after {
    background: linear-gradient(180deg, #0b1829 0, transparent 32%);
  }

  .service-grid-2,
  .service-grid-3,
  .model-grid,
  .guide-grid,
  .console-gallery {
    grid-template-columns: 1fr;
  }

  .console-gallery-wide {
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr !important;
  }

  .console-gallery-wide figcaption {
    border-top: 1px solid var(--service-line);
    border-left: 0;
  }

  .service-trust {
    grid-template-columns: 1fr;
  }

  .service-trust div,
  .service-trust div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--service-line);
  }

  .service-trust div:last-child {
    border-bottom: 0;
  }

  .service-section,
  .article-section {
    padding: 62px 0;
  }

  .service-feature-media,
  .service-feature-media img {
    min-height: 290px;
  }

  .article-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 30px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-actions a,
  .service-item,
  .model-card,
  .guide-card,
  .console-gallery figure,
  .console-gallery img {
    transition: none;
  }
}