@import url("ac-services-master.css");

/* Solutions master system derived from the finalized Ecosystem page. */
html body.ac-solutions-master {
  --solutions-container: min(1180px, calc(100% - 82px));
  --services-hero-container: min(1440px, calc(100% - 96px));
  --brand-container: var(--solutions-container);
  background: #050506 !important;
  color: #fff !important;
}

html body.ac-solutions-master main {
  position: relative;
  background: #050506 !important;
  overflow: visible;
}

html body.ac-solutions-master :is(.hero--solutions, .hero--solution-detail) {
  position: relative;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #050506 !important;
  box-shadow: none;
}

html body.ac-solutions-master :is(.hero--solutions, .hero--solution-detail)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 7%;
  width: min(32vw, 470px);
  height: min(32vw, 470px);
  border-radius: 50%;
  background: rgba(240, 93, 45, 0.08);
  filter: blur(76px);
  pointer-events: none;
}

html body.ac-solutions-master :is(.hero--solutions, .hero--solution-detail) .hero__media {
  object-fit: cover !important;
  filter: saturate(0.9) contrast(1.05) brightness(0.78) !important;
}

html body.ac-solutions-master :is(.hero--solutions, .hero--solution-detail) .hero__overlay {
  background: rgba(0, 0, 0, 0.68) !important;
}

html body.ac-solutions-master :is(.hero--solutions, .hero--solution-detail) .hero__content {
  z-index: 4 !important;
  width: var(--solutions-container) !important;
  max-width: var(--solutions-container) !important;
}

