/* AI & Automation service page - every rule is scoped to .ai-automation-page */

.ai-automation-page {
    --ai-primary: #175cff;
    --ai-primary-soft: rgba(23, 92, 255, .08);
    --ai-border: rgba(15, 23, 42, .08);
    --ai-dark-card: rgba(255, 255, 255, .06);
    --ai-dark-border: rgba(255, 255, 255, .14);
    --ai-heading: #262626;
}

/* breadcrumb on dark hero; the theme's compiled default divider is broken ("../../index.html") */
.ai-automation-page .ai-breadcrumb .breadcrumb { --bs-breadcrumb-divider: "/"; }
.ai-automation-page .ai-breadcrumb .breadcrumb-item,
.ai-automation-page .ai-breadcrumb .breadcrumb-item a,
.ai-automation-page .ai-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
}
.ai-automation-page .ai-breadcrumb .breadcrumb-item a:hover { color: #fff; }
.ai-automation-page .ai-breadcrumb .breadcrumb-item.active { color: #fff; }

.ai-automation-page .ai-eyebrow {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ai-automation-page .ai-value-list li {
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
}

/* hero concept illustration: question -> data sources -> answer */
.ai-automation-page .ai-flow {
    background: var(--ai-dark-card);
    border: 1px solid var(--ai-dark-border);
    border-radius: 1rem;
    padding: 1.75rem;
}
.ai-automation-page .ai-flow-card {
    background: #fff;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    color: #262626;
    box-shadow: 0 10px 30px rgba(0, 7, 23, .25);
}
/* the theme greys out all <p> inside .bg-gradient sections; these cards are white */
.ai-automation-page .ai-flow-card p { color: #374151; }
.ai-automation-page .ai-flow-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ai-primary);
    margin-bottom: .35rem;
}
.ai-automation-page .ai-flow-connector {
    width: 2px;
    height: 28px;
    margin: 0 auto;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .55) 0 4px, transparent 4px 8px);
}
.ai-automation-page .ai-flow-sources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
.ai-automation-page .ai-flow-source {
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--ai-dark-border);
    border-radius: .75rem;
    padding: .75rem .5rem;
    text-align: center;
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
}
.ai-automation-page .ai-flow-source i {
    display: block;
    font-size: 1.125rem;
    margin-bottom: .35rem;
    color: #ffc107;
}
.ai-automation-page .ai-flow-caption {
    color: rgba(255, 255, 255, .65);
    font-size: .8125rem;
}

/* generic cards */
.ai-automation-page .ai-card {
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
    transition: box-shadow .3s ease-in-out, transform .3s ease-in-out;
}
.ai-automation-page .ai-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    transform: translateY(-3px);
}
.ai-automation-page .ai-card .icon-box { margin-bottom: 1.25rem; }
.ai-automation-page .ai-card h3 { margin-bottom: .75rem; }
.ai-automation-page .ai-card p:last-child,
.ai-automation-page .ai-card ul:last-child { margin-bottom: 0; }

.ai-automation-page .ai-note {
    font-size: .9375rem;
    border-left: 3px solid var(--ai-primary);
    padding-left: 1rem;
}

/* data intelligence pipeline */
.ai-automation-page .ai-pipeline {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ai-step;
}
.ai-automation-page .ai-pipeline li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: .875rem;
    padding: 1rem 1.25rem;
}
.ai-automation-page .ai-pipeline li + li { margin-top: 1.75rem; }
.ai-automation-page .ai-pipeline li + li::before {
    content: "";
    position: absolute;
    left: 2.6rem;
    top: -1.75rem;
    width: 2px;
    height: 1.75rem;
    background: rgba(23, 92, 255, .35);
}
.ai-automation-page .ai-pipeline-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
}
.ai-automation-page .ai-pipeline h3 { margin-bottom: .2rem; }
.ai-automation-page .ai-pipeline p { margin-bottom: 0; font-size: .9375rem; }

/* checklist */
.ai-automation-page .ai-checklist li {
    display: flex;
    align-items: flex-start;
    padding: .35rem 0;
}
.ai-automation-page .ai-checklist li i { margin-top: .3rem; margin-right: .6rem; flex-shrink: 0; }

