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

.services-section {
  position: relative;
  z-index: 2;

  width: 100%;

  padding-block:
    clamp(3.5rem, 5vw, 5rem)
    clamp(3.5rem, 5vw, 5rem);

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f8fafc 0%,
      #ffffff 46%,
      #f1f5f8 100%
    );
}


/* Subtle industrial background geometry */

.services-section::before {
  position: absolute;
  top: -12rem;
  right: -8rem;

  width: 38rem;
  height: 52rem;

  content: "";

  background:
    linear-gradient(
      135deg,
      transparent 0 28%,
      rgba(7, 136, 207, 0.035) 28% 42%,
      transparent 42% 52%,
      rgba(7, 136, 207, 0.07) 52% 62%,
      transparent 62%
    );

  transform: rotate(-3deg);

  pointer-events: none;
}


/* =========================================================
   SVG SYMBOL STORAGE
   ========================================================= */

.service-symbols {
  position: absolute;

  width: 0;
  height: 0;

  overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.services-container {
  position: relative;
  z-index: 1;

  display: grid;

  gap: clamp(2rem, 4vw, 3.5rem);
}


/* =========================================================
   HEADER
   ========================================================= */

.services-header {
  max-width: 48rem;
}

.services-header .section-label {
  margin-bottom: 0.7rem;
}

.services-header h2 {
  margin: 0;

  font-size:
    clamp(2.75rem, 5vw, 4.75rem);

  font-weight: 700;

  line-height: 0.98;

  letter-spacing: -0.035em;
}

.services-heading-line {
  display: block;

  width: 2.6rem;
  height: 2px;

  margin-top: 1.5rem;

  background: var(--color-brand);
}

.services-intro {
  max-width: none;

  margin: 1.25rem 0 0;

  color: var(--color-muted);

  font-size:
    clamp(0.9rem, 1.15vw, 1rem);

  line-height: 1.75;
}

@media (min-width: 761px) {
  .services-intro {
    white-space: nowrap;
  }
}


/* =========================================================
   SERVICE TAB BAR
   ========================================================= */

.service-tabs {
  position: relative;
  z-index: 4;

  display: grid;

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

  width: 100%;

  overflow: hidden;

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

  border:
    1px solid
    rgba(17, 19, 23, 0.09);

  border-radius: 0.65rem 0.65rem 0 0;

  box-shadow:
    0 12px 35px
    rgba(17, 19, 23, 0.055);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.service-tab {
  position: relative;

  display: flex;

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

  gap: 0.7rem;

  min-width: 0;
  min-height: 4.25rem;

  padding: 0.85rem 1rem;

  color: var(--color-ink);

  background: transparent;

  border: 0;

  font: inherit;

  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    color 200ms ease,
    background 200ms ease;
}


.service-tab + .service-tab {
  border-left:
    1px solid
    rgba(17, 19, 23, 0.08);
}


.service-tab svg {
  flex: 0 0 auto;

  width: 1.65rem;
  height: 1.65rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.service-tab.is-active {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #0788cf,
      #0da1ed
    );
}


.service-tab:is(:hover, :focus-visible):not(.is-active) {
  color: var(--color-brand);

  background:
    rgba(7, 136, 207, 0.045);
}


.service-tab:focus-visible {
  z-index: 2;

  outline:
    2px solid
    var(--color-brand);

  outline-offset: -2px;
}


/* =========================================================
   DETAIL PANEL
   ========================================================= */

.service-panels {
  margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem));
}


.service-panel {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  grid-template-rows:
    auto
    1fr;

  min-height: 31rem;

  overflow: hidden;

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

  border:
    1px solid
    rgba(17, 19, 23, 0.09);

  border-top: 0;

  border-radius:
    0
    0
    0.7rem
    0.7rem;

  box-shadow:
    0 18px 45px
    rgba(17, 19, 23, 0.07);

  animation:
    service-panel-enter
    320ms
    cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}


.service-panel[hidden] {
  display: none !important;
}


/* =========================================================
   MEDIA
   ========================================================= */

.service-media {
  position: relative;

  grid-column: 1;
  grid-row: 1 / 3;

  min-width: 0;
  min-height: 31rem;

  margin: 0;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #eef4f8,
      #ffffff
    );
}


.service-media::before {
  position: absolute;
  inset: 0;

  z-index: 0;

  content: "";

  background:
    linear-gradient(
      125deg,
      transparent 0 18%,
      rgba(7, 136, 207, 0.08) 18% 26%,
      transparent 26% 34%,
      rgba(7, 136, 207, 0.14) 34% 43%,
      transparent 43%
    );

  pointer-events: none;
}


