/* ==========================================================================
   AI Elevation - Master Stylesheet (Fixed for WordPress/Elementor)
   Version: 1.0.2
   Description: Production CSS with !important overrides for theme conflicts
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables and Design Tokens
   ========================================================================== */

:root {
    /* Colour palette */
    --colour-primary: #1a365d;
    --colour-primary-light: #2c5282;
    --colour-primary-dark: #0f2440;

    --colour-secondary: #3182ce;
    --colour-secondary-light: #4299e1;
    --colour-secondary-dark: #2563a0;

    --colour-white: #ffffff;
    --colour-grey-50: #f9fafb;
    --colour-grey-100: #f3f4f6;
    --colour-grey-200: #e5e7eb;
    --colour-grey-300: #d1d5db;
    --colour-grey-400: #9ca3af;
    --colour-grey-500: #6b7280;
    --colour-grey-600: #4b5563;
    --colour-grey-700: #374151;
    --colour-grey-800: #1f2937;
    --colour-grey-900: #111827;
    --colour-black: #000000;

    --colour-success: #059669;
    --colour-success-light: #d1fae5;
    --colour-warning: #d97706;
    --colour-warning-light: #fef3c7;
    --colour-error: #dc2626;
    --colour-error-light: #fee2e2;
    --colour-info: #0284c7;
    --colour-info-light: #e0f2fe;

    --colour-bg-primary: var(--colour-white);
    --colour-bg-secondary: var(--colour-grey-50);
    --colour-bg-tertiary: var(--colour-grey-100);
    --colour-bg-dark: var(--colour-primary-dark);

    --colour-text-primary: var(--colour-grey-900);
    --colour-text-secondary: var(--colour-grey-600);
    --colour-text-muted: var(--colour-grey-500);
    --colour-text-inverse: var(--colour-white);
    --colour-text-link: var(--colour-secondary);
    --colour-text-link-hover: var(--colour-secondary-dark);

    --colour-border-light: var(--colour-grey-200);
    --colour-border-medium: var(--colour-grey-300);
    --colour-border-dark: var(--colour-grey-400);
    --colour-border-focus: var(--colour-secondary);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-mono: "Fira Code", Consolas, Menlo, monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 3.75rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --section-padding-md: var(--space-16);
    --section-padding-lg: var(--space-24);

    /* Layout */
    --container-max-width: 75rem;
    --container-narrow: 48rem;
    --container-wide: 90rem;
    --container-padding: var(--space-4);

    /* Radius */
    --radius-sm: 0.125rem;
    --radius-default: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 0.1);
    --shadow-focus: 0 0 0 3px rgb(49 130 206 / 0.4);

    /* Transitions */
    --transition-fast: 150ms ease;
}

/* ==========================================================================
   2. CSS Isolation Fix for Elementor Conflicts
   ========================================================================== */

