/* ================================================================
   BRICK4BRICK — css/services.css
   Services page styles
   ================================================================ */

/* ── Editorial Service Blocks ─────────────────────────────── */
.svc-list        { display:flex; flex-direction:column; gap:0; margin-top:52px }
.svc-item        {
  display:grid; grid-template-columns:100px 1fr 180px; gap:44px; align-items:start;
  padding:56px 0; border-bottom:1px solid var(--border); position:relative;
}
.svc-item:last-child { border-bottom:none }

.svc-num-big     {
  font-family:'Syne',sans-serif; font-size:clamp(3rem,6vw,5.5rem); font-weight:800;
  color:transparent; -webkit-text-stroke:1.5px rgba(200,255,87,.18); line-height:1;
  user-select:none; padding-top:4px; text-align:center;
  transition:color .4s var(--ease), -webkit-text-stroke .4s var(--ease);
}
.svc-item:hover .svc-num-big {
  -webkit-text-stroke:1.5px rgba(200,255,87,.5);
  color:rgba(200,255,87,.04);
}

.svc-content h3  { font-size:1.4rem; margin-bottom:12px }
.svc-content p   { color:var(--muted); font-size:.9375rem; margin-bottom:22px; line-height:1.75; max-width:510px }

.svc-feats     { display:flex; flex-direction:column; gap:9px }
.svc-feat      { display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--muted) }
.svc-feat::before {
  content:'✓'; width:18px; height:18px; flex-shrink:0; background:var(--glow); color:var(--accent);
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700;
  border:1px solid rgba(200,255,87,.2);
}

/* ── Sticky stat box ──────────────────────────────────────── */
.svc-stat-box    {
  background:var(--s2); border:1px solid var(--border); border-radius:var(--r3);
  padding:24px 20px; display:flex; flex-direction:column; flex-shrink:0;
  position:sticky; top:calc(var(--nav-h) + 24px);
  transition:border-color var(--t) var(--ease);
}
.svc-item:hover .svc-stat-box { border-color:rgba(200,255,87,.2) }
.ssb-item        { text-align:center; padding:16px 0 }
.ssb-n           { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--accent) }
.ssb-l           { font-size:.7rem; color:var(--muted); margin-top:4px; line-height:1.4 }
.ssb-divider     { height:1px; background:var(--border) }

/* ── Comparison Table ─────────────────────────────────────── */
.compare-grid    {
  margin-top:44px; border:1px solid var(--border); border-radius:var(--r3); overflow:hidden;
}
.cg-row          {
  display:grid; grid-template-columns:1fr 1fr 1fr; border-bottom:1px solid var(--border);
}
.cg-row:last-child { border-bottom:none }
.cg-row > div    { padding:16px 22px; font-size:.875rem }
.cg-head         { background:var(--s2) }
.cg-head > div   { font-family:'Syne',sans-serif; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.cg-head .cg-b4b { color:var(--accent) }
.cg-aspect       { color:var(--muted); font-size:.84rem; font-weight:300 }
.cg-b4b          {
  background:rgba(200,255,87,.03);
  border-left:1px solid rgba(200,255,87,.1); border-right:1px solid var(--border);
}
.cg-good         { color:var(--text); font-weight:500 }
.cg-bad          { color:rgba(240,238,232,.28) }

/* ── Process ─────────────────────────────────────────────── */
.process   { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:48px; position:relative }
.process::before {
  content:''; position:absolute; top:43px; left:calc(10% + 16px); right:calc(10% + 16px);
  height:1px; background:linear-gradient(90deg,transparent,var(--border2) 15%,var(--border2) 85%,transparent);
  pointer-events:none;
}
.pstep     { text-align:center; padding:20px 10px; position:relative }
.pnum      {
  width:46px; height:46px; background:var(--s2); border:1px solid var(--border2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
  font-size:.76rem; color:var(--accent); margin:0 auto 14px; position:relative; z-index:1;
  transition:all var(--t) var(--ease);
}
.pstep:hover .pnum { background:var(--glow); border-color:rgba(200,255,87,.4); box-shadow:0 0 16px var(--glow) }
.pstep h4  { font-size:.9rem; margin-bottom:6px }
.pstep p   { font-size:.8rem; color:var(--muted); line-height:1.55 }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px) {
  .svc-item        { grid-template-columns:80px 1fr }
  .svc-stat-box    { display:none }
  .process         { grid-template-columns:repeat(3,1fr) }
  .process::before { display:none }
}
@media (max-width:768px) {
  .svc-item        { grid-template-columns:56px 1fr; gap:22px; padding:40px 0 }
  .svc-num-big     { font-size:2.4rem }
  .cg-row          { grid-template-columns:1fr 1fr }
  .cg-aspect       { display:none }
  .cg-b4b          { border-left:none }
  .process         { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px) {
  .svc-item        { grid-template-columns:1fr; gap:14px; padding:28px 0 }
  .svc-num-big     { display:none }
  .cg-row          { grid-template-columns:1fr 1fr }
  .cg-aspect       { display:none }
  .cg-them         { display:block }
  .cg-b4b          { border-left:none }
  .cg-row > div    { padding:14px 14px; font-size:.8rem }
  .process         { grid-template-columns:1fr }
}