.service-media::after {
  position: absolute;

  right: -12%;
  bottom: -20%;

  width: 60%;
  aspect-ratio: 1;

  content: "";

  background:
    radial-gradient(
      circle,
      rgba(7, 136, 207, 0.08),
      transparent 70%
    );

  pointer-events: none;
}


.service-media img {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  min-height: 31rem;

  object-fit: cover;
  object-position: center;
}


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

.service-panel-head {
  grid-column: 2;
  grid-row: 1;

  align-self: end;

  padding:
    clamp(2rem, 4vw, 3.75rem)
    clamp(2rem, 4vw, 4rem)
    1rem;
}


.service-panel-label {
  margin: 0 0 0.65rem;

  color: var(--color-brand);

  font-size: 0.72rem;
  font-weight: 800;

  text-transform: uppercase;
}


.service-panel-head h3 {
  max-width: 18ch;

  margin: 0;

  font-size:
    clamp(1.8rem, 3vw, 3rem);

  font-weight: 750;

  line-height: 1.03;

  letter-spacing: -0.035em;
}


.service-panel-line {
  display: block;

  width: 2.1rem;
  height: 2px;

  margin-block: 1.25rem;

  background:
    var(--color-brand);
}


.service-panel-head > p:last-child {
  max-width: 32rem;

  margin: 0;

  color: var(--color-muted);

  font-size: 0.9rem;

  line-height: 1.7;
}


/* =========================================================
   FEATURES
   ========================================================= */

.service-panel-features {
  grid-column: 2;
  grid-row: 2;

  align-self: start;

  padding:
    0
    clamp(2rem, 4vw, 4rem)
    clamp(2.5rem, 4vw, 3.75rem);
}


.service-feature-list {
  display: grid;

  gap: 0.75rem;

  margin: 0;
  padding: 0;

  list-style: none;
}


.service-feature-list li {
  position: relative;

  padding-left: 1.7rem;

  color: var(--color-muted);

  font-size: 0.83rem;

  line-height: 1.55;
}


.service-feature-list li::before {
  position: absolute;

  top: 0.18rem;
  left: 0;

  display: grid;

  place-items: center;

  width: 1rem;
  height: 1rem;

  content: "✓";

  color: var(--color-brand);

  border:
    1px solid
    var(--color-brand);

  border-radius: 50%;

  font-size: 0.6rem;
  font-weight: 800;
}


.service-enquire {
  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  margin-top: 1.8rem;

  color: var(--color-brand);

  font-size: 0.86rem;
  font-weight: 750;
}


.service-enquire span:last-child {
  transition:
    transform 180ms ease;
}


.service-enquire:is(:hover, :focus-visible)
span:last-child {
  transform:
    translateX(0.25rem);
}



.service-shortcut:is(:hover, :focus-visible) {
  background:
    rgba(7, 136, 207, 0.045);
}


.service-shortcut:is(:hover, :focus-visible)
.service-shortcut-arrow {
  transform:
    rotate(-90deg)
    translateY(0.2rem);
}

/* =========================================================
   COMPACT DESKTOP SERVICE PANEL
   ========================================================= */

@media (min-width: 761px) {

  /* Slightly smaller tab bar */
  .service-tab {
    min-height: 3.5rem;
    padding-block: 0.65rem;
  }

  .service-tab svg {
    width: 1.4rem;
    height: 1.4rem;
  }


  /* Main panel */
  .service-panel {
    min-height: 25rem;

    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(0, 0.92fr);
  }


  /* Image side */
  .service-media {
    min-height: 25rem;
  }

  .service-media img {
    min-height: 25rem;
  }


  /* Right-side heading area */
  .service-panel-head {
    padding:
      2rem
      clamp(2rem, 3vw, 3rem)
      0.6rem;
  }

  .service-panel-label {
    margin-bottom: 0.45rem;

    font-size: 0.66rem;
  }

  .service-panel-head h3 {
    max-width: 19ch;

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

    line-height: 1.02;
  }

  .service-panel-line {
    width: 1.8rem;

    margin-block: 0.9rem;
  }

  .service-panel-head > p:last-child {
    font-size: 0.8rem;
    line-height: 1.55;
  }


  /* Features */
  .service-panel-features {
    padding:
      0
      clamp(2rem, 3vw, 3rem)
      1.8rem;
  }

  .service-feature-list {
    gap: 0.5rem;
  }

  .service-feature-list li {
    padding-left: 1.5rem;

    font-size: 0.76rem;
    line-height: 1.45;
  }

  .service-feature-list li::before {
    top: 0.12rem;

    width: 0.9rem;
    height: 0.9rem;

    font-size: 0.52rem;
  }


  /* Enquire link */
  .service-enquire {
    margin-top: 1.15rem;

    font-size: 0.8rem;
  }

}