.ai-elevation-page {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

.ai-elevation-page .elementor-widget-container {
    position: static !important;
    transform: none !important;
}

.ai-elevation-page section,
.ai-elevation-page .aie-section,
.ai-elevation-page .aie-hero {
    position: relative !important;
    z-index: auto !important;
    overflow: visible !important;
}

.ai-elevation-page p,
.ai-elevation-page h1,
.ai-elevation-page h2,
.ai-elevation-page h3,
.ai-elevation-page h4,
.ai-elevation-page h5,
.ai-elevation-page h6,
.ai-elevation-page li,
.ai-elevation-page span:not(.aie-pricing-badge):not(.aie-eyebrow):not(.aie-stats__value) {
    position: static !important;
    transform: none !important;
    float: none !important;
}

/* ==========================================================================
   3. Scoped Reset for Elementor Isolation
   ========================================================================== */

.ai-elevation-page {
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
    color: var(--colour-text-primary) !important;
    background-color: var(--colour-bg-primary) !important;
    -webkit-font-smoothing: antialiased !important;
}

.ai-elevation-page *,
.ai-elevation-page *::before,
.ai-elevation-page *::after {
    box-sizing: border-box !important;
}

.ai-elevation-page h1,
.ai-elevation-page h2,
.ai-elevation-page h3,
.ai-elevation-page h4 {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-tight) !important;
    color: var(--colour-primary) !important;
    margin: 0 0 var(--space-4) 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ai-elevation-page h1 { 
    font-size: clamp(2rem, 5vw, var(--font-size-4xl)) !important; 
}

.ai-elevation-page h2 { 
    font-size: clamp(1.75rem, 4vw, var(--font-size-3xl)) !important; 
}

.ai-elevation-page h3 { 
    font-size: var(--font-size-xl) !important; 
}

.ai-elevation-page p {
    margin: 0 0 var(--space-4) 0 !important;
    padding: 0 !important;
    color: var(--colour-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
}

.ai-elevation-page p:last-child { 
    margin-bottom: 0 !important; 
}

.ai-elevation-page ul,
.ai-elevation-page ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ai-elevation-page a {
    color: var(--colour-secondary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.ai-elevation-page a:hover {
    color: var(--colour-secondary-dark) !important;
}

.ai-elevation-page img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ==========================================================================
   4. Container
   ========================================================================== */

.aie-container {
    width: 100% !important;
    max-width: var(--container-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
    position: relative !important;
}

/* ==========================================================================
   5. Section
   ========================================================================== */

.aie-section {
    padding: var(--space-16) var(--space-4) !important;
    background-color: var(--colour-bg-primary) !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

@media (min-width: 768px) {
    .aie-section { 
        padding: var(--space-24) var(--space-6) !important; 
    }
}

.aie-section--alt {
    background-color: var(--colour-bg-secondary) !important;
}

.aie-section--dark {
    background-color: var(--colour-primary-dark) !important;
}

.ai-elevation-page .aie-section--dark h2,
.ai-elevation-page .aie-section--dark h3 {
    color: var(--colour-white) !important;
}

.ai-elevation-page .aie-section--dark p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ai-elevation-page .aie-section--dark .aie-case-study__title,
.ai-elevation-page .aie-section--dark .aie-eyebrow {
    color: var(--colour-white) !important;
}

.ai-elevation-page .aie-section--dark .aie-eyebrow {
    color: var(--colour-secondary-light) !important;
}

.ai-elevation-page .aie-section--dark .aie-stats__value {
    color: var(--colour-secondary-light) !important;
}

.ai-elevation-page .aie-section--dark .aie-stats__label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   6. Section Header
   ========================================================================== */

.aie-section-header {
    margin-bottom: var(--space-12) !important;
    position: relative !important;
}

.aie-section-header h2 {
    margin-bottom: var(--space-4) !important;
}

.aie-section-header p {
    color: var(--colour-text-secondary) !important;
    font-size: var(--font-size-md) !important;
}

.aie-section-header--centre {
    text-align: center !important;
    max-width: var(--container-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   7. Eyebrow
   ========================================================================== */

.aie-eyebrow {
    display: block !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--colour-secondary) !important;
    margin-bottom: var(--space-2) !important;
    position: relative !important;
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.aie-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--space-3) var(--space-6) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
    position: relative !important;
}

.aie-btn--primary {
    background-color: var(--colour-primary) !important;
    color: var(--colour-white) !important;
    border-color: var(--colour-primary) !important;
}

.aie-btn--primary:hover {
    background-color: var(--colour-primary-dark) !important;
    border-color: var(--colour-primary-dark) !important;
    color: var(--colour-white) !important;
}

.aie-btn--ghost {
    background-color: transparent !important;
    color: var(--colour-primary) !important;
    border-color: var(--colour-primary) !important;
}

.aie-btn--ghost:hover {
    background-color: var(--colour-primary) !important;
    color: var(--colour-white) !important;
}

.aie-btn--white {
    background-color: var(--colour-white) !important;
    color: var(--colour-primary) !important;
    border-color: var(--colour-white) !important;
}

.aie-btn--white:hover {
    background-color: transparent !important;
    color: var(--colour-white) !important;
    border-color: var(--colour-white) !important;
}

.aie-btn--large {
    padding: var(--space-4) var(--space-8) !important;
    font-size: var(--font-size-md) !important;
}

.aie-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-4) !important;
    margin-top: var(--space-8) !important;
    position: relative !important;
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.aie-hero {
    padding: var(--space-12) var(--space-4) var(--space-16) !important;
    background-color: var(--colour-bg-primary) !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

@media (min-width: 768px) {
    .aie-hero { 
        padding: var(--space-16) var(--space-6) var(--space-24) !important; 
    }
}

.aie-hero__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    align-items: center !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-hero__grid {
        grid-template-columns: 1.2fr 0.8fr !important;
        gap: var(--space-24) !important;
    }
}

.aie-hero__content { 
    order: 2 !important;
    position: relative !important;
}

@media (min-width: 768px) { 
    .aie-hero__content { 
        order: 1 !important; 
    } 
}

.aie-hero__title { 
    margin-bottom: var(--space-6) !important; 
}

.aie-hero__subtitle {
    font-size: var(--font-size-md) !important;
    color: var(--colour-text-secondary) !important;
    line-height: var(--line-height-relaxed) !important;
}

.aie-hero__media { 
    order: 1 !important;
    position: relative !important;
}

@media (min-width: 768px) { 
    .aie-hero__media { 
        order: 2 !important; 
    } 
}

.aie-hero__media img {
    border-radius: var(--radius-lg) !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* ==========================================================================
   10. Problem Section
   ========================================================================== */

.aie-problem {
    max-width: 50rem !important;
    position: relative !important;
}

.aie-problem__title {
    margin-bottom: var(--space-8) !important;
}

.aie-problem__text {
    font-size: var(--font-size-md) !important;
    color: var(--colour-text-secondary) !important;
    margin-bottom: var(--space-4) !important;
}

.aie-problem__list {
    margin-top: var(--space-8) !important;
    position: relative !important;
}

.aie-problem__item {
    position: relative !important;
    padding-left: var(--space-8) !important;
    margin-bottom: var(--space-4) !important;
    color: var(--colour-text-secondary) !important;
    display: block !important;
}

.aie-problem__item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
    width: 8px !important;
    height: 8px !important;
    background-color: var(--colour-secondary) !important;
    border-radius: var(--radius-full) !important;
}

/* ==========================================================================
   11. Process Section
   ========================================================================== */

.aie-process__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-process__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-8) !important;
    }
}

.aie-process__step { 
    text-align: left !important;
    position: relative !important;
}

@media (min-width: 768px) { 
    .aie-process__step { 
        text-align: center !important; 
    } 
}

.aie-process__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background-color: var(--colour-primary) !important;
    color: var(--colour-white) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-bold) !important;
    border-radius: var(--radius-full) !important;
    margin-bottom: var(--space-6) !important;
}

