/* ==========================================================================
   service.css — Pacific Maids (Services Page Only)
   Matches: services.html sections

   FIXES INCLUDED:
   ✅ Works with your current HTML (.services + .trust-section + #our-process + #service-advantage)
   ✅ Optional stronger scoping if you add #services and #trust IDs
   ✅ Text size overrides Bootstrap utilities (fs-5, text-muted, fa-2x)
   ✅ WOW hidden until animated, then visible
   ✅ .content list styles apply only to UL/OL (not generic divs)
   ✅ Testimonials scoped (no global carousel side effects)
   ✅ No risky generic bg-light/bg-white rules
   ✅ Anchor scroll offset for sticky navbar
========================================================================== */

/* --------------------------- WOW / Animate ------------------------- */
.wow { visibility: hidden; }
.wow.animate__animated { visibility: visible; }

/* ----------------------- Anchor offset for sticky nav --------------- */
#our-process,
#service-advantage{
  scroll-margin-top: 90px;
}

/* =================================================================== */
/* =========================== SERVICES ============================== */
/* Works if section is .services (your current HTML) OR #services (optional) */
.services .service-title,
#services .service-title{
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: #d7560b;
  letter-spacing: 0.2px;
}
.services .service-title span,
#services .service-title span{ color: #d7560b; }

.services .service-heading,
#services .service-heading{
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0.75rem 0 0.5rem;
  color: #424242;
}

/* ✅ Services lead: strong override (no fs-5 here, but we keep !important anyway) */
.services .section-lead-services,
#services #services-lead,
#services .section-lead-services{
  max-width: 70ch;
  font-size: 1.4rem !important;
  line-height: 1.75 !important;
  color: #6b7280 !important;
  font-weight: 300;
  margin-left: auto;
  margin-right: auto;
}

.services .service-box,
#services .service-box{
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.services .icon-service,
#services .icon-service{ color: #cacac9; }

.services .service-box:hover,
#services .service-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

.services .service-box i,
#services .service-box i{ transition: transform 0.25s ease; }

.services .service-box:hover i,
#services .service-box:hover i{ transform: scale(1.15); }

.services .service-p,
#services .service-p{
  font-size: 1.1rem;
  color: #555;
  margin: 0 auto;
  max-width: 90%;
  line-height: 1.6;
}

.services .service-box:focus-within,
#services .service-box:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
  outline: 3px solid rgba(74,111,165,0.25);
  outline-offset: 3px;
}

/* =================================================================== */
/* ===================== LISTS: .content only ======================== */
ul.content,
ol.content{
  padding-left: 18px;
  margin: 0 0 16px;
}
ul.content{ list-style: disc; }
ol.content{ list-style: decimal; }
ul.content li,
ol.content li{ margin-bottom: 8px; }

/* Wrapper div.content around lists */
.content ul,
.content ol{
  padding-left: 18px;
  margin: 0 0 16px;
}
.content ul{ list-style: disc; }
.content ol{ list-style: decimal; }
.content ul li,
.content ol li{ margin-bottom: 8px; }

/* =================================================================== */
/* ============================ TRUST ================================ */
/* Works with .trust-section (your current HTML) and optional #trust */
.trust-section h2,
#trust.trust-section h2{
  color: #1d3557;
  letter-spacing: 0.2px;
}

/* ✅ Trust lead: overrides fs-5 when present */
.trust-section .section-lead.fs-5,
.trust-section .section-lead,
#trust #trust-lead,
#trust .section-lead{
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
  color: #475569 !important;
  max-width: 70ch;
}

/* Trust cards */
.trust-section .border.rounded-3,
#trust .trust__card{
  border-color: rgba(0,0,0,0.10) !important;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-section .border.rounded-3:hover,
#trust .trust__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

/* Only inside trust section */
.trust-section .text-muted{ color: #6b7280 !important; }
.trust-section .fa-lg{ line-height: 1; }

/* Trust right panel */
.trust-section .rounded-4.bg-light.border{
  border-color: rgba(0,0,0,0.10) !important;
  border-radius: 18px !important;
}

/* Optional: if you later add classes */
.trust__card-title { font-size: 1.1rem; }
.trust__card-text  { font-size: 1rem; }
.trust__note       { font-size: 0.95rem; }

/* =================================================================== */
/* ============================ PROCESS ============================== */
#our-process h2,
.process-section h2{
  color: #1d3557;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 900;
  line-height: 1.15;
}

/* ✅ THE REAL FIX: override fs-5 for your process intro paragraph
   Your HTML has: <p class="fs-5 ... our-process-text"> */
#our-process p.our-process-text.fs-5{
  font-size: 1.25rem !important;   /* change this and it WILL update */
  line-height: 1.75 !important;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  color: #475569 !important;
}

