/* ============================================================
   RPF — detail pages (service / portfolio / blog)
   ============================================================ */
.detail-hero{padding:150px 0 50px;position:relative;border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 80% 0%,rgba(15,76,129,.25),transparent 60%)}
.crumbs{font-size:.85rem;color:var(--tx3);margin-bottom:26px;font-family:var(--ff-mono)}
.crumbs a{color:var(--tx2);transition:.2s}.crumbs a:hover{color:var(--teal2)}
.detail-ic{width:84px;height:84px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;background:rgba(0,169,157,.14);border:1px solid rgba(0,169,157,.3);margin-bottom:24px;
  animation:fadeUp .7s both}
.detail-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;letter-spacing:-.5px;margin-bottom:16px;
  animation:fadeUp .7s .1s both;line-height:1.25}
.detail-hero>.wrap>p{color:var(--tx2);font-size:1.15rem;max-width:680px;animation:fadeUp .7s .2s both}

.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:46px;align-items:start}
.detail-body{font-size:1.06rem;line-height:2;color:var(--tx)}
.detail-body>div p{margin-bottom:18px;color:var(--tx2)}
.detail-body img{width:100%;border-radius:var(--rad);margin:24px 0;border:1px solid var(--line)}
.detail-body h2,.detail-body h3{margin:30px 0 14px;font-weight:800}
.service-cover{height:360px;border-radius:var(--rad);margin-bottom:30px;position:relative;overflow:hidden;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.service-cover img{width:100%;height:100%;object-fit:cover;margin:0;border:0;border-radius:inherit}
.feat-title{font-size:1.5rem;margin-top:40px!important;margin-bottom:20px!important;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.feat-list li{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(160deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--rad-s);padding:16px 18px;font-size:.96rem;color:var(--tx);transition:.3s}
.feat-list li:hover{border-color:rgba(0,169,157,.4);transform:translateX(-4px)}
body[dir=ltr] .feat-list li:hover{transform:translateX(4px)}
.fck{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(0,169,157,.16);
  border:1px solid rgba(0,169,157,.35);color:var(--teal2);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem}

.detail-cta{margin-top:44px;background:linear-gradient(135deg,rgba(15,76,129,.3),rgba(0,169,157,.14));
  border:1px solid var(--line2);border-radius:var(--rad);padding:38px;text-align:center}
.detail-cta h3{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.detail-cta p{color:var(--tx2);margin-bottom:24px}

.detail-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.side-card{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--rad);padding:26px}
.side-card h4{font-size:1.1rem;font-weight:700;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.side-card ul li{margin-bottom:12px}
.side-card ul a{color:var(--tx2);font-size:.94rem;transition:.2s;display:block}
.side-card ul a:hover{color:var(--teal2);padding-inline-start:6px}
.side-contact a{display:block;color:var(--tx2);font-family:var(--ff-mono);font-size:.92rem;margin-bottom:12px;direction:ltr;text-align:right;transition:.2s}
.side-contact a:hover{color:var(--teal2)}

/* portfolio detail extras */
.pf-hero-img{height:340px;border-radius:var(--rad);margin-bottom:30px;position:relative;overflow:hidden;border:1px solid var(--line2)}
.pf-meta{display:flex;gap:30px;flex-wrap:wrap;margin:20px 0 10px;padding:20px 0;border-block:1px solid var(--line)}
.pf-meta div span{display:block;font-size:.8rem;color:var(--tx3);margin-bottom:4px}
.pf-meta div b{font-size:1rem;color:var(--tx)}
.pf-visit{margin-top:10px}

/* blog detail extras */
.post-meta{display:flex;gap:18px;align-items:center;color:var(--tx3);font-size:.9rem;margin-bottom:6px}
.post-cover{height:320px;border-radius:var(--rad);margin:26px 0;display:flex;align-items:center;justify-content:center;font-size:4rem;border:1px solid var(--line2);position:relative;overflow:hidden}

@media(max-width:980px){
  .detail-layout{grid-template-columns:1fr}
  .detail-side{position:static}
  .feat-list{grid-template-columns:1fr}
}