@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Nunito+Sans:wght@600;700;800&display=swap");

:root {
  --ink: #06172b;
  --ink-2: #102a47;
  --navy: #031225;
  --navy-2: #071d35;
  --blue: #075ed8;
  --blue-2: #0092ff;
  --cyan: #55c7ff;
  --line: #d7e0ea;
  --muted: #5f7083;
  --paper: #f7f9fc;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
.apps-title,
.button,
.topbar-cta,
.nav-links {
  font-family: "Nunito Sans", Inter, Arial, Helvetica, sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

.line-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.line-icon[data-icon]::before {
  content: "";
  display: inline-block;
}

.site-shell {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 34px;
  background: var(--white);
  border-bottom: 1px solid #edf1f6;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 132px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.footer-logo {
  width: 190px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-width: 76px;
  height: 45px;
  color: #0d376b;
  font-size: 35px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  text-shadow: 11px 0 0 #3e4652;
}

.brand-copy,
.footer-brand div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-copy strong,
.footer-brand strong {
  font-size: 18px;
  font-weight: 800;
}

.brand-copy span,
.footer-brand span {
  font-size: 15px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  color: #0d1520;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 72px;
}

.nav-links a.is-active::before {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
}

.nav-links a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 21px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--blue);
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 72px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  z-index: 30;
  display: grid;
  width: 276px;
  padding: 8px;
  color: var(--white);
  text-transform: none;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(9 35 64 / 98%), rgb(3 18 37 / 98%)),
    var(--navy);
  border: 1px solid rgb(151 205 255 / 28%);
  border-radius: 4px;
  box-shadow: 0 18px 36px rgb(0 17 38 / 34%);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  visibility: hidden;
}

.nav-dropdown::before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  content: "";
  background: rgb(9 35 64 / 98%);
  border-top: 1px solid rgb(151 205 255 / 28%);
  border-left: 1px solid rgb(151 205 255 / 28%);
  transform: translateX(-50%) rotate(45deg);
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  color: rgb(255 255 255 / 84%);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: 3px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--white);
  background: rgb(0 117 255 / 22%);
  transform: translateX(3px);
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 22px;
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  background: #004ba8;
  border: 1px solid #0d63c7;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgb(0 55 130 / 18%);
}

.hero {
  position: relative;
  min-height: 376px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, #021224 0%, #041b32 45%, #031225 100%),
    var(--navy);
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
}

.hero::before {
  background:
    linear-gradient(90deg, rgb(2 12 24 / 84%) 0%, rgb(2 12 24 / 54%) 23%, rgb(2 12 24 / 8%) 48%, rgb(2 12 24 / 30%) 74%, rgb(2 12 24 / 58%) 100%),
    linear-gradient(180deg, rgb(1 11 24 / 4%) 0%, rgb(1 11 24 / 48%) 100%);
}

.hero::after {
  background: radial-gradient(circle at 70% 29%, rgb(90 181 255 / 18%), transparent 27%),
    linear-gradient(0deg, rgb(1 10 21 / 44%) 0%, transparent 42%);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity 800ms ease, transform 1200ms ease;
}

.banner-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-img {
  position: absolute;
  user-select: none;
  pointer-events: none;
  transition: opacity 800ms ease, transform 1200ms ease, filter 800ms ease;
}

.hero-room {
  top: 0;
  right: 0;
  width: 56%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0.96;
  filter: brightness(1.18) saturate(1.12) contrast(1.08);
}

.hero-mountain {
  top: -10%;
  left: 25%;
  width: 48%;
  height: 115%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  filter: brightness(1.16) contrast(1.12) saturate(0.94);
  mix-blend-mode: screen;
}

.hero-cdu {
  right: 6%;
  bottom: 24px;
  z-index: 2;
  width: 42%;
  min-width: 470px;
  max-width: 680px;
  filter: brightness(1.14) contrast(1.08) saturate(1.04) drop-shadow(0 26px 33px rgb(0 0 0 / 46%));
}

.banner-slide[data-slide="technology"] .hero-room {
  right: 0;
  width: 100%;
  opacity: 0.98;
  filter: brightness(1.16) saturate(1.2) contrast(1.1);
}

.banner-slide[data-slide="technology"] .hero-cdu {
  right: 2%;
  bottom: 0;
  width: 36%;
  min-width: 390px;
  opacity: 0.9;
  transform: translateX(8%) scale(0.9);
}

.banner-slide[data-slide="reliable"] .hero-mountain {
  left: 0;
  width: 62%;
  opacity: 0.84;
  filter: brightness(1.16) contrast(1.1) saturate(0.92);
  mix-blend-mode: normal;
}

.banner-slide[data-slide="reliable"] .hero-cdu {
  right: 4%;
  bottom: 9px;
  width: 55%;
  max-width: 830px;
  opacity: 0.92;
  transform: scale(1.03);
}

.banner-slide[data-slide="global"] .hero-mountain {
  left: 0;
  top: -16%;
  width: 78%;
  height: 128%;
  opacity: 0.96;
  filter: brightness(1.16) contrast(1.12) saturate(0.96);
  mix-blend-mode: screen;
}

.banner-slide[data-slide="global"] .hero-room {
  right: 0;
  width: 42%;
  opacity: 0.82;
  filter: brightness(1.16) saturate(1.2) contrast(1.12);
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  min-height: 316px;
  padding: 31px 66px 96px 70px;
}

.hero-copy {
  width: min(680px, 52vw);
}

.hero h1 {
  margin: 0;
  font-size: 35px;
  font-weight: 800;
  line-height: 1.16;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.hero h1 span:not(:first-child) {
  color: #076dff;
}

.hero-copy p {
  max-width: 560px;
  margin: 17px 0 20px;
  color: rgb(255 255 255 / 91%);
  font-size: 15px;
  line-height: 1.42;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 36px;
  padding: 0 21px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 3px;
}

.button-primary {
  color: var(--white);
  background: linear-gradient(180deg, #0c66d5, #003f9e);
  border: 1px solid #0d72ea;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), 0 8px 20px rgb(0 41 104 / 28%);
}

.button-secondary {
  color: var(--white);
  background: rgb(0 11 29 / 37%);
  border: 1px solid rgb(255 255 255 / 62%);
}

.button.compact {
  min-height: 30px;
  padding: 0 18px;
  font-size: 11px;
}

.hero-statement {
  align-self: flex-end;
  width: 330px;
  margin: 0 220px 13px 0;
  color: var(--white);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.11;
  text-transform: uppercase;
  text-shadow: 0 10px 24px rgb(0 0 0 / 55%);
}

.hero-statement span {
  display: block;
}

.hero-pillars {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 850px;
  height: 58px;
  padding-left: 70px;
  background: linear-gradient(90deg, rgb(0 13 31 / 92%) 0%, rgb(0 13 31 / 88%) 76%, rgb(0 13 31 / 0%) 100%);
}

.hero-pillar {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding-right: 25px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-right: 1px solid rgb(255 255 255 / 15%);
  outline-offset: -4px;
  transition: background-color 240ms ease, color 240ms ease;
}

.hero-pillar:last-child {
  border-right: 0;
}

.hero-pillar:hover,
.hero-pillar.is-active {
  color: var(--white);
  background: linear-gradient(90deg, rgb(0 109 255 / 28%), rgb(0 109 255 / 8%));
}

.hero-pillar.is-active svg {
  color: #71cfff;
}

.hero-pillar svg {
  flex: 0 0 auto;
}

.why {
  position: relative;
  z-index: 5;
  padding: 16px 66px 22px;
  background: #f6f8fb;
  border-bottom: 1px solid var(--line);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
  color: var(--ink-2);
}

.section-title span {
  width: 45px;
  height: 2px;
  background: #244b75;
}

.section-title h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 84px;
  padding: 0 18px;
  text-align: center;
  border-right: 1px solid #dbe2ea;
}

.why-item:last-child {
  border-right: 0;
}

.why-item svg {
  color: #123b70;
}

.why-item h3 {
  margin: 7px 0 5px;
  color: #062147;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.why-item p {
  max-width: 155px;
  margin: 0;
  color: #1f2733;
  font-size: 11px;
  line-height: 1.28;
}

.applications {
  position: relative;
  padding: 10px 70px 12px;
  background: #021224;
}

.product-showcase {
  isolation: isolate;
}

.product-showcase::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgb(0 111 255 / 0%) 0%, rgb(0 111 255 / 11%) 48%, rgb(0 111 255 / 0%) 100%),
    linear-gradient(180deg, rgb(0 16 33 / 0%) 0%, rgb(0 47 98 / 22%) 100%);
  opacity: 0.75;
}

