/* ====================================
   SERVICES PAGE LAYOUT - TWO COLUMN
==================================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-3xl);
  align-items: start;
}

.services-main {
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.services-sidebar {
  top: var(--space-5xl);
}

/* ====================================
   TABLE OF CONTENTS (On this page)
==================================== */
.page-contents {
  background-color: var(--color-neutral-50);
  padding: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.page-contents h2 {
  font-size: var(--font-size-2xl);
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  border-bottom: 1px solid var(--color-neutral-200);
  padding-bottom: var(--space-md);
}

.contents-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section {
  scroll-margin-top: 100px; /* Adjust based on your header height + desired padding */
}

/* ====================================
   ENGAGEMENT BOX (Sidebar)
==================================== */
.engagement-box {
  background-color: var(--color-primary-light);
  border: 1px solid #C4BFE0;
  border-radius: 10px;
  padding: var(--space-lg);
}

.engagement-box h2 {
  font-size: var(--font-size-2xl);
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
}

.engagement-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg) 0;
}

.engagement-list li {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.engagement-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.engagement-list strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
}

.engagement-list p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-neutral-600);
  padding-bottom: var(--space-xs);
}

.engagement-arrangements {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background-color: rgba(45, 30, 110, 0.10);
  border-radius: 4px;
  line-height: var(--line-height-normal);
}

.engagement-box .btn {
  justify-content: center;
}

.engagement-box ul li::before {
  display: none;
}

/* ====================================
   CALLOUT COMPONENT
==================================== */
.callout {
  border-left: 6px solid var(--color-secondary);
  padding: var(--space-xs) var(--space-md) var(--space-md) var(--space-xl);
  margin: var(--space-lg) 0;
  background-color: transparent;
}

.callout h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  padding: 0;
  margin: 0 0 var(--space-sm) 0;
  line-height: var(--line-height-tight);
}

.callout em,
.callout .emphasis {
  color: var(--color-secondary);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.callout p {
  margin: var(--space-md) 0 0 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-neutral-600);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ====================================
   BACK TO TOP LINK
==================================== */
.back-to-top {
  display: none;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  background-color: white;
  border-top: 1px solid var(--color-neutral-200);
  text-align: left;
  color: var(--color-secondary);
  text-decoration: underline;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  transition: opacity var(--transition-normal);
  z-index: 50;
  top: auto; 
}

.back-to-top.show {
  display: block;
}


.back-to-top:hover {
  color: var(--color-primary);
  transform: none;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ====================================
   MOBILE RESPONSIVE (1024px and below)
==================================== */
@media screen and (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

@media screen and (max-width: 480px) {
  .back-to-top {
    bottom: var(--space-md);
    margin-top: var(--space-lg);
  }
}
  .services-sidebar {
    position: static;
  }

  .engagement-box {
    margin-top: 0;
  }

  .page-contents {
    top: var(--space-xl);
    z-index: 10;
  }

  .callout {
    border-left-width: 5px;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  }

  .callout h3 {
    font-size: var(--font-size-xl);
  }
}


/* ====================================
   CUSTOMER JOURNEY MAPPING PAGE
==================================== */
    .service-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        margin-top: 40px;
    }
    
    .service-option {
        background-color: var(--color-primary-light);
        border: 1px solid #C4BFE0;
        border-radius: 10px;
        padding: var(--space-lg);
    }
    
    .service-option h2 {
        font-size: var(--font-size-3xl);
        padding: 0;
        margin: 0 0 var(--space-md) 0;
        border-bottom: 2px solid var(--color-primary);
        padding-bottom: var(--space-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-dark);
    }
    
    .service-option p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-neutral-600);
        margin: var(--space-md) 0;
    }
    
    .service-option strong {
        color: var(--color-primary-dark);
    }
    
    .service-checklist {
        list-style: none;
        padding: 0;
        margin: var(--space-md) 0;
    }
    
    .service-checklist li {
        margin: var(--space-sm) 0;
        padding-left: 24px;
        position: relative;
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-neutral-600);
    }
    
    .service-checklist li:before {
        content: "✓";
        position: absolute;
        left: 20px;
        color: #22c55e;
        font-weight: bold;
        font-size: 20px;
    }
    
    .service-option .btn {
        margin-top: var(--space-md);
    }
    
    /* CTA section using engagement-box pattern */
    .cta-section {
        background-color: var(--color-primary-light);
        border: 1px solid #C4BFE0;
        border-radius: 10px;
        padding: var(--space-lg);
        margin-top: 60px;
    }
    
    .cta-section h2 {
        font-size: var(--font-size-2xl);
        padding: 0;
        margin: 0 0 var(--space-md) 0;
        border-bottom: 2px solid var(--color-primary);
        padding-bottom: var(--space-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-dark);
    }
    
    .cta-section p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-neutral-600);
        margin: var(--space-md) 0;
    }
    
    .cta-section .btn {
        margin-top: var(--space-md);
    }
    
    @media screen and (max-width: 1024px) {
        .service-options {
            grid-template-columns: 1fr;
        }
    }


/* ====================================
   MOBILE RESPONSIVE (480px and below)
==================================== */
@media screen and (max-width: 480px) {
  .services-grid {
    gap: var(--space-lg);
  }

  .page-contents {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .page-contents h2 {
    font-size: var(--font-size-xl);
  }

  .contents-list li {
    margin-bottom: var(--space-xs);
  }

  .engagement-box {
    padding: var(--space-md);
  }

  .engagement-box h2 {
    font-size: var(--font-size-xl);
  }

  .engagement-list li {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .callout {
    border-left-width: 4px;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
  }

  .callout h3 {
    font-size: var(--font-size-lg);
  }

  .callout p {
    font-size: var(--font-size-sm);
  }
}

/* ====================================
   ACCESSIBILITY & PREFERENCES
==================================== */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }

  .engagement-box,
  .page-contents {
    transition: none;
  }
}