/* =====================================================================
   WE PRACHAR — SERVICE DETAIL PAGES (services/<slug>.html)
   overview · included · process · deliverables · tools · work ·
   FAQ · other services · responsive
   ===================================================================== */

/* ---------- Overview ---------- */
.sd-over__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.sd-over__l { position: sticky; top: 110px; display: grid; gap: 18px; justify-items: start; }
.sd-over__r { display: grid; gap: 18px; }
.sd-over__r .lead { color: var(--ink); }
.sd-sub { margin-top: 10px; color: var(--muted); font: 800 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.sd-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-caps li { display: flex; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; transition: border-color .3s, transform .4s var(--ease); }
.sd-caps li:hover { border-color: var(--accent); transform: translateX(5px); }
.sd-caps .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 3; }

/* ---------- What's included ---------- */
.sd-inc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.incc { display: grid; gap: 10px; align-content: start; padding: 26px 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .3s; }
.incc:hover { border-color: rgba(255, 105, 0, .4); }
.incc__ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: background .3s, color .3s, transform .5s var(--ease); }
.incc:hover .incc__ic { background: var(--accent); color: #fff; transform: rotate(-8deg); }
.incc__ic .ic { width: 24px; height: 24px; }
.incc__t { font-size: 1.2rem; margin-top: 12px; }
.incc__x { color: var(--muted); font-size: 14.5px; }

/* ---------- Process (connected steps, no numbers) ---------- */
.sd-proc__list { --line: 1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sd-proc__list::before { content: ''; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--accent); transform: scaleX(var(--line)); transform-origin: left; opacity: .35; }
.sdp { position: relative; display: grid; gap: 10px; align-content: start; }
.sdp__dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 6px var(--bg); }
.sdp__dot .ic { width: 20px; height: 20px; stroke-width: 3; }
.sdp__t { font-size: 1.25rem; margin-top: 8px; }
.sdp__x { color: var(--muted); font-size: 14.5px; }

/* ---------- Deliverables / fit ---------- */
.freq { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-2); font-size: 12.5px; font-weight: 700; }
.sd-fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fitc { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fitc__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.fitc__ic .ic { width: 21px; height: 21px; }

/* ---------- Related work ---------- */
.sd-work__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 34px; }
.sd-work__head .sec-head { margin: 0; }
.sd-work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- FAQ ---------- */
.sd-faq__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 70px); align-items: start; }

/* ---------- Other services (slider above the footer) ---------- */
.sd-more { padding-bottom: 10px; }
.sd-more__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sd-pn { display: flex; gap: 10px; flex-wrap: wrap; }
.sd-pn__a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.sd-pn__a small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sd-pn__a--next { text-align: right; }
.sd-pn__a .ic { width: 18px; height: 18px; }
.sd-pn__a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sd-pn__a:hover small { color: #bdb5a8; }

@media (max-width: 1100px) {
  .sd-inc__grid, .sd-proc__list { grid-template-columns: repeat(2, 1fr); }
  .sd-proc__list::before { display: none; }
  .sd-work__grid { grid-template-columns: 1fr 1fr; }
  .sd-work__grid > :nth-child(3) { display: none; }
}
@media (max-width: 980px) {
  .sd-over__grid, .sd-faq__grid, .sd-fit__grid { grid-template-columns: 1fr; }
  .sd-over__l { position: static; }
}
@media (max-width: 640px) {
  .sd-inc__grid, .sd-proc__list, .sd-caps, .sd-work__grid { grid-template-columns: 1fr; }
  .sd-work__grid > :nth-child(3) { display: grid; }
  .sd-pn { width: 100%; }
  .sd-pn__a { flex: 1 1 100%; }
}