/* ==========================================================================
   KPGE Services page. Loaded on top of theme.css + home.css (the page carries
   the .home class so it inherits the Cormorant/Manrope type and utilities).
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.svc-hero { position: relative; background: #fef7ef; overflow: hidden; }
.svc-hero__bg { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: auto; max-width: 66%; object-fit: contain; object-position: right center; z-index: 0; }
.svc-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fef7ef 0%, #fef7ef 30%, rgba(254,247,239,.5) 48%, rgba(254,247,239,0) 62%); }
.svc-hero .shell { position: relative; z-index: 2; }
.svc-hero__content {
  max-width: 46%;
  min-height: clamp(360px, 40vw, 520px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.svc-hero h1.display { font-size: clamp(2.4rem, 4.6vw, 4rem); margin: 0.5rem 0 1.2rem; }
.svc-hero h1 em, .svc-hero h1 .accent { font-style: normal; color: var(--crimson); }
.svc-hero__lede { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 30rem; margin: 0 0 2rem; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }

/* --- Section furniture ---------------------------------------------------- */
.svc-sec { padding: clamp(3rem, 5vw, 5rem) 0; }
.svc-sec--tint { background: var(--home-sand); }
.svc-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.svc-head .home-eyebrow { color: var(--crimson); }
.svc-head .display { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.svc-head__rule { display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--crimson); margin: 0.9rem auto 0; }

/* --- Services grid (3 x 3) ------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.svc-card {
  background: #fff;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(27,22,24,.4); }
.svc-card__icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--crimson-wash); color: var(--crimson);
  display: grid; place-content: center; margin-bottom: 1.1rem;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 0.5rem; }
.svc-card p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; margin: 0 0 1.1rem; }
.svc-card__more { margin-top: auto; color: var(--crimson); font-family: var(--label); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.svc-card__more:hover { color: var(--crimson-deep); }

/* --- Process (6 steps) ---------------------------------------------------- */
.svc-process { background: var(--home-cream); }
.svc-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.svc-steps::before {
  content: ""; position: absolute; top: 18px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 8px, transparent 8px 14px);
  z-index: 0;
}
.svc-step { position: relative; z-index: 1; text-align: center; }
.svc-step__no {
  width: 36px; height: 36px; margin: 0 auto 1rem;
  display: grid; place-content: center; border-radius: 50%;
  background: var(--crimson); color: #fff;
  font-family: var(--label); font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 0 0 5px var(--home-cream);
}
.svc-step__icon {
  width: 62px; height: 62px; margin: 0 auto 0.9rem;
  display: grid; place-content: center; border-radius: 50%;
  background: #fff; border: 1px solid var(--home-line); color: var(--crimson);
}
.svc-step__icon svg { width: 28px; height: 28px; }
.svc-step h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.3rem; }
.svc-step p { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; margin: 0; }

/* --- Why choose us -------------------------------------------------------- */
.svc-why__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.svc-why__photo { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(160deg,#d9c7b4,#b99f88); }
.svc-why__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-why__badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--crimson); color: #fff;
  padding: 1rem 1.3rem; border-radius: 0 16px 0 16px;
}
.svc-why__badge b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; }
.svc-why__badge span { font-family: var(--label); font-size: 0.78rem; color: rgba(255,255,255,.85); }
.svc-why__features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; margin-top: 1.4rem; }
.svc-feature { display: flex; gap: 0.9rem; }
.svc-feature__icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--crimson); color: #fff; display: grid; place-content: center;
}
.svc-feature__icon svg { width: 22px; height: 22px; }
.svc-feature h3 { font-family: var(--label); font-weight: 700; font-size: 1rem; margin: 0 0 0.25rem; color: var(--ink); }
.svc-feature p { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; margin: 0; }

/* --- CTA band ------------------------------------------------------------- */
.svc-cta {
  background:
    linear-gradient(145deg, rgba(176,35,58,.93) 0%, rgba(168,30,50,.90) 40%, rgba(125,21,36,.95) 100%),
    url(../img/home/jaipur-institution.jpg) center / cover no-repeat;
  color: #fff;
}
.svc-cta__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.svc-cta .display { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.svc-cta__grid p { color: rgba(255,255,255,.85); margin: 0.7rem 0 0; font-size: 0.98rem; line-height: 1.5; }
.svc-cta__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.svc-cta__list li { display: flex; align-items: center; gap: 0.7rem; font-family: var(--label); font-size: 0.95rem; }
.svc-cta__list svg { width: 22px; height: 22px; flex-shrink: 0; opacity: .9; }
.svc-cta__act { text-align: center; }
.svc-cta__phone { margin-top: 0.9rem; font-family: var(--label); font-size: 0.9rem; color: rgba(255,255,255,.85); }
.svc-cta__phone a { color: #fff; font-weight: 700; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .svc-hero__content { max-width: 62%; }
  .svc-hero__veil { background: linear-gradient(90deg, #fef7ef 0%, rgba(254,247,239,.82) 55%, rgba(254,247,239,.4) 100%); }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.2rem; }
  .svc-steps::before { display: none; }
  .svc-why__grid { grid-template-columns: 1fr; }
  .svc-cta__grid { grid-template-columns: 1fr; text-align: left; }
  .svc-cta__act { text-align: left; }
}
@media (max-width: 620px) {
  .svc-hero__content { max-width: 100%; min-height: 300px; }
  .svc-hero__veil { background: rgba(254,247,239,.74); }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-steps { grid-template-columns: 1fr 1fr; }
  .svc-why__features { grid-template-columns: 1fr; }
}