/**
 * SJB Services Page Styles
 * Main entry point with CSS variables
 */

/* ========================================
   CSS Variables (Define before imports)
======================================== */
:root {
    --color-primary: #0ea5e9;
    --color-secondary: #06b6d4;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-dark: #1e293b;
    --color-text-light: #64748b;
    --color-bg-light: #f8f9fa;
    --color-border: #e2e8f0;
}

/* ========================================
   Import Section Styles
======================================== */
@import './_hero.css';
@import './_intro.css';
@import './_services-grid.css';
@import './_cta.css';
@import './_responsive.css';

/* ========================================
   Base Services Page Styles
======================================== */
.sjb-services-page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all sections don't overflow */
.sjb-services-page > section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Section Header */
.sjb-section-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 100%;
}

.sjb-section-header__title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 14px;
    line-height: 1.2;
}

.sjb-section-header__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}