/* ==========================================================================
   PREMIUM PAGE SYSTEM — shared, sitewide (prefixed .pg- to avoid touching
   any existing shared/sitewide class). This extracts the reusable pattern
   already proven on /seo-services (.seoS-*), /digital-marketing-agency
   (.dma-*) and /about (.about-*) into ONE stylesheet, so pages upgraded from
   here on reuse a single component system instead of each re-declaring the
   same ~150 lines with a new prefix. seo-services.php and
   digital-marketing-agency.php are approved and untouched — they keep their
   own page-scoped copies; this file is for every page upgraded after them.
   ========================================================================== */

.pg-section { padding: 70px 0; }
.pg-lead { font-size: 17px; line-height: 1.7; color: var(--default-color); }

/* Trust / value strip */
.pg-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: -55px; position: relative; z-index: 3; }
.pg-strip-item {
  background: var(--surface-color); border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  padding: 22px 20px; box-shadow: 0 10px 30px rgba(20,20,30,.06);
}
.pg-strip-item .pg-strip-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-color); margin-bottom: 6px; }
.pg-strip-item .pg-strip-title { font-family: var(--heading-font); font-size: 16px; font-weight: 700; color: var(--heading-color); }
@media (max-width: 991px) { .pg-strip { grid-template-columns: repeat(2, 1fr); margin-top: -35px; } }
@media (max-width: 575px) { .pg-strip { grid-template-columns: 1fr; margin-top: 20px; } }

/* Why / 2-column */
.pg-why-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .pg-why-wrap { grid-template-columns: 1fr; } }
.pg-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 575px) { .pg-benefit-grid { grid-template-columns: 1fr; } }
.pg-benefit-card {
  background: var(--surface-color); border: 1px solid rgba(0,0,0,.06); border-radius: 14px;
  padding: 20px; transition: transform .25s ease, box-shadow .25s ease;
}
.pg-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,20,30,.08); }
.pg-benefit-icon {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient); color: #fff; font-size: 19px; margin-bottom: 12px;
}
.pg-benefit-card h3 { font-size: 15.5px; margin: 0 0 6px; }
.pg-benefit-card p { font-size: 13.5px; color: var(--default-color); margin: 0; }

/* Services / solutions grid */
.pg-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1200px) { .pg-services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .pg-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pg-services-grid { grid-template-columns: 1fr; } }
.pg-service-card {
  background: var(--surface-color); border: 1px solid rgba(0,0,0,.07); border-radius: 16px;
  padding: 26px 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.pg-service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20,20,30,.09); border-color: rgba(0,0,0,.02); }
.pg-service-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 88%); color: var(--accent-color); font-size: 20px; margin-bottom: 14px;
}
.pg-service-card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.3; }
.pg-service-card p { font-size: 13.5px; line-height: 1.6; color: var(--default-color); margin: 0 0 10px; flex-grow: 1; }
.pg-service-card a.pg-card-link { font-size: 13px; font-weight: 600; color: var(--accent-color); text-decoration: none; }
.pg-service-card a.pg-card-link:hover { text-decoration: underline; }

/* Process */
.pg-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .pg-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pg-process-grid { grid-template-columns: 1fr; } }
.pg-process-step { position: relative; padding-left: 4px; }
.pg-process-num { font-family: var(--heading-font); font-size: 30px; font-weight: 700; color: color-mix(in srgb, var(--accent-color), transparent 55%); line-height: 1; margin-bottom: 10px; }
.pg-process-step h3 { font-size: 16px; margin: 0 0 6px; }
.pg-process-step p { font-size: 13.5px; color: var(--default-color); margin: 0; }

/* Industries / relevance — dark */
.pg-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 991px) { .pg-industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pg-industries-grid { grid-template-columns: 1fr; } }
.pg-industry-card {
  background: var(--surface-color); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 22px; transition: border-color .25s ease, transform .25s ease;
}
.pg-industry-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-color), transparent 30%); }
.pg-industry-card h3 { font-size: 15px; margin: 0 0 8px; color: var(--heading-color); }
.pg-industry-card p { font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--default-color), white 20%); margin: 0 0 8px; }
.pg-industry-card a { font-size: 12.5px; font-weight: 600; color: var(--accent-color); text-decoration: none; }
.pg-industry-card a:hover { text-decoration: underline; }

/* Trust pills */
.pg-trust-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pg-trust-pill {
  background: var(--surface-color); border: 1px solid rgba(0,0,0,.07); border-radius: 100px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--heading-color);
}

/* Results / proof */
.pg-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 700px) { .pg-proof-grid { grid-template-columns: 1fr; } }
.pg-proof-item {
  background: var(--surface-color); border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  padding: 26px 20px; text-align: center;
}
.pg-proof-number { font-family: var(--heading-font); font-size: 30px; font-weight: 700; color: var(--accent-color); }
.pg-proof-label { font-size: 13px; color: var(--default-color); margin-top: 6px; }