/* Final premium clarity layer for shared fibrous-background homepage sections. */

.about-alfred-band,
.asbestos-reality,
.timeline-container.journey-loop-section,
.services-section-new,
.achievement-section {
  isolation: isolate !important;
  background-color: #f7f7f4 !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.34) 34%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, rgba(248, 248, 246, 0.2), rgba(245, 245, 242, 0.1)),
    url("../assets/img/shared-section-background.png") !important;
  background-position: center center, center center, center top !important;
  background-size: 100% 100%, 100% 100%, 100% auto !important;
  background-repeat: no-repeat !important;
}

.about-alfred-band,
.asbestos-reality,
.timeline-container.journey-loop-section,
.services-section-new,
.achievement-section {
  background-color: transparent !important;
  background-image: none !important;
}

.about-alfred-band::before,
.asbestos-reality::before,
.timeline-container.journey-loop-section::before,
.services-section-new::before,
.achievement-section::before {
  position: absolute !important;
  inset: 0 calc(50% - 50vw) !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  content: "" !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-image:
    linear-gradient(30deg, rgba(13, 92, 63, 0.035) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.035) 87.5%, rgba(13, 92, 63, 0.035)),
    linear-gradient(150deg, rgba(13, 92, 63, 0.035) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.035) 87.5%, rgba(13, 92, 63, 0.035)),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 58%) !important;
  background-size: 4.8rem 8.4rem, 4.8rem 8.4rem, 100% 100% !important;
  opacity: 0.42 !important;
  filter: none !important;
  pointer-events: none !important;
}

.about-alfred-band::before,
.asbestos-reality::before,
.timeline-container.journey-loop-section::before,
.services-section-new::before,
.achievement-section::before {
  opacity: 1 !important;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.18) 10%, rgba(0, 0, 0, 0.04) 24%, rgba(0, 0, 0, 0.04) 76%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.36) 100%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.05) 32%, rgba(0, 0, 0, 0.04) 58%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(30deg, rgba(13, 92, 63, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.03) 87.5%, rgba(13, 92, 63, 0.03)),
    linear-gradient(150deg, rgba(13, 92, 63, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.03) 87.5%, rgba(13, 92, 63, 0.03)),
    url("../assets/img/shared-section-background.png") !important;
  background-size: 100% 100%, 100% 100%, 4.8rem 8.4rem, 4.8rem 8.4rem, 100% auto !important;
  background-position: center center, center center, 0 0, 0 0, center top !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 52%, #000 68%);
  mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.7) 52%, #000 68%);
}

.about-alfred-band > *,
.asbestos-reality > *,
.timeline-container.journey-loop-section > *,
.services-section-new > *,
.achievement-section > * {
  position: relative !important;
  z-index: 2 !important;
}

.about-editorial__floating-copy,
.asbestos-reality__stage,
.journey-reel-card,
.service-node-content,
.achievement-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(13, 92, 63, 0.14) !important;
  box-shadow:
    0 1.2rem 2.8rem rgba(18, 38, 28, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.58) inset !important;
  backdrop-filter: saturate(1.08) blur(1.5px) !important;
}

.timeline-container.journey-loop-section .timeline-title.section-heading,
#journey-loop-title.timeline-title.section-heading,
.asbestos-reality__title.section-heading,
.services-panel-title.section-heading,
.achievement-intro-title,
.about-editorial__title {
  color: #12382d !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.about-editorial__lead,
.journey-timeline-subtitle,
.journey-reel-card__copy,
.journey-reel-card__copy p,
.journey-reel-card__copy ul,
.services-subtitle,
.achievement-intro-side,
.achievement-intro-subtitle,
.achievement-intro-kicker {
  color: #12382d !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.journey-reel__item[data-reel-position="0"] .journey-reel-card,
.service-node-content:hover,
.achievement-card:hover {
  box-shadow:
    0 1.45rem 3.2rem rgba(18, 38, 28, 0.18),
    0 0 1.3rem rgba(13, 92, 63, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.62) inset !important;
}

/* Keep About Alfred vision/mission copy text-only, without glass rectangles. */
.about-editorial__floating-copy {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Blend India's Asbestos Reality map back into the section background. */
.asbestos-reality__stage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.asbestos-reality__stage::before,
.asbestos-reality__stage::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.asbestos-reality__map {
  mix-blend-mode: multiply;
  filter: contrast(1.04) saturate(1.04) drop-shadow(0 1.4rem 1.8rem rgba(18, 38, 28, 0.12)) !important;
}

@media (max-width: 640px) {
  .about-alfred-band {
    background-color: transparent !important;
    background-image: none !important;
  }

  .about-alfred-band::before {
    inset: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.04) 82%, rgba(0, 0, 0, 0.12)),
      radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18) 58%, rgba(0, 0, 0, 0.12) 100%),
      url("../assets/img/shared-section-background.png") !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* India's Asbestos Reality — same background treatment as About Alfred on mobile */
  .asbestos-reality {
    background-color: transparent !important;
    background-image: none !important;
  }

  .asbestos-reality::before {
    inset: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.04) 82%, rgba(0, 0, 0, 0.12)),
      radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18) 58%, rgba(0, 0, 0, 0.12) 100%),
      url("../assets/img/shared-section-background.png") !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Our Journey — same background treatment as About Alfred on mobile */
  .timeline-container.journey-loop-section {
    background-color: transparent !important;
    background-image: none !important;
  }

  .timeline-container.journey-loop-section::before {
    inset: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.04) 82%, rgba(0, 0, 0, 0.12)),
      radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18) 58%, rgba(0, 0, 0, 0.12) 100%),
      url("../assets/img/shared-section-background.png") !important;
    background-position: center center, center center, center center !important;
    background-size: 100% 100%, 100% 100%, cover !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Tighten Bedrock card-to-CTA spacing. */
