/* =========================================================
   SERVICES PAGE
   UVC CONTRACTING LLC
========================================================= */


/* =========================================================
   SERVICES HERO
========================================================= */

.services-hero {
  position: relative;

  overflow: clip;

  padding:
    clamp(68px, 6.5vw, 96px)
    0;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(137, 198, 232, 0.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FBFDFE 0%,
      #F1F6F8 100%
    );
}


.services-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.45;

  background-image:
    linear-gradient(
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

  mask-image:
    linear-gradient(
      to right,
      black,
      transparent 82%
    );
}


.services-hero-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.72fr);

  align-items: center;

  gap:
    clamp(
      55px,
      7vw,
      105px
    );
}


/* =========================================================
   CONTENT
========================================================= */

.services-hero-content {
  max-width: 760px;
}


.services-hero-kicker {
  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.services-hero-kicker::before {
  content: "";

  width: 34px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.services-hero h1 {
  max-width: 780px;

  margin:
    0
    0
    23px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.8rem,
      4.1vw,
      4.4rem
    );

  line-height: 1.03;

  letter-spacing:
    -0.044em;

  font-weight: 780;
}


.services-hero h1 span {
  display: block;

  color:
    var(--uvc-primary);
}


.services-hero-intro {
  max-width: 660px;

  margin:
    0
    0
    31px;

  color:
    var(--uvc-text);

  font-size:
    clamp(
      1rem,
      1.1vw,
      1.06rem
    );

  line-height: 1.75;
}


.services-hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;
}


/* =========================================================
   SERVICES PANEL
========================================================= */

.services-hero-panel {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(90, 140, 163, 0.17);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 24px 55px
    rgba(24, 35, 41, 0.09);

  backdrop-filter:
    blur(10px);
}


.services-hero-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      var(--uvc-light-blue),
      var(--uvc-deep-blue)
    );
}


.services-hero-panel-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    20px
    22px;

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.13);
}


.services-hero-panel-head > span {
  color:
    rgba(90, 140, 163, 0.18);

  font-size:
    3rem;

  line-height: 1;

  font-weight: 800;

  letter-spacing:
    -0.06em;
}


.services-hero-panel-head small {
  color:
    var(--uvc-primary);

  font-size:
    0.63rem;

  font-weight: 800;

  letter-spacing:
    0.10em;
}


.services-hero-panel-list {
  display: grid;
}


.services-hero-panel-list a {
  display: grid;

  grid-template-columns:
    34px
    1fr;

  align-items: center;

  gap: 10px;

  min-height: 54px;

  padding:
    11px
    20px;

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.10);

  color:
    var(--uvc-dark);

  text-decoration: none;

  font-size:
    0.88rem;

  font-weight: 700;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    padding-left 0.25s ease;
}


.services-hero-panel-list a:last-child {
  border-bottom: 0;
}


.services-hero-panel-list a span {
  color:
    var(--uvc-primary);

  font-size:
    0.65rem;

  font-weight: 800;
}


.services-hero-panel-list a:hover {
  padding-left: 25px;

  color:
    var(--uvc-primary);

  background:
    rgba(137, 198, 232, 0.07);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .services-hero-layout {
    grid-template-columns:
      1fr;

    gap: 50px;
  }


  .services-hero-content {
    max-width:
      780px;
  }


  .services-hero-panel {
    max-width:
      680px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-hero {
    padding:
      54px
      0
      64px;
  }


  .services-hero h1 {
    font-size:
      clamp(
        2.4rem,
        10.5vw,
        3.25rem
      );
  }


  .services-hero h1 span {
    display: inline;
  }


  .services-hero h1 span::before {
    content: " ";
  }


  .services-hero-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .services-hero-actions .btn {
    width: 100%;

    justify-content: center;
  }


  .services-hero-panel-head > span {
    font-size:
      2.6rem;
  }


  .services-hero-panel-list a {
    min-height: 52px;

    padding:
      10px
      15px;
  }

}

/* =========================================================
   SERVICES OVERVIEW
========================================================= */

.services-overview {
  position: relative;

  overflow: clip;

  padding:
    clamp(88px, 8vw, 125px)
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   LAYOUT
========================================================= */

.services-overview-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.62fr)
    minmax(0, 1.38fr);

  align-items: start;

  gap:
    clamp(
      65px,
      8vw,
      125px
    );
}