.apps-title {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  min-width: 270px;
  padding: 5px 34px 7px;
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(180deg, #0a315e, #06162c);
  border: 1px solid rgb(255 255 255 / 25%);
  border-top: 0;
  transform: translateX(-50%);
  overflow: hidden;
}

.apps-title::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 50%;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 34%), transparent);
  animation: title-scan 4.8s ease-in-out infinite;
}

.apps-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1248px;
  margin: 0 auto;
  padding-top: 4px;
}

.app-card {
  position: relative;
  display: block;
  min-height: 142px;
  overflow: hidden;
  color: var(--white);
  background: #06162b;
  border: 1px solid rgb(210 229 255 / 38%);
  border-radius: 4px;
  transform: translateY(0);
  animation: product-rise 700ms ease both;
  box-shadow: 0 0 0 rgb(0 132 255 / 0%);
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.app-card:nth-child(2) {
  animation-delay: 100ms;
}

.app-card:nth-child(3) {
  animation-delay: 200ms;
}

.app-card:nth-child(4) {
  animation-delay: 300ms;
}

.app-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgb(0 13 28 / 0%) 0%, rgb(0 13 28 / 66%) 68%, rgb(0 13 28 / 84%) 100%),
    linear-gradient(90deg, rgb(3 17 34 / 12%) 0%, rgb(3 17 34 / 0%) 65%);
  transition: opacity 320ms ease;
}

.app-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background: linear-gradient(115deg, transparent 0%, transparent 35%, rgb(255 255 255 / 24%) 47%, transparent 59%, transparent 100%);
  opacity: 0;
  transform: translateX(-70%);
  transition: opacity 320ms ease, transform 640ms ease;
}

.app-card:hover,
.app-card:focus-visible {
  border-color: rgb(96 197 255 / 86%);
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgb(0 65 145 / 36%);
}

.app-card:hover::before,
.app-card:focus-visible::before {
  opacity: 1;
  transform: translateX(70%);
}

.app-card:hover::after,
.app-card:focus-visible::after {
  opacity: 0.54;
}

.app-card img {
  width: 100%;
  height: 100%;
  min-height: 142px;
  object-fit: cover;
  opacity: 0.96;
  transform: scale(1);
  transition: transform 560ms ease, opacity 320ms ease, filter 320ms ease;
}

.app-card:hover img,
.app-card:focus-visible img {
  opacity: 1;
  filter: saturate(1.16) contrast(1.12);
  transform: scale(1.07);
}

.app-card:nth-child(2) img {
  object-position: center 55%;
}

.app-card:nth-child(3) img {
  object-fit: contain;
  padding: 9px 0 24px;
  background: linear-gradient(90deg, #0c2543, #061120);
}

.app-card-content {
  position: absolute;
  right: 14px;
  bottom: 11px;
  left: 14px;
  z-index: 2;
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 11px;
  align-items: center;
  transform: translateY(0);
  transition: transform 320ms ease;
}

.app-card:hover .app-card-content,
.app-card:focus-visible .app-card-content {
  transform: translateY(-4px);
}

.app-card-content h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.app-card-content p {
  margin: 0;
  color: rgb(255 255 255 / 86%);
  font-size: 12px;
  line-height: 1.24;
}

.card-link {
  display: inline-flex;
  margin-top: 6px;
  color: #74d5ff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.app-card:hover .card-link,
.app-card:focus-visible .card-link {
  opacity: 1;
  transform: translateY(0);
}

@keyframes product-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title-scan {
  0%,
  42% {
    transform: translateX(0);
  }

  70%,
  100% {
    transform: translateX(320%);
  }
}

.validation {
  display: grid;
  grid-template-columns: minmax(370px, 46%) minmax(420px, 54%);
  min-height: 232px;
  background: var(--paper);
}

.validation-copy {
  position: relative;
  z-index: 2;
  padding: 24px 30px 24px 72px;
  background:
    linear-gradient(90deg, #f8fafc 0%, #f8fafc 72%, rgb(248 250 252 / 0%) 100%),
    var(--paper);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  color: #173a62;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.eyebrow span {
  width: 16px;
  height: 1px;
  background: #173a62;
}

.validation h2 {
  margin: 0;
  color: #08244b;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.validation-copy > p:not(.eyebrow) {
  max-width: 360px;
  margin: 5px 0 11px;
  color: #263443;
  font-size: 11px;
  line-height: 1.24;
}

.testing-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
  margin-bottom: 14px;
}

.validation-copy .button {
  margin-top: 2px;
}

.testing-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #092b57;
  text-align: center;
}

.testing-item span {
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.validation-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.validation-visual::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, rgb(248 250 252 / 88%) 0%, rgb(248 250 252 / 10%) 40%, rgb(248 250 252 / 0%) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 35%) 100%);
}

.validation-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  filter: saturate(0.96) brightness(1.12) contrast(1.12);
}

.company {
  display: grid;
  grid-template-columns: 24% 31% 20% 25%;
  min-height: 260px;
  color: var(--white);
  background: #041326;
}

.facility-photo {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  background: #0a2746;
}

.facility-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgb(0 18 41 / 28%) 0%, rgb(0 18 41 / 58%) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 36%) 100%);
}

.facility-photo img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) brightness(0.98) contrast(1.08);
}

.facility-photo span {
  position: absolute;
  top: 35px;
  left: 35%;
  z-index: 2;
  color: rgb(75 178 255 / 65%);
  font-size: 48px;
  font-style: italic;
  font-weight: 800;
  text-shadow: 14px 0 0 rgb(255 255 255 / 35%);
}

.about-panel,
.contact-panel {
  background: #06172d;
}

.about-panel {
  padding: 18px 23px 15px 24px;
}

