/* KS System Approach — Elementor widget */

.ks-el-root.ks-el-system-approach {
  --ks-sa-bg: #ffffff;
  --ks-sa-color: #111111;
  --ks-sa-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ks-sa-gap: 14px;
  --ks-sa-side: clamp(12px, 1.6vw, 32px);
  --ks-sa-pad-top: clamp(48px, 5vw, 72px);
  --ks-sa-pad-bottom: clamp(56px, 6vw, 88px);
  --ks-sa-intro-max: 920px;
  --ks-sa-intro-mb: clamp(36px, 4vw, 52px);
  --ks-sa-eyebrow-color: #888888;
  --ks-sa-eyebrow-size: clamp(0.625rem, 0.75vw, 0.6875rem);
  --ks-sa-eyebrow-weight: 600;
  --ks-sa-eyebrow-ls: 0.14em;
  --ks-sa-eyebrow-mb: clamp(16px, 2vw, 24px);
  --ks-sa-headline-color: #0a0a0a;
  --ks-sa-headline-size: clamp(1.75rem, 3.6vw, 2.875rem);
  --ks-sa-headline-weight: 700;
  --ks-sa-headline-lh: 1.22;
  --ks-sa-headline-ls: -0.03em;
  --ks-sa-icon-size: clamp(36px, 3.2vw, 48px);
  --ks-sa-icon-ring-w: 2px;
  --ks-sa-icon-ring-color: #ffffff;
  --ks-sa-panel-radius: 20px;
  --ks-sa-panel-min-h: clamp(380px, 42vw, 560px);
  --ks-sa-panel-ratio: 1 / 1.05;
  --ks-sa-panel-bg: #e8e8e8;
  --ks-sa-panel-overlay: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  --ks-sa-panel-title-color: #ffffff;
  --ks-sa-panel-title-size: clamp(1.125rem, 1.8vw, 1.625rem);
  --ks-sa-panel-title-weight: 700;
  --ks-sa-panel-title-lh: 1.2;
  --ks-sa-panel-title-ls: -0.02em;
  --ks-sa-panel-title-mb: clamp(6px, 0.8vw, 10px);
  --ks-sa-panel-title-max: 18rem;
  --ks-sa-panel-desc-color: rgba(255, 255, 255, 0.88);
  --ks-sa-panel-desc-size: clamp(0.75rem, 1vw, 0.875rem);
  --ks-sa-panel-desc-weight: 400;
  --ks-sa-panel-desc-lh: 1.45;
  --ks-sa-panel-desc-max: 20rem;
  --ks-sa-panel-copy-pad: clamp(20px, 2.4vw, 32px);
  --ks-sa-widget-bg: rgba(28, 28, 28, 0.72);
  --ks-sa-widget-blur: 16px;
  --ks-sa-widget-radius: 14px;
  --ks-sa-widget-pad-y: clamp(14px, 1.6vw, 18px);
  --ks-sa-widget-pad-x: clamp(16px, 1.8vw, 20px);
  --ks-sa-widget-min-w: clamp(200px, 22vw, 260px);
  --ks-sa-widget-offset-x: clamp(16px, 2vw, 24px);
  --ks-sa-widget-offset-y: clamp(16px, 2vw, 24px);
  --ks-sa-widget-label-color: rgba(255, 255, 255, 0.55);
  --ks-sa-widget-label-size: clamp(0.5625rem, 0.65vw, 0.625rem);
  --ks-sa-widget-label-weight: 600;
  --ks-sa-widget-label-ls: 0.1em;
  --ks-sa-widget-label-mb: clamp(12px, 1.4vw, 16px);
  --ks-sa-ind-gap: clamp(14px, 1.8vw, 20px);
  --ks-sa-ind-num-color: #ffffff;
  --ks-sa-ind-num-size: clamp(1.25rem, 2vw, 1.75rem);
  --ks-sa-ind-num-weight: 700;
  --ks-sa-ind-name-color: rgba(255, 255, 255, 0.65);
  --ks-sa-ind-name-size: clamp(0.5rem, 0.6vw, 0.5625rem);
  --ks-sa-ind-name-weight: 600;
  --ks-sa-ind-name-ls: 0.06em;
  --ks-sa-ind-name-max: 5.5rem;
  --ks-sa-bar-track: rgba(255, 255, 255, 0.15);
  --ks-sa-bar-fill: #ffffff;
  --ks-sa-bar-h-h: 6px;
  --ks-sa-bar-v-w: clamp(28px, 3vw, 36px);
  --ks-sa-bar-v-h: clamp(48px, 5vw, 64px);
  --ks-sa-gauge-track: rgba(255, 255, 255, 0.2);
  --ks-sa-gauge-fill: #ffffff;
  --ks-sa-gauge-value-color: #ffffff;
  --ks-sa-gauge-value-size: clamp(1.5rem, 2.4vw, 2rem);
  --ks-sa-gauge-value-weight: 700;
  --ks-sa-gauge-label-color: rgba(255, 255, 255, 0.75);
  --ks-sa-gauge-label-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
  --ks-sa-gauge-label-weight: 500;
  --ks-sa-gauge-w: clamp(100px, 11vw, 130px);
  --ks-sa-gauge-h: clamp(56px, 6vw, 72px);
  --ks-sa-img-scale: 1.04;
  --ks-sa-img-duration: 0.65s;
  --ks-sa-img-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ks-sa-enter-duration: 0.7s;
  --ks-sa-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-sa-enter-distance: 24px;
  --ks-sa-bar-duration: 1s;
  --ks-sa-bar-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-sa-gauge-duration: 1.2s;
  --ks-sa-gauge-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-sa-stagger: 0.12s;
  --ks-sa-bp-stack: 768px;

  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--ks-sa-font);
  background: var(--ks-sa-bg);
  color: var(--ks-sa-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ks-el-root.ks-el-system-approach *,
.ks-el-root.ks-el-system-approach *::before,
.ks-el-root.ks-el-system-approach *::after {
  box-sizing: border-box;
}

.ks-el-root.ks-el-system-approach h2,
.ks-el-root.ks-el-system-approach h3,
.ks-el-root.ks-el-system-approach p,
.ks-el-root.ks-el-system-approach span {
  font-family: inherit;
  margin: 0;
  padding: 0;
}

.ks-el-root.ks-el-system-approach img {
  max-width: 100%;
  height: auto;
  display: block;
  border: none;
  box-shadow: none;
}

.ks-el-root.ks-el-system-approach .system-approach {
  width: 100%;
  max-width: none;
  padding: var(--ks-sa-pad-top) var(--ks-sa-side) var(--ks-sa-pad-bottom);
}

.ks-el-root.ks-el-system-approach .system-approach__intro {
  text-align: center;
  max-width: var(--ks-sa-intro-max);
  margin: 0 auto var(--ks-sa-intro-mb);
}

.ks-el-root.ks-el-system-approach .system-approach__eyebrow {
  font-size: var(--ks-sa-eyebrow-size);
  font-weight: var(--ks-sa-eyebrow-weight);
  letter-spacing: var(--ks-sa-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ks-sa-eyebrow-color);
  margin-bottom: var(--ks-sa-eyebrow-mb);
}

.ks-el-root.ks-el-system-approach .system-approach__headline {
  font-size: var(--ks-sa-headline-size);
  font-weight: var(--ks-sa-headline-weight);
  line-height: var(--ks-sa-headline-lh);
  letter-spacing: var(--ks-sa-headline-ls);
  color: var(--ks-sa-headline-color);
}

.ks-el-root.ks-el-system-approach .system-approach__icon {
  display: inline-block;
  width: var(--ks-sa-icon-size);
  height: var(--ks-sa-icon-size);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 clamp(2px, 0.4vw, 6px);
  transform: translateY(-2px);
  box-shadow: 0 0 0 var(--ks-sa-icon-ring-w) var(--ks-sa-icon-ring-color);
}

.ks-el-root.ks-el-system-approach .system-approach__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ks-el-root.ks-el-system-approach .system-approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ks-sa-gap);
}