/* =========================================================
   STICKY INTRO
========================================================= */

.services-overview-intro {
  position: sticky;

  top:
    calc(
      var(--header-height, 88px) + 30px
    );

  align-self: start;

  height: max-content;
}


.services-overview-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    18px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.70rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.services-overview-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.services-overview-intro h2 {
  max-width: 500px;

  margin:
    0
    0
    20px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.7vw,
      3.9rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.043em;

  font-weight: 760;
}


.services-overview-intro h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.services-overview-intro > p {
  max-width: 480px;

  margin:
    0
    0
    30px;

  color:
    var(--uvc-text);

  font-size: 0.96rem;

  line-height: 1.75;
}


/* =========================================================
   INTRO NOTE
========================================================= */

.services-overview-note {
  display: flex;

  align-items: center;

  gap: 16px;

  max-width: 390px;

  padding:
    18px
    0;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.17);

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.17);
}


.services-overview-note > span {
  color:
    rgba(90, 140, 163, 0.22);

  font-size: 2.6rem;

  line-height: 1;

  font-weight: 800;

  letter-spacing:
    -0.05em;
}


.services-overview-note small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--uvc-primary);

  font-size: 0.59rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.services-overview-note strong {
  display: block;

  max-width: 270px;

  color:
    #47575F;

  font-size: 0.84rem;

  line-height: 1.5;

  font-weight: 650;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.services-detail-list {
  border-top:
    1px solid
    rgba(90, 140, 163, 0.18);
}


/* =========================================================
   SERVICE DETAIL
========================================================= */

.service-detail {
  position: relative;

  scroll-margin-top:
    calc(
      var(--header-height, 88px) + 30px
    );

  padding:
    clamp(38px, 4vw, 52px)
    8px
    clamp(42px, 4.5vw, 58px);

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.18);

  transition:
    padding-left 0.3s ease,
    background-color 0.3s ease;
}


.service-detail::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      var(--uvc-light-blue),
      var(--uvc-deep-blue)
    );

  transition:
    height 0.35s ease;
}


.service-detail:hover {
  padding-left: 22px;

  background:
    linear-gradient(
      90deg,
      rgba(137, 198, 232, 0.065),
      transparent 65%
    );
}


.service-detail:hover::before {
  height: 100%;
}


/* =========================================================
   SERVICE TOP
========================================================= */

.service-detail-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  margin-bottom: 17px;
}


.service-detail-number {
  color:
    var(--uvc-primary);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.service-detail-category {
  color:
    #87969D;

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-detail h3 {
  max-width: 720px;

  margin:
    0
    0
    14px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      1.65rem,
      2.4vw,
      2.25rem
    );

  line-height: 1.16;

  letter-spacing:
    -0.025em;

  font-weight: 750;
}


.service-detail-lead {
  max-width: 710px;

  margin:
    0
    0
    23px;

  color:
    #65747B;

  font-size: 0.94rem;

  line-height: 1.72;
}


/* =========================================================
   DETAIL POINTS
========================================================= */

.service-detail-points {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px;
}


.service-detail-points span {
  position: relative;

  display: inline-flex;

  align-items: center;

  min-height: 32px;

  padding:
    7px
    11px
    7px
    24px;

  border:
    1px solid
    rgba(90, 140, 163, 0.14);

  border-radius: 5px;

  color:
    #56666E;

  background:
    #FAFCFD;

  font-size: 0.76rem;

  font-weight: 650;
}


.service-detail-points span::before {
  content: "";

  position: absolute;

  left: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--uvc-light-blue);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .services-overview-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  .services-overview-intro {
    position: static;

    max-width: 720px;
  }


  .services-overview-note {
    max-width: 470px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-overview {
    padding:
      70px
      0;
  }


  .services-overview-intro h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .services-overview-note {
    align-items:
      flex-start;
  }


  .services-overview-note > span {
    font-size:
      2.2rem;
  }


  .service-detail {
    padding:
      32px
      3px
      38px;
  }


  .service-detail:hover {
    padding-left:
      3px;

    background:
      transparent;
  }


  .service-detail::before {
    display: none;
  }


  .service-detail-top {
    margin-bottom:
      14px;
  }


  .service-detail-category {
    text-align:
      right;
  }


  .service-detail h3 {
    font-size:
      clamp(
        1.55rem,
        7vw,
        1.95rem
      );
  }


  .service-detail-points {
    gap:
      6px;
  }


  .service-detail-points span {
    font-size:
      0.73rem;
  }

}

/* =========================================================
   CONNECTED PROJECT SERVICES
========================================================= */

.services-connected {
  position: relative;

  overflow: clip;

  padding:
    clamp(85px, 8vw, 120px)
    0;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      135deg,
      #182329 0%,
      #21353F 100%
    );
}