.about-panel > p:first-child,
.support-panel > p {
  margin: 0 0 4px;
  color: rgb(255 255 255 / 78%);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.about-panel h2 {
  margin: 0;
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
}

.about-panel > p:not(:first-child) {
  max-width: 510px;
  margin: 5px 0 12px;
  color: rgb(255 255 255 / 80%);
  font-size: 10px;
  line-height: 1.32;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stats div {
  min-width: 0;
}

.stats strong {
  display: block;
  color: var(--white);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}

.stats span {
  display: block;
  margin-top: 4px;
  color: rgb(255 255 255 / 78%);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.18;
  text-transform: uppercase;
}

.support-panel {
  position: relative;
  min-height: 260px;
  padding: 18px 18px 14px 22px;
  overflow: hidden;
  color: var(--ink);
  background: #f6f8fb;
}

.support-panel > p {
  color: #102c4b;
}

.support-panel ul,
.contact-panel ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.support-panel li {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: #203349;
  font-size: 11px;
  font-weight: 700;
}

.support-panel li svg {
  color: #0b4f9f;
}

.map-mark {
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 112px;
  height: 82px;
  opacity: 0.32;
  background:
    radial-gradient(circle at 42% 40%, #8a9aab 0 3px, transparent 4px),
    radial-gradient(circle at 50% 48%, #8a9aab 0 4px, transparent 5px),
    radial-gradient(circle at 58% 38%, #8a9aab 0 3px, transparent 4px),
    radial-gradient(circle at 63% 57%, #8a9aab 0 3px, transparent 4px),
    radial-gradient(circle at 35% 56%, #8a9aab 0 3px, transparent 4px),
    radial-gradient(circle at 70% 44%, #8a9aab 0 2px, transparent 3px);
  border: 1px solid #9eacbb;
  border-radius: 50%;
}

.contact-panel {
  padding: 13px 30px 12px 34px;
}

.contact-panel .brand-mark {
  width: 56px;
  min-width: 56px;
  height: 31px;
  color: #4ab7ff;
  font-size: 27px;
  text-shadow: 8px 0 0 rgb(255 255 255 / 34%);
}

.footer-brand strong,
.footer-brand span {
  color: var(--white);
}

.footer-brand strong {
  font-size: 16px;
}

.footer-brand span {
  font-size: 11px;
}

.contact-panel > p {
  margin: 9px 0 9px;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.18;
  text-transform: uppercase;
}

.contact-panel > p span {
  display: block;
}

.contact-panel li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 5px;
  color: rgb(255 255 255 / 82%);
  font-size: 10px;
  line-height: 1.22;
}

.contact-panel li svg {
  color: rgb(255 255 255 / 78%);
}

.socials {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #06172d;
  background: var(--white);
  border-radius: 3px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 44px;
  color: rgb(255 255 255 / 82%);
  font-size: 10px;
  background: #051225;
}

.footer nav {
  display: flex;
  gap: 16px;
}

.subhero {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  color: var(--white);
  background: #031225;
}

.subhero::before,
.subhero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.subhero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(1 12 28 / 88%) 0%, rgb(1 12 28 / 58%) 42%, rgb(1 12 28 / 18%) 100%),
    radial-gradient(circle at 72% 26%, rgb(0 119 255 / 24%), transparent 34%);
}

.subhero::after {
  z-index: 2;
  background: linear-gradient(0deg, rgb(1 9 20 / 60%) 0%, transparent 52%);
}

.subhero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  filter: brightness(1.08) contrast(1.1) saturate(1.06);
}

.subhero .hero-cdu-page {
  right: 4%;
  bottom: 0;
  left: auto;
  inset: auto 4% 0 auto;
  width: min(48%, 720px);
  height: auto;
  opacity: 0.92;
  object-fit: contain;
  filter: brightness(1.08) contrast(1.08) saturate(1.04) drop-shadow(0 28px 34px rgb(0 0 0 / 44%));
}

.subhero-content {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 120px));
  min-height: 300px;
  margin: 0 auto;
  padding: 56px 0 48px;
}

.subhero-kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: #76cfff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.subhero-kicker::before,
.section-kicker::before {
  width: 28px;
  height: 2px;
  content: "";
  background: currentColor;
}

.subhero h1 {
  max-width: 670px;
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
}

.subhero h1 span {
  display: block;
  color: #086fff;
}

.subhero p {
  max-width: 560px;
  margin: 18px 0 0;
  color: rgb(255 255 255 / 86%);
  font-size: 16px;
  line-height: 1.55;
}

.page-section {
  padding: 46px 70px;
  background: #f6f8fb;
}

.page-section.dark {
  color: var(--white);
  background: #021224;
}

.page-inner {
  width: min(1248px, 100%);
  margin: 0 auto;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.section-heading h2 {
  max-width: 720px;
  margin: 0;
  color: #08244b;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.dark .section-heading h2 {
  color: var(--white);
}

.section-heading p {
  max-width: 420px;
  margin: 0;
  color: #445468;
  font-size: 14px;
  line-height: 1.55;
}

.dark .section-heading p {
  color: rgb(255 255 255 / 72%);
}

.solution-grid,
.detail-grid,
.application-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.detail-grid.four-column {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.solution-card,
.detail-card,
.application-detail {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  color: var(--white);
  background: #06172d;
  border: 1px solid rgb(183 216 255 / 24%);
  border-radius: 4px;
}

.solution-card img,
.application-detail img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  opacity: 0.96;
  filter: contrast(1.08) saturate(1.08);
}

.solution-card:nth-child(2) img,
.application-detail:nth-child(2) img {
  object-position: center;
}

.solution-card:nth-child(3) img {
  object-fit: contain;
  padding: 4px 0;
  background: linear-gradient(90deg, #09213b, #050f1f);
}

.solution-card-content,
.application-detail-content,
.detail-card {
  padding: 18px;
}

.solution-card h3,
.detail-card h3,
.application-detail h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
}

.solution-card p,
.detail-card p,
.application-detail p {
  margin: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 13px;
  line-height: 1.5;
}

.detail-card {
  min-height: 170px;
  background: #fdfefe;
  color: var(--ink);
  border-color: #d8e2ec;
}

.detail-card h3 {
  color: #092850;
}

.detail-card p {
  color: #4a596b;
}

.detail-card svg {
  color: #005dcc;
  margin-bottom: 13px;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: stretch;
}

.split-copy {
  padding: 34px;
  background: #06172d;
  color: var(--white);
  border-radius: 4px;
}

.split-copy h2 {
  margin: 0;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.split-copy p {
  color: rgb(255 255 255 / 76%);
  font-size: 14px;
  line-height: 1.65;
}

.check-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  color: rgb(255 255 255 / 84%);
  font-size: 13px;
}

.check-list svg {
  color: #6bd3ff;
}

.split-visual {
  min-height: 330px;
  overflow: hidden;
  background: #071a31;
  border-radius: 4px;
}

.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  background: #cfdbe7;
  border-radius: 4px;
}

.metric-strip div {
  padding: 20px;
  background: #ffffff;
}

.metric-strip strong {
  display: block;
  color: #07306a;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.metric-strip span {
  display: block;
  margin-top: 7px;
  color: #536274;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.process-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.process-step {
  min-height: 160px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 4px;
}

.process-step span {
  color: #006bdf;
  font-size: 13px;
  font-weight: 800;
}

.process-step h3 {
  margin: 10px 0 7px;
  color: #092850;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.process-step p {
  margin: 0;
  color: #536274;
  font-size: 13px;
  line-height: 1.55;
}

.system-path-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f6fb 100%),
    #f6f8fb;
}

.system-path-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.system-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 210px;
  padding: 18px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 8%, rgb(85 199 255 / 28%), transparent 32%),
    linear-gradient(145deg, #09284c, #06172d);
  border: 1px solid rgb(183 216 255 / 24%);
  border-radius: 4px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.system-step::after {
  position: absolute;
  inset: auto 18px 18px auto;
  width: 34px;
  height: 2px;
  content: "";
  background: #55c7ff;
  opacity: 0.75;
}

.system-step:hover,
.system-step:focus-visible {
  border-color: rgb(96 197 255 / 86%);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgb(0 65 145 / 20%);
}

.step-number {
  color: rgb(255 255 255 / 48%);
  font-size: 11px;
  font-weight: 800;
}

.system-step svg {
  margin: 22px 0 14px;
  color: #79d7ff;
}

.system-step h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.16;
  text-transform: uppercase;
}

.system-step p {
  margin: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 12px;
  line-height: 1.5;
}

.resources-section {
  background: #ffffff;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resource-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  background: #06172d;
  border: 1px solid rgb(183 216 255 / 24%);
  border-radius: 4px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.resource-card:hover,
.resource-card:focus-within {
  border-color: rgb(96 197 255 / 86%);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgb(0 65 145 / 22%);
}

.resource-card img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  background: #071a31;
  filter: saturate(1.08) contrast(1.1);
}

.resource-card > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
}

.resource-card h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
}