.ks-el-root.ks-el-system-approach .system-approach__panel {
  position: relative;
  border-radius: var(--ks-sa-panel-radius);
  overflow: hidden;
  min-height: var(--ks-sa-panel-min-h);
  aspect-ratio: var(--ks-sa-panel-ratio);
  background: var(--ks-sa-panel-bg);
  color: #ffffff;
  isolation: isolate;
}

.ks-el-root.ks-el-system-approach .system-approach__panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform var(--ks-sa-img-duration) var(--ks-sa-img-ease);
}

.ks-el-root.ks-el-system-approach:not(.is-no-hover) .system-approach__panel:hover .system-approach__panel-bg {
  transform: scale(var(--ks-sa-img-scale));
}

.ks-el-root.ks-el-system-approach .system-approach__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.ks-el-root.ks-el-system-approach .system-approach__panel-copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--ks-sa-panel-copy-pad) var(--ks-sa-panel-copy-pad) 0;
}

.ks-el-root.ks-el-system-approach .system-approach__panel-title {
  font-size: var(--ks-sa-panel-title-size);
  font-weight: var(--ks-sa-panel-title-weight);
  line-height: var(--ks-sa-panel-title-lh);
  letter-spacing: var(--ks-sa-panel-title-ls);
  margin-bottom: var(--ks-sa-panel-title-mb);
  max-width: var(--ks-sa-panel-title-max);
  color: var(--ks-sa-panel-title-color);
}

