/* Competence + services pass — compact, rounded, and deliberately non-diagrammatic. */

/* --------------------------------------------------------------------------
   TWO SERVICES
   -------------------------------------------------------------------------- */
.solutions {
  min-height: 100svh !important;
  padding: clamp(58px, 7.5vh, 88px) var(--page) !important;
  display: grid !important;
  grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr) !important;
  gap: clamp(32px, 4.4vw, 72px) !important;
  align-items: center !important;
  background:
    radial-gradient(ellipse 46% 80% at 93% 12%, rgba(82,110,199,.22), transparent 70%),
    radial-gradient(ellipse 38% 65% at 50% 100%, rgba(201,50,60,.10), transparent 72%),
    #0b0d10 !important;
}

.solutions-heading { margin: 0 !important; align-self: center !important; }
.solutions-heading h2 {
  max-width: 8.9ch !important;
  margin: 0 !important;
  font-size: clamp(48px, 4.7vw, 78px) !important;
  line-height: .91 !important;
  letter-spacing: -.078em !important;
}

.solution-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.55vw, 24px) !important;
  align-items: stretch !important;
}

.solution-card {
  min-height: 0 !important;
  height: min(73svh, 560px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 0fr !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 34px 34px 15px 34px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
  isolation: isolate;
}
.solution-card.is-open { height: auto !important; grid-template-rows: auto 1fr !important; }
.solution-card::after { display: none !important; }
.solution-card::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 48% !important;
  aspect-ratio: 1 !important;
  top: -12% !important;
  right: -14% !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.025) !important;
  opacity: .8 !important;
}
.solution-card.solution-compass {
  background:
    radial-gradient(circle at 89% 11%, rgba(174,206,255,.5), transparent 23%),
    linear-gradient(145deg, #183b72 0%, #264f92 52%, #708ed2 150%) !important;
}
.solution-card.solution-department {
  background:
    radial-gradient(circle at 88% 10%, rgba(255,209,177,.36), transparent 22%),
    radial-gradient(circle at 4% 98%, rgba(255,125,49,.34), transparent 34%),
    linear-gradient(145deg, #8f3718 0%, #c95a20 54%, #ef9b55 145%) !important;
}
.solution-face {
  min-height: 0 !important;
  padding: clamp(23px, 2.05vw, 34px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.solution-face::before { display: none !important; }
.solution-card .product-mark {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 11px 5px 5px !important;
  gap: 9px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(10px) !important;
}
.solution-card .product-mark .feature-icon {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.solution-card .product-mark .feature-icon svg { width: 17px !important; height: 17px !important; stroke-width: 2.15 !important; }
.solution-card .product-mark span { color: rgba(255,255,255,.86) !important; font-size: 7.5px !important; }
.solution-card .solution-face h3 {
  max-width: 8.7ch !important;
  margin: auto 0 15px !important;
  font-size: clamp(38px, 3.35vw, 55px) !important;
  line-height: .86 !important;
  letter-spacing: -.075em !important;
  color: #fff !important;
}
.solution-card .solution-face h3 em { color: inherit !important; opacity: .76 !important; }
.solution-card .solution-face > p {
  min-height: 0 !important;
  max-width: 28ch !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(13px, .94vw, 15px) !important;
  line-height: 1.48 !important;
}
.product-chips { gap: 6px !important; margin-top: 19px !important; }
.product-chips span {
  padding: 7px 9px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: 7px !important;
}
.solution-card .solution-toggle {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 20px !important;
  padding: 0 13px 0 15px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.085) !important;
  color: #fff !important;
  font-size: 7.5px !important;
}
.solution-card .solution-toggle b { font-size: 0 !important; }
.solution-card .solution-toggle b::before { content: '◆'; display: block; color: #fff; font-size: 10px; transition: transform .35s var(--ease); }
.solution-card.is-open .solution-toggle b::before { transform: rotate(45deg); }
.solution-details { margin: 0 clamp(23px,2.05vw,34px) 28px !important; padding: 22px 0 0 !important; border-top: 1px solid rgba(255,255,255,.26) !important; }
.solution-details > ul li,.department-columns li { position: relative; padding-left: 16px !important; }
.solution-details > ul li::before,.department-columns li::before { content: '◆'; position: absolute; top: .17em; left: 0; color: rgba(255,255,255,.72); font-size: 7px; }

/* --------------------------------------------------------------------------
   COMPETENCE INDEX
   -------------------------------------------------------------------------- */
.competence {
  min-height: 100svh !important;
  padding: clamp(58px, 7.5vh, 88px) var(--page) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  column-gap: clamp(38px, 6vw, 100px) !important;
  row-gap: 20px !important;
  align-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 44% 75% at 84% 18%, rgba(255,255,255,.8), transparent 72%),
    linear-gradient(120deg, #dfe6ec 0%, #eef0ec 55%, #e2e8ee 100%) !important;
  color: #15171b !important;
}
.competence-intro { align-self: center !important; }
.competence-intro h2 {
  max-width: 9.2ch !important;
  margin: 0 0 28px !important;
  font-size: clamp(50px, 4.8vw, 78px) !important;
  line-height: .91 !important;
  letter-spacing: -.082em !important;
}
.competence-intro > p { max-width: 31ch !important; margin: 0 !important; font-size: clamp(14px,1vw,17px) !important; line-height: 1.58 !important; }

.competence-map {
  position: relative !important;
  width: 100% !important;
  min-height: min(67svh, 530px) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(132px, 1fr)) minmax(96px, auto) !important;
  gap: 10px !important;
  place-items: stretch !important;
}
.competence-map::before,.competence-map::after { display: none !important; }
.competence-node {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: clamp(17px,1.75vw,27px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: 1px solid rgba(21,23,27,.17) !important;
  border-radius: 30px 30px 13px 30px !important;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 12px 26px rgba(35,46,61,.05) !important;
  color: #22262c !important;
  font-size: clamp(22px,1.9vw,31px) !important;
  font-weight: 650 !important;
  letter-spacing: -.065em !important;
  line-height: .9 !important;
  text-align: left !important;
  transition: transform .45s var(--ease),background .35s ease,color .35s ease,box-shadow .35s ease !important;
}
.competence-node:nth-of-type(n) { border-right: 1px solid rgba(21,23,27,.17) !important; border-bottom: 1px solid rgba(21,23,27,.17) !important; }
.competence-node span { display: block !important; order: -2; margin: 0 0 12px !important; color: #536174 !important; font: 600 8px/1 var(--mono) !important; letter-spacing: .11em !important; }
.competence-node .feature-icon {
  order: -1;
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 18px !important;
  flex: 0 0 auto !important;
  border: 1px solid currentColor !important;
  border-radius: 14px 14px 7px 14px !important;
  background: rgba(255,255,255,.55) !important;
  color: #355fb3 !important;
}
.competence-node:nth-of-type(2) .feature-icon { color: #bc4657 !important; }
.competence-node:nth-of-type(3) .feature-icon { color: #d27432 !important; }
.competence-node:nth-of-type(4) .feature-icon { color: #397263 !important; }
.competence-node .feature-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2.15 !important; }
.competence-node:hover,.competence-node.is-current {
  padding-left: clamp(17px,1.75vw,27px) !important;
  transform: translateY(-5px) !important;
  background: #1d2532 !important;
  box-shadow: 0 18px 36px rgba(28,40,61,.18) !important;
  color: #fff !important;
}
.competence-node.is-current .feature-icon { background: rgba(255,255,255,.13) !important; color: #fff !important; }
.competence-node br { display: none; }

.competence-core {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  width: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: clamp(17px,1.8vw,28px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: clamp(16px,2vw,30px) !important;
  border: 1px solid rgba(52,77,120,.22) !important;
  border-radius: 27px 27px 10px 27px !important;
  background: linear-gradient(108deg, rgba(77,112,199,.21), rgba(255,255,255,.8) 56%, rgba(238,139,92,.19)) !important;
  box-shadow: 0 14px 28px rgba(42,61,97,.08) !important;
  color: #192234 !important;
}
.competence-core b { color: #355fb3 !important; font-size: clamp(47px,4.8vw,71px) !important; line-height: .74 !important; letter-spacing: -.1em !important; }
.competence-core p {
  max-width: 53ch !important;
  margin: 0 !important;
  color: #263246 !important;
  font-size: clamp(13px,.96vw,16px) !important;
  font-weight: 600 !important;
  line-height: 1.46 !important;
  text-shadow: none !important;
}
.competence-map:has(.competence-node:nth-of-type(2).is-current) .competence-core { background: linear-gradient(108deg, rgba(201,70,87,.2), rgba(255,255,255,.8) 56%, rgba(238,139,92,.18)) !important; }
.competence-map:has(.competence-node:nth-of-type(2).is-current) .competence-core b { color: #bc4657 !important; }
.competence-map:has(.competence-node:nth-of-type(3).is-current) .competence-core { background: linear-gradient(108deg, rgba(222,119,43,.2), rgba(255,255,255,.8) 56%, rgba(239,180,92,.19)) !important; }
.competence-map:has(.competence-node:nth-of-type(3).is-current) .competence-core b { color: #d27432 !important; }
.competence-map:has(.competence-node:nth-of-type(4).is-current) .competence-core { background: linear-gradient(108deg, rgba(57,114,99,.21), rgba(255,255,255,.8) 56%, rgba(110,168,147,.17)) !important; }
.competence-map:has(.competence-node:nth-of-type(4).is-current) .competence-core b { color: #397263 !important; }

.values {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  align-self: start !important;
}
.values span { padding: 7px 10px !important; border: 1px solid rgba(21,23,27,.17) !important; border-radius: 999px !important; background: rgba(255,255,255,.35) !important; color: rgba(21,23,27,.7) !important; font-size: 7px !important; }

@media (max-width: 900px) {
  .solutions { min-height: auto !important; padding: 88px 22px !important; display: block !important; }
  .solutions-heading { margin-bottom: 40px !important; }
  .solutions-heading h2 { font-size: clamp(52px,14vw,74px) !important; }
  .solution-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
  .solution-card { height: auto !important; min-height: 500px !important; border-radius: 27px 27px 11px 27px !important; }
  .solution-face { min-height: 500px !important; }
  .solution-card .solution-face h3 { font-size: clamp(48px,12.8vw,70px) !important; }

  .competence { min-height: auto !important; padding: 88px 22px !important; display: block !important; }
  .competence-intro h2 { font-size: clamp(52px,13.5vw,72px) !important; }
  .competence-intro > p { margin-bottom: 42px !important; }
  .competence-map { min-height: 570px !important; grid-template-rows: repeat(2,minmax(152px,1fr)) 126px !important; gap: 8px !important; }
  .competence-node { padding: 16px !important; font-size: clamp(18px,5.3vw,25px) !important; border-radius: 22px 22px 9px 22px !important; }
  .competence-node:hover,.competence-node.is-current { padding-left: 16px !important; transform: translateY(-3px) !important; }
  .competence-node .feature-icon { width: 34px !important; height: 34px !important; margin-bottom: 13px !important; border-radius: 11px 11px 5px 11px !important; }
  .competence-core { padding: 17px !important; grid-template-columns: 52px 1fr !important; border-radius: 20px 20px 8px 20px !important; }
  .competence-core b { font-size: 48px !important; }
  .competence-core p { font-size: 11px !important; }
  .values { margin-top: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-card,.competence-node { transition: none !important; }
}