/* =========================================================================
   SoftCircles — Services page visual refresh
   Scope: content areas of services.html only. Sits on top of
   app.min-v=13.css and home-redesign.css (reuses that file's tokens,
   .positions accordion, .sc-industry-*, .sc-cta-light, .sc-stats-*,
   .sc-hiring-*, .sc-process-card, .resource-item, footer contact form).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Page-load overlay safety net
   ------------------------------------------------------------------------- */
/* The shared site-wide preloader (".loading-color") is `position:fixed`,
   `height:100vh`, `z-index:2000` — i.e. it covers the ENTIRE viewport,
   sitting above the hero (nav floats above it too, at z-index 2501, which
   is why nav text can still show through while it's stuck). The shared
   loading-v=10.js only shrinks it to height:0 on the `window.load` event.
   If any external resource (fonts, analytics, CDN) loads slowly or never
   fires its own load/error event, `window.load` can be delayed far longer
   than expected, leaving this white/orange overlay visibly stuck over the
   dark hero indefinitely. This CSS-only fallback guarantees the overlay
   collapses no later than ~1.1s after paint, independent of JS/window.load,
   so the dark hero background is never hidden behind a stuck white block.
   Scoped to this file only (loaded on services.html only, no effect on
   other pages). */
@keyframes sc-force-collapse-loader {
  to {
    height: 0;
  }
}

.loading-color {
  animation: sc-force-collapse-loader 0.01s linear 1.1s forwards;
}

/* -------------------------------------------------------------------------
   Hero (dark, full-bleed)
   ------------------------------------------------------------------------- */
.sc-svc-hero {
  /* The shared stylesheet applies `main { padding-top: 216px; background:
     #fff; }` on every page (invisible on the white-hero home page, but it
     pushes this dark hero down by 216px, leaving a white strip behind the
     fixed nav). Pulling the hero up by that exact amount cancels it out —
     the hero's own padding below still gives the heading proper clearance
     under the fixed nav. */
  margin-top: -216px;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(120% 140% at 85% 0%, #2c3467 0%, #14151d 45%, #0a0a0d 100%);
  padding: 150px 0 56px;
  color: #fff;
  overflow: hidden;
}

@media (max-width: 991px) {
  .sc-svc-hero {
    padding: 120px 0 40px;
  }
}

/* The shared stylesheet also drops `main`'s padding-top to 95px (from
   216px) at this breakpoint — match it so the hero isn't over-cancelled
   and pulled up past the fixed nav. */
@media (max-width: 767px) {
  .sc-svc-hero {
    margin-top: -95px;
  }
}

.sc-svc-hero .container {
  position: relative;
  z-index: 1;
}

.sc-svc-hero h1 {
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.6px;
  line-height: 1.08;
  margin-bottom: 26px;
}

.sc-svc-hero h1 b {
  font-weight: 700;
}

.sc-svc-hero-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  max-width: 640px;
  margin-bottom: 34px;
}

.sc-svc-hero .btn.btn-warning {
  margin-bottom: 44px;
}

.sc-svc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.sc-svc-hero-stats > div {
  min-width: 90px;
}

.sc-svc-hero-stats .sc-svc-stat-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}

.sc-svc-hero-stats .sc-svc-stat-num .fa-star {
  color: var(--sc-star, #f4b335);
  font-size: 0.9rem;
  margin-left: 4px;
}

.sc-svc-hero-stats span.sc-svc-stat-label {
  display: block;
  font-family: var(--sc-font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

/* Fixed main nav: transparent over the dark hero needs light text.
   Toggled by services-redesign.js (adds/removes .sc-nav-invert) as the
   user scrolls past the hero — reverts to the default dark nav-link
   color once lighter content scrolls underneath the fixed bar.

   IMPORTANT: outside the brief page-load transition (while body carries
   the site-wide ".navbar-on-top" class, which forces the nav transparent
   with `!important`), the shared nav CSS gives #mainMenu a permanent
   solid white background (".navbar-light { background:#fff }"). Once that
   transition class is removed after load, a nav with only its *text*
   inverted to white would sit on a solid white bar — invisible. This rule
   also forces the nav background itself transparent while over the dark
   hero, so it genuinely reads as an overlay, not a white block. */
#mainMenu.sc-nav-invert {
  background: transparent !important;
  box-shadow: none !important;
}

.navbar-light.sc-nav-invert .navbar-nav .nav-link,
.navbar-light.sc-nav-invert .navbar-nav .nav-link.active {
  color: #fff;
  opacity: 1;
}

.navbar-light.sc-nav-invert .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-light.sc-nav-invert #logo picture,
.navbar-light.sc-nav-invert #logo img {
  filter: brightness(0) invert(1);
}

#mainMenu.sc-nav-invert .btn.btn-outline-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

#mainMenu.sc-nav-invert .btn.btn-outline-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sc-dark);
}

/* The shared stylesheet has a stray global rule — bare `.active {
   background: #1c252b; color: #fff; }` with no scoping — that fills ANY
   element carrying class="active" with a solid dark box. Just clear that
   stray background here; leave everything else about the nav links
   (color/opacity/weight) exactly as the site's original default — no
   extra highlight treatment on "Services". */