.bedrock-section {
  padding-top: clamp(4.2rem, 6.2vw, 6rem) !important;
}

.bedrock-grid {
  margin-bottom: clamp(0.25rem, 0.65vw, 0.55rem) !important;
}

.youtube-section {
  margin-top: 0 !important;
}

/* Bedrock glow sequence runs only while the section is in view. */
.bedrock-card {
  animation: bedrockSequentialGlow 9s ease-in-out infinite !important;
}

.bedrock-section.is-bedrock-glowing .bedrock-card {
  animation-play-state: running !important;
}

.bedrock-card:nth-child(1) {
  animation-delay: 0s !important;
}

.bedrock-card:nth-child(2) {
  animation-delay: 3s !important;
}

.bedrock-card:nth-child(3) {
  animation-delay: 6s !important;
}

@keyframes bedrockSequentialGlow {
  0%,
  28%,
  100% {
    transform: translateY(0);
    filter: none;
    box-shadow:
      0 1.25rem 2.7rem rgba(19, 53, 28, 0.16),
      0 0.35rem 0.9rem rgba(19, 53, 28, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  9%,
  17% {
    transform: translateY(-0.4rem);
    filter: drop-shadow(0 0 1.35rem rgba(36, 176, 91, 0.28));
    box-shadow:
      0 1.85rem 3.7rem rgba(19, 53, 28, 0.22),
      0 0 2.1rem rgba(36, 176, 91, 0.5),
      0 0 0 1px rgba(36, 176, 91, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
}

/* Stronger visible light-flash pass for Bedrock cards. */
.bedrock-card {
  position: relative !important;
}

.bedrock-card::before {
  position: absolute !important;
  inset: -18% -42% !important;
  z-index: 5 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0.82) 48%,
      rgba(128, 255, 184, 0.42) 54%,
      rgba(255, 255, 255, 0) 66%
    ) !important;
  opacity: 0 !important;
  transform: translateX(-70%) skewX(-10deg) !important;
}

.bedrock-card::before {
  animation: bedrockLightFlash 9s ease-in-out infinite !important;
}

.bedrock-card:nth-child(1)::before {
  animation-delay: 0s !important;
}

.bedrock-card:nth-child(2)::before {
  animation-delay: 3s !important;
}

.bedrock-card:nth-child(3)::before {
  animation-delay: 6s !important;
}

.bedrock-section.is-bedrock-glowing .bedrock-card:nth-child(1),
.bedrock-section.is-bedrock-glowing .bedrock-card:nth-child(2),
.bedrock-section.is-bedrock-glowing .bedrock-card:nth-child(3) {
  animation-name: bedrockSequentialGlow !important;
}

@keyframes bedrockLightFlash {
  0%,
  28%,
  100% {
    opacity: 0;
    transform: translateX(-70%) skewX(-10deg);
  }

  8% {
    opacity: 0;
    transform: translateX(-70%) skewX(-10deg);
  }

  14% {
    opacity: 0.85;
  }

  21% {
    opacity: 0;
    transform: translateX(70%) skewX(-10deg);
  }
}

.achievement-section::before {
  opacity: 1 !important;
  background-image:
    linear-gradient(30deg, rgba(13, 92, 63, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.03) 87.5%, rgba(13, 92, 63, 0.03)),
    linear-gradient(150deg, rgba(13, 92, 63, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(13, 92, 63, 0.03) 87.5%, rgba(13, 92, 63, 0.03)),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 58%),
    url("../assets/img/shared-section-background.png") !important;
  background-size: 4.8rem 8.4rem, 4.8rem 8.4rem, 100% 100%, 100% auto !important;
  background-position: 0 0, 0 0, center center, center top !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}