/* ============================================================
   Diligent - /services/ hub (Performance Marketing Agency)
   Loads ON TOP of styles.css + service-ppc.css + service-ppc-v2.css.
   Reuses the locked pattern (hero, proof bar, transparency, case,
   final CTA). New bits, hub-only:
     - two-pillars service-cards grid (clustered router)
     - lightweight "pillars converge" integration motif
     - hub-level 4-step engagement strip
   ============================================================ */

/* ---- service-cards grid (three departments) ---- */
.pillars { display: flex; flex-direction: column; gap: 44px; }
.pillar-group { }
.pg-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.pg-head .pg-num { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--coral-deep); }
.pg-head h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); }
.pg-head .pg-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin-left: auto; }

.svc-cards { display: grid; gap: 16px; }
.svc-cards.adv { grid-template-columns: repeat(3, 1fr); }
.svc-cards.ana { grid-template-columns: repeat(3, 1fr); }
.svc-cards.cre { grid-template-columns: repeat(3, 1fr); }

.svc-card { background: var(--bone-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); }
.svc-card .sk-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--amber);
  display: grid; place-items: center; font-size: 16px; margin-bottom: 16px; transition: background .25s ease, color .25s ease; }
.svc-card:hover .sk-ic { background: var(--coral); color: var(--ink); }
.svc-card h4 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.14; color: var(--ink); }
.svc-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 9px; flex: 1; }
.svc-card .sk-go { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--coral-deep); display: inline-flex; align-items: center; gap: 7px; }
.svc-card .sk-go .arrow { transition: transform .25s ease; }
.svc-card:hover .sk-go .arrow { transform: translateX(4px); }

@media (max-width: 960px) { .svc-cards.adv { grid-template-columns: 1fr 1fr; } .svc-cards.ana { grid-template-columns: 1fr 1fr; } .svc-cards.cre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .svc-cards.adv, .svc-cards.ana, .svc-cards.cre { grid-template-columns: 1fr; } }
/* On phones the group note wrapped to its own line but stayed pushed right by
   margin-left:auto. Drop the auto margin so it sits left, aligned with the heading. */
@media (max-width: 640px) { .pg-head .pg-note { margin-left: 0; } }

/* ---- integration motif: two pillars converge into one system ---- */
.integ { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.integ-copy h2 { letter-spacing: -.02em; }
.integ-copy .lead { margin-top: 14px; }
.integ-viz { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
.integ-pill { background: var(--bone-card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px;
  box-shadow: var(--shadow-sm); text-align: center; }
.integ-pill .ip-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 19px;
  margin: 0 auto 13px; background: var(--ink); color: var(--amber); }
.integ-pill h3 { font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink); }
.integ-pill p { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.integ-join { display: grid; place-items: center; padding: 0 18px; }
.integ-join .ij-node { width: 54px; height: 54px; border-radius: 50%; background: var(--coral); color: var(--ink);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-md); text-align: center; line-height: 1; }
.integ-result { margin-top: 18px; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.integ-result b { color: var(--coral-deep); font-weight: 600; }

@media (max-width: 900px) { .integ { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 520px) {
  .integ-viz { grid-template-columns: 1fr; gap: 14px; }
  .integ-join { padding: 0; }
  /* stacked vertically, the small rotated circle was unreadable. Use a horizontal
     pill with normal text so "ONE SYSTEM" reads cleanly between the two cards. */
  .integ-join .ij-node { width: auto; height: auto; border-radius: 999px;
    padding: 9px 18px; font-size: .72rem; letter-spacing: .1em; transform: none;
    line-height: 1.1; white-space: nowrap; }
}

/* ---- hub-level engagement flow (4 steps as a connected process, not cards) ---- */
.engage { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; counter-reset: eng; position: relative; }
.engage::before { content: ""; position: absolute; left: 7%; right: 7%; top: 30px; height: 1.5px; background: var(--line); z-index: 0; }
.engage-step { padding: 0 22px 0 0; position: relative; z-index: 1; }
.engage-step .es-num { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; color: var(--ink); line-height: 1; letter-spacing: -0.03em;
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--bone); border: 1.5px solid var(--line); margin-bottom: 18px; font-optical-sizing: auto; }
.engage-step h3 { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.engage-step p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 900px) { .engage { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .engage::before { display: none; } }
@media (max-width: 480px) { .engage { grid-template-columns: 1fr; gap: 30px; } }