:root {
  --it-blue: #436fb7;
  --it-blue-dark: #2f5595;
  --it-blue-light: #8aa8d8;
  --it-navy: #17243a;
  --it-navy-deep: #0d1d34;
  --it-panel: #f3f6fb;
  --it-soft: #e8eef8;
  --it-line: rgba(23, 36, 58, .14);
}

.it-services-page,
.it-service-detail {
  color: var(--it-navy);
  background: #fff;
}

.it-services-page h1,
.it-services-page h2,
.it-services-page h3,
.it-services-page p,
.it-service-detail h1,
.it-service-detail h2,
.it-service-detail h3,
.it-service-detail p {
  margin-top: 0;
}

.it-services-hero,
.it-detail-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  color: #fff;
  background: var(--it-navy-deep);
}

.it-services-hero > img,
.it-detail-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.it-services-hero > img { object-position: center; }
.it-detail-hero > img { object-position: center; }

.it-services-hero-overlay,
.it-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 23, 44, .97) 0%, rgba(13, 34, 65, .88) 43%, rgba(13, 29, 52, .24) 76%),
    linear-gradient(0deg, rgba(6, 19, 37, .72), transparent 55%);
}

.it-services-hero-inner,
.it-detail-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 720px;
  padding: 110px 2rem 42px;
  display: flex;
  flex-direction: column;
}

.it-services-hero-copy,
.it-detail-hero-copy { max-width: 720px; }

.it-services-overline {
  margin-bottom: 18px;
  color: #afc4e5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.it-services-overline span {
  width: 32px;
  height: 1px;
  margin: 0 12px 4px 0;
  display: inline-block;
  background: currentColor;
}

.it-services-overline-blue { color: var(--it-blue); }

.it-services-hero h1,
.it-detail-hero h1 {
  max-width: 800px;
  margin-bottom: 26px;
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
}

.it-services-hero-copy > p:last-of-type,
.it-detail-hero-copy > p:last-of-type {
  max-width: 650px;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.75;
}

.it-services-actions {
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.it-services-button {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 12px;
  font-weight: 750;
  transition: .2s ease;
}

.it-services-button:hover { transform: translateY(-2px); }
.it-services-button-primary { color: #fff; background: var(--it-blue); }
.it-services-button-primary:hover { color: #fff; background: var(--it-blue-dark); }
.it-services-button-secondary { color: #fff; border-color: rgba(255, 255, 255, .45); }
.it-services-button-secondary:hover { color: #fff; border-color: #fff; }

.it-services-proof {
  margin: auto 0 0;
  display: flex;
}

.it-services-proof div {
  min-width: 190px;
  margin-right: 32px;
  padding-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, .2);
}

.it-services-proof div:last-child { border: 0; }
.it-services-proof dt { font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.it-services-proof dd { margin: 7px 0 0; color: rgba(255, 255, 255, .52); font-size: 10px; }

.it-services-section { padding: 112px 2rem; }

.it-services-heading {
  margin-bottom: 58px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 85px;
  align-items: end;
}

.it-services-heading h2,
.it-services-connected h2,
.it-services-partner h2,
.it-services-cta h2,
.it-detail-intro h2,
.it-detail-inquiry h2 {
  font-size: clamp(39px, 4.5vw, 64px);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: -.047em;
}

.it-services-heading > p,
.it-services-heading > div:last-child > p {
  color: #61708a;
  font-size: 14px;
  line-height: 1.8;
}

.it-services-heading > div:last-child .it-services-button { margin-top: 20px; }
.it-services-heading > div:last-child .it-services-button-primary { color: #fff; }

.it-services-intro { background: var(--it-panel); }
.it-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.it-service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--it-line);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.it-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 65px rgba(23, 36, 58, .13);
}

.it-service-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
}

.it-service-image {
  position: relative;
  height: 300px;
  display: block;
  overflow: hidden;
  background: var(--it-navy);
}

.it-service-card-featured .it-service-image { height: 100%; min-height: 480px; }

.it-service-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 27, 51, .42), transparent 55%);
}