.aie-process__title {
    font-size: var(--font-size-lg) !important;
    margin-bottom: var(--space-4) !important;
}

.aie-process__text {
    color: var(--colour-text-secondary) !important;
    font-size: var(--font-size-base) !important;
}

/* ==========================================================================
   12. Services Grid (Card Component)
   ========================================================================== */

.aie-services__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
    position: relative !important;
}

@media (min-width: 600px) {
    .aie-services__grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (min-width: 900px) {
    .aie-services__grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}

.aie-card {
    padding: var(--space-8) !important;
    background-color: var(--colour-bg-primary) !important;
    border: 1px solid var(--colour-border-light) !important;
    border-radius: var(--radius-lg) !important;
    transition: border-color var(--transition-fast) !important;
    position: relative !important;
    display: block !important;
}

.aie-card:hover {
    border-color: var(--colour-secondary) !important;
}

.aie-card__icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: var(--space-6) !important;
    color: var(--colour-secondary) !important;
}

.aie-card__icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    fill: none !important;
}

.aie-card__title {
    font-size: var(--font-size-md) !important;
    margin-bottom: var(--space-4) !important;
}

.aie-card__text {
    font-size: var(--font-size-base) !important;
    color: var(--colour-text-secondary) !important;
    margin-bottom: var(--space-6) !important;
}

.aie-card__link {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--colour-secondary) !important;
}

.aie-card__link:hover {
    color: var(--colour-primary) !important;
}

/* ==========================================================================
   13. Case Study
   ========================================================================== */

.aie-case-study {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    align-items: center !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-case-study {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-24) !important;
    }
}

.aie-case-study__content {
    position: relative !important;
}

.aie-case-study__media {
    position: relative !important;
}

.aie-case-study__media img {
    border-radius: var(--radius-lg) !important;
    aspect-ratio: 800 / 450 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    background-color: var(--colour-bg-tertiary) !important;
}

.aie-case-study__title {
    margin-bottom: var(--space-6) !important;
}

/* ==========================================================================
   14. Stats
   ========================================================================== */

.aie-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-8) !important;
    margin: var(--space-8) 0 !important;
    padding-top: var(--space-6) !important;
    border-top: 1px solid var(--colour-border-light) !important;
    position: relative !important;
}

.aie-section--dark .aie-stats {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.aie-stats__item {
    text-align: left !important;
    position: relative !important;
}

.aie-stats__value {
    display: block !important;
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--colour-primary) !important;
    line-height: var(--line-height-tight) !important;
    position: relative !important;
}

