/* GSK Productions — Social Media Marketing page-specific styles.
   Scoped under body.page-social. See DESIGN-SYSTEM.md. */

.page-social .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.page-social .hero-tags span {
  border: 1px solid rgba(255, 255, 255, .22);
  color: #DDE3F2;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.page-social .hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 44px;
}

.page-social .hero-strip div { background: rgba(255, 255, 255, .04); padding: 22px 20px; }
.page-social .hero-strip b { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.page-social .hero-strip small { color: #AAB3D0; font-size: 13px; }

@media (max-width: 760px) { .page-social .hero-strip { grid-template-columns: 1fr 1fr; } }

/* ---------- Promise / differentiator ---------- */
.page-social .promise {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) { .page-social .promise { grid-template-columns: 1fr; gap: 34px; } }

.page-social .promise-line {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  line-height: 1.3;
  margin: 8px 0 20px;
}

.page-social .promise-line .accent { color: var(--cyan); font-style: normal; }

.page-social .promise ul { list-style: none; margin-top: 18px; }
.page-social .promise li { display: flex; gap: 12px; padding: 9px 0; font-size: 16px; color: var(--body); }
.page-social .promise li .ck { color: var(--cyan); font-weight: 700; flex: none; }

.page-social .stack-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 34px;
}

.page-social .stack-card h3 { color: #fff; font-size: 20px; margin-bottom: 6px; }
.page-social .stack-card p { color: #B9C2DD; font-size: 14.5px; margin-bottom: 22px; }
.page-social .stack-flow { display: flex; flex-direction: column; gap: 2px; }
.page-social .stack-flow div {
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--cyan);
  padding: 13px 16px;
  font-size: 14.5px;
  color: #EAEEF8;
  font-weight: 500;
}

/* ---------- Service architecture (9 cards) ---------- */
.page-social .svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 900px) { .page-social .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .page-social .svc-grid { grid-template-columns: 1fr; } }

.page-social .svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: all .25s;
}

.page-social .svc-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: var(--shadow); }

.page-social .svc-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--cyan-soft);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.page-social .svc-ico svg { width: 22px; height: 22px; }
.page-social .svc-card h3 { font-size: 19px; margin-bottom: 10px; }
.page-social .svc-card p { font-size: 15px; color: var(--body); margin-bottom: 16px; }
.page-social .svc-card ul { list-style: none; }
.page-social .svc-card li { font-size: 14px; color: var(--body); padding: 3px 0 3px 18px; position: relative; }
.page-social .svc-card li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

/* ---------- Dark section wrapper (process / advantage) ---------- */
.page-social .dark {
  background: linear-gradient(160deg, var(--navy-ink), var(--navy));
  color: #fff;
}

.page-social .dark h2, .page-social .dark h3 { color: #fff; }
.page-social .dark .sec-head p { color: #C7CEE4; }

.page-social .steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

@media (max-width: 1000px) { .page-social .steps { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .page-social .steps { grid-template-columns: 1fr 1fr; } }

.page-social .steps .step {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 22px 16px;
  position: relative;
}

.page-social .steps .step .n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cyan);
  color: #08243A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}

.page-social .steps .step h4 { color: #fff; font-size: 15.5px; margin-bottom: 6px; }
.page-social .steps .step p { color: #AEB7D4; font-size: 13px; line-height: 1.55; }

/* ---------- Lead funnel ---------- */
.page-social .funnel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.page-social .funnel .node {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.page-social .funnel .node.hot { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-social .funnel .arw { color: var(--cyan); font-size: 20px; font-weight: 700; }

@media (max-width: 640px) {
  .page-social .funnel .arw { transform: rotate(90deg); }
  .page-social .funnel { flex-direction: column; }
}

/* ---------- Industries ---------- */
.page-social .ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 940px) { .page-social .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .page-social .ind-grid { grid-template-columns: 1fr; } }

.page-social .ind {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: all .22s;
}

.page-social .ind:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.page-social .ind .ind-ico { width: 26px; height: 26px; color: var(--cyan); margin-bottom: 12px; }
.page-social .ind .ind-ico svg { width: 100%; height: 100%; }
.page-social .ind h4 { font-size: 16px; margin-bottom: 5px; }
.page-social .ind p { font-size: 13px; color: var(--body); line-height: 1.5; }

/* ---------- Advantage ---------- */
.page-social .adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 860px) { .page-social .adv-grid { grid-template-columns: 1fr; } }

.page-social .adv {
  padding: 28px 26px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}

.page-social .adv .adv-ico { width: 28px; height: 28px; color: var(--cyan-bright); margin-bottom: 14px; }
.page-social .adv .adv-ico svg { width: 100%; height: 100%; }
.page-social .adv h4 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.page-social .adv p { color: #B9C2DD; font-size: 14.5px; }

/* ---------- Compliance ---------- */
.page-social .comp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 860px) { .page-social .comp { grid-template-columns: 1fr; } }

.page-social .comp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 24px;
}

.page-social .comp-card h4 { font-size: 16px; margin-bottom: 8px; }
.page-social .comp-card p { font-size: 14px; color: var(--body); }

.page-social .cite { font-size: 12.5px; color: var(--body); }