/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */

.services-connected-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.19;

  background-image:
    linear-gradient(
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 14%,
      black 86%,
      transparent
    );
}


/* Subtle glow */
.services-connected::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -220px;
  right: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(137, 198, 232, 0.12),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.services-connected-head {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(
      50px,
      7vw,
      100px
    );

  margin-bottom:
    clamp(
      55px,
      6vw,
      78px
    );
}


.services-connected-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    17px;

  color:
    var(--uvc-light-blue);

  font-size: 0.70rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.services-connected-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    var(--uvc-light-blue);
}


.services-connected-title h2 {
  max-width: 760px;

  margin: 0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.15rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.042em;

  font-weight: 760;
}


.services-connected-title h2 span {
  display: block;

  color:
    var(--uvc-light-blue);
}


.services-connected-intro {
  max-width: 530px;

  margin: 0;

  color:
    #C2CED3;

  font-size: 0.96rem;

  line-height: 1.76;
}


/* =========================================================
   PROJECT FLOW
========================================================= */

.services-connected-flow {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}


/* Connecting technical line */
.services-connected-flow::before {
  content: "";

  position: absolute;

  top: 39px;

  left: 4%;
  right: 4%;

  height: 1px;

  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(123, 184, 223, 0.18),
      rgba(123, 184, 223, 0.65),
      rgba(123, 184, 223, 0.18)
    );
}


/* =========================================================
   STAGE
========================================================= */

.connected-stage {
  position: relative;

  z-index: 1;

  min-height: 330px;

  padding:
    23px
    22px
    25px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.035);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}


.connected-stage:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(123, 184, 223, 0.30);

  background:
    rgba(255, 255, 255, 0.055);
}


/* =========================================================
   STAGE TOP
========================================================= */

.connected-stage-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom:
    45px;
}


.connected-stage-number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 33px;
  height: 33px;

  border:
    1px solid
    rgba(123, 184, 223, 0.28);

  border-radius: 50%;

  color:
    var(--uvc-light-blue);

  background:
    #1D2B32;

  font-size: 0.63rem;

  font-weight: 800;
}


.connected-stage-label {
  color:
    #9DB0B8;

  font-size: 0.59rem;

  font-weight: 800;

  letter-spacing:
    0.10em;

  text-transform: uppercase;
}


/* =========================================================
   CONTENT
========================================================= */

.connected-stage h3 {
  margin:
    0
    0
    11px;

  color:
    #FFFFFF;

  font-size:
    1.22rem;

  line-height: 1.3;

  font-weight: 740;
}


.connected-stage > p {
  margin:
    0
    0
    25px;

  color:
    #A9B9C0;

  font-size: 0.86rem;

  line-height: 1.65;
}


/* =========================================================
   SERVICE LINKS
========================================================= */

.connected-stage-links {
  display: grid;

  gap: 8px;
}


.connected-stage-links a {
  position: relative;

  display: block;

  padding:
    9px
    10px
    9px
    23px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 5px;

  color:
    #CAD5DA;

  background:
    rgba(255, 255, 255, 0.025);

  text-decoration: none;

  font-size: 0.74rem;

  font-weight: 650;

  line-height: 1.4;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}


