/* ==========================================================================
   Sevenhills Logistics — Shared Design Tokens & Base Utilities
   ========================================================================== */

:root {
    /* Brand Colors */
    --dc-sl-primary: #0B1F1A;
    --dc-sl-primary-light: #142e26;
    --dc-sl-primary-mid: #1a3d32;
    --dc-sl-accent: #84B78F;
    --dc-sl-accent-hover: #96c6a0;
    --dc-sl-accent-dark: #6a9e75;

    /* Neutrals */
    --dc-sl-white: #ffffff;
    --dc-sl-light: #f7f8fa;
    --dc-sl-light-alt: #eef0f4;
    --dc-sl-border: #dde1e8;
    --dc-sl-text: #1a1a2e;
    --dc-sl-text-secondary: #5a6272;
    --dc-sl-text-muted: #8a92a2;

    /* Layout */
    --dc-sl-container: 1400px;
    --dc-sl-gap: 2rem;
    --dc-sl-radius: 10px;
    --dc-sl-radius-lg: 16px;

    /* Motion */
    --dc-sl-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dc-sl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dc-sl-duration: 0.6s;
    --dc-sl-duration-fast: 0.35s;

    /* Typography scale */
    --dc-sl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dc-sl-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Container utility */
.dc-sl-container {
    width: 100%;
    max-width: var(--dc-sl-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Scroll animation states */
.dc-sl-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--dc-sl-duration) var(--dc-sl-ease-out),
                transform var(--dc-sl-duration) var(--dc-sl-ease-out);
}

.dc-sl-animate.dc-sl-visible {
    opacity: 1;
    transform: translateY(0);
}

.dc-sl-animate-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--dc-sl-duration) var(--dc-sl-ease-out),
                transform var(--dc-sl-duration) var(--dc-sl-ease-out);
}

.dc-sl-animate-left.dc-sl-visible {
    opacity: 1;
    transform: translateX(0);
}

.dc-sl-animate-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--dc-sl-duration) var(--dc-sl-ease-out),
                transform var(--dc-sl-duration) var(--dc-sl-ease-out);
}

.dc-sl-animate-right.dc-sl-visible {
    opacity: 1;
    transform: translateX(0);
}

.dc-sl-animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--dc-sl-duration) var(--dc-sl-ease-out),
                transform var(--dc-sl-duration) var(--dc-sl-ease-out);
}

.dc-sl-animate-scale.dc-sl-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.dc-sl-delay-1 { transition-delay: 0.1s; }
.dc-sl-delay-2 { transition-delay: 0.2s; }
.dc-sl-delay-3 { transition-delay: 0.3s; }
.dc-sl-delay-4 { transition-delay: 0.4s; }
.dc-sl-delay-5 { transition-delay: 0.5s; }
.dc-sl-delay-6 { transition-delay: 0.6s; }

/* Button base styles */
.dc-sl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-decoration: none;
    border-radius: var(--dc-sl-radius);
    transition: all var(--dc-sl-duration-fast) var(--dc-sl-ease);
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.4;
}

.dc-sl-btn-primary {
    background: #84B78F;
    color: #ffffff;
    border-color: #84B78F;
}

.dc-sl-btn-primary:hover {
    background: #0B1F1A;
    border-color: #0B1F1A;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(11, 31, 26, 0.25);
}

.dc-sl-btn-outline {
    background: transparent;
    color: var(--dc-sl-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.dc-sl-btn-outline:hover {
    background: var(--dc-sl-white);
    color: var(--dc-sl-primary);
    border-color: var(--dc-sl-white);
    transform: translateY(-2px);
}

.dc-sl-btn-outline-dark {
    background: transparent;
    color: var(--dc-sl-primary);
    border-color: var(--dc-sl-primary);
}

.dc-sl-btn-outline-dark:hover {
    background: var(--dc-sl-primary);
    color: var(--dc-sl-white);
    transform: translateY(-2px);
}

/* Section spacing */
.dc-sl-section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .dc-sl-section {
        padding: 4rem 0;
    }

    .dc-sl-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* Section label — dashed road + driving truck (matches .tst__eyebrow) */
.dc-sl-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--dc-sl-accent);
    margin-bottom: 14px;
    white-space: nowrap;
}

.dc-sl-section-label::before {
    content: '';
    display: inline-block;
    width: 66px;
    height: 16px;
    flex-shrink: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384B78F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 3h15v13H1z'/><path d='M16 8h4l3 4v5h-7V8z'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>"),
        repeating-linear-gradient(90deg, rgba(132, 183, 143, 0.5) 0 8px, transparent 8px 14px);
    background-position: 50px center, 0 center;
    background-size: 16px 16px, 48px 2px;
    background-repeat: no-repeat, no-repeat;
    animation: dcSlEyebrowDrive 3s ease-in-out infinite;
}

@keyframes dcSlEyebrowDrive {
    0%, 100% { background-position: 50px center, 0 center; }
    50%      { background-position: 56px center, 0 center; }
}

/* On dark backgrounds (e.g. CTA banners) keep the same color */
.dc-sl-section--dark .dc-sl-section-label,
.dc-sl-cta .dc-sl-section-label,
.dc-sl-stats .dc-sl-section-label {
    color: var(--dc-sl-accent);
}