/* ======================================
   SAINIK PACKERS & MOVERS — services.css
   Service overview + individual service pages
   ====================================== */

/* ── SERVICE OVERVIEW PAGE HEADER ── */
.services-header {
  background: var(--black);
  color: var(--white);
  padding: var(--space-20) 0 var(--space-16);
}
.services-header .section-label { color: var(--blue); }
.services-header h1 { color: var(--white); max-width: 16ch; margin-bottom: var(--space-5); }
.services-header p  { color: var(--n400); font-size: 18px; max-width: 52ch; }

/* ── FULL SERVICE LIST ── */
.services-full { background: var(--white); }
.services-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
/* Service card inherits from home.css — augmented below */
.service-card--full h3 { font-size: 22px; }
.service-card--full .service-card__desc { font-size: 15px; color: var(--n700); line-height: 1.6; }
.service-card--full .service-card__includes {
  margin-top: var(--space-4);
  border-top: 1px solid var(--n300);
  padding-top: var(--space-4);
}
.service-card--full .service-card__includes li {
  font-size: 13px;
  color: var(--n600);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
}
.service-card--full .service-card__includes li::before {
  content: '→';
  color: var(--blue);
  flex-shrink: 0;
}

@media (max-width: 900px) { .services-full-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-full-grid { grid-template-columns: 1fr; } }

/* ── SINGLE SERVICE PAGE ── */
.service-page { background: var(--white); }
.service-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-12);
  align-items: start;
}

/* Left: content column */
.service-page__content { min-width: 0; }
.service-page__content h2 { margin-bottom: var(--space-5); }
.service-page__content h3 {
  font-size: 20px;
  margin: var(--space-8) 0 var(--space-4);
}
.service-page__content p {
  font-size: 16px;
  color: var(--n700);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.service-page__includes {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.service-page__includes h3 { margin-top: 0; font-size: 18px; }
.service-page__includes ol { counter-reset: includes; display: flex; flex-direction: column; gap: var(--space-3); }
.service-page__includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
  color: var(--n700);
  counter-increment: includes;
}
.service-page__includes li::before {
  content: counter(includes, decimal-leading-zero);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 22px;
}
.service-page__img {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-8) 0;
}
.service-page__img img { width: 100%; height: 280px; object-fit: cover; }

/* Right: sticky sidebar form */
.service-page__sidebar { position: sticky; top: calc(var(--nav-height) + 24px); }
.sidebar-form {
  background: var(--white);
  border: 1px solid var(--n300);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-03);
}
.sidebar-form h3 { font-size: 20px; margin-bottom: var(--space-2); }
.sidebar-form .subtext { font-size: 14px; color: var(--n600); margin-bottom: var(--space-5); }
.sidebar-trust {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--n300);
  font-size: 13px;
  color: var(--n600);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sidebar-trust span { color: var(--blue); font-weight: 700; }

/* Related services */
.related-services { background: var(--off-white); }
.related-services__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-8);
}
.related-services__link { font-size: 15px; font-weight: 500; color: var(--blue); }
.related-services__link:hover { text-decoration: underline; }
.related-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1024px) {
  .service-page__layout { grid-template-columns: 1fr; }
  .service-page__sidebar { position: static; }
}
@media (max-width: 768px) {
  .related-services__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .related-services__grid { grid-template-columns: 1fr; }
}

/* ── FAQ ── */
.faq { background: var(--white); padding-top: 0; }
.faq__list { border-top: 1px solid var(--n300); }
.faq__item { border-bottom: 1px solid var(--n300); }
.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: var(--space-5) 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  gap: var(--space-4);
  background: none;
  cursor: pointer;
  transition: color var(--ease);
}
.faq__question:hover { color: var(--blue); }
.faq__chevron {
  flex-shrink: 0;
  width: 20px; height: 20px;
  transition: transform var(--ease-md);
  color: var(--n500);
}
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__item.is-open .faq__question { color: var(--blue); }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease;
}
.faq__answer-inner { font-size: 15px; color: var(--n700); line-height: 1.7; padding: 0 0 var(--space-5); }