/* Marketing site layout.
   The Rajkot components assumed a product card beside the hero and a tab bar
   for the process, neither of which exists here. These rules retire the parts
   that no longer have content and give the page a calmer vertical rhythm.
   Loaded last, so it wins without editing the shared files other sites use. */

/* ---------- hero ----------
   Six/five rather than the old five/seven: the copy is the point here, and the
   original split left the text cramped against an oversized visual slot. */
.l-rj .rj-hero { padding: 64px 0 72px; }
.l-rj .rj-hg {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px; align-items: center;
}
.l-rj .rj-hero h1 { max-width: 16ch; font-size: clamp(34px, 3.9vw, 52px); line-height: 1.07; }
.l-rj .rj-hero .ip-lead { max-width: 46ch; font-size: 17px; line-height: 1.65; }
.l-rj .rj-hero .ip-btns { margin-top: 28px; }

.mk-fig { margin: 0; }
.mk-fig img {
  display: block; width: 100%; height: auto; border-radius: 24px;
  box-shadow: 0 40px 70px -44px rgba(16, 32, 78, .45);
}

@media (max-width: 900px) {
  .l-rj .rj-hg { grid-template-columns: 1fr; gap: 36px; }
  .l-rj .rj-hero h1 { max-width: 18ch; }
  .l-rj .rj-hero .ip-lead { max-width: none; }
}

/* ---------- calmer vertical rhythm ---------- */
.ip-sec { padding: 80px 0; }
.ip-head { margin-bottom: 40px; align-items: start; gap: 48px; }
.ip-head h2 { max-width: 20ch; text-wrap: balance; }
.ip-head .ip-lead { max-width: 52ch; }

/* ---------- card grid, replaces the misused tab bar ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-card {
  padding: 28px 26px; border-radius: 22px;
  border: 1px solid var(--ip-line); background: var(--ip-bg);
}
.mk-card h3 {
  margin: 0 0 10px; font-size: 18px; line-height: 1.3; color: var(--ip-ink);
}
.mk-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ip-muted); }
.mk-card .mk-n {
  display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--ip-acc-t);
}

/* ---------- services: four equal cards, no span-2 orphan ---------- */
.rj-bento { grid-auto-rows: minmax(0, auto); }
.rj-bento a.big { grid-column: span 2; }

/* ---------- a note under a block, not another lead paragraph ---------- */
.mk-note {
  margin: 22px 0 0; max-width: 70ch;
  font-size: 15px; line-height: 1.65; color: var(--ip-muted);
}
.mk-note a { color: var(--ip-acc-t); font-weight: 600; }

/* ---------- pricing: let the inclusions breathe ---------- */
.rj-prices + .rj-who { margin-top: 24px; }

@media (max-width: 1080px) {
  .mk-grid, .mk-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .l-rj .rj-hero { padding: 48px 0 56px; }
  .ip-sec { padding: 56px 0; }
  .mk-grid, .mk-grid--3, .mk-grid--2 { grid-template-columns: 1fr; }
  .mk-card { padding: 22px 20px; }
  .ip-head h2, .ip-head .ip-lead { max-width: none; }
}

/* ---------- inner-page hero: no figure, so no empty column ---------- */
.l-rj .rj-hg.solo { display: block; }
.l-rj .rj-hg.solo .rj-hc { max-width: 52rem; }
.l-rj .rj-hg.solo h1 { max-width: 20ch; }
.l-rj .rj-hg.solo .ip-lead { max-width: 58ch; }