.connected-stage-links a::before {
  content: "";

  position: absolute;

  left: 10px;
  top: 50%;

  width: 4px;
  height: 4px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    var(--uvc-light-blue);
}


.connected-stage-links a:hover {
  color:
    #FFFFFF;

  border-color:
    rgba(123, 184, 223, 0.25);

  background:
    rgba(123, 184, 223, 0.07);
}


/* =========================================================
   BOTTOM
========================================================= */

.services-connected-bottom {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    22px;

  margin-top:
    35px;

  padding-top:
    24px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.services-connected-bottom > span {
  color:
    var(--uvc-light-blue);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.services-connected-bottom p {
  margin: 0;

  color:
    #91A4AD;

  font-size: 0.84rem;

  line-height: 1.55;
}


.services-connected-link {
  color:
    #FFFFFF;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .services-connected-head {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .services-connected-flow {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .services-connected-flow::before {
    display: none;
  }


  .connected-stage {
    min-height: 300px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-connected {
    padding:
      70px
      0;
  }


  .services-connected-title h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .services-connected-flow {
    grid-template-columns:
      1fr;
  }


  .connected-stage {
    min-height: 0;
  }


  .connected-stage-top {
    margin-bottom:
      32px;
  }


  .services-connected-bottom {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

}

/* =========================================================
   WHY UVC
========================================================= */

.services-why {
  position: relative;

  overflow: clip;

  padding:
    clamp(82px, 7.5vw, 115px)
    0;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5F9FB 100%
    );
}


/* =========================================================
   LAYOUT
========================================================= */

.services-why-layout {
  display: grid;

  grid-template-columns:
    minmax(290px, 0.72fr)
    minmax(0, 1.28fr);

  align-items: start;

  gap:
    clamp(
      60px,
      8vw,
      120px
    );
}


/* =========================================================
   INTRO
========================================================= */

.services-why-intro {
  max-width: 530px;
}


.services-why-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    17px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.70rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.services-why-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.services-why-intro h2 {
  margin:
    0
    0
    21px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.4rem,
      3.6vw,
      3.8rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.042em;

  font-weight: 760;
}


.services-why-intro h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.services-why-intro > p {
  max-width: 480px;

  margin:
    0
    0
    24px;

  color:
    var(--uvc-text);

  font-size: 0.95rem;

  line-height: 1.75;
}


/* =========================================================
   LIST
========================================================= */

.services-why-list {
  border-top:
    1px solid
    rgba(90, 140, 163, 0.18);
}


.services-why-item {
  position: relative;

  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 24px;

  min-height: 130px;

  padding:
    28px
    12px;

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.18);

  transition:
    padding-left 0.3s ease,
    background-color 0.3s ease;
}


.services-why-item:hover {
  padding-left: 20px;

  background:
    rgba(255, 255, 255, 0.64);
}


/* Left accent */
.services-why-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      var(--uvc-light-blue),
      var(--uvc-deep-blue)
    );

  transition:
    height 0.3s ease;
}


.services-why-item:hover::before {
  height: 100%;
}


/* =========================================================
   NUMBER
========================================================= */