html body.ac-solutions-master .hero__label,
html body.ac-solutions-master :is(.ap-kicker, .section-kicker) {
  color: #f05d2d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

html body.ac-solutions-master .hero__title {
  color: #fff !important;
  font-size: clamp(48px, 6.1vw, 76px) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
}

html body.ac-solutions-master .hero__subline {
  max-width: 700px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.7 !important;
}

html body.ac-solutions-master :is(.ap-section, .ap-grid-section) {
  width: var(--solutions-container) !important;
  max-width: var(--solutions-container) !important;
  margin-inline: auto !important;
  padding: clamp(88px, 8vw, 128px) 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.ac-solutions-master :is(.ap-grid-head, .ap-section-copy) {
  margin-bottom: clamp(32px, 4vw, 52px) !important;
}

html body.ac-solutions-master :is(.ap-grid-head h2, .ap-section-copy h2) {
  color: #fff !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}

html body.ac-solutions-master :is(.ap-grid-head p, .ap-section-copy p) {
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.7;
}

html body.ac-solutions-master :is(
  .ap-card,
  .ap-solution-card,
  .ap-process-grid article,
  .ac-detail-capabilities article,
  .ac-detail-features article,
  .ac-detail-related article
) {
  background: #111217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html body.ac-solutions-master :is(
  .ap-card,
  .ap-solution-card,
  .ap-process-grid article,
  .ac-detail-capabilities article,
  .ac-detail-features article,
  .ac-detail-related article
):hover {
  transform: translateY(-5px);
  border-color: rgba(240, 93, 45, 0.38) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34), 0 0 34px rgba(240, 93, 45, 0.07) !important;
}

html body.ac-solutions-master :is(.ap-card, .ap-solution-card, .ap-process-grid article) p {
  color: rgba(255, 255, 255, 0.68) !important;
}

html body.ac-solutions-master :is(.ac-outcome-list span, .ap-solution-feature-row small) {
  background: #111217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-radius: 8px !important;
}

html body.ac-solutions-master .ap-cta {
  width: min(1275px, calc(100% - 82px)) !important;
  max-width: 1275px !important;
  margin: 64px auto !important;
  padding: clamp(58px, 5vw, 78px) clamp(28px, 4vw, 52px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.38), 0 0 44px rgba(240, 93, 45, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
}

html body.ac-solutions-master .ac-footer {
  background: rgba(9, 10, 13, 0.76) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(30px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(125%) !important;
}

.ac-solution-feature-image {
  position: relative;
  width: var(--solutions-container);
  max-width: var(--solutions-container);
  height: clamp(300px, 42vw, 570px);
  margin: clamp(64px, 7vw, 104px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #111217;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32), 0 0 42px rgba(240, 93, 45, 0.05);
}

.ac-solution-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.06) brightness(0.8);
}

.ac-solution-feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 -110px 90px rgba(0, 0, 0, 0.64);
}

@media (max-width: 900px) {
  html body.ac-solutions-master {
    --solutions-container: min(100% - 48px, 1180px);
  }
}

@media (max-width: 640px) {
  html body.ac-solutions-master {
    --solutions-container: min(100% - 32px, 1180px);
  }

  html body.ac-solutions-master :is(.ap-section, .ap-grid-section) {
    padding: 72px 0 !important;
  }

  html body.ac-solutions-master .ap-cta {
    width: calc(100% - 28px) !important;
    margin: 56px auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.ac-solutions-master * {
    transition: none !important;
  }
}

/* Solutions main accordion hero: mirrors the Services main hero. */
html body.ac-solutions-master.ac-page .hero--solutions-accordion {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 96px 0 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: radial-gradient(circle at 73% 38%, rgba(240, 93, 45, 0.09), transparent 30%), #050506 !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 18% 30%, rgba(240, 93, 45, 0.08), transparent 30%), linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion::after {
  inset: 14% 7% auto auto;
  z-index: 3;
  width: min(32vw, 500px);
  height: auto;
  aspect-ratio: 1;
  background: rgba(240, 93, 45, 0.1);
  filter: blur(110px);
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion > .hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 40%, rgba(0, 0, 0, 0.36)) !important;
  pointer-events: none !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .services-accordion-hero__inner {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 86px);
  width: var(--services-hero-container);
  max-width: var(--services-hero-container);
  min-height: calc(100vh - 96px);
  margin: 0 auto;
  padding: clamp(80px, 9vh, 120px) 0;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .services-accordion-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion :is(.hero__label, .hero__title, .hero__subline, .hero__actions) {
  position: static !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  transform: none !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__label {
  margin-bottom: 22px !important;
  color: #f05d2d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__title {
  max-width: 680px !important;
  margin: 0 !important;
  font-size: clamp(48px, 5vw, 68px) !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 24px 0 16px;
  border-radius: 999px;
  background: #f05d2d;
  box-shadow: 0 0 18px rgba(240, 93, 45, 0.34);
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__subline {
  max-width: 650px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 32px !important;
}

html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__button {
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  padding: 0 28px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
}

@media (max-width: 900px) {
  html body.ac-solutions-master {
    --services-hero-container: min(100% - 48px, 1440px);
  }

  html body.ac-solutions-master.ac-page .hero--solutions-accordion {
    padding-top: 88px !important;
  }

  html body.ac-solutions-master.ac-page .hero--solutions-accordion .services-accordion-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 76px 0 72px;
  }
}

@media (max-width: 640px) {
  html body.ac-solutions-master {
    --services-hero-container: calc(100% - 28px);
  }

  html body.ac-solutions-master.ac-page .hero--solutions-accordion {
    min-height: 100svh !important;
    padding-top: 76px !important;
  }

  html body.ac-solutions-master.ac-page .hero--solutions-accordion .services-accordion-hero__inner {
    width: var(--services-hero-container);
    max-width: var(--services-hero-container);
    padding: 58px 0 64px;
  }

  html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__actions,
  html body.ac-solutions-master.ac-page .hero--solutions-accordion .hero__button {
    width: 100% !important;
  }
}

/*
FIX: DARK BACKGROUND FOR SOLUTION BOXES

- Added Ecosystem dark card surface (#111217)
- Added subtle white border (.08 opacity)
- Applied 12px radius and Ecosystem padding tokens
- Added Ecosystem hover lift + orange glow
- Updated typography to match Ecosystem card system
- All solution boxes now visually match the Ecosystem design
*/
html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item {
  box-sizing: border-box !important;
  padding: clamp(20px, 2vw, 26px) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background-color: rgba(0, 0, 0, .28) !important;
  background-image: none !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
  transition:
    flex 600ms cubic-bezier(.22, 1, .36, 1),
    transform 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item .services-accordion__shade {
  background: rgba(0, 0, 0, .28) !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item:is(:hover, :focus-visible, .is-active) {
  background-color: rgba(0, 0, 0, .42) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(240, 93, 45, .36) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .34),
    0 0 34px rgba(240, 93, 45, .08) !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item.is-active .services-accordion__shade {
  background: rgba(0, 0, 0, .34) !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item h2 {
  color: #f5f5f5 !important;
  font-family: Manrope, Inter, system-ui, sans-serif !important;
  font-size: clamp(20px, 1.55vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: .01em !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item p {
  max-width: 90% !important;
  color: rgba(255, 255, 255, .85) !important;
  font-family: Manrope, Inter, system-ui, sans-serif !important;
  font-size: clamp(15px, 1.05vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

/*
FIX: EXPLORE LINK HOVER COLOR

- Updated Explore Solution hover color to brand orange (#F05D2D)
- Added smooth underline + transition for Ecosystem consistency
- Removed old hover colors and default browser styling
- Ensures all solution cards match Ecosystem interaction behavior
*/
html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item > a.explore-link {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  transition: color 220ms ease, text-decoration-color 220ms ease !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item > a.explore-link:is(:hover, :focus-visible) {
  color: #f05d2d !important;
  text-decoration: underline !important;
  text-decoration-color: #f05d2d !important;
}

html body.ac-solutions-master .hero--solutions-accordion .services-accordion {
  height: clamp(300px, 38vh, 400px) !important;
}

@media (min-width: 901px) {
  html body.ac-solutions-master .hero--solutions-accordion .solutions-accordion {
    position: relative !important;
    top: 0 !important;
    transform: translateY(calc(-48px - 15%)) !important;
  }
}

@media (max-width: 640px) {
  html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item {
    padding: 20px !important;
  }

  html body.ac-solutions-master .hero--solutions-accordion .services-accordion__item h2 {
    font-size: 16px !important;
  }

  html body.ac-solutions-master .hero--solutions-accordion .services-accordion {
    height: auto !important;
  }

}

/*
FIX: Added subtle dark tint behind Solutions boxes

- Applied rgba(0,0,0,0.28) background for light darkening
- Ensures Earth background remains visible
- Added Ecosystem border + radius
- Added Ecosystem hover lift + orange glow
- Improved readability without losing background design
*/

/*
SOLUTIONS SECTION UPDATE — MATCH ECOSYSTEM DESIGN

- Added subtle dark tint (rgba 0,0,0,0.28) behind boxes while keeping background visible
- Reduced box size, padding, icon size, and spacing for cleaner layout
- Added 4 main solution domain labels inside each box using Ecosystem label style
- Applied Ecosystem card surface, border, radius, and hover effects
- Updated typography to match Ecosystem card system
- Ensured all boxes are visually consistent and aligned with the Ecosystem design
*/

/*
SOLUTIONS SECTION UPDATE — ALIGN WITH ECOSYSTEM DESIGN

- Added subtle dark tint (rgba 0,0,0,0.28) behind boxes while keeping background visible
- Reduced box size, padding, icon size, and spacing for cleaner layout
- Removed old titles and replaced them with the 4 main solution domains:
  1. AI & Automation
  2. Mobility Connectivity
  3. Infrastructure & Cloud
  4. Enterprise Systems
- Added Ecosystem label style above titles
- Applied Ecosystem card surface, border, radius, and hover effects
- Updated typography to match Ecosystem card system
- Ensured all boxes are visually consistent and aligned with the Ecosystem design
*/

/*
SOLUTIONS BOX FIX — ALIGN WITH ECOSYSTEM DESIGN

- Reduced box size, padding, and icon dimensions for cleaner layout
- Removed unwanted orange corner text from all boxes
- Added subtle dark tint (rgba 0,0,0,0.28) while keeping background visible
- Applied Ecosystem card border, radius, and hover effects
- Updated typography to match Ecosystem card system
- Ensured all 4 solution boxes are visually consistent and aligned with the Ecosystem design
*/