/* ============================================================
   KARIGAR PRO — services.css
   ============================================================ */

/* HERO with red diagonal stripe */
.svc-hero__stripe {
  position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;
  background: var(--color-racing-red); opacity: 0.14;
  transform: skewX(-16deg); transform-origin: top right;
}

/* SERVICE BLOCKS */
.svc-banner { border-radius: 14px; overflow: hidden; margin: 4px 0 40px; height: clamp(220px, 32vw, 320px); line-height: 0; }
.svc-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; transition: transform 0.6s ease; }
.svc-banner:hover img { transform: scale(1.04); }
.svc-ac   .svc-banner img { object-position: center 30%; }
.svc-fan  .svc-banner img { object-position: center 16%; }
.svc-cool .svc-banner img { object-position: center 38%; }
.svc-block h2 { margin: 10px 0 44px; }
.svc-ac { background: var(--color-deep-blue); color: #fff; }
.svc-ac h2 { color: #fff; }
.svc-fan { background: var(--color-pure-white); color: var(--color-near-black); }
.svc-fan h2 { color: var(--color-near-black); }
.svc-fan .eyebrow { color: var(--color-deep-blue); }
.svc-cool { background: var(--color-cloud-grey); color: var(--color-near-black); }
.svc-cool h2 { color: var(--color-near-black); }
.svc-cool .eyebrow { color: var(--color-racing-red); }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-grid--5 { grid-template-columns: repeat(3, 1fr); }

.svc-card {
  border-radius: 14px; padding: 30px 26px;
  border: 1px solid transparent; transition: var(--transition-smooth);
  position: relative;
}
.svc-card i { width: 38px; height: 38px; margin-bottom: 16px; stroke-width: 1.6; }
.svc-card h3 { font-size: 26px; margin-bottom: 8px; }
.svc-card p { font-size: 15px; margin-bottom: 16px; }
.svc-price {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px;
  padding: 6px 12px; border-radius: 6px;
}

/* AC block cards (on deep-blue) */
.svc-ac .svc-card { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.svc-ac .svc-card i { color: #fff; }
.svc-ac .svc-card p { color: rgba(255,255,255,0.82); }
.svc-ac .svc-price { background: var(--color-racing-red); color: #fff; }
.svc-ac .svc-card:hover { transform: translateY(-8px); border-color: var(--color-racing-red); box-shadow: var(--shadow-red); }

/* Fan block cards (on white) */
.svc-fan .svc-card { background: #fff; border-color: var(--color-cloud-grey); }
.svc-fan .svc-card i { color: var(--color-deep-blue); }
.svc-fan .svc-card p { color: #555; }
.svc-fan .svc-price { background: var(--color-deep-blue); color: #fff; }
.svc-fan .svc-card:hover { transform: translateY(-8px); border-color: var(--color-deep-blue); box-shadow: var(--shadow-blue); }

/* Cooling block cards (on grey) */
.svc-cool .svc-card { background: #fff; border-color: rgba(13,13,13,0.08); }
.svc-cool .svc-card i { color: var(--color-steel-blue); }
.svc-cool .svc-card p { color: #555; }
.svc-cool .svc-price { background: var(--color-steel-blue); color: #fff; }
.svc-cool .svc-card:hover { transform: translateY(-8px); border-color: var(--color-steel-blue); box-shadow: 0 18px 50px rgba(74,108,200,0.3); }

/* PROCESS TIMELINE */
.svc-timeline { background: var(--color-near-black); color: #fff; }
.svc-timeline h2 { margin: 10px 0 60px; }
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 12px; }
.timeline__line {
  position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px;
  background: rgba(255,255,255,0.12);
}
.timeline__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--color-racing-red); }
.tl-node { position: relative; display: flex; align-items: flex-start; gap: 28px; padding: 0 0 40px 0; }
.tl-node:last-child { padding-bottom: 0; }
.tl-dot {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 16px; height: 16px; margin: 6px 0 0 12px; border-radius: 50%;
  background: var(--color-near-black); border: 3px solid var(--color-steel-blue);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tl-node.is-on .tl-dot { border-color: var(--color-racing-red); transform: scale(1.25); }
.tl-card h3 { color: #fff; font-size: 28px; }
.tl-card p { color: rgba(255,255,255,0.75); margin-top: 4px; }

/* responsive */
@media (max-width: 900px) {
  .svc-grid, .svc-grid--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-grid, .svc-grid--5 { grid-template-columns: 1fr; }
}