.services-page { color: var(--color-navy-950); }

.services-opening {
  position: relative;
  isolation: isolate;
  background: #f4f9fc;
}
.services-opening::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: url("../images/decor/sie-topographic-pattern.svg") right center / cover no-repeat;
  opacity: .055;
  pointer-events: none;
}
.services-opening__inner {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding: 3rem var(--space-page) 1.5rem;
}
.services-opening__intro { max-width: 55rem; }
.services-opening h1 {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.services-opening__description {
  max-width: 44rem;
  margin: 1.25rem 0 0;
  color: #496074;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
}
.services-explorer { margin-top: clamp(1.5rem, 2.25vw, 2.25rem); }
.services-panel {
  display: flex;
  overflow-x: auto;
  border: 1px solid #c5dde7;
  border-radius: .65rem;
  background: #ffffffeb;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #08b9e8 #e6f0f5;
}
.services-category {
  display: flex;
  flex: 0 0 78%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem 1.25rem 1.65rem;
  border-right: 1px solid #d5e6ee;
  color: var(--color-navy-950);
  text-decoration: none;
  scroll-snap-align: start;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.services-category:last-child { border-right: 0; }
.services-category__number {
  color: #007da3;
  font-size: .75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .09em;
}
.services-category svg {
  width: 2.65rem;
  height: 2.65rem;
  margin: 1.5rem 0 1.25rem;
  fill: none;
  stroke: #008bb3;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.services-category__name {
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.3;
}
.services-category__description {
  margin-top: .6rem;
  color: #496074;
  font-size: .8rem;
  line-height: 1.45;
}
.services-category.is-active {
  background: #e8f7fc;
  box-shadow: inset 0 -.2rem var(--color-cyan-500);
}
.services-category:focus-visible {
  outline: 3px solid #007da3;
  outline-offset: -4px;
  background: #e8f7fc;
}
@media (hover: hover) {
  .services-category:hover { color: #fff; background: var(--color-navy-950); }
  .services-category:hover .services-category__description { color: #fff; }
  .services-category:hover .services-category__number { color: var(--color-cyan-400); }
  .services-category:hover svg { stroke: var(--color-cyan-400); }
}
.services-explorer__hint {
  display: flex;
  justify-content: space-between;
  margin: .85rem 0 0;
  color: #496074;
  font-size: .76rem;
}
.services-explorer__hint span { color: #007da3; font-size: 1.25rem; line-height: 1; }

@media (max-width: 47.999rem) {
  .services-category {
    flex-basis: clamp(10.5rem, 48%, 13rem);
    padding: .9rem .9rem 1rem;
  }
  .services-category svg {
    width: 2rem;
    height: 2rem;
    margin: .55rem 0 .65rem;
  }
  .services-category__description { margin-top: .35rem; }
  .services-explorer__hint { margin-top: .55rem; }
}

@media (min-width: 48rem) {
  .services-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); overflow: hidden; }
  .services-category { grid-column: span 3; padding: 1.35rem 1.2rem 1.6rem; }
  .services-category__name { min-height: 2.6em; }
  .services-category:nth-child(-n+4) { border-bottom: 1px solid #d5e6ee; }
  .services-category:nth-child(4) { border-right: 0; }
  .services-explorer__hint { display: none; }
}
@media (min-width: 75rem) {
  .services-panel { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .services-category, .services-category:nth-child(n+5) { grid-column: auto; }
  .services-category { padding: 1.4rem clamp(.85rem, 1.35vw, 1.6rem) 1.8rem; }
  .services-category:nth-child(-n+4) { border-bottom: 0; }
  .services-category:nth-child(4) { border-right: 1px solid #d5e6ee; }
  .services-category__name { min-height: 2.6em; font-size: clamp(.95rem, 1.12vw, 1.18rem); }
  .services-category__description { font-size: clamp(.72rem, .88vw, .86rem); }
}
@media (prefers-reduced-motion: reduce) {
  .services-category { transition: none; }
  .services-panel { scroll-snap-type: none; }
}

/* The existing assistant is the primary CTA in the final Services block. */
.services-page .ai-agent { display: none; }
.services-closing { padding: 1.5rem var(--space-page) 3rem; background: #f0f6fa url('../images/decor/sie-topographic-pattern.svg') center / cover; }
.services-closing__inner { position: relative; isolation: isolate; overflow: hidden; max-width: 75rem; margin: auto; padding: 3rem clamp(1.5rem,4vw,4rem) 4.5rem; border-radius: 1.5rem; background: #001a36; color: white; text-align: center; box-shadow: 0 .7rem 1.5rem #001a3625; }
.services-closing__art { position: absolute; right: 0; bottom: 0; z-index: -1; width: 35%; height: 100%; color: #08b9e8; opacity: .23; pointer-events: none; }
.services-closing__eyebrow { margin: 0 0 1rem; color: #17c9f3; letter-spacing: .18em; font-size: .85rem; }
.services-closing h2 { max-width: 55rem; margin: 0 auto; font-size: clamp(2rem,3.5vw,3.5rem); line-height: 1.15; text-wrap: balance; }
.services-closing__copy { max-width: 49rem; margin: 1.5rem auto 2rem; font-size: 1.1rem; line-height: 1.65; }
.services-closing__actions { display: flex; align-items: flex-start; justify-content: center; gap: 1.5rem; }
.services-closing__actions > * { flex: 1; max-width: 25rem; min-width: 0; }
.services-closing__actions > :is(a, button) { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1rem; border: 1px solid #17c9f3; border-radius: .4rem; color: white; text-decoration: none; }
.services-closing__actions > button { background: #17c9f3; color: #001a36; font: inherit; font-weight: 600; cursor: pointer; }
.services-closing__actions > button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.services-page .services-closing .ai-agent { display: block; position: relative; inset: auto; z-index: auto; width: 100%; margin: 0; }
.services-page .services-closing .ai-agent__trigger { display: flex; width: 100%; min-width: 0; min-height: 5rem; height: auto; padding: 1rem; border-radius: .4rem; background: #17c9f3; color: #001a36; box-shadow: none; }
.services-page .services-closing .ai-agent__text { display: grid; gap: .3rem; width: 100%; text-align: center; }
.services-page .services-closing .ai-agent__text strong { font-size: 1rem; white-space: normal; }
.services-page .services-closing .ai-agent__text span { font-size: .8rem; color: #001a36; }
.services-page .services-closing .ai-agent__icon { display: none; }
.services-page .services-closing .ai-agent__panel { position: relative; inset: auto; width: 100%; max-height: none; margin-top: .75rem; text-align: left; }
.services-closing :focus-visible { outline: 3px solid #74ddff; outline-offset: 4px; }
@media (max-width: 47.99rem) {
  .services-closing__actions { flex-direction: column; align-items: stretch; }
  .services-closing__actions > * { max-width: none; }
  .services-closing__art { width: 60%; opacity: .12; }
}

/* Catalogue scoped to Services; shared components remain unchanged. */
.services-catalog { padding: 1.5rem var(--space-page) 4rem; background: #f0f6fa url('../images/decor/sie-topographic-pattern.svg') left center / cover; scroll-margin-top: var(--services-scroll-offset, 0px); }
.services-catalog__heading { text-align: center; margin: 0 auto 2rem; }
.services-catalog__heading p { margin: 0; color: #007da3; letter-spacing: .22em; font-size: .85rem; }
.services-catalog__heading h2 { font-size: clamp(1.7rem, 2.7vw, 2.8rem); letter-spacing: -.025em; margin: .8rem 0 0; }
.services-catalog__stage { position: relative; max-width: 89rem; margin: auto; }
.services-catalog__cards { display: grid; border-radius: 1rem; box-shadow: 0 1rem 2rem #001a3620; overflow: hidden; background: #001a36; }
.service-card { grid-area: 1 / 1; display: grid; grid-template-columns: 1.1fr 1fr; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 300ms ease, visibility 300ms; scroll-margin-top: 8rem; }
.service-card.is-active { visibility: visible; opacity: 1; z-index: 1; }
.service-card__photo { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.service-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.service-card__body { position: relative; padding: clamp(1.5rem, 2.8vw, 3rem); background: linear-gradient(120deg,#002443,#001a36); color: white; min-width: 0; display: flex; flex-direction: column; }
.service-card__count { margin: 0 0 1.5rem; font-size: 1.15rem; }
.service-card__count span { color: #17c9f3; font-size: 1.6rem; }
.service-card__count::after { content: ''; display: block; width: 3rem; height: 2px; background: #17c9f3; margin-top: .7rem; }
.service-card h3 { font-size: clamp(1.8rem, 2.8vw, 3rem); letter-spacing: -.025em; line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; }
.service-card__copy { margin: 0; line-height: 1.65; color: #e5edf4; }
.service-card__highlights-title { margin: 1.25rem 0 0; color: #fff; font-size: 1rem; font-weight: 700; }
.service-card__highlights { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.4rem 1rem; }
.service-card__highlights li { display: flex; align-items: center; gap: .7rem; line-height: 1.45; font-size: .94rem; }
.service-card__highlights svg { width: 2rem; height: 2rem; flex: 0 0 2rem; fill: none; stroke: #17c9f3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card__highlights span { border-left: 1px solid #08b9e8; padding-left: .7rem; }
.service-card__actions { display: flex; gap: 1rem; margin-top: auto; }
.services-catalog button { font: inherit; cursor: pointer; }
.service-card__actions button { flex: 1; border: 1px solid #17c9f3; border-radius: .4rem; min-height: 3.4rem; padding: .7rem; color: #fff; background: transparent; font-weight: 600; }
.service-card__actions [data-details] { color: #001a36; background: #17c9f3; }
.service-card__actions button:hover { background: #74ddff; color: #001a36; }
.service-card__details { position: absolute; inset: 0; padding: clamp(1.5rem, 2.8vw, 3rem); background: #002443; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(.6rem); transition: opacity 300ms, transform 300ms, visibility 300ms; }
.service-card__details.is-open { visibility: visible; opacity: 1; transform: none; }
.service-card__details button { display: block; margin-left: auto; min-height: 44px; border: 1px solid #17c9f3; border-radius: .4rem; color: white; background: transparent; padding: .5rem 1rem; }
.service-card__details h4 { margin: 1.5rem 0; font-size: clamp(1.4rem,2vw,2rem); }
.service-card__details ul { padding-left: 1.3rem; line-height: 1.7; }
.service-card__details li { margin-bottom: .85rem; }
.service-card__details li::marker { color: #17c9f3; }
.services-catalog__navigation { max-width: 89rem; margin: 1.5rem auto 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1rem 3rem; }
.catalog-dots { display: flex; flex-wrap: wrap; max-width: 100%; justify-content: center; }
.catalog-dots button { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; }
.catalog-dots span { width: .6rem; height: .6rem; border-radius: 50%; background: #728796; }
.catalog-dots [aria-current] span { background: #007da3; transform: scale(1.4); }
.catalog-next { min-height: 44px; border: 0; background: transparent; color: #001a36; text-align: right; max-width: 100%; line-height: 1.5; }
.catalog-next span { color: #007da3; }
.services-catalog :focus-visible { outline: 3px solid #08b9e8; outline-offset: 4px; }
.service-card :focus-visible { outline-color: #74ddff; }
.services-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.services-page main::before { content: none; display: none; height: 0; }
/* Desktop: compact vertical rhythm; keep content-driven height and the photo's width. */
@media (min-width: 64rem) {
  .services-catalog__heading { margin-bottom: 1.5rem; }
  .service-card__body { padding-block: clamp(1.25rem, 2vw, 2.25rem); }
  .service-card__count { margin-bottom: 1rem; }
  .service-card__count::after { margin-top: .5rem; }
  .service-card h3 { margin-bottom: .75rem; }
  .service-card__highlights { margin-block: 1rem 1.5rem; row-gap: 1rem; }
  .services-catalog__navigation { margin-top: 1rem; }
}
@media (max-width: 63.99rem) {
  .service-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .service-card__photo { align-self: start; }
  .service-card__body { padding: 1.8rem; }
  .services-catalog__navigation { margin-top: 1.5rem; justify-content: center; gap: .5rem; }
  .catalog-next { text-align: center; }
}
@media (max-width: 35rem) {
  .services-catalog { padding-inline: 1rem; }
  .service-card__body { padding: 1.5rem; }
  .service-card__highlights { grid-template-columns: 1fr; gap: 1rem; }
  .service-card__actions { flex-direction: column; }
  .catalog-dots button { width: 40px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card__details, .services-page .ai-agent__trigger { transition: none; }
}