.it-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.it-service-card:hover .it-service-image img { transform: scale(1.025); }

.it-service-number {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 18px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.it-service-copy { padding: 36px; }
.it-service-card-featured .it-service-copy { padding: 55px; display: flex; flex-direction: column; justify-content: center; }
.it-service-copy > p:first-child { color: var(--it-blue); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.it-service-copy h3 { margin: 14px 0 0; font-size: 31px; font-weight: 780; letter-spacing: -.035em; }
.it-service-card-featured .it-service-copy h3 { font-size: 42px; }
.it-service-rule { width: 42px; height: 2px; margin: 22px 0; background: var(--it-blue); }
.it-service-copy > p:nth-of-type(2) { min-height: 72px; color: #61708a; font-size: 13px; line-height: 1.8; }
.it-service-copy ul { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.it-service-copy li { padding: 8px 10px; color: var(--it-blue-dark); background: var(--it-soft); font-size: 9px; font-weight: 750; }
.it-service-link { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--it-line); display: flex; justify-content: space-between; color: var(--it-blue-dark); font-size: 11px; font-weight: 780; }

.it-services-connected { padding: 110px 2rem; color: #fff; background: var(--it-navy); }
.it-services-connected-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.it-services-connected-points { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); }
.it-services-connected-points article { min-height: 260px; padding: 29px 25px; border-right: 1px solid rgba(255, 255, 255, .14); }
.it-services-connected-points article:last-child { border-right: 0; }
.it-services-connected-points span { color: var(--it-blue-light); font-size: 9px; font-weight: 800; }
.it-services-connected-points h3 { margin: 70px 0 14px; font-size: 21px; font-weight: 750; }
.it-services-connected-points p { color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.75; }

.it-services-partner { background: #fff; }
.it-services-partner-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }
.it-services-partner-grid > div:last-child > p { color: #61708a; font-size: 15px; line-height: 1.9; }
.it-services-partner-list { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); }
.it-services-partner-list span { padding: 17px 12px; border-bottom: 1px solid var(--it-line); color: #52617a; font-size: 12px; font-weight: 650; }
.it-services-partner-list span:before { content: "✓"; margin-right: 11px; color: var(--it-blue); }

.it-services-cta { padding: 95px 2rem; color: #fff; background: #20385f; }
.it-services-cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 90px; align-items: end; }
.it-services-cta-grid > div:first-child > p:last-child { max-width: 650px; margin-top: 24px; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.8; }
.it-services-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.it-services-cta-actions > a:last-child { color: #bfd0ea; font-size: 22px; font-weight: 750; }

.it-detail-breadcrumb { margin-bottom: 76px; display: flex; gap: 10px; color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.it-detail-breadcrumb a { color: #bed0eb; }

.it-detail-intro { background: #fff; }
.it-detail-intro-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 105px; }
.it-detail-intro-heading > p:last-child { max-width: 440px; margin-top: 25px; color: #74829a; font-size: 13px; line-height: 1.8; }
.it-detail-prose > p { margin-bottom: 20px; color: #61708a; font-size: 15px; line-height: 1.9; }
.it-detail-bullets { margin: 34px 0 0; display: grid; gap: 14px; }
.it-detail-bullets li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: #4f5f78; font-size: 13px; line-height: 1.75; }
.it-detail-bullets span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--it-blue); background: var(--it-soft); font-size: 9px; }
.it-detail-features { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--it-line); border-left: 1px solid var(--it-line); }
.it-detail-features span { padding: 20px; border-right: 1px solid var(--it-line); border-bottom: 1px solid var(--it-line); background: var(--it-panel); color: var(--it-blue-dark); font-size: 11px; font-weight: 750; }

.it-detail-products { background: var(--it-panel); }
.it-detail-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-detail-product-card { min-height: 390px; padding: 29px; border: 1px solid var(--it-line); display: flex; flex-direction: column; background: #fff; transition: .2s ease; }
.it-detail-product-card:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(23, 36, 58, .1); }
.it-detail-product-top { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.it-detail-product-top p { color: var(--it-blue); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.it-detail-product-top span { padding: 7px 9px; color: var(--it-blue-dark); background: var(--it-soft); font-size: 8px; font-weight: 750; }
.it-detail-product-card h3 { margin: 46px 0 13px; font-size: 22px; font-weight: 770; }
.it-detail-product-card > p { color: #61708a; font-size: 12px; line-height: 1.75; }
.it-detail-product-card ul { margin: 20px 0; display: grid; gap: 8px; color: #61708a; font-size: 10px; line-height: 1.6; }
.it-detail-product-card li:before { content: "•"; margin-right: 8px; color: var(--it-blue); }
.it-detail-product-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--it-line); display: flex; flex-wrap: wrap; gap: 14px; }
.it-detail-product-actions a { color: var(--it-blue-dark); font-size: 10px; font-weight: 780; }

.it-detail-inquiry { padding: 110px 2rem; color: #fff; background: #20385f; }
.it-detail-inquiry-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 90px; }
.it-detail-inquiry-grid > div:first-child > p:not(.it-services-overline) { max-width: 520px; margin-top: 25px; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.85; }
.it-detail-contact { margin-top: 34px; display: flex; flex-direction: column; gap: 7px; color: #bed0eb; font-size: 12px; }
.it-detail-inquiry form { color: var(--it-navy); background: #fff; border-radius: 6px; }

@media (max-width: 1000px) {
  .it-services-heading,
  .it-services-connected-grid,
  .it-services-partner-grid,
  .it-services-cta-grid,
  .it-detail-intro-grid,
  .it-detail-inquiry-grid { grid-template-columns: 1fr; gap: 50px; }
  .it-service-card-featured { grid-template-columns: 1fr; }
  .it-service-card-featured .it-service-image { min-height: 360px; }
  .it-detail-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .it-services-hero,
  .it-detail-hero,
  .it-services-hero-inner,
  .it-detail-hero-inner { min-height: 760px; }
  .it-services-hero > img,
  .it-detail-hero > img { object-position: 63% center; }
  .it-services-hero-overlay,
  .it-detail-hero-overlay { background: linear-gradient(90deg, rgba(8, 23, 44, .96), rgba(13, 34, 65, .76)), linear-gradient(0deg, rgba(6, 19, 37, .7), transparent); }
  .it-services-hero-inner,
  .it-detail-hero-inner { padding: 76px 18px 28px; }
  .it-services-hero h1,
  .it-detail-hero h1 { font-size: 48px; }
  .it-services-hero-copy > p:last-of-type,
  .it-detail-hero-copy > p:last-of-type { font-size: 14px; }
  .it-services-actions { max-width: 330px; flex-direction: column; align-items: stretch; }
  .it-services-proof { overflow-x: auto; }
  .it-services-proof div { min-width: 145px; margin-right: 18px; padding-right: 18px; }
  .it-services-section,
  .it-detail-inquiry { padding: 78px 18px; }
  .it-services-grid,
  .it-detail-product-grid { grid-template-columns: 1fr; }
  .it-service-card-featured { grid-column: auto; }
  .it-service-card-featured .it-service-image { min-height: 300px; }
  .it-service-card-featured .it-service-copy,
  .it-service-copy { padding: 28px; }
  .it-service-card-featured .it-service-copy h3 { font-size: 32px; }
  .it-services-connected,
  .it-services-cta { padding: 78px 18px; }
  .it-services-connected-points { grid-template-columns: 1fr; }
  .it-services-connected-points article { min-height: 190px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .it-services-connected-points h3 { margin-top: 42px; }
  .it-services-partner-list,
  .it-detail-features { grid-template-columns: 1fr; }
  .it-detail-breadcrumb { margin-bottom: 52px; }
}