/*
  OUR SERVICES section styles — scoped under .sec-services.
  Source: Figma fileKey lweOnfp23FBRWjuK2mQ7cw, node 1:494 "Group 186" (+ 1:370 "Line 12").
  All values are fixed frame px (no %, vw, vh, clamp, or media queries) per shared contract.
  Fonts referenced by family name only: 'Space Grotesk' (headings), 'Inter' (body copy),
  'Ailerons' (button micro-label) — assumed to be loaded/declared globally by the page shell.
*/

.sec-services {
  position: relative;
  width: 1280px;
}

/* ---------- 1:496 heading ---------- */
.sec-services .svc-heading {
  position: absolute;
  left: 173px;
  top: 1965px;
  width: 750px;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  line-height: 1;
  z-index: 1;
}

.sec-services .svc-heading-our {
  font-size: 48px;
  font-weight: 500;
  color: #80121d;
}

.sec-services .svc-heading-services {
  font-size: 64px;
  font-weight: 700;
  color: #003159;
}

/* ---------- 1:495 intro paragraph ---------- */
.sec-services .svc-intro {
  position: absolute;
  left: 743px;
  top: 2053px;
  width: 430px;
  height: 118px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

.sec-services .svc-intro p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.08px;
  color: #262626;
}

.sec-services .svc-intro .b {
  font-weight: 700;
}

/* ---------- 1:497 card ---------- */
.sec-services .svc-card {
  position: absolute;
  left: 92px;
  top: 2113px;
  width: 1017px;
  height: 568px;
  z-index: 1;
}

.sec-services .svc-card-gradient {
  position: absolute;
  left: 83px;
  top: 2px;
  width: 931px;
  height: 566px;
  border-radius: 22px;
  background-image: linear-gradient(
    244.96deg,
    rgb(250, 243, 243) 1.8888%,
    rgb(255, 255, 255) 35.525%,
    rgb(128, 18, 29) 99.035%
  );
  box-shadow: 0px -1px 6.3px 0px rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
}

/* empirical multiply pass matching the design composite (page-bg tone) */
.sec-services .svc-card-darken {
  position: absolute;
  left: 83px;
  top: 2px;
  width: 931px;
  height: 566px;
  border-radius: 22px;
  background: rgb(163, 176, 189);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sec-services .svc-card-image {
  position: absolute;
  left: 538px;
  top: 0;
  width: 479px;
  height: 568px;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}

.sec-services .svc-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-services .svc-upnext {
  position: absolute;
  left: 63px;
  top: 9px;
  width: 180px;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

.sec-services .svc-noc-label {
  position: absolute;
  left: 114px;
  top: 70px;
  width: 294px;
  height: 92px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.sec-services .svc-arrow-btn {
  position: absolute;
  top: 220px;
  width: 44px;
  height: 44px;
}

.sec-services .svc-arrow-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.sec-services .svc-arrow-left {
  left: 115px;
  cursor: pointer;
}

.sec-services .svc-arrow-right {
  left: 170px;
}

.sec-services .svc-managed-title {
  position: absolute;
  left: 54px;
  top: 289px;
  width: 494px;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

.sec-services .svc-body-text {
  position: absolute;
  left: 115px;
  top: 356px;
  width: 378px;
  height: 87px;
}

.sec-services .svc-body-text p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.075px;
  color: #ffffff;
}

.sec-services .svc-cta {
  position: absolute;
  left: 116px;
  top: 467px;
  width: 200px;
  height: 56px;
  background: #ffffff;
  display: block;
  text-decoration: none;
}

.sec-services .svc-cta-label {
  position: absolute;
  left: 14px;
  top: 17px;
  width: 122px;
  height: 23px;
  font-family: 'Ailerons', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  color: #80121d;
}

.sec-services .svc-cta-icon-bg {
  position: absolute;
  left: 149px;
  top: 9px;
  width: 41px;
  height: 37px;
  background: #80121d;
}

.sec-services .svc-cta-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 11.5px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================================================================
   SERVICES CARD — VARIANT SWAP  (Managed Services  <->  NOC Services)

   Figma component set with two variants, decoded from the published
   el-swedy2.site document:
     Property 1=Variant2 -> node 1590  (Managed Services shown)  = built state
     Property 1=Default  -> node 1588  (NOC Services shown)      = added here

   Card, photo, "UP NEXT", CTA and both arrow positions are IDENTICAL in the
   two variants — verified child-by-child. Exactly three things change:
     up-next subject   x114 -> x97   (NOC SERVICES -> managed SERVICES)
     title             x54  -> x0    (Managed SERVICES -> NOC SERVICES)
     body copy         (same box, 115,356 378x87)
   plus the arrow circles trading their #FFFFFF / #FFFFFF@0.59 fills.

   Deltas are applied relative to the already-verified Variant2 positions.
   ========================================================================= */

.svc-state { display: none; }
.svc-state.is-on { display: block; }

/* Default variant shifts these two text boxes left; y, size, font and
   colour are unchanged (nodes 279 and 280 vs 1593 and 1594). */
.svc-state--noc .svc-noc-label     { left: 97px; }
.svc-state--noc .svc-managed-title { left: 0; }

.svc-arrow-btn { cursor: pointer; }