/* V48 — final professional cleanup: compact cards, readable dark sections, polished FAQ, compact blog hero */

/* 1) PROJECT CARDS: compact content, exact 8px rhythm, no artificial empty height */
.project-grid,
.projects-grid,
.home3-project-grid,
.projects-eight-grid {
  align-items: start !important;
  gap: 16px !important;
}

.project-card-unified,
.home-project-card {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

.project-card-unified .home-project-body,
.home-project-card .home-project-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  flex: none !important;
  padding: 16px 20px 20px !important;
}

.project-card-unified .home-project-body > *,
.home-project-card .home-project-body > * {
  margin: 0 !important;
  min-height: 0 !important;
}

.project-card-unified h3,
.home-project-card h3 {
  min-height: 0 !important;
  font-size: 19px !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
}

.project-card-unified .project-location,
.home-project-card .project-location,
.project-card-unified .project-price,
.home-project-card .project-price,
.project-card-unified .project-config,
.home-project-card .project-config {
  min-height: 0 !important;
  line-height: 1.4 !important;
}

.project-card-unified .project-config + .home-project-actions,
.home-project-card .project-config + .home-project-actions,
.project-card-unified .home-project-actions,
.home-project-card .home-project-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 8px !important;
}

.project-card-unified .home-project-actions > a,
.home-project-card .home-project-actions > a {
  min-height: 46px !important;
}

/* 2) TESTIMONIAL SECTION: guaranteed readable premium typography */
.cs9-testimonials {
  background: linear-gradient(118deg, #063b57 0%, #005f70 52%, #008995 100%) !important;
}

.cs9-testimonials .home3-center-head h2,
.cs9-testimonials .home3-center-head h2 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.16) !important;
}

.cs9-testimonials .home3-center-head p {
  color: rgba(255,255,255,.88) !important;
}

.cs9-testimonials .home3-eyebrow {
  color: #ffffff !important;
  background: rgba(0, 183, 165, .13) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.cs9-testimonials .home3-eyebrow::before {
  background: #20d5a8 !important;
}

.cs9-testimonial-grid article {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 45px rgba(1,27,42,.18) !important;
  backdrop-filter: blur(12px) !important;
}

.cs9-testimonial-grid article,
.cs9-testimonial-grid article p,
.cs9-testimonial-grid article strong,
.cs9-testimonial-grid article small {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

.cs9-testimonial-grid article small { color: rgba(255,255,255,.72) !important; }

/* 3) FAQ: premium cards, balanced spacing and reliable open state */
.cs9-faq {
  padding-block: 64px !important;
}

.cs9-faq-grid {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  gap: 48px !important;
}

.cs9-accordion {
  border-top: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.cs9-faq-item {
  margin: 0 !important;
  border: 1px solid rgba(7,58,87,.13) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 24px rgba(4,45,67,.055) !important;
  overflow: hidden !important;
}

.cs9-faq-item button {
  min-height: 66px !important;
  padding: 17px 18px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #043d59 !important;
}

.cs9-faq-item button span {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  background: #edf7e8 !important;
  color: #4e9f51 !important;
}

.cs9-faq-item > div {
  display: grid !important;
  grid-template-rows: 0fr !important;
  overflow: hidden !important;
  transition: grid-template-rows .3s ease !important;
}

.cs9-faq-item > div > p {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 18px !important;
  color: #587286 !important;
  line-height: 1.7 !important;
  transition: padding .3s ease !important;
}

.cs9-faq-item.open > div,
.cs9-faq-item.is-open > div,
.cs9-faq-item:has(button[aria-expanded="true"]) > div {
  grid-template-rows: 1fr !important;
}

.cs9-faq-item.open > div > p,
.cs9-faq-item.is-open > div > p,
.cs9-faq-item:has(button[aria-expanded="true"]) > div > p {
  padding: 0 18px 18px !important;
}

.cs9-faq-item.open button span,
.cs9-faq-item.is-open button span,
.cs9-faq-item button[aria-expanded="true"] span {
  transform: rotate(45deg) !important;
}

/* 4) CTA: no invisible gradient text on dark image */
.home3-cta h2,
.home3-cta h2 *,
.home3-cta p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}
.home3-cta p { color: rgba(255,255,255,.78) !important; }

/* 5) BLOG LISTING HERO: compact, editorial and readable */
.cs-blog-hero {
  padding: 54px 0 44px !important;
}

.cs-blog-hero h1 {
  max-width: 850px !important;
  margin: 12px 0 14px !important;
  font-size: clamp(38px, 4.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  padding-bottom: .08em !important;
}

.cs-blog-hero p {
  max-width: 760px !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* Keep all heading descenders visible */
h1, h2, h3,
.cs-blog-hero h1,
.home3-section-head h2,
.home3-center-head h2,
.cs9-faq h2 {
  overflow: visible !important;
  padding-bottom: .07em !important;
}

@media (max-width: 1100px) {
  .cs9-faq-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

@media (max-width: 700px) {
  .project-grid,
  .projects-grid,
  .home3-project-grid,
  .projects-eight-grid { gap: 14px !important; }
  .cs9-faq { padding-block: 46px !important; }
  .cs-blog-hero { padding: 40px 0 32px !important; }
  .cs-blog-hero h1 { font-size: clamp(34px, 10vw, 46px) !important; }
}