.resource-card p:not(.product-tag) {
  margin: 0 0 15px;
  color: rgb(255 255 255 / 74%);
  font-size: 13px;
  line-height: 1.55;
}

.resource-card .text-link {
  margin-top: 8px;
}

.resources-all-link {
  margin-top: 24px;
}

.application-market-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.muted-link {
  color: rgb(255 255 255 / 68%);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
}

.contact-methods,
.contact-form-panel {
  background: #06172d;
  color: var(--white);
  border-radius: 4px;
}

.contact-methods {
  padding: 28px;
}

.contact-methods h2,
.contact-form-panel h2 {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.contact-method {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 13px;
  padding: 16px 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.contact-method svg {
  color: #6bd3ff;
}

.contact-method strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: uppercase;
}

.contact-method span,
.contact-method a {
  color: rgb(255 255 255 / 78%);
  font-size: 13px;
  line-height: 1.45;
}

.contact-form-panel {
  padding: 28px;
  background:
    linear-gradient(135deg, rgb(0 84 188 / 28%), transparent 42%),
    #06172d;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.contact-form .form-full {
  grid-column: 1 / -1;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: rgb(255 255 255 / 78%);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--white);
  background: rgb(0 12 29 / 58%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 3px;
}

.contact-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(255 255 255 / 72%) 50%),
    linear-gradient(135deg, rgb(255 255 255 / 72%) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.contact-form select option {
  color: var(--ink);
  background: var(--white);
}

.contact-form textarea {
  min-height: 112px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgb(255 255 255 / 38%);
}

.product-list-hero .hero-cdu-page {
  right: 2%;
  bottom: -16px;
  width: min(50%, 700px);
}

.product-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  position: relative;
  display: grid;
  grid-template-rows: 178px 1fr;
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  background: #06172d;
  border: 1px solid rgb(183 216 255 / 26%);
  border-radius: 4px;
  box-shadow: 0 0 0 rgb(0 132 255 / 0%);
  animation: product-rise 720ms ease both;
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.product-card:nth-child(2) {
  animation-delay: 90ms;
}

.product-card:nth-child(3) {
  animation-delay: 180ms;
}

.product-card:nth-child(4) {
  animation-delay: 270ms;
}

.product-card:nth-child(5) {
  animation-delay: 360ms;
}

.product-card:nth-child(6) {
  animation-delay: 450ms;
}

.product-card:hover,
.product-card:focus-within {
  border-color: rgb(96 197 255 / 86%);
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgb(0 65 145 / 34%);
}

.product-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background: linear-gradient(115deg, transparent 0%, transparent 36%, rgb(255 255 255 / 23%) 49%, transparent 61%, transparent 100%);
  opacity: 0;
  transform: translateX(-76%);
  transition: opacity 320ms ease, transform 680ms ease;
}

.product-card:hover::before,
.product-card:focus-within::before {
  opacity: 1;
  transform: translateX(76%);
}

.product-card-media {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgb(34 144 255 / 26%), transparent 45%),
    linear-gradient(140deg, #102d50, #04111f);
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  filter: contrast(1.08) saturate(1.06) drop-shadow(0 18px 24px rgb(0 0 0 / 30%));
  transform: scale(1);
  transition: transform 520ms ease, filter 320ms ease;
}

.product-card:nth-child(3) .product-card-media img,
.product-card:nth-child(4) .product-card-media img,
.product-card:nth-child(5) .product-card-media img,
.product-card:nth-child(6) .product-card-media img {
  object-fit: cover;
  padding: 0;
  filter: saturate(1.08) contrast(1.1);
}

.product-card:hover .product-card-media img,
.product-card:focus-within .product-card-media img {
  filter: saturate(1.16) contrast(1.12) drop-shadow(0 22px 28px rgb(0 0 0 / 34%));
  transform: scale(1.05);
}

.product-card-media span {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 8px;
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgb(2 18 40 / 78%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 3px;
}

.product-card-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 17px;
}

.product-tag {
  margin: 0 0 8px;
  color: #74d5ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.product-card h3 {
  margin: 0 0 9px;
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.product-card p:not(.product-tag) {
  margin: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 12px;
  line-height: 1.48;
}

.product-spec-row {
  display: grid;
  gap: 8px;
  margin: 15px 0;
}

.product-spec-row div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.product-spec-row dt,
.product-spec-row dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
}

.product-spec-row dt {
  color: rgb(255 255 255 / 55%);
  font-weight: 800;
  text-transform: uppercase;
}

.product-spec-row dd {
  color: var(--white);
  font-weight: 800;
  text-align: right;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: #74d5ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(420px, 52%) minmax(360px, 48%);
  min-height: 430px;
  color: var(--white);
  background:
    radial-gradient(circle at 28% 36%, rgb(48 151 255 / 24%), transparent 36%),
    linear-gradient(120deg, #031225 0%, #071d35 48%, #021224 100%);
}

.product-detail-hero > img {
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  padding: 34px;
  filter: drop-shadow(0 28px 34px rgb(0 0 0 / 48%));
}

.product-detail-hero.in-rack-hero > img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  opacity: 0.94;
  filter: saturate(1.08) contrast(1.1);
}

.product-detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 54px 70px 54px 28px;
}

.breadcrumb {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  color: #8edcff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-detail-copy h1 {
  margin: 0;
  color: var(--white);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
}

.product-detail-copy > p:not(.product-tag) {
  max-width: 610px;
  margin: 18px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: 16px;
  line-height: 1.58;
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 24px;
  align-items: start;
}

.product-main-copy {
  min-width: 0;
}

.product-main-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #08244b;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.product-main-copy > p:not(.section-kicker) {
  max-width: 760px;
  margin: 16px 0 0;
  color: #405267;
  font-size: 15px;
  line-height: 1.68;
}

.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.product-feature-grid div {
  min-width: 0;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 4px;
}

.product-feature-grid h3 {
  margin: 0 0 8px;
  color: #092850;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-feature-grid p {
  margin: 0;
  color: #536274;
  font-size: 13px;
  line-height: 1.5;
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.product-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #071a31;
  border-radius: 4px;
}

.spec-panel {
  min-width: 0;
  padding: 22px;
  background: #06172d;
  color: var(--white);
  border: 1px solid rgb(183 216 255 / 22%);
  border-radius: 4px;
  box-shadow: 0 18px 36px rgb(6 23 45 / 10%);
}

.spec-panel h2 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr {
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.spec-table th,
.spec-table td {
  padding: 12px 0;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.4;
}

.spec-table th {
  width: 38%;
  padding-right: 14px;
  color: rgb(255 255 255 / 62%);
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.spec-table td {
  color: rgb(255 255 255 / 88%);
  font-weight: 700;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.related-products a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 18px 20px;
  color: #092850;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 4px;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.related-products a:hover,
.related-products a:focus-visible {
  border-color: rgb(0 111 255 / 42%);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgb(6 31 66 / 12%);
}

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

.case-card,
.capability-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  background: #06172d;
  border: 1px solid rgb(183 216 255 / 24%);
  border-radius: 4px;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.case-card:hover,
.case-card:focus-visible,
.capability-card:hover,
.capability-card:focus-visible {
  border-color: rgb(96 197 255 / 82%);
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgb(0 65 145 / 30%);
}

.case-card img,
.capability-card img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  background: #071a31;
}

.case-card:first-child img {
  object-fit: contain;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 36%, rgb(34 144 255 / 22%), transparent 45%),
    #071a31;
}

.case-card > div,
.capability-card > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
}

.case-card h3,
.capability-card h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
}

.case-card p:not(.product-tag),
.capability-card p:not(.product-tag) {
  margin: 0;
  color: rgb(255 255 255 / 76%);
  font-size: 13px;
  line-height: 1.58;
}

.case-facts {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.case-facts div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.case-facts dt,
.case-facts dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}