.ks-el-root.ks-el-system-approach .system-approach__panel-desc {
  font-size: var(--ks-sa-panel-desc-size);
  font-weight: var(--ks-sa-panel-desc-weight);
  line-height: var(--ks-sa-panel-desc-lh);
  color: var(--ks-sa-panel-desc-color);
  max-width: var(--ks-sa-panel-desc-max);
}

.ks-el-root.ks-el-system-approach .system-approach__widget {
  position: absolute;
  left: var(--ks-sa-widget-offset-x);
  bottom: var(--ks-sa-widget-offset-y);
  z-index: 3;
  background: var(--ks-sa-widget-bg);
  backdrop-filter: blur(var(--ks-sa-widget-blur));
  -webkit-backdrop-filter: blur(var(--ks-sa-widget-blur));
  border-radius: var(--ks-sa-widget-radius);
  padding: var(--ks-sa-widget-pad-y) var(--ks-sa-widget-pad-x);
  min-width: var(--ks-sa-widget-min-w);
}

.ks-el-root.ks-el-system-approach .system-approach__widget-label {
  font-size: var(--ks-sa-widget-label-size);
  font-weight: var(--ks-sa-widget-label-weight);
  letter-spacing: var(--ks-sa-widget-label-ls);
  text-transform: uppercase;
  color: var(--ks-sa-widget-label-color);
  margin-bottom: var(--ks-sa-widget-label-mb);
}

.ks-el-root.ks-el-system-approach .system-approach__indicators {
  display: flex;
  align-items: flex-end;
  gap: var(--ks-sa-ind-gap);
}

.ks-el-root.ks-el-system-approach .system-approach__indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ks-el-root.ks-el-system-approach .system-approach__indicator--row {
  flex: 1;
  align-self: stretch;
  justify-content: flex-end;
}

.ks-el-root.ks-el-system-approach .system-approach__indicator-num {
  font-size: var(--ks-sa-ind-num-size);
  font-weight: var(--ks-sa-ind-num-weight);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ks-sa-ind-num-color);
}

.ks-el-root.ks-el-system-approach .system-approach__indicator-name {
  font-size: var(--ks-sa-ind-name-size);
  font-weight: var(--ks-sa-ind-name-weight);
  letter-spacing: var(--ks-sa-ind-name-ls);
  text-transform: uppercase;
  color: var(--ks-sa-ind-name-color);
  line-height: 1.3;
  max-width: var(--ks-sa-ind-name-max);
}