.aie-stats__label {
    font-size: var(--font-size-sm) !important;
    color: var(--colour-text-muted) !important;
    margin: 0 !important;
}

/* ==========================================================================
   15. Testimonials
   ========================================================================== */

.aie-testimonials__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-testimonials__grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}

.aie-testimonial {
    padding: var(--space-8) !important;
    background-color: var(--colour-bg-primary) !important;
    border: 1px solid var(--colour-border-light) !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 !important;
    position: relative !important;
}

.aie-testimonial__quote {
    font-size: var(--font-size-base) !important;
    font-style: italic !important;
    color: var(--colour-text-primary) !important;
    margin-bottom: var(--space-8) !important;
    line-height: var(--line-height-relaxed) !important;
}

.aie-testimonial__quote::before { 
    content: "\201C" !important; 
    color: var(--colour-secondary) !important; 
    margin-right: 2px !important; 
}

.aie-testimonial__quote::after { 
    content: "\201D" !important; 
    color: var(--colour-secondary) !important; 
    margin-left: 2px !important; 
}

.aie-testimonial__footer {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
}

.aie-testimonial__author {
    font-style: normal !important;
}

.aie-testimonial__name {
    display: block !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--colour-text-primary) !important;
    font-size: var(--font-size-base) !important;
}

.aie-testimonial__role {
    display: block !important;
    font-size: var(--font-size-sm) !important;
    color: var(--colour-text-muted) !important;
}

/* ==========================================================================
   16. Reassurance
   ========================================================================== */

.aie-reassurance__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-reassurance__grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: var(--space-8) !important; 
    }
}

@media (min-width: 900px) {
    .aie-reassurance__grid { 
        grid-template-columns: repeat(4, 1fr) !important; 
    }
}

.aie-reassurance__item { 
    text-align: left !important;
    position: relative !important;
}

.aie-reassurance__icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: var(--space-4) !important;
    color: var(--colour-secondary) !important;
}

.aie-reassurance__icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    fill: none !important;
}

.aie-reassurance__title {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: var(--space-2) !important;
}

.aie-reassurance__text {
    font-size: var(--font-size-base) !important;
    color: var(--colour-text-secondary) !important;
}

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.aie-faq {
    max-width: 50rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
}

.aie-faq__item {
    border-bottom: 1px solid var(--colour-border-light) !important;
    position: relative !important;
}

.aie-faq__item:first-child {
    border-top: 1px solid var(--colour-border-light) !important;
}

.aie-faq__question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: var(--space-6) 0 !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--colour-text-primary) !important;
    cursor: pointer !important;
    list-style: none !important;
}

.aie-faq__question::-webkit-details-marker { 
    display: none !important; 
}

.aie-faq__question::after {
    content: "+" !important;
    font-size: var(--font-size-xl) !important;
    color: var(--colour-text-muted) !important;
    transition: transform var(--transition-fast) !important;
}

.aie-faq__item[open] .aie-faq__question::after {
    transform: rotate(45deg) !important;
}

.aie-faq__question:hover {
    color: var(--colour-secondary) !important;
}

.aie-faq__answer {
    padding-bottom: var(--space-6) !important;
}

.aie-faq__answer p {
    color: var(--colour-text-secondary) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ==========================================================================
   18. Final CTA
   ========================================================================== */

.aie-cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    align-items: center !important;
    position: relative !important;
}

@media (min-width: 768px) {
    .aie-cta {
        grid-template-columns: 1fr auto !important;
        gap: var(--space-24) !important;
    }
}

.aie-cta__title {
    color: var(--colour-white) !important;
    margin-bottom: var(--space-6) !important;
}

.ai-elevation-page .aie-cta__title {
    color: var(--colour-white) !important;
}

.aie-cta__text {
    font-size: var(--font-size-md) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: var(--space-8) !important;
    max-width: 35rem !important;
}