.navbar-light .navbar-nav .nav-link.active,
#mainMenu .nav-link.active {
  background: transparent !important;
}

/* -------------------------------------------------------------------------
   Trust band — text-only "Recognized by" badges (no external logo assets)
   ------------------------------------------------------------------------- */
.sc-brand-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 700;
  color: var(--sc-dark);
  font-size: 1rem;
  letter-spacing: -0.2px;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.sc-brand-badge:hover {
  opacity: 1;
}

.sc-brand-badge small {
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #70747a;
}

.sc-brand-badge.sc-brand-serif {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.15rem;
}

/* -------------------------------------------------------------------------
   Sticky sub-navigation (Challenges / Services / Process / ... )
   ------------------------------------------------------------------------- */
.sc-subnav {
  position: sticky;
  top: 85px;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--sc-border, #e7e8ec);
}

@media (max-width: 991px) {
  .sc-subnav {
    top: 61px;
  }
}

.sc-subnav-inner {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 22px 0;
}

.sc-subnav-inner::-webkit-scrollbar {
  display: none;
}

.sc-subnav-link {
  flex: 0 0 auto;
  font-family: var(--sc-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c2c4c9;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sc-subnav-link:hover {
  color: var(--sc-dark);
  text-decoration: none;
}

.sc-subnav-link.active {
  background: transparent !important;
  color: var(--sc-dark);
  border-bottom-color: var(--sc-teal);
}

/* Every section the sub-nav can jump to needs breathing room above it so
   the fixed nav + sticky sub-nav don't cover the heading when scrolled to. */
.sc-svc-section {
  scroll-margin-top: 150px;
}

/* -------------------------------------------------------------------------
   Challenges — AI stat cards (66% / 83% / 3x)
   ------------------------------------------------------------------------- */
.sc-challenge-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--sc-border, #e7e8ec);
  margin-top: 36px;
}

.sc-challenge-card {
  flex: 1 1 0;
  padding: 32px 30px 36px;
  border-left: 1px solid var(--sc-border, #e7e8ec);
  position: relative;
  background: #fff;
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-challenge-card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: var(--sc-shadow-md);
  z-index: 2;
}

.sc-challenge-card:first-child {
  border-left: none;
}

.sc-challenge-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 5px;
}

.sc-challenge-card.sc-cc-teal::before {
  background: var(--sc-mint-pill, #cdf5ed);
}

.sc-challenge-card.sc-cc-blue::before {
  background: var(--sc-brand-blue, #3aadd9);
}

.sc-challenge-card.sc-cc-orange::before {
  background: var(--sc-yellow, #fec527);
}

.sc-challenge-card.sc-cc-blue {
  box-shadow: var(--sc-shadow-md);
  z-index: 1;
}

.sc-challenge-figure {
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.6px;
  margin-bottom: 22px;
}

.sc-cc-teal .sc-challenge-figure {
  color: #22b8a0;
}

.sc-cc-blue .sc-challenge-figure {
  color: var(--sc-brand-blue, #3aadd9);
}

.sc-cc-orange .sc-challenge-figure {
  color: #f0973a;
}

.sc-challenge-card p {
  color: var(--sc-dark);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 30px;
}

.sc-challenge-cite {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sc-font-body);
  font-size: 0.85rem;
  color: #70747a;
}

.sc-challenge-cite b {
  color: var(--sc-dark);
}

.sc-challenge-cite .sc-accenture-mark {
  color: #7b2ff7;
  font-weight: 900;
}

@media (max-width: 767px) {
  .sc-challenge-grid {
    flex-direction: column;
  }

  .sc-challenge-card {
    border-left: none;
    border-top: 1px solid var(--sc-border, #e7e8ec);
  }

  .sc-challenge-card:first-child {
    border-top: none;
  }
}

/* -------------------------------------------------------------------------
   Process — "Value we bring to the table" sticky column + shine list
   ------------------------------------------------------------------------- */
.sc-value-sticky {
  position: sticky;
  top: 170px;
}

@media (max-width: 991px) {
  .sc-value-sticky {
    position: static;
  }
}

.sc-shine-item {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--sc-border, #e7e8ec);
}

.sc-shine-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sc-shine-item h3 {
  font-weight: 700;
  margin-bottom: 14px;
  transition: color 0.3s ease;
}

.sc-shine-item.sc-in-view h3 {
  color: var(--sc-teal);
}

.sc-shine-item p {
  color: var(--sc-text-muted);
}

.sc-shine-meta {
  margin-top: 18px;
  color: var(--sc-dark);
  font-family: var(--sc-font-body);
}

.sc-shine-meta div {
  margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   Workflow — dark band with checklist cards + blue CTA tile
   ------------------------------------------------------------------------- */
.sc-workflow-band {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(120% 140% at 90% 0%, #2c3467 0%, #14151d 45%, #0a0a0d 100%);
  padding: 64px 0;
  color: #fff;
}

.sc-workflow-band h2 {
  color: #fff;
  font-weight: 700;
  max-width: 780px;
  margin-bottom: 44px;
}

.sc-workflow-band h2 b {
  color: var(--sc-yellow, #fec527);
  -webkit-text-fill-color: var(--sc-yellow, #fec527);
}

.sc-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sc-workflow-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px;
}

.sc-workflow-check {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(18, 183, 106, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.sc-workflow-check .fa {
  color: var(--sc-green-bright, #12b76a);
  font-size: 0.95rem;
}

.sc-workflow-card h5 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

.sc-workflow-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.sc-workflow-cta {
  background: var(--sc-brand-blue, #3aadd9);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  text-decoration: none;
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-workflow-cta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sc-shadow-lg);
  color: #fff;
  text-decoration: none;
}

.sc-workflow-cta h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 22px;
}

.sc-workflow-cta .fa-arrow-right {
  font-size: 1.6rem;
  align-self: flex-end;
  margin-bottom: 18px;
}

.sc-workflow-cta span.sc-workflow-cta-label {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  .sc-workflow-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Our Solution — green band with 4 outcome cards
   ------------------------------------------------------------------------- */
.sc-solution-band {
  background: var(--sc-teal);
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 56px 0 64px;
  color: #fff;
}

.sc-solution-band h2 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 40px;
  max-width: 760px;
}

.sc-solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sc-solution-card-new {
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  color: var(--sc-dark);
  /* Truly fixed height (not min-height, which is only a floor — the
     expanding paragraph on hover was pushing past it, growing the whole
     grid row and making the green band "breathe" in and out). `height` +
     `overflow:hidden` guarantees the card, the row, and the green band
     never resize on hover. The icon sits at the top; the heading uses
     margin-top:auto to pin itself to the bottom by default. On hover the
     paragraph (0 height by default) expands, and since total height is
     fixed, that auto margin shrinks to make room — visually the heading
     rises up under the icon and the paragraph appears underneath it. */
  height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sc-solution-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  color: var(--sc-dark);
  /* Truly fixed height (not min-height, which is only a floor — the
     expanding paragraph on hover was pushing past it, growing the whole
     grid row and making the green band "breathe" in and out). `height` +
     `overflow:hidden` guarantees the card, the row, and the green band
     never resize on hover. The icon sits at the top; the heading uses
     margin-top:auto to pin itself to the bottom by default. On hover the
     paragraph (0 height by default) expands, and since total height is
     fixed, that auto margin shrinks to make room — visually the heading
     rises up under the icon and the paragraph appears underneath it. */
  height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-solution-card:hover {
  transform: translateY(-6px) scale(1.035);
  box-shadow: var(--sc-shadow-md);
  z-index: 1;
}

.sc-solution-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--sc-mint, #e8fffa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.sc-solution-icon .fa {
  color: var(--sc-teal);
  font-size: 1.05rem;
}

.sc-solution-card h5 {
  font-weight: 700;
  margin-top: auto;
  margin-bottom: 10px;
}

.sc-solution-card p {
  color: var(--sc-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.sc-solution-card:hover p {
  opacity: 1;
  max-height: 220px;
}

/* Below 992px the grid drops to 2 columns and stays there through both the
   768px and 991px breakpoints. Touch devices in that range have no :hover,
   so the fixed-height/opacity-0 hover-reveal trick from desktop would hide
   the paragraph permanently — show it by default and let the card grow to
   fit instead. */
@media (max-width: 991px) {
  .sc-solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sc-solution-card {
    height: auto;
    overflow: visible;
  }

  .sc-solution-card h5 {
    margin-top: 0;
  }

  .sc-solution-card p {
    opacity: 1;
    max-height: none;
  }
}

@media (max-width: 767px) {
  .sc-solution-grid {
    grid-template-columns: 1fr;
  }

  .sc-solution-band {
    padding: 40px 0 48px;
  }
}

/* -------------------------------------------------------------------------
   Use Cases — "Slow is Smooth, Smooth is Fast!" split section
   ------------------------------------------------------------------------- */
/* The left column (heading + buttons) is much shorter than the right
   column's accordion, so it was sitting flush top-left instead of centered
   against it. Center it both ways: align-items on the row centers it
   vertically against the taller accordion column, text-align centers the
   heading + button pair horizontally within its own column (buttons stay
   .btn's default inline-block, so they still sit side by side, just
   centered as a group instead of left-aligned). */
#svc-casestudies.row {
  align-items: center;
}

#svc-casestudies .col-lg-5 {
  text-align: center;
}

.sc-usecase-heading {
  font-weight: 700;
  font-size: 3.1rem;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .sc-usecase-heading {
    font-size: 2.1rem;
  }
}

/* Contact CTA ("Where there's smoke...") now lives in home-redesign.css —
   it's shared by both index.html and services.html. See that file. */

/* =========================================================================
   Section spacing — consistent vertical rhythm between blocks (mirrors the
   home page's section-gap pattern), scoped so it doesn't fight the full-bleed
   dark/green bands (which set their own padding).
   ========================================================================= */
.sc-svc-section {
  margin-top: 56px;
  margin-bottom: 56px;
}

@media (max-width: 767px) {
  .sc-svc-section {
    margin-top: 34px;
    margin-bottom: 34px;
  }
}