/* =========================================================
   Innovated page — built on the Adon "service-details" body
   layout, reusing the template classes already in style.css.
   This file holds only page-specific touches.
   ========================================================= */

/* Hero photo: frame the on-stage shot (dark background) so it reads as an
   intentional framed image on the light hero, not a raw rectangle. */
.hero-area-service-details .section-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.hero-area-service-details .section-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accent the active FAQ / principle number in brand yellow. */
.faq-area .accordion-button .title > span:first-child { color: #FFD80C; }

/* =========================================================
   Vision themes (forward-looking innovation philosophy)
   ========================================================= */
.vision-head {
  max-width: 920px;
  margin-bottom: 20px;
}
.vision-head .section-subtitle {
  color: #FFD80C;
  display: inline-block;
  margin-bottom: 22px;
}

.vision-list { margin-top: 10px; }

.vision-row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 64px 0;
  border-top: 1px solid var(--border);
}
.vision-row:last-child { border-bottom: 1px solid var(--border); }
@media (max-width: 991px) {
  .vision-row { grid-template-columns: 1fr; gap: 16px; padding: 44px 0; }
}

/* small visible index */
.vision-index {
  position: relative;
  z-index: 2;
  font-family: var(--font_bdogrotesk);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #FFD80C;
}

/* big faint ghost number (parallax target, animated in main.js) */
.vision-ghost {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  font-family: var(--font_bdogrotesk);
  font-size: 170px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 991px) { .vision-ghost { display: none; } }

.vision-body { position: relative; z-index: 1; max-width: 760px; }
.vision-title {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--primary);
  margin: 0;
  transition: transform 0.4s ease;
}
.vision-row:hover .vision-title { transform: translateX(8px); }
.vision-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--secondary);
  margin: 22px 0 0;
}

/* yellow accent line that grows on hover */
.vision-body::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 8px;
  width: 3px;
  height: 0;
  background: #FFD80C;
  transition: height 0.45s ease;
}
@media (min-width: 992px) {
  .vision-row:hover .vision-body::before { height: 48px; }
}