/* Keystone QS case study (dark section) */
.ai-automation-page .ai-case-label {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 2rem;
    background: rgba(23, 92, 255, .2);
    color: #9db9ff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
}
.ai-automation-page .ai-case-block {
    background: var(--ai-dark-card);
    border: 1px solid var(--ai-dark-border);
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
}
.ai-automation-page .ai-case-block h3 { color: #fff; }
.ai-automation-page .ai-case-block p,
.ai-automation-page .ai-case-block li { color: rgba(255, 255, 255, .78); }
.ai-automation-page .ai-case-block i { color: #ffc107; }

.ai-automation-page .ai-phone {
    max-width: 320px;
    margin: 0 auto;
    border: 10px solid #1f2937;
    border-radius: 2.25rem;
    background: #f8fafc;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
}
.ai-automation-page .ai-phone-head {
    background: var(--ai-primary);
    color: #fff;
    padding: 1rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
}
.ai-automation-page .ai-phone-body { padding: 1.25rem 1rem; }
.ai-automation-page .ai-bubble {
    max-width: 85%;
    padding: .7rem .9rem;
    border-radius: 1rem;
    font-size: .8125rem;
    line-height: 1.45;
    margin-bottom: .75rem;
}
.ai-automation-page .ai-bubble-user {
    margin-left: auto;
    background: var(--ai-primary);
    color: #fff;
    border-bottom-right-radius: .25rem;
}
.ai-automation-page .ai-bubble-bot {
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: .25rem;
}
.ai-automation-page .ai-bubble-steps {
    font-size: .75rem;
    color: #6b7280;
    margin-bottom: .75rem;
}
.ai-automation-page .ai-bubble-steps span {
    display: inline-block;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 1rem;
    padding: .15rem .55rem;
    margin: 0 .25rem .3rem 0;
}
.ai-automation-page .ai-concept-tag {
    color: rgba(255, 255, 255, .65);
    font-size: .8125rem;
}

/* rule-based vs AI comparison */
.ai-automation-page .ai-compare {
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    height: 100%;
}

/* small horizontal pipeline used for document processing */
.ai-automation-page .ai-doc-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
}
.ai-automation-page .ai-doc-steps li {
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 2rem;
    padding: .4rem .9rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ai-heading);
}
.ai-automation-page .ai-doc-steps li.ai-doc-arrow {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ai-primary);
}

/* approach timeline */
.ai-automation-page .ai-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
}
.ai-automation-page .ai-timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, .2);
}
.ai-automation-page .ai-timeline li { position: relative; text-align: center; }
.ai-automation-page .ai-step-num {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ai-primary);
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 0 6px rgba(23, 92, 255, .25);
}
.ai-automation-page .ai-timeline h3 { color: #fff; }
.ai-automation-page .ai-timeline p { color: rgba(255, 255, 255, .75); font-size: .9375rem; margin-bottom: 0; }

/* safeguards */
.ai-automation-page .ai-safeguard {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ai-automation-page .ai-safeguard .ai-pipeline-icon { width: 40px; height: 40px; }

/* enquiry form */
.ai-automation-page .ai-form-card {
    background: #fff;
    border: 1px solid var(--ai-border);
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
}
.ai-automation-page .ai-form-card .form-label { font-weight: 600; color: var(--ai-heading); font-size: .9375rem; }
.ai-automation-page .ai-form-card .form-control,
.ai-automation-page .ai-form-card .form-select { padding: .75rem 1rem; border-radius: .5rem; }

/* keyboard focus visibility */
.ai-automation-page a:focus-visible,
.ai-automation-page button:focus-visible,
.ai-automation-page .form-control:focus-visible,
.ai-automation-page .form-select:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
    box-shadow: none;
}

@media (max-width: 1199.98px) {
    .ai-automation-page .ai-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
    .ai-automation-page .ai-timeline::before {
        top: 0;
        bottom: 0;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .ai-automation-page .ai-timeline li {
        text-align: left;
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 1.25rem;
    }
    .ai-automation-page .ai-step-num { grid-row: span 2; margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    .ai-automation-page .ai-flow { padding: 1.25rem; }
    .ai-automation-page .ai-flow-sources { grid-template-columns: repeat(2, 1fr); }
    .ai-automation-page .ai-card,
    .ai-automation-page .ai-form-card { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-automation-page *,
    .ai-automation-page *::before,
    .ai-automation-page *::after {
        transition: none !important;
        animation: none !important;
    }
    .ai-automation-page [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
    .ai-automation-page .ai-card:hover { transform: none; }
}