.case-facts dt {
  color: rgb(255 255 255 / 54%);
  font-weight: 800;
  text-transform: uppercase;
}

.case-facts dd {
  color: var(--white);
  font-weight: 800;
}

.media-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: 14px;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.media-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  background: #071a31;
  border: 1px solid rgb(183 216 255 / 24%);
  border-radius: 4px;
}

.media-card.large {
  grid-column: span 2;
  grid-row: span 2;
}

.media-card img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.1);
  transition: transform 420ms ease, filter 300ms ease;
}

.media-card:hover img {
  filter: saturate(1.16) contrast(1.14);
  transform: scale(1.04);
}

.media-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 42%, rgb(0 12 28 / 86%) 100%);
}

.media-card h3 {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.solution-portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-portfolio-grid .solution-card {
  min-height: 315px;
}

.solution-portfolio-grid .solution-card:nth-child(3) img {
  object-fit: contain;
  background: #071a31;
}

.solution-detail-hero > img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  opacity: 0.9;
  filter: saturate(1.04) contrast(1.08);
}

.solution-card img[src$="-transparent.png"],
.application-detail img[src$="-transparent.png"] {
  object-fit: contain;
  object-position: center;
  padding: 10px 14px;
  background:
    radial-gradient(circle at 50% 38%, rgb(34 144 255 / 24%), transparent 48%),
    #071a31;
  filter: contrast(1.08) saturate(1.04) drop-shadow(0 14px 18px rgb(0 0 0 / 34%));
}

.product-card .product-card-media img[src$="-transparent.png"] {
  object-fit: contain;
  object-position: center;
  padding: 12px 16px;
  filter: contrast(1.08) saturate(1.04) drop-shadow(0 16px 20px rgb(0 0 0 / 36%));
}

.product-card:hover .product-card-media img[src$="-transparent.png"],
.product-card:focus-within .product-card-media img[src$="-transparent.png"] {
  filter: contrast(1.1) saturate(1.1) drop-shadow(0 22px 28px rgb(0 0 0 / 42%));
  transform: scale(1.04);
}

.product-detail-hero > img[src$="-transparent.png"] {
  object-fit: contain;
  object-position: center;
  padding: 34px;
  opacity: 1;
}

.product-gallery img[src$="-transparent.png"],
.resource-card img[src$="-transparent.png"],
.case-card img[src$="-transparent.png"],
.capability-card img[src$="-transparent.png"] {
  object-fit: contain;
  object-position: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 38%, rgb(34 144 255 / 22%), transparent 48%),
    #071a31;
  filter: contrast(1.08) saturate(1.04) drop-shadow(0 14px 18px rgb(0 0 0 / 34%));
}

.subhero img.hero-cdu-page[src$="-transparent.png"] {
  object-fit: contain;
  object-position: center;
  filter: contrast(1.08) saturate(1.05) drop-shadow(0 24px 30px rgb(0 0 0 / 42%));
}

.solution-detail-hero > img[src$="-transparent.png"] {
  object-fit: contain;
  padding: 34px;
  opacity: 1;
  filter: contrast(1.06) saturate(1.03) drop-shadow(0 28px 34px rgb(0 0 0 / 48%));
}

