/* ============================================================
   SERVICES.CSS — Services Page-Specific Styles
   
   Production CSS for the Sai Agency Services page.
   Works alongside the global design system:
   variables.css, global.css, components.css, homepage.css,
   navigation.css, footer.css, utilities.css, responsive.css
   ============================================================ */

/* ─── SERVICES HERO ─── */
.services-hero {
   position: relative;
   min-height: 60vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding-top: var(--space-3xl);
   padding-bottom: var(--space-2xl);
   overflow: hidden;
 }
 
 .services-hero .hero__content {
   position: relative;
   z-index: 10;
   max-width: 820px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-lg);
 }
 
 .services-hero .hero__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .services-hero h1 {
   color: var(--brand-navy);
 }
 
 .services-hero .hero__cta-group {
   display: flex;
   /* flex-wrap: wrap; */
   gap: var(--space-md);
   justify-content: center;
   margin-top: var(--space-sm);
 }
 
 /* ─── SERVICE OVERVIEW ─── */
 .services-overview {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
 }
 
 .services-overview__label {
   display: block;
   margin-bottom: var(--space-md);
 }
 
 .services-overview__headline {
   margin-bottom: var(--space-lg);
 }
 
 .services-overview__lead {
   margin-bottom: var(--space-md);
 }
 
 /* ─── CORE SERVICES ─── */
 .services-core {
   background-color: var(--surface-slate);
 }
 
 .services-core__header {
   text-align: center;
   max-width: 800px;
   margin: 0 auto var(--space-2xl);
 }
 
 .services-core__header-label {
   display: block;
   margin-bottom: var(--space-md);
 }
 
 .services-core__header-desc {
   margin-top: var(--space-md);
 }
 
 /* Service card feature list */
 .services-feature-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
   border-top: 1px solid var(--border-subtle);
   padding-top: var(--space-md);
 }
 
 .services-feature-item {
   display: flex;
   gap: var(--space-sm);
 }
 
 /* ─── HOW IT WORKS / PROCESS ─── */
 .services-process {
   max-width: 800px;
   margin: 0 auto;
 }
 
 .services-process__steps {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
   position: relative;
 }
 
 /* Vertical connector line */
 .services-process__steps::before {
   content: '';
   position: absolute;
   left: 23px;
   top: 48px;
   bottom: 48px;
   width: 2px;
   background: linear-gradient(to bottom, var(--border-subtle), var(--brand-amber), var(--border-subtle));
   opacity: 0.4;
 }
 
 .services-process__cta {
   text-align: center;
   margin-top: var(--space-3xl);
 }
 
 /* ─── CATEGORIES SECTION ─── */
 .services-categories {
   background-color: var(--surface-slate);
 }
 
 /* ─── AUDIENCE SECTIONS (For Retailers / For Brands) ─── */
 .services-audience {
   align-items: center;
   gap: 80px;
 }
 
 .services-audience__badge {
   margin-bottom: var(--space-lg);
 }
 
 .services-audience__headline {
   margin-bottom: var(--space-md);
 }
 
 .services-audience__desc {
   margin-bottom: var(--space-lg);
 }
 
 .services-audience__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   margin-bottom: var(--space-xl);
 }
 
 .services-audience__list-item {
   display: flex;
   gap: var(--space-sm);
 }
 
 .services-audience__actions {
   display: flex;
   gap: var(--space-md);
   flex-wrap: wrap;
 }
 
 /* Q&A Card */
 .services-qa-card {
   padding: var(--space-2xl);
 }
 
 .services-qa-card__title {
   font-size: 20px;
   margin-bottom: var(--space-xl);
 }
 
 .services-qa-card__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
 }
 
 .services-qa-card__question {
   font-size: 18px;
   margin-bottom: var(--space-xs);
 }
 
 /* Capabilities Card */
 .services-capabilities-card {
   padding: var(--space-2xl);
 }
 
 .services-capabilities-card__title {
   font-size: 24px;
   margin-bottom: var(--space-xl);
 }
 
 .services-capabilities-card__list {
   display: flex;
   flex-direction: column;
 }
 
 .services-capabilities-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid var(--border-subtle);
 }
 
 .services-capabilities-row:last-child {
   border-bottom: none;
 }
 
 .services-capabilities-row__value {
   font-size: 16px;
 }
 
 /* ─── FOR BRANDS SECTION ─── */
 .services-brands-section {
   background-color: var(--surface-slate);
 }
 
 /* ─── TRUST SECTION ─── */
 .services-trust-stats {
   margin-bottom: var(--space-3xl);
 }
 
 .services-trust-badge-col {
   display: flex;
   flex-direction: column;
 }
 
 .services-trust-badge-label {
   font-size: 14px;
   font-weight: 500;
 }
 
 .services-trust-badge-sub {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.4);
 }
 
 /* ─── FAQ SECTION ─── */
 .services-faq__container {
   max-width: 800px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
 /* ─── CONTACT CTA ─── */
 .services-cta__content {
   position: relative;
   z-index: 10;
   max-width: 600px;
 }
 
 .services-cta__label {
   display: block;
   margin-bottom: var(--space-md);
 }
 
 .services-cta__headline {
   margin-bottom: var(--space-lg);
 }
 
 .services-cta__desc {
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: var(--space-2xl);
 }
 
 .services-cta__actions {
   display: flex;
   gap: var(--space-md);
   flex-wrap: wrap;
   margin-bottom: var(--space-2xl);
 }
 
 .services-cta__contact {
   display: flex;
   gap: var(--space-xl);
   flex-wrap: wrap;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
 }
 
 .services-cta__contact-item {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
 }
 
 .services-cta__est {
   display: flex;
   align-items: center;
   gap: var(--space-md);
   color: rgba(255, 255, 255, 0.4);
 }
 
 .services-cta__est-line {
   width: 48px;
   height: 1px;
   background: rgba(255, 255, 255, 0.2);
 }
 
 
 /* ============================================================
    RESPONSIVE — SERVICES PAGE SPECIFIC
    ============================================================ */
 
 /* ─── MOBILE (max-width: 767px) ─── */
 @media (max-width: 767px) {
   .services-hero {
     min-height: 50vh;
     padding-top: calc(var(--space-2xl) + 60px);
     padding-bottom: var(--space-xl);
   }
 
   .services-audience {
     gap: var(--space-xl);
   }
 
   .services-qa-card,
   .services-capabilities-card {
     padding: var(--space-xl);
   }
 
   .services-capabilities-card__title {
     font-size: 20px;
   }
 
   .services-process__steps::before {
     left: 23px;
     top: 40px;
     bottom: 40px;
   }
 
   .services-cta__contact {
     flex-direction: column;
     gap: var(--space-md);
   }
 
   /* Reorder brands section on mobile: content first, card second */
   .services-brands-grid {
     display: flex;
     flex-direction: column;
   }
 
   .services-brands-grid .services-capabilities-card {
     order: 2;
   }
 
   .services-brands-grid .services-audience__content {
     order: 1;
   }
 }
 
 /* ─── TABLET (768px+) ─── */
 @media (min-width: 768px) {
   .services-trust-badges {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
 /* ─── DESKTOP (1024px+) ─── */
 @media (min-width: 1024px) {
   .services-trust-badges {
     grid-template-columns: repeat(5, 1fr);
   }
 }