/* =========================================================
   PANEL ANIMATION
   ========================================================= */

@keyframes service-panel-enter {
  from {
    opacity: 0;

    transform:
      translateY(0.45rem);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


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

@media (min-width: 761px) and (max-width: 1050px) {

  .service-tab {
    gap: 0.45rem;

    padding-inline: 0.65rem;

    font-size: 0.69rem;
  }


  .service-tab svg {
    width: 1.35rem;
    height: 1.35rem;
  }


  .service-panel {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.05fr);
  }


  .service-panel-head {
    padding-inline: 2rem;
  }


  .service-panel-features {
    padding-inline: 2rem;
  }

}


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

@media (max-width: 760px) {

  .services-section {
    padding-block:
      4.25rem
      4rem;
  }


  .services-container {
    gap: 2.5rem;
  }


  .services-header h2 {
    font-size:
      clamp(2.5rem, 12vw, 3.5rem);
  }


  .services-intro {
    max-width: 31rem;

    font-size: 0.86rem;

    line-height: 1.65;
  }


  /* =============================================
     Horizontal service selector
     ============================================= */

  .service-tabs {
    display: flex;

    width:
      calc(
        100% +
        (var(--space-page) * 2)
      );

    margin-inline:
      calc(-1 * var(--space-page));

    padding-inline:
      var(--space-page);

    gap: 0.4rem;

    overflow-x: auto;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    scrollbar-width: none;

    scroll-snap-type:
      x mandatory;
  }


  .service-tabs::-webkit-scrollbar {
    display: none;
  }


  .service-tab {
    flex:
      0
      0
      auto;

    min-width: 9.75rem;
    min-height: 4rem;

    justify-content: flex-start;

    padding:
      0.7rem
      0.85rem;

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

    border:
      1px solid
      rgba(17, 19, 23, 0.08) !important;

    border-radius: 0.65rem;

    box-shadow:
      0 8px 24px
      rgba(17, 19, 23, 0.05);

    font-size: 0.7rem;

    line-height: 1.25;

    scroll-snap-align: start;
  }


  .service-tab.is-active {
    border-color:
      transparent !important;
  }


  /* =============================================
     Detail panel
     ============================================= */

  .service-panels {
    margin-top: -1.7rem;
  }


  .service-panel {
    grid-template-columns: 1fr;

    grid-template-rows:
      auto
      auto
      auto;

    min-height: 0;

    border:
      1px solid
      rgba(17, 19, 23, 0.09);

    border-radius: 0.75rem;

    box-shadow:
      0 12px 34px
      rgba(17, 19, 23, 0.06);
  }


  .service-panel-head {
    grid-column: 1;
    grid-row: 1;

    padding:
      1.8rem
      1.5rem
      1.4rem;
  }


  .service-panel-label {
    font-size: 0.66rem;
  }


  .service-panel-head h3 {
    max-width: 19ch;

    font-size:
      clamp(1.65rem, 7vw, 2.15rem);
  }


  .service-panel-head > p:last-child {
    font-size: 0.82rem;

    line-height: 1.65;
  }


  /* Image comes BELOW intro on mobile */

  .service-media {
    grid-column: 1;
    grid-row: 2;

    min-height: 0;

    margin:
      0
      1.5rem;

    border-radius: 0.6rem;
  }


  .service-media img {
    min-height: 0;

    height:
      clamp(12rem, 52vw, 19rem);

    object-fit: cover;
  }


  /* Features below image */

  .service-panel-features {
    grid-column: 1;
    grid-row: 3;

    padding:
      1.5rem
      1.5rem
      1.8rem;
  }


  .service-feature-list {
    gap: 0.65rem;
  }


  .service-feature-list li {
    font-size: 0.76rem;
  }


  .service-enquire {
    margin-top: 1.5rem;

    font-size: 0.82rem;
  }


}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 430px) {

  .service-tab {
    min-width: 9rem;

    font-size: 0.66rem;
  }


  .service-tab svg {
    width: 1.4rem;
    height: 1.4rem;
  }


  .service-panel-head {
    padding-inline: 1.2rem;
  }


  .service-media {
    margin-inline: 1.2rem;
  }


  .service-panel-features {
    padding-inline: 1.2rem;
  }


  .service-shortcut {
    column-gap: 0.8rem;

    padding-inline: 0.9rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service-panel {
    animation: none;
  }


  .service-tab,
  .service-enquire span:last-child {
    transition: none;
  }

}