.services-why-number {
  padding-top: 3px;

  color:
    var(--uvc-primary);

  font-size: 0.69rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


/* =========================================================
   CONTENT
========================================================= */

.services-why-item h3 {
  margin:
    0
    0
    8px;

  color:
    var(--uvc-dark);

  font-size: 1.20rem;

  font-weight: 750;
}


.services-why-item p {
  max-width: 650px;

  margin: 0;

  color:
    #69787F;

  font-size: 0.88rem;

  line-height: 1.66;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .services-why-layout {
    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  .services-why-intro {
    max-width: 700px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-why {
    padding:
      70px
      0;
  }


  .services-why-intro h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .services-why-item {
    grid-template-columns:
      38px
      1fr;

    gap: 12px;

    min-height: 0;

    padding:
      23px
      3px;
  }


  .services-why-item:hover {
    padding-left:
      3px;

    background:
      transparent;
  }


  .services-why-item::before {
    display: none;
  }

}

/* =========================================================
   PROJECT ENVIRONMENTS
========================================================= */

.services-sectors {
  position: relative;

  overflow: clip;

  padding:
    clamp(72px, 6.5vw, 100px)
    0;

  background:
    linear-gradient(
      135deg,
      #F2F7F9 0%,
      #FAFCFD 100%
    );
}


/* Decorative technical outline */
.services-sectors::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  right: -190px;
  bottom: -190px;

  border:
    1px solid
    rgba(90, 140, 163, 0.10);

  border-radius:
    50%;

  pointer-events:
    none;
}


/* =========================================================
   HEADING
========================================================= */

.services-sectors-head {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(
      45px,
      7vw,
      100px
    );

  margin-bottom:
    clamp(
      48px,
      5.5vw,
      70px
    );
}


.services-sectors-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    17px;

  color:
    var(--uvc-deep-blue);

  font-size:
    0.70rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.services-sectors-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.services-sectors-title h2 {
  max-width: 740px;

  margin: 0;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.042em;

  font-weight:
    760;
}


.services-sectors-title h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.services-sectors-intro {
  max-width: 520px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size:
    0.96rem;

  line-height:
    1.75;
}


/* =========================================================
   SECTOR GRID
========================================================= */

.services-sectors-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid
    rgba(90, 140, 163, 0.16);

  border-left:
    1px solid
    rgba(90, 140, 163, 0.16);
}


/* =========================================================
   CARD
========================================================= */

.services-sector-card {
  position: relative;

  min-height:
    260px;

  padding:
    26px
    27px
    29px;

  border-right:
    1px solid
    rgba(90, 140, 163, 0.16);

  border-bottom:
    1px solid
    rgba(90, 140, 163, 0.16);

  background:
    rgba(255, 255, 255, 0.52);

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}


.services-sector-card:hover {
  background:
    #FFFFFF;
}


/* Left highlight */
.services-sector-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      var(--uvc-light-blue),
      var(--uvc-deep-blue)
    );

  transition:
    height 0.3s ease;
}


.services-sector-card:hover::before {
  height:
    100%;
}


/* =========================================================
   TOP
========================================================= */

.services-sector-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    20px;

  margin-bottom:
    48px;
}


.services-sector-number {
  color:
    var(--uvc-primary);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


.services-sector-type {
  color:
    #92A0A6;

  font-size:
    0.59rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


/* =========================================================
   CONTENT
========================================================= */

.services-sector-card h3 {
  margin:
    0
    0
    10px;

  color:
    var(--uvc-dark);

  font-size:
    1.25rem;

  font-weight:
    750;
}


.services-sector-card > p {
  max-width:
    350px;

  margin:
    0
    0
    24px;

  color:
    #6B797F;

  font-size:
    0.87rem;

  line-height:
    1.65;
}


/* =========================================================
   SERVICE META
========================================================= */

.services-sector-meta {
  padding-top:
    15px;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.12);

  color:
    var(--uvc-primary);

  font-size:
    0.68rem;

  line-height:
    1.55;

  font-weight:
    700;
}


/* =========================================================
   BOTTOM
========================================================= */

.services-sectors-bottom {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    30px;

  margin-top:
    30px;

  padding-top:
    23px;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.14);
}


.services-sectors-bottom p {
  max-width:
    650px;

  margin: 0;

  color:
    #6B797F;

  font-size:
    0.86rem;

  line-height:
    1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .services-sectors-head {
    grid-template-columns:
      1fr;

    gap:
      25px;
  }


  .services-sectors-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-sectors {
    padding:
      70px
      0;
  }


  .services-sectors-title h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .services-sectors-grid {
    grid-template-columns:
      1fr;
  }


  .services-sector-card {
    min-height:
      0;

    padding:
      24px
      22px
      27px;
  }


  .services-sector-top {
    margin-bottom:
      34px;
  }


  .services-sectors-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      13px;
  }


  .services-sectors::before {
    display:
      none;
  }

}

/* =========================================================
   SERVICES FINAL CTA
========================================================= */

.services-final-cta {
  position: relative;

  overflow: clip;

  padding:
    clamp(78px, 7vw, 105px)
    0;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      135deg,
      #182329 0%,
      #213844 100%
    );
}


/* =========================================================
   BACKGROUND
========================================================= */