.ai-elevation-page .aie-cta__text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.aie-cta__portrait {
    width: 160px !important;
    height: 160px !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.aie-cta__portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   19. Trust Bar & ROI Enhancements
   ========================================================================== */

.aie-trust-bar {
    background-color: var(--colour-bg-primary) !important;
    padding: var(--space-4) 0 !important;
    border-bottom: 1px solid var(--colour-border-light) !important;
    position: relative !important;
}

.aie-trust-tagline {
    text-align: center !important;
    color: var(--colour-text-secondary) !important;
    margin-bottom: var(--space-3) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

.aie-trust-icons {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-8) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.aie-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    color: var(--colour-grey-500) !important;
}

.aie-trust-svg {
    height: 18px !important;
    width: auto !important;
    fill: currentColor !important;
}

.aie-trust-item span {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Pricing Badge in Hero */
.aie-pricing-badge {
    display: inline-block !important;
    padding: var(--space-1) var(--space-4) !important;
    background-color: var(--colour-success-light) !important;
    color: var(--colour-success) !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: var(--space-6) !important;
    position: relative !important;
}

/* ==========================================================================
   20. Footer
   ========================================================================== */

.aie-footer {
    background-color: var(--colour-bg-dark) !important;
    color: var(--colour-white) !important;
    padding: var(--space-12) 0 var(--space-6) !important;
    font-size: var(--font-size-sm) !important;
    position: relative !important;
}

.aie-footer__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-12) !important;
    margin-bottom: var(--space-12) !important;
}

.aie-footer__text {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: var(--space-2) !important;
}

.aie-footer__link {
    color: var(--colour-white) !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: var(--space-2) !important;
}

.aie-footer__link:hover {
    color: var(--colour-secondary-light) !important;
}

.aie-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: var(--space-6) !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   21. Table Styles (for Case Study)
   ========================================================================== */

.ai-elevation-page table {
    width: 100% !important;
    border-collapse: collapse !important;
    position: relative !important;
}

.ai-elevation-page .aie-section--dark table {
    color: var(--colour-white) !important;
}

.ai-elevation-page .aie-section--dark th,
.ai-elevation-page .aie-section--dark td {
    padding: 10px !important;
    text-align: left !important;
    color: var(--colour-white) !important;
}

.ai-elevation-page .aie-section--dark thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ai-elevation-page .aie-section--dark tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ai-elevation-page .aie-section--dark tbody tr:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   22. Elementor Override Resets
   ========================================================================== */

.ai-elevation-page .elementor-widget-container,
.ai-elevation-page .elementor-element,
.ai-elevation-page .elementor-widget {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ai-elevation-page .elementor-section,
.ai-elevation-page .elementor-container,
.ai-elevation-page .elementor-row,
.ai-elevation-page .elementor-column,
.ai-elevation-page .elementor-column-wrap,
.ai-elevation-page .elementor-widget-wrap {
    position: static !important;
    transform: none !important;
}

/* Prevent Elementor absolute positioning */
.ai-elevation-page [class*="elementor"] {
    position: static !important;
}

/* Exception for elements that need relative positioning */
.ai-elevation-page .aie-problem__item,
.ai-elevation-page .aie-hero__grid,
.ai-elevation-page .aie-services__grid,
.ai-elevation-page .aie-case-study,
.ai-elevation-page .aie-stats,
.ai-elevation-page .aie-cta {
    position: relative !important;
}

/* ==========================================================================
   23. WordPress Theme Override Resets
   ========================================================================== */

/* Reset any theme typography overrides */
.ai-elevation-page,
.ai-elevation-page * {
    text-shadow: none !important;
}

/* Ensure no floating elements cause overlap */
.ai-elevation-page::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.aie-section::after,
.aie-hero::after,
.aie-container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Prevent any inherited animations that might cause positioning issues */
.ai-elevation-page,
.ai-elevation-page * {
    animation: none !important;
}

/* Allow specific animations if needed */
.ai-elevation-page .aie-btn,
.ai-elevation-page .aie-card,
.ai-elevation-page a {
    animation: unset !important;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

/* ==========================================================================
   24. Responsive Breakpoints
   ========================================================================== */

@media (min-width: 768px) {
    :root { 
        --container-padding: var(--space-6) !important; 
    }
}

@media (min-width: 1025px) {
    :root { 
        --container-padding: var(--space-8) !important; 
    }
}

/* Override WordPress Global Content Size Constraint */
:root {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
}

/* Remove the constrained layout max-width for our page */
.ai-elevation-page,
.ai-elevation-page * {
    max-width: none !important;
}

/* Override WordPress is-layout-constrained */
.is-layout-constrained > .ai-elevation-page,
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

/* Force Elementor container to full width */
.elementor-element-43fd091,
.elementor-element-b4ce06c,
.elementor-widget-html .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Our containers handle their own max-width */
.aie-container {
    width: 100% !important;
    max-width: 75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ==========================================================================
   End of Stylesheet
   ========================================================================== */