/* (Fallback if fs-5 removed later) */
#our-process p.our-process-text{
  font-size: 1.25rem !important;
  line-height: 1.75 !important;
}

/* Process cards */
#our-process .bg-white.border.rounded-4,
.process-section .bg-white.border.rounded-4{
  border-color: rgba(0,0,0,0.10) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

#our-process .bg-white.border.rounded-4:hover,
.process-section .bg-white.border.rounded-4:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

/* ✅ Icon size override-safe (FontAwesome fa-2x) */
#our-process i.fa-2x{
  font-size: 2.15rem !important;
}

/* Card headings */
#our-process h5.fw-bold{
  font-size: 1.08rem;
  font-weight: 900;
  color: #1d3557;
  margin-bottom: 0.35rem;
}

/* ✅ Card descriptions override Bootstrap text-muted */
#our-process p.text-muted{
  font-size: 0.98rem !important;
  line-height: 1.65;
  color: #6b7280 !important;
}

/* =================================================================== */
/* ================= CHECKLIST / INSPECTION ========================== */
.checklist-section .alert.alert-light.border{
  border-color: rgba(0,0,0,0.10) !important;
  border-radius: 14px;
}

.checklist-section .row.g-3 .border.rounded-4{
  border-color: rgba(0,0,0,0.10) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checklist-section .row.g-3 .border.rounded-4:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

.checklist-section .row.g-3 .border.rounded-4 h5{
  color: #1d3557;
}

/* =================================================================== */
/* ======================= STANDARDS SECTION ========================= */
.standards-section .bg-white.border.rounded-3{
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.standards-section .bg-white.border.rounded-3:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

.standards-section .bg-white.border.rounded-4{
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* =================================================================== */
/* ===================== SERVICE ADVANTAGE =========================== */
#service-advantage h2{ color: #1d3557; }

#service-advantage .service-advantage-lead{
  max-width: 70ch;
  margin: 0 auto;
}

#service-advantage .advantage-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

#service-advantage .advantage-list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#service-advantage .advantage-list i{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(25, 135, 84, 0.10);
  color: #198754;
  flex: 0 0 40px;
  margin-top: 2px;
}

#service-advantage .advantage-list strong{
  display: block;
  font-weight: 900;
  color: #1d3557;
  line-height: 1.2;
  margin-bottom: 2px;
}

#service-advantage .advantage-list span{
  display: block;
  color: #6b7280;
  line-height: 1.55;
}

#service-advantage .service-advantage-bottom{
  color: #3b4045;
  line-height: 1.7;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =================================================================== */
/* ============================= CTA ================================ */
section[aria-labelledby="cta-heading"] .container > .p-5.rounded-4.border.bg-white{
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* =================================================================== */
/* ========================= TESTIMONIALS ============================ */
.testimonials{
  padding: 4rem 1rem;
  background-color: #f9f9f9;
  text-align: center;
}

.testimonials .carousel-inner{
  background-color: #fff;
  padding: 2rem 0;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.testimonials .carousel-item figure{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonials .carousel-item img{
  border: 3px solid #e97308;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.testimonials .carousel-item h5{
  font-weight: 800;
  color: #1d3557;
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

.testimonials .blockquote-footer{
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.testimonials .carousel-control-prev-icon,
.testimonials .carousel-control-next-icon{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background-size: 60% 60%;
  opacity: 0.9;
}

.testimonials .testimonial-title{
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #1d3557;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}
.testimonials .testimonial-title span{ color: #e76f51; }

.testimonials .testimonial-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 60%;
  background-color: #e76f51;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.testimonials .testimonial-title:hover::after{ width: 100%; }

/* =================================================================== */
/* ===================== Reduced motion ============================== */
@media (prefers-reduced-motion: reduce){
  .services .service-box,
  .services .service-box i,
  #our-process .bg-white.border.rounded-4,
  .trust-section .border.rounded-3,
  .checklist-section .row.g-3 .border.rounded-4,
  .standards-section .bg-white.border.rounded-3{
    transition: none !important;
  }

  .services .service-box:hover,
  #our-process .bg-white.border.rounded-4:hover,
  .trust-section .border.rounded-3:hover,
  .checklist-section .row.g-3 .border.rounded-4:hover,
  .standards-section .bg-white.border.rounded-3:hover{
    transform: none !important;
  }

  .services .service-box:hover i{ transform: none !important; }
}

/* Optional animation delays */
.animate__delay-6s{ animation-delay: 6s; }
.animate__delay-7s{ animation-delay: 7s; }