/* Implementation consulting services page. Every rule is scoped with the
   ics- prefix so nothing here leaks into shared header/footer styles. */

html { scroll-padding-top: 150px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- typeface ---------- */
/* style.css sets Poppins on html and the header uses .font-inter/.font-sans
   helpers, so override those too for one consistent family on this page. */
body.ics-page,
.ics-page .font-inter,
.ics-page .font-sans,
.ics-page button,
.ics-page input,
.ics-page select,
.ics-page textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- shared tokens ---------- */
.ics-page {
  --ics-blue: #4361EE;
  --ics-blue-soft: #8FB0FF;
  --ics-ink: #0B1220;
  --ics-night: #050B1F;
  --ics-line: #E3E7F0;
  --ics-muted: #5B6478;
  --ics-orange: #FF5B14;
}

.ics-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ics-blue);
}
.ics-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
/* Matches the dark-section badges on it-consulting-services.html. */
.ics-eyebrow--light { color: #7FB0FF; font-weight: 600; }

.ics-link {
  color: var(--ics-blue);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.ics-link:hover { background-size: 100% 1px; }
.ics-link--light { color: var(--ics-blue-soft); }

/* ---------- buttons ---------- */
.ics-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 28px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ics-btn--primary { background: var(--ics-blue); color: #fff; }
.ics-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2f43b8;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
.ics-btn--primary:hover::before { transform: translateY(0); }
.ics-btn--outline {
  border: 1px solid rgba(17, 24, 39, 0.2);
  background: rgba(255, 255, 255, 0.6);
  color: #111827;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ics-btn--outline:hover { border-color: #111827; background: #fff; }
.ics-btn__arrow { transition: transform 0.3s ease; }
.ics-btn:hover .ics-btn__arrow { transform: translateX(4px); }

/* ---------- hero ---------- */
/* The banner is a full-bleed background; headline lines rise out of masks. */
.ics-hero__bg { transform-origin: 70% 50%; }
.ics-hero__title .ics-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ics-hero__title .ics-line > span { display: inline-block; }

/* JS adds .ics-js to <html> when motion is allowed; hero items start hidden
   only then, so the page never renders blank without GSAP. */
.ics-js [data-ics-hero] { opacity: 0; }

/* ---------- data bars ---------- */
.ics-bar-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ics-bar-fill { height: 100%; border-radius: 999px; transform-origin: left center; }

.ics-myth {
  text-decoration: line-through;
  text-decoration-color: #F87171;
  text-decoration-thickness: 2px;
}

/* ---------- comparison table ---------- */
.ics-compare th, .ics-compare td { padding: 18px 22px; vertical-align: top; }
.ics-compare tbody tr + tr td { border-top: 1px solid var(--ics-line); }
.ics-compare .is-focus {
  background: #F2F5FF;
  color: var(--ics-ink);
  font-weight: 600;
  box-shadow: inset 1px 0 0 #D5DEFF, inset -1px 0 0 #D5DEFF;
}
.ics-compare thead .is-focus { background: var(--ics-blue); color: #fff; box-shadow: none; }

/* ---------- category rows ---------- */
.ics-rows > li {
  border-top: 1px solid var(--ics-line);
  transition: background-color 0.3s ease;
}
.ics-rows > li:last-child { border-bottom: 1px solid var(--ics-line); }
.ics-rows > li:hover { background: #F7F9FF; }
.ics-rows__num { font-variant-numeric: tabular-nums; }

/* ---------- phase timeline ---------- */
.ics-phases { position: relative; }
.ics-phase {
  position: relative;
  padding: 28px 0 28px 76px;
  border-top: 1px solid var(--ics-line);
}
.ics-phase__num {
  position: absolute;
  left: 0;
  top: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--ics-blue);
  background: #fff;
  border: 1px solid #D5DEFF;
}
.ics-phase.is-skipped .ics-phase__num { background: var(--ics-blue); color: #fff; border-color: var(--ics-blue); }
.ics-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- image treatments ---------- */
.ics-img {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #E8EDFB;
}
.ics-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ics-img:hover img { transform: scale(1.04); }
.ics-img--offset { box-shadow: 24px 24px 0 0 #EEF2FF; }
@media (max-width: 767px) { .ics-img--offset { box-shadow: 12px 12px 0 0 #EEF2FF; } }

/* ---------- RACI table ---------- */
.ics-raci th, .ics-raci td { padding: 16px 20px; vertical-align: top; }
.ics-raci tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ics-raci .is-us { background: rgba(67, 97, 238, 0.16); color: #fff; font-weight: 600; }
.ics-raci thead .is-us { background: var(--ics-blue); }

/* ---------- migration steps ---------- */
.ics-steps > li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ics-steps > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

/* ---------- rescue ---------- */
/* Parallax images are taller than their frame so the drift never shows an edge. */
.ics-rescue__bg { overflow: hidden; }
.ics-rescue__bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 60% 30%; }
.ics-outcome { border-top: 3px solid; }

/* ---------- pricing ---------- */
.ics-price th, .ics-price td { padding: 18px 22px; }
.ics-price tbody tr { border-top: 1px solid var(--ics-line); transition: background-color 0.25s ease; }
.ics-price tbody tr:hover { background: #F7F9FF; }
.ics-price .is-start { background: #F2F5FF; }

/* ---------- duration chart ---------- */
.ics-gantt__track { position: relative; height: 14px; border-radius: 999px; background: #EEF1F8; }
.ics-gantt__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4361EE, #8297F7);
  transform-origin: left center;
}
.ics-gantt__bar--open { background: linear-gradient(90deg, #4361EE 0%, #8297F7 70%, rgba(130, 151, 247, 0) 100%); }
.ics-gantt__median {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--ics-ink);
}
.ics-gantt__axis { position: relative; height: 18px; }
.ics-gantt__axis span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--ics-muted); white-space: nowrap; }
.ics-gantt__axis span:first-child { transform: none; }
.ics-gantt__axis span:last-child { transform: translateX(-100%); }

/* ---------- measures ---------- */
.ics-measures > li { border-top: 1px solid var(--ics-line); }
.ics-layered { position: relative; }
.ics-layered__back {
  position: absolute;
  inset: -24px 48px 48px -24px;
  border-radius: 28px;
  background:
    linear-gradient(to right, rgba(67, 97, 238, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 97, 238, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid #DCE4FF;
}
@media (max-width: 767px) { .ics-layered__back { inset: -12px 24px 24px -12px; } }

/* ---------- industries ---------- */
.ics-banner { position: relative; overflow: hidden; }
.ics-banner img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.ics-sectors > div { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---------- routing ---------- */
.ics-route a { transition: background-color 0.25s ease; }
.ics-route a:hover { background: #F7F9FF; }
.ics-route a:hover .ics-route__arrow { transform: translateX(6px); color: var(--ics-blue); }
.ics-route__arrow { transition: transform 0.3s ease, color 0.3s ease; }

/* ---------- FAQ ---------- */
.ics-faq details { border-top: 1px solid var(--ics-line); }
.ics-faq details:last-of-type { border-bottom: 1px solid var(--ics-line); }
.ics-faq summary { list-style: none; }
.ics-faq summary::-webkit-details-marker { display: none; }
.ics-faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.ics-faq__icon::before,
.ics-faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--ics-blue);
  transition: transform 0.3s ease;
}
.ics-faq__icon::after { transform: rotate(90deg); }
.ics-faq details[open] .ics-faq__icon::after { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .ics-img img,
  .ics-btn,
  .ics-btn::before,
  .ics-btn__arrow,
  .ics-route__arrow { transition: none; }
}