.ks-el-root.ks-el-system-approach .system-approach__bar-h {
  width: 100%;
  height: var(--ks-sa-bar-h-h);
  background: var(--ks-sa-bar-track);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.ks-el-root.ks-el-system-approach .system-approach__bar-h span {
  display: block;
  height: 100%;
  width: var(--ks-sa-bar-target, 0%);
  background: var(--ks-sa-bar-fill);
  border-radius: 999px;
  transition: width var(--ks-sa-bar-duration) var(--ks-sa-bar-ease);
}

.ks-el-root.ks-el-system-approach .system-approach__bar-v {
  width: var(--ks-sa-bar-v-w);
  height: var(--ks-sa-bar-v-h);
  background: var(--ks-sa-bar-track);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.ks-el-root.ks-el-system-approach .system-approach__bar-v span {
  display: block;
  width: 100%;
  height: var(--ks-sa-bar-target, 0%);
  background: var(--ks-sa-bar-fill);
  border-radius: 6px 6px 0 0;
  transition: height var(--ks-sa-bar-duration) var(--ks-sa-bar-ease);
}

.ks-el-root.ks-el-system-approach .system-approach__hrv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.ks-el-root.ks-el-system-approach .system-approach__gauge {
  position: relative;
  width: var(--ks-sa-gauge-w);
  height: var(--ks-sa-gauge-h);
  margin-bottom: 2px;
}

.ks-el-root.ks-el-system-approach .system-approach__gauge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ks-el-root.ks-el-system-approach .system-approach__gauge-fill {
  transition: stroke-dashoffset var(--ks-sa-gauge-duration) var(--ks-sa-gauge-ease);
}

.ks-el-root.ks-el-system-approach .system-approach__gauge-value {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: var(--ks-sa-gauge-value-size);
  font-weight: var(--ks-sa-gauge-value-weight);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ks-sa-gauge-value-color);
}

.ks-el-root.ks-el-system-approach .system-approach__gauge-label {
  font-size: var(--ks-sa-gauge-label-size);
  font-weight: var(--ks-sa-gauge-label-weight);
  color: var(--ks-sa-gauge-label-color);
  text-align: center;
}

/* Scroll entrance animations */
.ks-el-root.ks-el-system-approach.is-animate-on-scroll:not(.is-visible) .system-approach__intro,
.ks-el-root.ks-el-system-approach.is-animate-on-scroll:not(.is-visible) .system-approach__panel {
  opacity: 0;
  transform: translateY(var(--ks-sa-enter-distance));
  transition:
    opacity var(--ks-sa-enter-duration) var(--ks-sa-enter-ease),
    transform var(--ks-sa-enter-duration) var(--ks-sa-enter-ease);
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll.is-visible .system-approach__intro {
  opacity: 1;
  transform: none;
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll.is-visible .system-approach__panel {
  opacity: 1;
  transform: none;
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll.is-visible .system-approach__panel:nth-child(1) {
  transition-delay: calc(var(--ks-sa-stagger) * 0);
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll.is-visible .system-approach__panel:nth-child(2) {
  transition-delay: calc(var(--ks-sa-stagger) * 1);
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll:not(.is-visible) .system-approach__bar-h span,
.ks-el-root.ks-el-system-approach.is-animate-on-scroll:not(.is-visible) .system-approach__bar-v span {
  width: 0 !important;
  height: 0 !important;
}

.ks-el-root.ks-el-system-approach.is-animate-on-scroll:not(.is-visible) .system-approach__gauge-fill {
  stroke-dashoffset: var(--ks-sa-gauge-arc, 163.36) !important;
}

/* Always show content in Elementor editor (JS may load after first paint). */
.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__intro,
.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__panel {
  opacity: 1 !important;
  transform: none !important;
}

.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__bar-h span,
.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__bar-v span {
  width: var(--ks-sa-bar-target, 0%) !important;
  height: var(--ks-sa-bar-target, 0%) !important;
}

.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__bar-h span {
  height: 100% !important;
}

.elementor-editor-active .ks-el-root.ks-el-system-approach.is-animate-on-scroll .system-approach__bar-v span {
  width: 100% !important;
}

@media (max-width: 768px) {
  .ks-el-root.ks-el-system-approach .system-approach__grid {
    grid-template-columns: 1fr;
  }

  .ks-el-root.ks-el-system-approach .system-approach__panel {
    aspect-ratio: auto;
    min-height: clamp(360px, 85vw, 480px);
  }

  .ks-el-root.ks-el-system-approach .system-approach__headline {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .ks-el-root.ks-el-system-approach .system-approach__icon {
    width: 32px;
    height: 32px;
  }
}