.services-final-cta-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.20;

  background-image:
    linear-gradient(
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 18%,
      black 82%,
      transparent
    );
}


/* Soft glow */
.services-final-cta::before {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  left: -200px;
  bottom: -240px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(137, 198, 232, 0.13),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.services-final-cta-inner {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, 0.68fr);

  align-items: center;

  gap:
    clamp(
      55px,
      8vw,
      115px
    );
}


/* =========================================================
   CONTENT
========================================================= */

.services-final-cta-content {
  max-width:
    760px;
}


.services-final-cta-kicker {
  margin:
    0
    0
    16px;

  color:
    var(--uvc-light-blue);

  font-size:
    0.70rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.services-final-cta-content h2 {
  max-width:
    760px;

  margin:
    0
    0
    21px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      2.55rem,
      4vw,
      4.2rem
    );

  line-height:
    1.04;

  letter-spacing:
    -0.043em;

  font-weight:
    760;
}


.services-final-cta-content h2 span {
  display: block;

  color:
    var(--uvc-light-blue);
}


.services-final-cta-content > p {
  max-width:
    670px;

  margin:
    0
    0
    31px;

  color:
    #B9C7CD;

  font-size:
    0.96rem;

  line-height:
    1.74;
}


/* =========================================================
   ACTIONS
========================================================= */

.services-final-cta-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    25px;
}


.services-cta-phone {
  display: block;

  padding:
    5px
    0;

  text-decoration: none;

  cursor: pointer;
}


.services-cta-phone small {
  display: block;

  margin-bottom:
    3px;

  color:
    #8197A1;

  font-size:
    0.59rem;

  font-weight:
    800;

  letter-spacing:
    0.10em;
}


.services-cta-phone strong {
  display: block;

  color:
    #FFFFFF;

  font-size:
    0.98rem;

  font-weight:
    700;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.services-cta-phone:hover strong {
  color:
    var(--uvc-light-blue);

  transform:
    translateX(3px);
}


/* =========================================================
   PROJECT STAGE PANEL
========================================================= */

.services-cta-stage {
  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.035);
}


.services-cta-stage-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    20px;

  padding:
    18px
    20px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}


.services-cta-stage-head small {
  color:
    var(--uvc-light-blue);

  font-size:
    0.60rem;

  font-weight:
    800;

  letter-spacing:
    0.10em;
}


.services-cta-stage-head span {
  color:
    rgba(137, 198, 232, 0.32);

  font-size:
    0.68rem;

  font-weight:
    800;
}


/* =========================================================
   STAGE LINKS
========================================================= */

.services-cta-stage-list {
  display: grid;
}


.services-cta-stage-list > a {
  display: grid;

  grid-template-columns:
    36px
    1fr;

  align-items: center;

  gap:
    13px;

  min-height:
    78px;

  padding:
    14px
    19px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);

  color:
    inherit;

  text-decoration:
    none;

  transition:
    background-color 0.25s ease,
    padding-left 0.25s ease;
}


.services-cta-stage-list > a:last-child {
  border-bottom:
    0;
}


.services-cta-stage-list > a:hover {
  padding-left:
    24px;

  background:
    rgba(137, 198, 232, 0.06);
}


.services-cta-stage-list > a > span {
  color:
    var(--uvc-light-blue);

  font-size:
    0.65rem;

  font-weight:
    800;
}


.services-cta-stage-list small {
  display: block;

  margin-bottom:
    3px;

  color:
    #7F959F;

  font-size:
    0.57rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


.services-cta-stage-list strong {
  display: block;

  color:
    #E5ECEF;

  font-size:
    0.85rem;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .services-final-cta-inner {
    grid-template-columns:
      1fr;

    gap:
      45px;
  }


  .services-cta-stage {
    max-width:
      650px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .services-final-cta {
    padding:
      66px
      0;
  }


  .services-final-cta-content h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .services-final-cta-actions {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      22px;
  }


  .services-cta-stage-list > a {
    min-height:
      74px;

    padding:
      13px
      15px;
  }


  .services-cta-stage-list > a:hover {
    padding-left:
      15px;
  }

}