.architecture-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.architecture-node {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 154px;
  padding: 20px;
  background: linear-gradient(145deg, #0b2b50, #06172d);
  border: 1px solid rgb(145 208 255 / 30%);
  border-radius: 4px;
}

.architecture-node span {
  color: #64cdff;
  font-size: 11px;
  font-weight: 800;
}

.architecture-node strong {
  margin-top: auto;
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.architecture-node small {
  margin-top: 8px;
  color: rgb(255 255 255 / 68%);
  font-size: 12px;
  line-height: 1.45;
}

.flow-arrow {
  display: grid;
  place-items: center;
  color: #55c7ff;
  font-size: 24px;
}

.solution-contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.solution-contact-band h2 {
  max-width: 780px;
  margin: 0;
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.solution-contact-band p:not(.section-kicker) {
  max-width: 760px;
  margin: 10px 0 0;
  color: rgb(255 255 255 / 72%);
  font-size: 14px;
  line-height: 1.55;
}

.solution-contact-band .button {
  flex: 0 0 auto;
}

.datasheet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.datasheet-list > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 4px;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.datasheet-list > a:hover,
.datasheet-list > a:focus-visible {
  border-color: rgb(0 111 255 / 48%);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgb(6 31 66 / 10%);
}

.datasheet-list > a > svg:first-child,
.datasheet-list > a > svg:last-child {
  color: #0765c8;
}

.datasheet-list strong,
.datasheet-list small {
  display: block;
}

.datasheet-list strong {
  color: #092850;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.datasheet-list small {
  margin-top: 5px;
  color: #5b6a7c;
  font-size: 12px;
  line-height: 1.4;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 54px;
  align-items: start;
}

.faq-layout h2 {
  margin: 0;
  color: #08244b;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}

.faq-layout > div:first-child > p:not(.section-kicker) {
  color: #536274;
  font-size: 14px;
  line-height: 1.6;
}

.faq-list {
  border-top: 1px solid #d5dfe9;
}

.faq-list details {
  border-bottom: 1px solid #d5dfe9;
}

.faq-list summary {
  padding: 18px 34px 18px 0;
  color: #092850;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
}

.faq-list details p {
  max-width: 760px;
  margin: -4px 0 20px;
  color: #536274;
  font-size: 13px;
  line-height: 1.65;
}

.compliance-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 330px;
  padding: 38px;
  color: var(--white);
  background: linear-gradient(145deg, #0b315d, #06172d);
  border: 1px solid rgb(145 208 255 / 28%);
  border-radius: 4px;
}

.compliance-panel > svg {
  color: #69d1ff;
}

.compliance-panel h3 {
  margin: 22px 0 10px;
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
}

.compliance-panel p {
  margin: 0 0 22px;
  color: rgb(255 255 255 / 72%);
  font-size: 13px;
  line-height: 1.6;
}

.compliance-panel .button {
  align-self: flex-start;
}

@media (max-width: 1180px) {
  .topbar {
    padding: 0 26px;
  }

  .brand-logo {
    width: 120px;
  }

  .nav-links {
    gap: 18px;
  }

  .hero-content {
    padding-left: 42px;
  }

  .hero-copy {
    width: 410px;
  }

  .hero-statement {
    margin-right: 105px;
  }

  .hero-cdu {
    right: -2%;
    width: 48%;
  }

  .applications {
    padding-right: 32px;
    padding-left: 32px;
  }

  .application-market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .system-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

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

  .product-detail-copy {
    padding-right: 38px;
  }

  .case-grid,
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .media-mosaic,
  .lab-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 961px) {
  .hero {
    height: 480px;
    min-height: 480px;
  }

  .hero-content {
    height: 420px;
    min-height: 420px;
  }

  .validation {
    height: 232px;
    min-height: 232px;
    overflow: hidden;
  }

  .validation-visual,
  .validation-visual img {
    height: 232px;
  }

  .company {
    height: auto;
    min-height: 260px;
    overflow: visible;
  }

  .facility-photo,
  .facility-photo img {
    height: 100%;
    min-height: 260px;
  }

  .why {
    height: auto;
    min-height: 148px;
    padding-top: 16px;
    padding-bottom: 18px;
    overflow: visible;
  }

  .section-title {
    margin-bottom: 5px;
  }

  .why-item {
    min-height: 72px;
  }

  .app-card {
    height: 142px;
  }

  .app-card img {
    height: 100%;
    min-height: 142px;
  }

  .footer {
    min-height: 44px;
  }
}

@media (max-width: 960px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px 18px;
    min-height: auto;
    padding: 12px 22px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 16px;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .nav-links a {
    min-height: 34px;
  }

  .nav-links a.is-active::before {
    top: 3px;
  }

  .nav-links a.is-active::after {
    bottom: 3px;
  }

  .nav-item {
    min-height: 34px;
  }

  .nav-dropdown {
    display: none;
  }

  .hero {
    min-height: 570px;
  }

  .hero-room {
    width: 82%;
  }

  .hero-mountain {
    left: 15%;
    width: 72%;
  }

  .hero-cdu {
    right: -10%;
    bottom: 62px;
    width: 70%;
    min-width: 390px;
  }

  .hero-content {
    min-height: 500px;
    padding: 36px 28px 118px;
  }

  .hero-copy {
    width: min(450px, 75vw);
  }

  .hero-statement {
    display: none;
  }

  .hero-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    padding: 0 22px 12px;
  }

  .hero-pillar {
    min-height: 48px;
  }

  .why {
    padding: 22px;
  }

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

  .why-item:nth-child(2) {
    border-right: 0;
  }

  .validation {
    grid-template-columns: 1fr;
  }

  .validation-copy {
    padding: 26px 24px;
  }

  .validation-visual {
    min-height: 210px;
  }

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

  .subhero-content {
    width: calc(100% - 44px);
    min-height: 360px;
    padding: 44px 0 120px;
  }

  .subhero h1 {
    font-size: 38px;
  }

  .subhero .hero-cdu-page {
    right: -18%;
    width: 72%;
  }

  .page-section {
    padding: 36px 22px;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2 {
    font-size: 27px;
  }

  .section-heading p {
    margin-top: 10px;
  }

  .solution-grid,
  .detail-grid,
  .application-detail-grid,
  .system-path-grid,
  .process-row,
  .contact-layout,
  .split-section,
  .product-detail-layout,
  .product-detail-hero {
    grid-template-columns: 1fr;
  }

  .architecture-flow,
  .datasheet-list,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .detail-grid.four-column {
    grid-template-columns: 1fr;
  }

  .architecture-node {
    min-height: 128px;
  }

  .flow-arrow {
    min-height: 22px;
    transform: rotate(90deg);
  }

  .solution-contact-band {
    display: grid;
  }

  .product-detail-hero > img {
    max-height: 360px;
    padding: 28px 22px 0;
  }

  .solution-detail-hero > img {
    padding: 0;
  }

  .product-detail-copy {
    padding: 26px 22px 44px;
  }

  .product-detail-copy h1 {
    font-size: 38px;
  }

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

  .case-card,
  .capability-card {
    grid-template-columns: 1fr;
  }

  .case-card img,
  .capability-card img {
    min-height: 240px;
  }

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

  .media-card.large {
    grid-column: span 2;
    grid-row: span 1;
  }

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

@media (max-width: 640px) {
  .topbar-cta {
    width: 100%;
  }

  .brand-mark {
    width: 59px;
    min-width: 59px;
    font-size: 29px;
    text-shadow: 9px 0 0 #3e4652;
  }

  .brand-logo {
    width: 112px;
  }

  .footer-logo {
    width: min(180px, 100%);
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .brand-copy span {
    font-size: 12px;
  }

  .hero {
    min-height: 620px;
  }

  .hero h1 {
    font-size: 30px;
    overflow-wrap: break-word;
  }

  .hero h1 span {
    white-space: normal;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-copy p {
    max-width: 310px;
  }

  .hero-actions {
    gap: 12px;
  }

  .button {
    width: 100%;
  }

  .hero-cdu {
    right: -44%;
    bottom: 82px;
    width: 116%;
    min-width: 0;
  }

  .hero-room {
    width: 100%;
    opacity: 0.58;
  }

  .hero-mountain {
    left: -8%;
    width: 120%;
    opacity: 0.55;
  }

  .hero-pillars,
  .why-grid,
  .apps-grid,
  .company,
  .stats,
  .system-path-grid,
  .resource-grid,
  .resource-card,
  .product-list-grid,
  .product-feature-grid,
  .product-gallery,
  .related-products,
  .case-grid,
  .capability-grid,
  .media-mosaic,
  .lab-grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form .form-full {
    grid-column: auto;
  }

  .solution-contact-band h2,
  .faq-layout h2 {
    font-size: 24px;
  }

  .compliance-panel {
    min-height: 0;
    padding: 24px;
  }

  .hero-pillar,
  .why-item {
    border-right: 0;
  }

  .why-item {
    min-height: 104px;
    border-bottom: 1px solid #dbe2ea;
  }

  .why-item:last-child {
    border-bottom: 0;
  }

  .applications {
    padding: 26px 18px 18px;
  }

  .apps-title {
    min-width: 220px;
    font-size: 14px;
  }

  .app-card {
    min-height: 165px;
  }

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

  .facility-photo,
  .facility-photo img {
    min-height: 180px;
  }

  .footer {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 20px;
  }

  .subhero {
    min-height: 420px;
  }

  .subhero-content {
    min-height: 420px;
    padding-bottom: 150px;
  }

  .subhero h1 {
    font-size: 32px;
  }

  .subhero p {
    font-size: 14px;
  }

  .subhero .hero-cdu-page {
    right: -44%;
    width: 112%;
    opacity: 0.72;
  }

  .product-list-hero .hero-cdu-page {
    right: -16%;
    width: 96%;
  }

  .product-card {
    grid-template-rows: 200px 1fr;
  }

  .product-card-body {
    padding: 18px;
  }

  .product-detail-copy h1 {
    font-size: 32px;
    overflow-wrap: break-word;
  }

  .product-detail-copy > p:not(.product-tag) {
    max-width: 100%;
    font-size: 14px;
    overflow-wrap: break-word;
  }

  .product-detail-hero > img {
    max-height: 300px;
  }

  .product-main-copy h2 {
    max-width: 100%;
    font-size: 23px;
    overflow-wrap: break-word;
  }

  .spec-panel {
    padding: 18px;
  }

  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
    padding: 9px 0 0;
  }

  .spec-table td {
    padding: 4px 0 10px;
  }

  .case-card,
  .capability-card {
    grid-template-columns: 1fr;
  }

  .case-card > div,
  .capability-card > div {
    padding: 18px;
  }

  .case-card h3,
  .capability-card h3 {
    font-size: 18px;
  }

  .case-facts div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .media-card.large {
    grid-column: span 1;
  }

  .split-copy,
  .contact-methods,
  .contact-form-panel {
    padding: 22px;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 30px;
  }
}

/* 2026 engineering-site refinement */
.topbar {
  min-height: 68px;
}

.nav-links,
.nav-links > a,
.nav-item,
.nav-item > a {
  min-height: 68px;
}

.nav-links {
  gap: 16px;
  font-size: 12px;
}

.topbar-cta {
  display: none;
}

.nav-toggle {
  display: none;
}

.hero {
  height: auto;
  min-height: 430px;
}

.hero::before {
  background:
    linear-gradient(90deg, rgb(2 12 24 / 70%) 0%, rgb(2 12 24 / 42%) 27%, rgb(2 12 24 / 5%) 54%, rgb(2 12 24 / 21%) 76%, rgb(2 12 24 / 42%) 100%),
    linear-gradient(180deg, rgb(1 11 24 / 0%) 0%, rgb(1 11 24 / 28%) 100%);
}

.hero::after {
  background: linear-gradient(0deg, rgb(1 10 21 / 30%) 0%, transparent 48%);
}

.hero-room,
.banner-slide[data-slide="technology"] .hero-room,
.banner-slide[data-slide="global"] .hero-room {
  filter: brightness(1.26) saturate(1.1) contrast(1.05);
}

.hero-mountain,
.banner-slide[data-slide="reliable"] .hero-mountain,
.banner-slide[data-slide="global"] .hero-mountain {
  filter: brightness(1.24) contrast(1.06) saturate(0.96);
}

.hero-content {
  align-items: center;
  height: auto;
  min-height: 430px;
  padding: 44px 70px 48px;
}

.hero-copy {
  width: min(650px, 54vw);
}

.hero h1 {
  font-size: 34px;
  line-height: 1.08;
}

.hero-copy p {
  max-width: 590px;
  margin: 17px 0 22px;
  font-size: 14px;
  line-height: 1.55;
}

.hero-statement {
  display: none;
}

.applications {
  padding: 50px 70px 36px;
}

.apps-grid {
  padding-top: 0;
}

.app-card {
  min-height: 196px;
  background: #0a2038;
  border-color: rgb(148 187 220 / 36%);
}

.app-card:nth-child(2) { background: #10283f; }
.app-card:nth-child(3) { background: #0c2733; }
.app-card:nth-child(4) { background: #172638; }

.app-card img {
  display: none;
}

.app-card::after {
  inset: auto 0 0;
  height: 4px;
  background: #1685db;
  opacity: 1;
}

.app-card:nth-child(2)::after { background: #35a8b6; }
.app-card:nth-child(3)::after { background: #6ba153; }
.app-card:nth-child(4)::after { background: #a4773f; }

.app-card:hover::after,
.app-card:focus-visible::after {
  opacity: 1;
}

.app-card-content {
  position: relative;
  inset: auto;
  min-height: 196px;
  padding: 24px;
  grid-template-columns: 42px 1fr;
}

.app-card-content h3 {
  font-size: 17px;
}

.app-card-content p {
  max-width: 230px;
  font-size: 12px;
  line-height: 1.45;
}

.card-link {
  opacity: 0.78;
  transform: none;
}

.validation {
  height: auto;
  min-height: 232px;
  overflow: visible;
}

.validation-visual {
  height: auto;
  min-height: 232px;
}

.validation-visual img {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}

.subhero {
  min-height: 280px;
}

.subhero::before {
  background: linear-gradient(90deg, rgb(1 12 28 / 78%) 0%, rgb(1 12 28 / 45%) 46%, rgb(1 12 28 / 12%) 100%);
}

.subhero-content {
  min-height: 280px;
  padding: 46px 0 42px;
}

.subhero h1 {
  font-size: 33px;
  line-height: 1.08;
}

.subhero p {
  margin-top: 14px;
  font-size: 14px;
}

.section-heading h2 {
  font-size: 24px;
  line-height: 1.12;
}

.product-detail-copy h1 {
  font-size: 34px;
  line-height: 1.06;
}

.product-detail-copy > p:not(.product-tag) {
  font-size: 14px;
}

.product-main-copy h2 {
  font-size: 25px;
}

.product-card-media,
.solution-card img[src*="transparent"],
.application-detail img[src*="transparent"],
.resource-card img[src*="transparent"],
.case-card img[src*="transparent"],
.capability-card img[src*="transparent"] {
  background: #0b2138;
}

.product-card .product-card-media img[src*="transparent"],
.solution-card img[src*="transparent"],
.application-detail img[src*="transparent"],
.resource-card img[src*="transparent"],
.case-card img[src*="transparent"],
.capability-card img[src*="transparent"] {
  object-fit: contain;
  object-position: center;
  padding: 14px 18px;
  filter: contrast(1.06) saturate(1.03) drop-shadow(0 16px 20px rgb(0 0 0 / 34%));
}

.product-detail-hero {
  background: linear-gradient(120deg, #031225 0%, #10273c 52%, #061524 100%);
}

.product-detail-hero > img[src*="transparent"] {
  object-fit: contain;
  object-position: center;
  padding: 32px;
}

.system-blueprint {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #071a2d;
  border: 1px solid rgb(127 183 225 / 36%);
  border-radius: 4px;
}

.system-blueprint > img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  filter: brightness(1.08) contrast(1.04) saturate(1.05);
}

.blueprint-label {
  position: absolute;
  z-index: 2;
  display: grid;
  max-width: 178px;
  padding: 8px 10px;
  color: #fff;
  background: rgb(3 19 36 / 88%);
  border-left: 3px solid #4fc8ed;
  box-shadow: 0 8px 22px rgb(0 0 0 / 24%);
  transition: background-color 180ms ease, transform 180ms ease;
}

a.blueprint-label:hover,
a.blueprint-label:focus-visible {
  background: rgb(4 57 91 / 94%);
  transform: translateY(-2px);
}

.blueprint-label strong {
  font-family: "Nunito Sans", Inter, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
}

.blueprint-label span {
  margin-top: 3px;
  color: rgb(255 255 255 / 72%);
  font-size: 9px;
  line-height: 1.25;
}

.label-cold-source { top: 8%; left: 4%; }
.label-cdu { top: 41%; left: 5%; }
.label-piping { right: 34%; bottom: 5%; }
.label-rack { top: 8%; right: 4%; }
.label-manifold { right: 4%; bottom: 29%; }
.label-monitor { top: 35%; left: 40%; }

.rack-architecture {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr);
  gap: 18px;
  align-items: stretch;
}

.rack-architecture-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rack-flow-arrow {
  display: none;
}

.rack-node {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 126px;
  padding: 17px;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  background: #0b2138;
  border: 1px solid rgb(136 186 225 / 30%);
  border-radius: 4px;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.rack-node:hover,
.rack-node:focus-visible {
  border-color: #4fc8ed;
  transform: translateY(-2px);
}

.rack-node.is-active {
  background: #0b4771;
  border-color: #72daf8;
  box-shadow: inset 4px 0 0 #72daf8;
}

.rack-node span {
  color: #71d4f2;
  font-size: 10px;
  font-weight: 800;
}

.rack-node strong {
  align-self: end;
  margin-top: 18px;
  font-family: "Nunito Sans", Inter, Arial, sans-serif;
  font-size: 15px;
  text-transform: uppercase;
}

.rack-node small {
  margin-top: 4px;
  color: rgb(255 255 255 / 62%);
  font-size: 10px;
}

.rack-architecture-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 28px;
  color: #fff;
  background: #e9f1f5;
  border-left: 4px solid #1685db;
}

.rack-architecture-detail > p:first-child {
  margin: 0 0 8px;
  color: #326079;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.rack-architecture-detail h3 {
  margin: 0;
  color: #08243a;
  font-size: 24px;
  text-transform: uppercase;
}

.rack-architecture-detail [data-architecture-copy] {
  margin: 13px 0 18px;
  color: #344f60;
  font-size: 13px;
  line-height: 1.58;
}

.rack-architecture-detail span {
  padding-top: 14px;
  color: #0b527e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  border-top: 1px solid #c6d5de;
}

.case-grid {
  grid-template-columns: 1fr;
}

.case-card {
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
}

.case-card img {
  min-height: 300px;
  max-height: 380px;
}

.case-card:first-child img {
  background: #0b2138;
}

.case-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}

.case-facts div {
  grid-template-columns: 96px minmax(0, 1fr);
}

.form-intro {
  max-width: 640px;
  margin: -6px 0 20px;
  color: rgb(255 255 255 / 68%);
  font-size: 12px;
  line-height: 1.55;
}

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form .consent-field {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  align-items: flex-start;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
}

.contact-form .consent-field input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #1685db;
}

.form-status {
  min-height: 18px;
  margin: 0;
  color: rgb(255 255 255 / 76%);
  font-size: 12px;
}

.form-status.success,
.form-status.is-success { color: #92e3b7; }

.form-status.error,
.form-status.is-error { color: #ffaba5; }

.footer {
  height: auto;
  min-height: 48px;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.contact-panel .footer-brand {
  align-self: flex-start;
  padding: 7px 10px;
  background: #fff;
  border-radius: 3px;
}

.contact-panel .footer-logo {
  width: 172px;
}

@media (max-width: 1050px) {
  .hero-content {
    padding-inline: 44px;
  }

  .hero-copy {
    width: min(610px, 62vw);
  }

  .hero h1 {
    font-size: 32px;
  }

  .system-blueprint {
    min-height: 440px;
  }

  .system-blueprint > img {
    min-height: 440px;
  }

  .rack-architecture {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 430px;
  }

  .hero-content {
    align-items: flex-start;
    min-height: 430px;
    padding: 40px 22px 128px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1,
  .subhero h1,
  .product-detail-copy h1 {
    font-size: 28px;
  }

  .hero h1 span {
    white-space: normal;
  }

  .applications {
    padding: 52px 18px 28px;
  }

  .app-card-content {
    min-height: 176px;
  }

  .subhero,
  .subhero-content {
    min-height: 340px;
  }

  .subhero-content {
    padding-top: 42px;
  }

  .section-heading h2,
  .product-main-copy h2 {
    font-size: 24px;
  }

  .system-blueprint {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: 1px;
    background: #29445b;
  }

  .system-blueprint > img {
    grid-column: 1 / -1;
    min-height: 310px;
  }

  .blueprint-label {
    position: static;
    max-width: none;
    min-height: 68px;
    box-shadow: none;
  }

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

  .case-card {
    grid-template-columns: 1fr;
  }

  .case-card img {
    max-height: 260px;
  }

  .case-facts {
    grid-template-columns: 1fr;
  }

  .footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 960px) {
  .topbar {
    position: relative;
    flex-wrap: nowrap;
    min-height: 68px;
    padding: 0 20px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: #0b2948;
    cursor: pointer;
    background: #f2f5f8;
    border: 1px solid #d8e1e9;
    border-radius: 3px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 40;
    display: none;
    width: 100%;
    max-height: calc(100vh - 68px);
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 14px;
    color: #10273c;
    background: #fff;
    border-top: 1px solid #e3e9ee;
    box-shadow: 0 18px 30px rgb(5 24 43 / 18%);
  }

  .topbar.nav-open .nav-links {
    display: flex;
  }

  .nav-links > a,
  .nav-item > a {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 20px;
  }

  .nav-links a.is-active::before {
    display: none;
  }

  .nav-links a.is-active::after {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 0;
    width: 3px;
    height: auto;
  }

  .nav-item {
    display: grid;
    width: 100%;
    min-height: 44px;
  }

  .nav-item.is-open > a svg {
    transform: rotate(180deg);
  }

  .nav-dropdown {
    position: static;
    display: none;
    width: 100%;
    padding: 5px 0 7px 17px;
    color: #21384d;
    pointer-events: auto;
    background: #f3f6f8;
    border: 0;
    border-radius: 0;
    box-shadow: inset 3px 0 0 #1685db;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-item.is-open .nav-dropdown {
    display: grid;
  }

  .has-dropdown:hover .nav-dropdown,
  .has-dropdown:focus-within .nav-dropdown,
  .nav-item.is-open .nav-dropdown {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav-dropdown a {
    min-height: 38px;
    padding: 0 16px;
    color: #2e465b;
    font-size: 11px;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible {
    color: #074d85;
    background: #e6edf3;
    transform: none;
  }
}

@media (max-width: 420px) {
  .hero h1,
  .subhero h1,
  .product-detail-copy h1 {
    font-size: 26px;
  }

  .system-blueprint,
  .rack-architecture-path {
    grid-template-columns: 1fr;
  }

  .system-blueprint > img {
    grid-column: auto;
    min-height: 250px;
  }

  .rack-node {
    min-height: 104px;
  }
}

/* 2026-08-25 content architecture update */
.topbar-cta {
  display: inline-flex;
  min-width: max-content;
  padding-inline: 16px;
}

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

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

.solution-focus-grid .solution-card img {
  height: 250px;
  object-fit: cover;
}

.solution-overview-hero > img {
  object-position: 66% center;
  filter: brightness(1.12) contrast(1.04);
}

.solution-photo-hero > img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  padding: 0;
  object-fit: cover;
}

.readable-support-copy {
  color: #40566a !important;
}

.readable-dark-copy {
  color: rgb(255 255 255 / 78%) !important;
}

.page-section.dark .faq-layout h2,
.page-section.dark .faq-list summary {
  color: var(--white);
}

.page-section.dark .faq-layout > div:first-child > p:not(.section-kicker),
.page-section.dark .faq-list details p {
  color: rgb(255 255 255 / 76%);
}

.page-section.dark .faq-list,
.page-section.dark .faq-list details {
  border-color: rgb(183 216 255 / 28%);
}

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

.aidc-equipment {
  display: grid;
  grid-template-rows: 290px 1fr;
  min-width: 0;
  overflow: hidden;
  background: #0b2138;
  border: 1px solid rgb(125 180 221 / 34%);
  border-radius: 4px;
}

.aidc-equipment img {
  width: 100%;
  height: 290px;
  padding: 20px;
  object-fit: contain;
  background: #0b2138;
}

.aidc-equipment > div {
  padding: 22px;
  color: #fff;
  border-top: 1px solid rgb(125 180 221 / 26%);
}

.aidc-equipment h3,
.ess-product-card h3 {
  margin: 6px 0 9px;
  font-family: "Nunito Sans", Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
}

.aidc-equipment p:not(.product-tag),
.ess-product-card p:not(.product-tag) {
  color: rgb(255 255 255 / 76%);
  font-size: 12px;
  line-height: 1.55;
}

.ess-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ess-product-card {
  display: grid;
  grid-template-rows: 230px 1fr;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: #0b2138;
  border: 1px solid rgb(125 180 221 / 34%);
  border-radius: 4px;
}

.ess-product-media {
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 18px;
  background: #eef3f6;
}

.ess-product-media img {
  width: 100%;
  height: 194px;
  object-fit: contain;
}

.ess-product-card > div:last-child {
  padding: 20px;
}

.contact-layout-single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.contact-directory {
  width: 100%;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contact-panel a {
  color: inherit;
}

.system-blueprint .blueprint-label::after {
  position: absolute;
  z-index: -1;
  width: 76px;
  height: 1px;
  content: "";
  background: rgb(114 218 248 / 88%);
  transform-origin: left center;
}

.label-cold-source::after { right: -66px; bottom: 4px; transform: rotate(20deg); }
.label-cdu::after { right: -72px; top: 18px; transform: rotate(-12deg); }
.label-piping::after { left: 58%; top: -25px; transform: rotate(-58deg); }
.label-rack::after { left: -66px; bottom: 5px; transform: rotate(158deg); }
.label-manifold::after { left: -69px; top: 18px; transform: rotate(188deg); }
.label-monitor::after { left: 46%; bottom: -28px; transform: rotate(78deg); }

@media (max-width: 960px) {
  .topbar-cta {
    width: auto;
    min-height: 38px;
    margin-left: auto;
    font-size: 9px;
  }

  .topbar .nav-toggle {
    margin-left: 0;
  }

  .solution-photo-hero > img {
    min-height: 320px;
  }

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

@media (max-width: 760px) {
  .hero-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 58px;
    padding: 0 10px;
  }

  .hero-pillar {
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 0 4px;
    font-size: 9px;
  }

  .hero-pillar svg {
    display: none;
  }

  .application-market-grid,
  .solution-focus-grid,
  .aidc-equipment-grid,
  .ess-product-grid {
    grid-template-columns: 1fr;
  }

  .resource-card > img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #071a31;
  }

  .solution-photo-hero > img {
    min-height: 260px;
  }

  .system-blueprint .blueprint-label::after {
    display: none;
  }
}

@media (max-width: 420px) {
  .topbar {
    gap: 8px;
    padding-inline: 14px;
  }

  .topbar-cta {
    padding-inline: 10px;
    font-size: 8px;
  }
}